@perses-dev/components 0.0.0-snapshot-datasource-browser-test-28cbb71 → 0.0.0-snapshot-test-internal-dep-dd238ac

package/dist/StatChart/StatChart.d.ts

@@ -5,9 +5,8 @@ import { GraphSeries } from '../model/graph';
 export interface StatChartData {
     calculatedValue?: number;
     seriesData?: GraphSeries;
-    name?: string;
 }
-interface StatChartProps {
+export interface StatChartProps {
     width: number;
     height: number;
     data: StatChartData;
@@ -15,5 +14,4 @@ interface StatChartProps {
     sparkline?: LineSeriesOption;
 }
 export declare function StatChart(props: StatChartProps): JSX.Element;
-export {};
 //# 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":";AAkBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAe7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,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,eA0F9C"}
+{"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"}

package/dist/StatChart/StatChart.js

@@ -11,11 +11,10 @@
 // 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 React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { Box, Typography } from '@mui/material';
 import { merge } from 'lodash-es';
 import { use } from 'echarts/core';
-import { GaugeChart as EChartsGaugeChart } from 'echarts/charts';
 import { LineChart as EChartsLineChart } from 'echarts/charts';
 import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
@@ -23,7 +22,6 @@ import { useChartsTheme } from '../context/ChartsThemeProvider';
 import { formatValue } from '../model/units';
 import { EChart } from '../EChart';
 use([
-    EChartsGaugeChart,
     EChartsLineChart,
     GridComponent,
     DatasetComponent,

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 React, { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\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([\n  EChartsGaugeChart,\n  EChartsLineChart,\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n  name?: string;\n}\n\ninterface 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\n    const statSeries: Array<GaugeSeriesOption | LineSeriesOption> = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries: LineSeriesOption = {\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":["React","useMemo","Box","Typography","merge","use","GaugeChart","EChartsGaugeChart","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  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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"}

package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ThresholdInputProps } from './ThresholdInput';
+export declare function ThresholdColorPicker({ color, onColorChange, label, }: Pick<ThresholdInputProps, 'color' | 'onColorChange' | 'label'>): JSX.Element;
+//# sourceMappingURL=ThresholdColorPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThresholdColorPicker.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdColorPicker.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,aAAa,EACb,KAAK,GACN,EAAE,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,eAAe,GAAG,OAAO,CAAC,eA8ChE"}

package/dist/ThresholdsEditor/ThresholdColorPicker.js

@@ -0,0 +1,76 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { styled, IconButton, Popover } from '@mui/material';
+import CircleIcon from 'mdi-material-ui/Circle';
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { ColorPicker } from '../ColorPicker';
+export function ThresholdColorPicker({ color , onColorChange , label  }) {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const isOpen = Boolean(anchorEl);
+    const openColorPicker = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const closeColorPicker = ()=>{
+        setAnchorEl(null);
+    };
+    const { thresholds: { defaultColor , palette  } ,  } = useChartsTheme();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(ColorIconButton, {
+                size: "small",
+                "aria-label": `change threshold ${label} color`,
+                isSelected: isOpen,
+                iconColor: color,
+                onClick: openColorPicker,
+                children: /*#__PURE__*/ _jsx(CircleIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(Popover, {
+                "data-testid": "threshold color picker",
+                open: isOpen,
+                anchorEl: anchorEl,
+                onClose: closeColorPicker,
+                PaperProps: {
+                    sx: {
+                        padding: (theme)=>theme.spacing(2)
+                    }
+                },
+                anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left'
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                },
+                children: /*#__PURE__*/ _jsx(ColorPicker, {
+                    color: color,
+                    onChange: onColorChange,
+                    palette: [
+                        defaultColor,
+                        ...palette
+                    ]
+                })
+            })
+        ]
+    });
+}
+const ColorIconButton = styled(IconButton, {
+    shouldForwardProp: (props)=>props !== 'isSelected' && props !== 'iconColor'
+})(({ iconColor , isSelected  })=>({
+        backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined',
+        color: iconColor
+    }));
+
+//# sourceMappingURL=ThresholdColorPicker.js.map

package/dist/ThresholdsEditor/ThresholdColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdColorPicker.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 from 'react';\nimport { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { ColorPicker } from '../ColorPicker';\nimport { ThresholdInputProps } from './ThresholdInput';\n\nexport function ThresholdColorPicker({\n  color,\n  onColorChange,\n  label,\n}: Pick<ThresholdInputProps, 'color' | 'onColorChange' | 'label'>) {\n  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = () => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size=\"small\"\n        aria-label={`change threshold ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"threshold color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        PaperProps={{ sx: { padding: (theme) => theme.spacing(2) } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} onChange={onColorChange} palette={[defaultColor, ...palette]} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["React","styled","IconButton","Popover","CircleIcon","useChartsTheme","ColorPicker","ThresholdColorPicker","color","onColorChange","label","anchorEl","setAnchorEl","useState","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","size","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","PaperProps","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","backgroundColor"],"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,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,eAAe,CAAC;AAC5D,OAAOC,UAAU,MAAM,wBAAwB,CAAC;AAChD,SAASC,cAAc,QAAQ,gCAAgC,CAAC;AAChE,SAASC,WAAW,QAAQ,gBAAgB,CAAC;AAG7C,OAAO,SAASC,oBAAoB,CAAC,EACnCC,KAAK,CAAA,EACLC,aAAa,CAAA,EACbC,KAAK,CAAA,EAC0D,EAAE;IACjE,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGZ,KAAK,CAACa,QAAQ,CAA2B,IAAI,CAAC,AAAC;IAC/E,MAAMC,MAAM,GAAGC,OAAO,CAACJ,QAAQ,CAAC,AAAC;IAEjC,MAAMK,eAAe,GAAG,CAACC,KAA0C,GAAK;QACtEL,WAAW,CAACK,KAAK,CAACC,aAAa,CAAC,CAAC;IACnC,CAAC,AAAC;IAEF,MAAMC,gBAAgB,GAAG,IAAM;QAC7BP,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,MAAM,EACJQ,UAAU,EAAE,EAAEC,YAAY,CAAA,EAAEC,OAAO,CAAA,EAAE,CAAA,IACtC,GAAGjB,cAAc,EAAE,AAAC;IAErB,qBACE;;0BACE,KAACkB,eAAe;gBACdC,IAAI,EAAC,OAAO;gBACZC,YAAU,EAAE,CAAC,iBAAiB,EAAEf,KAAK,CAAC,MAAM,CAAC;gBAC7CgB,UAAU,EAAEZ,MAAM;gBAClBa,SAAS,EAAEnB,KAAK;gBAChBoB,OAAO,EAAEZ,eAAe;0BAExB,cAAA,KAACZ,UAAU,KAAG;cACE;0BAClB,KAACD,OAAO;gBACN0B,aAAW,EAAC,wBAAwB;gBACpCC,IAAI,EAAEhB,MAAM;gBACZH,QAAQ,EAAEA,QAAQ;gBAClBoB,OAAO,EAAEZ,gBAAgB;gBACzBa,UAAU,EAAE;oBAAEC,EAAE,EAAE;wBAAEC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;qBAAE;iBAAE;gBAC5DC,YAAY,EAAE;oBACZC,QAAQ,EAAE,KAAK;oBACfC,UAAU,EAAE,MAAM;iBACnB;gBACDC,eAAe,EAAE;oBACfF,QAAQ,EAAE,KAAK;oBACfC,UAAU,EAAE,OAAO;iBACpB;0BAED,cAAA,KAACjC,WAAW;oBAACE,KAAK,EAAEA,KAAK;oBAAEiC,QAAQ,EAAEhC,aAAa;oBAAEa,OAAO,EAAE;wBAACD,YAAY;2BAAKC,OAAO;qBAAC;kBAAI;cACnF;;MACT,CACH;AACJ,CAAC;AAED,MAAMC,eAAe,GAAGtB,MAAM,CAACC,UAAU,EAAE;IACzCwC,iBAAiB,EAAE,CAACC,KAAK,GAAKA,KAAK,KAAK,YAAY,IAAIA,KAAK,KAAK,WAAW;CAC9E,CAAC,CAGC,CAAC,EAAEhB,SAAS,CAAA,EAAED,UAAU,CAAA,EAAE,GAAM,CAAA;QACjCkB,eAAe,EAAElB,UAAU,IAAIC,SAAS,GAAG,CAAC,EAAEA,SAAS,CAAC,EAAE,CAAC,GAAG,WAAW;QACzEnB,KAAK,EAAEmB,SAAS;KACjB,CAAA,AAAC,CAAC,AAAC"}

package/dist/ThresholdsEditor/ThresholdInput.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+export interface ThresholdInputProps {
+    label: string;
+    color: string;
+    value: number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onColorChange: (color: string) => void;
+    onBlur: () => void;
+    onDelete: () => void;
+    inputRef?: RefObject<HTMLInputElement | null>;
+}
+export declare function ThresholdInput({ inputRef, label, color, value, onChange, onColorChange, onBlur, onDelete, }: ThresholdInputProps): JSX.Element;
+//# sourceMappingURL=ThresholdInput.d.ts.map

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

@@ -0,0 +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"}

package/dist/ThresholdsEditor/ThresholdInput.js

@@ -0,0 +1,61 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Stack, FormLabel, TextField, IconButton } 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  }) {
+    const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter
+    return /*#__PURE__*/ _jsxs(Stack, {
+        flex: 1,
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(ThresholdColorPicker, {
+                label: label,
+                color: color,
+                onColorChange: onColorChange
+            }),
+            /*#__PURE__*/ _jsx(FormLabel, {
+                htmlFor: label,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                id: label,
+                inputRef: inputRef,
+                type: "number",
+                value: value === 0 ? undefined : value,
+                placeholder: "0",
+                onChange: onChange,
+                onBlur: onBlur,
+                onKeyDown: (e)=>{
+                    if (e.key === 'Enter') {
+                        onBlur();
+                        setKey(key + 1);
+                    }
+                }
+            }, key),
+            /*#__PURE__*/ _jsx(IconButton, {
+                "aria-label": `delete threshold ${label}`,
+                size: "small",
+                onClick: onDelete,
+                children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ThresholdInput.js.map

package/dist/ThresholdsEditor/ThresholdInput.js.map

@@ -0,0 +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"}

package/dist/ThresholdsEditor/ThresholdsEditor.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ThresholdOptions } from '@perses-dev/core';
+export interface ThresholdsEditorProps {
+    onChange: (thresholds: ThresholdOptions) => void;
+    thresholds?: ThresholdOptions;
+    hideDefault?: boolean;
+    disablePercentMode?: boolean;
+}
+export declare function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }: ThresholdsEditorProps): JSX.Element;
+//# sourceMappingURL=ThresholdsEditor.d.ts.map

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

@@ -0,0 +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"}

package/dist/ThresholdsEditor/ThresholdsEditor.js

@@ -0,0 +1,215 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+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 { ThresholdColorPicker } from './ThresholdColorPicker';
+import { ThresholdInput } from './ThresholdInput';
+const DEFAULT_STEP = 10;
+export function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercentMode  }) {
+    const { thresholds: { defaultColor , palette  } ,  } = useChartsTheme();
+    var ref;
+    const defaultThresholdColor = (ref = thresholds === null || thresholds === void 0 ? void 0 : thresholds.default_color) !== null && ref !== void 0 ? ref : defaultColor;
+    const [steps, setSteps] = useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
+    useEffect(()=>{
+        setSteps(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
+    }, [
+        thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps
+    ]);
+    // every time a new threshold is added, we want to focus the recently added input
+    const recentlyAddedInputRef = useRef(null);
+    const focusRef = useRef(false);
+    useEffect(()=>{
+        var ref;
+        if (!recentlyAddedInputRef.current || !focusRef.current) return;
+        (ref = recentlyAddedInputRef.current) === null || ref === void 0 ? void 0 : ref.focus();
+        focusRef.current = false;
+    }, [
+        steps === null || steps === void 0 ? void 0 : steps.length
+    ]);
+    const handleThresholdValueChange = (e, i)=>{
+        setSteps(produce(steps, (draft)=>{
+            const step = draft === null || draft === void 0 ? void 0 : draft[i];
+            if (step) {
+                step.value = Number(e.target.value);
+            }
+        }));
+    };
+    const handleThresholdColorChange = (color, i)=>{
+        if (thresholds !== undefined) {
+            onChange(produce(thresholds, (draft)=>{
+                if (draft.steps !== undefined) {
+                    const step = draft.steps[i];
+                    if (step) {
+                        step.color = color;
+                    }
+                }
+            }));
+        }
+    };
+    const handleDefaultColorChange = (color)=>{
+        if (thresholds !== undefined) {
+            onChange(produce(thresholds, (draft)=>{
+                draft.default_color = color;
+            }));
+        }
+    };
+    // sort thresholds in ascending order every time an input blurs
+    const handleThresholdBlur = ()=>{
+        if (steps !== undefined) {
+            const sortedSteps = [
+                ...steps
+            ];
+            sortedSteps.sort((a, b)=>a.value - b.value);
+            if (thresholds !== undefined) {
+                onChange(produce(thresholds, (draft)=>{
+                    draft.steps = sortedSteps;
+                }));
+            }
+        }
+    };
+    const deleteThreshold = (i)=>{
+        if (thresholds !== undefined) {
+            const updatedThresholds = produce(thresholds, (draft)=>{
+                if (draft.steps) {
+                    draft.steps.splice(i, 1);
+                }
+            });
+            onChange(updatedThresholds);
+        }
+    };
+    const addThresholdInput = ()=>{
+        focusRef.current = true;
+        if (thresholds === undefined) {
+            onChange({
+                steps: [
+                    {
+                        value: DEFAULT_STEP
+                    }
+                ]
+            });
+        } else {
+            onChange(produce(thresholds, (draft)=>{
+                const steps = draft.steps;
+                if (steps === null || steps === void 0 ? void 0 : steps.length) {
+                    const lastStep = steps[steps.length - 1];
+                    var _length;
+                    const color = (_length = palette[steps.length]) !== null && _length !== void 0 ? _length : getRandomColor(); // we will assign color from the palette first, then generate random color
+                    var ref;
+                    steps.push({
+                        color,
+                        value: ((ref = lastStep === null || lastStep === void 0 ? void 0 : lastStep.value) !== null && ref !== void 0 ? ref : 0) + DEFAULT_STEP
+                    }); // set new threshold value to last step value + 10
+                } else if (steps) {
+                    steps.push({
+                        value: DEFAULT_STEP
+                    });
+                }
+            }));
+        }
+    };
+    const handleModeChange = (event, value)=>{
+        const mode = value === 'Percent' ? 'Percent' : undefined;
+        if (thresholds !== undefined) {
+            onChange(produce(thresholds, (draft)=>{
+                draft.mode = mode;
+            }));
+        } else {
+            onChange({
+                mode
+            });
+        }
+    };
+    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, {})
+        }),
+        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: "%"
+                        })
+                    })
+                ]
+            }),
+            steps && steps.map((step, i)=>/*#__PURE__*/ _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,
+                    onColorChange: (color)=>handleThresholdColorChange(color, i),
+                    onChange: (e)=>{
+                        handleThresholdValueChange(e, i);
+                    },
+                    onDelete: ()=>{
+                        deleteThreshold(i);
+                    },
+                    onBlur: handleThresholdBlur
+                }, i)).reverse(),
+            !hideDefault && /*#__PURE__*/ _jsxs(Stack, {
+                flex: 1,
+                direction: "row",
+                alignItems: "center",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(ThresholdColorPicker, {
+                        label: "default",
+                        color: defaultThresholdColor,
+                        onColorChange: handleDefaultColorChange
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        children: "Default"
+                    })
+                ]
+            })
+        ]
+    });
+}
+// https://www.paulirish.com/2009/random-hex-color-code-snippets/
+const getRandomColor = ()=>{
+    return '#' + Math.floor(Math.random() * 16777216).toString(16).padStart(6, '0');
+};
+
+//# sourceMappingURL=ThresholdsEditor.js.map

