@perses-dev/gauge-chart-plugin 0.6.0

package/lib/GaugeChartPanel.js

@@ -0,0 +1,126 @@
+// Copyright 2023 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Skeleton, Stack } from '@mui/material';
+import { GaugeChart, useChartsTheme } from '@perses-dev/components';
+import { CalculationsMap, DEFAULT_CALCULATION } from '@perses-dev/core';
+import merge from 'lodash/merge';
+import { useMemo } from 'react';
+import { DEFAULT_FORMAT, DEFAULT_MAX_PERCENT, DEFAULT_MAX_PERCENT_DECIMAL } from './gauge-chart-model';
+import { convertThresholds, defaultThresholdInput } from './thresholds';
+const EMPTY_GAUGE_SERIES = {
+    label: '',
+    value: undefined
+};
+const GAUGE_MIN_WIDTH = 90;
+const PANEL_PADDING_OFFSET = 20;
+export function GaugeChartPanel(props) {
+    const { spec: pluginSpec, contentDimensions, queryResults } = props;
+    const { calculation, max } = pluginSpec;
+    const { thresholds: thresholdsColors } = useChartsTheme();
+    // ensures all default format properties set if undef
+    const format = merge({}, DEFAULT_FORMAT, pluginSpec.format);
+    const thresholds = pluginSpec.thresholds ?? defaultThresholdInput;
+    const gaugeData = useMemo(()=>{
+        if (queryResults[0]?.data === undefined) {
+            return [];
+        }
+        if (CalculationsMap[calculation] === undefined) {
+            console.warn(`Invalid GaugeChart panel calculation ${calculation}, fallback to ${DEFAULT_CALCULATION}`);
+        }
+        const calculate = CalculationsMap[calculation] ?? CalculationsMap[DEFAULT_CALCULATION];
+        const seriesData = [];
+        for (const timeSeries of queryResults[0].data.series){
+            const series = {
+                value: calculate(timeSeries.values),
+                label: timeSeries.formattedName ?? ''
+            };
+            seriesData.push(series);
+        }
+        return seriesData;
+    }, [
+        queryResults,
+        calculation
+    ]);
+    if (contentDimensions === undefined) return null;
+    // needed for end value of last threshold color segment
+    let thresholdMax = max;
+    if (thresholdMax === undefined) {
+        if (format.unit === 'percent') {
+            thresholdMax = DEFAULT_MAX_PERCENT;
+        } else {
+            thresholdMax = DEFAULT_MAX_PERCENT_DECIMAL;
+        }
+    }
+    const axisLineColors = convertThresholds(thresholds, format, thresholdMax, thresholdsColors);
+    const axisLine = {
+        show: true,
+        lineStyle: {
+            width: 5,
+            color: axisLineColors
+        }
+    };
+    // no data message handled inside chart component
+    if (gaugeData.length === 0) {
+        return /*#__PURE__*/ _jsx(GaugeChart, {
+            width: contentDimensions.width,
+            height: contentDimensions.height,
+            data: EMPTY_GAUGE_SERIES,
+            format: format,
+            axisLine: axisLine,
+            max: thresholdMax
+        });
+    }
+    // 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__*/ _jsx(Stack, {
+        direction: "row",
+        spacing: hasMultipleCharts ? 2 : 0,
+        justifyContent: hasMultipleCharts ? 'left' : 'center',
+        alignItems: "center",
+        sx: {
+            // so scrollbar only shows when necessary
+            overflowX: gaugeData.length > 1 ? 'scroll' : 'auto'
+        },
+        children: gaugeData.map((series, seriesIndex)=>{
+            return /*#__PURE__*/ _jsx(Box, {
+                children: /*#__PURE__*/ _jsx(GaugeChart, {
+                    width: chartWidth,
+                    height: contentDimensions.height,
+                    data: series,
+                    format: format,
+                    axisLine: axisLine,
+                    max: thresholdMax
+                })
+            }, `gauge-series-${seriesIndex}`);
+        })
+    });
+}
+export function GaugeChartLoading({ contentDimensions }) {
+    if (contentDimensions === undefined) return null;
+    return /*#__PURE__*/ _jsx(Skeleton, {
+        sx: {
+            margin: '0 auto'
+        },
+        variant: "circular",
+        width: contentDimensions.width > contentDimensions.height ? contentDimensions.height : contentDimensions.width,
+        height: contentDimensions.height
+    });
+}
+
+//# sourceMappingURL=GaugeChartPanel.js.map

