@perses-dev/components 0.16.0 → 0.17.0

package/dist/LineChart/LineChart.d.ts

@@ -1,11 +1,12 @@
 import { MouseEvent } from 'react';
-import type { GridComponentOption, LegendComponentOption, VisualMapComponentOption } from 'echarts';
+import type { GridComponentOption, LegendComponentOption, VisualMapComponentOption, YAXisComponentOption } from 'echarts';
 import { EChartsDataFormat } from '../model/graph';
 import { UnitOptions } from '../model/units';
 import { ZoomEventData } from './utils';
 interface LineChartProps {
     height: number;
     data: EChartsDataFormat;
+    yAxis?: YAXisComponentOption;
     unit?: UnitOptions;
     grid?: GridComponentOption;
     legend?: LegendComponentOption;
@@ -13,6 +14,6 @@ interface LineChartProps {
     onDataZoom?: (e: ZoomEventData) => void;
     onDoubleClick?: (e: MouseEvent) => void;
 }
-export declare function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom, onDoubleClick }: LineChartProps): JSX.Element;
+export declare function LineChart({ height, data, yAxis, unit, grid, legend, visualMap, onDataZoom, onDoubleClick, }: LineChartProps): JSX.Element;
 export {};
 //# sourceMappingURL=LineChart.d.ts.map

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,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG1D,OAAO,EAAgE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBtG,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,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,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,cAAc,eA2JnH"}
+{"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"}

package/dist/LineChart/LineChart.js

