@perses-dev/components 0.14.0 → 0.16.0

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}></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} 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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"}

package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type OptionsEditorColumnProps = {
+    /**
+     * Components to render in the column. These will usually be
+     * `OptionsEditorGroup` components.
+     */
+    children: React.ReactNode;
+};
+/**
+ * Lay out content in a column within panel options.
+ */
+export declare const OptionsEditorColumn: ({ children }: OptionsEditorColumnProps) => JSX.Element;
+//# sourceMappingURL=OptionsEditorColumn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsEditorColumn.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorColumn.tsx"],"names":[],"mappings":";AAeA,oBAAY,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,iBAAkB,wBAAwB,gBAMzE,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorColumn.js

@@ -0,0 +1,28 @@
+// 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 { Grid, Stack } from '@mui/material';
+/**
+ * Lay out content in a column within panel options.
+ */ export const OptionsEditorColumn = ({ children  })=>{
+    return /*#__PURE__*/ _jsx(Grid, {
+        item: true,
+        xs: 4,
+        children: /*#__PURE__*/ _jsx(Stack, {
+            spacing: 3,
+            children: children
+        })
+    });
+};
+
+//# sourceMappingURL=OptionsEditorColumn.js.map

package/dist/OptionsEditorLayout/OptionsEditorColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorColumn.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 { Grid, Stack } from '@mui/material';\n\nexport type OptionsEditorColumnProps = {\n  /**\n   * Components to render in the column. These will usually be\n   * `OptionsEditorGroup` components.\n   */\n  children: React.ReactNode;\n};\n\n/**\n * Lay out content in a column within panel options.\n */\nexport const OptionsEditorColumn = ({ children }: OptionsEditorColumnProps) => {\n  return (\n    <Grid item xs={4}>\n      <Stack spacing={3}>{children}</Stack>\n    </Grid>\n  );\n};\n"],"names":["Grid","Stack","OptionsEditorColumn","children","item","xs","spacing"],"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,IAAI,EAAEC,KAAK,QAAQ,eAAe,CAAC;AAU5C;;CAEC,GACD,OAAO,MAAMC,mBAAmB,GAAG,CAAC,EAAEC,QAAQ,CAAA,EAA4B,GAAK;IAC7E,qBACE,KAACH,IAAI;QAACI,IAAI;QAACC,EAAE,EAAE,CAAC;kBACd,cAAA,KAACJ,KAAK;YAACK,OAAO,EAAE,CAAC;sBAAGH,QAAQ;UAAS;MAChC,CACP;AACJ,CAAC,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts

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

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

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

package/dist/OptionsEditorLayout/OptionsEditorControl.js

