Review polar plot scaling, make tabbing dependent on config

- remove polar min data

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

@@ -5,7 +5,7 @@
   - `polarMetrics [Object]?`: Metric names and scaled peak values for rendering polar plot [Default: [] ]
   - `polarData [GraphQL.JobMetricStatWithName]?`: Metric data [Default: null]
   - `canvasId String?`: Unique ID for correct parallel chart.js rendering [Default: "polar-default"]
-  - `height Number?`: Plot height [Default: 365]
+  - `showLegend Bool?`: Legend Display [Default: true]
 -->
 
 <script>
@@ -38,22 +38,28 @@
     polarMetrics = [],
     polarData = [],
     canvasId = "polar-default",
-    height = 350,
+    size = 375,
+    showLegend = true,
   } = $props();
 
-  /* Const Init */
+  /* Derived */
-  const options = {
+  const options = $derived({
-    maintainAspectRatio: true,
+    responsive: true, // Default
+    maintainAspectRatio: true, // Default
     animation: false,
     scales: { // fix scale
       r: {
         suggestedMin: 0.0,
         suggestedMax: 1.0
       }
+    },
+    plugins: {
+      legend: {
+        display: showLegend
       }
     }
+  })
 
-  /* Derived */
   const labels = $derived(polarMetrics
     .filter((m) => (m.peak != null))
     .map(pm => pm.name)
@@ -77,7 +83,7 @@
       {
         label: 'Avg',
         data: loadData('avg'), // Node Scope Only
-        fill: 2,
+        fill: true, // fill: 2 if min active
         backgroundColor: 'rgba(255, 210, 0, 0.25)',
         borderColor: 'rgb(255, 210, 0)',
         pointBackgroundColor: 'rgb(255, 210, 0)',
@@ -85,17 +91,17 @@
         pointHoverBackgroundColor: '#fff',
         pointHoverBorderColor: 'rgb(255, 210, 0)'
       },
-      {
+      // {
-        label: 'Min',
+      //   label: 'Min',
-        data: loadData('min'), // Node Scope Only
+      //   data: loadData('min'), // Node Scope Only
-        fill: true,
+      //   fill: true,
-        backgroundColor: 'rgba(255, 0, 0, 0.25)',
+      //   backgroundColor: 'rgba(255, 0, 0, 0.25)',
-        borderColor: 'rgb(255, 0, 0)',
+      //   borderColor: 'rgb(255, 0, 0)',
-        pointBackgroundColor: 'rgb(255, 0, 0)',
+      //   pointBackgroundColor: 'rgb(255, 0, 0)',
-        pointBorderColor: '#fff',
+      //   pointBorderColor: '#fff',
-        pointHoverBackgroundColor: '#fff',
+      //   pointHoverBackgroundColor: '#fff',
-        pointHoverBorderColor: 'rgb(255, 0, 0)'
+      //   pointHoverBorderColor: 'rgb(255, 0, 0)'
-      }
+      // }
     ]
   });
 
@@ -127,15 +133,14 @@
       {
         type: 'radar',
         data: data,
-        options: options,
+        options: options
-        height: height
       }
     );
   });
 </script>
 
 <!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
-<div class="chart-container">
+<div class="chart-container d-flex justify-content-center" style="--container-width: {size}px; --container-height: {size}px">
   <canvas id={canvasId}></canvas>
 </div>
 
@@ -143,5 +148,7 @@
   .chart-container {
     margin: auto;
     position: relative;
+    height: var(--container-height);
+    width: var(--container-width);
   }
 </style>

web/frontend/src/job/JobSummary.svelte

@@ -29,19 +29,30 @@
   const showPolarTab = !!getContext("cc-config")[`jobView_showPolarPlot`];
 </script>
 
-<Card class="overflow-auto" style="width: {width}; height: {height}">
+<Card style="width: {width}; height: {height}">
+  {#if showFootprintTab  && !showPolarTab}
+    <JobFootprintBars {job} />
+  {:else if !showFootprintTab  && showPolarTab}
+    <JobFootprintPolar {job}/>
+  {:else if showFootprintTab  && showPolarTab}
     <TabContent>
-    {#if showFootprintTab}
+      <TabPane tabId="foot" tab="Footprint" active>
-      <TabPane tabId="foot" tab="Footprint" active={showFootprintTab}>
         <!-- Bars CardBody Here-->
         <JobFootprintBars {job} />
       </TabPane>
-    {/if}
+      <TabPane tabId="polar" tab="Polar">
-    {#if showPolarTab}
-      <TabPane tabId="polar" tab="Polar" active={showPolarTab && !showFootprintTab}>
         <!-- Polar Plot CardBody Here -->
-        <JobFootprintPolar {job} />
+        <JobFootprintPolar {job} showLegend={false}/>
       </TabPane>
-    {/if}
     </TabContent>
+  {:else}
+    <Card color="info" class="m-2">
+      <CardHeader class="mb-0">
+        <b>Config</b>
+      </CardHeader>
+      <CardBody>
+        <p class="mb-1">Footprint and PolarPlot Display Disabled.</p>
+      </CardBody>
+    </Card>
+  {/if}
 </Card>

web/frontend/src/job/jobsummary/JobFootprintBars.svelte

@@ -127,7 +127,7 @@
   }
 </script>
 
-<CardBody>
+<CardBody class="overflow-auto">
   {#if jobFootprintData.length === 0}
     <div class="text-center">No footprint data for job available.</div>
   {:else}

web/frontend/src/job/jobsummary/JobFootprintPolar.svelte

@@ -3,6 +3,7 @@
 
   Properties:
   - `job Object`: The GQL job object
+  - `showLegend Bool?`: Polar Legend Display
 -->
 
 <script>
@@ -22,7 +23,8 @@
 
   /* Svelte 5 Props */
   let {
-    job
+    job,
+    showLegend
   } = $props();
 
   /* Const Init */
@@ -47,8 +49,8 @@
       jobStats(id: $dbid, metrics: $selectedMetrics) {
         name
         data {
-          min
           avg
+          ## min
           max
         }
       }
@@ -63,7 +65,7 @@
   }));
 </script>
 
-<CardBody>
+<CardBody class="py-0 overflow-hidden">
   {#if $polarData.fetching}
     <Spinner />
   {:else if $polarData.error}
@@ -71,6 +73,7 @@
   {:else}
     <Polar
       {polarMetrics}
+      {showLegend}
       polarData={$polarData.data.jobStats}
     />
   {/if}