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

package/lib/cjs/StatChartBase.js

@@ -29,6 +29,7 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _components1 = require("@perses-dev/components");
+const _chromajs = /*#__PURE__*/ _interop_require_default(require("chroma-js"));
 const _calculatefontsize = require("./utils/calculate-font-size");
 const _formatstatchartvalue = require("./utils/format-stat-chart-value");
 function _interop_require_default(obj) {
@@ -48,10 +49,12 @@ const LINE_HEIGHT = 1.2;
 const SERIES_NAME_MAX_FONT_SIZE = 30;
 const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
+const WHITE_COLOR_CODE = '#FFFFFF';
+const BLACK_COLOR_CODE = '#000000';
 const StatChartBase = (props)=>{
-    const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
+    const { width, height, data, data: { color }, sparkline, showSeriesName, format, valueFontSize, colorMode } = props;
+    const { palette: { mode: paletteMode, text: { secondary } } } = (0, _material.useTheme)();
     const chartsTheme = (0, _components1.useChartsTheme)();
-    const color = data.color;
     const formattedValue = (0, _formatstatchartvalue.formatStatChartValue)(data.calculatedValue, format);
     const containerPadding = chartsTheme.container.padding.default;
     // calculate series name font size and height
@@ -83,10 +86,10 @@ const StatChartBase = (props)=>{
     // make sure the series name font size is slightly smaller than value font size
     seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);
     const option = (0, _react.useMemo)(()=>{
-        if (data.seriesData === undefined) return chartsTheme.noDataOption;
+        if (!data.seriesData) return chartsTheme.noDataOption;
         const series = data.seriesData;
         const statSeries = [];
-        if (sparkline !== undefined) {
+        if (sparkline) {
             const lineSeries = {
                 type: 'line',
                 name: series.name,
@@ -96,7 +99,20 @@ const StatChartBase = (props)=>{
                 animation: false,
                 silent: true
             };
-            const mergedSeries = (0, _merge.default)(lineSeries, sparkline);
+            const clonedSparkLine = {
+                ...sparkline
+            };
+            if (colorMode === 'background_solid') {
+                clonedSparkLine.areaStyle = {
+                    color: WHITE_COLOR_CODE,
+                    opacity: 0.4
+                };
+                clonedSparkLine.lineStyle = {
+                    color: WHITE_COLOR_CODE,
+                    opacity: 1
+                };
+            }
+            const mergedSeries = (0, _merge.default)(lineSeries, clonedSparkLine);
             statSeries.push(mergedSeries);
         }
         const option = {
@@ -136,35 +152,81 @@ const StatChartBase = (props)=>{
     }, [
         data,
         chartsTheme,
-        sparkline
+        sparkline,
+        colorMode
     ]);
     const textAlignment = sparkline ? 'auto' : 'center';
-    const textStyles = {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: textAlignment,
-        alignItems: textAlignment
-    };
+    const styledFormattedValue = (0, _react.useMemo)(()=>{
+        let valueColor = '';
+        switch(colorMode){
+            case 'background_solid':
+                valueColor = _chromajs.default.contrast(color, WHITE_COLOR_CODE) > _chromajs.default.contrast(color, BLACK_COLOR_CODE) ? WHITE_COLOR_CODE : BLACK_COLOR_CODE;
+                break;
+            case 'none':
+                valueColor = paletteMode === 'dark' ? WHITE_COLOR_CODE : BLACK_COLOR_CODE;
+                break;
+            case 'value':
+            default:
+                valueColor = color;
+                break;
+        }
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(Value, {
+            variant: "h3",
+            color: valueColor,
+            fontSize: optimalValueFontSize,
+            padding: containerPadding,
+            children: formattedValue
+        });
+    }, [
+        colorMode,
+        containerPadding,
+        optimalValueFontSize,
+        formattedValue,
+        color,
+        paletteMode
+    ]);
+    const seriesName = (0, _react.useMemo)(()=>{
+        if (!showSeriesName) return null;
+        let textColor = '';
+        switch(colorMode){
+            case 'background_solid':
+                textColor = _chromajs.default.contrast(color, WHITE_COLOR_CODE) > _chromajs.default.contrast(color, BLACK_COLOR_CODE) ? WHITE_COLOR_CODE : BLACK_COLOR_CODE;
+                break;
+            case 'none':
+            case 'value':
+            default:
+                textColor = secondary;
+                break;
+        }
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(SeriesName, {
+            padding: containerPadding,
+            fontSize: seriesNameFontSize,
+            color: textColor,
+            children: data.seriesData?.name
+        });
+    }, [
+        colorMode,
+        showSeriesName,
+        secondary,
+        color,
+        containerPadding,
+        seriesNameFontSize,
+        data?.seriesData?.name
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             height: '100%',
             width: '100%',
-            ...textStyles
+            backgroundColor: colorMode === 'background_solid' ? color : 'transparent',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: textAlignment,
+            alignItems: textAlignment
         },
         children: [
-            showSeriesName && /*#__PURE__*/ (0, _jsxruntime.jsx)(SeriesName, {
-                padding: containerPadding,
-                fontSize: seriesNameFontSize,
-                children: data.seriesData?.name
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(Value, {
-                variant: "h3",
-                color: color,
-                fontSize: optimalValueFontSize,
-                padding: containerPadding,
-                children: formattedValue
-            }),
-            sparkline !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EChart, {
+            seriesName,
+            styledFormattedValue,
+            sparkline && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EChart, {
                 sx: {
                     width: '100%'
                 },
@@ -182,8 +244,8 @@ const StatChartBase = (props)=>{
 };
 const SeriesName = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
-})(({ theme, padding, fontSize })=>({
-        color: theme.palette.text.secondary,
+})(({ padding, fontSize, color })=>({
+        color: color,
         padding: `${padding}px`,
         fontSize: `${fontSize}px`,
         overflow: 'hidden',

package/lib/cjs/StatChartOptionsEditorSettings.js

@@ -26,6 +26,8 @@ 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 _react = require("react");
+const _statchartmodel = require("./stat-chart-model");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -48,6 +50,14 @@ function StatChartOptionsEditorSettings(props) {
             draft.metricLabel = newCalculation;
         }));
     };
+    const handleShowLegendChange = (0, _react.useCallback)((_, newShowLegend)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.legendMode = newShowLegend.id;
+        }));
+    }, [
+        onChange,
+        value
+    ]);
     const handleUnitChange = (newFormat)=>{
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.format = newFormat;
@@ -71,37 +81,83 @@ function StatChartOptionsEditorSettings(props) {
             draft.valueFontSize = fontSize;
         }));
     };
+    const handleColorModeChange = (0, _react.useCallback)((_, newColorMode)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.colorMode = newColorMode.id;
+        }));
+    }, [
+        onChange,
+        value
+    ]);
+    const selectShowLegend = (0, _react.useMemo)(()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+            label: "Show",
+            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
+                onChange: handleShowLegendChange,
+                options: _statchartmodel.SHOW_LEGEND_LABELS,
+                disableClearable: true,
+                value: _statchartmodel.SHOW_LEGEND_LABELS.find((i)=>i.id === value.legendMode) ?? _statchartmodel.SHOW_LEGEND_LABELS.find((i)=>i.id === 'auto')
+            })
+        });
+    }, [
+        value.legendMode,
+        handleShowLegendChange
+    ]);
+    const selectColorMode = (0, _react.useMemo)(()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+            label: "Color mode",
+            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
+                onChange: handleColorModeChange,
+                options: _statchartmodel.COLOR_MODE_LABELS.map(({ id, label })=>({
+                        id,
+                        label
+                    })),
+                disableClearable: true,
+                value: _statchartmodel.COLOR_MODE_LABELS.find((i)=>i.id === value.colorMode) ?? _statchartmodel.COLOR_MODE_LABELS.find((i)=>i.id === 'value')
+            })
+        });
+    }, [
+        value.colorMode,
+        handleColorModeChange
+    ]);
     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.jsxs)(_components.OptionsEditorColumn, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+                        title: "Legend",
+                        children: selectShowLegend
+                    }),
+                    /*#__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
+                            }),
+                            selectColorMode
+                        ]
+                    })
+                ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ThresholdsEditor, {

package/lib/cjs/StatChartPanel.js

@@ -33,11 +33,13 @@ const MIN_WIDTH = 100;
 const SPACING = 2;
 const StatChartPanel = (props)=>{
     const { spec, contentDimensions, queryResults } = props;
-    const { format, sparkline, valueFontSize: valueFontSize } = spec;
+    const { format, sparkline, valueFontSize: valueFontSize, colorMode } = spec;
     const chartsTheme = (0, _components.useChartsTheme)();
     const statChartData = useStatChartData(queryResults, spec, chartsTheme);
     const isMultiSeries = statChartData.length > 1;
-    if (contentDimensions === undefined) return null;
+    // Handle three-state showLegend: 'on' | 'off' | 'auto' (or undefined for backward compatibility)
+    const shouldShowLegend = spec.legendMode === 'on' ? true : spec.legendMode === 'off' ? false : isMultiSeries;
+    if (!contentDimensions) return null;
     // Calculates chart width
     const spacing = SPACING * (statChartData.length - 1);
     let chartWidth = (contentDimensions.width - spacing) / statChartData.length;
@@ -63,8 +65,9 @@ const StatChartPanel = (props)=>{
                 data: series,
                 format: format,
                 sparkline: sparklineConfig,
-                showSeriesName: isMultiSeries,
-                valueFontSize: valueFontSize
+                showSeriesName: shouldShowLegend,
+                valueFontSize: valueFontSize,
+                colorMode: colorMode
             }, index);
         }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
             sx: {

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/stat-chart-model.js

@@ -14,18 +14,61 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "createInitialStatChartOptions", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get COLOR_MODE_LABELS () {
+        return COLOR_MODE_LABELS;
+    },
+    get SHOW_LEGEND_LABELS () {
+        return SHOW_LEGEND_LABELS;
+    },
+    get createInitialStatChartOptions () {
         return createInitialStatChartOptions;
     }
 });
+const COLOR_MODE_LABELS = [
+    {
+        id: 'none',
+        label: 'None'
+    },
+    {
+        id: 'value',
+        label: 'Text'
+    },
+    {
+        id: 'background_solid',
+        label: 'Background'
+    }
+];
+const SHOW_LEGEND_LABELS = [
+    {
+        id: 'auto',
+        label: 'Auto',
+        description: 'Show legend for multi-series, hide legend for single series'
+    },
+    {
+        id: 'on',
+        label: 'On',
+        description: 'Always show legend'
+    },
+    {
+        id: 'off',
+        label: 'Off',
+        description: 'Always hide legend'
+    }
+];
 function createInitialStatChartOptions() {
     return {
         calculation: 'last-number',
         format: {
             unit: 'decimal'
         },
-        sparkline: {}
+        sparkline: {},
+        legendMode: 'auto'
     };
 }

package/lib/stat-chart-model.d.ts

@@ -1,5 +1,5 @@
-import { CalculationType, Definition, ThresholdOptions, FormatOptions, ValueMapping } from '@perses-dev/core';
 import { FontSizeOption } from '@perses-dev/components';
+import { CalculationType, Definition, FormatOptions, ThresholdOptions, ValueMapping } from '@perses-dev/core';
 import { OptionsEditorProps } from '@perses-dev/plugin-system';
 /**
  * The schema for a StatChart panel.
@@ -7,6 +7,19 @@ import { OptionsEditorProps } from '@perses-dev/plugin-system';
 export interface StatChartDefinition extends Definition<StatChartOptions> {
     kind: 'StatChart';
 }
+export type ColorMode = 'none' | 'value' | 'background_solid';
+export type ColorModeLabelItem = {
+    id: ColorMode;
+    label: string;
+};
+export declare const COLOR_MODE_LABELS: ColorModeLabelItem[];
+export type legendMode = 'auto' | 'on' | 'off';
+export type ShowLegendLabelItem = {
+    id: legendMode;
+    label: string;
+    description?: string;
+};
+export declare const SHOW_LEGEND_LABELS: ShowLegendLabelItem[];
 export interface StatChartOptions {
     calculation: CalculationType;
     format: FormatOptions;
@@ -15,6 +28,8 @@ export interface StatChartOptions {
     sparkline?: StatChartSparklineOptions;
     valueFontSize?: FontSizeOption;
     mappings?: ValueMapping[];
+    colorMode?: ColorMode;
+    legendMode?: legendMode;
 }
 export interface StatChartSparklineOptions {
     color?: string;

package/lib/stat-chart-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-chart-model.d.ts","sourceRoot":"","sources":["../../src/stat-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC9G,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,UAAU,CAAC,gBAAgB,CAAC;IACvE,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,2BAA2B,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;AAE/E,wBAAgB,6BAA6B,IAAI,gBAAgB,CAQhE"}
+{"version":3,"file":"stat-chart-model.d.ts","sourceRoot":"","sources":["../../src/stat-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC9G,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,UAAU,CAAC,gBAAgB,CAAC;IACvE,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,kBAAkB,CAAC;AAE9D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,SAAS,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,kBAAkB,EAIjD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,UAAU,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,mBAAmB,EAInD,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,2BAA2B,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;AAE/E,wBAAgB,6BAA6B,IAAI,gBAAgB,CAShE"}

package/lib/stat-chart-model.js

@@ -10,13 +10,45 @@
 // 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.
+export const COLOR_MODE_LABELS = [
+    {
+        id: 'none',
+        label: 'None'
+    },
+    {
+        id: 'value',
+        label: 'Text'
+    },
+    {
+        id: 'background_solid',
+        label: 'Background'
+    }
+];
+export const SHOW_LEGEND_LABELS = [
+    {
+        id: 'auto',
+        label: 'Auto',
+        description: 'Show legend for multi-series, hide legend for single series'
+    },
+    {
+        id: 'on',
+        label: 'On',
+        description: 'Always show legend'
+    },
+    {
+        id: 'off',
+        label: 'Off',
+        description: 'Always hide legend'
+    }
+];
 export function createInitialStatChartOptions() {
     return {
         calculation: 'last-number',
         format: {
             unit: 'decimal'
         },
-        sparkline: {}
+        sparkline: {},
+        legendMode: 'auto'
     };
 }
 

package/lib/stat-chart-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/stat-chart-model.ts"],"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 { CalculationType, Definition, ThresholdOptions, FormatOptions, ValueMapping } from '@perses-dev/core';\nimport { FontSizeOption } from '@perses-dev/components';\nimport { OptionsEditorProps } from '@perses-dev/plugin-system';\n\n/**\n * The schema for a StatChart panel.\n */\nexport interface StatChartDefinition extends Definition<StatChartOptions> {\n  kind: 'StatChart';\n}\n\nexport interface StatChartOptions {\n  calculation: CalculationType;\n  format: FormatOptions;\n  metricLabel?: string;\n  thresholds?: ThresholdOptions;\n  sparkline?: StatChartSparklineOptions;\n  valueFontSize?: FontSizeOption;\n  mappings?: ValueMapping[];\n}\n\nexport interface StatChartSparklineOptions {\n  color?: string;\n  width?: number;\n}\n\nexport type StatChartOptionsEditorProps = OptionsEditorProps<StatChartOptions>;\n\nexport function createInitialStatChartOptions(): StatChartOptions {\n  return {\n    calculation: 'last-number',\n    format: {\n      unit: 'decimal',\n    },\n    sparkline: {},\n  };\n}\n"],"names":["createInitialStatChartOptions","calculation","format","unit","sparkline"],"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;AA8BjC,OAAO,SAASA;IACd,OAAO;QACLC,aAAa;QACbC,QAAQ;YACNC,MAAM;QACR;QACAC,WAAW,CAAC;IACd;AACF"}
+{"version":3,"sources":["../../src/stat-chart-model.ts"],"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 { FontSizeOption } from '@perses-dev/components';\nimport { CalculationType, Definition, FormatOptions, ThresholdOptions, ValueMapping } from '@perses-dev/core';\nimport { OptionsEditorProps } from '@perses-dev/plugin-system';\n\n/**\n * The schema for a StatChart panel.\n */\nexport interface StatChartDefinition extends Definition<StatChartOptions> {\n  kind: 'StatChart';\n}\n\nexport type ColorMode = 'none' | 'value' | 'background_solid';\n\nexport type ColorModeLabelItem = {\n  id: ColorMode;\n  label: string;\n};\n\nexport const COLOR_MODE_LABELS: ColorModeLabelItem[] = [\n  { id: 'none', label: 'None' },\n  { id: 'value', label: 'Text' },\n  { id: 'background_solid', label: 'Background' },\n];\n\nexport type legendMode = 'auto' | 'on' | 'off';\n\nexport type ShowLegendLabelItem = {\n  id: legendMode;\n  label: string;\n  description?: string;\n};\n\nexport const SHOW_LEGEND_LABELS: ShowLegendLabelItem[] = [\n  { id: 'auto', label: 'Auto', description: 'Show legend for multi-series, hide legend for single series' },\n  { id: 'on', label: 'On', description: 'Always show legend' },\n  { id: 'off', label: 'Off', description: 'Always hide legend' },\n];\n\nexport interface StatChartOptions {\n  calculation: CalculationType;\n  format: FormatOptions;\n  metricLabel?: string;\n  thresholds?: ThresholdOptions;\n  sparkline?: StatChartSparklineOptions;\n  valueFontSize?: FontSizeOption;\n  mappings?: ValueMapping[];\n  colorMode?: ColorMode;\n  legendMode?: legendMode;\n}\n\nexport interface StatChartSparklineOptions {\n  color?: string;\n  width?: number;\n}\n\nexport type StatChartOptionsEditorProps = OptionsEditorProps<StatChartOptions>;\n\nexport function createInitialStatChartOptions(): StatChartOptions {\n  return {\n    calculation: 'last-number',\n    format: {\n      unit: 'decimal',\n    },\n    sparkline: {},\n    legendMode: 'auto',\n  };\n}\n"],"names":["COLOR_MODE_LABELS","id","label","SHOW_LEGEND_LABELS","description","createInitialStatChartOptions","calculation","format","unit","sparkline","legendMode"],"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;AAoBjC,OAAO,MAAMA,oBAA0C;IACrD;QAAEC,IAAI;QAAQC,OAAO;IAAO;IAC5B;QAAED,IAAI;QAASC,OAAO;IAAO;IAC7B;QAAED,IAAI;QAAoBC,OAAO;IAAa;CAC/C,CAAC;AAUF,OAAO,MAAMC,qBAA4C;IACvD;QAAEF,IAAI;QAAQC,OAAO;QAAQE,aAAa;IAA8D;IACxG;QAAEH,IAAI;QAAMC,OAAO;QAAME,aAAa;IAAqB;IAC3D;QAAEH,IAAI;QAAOC,OAAO;QAAOE,aAAa;IAAqB;CAC9D,CAAC;AAqBF,OAAO,SAASC;IACd,OAAO;QACLC,aAAa;QACbC,QAAQ;YACNC,MAAM;QACR;QACAC,WAAW,CAAC;QACZC,YAAY;IACd;AACF"}