@perses-dev/stat-chart-plugin 0.11.0 → 0.12.0-beta.0

package/lib/StatChartBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChartBase.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 { FC, ReactNode, useMemo } from 'react';\nimport { FormatOptions } from '@perses-dev/core';\nimport { Box, Typography, styled, useTheme } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, FontSizeOption, GraphSeries, useChartsTheme } from '@perses-dev/components';\nimport chroma from 'chroma-js';\nimport { useOptimalFontSize } from './utils/calculate-font-size';\nimport { formatStatChartValue } from './utils/format-stat-chart-value';\nimport { ColorMode } from './stat-chart-model';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\nconst WHITE_COLOR_CODE = '#FFFFFF';\nconst BLACK_COLOR_CODE = '#000000';\n\nexport interface StatChartData {\n  color: string;\n  calculatedValue?: string | number | null;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  format?: FormatOptions;\n  sparkline?: LineSeriesOption;\n  showSeriesName?: boolean;\n  valueFontSize?: FontSizeOption;\n  colorMode?: ColorMode;\n}\n\nexport const StatChartBase: FC<StatChartProps> = (props) => {\n  const {\n    width,\n    height,\n    data,\n    data: { color },\n    sparkline,\n    showSeriesName,\n    format,\n    valueFontSize,\n    colorMode,\n  } = props;\n\n  const {\n    palette: {\n      mode: paletteMode,\n      text: { secondary },\n    },\n  } = useTheme();\n  const chartsTheme = useChartsTheme();\n  const formattedValue = formatStatChartValue(data.calculatedValue, format);\n  const containerPadding = chartsTheme.container.padding.default;\n\n  // calculate series name font size and height\n  let seriesNameFontSize = useOptimalFontSize({\n    text: data?.seriesData?.name ?? '',\n    fontWeight: SERIES_NAME_FONT_WEIGHT,\n    width,\n    height: height * 0.125, // assume series name will take 12.5% of available height\n    lineHeight: LINE_HEIGHT,\n    maxSize: SERIES_NAME_MAX_FONT_SIZE,\n  });\n\n  const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n  // calculate value font size and height\n  const availableWidth = width - containerPadding * 2;\n  const availableHeight = height - seriesNameHeight;\n  const optimalValueFontSize = useOptimalFontSize({\n    text: formattedValue,\n    // override the font size if user selects it in the settings\n    fontSizeOverride: valueFontSize,\n    fontWeight: VALUE_FONT_WEIGHT,\n    // without sparkline, use only 50% of the available width so it looks better for multiseries\n    width: sparkline ? availableWidth : availableWidth * 0.5,\n    // with sparkline, use only 25% of available height to leave room for chart\n    // without sparkline, value should take up 90% of available space\n    height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n    lineHeight: LINE_HEIGHT,\n  });\n  const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;\n\n  // make sure the series name font size is slightly smaller than value font size\n  seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (!data.seriesData) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline) {\n      const lineSeries = {\n        type: 'line',\n        name: series.name,\n        data: series.values,\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n\n      const clonedSparkLine = { ...sparkline };\n      if (colorMode === 'background_solid') {\n        clonedSparkLine.areaStyle = { color: WHITE_COLOR_CODE, opacity: 0.4 };\n        clonedSparkLine.lineStyle = { color: WHITE_COLOR_CODE, opacity: 1 };\n      }\n\n      const mergedSeries = merge(lineSeries, clonedSparkLine);\n      statSeries.push(mergedSeries);\n    }\n\n    const option: EChartsCoreOption = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n        min: (value: { min: number; max: number }): number => {\n          if (value.min >= 0 && value.min <= 1) {\n            // helps with percent-decimal units, or datasets that return 0 or 1 booleans\n            return 0;\n          }\n          return value.min;\n        },\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline, colorMode]);\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n\n  const styledFormattedValue = useMemo(() => {\n    let valueColor = '';\n\n    switch (colorMode) {\n      case 'background_solid':\n        valueColor =\n          chroma.contrast(color, WHITE_COLOR_CODE) > chroma.contrast(color, BLACK_COLOR_CODE)\n            ? WHITE_COLOR_CODE\n            : BLACK_COLOR_CODE;\n        break;\n      case 'none':\n        valueColor = paletteMode === 'dark' ? WHITE_COLOR_CODE : BLACK_COLOR_CODE;\n        break;\n      case 'value':\n      default:\n        valueColor = color;\n        break;\n    }\n\n    return (\n      <Value variant=\"h3\" color={valueColor} fontSize={optimalValueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n    );\n  }, [colorMode, containerPadding, optimalValueFontSize, formattedValue, color, paletteMode]);\n\n  const seriesName = useMemo((): ReactNode | null => {\n    if (!showSeriesName) return null;\n\n    let textColor = '';\n\n    switch (colorMode) {\n      case 'background_solid':\n        textColor =\n          chroma.contrast(color, WHITE_COLOR_CODE) > chroma.contrast(color, BLACK_COLOR_CODE)\n            ? WHITE_COLOR_CODE\n            : BLACK_COLOR_CODE;\n        break;\n      case 'none':\n      case 'value':\n      default:\n        textColor = secondary;\n        break;\n    }\n\n    return (\n      <SeriesName padding={containerPadding} fontSize={seriesNameFontSize} color={textColor}>\n        {data.seriesData?.name}\n      </SeriesName>\n    );\n  }, [colorMode, showSeriesName, secondary, color, containerPadding, seriesNameFontSize, data?.seriesData?.name]);\n\n  return (\n    <Box\n      sx={{\n        height: '100%',\n        width: '100%',\n        backgroundColor: colorMode === 'background_solid' ? color : 'transparent',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: textAlignment,\n        alignItems: textAlignment,\n      }}\n    >\n      {seriesName}\n      {styledFormattedValue}\n      {sparkline && (\n        <EChart\n          sx={{\n            width: '100%',\n          }}\n          style={{\n            // ECharts rounds the height to the nearest integer by default.\n            // This can cause unneccessary scrollbars when the total height of this chart exceeds the 'height' prop.\n            height: Math.floor(height - seriesNameHeight - valueFontHeight),\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n};\n\nconst SeriesName = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'padding' && prop !== 'fontSize',\n})<{ padding?: number; fontSize?: number; textAlignment?: string; color?: string }>(({ padding, fontSize, color }) => ({\n  color: color,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","Box","Typography","styled","useTheme","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","EChart","useChartsTheme","chroma","useOptimalFontSize","formatStatChartValue","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","WHITE_COLOR_CODE","BLACK_COLOR_CODE","StatChartBase","props","width","height","data","color","sparkline","showSeriesName","format","valueFontSize","colorMode","palette","mode","paletteMode","text","secondary","chartsTheme","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","optimalValueFontSize","fontSizeOverride","valueFontHeight","Math","min","option","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","clonedSparkLine","areaStyle","opacity","lineStyle","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","styledFormattedValue","valueColor","contrast","Value","variant","fontSize","seriesName","textColor","SeriesName","sx","backgroundColor","display","flexDirection","justifyContent","alignItems","style","floor","theme","echartsTheme","renderer","shouldForwardProp","prop","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}
+{"version":3,"sources":["../../src/StatChartBase.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 { FC, ReactNode, useMemo } from 'react';\nimport { FormatOptions } from '@perses-dev/core';\nimport { Box, Typography, styled, useTheme } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, FontSizeOption, GraphSeries, useChartsTheme } from '@perses-dev/components';\nimport chroma from 'chroma-js';\nimport { useOptimalFontSize } from './utils/calculate-font-size';\nimport { formatStatChartValue } from './utils/format-stat-chart-value';\nimport { ColorMode } from './stat-chart-model';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\nconst WHITE_COLOR_CODE = '#FFFFFF';\nconst BLACK_COLOR_CODE = '#000000';\n\nexport interface StatChartData {\n  color: string;\n  calculatedValue?: string | number | null;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  format?: FormatOptions;\n  sparkline?: LineSeriesOption;\n  showSeriesName?: boolean;\n  valueFontSize?: FontSizeOption;\n  colorMode?: ColorMode;\n}\n\nexport const StatChartBase: FC<StatChartProps> = (props) => {\n  const {\n    width,\n    height,\n    data,\n    data: { color },\n    sparkline,\n    showSeriesName,\n    format,\n    valueFontSize,\n    colorMode,\n  } = props;\n\n  const {\n    palette: {\n      mode: paletteMode,\n      text: { secondary },\n    },\n  } = useTheme();\n  const chartsTheme = useChartsTheme();\n  const formattedValue = formatStatChartValue(data.calculatedValue, format);\n  const containerPadding = chartsTheme.container.padding.default;\n\n  // calculate series name font size and height\n  let seriesNameFontSize = useOptimalFontSize({\n    text: data?.seriesData?.name ?? '',\n    fontWeight: SERIES_NAME_FONT_WEIGHT,\n    width,\n    height: height * 0.125, // assume series name will take 12.5% of available height\n    lineHeight: LINE_HEIGHT,\n    maxSize: SERIES_NAME_MAX_FONT_SIZE,\n  });\n\n  const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n  // calculate value font size and height\n  const availableWidth = width - containerPadding * 2;\n  const availableHeight = height - seriesNameHeight;\n  const optimalValueFontSize = useOptimalFontSize({\n    text: formattedValue,\n    // override the font size if user selects it in the settings\n    fontSizeOverride: valueFontSize,\n    fontWeight: VALUE_FONT_WEIGHT,\n    // without sparkline, use only 50% of the available width so it looks better for multiseries\n    width: sparkline ? availableWidth : availableWidth * 0.5,\n    // with sparkline, use only 25% of available height to leave room for chart\n    // without sparkline, value should take up 90% of available space\n    height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n    lineHeight: LINE_HEIGHT,\n  });\n  const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;\n\n  // make sure the series name font size is slightly smaller than value font size\n  seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (!data.seriesData) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline) {\n      const lineSeries = {\n        type: 'line',\n        name: series.name,\n        data: series.values,\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n\n      const clonedSparkLine = { ...sparkline };\n      if (colorMode === 'background_solid') {\n        clonedSparkLine.areaStyle = { color: WHITE_COLOR_CODE, opacity: 0.4 };\n        clonedSparkLine.lineStyle = { color: WHITE_COLOR_CODE, opacity: 1 };\n      }\n\n      const mergedSeries = merge(lineSeries, clonedSparkLine);\n      statSeries.push(mergedSeries);\n    }\n\n    const option: EChartsCoreOption = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n        min: (value: { min: number; max: number }): number => {\n          if (value.min >= 0 && value.min <= 1) {\n            // helps with percent-decimal units, or datasets that return 0 or 1 booleans\n            return 0;\n          }\n          return value.min;\n        },\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline, colorMode]);\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n\n  const styledFormattedValue = useMemo(() => {\n    let valueColor = '';\n\n    switch (colorMode) {\n      case 'background_solid':\n        valueColor =\n          chroma.contrast(color, WHITE_COLOR_CODE) > chroma.contrast(color, BLACK_COLOR_CODE)\n            ? WHITE_COLOR_CODE\n            : BLACK_COLOR_CODE;\n        break;\n      case 'none':\n        valueColor = paletteMode === 'dark' ? WHITE_COLOR_CODE : BLACK_COLOR_CODE;\n        break;\n      case 'value':\n      default:\n        valueColor = color;\n        break;\n    }\n\n    return (\n      <Value variant=\"h3\" color={valueColor} fontSize={optimalValueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n    );\n  }, [colorMode, containerPadding, optimalValueFontSize, formattedValue, color, paletteMode]);\n\n  const seriesName = useMemo((): ReactNode | null => {\n    if (!showSeriesName) return null;\n\n    let textColor = '';\n\n    switch (colorMode) {\n      case 'background_solid':\n        textColor =\n          chroma.contrast(color, WHITE_COLOR_CODE) > chroma.contrast(color, BLACK_COLOR_CODE)\n            ? WHITE_COLOR_CODE\n            : BLACK_COLOR_CODE;\n        break;\n      case 'none':\n      case 'value':\n      default:\n        textColor = secondary;\n        break;\n    }\n\n    return (\n      <SeriesName padding={containerPadding} fontSize={seriesNameFontSize} color={textColor}>\n        {data.seriesData?.name}\n      </SeriesName>\n    );\n  }, [colorMode, showSeriesName, secondary, color, containerPadding, seriesNameFontSize, data?.seriesData?.name]);\n\n  return (\n    <Box\n      sx={{\n        height: '100%',\n        width: '100%',\n        backgroundColor: colorMode === 'background_solid' ? color : 'transparent',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: textAlignment,\n        alignItems: textAlignment,\n      }}\n    >\n      {seriesName}\n      {styledFormattedValue}\n      {sparkline && (\n        <EChart\n          sx={{\n            width: '100%',\n          }}\n          style={{\n            // ECharts rounds the height to the nearest integer by default.\n            // This can cause unneccessary scrollbars when the total height of this chart exceeds the 'height' prop.\n            height: Math.floor(height - seriesNameHeight - valueFontHeight),\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n};\n\nconst SeriesName = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'padding' && prop !== 'fontSize',\n})<{ padding?: number; fontSize?: number; textAlignment?: string; color?: string }>(({ padding, fontSize, color }) => ({\n  color: color,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","Box","Typography","styled","useTheme","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","EChart","useChartsTheme","chroma","useOptimalFontSize","formatStatChartValue","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","WHITE_COLOR_CODE","BLACK_COLOR_CODE","StatChartBase","props","width","height","data","color","sparkline","showSeriesName","format","valueFontSize","colorMode","palette","mode","paletteMode","text","secondary","chartsTheme","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","optimalValueFontSize","fontSizeOverride","valueFontHeight","Math","min","option","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","clonedSparkLine","areaStyle","opacity","lineStyle","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","styledFormattedValue","valueColor","contrast","Value","variant","fontSize","seriesName","textColor","SeriesName","sx","backgroundColor","display","flexDirection","justifyContent","alignItems","style","floor","theme","echartsTheme","renderer","shouldForwardProp","prop","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}

package/lib/StatChartOptionsEditorSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../src/StatChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAC3D,OAAO,EAIL,2BAA2B,EAC5B,MAAM,oBAAoB,CAAC;AAI5B,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CA2G/F"}
+{"version":3,"file":"StatChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../src/StatChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAC3D,OAAO,EAML,2BAA2B,EAC5B,MAAM,oBAAoB,CAAC;AAI5B,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CA0I/F"}

package/lib/StatChartOptionsEditorSettings.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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.
@@ -10,14 +11,13 @@
 // 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, jsxs as _jsxs } from "react/jsx-runtime";
 import { Switch } from '@mui/material';
 import { FontSizeSelector, FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup, SettingsAutocomplete, ThresholdsEditor } from '@perses-dev/components';
 import { CalculationSelector, MetricLabelInput } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
 import merge from 'lodash/merge';
 import { useCallback, useMemo } from 'react';
-import { COLOR_MODE_LABELS } from './stat-chart-model';
+import { COLOR_MODE_LABELS, SHOW_LEGEND_LABELS } from './stat-chart-model';
 const DEFAULT_FORMAT = {
     unit: 'percent-decimal'
 };
@@ -35,6 +35,14 @@ export function StatChartOptionsEditorSettings(props) {
             draft.metricLabel = newCalculation;
         }));
     };