package/lib/GaugeChartPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/GaugeChartPanel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Skeleton, Stack } from '@mui/material';\nimport { GaugeChart, GaugeSeries, useChartsTheme } from '@perses-dev/components';\nimport { CalculationsMap, DEFAULT_CALCULATION, TimeSeriesData } from '@perses-dev/core';\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport type { GaugeSeriesOption } from 'echarts';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo } from 'react';\nimport {\n  DEFAULT_FORMAT,\n  DEFAULT_MAX_PERCENT,\n  DEFAULT_MAX_PERCENT_DECIMAL,\n  GaugeChartOptions,\n} from './gauge-chart-model';\nimport { convertThresholds, defaultThresholdInput } from './thresholds';\n\nconst EMPTY_GAUGE_SERIES: GaugeSeries = { label: '', value: undefined };\nconst GAUGE_MIN_WIDTH = 90;\nconst PANEL_PADDING_OFFSET = 20;\n\nexport type GaugeChartPanelProps = PanelProps<GaugeChartOptions, TimeSeriesData>;\n\nexport function GaugeChartPanel(props: GaugeChartPanelProps): ReactElement | null {\n  const { spec: pluginSpec, contentDimensions, queryResults } = props;\n  const { calculation, max } = pluginSpec;\n\n  const { thresholds: thresholdsColors } = useChartsTheme();\n\n  // ensures all default format properties set if undef\n  const format = merge({}, DEFAULT_FORMAT, pluginSpec.format);\n\n  const thresholds = pluginSpec.thresholds ?? defaultThresholdInput;\n\n  const gaugeData: GaugeSeries[] = useMemo(() => {\n    if (queryResults[0]?.data === undefined) {\n      return [];\n    }\n\n    if (CalculationsMap[calculation] === undefined) {\n      console.warn(`Invalid GaugeChart panel calculation ${calculation}, fallback to ${DEFAULT_CALCULATION}`);\n    }\n\n    const calculate = CalculationsMap[calculation] ?? CalculationsMap[DEFAULT_CALCULATION];\n\n    const seriesData: GaugeSeries[] = [];\n    for (const timeSeries of queryResults[0].data.series) {\n      const series = {\n        value: calculate(timeSeries.values),\n        label: timeSeries.formattedName ?? '',\n      };\n      seriesData.push(series);\n    }\n    return seriesData;\n  }, [queryResults, calculation]);\n\n  if (contentDimensions === undefined) return null;\n\n  // needed for end value of last threshold color segment\n  let thresholdMax = max;\n  if (thresholdMax === undefined) {\n    if (format.unit === 'percent') {\n      thresholdMax = DEFAULT_MAX_PERCENT;\n    } else {\n      thresholdMax = DEFAULT_MAX_PERCENT_DECIMAL;\n    }\n  }\n  const axisLineColors = convertThresholds(thresholds, format, thresholdMax, thresholdsColors);\n\n  const axisLine: GaugeSeriesOption['axisLine'] = {\n    show: true,\n    lineStyle: {\n      width: 5,\n      color: axisLineColors,\n    },\n  };\n\n  // no data message handled inside chart component\n  if (gaugeData.length === 0) {\n    return (\n      <GaugeChart\n        width={contentDimensions.width}\n        height={contentDimensions.height}\n        data={EMPTY_GAUGE_SERIES}\n        format={format}\n        axisLine={axisLine}\n        max={thresholdMax}\n      />\n    );\n  }\n\n  // accounts for showing a separate chart for each time series\n  let chartWidth = contentDimensions.width / gaugeData.length - PANEL_PADDING_OFFSET;\n  if (chartWidth < GAUGE_MIN_WIDTH && gaugeData.length > 1) {\n    // enables horizontal scroll when charts overflow outside of panel\n    chartWidth = GAUGE_MIN_WIDTH;\n  }\n\n  const hasMultipleCharts = gaugeData.length > 1;\n\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={hasMultipleCharts ? 2 : 0}\n      justifyContent={hasMultipleCharts ? 'left' : 'center'}\n      alignItems=\"center\"\n      sx={{\n        // so scrollbar only shows when necessary\n        overflowX: gaugeData.length > 1 ? 'scroll' : 'auto',\n      }}\n    >\n      {gaugeData.map((series, seriesIndex) => {\n        return (\n          <Box key={`gauge-series-${seriesIndex}`}>\n            <GaugeChart\n              width={chartWidth}\n              height={contentDimensions.height}\n              data={series}\n              format={format}\n              axisLine={axisLine}\n              max={thresholdMax}\n            />\n          </Box>\n        );\n      })}\n    </Stack>\n  );\n}\n\nexport function GaugeChartLoading({ contentDimensions }: GaugeChartPanelProps): React.ReactElement | null {\n  if (contentDimensions === undefined) return null;\n  return (\n    <Skeleton\n      sx={{ margin: '0 auto' }}\n      variant=\"circular\"\n      width={contentDimensions.width > contentDimensions.height ? contentDimensions.height : contentDimensions.width}\n      height={contentDimensions.height}\n    />\n  );\n}\n"],"names":["Box","Skeleton","Stack","GaugeChart","useChartsTheme","CalculationsMap","DEFAULT_CALCULATION","merge","useMemo","DEFAULT_FORMAT","DEFAULT_MAX_PERCENT","DEFAULT_MAX_PERCENT_DECIMAL","convertThresholds","defaultThresholdInput","EMPTY_GAUGE_SERIES","label","value","undefined","GAUGE_MIN_WIDTH","PANEL_PADDING_OFFSET","GaugeChartPanel","props","spec","pluginSpec","contentDimensions","queryResults","calculation","max","thresholds","thresholdsColors","format","gaugeData","data","console","warn","calculate","seriesData","timeSeries","series","values","formattedName","push","thresholdMax","unit","axisLineColors","axisLine","show","lineStyle","width","color","length","height","chartWidth","hasMultipleCharts","direction","spacing","justifyContent","alignItems","sx","overflowX","map","seriesIndex","GaugeChartLoading","margin","variant"],"mappings":"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"}

package/lib/bootstrap.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=bootstrap.d.ts.map

package/lib/bootstrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/bootstrap.tsx"],"names":[],"mappings":""}

package/lib/bootstrap.js

@@ -0,0 +1,19 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ _jsx(React.StrictMode, {}));
+
+//# sourceMappingURL=bootstrap.js.map