package/dist/ThresholdsEditor/ThresholdsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.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, { useEffect, useRef, useState } from 'react';\nimport produce from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }: ThresholdsEditorProps) {\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n  const defaultThresholdColor = thresholds?.default_color ?? defaultColor;\n\n  const [steps, setSteps] = useState(thresholds?.steps);\n  useEffect(() => {\n    setSteps(thresholds?.steps);\n  }, [thresholds?.steps]);\n\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {\n    setSteps(\n      produce(steps, (draft) => {\n        const step = draft?.[i];\n        if (step) {\n          step.value = Number(e.target.value);\n        }\n      })\n    );\n  };\n\n  const handleThresholdColorChange = (color: string, i: number) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.default_color = color;\n        })\n      );\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = () => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          })\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        })\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'Percent' ? 'Percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        })\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n          <PlusIcon />\n        </IconButton>\n      }\n    >\n      <ToggleButtonGroup\n        exclusive\n        disabled={disablePercentMode}\n        value={thresholds?.mode ?? 'Absolute'}\n        onChange={handleModeChange}\n        sx={{ height: '36px', marginLeft: 'auto' }}\n      >\n        <ToggleButton aria-label=\"absolute\" value=\"Absolute\">\n          <InfoTooltip description=\"Absolute\">#</InfoTooltip>\n        </ToggleButton>\n        <ToggleButton aria-label=\"percent\" value=\"Percent\">\n          <InfoTooltip description=\"Percentage means thresholds relative to min & max\">%</InfoTooltip>\n        </ToggleButton>\n      </ToggleButtonGroup>\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .reverse()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <ThresholdColorPicker\n            label=\"default\"\n            color={defaultThresholdColor}\n            onColorChange={handleDefaultColorChange}\n          />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = () => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["React","useEffect","useRef","useState","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","InfoTooltip","useChartsTheme","OptionsEditorGroup","ThresholdColorPicker","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","defaultColor","palette","defaultThresholdColor","default_color","steps","setSteps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","draft","step","value","Number","target","handleThresholdColorChange","color","undefined","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","size","aria-label","onClick","exclusive","disabled","sx","height","marginLeft","description","map","inputRef","label","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"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,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAC3D,OAAOC,OAAO,MAAM,OAAO,CAAC;AAC5B,SAASC,UAAU,EAAEC,YAAY,EAAEC,iBAAiB,EAAEC,UAAU,QAAQ,eAAe,CAAC;AACxF,OAAOC,QAAQ,MAAM,sBAAsB,CAAC;AAC5C,SAASC,KAAK,QAAQ,aAAa,CAAC;AAEpC,SAASC,WAAW,QAAQ,gBAAgB,CAAC;AAC7C,SAASC,cAAc,QAAQ,gCAAgC,CAAC;AAChE,SAASC,kBAAkB,QAAQ,wBAAwB,CAAC;AAC5D,SAASC,oBAAoB,QAAQ,wBAAwB,CAAC;AAC9D,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AASlD,MAAMC,YAAY,GAAG,EAAE,AAAC;AAExB,OAAO,SAASC,gBAAgB,CAAC,EAAEC,UAAU,CAAA,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAEC,kBAAkB,CAAA,EAAyB,EAAE;IACjH,MAAM,EACJH,UAAU,EAAE,EAAEI,YAAY,CAAA,EAAEC,OAAO,CAAA,EAAE,CAAA,IACtC,GAAGX,cAAc,EAAE,AAAC;QACSM,GAAyB;IAAvD,MAAMM,qBAAqB,GAAGN,CAAAA,GAAyB,GAAzBA,UAAU,aAAVA,UAAU,WAAe,GAAzBA,KAAAA,CAAyB,GAAzBA,UAAU,CAAEO,aAAa,cAAzBP,GAAyB,cAAzBA,GAAyB,GAAII,YAAY,AAAC;IAExE,MAAM,CAACI,KAAK,EAAEC,QAAQ,CAAC,GAAGxB,QAAQ,CAACe,UAAU,aAAVA,UAAU,WAAO,GAAjBA,KAAAA,CAAiB,GAAjBA,UAAU,CAAEQ,KAAK,CAAC,AAAC;IACtDzB,SAAS,CAAC,IAAM;QACd0B,QAAQ,CAACT,UAAU,aAAVA,UAAU,WAAO,GAAjBA,KAAAA,CAAiB,GAAjBA,UAAU,CAAEQ,KAAK,CAAC,CAAC;IAC9B,CAAC,EAAE;QAACR,UAAU,aAAVA,UAAU,WAAO,GAAjBA,KAAAA,CAAiB,GAAjBA,UAAU,CAAEQ,KAAK;KAAC,CAAC,CAAC;IAExB,iFAAiF;IACjF,MAAME,qBAAqB,GAAG1B,MAAM,CAA0B,IAAI,CAAC,AAAC;IACpE,MAAM2B,QAAQ,GAAG3B,MAAM,CAAC,KAAK,CAAC,AAAC;IAC/BD,SAAS,CAAC,IAAM;YAEd2B,GAA6B;QAD7B,IAAI,CAACA,qBAAqB,CAACE,OAAO,IAAI,CAACD,QAAQ,CAACC,OAAO,EAAE,OAAO;QAChEF,CAAAA,GAA6B,GAA7BA,qBAAqB,CAACE,OAAO,cAA7BF,GAA6B,WAAO,GAApCA,KAAAA,CAAoC,GAApCA,GAA6B,CAAEG,KAAK,EAAE,CAAC;QACvCF,QAAQ,CAACC,OAAO,GAAG,KAAK,CAAC;IAC3B,CAAC,EAAE;QAACJ,KAAK,aAALA,KAAK,WAAQ,GAAbA,KAAAA,CAAa,GAAbA,KAAK,CAAEM,MAAM;KAAC,CAAC,CAAC;IAEpB,MAAMC,0BAA0B,GAAG,CAACC,CAAsC,EAAEC,CAAS,GAAK;QACxFR,QAAQ,CACNvB,OAAO,CAACsB,KAAK,EAAE,CAACU,KAAK,GAAK;YACxB,MAAMC,IAAI,GAAGD,KAAK,aAALA,KAAK,WAAK,GAAVA,KAAAA,CAAU,GAAVA,KAAK,AAAE,CAACD,CAAC,CAAC,AAAC;YACxB,IAAIE,IAAI,EAAE;gBACRA,IAAI,CAACC,KAAK,GAAGC,MAAM,CAACL,CAAC,CAACM,MAAM,CAACF,KAAK,CAAC,CAAC;YACtC,CAAC;QACH,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,AAAC;IAEF,MAAMG,0BAA0B,GAAG,CAACC,KAAa,EAAEP,CAAS,GAAK;QAC/D,IAAIjB,UAAU,KAAKyB,SAAS,EAAE;YAC5BxB,QAAQ,CACNf,OAAO,CAACc,UAAU,EAAE,CAACkB,KAAK,GAAK;gBAC7B,IAAIA,KAAK,CAACV,KAAK,KAAKiB,SAAS,EAAE;oBAC7B,MAAMN,IAAI,GAAGD,KAAK,CAACV,KAAK,CAACS,CAAC,CAAC,AAAC;oBAC5B,IAAIE,IAAI,EAAE;wBACRA,IAAI,CAACK,KAAK,GAAGA,KAAK,CAAC;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC,AAAC;IAEF,MAAME,wBAAwB,GAAG,CAACF,KAAa,GAAK;QAClD,IAAIxB,UAAU,KAAKyB,SAAS,EAAE;YAC5BxB,QAAQ,CACNf,OAAO,CAACc,UAAU,EAAE,CAACkB,KAAK,GAAK;gBAC7BA,KAAK,CAACX,aAAa,GAAGiB,KAAK,CAAC;YAC9B,CAAC,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC,AAAC;IAEF,+DAA+D;IAC/D,MAAMG,mBAAmB,GAAG,IAAM;QAChC,IAAInB,KAAK,KAAKiB,SAAS,EAAE;YACvB,MAAMG,WAAW,GAAG;mBAAIpB,KAAK;aAAC,AAAC;YAC/BoB,WAAW,CAACC,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,GAAKD,CAAC,CAACV,KAAK,GAAGW,CAAC,CAACX,KAAK,CAAC,CAAC;YAC9C,IAAIpB,UAAU,KAAKyB,SAAS,EAAE;gBAC5BxB,QAAQ,CACNf,OAAO,CAACc,UAAU,EAAE,CAACkB,KAAK,GAAK;oBAC7BA,KAAK,CAACV,KAAK,GAAGoB,WAAW,CAAC;gBAC5B,CAAC,CAAC,CACH,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC,AAAC;IAEF,MAAMI,eAAe,GAAG,CAACf,CAAS,GAAW;QAC3C,IAAIjB,UAAU,KAAKyB,SAAS,EAAE;YAC5B,MAAMQ,iBAAiB,GAAG/C,OAAO,CAACc,UAAU,EAAE,CAACkB,KAAK,GAAK;gBACvD,IAAIA,KAAK,CAACV,KAAK,EAAE;oBACfU,KAAK,CAACV,KAAK,CAAC0B,MAAM,CAACjB,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC3B,CAAC;YACH,CAAC,CAAC,AAAC;YACHhB,QAAQ,CAACgC,iBAAiB,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,AAAC;IAEF,MAAME,iBAAiB,GAAG,IAAY;QACpCxB,QAAQ,CAACC,OAAO,GAAG,IAAI,CAAC;QACxB,IAAIZ,UAAU,KAAKyB,SAAS,EAAE;YAC5BxB,QAAQ,CAAC;gBACPO,KAAK,EAAE;oBAAC;wBAAEY,KAAK,EAAEtB,YAAY;qBAAE;iBAAC;aACjC,CAAC,CAAC;QACL,OAAO;YACLG,QAAQ,CACNf,OAAO,CAACc,UAAU,EAAE,CAACkB,KAAK,GAAK;gBAC7B,MAAMV,KAAK,GAAGU,KAAK,CAACV,KAAK,AAAC;gBAC1B,IAAIA,KAAK,aAALA,KAAK,WAAQ,GAAbA,KAAAA,CAAa,GAAbA,KAAK,CAAEM,MAAM,EAAE;oBACjB,MAAMsB,QAAQ,GAAG5B,KAAK,CAACA,KAAK,CAACM,MAAM,GAAG,CAAC,CAAC,AAAC;wBAC3BT,OAAqB;oBAAnC,MAAMmB,KAAK,GAAGnB,CAAAA,OAAqB,GAArBA,OAAO,CAACG,KAAK,CAACM,MAAM,CAAC,cAArBT,OAAqB,cAArBA,OAAqB,GAAIgC,cAAc,EAAE,AAAC,EAAC,0EAA0E;wBACvGD,GAAe;oBAA3C5B,KAAK,CAAC8B,IAAI,CAAC;wBAAEd,KAAK;wBAAEJ,KAAK,EAAE,AAACgB,CAAAA,CAAAA,GAAe,GAAfA,QAAQ,aAARA,QAAQ,WAAO,GAAfA,KAAAA,CAAe,GAAfA,QAAQ,CAAEhB,KAAK,cAAfgB,GAAe,cAAfA,GAAe,GAAI,CAAC,CAAA,GAAItC,YAAY;qBAAE,CAAC,CAAC,CAAC,kDAAkD;gBACzH,OAAO,IAAIU,KAAK,EAAE;oBAChBA,KAAK,CAAC8B,IAAI,CAAC;wBAAElB,KAAK,EAAEtB,YAAY;qBAAE,CAAC,CAAC;gBACtC,CAAC;YACH,CAAC,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC,AAAC;IAEF,MAAMyC,gBAAgB,GAAG,CAACC,KAAuB,EAAEpB,KAAa,GAAW;QACzE,MAAMqB,IAAI,GAAGrB,KAAK,KAAK,SAAS,GAAG,SAAS,GAAGK,SAAS,AAAC;QACzD,IAAIzB,UAAU,KAAKyB,SAAS,EAAE;YAC5BxB,QAAQ,CACNf,OAAO,CAACc,UAAU,EAAE,CAACkB,KAAK,GAAK;gBAC7BA,KAAK,CAACuB,IAAI,GAAGA,IAAI,CAAC;YACpB,CAAC,CAAC,CACH,CAAC;QACJ,OAAO;YACLxC,QAAQ,CAAC;gBAAEwC,IAAI;aAAE,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,AAAC;QAcWzC,IAAgB,EAkBVmB,MAAU,EAAVA,IAAwB;IA9B3C,qBACE,MAACxB,kBAAkB;QACjB+C,KAAK,EAAC,YAAY;QAClBC,IAAI,gBACF,KAACxD,UAAU;YAACyD,IAAI,EAAC,OAAO;YAACC,YAAU,EAAC,eAAe;YAACC,OAAO,EAAEX,iBAAiB;sBAC5E,cAAA,KAAC5C,QAAQ,KAAG;UACD;;0BAGf,MAACF,iBAAiB;gBAChB0D,SAAS;gBACTC,QAAQ,EAAE7C,kBAAkB;gBAC5BiB,KAAK,EAAEpB,CAAAA,IAAgB,GAAhBA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAEyC,IAAI,cAAhBzC,IAAgB,cAAhBA,IAAgB,GAAI,UAAU;gBACrCC,QAAQ,EAAEsC,gBAAgB;gBAC1BU,EAAE,EAAE;oBAAEC,MAAM,EAAE,MAAM;oBAAEC,UAAU,EAAE,MAAM;iBAAE;;kCAE1C,KAAC/D,YAAY;wBAACyD,YAAU,EAAC,UAAU;wBAACzB,KAAK,EAAC,UAAU;kCAClD,cAAA,KAAC3B,WAAW;4BAAC2D,WAAW,EAAC,UAAU;sCAAC,GAAC;0BAAc;sBACtC;kCACf,KAAChE,YAAY;wBAACyD,YAAU,EAAC,SAAS;wBAACzB,KAAK,EAAC,SAAS;kCAChD,cAAA,KAAC3B,WAAW;4BAAC2D,WAAW,EAAC,mDAAmD;sCAAC,GAAC;0BAAc;sBAC/E;;cACG;YACnB5C,KAAK,IACJA,KAAK,CACF6C,GAAG,CAAC,CAAClC,IAAI,EAAEF,CAAC,iBACX,KAACpB,cAAc;oBACbyD,QAAQ,EAAErC,CAAC,KAAKT,KAAK,CAACM,MAAM,GAAG,CAAC,GAAGJ,qBAAqB,GAAGe,SAAS;oBAEpE8B,KAAK,EAAE,CAAC,CAAC,EAAEtC,CAAC,GAAG,CAAC,CAAC,CAAC;oBAClBO,KAAK,EAAEL,CAAAA,IAAwB,GAAxBA,CAAAA,MAAU,GAAVA,IAAI,CAACK,KAAK,cAAVL,MAAU,cAAVA,MAAU,GAAId,OAAO,CAACY,CAAC,CAAC,cAAxBE,IAAwB,cAAxBA,IAAwB,GAAIb,qBAAqB;oBACxDc,KAAK,EAAED,IAAI,CAACC,KAAK;oBACjBoC,aAAa,EAAE,CAAChC,KAAK,GAAKD,0BAA0B,CAACC,KAAK,EAAEP,CAAC,CAAC;oBAC9DhB,QAAQ,EAAE,CAACe,CAAC,GAAK;wBACfD,0BAA0B,CAACC,CAAC,EAAEC,CAAC,CAAC,CAAC;oBACnC,CAAC;oBACDwC,QAAQ,EAAE,IAAM;wBACdzB,eAAe,CAACf,CAAC,CAAC,CAAC;oBACrB,CAAC;oBACDyC,MAAM,EAAE/B,mBAAmB;mBAXtBV,CAAC,CAYN,AACH,CAAC,CACD0C,OAAO,EAAE;YACb,CAACzD,WAAW,kBACX,MAACV,KAAK;gBAACoE,IAAI,EAAE,CAAC;gBAAEC,SAAS,EAAC,KAAK;gBAACC,UAAU,EAAC,QAAQ;gBAACC,OAAO,EAAE,CAAC;;kCAC5D,KAACnE,oBAAoB;wBACnB2D,KAAK,EAAC,SAAS;wBACf/B,KAAK,EAAElB,qBAAqB;wBAC5BkD,aAAa,EAAE9B,wBAAwB;sBACvC;kCACF,KAACpC,UAAU;kCAAC,SAAO;sBAAa;;cAC1B,AACT;;MACkB,CACrB;AACJ,CAAC;AAED,iEAAiE;AACjE,MAAM+C,cAAc,GAAG,IAAM;IAC3B,OACE,GAAG,GACH2B,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,QAAQ,CAAC,CACjCC,QAAQ,CAAC,EAAE,CAAC,CACZC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CACnB;AACJ,CAAC,AAAC"}

