@perses-dev/components 0.29.1 → 0.30.0

package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAM1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA+C9D"}
+{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAM1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAqD9D"}

package/dist/DateTimeRangePicker/TimeRangeSelector.js

@@ -29,8 +29,14 @@ export function TimeRangeSelector(props) {
             'aria-label': `Select time range. Currently set to ${formattedValue}`
         },
         sx: {
+            // `transform: none` prevents calendar icon from flipping over when menu is open
             '.MuiSelect-icon': {
-                marginTop: '1px'
+                marginTop: '1px',
+                transform: 'none'
+            },
+            // paddingRight creates more space for the calendar icon (it's a bigger icon)
+            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
+                paddingRight: '36px'
             },
             '.MuiSelect-select': height ? {
                 lineHeight: height,

package/dist/DateTimeRangePicker/TimeRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n  height?: string;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick, height } = props;\n  const { timeZone } = useTimeZone();\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      inputProps={{\n        'aria-label': `Select time range. Currently set to ${formattedValue}`,\n      }}\n      sx={{\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","useTimeZone","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","height","timeZone","formattedValue","pastDuration","onChange","IconComponent","inputProps","sx","marginTop","lineHeight","paddingY","map","item","idx","display","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAEC,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAC1D,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAe/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGL,KAAK,AAAC;IAC5E,MAAM,EAAEM,QAAQ,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IACnC,MAAMW,cAAc,GAAG,CAACZ,mBAAmB,CAACM,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,EAAEQ,QAAQ,CAAC,GACtDL,KAAK,CAACO,YAAY,AAAC;IACvB,qBACE,MAACf,MAAM;QACLQ,KAAK,EAAEM,cAAc;QACrBE,QAAQ,EAAEN,cAAc;QACxBO,aAAa,EAAEhB,QAAQ;QACvBiB,UAAU,EAAE;YACV,YAAY,EAAE,CAAC,oCAAoC,EAAEJ,cAAc,CAAC,CAAC;SACtE;QACDK,EAAE,EAAE;YACF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;aACjB;YACD,mBAAmB,EAAER,MAAM,GAAG;gBAAES,UAAU,EAAET,MAAM;gBAAEU,QAAQ,EAAE,CAAC;aAAE,GAAG,EAAE;SACvE;;YAEAb,WAAW,CAACc,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAAC1B,QAAQ;oBAAWS,KAAK,EAAEgB,IAAI,CAAChB,KAAK,CAACO,YAAY;8BAC/CS,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDvB,mBAAmB,CAACM,KAAK,CAAC,iBACzB,KAACT,QAAQ;gBACP4B,OAAO,EAAE,IAAM;oBACbhB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACZ,QAAQ;gBACPS,KAAK,EAAEM,cAAc;gBACrBa,OAAO,EAAE,IAAM;oBACbhB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAG,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n  height?: string;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick, height } = props;\n  const { timeZone } = useTimeZone();\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      inputProps={{\n        'aria-label': `Select time range. Currently set to ${formattedValue}`,\n      }}\n      sx={{\n        // `transform: none` prevents calendar icon from flipping over when menu is open\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n          transform: 'none',\n        },\n        // paddingRight creates more space for the calendar icon (it's a bigger icon)\n        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {\n          paddingRight: '36px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","useTimeZone","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","height","timeZone","formattedValue","pastDuration","onChange","IconComponent","inputProps","sx","marginTop","transform","paddingRight","lineHeight","paddingY","map","item","idx","display","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAEC,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAC1D,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAe/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGL,KAAK,AAAC;IAC5E,MAAM,EAAEM,QAAQ,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IACnC,MAAMW,cAAc,GAAG,CAACZ,mBAAmB,CAACM,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,EAAEQ,QAAQ,CAAC,GACtDL,KAAK,CAACO,YAAY,AAAC;IACvB,qBACE,MAACf,MAAM;QACLQ,KAAK,EAAEM,cAAc;QACrBE,QAAQ,EAAEN,cAAc;QACxBO,aAAa,EAAEhB,QAAQ;QACvBiB,UAAU,EAAE;YACV,YAAY,EAAE,CAAC,oCAAoC,EAAEJ,cAAc,CAAC,CAAC;SACtE;QACDK,EAAE,EAAE;YACF,gFAAgF;YAChF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;gBAChBC,SAAS,EAAE,MAAM;aAClB;YACD,6EAA6E;YAC7E,yDAAyD,EAAE;gBACzDC,YAAY,EAAE,MAAM;aACrB;YACD,mBAAmB,EAAEV,MAAM,GAAG;gBAAEW,UAAU,EAAEX,MAAM;gBAAEY,QAAQ,EAAE,CAAC;aAAE,GAAG,EAAE;SACvE;;YAEAf,WAAW,CAACgB,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAAC5B,QAAQ;oBAAWS,KAAK,EAAEkB,IAAI,CAAClB,KAAK,CAACO,YAAY;8BAC/CW,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDzB,mBAAmB,CAACM,KAAK,CAAC,iBACzB,KAACT,QAAQ;gBACP8B,OAAO,EAAE,IAAM;oBACblB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACZ,QAAQ;gBACPS,KAAK,EAAEM,cAAc;gBACrBe,OAAO,EAAE,IAAM;oBACblB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAG,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}

package/dist/EChart/EChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"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"}

package/dist/EChart/EChart.js

@@ -15,7 +15,6 @@ import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { init } from 'echarts/core';
 import { Box } from '@mui/material';
 import { isEqual, debounce } from 'lodash-es';
-import { combineSx } from '../utils';
 const mouseEvents = [
     'click',
     'dblclick',
@@ -107,12 +106,7 @@ export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme
     ]);
     return /*#__PURE__*/ _jsx(Box, {
         ref: containerRef,
-        sx: combineSx({
-            // Ensures chart fills container and updates size correctly when resizing,
-            // combineSx allows this default behavior to be overriden from parent component
-            width: '100%',
-            height: '100%'
-        }, sx)
+        sx: sx
     });
 });
 // Validate event config and bind custom events

