review plot rendering and doublemetric opts

web/frontend/src/status/DashInternal.svelte

@@ -58,10 +58,6 @@
   let to = $state(new Date(Date.now()));
   let stackedFrom = $state(Math.floor(Date.now() / 1000) - 14400);
   let colWidthJobs = $state(0);
-  let colWidthRoof = $state(0);
-  let colWidthTotals =$state(0);
-  let colWidthStacked1 = $state(0);
-  let colWidthStacked2 = $state(0);
 
   /* Derived */
   // States for Stacked charts
@@ -531,13 +527,11 @@
         </Col>
 
         <Col> <!-- Job Roofline -->
-          <div bind:clientWidth={colWidthRoof}>
+          <div>
             {#key $statusQuery?.data?.jobsMetricStats}
               <Roofline
                 useColors={true}
                 allowSizeChange
-                width={colWidthRoof}
-                height={300}
                 subCluster={clusterInfo?.roofData ? clusterInfo.roofData : null}
                 roofData={transformJobsStatsToData($statusQuery?.data?.jobsMetricStats)}
                 jobsData={transformJobsStatsToInfo($statusQuery?.data?.jobsMetricStats)}
@@ -547,24 +541,23 @@
         </Col>
 
         <Col> <!-- Total Cluster Metric in Time SUMS-->
-          <div bind:clientWidth={colWidthTotals}>
-            <DoubleMetric
-              width={colWidthTotals}
-              timestep={$statusQuery?.data?.clusterMetrics[0]?.timestep || 60}
-              numNodes={$statusQuery?.data?.clusterMetrics?.nodeCount || 0}
-              metricData={$statusQuery?.data?.clusterMetrics?.metrics || []}
-              cluster={presetCluster}
-              fixLinewidth={2}
-            />
+          <div>
+            {#key $statusQuery?.data?.clusterMetrics}
+              <DoubleMetric
+                timestep={$statusQuery?.data?.clusterMetrics[0]?.timestep || 60}
+                numNodes={$statusQuery?.data?.clusterMetrics?.nodeCount || 0}
+                metricData={$statusQuery?.data?.clusterMetrics?.metrics || []}
+                cluster={presetCluster}
+              />
+            {/key}
           </div>
         </Col>
 
         <Col> <!-- Stacked SchedState -->
-          <div bind:clientWidth={colWidthStacked1}>
+          <div>
             {#key $statesTimed?.data?.nodeStates}
               <Stacked
                 data={$statesTimed?.data?.nodeStates}
-                width={colWidthStacked1}
                 height={330}
                 xlabel="Time"
                 ylabel="Nodes"
@@ -577,11 +570,10 @@
         </Col>
 
         <Col> <!-- Stacked Healthstate -->
-          <div bind:clientWidth={colWidthStacked2}>
+          <div>
             {#key $statesTimed?.data?.healthStates}
               <Stacked
                 data={$statesTimed?.data?.healthStates}
-                width={colWidthStacked2}
                 height={330}
                 xlabel="Time"
                 ylabel="Nodes"

web/frontend/src/status/dashdetails/StatusDash.svelte

@@ -42,9 +42,6 @@
 
   /* State Init */
   let pieWidth = $state(0);
-  let stackedWidth1 = $state(0);
-  let stackedWidth2 = $state(0);
-  let plotWidths = $state([]);
   let from = $state(new Date(Date.now() - 5 * 60 * 1000));
   let to = $state(new Date(Date.now()));
   let stackedFrom = $state(Math.floor(Date.now() / 1000) - 14400);
@@ -414,14 +411,13 @@
 {#if $statesTimed.data}
   <Row cols={{ md: 2 , sm: 1}} class="mb-3 justify-content-center">
     <Col class="px-3 mt-2 mt-lg-0">
-      <div bind:clientWidth={stackedWidth1}>
+      <div>
         {#key $statesTimed?.data?.nodeStates}
           <h4 class="text-center">
             {cluster.charAt(0).toUpperCase() + cluster.slice(1)} Node States Over Time
           </h4>
           <Stacked
             data={$statesTimed?.data?.nodeStates}
-            width={stackedWidth1 * 0.95}
             xlabel="Time"
             ylabel="Nodes"
             yunit = "#Count"
@@ -432,14 +428,13 @@
       </div>
     </Col>
     <Col class="px-3 mt-2 mt-lg-0">
-      <div bind:clientWidth={stackedWidth2}>
+      <div>
         {#key $statesTimed?.data?.healthStates}
           <h4 class="text-center">
             {cluster.charAt(0).toUpperCase() + cluster.slice(1)} Health States Over Time
           </h4>
           <Stacked
             data={$statesTimed?.data?.healthStates}
-            width={stackedWidth2 * 0.95}
             xlabel="Time"
             ylabel="Nodes"
             yunit = "#Count"
@@ -628,13 +623,11 @@
         </Card>
       </Col>
       <Col class="px-3 mt-2 mt-lg-0">
-        <div bind:clientWidth={plotWidths[i]}>
+        <div>
           {#key $statusQuery?.data?.nodeMetrics}
             <Roofline
               useColors={true}
               allowSizeChange
-              width={plotWidths[i] - 10}
-              height={300}
               cluster={cluster}
               subCluster={subCluster}
               roofData={transformNodesStatsToData($statusQuery?.data?.nodeMetrics.filter(
@@ -650,13 +643,11 @@
         </div>
       </Col>
       <Col class="px-3 mt-2 mt-lg-0">
-        <div bind:clientWidth={plotWidths[i]}>
+        <div>
           {#key $statusQuery?.data?.jobsMetricStats}
             <Roofline
               useColors={true}
               allowSizeChange
-              width={plotWidths[i] - 10}
-              height={300}
               subCluster={subCluster}
               roofData={transformJobsStatsToData($statusQuery?.data?.jobsMetricStats.filter(
                   (data) => data.subCluster == subCluster.name,