@perses-dev/stat-chart-plugin 0.6.0

package/lib/StatChartPanel.js

@@ -0,0 +1,119 @@
+// 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 { StatChart, useChartsTheme } from '@perses-dev/components';
+import { Stack, Typography } from '@mui/material';
+import { useMemo } from 'react';
+import { applyValueMapping, createRegexFromString } from '@perses-dev/core';
+import { convertSparkline } from './utils/data-transform';
+import { calculateValue } from './utils/calculate-value';
+import { getStatChartColor } from './utils/get-color';
+const MIN_WIDTH = 100;
+const SPACING = 2;
+export const StatChartPanel = (props)=>{
+    const { spec, contentDimensions, queryResults } = props;
+    const { format, sparkline, valueFontSize: valueFontSize } = spec;
+    const chartsTheme = useChartsTheme();
+    const statChartData = useStatChartData(queryResults, spec, chartsTheme);
+    const isMultiSeries = statChartData.length > 1;
+    if (contentDimensions === undefined) return null;
+    // Calculates chart width
+    const spacing = SPACING * (statChartData.length - 1);
+    let chartWidth = (contentDimensions.width - spacing) / statChartData.length;
+    if (isMultiSeries && chartWidth < MIN_WIDTH) {
+        chartWidth = MIN_WIDTH;
+    }
+    const noDataTextStyle = chartsTheme.noDataOption.title.textStyle;
+    return /*#__PURE__*/ _jsx(Stack, {
+        height: contentDimensions.height,
+        width: contentDimensions.width,
+        spacing: `${SPACING}px`,
+        direction: "row",
+        justifyContent: isMultiSeries ? 'left' : 'center',
+        alignItems: "center",
+        sx: {
+            overflowX: isMultiSeries ? 'scroll' : 'auto'
+        },
+        children: statChartData.length ? statChartData.map((series, index)=>{
+            const sparklineConfig = convertSparkline(chartsTheme, series.color, sparkline);
+            return /*#__PURE__*/ _jsx(StatChart, {
+                width: chartWidth,
+                height: contentDimensions.height,
+                data: series,
+                format: format,
+                sparkline: sparklineConfig,
+                showSeriesName: isMultiSeries,
+                valueFontSize: valueFontSize
+            }, index);
+        }) : /*#__PURE__*/ _jsx(Typography, {
+            sx: {
+                ...noDataTextStyle
+            },
+            children: "No data"
+        })
+    });
+};
+const useStatChartData = (queryResults, spec, chartsTheme)=>{
+    return useMemo(()=>{
+        const { calculation, mappings, metricLabel } = spec;
+        const statChartData = [];
+        for (const result of queryResults){
+            for (const seriesData of result.data.series){
+                const calculatedValue = calculateValue(calculation, seriesData);
+                // get label metric value
+                const labelValue = getLabelValue(metricLabel, seriesData.labels);
+                // get actual value to display
+                const displayValue = getValueOrLabel(calculatedValue, mappings, labelValue);
+                const color = getStatChartColor(chartsTheme, spec, calculatedValue);
+                const series = {
+                    name: seriesData.formattedName ?? '',
+                    values: seriesData.values
+                };
+                statChartData.push({
+                    calculatedValue: displayValue,
+                    seriesData: series,
+                    color
+                });
+            }
+        }
+        return statChartData;
+    }, [
+        queryResults,
+        spec,
+        chartsTheme
+    ]);
+};
+const getValueOrLabel = (value, mappings, label)=>{
+    if (label) {
+        return label;
+    }
+    if (mappings?.length && value !== undefined && value !== null) {
+        return applyValueMapping(value, mappings).value;
+    } else {
+        return value;
+    }
+};
+const getLabelValue = (fieldLabel, labels)=>{
+    if (!labels || !fieldLabel) {
+        return undefined;
+    }
+    for (const [key, value] of Object.entries(labels)){
+        const regex = createRegexFromString(fieldLabel);
+        if (regex.test(key)) {
+            return value;
+        }
+    }
+    return undefined;
+};
+
+//# sourceMappingURL=StatChartPanel.js.map

