rework clientwidth binds and size defaults for histograms

web/frontend/src/generic/plots/Histogram.svelte

@@ -21,8 +21,8 @@
 
   export let data;
   export let usesBins = false;
-  export let width = 500;
-  export let height = 300;
+  export let width = null;
+  export let height = 250;
   export let title = "";
   export let xlabel = "";
   export let xunit = "";
@@ -226,10 +226,13 @@
   $: sizeChanged(width, height);
 </script>
 
-{#if data.length > 0}
-  <div bind:this={plotWrapper} />
-{:else}
-  <Card class="mx-4" body color="warning"
-    >Cannot render histogram: No data!</Card
-  >
-{/if}
+<!-- Define Wrapper and NoData Card within $width -->
+<div bind:clientWidth={width}>
+  {#if data.length > 0}
+    <div bind:this={plotWrapper} />
+  {:else}
+    <Card class="mx-4" body color="warning"
+      >Cannot render histogram: No data!</Card
+    >
+  {/if}
+</div>

web/frontend/src/generic/plots/MetricPlot.svelte

@@ -117,6 +117,7 @@
 
   export let metric;
   export let scope = "node";
+  export let width = null;
   export let height = 300;
   export let timestep;
   export let series;
@@ -130,8 +131,6 @@
   export let numaccs = 0;
   export let zoomState = null;
 
-  let width;
-
   if (useStatsSeries == null) useStatsSeries = statisticsSeries != null;
   if (useStatsSeries == false && series == null) useStatsSeries = true;
 

web/frontend/src/generic/plots/Scatter.svelte

@@ -146,8 +146,8 @@
     export let Y;
     export let S = null;
     export let color = '#0066cc';
-    export let width;
-    export let height;
+    export let width = 250;
+    export let height = 300;
     export let xLabel;
     export let yLabel;