package/dist/EChart/EChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport { isEqual, debounce } from 'lodash-es';\nimport { EChartsTheme } from '../model';\nimport { combineSx } from '../utils';\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  onEvents,\n  _instance,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    if (chartElement.current === undefined) return;\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return () => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (!chartElement.current) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return () => {\n      window.removeEventListener('resize', updateSize);\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (!chart || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return () => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  useEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    updateSize();\n  }, [sx]);\n\n  return (\n    <Box\n      ref={containerRef}\n      sx={combineSx(\n        {\n          // Ensures chart fills container and updates size correctly when resizing,\n          // combineSx allows this default behavior to be overriden from parent component\n          width: '100%',\n          height: '100%',\n        },\n        sx\n      )}\n    ></Box>\n  );\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown) {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["React","useEffect","useLayoutEffect","useRef","init","Box","isEqual","debounce","combineSx","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","ref","width","height","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}
+{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport { isEqual, debounce } from 'lodash-es';\nimport { EChartsTheme } from '../model';\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  onEvents,\n  _instance,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    if (chartElement.current === undefined) return;\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return () => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (!chartElement.current) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return () => {\n      window.removeEventListener('resize', updateSize);\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (!chart || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return () => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  useEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    updateSize();\n  }, [sx]);\n\n  return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown) {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["React","useEffect","useLayoutEffect","useRef","init","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,oBAAY,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,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,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAoC,EACpC,UAAU,EACV,aAAa,EACb,oCAAoC,GACrC,EAAE,cAAc,eAkJhB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,oBAAY,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,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,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAoC,EACpC,UAAU,EACV,aAAa,EACb,oCAAoC,GACrC,EAAE,cAAc,eA2JhB"}

package/dist/LineChart/LineChart.js

@@ -183,6 +183,10 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
                 unit: unit
             }),
             /*#__PURE__*/ _jsx(EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 onEvents: handleEvents,

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n};\n\nexport interface LineChartProps {\n  /**\n   * Height of the chart\n   */\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  tooltipConfig = { wrapLabels: true },\n  onDataZoom,\n  onDoubleClick,\n  __experimentalEChartsOptionsOverride,\n}: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n  const { timeZone } = useTimeZone();\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;\n\n    // show symbols and axisPointer dashed line on hover\n    const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: !isOptimizedMode,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: isOptimizedMode ? 'none' : 'line',\n          z: 0, // ensure point symbol shows on top of dashed line\n        },\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={() => {\n        setPinTooltip((current) => !current);\n      }}\n      onMouseDown={(e) => {\n        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n        if (e.target instanceof HTMLCanvasElement) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseUp={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n        setPinTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={handleOnDoubleClick}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeSeriesTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinTooltip={pinTooltip}\n            unit={unit}\n          />\n        )}\n      <EChart option={option} theme={chartsTheme.echartsTheme} onEvents={handleEvents} _instance={chartRef} />\n    </Box>\n  );\n}\n"],"names":["React","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","OPTIMIZED_MODE_SERIES_LIMIT","useChartsTheme","TimeSeriesTooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","option","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","timeSeries","isOptimizedMode","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","target","HTMLCanvasElement","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n};\n\nexport interface LineChartProps {\n  /**\n   * Height of the chart\n   */\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  tooltipConfig = { wrapLabels: true },\n  onDataZoom,\n  onDoubleClick,\n  __experimentalEChartsOptionsOverride,\n}: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n  const { timeZone } = useTimeZone();\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;\n\n    // show symbols and axisPointer dashed line on hover\n    const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: !isOptimizedMode,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: isOptimizedMode ? 'none' : 'line',\n          z: 0, // ensure point symbol shows on top of dashed line\n        },\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={() => {\n        setPinTooltip((current) => !current);\n      }}\n      onMouseDown={(e) => {\n        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n        if (e.target instanceof HTMLCanvasElement) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseUp={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n        setPinTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={handleOnDoubleClick}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeSeriesTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinTooltip={pinTooltip}\n            unit={unit}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n      />\n    </Box>\n  );\n}\n"],"names":["React","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","OPTIMIZED_MODE_SERIES_LIMIT","useChartsTheme","TimeSeriesTooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","option","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","timeSeries","isOptimizedMode","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","target","HTMLCanvasElement","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAqF9C"}
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAiG9C"}

package/dist/StatChart/StatChart.js

@@ -109,11 +109,15 @@ export function StatChart(props) {
                 sx: (theme)=>({
                         color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
                         fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
-                        padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`
+                        padding: sparkline ? `${containerPadding} ${containerPadding} 0 ${containerPadding}` : ` 0 ${containerPadding}`
                     }),
                 children: formattedValue
             }),
             sparkline !== undefined && /*#__PURE__*/ _jsx(EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 renderer: "svg"

package/dist/StatChart/StatChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline } = props;\n  const chartsTheme = useChartsTheme();\n\n  const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        data: [...series.values],\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const isLargePanel = width > 250 && height > 180;\n  // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n  const charactersAdjust = formattedValue.length;\n  const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n  const containerPadding = `${chartsTheme.container.padding.default}px`;\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      <Typography\n        variant=\"h3\"\n        sx={(theme) => ({\n          color: color ?? theme.palette.text.primary,\n          fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n          padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`,\n        })}\n      >\n        {formattedValue}\n      </Typography>\n      {sparkline !== undefined && <EChart option={option} theme={chartsTheme.echartsTheme} renderer=\"svg\" />}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","Typography","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","color","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","min","containerPadding","container","padding","default","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","variant","theme","palette","text","primary","fontSize","echartsTheme","renderer"],"mappings":"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"}
+{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline } = props;\n  const chartsTheme = useChartsTheme();\n\n  const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        data: [...series.values],\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const isLargePanel = width > 250 && height > 180;\n  // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n  const charactersAdjust = formattedValue.length;\n  const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n  const containerPadding = `${chartsTheme.container.padding.default}px`;\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      <Typography\n        variant=\"h3\"\n        sx={(theme) => ({\n          color: color ?? theme.palette.text.primary,\n          fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n          padding: sparkline\n            ? `${containerPadding} ${containerPadding} 0 ${containerPadding}`\n            : ` 0 ${containerPadding}`,\n        })}\n      >\n        {formattedValue}\n      </Typography>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: '100%',\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","Typography","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","color","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","min","containerPadding","container","padding","default","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","variant","theme","palette","text","primary","fontSize","echartsTheme","renderer"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { ECharts as EChartsInstance } from 'echarts/core';
+import React from 'react';
 import { EChartsDataFormat, UnitOptions } from '../model';
 interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.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,sBAAsB;IAC9B,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,eAAO,MAAM,iBAAiB,oDA2D5B,CAAC"}
+{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,UAAU,sBAAsB;IAC9B,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,eAAO,MAAM,iBAAiB,oDAmE5B,CAAC"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -11,15 +11,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from 'react';
 import { Box, Portal } from '@mui/material';
+import React, { useState } from 'react';
+import useResizeObserver from 'use-resize-observer';
+import { TooltipContent } from './TooltipContent';
 import { getFocusedSeriesData } from './focused-series';
 import { TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
-import { TooltipContent } from './TooltipContent';
 import { assembleTransform } from './utils';
 export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = useState(null);
     const mousePos = useMousePosition();
+    const { height , width , ref: tooltipRef  } = useResizeObserver();
     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;
@@ -27,9 +29,7 @@ export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesToo
     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;
-    const chartHeight = (ref1 = chart === null || chart === void 0 ? void 0 : chart.getHeight()) !== null && ref1 !== void 0 ? ref1 : 230;
-    const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
+    const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
     if (focusedSeries.length === 0) {
         return null;
     }
@@ -38,6 +38,7 @@ export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesToo
     }
     return /*#__PURE__*/ _jsx(Portal, {
         children: /*#__PURE__*/ _jsx(Box, {
+            ref: tooltipRef,
             sx: (theme)=>({
                     maxWidth: TOOLTIP_MAX_WIDTH,
                     maxHeight: TOOLTIP_MAX_HEIGHT,

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { 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 TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  pinTooltip: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  pinTooltip,\n  unit,\n}: TimeSeriesTooltipProps) {\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"],"names":["React","useState","Box","Portal","getFocusedSeriesData","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","useMousePosition","TooltipContent","assembleTransform","TimeSeriesTooltip","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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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Portal } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport React, { useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { getFocusedSeriesData } from './focused-series';\nimport { CursorCoordinates, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';\nimport { assembleTransform } from './utils';\n\ninterface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  pinTooltip: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  pinTooltip,\n  unit,\n}: TimeSeriesTooltipProps) {\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\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 cursorTransform = assembleTransform(\n    mousePos,\n    focusedSeries.length,\n    chartWidth,\n    pinnedPos,\n    height ?? 0,\n    width ?? 0\n  );\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        ref={tooltipRef}\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"],"names":["Box","Portal","React","useState","useResizeObserver","TooltipContent","getFocusedSeriesData","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","memo","chartRef","chartData","wrapLabels","pinTooltip","unit","pinnedPos","setPinnedPos","mousePos","height","width","ref","tooltipRef","target","tagName","chart","current","focusedSeries","chartWidth","getWidth","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/TimeSeriesTooltip/TooltipContent.js

@@ -19,8 +19,8 @@ export function TooltipContent(props) {
     const { focusedSeries , wrapLabels  } = props;
     const { formatWithUserTimeZone  } = useTimeZone();
     const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
-    const formatTimeSeriesHeader = (timeString)=>{
-        const date = new Date(timeString);
+    const formatTimeSeriesHeader = (timeMs)=>{
+        const date = new Date(timeMs);
         const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
         const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
         return /*#__PURE__*/ _jsxs(_Fragment, {

package/dist/TimeSeriesTooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  focusedSeries: FocusedSeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { focusedSeries, wrapLabels } = props;\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n  const formatTimeSeriesHeader = (timeString: string) => {\n    const date = new Date(timeString);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n    return (\n      <>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</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","useTimeZone","SeriesInfo","TooltipContent","props","focusedSeries","wrapLabels","formatWithUserTimeZone","seriesTime","date","formatTimeSeriesHeader","timeString","Date","formattedDate","formattedTime","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":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  focusedSeries: FocusedSeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { focusedSeries, wrapLabels } = props;\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n  const formatTimeSeriesHeader = (timeMs: number) => {\n    const date = new Date(timeMs);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n    return (\n      <>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</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","useTimeZone","SeriesInfo","TooltipContent","props","focusedSeries","wrapLabels","formatWithUserTimeZone","seriesTime","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","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":"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"}

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

@@ -5,7 +5,7 @@ export interface FocusedSeriesInfo {
     seriesIdx: number | null;
     datumIdx: number | null;
     seriesName: string;
-    date: string;
+    date: number;
     markerColor: string;
     x: number;
     y: number;

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

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

package/dist/TimeSeriesTooltip/focused-series.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { formatValue } from '../model';
-import { TOOLTIP_DATE_FORMAT, TOOLTIP_MAX_ITEMS } from './tooltip-model';
+import { TOOLTIP_MAX_ITEMS } from './tooltip-model';
 /**
  * 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
@@ -42,13 +42,12 @@ import { TOOLTIP_DATE_FORMAT, TOOLTIP_MAX_ITEMS } from './tooltip-model';
                             if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {
                                 // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
                                 const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
-                                const formattedDate = TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);
                                 const formattedY = formatValue(yValue, unit);
                                 currentFocusedData.push({
                                     seriesIdx: seriesIdx,
                                     datumIdx: datumIdx,
                                     seriesName: currentSeriesName,
-                                    date: formattedDate,
+                                    date: xValueMilliSeconds,
                                     x: xValue,
                                     y: yValue,
                                     formattedY: formattedY,

package/dist/TimeSeriesTooltip/focused-series.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions, EChartsDataFormat } from '../model';\nimport { CursorData, TOOLTIP_DATE_FORMAT, TOOLTIP_MAX_ITEMS } from './tooltip-model';\n\nexport interface FocusedSeriesInfo {\n  seriesIdx: number | null;\n  datumIdx: number | null;\n  seriesName: string;\n  date: string;\n  markerColor: string;\n  x: number;\n  y: number;\n  formattedY: string;\n}\n\nexport type FocusedSeriesArray = FocusedSeriesInfo[];\n\n/**\n * Returns formatted series data for the points that are close to the user's cursor\n * Adjust yBuffer to increase or decrease number of series shown\n */\nexport function getNearbySeries(\n  data: EChartsDataFormat,\n  pointInGrid: number[],\n  yBuffer: number,\n  unit?: UnitOptions\n): FocusedSeriesArray {\n  const currentFocusedData: FocusedSeriesArray = [];\n  const focusedX: number | null = pointInGrid[0] ?? null;\n  const focusedY: number | null = pointInGrid[1] ?? null;\n\n  if (focusedX === null || focusedY === null) {\n    return currentFocusedData;\n  }\n\n  if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {\n    for (let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++) {\n      const currentSeries = data.timeSeries[seriesIdx];\n      if (currentFocusedData.length >= TOOLTIP_MAX_ITEMS) break;\n      if (currentSeries !== undefined) {\n        const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';\n        const markerColor = currentSeries.color ?? '#000';\n        if (Array.isArray(currentSeries.data)) {\n          for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {\n            const xValue = data.xAxis[datumIdx] ?? 0;\n            const yValue = currentSeries.data[datumIdx];\n            // ensure null values not displayed in tooltip\n            if (yValue !== undefined && yValue !== null && focusedX === datumIdx) {\n              if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {\n                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201\n                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;\n                const formattedDate = TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);\n                const formattedY = formatValue(yValue, unit);\n                currentFocusedData.push({\n                  seriesIdx: seriesIdx,\n                  datumIdx: datumIdx,\n                  seriesName: currentSeriesName,\n                  date: formattedDate,\n                  x: xValue,\n                  y: yValue,\n                  formattedY: formattedY,\n                  markerColor: markerColor.toString(),\n                });\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  return currentFocusedData;\n}\n\n/**\n * Uses mouse position to determine whether user is hovering over a chart canvas\n * If yes, convert from pixel values to logical cartesian coordinates and return all focused series\n */\nexport function getFocusedSeriesData(\n  mousePos: CursorData['coords'],\n  chartData: EChartsDataFormat,\n  pinnedPos: CursorData['coords'],\n  chart?: EChartsInstance,\n  unit?: UnitOptions\n) {\n  if (chart === undefined || mousePos === null) return [];\n\n  // prevents multiple tooltips showing from adjacent charts\n  let cursorTargetMatchesChart = false;\n  if (mousePos.target !== null) {\n    const currentParent = (<HTMLElement>mousePos.target).parentElement;\n    if (currentParent !== null) {\n      const currentGrandparent = currentParent.parentElement;\n      if (currentGrandparent !== null) {\n        const chartDom = chart.getDom();\n        if (chartDom === currentGrandparent) {\n          cursorTargetMatchesChart = true;\n        }\n      }\n    }\n  }\n\n  // allows moving cursor inside tooltip\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n    cursorTargetMatchesChart = true;\n  }\n\n  if (cursorTargetMatchesChart === false) return [];\n\n  if (chart['_model'] === undefined) return [];\n  const chartModel = chart['_model'];\n  const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;\n\n  // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range\n  const seriesNum = chartData.timeSeries.length;\n  const yBuffer = seriesNum > TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 5;\n\n  const pointInPixel = [mousePos.plotCanvas.x ?? 0, mousePos.plotCanvas.y ?? 0];\n  if (chart.containPixel('grid', pointInPixel)) {\n    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);\n    if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {\n      return getNearbySeries(chartData, pointInGrid, yBuffer, unit);\n    }\n  }\n  return [];\n}\n"],"names":["formatValue","TOOLTIP_DATE_FORMAT","TOOLTIP_MAX_ITEMS","getNearbySeries","data","pointInGrid","yBuffer","unit","currentFocusedData","focusedX","focusedY","Array","isArray","xAxis","timeSeries","seriesIdx","length","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","xValueMilliSeconds","formattedDate","format","formattedY","push","seriesName","date","x","y","getFocusedSeriesData","mousePos","chartData","pinnedPos","chart","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yAxisInterval","getComponent","axis","scale","_interval","seriesNum","pointInPixel","plotCanvas","containPixel","convertFromPixel"],"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;AAGjC,SAASA,WAAW,QAAwC,UAAU,CAAC;AACvE,SAAqBC,mBAAmB,EAAEC,iBAAiB,QAAQ,iBAAiB,CAAC;AAerF;;;CAGC,GACD,OAAO,SAASC,eAAe,CAC7BC,IAAuB,EACvBC,WAAqB,EACrBC,OAAe,EACfC,IAAkB,EACE;IACpB,MAAMC,kBAAkB,GAAuB,EAAE,AAAC;QAClBH,GAAc;IAA9C,MAAMI,QAAQ,GAAkBJ,CAAAA,GAAc,GAAdA,WAAW,CAAC,CAAC,CAAC,cAAdA,GAAc,cAAdA,GAAc,GAAI,IAAI,AAAC;QACvBA,IAAc;IAA9C,MAAMK,QAAQ,GAAkBL,CAAAA,IAAc,GAAdA,WAAW,CAAC,CAAC,CAAC,cAAdA,IAAc,cAAdA,IAAc,GAAI,IAAI,AAAC;IAEvD,IAAII,QAAQ,KAAK,IAAI,IAAIC,QAAQ,KAAK,IAAI,EAAE;QAC1C,OAAOF,kBAAkB,CAAC;IAC5B,CAAC;IAED,IAAIG,KAAK,CAACC,OAAO,CAACR,IAAI,CAACS,KAAK,CAAC,IAAIF,KAAK,CAACC,OAAO,CAACR,IAAI,CAACU,UAAU,CAAC,EAAE;QAC/D,IAAK,IAAIC,SAAS,GAAG,CAAC,EAAEA,SAAS,GAAGX,IAAI,CAACU,UAAU,CAACE,MAAM,EAAED,SAAS,EAAE,CAAE;YACvE,MAAME,aAAa,GAAGb,IAAI,CAACU,UAAU,CAACC,SAAS,CAAC,AAAC;YACjD,IAAIP,kBAAkB,CAACQ,MAAM,IAAId,iBAAiB,EAAE,MAAM;YAC1D,IAAIe,aAAa,KAAKC,SAAS,EAAE;gBAC/B,MAAMC,iBAAiB,GAAGF,aAAa,CAACG,IAAI,GAAGH,aAAa,CAACG,IAAI,CAACC,QAAQ,EAAE,GAAG,EAAE,AAAC;oBAC9DJ,MAAmB;gBAAvC,MAAMK,WAAW,GAAGL,CAAAA,MAAmB,GAAnBA,aAAa,CAACM,KAAK,cAAnBN,MAAmB,cAAnBA,MAAmB,GAAI,MAAM,AAAC;gBAClD,IAAIN,KAAK,CAACC,OAAO,CAACK,aAAa,CAACb,IAAI,CAAC,EAAE;oBACrC,IAAK,IAAIoB,QAAQ,GAAG,CAAC,EAAEA,QAAQ,GAAGP,aAAa,CAACb,IAAI,CAACY,MAAM,EAAEQ,QAAQ,EAAE,CAAE;4BACxDpB,SAAoB;wBAAnC,MAAMqB,MAAM,GAAGrB,CAAAA,SAAoB,GAApBA,IAAI,CAACS,KAAK,CAACW,QAAQ,CAAC,cAApBpB,SAAoB,cAApBA,SAAoB,GAAI,CAAC,AAAC;wBACzC,MAAMsB,MAAM,GAAGT,aAAa,CAACb,IAAI,CAACoB,QAAQ,CAAC,AAAC;wBAC5C,8CAA8C;wBAC9C,IAAIE,MAAM,KAAKR,SAAS,IAAIQ,MAAM,KAAK,IAAI,IAAIjB,QAAQ,KAAKe,QAAQ,EAAE;4BACpE,IAAIE,MAAM,KAAK,GAAG,IAAIhB,QAAQ,IAAIgB,MAAM,GAAGpB,OAAO,IAAII,QAAQ,IAAIgB,MAAM,GAAGpB,OAAO,EAAE;gCAClF,mGAAmG;gCACnG,MAAMqB,kBAAkB,GAAGF,MAAM,GAAG,WAAW,GAAGA,MAAM,GAAGA,MAAM,GAAG,IAAI,AAAC;gCACzE,MAAMG,aAAa,GAAG3B,mBAAmB,CAAC4B,MAAM,CAACF,kBAAkB,CAAC,AAAC;gCACrE,MAAMG,UAAU,GAAG9B,WAAW,CAAC0B,MAAM,EAAEnB,IAAI,CAAC,AAAC;gCAC7CC,kBAAkB,CAACuB,IAAI,CAAC;oCACtBhB,SAAS,EAAEA,SAAS;oCACpBS,QAAQ,EAAEA,QAAQ;oCAClBQ,UAAU,EAAEb,iBAAiB;oCAC7Bc,IAAI,EAAEL,aAAa;oCACnBM,CAAC,EAAET,MAAM;oCACTU,CAAC,EAAET,MAAM;oCACTI,UAAU,EAAEA,UAAU;oCACtBR,WAAW,EAAEA,WAAW,CAACD,QAAQ,EAAE;iCACpC,CAAC,CAAC;4BACL,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAOb,kBAAkB,CAAC;AAC5B,CAAC;AAED;;;CAGC,GACD,OAAO,SAAS4B,oBAAoB,CAClCC,QAA8B,EAC9BC,SAA4B,EAC5BC,SAA+B,EAC/BC,KAAuB,EACvBjC,IAAkB,EAClB;IACA,IAAIiC,KAAK,KAAKtB,SAAS,IAAImB,QAAQ,KAAK,IAAI,EAAE,OAAO,EAAE,CAAC;IAExD,0DAA0D;IAC1D,IAAII,wBAAwB,GAAG,KAAK,AAAC;IACrC,IAAIJ,QAAQ,CAACK,MAAM,KAAK,IAAI,EAAE;QAC5B,MAAMC,aAAa,GAAG,AAAcN,QAAQ,CAACK,MAAM,CAAEE,aAAa,AAAC;QACnE,IAAID,aAAa,KAAK,IAAI,EAAE;YAC1B,MAAME,kBAAkB,GAAGF,aAAa,CAACC,aAAa,AAAC;YACvD,IAAIC,kBAAkB,KAAK,IAAI,EAAE;gBAC/B,MAAMC,QAAQ,GAAGN,KAAK,CAACO,MAAM,EAAE,AAAC;gBAChC,IAAID,QAAQ,KAAKD,kBAAkB,EAAE;oBACnCJ,wBAAwB,GAAG,IAAI,CAAC;gBAClC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,sCAAsC;IACtC,IAAIF,SAAS,KAAK,IAAI,EAAE;QACtBF,QAAQ,GAAGE,SAAS,CAAC;QACrBE,wBAAwB,GAAG,IAAI,CAAC;IAClC,CAAC;IAED,IAAIA,wBAAwB,KAAK,KAAK,EAAE,OAAO,EAAE,CAAC;IAElD,IAAID,KAAK,CAAC,QAAQ,CAAC,KAAKtB,SAAS,EAAE,OAAO,EAAE,CAAC;IAC7C,MAAM8B,UAAU,GAAGR,KAAK,CAAC,QAAQ,CAAC,AAAC;IACnC,MAAMS,aAAa,GAAGD,UAAU,CAACE,YAAY,CAAC,OAAO,CAAC,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,AAAC;IAE5E,sHAAsH;IACtH,MAAMC,SAAS,GAAGhB,SAAS,CAACxB,UAAU,CAACE,MAAM,AAAC;IAC9C,MAAMV,OAAO,GAAGgD,SAAS,GAAGpD,iBAAiB,GAAG+C,aAAa,GAAG,GAAG,GAAGA,aAAa,GAAG,CAAC,AAAC;QAElEZ,EAAqB,EAAOA,EAAqB;IAAvE,MAAMkB,YAAY,GAAG;QAAClB,CAAAA,EAAqB,GAArBA,QAAQ,CAACmB,UAAU,CAACtB,CAAC,cAArBG,EAAqB,cAArBA,EAAqB,GAAI,CAAC;QAAEA,CAAAA,EAAqB,GAArBA,QAAQ,CAACmB,UAAU,CAACrB,CAAC,cAArBE,EAAqB,cAArBA,EAAqB,GAAI,CAAC;KAAC,AAAC;IAC9E,IAAIG,KAAK,CAACiB,YAAY,CAAC,MAAM,EAAEF,YAAY,CAAC,EAAE;QAC5C,MAAMlD,WAAW,GAAGmC,KAAK,CAACkB,gBAAgB,CAAC,MAAM,EAAEH,YAAY,CAAC,AAAC;QACjE,IAAIlD,WAAW,CAAC,CAAC,CAAC,KAAKa,SAAS,IAAIb,WAAW,CAAC,CAAC,CAAC,KAAKa,SAAS,EAAE;YAChE,OAAOf,eAAe,CAACmC,SAAS,EAAEjC,WAAW,EAAEC,OAAO,EAAEC,IAAI,CAAC,CAAC;QAChE,CAAC;IACH,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions, EChartsDataFormat } from '../model';\nimport { CursorData, TOOLTIP_MAX_ITEMS } from './tooltip-model';\n\nexport interface FocusedSeriesInfo {\n  seriesIdx: number | null;\n  datumIdx: number | null;\n  seriesName: string;\n  date: number;\n  markerColor: string;\n  x: number;\n  y: number;\n  formattedY: string;\n}\n\nexport type FocusedSeriesArray = FocusedSeriesInfo[];\n\n/**\n * Returns formatted series data for the points that are close to the user's cursor\n * Adjust yBuffer to increase or decrease number of series shown\n */\nexport function getNearbySeries(\n  data: EChartsDataFormat,\n  pointInGrid: number[],\n  yBuffer: number,\n  unit?: UnitOptions\n): FocusedSeriesArray {\n  const currentFocusedData: FocusedSeriesArray = [];\n  const focusedX: number | null = pointInGrid[0] ?? null;\n  const focusedY: number | null = pointInGrid[1] ?? null;\n\n  if (focusedX === null || focusedY === null) {\n    return currentFocusedData;\n  }\n\n  if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {\n    for (let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++) {\n      const currentSeries = data.timeSeries[seriesIdx];\n      if (currentFocusedData.length >= TOOLTIP_MAX_ITEMS) break;\n      if (currentSeries !== undefined) {\n        const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';\n        const markerColor = currentSeries.color ?? '#000';\n        if (Array.isArray(currentSeries.data)) {\n          for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {\n            const xValue = data.xAxis[datumIdx] ?? 0;\n            const yValue = currentSeries.data[datumIdx];\n            // ensure null values not displayed in tooltip\n            if (yValue !== undefined && yValue !== null && focusedX === datumIdx) {\n              if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {\n                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201\n                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;\n                const formattedY = formatValue(yValue, unit);\n                currentFocusedData.push({\n                  seriesIdx: seriesIdx,\n                  datumIdx: datumIdx,\n                  seriesName: currentSeriesName,\n                  date: xValueMilliSeconds,\n                  x: xValue,\n                  y: yValue,\n                  formattedY: formattedY,\n                  markerColor: markerColor.toString(),\n                });\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  return currentFocusedData;\n}\n\n/**\n * Uses mouse position to determine whether user is hovering over a chart canvas\n * If yes, convert from pixel values to logical cartesian coordinates and return all focused series\n */\nexport function getFocusedSeriesData(\n  mousePos: CursorData['coords'],\n  chartData: EChartsDataFormat,\n  pinnedPos: CursorData['coords'],\n  chart?: EChartsInstance,\n  unit?: UnitOptions\n) {\n  if (chart === undefined || mousePos === null) return [];\n\n  // prevents multiple tooltips showing from adjacent charts\n  let cursorTargetMatchesChart = false;\n  if (mousePos.target !== null) {\n    const currentParent = (<HTMLElement>mousePos.target).parentElement;\n    if (currentParent !== null) {\n      const currentGrandparent = currentParent.parentElement;\n      if (currentGrandparent !== null) {\n        const chartDom = chart.getDom();\n        if (chartDom === currentGrandparent) {\n          cursorTargetMatchesChart = true;\n        }\n      }\n    }\n  }\n\n  // allows moving cursor inside tooltip\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n    cursorTargetMatchesChart = true;\n  }\n\n  if (cursorTargetMatchesChart === false) return [];\n\n  if (chart['_model'] === undefined) return [];\n  const chartModel = chart['_model'];\n  const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;\n\n  // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range\n  const seriesNum = chartData.timeSeries.length;\n  const yBuffer = seriesNum > TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 5;\n\n  const pointInPixel = [mousePos.plotCanvas.x ?? 0, mousePos.plotCanvas.y ?? 0];\n  if (chart.containPixel('grid', pointInPixel)) {\n    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);\n    if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {\n      return getNearbySeries(chartData, pointInGrid, yBuffer, unit);\n    }\n  }\n  return [];\n}\n"],"names":["formatValue","TOOLTIP_MAX_ITEMS","getNearbySeries","data","pointInGrid","yBuffer","unit","currentFocusedData","focusedX","focusedY","Array","isArray","xAxis","timeSeries","seriesIdx","length","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","xValueMilliSeconds","formattedY","push","seriesName","date","x","y","getFocusedSeriesData","mousePos","chartData","pinnedPos","chart","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yAxisInterval","getComponent","axis","scale","_interval","seriesNum","pointInPixel","plotCanvas","containPixel","convertFromPixel"],"mappings":"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"}

package/dist/TimeSeriesTooltip/tooltip-model.d.ts

@@ -40,6 +40,10 @@ export interface CursorCoordinates {
         x: number;
         y: number;
     };
+    client: {
+        x: number;
+        y: number;
+    };
     plotCanvas: {
         x: number;
         y: number;