@@ -0,0 +1,50 @@
+// 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, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormLabel, Stack, Box } from '@mui/material';
+import React from 'react';
+import { useId } from '../utils';
+export const OptionsEditorControl = ({ label , control  })=>{
+    // Make sure we have a unique ID we can use for associating labels and
+    // controls for a11y.
+    const generatedControlId = useId('EditorSectionControl');
+    const controlId = `${generatedControlId}-control`;
+    const controlProps = {
+        id: controlId
+    };
+    return /*#__PURE__*/ _jsx(FormControl, {
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            children: [
+                /*#__PURE__*/ _jsx(FormLabel, {
+                    htmlFor: controlId,
+                    children: label
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        width: '160px',
+                        textAlign: 'right'
+                    },
+                    children: [
+                        " ",
+                        /*#__PURE__*/ React.cloneElement(control, controlProps)
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=OptionsEditorControl.js.map

package/dist/OptionsEditorLayout/OptionsEditorControl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorControl.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 { FormControl, FormLabel, FormControlLabelProps, Stack, Box } from '@mui/material';\nimport React from 'react';\nimport { useId } from '../utils';\n\nexport type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'>;\n\nexport const OptionsEditorControl = ({ label, control }: OptionsEditorControlProps) => {\n  // Make sure we have a unique ID we can use for associating labels and\n  // controls for a11y.\n  const generatedControlId = useId('EditorSectionControl');\n  const controlId = `${generatedControlId}-control`;\n\n  const controlProps = {\n    id: controlId,\n  };\n\n  return (\n    <FormControl>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\">\n        <FormLabel htmlFor={controlId}>{label}</FormLabel>\n        <Box sx={{ width: '160px', textAlign: 'right' }}> {React.cloneElement(control, controlProps)}</Box>\n      </Stack>\n    </FormControl>\n  );\n};\n"],"names":["FormControl","FormLabel","Stack","Box","React","useId","OptionsEditorControl","label","control","generatedControlId","controlId","controlProps","id","direction","alignItems","justifyContent","htmlFor","sx","width","textAlign","cloneElement"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAyBC,KAAK,EAAEC,GAAG,QAAQ,eAAe,CAAC;AAC1F,OAAOC,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,KAAK,QAAQ,UAAU,CAAC;AAIjC,OAAO,MAAMC,oBAAoB,GAAG,CAAC,EAAEC,KAAK,CAAA,EAAEC,OAAO,CAAA,EAA6B,GAAK;IACrF,sEAAsE;IACtE,qBAAqB;IACrB,MAAMC,kBAAkB,GAAGJ,KAAK,CAAC,sBAAsB,CAAC,AAAC;IACzD,MAAMK,SAAS,GAAG,CAAC,EAAED,kBAAkB,CAAC,QAAQ,CAAC,AAAC;IAElD,MAAME,YAAY,GAAG;QACnBC,EAAE,EAAEF,SAAS;KACd,AAAC;IAEF,qBACE,KAACV,WAAW;kBACV,cAAA,MAACE,KAAK;YAACW,SAAS,EAAC,KAAK;YAACC,UAAU,EAAC,QAAQ;YAACC,cAAc,EAAC,eAAe;;8BACvE,KAACd,SAAS;oBAACe,OAAO,EAAEN,SAAS;8BAAGH,KAAK;kBAAa;8BAClD,MAACJ,GAAG;oBAACc,EAAE,EAAE;wBAAEC,KAAK,EAAE,OAAO;wBAAEC,SAAS,EAAE,OAAO;qBAAE;;wBAAE,GAAC;sCAACf,KAAK,CAACgB,YAAY,CAACZ,OAAO,EAAEG,YAAY,CAAC;;kBAAO;;UAC7F;MACI,CACd;AACJ,CAAC,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type OptionsEditorGridProps = {
+    /**
+     * 1-3 `OptionsEditorColumn` components to render content in columns.
+     */
+    children: React.ReactNode;
+};
+/**
+ * Top level grid container used to lay out content for editing in panel
+ * options.
+ */
+export declare const OptionsEditorGrid: ({ children }: OptionsEditorGridProps) => JSX.Element;
+//# sourceMappingURL=OptionsEditorGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsEditorGrid.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorGrid.tsx"],"names":[],"mappings":";AAeA,oBAAY,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,iBAAkB,sBAAsB,gBAMrE,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorGrid.js

@@ -0,0 +1,26 @@
+// 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 { Grid } from '@mui/material';
+/**
+ * Top level grid container used to lay out content for editing in panel
+ * options.
+ */ export const OptionsEditorGrid = ({ children  })=>{
+    return /*#__PURE__*/ _jsx(Grid, {
+        container: true,
+        spacing: 8,
+        children: children
+    });
+};
+
+//# sourceMappingURL=OptionsEditorGrid.js.map

package/dist/OptionsEditorLayout/OptionsEditorGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorGrid.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 { Grid } from '@mui/material';\n\nexport type OptionsEditorGridProps = {\n  /**\n   * 1-3 `OptionsEditorColumn` components to render content in columns.\n   */\n  children: React.ReactNode;\n};\n\n/**\n * Top level grid container used to lay out content for editing in panel\n * options.\n */\nexport const OptionsEditorGrid = ({ children }: OptionsEditorGridProps) => {\n  return (\n    <Grid container spacing={8}>\n      {children}\n    </Grid>\n  );\n};\n"],"names":["Grid","OptionsEditorGrid","children","container","spacing"],"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,IAAI,QAAQ,eAAe,CAAC;AASrC;;;CAGC,GACD,OAAO,MAAMC,iBAAiB,GAAG,CAAC,EAAEC,QAAQ,CAAA,EAA0B,GAAK;IACzE,qBACE,KAACF,IAAI;QAACG,SAAS;QAACC,OAAO,EAAE,CAAC;kBACvBF,QAAQ;MACJ,CACP;AACJ,CAAC,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type OptionsEditorGroupProps = {
+    /**
+     * Text that communicates the purpose of the grouping.
+     */
+    title: string;
+    children: React.ReactNode;
+};
+/**
+ * Group similar content within panel options.
+ */
+export declare const OptionsEditorGroup: ({ title, children }: OptionsEditorGroupProps) => JSX.Element;
+//# sourceMappingURL=OptionsEditorGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsEditorGroup.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorGroup.tsx"],"names":[],"mappings":";AAeA,oBAAY,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,wBAAyB,uBAAuB,gBAe9E,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorGroup.js

@@ -0,0 +1,36 @@
+// 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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography, Stack } from '@mui/material';
+/**
+ * Group similar content within panel options.
+ */ export const OptionsEditorGroup = ({ title , children  })=>{
+    return /*#__PURE__*/ _jsxs(Box, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "overline",
+                component: "h4",
+                borderBottom: 1,
+                borderColor: "grey.300",
+                marginBottom: (theme)=>theme.spacing(1),
+                children: title
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                spacing: 1,
+                children: children
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=OptionsEditorGroup.js.map

package/dist/OptionsEditorLayout/OptionsEditorGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorGroup.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, Stack } from '@mui/material';\n\nexport type OptionsEditorGroupProps = {\n  /**\n   * Text that communicates the purpose of the grouping.\n   */\n  title: string;\n  children: React.ReactNode;\n};\n\n/**\n * Group similar content within panel options.\n */\nexport const OptionsEditorGroup = ({ title, children }: OptionsEditorGroupProps) => {\n  return (\n    <Box>\n      <Typography\n        variant=\"overline\"\n        component=\"h4\"\n        borderBottom={1}\n        borderColor=\"grey.300\"\n        marginBottom={(theme) => theme.spacing(1)}\n      >\n        {title}\n      </Typography>\n      <Stack spacing={1}>{children}</Stack>\n    </Box>\n  );\n};\n"],"names":["Box","Typography","Stack","OptionsEditorGroup","title","children","variant","component","borderBottom","borderColor","marginBottom","theme","spacing"],"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,EAAEC,KAAK,QAAQ,eAAe,CAAC;AAUvD;;CAEC,GACD,OAAO,MAAMC,kBAAkB,GAAG,CAAC,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAA2B,GAAK;IAClF,qBACE,MAACL,GAAG;;0BACF,KAACC,UAAU;gBACTK,OAAO,EAAC,UAAU;gBAClBC,SAAS,EAAC,IAAI;gBACdC,YAAY,EAAE,CAAC;gBACfC,WAAW,EAAC,UAAU;gBACtBC,YAAY,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;0BAExCR,KAAK;cACK;0BACb,KAACF,KAAK;gBAACU,OAAO,EAAE,CAAC;0BAAGP,QAAQ;cAAS;;MACjC,CACN;AACJ,CAAC,CAAC"}

package/dist/OptionsEditorLayout/index.d.ts

@@ -0,0 +1,5 @@
+export * from './OptionsEditorColumn';
+export * from './OptionsEditorControl';
+export * from './OptionsEditorGrid';
+export * from './OptionsEditorGroup';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/OptionsEditorLayout/index.js

@@ -0,0 +1,18 @@
+// 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.
+export * from './OptionsEditorColumn';
+export * from './OptionsEditorControl';
+export * from './OptionsEditorGrid';
+export * from './OptionsEditorGroup';
+
+//# sourceMappingURL=index.js.map

package/dist/OptionsEditorLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/OptionsEditorLayout/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 './OptionsEditorColumn';\nexport * from './OptionsEditorControl';\nexport * from './OptionsEditorGrid';\nexport * from './OptionsEditorGroup';\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,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/Tooltip/SeriesInfo.d.ts

@@ -2,6 +2,7 @@
 interface SeriesInfoProps {
     seriesName: string;
     y: number;
+    formattedY: string;
     markerColor: string;
     totalSeries: number;
     wrapLabels?: boolean;

package/dist/Tooltip/SeriesInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/Tooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAiBA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkHhD"}
+{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/Tooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAiBA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkHhD"}

package/dist/Tooltip/SeriesInfo.js

@@ -15,7 +15,7 @@ import { Box, Divider, Stack, Typography } from '@mui/material';
 import { SeriesMarker } from './SeriesMarker';
 import { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';
 export function SeriesInfo(props) {
-    const { seriesName , y , markerColor , totalSeries , wrapLabels  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
     // TODO (sjcobb): regex to remove __name__, improve series labels
     const formattedSeriesLabels = seriesName.replace(/[{}"]/g, '');
     if (totalSeries === 1) {
@@ -48,7 +48,7 @@ export function SeriesInfo(props) {
                                             fontWeight: 700,
                                             paddingLeft: '2px'
                                         }),
-                                    children: y
+                                    children: formattedY
                                 })
                             ]
                         })
@@ -134,7 +134,7 @@ export function SeriesInfo(props) {
                     textAlign: 'right',
                     verticalAlign: 'top'
                 },
-                children: y
+                children: formattedY
             })
         ]
     });

package/dist/Tooltip/SeriesInfo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltip/SeriesInfo.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, Divider, Stack, Typography } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\nimport { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';\n\ninterface SeriesInfoProps {\n  seriesName: string;\n  y: number;\n  markerColor: string;\n  totalSeries: number;\n  wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps) {\n  const { seriesName, y, markerColor, totalSeries, wrapLabels } = props;\n\n  // TODO (sjcobb): regex to remove __name__, improve series labels\n  const formattedSeriesLabels = seriesName.replace(/[{}\"]/g, '');\n\n  if (totalSeries === 1) {\n    const jsonFormattedSeries = seriesName[0] === '{' ? true : false;\n    return (\n      <Stack spacing={0.5}>\n        <Box\n          sx={(theme) => ({\n            height: '16px',\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'left',\n            color: theme.palette.common.white,\n            fontSize: '11px',\n          })}\n        >\n          <SeriesMarker markerColor={markerColor} />\n          <Box component=\"span\">\n            value:\n            <Box\n              component=\"span\"\n              sx={(theme) => ({\n                color: theme.palette.common.white,\n                fontWeight: 700,\n                paddingLeft: '2px',\n              })}\n            >\n              {y}\n            </Box>\n          </Box>\n        </Box>\n        <Divider\n          sx={(theme) => ({\n            borderColor: theme.palette.grey['500'],\n          })}\n        />\n        <Box\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedSeriesLabels.split(',').map((name) => {\n            if (name) {\n              const [key, value] = jsonFormattedSeries ? name.split(':') : name.split('=');\n              const formattedKey = value !== undefined ? `${key}: ` : key;\n              return (\n                <Box key={name} sx={{ display: 'flex', gap: '4px' }}>\n                  <Typography sx={{ fontSize: '11px' }}>{formattedKey}</Typography>\n                  <Typography\n                    sx={(theme) => ({\n                      color: theme.palette.common.white,\n                      fontWeight: 700,\n                      fontSize: '11px',\n                    })}\n                  >\n                    {value}\n                  </Typography>\n                </Box>\n              );\n            }\n          })}\n        </Box>\n      </Stack>\n    );\n  }\n\n  const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ').replace(/[:=]/g, ': ');\n  return (\n    <Box\n      sx={{\n        display: 'table-row',\n        paddingTop: 0.5,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'table-cell',\n          maxWidth: '520px',\n        }}\n      >\n        <SeriesMarker markerColor={markerColor} />\n        <Box\n          component=\"span\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n            display: 'inline-block',\n            maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n            width: 'calc(100% - 20px)',\n          })}\n        >\n          {inlineSeriesLabels}\n        </Box>\n      </Box>\n      <Box\n        sx={{\n          display: 'table-cell',\n          fontWeight: '700',\n          paddingLeft: 1.5,\n          textAlign: 'right',\n          verticalAlign: 'top',\n        }}\n      >\n        {y}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","Divider","Stack","Typography","SeriesMarker","TOOLTIP_LABELS_MAX_WIDTH","SeriesInfo","props","seriesName","y","markerColor","totalSeries","wrapLabels","formattedSeriesLabels","replace","jsonFormattedSeries","spacing","sx","theme","height","display","flexDirection","alignItems","justifyContent","color","palette","common","white","fontSize","component","fontWeight","paddingLeft","borderColor","grey","split","map","name","key","value","formattedKey","undefined","gap","inlineSeriesLabels","paddingTop","maxWidth","overflow","textOverflow","whiteSpace","width","textAlign","verticalAlign"],"mappings":"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"}
+{"version":3,"sources":["../../src/Tooltip/SeriesInfo.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, Divider, Stack, Typography } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\nimport { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';\n\ninterface SeriesInfoProps {\n  seriesName: string;\n  y: number;\n  formattedY: string;\n  markerColor: string;\n  totalSeries: number;\n  wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps) {\n  const { seriesName, formattedY, markerColor, totalSeries, wrapLabels } = props;\n\n  // TODO (sjcobb): regex to remove __name__, improve series labels\n  const formattedSeriesLabels = seriesName.replace(/[{}\"]/g, '');\n\n  if (totalSeries === 1) {\n    const jsonFormattedSeries = seriesName[0] === '{' ? true : false;\n    return (\n      <Stack spacing={0.5}>\n        <Box\n          sx={(theme) => ({\n            height: '16px',\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'left',\n            color: theme.palette.common.white,\n            fontSize: '11px',\n          })}\n        >\n          <SeriesMarker markerColor={markerColor} />\n          <Box component=\"span\">\n            value:\n            <Box\n              component=\"span\"\n              sx={(theme) => ({\n                color: theme.palette.common.white,\n                fontWeight: 700,\n                paddingLeft: '2px',\n              })}\n            >\n              {formattedY}\n            </Box>\n          </Box>\n        </Box>\n        <Divider\n          sx={(theme) => ({\n            borderColor: theme.palette.grey['500'],\n          })}\n        />\n        <Box\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedSeriesLabels.split(',').map((name) => {\n            if (name) {\n              const [key, value] = jsonFormattedSeries ? name.split(':') : name.split('=');\n              const formattedKey = value !== undefined ? `${key}: ` : key;\n              return (\n                <Box key={name} sx={{ display: 'flex', gap: '4px' }}>\n                  <Typography sx={{ fontSize: '11px' }}>{formattedKey}</Typography>\n                  <Typography\n                    sx={(theme) => ({\n                      color: theme.palette.common.white,\n                      fontWeight: 700,\n                      fontSize: '11px',\n                    })}\n                  >\n                    {value}\n                  </Typography>\n                </Box>\n              );\n            }\n          })}\n        </Box>\n      </Stack>\n    );\n  }\n\n  const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ').replace(/[:=]/g, ': ');\n  return (\n    <Box\n      sx={{\n        display: 'table-row',\n        paddingTop: 0.5,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'table-cell',\n          maxWidth: '520px',\n        }}\n      >\n        <SeriesMarker markerColor={markerColor} />\n        <Box\n          component=\"span\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n            display: 'inline-block',\n            maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n            width: 'calc(100% - 20px)',\n          })}\n        >\n          {inlineSeriesLabels}\n        </Box>\n      </Box>\n      <Box\n        sx={{\n          display: 'table-cell',\n          fontWeight: '700',\n          paddingLeft: 1.5,\n          textAlign: 'right',\n          verticalAlign: 'top',\n        }}\n      >\n        {formattedY}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","Divider","Stack","Typography","SeriesMarker","TOOLTIP_LABELS_MAX_WIDTH","SeriesInfo","props","seriesName","formattedY","markerColor","totalSeries","wrapLabels","formattedSeriesLabels","replace","jsonFormattedSeries","spacing","sx","theme","height","display","flexDirection","alignItems","justifyContent","color","palette","common","white","fontSize","component","fontWeight","paddingLeft","borderColor","grey","split","map","name","key","value","formattedKey","undefined","gap","inlineSeriesLabels","paddingTop","maxWidth","overflow","textOverflow","whiteSpace","width","textAlign","verticalAlign"],"mappings":"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"}

package/dist/Tooltip/Tooltip.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { EChartsDataFormat } from '../model/graph';
+import { EChartsDataFormat, UnitOptions } from '../model';
 interface TooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     chartData: EChartsDataFormat;
     pinTooltip: boolean;
     wrapLabels?: boolean;
+    unit?: UnitOptions;
 }
 declare const Tooltip: React.NamedExoticComponent<TooltipProps>;
 export { Tooltip };

package/dist/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMnD,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,0CAqDX,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,QAAA,MAAM,OAAO,0CAqDX,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/Tooltip/Tooltip.js

@@ -17,14 +17,14 @@ import { getFocusedSeriesData } from './focused-series';
 import { TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
 import { TooltipContent } from './TooltipContent';
 import { assembleTransform } from './utils';
-const Tooltip = /*#__PURE__*/ React.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip  }) {
+const Tooltip = /*#__PURE__*/ React.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = useState(null);
     const mousePos = useMousePosition();
     if (mousePos === null || mousePos.target === null) return null;
     // ensure user is hovering over a chart before checking for nearby series
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    const focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart);
+    const focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit);
     var ref;
     const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : 750;
     var ref1;