package/lib/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}

package/lib/cjs/GaugeChart.js

@@ -0,0 +1,39 @@
+// Copyright 2023 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "GaugeChart", {
+    enumerable: true,
+    get: function() {
+        return GaugeChart;
+    }
+});
+const _gaugechartmodel = require("./gauge-chart-model");
+const _GaugeChartOptionsEditorSettings = require("./GaugeChartOptionsEditorSettings");
+const _GaugeChartPanel = require("./GaugeChartPanel");
+const GaugeChart = {
+    PanelComponent: _GaugeChartPanel.GaugeChartPanel,
+    LoadingComponent: _GaugeChartPanel.GaugeChartLoading,
+    supportedQueryTypes: [
+        'TimeSeriesQuery'
+    ],
+    panelOptionsEditorComponents: [
+        {
+            label: 'Settings',
+            content: _GaugeChartOptionsEditorSettings.GaugeChartOptionsEditorSettings
+        }
+    ],
+    createInitialOptions: _gaugechartmodel.createInitialGaugeChartOptions
+};

package/lib/cjs/GaugeChartOptionsEditorSettings.js

@@ -0,0 +1,101 @@
+// Copyright 2023 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "GaugeChartOptionsEditorSettings", {
+    enumerable: true,
+    get: function() {
+        return GaugeChartOptionsEditorSettings;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _immer = require("immer");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _gaugechartmodel = require("./gauge-chart-model");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function GaugeChartOptionsEditorSettings(props) {
+    const { onChange, value } = props;
+    const handleCalculationChange = (newCalculation)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.calculation = newCalculation;
+        }));
+    };
+    const handleUnitChange = (newFormat)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.format = newFormat;
+        }));
+    };
+    // ensures decimalPlaces defaults to correct value
+    const format = (0, _merge.default)({}, _gaugechartmodel.DEFAULT_FORMAT, value.format);
+    // max only needs to be set explicitly for units other than percent and percent-decimal
+    let maxPlaceholder = 'Enter value';
+    if (format.unit === 'percent') {
+        maxPlaceholder = _gaugechartmodel.DEFAULT_MAX_PERCENT.toString();
+    } else if (format.unit === 'percent-decimal') {
+        maxPlaceholder = _gaugechartmodel.DEFAULT_MAX_PERCENT_DECIMAL.toString();
+    }
+    const handleThresholdsChange = (thresholds)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.thresholds = thresholds;
+        }));
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGrid, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
+                    title: "Misc",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
+                            value: format,
+                            onChange: handleUnitChange
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.CalculationSelector, {
+                            value: value.calculation,
+                            onChange: handleCalculationChange
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                            label: "Max",
+                            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                type: "number",
+                                value: value.max ?? '',
+                                onChange: (e)=>{
+                                    // ensure empty value resets to undef to allow chart to calculate max
+                                    const newValue = e.target.value ? Number(e.target.value) : undefined;
+                                    onChange((0, _immer.produce)(value, (draft)=>{
+                                        draft.max = newValue;
+                                    }));
+                                },
+                                placeholder: maxPlaceholder
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ThresholdsEditor, {
+                    thresholds: value.thresholds,
+                    onChange: handleThresholdsChange
+                })
+            })
+        ]
+    });
+}

