@perses-dev/components 0.50.0 → 0.51.0-beta.0

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { FormatOptions } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, ChartInstanceFocusOpts, ChartInstance } from '../model';\nimport { useChartsTheme, useTimeZone } from '../context';\nimport { CursorCoordinates, LineChartTooltip, TooltipConfig, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getDateRange,\n  getFormattedDate,\n  getFormattedAxis,\n  restoreChart,\n  ZoomEventData,\n} from '../utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport interface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  format?: FormatOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const LineChart = forwardRef<ChartInstance, LineChartProps>(function LineChart(\n  {\n    height,\n    data,\n    yAxis,\n    format,\n    grid,\n    legend,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const { timeZone } = useTimeZone();\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n\n  useImperativeHandle(ref, () => {\n    return {\n      highlightSeries({ id }: ChartInstanceFocusOpts): void {\n        if (!chartRef.current) {\n          // when chart undef, do not highlight series when hovering over legend\n          return;\n        }\n\n        chartRef.current.dispatchAction({ type: 'highlight', seriesId: id });\n      },\n      clearHighlightedSeries: (): void => {\n        if (!chartRef.current) {\n          // when chart undef, do not clear highlight series\n          return;\n        }\n        clearHighlightedSeries(chartRef.current);\n      },\n    };\n  }, []);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params): void => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n    };\n  }, [data, onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getFormattedAxis(yAxis, format),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, format, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      style={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <LineChartTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={tooltipConfig.enablePinning}\n            pinnedPos={tooltipPinnedCoords}\n            format={format}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n            }}\n            containerId={chartsTheme.tooltipPortalContainerId}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","useTimeZone","LineChartTooltip","DEFAULT_TOOLTIP_CONFIG","clearHighlightedSeries","enableDataZoom","getDateRange","getFormattedDate","getFormattedAxis","restoreChart","height","data","yAxis","format","grid","legend","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","timeZone","isDragging","setIsDragging","startX","setStartX","highlightSeries","id","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","noDataOption","timeSeries","rangeMs","series","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","style","onClick","e","enablePinning","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","wrapLabels","pinnedPos","onUnpinClick","containerId","tooltipPortalContainerId","sx","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { FormatOptions } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, ChartInstanceFocusOpts, ChartInstance } from '../model';\nimport { useChartsTheme, useTimeZone } from '../context';\nimport { CursorCoordinates, LineChartTooltip, TooltipConfig, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getDateRange,\n  getFormattedDate,\n  getFormattedAxis,\n  restoreChart,\n  ZoomEventData,\n} from '../utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport interface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  format?: FormatOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const LineChart = forwardRef<ChartInstance, LineChartProps>(function LineChart(\n  {\n    height,\n    data,\n    yAxis,\n    format,\n    grid,\n    legend,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const { timeZone } = useTimeZone();\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n\n  useImperativeHandle(ref, () => {\n    return {\n      highlightSeries({ id }: ChartInstanceFocusOpts): void {\n        if (!chartRef.current) {\n          // when chart undef, do not highlight series when hovering over legend\n          return;\n        }\n\n        chartRef.current.dispatchAction({ type: 'highlight', seriesId: id });\n      },\n      clearHighlightedSeries: (): void => {\n        if (!chartRef.current) {\n          // when chart undef, do not clear highlight series\n          return;\n        }\n        clearHighlightedSeries(chartRef.current);\n      },\n    };\n  }, []);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params): void => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n    };\n  }, [data, onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getFormattedAxis(yAxis, format),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, format, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      style={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <LineChartTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={tooltipConfig.enablePinning}\n            pinnedPos={tooltipPinnedCoords}\n            format={format}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n            }}\n            containerId={chartsTheme.tooltipPortalContainerId}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","useTimeZone","LineChartTooltip","DEFAULT_TOOLTIP_CONFIG","clearHighlightedSeries","enableDataZoom","getDateRange","getFormattedDate","getFormattedAxis","restoreChart","height","data","yAxis","format","grid","legend","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","timeZone","isDragging","setIsDragging","startX","setStartX","highlightSeries","id","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","noDataOption","option","timeSeries","rangeMs","series","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","style","onClick","e","enablePinning","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","wrapLabels","pinnedPos","onUnpinClick","containerId","tooltipPortalContainerId","sx","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/LinksEditor/LinksEditor.js

@@ -79,56 +79,47 @@ function LinkControl({ control, index }) {
                     /*#__PURE__*/ _jsx(Controller, {
                         control: control,
                         name: `panelDefinition.spec.links.${index}.url`,
-                        render: ({ field, fieldState })=>{
-                            var _fieldState_error;
-                            return /*#__PURE__*/ _jsx(TextField, {
+                        render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                 ...field,
                                 required: true,
                                 fullWidth: true,
                                 label: "URL",
                                 error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                helperText: fieldState.error?.message,
                                 onChange: (event)=>{
                                     field.onChange(event);
                                 }
-                            });
-                        }
+                            })
                     }),
                     /*#__PURE__*/ _jsx(Controller, {
                         control: control,
                         name: `panelDefinition.spec.links.${index}.name`,
-                        render: ({ field, fieldState })=>{
-                            var _fieldState_error;
-                            return /*#__PURE__*/ _jsx(TextField, {
+                        render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                 ...field,
                                 fullWidth: true,
                                 label: "Name",
                                 defaultValue: "",
                                 error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                helperText: fieldState.error?.message,
                                 onChange: (event)=>{
                                     field.onChange(event);
                                 }
-                            });
-                        }
+                            })
                     }),
                     /*#__PURE__*/ _jsx(Controller, {
                         control: control,
                         name: `panelDefinition.spec.links.${index}.tooltip`,
-                        render: ({ field, fieldState })=>{
-                            var _fieldState_error;
-                            return /*#__PURE__*/ _jsx(TextField, {
+                        render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                 ...field,
                                 fullWidth: true,
                                 label: "Tooltip",
                                 defaultValue: "",
                                 error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                helperText: fieldState.error?.message,
                                 onChange: (event)=>{
                                     field.onChange(event);
                                 }
-                            });
-                        }
+                            })
                     })
                 ]
             }),