package/dist/ThresholdsEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ThresholdsEditor';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC"}

package/dist/ThresholdsEditor/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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.
+export * from './ThresholdsEditor';
+
+//# sourceMappingURL=index.js.map

package/dist/ThresholdsEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ThresholdsEditor/index.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\nexport * from './ThresholdsEditor';\n"],"names":[],"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,cAAc,oBAAoB,CAAC"}

package/dist/TimeSeriesTooltip/focused-series.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focused-series.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,UAAU,EAA0C,MAAM,iBAAiB,CAAC;AAErF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;AAErD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,WAAW,GACjB,kBAAkB,CA4CpB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC/B,KAAK,CAAC,EAAE,eAAe,EACvB,IAAI,CAAC,EAAE,WAAW,sBA2CnB"}
+{"version":3,"file":"focused-series.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,UAAU,EAA0C,MAAM,iBAAiB,CAAC;AAErF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;AAErD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,WAAW,GACjB,kBAAkB,CA6CpB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC/B,KAAK,CAAC,EAAE,eAAe,EACvB,IAAI,CAAC,EAAE,WAAW,sBA2CnB"}

package/dist/TimeSeriesTooltip/focused-series.js

@@ -36,9 +36,9 @@ import { TOOLTIP_DATE_FORMAT, TOOLTIP_MAX_ITEMS } from './tooltip-model';
                     for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
                         var _datumIdx;
                         const xValue = (_datumIdx = data.xAxis[datumIdx]) !== null && _datumIdx !== void 0 ? _datumIdx : 0;
-                        var _datumIdx1;
-                        const yValue = (_datumIdx1 = currentSeries.data[datumIdx]) !== null && _datumIdx1 !== void 0 ? _datumIdx1 : 0;
-                        if (focusedX === datumIdx) {
+                        const yValue = currentSeries.data[datumIdx];
+                        // ensure null values not displayed in tooltip
+                        if (yValue !== undefined && yValue !== null && focusedX === datumIdx) {
                             if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {
                                 // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
                                 const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;