Restructure frontend svelte file src folder

- Goal: Dependency structure mirrored in file structure
2026-04-03 14:37:29 +02:00 · 2024-07-26 12:34:18 +02:00
parent 18369da5bc
commit 3ca1127685
52 changed files with 142 additions and 109 deletions
--- a/web/frontend/src/generic/plots/Polar.svelte
+++ b/web/frontend/src/generic/plots/Polar.svelte
@@ -0,0 +1,124 @@
+<!--
+    @component Polar Plot based on chartJS Radar
+
+    Properties:
+    - `metrics [String]`: Metric names to display as polar plot
+    - `cluster GraphQL.Cluster`: Cluster Object of the parent job
+    - `subCluster GraphQL.SubCluster`: SubCluster Object of the parent job
+    - `jobMetrics [GraphQL.JobMetricWithName]`: Metric data
+    - `height Number?`: Plot height [Default: 365]
+ -->
+
+<script>
+    import { getContext } from 'svelte'
+    import { Radar } from 'svelte-chartjs';
+    import {
+        Chart as ChartJS,
+        Title,
+        Tooltip,
+        Legend,
+        Filler,
+        PointElement,
+        RadialLinearScale,
+        LineElement
+    } from 'chart.js';
+
+    ChartJS.register(
+        Title,
+        Tooltip,
+        Legend,
+        Filler,
+        PointElement,
+        RadialLinearScale,
+        LineElement
+    );
+
+    export let metrics
+    export let cluster
+    export let subCluster
+    export let jobMetrics
+    export let height = 365
+
+    const getMetricConfig = getContext("getMetricConfig")
+
+    const labels = metrics.filter(name => {
+        if (!jobMetrics.find(m => m.name == name && m.scope == "node")) {
+            console.warn(`PolarPlot: No metric data for '${name}'`)
+            return false
+        }
+        return true
+    })
+
+    const getValuesForStat = (getStat) => labels.map(name => {
+        const peak = getMetricConfig(cluster, subCluster, name).peak
+        const metric = jobMetrics.find(m => m.name == name && m.scope == "node")
+        const value = getStat(metric.metric) / peak
+        return value <= 1. ? value : 1.
+    })
+
+    function getMax(metric) {
+        let max = 0
+        for (let series of metric.series)
+            max = Math.max(max, series.statistics.max)
+        return max
+    }
+
+    function getAvg(metric) {
+        let avg = 0
+        for (let series of metric.series)
+            avg += series.statistics.avg
+        return avg / metric.series.length
+    }
+
+    const data = {
+        labels: labels,
+        datasets: [
+            {
+                label: 'Max',
+                data: getValuesForStat(getMax),
+                fill: 1,
+                backgroundColor: 'rgba(0, 102, 255, 0.25)',
+                borderColor: 'rgb(0, 102, 255)',
+                pointBackgroundColor: 'rgb(0, 102, 255)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: '#fff',
+                pointHoverBorderColor: 'rgb(0, 102, 255)'
+            },
+            {
+                label: 'Avg',
+                data: getValuesForStat(getAvg),
+                fill: true,
+                backgroundColor: 'rgba(255, 153, 0, 0.25)',
+                borderColor: 'rgb(255, 153, 0)',
+                pointBackgroundColor: 'rgb(255, 153, 0)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: '#fff',
+                pointHoverBorderColor: 'rgb(255, 153, 0)'
+            }
+        ]
+    }
+
+    // No custom defined options but keep for clarity 
+    const options = {
+        maintainAspectRatio: false,
+        animation: false,
+        scales: { // fix scale
+            r: {
+                suggestedMin: 0.0,
+                suggestedMax: 1.0
+            }
+        }
+    }
+
+</script>
+
+<div class="chart-container">
+    <Radar {data} {options} {height}/>
+</div>
+
+<style>
+    .chart-container {
+        margin: auto;
+        position: relative;
+    }
+</style>