package/dist/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltip/Tooltip.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, { useState } from 'react';\nimport { Box, Portal } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { EChartsDataFormat } from '../model/graph';\nimport { getFocusedSeriesData } from './focused-series';\nimport { CursorCoordinates, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';\nimport { TooltipContent } from './TooltipContent';\nimport { assembleTransform } from './utils';\n\ninterface TooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  pinTooltip: boolean;\n  wrapLabels?: boolean;\n}\n\nconst Tooltip = React.memo(function Tooltip({ chartRef, chartData, wrapLabels, pinTooltip }: TooltipProps) {\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // ensure user is hovering over a chart before checking for nearby series\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart);\n  const chartWidth = chart?.getWidth() ?? 750;\n  const chartHeight = chart?.getHeight() ?? 230;\n  const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);\n\n  if (focusedSeries.length === 0) {\n    return null;\n  }\n\n  if (pinTooltip === true && pinnedPos === null) {\n    setPinnedPos(mousePos);\n  }\n\n  return (\n    <Portal>\n      <Box\n        sx={(theme) => ({\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <TooltipContent focusedSeries={focusedSeries} wrapLabels={wrapLabels} />\n      </Box>\n    </Portal>\n  );\n});\n\nexport { Tooltip };\n"],"names":["React","useState","Box","Portal","getFocusedSeriesData","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","useMousePosition","TooltipContent","assembleTransform","Tooltip","memo","chartRef","chartData","wrapLabels","pinTooltip","pinnedPos","setPinnedPos","mousePos","target","tagName","chart","current","focusedSeries","chartWidth","getWidth","chartHeight","getHeight","cursorTransform","length","sx","theme","maxWidth","maxHeight","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform"],"mappings":"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"}
+{"version":3,"sources":["../../src/Tooltip/Tooltip.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, { useState } from 'react';\nimport { Box, Portal } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { getFocusedSeriesData } from './focused-series';\nimport { CursorCoordinates, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';\nimport { TooltipContent } from './TooltipContent';\nimport { assembleTransform } from './utils';\n\ninterface TooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  pinTooltip: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n}\n\nconst Tooltip = React.memo(function Tooltip({ chartRef, chartData, wrapLabels, pinTooltip, unit }: TooltipProps) {\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // ensure user is hovering over a chart before checking for nearby series\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit);\n  const chartWidth = chart?.getWidth() ?? 750;\n  const chartHeight = chart?.getHeight() ?? 230;\n  const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);\n\n  if (focusedSeries.length === 0) {\n    return null;\n  }\n\n  if (pinTooltip === true && pinnedPos === null) {\n    setPinnedPos(mousePos);\n  }\n\n  return (\n    <Portal>\n      <Box\n        sx={(theme) => ({\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <TooltipContent focusedSeries={focusedSeries} wrapLabels={wrapLabels} />\n      </Box>\n    </Portal>\n  );\n});\n\nexport { Tooltip };\n"],"names":["React","useState","Box","Portal","getFocusedSeriesData","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","useMousePosition","TooltipContent","assembleTransform","Tooltip","memo","chartRef","chartData","wrapLabels","pinTooltip","unit","pinnedPos","setPinnedPos","mousePos","target","tagName","chart","current","focusedSeries","chartWidth","getWidth","chartHeight","getHeight","cursorTransform","length","sx","theme","maxWidth","maxHeight","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform"],"mappings":"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"}

package/dist/Tooltip/TooltipContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/Tooltip/TooltipContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,UAAU,mBAAmB;IAC3B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAgExD"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/Tooltip/TooltipContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,UAAU,mBAAmB;IAC3B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAiExD"}