+    const handleShowLegendChange = useCallback((_, newShowLegend)=>{
+        onChange(produce(value, (draft)=>{
+            draft.legendMode = newShowLegend.id;
+        }));
+    }, [
+        onChange,
+        value
+    ]);
     const handleUnitChange = (newFormat)=>{
         onChange(produce(value, (draft)=>{
             draft.format = newFormat;
@@ -66,6 +74,20 @@ export function StatChartOptionsEditorSettings(props) {
         onChange,
         value
     ]);
+    const selectShowLegend = useMemo(()=>{
+        return /*#__PURE__*/ _jsx(OptionsEditorControl, {
+            label: "Show",
+            control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                onChange: handleShowLegendChange,
+                options: SHOW_LEGEND_LABELS,
+                disableClearable: true,
+                value: SHOW_LEGEND_LABELS.find((i)=>i.id === value.legendMode) ?? SHOW_LEGEND_LABELS.find((i)=>i.id === 'auto')
+            })
+        });
+    }, [
+        value.legendMode,
+        handleShowLegendChange
+    ]);
     const selectColorMode = useMemo(()=>{
         return /*#__PURE__*/ _jsx(OptionsEditorControl, {
             label: "Color mode",
@@ -85,36 +107,42 @@ export function StatChartOptionsEditorSettings(props) {
     ]);
     return /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
         children: [
-            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
-                children: /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
-                    title: "Misc",
-                    children: [
-                        /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                            label: "Sparkline",
-                            control: /*#__PURE__*/ _jsx(Switch, {
-                                checked: !!value.sparkline,
-                                onChange: handleSparklineChange
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx(FormatControls, {
-                            value: format,
-                            onChange: handleUnitChange
-                        }),
-                        /*#__PURE__*/ _jsx(CalculationSelector, {
-                            value: value.calculation,
-                            onChange: handleCalculationChange
-                        }),
-                        /*#__PURE__*/ _jsx(MetricLabelInput, {
-                            value: value.metricLabel,
-                            onChange: handleMetricLabelChange
-                        }),
-                        /*#__PURE__*/ _jsx(FontSizeSelector, {
-                            value: value.valueFontSize,
-                            onChange: handleFontSizeChange
-                        }),
-                        selectColorMode
-                    ]
-                })
+            /*#__PURE__*/ _jsxs(OptionsEditorColumn, {
+                children: [
+                    /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                        title: "Legend",
+                        children: selectShowLegend
+                    }),
+                    /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+                        title: "Misc",
+                        children: [
+                            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                                label: "Sparkline",
+                                control: /*#__PURE__*/ _jsx(Switch, {
+                                    checked: !!value.sparkline,
+                                    onChange: handleSparklineChange
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(FormatControls, {
+                                value: format,
+                                onChange: handleUnitChange
+                            }),
+                            /*#__PURE__*/ _jsx(CalculationSelector, {
+                                value: value.calculation,
+                                onChange: handleCalculationChange
+                            }),
+                            /*#__PURE__*/ _jsx(MetricLabelInput, {
+                                value: value.metricLabel,
+                                onChange: handleMetricLabelChange
+                            }),
+                            /*#__PURE__*/ _jsx(FontSizeSelector, {
+                                value: value.valueFontSize,
+                                onChange: handleFontSizeChange
+                            }),
+                            selectColorMode
+                        ]
+                    })
+                ]
             }),
             /*#__PURE__*/ _jsx(OptionsEditorColumn, {
                 children: /*#__PURE__*/ _jsx(ThresholdsEditor, {

package/lib/StatChartOptionsEditorSettings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChartOptionsEditorSettings.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 { Switch, SwitchProps } from '@mui/material';\nimport {\n  FontSizeOption,\n  FontSizeSelector,\n  FontSizeSelectorProps,\n  FormatControls,\n  FormatControlsProps,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SettingsAutocomplete,\n  ThresholdsEditor,\n  ThresholdsEditorProps,\n} from '@perses-dev/components';\nimport { FormatOptions } from '@perses-dev/core';\nimport {\n  CalculationSelector,\n  CalculationSelectorProps,\n  MetricLabelInput,\n  MetricLabelInputProps,\n} from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport { ReactElement, useCallback, useMemo } from 'react';\nimport {\n  COLOR_MODE_LABELS,\n  ColorModeLabelItem,\n  StatChartOptions,\n  StatChartOptionsEditorProps,\n} from './stat-chart-model';\n\nconst DEFAULT_FORMAT: FormatOptions = { unit: 'percent-decimal' };\n\nexport function StatChartOptionsEditorSettings(props: StatChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  // ensures decimalPlaces defaults to correct value\n  const format = merge({}, DEFAULT_FORMAT, value.format);\n\n  const handleCalculationChange: CalculationSelectorProps['onChange'] = (metricLabel) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.calculation = metricLabel;\n      })\n    );\n  };\n\n  const handleMetricLabelChange: MetricLabelInputProps['onChange'] = (newCalculation) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.metricLabel = newCalculation;\n      })\n    );\n  };\n\n  const handleUnitChange: FormatControlsProps['onChange'] = (newFormat) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.format = newFormat;\n      })\n    );\n  };\n\n  const handleSparklineChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        // For now, setting to an empty object when checked, so the stat chart\n        // uses the default chart color and line styles. In the future, this\n        // will likely be configurable in the UI.\n        draft.sparkline = checked ? {} : undefined;\n      })\n    );\n  };\n\n  const handleThresholdsChange: ThresholdsEditorProps['onChange'] = (thresholds) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.thresholds = thresholds;\n      })\n    );\n  };\n\n  const handleFontSizeChange: FontSizeSelectorProps['onChange'] = (fontSize: FontSizeOption) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.valueFontSize = fontSize;\n      })\n    );\n  };\n\n  const handleColorModeChange = useCallback(\n    (_: unknown, newColorMode: ColorModeLabelItem): void => {\n      onChange(\n        produce(value, (draft: StatChartOptions) => {\n          draft.colorMode = newColorMode.id;\n        })\n      );\n    },\n    [onChange, value]\n  );\n\n  const selectColorMode = useMemo((): ReactElement => {\n    return (\n      <OptionsEditorControl\n        label=\"Color mode\"\n        control={\n          <SettingsAutocomplete\n            onChange={handleColorModeChange}\n            options={COLOR_MODE_LABELS.map(({ id, label }) => ({ id, label }))}\n            disableClearable\n            value={\n              COLOR_MODE_LABELS.find((i) => i.id === value.colorMode) ??\n              COLOR_MODE_LABELS.find((i) => i.id === 'value')!\n            }\n          />\n        }\n      />\n    );\n  }, [value.colorMode, handleColorModeChange]);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Misc\">\n          <OptionsEditorControl\n            label=\"Sparkline\"\n            control={<Switch checked={!!value.sparkline} onChange={handleSparklineChange} />}\n          />\n          <FormatControls value={format} onChange={handleUnitChange} />\n          <CalculationSelector value={value.calculation} onChange={handleCalculationChange} />\n          <MetricLabelInput value={value.metricLabel} onChange={handleMetricLabelChange} />\n          <FontSizeSelector value={value.valueFontSize} onChange={handleFontSizeChange} />\n          {selectColorMode}\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <ThresholdsEditor disablePercentMode thresholds={value.thresholds} onChange={handleThresholdsChange} />\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Switch","FontSizeSelector","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","SettingsAutocomplete","ThresholdsEditor","CalculationSelector","MetricLabelInput","produce","merge","useCallback","useMemo","COLOR_MODE_LABELS","DEFAULT_FORMAT","unit","StatChartOptionsEditorSettings","props","onChange","value","format","handleCalculationChange","metricLabel","draft","calculation","handleMetricLabelChange","newCalculation","handleUnitChange","newFormat","handleSparklineChange","_","checked","sparkline","undefined","handleThresholdsChange","thresholds","handleFontSizeChange","fontSize","valueFontSize","handleColorModeChange","newColorMode","colorMode","id","selectColorMode","label","control","options","map","disableClearable","find","i","title","disablePercentMode"],"mappings":"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"}
+{"version":3,"sources":["../../src/StatChartOptionsEditorSettings.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 { Switch, SwitchProps } from '@mui/material';\nimport {\n  FontSizeOption,\n  FontSizeSelector,\n  FontSizeSelectorProps,\n  FormatControls,\n  FormatControlsProps,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SettingsAutocomplete,\n  ThresholdsEditor,\n  ThresholdsEditorProps,\n} from '@perses-dev/components';\nimport { FormatOptions } from '@perses-dev/core';\nimport {\n  CalculationSelector,\n  CalculationSelectorProps,\n  MetricLabelInput,\n  MetricLabelInputProps,\n} from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport { ReactElement, useCallback, useMemo } from 'react';\nimport {\n  COLOR_MODE_LABELS,\n  ColorModeLabelItem,\n  SHOW_LEGEND_LABELS,\n  ShowLegendLabelItem,\n  StatChartOptions,\n  StatChartOptionsEditorProps,\n} from './stat-chart-model';\n\nconst DEFAULT_FORMAT: FormatOptions = { unit: 'percent-decimal' };\n\nexport function StatChartOptionsEditorSettings(props: StatChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  // ensures decimalPlaces defaults to correct value\n  const format = merge({}, DEFAULT_FORMAT, value.format);\n\n  const handleCalculationChange: CalculationSelectorProps['onChange'] = (metricLabel) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.calculation = metricLabel;\n      })\n    );\n  };\n\n  const handleMetricLabelChange: MetricLabelInputProps['onChange'] = (newCalculation) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.metricLabel = newCalculation;\n      })\n    );\n  };\n\n  const handleShowLegendChange = useCallback(\n    (_: unknown, newShowLegend: ShowLegendLabelItem): void => {\n      onChange(\n        produce(value, (draft: StatChartOptions) => {\n          draft.legendMode = newShowLegend.id;\n        })\n      );\n    },\n    [onChange, value]\n  );\n\n  const handleUnitChange: FormatControlsProps['onChange'] = (newFormat) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.format = newFormat;\n      })\n    );\n  };\n\n  const handleSparklineChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        // For now, setting to an empty object when checked, so the stat chart\n        // uses the default chart color and line styles. In the future, this\n        // will likely be configurable in the UI.\n        draft.sparkline = checked ? {} : undefined;\n      })\n    );\n  };\n\n  const handleThresholdsChange: ThresholdsEditorProps['onChange'] = (thresholds) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.thresholds = thresholds;\n      })\n    );\n  };\n\n  const handleFontSizeChange: FontSizeSelectorProps['onChange'] = (fontSize: FontSizeOption) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.valueFontSize = fontSize;\n      })\n    );\n  };\n\n  const handleColorModeChange = useCallback(\n    (_: unknown, newColorMode: ColorModeLabelItem): void => {\n      onChange(\n        produce(value, (draft: StatChartOptions) => {\n          draft.colorMode = newColorMode.id;\n        })\n      );\n    },\n    [onChange, value]\n  );\n\n  const selectShowLegend = useMemo((): ReactElement => {\n    return (\n      <OptionsEditorControl\n        label=\"Show\"\n        control={\n          <SettingsAutocomplete\n            onChange={handleShowLegendChange}\n            options={SHOW_LEGEND_LABELS}\n            disableClearable\n            value={\n              SHOW_LEGEND_LABELS.find((i) => i.id === value.legendMode) ??\n              SHOW_LEGEND_LABELS.find((i) => i.id === 'auto')!\n            }\n          />\n        }\n      />\n    );\n  }, [value.legendMode, handleShowLegendChange]);\n\n  const selectColorMode = useMemo((): ReactElement => {\n    return (\n      <OptionsEditorControl\n        label=\"Color mode\"\n        control={\n          <SettingsAutocomplete\n            onChange={handleColorModeChange}\n            options={COLOR_MODE_LABELS.map(({ id, label }) => ({ id, label }))}\n            disableClearable\n            value={\n              COLOR_MODE_LABELS.find((i) => i.id === value.colorMode) ??\n              COLOR_MODE_LABELS.find((i) => i.id === 'value')!\n            }\n          />\n        }\n      />\n    );\n  }, [value.colorMode, handleColorModeChange]);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Legend\">{selectShowLegend}</OptionsEditorGroup>\n        <OptionsEditorGroup title=\"Misc\">\n          <OptionsEditorControl\n            label=\"Sparkline\"\n            control={<Switch checked={!!value.sparkline} onChange={handleSparklineChange} />}\n          />\n          <FormatControls value={format} onChange={handleUnitChange} />\n          <CalculationSelector value={value.calculation} onChange={handleCalculationChange} />\n          <MetricLabelInput value={value.metricLabel} onChange={handleMetricLabelChange} />\n          <FontSizeSelector value={value.valueFontSize} onChange={handleFontSizeChange} />\n          {selectColorMode}\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <ThresholdsEditor disablePercentMode thresholds={value.thresholds} onChange={handleThresholdsChange} />\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Switch","FontSizeSelector","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","SettingsAutocomplete","ThresholdsEditor","CalculationSelector","MetricLabelInput","produce","merge","useCallback","useMemo","COLOR_MODE_LABELS","SHOW_LEGEND_LABELS","DEFAULT_FORMAT","unit","StatChartOptionsEditorSettings","props","onChange","value","format","handleCalculationChange","metricLabel","draft","calculation","handleMetricLabelChange","newCalculation","handleShowLegendChange","_","newShowLegend","legendMode","id","handleUnitChange","newFormat","handleSparklineChange","checked","sparkline","undefined","handleThresholdsChange","thresholds","handleFontSizeChange","fontSize","valueFontSize","handleColorModeChange","newColorMode","colorMode","selectShowLegend","label","control","options","disableClearable","find","i","selectColorMode","map","title","disablePercentMode"],"mappings":"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"}

package/lib/StatChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatChartPanel.d.ts","sourceRoot":"","sources":["../../src/StatChartPanel.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AACpC,OAAO,EAAoD,cAAc,EAAgB,MAAM,kBAAkB,CAAC;AAClH,OAAO,EAAE,UAAU,EAAa,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAStD,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;AAE/E,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAuDlD,CAAC"}
+{"version":3,"file":"StatChartPanel.d.ts","sourceRoot":"","sources":["../../src/StatChartPanel.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AACpC,OAAO,EAAoD,cAAc,EAAgB,MAAM,kBAAkB,CAAC;AAClH,OAAO,EAAE,UAAU,EAAa,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAStD,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;AAE/E,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA0DlD,CAAC"}

package/lib/StatChartPanel.js

@@ -27,6 +27,8 @@ export const StatChartPanel = (props)=>{
     const chartsTheme = useChartsTheme();
     const statChartData = useStatChartData(queryResults, spec, chartsTheme);
     const isMultiSeries = statChartData.length > 1;
+    // 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);
@@ -53,7 +55,7 @@ export const StatChartPanel = (props)=>{
                 data: series,
                 format: format,
                 sparkline: sparklineConfig,
-                showSeriesName: isMultiSeries,
+                showSeriesName: shouldShowLegend,
                 valueFontSize: valueFontSize,
                 colorMode: colorMode
             }, index);

package/lib/StatChartPanel.js.map

@@ -1 +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 { 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';\nimport { StatChartBase, StatChartData } from './StatChartBase';\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, colorMode } = spec;\n  const chartsTheme = useChartsTheme();\n  const statChartData = useStatChartData(queryResults, spec, chartsTheme);\n\n  const isMultiSeries = statChartData.length > 1;\n\n  if (!contentDimensions) 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            <StatChartBase\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              colorMode={colorMode}\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":["useChartsTheme","Stack","Typography","useMemo","applyValueMapping","createRegexFromString","convertSparkline","calculateValue","getStatChartColor","StatChartBase","MIN_WIDTH","SPACING","StatChartPanel","props","spec","contentDimensions","queryResults","format","sparkline","valueFontSize","colorMode","chartsTheme","statChartData","useStatChartData","isMultiSeries","length","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","undefined","fieldLabel","key","Object","entries","regex","test"],"mappings":"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"}
+{"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 { 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';\nimport { StatChartBase, StatChartData } from './StatChartBase';\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, colorMode } = spec;\n  const chartsTheme = useChartsTheme();\n  const statChartData = useStatChartData(queryResults, spec, chartsTheme);\n\n  const isMultiSeries = statChartData.length > 1;\n\n  // Handle three-state showLegend: 'on' | 'off' | 'auto' (or undefined for backward compatibility)\n  const shouldShowLegend = spec.legendMode === 'on' ? true : spec.legendMode === 'off' ? false : isMultiSeries;\n\n  if (!contentDimensions) 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            <StatChartBase\n              key={index}\n              width={chartWidth}\n              height={contentDimensions.height}\n              data={series}\n              format={format}\n              sparkline={sparklineConfig}\n              showSeriesName={shouldShowLegend}\n              valueFontSize={valueFontSize}\n              colorMode={colorMode}\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":["useChartsTheme","Stack","Typography","useMemo","applyValueMapping","createRegexFromString","convertSparkline","calculateValue","getStatChartColor","StatChartBase","MIN_WIDTH","SPACING","StatChartPanel","props","spec","contentDimensions","queryResults","format","sparkline","valueFontSize","colorMode","chartsTheme","statChartData","useStatChartData","isMultiSeries","length","shouldShowLegend","legendMode","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","undefined","fieldLabel","key","Object","entries","regex","test"],"mappings":"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"}

package/lib/bootstrap.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // 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.
@@ -10,7 +11,6 @@
 // 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'));

package/lib/bootstrap.js.map

@@ -1 +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"}
+{"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/StatChartOptionsEditorSettings.js

@@ -50,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;
@@ -81,6 +89,20 @@ function StatChartOptionsEditorSettings(props) {
         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",
@@ -100,36 +122,42 @@ function StatChartOptionsEditorSettings(props) {
     ]);
     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
-                        }),
-                        selectColorMode
-                    ]
-                })
+            /*#__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

@@ -37,6 +37,8 @@ const StatChartPanel = (props)=>{
     const chartsTheme = (0, _components.useChartsTheme)();
     const statChartData = useStatChartData(queryResults, spec, chartsTheme);
     const isMultiSeries = statChartData.length > 1;
+    // 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);
@@ -63,7 +65,7 @@ const StatChartPanel = (props)=>{
                 data: series,
                 format: format,
                 sparkline: sparklineConfig,
-                showSeriesName: isMultiSeries,
+                showSeriesName: shouldShowLegend,
                 valueFontSize: valueFontSize,
                 colorMode: colorMode
             }, index);

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

@@ -17,14 +17,17 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    COLOR_MODE_LABELS: function() {
+    get COLOR_MODE_LABELS () {
         return COLOR_MODE_LABELS;
     },
-    createInitialStatChartOptions: function() {
+    get SHOW_LEGEND_LABELS () {
+        return SHOW_LEGEND_LABELS;
+    },
+    get createInitialStatChartOptions () {
         return createInitialStatChartOptions;
     }
 });
@@ -42,12 +45,30 @@ const COLOR_MODE_LABELS = [
         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.
@@ -13,6 +13,13 @@ export type ColorModeLabelItem = {
     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;
@@ -22,6 +29,7 @@ export interface StatChartOptions {
     valueFontSize?: FontSizeOption;
     mappings?: ValueMapping[];
     colorMode?: ColorMode;
+    legendMode?: legendMode;
 }
 export interface StatChartSparklineOptions {
     color?: string;