package/lib/cjs/GaugeChartPanel.js

@@ -0,0 +1,147 @@
+// Copyright 2023 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";
+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, {
+    GaugeChartLoading: function() {
+        return GaugeChartLoading;
+    },
+    GaugeChartPanel: function() {
+        return GaugeChartPanel;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _core = require("@perses-dev/core");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _react = require("react");
+const _gaugechartmodel = require("./gauge-chart-model");
+const _thresholds = require("./thresholds");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const EMPTY_GAUGE_SERIES = {
+    label: '',
+    value: undefined
+};
+const GAUGE_MIN_WIDTH = 90;
+const PANEL_PADDING_OFFSET = 20;
+function GaugeChartPanel(props) {
+    const { spec: pluginSpec, contentDimensions, queryResults } = props;
+    const { calculation, max } = pluginSpec;
+    const { thresholds: thresholdsColors } = (0, _components.useChartsTheme)();
+    // ensures all default format properties set if undef
+    const format = (0, _merge.default)({}, _gaugechartmodel.DEFAULT_FORMAT, pluginSpec.format);
+    const thresholds = pluginSpec.thresholds ?? _thresholds.defaultThresholdInput;
+    const gaugeData = (0, _react.useMemo)(()=>{
+        if (queryResults[0]?.data === undefined) {
+            return [];
+        }
+        if (_core.CalculationsMap[calculation] === undefined) {
+            console.warn(`Invalid GaugeChart panel calculation ${calculation}, fallback to ${_core.DEFAULT_CALCULATION}`);
+        }
+        const calculate = _core.CalculationsMap[calculation] ?? _core.CalculationsMap[_core.DEFAULT_CALCULATION];
+        const seriesData = [];
+        for (const timeSeries of queryResults[0].data.series){
+            const series = {
+                value: calculate(timeSeries.values),
+                label: timeSeries.formattedName ?? ''
+            };
+            seriesData.push(series);
+        }
+        return seriesData;
+    }, [
+        queryResults,
+        calculation
+    ]);
+    if (contentDimensions === undefined) return null;
+    // needed for end value of last threshold color segment
+    let thresholdMax = max;
+    if (thresholdMax === undefined) {
+        if (format.unit === 'percent') {
+            thresholdMax = _gaugechartmodel.DEFAULT_MAX_PERCENT;
+        } else {
+            thresholdMax = _gaugechartmodel.DEFAULT_MAX_PERCENT_DECIMAL;
+        }
+    }
+    const axisLineColors = (0, _thresholds.convertThresholds)(thresholds, format, thresholdMax, thresholdsColors);
+    const axisLine = {
+        show: true,
+        lineStyle: {
+            width: 5,
+            color: axisLineColors
+        }
+    };
+    // no data message handled inside chart component
+    if (gaugeData.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.GaugeChart, {
+            width: contentDimensions.width,
+            height: contentDimensions.height,
+            data: EMPTY_GAUGE_SERIES,
+            format: format,
+            axisLine: axisLine,
+            max: thresholdMax
+        });
+    }
+    // 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",
+        spacing: hasMultipleCharts ? 2 : 0,
+        justifyContent: hasMultipleCharts ? 'left' : 'center',
+        alignItems: "center",
+        sx: {
+            // so scrollbar only shows when necessary
+            overflowX: gaugeData.length > 1 ? 'scroll' : 'auto'
+        },
+        children: gaugeData.map((series, seriesIndex)=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.GaugeChart, {
+                    width: chartWidth,
+                    height: contentDimensions.height,
+                    data: series,
+                    format: format,
+                    axisLine: axisLine,
+                    max: thresholdMax
+                })
+            }, `gauge-series-${seriesIndex}`);
+        })
+    });
+}
+function GaugeChartLoading({ contentDimensions }) {
+    if (contentDimensions === undefined) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+        sx: {
+            margin: '0 auto'
+        },
+        variant: "circular",
+        width: contentDimensions.width > contentDimensions.height ? contentDimensions.height : contentDimensions.width,
+        height: contentDimensions.height
+    });
+}