@@ -20,10 +20,9 @@ import { GridComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent,
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
 import { PROGRESSIVE_MODE_SERIES_LIMIT } from '../model/graph';
-import { formatValue } from '../model/units';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
 import { Tooltip } from '../Tooltip/Tooltip';
-import { enableDataZoom, restoreChart, getDateRange, getFormattedDate } from './utils';
+import { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from './utils';
 use([
     EChartsLineChart,
     GridComponent,
@@ -38,7 +37,7 @@ use([
     VisualMapComponent,
     CanvasRenderer
 ]);
-export function LineChart({ height , data , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
+export function LineChart({ height , data , yAxis , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
     const [showTooltip, setShowTooltip] = useState(true);
@@ -124,18 +123,7 @@ export function LineChart({ height , data , unit , grid , legend , visualMap , o
                     }
                 }
             },
-            yAxis: {
-                type: 'value',
-                boundaryGap: [
-                    0,
-                    '10%'
-                ],
-                axisLabel: {
-                    formatter: (value)=>{
-                        return formatValue(value, unit);
-                    }
-                }
-            },
+            yAxis: getYAxes(yAxis, unit),
             animation: false,
             tooltip: {
                 show: showPointsOnHover,
@@ -160,6 +148,7 @@ export function LineChart({ height , data , unit , grid , legend , visualMap , o
         return option;
     }, [
         data,
+        yAxis,
         grid,
         legend,
         visualMap

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} 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 { formatValue, UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { enableDataZoom, restoreChart, getDateRange, getFormattedDate, 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  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({ height, data, unit, grid, legend, visualMap, onDataZoom, onDoubleClick }: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n\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: {\n        type: 'value',\n        boundaryGap: [0, '10%'],\n        axisLabel: {\n          formatter: (value: number) => {\n            return formatValue(value, unit);\n          },\n        },\n      },\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, 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","formatValue","useChartsTheme","Tooltip","enableDataZoom","restoreChart","getDateRange","getFormattedDate","height","data","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","yAxis","boundaryGap","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 { 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":"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,SAAqBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAC9D,SAASC,WAAW,QAAQ,kBAAkB,CAAC;AAC/C,SAASC,GAAG,QAAQ,eAAe,CAAC;AASpC,SAAqCC,GAAG,QAAQ,cAAc,CAAC;AAC/D,SAASC,SAAS,IAAIC,gBAAgB,QAAQ,gBAAgB,CAAC;AAC/D,SACEC,aAAa,EACbC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,cAAc,EACdC,gBAAgB,EAChBC,gBAAgB,EAChBC,eAAe,EACfC,kBAAkB,QACb,oBAAoB,CAAC;AAC5B,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,MAAM,QAAsB,WAAW,CAAC;AACjD,SAASC,6BAA6B,QAA2B,gBAAgB,CAAC;AAElF,SAASC,cAAc,QAAQ,gCAAgC,CAAC;AAChE,SAASC,OAAO,QAAQ,oBAAoB,CAAC;AAC7C,SAASC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,YAAY,QAAuB,SAAS,CAAC;AAEhHtB,GAAG,CAAC;IACFE,gBAAgB;IAChBC,aAAa;IACbC,iBAAiB;IACjBC,iBAAiB;IACjBC,iBAAiB;IACjBC,kBAAkB;IAClBC,cAAc;IACdC,gBAAgB;IAChBC,gBAAgB;IAChBC,eAAe;IACfC,kBAAkB;IAClBC,cAAc;CACf,CAAC,CAAC;AAcH,OAAO,SAASZ,SAAS,CAAC,EACxBsB,MAAM,CAAA,EACNC,IAAI,CAAA,EACJC,KAAK,CAAA,EACLC,IAAI,CAAA,EACJC,IAAI,CAAA,EACJC,MAAM,CAAA,EACNC,SAAS,CAAA,EACTC,UAAU,CAAA,EACVC,aAAa,CAAA,EACE,EAAE;IACjB,MAAMC,WAAW,GAAGhB,cAAc,EAAE,AAAC;IACrC,MAAMiB,QAAQ,GAAGrC,MAAM,EAAmB,AAAC;IAC3C,MAAM,CAACsC,WAAW,EAAEC,cAAc,CAAC,GAAGtC,QAAQ,CAAU,IAAI,CAAC,AAAC;IAC9D,MAAM,CAACuC,UAAU,EAAEC,aAAa,CAAC,GAAGxC,QAAQ,CAAU,KAAK,CAAC,AAAC;IAE7D,MAAMyC,YAAY,GAAqD3C,OAAO,CAAC,IAAM;QACnF,OAAO;YACL4C,QAAQ,EAAE,CAACC,MAAM,GAAK;gBACpB,IAAIV,UAAU,KAAKW,SAAS,EAAE;oBAC5BC,UAAU,CAAC,IAAM;wBACf,gDAAgD;wBAChDL,aAAa,CAAC,KAAK,CAAC,CAAC;oBACvB,CAAC,EAAE,EAAE,CAAC,CAAC;gBACT,CAAC;gBACD,IAAIP,UAAU,KAAKW,SAAS,IAAID,MAAM,CAACG,KAAK,CAAC,CAAC,CAAC,KAAKF,SAAS,EAAE,OAAO;oBACnDD,WAA0B;gBAA7C,MAAMI,UAAU,GAAGJ,CAAAA,WAA0B,GAA1BA,MAAM,CAACG,KAAK,CAAC,CAAC,CAAC,CAACE,UAAU,cAA1BL,WAA0B,cAA1BA,WAA0B,GAAI,CAAC,AAAC;oBAClCA,SAAwB;gBAAzC,MAAMM,QAAQ,GAAGN,CAAAA,SAAwB,GAAxBA,MAAM,CAACG,KAAK,CAAC,CAAC,CAAC,CAACI,QAAQ,cAAxBP,SAAwB,cAAxBA,SAAwB,GAAIhB,IAAI,CAACwB,KAAK,CAACC,MAAM,GAAG,CAAC,AAAC;gBACnE,MAAMC,eAAe,GAAG1B,IAAI,CAACwB,KAAK,CAACJ,UAAU,CAAC,AAAC;gBAC/C,MAAMO,aAAa,GAAG3B,IAAI,CAACwB,KAAK,CAACF,QAAQ,CAAC,AAAC;gBAE3C,IAAII,eAAe,KAAKT,SAAS,IAAIU,aAAa,KAAKV,SAAS,EAAE;oBAChE,MAAMW,SAAS,GAAkB;wBAC/BC,KAAK,EAAEH,eAAe;wBACtBI,GAAG,EAAEH,aAAa;wBAClBP,UAAU;wBACVE,QAAQ;qBACT,AAAC;oBACFhB,UAAU,CAACsB,SAAS,CAAC,CAAC;gBACxB,CAAC;YACH,CAAC;SAEF,CAAC;IACJ,CAAC,EAAE;QAAC5B,IAAI;QAAEM,UAAU;QAAEO,aAAa;KAAC,CAAC,AAAC;IAEtC,IAAIJ,QAAQ,CAACsB,OAAO,KAAKd,SAAS,EAAE;QAClCvB,cAAc,CAACe,QAAQ,CAACsB,OAAO,CAAC,CAAC;IACnC,CAAC;IAED,MAAMC,aAAa,GAAG,IAAMnB,aAAa,CAAC,CAACkB,OAAO,GAAK,CAACA,OAAO,CAAC,AAAC;IAEjE,MAAME,mBAAmB,GAAG,CAACC,CAAa,GAAK;QAC7CrB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,sGAAsG;QACtG,IAAIN,aAAa,KAAKU,SAAS,EAAE;YAC/B,IAAIR,QAAQ,CAACsB,OAAO,KAAKd,SAAS,EAAE;gBAClCnB,YAAY,CAACW,QAAQ,CAACsB,OAAO,CAAC,CAAC;YACjC,CAAC;QACH,OAAO;YACLxB,aAAa,CAAC2B,CAAC,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,AAAC;IAEF,MAAMC,iBAAiB,GAAG,CAACD,CAAa,GAAK;QAC3C,yFAAyF;QACzF,IAAIA,CAAC,CAACE,MAAM,YAAYC,iBAAiB,EAAE;YACzC1B,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,AAAC;IAEF,MAAM2B,eAAe,GAAG,IAAM;QAC5B3B,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,AAAC;IAEF,MAAM4B,kBAAkB,GAAG,IAAM;QAC/B5B,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,AAAC;IAEF,MAAM6B,kBAAkB,GAAG,IAAM;QAC/B7B,cAAc,CAAC,KAAK,CAAC,CAAC;QACtBE,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,AAAC;IAEF,MAAM4B,MAAM,GAAsBnE,WAAW,CAAC,IAAM;QAClD,IAAI0B,IAAI,CAAC0C,UAAU,KAAKzB,SAAS,EAAE,OAAO,EAAE,CAAC;QAC7C,IAAIjB,IAAI,CAAC0C,UAAU,KAAK,IAAI,IAAI1C,IAAI,CAAC0C,UAAU,CAACjB,MAAM,KAAK,CAAC,EAAE,OAAOjB,WAAW,CAACmC,YAAY,CAAC;QAE9F,MAAMC,iBAAiB,GAAG5C,IAAI,CAAC0C,UAAU,CAACjB,MAAM,GAAGlC,6BAA6B,AAAC;YAEjES,QAAY;QAA5B,MAAM6C,OAAO,GAAG7C,CAAAA,QAAY,GAAZA,IAAI,CAAC6C,OAAO,cAAZ7C,QAAY,cAAZA,QAAY,GAAIL,YAAY,CAACK,IAAI,CAACwB,KAAK,CAAC,AAAC;QAEzD,MAAMiB,MAAM,GAAsB;YAChCK,MAAM,EAAE9C,IAAI,CAAC0C,UAAU;YACvBlB,KAAK,EAAE;gBACLuB,IAAI,EAAE,UAAU;gBAChB/C,IAAI,EAAEA,IAAI,CAACwB,KAAK;gBAChBwB,GAAG,EAAEhD,IAAI,CAACiD,QAAQ;gBAClBC,SAAS,EAAE;oBACTC,SAAS,EAAE,CAACC,KAAa,GAAK;wBAC5B,OAAOxD,gBAAgB,CAACwD,KAAK,EAAEP,OAAO,CAAC,CAAC;oBAC1C,CAAC;iBACF;aACF;YACD5C,KAAK,EAAEJ,QAAQ,CAACI,KAAK,EAAEC,IAAI,CAAC;YAC5BmD,SAAS,EAAE,KAAK;YAChBC,OAAO,EAAE;gBACPC,IAAI,EAAEX,iBAAiB;gBACvBY,OAAO,EAAE,MAAM;gBACfC,WAAW,EAAE,KAAK;gBAClBC,WAAW,EAAE;oBACXX,IAAI,EAAE,MAAM;iBACb;aACF;YACDY,OAAO,EAAE;gBACPC,OAAO,EAAE;oBACPC,QAAQ,EAAE;wBACRC,IAAI,EAAE,IAAI;wBACVC,UAAU,EAAE,MAAM;qBACnB;iBACF;aACF;YACD5D,IAAI;YACJC,MAAM;YACNC,SAAS;SACV,AAAC;QAEF,OAAOoC,MAAM,CAAC;IAChB,CAAC,EAAE;QAACzC,IAAI;QAAEC,KAAK;QAAEE,IAAI;QAAEC,MAAM;QAAEC,SAAS;KAAC,CAAC,AAAC;IAE3C,qBACE,MAAC9B,GAAG;QACFyF,EAAE,EAAE;YACFjE,MAAM;SACP;QACDkE,OAAO,EAAEjC,aAAa;QACtBzB,aAAa,EAAE0B,mBAAmB;QAClCiC,WAAW,EAAE/B,iBAAiB;QAC9BgC,SAAS,EAAE7B,eAAe;QAC1B8B,YAAY,EAAE5B,kBAAkB;QAChC6B,YAAY,EAAE9B,kBAAkB;;YAE/B7B,WAAW,KAAK,IAAI,kBACnB,KAACjB,OAAO;gBAACgB,QAAQ,EAAEA,QAAQ;gBAAE6D,SAAS,EAAEtE,IAAI;gBAAEuE,UAAU,EAAE,IAAI;gBAAE3D,UAAU,EAAEA,UAAU;gBAAEV,IAAI,EAAEA,IAAI;cAAY,AAC/G;0BAED,KAACZ,MAAM;gBACL0E,EAAE,EAAE;oBACFQ,KAAK,EAAE,MAAM;oBACbzE,MAAM,EAAE,MAAM;iBACf;gBACD0C,MAAM,EAAEA,MAAM;gBACdgC,KAAK,EAAEjE,WAAW,CAACkE,YAAY;gBAC/BC,QAAQ,EAAE7D,YAAY;gBACtB8D,SAAS,EAAEnE,QAAQ;cACnB;;MACE,CACN;AACJ,CAAC"}

package/dist/LineChart/utils.d.ts

@@ -1,12 +1,30 @@
+import type { YAXisComponentOption } from 'echarts';
 import { ECharts as EChartsInstance } from 'echarts/core';
+import { UnitOptions } from '../model';
 export interface ZoomEventData {
     start: number;
     end: number;
     startIndex: number;
     endIndex: number;
 }
+/**
+ * Enable dataZoom without requring user to click toolbox icon
+ */
 export declare function enableDataZoom(chart: EChartsInstance): void;
+/**
+ * Restore chart to original state before zoom or other actions were dispatched
+ */
 export declare function restoreChart(chart: EChartsInstance): void;
+/**
+ * Calculate date range, used as a fallback when xAxis time range not passed as prop
+ */
 export declare function getDateRange(data: number[]): number;
 export declare function getFormattedDate(value: number, rangeMs: number): string;
+export declare function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions): ({
+    type: string;
+    boundaryGap: (string | number)[];
+    axisLabel: {
+        formatter: (value: number) => string;
+    };
+} & (YAXisComponentOption | undefined))[];
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/LineChart/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAGD,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,QAapD;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,QAIlD;AAGD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAM1C;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAiB9D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/LineChart/utils.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,QAapD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,QAKlD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAM1C;AAKD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAiB9D;AAKD,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,oBAAoB,EAAE,IAAI,CAAC,EAAE,WAAW;;;;2BAMhD,MAAM;;0CAM9B"}

package/dist/LineChart/utils.js

@@ -10,8 +10,11 @@
 // 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.
-// enable dataZoom without requring user to click toolbox icon
-export function enableDataZoom(chart) {
+import { merge } from 'lodash-es';
+import { formatValue } from '../model';
+/**
+ * Enable dataZoom without requring user to click toolbox icon
+ */ export function enableDataZoom(chart) {
     const chartModel = chart['_model'];
     if (chartModel === undefined) return;
     if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {
@@ -25,23 +28,26 @@ export function enableDataZoom(chart) {
         }
     }
 }
-// restore chart to original state before zoom or other actions were dispatched
-// TODO: support incremental unzoom instead of restore to original state
-export function restoreChart(chart) {
+/**
+ * Restore chart to original state before zoom or other actions were dispatched
+ */ export function restoreChart(chart) {
+    // TODO: support incremental unzoom instead of restore to original state
     chart.dispatchAction({
         type: 'restore'
     });
 }
-// fallback when xAxis time range not passed as prop
-export function getDateRange(data) {
+/**
+ * Calculate date range, used as a fallback when xAxis time range not passed as prop
+ */ export function getDateRange(data) {
     const defaultRange = 3600000; // hour in ms
     if (data.length === 0) return defaultRange;
     const lastDatum = data[data.length - 1];
     if (data[0] === undefined || lastDatum === undefined) return defaultRange;
     return lastDatum - data[0];
 }
-// determines time granularity for axis labels, defaults to hh:mm
-export function getFormattedDate(value, rangeMs) {
+/*
+ * Determines time granularity for axis labels, defaults to hh:mm
+ */ export function getFormattedDate(value, rangeMs) {
     const dateFormatOptions = {
         hour: 'numeric',
         minute: 'numeric',
@@ -59,5 +65,25 @@ export function getFormattedDate(value, rangeMs) {
     // remove comma when month / day present
     return DATE_FORMAT.format(value).replace(/, /g, ' ');
 }
+/*
+ * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future
+ */ export function getYAxes(yAxis, unit) {
+    // TODO: support alternate yAxis that shows on right side
+    const Y_AXIS_DEFAULT = {
+        type: 'value',
+        boundaryGap: [
+            0,
+            '10%'
+        ],
+        axisLabel: {
+            formatter: (value)=>{
+                return formatValue(value, unit);
+            }
+        }
+    };
+    return [
+        merge(Y_AXIS_DEFAULT, yAxis)
+    ];
+}
 
 //# sourceMappingURL=utils.js.map

package/dist/LineChart/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/utils.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 { ECharts as EChartsInstance } from 'echarts/core';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  startIndex: number;\n  endIndex: number;\n}\n\n// enable dataZoom without requring user to click toolbox icon\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n// restore chart to original state before zoom or other actions were dispatched\n// TODO: support incremental unzoom instead of restore to original state\nexport function restoreChart(chart: EChartsInstance) {\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n// fallback when xAxis time range not passed as prop\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n\n// determines time granularity for axis labels, defaults to hh:mm\nexport function getFormattedDate(value: number, rangeMs: number) {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = {\n    hour: 'numeric',\n    minute: 'numeric',\n    hourCycle: 'h23',\n  };\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n"],"names":["enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","getDateRange","data","defaultRange","lastDatum","getFormattedDate","value","rangeMs","dateFormatOptions","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","format","replace"],"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;AAWjC,8DAA8D;AAC9D,OAAO,SAASA,cAAc,CAACC,KAAsB,EAAE;IACrD,MAAMC,UAAU,GAAGD,KAAK,CAAC,QAAQ,CAAC,AAAC;IACnC,IAAIC,UAAU,KAAKC,SAAS,EAAE,OAAO;IACrC,IAAID,UAAU,CAACE,MAAM,CAACC,OAAO,KAAKF,SAAS,IAAID,UAAU,CAACE,MAAM,CAACC,OAAO,CAACC,MAAM,GAAG,CAAC,EAAE;QACnF,wGAAwG;QACxG,IAAIJ,UAAU,CAACE,MAAM,CAACC,OAAO,CAAC,CAAC,CAAC,CAACE,OAAO,CAACC,QAAQ,CAACC,UAAU,CAACC,IAAI,KAAK,QAAQ,EAAE;YAC9ET,KAAK,CAACU,cAAc,CAAC;gBACnBC,IAAI,EAAE,kBAAkB;gBACxBC,GAAG,EAAE,gBAAgB;gBACrBC,oBAAoB,EAAE,IAAI;aAC3B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;AACH,CAAC;AAED,+EAA+E;AAC/E,wEAAwE;AACxE,OAAO,SAASC,YAAY,CAACd,KAAsB,EAAE;IACnDA,KAAK,CAACU,cAAc,CAAC;QACnBC,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;AACL,CAAC;AAED,oDAAoD;AACpD,OAAO,SAASI,YAAY,CAACC,IAAc,EAAE;IAC3C,MAAMC,YAAY,GAAG,OAAO,AAAC,EAAC,aAAa;IAC3C,IAAID,IAAI,CAACX,MAAM,KAAK,CAAC,EAAE,OAAOY,YAAY,CAAC;IAC3C,MAAMC,SAAS,GAAGF,IAAI,CAACA,IAAI,CAACX,MAAM,GAAG,CAAC,CAAC,AAAC;IACxC,IAAIW,IAAI,CAAC,CAAC,CAAC,KAAKd,SAAS,IAAIgB,SAAS,KAAKhB,SAAS,EAAE,OAAOe,YAAY,CAAC;IAC1E,OAAOC,SAAS,GAAGF,IAAI,CAAC,CAAC,CAAC,CAAC;AAC7B,CAAC;AAED,iEAAiE;AACjE,OAAO,SAASG,gBAAgB,CAACC,KAAa,EAAEC,OAAe,EAAE;IAC/D,MAAMC,iBAAiB,GAA+B;QACpDC,IAAI,EAAE,SAAS;QACfC,MAAM,EAAE,SAAS;QACjBC,SAAS,EAAE,KAAK;KACjB,AAAC;IACF,MAAMC,WAAW,GAAG,OAAO,AAAC;IAC5B,MAAMC,KAAK,GAAG,QAAQ,AAAC;IACvB,IAAIN,OAAO,IAAIK,WAAW,EAAE;QAC1BJ,iBAAiB,CAACM,MAAM,GAAG,SAAS,CAAC;IACvC,OAAO,IAAIP,OAAO,IAAIM,KAAK,EAAE;QAC3BL,iBAAiB,CAACO,KAAK,GAAG,SAAS,CAAC;QACpCP,iBAAiB,CAACQ,GAAG,GAAG,SAAS,CAAC;IACpC,CAAC;IACD,MAAMC,WAAW,GAAG,IAAIC,IAAI,CAACC,cAAc,CAAC/B,SAAS,EAAEoB,iBAAiB,CAAC,AAAC;IAC1E,wCAAwC;IACxC,OAAOS,WAAW,CAACG,MAAM,CAACd,KAAK,CAAC,CAACe,OAAO,QAAQ,GAAG,CAAC,CAAC;AACvD,CAAC"}
+{"version":3,"sources":["../../src/LineChart/utils.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 { merge } from 'lodash-es';\nimport type { YAXisComponentOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions } from '../model';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  startIndex: number;\n  endIndex: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon\n */\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance) {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/**\n * Calculate date range, used as a fallback when xAxis time range not passed as prop\n */\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n\n/*\n * Determines time granularity for axis labels, defaults to hh:mm\n */\nexport function getFormattedDate(value: number, rangeMs: number) {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = {\n    hour: 'numeric',\n    minute: 'numeric',\n    hourCycle: 'h23',\n  };\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n\n/*\n * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future\n */\nexport function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions) {\n  // TODO: support alternate yAxis that shows on right side\n  const Y_AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number) => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(Y_AXIS_DEFAULT, yAxis)];\n}\n"],"names":["merge","formatValue","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","getDateRange","data","defaultRange","lastDatum","getFormattedDate","value","rangeMs","dateFormatOptions","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","format","replace","getYAxes","yAxis","unit","Y_AXIS_DEFAULT","boundaryGap","axisLabel","formatter"],"mappings":"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"}

package/dist/YAxisLabel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface YAxisLabelProps {
+    name: string;
+    height: number;
+}
+export declare function YAxisLabel({ name, height }: YAxisLabelProps): JSX.Element;
+export {};
+//# sourceMappingURL=YAxisLabel.d.ts.map

package/dist/YAxisLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YAxisLabel.d.ts","sourceRoot":"","sources":["../src/YAxisLabel.tsx"],"names":[],"mappings":";AAeA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,eAAe,eA0B3D"}

package/dist/YAxisLabel.js

@@ -0,0 +1,39 @@
+// Copyright 2022 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 } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+export function YAxisLabel({ name , height  }) {
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            display: 'inline-block',
+            maxWidth: height,
+            position: 'absolute',
+            top: '45%',
+            transform: 'translateX(-50%) rotate(-90deg)',
+            transformOrigin: 'top',
+            textAlign: 'center',
+            zIndex: 1
+        },
+        children: /*#__PURE__*/ _jsx(Typography, {
+            variant: "body1",
+            sx: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: name
+        })
+    });
+}
+
+//# sourceMappingURL=YAxisLabel.js.map

package/dist/YAxisLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/YAxisLabel.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 { Box, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: '45%',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","whiteSpace","overflow","textOverflow"],"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,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAOhD,OAAO,SAASC,UAAU,CAAC,EAAEC,IAAI,CAAA,EAAEC,MAAM,CAAA,EAAmB,EAAE;IAC5D,qBACE,KAACJ,GAAG;QACFK,EAAE,EAAE;YACFC,OAAO,EAAE,cAAc;YACvBC,QAAQ,EAAEH,MAAM;YAChBI,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,SAAS,EAAE,iCAAiC;YAC5CC,eAAe,EAAE,KAAK;YACtBC,SAAS,EAAE,QAAQ;YACnBC,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACZ,UAAU;YACTa,OAAO,EAAC,OAAO;YACfT,EAAE,EAAE;gBACFU,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEAd,IAAI;UACM;MACT,CACN;AACJ,CAAC"}

package/dist/cjs/LineChart/LineChart.js

@@ -28,7 +28,6 @@ const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
 const _graph = require("../model/graph");
-const _units = require("../model/units");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _tooltip = require("../Tooltip/Tooltip");
 const _utils = require("./utils");
@@ -46,7 +45,7 @@ const _utils = require("./utils");
     _components.VisualMapComponent,
     _renderers.CanvasRenderer
 ]);
-function LineChart({ height , data , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
+function LineChart({ height , data , yAxis , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -132,18 +131,7 @@ function LineChart({ height , data , unit , grid , legend , visualMap , onDataZo
                     }
                 }
             },
-            yAxis: {
-                type: 'value',
-                boundaryGap: [
-                    0,
-                    '10%'
-                ],
-                axisLabel: {
-                    formatter: (value)=>{
-                        return (0, _units.formatValue)(value, unit);
-                    }
-                }
-            },
+            yAxis: (0, _utils.getYAxes)(yAxis, unit),
             animation: false,
             tooltip: {
                 show: showPointsOnHover,
@@ -168,6 +156,7 @@ function LineChart({ height , data , unit , grid , legend , visualMap , onDataZo
         return option;
     }, [
         data,
+        yAxis,
         grid,
         legend,
         visualMap

package/dist/cjs/LineChart/utils.js

@@ -24,8 +24,11 @@ _export(exports, {
     enableDataZoom: ()=>enableDataZoom,
     restoreChart: ()=>restoreChart,
     getDateRange: ()=>getDateRange,
-    getFormattedDate: ()=>getFormattedDate
+    getFormattedDate: ()=>getFormattedDate,
+    getYAxes: ()=>getYAxes
 });
+const _lodashEs = require("lodash-es");
+const _model = require("../model");
 function enableDataZoom(chart) {
     const chartModel = chart['_model'];
     if (chartModel === undefined) return;
@@ -41,6 +44,7 @@ function enableDataZoom(chart) {
     }
 }
 function restoreChart(chart) {
+    // TODO: support incremental unzoom instead of restore to original state
     chart.dispatchAction({
         type: 'restore'
     });
@@ -70,3 +74,21 @@ function getFormattedDate(value, rangeMs) {
     // remove comma when month / day present
     return DATE_FORMAT.format(value).replace(/, /g, ' ');
 }
+function getYAxes(yAxis, unit) {
+    // TODO: support alternate yAxis that shows on right side
+    const Y_AXIS_DEFAULT = {
+        type: 'value',
+        boundaryGap: [
+            0,
+            '10%'
+        ],
+        axisLabel: {
+            formatter: (value)=>{
+                return (0, _model.formatValue)(value, unit);
+            }
+        }
+    };
+    return [
+        (0, _lodashEs.merge)(Y_AXIS_DEFAULT, yAxis)
+    ];
+}

package/dist/cjs/YAxisLabel.js

@@ -0,0 +1,45 @@
+// Copyright 2022 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "YAxisLabel", {
+    enumerable: true,
+    get: ()=>YAxisLabel
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function YAxisLabel({ name , height  }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+            display: 'inline-block',
+            maxWidth: height,
+            position: 'absolute',
+            top: '45%',
+            transform: 'translateX(-50%) rotate(-90deg)',
+            transformOrigin: 'top',
+            textAlign: 'center',
+            zIndex: 1
+        },
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body1",
+            sx: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: name
+        })
+    });
+}

package/dist/cjs/index.js

@@ -27,6 +27,7 @@ _exportStar(require("./LineChart"), exports);
 _exportStar(require("./OptionsEditorLayout"), exports);
 _exportStar(require("./StatChart"), exports);
 _exportStar(require("./UnitSelector"), exports);
+_exportStar(require("./YAxisLabel"), exports);
 _exportStar(require("./context/ChartsThemeProvider"), exports);
 _exportStar(require("./utils"), exports);
 _exportStar(require("./model"), exports);

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from './LineChart';
 export * from './OptionsEditorLayout';
 export * from './StatChart';
 export * from './UnitSelector';
+export * from './YAxisLabel';
 export * from './context/ChartsThemeProvider';
 export * from './utils';
 export * from './model';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -23,6 +23,7 @@ export * from './LineChart';
 export * from './OptionsEditorLayout';
 export * from './StatChart';
 export * from './UnitSelector';
+export * from './YAxisLabel';
 export * from './context/ChartsThemeProvider';
 export * from './utils';
 export * from './model';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.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\nexport * from './DateTimeRangePicker';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './StatChart';\nexport * from './UnitSelector';\nexport * from './context/ChartsThemeProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\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,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
+{"version":3,"sources":["../src/index.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\nexport * from './DateTimeRangePicker';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './StatChart';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\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,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/package.json

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