@perses-dev/gauge-chart-plugin 0.10.0 → 0.11.1

package/lib/cjs/GaugeChartBase.js

@@ -14,18 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    GaugeChartBase: function() {
+Object.defineProperty(exports, "GaugeChartBase", {
+    enumerable: true,
+    get: function() {
         return GaugeChartBase;
-    },
-    getResponsiveValueSize: function() {
-        return getResponsiveValueSize;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -42,17 +34,40 @@ const _renderers = require("echarts/renderers");
     _components1.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const PROGRESS_WIDTH = 16;
 // adjusts when to show pointer icon
 const GAUGE_SMALL_BREAKPOINT = 170;
 function GaugeChartBase(props) {
-    const { width, height, data, format, axisLine, max } = props;
+    const { width, height, data, format, axisLine, max, valueFontSize, progressWidth, titleFontSize } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
-    const option = (0, _core.useDeepMemo)(()=>{
+    const option = (0, _components.useDeepMemo)(()=>{
         if (data.value === undefined) return chartsTheme.noDataOption;
-        // adjusts fontSize depending on number of characters
-        const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);
+        // Base configuration shared by both series (= progress & scale)
+        const baseGaugeConfig = {
+            type: 'gauge',
+            center: [
+                '50%',
+                '65%'
+            ],
+            startAngle: 200,
+            endAngle: -20,
+            min: 0,
+            max: max,
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            },
+            data: [
+                {
+                    value: data.value
+                }
+            ]
+        };
         return {
             title: {
                 show: false
@@ -61,28 +76,18 @@ function GaugeChartBase(props) {
                 show: false
             },
             series: [
+                // Inner gauge (progress)
                 {
-                    type: 'gauge',
-                    center: [
-                        '50%',
-                        '65%'
-                    ],
-                    radius: '86%',
-                    startAngle: 200,
-                    endAngle: -20,
-                    min: 0,
-                    max,
+                    ...baseGaugeConfig,
+                    radius: '90%',
                     silent: true,
                     progress: {
                         show: true,
-                        width: PROGRESS_WIDTH,
+                        width: progressWidth,
                         itemStyle: {
                             color: 'auto'
                         }
                     },
-                    pointer: {
-                        show: false
-                    },
                     axisLine: {
                         lineStyle: {
                             color: [
@@ -91,22 +96,12 @@ function GaugeChartBase(props) {
                                     'rgba(127,127,127,0.35)'
                                 ]
                             ],
-                            width: PROGRESS_WIDTH
+                            width: progressWidth
                         }
                     },
-                    axisTick: {
-                        show: false,
-                        distance: 0
-                    },
-                    splitLine: {
+                    pointer: {
                         show: false
                     },
-                    axisLabel: {
-                        show: false,
-                        distance: -18,
-                        color: '#999',
-                        fontSize: 12
-                    },
                     anchor: {
                         show: false
                     },
@@ -115,24 +110,12 @@ function GaugeChartBase(props) {
                     },
                     detail: {
                         show: false
-                    },
-                    data: [
-                        {
-                            value: data.value
-                        }
-                    ]
+                    }
                 },
+                // Outer gauge (scale & display)
                 {
-                    type: 'gauge',
-                    center: [
-                        '50%',
-                        '65%'
-                    ],
+                    ...baseGaugeConfig,
                     radius: '100%',
-                    startAngle: 200,
-                    endAngle: -20,
-                    min: 0,
-                    max,
                     pointer: {
                         show: true,
                         // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade
@@ -147,16 +130,8 @@ function GaugeChartBase(props) {
                             color: 'auto'
                         }
                     },
-                    axisLine,
-                    axisTick: {
-                        show: false
-                    },
-                    splitLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        show: false
-                    },
+                    axisLine: axisLine,
+                    // `detail` is the text displayed in the middle
                     detail: {
                         show: true,
                         width: '60%',
@@ -166,7 +141,7 @@ function GaugeChartBase(props) {
                             '-9%'
                         ],
                         color: 'inherit',
-                        fontSize: valueSizeClamp,
+                        fontSize: valueFontSize,
                         formatter: data.value === null ? // at this level because the `formatter` function argument is `NaN`
                         // when the value is `null`, making it difficult to differentiate
                         // `null` from a true `NaN` case.
@@ -188,7 +163,7 @@ function GaugeChartBase(props) {
                                     '55%'
                                 ],
                                 overflow: 'truncate',
-                                fontSize: 12,
+                                fontSize: titleFontSize,
                                 width: width * 0.8
                             }
                         }
@@ -203,24 +178,20 @@ function GaugeChartBase(props) {
         chartsTheme,
         format,
         axisLine,
-        max
+        max,
+        valueFontSize,
+        progressWidth,
+        titleFontSize
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EChart, {
-        sx: {
+        style: {
             width: width,
-            height: height,
+            height: height
+        },
+        sx: {
             padding: `${chartsTheme.container.padding.default}px`
         },
         option: option,
         theme: chartsTheme.echartsTheme
     });
 }
-function getResponsiveValueSize(value, format, width, height) {
-    const MIN_SIZE = 3;
-    const MAX_SIZE = 24;
-    const SIZE_MULTIPLIER = 0.7;
-    const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, format) : `${value}`;
-    const valueCharacters = formattedValue.length ?? 2;
-    const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
-    return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
-}

package/lib/cjs/GaugeChartPanel.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    GaugeChartLoading: function() {
+    get GaugeChartLoading () {
         return GaugeChartLoading;
     },
-    GaugeChartPanel: function() {
+    get GaugeChartPanel () {
         return GaugeChartPanel;
     }
 });
@@ -48,6 +48,40 @@ const EMPTY_GAUGE_SERIES = {
 };
 const GAUGE_MIN_WIDTH = 90;
 const PANEL_PADDING_OFFSET = 20;
+/**
+ * Calculate responsive progress width based on panel dimensions
+ */ function getResponsiveProgressWidth(width, height) {
+    const MIN_WIDTH = 10;
+    const MAX_WIDTH = 48;
+    const RATIO = 0.1; // 10% of the smaller dimension
+    const minSize = Math.min(width, height);
+    // Use RATIO of the smaller dimension as base, with reasonable min/max bounds
+    return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, Math.round(minSize * RATIO)));
+}
+/**
+ * Responsive font size depending on number of characters and panel dimensions.
+ * Uses clamp to ensure the text never overflows and scales appropriately with panel size.
+ * (Value refers to the main number value displayed inside the gauge)
+ */ function getResponsiveValueFontSize(value, format, width, height) {
+    const MIN_SIZE = 8;
+    const MAX_SIZE = 64;
+    const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, format) : `${value}`;
+    const valueTextLength = Math.max(formattedValue.length, 6); // Ensure a minimum length to avoid overly large text for short values
+    const availableSpace = Math.min(width, height);
+    const fontSize = availableSpace / valueTextLength;
+    return `clamp(${MIN_SIZE}px, ${fontSize}px, ${MAX_SIZE}px)`;
+}
+/**
+ * Calculate responsive title font size based on panel dimensions
+ * (Title refers to the text displayed below the gauge as a legend)
+ */ function getResponsiveTitleFontSize(width, height) {
+    const MIN_SIZE = 10;
+    const MAX_SIZE = 16;
+    const RATIO = 0.06; // Use 6% of the smaller dimension as base
+    const size = Math.round(Math.min(width, height) * RATIO);
+    // Scale based on panel size, with reasonable min/max bounds
+    return Math.max(MIN_SIZE, Math.min(MAX_SIZE, size));
+}
 function GaugeChartPanel(props) {
     const { spec: pluginSpec, contentDimensions, queryResults } = props;
     const { calculation, max, legend } = pluginSpec;
@@ -87,30 +121,40 @@ function GaugeChartPanel(props) {
         thresholdMax = format.unit === 'percent' ? _gaugechartmodel.DEFAULT_MAX_PERCENT : _gaugechartmodel.DEFAULT_MAX_PERCENT_DECIMAL;
     }
     const axisLineColors = (0, _thresholds.convertThresholds)(thresholds, format, thresholdMax, thresholdsColors);
+    // accounts for showing a separate chart for each time series
+    let chartWidth = contentDimensions.width / gaugeData.length - PANEL_PADDING_OFFSET;
+    if (chartWidth < GAUGE_MIN_WIDTH && gaugeData.length > 1) {
+        // enables horizontal scroll when charts overflow outside of panel
+        chartWidth = GAUGE_MIN_WIDTH;
+    }
+    // Calculate responsive values based on chart dimensions
+    const progressWidth = getResponsiveProgressWidth(chartWidth, contentDimensions.height);
+    const axisLineWidth = Math.round(progressWidth * 0.2); // Axis line width is 20% of progress width
+    const titleFontSize = getResponsiveTitleFontSize(chartWidth, contentDimensions.height);
     const axisLine = {
         show: true,
         lineStyle: {
-            width: 5,
+            width: axisLineWidth,
             color: axisLineColors
         }
     };
     // no data message handled inside chart component
     if (!gaugeData.length) {
+        const emptyValueFontSize = getResponsiveValueFontSize(null, format, contentDimensions.width, contentDimensions.height);
+        const emptyProgressWidth = getResponsiveProgressWidth(contentDimensions.width, contentDimensions.height);
+        const emptyTitleFontSize = getResponsiveTitleFontSize(contentDimensions.width, contentDimensions.height);
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_GaugeChartBase.GaugeChartBase, {
             width: contentDimensions.width,
             height: contentDimensions.height,
             data: EMPTY_GAUGE_SERIES,
             format: format,
             axisLine: axisLine,
-            max: thresholdMax
+            max: thresholdMax,
+            valueFontSize: emptyValueFontSize,
+            progressWidth: emptyProgressWidth,
+            titleFontSize: emptyTitleFontSize
         });
     }
-    // accounts for showing a separate chart for each time series
-    let chartWidth = contentDimensions.width / gaugeData.length - PANEL_PADDING_OFFSET;
-    if (chartWidth < GAUGE_MIN_WIDTH && gaugeData.length > 1) {
-        // enables horizontal scroll when charts overflow outside of panel
-        chartWidth = GAUGE_MIN_WIDTH;
-    }
     const hasMultipleCharts = gaugeData.length > 1;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
         direction: "row",
@@ -122,6 +166,7 @@ function GaugeChartPanel(props) {
             overflowX: gaugeData.length > 1 ? 'scroll' : 'auto'
         },
         children: gaugeData.map((series, seriesIndex)=>{
+            const fontSize = getResponsiveValueFontSize(series.value ?? null, format, chartWidth, contentDimensions.height);
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_GaugeChartBase.GaugeChartBase, {
                     width: chartWidth,
@@ -129,7 +174,10 @@ function GaugeChartPanel(props) {
                     data: series,
                     format: format,
                     axisLine: axisLine,
-                    max: thresholdMax
+                    max: thresholdMax,
+                    valueFontSize: fontSize,
+                    progressWidth: progressWidth,
+                    titleFontSize: titleFontSize
                 })
             }, `gauge-series-${seriesIndex}`);
         })

package/lib/cjs/gauge-chart-model.js

@@ -17,20 +17,20 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    DEFAULT_FORMAT: function() {
+    get DEFAULT_FORMAT () {
         return DEFAULT_FORMAT;
     },
-    DEFAULT_MAX_PERCENT: function() {
+    get DEFAULT_MAX_PERCENT () {
         return DEFAULT_MAX_PERCENT;
     },
-    DEFAULT_MAX_PERCENT_DECIMAL: function() {
+    get DEFAULT_MAX_PERCENT_DECIMAL () {
         return DEFAULT_MAX_PERCENT_DECIMAL;
     },
-    createInitialGaugeChartOptions: function() {
+    get createInitialGaugeChartOptions () {
         return createInitialGaugeChartOptions;
     }
 });

package/lib/cjs/index-federation.js

@@ -1,15 +1,3 @@
-// Copyright 2024 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
 "use strict";
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -52,4 +40,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));

package/lib/cjs/thresholds.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    convertThresholds: function() {
+    get convertThresholds () {
         return convertThresholds;
     },
-    defaultThresholdInput: function() {
+    get defaultThresholdInput () {
         return defaultThresholdInput;
     }
 });

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "GaugeChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.10.0",
+      "buildVersion": "0.11.1",
       "buildName": "@perses-dev/gauge-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/GaugeChart.a227385b.js",
+      "name": "__mf/js/GaugeChart.64278e7a.js",
       "path": "",
       "type": "global"
     },
@@ -20,7 +20,7 @@
       "api": ""
     },
     "globalName": "GaugeChart",
-    "pluginVersion": "0.19.1",
+    "pluginVersion": "0.21.6",
     "prefetchInterface": false,
     "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/GaugeChart/\"; }"
   },