package/lib/cjs/bootstrap.js

@@ -0,0 +1,26 @@
+// 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _client = /*#__PURE__*/ _interop_require_default(require("react-dom/client"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const root = _client.default.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default.StrictMode, {}));

package/lib/cjs/env.d.js

@@ -0,0 +1,14 @@
+// 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.
+/// <reference types="@rsbuild/core/types" />
+"use strict";

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

@@ -0,0 +1,57 @@
+// Copyright 2023 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";
+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, {
+    DEFAULT_FORMAT: function() {
+        return DEFAULT_FORMAT;
+    },
+    DEFAULT_MAX_PERCENT: function() {
+        return DEFAULT_MAX_PERCENT;
+    },
+    DEFAULT_MAX_PERCENT_DECIMAL: function() {
+        return DEFAULT_MAX_PERCENT_DECIMAL;
+    },
+    createInitialGaugeChartOptions: function() {
+        return createInitialGaugeChartOptions;
+    }
+});
+const DEFAULT_FORMAT = {
+    unit: 'percent-decimal'
+};
+const DEFAULT_MAX_PERCENT = 100;
+const DEFAULT_MAX_PERCENT_DECIMAL = 1;
+function createInitialGaugeChartOptions() {
+    return {
+        calculation: 'last-number',
+        format: DEFAULT_FORMAT,
+        thresholds: {
+            steps: [
+                {
+                    value: 0.8
+                },
+                {
+                    value: 0.9
+                }
+            ]
+        }
+    };
+}

package/lib/cjs/getPluginModule.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getPluginModule", {
+    enumerable: true,
+    get: function() {
+        return getPluginModule;
+    }
+});
+const _packagejson = /*#__PURE__*/ _interop_require_default(require("../package.json"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getPluginModule() {
+    const { name, version, perses } = _packagejson.default;
+    return {
+        kind: 'PluginModule',
+        metadata: {
+            name,
+            version
+        },
+        spec: perses
+    };
+}

package/lib/cjs/index-federation.js

@@ -0,0 +1,55 @@
+// 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;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));