package/dist/Tooltip/TooltipContent.js

@@ -67,12 +67,13 @@ export function TooltipContent(props) {
                     sx: {
                         display: 'table'
                     },
-                    children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , markerColor  })=>{
+                    children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor  })=>{
                         if (datumIdx === null || seriesIdx === null) return null;
                         const key = seriesIdx.toString() + datumIdx.toString();
                         return /*#__PURE__*/ _jsx(SeriesInfo, {
                             seriesName: seriesName,
                             y: y,
+                            formattedY: formattedY,
                             markerColor: markerColor,
                             totalSeries: sortedFocusedSeries.length,
                             wrapLabels: wrapLabels

package/dist/Tooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltip/TooltipContent.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 { useMemo } from 'react';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\ninterface TooltipContentProps {\n  focusedSeries: FocusedSeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { focusedSeries, wrapLabels } = props;\n\n  const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n  const formatTimeSeriesHeader = (timeString: string) => {\n    const [month, year, time] = timeString.split(',');\n    return (\n      <>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {month}, {year} –\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{time}</strong>\n        </Typography>\n      </>\n    );\n  };\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (focusedSeries === null) return null;\n    return focusedSeries.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [focusedSeries]);\n\n  if (sortedFocusedSeries !== null && seriesTime !== null) {\n    return (\n      <Stack py={1} px={1.5} spacing={0.5}>\n        <Typography variant=\"caption\">{formatTimeSeriesHeader(seriesTime)}</Typography>\n        <Divider\n          sx={(theme) => ({\n            borderColor: theme.palette.grey['500'],\n          })}\n        />\n        <Box\n          sx={{\n            display: 'table',\n          }}\n        >\n          {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, markerColor }) => {\n            if (datumIdx === null || seriesIdx === null) return null;\n            const key = seriesIdx.toString() + datumIdx.toString();\n\n            return (\n              <SeriesInfo\n                key={key}\n                seriesName={seriesName}\n                y={y}\n                markerColor={markerColor}\n                totalSeries={sortedFocusedSeries.length}\n                wrapLabels={wrapLabels}\n              />\n            );\n          })}\n        </Box>\n      </Stack>\n    );\n  } else {\n    return <></>;\n  }\n}\n"],"names":["useMemo","Box","Divider","Stack","Typography","SeriesInfo","TooltipContent","props","focusedSeries","wrapLabels","seriesTime","date","formatTimeSeriesHeader","timeString","month","year","time","split","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","px","spacing","borderColor","grey","display","map","datumIdx","seriesIdx","seriesName","markerColor","key","toString","totalSeries","length"],"mappings":"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"}
+{"version":3,"sources":["../../src/Tooltip/TooltipContent.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 { useMemo } from 'react';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\ninterface TooltipContentProps {\n  focusedSeries: FocusedSeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { focusedSeries, wrapLabels } = props;\n\n  const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n  const formatTimeSeriesHeader = (timeString: string) => {\n    const [month, year, time] = timeString.split(',');\n    return (\n      <>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {month}, {year} –\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{time}</strong>\n        </Typography>\n      </>\n    );\n  };\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (focusedSeries === null) return null;\n    return focusedSeries.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [focusedSeries]);\n\n  if (sortedFocusedSeries !== null && seriesTime !== null) {\n    return (\n      <Stack py={1} px={1.5} spacing={0.5}>\n        <Typography variant=\"caption\">{formatTimeSeriesHeader(seriesTime)}</Typography>\n        <Divider\n          sx={(theme) => ({\n            borderColor: theme.palette.grey['500'],\n          })}\n        />\n        <Box\n          sx={{\n            display: 'table',\n          }}\n        >\n          {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor }) => {\n            if (datumIdx === null || seriesIdx === null) return null;\n            const key = seriesIdx.toString() + datumIdx.toString();\n\n            return (\n              <SeriesInfo\n                key={key}\n                seriesName={seriesName}\n                y={y}\n                formattedY={formattedY}\n                markerColor={markerColor}\n                totalSeries={sortedFocusedSeries.length}\n                wrapLabels={wrapLabels}\n              />\n            );\n          })}\n        </Box>\n      </Stack>\n    );\n  } else {\n    return <></>;\n  }\n}\n"],"names":["useMemo","Box","Divider","Stack","Typography","SeriesInfo","TooltipContent","props","focusedSeries","wrapLabels","seriesTime","date","formatTimeSeriesHeader","timeString","month","year","time","split","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","px","spacing","borderColor","grey","display","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","key","toString","totalSeries","length"],"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,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,GAAG,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAEhE,SAASC,UAAU,QAAQ,cAAc,CAAC;AAO1C,OAAO,SAASC,cAAc,CAACC,KAA0B,EAAE;IACzD,MAAM,EAAEC,aAAa,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGF,KAAK,AAAC;IAE5C,MAAMG,UAAU,GAAGF,aAAa,IAAIA,aAAa,CAAC,CAAC,CAAC,IAAIA,aAAa,CAAC,CAAC,CAAC,CAACG,IAAI,GAAGH,aAAa,CAAC,CAAC,CAAC,CAACG,IAAI,GAAG,IAAI,AAAC;IAE7G,MAAMC,sBAAsB,GAAG,CAACC,UAAkB,GAAK;QACrD,MAAM,CAACC,KAAK,EAAEC,IAAI,EAAEC,IAAI,CAAC,GAAGH,UAAU,CAACI,KAAK,CAAC,GAAG,CAAC,AAAC;QAClD,qBACE;;8BACE,MAACb,UAAU;oBACTc,OAAO,EAAC,SAAS;oBACjBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4BACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,MAAM,CAACC,KAAK;yBAClC,CAAA,AAAC;;wBAEDV,KAAK;wBAAC,IAAE;wBAACC,IAAI;wBAAC,IACjB;;kBAAa;8BACb,KAACX,UAAU;oBAACc,OAAO,EAAC,SAAS;8BAC3B,cAAA,KAACO,QAAM;kCAAET,IAAI;sBAAU;kBACZ;;UACZ,CACH;IACJ,CAAC,AAAC;IAEF,MAAMU,mBAAmB,GAAG1B,OAAO,CAAC,IAAM;QACxC,IAAIQ,aAAa,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;QACxC,OAAOA,aAAa,CAACmB,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,GAAMD,CAAC,CAACE,CAAC,GAAGD,CAAC,CAACC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,AAAC,CAAC,CAAC;IAC5D,CAAC,EAAE;QAACtB,aAAa;KAAC,CAAC,AAAC;IAEpB,IAAIkB,mBAAmB,KAAK,IAAI,IAAIhB,UAAU,KAAK,IAAI,EAAE;QACvD,qBACE,MAACP,KAAK;YAAC4B,EAAE,EAAE,CAAC;YAAEC,EAAE,EAAE,GAAG;YAAEC,OAAO,EAAE,GAAG;;8BACjC,KAAC7B,UAAU;oBAACc,OAAO,EAAC,SAAS;8BAAEN,sBAAsB,CAACF,UAAU,CAAC;kBAAc;8BAC/E,KAACR,OAAO;oBACNiB,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4BACdc,WAAW,EAAEd,KAAK,CAACE,OAAO,CAACa,IAAI,CAAC,KAAK,CAAC;yBACvC,CAAA,AAAC;kBACF;8BACF,KAAClC,GAAG;oBACFkB,EAAE,EAAE;wBACFiB,OAAO,EAAE,OAAO;qBACjB;8BAEAV,mBAAmB,CAACW,GAAG,CAAC,CAAC,EAAEC,QAAQ,CAAA,EAAEC,SAAS,CAAA,EAAEC,UAAU,CAAA,EAAEV,CAAC,CAAA,EAAEW,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAE,GAAK;wBAC5F,IAAIJ,QAAQ,KAAK,IAAI,IAAIC,SAAS,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;wBACzD,MAAMI,GAAG,GAAGJ,SAAS,CAACK,QAAQ,EAAE,GAAGN,QAAQ,CAACM,QAAQ,EAAE,AAAC;wBAEvD,qBACE,KAACvC,UAAU;4BAETmC,UAAU,EAAEA,UAAU;4BACtBV,CAAC,EAAEA,CAAC;4BACJW,UAAU,EAAEA,UAAU;4BACtBC,WAAW,EAAEA,WAAW;4BACxBG,WAAW,EAAEnB,mBAAmB,CAACoB,MAAM;4BACvCrC,UAAU,EAAEA,UAAU;2BANjBkC,GAAG,CAOR,CACF;oBACJ,CAAC,CAAC;kBACE;;UACA,CACR;IACJ,OAAO;QACL,qBAAO,mBAAK,CAAC;IACf,CAAC;AACH,CAAC"}

package/dist/Tooltip/focused-series.d.ts

@@ -1,5 +1,5 @@
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { EChartsDataFormat } from '../model/graph';
+import { UnitOptions, EChartsDataFormat } from '../model';
 import { CursorData } from './tooltip-model';
 export interface FocusedSeriesInfo {
     seriesIdx: number | null;
@@ -9,16 +9,17 @@ export interface FocusedSeriesInfo {
     markerColor: string;
     x: number;
     y: number;
+    formattedY: string;
 }
 export declare type FocusedSeriesArray = FocusedSeriesInfo[];
 /**
  * Returns formatted series data for the points that are close to the user's cursor
  * Adjust yBuffer to increase or decrease number of series shown
  */
-export declare function getNearbySeries(data: EChartsDataFormat, pointInGrid: number[], yBuffer: number): FocusedSeriesArray;
+export declare function getNearbySeries(data: EChartsDataFormat, pointInGrid: number[], yBuffer: number, unit?: UnitOptions): FocusedSeriesArray;
 /**
  * Uses mouse position to determine whether user is hovering over a chart canvas
  * If yes, convert from pixel values to logical cartesian coordinates and return all focused series
  */
-export declare function getFocusedSeriesData(mousePos: CursorData['coords'], chartData: EChartsDataFormat, pinnedPos: CursorData['coords'], chart?: EChartsInstance): FocusedSeriesArray;
+export declare function getFocusedSeriesData(mousePos: CursorData['coords'], chartData: EChartsDataFormat, pinnedPos: CursorData['coords'], chart?: EChartsInstance, unit?: UnitOptions): FocusedSeriesArray;
 //# sourceMappingURL=focused-series.d.ts.map