package/dist/LinksEditor/LinksEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinksEditor/LinksEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Fragment, HTMLAttributes, ReactElement } from 'react';\nimport { Checkbox, Divider, FormControlLabel, IconButton, Stack, TextField, Typography } from '@mui/material';\nimport { Controller, useFieldArray, Control } from 'react-hook-form';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport { PanelEditorValues } from '@perses-dev/core';\n\nexport interface LinksEditorProps extends HTMLAttributes<HTMLDivElement> {\n  control: Control<PanelEditorValues>;\n}\n\nexport function LinksEditor({ control, ...props }: LinksEditorProps): ReactElement {\n  const { fields, append, remove } = useFieldArray({\n    control: control,\n    name: 'panelDefinition.spec.links',\n  });\n\n  return (\n    <Stack {...props} gap={3}>\n      {fields && fields.length > 0 ? (\n        fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <Stack direction=\"row\" gap={1} alignItems=\"center\">\n              <LinkControl control={control} index={index} />\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => remove(index)}>\n                <MinusIcon />\n              </IconButton>\n            </Stack>\n            <Divider />\n          </Fragment>\n        ))\n      ) : (\n        <Typography variant=\"subtitle1\" mb={2} fontStyle=\"italic\">\n          No links defined\n        </Typography>\n      )}\n      <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => append({ url: '' })}>\n        <PlusIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n\nfunction LinkControl({ control, index }: { control: Control<PanelEditorValues>; index: number }): ReactElement {\n  return (\n    <Stack gap={2} flexGrow={1}>\n      <Stack direction=\"row\" gap={2}>\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.url`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              required\n              fullWidth\n              label=\"URL\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.name`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"Name\"\n              defaultValue=\"\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.tooltip`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"Tooltip\"\n              defaultValue=\"\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n      </Stack>\n      <Stack gap={2} direction=\"row\" alignItems=\"center\">\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.renderVariables`}\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Render Variables\"\n              control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />}\n            />\n          )}\n        />\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.targetBlank`}\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Open in new tab\"\n              control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />}\n            />\n          )}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Fragment","Checkbox","Divider","FormControlLabel","IconButton","Stack","TextField","Typography","Controller","useFieldArray","PlusIcon","MinusIcon","LinksEditor","control","props","fields","append","remove","name","gap","length","map","field","index","direction","alignItems","LinkControl","style","width","height","onClick","id","variant","mb","fontStyle","url","flexGrow","render","fieldState","required","fullWidth","label","error","helperText","message","onChange","event","defaultValue","checked","value","e","target"],"mappings":"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"}
+{"version":3,"sources":["../../src/LinksEditor/LinksEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Fragment, HTMLAttributes, ReactElement } from 'react';\nimport { Checkbox, Divider, FormControlLabel, IconButton, Stack, TextField, Typography } from '@mui/material';\nimport { Controller, useFieldArray, Control } from 'react-hook-form';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport { PanelEditorValues } from '@perses-dev/core';\n\nexport interface LinksEditorProps extends HTMLAttributes<HTMLDivElement> {\n  control: Control<PanelEditorValues>;\n}\n\nexport function LinksEditor({ control, ...props }: LinksEditorProps): ReactElement {\n  const { fields, append, remove } = useFieldArray({\n    control: control,\n    name: 'panelDefinition.spec.links',\n  });\n\n  return (\n    <Stack {...props} gap={3}>\n      {fields && fields.length > 0 ? (\n        fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <Stack direction=\"row\" gap={1} alignItems=\"center\">\n              <LinkControl control={control} index={index} />\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => remove(index)}>\n                <MinusIcon />\n              </IconButton>\n            </Stack>\n            <Divider />\n          </Fragment>\n        ))\n      ) : (\n        <Typography variant=\"subtitle1\" mb={2} fontStyle=\"italic\">\n          No links defined\n        </Typography>\n      )}\n      <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => append({ url: '' })}>\n        <PlusIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n\nfunction LinkControl({ control, index }: { control: Control<PanelEditorValues>; index: number }): ReactElement {\n  return (\n    <Stack gap={2} flexGrow={1}>\n      <Stack direction=\"row\" gap={2}>\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.url`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              required\n              fullWidth\n              label=\"URL\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.name`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"Name\"\n              defaultValue=\"\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.tooltip`}\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"Tooltip\"\n              defaultValue=\"\"\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              onChange={(event) => {\n                field.onChange(event);\n              }}\n            />\n          )}\n        />\n      </Stack>\n      <Stack gap={2} direction=\"row\" alignItems=\"center\">\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.renderVariables`}\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Render Variables\"\n              control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />}\n            />\n          )}\n        />\n        <Controller\n          control={control}\n          name={`panelDefinition.spec.links.${index}.targetBlank`}\n          render={({ field }) => (\n            <FormControlLabel\n              label=\"Open in new tab\"\n              control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />}\n            />\n          )}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Fragment","Checkbox","Divider","FormControlLabel","IconButton","Stack","TextField","Typography","Controller","useFieldArray","PlusIcon","MinusIcon","LinksEditor","control","props","fields","append","remove","name","gap","length","map","field","index","direction","alignItems","LinkControl","style","width","height","onClick","id","variant","mb","fontStyle","url","flexGrow","render","fieldState","required","fullWidth","label","error","helperText","message","onChange","event","defaultValue","checked","value","e","target"],"mappings":"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"}

package/dist/Overlay/Overlay.js

@@ -38,7 +38,7 @@ export function LoadingOverlay(props) {
             height: '100%',
             alignItems: 'center',
             justifyContent: 'center',
-            padding: '0 10px'
+            px: 1
         },
         children: /*#__PURE__*/ _jsx(Skeleton, {
             variant: variant,

package/dist/Overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Overlay/Overlay.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Skeleton, SkeletonOwnProps, Stack, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface TextOverlayProps {\n  message: string;\n}\n\nexport function TextOverlay(props: TextOverlayProps): ReactElement {\n  const { message } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>\n      <Typography>{message}</Typography>\n    </Stack>\n  );\n}\n\ninterface NoDataOverlayProps {\n  resource: string;\n}\n\nexport function NoDataOverlay(props: NoDataOverlayProps): ReactElement {\n  const { resource } = props;\n\n  return <TextOverlay message={`No ${resource}`} />;\n}\n\ninterface LoadingOverlayProps {\n  variant?: SkeletonOwnProps['variant'];\n}\n\nexport function LoadingOverlay(props: LoadingOverlayProps): ReactElement {\n  const { variant = 'rounded' } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center', padding: '0 10px' }}>\n      <Skeleton variant={variant} width=\"100%\" height=\"30%\" aria-label=\"Loading...\" />\n    </Stack>\n  );\n}\n"],"names":["Skeleton","Stack","Typography","TextOverlay","props","message","sx","height","alignItems","justifyContent","NoDataOverlay","resource","LoadingOverlay","variant","padding","width","aria-label"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAoBC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAO9E,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;QAAS;kBAC1E,cAAA,KAACP;sBAAYG;;;AAGnB;AAMA,OAAO,SAASK,cAAcN,KAAyB;IACrD,MAAM,EAAEO,QAAQ,EAAE,GAAGP;IAErB,qBAAO,KAACD;QAAYE,SAAS,CAAC,GAAG,EAAEM,SAAS,CAAC;;AAC/C;AAMA,OAAO,SAASC,eAAeR,KAA0B;IACvD,MAAM,EAAES,UAAU,SAAS,EAAE,GAAGT;IAEhC,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;YAAUK,SAAS;QAAS;kBAC7F,cAAA,KAACd;YAASa,SAASA;YAASE,OAAM;YAAOR,QAAO;YAAMS,cAAW;;;AAGvE"}
+{"version":3,"sources":["../../src/Overlay/Overlay.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Skeleton, SkeletonOwnProps, Stack, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface TextOverlayProps {\n  message: string;\n}\n\nexport function TextOverlay(props: TextOverlayProps): ReactElement {\n  const { message } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>\n      <Typography>{message}</Typography>\n    </Stack>\n  );\n}\n\ninterface NoDataOverlayProps {\n  resource: string;\n}\n\nexport function NoDataOverlay(props: NoDataOverlayProps): ReactElement {\n  const { resource } = props;\n\n  return <TextOverlay message={`No ${resource}`} />;\n}\n\ninterface LoadingOverlayProps {\n  variant?: SkeletonOwnProps['variant'];\n}\n\nexport function LoadingOverlay(props: LoadingOverlayProps): ReactElement {\n  const { variant = 'rounded' } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center', px: 1 }}>\n      <Skeleton variant={variant} width=\"100%\" height=\"30%\" aria-label=\"Loading...\" />\n    </Stack>\n  );\n}\n"],"names":["Skeleton","Stack","Typography","TextOverlay","props","message","sx","height","alignItems","justifyContent","NoDataOverlay","resource","LoadingOverlay","variant","px","width","aria-label"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAoBC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAO9E,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;QAAS;kBAC1E,cAAA,KAACP;sBAAYG;;;AAGnB;AAMA,OAAO,SAASK,cAAcN,KAAyB;IACrD,MAAM,EAAEO,QAAQ,EAAE,GAAGP;IAErB,qBAAO,KAACD;QAAYE,SAAS,CAAC,GAAG,EAAEM,SAAS,CAAC;;AAC/C;AAMA,OAAO,SAASC,eAAeR,KAA0B;IACvD,MAAM,EAAES,UAAU,SAAS,EAAE,GAAGT;IAEhC,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;YAAUK,IAAI;QAAE;kBACjF,cAAA,KAACd;YAASa,SAASA;YAASE,OAAM;YAAOR,QAAO;YAAMS,cAAW;;;AAGvE"}

package/dist/SettingsAutocomplete/SettingsAutocomplete.js

@@ -21,8 +21,7 @@ import { Autocomplete, TextField, Typography, createFilterOptions } from '@mui/m
         ...params
     }), ...otherProps }) {
     const getOptionLabel = (option)=>{
-        var _option_label;
-        return (_option_label = option.label) !== null && _option_label !== void 0 ? _option_label : option.id;
+        return option.label ?? option.id;
     };
     // Note: this component currently is not virtualized because it is specific
     // to being used for settings, which generally have a pretty small list of

package/dist/SettingsAutocomplete/SettingsAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SettingsAutocomplete/SettingsAutocomplete.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Autocomplete,\n  AutocompleteProps,\n  TextField,\n  Typography,\n  UseAutocompleteProps,\n  createFilterOptions,\n} from '@mui/material';\nimport { ReactElement, ReactNode } from 'react';\n\n/**\n * Interface to extend from for `options` when using `SettingsAutocomplete`.\n */\nexport interface SettingsAutocompleteOption {\n  /**\n   * Unique identifier for the option.\n   */\n  id: string;\n\n  /**\n   * Optional value that is presented to the user for each option. If not set,\n   * the `id` will be used instead.\n   */\n  label?: string;\n\n  /**\n   * Optional description that will be rendered below the `label` to provide the\n   * user with additional information about the option.\n   */\n  description?: ReactNode;\n\n  /**\n   * When `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n}\n\nexport interface SettingsAutocompleteProps<\n  OptionType extends SettingsAutocompleteOption,\n  Multiple extends boolean | undefined,\n  DisableClearable extends boolean | undefined,\n  // Note that the last `false` in the generic arguments sets the `freeSolo` option to `false`.\n  // This component is intended to be used with a discrete list of options, so `freeSolo` never\n  // needs to be `true`.\n> extends Omit<AutocompleteProps<OptionType, Multiple, DisableClearable, false>, 'renderInput'> {\n  // Modifying this to optional, so we can define a sensible default below that\n  // is used in many of the simple cases.\n  renderInput?: AutocompleteProps<OptionType, Multiple, DisableClearable, false>['renderInput'];\n}\n\n/**\n * Opinionated autocomplete component useful for providing users with a dropdown\n * for settings that require selecting one or more options from a list.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function SettingsAutocomplete<\n  OptionType extends SettingsAutocompleteOption,\n  Multiple extends boolean | undefined = false,\n  DisableClearable extends boolean | undefined = false,\n>({\n  options,\n  renderInput = (params): ReactElement => <TextField {...params} />,\n  ...otherProps\n}: SettingsAutocompleteProps<OptionType, Multiple, DisableClearable>): ReactElement {\n  const getOptionLabel: UseAutocompleteProps<OptionType, undefined, boolean, undefined>['getOptionLabel'] = (\n    option\n  ) => {\n    return option.label ?? option.id;\n  };\n\n  // Note: this component currently is not virtualized because it is specific\n  // to being used for settings, which generally have a pretty small list of\n  // options. If this changes to include values with many options, virtualization\n  // should be added using react-virtuoso.\n  return (\n    <Autocomplete\n      isOptionEqualToValue={(option, value) => option.id === value.id}\n      getOptionDisabled={(option) => !!option.disabled}\n      getOptionLabel={getOptionLabel}\n      options={options}\n      renderInput={renderInput}\n      renderOption={({ key, ...props }, option) => {\n        return (\n          <li key={key} {...props}>\n            <div>\n              <Typography variant=\"body1\" component=\"div\">\n                {getOptionLabel(option)}\n              </Typography>\n              {option.description && (\n                <Typography variant=\"body2\" component=\"div\" sx={{ color: (theme) => theme.palette.text.secondary }}>\n                  {option.description}\n                </Typography>\n              )}\n            </div>\n          </li>\n        );\n      }}\n      filterOptions={createFilterOptions({\n        // Include the label and the description in search.\n        stringify: (option) => `${getOptionLabel(option)} ${option.description || ''}`,\n      })}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["Autocomplete","TextField","Typography","createFilterOptions","SettingsAutocomplete","options","renderInput","params","otherProps","getOptionLabel","option","label","id","isOptionEqualToValue","value","getOptionDisabled","disabled","renderOption","key","props","li","div","variant","component","description","sx","color","theme","palette","text","secondary","filterOptions","stringify"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SACEA,YAAY,EAEZC,SAAS,EACTC,UAAU,EAEVC,mBAAmB,QACd,gBAAgB;AA2CvB;;;;;CAKC,GACD,OAAO,SAASC,qBAId,EACAC,OAAO,EACPC,cAAc,CAACC,uBAAyB,KAACN;QAAW,GAAGM,MAAM;MAAI,EACjE,GAAGC,YAC+D;IAClE,MAAMC,iBAAoG,CACxGC;YAEOA;QAAP,OAAOA,CAAAA,gBAAAA,OAAOC,KAAK,cAAZD,2BAAAA,gBAAgBA,OAAOE,EAAE;IAClC;IAEA,2EAA2E;IAC3E,0EAA0E;IAC1E,+EAA+E;IAC/E,wCAAwC;IACxC,qBACE,KAACZ;QACCa,sBAAsB,CAACH,QAAQI,QAAUJ,OAAOE,EAAE,KAAKE,MAAMF,EAAE;QAC/DG,mBAAmB,CAACL,SAAW,CAAC,CAACA,OAAOM,QAAQ;QAChDP,gBAAgBA;QAChBJ,SAASA;QACTC,aAAaA;QACbW,cAAc,CAAC,EAAEC,GAAG,EAAE,GAAGC,OAAO,EAAET;YAChC,qBACE,KAACU;gBAAc,GAAGD,KAAK;0BACrB,cAAA,MAACE;;sCACC,KAACnB;4BAAWoB,SAAQ;4BAAQC,WAAU;sCACnCd,eAAeC;;wBAEjBA,OAAOc,WAAW,kBACjB,KAACtB;4BAAWoB,SAAQ;4BAAQC,WAAU;4BAAME,IAAI;gCAAEC,OAAO,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAACC,SAAS;4BAAC;sCAC9FpB,OAAOc,WAAW;;;;eAPlBN;QAab;QACAa,eAAe5B,oBAAoB;YACjC,mDAAmD;YACnD6B,WAAW,CAACtB,SAAW,CAAC,EAAED,eAAeC,QAAQ,CAAC,EAAEA,OAAOc,WAAW,IAAI,GAAG,CAAC;QAChF;QACC,GAAGhB,UAAU;;AAGpB"}
+{"version":3,"sources":["../../src/SettingsAutocomplete/SettingsAutocomplete.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Autocomplete,\n  AutocompleteProps,\n  TextField,\n  Typography,\n  UseAutocompleteProps,\n  createFilterOptions,\n} from '@mui/material';\nimport { ReactElement, ReactNode } from 'react';\n\n/**\n * Interface to extend from for `options` when using `SettingsAutocomplete`.\n */\nexport interface SettingsAutocompleteOption {\n  /**\n   * Unique identifier for the option.\n   */\n  id: string;\n\n  /**\n   * Optional value that is presented to the user for each option. If not set,\n   * the `id` will be used instead.\n   */\n  label?: string;\n\n  /**\n   * Optional description that will be rendered below the `label` to provide the\n   * user with additional information about the option.\n   */\n  description?: ReactNode;\n\n  /**\n   * When `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n}\n\nexport interface SettingsAutocompleteProps<\n  OptionType extends SettingsAutocompleteOption,\n  Multiple extends boolean | undefined,\n  DisableClearable extends boolean | undefined,\n  // Note that the last `false` in the generic arguments sets the `freeSolo` option to `false`.\n  // This component is intended to be used with a discrete list of options, so `freeSolo` never\n  // needs to be `true`.\n> extends Omit<AutocompleteProps<OptionType, Multiple, DisableClearable, false>, 'renderInput'> {\n  // Modifying this to optional, so we can define a sensible default below that\n  // is used in many of the simple cases.\n  renderInput?: AutocompleteProps<OptionType, Multiple, DisableClearable, false>['renderInput'];\n}\n\n/**\n * Opinionated autocomplete component useful for providing users with a dropdown\n * for settings that require selecting one or more options from a list.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function SettingsAutocomplete<\n  OptionType extends SettingsAutocompleteOption,\n  Multiple extends boolean | undefined = false,\n  DisableClearable extends boolean | undefined = false,\n>({\n  options,\n  renderInput = (params): ReactElement => <TextField {...params} />,\n  ...otherProps\n}: SettingsAutocompleteProps<OptionType, Multiple, DisableClearable>): ReactElement {\n  const getOptionLabel: UseAutocompleteProps<OptionType, undefined, boolean, undefined>['getOptionLabel'] = (\n    option\n  ) => {\n    return option.label ?? option.id;\n  };\n\n  // Note: this component currently is not virtualized because it is specific\n  // to being used for settings, which generally have a pretty small list of\n  // options. If this changes to include values with many options, virtualization\n  // should be added using react-virtuoso.\n  return (\n    <Autocomplete\n      isOptionEqualToValue={(option, value) => option.id === value.id}\n      getOptionDisabled={(option) => !!option.disabled}\n      getOptionLabel={getOptionLabel}\n      options={options}\n      renderInput={renderInput}\n      renderOption={({ key, ...props }, option) => {\n        return (\n          <li key={key} {...props}>\n            <div>\n              <Typography variant=\"body1\" component=\"div\">\n                {getOptionLabel(option)}\n              </Typography>\n              {option.description && (\n                <Typography variant=\"body2\" component=\"div\" sx={{ color: (theme) => theme.palette.text.secondary }}>\n                  {option.description}\n                </Typography>\n              )}\n            </div>\n          </li>\n        );\n      }}\n      filterOptions={createFilterOptions({\n        // Include the label and the description in search.\n        stringify: (option) => `${getOptionLabel(option)} ${option.description || ''}`,\n      })}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["Autocomplete","TextField","Typography","createFilterOptions","SettingsAutocomplete","options","renderInput","params","otherProps","getOptionLabel","option","label","id","isOptionEqualToValue","value","getOptionDisabled","disabled","renderOption","key","props","li","div","variant","component","description","sx","color","theme","palette","text","secondary","filterOptions","stringify"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SACEA,YAAY,EAEZC,SAAS,EACTC,UAAU,EAEVC,mBAAmB,QACd,gBAAgB;AA2CvB;;;;;CAKC,GACD,OAAO,SAASC,qBAId,EACAC,OAAO,EACPC,cAAc,CAACC,uBAAyB,KAACN;QAAW,GAAGM,MAAM;MAAI,EACjE,GAAGC,YAC+D;IAClE,MAAMC,iBAAoG,CACxGC;QAEA,OAAOA,OAAOC,KAAK,IAAID,OAAOE,EAAE;IAClC;IAEA,2EAA2E;IAC3E,0EAA0E;IAC1E,+EAA+E;IAC/E,wCAAwC;IACxC,qBACE,KAACZ;QACCa,sBAAsB,CAACH,QAAQI,QAAUJ,OAAOE,EAAE,KAAKE,MAAMF,EAAE;QAC/DG,mBAAmB,CAACL,SAAW,CAAC,CAACA,OAAOM,QAAQ;QAChDP,gBAAgBA;QAChBJ,SAASA;QACTC,aAAaA;QACbW,cAAc,CAAC,EAAEC,GAAG,EAAE,GAAGC,OAAO,EAAET;YAChC,qBACE,KAACU;gBAAc,GAAGD,KAAK;0BACrB,cAAA,MAACE;;sCACC,KAACnB;4BAAWoB,SAAQ;4BAAQC,WAAU;sCACnCd,eAAeC;;wBAEjBA,OAAOc,WAAW,kBACjB,KAACtB;4BAAWoB,SAAQ;4BAAQC,WAAU;4BAAME,IAAI;gCAAEC,OAAO,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAACC,SAAS;4BAAC;sCAC9FpB,OAAOc,WAAW;;;;eAPlBN;QAab;QACAa,eAAe5B,oBAAoB;YACjC,mDAAmD;YACnD6B,WAAW,CAACtB,SAAW,CAAC,EAAED,eAAeC,QAAQ,CAAC,EAAEA,OAAOc,WAAW,IAAI,GAAG,CAAC;QAChF;QACC,GAAGhB,UAAU;;AAGpB"}

package/dist/StatChart/StatChart.d.ts

@@ -1,10 +1,11 @@
-import { ReactElement } from 'react';
+import { FC } from 'react';
 import { FormatOptions } from '@perses-dev/core';
 import { LineSeriesOption } from 'echarts/charts';
 import { GraphSeries } from '../model';
 import { FontSizeOption } from '../FontSizeSelector';
 export interface StatChartData {
-    calculatedValue?: number | null;
+    color: string;
+    calculatedValue?: string | number | null;
     seriesData?: GraphSeries;
 }
 export interface StatChartProps {
@@ -12,10 +13,9 @@ export interface StatChartProps {
     height: number;
     data: StatChartData;
     format?: FormatOptions;
-    color?: string;
     sparkline?: LineSeriesOption;
     showSeriesName?: boolean;
     valueFontSize?: FontSizeOption;
 }
-export declare function StatChart(props: StatChartProps): ReactElement;
+export declare const StatChart: FC<StatChartProps>;
 //# sourceMappingURL=StatChart.d.ts.map

package/dist/StatChart/StatChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAe,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAI9D,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAUrD,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAoI7D"}
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAWrD,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;CAChC;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiIxC,CAAC"}

package/dist/StatChart/StatChart.js

@@ -12,7 +12,6 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { formatValue } from '@perses-dev/core';
 import { Box, Typography, styled } from '@mui/material';
 import merge from 'lodash/merge';
 import { use } from 'echarts/core';
@@ -22,6 +21,7 @@ import { CanvasRenderer } from 'echarts/renderers';
 import { useChartsTheme } from '../context';
 import { EChart } from '../EChart';
 import { useOptimalFontSize } from './calculateFontSize';
+import { formatStatChartValue } from './utils/formatStatChartValue';
 use([
     EChartsLineChart,
     GridComponent,
@@ -34,21 +34,15 @@ const LINE_HEIGHT = 1.2;
 const SERIES_NAME_MAX_FONT_SIZE = 30;
 const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
-export function StatChart(props) {
-    var _data_seriesData, _data_seriesData1;
-    const { width, height, data, format, color, sparkline, showSeriesName, valueFontSize } = props;
+export const StatChart = (props)=>{
+    const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
     const chartsTheme = useChartsTheme();
-    let formattedValue = '';
-    if (data.calculatedValue === null) {
-        formattedValue = 'null';
-    } else if (typeof data.calculatedValue === 'number') {
-        formattedValue = formatValue(data.calculatedValue, format);
-    }
+    const color = data.color;
+    const formattedValue = formatStatChartValue(data.calculatedValue, format);
     const containerPadding = chartsTheme.container.padding.default;
-    var _data_seriesData_name;
     // calculate series name font size and height
     let seriesNameFontSize = useOptimalFontSize({
-        text: (_data_seriesData_name = data === null || data === void 0 ? void 0 : (_data_seriesData = data.seriesData) === null || _data_seriesData === void 0 ? void 0 : _data_seriesData.name) !== null && _data_seriesData_name !== void 0 ? _data_seriesData_name : '',
+        text: data?.seriesData?.name ?? '',
         fontWeight: SERIES_NAME_FONT_WEIGHT,
         width,
         height: height * 0.125,
@@ -147,7 +141,7 @@ export function StatChart(props) {
             showSeriesName && /*#__PURE__*/ _jsx(SeriesName, {
                 padding: containerPadding,
                 fontSize: seriesNameFontSize,
-                children: (_data_seriesData1 = data.seriesData) === null || _data_seriesData1 === void 0 ? void 0 : _data_seriesData1.name
+                children: data.seriesData?.name
             }),
             /*#__PURE__*/ _jsx(Value, {
                 variant: "h3",
@@ -167,7 +161,7 @@ export function StatChart(props) {
             })
         ]
     });
-}
+};
 const SeriesName = styled(Typography, {
     shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
 })(({ theme, padding, fontSize })=>({
@@ -181,7 +175,7 @@ const SeriesName = styled(Typography, {
 const Value = styled(Typography, {
     shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
 })(({ theme, color, padding, fontSize, sparkline })=>({
-        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
+        color: color ?? theme.palette.text.primary,
         fontSize: `${fontSize}px`,
         padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
         whiteSpace: 'nowrap',

package/dist/StatChart/StatChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo } from 'react';\nimport { formatValue, FormatOptions } from '@perses-dev/core';\nimport { Box, Typography, styled } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model';\nimport { FontSizeOption } from '../FontSizeSelector';\nimport { useOptimalFontSize } from './calculateFontSize';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\n\nexport interface StatChartData {\n  calculatedValue?: number | null;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  format?: FormatOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n  showSeriesName?: boolean;\n  valueFontSize?: FontSizeOption;\n}\n\nexport function StatChart(props: StatChartProps): ReactElement {\n  const { width, height, data, format, color, sparkline, showSeriesName, valueFontSize } = props;\n  const chartsTheme = useChartsTheme();\n\n  let formattedValue = '';\n  if (data.calculatedValue === null) {\n    formattedValue = 'null';\n  } else if (typeof data.calculatedValue === 'number') {\n    formattedValue = formatValue(data.calculatedValue, format);\n  }\n\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  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 === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\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      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\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]);\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      {showSeriesName && (\n        <SeriesName padding={containerPadding} fontSize={seriesNameFontSize}>\n          {data.seriesData?.name}\n        </SeriesName>\n      )}\n      <Value variant=\"h3\" color={color} fontSize={optimalValueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: 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 }>(({ theme, padding, fontSize }) => ({\n  color: theme.palette.text.secondary,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","formatValue","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","useOptimalFontSize","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","StatChart","props","data","width","height","format","color","sparkline","showSeriesName","valueFontSize","chartsTheme","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","text","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","optimalValueFontSize","fontSizeOverride","valueFontHeight","Math","min","option","undefined","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","SeriesName","fontSize","Value","variant","theme","echartsTheme","renderer","shouldForwardProp","prop","palette","secondary","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}
+{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FC, useMemo } from 'react';\nimport { FormatOptions } from '@perses-dev/core';\nimport { Box, Typography, styled } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model';\nimport { FontSizeOption } from '../FontSizeSelector';\nimport { useOptimalFontSize } from './calculateFontSize';\nimport { formatStatChartValue } from './utils/formatStatChartValue';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\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}\n\nexport const StatChart: FC<StatChartProps> = (props) => {\n  const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;\n  const chartsTheme = useChartsTheme();\n  const color = data.color;\n\n  const formattedValue = formatStatChartValue(data.calculatedValue, format);\n\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 === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\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      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\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]);\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      {showSeriesName && (\n        <SeriesName padding={containerPadding} fontSize={seriesNameFontSize}>\n          {data.seriesData?.name}\n        </SeriesName>\n      )}\n      <Value variant=\"h3\" color={color} fontSize={optimalValueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: 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 }>(({ theme, padding, fontSize }) => ({\n  color: theme.palette.text.secondary,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","useOptimalFontSize","formatStatChartValue","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","StatChart","props","width","height","data","sparkline","showSeriesName","format","valueFontSize","chartsTheme","color","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","text","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","optimalValueFontSize","fontSizeOverride","valueFontHeight","Math","min","option","undefined","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","SeriesName","fontSize","Value","variant","theme","echartsTheme","renderer","shouldForwardProp","prop","palette","secondary","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}

package/dist/StatChart/calculateFontSize.js

@@ -31,10 +31,8 @@ function getGlobalCanvasContext() {
         return Number(fontSizeOverride);
     }
     const textStyle = echartsTheme.textStyle;
-    var _Number;
-    const fontSize = (_Number = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && _Number !== void 0 ? _Number : 12;
-    var _textStyle_fontFamily;
-    const fontFamily = (_textStyle_fontFamily = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontFamily) !== null && _textStyle_fontFamily !== void 0 ? _textStyle_fontFamily : 'Lato';
+    const fontSize = Number(textStyle?.fontSize) ?? 12;
+    const fontFamily = textStyle?.fontFamily ?? 'Lato';
     // set the font on the canvas context
     const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
     ctx.font = fontStyle;

package/dist/StatChart/calculateFontSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/calculateFontSize.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { FontSizeOption } from '../FontSizeSelector';\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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,cAAc,QAAQ,4BAA4B;AAa3D,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;QACvBD;IAAjB,MAAME,WAAWF,CAAAA,UAAAA,OAAOC,sBAAAA,gCAAAA,UAAWC,QAAQ,eAA1BF,qBAAAA,UAA+B;QAC7BC;IAAnB,MAAME,aAAaF,CAAAA,wBAAAA,sBAAAA,gCAAAA,UAAWE,UAAU,cAArBF,mCAAAA,wBAAyB;IAE5C,qCAAqC;IACrC,MAAMG,YAAY,CAAC,EAAEb,WAAW,CAAC,EAAEW,SAAS,GAAG,EAAEC,WAAW,CAAC;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/StatChart/calculateFontSize.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { FontSizeOption } from '../FontSizeSelector';\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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,cAAc,QAAQ,4BAA4B;AAa3D,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,aAAa;IAChD,MAAMC,aAAaF,WAAWE,cAAc;IAE5C,qCAAqC;IACrC,MAAMC,YAAY,CAAC,EAAEb,WAAW,CAAC,EAAEW,SAAS,GAAG,EAAEC,WAAW,CAAC;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"}

package/dist/StatChart/utils/formatStatChartValue.d.ts

@@ -0,0 +1,3 @@
+import { FormatOptions } from '@perses-dev/core';
+export declare const formatStatChartValue: (value?: string | number | null, format?: FormatOptions) => string;
+//# sourceMappingURL=formatStatChartValue.d.ts.map

package/dist/StatChart/utils/formatStatChartValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatStatChartValue.d.ts","sourceRoot":"","sources":["../../../src/StatChart/utils/formatStatChartValue.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAe,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,oBAAoB,WAAY,MAAM,GAAG,MAAM,GAAG,IAAI,WAAW,aAAa,KAAG,MAU7F,CAAC"}

package/dist/StatChart/utils/formatStatChartValue.js

@@ -0,0 +1,26 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { formatValue } from '@perses-dev/core';
+export const formatStatChartValue = (value, format)=>{
+    if (value === null) {
+        return 'null';
+    } else if (typeof value === 'number') {
+        return formatValue(value, format);
+    } else if (value === undefined) {
+        return '';
+    } else {
+        return value;
+    }
+};
+
+//# sourceMappingURL=formatStatChartValue.js.map

package/dist/StatChart/utils/formatStatChartValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/StatChart/utils/formatStatChartValue.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormatOptions, formatValue } from '@perses-dev/core';\n\nexport const formatStatChartValue = (value?: string | number | null, format?: FormatOptions): string => {\n  if (value === null) {\n    return 'null';\n  } else if (typeof value === 'number') {\n    return formatValue(value, format);\n  } else if (value === undefined) {\n    return '';\n  } else {\n    return value;\n  }\n};\n"],"names":["formatValue","formatStatChartValue","value","format","undefined"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAwBA,WAAW,QAAQ,mBAAmB;AAE9D,OAAO,MAAMC,uBAAuB,CAACC,OAAgCC;IACnE,IAAID,UAAU,MAAM;QAClB,OAAO;IACT,OAAO,IAAI,OAAOA,UAAU,UAAU;QACpC,OAAOF,YAAYE,OAAOC;IAC5B,OAAO,IAAID,UAAUE,WAAW;QAC9B,OAAO;IACT,OAAO;QACL,OAAOF;IACT;AACF,EAAE"}

package/dist/StatusHistoryChart/StatusHistoryChart.d.ts

@@ -1,14 +1,27 @@
 import { LegendComponentOption } from 'echarts/components';
 import { TimeScale } from '@perses-dev/core';
-import { ReactElement } from 'react';
+import { FC } from 'react';
 export type StatusHistoryData = [number, number, number | undefined];
+export interface StatusHistoryDataItem {
+    value: StatusHistoryData;
+    label?: string;
+    itemStyle?: {
+        color?: string;
+        borderColor?: string;
+        borderWidth?: number;
+    };
+}
 export interface StatusHistoryChartProps {
     height: number;
-    data: StatusHistoryData[];
+    data: StatusHistoryDataItem[];
     xAxisCategories: number[];
     yAxisCategories: string[];
     legend?: LegendComponentOption;
     timeScale?: TimeScale;
+    colors?: Array<{
+        value: number | string;
+        color: string;
+    }>;
 }
-export declare function StatusHistoryChart(props: StatusHistoryChartProps): ReactElement;
+export declare const StatusHistoryChart: FC<StatusHistoryChartProps>;
 //# sourceMappingURL=StatusHistoryChart.d.ts.map

package/dist/StatusHistoryChart/StatusHistoryChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusHistoryChart.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/StatusHistoryChart.tsx"],"names":[],"mappings":"AAeA,OAAO,EAML,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAiB9C,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,CA+G/E"}
+{"version":3,"file":"StatusHistoryChart.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/StatusHistoryChart.tsx"],"names":[],"mappings":"AAeA,OAAO,EAML,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAiB3B,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAErE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,iBAAiB,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA+F1D,CAAC"}