@perses-dev/components 0.0.0-snapshot-datasource-create-transform-e9f8493 → 0.0.0-snapshot-color-palette-gen-test-0ebddd6

package/dist/LineChart/LineChart.js

@@ -36,7 +36,10 @@ use([
     LegendComponent,
     CanvasRenderer
 ]);
-export function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom , onDoubleClick  }) {
+export function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
+    wrapLabels: true
+} , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+    var ref;
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
     const [showTooltip, setShowTooltip] = useState(true);
@@ -130,6 +133,9 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , onDat
             grid,
             legend
         };
+        if (__experimentalEChartsOptionsOverride) {
+            return __experimentalEChartsOptionsOverride(option);
+        }
         return option;
     }, [
         data,
@@ -138,7 +144,8 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , onDat
         grid,
         legend,
         noDataOption,
-        timeZone
+        timeZone,
+        __experimentalEChartsOptionsOverride
     ]);
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {
@@ -168,10 +175,10 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , onDat
         },
         onDoubleClick: handleOnDoubleClick,
         children: [
-            showTooltip === true && /*#__PURE__*/ _jsx(TimeSeriesTooltip, {
+            showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
-                wrapLabels: true,
+                wrapLabels: tooltipConfig.wrapLabels,
                 pinTooltip: pinTooltip,
                 unit: unit
             }),

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 React, { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\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, OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } 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  /**\n   * Height of the chart\n   */\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({ height, data, yAxis, unit, grid, legend, onDataZoom, onDoubleClick }: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n  const { timeZone } = useTimeZone();\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\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      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\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  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;\n\n    // show symbols and axisPointer dashed line on hover\n    const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;\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: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: !isOptimizedMode,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: isOptimizedMode ? 'none' : 'line',\n          z: 0, // ensure point symbol shows on top of dashed line\n        },\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    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={() => {\n        setPinTooltip((current) => !current);\n      }}\n      onMouseDown={(e) => {\n        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n        if (e.target instanceof HTMLCanvasElement) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseUp={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n        setPinTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={handleOnDoubleClick}\n    >\n      {showTooltip === true && (\n        <TimeSeriesTooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip} unit={unit} />\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      />\n    </Box>\n  );\n}\n"],"names":["React","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","OPTIMIZED_MODE_SERIES_LIMIT","useChartsTheme","TimeSeriesTooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","option","timeSeries","isOptimizedMode","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","target","HTMLCanvasElement","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","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 React, { MouseEvent, useMemo, useRef, useState } from 'react';\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, OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } 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 type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n};\n\nexport interface LineChartProps {\n  /**\n   * Height of the chart\n   */\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  tooltipConfig = { wrapLabels: true },\n  onDataZoom,\n  onDoubleClick,\n  __experimentalEChartsOptionsOverride,\n}: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n  const { timeZone } = useTimeZone();\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\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      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\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  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;\n\n    // show symbols and axisPointer dashed line on hover\n    const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;\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: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: !isOptimizedMode,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: isOptimizedMode ? 'none' : 'line',\n          z: 0, // ensure point symbol shows on top of dashed line\n        },\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, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={() => {\n        setPinTooltip((current) => !current);\n      }}\n      onMouseDown={(e) => {\n        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n        if (e.target instanceof HTMLCanvasElement) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseUp={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n        setPinTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={handleOnDoubleClick}\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          <TimeSeriesTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinTooltip={pinTooltip}\n            unit={unit}\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      />\n    </Box>\n  );\n}\n"],"names":["React","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","OPTIMIZED_MODE_SERIES_LIMIT","useChartsTheme","TimeSeriesTooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","option","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","timeSeries","isOptimizedMode","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","target","HTMLCanvasElement","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { FormControlLabelProps } from '@mui/material';
-export declare type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'>;
-export declare const OptionsEditorControl: ({ label, control }: OptionsEditorControlProps) => JSX.Element;
+export declare type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'> & {
+    description?: string;
+};
+export declare const OptionsEditorControl: ({ label, control, description }: OptionsEditorControlProps) => JSX.Element;
 //# sourceMappingURL=OptionsEditorControl.d.ts.map

package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsEditorControl.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorControl.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA0B,qBAAqB,EAAc,MAAM,eAAe,CAAC;AAI1F,oBAAY,yBAAyB,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;AAEzF,eAAO,MAAM,oBAAoB,uBAAwB,yBAAyB,gBAkBjF,CAAC"}
+{"version":3,"file":"OptionsEditorControl.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorControl.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA0B,qBAAqB,EAA0B,MAAM,eAAe,CAAC;AAMtG,oBAAY,yBAAyB,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACzF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,oCAAqC,yBAAyB,gBAmC9F,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorControl.js

@@ -11,10 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormControl, FormLabel, Stack, Box } from '@mui/material';
+import { FormControl, FormLabel, Stack, Box, IconButton } from '@mui/material';
 import React from 'react';
+import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
 import { useId } from '../utils';
-export const OptionsEditorControl = ({ label , control  })=>{
+import { InfoTooltip } from '../InfoTooltip';
+export const OptionsEditorControl = ({ label , control , description  })=>{
     // Make sure we have a unique ID we can use for associating labels and
     // controls for a11y.
     const generatedControlId = useId('EditorSectionControl');
@@ -28,9 +30,36 @@ export const OptionsEditorControl = ({ label , control  })=>{
             alignItems: "center",
             justifyContent: "space-between",
             children: [
-                /*#__PURE__*/ _jsx(FormLabel, {
-                    htmlFor: controlId,
-                    children: label
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(FormLabel, {
+                            htmlFor: controlId,
+                            children: label
+                        }),
+                        description && /*#__PURE__*/ _jsx(InfoTooltip, {
+                            description: description,
+                            enterDelay: 100,
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                size: "small",
+                                sx: (theme)=>({
+                                        borderRadius: theme.shape.borderRadius,
+                                        padding: '4x',
+                                        margin: '0 2px'
+                                    }),
+                                children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
+                                    "aria-describedby": "info-tooltip",
+                                    "aria-hidden": false,
+                                    fontSize: "inherit",
+                                    sx: {
+                                        color: (theme)=>theme.palette.grey[700]
+                                    }
+                                })
+                            })
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ _jsxs(Box, {
                     sx: {

package/dist/OptionsEditorLayout/OptionsEditorControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorControl.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 { FormControl, FormLabel, FormControlLabelProps, Stack, Box } from '@mui/material';\nimport React from 'react';\nimport { useId } from '../utils';\n\nexport type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'>;\n\nexport const OptionsEditorControl = ({ label, control }: OptionsEditorControlProps) => {\n  // Make sure we have a unique ID we can use for associating labels and\n  // controls for a11y.\n  const generatedControlId = useId('EditorSectionControl');\n  const controlId = `${generatedControlId}-control`;\n\n  const controlProps = {\n    id: controlId,\n  };\n\n  return (\n    <FormControl>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\">\n        <FormLabel htmlFor={controlId}>{label}</FormLabel>\n        <Box sx={{ width: '150px', textAlign: 'right' }}> {React.cloneElement(control, controlProps)}</Box>\n      </Stack>\n    </FormControl>\n  );\n};\n"],"names":["FormControl","FormLabel","Stack","Box","React","useId","OptionsEditorControl","label","control","generatedControlId","controlId","controlProps","id","direction","alignItems","justifyContent","htmlFor","sx","width","textAlign","cloneElement"],"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;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAyBC,KAAK,EAAEC,GAAG,QAAQ,eAAe,CAAC;AAC1F,OAAOC,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,KAAK,QAAQ,UAAU,CAAC;AAIjC,OAAO,MAAMC,oBAAoB,GAAG,CAAC,EAAEC,KAAK,CAAA,EAAEC,OAAO,CAAA,EAA6B,GAAK;IACrF,sEAAsE;IACtE,qBAAqB;IACrB,MAAMC,kBAAkB,GAAGJ,KAAK,CAAC,sBAAsB,CAAC,AAAC;IACzD,MAAMK,SAAS,GAAG,CAAC,EAAED,kBAAkB,CAAC,QAAQ,CAAC,AAAC;IAElD,MAAME,YAAY,GAAG;QACnBC,EAAE,EAAEF,SAAS;KACd,AAAC;IAEF,qBACE,KAACV,WAAW;kBACV,cAAA,MAACE,KAAK;YAACW,SAAS,EAAC,KAAK;YAACC,UAAU,EAAC,QAAQ;YAACC,cAAc,EAAC,eAAe;;8BACvE,KAACd,SAAS;oBAACe,OAAO,EAAEN,SAAS;8BAAGH,KAAK;kBAAa;8BAClD,MAACJ,GAAG;oBAACc,EAAE,EAAE;wBAAEC,KAAK,EAAE,OAAO;wBAAEC,SAAS,EAAE,OAAO;qBAAE;;wBAAE,GAAC;sCAACf,KAAK,CAACgB,YAAY,CAACZ,OAAO,EAAEG,YAAY,CAAC;;kBAAO;;UAC7F;MACI,CACd;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorControl.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 { FormControl, FormLabel, FormControlLabelProps, Stack, Box, IconButton } from '@mui/material';\nimport React from 'react';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { useId } from '../utils';\nimport { InfoTooltip } from '../InfoTooltip';\n\nexport type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'> & {\n  description?: string;\n};\n\nexport const OptionsEditorControl = ({ label, control, description }: OptionsEditorControlProps) => {\n  // Make sure we have a unique ID we can use for associating labels and\n  // controls for a11y.\n  const generatedControlId = useId('EditorSectionControl');\n  const controlId = `${generatedControlId}-control`;\n\n  const controlProps = {\n    id: controlId,\n  };\n\n  return (\n    <FormControl>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\">\n        <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <FormLabel htmlFor={controlId}>{label}</FormLabel>\n          {description && (\n            <InfoTooltip description={description} enterDelay={100}>\n              <IconButton\n                size=\"small\"\n                sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4x', margin: '0 2px' })}\n              >\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.grey[700] }}\n                />\n              </IconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n        <Box sx={{ width: '150px', textAlign: 'right' }}> {React.cloneElement(control, controlProps)}</Box>\n      </Stack>\n    </FormControl>\n  );\n};\n"],"names":["FormControl","FormLabel","Stack","Box","IconButton","React","InformationOutlineIcon","useId","InfoTooltip","OptionsEditorControl","label","control","description","generatedControlId","controlId","controlProps","id","direction","alignItems","justifyContent","htmlFor","enterDelay","size","sx","theme","borderRadius","shape","padding","margin","aria-describedby","aria-hidden","fontSize","color","palette","grey","width","textAlign","cloneElement"],"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;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAyBC,KAAK,EAAEC,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AACtG,OAAOC,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAOC,sBAAsB,MAAM,oCAAoC,CAAC;AACxE,SAASC,KAAK,QAAQ,UAAU,CAAC;AACjC,SAASC,WAAW,QAAQ,gBAAgB,CAAC;AAM7C,OAAO,MAAMC,oBAAoB,GAAG,CAAC,EAAEC,KAAK,CAAA,EAAEC,OAAO,CAAA,EAAEC,WAAW,CAAA,EAA6B,GAAK;IAClG,sEAAsE;IACtE,qBAAqB;IACrB,MAAMC,kBAAkB,GAAGN,KAAK,CAAC,sBAAsB,CAAC,AAAC;IACzD,MAAMO,SAAS,GAAG,CAAC,EAAED,kBAAkB,CAAC,QAAQ,CAAC,AAAC;IAElD,MAAME,YAAY,GAAG;QACnBC,EAAE,EAAEF,SAAS;KACd,AAAC;IAEF,qBACE,KAACd,WAAW;kBACV,cAAA,MAACE,KAAK;YAACe,SAAS,EAAC,KAAK;YAACC,UAAU,EAAC,QAAQ;YAACC,cAAc,EAAC,eAAe;;8BACvE,MAACjB,KAAK;oBAACe,SAAS,EAAC,KAAK;oBAACC,UAAU,EAAC,QAAQ;oBAACC,cAAc,EAAC,QAAQ;;sCAChE,KAAClB,SAAS;4BAACmB,OAAO,EAAEN,SAAS;sCAAGJ,KAAK;0BAAa;wBACjDE,WAAW,kBACV,KAACJ,WAAW;4BAACI,WAAW,EAAEA,WAAW;4BAAES,UAAU,EAAE,GAAG;sCACpD,cAAA,KAACjB,UAAU;gCACTkB,IAAI,EAAC,OAAO;gCACZC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wCAAEC,YAAY,EAAED,KAAK,CAACE,KAAK,CAACD,YAAY;wCAAEE,OAAO,EAAE,IAAI;wCAAEC,MAAM,EAAE,OAAO;qCAAE,CAAA,AAAC;0CAE3F,cAAA,KAACtB,sBAAsB;oCACrBuB,kBAAgB,EAAC,cAAc;oCAC/BC,aAAW,EAAE,KAAK;oCAClBC,QAAQ,EAAC,SAAS;oCAClBR,EAAE,EAAE;wCAAES,KAAK,EAAE,CAACR,KAAK,GAAKA,KAAK,CAACS,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;qCAAE;kCACjD;8BACS;0BACD,AACf;;kBACK;8BACR,MAAC/B,GAAG;oBAACoB,EAAE,EAAE;wBAAEY,KAAK,EAAE,OAAO;wBAAEC,SAAS,EAAE,OAAO;qBAAE;;wBAAE,GAAC;sCAAC/B,KAAK,CAACgC,YAAY,CAAC1B,OAAO,EAAEI,YAAY,CAAC;;kBAAO;;UAC7F;MACI,CACd;AACJ,CAAC,CAAC"}

package/dist/StatChart/StatChart.d.ts

@@ -11,6 +11,7 @@ export interface StatChartProps {
     height: number;
     data: StatChartData;
     unit: UnitOptions;
+    color?: string;
     sparkline?: LineSeriesOption;
 }
 export declare function StatChart(props: StatChartProps): JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAyF9C"}
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAyF9C"}

package/dist/StatChart/StatChart.js

@@ -32,7 +32,7 @@ use([
 const MIN_VALUE_SIZE = 12;
 const MAX_VALUE_SIZE = 36;
 export function StatChart(props) {
-    const { width , height , data , unit , sparkline  } = props;
+    const { width , height , data , unit , color , sparkline  } = props;
     const chartsTheme = useChartsTheme();
     const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);
     const option = useMemo(()=>{
@@ -101,7 +101,7 @@ export function StatChart(props) {
             /*#__PURE__*/ _jsx(Typography, {
                 variant: "h3",
                 sx: (theme)=>({
-                        color: theme.palette.text.primary,
+                        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
                         fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
                         padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`
                     }),

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 { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\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/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, sparkline } = props;\n  const chartsTheme = useChartsTheme();\n\n  const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\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        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      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const isLargePanel = width > 250 && height > 180;\n  // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n  const charactersAdjust = formattedValue.length;\n  const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n  const containerPadding = `${chartsTheme.container.padding.default}px`;\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>\n      <Typography\n        variant=\"h3\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n          fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n          padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`,\n        })}\n      >\n        {formattedValue}\n      </Typography>\n      {sparkline !== undefined && (\n        <Box sx={{ flex: 1 }}>\n          <EChart\n            sx={{\n              width: '100%',\n              height: '100%',\n            }}\n            option={option}\n            theme={chartsTheme.echartsTheme}\n            renderer=\"svg\"\n          />\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","Typography","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","min","containerPadding","container","padding","default","sx","display","flexDirection","variant","theme","color","palette","text","primary","fontSize","flex","echartsTheme","renderer"],"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 { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\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/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline } = props;\n  const chartsTheme = useChartsTheme();\n\n  const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\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        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      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const isLargePanel = width > 250 && height > 180;\n  // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n  const charactersAdjust = formattedValue.length;\n  const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n  const containerPadding = `${chartsTheme.container.padding.default}px`;\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>\n      <Typography\n        variant=\"h3\"\n        sx={(theme) => ({\n          color: color ?? theme.palette.text.primary,\n          fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n          padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`,\n        })}\n      >\n        {formattedValue}\n      </Typography>\n      {sparkline !== undefined && (\n        <Box sx={{ flex: 1 }}>\n          <EChart\n            sx={{\n              width: '100%',\n              height: '100%',\n            }}\n            option={option}\n            theme={chartsTheme.echartsTheme}\n            renderer=\"svg\"\n          />\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","Typography","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","color","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","min","containerPadding","container","padding","default","sx","display","flexDirection","variant","theme","palette","text","primary","fontSize","flex","echartsTheme","renderer"],"mappings":"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"}

package/dist/ThresholdsEditor/ThresholdInput.d.ts

@@ -1,4 +1,5 @@
 import { RefObject } from 'react';
+import { ThresholdOptions } from '@perses-dev/core';
 export interface ThresholdInputProps {
     label: string;
     color: string;
@@ -8,6 +9,7 @@ export interface ThresholdInputProps {
     onBlur: () => void;
     onDelete: () => void;
     inputRef?: RefObject<HTMLInputElement | null>;
+    mode?: ThresholdOptions['mode'];
 }
-export declare function ThresholdInput({ inputRef, label, color, value, onChange, onColorChange, onBlur, onDelete, }: ThresholdInputProps): JSX.Element;
+export declare function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete, }: ThresholdInputProps): JSX.Element;
 //# sourceMappingURL=ThresholdInput.d.ts.map

package/dist/ThresholdsEditor/ThresholdInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThresholdInput.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAK5C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CAC/C;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,eA2BrB"}
+{"version":3,"file":"ThresholdInput.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,eA8BrB"}

package/dist/ThresholdsEditor/ThresholdInput.js

@@ -12,10 +12,10 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Stack, FormLabel, TextField, IconButton } from '@mui/material';
+import { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import { ThresholdColorPicker } from './ThresholdColorPicker';
-export function ThresholdInput({ inputRef , label , color , value , onChange , onColorChange , onBlur , onDelete  }) {
+export function ThresholdInput({ inputRef , label , color , value , mode , onChange , onColorChange , onBlur , onDelete  }) {
     const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter
     return /*#__PURE__*/ _jsxs(Stack, {
         flex: 1,
@@ -37,7 +37,7 @@ export function ThresholdInput({ inputRef , label , color , value , onChange , o
                 id: label,
                 inputRef: inputRef,
                 type: "number",
-                value: value === 0 ? undefined : value,
+                value: value === 0 ? '' : value,
                 placeholder: "0",
                 onChange: onChange,
                 onBlur: onBlur,
@@ -46,6 +46,12 @@ export function ThresholdInput({ inputRef , label , color , value , onChange , o
                         onBlur();
                         setKey(key + 1);
                     }
+                },
+                InputProps: {
+                    endAdornment: mode === 'Percent' ? /*#__PURE__*/ _jsx(Box, {
+                        paddingX: 1,
+                        children: "%"
+                    }) : undefined
                 }
             }, key),
             /*#__PURE__*/ _jsx(IconButton, {

package/dist/ThresholdsEditor/ThresholdInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.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 { RefObject, useState } from 'react';\nimport { Stack, FormLabel, TextField, IconButton } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps) {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <ThresholdColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? undefined : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["useState","Stack","FormLabel","TextField","IconButton","DeleteIcon","ThresholdColorPicker","ThresholdInput","inputRef","label","color","value","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","undefined","placeholder","onKeyDown","e","aria-label","size","onClick"],"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;AAAA,SAAoBA,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,QAAQ,eAAe,CAAC;AACxE,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,oBAAoB,QAAQ,wBAAwB,CAAC;AAa9D,OAAO,SAASC,cAAc,CAAC,EAC7BC,QAAQ,CAAA,EACRC,KAAK,CAAA,EACLC,KAAK,CAAA,EACLC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACRC,aAAa,CAAA,EACbC,MAAM,CAAA,EACNC,QAAQ,CAAA,EACY,EAAE;IACtB,MAAM,CAACC,GAAG,EAAEC,MAAM,CAAC,GAAGjB,QAAQ,CAAC,CAAC,CAAC,AAAC,EAAC,2DAA2D;IAC9F,qBACE,MAACC,KAAK;QAACiB,IAAI,EAAE,CAAC;QAAEC,SAAS,EAAC,KAAK;QAACC,UAAU,EAAC,QAAQ;QAACC,cAAc,EAAC,eAAe;QAACC,OAAO,EAAE,CAAC;;0BAC3F,KAAChB,oBAAoB;gBAACG,KAAK,EAAEA,KAAK;gBAAEC,KAAK,EAAEA,KAAK;gBAAEG,aAAa,EAAEA,aAAa;cAAI;0BAClF,KAACX,SAAS;gBAACqB,OAAO,EAAEd,KAAK;0BAAGA,KAAK;cAAa;0BAC9C,KAACN,SAAS;gBACRqB,EAAE,EAAEf,KAAK;gBAETD,QAAQ,EAAEA,QAAQ;gBAClBiB,IAAI,EAAC,QAAQ;gBACbd,KAAK,EAAEA,KAAK,KAAK,CAAC,GAAGe,SAAS,GAAGf,KAAK;gBACtCgB,WAAW,EAAC,GAAG;gBACff,QAAQ,EAAEA,QAAQ;gBAClBE,MAAM,EAAEA,MAAM;gBACdc,SAAS,EAAE,CAACC,CAAC,GAAK;oBAChB,IAAIA,CAAC,CAACb,GAAG,KAAK,OAAO,EAAE;wBACrBF,MAAM,EAAE,CAAC;wBACTG,MAAM,CAACD,GAAG,GAAG,CAAC,CAAC,CAAC;oBAClB,CAAC;gBACH,CAAC;eAZIA,GAAG,CAaR;0BACF,KAACZ,UAAU;gBAAC0B,YAAU,EAAE,CAAC,iBAAiB,EAAErB,KAAK,CAAC,CAAC;gBAAEsB,IAAI,EAAC,OAAO;gBAACC,OAAO,EAAEjB,QAAQ;0BACjF,cAAA,KAACV,UAAU,KAAG;cACH;;MACP,CACR;AACJ,CAAC"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.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 { RefObject, useState } from 'react';\nimport { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps) {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <ThresholdColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? '' : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n        InputProps={{\n          endAdornment: mode === 'Percent' ? <Box paddingX={1}>%</Box> : undefined,\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["useState","Stack","FormLabel","TextField","IconButton","Box","DeleteIcon","ThresholdColorPicker","ThresholdInput","inputRef","label","color","value","mode","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","placeholder","onKeyDown","e","InputProps","endAdornment","paddingX","undefined","aria-label","size","onClick"],"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;AAAA,SAAoBA,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,GAAG,QAAQ,eAAe,CAAC;AAC7E,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AAEvD,SAASC,oBAAoB,QAAQ,wBAAwB,CAAC;AAc9D,OAAO,SAASC,cAAc,CAAC,EAC7BC,QAAQ,CAAA,EACRC,KAAK,CAAA,EACLC,KAAK,CAAA,EACLC,KAAK,CAAA,EACLC,IAAI,CAAA,EACJC,QAAQ,CAAA,EACRC,aAAa,CAAA,EACbC,MAAM,CAAA,EACNC,QAAQ,CAAA,EACY,EAAE;IACtB,MAAM,CAACC,GAAG,EAAEC,MAAM,CAAC,GAAGnB,QAAQ,CAAC,CAAC,CAAC,AAAC,EAAC,2DAA2D;IAC9F,qBACE,MAACC,KAAK;QAACmB,IAAI,EAAE,CAAC;QAAEC,SAAS,EAAC,KAAK;QAACC,UAAU,EAAC,QAAQ;QAACC,cAAc,EAAC,eAAe;QAACC,OAAO,EAAE,CAAC;;0BAC3F,KAACjB,oBAAoB;gBAACG,KAAK,EAAEA,KAAK;gBAAEC,KAAK,EAAEA,KAAK;gBAAEI,aAAa,EAAEA,aAAa;cAAI;0BAClF,KAACb,SAAS;gBAACuB,OAAO,EAAEf,KAAK;0BAAGA,KAAK;cAAa;0BAC9C,KAACP,SAAS;gBACRuB,EAAE,EAAEhB,KAAK;gBAETD,QAAQ,EAAEA,QAAQ;gBAClBkB,IAAI,EAAC,QAAQ;gBACbf,KAAK,EAAEA,KAAK,KAAK,CAAC,GAAG,EAAE,GAAGA,KAAK;gBAC/BgB,WAAW,EAAC,GAAG;gBACfd,QAAQ,EAAEA,QAAQ;gBAClBE,MAAM,EAAEA,MAAM;gBACda,SAAS,EAAE,CAACC,CAAC,GAAK;oBAChB,IAAIA,CAAC,CAACZ,GAAG,KAAK,OAAO,EAAE;wBACrBF,MAAM,EAAE,CAAC;wBACTG,MAAM,CAACD,GAAG,GAAG,CAAC,CAAC,CAAC;oBAClB,CAAC;gBACH,CAAC;gBACDa,UAAU,EAAE;oBACVC,YAAY,EAAEnB,IAAI,KAAK,SAAS,iBAAG,KAACR,GAAG;wBAAC4B,QAAQ,EAAE,CAAC;kCAAE,GAAC;sBAAM,GAAGC,SAAS;iBACzE;eAfIhB,GAAG,CAgBR;0BACF,KAACd,UAAU;gBAAC+B,YAAU,EAAE,CAAC,iBAAiB,EAAEzB,KAAK,CAAC,CAAC;gBAAE0B,IAAI,EAAC,OAAO;gBAACC,OAAO,EAAEpB,QAAQ;0BACjF,cAAA,KAACX,UAAU,KAAG;cACH;;MACP,CACR;AACJ,CAAC"}

package/dist/ThresholdsEditor/ThresholdsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThresholdsEditor.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAOpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAID,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,qBAAqB,eA4KhH"}
+{"version":3,"file":"ThresholdsEditor.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAOpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAID,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,qBAAqB,eA+LhH"}

package/dist/ThresholdsEditor/ThresholdsEditor.js

@@ -16,9 +16,9 @@ import produce from 'immer';
 import { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import PlusIcon from 'mdi-material-ui/Plus';
 import { Stack } from '@mui/system';
-import { InfoTooltip } from '../InfoTooltip';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
-import { OptionsEditorGroup } from '../OptionsEditorLayout';
+import { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';
+import { InfoTooltip } from '../InfoTooltip';
 import { ThresholdColorPicker } from './ThresholdColorPicker';
 import { ThresholdInput } from './ThresholdInput';
 const DEFAULT_STEP = 10;
@@ -68,6 +68,10 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
             onChange(produce(thresholds, (draft)=>{
                 draft.default_color = color;
             }));
+        } else {
+            onChange({
+                default_color: color
+            });
         }
     };
     // sort thresholds in ascending order every time an input blurs
@@ -104,6 +108,14 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
                     }
                 ]
             });
+        } else if (thresholds && thresholds.steps === undefined) {
+            onChange(produce(thresholds, (draft)=>{
+                draft.steps = [
+                    {
+                        value: DEFAULT_STEP
+                    }
+                ];
+            }));
         } else {
             onChange(produce(thresholds, (draft)=>{
                 const steps = draft.steps;
@@ -139,46 +151,55 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
     var ref1, _color, ref2;
     return /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
         title: "Thresholds",
-        icon: /*#__PURE__*/ _jsx(IconButton, {
-            size: "small",
-            "aria-label": "add threshold",
-            onClick: addThresholdInput,
-            children: /*#__PURE__*/ _jsx(PlusIcon, {})
+        icon: /*#__PURE__*/ _jsx(InfoTooltip, {
+            description: 'Add threshold',
+            children: /*#__PURE__*/ _jsx(IconButton, {
+                size: "small",
+                "aria-label": "add threshold",
+                onClick: addThresholdInput,
+                children: /*#__PURE__*/ _jsx(PlusIcon, {})
+            })
         }),
         children: [
-            /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
-                exclusive: true,
-                disabled: disablePercentMode,
-                value: (ref1 = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && ref1 !== void 0 ? ref1 : 'Absolute',
-                onChange: handleModeChange,
-                sx: {
-                    height: '36px',
-                    marginLeft: 'auto'
-                },
-                children: [
-                    /*#__PURE__*/ _jsx(ToggleButton, {
-                        "aria-label": "absolute",
-                        value: "Absolute",
-                        children: /*#__PURE__*/ _jsx(InfoTooltip, {
-                            description: "Absolute",
-                            children: "#"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(ToggleButton, {
-                        "aria-label": "percent",
-                        value: "Percent",
-                        children: /*#__PURE__*/ _jsx(InfoTooltip, {
-                            description: "Percentage means thresholds relative to min & max",
-                            children: "%"
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Mode",
+                description: "Percentage means thresholds relative to min & max",
+                control: /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                    exclusive: true,
+                    disabled: disablePercentMode,
+                    value: (ref1 = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && ref1 !== void 0 ? ref1 : 'Absolute',
+                    onChange: handleModeChange,
+                    sx: {
+                        height: '36px',
+                        marginLeft: 'auto'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(ToggleButton, {
+                            "aria-label": "absolute",
+                            value: "Absolute",
+                            sx: {
+                                fontWeight: 500
+                            },
+                            children: "Absolute"
+                        }),
+                        /*#__PURE__*/ _jsx(ToggleButton, {
+                            "aria-label": "percent",
+                            value: "Percent",
+                            sx: {
+                                fontWeight: 500
+                            },
+                            children: "Percent"
                         })
-                    })
-                ]
+                    ]
+                })
             }),
-            steps && steps.map((step, i)=>/*#__PURE__*/ _jsx(ThresholdInput, {
+            steps && steps.map((step, i)=>{
+                /*#__PURE__*/ return _jsx(ThresholdInput, {
                     inputRef: i === steps.length - 1 ? recentlyAddedInputRef : undefined,
                     label: `T${i + 1}`,
                     color: (ref2 = (_color = step.color) !== null && _color !== void 0 ? _color : palette[i]) !== null && ref2 !== void 0 ? ref2 : defaultThresholdColor,
                     value: step.value,
+                    mode: thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode,
                     onColorChange: (color)=>handleThresholdColorChange(color, i),
                     onChange: (e)=>{
                         handleThresholdValueChange(e, i);
@@ -187,7 +208,8 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
                         deleteThreshold(i);
                     },
                     onBlur: handleThresholdBlur
-                }, i)).reverse(),
+                }, i);
+            }).reverse(),
             !hideDefault && /*#__PURE__*/ _jsxs(Stack, {
                 flex: 1,
                 direction: "row",