@@ -35,7 +35,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/960.f1e14dae.js"
+            "__mf/js/async/274.07ee62ee.js"
           ]
         },
         "css": {
@@ -54,9 +54,9 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/694.dd75606a.js",
-            "__mf/js/async/770.ac5776da.js",
-            "__mf/js/async/790.1575a3f0.js"
+            "__mf/js/async/235.675ef806.js",
+            "__mf/js/async/616.1b1bb2ba.js",
+            "__mf/js/async/854.0822db86.js"
           ]
         },
         "css": {
@@ -75,8 +75,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/214.a5a27e07.js",
-            "__mf/js/async/738.24d6cefe.js"
+            "__mf/js/async/587.e32d2906.js",
+            "__mf/js/async/968.be22fbda.js"
           ]
         },
         "css": {
@@ -88,14 +88,14 @@
     {
       "id": "GaugeChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.2",
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.2",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/288.6d46d8e7.js"
+            "__mf/js/async/790.e67bc862.js"
           ]
         },
         "css": {
@@ -107,14 +107,14 @@
     {
       "id": "GaugeChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.2",
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.2",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/109.38fe9d18.js"
+            "__mf/js/async/252.30692fba.js"
           ]
         },
         "css": {
@@ -133,7 +133,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.b72fd8c7.js"
+            "__mf/js/async/192.8bf7cec4.js"
           ]
         },
         "css": {
@@ -152,7 +152,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/409.b3df73a9.js"
+            "__mf/js/async/873.b08548ee.js"
           ]
         },
         "css": {
@@ -171,7 +171,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/774.fffc4f90.js"
+            "__mf/js/async/963.c04e5fd0.js"
           ]
         },
         "css": {
@@ -190,7 +190,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/981.55bd66db.js"
+            "__mf/js/async/392.f9d6a7ae.js"
           ]
         },
         "css": {
@@ -209,7 +209,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/296.bdf413a6.js"
+            "__mf/js/async/496.63537c05.js"
           ]
         },
         "css": {
@@ -228,7 +228,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/173.9d9aaec5.js"
+            "__mf/js/async/470.9855b786.js"
           ]
         },
         "css": {
@@ -247,7 +247,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.eba21d42.js"
+            "__mf/js/async/121.0385c285.js"
           ]
         },
         "css": {
@@ -266,8 +266,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/553.ac447ad8.js",
-            "__mf/js/async/623.7ff5fe72.js"
+            "__mf/js/async/458.2a1e1dfe.js",
+            "__mf/js/async/77.429aab8d.js"
           ]
         },
         "css": {
@@ -286,7 +286,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/308.b768a783.js"
+            "__mf/js/async/978.26163709.js"
           ]
         },
         "css": {
@@ -304,27 +304,27 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/413.1b99956f.js",
-            "__mf/js/async/929.904de1f6.js",
-            "__mf/js/async/119.be08efba.js",
-            "__mf/js/async/298.bad26699.js",
-            "__mf/js/async/__federation_expose_GaugeChart.4c068ee6.js"
+            "__mf/js/async/403.4dee4df3.js",
+            "__mf/js/async/204.368d6115.js",
+            "__mf/js/async/467.fcde6002.js",
+            "__mf/js/async/756.ae22d123.js",
+            "__mf/js/async/__federation_expose_GaugeChart.54f4fa10.js"
           ],
           "async": [
-            "__mf/js/async/238.16f121d4.js",
-            "__mf/js/async/224.b7775059.js",
-            "__mf/js/async/292.149a1005.js",
-            "__mf/js/async/422.088d32ca.js",
-            "__mf/js/async/116.577ccfb6.js",
-            "__mf/js/async/lib-router.34d74652.js",
-            "__mf/js/async/488.d3de7c62.js"
+            "__mf/js/async/588.7dda8aa9.js",
+            "__mf/js/async/71.773ab397.js",
+            "__mf/js/async/356.a480b281.js",
+            "__mf/js/async/410.3d37263a.js",
+            "__mf/js/async/127.5ef482f0.js",
+            "__mf/js/async/lib-router.c318fd9d.js",
+            "__mf/js/async/177.4d5022bb.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/341.683bd428.css",
-            "__mf/css/async/263.683bd428.css"
+            "__mf/css/async/61.d3010b86.css",
+            "__mf/css/async/823.d3010b86.css"
           ]
         }
       },