@perses-dev/components 0.18.0 → 0.20.0

package/dist/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBhH,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,GACd,EAAE,cAAc,eAmJhB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBhH,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,GACd,EAAE,cAAc,eAkJhB"}

package/dist/LineChart/LineChart.js

@@ -12,14 +12,12 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from 'react';
-import { useDeepMemo } from '@perses-dev/core';
 import { Box } from '@mui/material';
 import { use } from 'echarts/core';
 import { LineChart as EChartsLineChart } from 'echarts/charts';
 import { GridComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent, VisualMapComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
-import { PROGRESSIVE_MODE_SERIES_LIMIT } from '../model/graph';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from './utils';
@@ -105,10 +103,9 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , visua
         setShowTooltip(false);
         setPinTooltip(false);
     };
-    const option = useDeepMemo(()=>{
+    const option = useMemo(()=>{
         if (data.timeSeries === undefined) return {};
         if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;
-        const showPointsOnHover = data.timeSeries.length < PROGRESSIVE_MODE_SERIES_LIMIT;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : getDateRange(data.xAxis);
         const option = {
@@ -126,11 +123,12 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , visua
             yAxis: getYAxes(yAxis, unit),
             animation: false,
             tooltip: {
-                show: showPointsOnHover,
+                show: true,
                 trigger: 'axis',
                 showContent: false,
                 axisPointer: {
-                    type: 'none'
+                    type: 'line',
+                    z: 0
                 }
             },
             toolbox: {

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2022 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 { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { useDeepMemo } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  VisualMapComponentOption,\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  VisualMapComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { PROGRESSIVE_MODE_SERIES_LIMIT, EChartsDataFormat } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { Tooltip } from '../Tooltip/Tooltip';\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  VisualMapComponent,\n  CanvasRenderer,\n]);\n\ninterface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  visualMap?: VisualMapComponentOption[];\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  visualMap,\n  onDataZoom,\n  onDoubleClick,\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\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 handleOnClick = () => setPinTooltip((current) => !current);\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 handleOnMouseDown = (e: MouseEvent) => {\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\n  const handleOnMouseUp = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseEnter = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseLeave = () => {\n    setShowTooltip(false);\n    setPinTooltip(false);\n  };\n\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;\n\n    const showPointsOnHover = data.timeSeries.length < PROGRESSIVE_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);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: showPointsOnHover,\n        trigger: 'axis',\n        showContent: false,\n        axisPointer: {\n          type: 'none',\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      visualMap,\n    };\n\n    return option;\n  }, [data, yAxis, grid, legend, visualMap]);\n\n  return (\n    <Box\n      sx={{\n        height,\n      }}\n      onClick={handleOnClick}\n      onDoubleClick={handleOnDoubleClick}\n      onMouseDown={handleOnMouseDown}\n      onMouseUp={handleOnMouseUp}\n      onMouseLeave={handleOnMouseLeave}\n      onMouseEnter={handleOnMouseEnter}\n    >\n      {showTooltip === true && (\n        <Tooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip} unit={unit}></Tooltip>\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":["useMemo","useRef","useState","useDeepMemo","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","VisualMapComponent","CanvasRenderer","EChart","PROGRESSIVE_MODE_SERIES_LIMIT","useChartsTheme","Tooltip","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","visualMap","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnClick","handleOnDoubleClick","e","handleOnMouseDown","target","HTMLCanvasElement","handleOnMouseUp","handleOnMouseEnter","handleOnMouseLeave","option","timeSeries","noDataOption","showPointsOnHover","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2022 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 { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  VisualMapComponentOption,\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  VisualMapComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { Tooltip } from '../Tooltip/Tooltip';\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  VisualMapComponent,\n  CanvasRenderer,\n]);\n\ninterface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  visualMap?: VisualMapComponentOption[];\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  visualMap,\n  onDataZoom,\n  onDoubleClick,\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\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 handleOnClick = () => setPinTooltip((current) => !current);\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 handleOnMouseDown = (e: MouseEvent) => {\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\n  const handleOnMouseUp = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseEnter = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseLeave = () => {\n    setShowTooltip(false);\n    setPinTooltip(false);\n  };\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: '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      visualMap,\n    };\n\n    return option;\n  }, [data, yAxis, grid, legend, visualMap]);\n\n  return (\n    <Box\n      sx={{\n        height,\n      }}\n      onClick={handleOnClick}\n      onDoubleClick={handleOnDoubleClick}\n      onMouseDown={handleOnMouseDown}\n      onMouseUp={handleOnMouseUp}\n      onMouseLeave={handleOnMouseLeave}\n      onMouseEnter={handleOnMouseEnter}\n    >\n      {showTooltip === true && (\n        <Tooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip} unit={unit}></Tooltip>\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":["useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","VisualMapComponent","CanvasRenderer","EChart","useChartsTheme","Tooltip","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","visualMap","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnClick","handleOnDoubleClick","e","handleOnMouseDown","target","HTMLCanvasElement","handleOnMouseUp","handleOnMouseEnter","handleOnMouseLeave","option","timeSeries","noDataOption","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/StatChart/StatChart.test.js

@@ -11,19 +11,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ChartsThemeProvider } from '../context/ChartsThemeProvider';
 import { testChartsTheme } from '../test-utils';
 import { StatChart } from './StatChart';
 describe('StatChart', ()=>{
-    const contentDimensions = {
-        width: 200,
-        height: 200
-    };
-    const unit = {
-        kind: 'Decimal',
-        decimal_places: 2
+    const renderChart = (unit)=>{
+        const contentDimensions = {
+            width: 200,
+            height: 200
+        };
+        render(/*#__PURE__*/ _jsx(ChartsThemeProvider, {
+            chartsTheme: testChartsTheme,
+            children: /*#__PURE__*/ _jsx(StatChart, {
+                width: contentDimensions.width,
+                height: contentDimensions.height,
+                data: mockStatData,
+                unit: unit
+            })
+        }));
     };
     const mockStatData = {
         calculatedValue: 7.72931659687181,
@@ -54,19 +60,27 @@ describe('StatChart', ()=>{
             ]
         }
     };
-    describe('Render default options (no sparkline)', ()=>{
-        it('should render', ()=>{
-            render(/*#__PURE__*/ _jsx(ChartsThemeProvider, {
-                chartsTheme: testChartsTheme,
-                children: /*#__PURE__*/ _jsx(StatChart, {
-                    width: contentDimensions.width,
-                    height: contentDimensions.height,
-                    data: mockStatData,
-                    unit: unit
-                })
-            }));
-            expect(screen.getByText('7.73')).toBeInTheDocument();
-        });
+    it('render default options (no sparkline)', ()=>{
+        const unit = {
+            kind: 'Decimal',
+            decimal_places: 2
+        };
+        renderChart(unit);
+        expect(screen.getByText('7.73')).toBeInTheDocument();
+    });
+    it('show value with time unit formatting', ()=>{
+        const unit = {
+            kind: 'Seconds'
+        };
+        renderChart(unit);
+        expect(screen.getByText('7.73 seconds')).toBeInTheDocument();
+    });
+    it('show value with time unit formatting', ()=>{
+        const unit = {
+            kind: 'Months'
+        };
+        renderChart(unit);
+        expect(screen.getByText('7.73 months')).toBeInTheDocument();
     });
 });
 

package/dist/StatChart/StatChart.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.test.tsx"],"sourcesContent":["// Copyright 2022 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 { render, screen } from '@testing-library/react';\nimport { ChartsThemeProvider } from '../context/ChartsThemeProvider';\nimport { UnitOptions } from '../model';\nimport { testChartsTheme } from '../test-utils';\nimport { StatChart, StatChartData } from './StatChart';\n\ndescribe('StatChart', () => {\n  const contentDimensions = {\n    width: 200,\n    height: 200,\n  };\n\n  const unit: UnitOptions = {\n    kind: 'Decimal',\n    decimal_places: 2,\n  };\n\n  const mockStatData: StatChartData = {\n    calculatedValue: 7.72931659687181,\n    name: 'Example Stat Chart',\n    seriesData: {\n      name: '(((count(count(node_cpu_seconds_total{job=\"example\"}) by (cpu))',\n      values: [\n        [1654006170000, 7.736401673473903],\n        [1654006185000, 7.733891213538757],\n        [1654006200000, 7.731101813010433],\n        [1654006215000, 7.722454672079215],\n        [1654006230000, 7.722733612256738],\n      ],\n    },\n  };\n\n  describe('Render default options (no sparkline)', () => {\n    it('should render', () => {\n      render(\n        <ChartsThemeProvider chartsTheme={testChartsTheme}>\n          <StatChart\n            width={contentDimensions.width}\n            height={contentDimensions.height}\n            data={mockStatData}\n            unit={unit}\n          />\n        </ChartsThemeProvider>\n      );\n      expect(screen.getByText('7.73')).toBeInTheDocument();\n    });\n  });\n});\n"],"names":["React","render","screen","ChartsThemeProvider","testChartsTheme","StatChart","describe","contentDimensions","width","height","unit","kind","decimal_places","mockStatData","calculatedValue","name","seriesData","values","it","chartsTheme","data","expect","getByText","toBeInTheDocument"],"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,MAAM,QAAQ,wBAAwB,CAAC;AACxD,SAASC,mBAAmB,QAAQ,gCAAgC,CAAC;AAErE,SAASC,eAAe,QAAQ,eAAe,CAAC;AAChD,SAASC,SAAS,QAAuB,aAAa,CAAC;AAEvDC,QAAQ,CAAC,WAAW,EAAE,IAAM;IAC1B,MAAMC,iBAAiB,GAAG;QACxBC,KAAK,EAAE,GAAG;QACVC,MAAM,EAAE,GAAG;KACZ,AAAC;IAEF,MAAMC,IAAI,GAAgB;QACxBC,IAAI,EAAE,SAAS;QACfC,cAAc,EAAE,CAAC;KAClB,AAAC;IAEF,MAAMC,YAAY,GAAkB;QAClCC,eAAe,EAAE,gBAAgB;QACjCC,IAAI,EAAE,oBAAoB;QAC1BC,UAAU,EAAE;YACVD,IAAI,EAAE,iEAAiE;YACvEE,MAAM,EAAE;gBACN;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;aACnC;SACF;KACF,AAAC;IAEFX,QAAQ,CAAC,uCAAuC,EAAE,IAAM;QACtDY,EAAE,CAAC,eAAe,EAAE,IAAM;YACxBjB,MAAM,eACJ,KAACE,mBAAmB;gBAACgB,WAAW,EAAEf,eAAe;0BAC/C,cAAA,KAACC,SAAS;oBACRG,KAAK,EAAED,iBAAiB,CAACC,KAAK;oBAC9BC,MAAM,EAAEF,iBAAiB,CAACE,MAAM;oBAChCW,IAAI,EAAEP,YAAY;oBAClBH,IAAI,EAAEA,IAAI;kBACV;cACkB,CACvB,CAAC;YACFW,MAAM,CAACnB,MAAM,CAACoB,SAAS,CAAC,MAAM,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/StatChart/StatChart.test.tsx"],"sourcesContent":["// Copyright 2022 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 { render, screen } from '@testing-library/react';\nimport { ChartsThemeProvider } from '../context/ChartsThemeProvider';\nimport { UnitOptions } from '../model';\nimport { testChartsTheme } from '../test-utils';\nimport { StatChart, StatChartData } from './StatChart';\n\ndescribe('StatChart', () => {\n  const renderChart = (unit: UnitOptions) => {\n    const contentDimensions = {\n      width: 200,\n      height: 200,\n    };\n    render(\n      <ChartsThemeProvider chartsTheme={testChartsTheme}>\n        <StatChart width={contentDimensions.width} height={contentDimensions.height} data={mockStatData} unit={unit} />\n      </ChartsThemeProvider>\n    );\n  };\n\n  const mockStatData: StatChartData = {\n    calculatedValue: 7.72931659687181,\n    name: 'Example Stat Chart',\n    seriesData: {\n      name: '(((count(count(node_cpu_seconds_total{job=\"example\"}) by (cpu))',\n      values: [\n        [1654006170000, 7.736401673473903],\n        [1654006185000, 7.733891213538757],\n        [1654006200000, 7.731101813010433],\n        [1654006215000, 7.722454672079215],\n        [1654006230000, 7.722733612256738],\n      ],\n    },\n  };\n\n  it('render default options (no sparkline)', () => {\n    const unit: UnitOptions = {\n      kind: 'Decimal',\n      decimal_places: 2,\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73')).toBeInTheDocument();\n  });\n\n  it('show value with time unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Seconds',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 seconds')).toBeInTheDocument();\n  });\n\n  it('show value with time unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Months',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 months')).toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","ChartsThemeProvider","testChartsTheme","StatChart","describe","renderChart","unit","contentDimensions","width","height","chartsTheme","data","mockStatData","calculatedValue","name","seriesData","values","it","kind","decimal_places","expect","getByText","toBeInTheDocument"],"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,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,SAASC,mBAAmB,QAAQ,gCAAgC,CAAC;AAErE,SAASC,eAAe,QAAQ,eAAe,CAAC;AAChD,SAASC,SAAS,QAAuB,aAAa,CAAC;AAEvDC,QAAQ,CAAC,WAAW,EAAE,IAAM;IAC1B,MAAMC,WAAW,GAAG,CAACC,IAAiB,GAAK;QACzC,MAAMC,iBAAiB,GAAG;YACxBC,KAAK,EAAE,GAAG;YACVC,MAAM,EAAE,GAAG;SACZ,AAAC;QACFV,MAAM,eACJ,KAACE,mBAAmB;YAACS,WAAW,EAAER,eAAe;sBAC/C,cAAA,KAACC,SAAS;gBAACK,KAAK,EAAED,iBAAiB,CAACC,KAAK;gBAAEC,MAAM,EAAEF,iBAAiB,CAACE,MAAM;gBAAEE,IAAI,EAAEC,YAAY;gBAAEN,IAAI,EAAEA,IAAI;cAAI;UAC3F,CACvB,CAAC;IACJ,CAAC,AAAC;IAEF,MAAMM,YAAY,GAAkB;QAClCC,eAAe,EAAE,gBAAgB;QACjCC,IAAI,EAAE,oBAAoB;QAC1BC,UAAU,EAAE;YACVD,IAAI,EAAE,iEAAiE;YACvEE,MAAM,EAAE;gBACN;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;aACnC;SACF;KACF,AAAC;IAEFC,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,SAAS;YACfC,cAAc,EAAE,CAAC;SAClB,AAAC;QACFd,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,MAAM,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IACvD,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,sCAAsC,EAAE,IAAM;QAC/C,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,SAAS;SAChB,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,cAAc,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,sCAAsC,EAAE,IAAM;QAC/C,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,QAAQ;SACf,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,aAAa,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/UnitSelector/UnitSelector.test.js

@@ -140,12 +140,6 @@ describe('UnitSelector', ()=>{
         });
     });
     describe('with a time unit selected', ()=>{
-        it('does not allow the user to modify the decimal places', ()=>{
-            renderUnitSelector({
-                kind: 'Hours'
-            });
-            expect(getDecimalSelector()).toBeDisabled();
-        });
         it('does not allow the user to set abbreviate', ()=>{
             renderUnitSelector({
                 kind: 'Minutes'

package/dist/UnitSelector/UnitSelector.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/UnitSelector/UnitSelector.test.tsx"],"sourcesContent":["// Copyright 2022 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 { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { UnitOptions } from '../model';\nimport { UnitSelector } from './UnitSelector';\n\ndescribe('UnitSelector', () => {\n  const renderUnitSelector = (value: UnitOptions, onChange = jest.fn()) => {\n    render(\n      <div>\n        <UnitSelector value={value} onChange={onChange} />\n      </div>\n    );\n  };\n\n  const getUnitSelector = () => {\n    return screen.getByRole('combobox', { name: 'Units' });\n  };\n\n  const getDecimalSelector = () => {\n    return screen.getByRole('combobox', { name: 'Decimal' });\n  };\n\n  const getAbbreviateSwitch = () => {\n    return screen.getByRole('checkbox', { name: 'Abbreviate' });\n  };\n\n  it('can change the unit kind by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Minutes' }, onChange);\n\n    const unitSelector = getUnitSelector();\n    userEvent.click(unitSelector);\n    const decimalOption = screen.getByRole('option', {\n      name: 'Decimal',\n    });\n    userEvent.click(decimalOption);\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n    });\n  });\n\n  it('can change the unit kind using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Bytes' }, onChange);\n\n    const unitSelector = getUnitSelector();\n    // Note that this tab order can change depending on the type because the\n    // abbreviate comes first and is disabled in some cases.\n    userEvent.tab();\n    expect(unitSelector).toHaveFocus();\n\n    userEvent.clear(unitSelector);\n    userEvent.keyboard('years');\n    screen.getByRole('option', {\n      name: 'Years',\n    });\n\n    userEvent.keyboard('{arrowup}{enter}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Years',\n    });\n  });\n\n  it('can change the decimal places by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 0, abbreviate: true }, onChange);\n\n    userEvent.click(getDecimalSelector());\n    const decimalOption = screen.getByRole('option', {\n      name: '1',\n    });\n    userEvent.click(decimalOption);\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 1,\n      abbreviate: true,\n    });\n  });\n\n  it('can change the decimal places using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Percent' }, onChange);\n\n    const decimalSelector = getDecimalSelector();\n    userEvent.tab();\n    userEvent.tab();\n    expect(decimalSelector).toHaveFocus();\n\n    userEvent.clear(decimalSelector);\n    userEvent.keyboard('3');\n    screen.getByRole('option', {\n      name: '3',\n    });\n\n    userEvent.keyboard('{arrowup}{enter}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Percent',\n      decimal_places: 3,\n    });\n  });\n\n  it('can change abbreviate by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 3, abbreviate: true }, onChange);\n\n    userEvent.click(getAbbreviateSwitch());\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 3,\n      abbreviate: false,\n    });\n  });\n\n  it('can change abbreviate using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 0 }, onChange);\n\n    userEvent.tab();\n    userEvent.keyboard('{space}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 0,\n      abbreviate: true,\n    });\n  });\n\n  describe('with a time unit selected', () => {\n    it('does not allow the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Hours' });\n      expect(getDecimalSelector()).toBeDisabled();\n    });\n\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Minutes' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  describe('with a percent unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Percent' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'PercentDecimal' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  describe('with a decimal unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Decimal' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('allows the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Decimal' });\n      expect(getAbbreviateSwitch()).toBeEnabled();\n    });\n  });\n\n  describe('with a bytes unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Bytes' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Bytes' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  it('should not show an option for disabled units', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal' }, onChange);\n\n    userEvent.click(getUnitSelector());\n    const percentShorthandOption = screen.queryByRole('option', {\n      name: '%',\n    });\n    expect(percentShorthandOption).not.toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","userEvent","UnitSelector","describe","renderUnitSelector","value","onChange","jest","fn","div","getUnitSelector","getByRole","name","getDecimalSelector","getAbbreviateSwitch","it","kind","unitSelector","click","decimalOption","expect","toHaveBeenCalledWith","tab","toHaveFocus","clear","keyboard","decimal_places","abbreviate","decimalSelector","toBeDisabled","toBeEnabled","percentShorthandOption","queryByRole","not","toBeInTheDocument"],"mappings":"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"}
+{"version":3,"sources":["../../src/UnitSelector/UnitSelector.test.tsx"],"sourcesContent":["// Copyright 2022 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 { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { UnitOptions } from '../model';\nimport { UnitSelector } from './UnitSelector';\n\ndescribe('UnitSelector', () => {\n  const renderUnitSelector = (value: UnitOptions, onChange = jest.fn()) => {\n    render(\n      <div>\n        <UnitSelector value={value} onChange={onChange} />\n      </div>\n    );\n  };\n\n  const getUnitSelector = () => {\n    return screen.getByRole('combobox', { name: 'Units' });\n  };\n\n  const getDecimalSelector = () => {\n    return screen.getByRole('combobox', { name: 'Decimal' });\n  };\n\n  const getAbbreviateSwitch = () => {\n    return screen.getByRole('checkbox', { name: 'Abbreviate' });\n  };\n\n  it('can change the unit kind by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Minutes' }, onChange);\n\n    const unitSelector = getUnitSelector();\n    userEvent.click(unitSelector);\n    const decimalOption = screen.getByRole('option', {\n      name: 'Decimal',\n    });\n    userEvent.click(decimalOption);\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n    });\n  });\n\n  it('can change the unit kind using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Bytes' }, onChange);\n\n    const unitSelector = getUnitSelector();\n    // Note that this tab order can change depending on the type because the\n    // abbreviate comes first and is disabled in some cases.\n    userEvent.tab();\n    expect(unitSelector).toHaveFocus();\n\n    userEvent.clear(unitSelector);\n    userEvent.keyboard('years');\n    screen.getByRole('option', {\n      name: 'Years',\n    });\n\n    userEvent.keyboard('{arrowup}{enter}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Years',\n    });\n  });\n\n  it('can change the decimal places by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 0, abbreviate: true }, onChange);\n\n    userEvent.click(getDecimalSelector());\n    const decimalOption = screen.getByRole('option', {\n      name: '1',\n    });\n    userEvent.click(decimalOption);\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 1,\n      abbreviate: true,\n    });\n  });\n\n  it('can change the decimal places using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Percent' }, onChange);\n\n    const decimalSelector = getDecimalSelector();\n    userEvent.tab();\n    userEvent.tab();\n    expect(decimalSelector).toHaveFocus();\n\n    userEvent.clear(decimalSelector);\n    userEvent.keyboard('3');\n    screen.getByRole('option', {\n      name: '3',\n    });\n\n    userEvent.keyboard('{arrowup}{enter}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Percent',\n      decimal_places: 3,\n    });\n  });\n\n  it('can change abbreviate by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 3, abbreviate: true }, onChange);\n\n    userEvent.click(getAbbreviateSwitch());\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 3,\n      abbreviate: false,\n    });\n  });\n\n  it('can change abbreviate using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 0 }, onChange);\n\n    userEvent.tab();\n    userEvent.keyboard('{space}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 0,\n      abbreviate: true,\n    });\n  });\n\n  describe('with a time unit selected', () => {\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Minutes' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  describe('with a percent unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Percent' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'PercentDecimal' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  describe('with a decimal unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Decimal' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('allows the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Decimal' });\n      expect(getAbbreviateSwitch()).toBeEnabled();\n    });\n  });\n\n  describe('with a bytes unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Bytes' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Bytes' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  it('should not show an option for disabled units', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal' }, onChange);\n\n    userEvent.click(getUnitSelector());\n    const percentShorthandOption = screen.queryByRole('option', {\n      name: '%',\n    });\n    expect(percentShorthandOption).not.toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","userEvent","UnitSelector","describe","renderUnitSelector","value","onChange","jest","fn","div","getUnitSelector","getByRole","name","getDecimalSelector","getAbbreviateSwitch","it","kind","unitSelector","click","decimalOption","expect","toHaveBeenCalledWith","tab","toHaveFocus","clear","keyboard","decimal_places","abbreviate","decimalSelector","toBeDisabled","toBeEnabled","percentShorthandOption","queryByRole","not","toBeInTheDocument"],"mappings":"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"}

package/dist/cjs/LineChart/LineChart.js

@@ -20,18 +20,16 @@ Object.defineProperty(exports, "LineChart", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
-const _core = require("@perses-dev/core");
 const _material = require("@mui/material");
-const _core1 = require("echarts/core");
+const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
-const _graph = require("../model/graph");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _tooltip = require("../Tooltip/Tooltip");
 const _utils = require("./utils");
-(0, _core1.use)([
+(0, _core.use)([
     _charts.LineChart,
     _components.GridComponent,
     _components.DataZoomComponent,
@@ -113,10 +111,9 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
         setShowTooltip(false);
         setPinTooltip(false);
     };
-    const option = (0, _core.useDeepMemo)(()=>{
+    const option = (0, _react.useMemo)(()=>{
         if (data.timeSeries === undefined) return {};
         if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;
-        const showPointsOnHover = data.timeSeries.length < _graph.PROGRESSIVE_MODE_SERIES_LIMIT;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
         const option = {
@@ -134,11 +131,12 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
             yAxis: (0, _utils.getYAxes)(yAxis, unit),
             animation: false,
             tooltip: {
-                show: showPointsOnHover,
+                show: true,
                 trigger: 'axis',
                 showContent: false,
                 axisPointer: {
-                    type: 'none'
+                    type: 'line',
+                    z: 0
                 }
             },
             toolbox: {

package/dist/cjs/StatChart/StatChart.test.js

@@ -15,24 +15,25 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
-const _react1 = require("@testing-library/react");
+const _react = require("@testing-library/react");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _testUtils = require("../test-utils");
 const _statChart = require("./StatChart");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 describe('StatChart', ()=>{
-    const contentDimensions = {
-        width: 200,
-        height: 200
-    };
-    const unit = {
-        kind: 'Decimal',
-        decimal_places: 2
+    const renderChart = (unit)=>{
+        const contentDimensions = {
+            width: 200,
+            height: 200
+        };
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartsThemeProvider.ChartsThemeProvider, {
+            chartsTheme: _testUtils.testChartsTheme,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_statChart.StatChart, {
+                width: contentDimensions.width,
+                height: contentDimensions.height,
+                data: mockStatData,
+                unit: unit
+            })
+        }));
     };
     const mockStatData = {
         calculatedValue: 7.72931659687181,
@@ -63,18 +64,26 @@ describe('StatChart', ()=>{
             ]
         }
     };
-    describe('Render default options (no sparkline)', ()=>{
-        it('should render', ()=>{
-            (0, _react1.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartsThemeProvider.ChartsThemeProvider, {
-                chartsTheme: _testUtils.testChartsTheme,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_statChart.StatChart, {
-                    width: contentDimensions.width,
-                    height: contentDimensions.height,
-                    data: mockStatData,
-                    unit: unit
-                })
-            }));
-            expect(_react1.screen.getByText('7.73')).toBeInTheDocument();
-        });
+    it('render default options (no sparkline)', ()=>{
+        const unit = {
+            kind: 'Decimal',
+            decimal_places: 2
+        };
+        renderChart(unit);
+        expect(_react.screen.getByText('7.73')).toBeInTheDocument();
+    });
+    it('show value with time unit formatting', ()=>{
+        const unit = {
+            kind: 'Seconds'
+        };
+        renderChart(unit);
+        expect(_react.screen.getByText('7.73 seconds')).toBeInTheDocument();
+    });
+    it('show value with time unit formatting', ()=>{
+        const unit = {
+            kind: 'Months'
+        };
+        renderChart(unit);
+        expect(_react.screen.getByText('7.73 months')).toBeInTheDocument();
     });
 });

package/dist/cjs/UnitSelector/UnitSelector.test.js

@@ -149,12 +149,6 @@ describe('UnitSelector', ()=>{
         });
     });
     describe('with a time unit selected', ()=>{
-        it('does not allow the user to modify the decimal places', ()=>{
-            renderUnitSelector({
-                kind: 'Hours'
-            });
-            expect(getDecimalSelector()).toBeDisabled();
-        });
         it('does not allow the user to set abbreviate', ()=>{
             renderUnitSelector({
                 kind: 'Minutes'

package/dist/cjs/model/graph.js

@@ -14,8 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "PROGRESSIVE_MODE_SERIES_LIMIT", {
+Object.defineProperty(exports, "OPTIMIZED_MODE_SERIES_LIMIT", {
     enumerable: true,
-    get: ()=>PROGRESSIVE_MODE_SERIES_LIMIT
+    get: ()=>OPTIMIZED_MODE_SERIES_LIMIT
 });
-const PROGRESSIVE_MODE_SERIES_LIMIT = 500;
+const OPTIMIZED_MODE_SERIES_LIMIT = 1000;

package/dist/cjs/model/units/time.js

@@ -21,11 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    TimeIntlDuration: ()=>TimeIntlDuration,
     TIME_GROUP_CONFIG: ()=>TIME_GROUP_CONFIG,
     TIME_UNIT_CONFIG: ()=>TIME_UNIT_CONFIG,
     formatTime: ()=>formatTime
 });
-const _dateFns = require("date-fns");
+const _constants = require("./constants");
 const timeUnitKinds = [
     'Milliseconds',
     'Seconds',
@@ -38,7 +39,8 @@ const timeUnitKinds = [
 ];
 const TIME_GROUP = 'Time';
 const TIME_GROUP_CONFIG = {
-    label: 'Time'
+    label: 'Time',
+    decimal_places: true
 };
 const TIME_UNIT_CONFIG = {
     Milliseconds: {
@@ -74,65 +76,27 @@ const TIME_UNIT_CONFIG = {
         label: 'Years'
     }
 };
+var TimeIntlDuration;
+(function(TimeIntlDuration) {
+    TimeIntlDuration["Milliseconds"] = 'millisecond';
+    TimeIntlDuration["Seconds"] = 'second';
+    TimeIntlDuration["Minutes"] = 'minute';
+    TimeIntlDuration["Hours"] = 'hour';
+    TimeIntlDuration["Days"] = 'day';
+    TimeIntlDuration["Weeks"] = 'week';
+    TimeIntlDuration["Months"] = 'month';
+    TimeIntlDuration["Years"] = 'year';
+})(TimeIntlDuration || (TimeIntlDuration = {}));
 function formatTime(value, unitOptions) {
-    // Create a Duration from the value based on what time unit it is
-    const duration = {};
-    switch(unitOptions.kind){
-        case 'Milliseconds':
-            duration.seconds = value / 1000;
-            break;
-        case 'Seconds':
-            duration.seconds = value;
-            break;
-        case 'Minutes':
-            duration.minutes = value;
-            break;
-        case 'Hours':
-            duration.hours = value;
-            break;
-        case 'Days':
-            duration.days = value;
-            break;
-        case 'Weeks':
-            duration.weeks = value;
-            break;
-        case 'Months':
-            duration.months = value;
-            break;
-        case 'Years':
-            duration.years = value;
-            break;
-        default:
-            {
-                const exhaustive = unitOptions.kind;
-                throw new Error(`Unknown time unit type ${exhaustive}`);
-            }
-    }
-    // Find the largest whole time unit we can display the value in and use it
-    const ms = (0, _dateFns.milliseconds)(duration);
-    const seconds = ms / 1000;
-    if (seconds < 1) {
-        return `${ms.toFixed()} milliseconds`;
-    }
-    const minutes = seconds / 60;
-    if (minutes < 1) {
-        return `${seconds.toFixed()} seconds`;
-    }
-    const hours = minutes / 60;
-    if (hours < 1) {
-        return `${minutes.toFixed()} minutes`;
-    }
-    const days = hours / 24;
-    if (days < 1) {
-        return `${hours.toFixed()} hours`;
-    }
-    const weeks = days / 7;
-    if (weeks < 1) {
-        return `${days.toFixed()} days`;
-    }
-    const years = weeks / 52;
-    if (years < 1) {
-        return `${weeks.toFixed()} weeks`;
-    }
-    return `${years.toFixed()} years`;
+    var _decimal_places;
+    const decimals = (_decimal_places = unitOptions.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
+    const timeUnit = TimeIntlDuration[unitOptions.kind];
+    const formatter = new Intl.NumberFormat('en', {
+        style: 'unit',
+        unit: timeUnit,
+        unitDisplay: 'long',
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+    });
+    return formatter.format(value);
 }

package/dist/cjs/theme/theme.js

@@ -21,6 +21,15 @@ Object.defineProperty(exports, "getTheme", {
 const _material = require("@mui/material");
 const _paletteOptions = require("./palette/palette-options");
 const _typography = require("./typography");
+const getModalBackgroundStyle = ({ theme  })=>{
+    const backgroundStyle = theme.palette.mode === 'light' ? {} : {
+        backgroundImage: 'unset',
+        backgroundColor: theme.palette.designSystem.grey[800]
+    };
+    return {
+        ...backgroundStyle
+    };
+};
 function getTheme(mode) {
     const theme = (0, _material.createTheme)({
         palette: (0, _paletteOptions.getPaletteOptions)(mode),
@@ -41,5 +50,15 @@ const components = {
         defaultProps: {
             size: 'small'
         }
+    },
+    MuiDrawer: {
+        styleOverrides: {
+            paper: getModalBackgroundStyle
+        }
+    },
+    MuiDialog: {
+        styleOverrides: {
+            paper: getModalBackgroundStyle
+        }
     }
 };

package/dist/model/graph.d.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler } from 'react';
 import { LineSeriesOption } from 'echarts/charts';
-export declare const PROGRESSIVE_MODE_SERIES_LIMIT = 500;
+export declare const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
 export declare type UnixTimeMs = number;
 export declare type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];
 export interface GraphSeries {

package/dist/model/graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CAC3C"}
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CAC3C"}

package/dist/model/graph.js

@@ -10,6 +10,7 @@
 // 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 const PROGRESSIVE_MODE_SERIES_LIMIT = 500;
+// adjust display when there are many time series to help with performance
+export const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
 
 //# sourceMappingURL=graph.js.map

package/dist/model/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 2022 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 { MouseEventHandler } from 'react';\nimport { LineSeriesOption } from 'echarts/charts';\n\nexport const PROGRESSIVE_MODE_SERIES_LIMIT = 500;\n\nexport type UnixTimeMs = number;\n\nexport type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];\n\nexport interface GraphSeries {\n  name: string;\n  values: Iterable<GraphSeriesValueTuple>;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  // TODO: support dataset and both category / time xAxis types\n  data: Iterable<GraphSeriesValueTuple> | EChartsValues[];\n}\n\nexport type EChartsDataFormat = {\n  timeSeries: EChartsTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n/**\n * Supported legend options\n */\nexport interface LegendOptions {\n  position?: 'bottom' | 'right';\n}\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  color: string;\n  onClick: MouseEventHandler<HTMLLIElement>;\n}\n"],"names":["PROGRESSIVE_MODE_SERIES_LIMIT"],"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;AAKjC,OAAO,MAAMA,6BAA6B,GAAG,GAAG,CAAC"}
+{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 2022 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 { MouseEventHandler } from 'react';\nimport { LineSeriesOption } from 'echarts/charts';\n\n// adjust display when there are many time series to help with performance\nexport const OPTIMIZED_MODE_SERIES_LIMIT = 1000;\n\nexport type UnixTimeMs = number;\n\nexport type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];\n\nexport interface GraphSeries {\n  name: string;\n  values: Iterable<GraphSeriesValueTuple>;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  // TODO: support dataset and both category / time xAxis types\n  data: Iterable<GraphSeriesValueTuple> | EChartsValues[];\n}\n\nexport type EChartsDataFormat = {\n  timeSeries: EChartsTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n/**\n * Supported legend options\n */\nexport interface LegendOptions {\n  position?: 'bottom' | 'right';\n}\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  color: string;\n  onClick: MouseEventHandler<HTMLLIElement>;\n}\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT"],"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;AAKjC,0EAA0E;AAC1E,OAAO,MAAMA,2BAA2B,GAAG,IAAI,CAAC"}

package/dist/model/units/time.d.ts

@@ -3,9 +3,20 @@ declare const timeUnitKinds: readonly ["Milliseconds", "Seconds", "Minutes", "Ho
 declare type TimeUnitKind = typeof timeUnitKinds[number];
 export declare type TimeUnitOptions = {
     kind: TimeUnitKind;
+    decimal_places?: number;
 };
 export declare const TIME_GROUP_CONFIG: UnitGroupConfig;
 export declare const TIME_UNIT_CONFIG: Readonly<Record<TimeUnitKind, UnitConfig>>;
+export declare enum TimeIntlDuration {
+    Milliseconds = "millisecond",
+    Seconds = "second",
+    Minutes = "minute",
+    Hours = "hour",
+    Days = "day",
+    Weeks = "week",
+    Months = "month",
+    Years = "year"
+}
 export declare function formatTime(value: number, unitOptions: TimeUnitOptions): string;
 export {};
 //# sourceMappingURL=time.d.ts.map

package/dist/model/units/time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../src/model/units/time.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEtD,QAAA,MAAM,aAAa,8FAA+F,CAAC;AACnH,aAAK,YAAY,GAAG,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;AACjD,oBAAY,eAAe,GAAG;IAC5B,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,eAE/B,CAAC;AACF,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC,CAiCvE,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,GAAG,MAAM,CAmE9E"}
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../src/model/units/time.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEtD,QAAA,MAAM,aAAa,8FAA+F,CAAC;AACnH,aAAK,YAAY,GAAG,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;AACjD,oBAAY,eAAe,GAAG;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,eAG/B,CAAC;AACF,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC,CAiCvE,CAAC;AAIF,oBAAY,gBAAgB;IAC1B,YAAY,gBAAgB;IAC5B,OAAO,WAAW;IAClB,OAAO,WAAW;IAClB,KAAK,SAAS;IACd,IAAI,QAAQ;IACZ,KAAK,SAAS;IACd,MAAM,UAAU;IAChB,KAAK,SAAS;CACf;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,GAAG,MAAM,CAW9E"}

package/dist/model/units/time.js

@@ -10,7 +10,7 @@
 // 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 { milliseconds } from 'date-fns';
+import { DEFAULT_DECIMAL_PLACES } from './constants';
 const timeUnitKinds = [
     'Milliseconds',
     'Seconds',
@@ -23,7 +23,8 @@ const timeUnitKinds = [
 ];
 const TIME_GROUP = 'Time';
 export const TIME_GROUP_CONFIG = {
-    label: 'Time'
+    label: 'Time',
+    decimal_places: true
 };
 export const TIME_UNIT_CONFIG = {
     Milliseconds: {
@@ -59,67 +60,29 @@ export const TIME_UNIT_CONFIG = {
         label: 'Years'
     }
 };
+export var TimeIntlDuration;
+(function(TimeIntlDuration) {
+    TimeIntlDuration["Milliseconds"] = 'millisecond';
+    TimeIntlDuration["Seconds"] = 'second';
+    TimeIntlDuration["Minutes"] = 'minute';
+    TimeIntlDuration["Hours"] = 'hour';
+    TimeIntlDuration["Days"] = 'day';
+    TimeIntlDuration["Weeks"] = 'week';
+    TimeIntlDuration["Months"] = 'month';
+    TimeIntlDuration["Years"] = 'year';
+})(TimeIntlDuration || (TimeIntlDuration = {}));
 export function formatTime(value, unitOptions) {
-    // Create a Duration from the value based on what time unit it is
-    const duration = {};
-    switch(unitOptions.kind){
-        case 'Milliseconds':
-            duration.seconds = value / 1000;
-            break;
-        case 'Seconds':
-            duration.seconds = value;
-            break;
-        case 'Minutes':
-            duration.minutes = value;
-            break;
-        case 'Hours':
-            duration.hours = value;
-            break;
-        case 'Days':
-            duration.days = value;
-            break;
-        case 'Weeks':
-            duration.weeks = value;
-            break;
-        case 'Months':
-            duration.months = value;
-            break;
-        case 'Years':
-            duration.years = value;
-            break;
-        default:
-            {
-                const exhaustive = unitOptions.kind;
-                throw new Error(`Unknown time unit type ${exhaustive}`);
-            }
-    }
-    // Find the largest whole time unit we can display the value in and use it
-    const ms = milliseconds(duration);
-    const seconds = ms / 1000;
-    if (seconds < 1) {
-        return `${ms.toFixed()} milliseconds`;
-    }
-    const minutes = seconds / 60;
-    if (minutes < 1) {
-        return `${seconds.toFixed()} seconds`;
-    }
-    const hours = minutes / 60;
-    if (hours < 1) {
-        return `${minutes.toFixed()} minutes`;
-    }
-    const days = hours / 24;
-    if (days < 1) {
-        return `${hours.toFixed()} hours`;
-    }
-    const weeks = days / 7;
-    if (weeks < 1) {
-        return `${days.toFixed()} days`;
-    }
-    const years = weeks / 52;
-    if (years < 1) {
-        return `${weeks.toFixed()} weeks`;
-    }
-    return `${years.toFixed()} years`;
+    var _decimal_places;
+    const decimals = (_decimal_places = unitOptions.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : DEFAULT_DECIMAL_PLACES;
+    const timeUnit = TimeIntlDuration[unitOptions.kind];
+    const formatter = new Intl.NumberFormat('en', {
+        style: 'unit',
+        unit: timeUnit,
+        unitDisplay: 'long',
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+    });
+    return formatter.format(value);
 }
 
 //# sourceMappingURL=time.js.map

package/dist/model/units/time.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/model/units/time.ts"],"sourcesContent":["// Copyright 2022 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 { Duration, milliseconds } from 'date-fns';\nimport { UnitGroupConfig, UnitConfig } from './types';\n\nconst timeUnitKinds = ['Milliseconds', 'Seconds', 'Minutes', 'Hours', 'Days', 'Weeks', 'Months', 'Years'] as const;\ntype TimeUnitKind = typeof timeUnitKinds[number];\nexport type TimeUnitOptions = {\n  kind: TimeUnitKind;\n};\nconst TIME_GROUP = 'Time';\nexport const TIME_GROUP_CONFIG: UnitGroupConfig = {\n  label: 'Time',\n};\nexport const TIME_UNIT_CONFIG: Readonly<Record<TimeUnitKind, UnitConfig>> = {\n  Milliseconds: {\n    group: TIME_GROUP,\n    label: 'Milliseconds',\n  },\n  Seconds: {\n    group: TIME_GROUP,\n    label: 'Seconds',\n  },\n  Minutes: {\n    group: TIME_GROUP,\n    label: 'Minutes',\n  },\n  Hours: {\n    group: TIME_GROUP,\n    label: 'Hours',\n  },\n  Days: {\n    group: TIME_GROUP,\n    label: 'Days',\n  },\n  Weeks: {\n    group: TIME_GROUP,\n    label: 'Weeks',\n  },\n  Months: {\n    group: TIME_GROUP,\n    label: 'Months',\n  },\n  Years: {\n    group: TIME_GROUP,\n    label: 'Years',\n  },\n};\n\nexport function formatTime(value: number, unitOptions: TimeUnitOptions): string {\n  // Create a Duration from the value based on what time unit it is\n  const duration: Duration = {};\n  switch (unitOptions.kind) {\n    case 'Milliseconds':\n      duration.seconds = value / 1000;\n      break;\n    case 'Seconds':\n      duration.seconds = value;\n      break;\n    case 'Minutes':\n      duration.minutes = value;\n      break;\n    case 'Hours':\n      duration.hours = value;\n      break;\n    case 'Days':\n      duration.days = value;\n      break;\n    case 'Weeks':\n      duration.weeks = value;\n      break;\n    case 'Months':\n      duration.months = value;\n      break;\n    case 'Years':\n      duration.years = value;\n      break;\n    default: {\n      const exhaustive: never = unitOptions.kind;\n      throw new Error(`Unknown time unit type ${exhaustive}`);\n    }\n  }\n\n  // Find the largest whole time unit we can display the value in and use it\n  const ms = milliseconds(duration);\n  const seconds = ms / 1000;\n  if (seconds < 1) {\n    return `${ms.toFixed()} milliseconds`;\n  }\n\n  const minutes = seconds / 60;\n  if (minutes < 1) {\n    return `${seconds.toFixed()} seconds`;\n  }\n\n  const hours = minutes / 60;\n  if (hours < 1) {\n    return `${minutes.toFixed()} minutes`;\n  }\n\n  const days = hours / 24;\n  if (days < 1) {\n    return `${hours.toFixed()} hours`;\n  }\n\n  const weeks = days / 7;\n  if (weeks < 1) {\n    return `${days.toFixed()} days`;\n  }\n\n  const years = weeks / 52;\n  if (years < 1) {\n    return `${weeks.toFixed()} weeks`;\n  }\n\n  return `${years.toFixed()} years`;\n}\n"],"names":["milliseconds","timeUnitKinds","TIME_GROUP","TIME_GROUP_CONFIG","label","TIME_UNIT_CONFIG","Milliseconds","group","Seconds","Minutes","Hours","Days","Weeks","Months","Years","formatTime","value","unitOptions","duration","kind","seconds","minutes","hours","days","weeks","months","years","exhaustive","Error","ms","toFixed"],"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,SAAmBA,YAAY,QAAQ,UAAU,CAAC;AAGlD,MAAMC,aAAa,GAAG;IAAC,cAAc;IAAE,SAAS;IAAE,SAAS;IAAE,OAAO;IAAE,MAAM;IAAE,OAAO;IAAE,QAAQ;IAAE,OAAO;CAAC,AAAS,AAAC;AAKnH,MAAMC,UAAU,GAAG,MAAM,AAAC;AAC1B,OAAO,MAAMC,iBAAiB,GAAoB;IAChDC,KAAK,EAAE,MAAM;CACd,CAAC;AACF,OAAO,MAAMC,gBAAgB,GAA+C;IAC1EC,YAAY,EAAE;QACZC,KAAK,EAAEL,UAAU;QACjBE,KAAK,EAAE,cAAc;KACtB;IACDI,OAAO,EAAE;QACPD,KAAK,EAAEL,UAAU;QACjBE,KAAK,EAAE,SAAS;KACjB;IACDK,OAAO,EAAE;QACPF,KAAK,EAAEL,UAAU;QACjBE,KAAK,EAAE,SAAS;KACjB;IACDM,KAAK,EAAE;QACLH,KAAK,EAAEL,UAAU;QACjBE,KAAK,EAAE,OAAO;KACf;IACDO,IAAI,EAAE;QACJJ,KAAK,EAAEL,UAAU;QACjBE,KAAK,EAAE,MAAM;KACd;IACDQ,KAAK,EAAE;QACLL,KAAK,EAAEL,UAAU;QACjBE,KAAK,EAAE,OAAO;KACf;IACDS,MAAM,EAAE;QACNN,KAAK,EAAEL,UAAU;QACjBE,KAAK,EAAE,QAAQ;KAChB;IACDU,KAAK,EAAE;QACLP,KAAK,EAAEL,UAAU;QACjBE,KAAK,EAAE,OAAO;KACf;CACF,CAAC;AAEF,OAAO,SAASW,UAAU,CAACC,KAAa,EAAEC,WAA4B,EAAU;IAC9E,iEAAiE;IACjE,MAAMC,QAAQ,GAAa,EAAE,AAAC;IAC9B,OAAQD,WAAW,CAACE,IAAI;QACtB,KAAK,cAAc;YACjBD,QAAQ,CAACE,OAAO,GAAGJ,KAAK,GAAG,IAAI,CAAC;YAChC,MAAM;QACR,KAAK,SAAS;YACZE,QAAQ,CAACE,OAAO,GAAGJ,KAAK,CAAC;YACzB,MAAM;QACR,KAAK,SAAS;YACZE,QAAQ,CAACG,OAAO,GAAGL,KAAK,CAAC;YACzB,MAAM;QACR,KAAK,OAAO;YACVE,QAAQ,CAACI,KAAK,GAAGN,KAAK,CAAC;YACvB,MAAM;QACR,KAAK,MAAM;YACTE,QAAQ,CAACK,IAAI,GAAGP,KAAK,CAAC;YACtB,MAAM;QACR,KAAK,OAAO;YACVE,QAAQ,CAACM,KAAK,GAAGR,KAAK,CAAC;YACvB,MAAM;QACR,KAAK,QAAQ;YACXE,QAAQ,CAACO,MAAM,GAAGT,KAAK,CAAC;YACxB,MAAM;QACR,KAAK,OAAO;YACVE,QAAQ,CAACQ,KAAK,GAAGV,KAAK,CAAC;YACvB,MAAM;QACR;YAAS;gBACP,MAAMW,UAAU,GAAUV,WAAW,CAACE,IAAI,AAAC;gBAC3C,MAAM,IAAIS,KAAK,CAAC,CAAC,uBAAuB,EAAED,UAAU,CAAC,CAAC,CAAC,CAAC;YAC1D,CAAC;KACF;IAED,0EAA0E;IAC1E,MAAME,EAAE,GAAG7B,YAAY,CAACkB,QAAQ,CAAC,AAAC;IAClC,MAAME,OAAO,GAAGS,EAAE,GAAG,IAAI,AAAC;IAC1B,IAAIT,OAAO,GAAG,CAAC,EAAE;QACf,OAAO,CAAC,EAAES,EAAE,CAACC,OAAO,EAAE,CAAC,aAAa,CAAC,CAAC;IACxC,CAAC;IAED,MAAMT,OAAO,GAAGD,OAAO,GAAG,EAAE,AAAC;IAC7B,IAAIC,OAAO,GAAG,CAAC,EAAE;QACf,OAAO,CAAC,EAAED,OAAO,CAACU,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,MAAMR,KAAK,GAAGD,OAAO,GAAG,EAAE,AAAC;IAC3B,IAAIC,KAAK,GAAG,CAAC,EAAE;QACb,OAAO,CAAC,EAAED,OAAO,CAACS,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,MAAMP,IAAI,GAAGD,KAAK,GAAG,EAAE,AAAC;IACxB,IAAIC,IAAI,GAAG,CAAC,EAAE;QACZ,OAAO,CAAC,EAAED,KAAK,CAACQ,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;IAED,MAAMN,KAAK,GAAGD,IAAI,GAAG,CAAC,AAAC;IACvB,IAAIC,KAAK,GAAG,CAAC,EAAE;QACb,OAAO,CAAC,EAAED,IAAI,CAACO,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,MAAMJ,KAAK,GAAGF,KAAK,GAAG,EAAE,AAAC;IACzB,IAAIE,KAAK,GAAG,CAAC,EAAE;QACb,OAAO,CAAC,EAAEF,KAAK,CAACM,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;IAED,OAAO,CAAC,EAAEJ,KAAK,CAACI,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC;AACpC,CAAC"}
+{"version":3,"sources":["../../../src/model/units/time.ts"],"sourcesContent":["// Copyright 2022 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 { DEFAULT_DECIMAL_PLACES } from './constants';\nimport { UnitGroupConfig, UnitConfig } from './types';\n\nconst timeUnitKinds = ['Milliseconds', 'Seconds', 'Minutes', 'Hours', 'Days', 'Weeks', 'Months', 'Years'] as const;\ntype TimeUnitKind = typeof timeUnitKinds[number];\nexport type TimeUnitOptions = {\n  kind: TimeUnitKind;\n  decimal_places?: number;\n};\nconst TIME_GROUP = 'Time';\nexport const TIME_GROUP_CONFIG: UnitGroupConfig = {\n  label: 'Time',\n  decimal_places: true,\n};\nexport const TIME_UNIT_CONFIG: Readonly<Record<TimeUnitKind, UnitConfig>> = {\n  Milliseconds: {\n    group: TIME_GROUP,\n    label: 'Milliseconds',\n  },\n  Seconds: {\n    group: TIME_GROUP,\n    label: 'Seconds',\n  },\n  Minutes: {\n    group: TIME_GROUP,\n    label: 'Minutes',\n  },\n  Hours: {\n    group: TIME_GROUP,\n    label: 'Hours',\n  },\n  Days: {\n    group: TIME_GROUP,\n    label: 'Days',\n  },\n  Weeks: {\n    group: TIME_GROUP,\n    label: 'Weeks',\n  },\n  Months: {\n    group: TIME_GROUP,\n    label: 'Months',\n  },\n  Years: {\n    group: TIME_GROUP,\n    label: 'Years',\n  },\n};\n\n// Mapping of time units to what Intl.NumberFormat formatter expects\n// https://v8.dev/features/intl-numberformat#units\nexport enum TimeIntlDuration {\n  Milliseconds = 'millisecond',\n  Seconds = 'second',\n  Minutes = 'minute',\n  Hours = 'hour',\n  Days = 'day',\n  Weeks = 'week',\n  Months = 'month',\n  Years = 'year',\n}\n\nexport function formatTime(value: number, unitOptions: TimeUnitOptions): string {\n  const decimals = unitOptions.decimal_places ?? DEFAULT_DECIMAL_PLACES;\n  const timeUnit: string = TimeIntlDuration[unitOptions.kind];\n  const formatter = new Intl.NumberFormat('en', {\n    style: 'unit',\n    unit: timeUnit,\n    unitDisplay: 'long',\n    minimumFractionDigits: decimals,\n    maximumFractionDigits: decimals,\n  });\n  return formatter.format(value);\n}\n"],"names":["DEFAULT_DECIMAL_PLACES","timeUnitKinds","TIME_GROUP","TIME_GROUP_CONFIG","label","decimal_places","TIME_UNIT_CONFIG","Milliseconds","group","Seconds","Minutes","Hours","Days","Weeks","Months","Years","TimeIntlDuration","formatTime","value","unitOptions","decimals","timeUnit","kind","formatter","Intl","NumberFormat","style","unit","unitDisplay","minimumFractionDigits","maximumFractionDigits","format"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,sBAAsB,QAAQ,aAAa,CAAC;AAGrD,MAAMC,aAAa,GAAG;IAAC,cAAc;IAAE,SAAS;IAAE,SAAS;IAAE,OAAO;IAAE,MAAM;IAAE,OAAO;IAAE,QAAQ;IAAE,OAAO;CAAC,AAAS,AAAC;AAMnH,MAAMC,UAAU,GAAG,MAAM,AAAC;AAC1B,OAAO,MAAMC,iBAAiB,GAAoB;IAChDC,KAAK,EAAE,MAAM;IACbC,cAAc,EAAE,IAAI;CACrB,CAAC;AACF,OAAO,MAAMC,gBAAgB,GAA+C;IAC1EC,YAAY,EAAE;QACZC,KAAK,EAAEN,UAAU;QACjBE,KAAK,EAAE,cAAc;KACtB;IACDK,OAAO,EAAE;QACPD,KAAK,EAAEN,UAAU;QACjBE,KAAK,EAAE,SAAS;KACjB;IACDM,OAAO,EAAE;QACPF,KAAK,EAAEN,UAAU;QACjBE,KAAK,EAAE,SAAS;KACjB;IACDO,KAAK,EAAE;QACLH,KAAK,EAAEN,UAAU;QACjBE,KAAK,EAAE,OAAO;KACf;IACDQ,IAAI,EAAE;QACJJ,KAAK,EAAEN,UAAU;QACjBE,KAAK,EAAE,MAAM;KACd;IACDS,KAAK,EAAE;QACLL,KAAK,EAAEN,UAAU;QACjBE,KAAK,EAAE,OAAO;KACf;IACDU,MAAM,EAAE;QACNN,KAAK,EAAEN,UAAU;QACjBE,KAAK,EAAE,QAAQ;KAChB;IACDW,KAAK,EAAE;QACLP,KAAK,EAAEN,UAAU;QACjBE,KAAK,EAAE,OAAO;KACf;CACF,CAAC;WAIK,gBASN;UATWY,gBAAgB;IAAhBA,gBAAgB,CAC1BT,cAAY,IAAG,aAAa;IADlBS,gBAAgB,CAE1BP,SAAO,IAAG,QAAQ;IAFRO,gBAAgB,CAG1BN,SAAO,IAAG,QAAQ;IAHRM,gBAAgB,CAI1BL,OAAK,IAAG,MAAM;IAJJK,gBAAgB,CAK1BJ,MAAI,IAAG,KAAK;IALFI,gBAAgB,CAM1BH,OAAK,IAAG,MAAM;IANJG,gBAAgB,CAO1BF,QAAM,IAAG,OAAO;IAPNE,gBAAgB,CAQ1BD,OAAK,IAAG,MAAM;GARJC,gBAAgB,KAAhBA,gBAAgB;AAW5B,OAAO,SAASC,UAAU,CAACC,KAAa,EAAEC,WAA4B,EAAU;QAC7DA,eAA0B;IAA3C,MAAMC,QAAQ,GAAGD,CAAAA,eAA0B,GAA1BA,WAAW,CAACd,cAAc,cAA1Bc,eAA0B,cAA1BA,eAA0B,GAAInB,sBAAsB,AAAC;IACtE,MAAMqB,QAAQ,GAAWL,gBAAgB,CAACG,WAAW,CAACG,IAAI,CAAC,AAAC;IAC5D,MAAMC,SAAS,GAAG,IAAIC,IAAI,CAACC,YAAY,CAAC,IAAI,EAAE;QAC5CC,KAAK,EAAE,MAAM;QACbC,IAAI,EAAEN,QAAQ;QACdO,WAAW,EAAE,MAAM;QACnBC,qBAAqB,EAAET,QAAQ;QAC/BU,qBAAqB,EAAEV,QAAQ;KAChC,CAAC,AAAC;IACH,OAAOG,SAAS,CAACQ,MAAM,CAACb,KAAK,CAAC,CAAC;AACjC,CAAC"}

package/dist/theme/theme.d.ts

@@ -1,4 +1,4 @@
-import { PaletteMode } from '@mui/material';
+import { PaletteMode, Theme } from '@mui/material';
 /**
  * Gets theme used by all components for the provided mode. For more details, see:
  *   - Base colors, typography, sizing - go/chrono-ui-theme
@@ -9,5 +9,5 @@ import { PaletteMode } from '@mui/material';
  * Need to reinstantiate the theme everytime to support switching between light and dark themes
  * https://github.com/mui-org/material-ui/issues/18831
  */
-export declare function getTheme(mode: PaletteMode): import("@mui/material").Theme;
+export declare function getTheme(mode: PaletteMode): Theme;
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,WAAW,EAAgB,MAAM,eAAe,CAAC;AAIvE;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,iCAQzC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,WAAW,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAiB9E;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,SAQzC"}

package/dist/theme/theme.js

@@ -13,6 +13,15 @@
 import { createTheme } from '@mui/material';
 import { getPaletteOptions } from './palette/palette-options';
 import { typography } from './typography';
+const getModalBackgroundStyle = ({ theme  })=>{
+    const backgroundStyle = theme.palette.mode === 'light' ? {} : {
+        backgroundImage: 'unset',
+        backgroundColor: theme.palette.designSystem.grey[800]
+    };
+    return {
+        ...backgroundStyle
+    };
+};
 /**
  * Gets theme used by all components for the provided mode. For more details, see:
  *   - Base colors, typography, sizing - go/chrono-ui-theme
@@ -42,6 +51,16 @@ const components = {
         defaultProps: {
             size: 'small'
         }
+    },
+    MuiDrawer: {
+        styleOverrides: {
+            paper: getModalBackgroundStyle
+        }
+    },
+    MuiDialog: {
+        styleOverrides: {
+            paper: getModalBackgroundStyle
+        }
     }
 };
 

package/dist/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/theme.ts"],"sourcesContent":["// Copyright 2022 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 { createTheme, PaletteMode, ThemeOptions } from '@mui/material';\nimport { getPaletteOptions } from './palette/palette-options';\nimport { typography } from './typography';\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n */\nexport function getTheme(mode: PaletteMode) {\n  const theme = createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components,\n  });\n  return theme;\n}\n\n// Overrides for component default prop values and styles go here\nconst components: ThemeOptions['components'] = {\n  MuiFormControl: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiTextField: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n};\n"],"names":["createTheme","getPaletteOptions","typography","getTheme","mode","theme","palette","mixins","components","MuiFormControl","defaultProps","size","MuiTextField"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,QAAmC,eAAe,CAAC;AACvE,SAASC,iBAAiB,QAAQ,2BAA2B,CAAC;AAC9D,SAASC,UAAU,QAAQ,cAAc,CAAC;AAE1C;;;;;;;;;CASC,GACD,OAAO,SAASC,QAAQ,CAACC,IAAiB,EAAE;IAC1C,MAAMC,KAAK,GAAGL,WAAW,CAAC;QACxBM,OAAO,EAAEL,iBAAiB,CAACG,IAAI,CAAC;QAChCF,UAAU;QACVK,MAAM,EAAE,EAAE;QACVC,UAAU;KACX,CAAC,AAAC;IACH,OAAOH,KAAK,CAAC;AACf,CAAC;AAED,iEAAiE;AACjE,MAAMG,UAAU,GAA+B;IAC7CC,cAAc,EAAE;QACdC,YAAY,EAAE;YACZC,IAAI,EAAE,OAAO;SACd;KACF;IACDC,YAAY,EAAE;QACZF,YAAY,EAAE;YACZC,IAAI,EAAE,OAAO;SACd;KACF;CACF,AAAC"}
+{"version":3,"sources":["../../src/theme/theme.ts"],"sourcesContent":["// Copyright 2022 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 { createTheme, PaletteMode, ThemeOptions, Theme } from '@mui/material';\nimport { getPaletteOptions } from './palette/palette-options';\nimport { typography } from './typography';\n\nconst getModalBackgroundStyle = ({ theme }: { theme: Omit<Theme, 'components'> }) => {\n  const backgroundStyle =\n    theme.palette.mode === 'light'\n      ? {}\n      : {\n          backgroundImage: 'unset',\n          backgroundColor: theme.palette.designSystem.grey[800],\n        };\n  return {\n    ...backgroundStyle,\n  };\n};\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n */\nexport function getTheme(mode: PaletteMode) {\n  const theme = createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components,\n  });\n  return theme;\n}\n\n// Overrides for component default prop values and styles go here\nconst components: ThemeOptions['components'] = {\n  MuiFormControl: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiTextField: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiDrawer: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiDialog: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n};\n"],"names":["createTheme","getPaletteOptions","typography","getModalBackgroundStyle","theme","backgroundStyle","palette","mode","backgroundImage","backgroundColor","designSystem","grey","getTheme","mixins","components","MuiFormControl","defaultProps","size","MuiTextField","MuiDrawer","styleOverrides","paper","MuiDialog"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,QAA0C,eAAe,CAAC;AAC9E,SAASC,iBAAiB,QAAQ,2BAA2B,CAAC;AAC9D,SAASC,UAAU,QAAQ,cAAc,CAAC;AAE1C,MAAMC,uBAAuB,GAAG,CAAC,EAAEC,KAAK,CAAA,EAAwC,GAAK;IACnF,MAAMC,eAAe,GACnBD,KAAK,CAACE,OAAO,CAACC,IAAI,KAAK,OAAO,GAC1B,EAAE,GACF;QACEC,eAAe,EAAE,OAAO;QACxBC,eAAe,EAAEL,KAAK,CAACE,OAAO,CAACI,YAAY,CAACC,IAAI,CAAC,GAAG,CAAC;KACtD,AAAC;IACR,OAAO;QACL,GAAGN,eAAe;KACnB,CAAC;AACJ,CAAC,AAAC;AAEF;;;;;;;;;CASC,GACD,OAAO,SAASO,QAAQ,CAACL,IAAiB,EAAE;IAC1C,MAAMH,KAAK,GAAGJ,WAAW,CAAC;QACxBM,OAAO,EAAEL,iBAAiB,CAACM,IAAI,CAAC;QAChCL,UAAU;QACVW,MAAM,EAAE,EAAE;QACVC,UAAU;KACX,CAAC,AAAC;IACH,OAAOV,KAAK,CAAC;AACf,CAAC;AAED,iEAAiE;AACjE,MAAMU,UAAU,GAA+B;IAC7CC,cAAc,EAAE;QACdC,YAAY,EAAE;YACZC,IAAI,EAAE,OAAO;SACd;KACF;IACDC,YAAY,EAAE;QACZF,YAAY,EAAE;YACZC,IAAI,EAAE,OAAO;SACd;KACF;IACDE,SAAS,EAAE;QACTC,cAAc,EAAE;YACdC,KAAK,EAAElB,uBAAuB;SAC/B;KACF;IACDmB,SAAS,EAAE;QACTF,cAAc,EAAE;YACdC,KAAK,EAAElB,uBAAuB;SAC/B;KACF;CACF,AAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "^0.18.0",
+    "@perses-dev/core": "^0.20.0",
     "date-fns": "^2.28.0",
     "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",