package/lib/StatChartPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/StatChartPanel.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 { TitleComponentOption } from 'echarts';\nimport { StatChart, StatChartData, useChartsTheme, GraphSeries, PersesChartsTheme } from '@perses-dev/components';\nimport { Stack, Typography, SxProps } from '@mui/material';\nimport { FC, useMemo } from 'react';\nimport { applyValueMapping, Labels, createRegexFromString, TimeSeriesData, ValueMapping } from '@perses-dev/core';\nimport { PanelProps, PanelData } from '@perses-dev/plugin-system';\nimport { StatChartOptions } from './stat-chart-model';\nimport { convertSparkline } from './utils/data-transform';\nimport { calculateValue } from './utils/calculate-value';\nimport { getStatChartColor } from './utils/get-color';\n\nconst MIN_WIDTH = 100;\nconst SPACING = 2;\n\nexport type StatChartPanelProps = PanelProps<StatChartOptions, TimeSeriesData>;\n\nexport const StatChartPanel: FC<StatChartPanelProps> = (props) => {\n  const { spec, contentDimensions, queryResults } = props;\n\n  const { format, sparkline, valueFontSize: valueFontSize } = spec;\n  const chartsTheme = useChartsTheme();\n  const statChartData = useStatChartData(queryResults, spec, chartsTheme);\n\n  const isMultiSeries = statChartData.length > 1;\n\n  if (contentDimensions === undefined) return null;\n\n  // Calculates chart width\n  const spacing = SPACING * (statChartData.length - 1);\n  let chartWidth = (contentDimensions.width - spacing) / statChartData.length;\n  if (isMultiSeries && chartWidth < MIN_WIDTH) {\n    chartWidth = MIN_WIDTH;\n  }\n\n  const noDataTextStyle = (chartsTheme.noDataOption.title as TitleComponentOption).textStyle;\n\n  return (\n    <Stack\n      height={contentDimensions.height}\n      width={contentDimensions.width}\n      spacing={`${SPACING}px`}\n      direction=\"row\"\n      justifyContent={isMultiSeries ? 'left' : 'center'}\n      alignItems=\"center\"\n      sx={{\n        overflowX: isMultiSeries ? 'scroll' : 'auto',\n      }}\n    >\n      {statChartData.length ? (\n        statChartData.map((series, index) => {\n          const sparklineConfig = convertSparkline(chartsTheme, series.color, sparkline);\n\n          return (\n            <StatChart\n              key={index}\n              width={chartWidth}\n              height={contentDimensions.height}\n              data={series}\n              format={format}\n              sparkline={sparklineConfig}\n              showSeriesName={isMultiSeries}\n              valueFontSize={valueFontSize}\n            />\n          );\n        })\n      ) : (\n        <Typography sx={{ ...noDataTextStyle } as SxProps}>No data</Typography>\n      )}\n    </Stack>\n  );\n};\n\nconst useStatChartData = (\n  queryResults: Array<PanelData<TimeSeriesData>>,\n  spec: StatChartOptions,\n  chartsTheme: PersesChartsTheme\n): StatChartData[] => {\n  return useMemo(() => {\n    const { calculation, mappings, metricLabel } = spec;\n\n    const statChartData: StatChartData[] = [];\n    for (const result of queryResults) {\n      for (const seriesData of result.data.series) {\n        const calculatedValue = calculateValue(calculation, seriesData);\n\n        // get label metric value\n        const labelValue = getLabelValue(metricLabel, seriesData.labels);\n\n        // get actual value to display\n        const displayValue = getValueOrLabel(calculatedValue, mappings, labelValue);\n\n        const color = getStatChartColor(chartsTheme, spec, calculatedValue);\n\n        const series: GraphSeries = {\n          name: seriesData.formattedName ?? '',\n          values: seriesData.values,\n        };\n\n        statChartData.push({ calculatedValue: displayValue, seriesData: series, color });\n      }\n    }\n    return statChartData;\n  }, [queryResults, spec, chartsTheme]);\n};\n\nconst getValueOrLabel = (\n  value?: number | null,\n  mappings?: ValueMapping[],\n  label?: string\n): string | number | undefined | null => {\n  if (label) {\n    return label;\n  }\n  if (mappings?.length && value !== undefined && value !== null) {\n    return applyValueMapping(value, mappings).value;\n  } else {\n    return value;\n  }\n};\n\nconst getLabelValue = (fieldLabel?: string, labels?: Labels): string | undefined => {\n  if (!labels || !fieldLabel) {\n    return undefined;\n  }\n  for (const [key, value] of Object.entries(labels)) {\n    const regex = createRegexFromString(fieldLabel);\n    if (regex.test(key)) {\n      return value;\n    }\n  }\n  return undefined;\n};\n"],"names":["StatChart","useChartsTheme","Stack","Typography","useMemo","applyValueMapping","createRegexFromString","convertSparkline","calculateValue","getStatChartColor","MIN_WIDTH","SPACING","StatChartPanel","props","spec","contentDimensions","queryResults","format","sparkline","valueFontSize","chartsTheme","statChartData","useStatChartData","isMultiSeries","length","undefined","spacing","chartWidth","width","noDataTextStyle","noDataOption","title","textStyle","height","direction","justifyContent","alignItems","sx","overflowX","map","series","index","sparklineConfig","color","data","showSeriesName","calculation","mappings","metricLabel","result","seriesData","calculatedValue","labelValue","getLabelValue","labels","displayValue","getValueOrLabel","name","formattedName","values","push","value","label","fieldLabel","key","Object","entries","regex","test"],"mappings":"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"}

package/lib/StatChartValueMappingEditor.d.ts

@@ -0,0 +1,6 @@
+import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { FC } from 'react';
+import { StatChartOptions } from './stat-chart-model';
+export type StatChartValueMappingEditorProps = OptionsEditorProps<StatChartOptions>;
+export declare const StatChartValueMappingEditor: FC<StatChartValueMappingEditorProps>;
+//# sourceMappingURL=StatChartValueMappingEditor.d.ts.map

package/lib/StatChartValueMappingEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatChartValueMappingEditor.d.ts","sourceRoot":"","sources":["../../src/StatChartValueMappingEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG/D,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,MAAM,gCAAgC,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;AAEpF,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC,gCAAgC,CAM5E,CAAC"}

package/lib/StatChartValueMappingEditor.js

@@ -0,0 +1,28 @@
+// 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 { ValueMappingsEditor } from '@perses-dev/components';
+export const StatChartValueMappingEditor = ({ onChange, value })=>{
+    function handleValueMappingChange(mappings) {
+        onChange({
+            ...value,
+            mappings
+        });
+    }
+    return /*#__PURE__*/ _jsx(ValueMappingsEditor, {
+        mappings: value.mappings ?? [],
+        onChange: handleValueMappingChange
+    });
+};
+
+//# sourceMappingURL=StatChartValueMappingEditor.js.map

package/lib/StatChartValueMappingEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/StatChartValueMappingEditor.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 { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { ValueMapping } from '@perses-dev/core';\nimport { ValueMappingsEditor } from '@perses-dev/components';\nimport { FC } from 'react';\nimport { StatChartOptions } from './stat-chart-model';\n\nexport type StatChartValueMappingEditorProps = OptionsEditorProps<StatChartOptions>;\n\nexport const StatChartValueMappingEditor: FC<StatChartValueMappingEditorProps> = ({ onChange, value }) => {\n  function handleValueMappingChange(mappings: ValueMapping[]): void {\n    onChange({ ...value, mappings });\n  }\n\n  return <ValueMappingsEditor mappings={value.mappings ?? []} onChange={handleValueMappingChange} />;\n};\n"],"names":["ValueMappingsEditor","StatChartValueMappingEditor","onChange","value","handleValueMappingChange","mappings"],"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;;AAIjC,SAASA,mBAAmB,QAAQ,yBAAyB;AAM7D,OAAO,MAAMC,8BAAoE,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAE;IACnG,SAASC,yBAAyBC,QAAwB;QACxDH,SAAS;YAAE,GAAGC,KAAK;YAAEE;QAAS;IAChC;IAEA,qBAAO,KAACL;QAAoBK,UAAUF,MAAME,QAAQ,IAAI,EAAE;QAAEH,UAAUE;;AACxE,EAAE"}

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/StatChart.js

@@ -0,0 +1,43 @@
+// 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, "StatChart", {
+    enumerable: true,
+    get: function() {
+        return StatChart;
+    }
+});
+const _statchartmodel = require("./stat-chart-model");
+const _StatChartValueMappingEditor = require("./StatChartValueMappingEditor");
+const _StatChartOptionsEditorSettings = require("./StatChartOptionsEditorSettings");
+const _StatChartPanel = require("./StatChartPanel");
+const StatChart = {
+    PanelComponent: _StatChartPanel.StatChartPanel,
+    supportedQueryTypes: [
+        'TimeSeriesQuery'
+    ],
+    panelOptionsEditorComponents: [
+        {
+            label: 'Settings',
+            content: _StatChartOptionsEditorSettings.StatChartOptionsEditorSettings
+        },
+        {
+            label: 'Value mapping',
+            content: _StatChartValueMappingEditor.StatChartValueMappingEditor
+        }
+    ],
+    createInitialOptions: _statchartmodel.createInitialStatChartOptions
+};

