@perses-dev/stat-chart-plugin 0.15.0-beta.2 → 0.15.0-beta.3

package/lib/StatChartBase.d.ts

@@ -15,7 +15,10 @@ export interface StatChartProps {
     sparkline?: LineSeriesOption;
     showSeriesName?: boolean;
     valueFontSize?: FontSizeOption;
+    legendFontSize?: FontSizeOption;
     colorMode?: ColorMode;
+    alignmentText?: string;
+    alignmentSeriesName?: string;
 }
 export declare const StatChartBase: FC<StatChartProps>;
 //# sourceMappingURL=StatChartBase.d.ts.map

package/lib/StatChartBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatChartBase.d.ts","sourceRoot":"","sources":["../../src/StatChartBase.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGzF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAOvD,OAAO,KAAK,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAapD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,cAAc,CA4M5C,CAAC"}
+{"version":3,"file":"StatChartBase.d.ts","sourceRoot":"","sources":["../../src/StatChartBase.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGzF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAOvD,OAAO,KAAK,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAapD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,cAAc,CAuN5C,CAAC"}

package/lib/StatChartBase.js

@@ -37,39 +37,42 @@ const VALUE_FONT_WEIGHT = 700;
 const WHITE_COLOR_CODE = '#FFFFFF';
 const BLACK_COLOR_CODE = '#000000';
 export const StatChartBase = (props)=>{
-    const { width, height, data, data: { color }, sparkline, showSeriesName, format, valueFontSize, colorMode } = props;
+    const { width, height, data, data: { color }, sparkline, showSeriesName, format, valueFontSize, legendFontSize, colorMode, alignmentText, alignmentSeriesName } = props;
     const { palette: { mode: paletteMode, text: { secondary } } } = useTheme();
     const chartsTheme = useChartsTheme();
     const formattedValue = formatStatChartValue(data.calculatedValue, format);
     const containerPadding = chartsTheme.container.padding.default;
-    // calculate series name font size and height
+    const availableWidth = width - containerPadding * 2;
+    // in multi-series: legend gets a fixed portion of height (like Grafana)
     let seriesNameFontSize = useOptimalFontSize({
         text: data?.seriesData?.name ?? '',
         fontWeight: SERIES_NAME_FONT_WEIGHT,
         width,
-        height: height * 0.125,
+        height: height * 0.2,
         lineHeight: LINE_HEIGHT,
         maxSize: SERIES_NAME_MAX_FONT_SIZE
     });
+    if (legendFontSize !== undefined) {
+        seriesNameFontSize = legendFontSize;
+    } else if (alignmentSeriesName !== undefined) {
+        // multi-series: use 15% of cell height for legend, clamped between 14px and 30px
+        seriesNameFontSize = Math.max(14, Math.min(height * 0.15 / LINE_HEIGHT, SERIES_NAME_MAX_FONT_SIZE));
+    }
     const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;
-    // calculate value font size and height
-    const availableWidth = width - containerPadding * 2;
     const availableHeight = height - seriesNameHeight;
     const optimalValueFontSize = useOptimalFontSize({
-        text: formattedValue,
-        // override the font size if user selects it in the settings
+        text: alignmentText || formattedValue,
         fontSizeOverride: valueFontSize,
         fontWeight: VALUE_FONT_WEIGHT,
-        // without sparkline, use only 50% of the available width so it looks better for multiseries
         width: sparkline ? availableWidth : availableWidth * 0.5,
-        // with sparkline, use only 25% of available height to leave room for chart
-        // without sparkline, value should take up 90% of available space
         height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,
         lineHeight: LINE_HEIGHT
     });
     const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;
-    // make sure the series name font size is slightly smaller than value font size
-    seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);
+    // single-series: keep legend smaller than value (unless explicitly set)
+    if (alignmentSeriesName === undefined && legendFontSize === undefined) {
+        seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);
+    }
     const option = useMemo(()=>{
         if (!data.seriesData) return chartsTheme.noDataOption;
         const series = data.seriesData;
@@ -201,7 +204,10 @@ export const StatChartBase = (props)=>{
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {
             height: '100%',
-            width: '100%',
+            width: width,
+            minWidth: width,
+            flexShrink: 0,
+            overflow: 'hidden',
             backgroundColor: colorMode === 'background_solid' ? color : 'transparent',
             display: 'flex',
             flexDirection: 'column',
@@ -233,8 +239,6 @@ const SeriesName = styled(Typography, {
         color: color,
         padding: `${padding}px`,
         fontSize: `${fontSize}px`,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
         whiteSpace: 'nowrap'
     }));
 const Value = styled(Typography, {

package/lib/StatChartBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChartBase.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Typography, styled, useTheme } from '@mui/material';\nimport type { FontSizeOption, FormatOptions, GraphSeries } from '@perses-dev/components';\nimport { EChart, useChartsTheme } from '@perses-dev/components';\nimport chroma from 'chroma-js';\nimport type { LineSeriesOption } from 'echarts/charts';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport type { EChartsCoreOption } from 'echarts/core';\nimport { use as registerECharts } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport merge from 'lodash/merge';\nimport type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\n\nimport type { ColorMode } from './stat-chart-model';\nimport { useOptimalFontSize } from './utils/calculate-font-size';\nimport { formatStatChartValue } from './utils/format-stat-chart-value';\n\nregisterECharts([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":["Box","Typography","styled","useTheme","EChart","useChartsTheme","chroma","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","use","registerECharts","CanvasRenderer","merge","useMemo","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 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Typography, styled, useTheme } from '@mui/material';\nimport type { FontSizeOption, FormatOptions, GraphSeries } from '@perses-dev/components';\nimport { EChart, useChartsTheme } from '@perses-dev/components';\nimport chroma from 'chroma-js';\nimport type { LineSeriesOption } from 'echarts/charts';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport type { EChartsCoreOption } from 'echarts/core';\nimport { use as registerECharts } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport merge from 'lodash/merge';\nimport type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\n\nimport type { ColorMode } from './stat-chart-model';\nimport { useOptimalFontSize } from './utils/calculate-font-size';\nimport { formatStatChartValue } from './utils/format-stat-chart-value';\n\nregisterECharts([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  legendFontSize?: FontSizeOption;\n  colorMode?: ColorMode;\n  alignmentText?: string;\n  alignmentSeriesName?: string;\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    legendFontSize,\n    colorMode,\n    alignmentText,\n    alignmentSeriesName,\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  const availableWidth = width - containerPadding * 2;\n\n  // in multi-series: legend gets a fixed portion of height (like Grafana)\n  let seriesNameFontSize = useOptimalFontSize({\n    text: data?.seriesData?.name ?? '',\n    fontWeight: SERIES_NAME_FONT_WEIGHT,\n    width,\n    height: height * 0.2,\n    lineHeight: LINE_HEIGHT,\n    maxSize: SERIES_NAME_MAX_FONT_SIZE,\n  });\n\n  if (legendFontSize !== undefined) {\n    seriesNameFontSize = legendFontSize;\n  } else if (alignmentSeriesName !== undefined) {\n    // multi-series: use 15% of cell height for legend, clamped between 14px and 30px\n    seriesNameFontSize = Math.max(14, Math.min((height * 0.15) / LINE_HEIGHT, SERIES_NAME_MAX_FONT_SIZE));\n  }\n\n  const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n  const availableHeight = height - seriesNameHeight;\n  const optimalValueFontSize = useOptimalFontSize({\n    text: alignmentText || formattedValue,\n    fontSizeOverride: valueFontSize,\n    fontWeight: VALUE_FONT_WEIGHT,\n    width: sparkline ? availableWidth : availableWidth * 0.5,\n    height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n    lineHeight: LINE_HEIGHT,\n  });\n  const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;\n\n  // single-series: keep legend smaller than value (unless explicitly set)\n  if (alignmentSeriesName === undefined && legendFontSize === undefined) {\n    seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);\n  }\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: width,\n        minWidth: width,\n        flexShrink: 0,\n        overflow: 'hidden',\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  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":["Box","Typography","styled","useTheme","EChart","useChartsTheme","chroma","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","use","registerECharts","CanvasRenderer","merge","useMemo","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","legendFontSize","colorMode","alignmentText","alignmentSeriesName","palette","mode","paletteMode","text","secondary","chartsTheme","formattedValue","calculatedValue","containerPadding","container","padding","default","availableWidth","seriesNameFontSize","seriesData","name","fontWeight","lineHeight","maxSize","undefined","Math","max","min","seriesNameHeight","availableHeight","optimalValueFontSize","fontSizeOverride","valueFontHeight","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","minWidth","flexShrink","overflow","backgroundColor","display","flexDirection","justifyContent","alignItems","style","floor","theme","echartsTheme","renderer","shouldForwardProp","prop","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":"AAoCA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAIV,2BAA2B,EAC5B,MAAM,oBAAoB,CAAC;AAK5B,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CA0I/F"}
+{"version":3,"file":"StatChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../src/StatChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAIV,2BAA2B,EAC5B,MAAM,oBAAoB,CAAC;AAK5B,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CAqJ/F"}

package/lib/StatChartOptionsEditorSettings.js

@@ -66,6 +66,11 @@ export function StatChartOptionsEditorSettings(props) {
             draft.valueFontSize = fontSize;
         }));
     };
+    const handleLegendFontSizeChange = (fontSize)=>{
+        onChange(produce(value, (draft)=>{
+            draft.legendFontSize = fontSize;
+        }));
+    };
     const handleColorModeChange = useCallback((_, newColorMode)=>{
         onChange(produce(value, (draft)=>{
             draft.colorMode = newColorMode.id;
@@ -109,9 +114,15 @@ export function StatChartOptionsEditorSettings(props) {
         children: [
             /*#__PURE__*/ _jsxs(OptionsEditorColumn, {
                 children: [
-                    /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                    /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
                         title: "Legend",
-                        children: selectShowLegend
+                        children: [
+                            selectShowLegend,
+                            /*#__PURE__*/ _jsx(FontSizeSelector, {
+                                value: value.legendFontSize,
+                                onChange: handleLegendFontSizeChange
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
                         title: "Misc",

package/lib/StatChartOptionsEditorSettings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChartOptionsEditorSettings.tsx"],"sourcesContent":["// Copyright 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 type { SwitchProps } from '@mui/material';\nimport { Switch } from '@mui/material';\nimport type {\n  FontSizeOption,\n  FontSizeSelectorProps,\n  FormatControlsProps,\n  FormatOptions,\n  ThresholdsEditorProps,\n} from '@perses-dev/components';\nimport {\n  FontSizeSelector,\n  FormatControls,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SettingsAutocomplete,\n  ThresholdsEditor,\n} from '@perses-dev/components';\nimport type { CalculationSelectorProps, MetricLabelInputProps } from '@perses-dev/plugin-system';\nimport { CalculationSelector, MetricLabelInput } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport type { ReactElement } from 'react';\nimport { useCallback, useMemo } from 'react';\n\nimport type {\n  ColorModeLabelItem,\n  ShowLegendLabelItem,\n  StatChartOptions,\n  StatChartOptionsEditorProps,\n} from './stat-chart-model';\nimport { COLOR_MODE_LABELS, SHOW_LEGEND_LABELS } 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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"}
+{"version":3,"sources":["../../src/StatChartOptionsEditorSettings.tsx"],"sourcesContent":["// Copyright 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 type { SwitchProps } from '@mui/material';\nimport { Switch } from '@mui/material';\nimport type {\n  FontSizeOption,\n  FontSizeSelectorProps,\n  FormatControlsProps,\n  FormatOptions,\n  ThresholdsEditorProps,\n} from '@perses-dev/components';\nimport {\n  FontSizeSelector,\n  FormatControls,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SettingsAutocomplete,\n  ThresholdsEditor,\n} from '@perses-dev/components';\nimport type { CalculationSelectorProps, MetricLabelInputProps } from '@perses-dev/plugin-system';\nimport { CalculationSelector, MetricLabelInput } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport type { ReactElement } from 'react';\nimport { useCallback, useMemo } from 'react';\n\nimport type {\n  ColorModeLabelItem,\n  ShowLegendLabelItem,\n  StatChartOptions,\n  StatChartOptionsEditorProps,\n} from './stat-chart-model';\nimport { COLOR_MODE_LABELS, SHOW_LEGEND_LABELS } 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 handleLegendFontSizeChange: FontSizeSelectorProps['onChange'] = (fontSize: FontSizeOption) => {\n    onChange(\n      produce(value, (draft: StatChartOptions) => {\n        draft.legendFontSize = 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\">\n          {selectShowLegend}\n          <FontSizeSelector value={value.legendFontSize} onChange={handleLegendFontSizeChange} />\n        </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","handleLegendFontSizeChange","legendFontSize","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":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAa,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAU3D,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;AAE/E,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA+DlD,CAAC"}
+{"version":3,"file":"StatChartPanel.d.ts","sourceRoot":"","sources":["../../src/StatChartPanel.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAa,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAY3D,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;AAE/E,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAuIlD,CAAC"}

package/lib/StatChartPanel.js

@@ -15,17 +15,62 @@ import { Stack, Typography } from "@mui/material";
 import { useChartsTheme, applyValueMapping, createRegexFromString } from "@perses-dev/components";
 import { useMemo } from "react";
 import { StatChartBase } from "./StatChartBase.js";
+import { measureTextWidth } from "./utils/calculate-font-size.js";
 import { calculateValue } from "./utils/calculate-value.js";
 import { convertSparkline } from "./utils/data-transform.js";
+import { formatStatChartValue } from "./utils/format-stat-chart-value.js";
 import { getStatChartColor } from "./utils/get-color.js";
 const MIN_WIDTH = 100;
 const SPACING = 2;
 export const StatChartPanel = (props)=>{
     const { spec, contentDimensions, queryResults } = props;
-    const { format, sparkline, valueFontSize, colorMode } = spec;
+    const { format, sparkline, valueFontSize, legendFontSize, colorMode } = spec;
     const chartsTheme = useChartsTheme();
     const statChartData = useStatChartData(queryResults, spec, chartsTheme);
     const isMultiSeries = statChartData.length > 1;
+    // Find the widest value text (by pixel width) to use as alignment reference
+    const alignmentText = useMemo(()=>{
+        if (!isMultiSeries) return undefined;
+        const fontFamily = chartsTheme.echartsTheme.textStyle?.fontFamily ?? 'Lato';
+        const fontSize = Number(chartsTheme.echartsTheme.textStyle?.fontSize) || 12;
+        let widest = '';
+        let maxWidth = 0;
+        for (const series of statChartData){
+            const formatted = formatStatChartValue(series.calculatedValue, format);
+            const width = measureTextWidth(formatted, 700, fontSize, fontFamily);
+            if (width > maxWidth) {
+                maxWidth = width;
+                widest = formatted;
+            }
+        }
+        return widest;
+    }, [
+        statChartData,
+        format,
+        isMultiSeries,
+        chartsTheme.echartsTheme.textStyle
+    ]);
+    // Find the longest series name (by pixel width) to unify legend sizing
+    const alignmentSeriesName = useMemo(()=>{
+        if (!isMultiSeries) return undefined;
+        const fontFamily = chartsTheme.echartsTheme.textStyle?.fontFamily ?? 'Lato';
+        const fontSize = Number(chartsTheme.echartsTheme.textStyle?.fontSize) || 12;
+        let widest = '';
+        let maxWidth = 0;
+        for (const series of statChartData){
+            const name = series.seriesData?.name ?? '';
+            const width = measureTextWidth(name, 400, fontSize, fontFamily);
+            if (width > maxWidth) {
+                maxWidth = width;
+                widest = name;
+            }
+        }
+        return widest;
+    }, [
+        statChartData,
+        isMultiSeries,
+        chartsTheme.echartsTheme.textStyle
+    ]);
     // Handle three-state showLegend: 'on' | 'off' | 'auto' (or undefined for backward compatibility)
     let shouldShowLegend = isMultiSeries;
     if (spec.legendMode === 'on') {
@@ -34,11 +79,21 @@ export const StatChartPanel = (props)=>{
         shouldShowLegend = false;
     }
     if (!contentDimensions) return null;
-    // Calculates chart width
+    // Calculates chart width — ensure cells are wide enough to show full series names
     const spacing = SPACING * (statChartData.length - 1);
     let chartWidth = (contentDimensions.width - spacing) / statChartData.length;
-    if (isMultiSeries && chartWidth < MIN_WIDTH) {
-        chartWidth = MIN_WIDTH;
+    if (isMultiSeries) {
+        const fontFamily = chartsTheme.echartsTheme.textStyle?.fontFamily ?? 'Lato';
+        const seriesNameFontSize = legendFontSize ?? Math.max(14, Math.min(contentDimensions.height * 0.15 / 1.2, 30));
+        const padding = chartsTheme.container.padding.default;
+        let maxTextWidth = MIN_WIDTH;
+        for (const series of statChartData){
+            const nameWidth = measureTextWidth(series.seriesData?.name ?? '', 400, seriesNameFontSize, fontFamily);
+            const valWidth = measureTextWidth(formatStatChartValue(series.calculatedValue, format), 700, seriesNameFontSize * 1.5, fontFamily);
+            const needed = Math.max(nameWidth, valWidth) + padding * 2;
+            if (needed > maxTextWidth) maxTextWidth = needed;
+        }
+        chartWidth = Math.max(chartWidth, maxTextWidth);
     }
     const noDataTextStyle = chartsTheme.noDataOption.title.textStyle;
     return /*#__PURE__*/ _jsx(Stack, {
@@ -49,7 +104,25 @@ export const StatChartPanel = (props)=>{
         justifyContent: isMultiSeries ? 'left' : 'center',
         alignItems: "center",
         sx: {
-            overflowX: isMultiSeries ? 'scroll' : 'auto'
+            overflowX: isMultiSeries ? 'auto' : 'hidden',
+            '&::-webkit-scrollbar': {
+                height: '4px'
+            },
+            '&::-webkit-scrollbar-track': {
+                background: 'transparent'
+            },
+            '&::-webkit-scrollbar-thumb': {
+                background: 'transparent',
+                borderRadius: '2px'
+            },
+            '&:hover::-webkit-scrollbar-thumb': {
+                background: 'rgba(128, 128, 128, 0.4)'
+            },
+            scrollbarWidth: 'thin',
+            scrollbarColor: 'transparent transparent',
+            '&:hover': {
+                scrollbarColor: 'rgba(128, 128, 128, 0.4) transparent'
+            }
         },
         children: statChartData.length ? statChartData.map((series, index)=>{
             const sparklineConfig = convertSparkline(chartsTheme, series.color, sparkline);
@@ -61,7 +134,10 @@ export const StatChartPanel = (props)=>{
                 sparkline: sparklineConfig,
                 showSeriesName: shouldShowLegend,
                 valueFontSize: valueFontSize,
-                colorMode: colorMode
+                colorMode: colorMode,
+                legendFontSize: legendFontSize,
+                alignmentText: alignmentText,
+                alignmentSeriesName: alignmentSeriesName
             }, index);
         }) : /*#__PURE__*/ _jsx(Typography, {
             sx: {

package/lib/StatChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChartPanel.tsx"],"sourcesContent":["// Copyright 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 type { SxProps } from '@mui/material';\nimport { Stack, Typography } from '@mui/material';\nimport type { GraphSeries, PersesChartsTheme, ValueMapping } from '@perses-dev/components';\nimport { useChartsTheme, applyValueMapping, createRegexFromString } from '@perses-dev/components';\nimport type { PanelProps, PanelData } from '@perses-dev/plugin-system';\nimport type { Labels, TimeSeriesData } from '@perses-dev/spec';\nimport type { TitleComponentOption } from 'echarts';\nimport type { FC } from 'react';\nimport { useMemo } from 'react';\n\nimport type { StatChartOptions } from './stat-chart-model';\nimport type { StatChartData } from './StatChartBase';\nimport { StatChartBase } from './StatChartBase';\nimport { calculateValue } from './utils/calculate-value';\nimport { convertSparkline } from './utils/data-transform';\nimport { getStatChartColor } from './utils/get-color';\n\nconst MIN_WIDTH = 100;\nconst SPACING = 2;\n\nexport type StatChartPanelProps = PanelProps<StatChartOptions, TimeSeriesData>;\n\nexport const StatChartPanel: FC<StatChartPanelProps> = (props) => {\n  const { spec, contentDimensions, queryResults } = props;\n\n  const { format, sparkline, valueFontSize, 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  let shouldShowLegend = isMultiSeries;\n  if (spec.legendMode === 'on') {\n    shouldShowLegend = true;\n  } else if (spec.legendMode === 'off') {\n    shouldShowLegend = false;\n  }\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":["Stack","Typography","useChartsTheme","applyValueMapping","createRegexFromString","useMemo","StatChartBase","calculateValue","convertSparkline","getStatChartColor","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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"}
+{"version":3,"sources":["../../src/StatChartPanel.tsx"],"sourcesContent":["// Copyright 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 type { SxProps } from '@mui/material';\nimport { Stack, Typography } from '@mui/material';\nimport type { GraphSeries, PersesChartsTheme, ValueMapping } from '@perses-dev/components';\nimport { useChartsTheme, applyValueMapping, createRegexFromString } from '@perses-dev/components';\nimport type { PanelProps, PanelData } from '@perses-dev/plugin-system';\nimport type { Labels, TimeSeriesData } from '@perses-dev/spec';\nimport type { TitleComponentOption } from 'echarts';\nimport type { FC } from 'react';\nimport { useMemo } from 'react';\n\nimport type { StatChartOptions } from './stat-chart-model';\nimport type { StatChartData } from './StatChartBase';\nimport { StatChartBase } from './StatChartBase';\nimport { measureTextWidth } from './utils/calculate-font-size';\nimport { calculateValue } from './utils/calculate-value';\nimport { convertSparkline } from './utils/data-transform';\nimport { formatStatChartValue } from './utils/format-stat-chart-value';\nimport { getStatChartColor } from './utils/get-color';\n\nconst MIN_WIDTH = 100;\nconst SPACING = 2;\n\nexport type StatChartPanelProps = PanelProps<StatChartOptions, TimeSeriesData>;\n\nexport const StatChartPanel: FC<StatChartPanelProps> = (props) => {\n  const { spec, contentDimensions, queryResults } = props;\n\n  const { format, sparkline, valueFontSize, legendFontSize, colorMode } = spec;\n  const chartsTheme = useChartsTheme();\n  const statChartData = useStatChartData(queryResults, spec, chartsTheme);\n\n  const isMultiSeries = statChartData.length > 1;\n\n  // Find the widest value text (by pixel width) to use as alignment reference\n  const alignmentText = useMemo(() => {\n    if (!isMultiSeries) return undefined;\n    const fontFamily = chartsTheme.echartsTheme.textStyle?.fontFamily ?? 'Lato';\n    const fontSize = Number(chartsTheme.echartsTheme.textStyle?.fontSize) || 12;\n    let widest = '';\n    let maxWidth = 0;\n    for (const series of statChartData) {\n      const formatted = formatStatChartValue(series.calculatedValue, format);\n      const width = measureTextWidth(formatted, 700, fontSize, fontFamily);\n      if (width > maxWidth) {\n        maxWidth = width;\n        widest = formatted;\n      }\n    }\n    return widest;\n  }, [statChartData, format, isMultiSeries, chartsTheme.echartsTheme.textStyle]);\n\n  // Find the longest series name (by pixel width) to unify legend sizing\n  const alignmentSeriesName = useMemo(() => {\n    if (!isMultiSeries) return undefined;\n    const fontFamily = chartsTheme.echartsTheme.textStyle?.fontFamily ?? 'Lato';\n    const fontSize = Number(chartsTheme.echartsTheme.textStyle?.fontSize) || 12;\n    let widest = '';\n    let maxWidth = 0;\n    for (const series of statChartData) {\n      const name = series.seriesData?.name ?? '';\n      const width = measureTextWidth(name, 400, fontSize, fontFamily);\n      if (width > maxWidth) {\n        maxWidth = width;\n        widest = name;\n      }\n    }\n    return widest;\n  }, [statChartData, isMultiSeries, chartsTheme.echartsTheme.textStyle]);\n\n  // Handle three-state showLegend: 'on' | 'off' | 'auto' (or undefined for backward compatibility)\n  let shouldShowLegend = isMultiSeries;\n  if (spec.legendMode === 'on') {\n    shouldShowLegend = true;\n  } else if (spec.legendMode === 'off') {\n    shouldShowLegend = false;\n  }\n\n  if (!contentDimensions) return null;\n\n  // Calculates chart width — ensure cells are wide enough to show full series names\n  const spacing = SPACING * (statChartData.length - 1);\n  let chartWidth = (contentDimensions.width - spacing) / statChartData.length;\n  if (isMultiSeries) {\n    const fontFamily = chartsTheme.echartsTheme.textStyle?.fontFamily ?? 'Lato';\n    const seriesNameFontSize = legendFontSize ?? Math.max(14, Math.min((contentDimensions.height * 0.15) / 1.2, 30));\n    const padding = chartsTheme.container.padding.default;\n    let maxTextWidth = MIN_WIDTH;\n    for (const series of statChartData) {\n      const nameWidth = measureTextWidth(series.seriesData?.name ?? '', 400, seriesNameFontSize, fontFamily);\n      const valWidth = measureTextWidth(\n        formatStatChartValue(series.calculatedValue, format),\n        700,\n        seriesNameFontSize * 1.5,\n        fontFamily,\n      );\n      const needed = Math.max(nameWidth, valWidth) + padding * 2;\n      if (needed > maxTextWidth) maxTextWidth = needed;\n    }\n    chartWidth = Math.max(chartWidth, maxTextWidth);\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 ? 'auto' : 'hidden',\n        '&::-webkit-scrollbar': {\n          height: '4px',\n        },\n        '&::-webkit-scrollbar-track': {\n          background: 'transparent',\n        },\n        '&::-webkit-scrollbar-thumb': {\n          background: 'transparent',\n          borderRadius: '2px',\n        },\n        '&:hover::-webkit-scrollbar-thumb': {\n          background: 'rgba(128, 128, 128, 0.4)',\n        },\n        scrollbarWidth: 'thin',\n        scrollbarColor: 'transparent transparent',\n        '&:hover': {\n          scrollbarColor: 'rgba(128, 128, 128, 0.4) transparent',\n        },\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              legendFontSize={legendFontSize}\n              alignmentText={alignmentText}\n              alignmentSeriesName={alignmentSeriesName}\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":["Stack","Typography","useChartsTheme","applyValueMapping","createRegexFromString","useMemo","StatChartBase","measureTextWidth","calculateValue","convertSparkline","formatStatChartValue","getStatChartColor","MIN_WIDTH","SPACING","StatChartPanel","props","spec","contentDimensions","queryResults","format","sparkline","valueFontSize","legendFontSize","colorMode","chartsTheme","statChartData","useStatChartData","isMultiSeries","length","alignmentText","undefined","fontFamily","echartsTheme","textStyle","fontSize","Number","widest","maxWidth","series","formatted","calculatedValue","width","alignmentSeriesName","name","seriesData","shouldShowLegend","legendMode","spacing","chartWidth","seriesNameFontSize","Math","max","min","height","padding","container","default","maxTextWidth","nameWidth","valWidth","needed","noDataTextStyle","noDataOption","title","direction","justifyContent","alignItems","sx","overflowX","background","borderRadius","scrollbarWidth","scrollbarColor","map","index","sparklineConfig","color","data","showSeriesName","calculation","mappings","metricLabel","result","labelValue","getLabelValue","labels","displayValue","getValueOrLabel","formattedName","values","push","value","label","fieldLabel","key","Object","entries","regex","test"],"mappings":"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"}

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

@@ -27,6 +27,7 @@ export interface StatChartOptions {
     thresholds?: ThresholdOptions;
     sparkline?: StatChartSparklineOptions;
     valueFontSize?: FontSizeOption;
+    legendFontSize?: FontSizeOption;
     mappings?: ValueMapping[];
     colorMode?: ColorMode;
     legendMode?: legendMode;

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,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC5G,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACrF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;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"}
+{"version":3,"file":"stat-chart-model.d.ts","sourceRoot":"","sources":["../../src/stat-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC5G,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACrF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;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,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,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.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/stat-chart-model.ts"],"sourcesContent":["// Copyright 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 type { FontSizeOption, FormatOptions, ThresholdOptions, ValueMapping } from '@perses-dev/components';\nimport type { CalculationType, OptionsEditorProps } from '@perses-dev/plugin-system';\nimport type { Definition } from '@perses-dev/spec';\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,+BAA+B;AAC/B,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"}
+{"version":3,"sources":["../../src/stat-chart-model.ts"],"sourcesContent":["// Copyright 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 type { FontSizeOption, FormatOptions, ThresholdOptions, ValueMapping } from '@perses-dev/components';\nimport type { CalculationType, OptionsEditorProps } from '@perses-dev/plugin-system';\nimport type { Definition } from '@perses-dev/spec';\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  legendFontSize?: 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,+BAA+B;AAC/B,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;AAsBF,OAAO,SAASC;IACd,OAAO;QACLC,aAAa;QACbC,QAAQ;YACNC,MAAM;QACR;QACAC,WAAW,CAAC;QACZC,YAAY;IACd;AACF"}

package/lib/utils/calculate-font-size.d.ts

@@ -8,6 +8,10 @@ interface CalculateFontSize {
     maxSize?: number;
     fontSizeOverride?: FontSizeOption;
 }
+/**
+ * Measure the pixel width of text at a given font weight and size.
+ */
+export declare function measureTextWidth(text: string, fontWeight: number, fontSize: number, fontFamily: string): number;
 /**
  * Find the optimal font size given available space
  */

package/lib/utils/calculate-font-size.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calculate-font-size.d.ts","sourceRoot":"","sources":["../../../src/utils/calculate-font-size.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG7D,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,cAAc,CAAC;CACnC;AAcD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,GACjB,EAAE,iBAAiB,GAAG,MAAM,CA0B5B"}
+{"version":3,"file":"calculate-font-size.d.ts","sourceRoot":"","sources":["../../../src/utils/calculate-font-size.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG7D,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,cAAc,CAAC;CACnC;AAcD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAI/G;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,GACjB,EAAE,iBAAiB,GAAG,MAAM,CA0B5B"}

package/lib/utils/calculate-font-size.js

@@ -21,6 +21,13 @@ function getGlobalCanvasContext() {
     }
     return canvasContext;
 }
+/**
+ * Measure the pixel width of text at a given font weight and size.
+ */ export function measureTextWidth(text, fontWeight, fontSize, fontFamily) {
+    const ctx = getGlobalCanvasContext();
+    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    return ctx.measureText(text).width;
+}
 /**
  * Find the optimal font size given available space
  */ export function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize, fontSizeOverride }) {

package/lib/utils/calculate-font-size.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/calculate-font-size.ts"],"sourcesContent":["// Copyright 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 type { FontSizeOption } from '@perses-dev/components';\nimport { useChartsTheme } from '@perses-dev/components';\n\ninterface CalculateFontSize {\n  text: string;\n  fontWeight: number;\n  width: number;\n  height: number;\n  lineHeight: number;\n  maxSize?: number;\n  fontSizeOverride?: FontSizeOption;\n}\n\nlet canvasContext: CanvasRenderingContext2D | null;\n\nfunction getGlobalCanvasContext(): CanvasRenderingContext2D {\n  if (!canvasContext) {\n    canvasContext = document.createElement('canvas').getContext('2d');\n    if (canvasContext === null) {\n      throw new Error('Canvas context is null.');\n    }\n  }\n  return canvasContext;\n}\n\n/**\n * Find the optimal font size given available space\n */\nexport function useOptimalFontSize({\n  text,\n  fontWeight,\n  width,\n  height,\n  lineHeight,\n  maxSize,\n  fontSizeOverride,\n}: CalculateFontSize): number {\n  const ctx = getGlobalCanvasContext();\n  const { echartsTheme } = useChartsTheme();\n\n  // if user has selected a font size in the settings, use it instead of calculating the optimal size\n  if (fontSizeOverride !== undefined) {\n    return Number(fontSizeOverride);\n  }\n\n  const textStyle = echartsTheme.textStyle;\n  const fontSize = Number(textStyle?.fontSize ?? 12);\n  const fontFamily = textStyle?.fontFamily ?? 'Lato';\n\n  // set the font on the canvas context\n  const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.font = fontStyle;\n  // measure the width of the text with the given font style\n  const textMetrics: TextMetrics = ctx.measureText(text);\n\n  // check how much bigger we can make the font while staying within the width and height\n  const fontSizeBasedOnWidth = (width / textMetrics.width) * fontSize;\n  const fontSizeBasedOnHeight = height / lineHeight;\n\n  // return the smaller font size\n  const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);\n  return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;\n}\n"],"names":["useChartsTheme","canvasContext","getGlobalCanvasContext","document","createElement","getContext","Error","useOptimalFontSize","text","fontWeight","width","height","lineHeight","maxSize","fontSizeOverride","ctx","echartsTheme","undefined","Number","textStyle","fontSize","fontFamily","fontStyle","font","textMetrics","measureText","fontSizeBasedOnWidth","fontSizeBasedOnHeight","finalFontSize","Math","min"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,cAAc,QAAQ,yBAAyB;AAYxD,IAAIC;AAEJ,SAASC;IACP,IAAI,CAACD,eAAe;QAClBA,gBAAgBE,SAASC,aAAa,CAAC,UAAUC,UAAU,CAAC;QAC5D,IAAIJ,kBAAkB,MAAM;YAC1B,MAAM,IAAIK,MAAM;QAClB;IACF;IACA,OAAOL;AACT;AAEA;;CAEC,GACD,OAAO,SAASM,mBAAmB,EACjCC,IAAI,EACJC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,OAAO,EACPC,gBAAgB,EACE;IAClB,MAAMC,MAAMb;IACZ,MAAM,EAAEc,YAAY,EAAE,GAAGhB;IAEzB,mGAAmG;IACnG,IAAIc,qBAAqBG,WAAW;QAClC,OAAOC,OAAOJ;IAChB;IAEA,MAAMK,YAAYH,aAAaG,SAAS;IACxC,MAAMC,WAAWF,OAAOC,WAAWC,YAAY;IAC/C,MAAMC,aAAaF,WAAWE,cAAc;IAE5C,qCAAqC;IACrC,MAAMC,YAAY,GAAGb,WAAW,CAAC,EAAEW,SAAS,GAAG,EAAEC,YAAY;IAC7DN,IAAIQ,IAAI,GAAGD;IACX,0DAA0D;IAC1D,MAAME,cAA2BT,IAAIU,WAAW,CAACjB;IAEjD,uFAAuF;IACvF,MAAMkB,uBAAuB,AAAChB,QAAQc,YAAYd,KAAK,GAAIU;IAC3D,MAAMO,wBAAwBhB,SAASC;IAEvC,+BAA+B;IAC/B,MAAMgB,gBAAgBC,KAAKC,GAAG,CAACH,uBAAuBD;IACtD,OAAOb,UAAUgB,KAAKC,GAAG,CAACF,eAAef,WAAWe;AACtD"}
+{"version":3,"sources":["../../../src/utils/calculate-font-size.ts"],"sourcesContent":["// Copyright 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 type { FontSizeOption } from '@perses-dev/components';\nimport { useChartsTheme } from '@perses-dev/components';\n\ninterface CalculateFontSize {\n  text: string;\n  fontWeight: number;\n  width: number;\n  height: number;\n  lineHeight: number;\n  maxSize?: number;\n  fontSizeOverride?: FontSizeOption;\n}\n\nlet canvasContext: CanvasRenderingContext2D | null;\n\nfunction getGlobalCanvasContext(): CanvasRenderingContext2D {\n  if (!canvasContext) {\n    canvasContext = document.createElement('canvas').getContext('2d');\n    if (canvasContext === null) {\n      throw new Error('Canvas context is null.');\n    }\n  }\n  return canvasContext;\n}\n\n/**\n * Measure the pixel width of text at a given font weight and size.\n */\nexport function measureTextWidth(text: string, fontWeight: number, fontSize: number, fontFamily: string): number {\n  const ctx = getGlobalCanvasContext();\n  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  return ctx.measureText(text).width;\n}\n\n/**\n * Find the optimal font size given available space\n */\nexport function useOptimalFontSize({\n  text,\n  fontWeight,\n  width,\n  height,\n  lineHeight,\n  maxSize,\n  fontSizeOverride,\n}: CalculateFontSize): number {\n  const ctx = getGlobalCanvasContext();\n  const { echartsTheme } = useChartsTheme();\n\n  // if user has selected a font size in the settings, use it instead of calculating the optimal size\n  if (fontSizeOverride !== undefined) {\n    return Number(fontSizeOverride);\n  }\n\n  const textStyle = echartsTheme.textStyle;\n  const fontSize = Number(textStyle?.fontSize ?? 12);\n  const fontFamily = textStyle?.fontFamily ?? 'Lato';\n\n  // set the font on the canvas context\n  const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.font = fontStyle;\n  // measure the width of the text with the given font style\n  const textMetrics: TextMetrics = ctx.measureText(text);\n\n  // check how much bigger we can make the font while staying within the width and height\n  const fontSizeBasedOnWidth = (width / textMetrics.width) * fontSize;\n  const fontSizeBasedOnHeight = height / lineHeight;\n\n  // return the smaller font size\n  const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);\n  return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;\n}\n"],"names":["useChartsTheme","canvasContext","getGlobalCanvasContext","document","createElement","getContext","Error","measureTextWidth","text","fontWeight","fontSize","fontFamily","ctx","font","measureText","width","useOptimalFontSize","height","lineHeight","maxSize","fontSizeOverride","echartsTheme","undefined","Number","textStyle","fontStyle","textMetrics","fontSizeBasedOnWidth","fontSizeBasedOnHeight","finalFontSize","Math","min"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,cAAc,QAAQ,yBAAyB;AAYxD,IAAIC;AAEJ,SAASC;IACP,IAAI,CAACD,eAAe;QAClBA,gBAAgBE,SAASC,aAAa,CAAC,UAAUC,UAAU,CAAC;QAC5D,IAAIJ,kBAAkB,MAAM;YAC1B,MAAM,IAAIK,MAAM;QAClB;IACF;IACA,OAAOL;AACT;AAEA;;CAEC,GACD,OAAO,SAASM,iBAAiBC,IAAY,EAAEC,UAAkB,EAAEC,QAAgB,EAAEC,UAAkB;IACrG,MAAMC,MAAMV;IACZU,IAAIC,IAAI,GAAG,GAAGJ,WAAW,CAAC,EAAEC,SAAS,GAAG,EAAEC,YAAY;IACtD,OAAOC,IAAIE,WAAW,CAACN,MAAMO,KAAK;AACpC;AAEA;;CAEC,GACD,OAAO,SAASC,mBAAmB,EACjCR,IAAI,EACJC,UAAU,EACVM,KAAK,EACLE,MAAM,EACNC,UAAU,EACVC,OAAO,EACPC,gBAAgB,EACE;IAClB,MAAMR,MAAMV;IACZ,MAAM,EAAEmB,YAAY,EAAE,GAAGrB;IAEzB,mGAAmG;IACnG,IAAIoB,qBAAqBE,WAAW;QAClC,OAAOC,OAAOH;IAChB;IAEA,MAAMI,YAAYH,aAAaG,SAAS;IACxC,MAAMd,WAAWa,OAAOC,WAAWd,YAAY;IAC/C,MAAMC,aAAaa,WAAWb,cAAc;IAE5C,qCAAqC;IACrC,MAAMc,YAAY,GAAGhB,WAAW,CAAC,EAAEC,SAAS,GAAG,EAAEC,YAAY;IAC7DC,IAAIC,IAAI,GAAGY;IACX,0DAA0D;IAC1D,MAAMC,cAA2Bd,IAAIE,WAAW,CAACN;IAEjD,uFAAuF;IACvF,MAAMmB,uBAAuB,AAACZ,QAAQW,YAAYX,KAAK,GAAIL;IAC3D,MAAMkB,wBAAwBX,SAASC;IAEvC,+BAA+B;IAC/B,MAAMW,gBAAgBC,KAAKC,GAAG,CAACH,uBAAuBD;IACtD,OAAOR,UAAUW,KAAKC,GAAG,CAACF,eAAeV,WAAWU;AACtD"}

package/lib/utils/calculate-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calculate-value.d.ts","sourceRoot":"","sources":["../../../src/utils/calculate-value.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAuB,MAAM,2BAA2B,CAAC;AACjF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,eAAO,MAAM,cAAc,GACzB,aAAa,eAAe,EAC5B,YAAY,UAAU,KACrB,UAAU,CAAC,CAAC,OAAO,eAAe,EAAE,eAAe,CAAC,CAMtD,CAAC"}
+{"version":3,"file":"calculate-value.d.ts","sourceRoot":"","sources":["../../../src/utils/calculate-value.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAuB,MAAM,2BAA2B,CAAC;AACjF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,eAAO,MAAM,cAAc,gBACZ,eAAe,cAChB,UAAU,KACrB,UAAU,CAAC,CAAC,OAAO,eAAe,CAAC,CAAC,eAAe,CAAC,CAMtD,CAAC"}

package/lib/utils/format-stat-chart-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format-stat-chart-value.d.ts","sourceRoot":"","sources":["../../../src/utils/format-stat-chart-value.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,SAAS,aAAa,KAAG,MAU7F,CAAC"}
+{"version":3,"file":"format-stat-chart-value.d.ts","sourceRoot":"","sources":["../../../src/utils/format-stat-chart-value.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,eAAO,MAAM,oBAAoB,WAAY,MAAM,GAAG,MAAM,GAAG,IAAI,WAAW,aAAa,KAAG,MAU7F,CAAC"}