package/lib/cjs/StatChartOptionsEditorSettings.js

@@ -0,0 +1,115 @@
+// 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, "StatChartOptionsEditorSettings", {
+    enumerable: true,
+    get: function() {
+        return StatChartOptionsEditorSettings;
+    }
+});
+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"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DEFAULT_FORMAT = {
+    unit: 'percent-decimal'
+};
+function StatChartOptionsEditorSettings(props) {
+    const { onChange, value } = props;
+    // ensures decimalPlaces defaults to correct value
+    const format = (0, _merge.default)({}, DEFAULT_FORMAT, value.format);
+    const handleCalculationChange = (metricLabel)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.calculation = metricLabel;
+        }));
+    };
+    const handleMetricLabelChange = (newCalculation)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.metricLabel = newCalculation;
+        }));
+    };
+    const handleUnitChange = (newFormat)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.format = newFormat;
+        }));
+    };
+    const handleSparklineChange = (_, checked)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            // For now, setting to an empty object when checked, so the stat chart
+            // uses the default chart color and line styles. In the future, this
+            // will likely be configurable in the UI.
+            draft.sparkline = checked ? {} : undefined;
+        }));
+    };
+    const handleThresholdsChange = (thresholds)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.thresholds = thresholds;
+        }));
+    };
+    const handleFontSizeChange = (fontSize)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.valueFontSize = fontSize;
+        }));
+    };
+    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.OptionsEditorControl, {
+                            label: "Sparkline",
+                            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                checked: !!value.sparkline,
+                                onChange: handleSparklineChange
+                            })
+                        }),
+                        /*#__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)(_pluginsystem.MetricLabelInput, {
+                            value: value.metricLabel,
+                            onChange: handleMetricLabelChange
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FontSizeSelector, {
+                            value: value.valueFontSize,
+                            onChange: handleFontSizeChange
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ThresholdsEditor, {
+                    disablePercentMode: true,
+                    thresholds: value.thresholds,
+                    onChange: handleThresholdsChange
+                })
+            })
+        ]
+    });
+}

package/lib/cjs/StatChartPanel.js

@@ -0,0 +1,127 @@
+// 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, "StatChartPanel", {
+    enumerable: true,
+    get: function() {
+        return StatChartPanel;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
+const _react = require("react");
+const _core = require("@perses-dev/core");
+const _datatransform = require("./utils/data-transform");
+const _calculatevalue = require("./utils/calculate-value");
+const _getcolor = require("./utils/get-color");
+const MIN_WIDTH = 100;
+const SPACING = 2;
+const StatChartPanel = (props)=>{
+    const { spec, contentDimensions, queryResults } = props;
+    const { format, sparkline, valueFontSize: valueFontSize } = spec;
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const statChartData = useStatChartData(queryResults, spec, chartsTheme);
+    const isMultiSeries = statChartData.length > 1;
+    if (contentDimensions === undefined) return null;
+    // Calculates chart width
+    const spacing = SPACING * (statChartData.length - 1);
+    let chartWidth = (contentDimensions.width - spacing) / statChartData.length;
+    if (isMultiSeries && chartWidth < MIN_WIDTH) {
+        chartWidth = MIN_WIDTH;
+    }
+    const noDataTextStyle = chartsTheme.noDataOption.title.textStyle;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        height: contentDimensions.height,
+        width: contentDimensions.width,
+        spacing: `${SPACING}px`,
+        direction: "row",
+        justifyContent: isMultiSeries ? 'left' : 'center',
+        alignItems: "center",
+        sx: {
+            overflowX: isMultiSeries ? 'scroll' : 'auto'
+        },
+        children: statChartData.length ? statChartData.map((series, index)=>{
+            const sparklineConfig = (0, _datatransform.convertSparkline)(chartsTheme, series.color, sparkline);
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.StatChart, {
+                width: chartWidth,
+                height: contentDimensions.height,
+                data: series,
+                format: format,
+                sparkline: sparklineConfig,
+                showSeriesName: isMultiSeries,
+                valueFontSize: valueFontSize
+            }, index);
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            sx: {
+                ...noDataTextStyle
+            },
+            children: "No data"
+        })
+    });
+};
+const useStatChartData = (queryResults, spec, chartsTheme)=>{
+    return (0, _react.useMemo)(()=>{
+        const { calculation, mappings, metricLabel } = spec;
+        const statChartData = [];
+        for (const result of queryResults){
+            for (const seriesData of result.data.series){
+                const calculatedValue = (0, _calculatevalue.calculateValue)(calculation, seriesData);
+                // get label metric value
+                const labelValue = getLabelValue(metricLabel, seriesData.labels);
+                // get actual value to display
+                const displayValue = getValueOrLabel(calculatedValue, mappings, labelValue);
+                const color = (0, _getcolor.getStatChartColor)(chartsTheme, spec, calculatedValue);
+                const series = {
+                    name: seriesData.formattedName ?? '',
+                    values: seriesData.values
+                };
+                statChartData.push({
+                    calculatedValue: displayValue,
+                    seriesData: series,
+                    color
+                });
+            }
+        }
+        return statChartData;
+    }, [
+        queryResults,
+        spec,
+        chartsTheme
+    ]);
+};
+const getValueOrLabel = (value, mappings, label)=>{
+    if (label) {
+        return label;
+    }
+    if (mappings?.length && value !== undefined && value !== null) {
+        return (0, _core.applyValueMapping)(value, mappings).value;
+    } else {
+        return value;
+    }
+};
+const getLabelValue = (fieldLabel, labels)=>{
+    if (!labels || !fieldLabel) {
+        return undefined;
+    }
+    for (const [key, value] of Object.entries(labels)){
+        const regex = (0, _core.createRegexFromString)(fieldLabel);
+        if (regex.test(key)) {
+            return value;
+        }
+    }
+    return undefined;
+};

package/lib/cjs/StatChartValueMappingEditor.js

@@ -0,0 +1,36 @@
+// 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
+});
+Object.defineProperty(exports, "StatChartValueMappingEditor", {
+    enumerable: true,
+    get: function() {
+        return StatChartValueMappingEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _components = require("@perses-dev/components");
+const StatChartValueMappingEditor = ({ onChange, value })=>{
+    function handleValueMappingChange(mappings) {
+        onChange({
+            ...value,
+            mappings
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ValueMappingsEditor, {
+        mappings: value.mappings ?? [],
+        onChange: handleValueMappingChange
+    });
+};

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/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
+    };
+}