@perses-dev/components 0.54.0-beta.9 → 0.54.0-rc.0

package/dist/TimeSeriesTooltip/tooltip-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"sourcesContent":["// Copyright 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 { useEffect, useState } from 'react';\nimport { NearbySeriesArray } from './nearby-series';\n\nexport const TOOLTIP_MIN_WIDTH = 375;\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 650;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\nexport const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;\nexport const TOOLTIP_PADDING = 8;\n\nexport const FALLBACK_CHART_WIDTH = 750;\n\nexport const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';\nexport const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';\n\nexport const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const EMPTY_TOOLTIP_DATA: NearbySeriesArray = [];\n\n/**\n * ECharts is built with zrender, zrX and zrY are undefined when not hovering over a chart canvas\n */\nexport interface ZRCoordinate {\n  x?: number;\n  y?: number;\n}\n\nexport interface Coordinate {\n  x: number;\n  y: number;\n}\n\nexport interface CursorCoordinates {\n  page: Coordinate;\n  client: Coordinate;\n  plotCanvas: ZRCoordinate;\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: NearbySeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent): void => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          // Default to zrender mousemove coords since they handle browser inconsistencies for us\n          // ex: Firefox and Chrome have slightly different implementations of offsetX and offsetY\n          // more info: https://github.com/ecomfe/zrender/blob/5.5.0/src/core/event.ts#L46-L120\n          // Fallback to offsetX and offsetY to ensure tooltip works correctly in Edge\n          x: e.zrX ?? e.offsetX,\n          y: e.zrY ?? e.offsetY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return (): void => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n  enablePinning?: boolean;\n};\n\nexport const DEFAULT_TOOLTIP_CONFIG: TooltipConfig = {\n  wrapLabels: true,\n  enablePinning: true,\n};\n\nexport const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';\n\nexport const UNPIN_TOOLTIP_HELP_TEXT = 'Click chart to unpin';\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_PADDING","FALLBACK_CHART_WIDTH","NEARBY_SERIES_DESCRIPTION","EMPHASIZED_SERIES_DESCRIPTION","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","EMPTY_TOOLTIP_DATA","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","client","clientX","clientY","zrX","offsetX","zrY","offsetY","window","addEventListener","removeEventListener","DEFAULT_TOOLTIP_CONFIG","wrapLabels","enablePinning","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAG5C,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,qBAAqB,IAAI;AACtC,OAAO,MAAMC,2BAA2BF,oBAAoB,IAAI;AAChE,OAAO,MAAMG,kCAAkC,KAAK;AACpD,OAAO,MAAMC,kBAAkB,EAAE;AAEjC,OAAO,MAAMC,uBAAuB,IAAI;AAExC,OAAO,MAAMC,4BAA4B,mCAAmC;AAC5E,OAAO,MAAMC,gCAAgC,+CAA+C;AAE5F,OAAO,MAAMC,4BAA4B,UAAU;AAEnD,OAAO,MAAMC,sBAAsB,IAAIC,KAAKC,cAAc,CAACC,WAAW;IACpEC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;AACV,GAAG;AAEH,OAAO,MAAMC,oBAAoB;IAC/BC,QAAQ;QACNC,YAAY;YACVC,GAAG;YACHC,GAAG;QACL;QACAC,SAAS;YACPF,GAAG;YACHC,GAAG;QACL;QACAE,QAAQ;IACV;IACAC,YAAY;AACd,EAAE;AAEF,OAAO,MAAMC,qBAAwC,EAAE,CAAC;AA0CxD,OAAO,MAAMC,mBAAmB;IAC9B,MAAM,CAACR,QAAQS,UAAU,GAAGhC,SAA+B;IAE3DD,UAAU;QACR,MAAMkC,eAAe,CAACC;YACpB,OAAOF,UAAU;gBACfG,MAAM;oBACJV,GAAGS,EAAEE,KAAK;oBACVV,GAAGQ,EAAEG,KAAK;gBACZ;gBACAC,QAAQ;oBACNb,GAAGS,EAAEK,OAAO;oBACZb,GAAGQ,EAAEM,OAAO;gBACd;gBACAhB,YAAY;oBACV,uFAAuF;oBACvF,wFAAwF;oBACxF,qFAAqF;oBACrF,4EAA4E;oBAC5EC,GAAGS,EAAEO,GAAG,IAAIP,EAAEQ,OAAO;oBACrBhB,GAAGQ,EAAES,GAAG,IAAIT,EAAEU,OAAO;gBACvB;gBACA,0HAA0H;gBAC1HhB,QAAQM,EAAEN,MAAM;YAClB;QACF;QACAiB,OAAOC,gBAAgB,CAAC,aAAab;QAErC,OAAO;YACLY,OAAOE,mBAAmB,CAAC,aAAad;QAC1C;IACF,GAAG,EAAE;IAEL,OAAOV;AACT,EAAE;AAQF,OAAO,MAAMyB,yBAAwC;IACnDC,YAAY;IACZC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,wBAAwB,qBAAqB;AAE1D,OAAO,MAAMC,0BAA0B,uBAAuB"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"sourcesContent":["// Copyright 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 { useEffect, useState } from 'react';\nimport { NearbySeriesArray } from './types';\n\nexport const TOOLTIP_MIN_WIDTH = 375;\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 650;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\nexport const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;\nexport const TOOLTIP_PADDING = 8;\n\nexport const FALLBACK_CHART_WIDTH = 750;\n\nexport const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';\nexport const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';\n\nexport const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const EMPTY_TOOLTIP_DATA: NearbySeriesArray = [];\n\n/**\n * ECharts is built with zrender, zrX and zrY are undefined when not hovering over a chart canvas\n */\nexport interface ZRCoordinate {\n  x?: number;\n  y?: number;\n}\n\nexport interface Coordinate {\n  x: number;\n  y: number;\n}\n\nexport interface CursorCoordinates {\n  page: Coordinate;\n  client: Coordinate;\n  plotCanvas: ZRCoordinate;\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: NearbySeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent): void => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          // Default to zrender mousemove coords since they handle browser inconsistencies for us\n          // ex: Firefox and Chrome have slightly different implementations of offsetX and offsetY\n          // more info: https://github.com/ecomfe/zrender/blob/5.5.0/src/core/event.ts#L46-L120\n          // Fallback to offsetX and offsetY to ensure tooltip works correctly in Edge\n          x: e.zrX ?? e.offsetX,\n          y: e.zrY ?? e.offsetY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return (): void => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n  enablePinning?: boolean;\n};\n\nexport const DEFAULT_TOOLTIP_CONFIG: TooltipConfig = {\n  wrapLabels: true,\n  enablePinning: true,\n};\n\nexport const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';\n\nexport const UNPIN_TOOLTIP_HELP_TEXT = 'Click chart to unpin';\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_PADDING","FALLBACK_CHART_WIDTH","NEARBY_SERIES_DESCRIPTION","EMPHASIZED_SERIES_DESCRIPTION","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","EMPTY_TOOLTIP_DATA","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","client","clientX","clientY","zrX","offsetX","zrY","offsetY","window","addEventListener","removeEventListener","DEFAULT_TOOLTIP_CONFIG","wrapLabels","enablePinning","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAG5C,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,qBAAqB,IAAI;AACtC,OAAO,MAAMC,2BAA2BF,oBAAoB,IAAI;AAChE,OAAO,MAAMG,kCAAkC,KAAK;AACpD,OAAO,MAAMC,kBAAkB,EAAE;AAEjC,OAAO,MAAMC,uBAAuB,IAAI;AAExC,OAAO,MAAMC,4BAA4B,mCAAmC;AAC5E,OAAO,MAAMC,gCAAgC,+CAA+C;AAE5F,OAAO,MAAMC,4BAA4B,UAAU;AAEnD,OAAO,MAAMC,sBAAsB,IAAIC,KAAKC,cAAc,CAACC,WAAW;IACpEC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;AACV,GAAG;AAEH,OAAO,MAAMC,oBAAoB;IAC/BC,QAAQ;QACNC,YAAY;YACVC,GAAG;YACHC,GAAG;QACL;QACAC,SAAS;YACPF,GAAG;YACHC,GAAG;QACL;QACAE,QAAQ;IACV;IACAC,YAAY;AACd,EAAE;AAEF,OAAO,MAAMC,qBAAwC,EAAE,CAAC;AA0CxD,OAAO,MAAMC,mBAAmB;IAC9B,MAAM,CAACR,QAAQS,UAAU,GAAGhC,SAA+B;IAE3DD,UAAU;QACR,MAAMkC,eAAe,CAACC;YACpB,OAAOF,UAAU;gBACfG,MAAM;oBACJV,GAAGS,EAAEE,KAAK;oBACVV,GAAGQ,EAAEG,KAAK;gBACZ;gBACAC,QAAQ;oBACNb,GAAGS,EAAEK,OAAO;oBACZb,GAAGQ,EAAEM,OAAO;gBACd;gBACAhB,YAAY;oBACV,uFAAuF;oBACvF,wFAAwF;oBACxF,qFAAqF;oBACrF,4EAA4E;oBAC5EC,GAAGS,EAAEO,GAAG,IAAIP,EAAEQ,OAAO;oBACrBhB,GAAGQ,EAAES,GAAG,IAAIT,EAAEU,OAAO;gBACvB;gBACA,0HAA0H;gBAC1HhB,QAAQM,EAAEN,MAAM;YAClB;QACF;QACAiB,OAAOC,gBAAgB,CAAC,aAAab;QAErC,OAAO;YACLY,OAAOE,mBAAmB,CAAC,aAAad;QAC1C;IACF,GAAG,EAAE;IAEL,OAAOV;AACT,EAAE;AAQF,OAAO,MAAMyB,yBAAwC;IACnDC,YAAY;IACZC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,wBAAwB,qBAAqB;AAE1D,OAAO,MAAMC,0BAA0B,uBAAuB"}

package/dist/TimeSeriesTooltip/types.d.ts

@@ -0,0 +1,30 @@
+export interface NearbySeriesInfo {
+    seriesIdx: number | null;
+    datumIdx: number | null;
+    seriesName: string;
+    date: number;
+    markerColor: string;
+    x: number;
+    y: number;
+    formattedY: string;
+    isClosestToCursor: boolean;
+}
+export type NearbySeriesArray = NearbySeriesInfo[];
+export type Candidate = Omit<NearbySeriesInfo, 'isClosestToCursor' | 'seriesIdx' | 'datumIdx' | 'formattedY'> & {
+    seriesIdx: number;
+    datumIdx: number;
+    seriesId: string;
+    visualY: number;
+    distance: number;
+};
+export type IsWithinPercentageRangeParams = {
+    valueToCheck: number;
+    baseValue: number;
+    percentage: number;
+};
+export type GetYBufferParams = {
+    yInterval: number;
+    totalSeries: number;
+    showAllSeries?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/types.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,gBAAgB;IAC/B,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;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,EAAE,CAAC;AAEnD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC,GAAG;IAC9G,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC"}

package/dist/TimeSeriesTooltip/types.js

@@ -0,0 +1,15 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/TimeSeriesTooltip/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/types.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport interface NearbySeriesInfo {\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  isClosestToCursor: boolean;\n}\n\nexport type NearbySeriesArray = NearbySeriesInfo[];\n\nexport type Candidate = Omit<NearbySeriesInfo, 'isClosestToCursor' | 'seriesIdx' | 'datumIdx' | 'formattedY'> & {\n  seriesIdx: number;\n  datumIdx: number;\n  seriesId: string;\n  visualY: number;\n  distance: number;\n};\n\nexport type IsWithinPercentageRangeParams = {\n  valueToCheck: number;\n  baseValue: number;\n  percentage: number;\n};\n\nexport type GetYBufferParams = {\n  yInterval: number;\n  totalSeries: number;\n  showAllSeries?: boolean;\n};\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AA8BjC,WAIE"}

package/dist/TimeSeriesTooltip/utils.d.ts

@@ -1,11 +1,36 @@
 import { Theme } from '@mui/material';
+import { ECharts as EChartsInstance } from 'echarts/core';
+import { TimeChartSeriesMapping } from '../model';
 import { CursorCoordinates, CursorData } from './tooltip-model';
 /**
- * Determine position of tooltip depending on chart dimensions and the number of focused series
+ * Determine position of tooltip depending on chart dimensions and the number of focused series.
  */
 export declare function assembleTransform(mousePos: CursorData['coords'], pinnedPos: CursorCoordinates | null, tooltipHeight: number, tooltipWidth: number, containerElement?: Element | null): string | undefined;
 /**
  * Helper for tooltip positioning styles
  */
 export declare function getTooltipStyles(theme: Theme, pinnedPos: CursorCoordinates | null, maxHeight?: number): Record<string, unknown>;
+export declare function getPixelXFromGrid(timestamp: number, chart: EChartsInstance): number | null;
+/**
+ * Returns the cumulative (visual) Y for a series, accumulating stack totals in-place.
+ * For non-stacked series, returns the raw yValue unchanged.
+ * Mutates `stackTotals` — pass a fresh Map for each cursor evaluation.
+ */
+export declare function calculateVisualYForSeries(seriesIdx: number, yValue: number, seriesMapping: TimeChartSeriesMapping, stackTotals: Map<string, number>): number;
+export declare function calculateBarBandwidth(timestamp: number, sortedTimestamps: number[], chart: EChartsInstance): number;
+/**
+ * Computes the pixel left/right bounds of one bar segment within a group.
+ * @param barRelativeIdx - zero-based index among bar-only series
+ * @param bandwidth      - total pixel width for the bar group
+ * @param centerPixelX   - pixel X of the bar group centre
+ * @param barCount       - total bar series count (lines excluded)
+ */
+export declare function calculateBarSegmentBounds(barRelativeIdx: number, bandwidth: number, centerPixelX: number, barCount: number): {
+    left: number;
+    right: number;
+};
+export declare function calculateBarYBounds(visualYBottom: number, visualYTop: number, chart: EChartsInstance): {
+    top: number;
+    bottom: number;
+} | null;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,UAAU,EAMX,MAAM,iBAAiB,CAAC;AAEzB;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,GAChC,MAAM,GAAG,SAAS,CAmDpB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAwBzB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EACL,iBAAiB,EACjB,UAAU,EAMX,MAAM,iBAAiB,CAAC;AAEzB;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,GAChC,MAAM,GAAG,SAAS,CAuDpB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAyBzB;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,GAAG,MAAM,GAAG,IAAI,CAO1F;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,sBAAsB,EACrC,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAC/B,MAAM,CAcR;AAED,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,eAAe,GAAG,MAAM,CAiCnH;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,cAAc,EAAE,MAAM,EACtB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,GACf;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAQjC;AAED,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,MAAM,EACrB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,eAAe,GACrB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAexC"}

package/dist/TimeSeriesTooltip/utils.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { TOOLTIP_MAX_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_PADDING } from './tooltip-model';
 /**
- * Determine position of tooltip depending on chart dimensions and the number of focused series
+ * Determine position of tooltip depending on chart dimensions and the number of focused series.
  */ export function assembleTransform(mousePos, pinnedPos, tooltipHeight, tooltipWidth, containerElement) {
     if (mousePos === null) {
         return undefined;
@@ -23,6 +23,9 @@ import { TOOLTIP_MAX_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_BG_CO
         mousePos = pinnedPos;
     }
     if (mousePos.plotCanvas.x === undefined) return undefined;
+    // Fall back to max size before the resize observer reports a real measurement.
+    const effectiveHeight = tooltipHeight > 0 ? tooltipHeight : TOOLTIP_MAX_HEIGHT;
+    const effectiveWidth = tooltipWidth > 0 ? tooltipWidth : TOOLTIP_MAX_WIDTH;
     let x = mousePos.page.x + cursorPaddingX; // Default to right side of the cursor
     let y = mousePos.page.y + cursorPaddingY;
     // If containerElement is defined, adjust coordinates relative to the container
@@ -32,18 +35,18 @@ import { TOOLTIP_MAX_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_BG_CO
         y = y - containerRect.top + containerElement.scrollTop;
         // Ensure tooltip does not go out of the container's bottom
         const containerBottom = containerRect.top + containerElement.scrollHeight;
-        if (y + tooltipHeight > containerBottom) {
-            y = Math.max(containerBottom - tooltipHeight - cursorPaddingY, TOOLTIP_PADDING / 2);
+        if (y + effectiveHeight > containerBottom) {
+            y = Math.max(containerBottom - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);
         }
     } else {
         // Ensure tooltip does not go out of the screen on the bottom
-        if (y + tooltipHeight > window.innerHeight + window.scrollY) {
-            y = Math.max(window.innerHeight + window.scrollY - tooltipHeight - cursorPaddingY, TOOLTIP_PADDING / 2);
+        if (y + effectiveHeight > window.innerHeight + window.scrollY) {
+            y = Math.max(window.innerHeight + window.scrollY - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);
         }
     }
     // Ensure tooltip does not go out of the screen on the right
-    if (x + tooltipWidth > window.innerWidth) {
-        x = mousePos.page.x - tooltipWidth - cursorPaddingX; // Move to the left of the cursor
+    if (x + effectiveWidth > window.innerWidth) {
+        x = mousePos.page.x - effectiveWidth - cursorPaddingX; // Move to the left of the cursor
     }
     // Ensure tooltip does not go out of the screen on the left
     if (x < cursorPaddingX) {
@@ -73,8 +76,9 @@ import { TOOLTIP_MAX_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_BG_CO
         fontSize: '11px',
         visibility: 'visible',
         opacity: 1,
-        transition: 'all 0.1s ease-out',
-        // Ensure pinned tooltip shows behind edit panel drawer and sticky header
+        // Animating transform causes intermediate positions outside the viewport; animate opacity/visibility instead.
+        transition: 'opacity 0.1s ease-out, visibility 0.1s ease-out',
+        // Pinned tooltip should not float above the drawer/sticky header.
         zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,
         overflow: 'hidden',
         '&:hover': {
@@ -82,5 +86,97 @@ import { TOOLTIP_MAX_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_BG_CO
         }
     };
 }
+export function getPixelXFromGrid(timestamp, chart) {
+    try {
+        const pixelCoords = chart.convertToPixel('grid', [
+            timestamp,
+            0
+        ]);
+        return pixelCoords?.[0] ?? null;
+    } catch  {
+        return null;
+    }
+}
+/**
+ * Returns the cumulative (visual) Y for a series, accumulating stack totals in-place.
+ * For non-stacked series, returns the raw yValue unchanged.
+ * Mutates `stackTotals` — pass a fresh Map for each cursor evaluation.
+ */ export function calculateVisualYForSeries(seriesIdx, yValue, seriesMapping, stackTotals) {
+    const currentSeries = seriesMapping[seriesIdx];
+    if (!currentSeries) return yValue;
+    const stackId = currentSeries.stack;
+    if (!stackId) {
+        return yValue;
+    }
+    const stackIdStr = stackId.toString();
+    const currentTotal = stackTotals.get(stackIdStr) ?? 0;
+    const newTotal = currentTotal + yValue;
+    stackTotals.set(stackIdStr, newTotal);
+    return newTotal;
+}
+export function calculateBarBandwidth(timestamp, sortedTimestamps, chart) {
+    const currentIdx = sortedTimestamps.indexOf(timestamp);
+    if (currentIdx === -1) {
+        return 20;
+    }
+    const prevTimestamp = currentIdx > 0 ? sortedTimestamps[currentIdx - 1] ?? null : null;
+    const nextTimestamp = currentIdx < sortedTimestamps.length - 1 ? sortedTimestamps[currentIdx + 1] ?? null : null;
+    const currentPixelX = getPixelXFromGrid(timestamp, chart);
+    if (currentPixelX === null) return 20;
+    let leftBound;
+    let rightBound;
+    if (prevTimestamp !== null && nextTimestamp !== null) {
+        const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;
+        const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;
+        leftBound = (currentPixelX + prevPixelX) / 2;
+        rightBound = (currentPixelX + nextPixelX) / 2;
+    } else if (prevTimestamp !== null) {
+        const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;
+        leftBound = (currentPixelX + prevPixelX) / 2;
+        rightBound = currentPixelX + (currentPixelX - leftBound);
+    } else if (nextTimestamp !== null) {
+        const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;
+        rightBound = (currentPixelX + nextPixelX) / 2;
+        leftBound = currentPixelX - (rightBound - currentPixelX);
+    } else {
+        return 20;
+    }
+    return Math.max(1, rightBound - leftBound);
+}
+/**
+ * Computes the pixel left/right bounds of one bar segment within a group.
+ * @param barRelativeIdx - zero-based index among bar-only series
+ * @param bandwidth      - total pixel width for the bar group
+ * @param centerPixelX   - pixel X of the bar group centre
+ * @param barCount       - total bar series count (lines excluded)
+ */ export function calculateBarSegmentBounds(barRelativeIdx, bandwidth, centerPixelX, barCount) {
+    const count = Math.max(1, barCount);
+    const segmentWidth = bandwidth / count;
+    const segmentLeft = centerPixelX - bandwidth / 2 + barRelativeIdx * segmentWidth;
+    return {
+        left: segmentLeft,
+        right: segmentLeft + segmentWidth
+    };
+}
+export function calculateBarYBounds(visualYBottom, visualYTop, chart) {
+    try {
+        const bottomPixel = chart.convertToPixel('grid', [
+            0,
+            visualYBottom
+        ]);
+        const topPixel = chart.convertToPixel('grid', [
+            0,
+            visualYTop
+        ]);
+        if (!bottomPixel || !topPixel || bottomPixel[1] === undefined || topPixel[1] === undefined) return null;
+        // Y increases downward in pixels; min/max normalizes the mapping for negative bar values.
+        return {
+            top: Math.min(topPixel[1], bottomPixel[1]),
+            bottom: Math.max(topPixel[1], bottomPixel[1])
+        };
+    } catch  {
+        return null;
+    }
+}
 
 //# sourceMappingURL=utils.js.map

package/dist/TimeSeriesTooltip/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/utils.ts"],"sourcesContent":["// Copyright 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 { Theme } from '@mui/material';\nimport {\n  CursorCoordinates,\n  CursorData,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_PADDING,\n} from './tooltip-model';\n\n/**\n * Determine position of tooltip depending on chart dimensions and the number of focused series\n */\nexport function assembleTransform(\n  mousePos: CursorData['coords'],\n  pinnedPos: CursorCoordinates | null,\n  tooltipHeight: number,\n  tooltipWidth: number,\n  containerElement?: Element | null\n): string | undefined {\n  if (mousePos === null) {\n    return undefined;\n  }\n\n  const cursorPaddingX = 32;\n  const cursorPaddingY = 16;\n\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n  }\n\n  if (mousePos.plotCanvas.x === undefined) return undefined;\n\n  let x = mousePos.page.x + cursorPaddingX; // Default to right side of the cursor\n  let y = mousePos.page.y + cursorPaddingY;\n\n  // If containerElement is defined, adjust coordinates relative to the container\n  if (containerElement) {\n    const containerRect = containerElement.getBoundingClientRect();\n    x = x - containerRect.left + containerElement.scrollLeft;\n    y = y - containerRect.top + containerElement.scrollTop;\n\n    // Ensure tooltip does not go out of the container's bottom\n    const containerBottom = containerRect.top + containerElement.scrollHeight;\n    if (y + tooltipHeight > containerBottom) {\n      y = Math.max(containerBottom - tooltipHeight - cursorPaddingY, TOOLTIP_PADDING / 2);\n    }\n  } else {\n    // Ensure tooltip does not go out of the screen on the bottom\n    if (y + tooltipHeight > window.innerHeight + window.scrollY) {\n      y = Math.max(window.innerHeight + window.scrollY - tooltipHeight - cursorPaddingY, TOOLTIP_PADDING / 2);\n    }\n  }\n\n  // Ensure tooltip does not go out of the screen on the right\n  if (x + tooltipWidth > window.innerWidth) {\n    x = mousePos.page.x - tooltipWidth - cursorPaddingX; // Move to the left of the cursor\n  }\n\n  // Ensure tooltip does not go out of the screen on the left\n  if (x < cursorPaddingX) {\n    x = cursorPaddingX;\n  }\n\n  // Ensure tooltip does not go out of the screen on the top\n  if (y < TOOLTIP_PADDING / 2) {\n    y = TOOLTIP_PADDING / 2;\n  }\n\n  return `translate3d(${x}px, ${y}px, 0)`;\n}\n\n/**\n * Helper for tooltip positioning styles\n */\nexport function getTooltipStyles(\n  theme: Theme,\n  pinnedPos: CursorCoordinates | null,\n  maxHeight?: number\n): Record<string, unknown> {\n  const adjustedMaxHeight = maxHeight ? maxHeight - TOOLTIP_PADDING : undefined;\n  return {\n    minWidth: TOOLTIP_MIN_WIDTH,\n    maxWidth: TOOLTIP_MAX_WIDTH,\n    maxHeight: adjustedMaxHeight ?? TOOLTIP_MAX_HEIGHT,\n    padding: 0,\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n    borderRadius: '6px',\n    color: '#fff',\n    fontSize: '11px',\n    visibility: 'visible',\n    opacity: 1,\n    transition: 'all 0.1s ease-out',\n    // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n    zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n    overflow: 'hidden',\n    '&:hover': {\n      overflowY: 'auto',\n    },\n  };\n}\n"],"names":["TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_PADDING","assembleTransform","mousePos","pinnedPos","tooltipHeight","tooltipWidth","containerElement","undefined","cursorPaddingX","cursorPaddingY","plotCanvas","x","page","y","containerRect","getBoundingClientRect","left","scrollLeft","top","scrollTop","containerBottom","scrollHeight","Math","max","window","innerHeight","scrollY","innerWidth","getTooltipStyles","theme","maxHeight","adjustedMaxHeight","minWidth","maxWidth","padding","position","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAGEA,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,yBAAyB,EACzBC,eAAe,QACV,kBAAkB;AAEzB;;CAEC,GACD,OAAO,SAASC,kBACdC,QAA8B,EAC9BC,SAAmC,EACnCC,aAAqB,EACrBC,YAAoB,EACpBC,gBAAiC;IAEjC,IAAIJ,aAAa,MAAM;QACrB,OAAOK;IACT;IAEA,MAAMC,iBAAiB;IACvB,MAAMC,iBAAiB;IAEvB,IAAIN,cAAc,MAAM;QACtBD,WAAWC;IACb;IAEA,IAAID,SAASQ,UAAU,CAACC,CAAC,KAAKJ,WAAW,OAAOA;IAEhD,IAAII,IAAIT,SAASU,IAAI,CAACD,CAAC,GAAGH,gBAAgB,sCAAsC;IAChF,IAAIK,IAAIX,SAASU,IAAI,CAACC,CAAC,GAAGJ;IAE1B,+EAA+E;IAC/E,IAAIH,kBAAkB;QACpB,MAAMQ,gBAAgBR,iBAAiBS,qBAAqB;QAC5DJ,IAAIA,IAAIG,cAAcE,IAAI,GAAGV,iBAAiBW,UAAU;QACxDJ,IAAIA,IAAIC,cAAcI,GAAG,GAAGZ,iBAAiBa,SAAS;QAEtD,2DAA2D;QAC3D,MAAMC,kBAAkBN,cAAcI,GAAG,GAAGZ,iBAAiBe,YAAY;QACzE,IAAIR,IAAIT,gBAAgBgB,iBAAiB;YACvCP,IAAIS,KAAKC,GAAG,CAACH,kBAAkBhB,gBAAgBK,gBAAgBT,kBAAkB;QACnF;IACF,OAAO;QACL,6DAA6D;QAC7D,IAAIa,IAAIT,gBAAgBoB,OAAOC,WAAW,GAAGD,OAAOE,OAAO,EAAE;YAC3Db,IAAIS,KAAKC,GAAG,CAACC,OAAOC,WAAW,GAAGD,OAAOE,OAAO,GAAGtB,gBAAgBK,gBAAgBT,kBAAkB;QACvG;IACF;IAEA,4DAA4D;IAC5D,IAAIW,IAAIN,eAAemB,OAAOG,UAAU,EAAE;QACxChB,IAAIT,SAASU,IAAI,CAACD,CAAC,GAAGN,eAAeG,gBAAgB,iCAAiC;IACxF;IAEA,2DAA2D;IAC3D,IAAIG,IAAIH,gBAAgB;QACtBG,IAAIH;IACN;IAEA,0DAA0D;IAC1D,IAAIK,IAAIb,kBAAkB,GAAG;QAC3Ba,IAAIb,kBAAkB;IACxB;IAEA,OAAO,CAAC,YAAY,EAAEW,EAAE,IAAI,EAAEE,EAAE,MAAM,CAAC;AACzC;AAEA;;CAEC,GACD,OAAO,SAASe,iBACdC,KAAY,EACZ1B,SAAmC,EACnC2B,SAAkB;IAElB,MAAMC,oBAAoBD,YAAYA,YAAY9B,kBAAkBO;IACpE,OAAO;QACLyB,UAAUlC;QACVmC,UAAUrC;QACVkC,WAAWC,qBAAqBlC;QAChCqC,SAAS;QACTC,UAAU;QACVjB,KAAK;QACLF,MAAM;QACNoB,iBAAiBP,MAAMQ,OAAO,CAACC,YAAY,EAAEC,IAAI,CAAC,IAAI,IAAIxC;QAC1DyC,cAAc;QACdC,OAAO;QACPC,UAAU;QACVC,YAAY;QACZC,SAAS;QACTC,YAAY;QACZ,yEAAyE;QACzEC,QAAQ3C,cAAc,OAAO,SAAS0B,MAAMiB,MAAM,CAACC,OAAO;QAC1DC,UAAU;QACV,WAAW;YACTC,WAAW;QACb;IACF;AACF"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/utils.ts"],"sourcesContent":["// Copyright 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 { Theme } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { BarSeriesOption, LineSeriesOption } from 'echarts/charts';\nimport { TimeChartSeriesMapping } from '../model';\nimport {\n  CursorCoordinates,\n  CursorData,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_PADDING,\n} from './tooltip-model';\n\n/**\n * Determine position of tooltip depending on chart dimensions and the number of focused series.\n */\nexport function assembleTransform(\n  mousePos: CursorData['coords'],\n  pinnedPos: CursorCoordinates | null,\n  tooltipHeight: number,\n  tooltipWidth: number,\n  containerElement?: Element | null\n): string | undefined {\n  if (mousePos === null) {\n    return undefined;\n  }\n\n  const cursorPaddingX = 32;\n  const cursorPaddingY = 16;\n\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n  }\n\n  if (mousePos.plotCanvas.x === undefined) return undefined;\n\n  // Fall back to max size before the resize observer reports a real measurement.\n  const effectiveHeight = tooltipHeight > 0 ? tooltipHeight : TOOLTIP_MAX_HEIGHT;\n  const effectiveWidth = tooltipWidth > 0 ? tooltipWidth : TOOLTIP_MAX_WIDTH;\n\n  let x = mousePos.page.x + cursorPaddingX; // Default to right side of the cursor\n  let y = mousePos.page.y + cursorPaddingY;\n\n  // If containerElement is defined, adjust coordinates relative to the container\n  if (containerElement) {\n    const containerRect = containerElement.getBoundingClientRect();\n    x = x - containerRect.left + containerElement.scrollLeft;\n    y = y - containerRect.top + containerElement.scrollTop;\n\n    // Ensure tooltip does not go out of the container's bottom\n    const containerBottom = containerRect.top + containerElement.scrollHeight;\n    if (y + effectiveHeight > containerBottom) {\n      y = Math.max(containerBottom - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);\n    }\n  } else {\n    // Ensure tooltip does not go out of the screen on the bottom\n    if (y + effectiveHeight > window.innerHeight + window.scrollY) {\n      y = Math.max(window.innerHeight + window.scrollY - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);\n    }\n  }\n\n  // Ensure tooltip does not go out of the screen on the right\n  if (x + effectiveWidth > window.innerWidth) {\n    x = mousePos.page.x - effectiveWidth - cursorPaddingX; // Move to the left of the cursor\n  }\n\n  // Ensure tooltip does not go out of the screen on the left\n  if (x < cursorPaddingX) {\n    x = cursorPaddingX;\n  }\n\n  // Ensure tooltip does not go out of the screen on the top\n  if (y < TOOLTIP_PADDING / 2) {\n    y = TOOLTIP_PADDING / 2;\n  }\n\n  return `translate3d(${x}px, ${y}px, 0)`;\n}\n\n/**\n * Helper for tooltip positioning styles\n */\nexport function getTooltipStyles(\n  theme: Theme,\n  pinnedPos: CursorCoordinates | null,\n  maxHeight?: number\n): Record<string, unknown> {\n  const adjustedMaxHeight = maxHeight ? maxHeight - TOOLTIP_PADDING : undefined;\n  return {\n    minWidth: TOOLTIP_MIN_WIDTH,\n    maxWidth: TOOLTIP_MAX_WIDTH,\n    maxHeight: adjustedMaxHeight ?? TOOLTIP_MAX_HEIGHT,\n    padding: 0,\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n    borderRadius: '6px',\n    color: '#fff',\n    fontSize: '11px',\n    visibility: 'visible',\n    opacity: 1,\n    // Animating transform causes intermediate positions outside the viewport; animate opacity/visibility instead.\n    transition: 'opacity 0.1s ease-out, visibility 0.1s ease-out',\n    // Pinned tooltip should not float above the drawer/sticky header.\n    zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n    overflow: 'hidden',\n    '&:hover': {\n      overflowY: 'auto',\n    },\n  };\n}\n\nexport function getPixelXFromGrid(timestamp: number, chart: EChartsInstance): number | null {\n  try {\n    const pixelCoords = chart.convertToPixel('grid', [timestamp, 0]);\n    return pixelCoords?.[0] ?? null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Returns the cumulative (visual) Y for a series, accumulating stack totals in-place.\n * For non-stacked series, returns the raw yValue unchanged.\n * Mutates `stackTotals` — pass a fresh Map for each cursor evaluation.\n */\nexport function calculateVisualYForSeries(\n  seriesIdx: number,\n  yValue: number,\n  seriesMapping: TimeChartSeriesMapping,\n  stackTotals: Map<string, number>\n): number {\n  const currentSeries = seriesMapping[seriesIdx];\n  if (!currentSeries) return yValue;\n\n  const stackId = (currentSeries as LineSeriesOption | BarSeriesOption).stack;\n  if (!stackId) {\n    return yValue;\n  }\n\n  const stackIdStr = stackId.toString();\n  const currentTotal = stackTotals.get(stackIdStr) ?? 0;\n  const newTotal = currentTotal + yValue;\n  stackTotals.set(stackIdStr, newTotal);\n  return newTotal;\n}\n\nexport function calculateBarBandwidth(timestamp: number, sortedTimestamps: number[], chart: EChartsInstance): number {\n  const currentIdx = sortedTimestamps.indexOf(timestamp);\n  if (currentIdx === -1) {\n    return 20;\n  }\n\n  const prevTimestamp = currentIdx > 0 ? (sortedTimestamps[currentIdx - 1] ?? null) : null;\n  const nextTimestamp = currentIdx < sortedTimestamps.length - 1 ? (sortedTimestamps[currentIdx + 1] ?? null) : null;\n\n  const currentPixelX = getPixelXFromGrid(timestamp, chart);\n  if (currentPixelX === null) return 20;\n\n  let leftBound: number;\n  let rightBound: number;\n\n  if (prevTimestamp !== null && nextTimestamp !== null) {\n    const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;\n    const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;\n    leftBound = (currentPixelX + prevPixelX) / 2;\n    rightBound = (currentPixelX + nextPixelX) / 2;\n  } else if (prevTimestamp !== null) {\n    const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;\n    leftBound = (currentPixelX + prevPixelX) / 2;\n    rightBound = currentPixelX + (currentPixelX - leftBound);\n  } else if (nextTimestamp !== null) {\n    const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;\n    rightBound = (currentPixelX + nextPixelX) / 2;\n    leftBound = currentPixelX - (rightBound - currentPixelX);\n  } else {\n    return 20;\n  }\n\n  return Math.max(1, rightBound - leftBound);\n}\n\n/**\n * Computes the pixel left/right bounds of one bar segment within a group.\n * @param barRelativeIdx - zero-based index among bar-only series\n * @param bandwidth      - total pixel width for the bar group\n * @param centerPixelX   - pixel X of the bar group centre\n * @param barCount       - total bar series count (lines excluded)\n */\nexport function calculateBarSegmentBounds(\n  barRelativeIdx: number,\n  bandwidth: number,\n  centerPixelX: number,\n  barCount: number\n): { left: number; right: number } {\n  const count = Math.max(1, barCount);\n  const segmentWidth = bandwidth / count;\n  const segmentLeft = centerPixelX - bandwidth / 2 + barRelativeIdx * segmentWidth;\n  return {\n    left: segmentLeft,\n    right: segmentLeft + segmentWidth,\n  };\n}\n\nexport function calculateBarYBounds(\n  visualYBottom: number,\n  visualYTop: number,\n  chart: EChartsInstance\n): { top: number; bottom: number } | null {\n  try {\n    const bottomPixel = chart.convertToPixel('grid', [0, visualYBottom]);\n    const topPixel = chart.convertToPixel('grid', [0, visualYTop]);\n\n    if (!bottomPixel || !topPixel || bottomPixel[1] === undefined || topPixel[1] === undefined) return null;\n\n    // Y increases downward in pixels; min/max normalizes the mapping for negative bar values.\n    return {\n      top: Math.min(topPixel[1], bottomPixel[1]),\n      bottom: Math.max(topPixel[1], bottomPixel[1]),\n    };\n  } catch {\n    return null;\n  }\n}\n"],"names":["TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_PADDING","assembleTransform","mousePos","pinnedPos","tooltipHeight","tooltipWidth","containerElement","undefined","cursorPaddingX","cursorPaddingY","plotCanvas","x","effectiveHeight","effectiveWidth","page","y","containerRect","getBoundingClientRect","left","scrollLeft","top","scrollTop","containerBottom","scrollHeight","Math","max","window","innerHeight","scrollY","innerWidth","getTooltipStyles","theme","maxHeight","adjustedMaxHeight","minWidth","maxWidth","padding","position","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","getPixelXFromGrid","timestamp","chart","pixelCoords","convertToPixel","calculateVisualYForSeries","seriesIdx","yValue","seriesMapping","stackTotals","currentSeries","stackId","stack","stackIdStr","toString","currentTotal","get","newTotal","set","calculateBarBandwidth","sortedTimestamps","currentIdx","indexOf","prevTimestamp","nextTimestamp","length","currentPixelX","leftBound","rightBound","prevPixelX","nextPixelX","calculateBarSegmentBounds","barRelativeIdx","bandwidth","centerPixelX","barCount","count","segmentWidth","segmentLeft","right","calculateBarYBounds","visualYBottom","visualYTop","bottomPixel","topPixel","min","bottom"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAMjC,SAGEA,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,yBAAyB,EACzBC,eAAe,QACV,kBAAkB;AAEzB;;CAEC,GACD,OAAO,SAASC,kBACdC,QAA8B,EAC9BC,SAAmC,EACnCC,aAAqB,EACrBC,YAAoB,EACpBC,gBAAiC;IAEjC,IAAIJ,aAAa,MAAM;QACrB,OAAOK;IACT;IAEA,MAAMC,iBAAiB;IACvB,MAAMC,iBAAiB;IAEvB,IAAIN,cAAc,MAAM;QACtBD,WAAWC;IACb;IAEA,IAAID,SAASQ,UAAU,CAACC,CAAC,KAAKJ,WAAW,OAAOA;IAEhD,+EAA+E;IAC/E,MAAMK,kBAAkBR,gBAAgB,IAAIA,gBAAgBP;IAC5D,MAAMgB,iBAAiBR,eAAe,IAAIA,eAAeT;IAEzD,IAAIe,IAAIT,SAASY,IAAI,CAACH,CAAC,GAAGH,gBAAgB,sCAAsC;IAChF,IAAIO,IAAIb,SAASY,IAAI,CAACC,CAAC,GAAGN;IAE1B,+EAA+E;IAC/E,IAAIH,kBAAkB;QACpB,MAAMU,gBAAgBV,iBAAiBW,qBAAqB;QAC5DN,IAAIA,IAAIK,cAAcE,IAAI,GAAGZ,iBAAiBa,UAAU;QACxDJ,IAAIA,IAAIC,cAAcI,GAAG,GAAGd,iBAAiBe,SAAS;QAEtD,2DAA2D;QAC3D,MAAMC,kBAAkBN,cAAcI,GAAG,GAAGd,iBAAiBiB,YAAY;QACzE,IAAIR,IAAIH,kBAAkBU,iBAAiB;YACzCP,IAAIS,KAAKC,GAAG,CAACH,kBAAkBV,kBAAkBH,gBAAgBT,kBAAkB;QACrF;IACF,OAAO;QACL,6DAA6D;QAC7D,IAAIe,IAAIH,kBAAkBc,OAAOC,WAAW,GAAGD,OAAOE,OAAO,EAAE;YAC7Db,IAAIS,KAAKC,GAAG,CAACC,OAAOC,WAAW,GAAGD,OAAOE,OAAO,GAAGhB,kBAAkBH,gBAAgBT,kBAAkB;QACzG;IACF;IAEA,4DAA4D;IAC5D,IAAIW,IAAIE,iBAAiBa,OAAOG,UAAU,EAAE;QAC1ClB,IAAIT,SAASY,IAAI,CAACH,CAAC,GAAGE,iBAAiBL,gBAAgB,iCAAiC;IAC1F;IAEA,2DAA2D;IAC3D,IAAIG,IAAIH,gBAAgB;QACtBG,IAAIH;IACN;IAEA,0DAA0D;IAC1D,IAAIO,IAAIf,kBAAkB,GAAG;QAC3Be,IAAIf,kBAAkB;IACxB;IAEA,OAAO,CAAC,YAAY,EAAEW,EAAE,IAAI,EAAEI,EAAE,MAAM,CAAC;AACzC;AAEA;;CAEC,GACD,OAAO,SAASe,iBACdC,KAAY,EACZ5B,SAAmC,EACnC6B,SAAkB;IAElB,MAAMC,oBAAoBD,YAAYA,YAAYhC,kBAAkBO;IACpE,OAAO;QACL2B,UAAUpC;QACVqC,UAAUvC;QACVoC,WAAWC,qBAAqBpC;QAChCuC,SAAS;QACTC,UAAU;QACVjB,KAAK;QACLF,MAAM;QACNoB,iBAAiBP,MAAMQ,OAAO,CAACC,YAAY,EAAEC,IAAI,CAAC,IAAI,IAAI1C;QAC1D2C,cAAc;QACdC,OAAO;QACPC,UAAU;QACVC,YAAY;QACZC,SAAS;QACT,8GAA8G;QAC9GC,YAAY;QACZ,kEAAkE;QAClEC,QAAQ7C,cAAc,OAAO,SAAS4B,MAAMiB,MAAM,CAACC,OAAO;QAC1DC,UAAU;QACV,WAAW;YACTC,WAAW;QACb;IACF;AACF;AAEA,OAAO,SAASC,kBAAkBC,SAAiB,EAAEC,KAAsB;IACzE,IAAI;QACF,MAAMC,cAAcD,MAAME,cAAc,CAAC,QAAQ;YAACH;YAAW;SAAE;QAC/D,OAAOE,aAAa,CAAC,EAAE,IAAI;IAC7B,EAAE,OAAM;QACN,OAAO;IACT;AACF;AAEA;;;;CAIC,GACD,OAAO,SAASE,0BACdC,SAAiB,EACjBC,MAAc,EACdC,aAAqC,EACrCC,WAAgC;IAEhC,MAAMC,gBAAgBF,aAAa,CAACF,UAAU;IAC9C,IAAI,CAACI,eAAe,OAAOH;IAE3B,MAAMI,UAAU,AAACD,cAAqDE,KAAK;IAC3E,IAAI,CAACD,SAAS;QACZ,OAAOJ;IACT;IAEA,MAAMM,aAAaF,QAAQG,QAAQ;IACnC,MAAMC,eAAeN,YAAYO,GAAG,CAACH,eAAe;IACpD,MAAMI,WAAWF,eAAeR;IAChCE,YAAYS,GAAG,CAACL,YAAYI;IAC5B,OAAOA;AACT;AAEA,OAAO,SAASE,sBAAsBlB,SAAiB,EAAEmB,gBAA0B,EAAElB,KAAsB;IACzG,MAAMmB,aAAaD,iBAAiBE,OAAO,CAACrB;IAC5C,IAAIoB,eAAe,CAAC,GAAG;QACrB,OAAO;IACT;IAEA,MAAME,gBAAgBF,aAAa,IAAKD,gBAAgB,CAACC,aAAa,EAAE,IAAI,OAAQ;IACpF,MAAMG,gBAAgBH,aAAaD,iBAAiBK,MAAM,GAAG,IAAKL,gBAAgB,CAACC,aAAa,EAAE,IAAI,OAAQ;IAE9G,MAAMK,gBAAgB1B,kBAAkBC,WAAWC;IACnD,IAAIwB,kBAAkB,MAAM,OAAO;IAEnC,IAAIC;IACJ,IAAIC;IAEJ,IAAIL,kBAAkB,QAAQC,kBAAkB,MAAM;QACpD,MAAMK,aAAa7B,kBAAkBuB,eAAerB,UAAUwB;QAC9D,MAAMI,aAAa9B,kBAAkBwB,eAAetB,UAAUwB;QAC9DC,YAAY,AAACD,CAAAA,gBAAgBG,UAAS,IAAK;QAC3CD,aAAa,AAACF,CAAAA,gBAAgBI,UAAS,IAAK;IAC9C,OAAO,IAAIP,kBAAkB,MAAM;QACjC,MAAMM,aAAa7B,kBAAkBuB,eAAerB,UAAUwB;QAC9DC,YAAY,AAACD,CAAAA,gBAAgBG,UAAS,IAAK;QAC3CD,aAAaF,gBAAiBA,CAAAA,gBAAgBC,SAAQ;IACxD,OAAO,IAAIH,kBAAkB,MAAM;QACjC,MAAMM,aAAa9B,kBAAkBwB,eAAetB,UAAUwB;QAC9DE,aAAa,AAACF,CAAAA,gBAAgBI,UAAS,IAAK;QAC5CH,YAAYD,gBAAiBE,CAAAA,aAAaF,aAAY;IACxD,OAAO;QACL,OAAO;IACT;IAEA,OAAOtD,KAAKC,GAAG,CAAC,GAAGuD,aAAaD;AAClC;AAEA;;;;;;CAMC,GACD,OAAO,SAASI,0BACdC,cAAsB,EACtBC,SAAiB,EACjBC,YAAoB,EACpBC,QAAgB;IAEhB,MAAMC,QAAQhE,KAAKC,GAAG,CAAC,GAAG8D;IAC1B,MAAME,eAAeJ,YAAYG;IACjC,MAAME,cAAcJ,eAAeD,YAAY,IAAID,iBAAiBK;IACpE,OAAO;QACLvE,MAAMwE;QACNC,OAAOD,cAAcD;IACvB;AACF;AAEA,OAAO,SAASG,oBACdC,aAAqB,EACrBC,UAAkB,EAClBxC,KAAsB;IAEtB,IAAI;QACF,MAAMyC,cAAczC,MAAME,cAAc,CAAC,QAAQ;YAAC;YAAGqC;SAAc;QACnE,MAAMG,WAAW1C,MAAME,cAAc,CAAC,QAAQ;YAAC;YAAGsC;SAAW;QAE7D,IAAI,CAACC,eAAe,CAACC,YAAYD,WAAW,CAAC,EAAE,KAAKxF,aAAayF,QAAQ,CAAC,EAAE,KAAKzF,WAAW,OAAO;QAEnG,0FAA0F;QAC1F,OAAO;YACLa,KAAKI,KAAKyE,GAAG,CAACD,QAAQ,CAAC,EAAE,EAAED,WAAW,CAAC,EAAE;YACzCG,QAAQ1E,KAAKC,GAAG,CAACuE,QAAQ,CAAC,EAAE,EAAED,WAAW,CAAC,EAAE;QAC9C;IACF,EAAE,OAAM;QACN,OAAO;IACT;AACF"}

package/dist/cjs/EChart/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./EChart"), exports);
+_export_star(require("./timezone-formatter"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/EChart/timezone-formatter.js

@@ -0,0 +1,49 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createTimezoneAwareAxisFormatter", {
+    enumerable: true,
+    get: function() {
+        return createTimezoneAwareAxisFormatter;
+    }
+});
+const _components = require("@perses-dev/components");
+const DAY_MS = 1000 * 60 * 60 * 24;
+const MONTH_MS = DAY_MS * 30;
+const YEAR_MS = DAY_MS * 365;
+function createTimezoneAwareAxisFormatter(rangeMs, timeZone) {
+    return function(value) {
+        const timeStamp = new Date(Number(value));
+        // more than 5 years
+        if (rangeMs > YEAR_MS * 5) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'yyyy', timeZone);
+        }
+        // more than 6 months
+        if (rangeMs > MONTH_MS * 6) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'MMM yyyy', timeZone);
+        }
+        // more than 10 days
+        if (rangeMs > DAY_MS * 10) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'dd.MM', timeZone);
+        }
+        // more than 2 days
+        if (rangeMs > DAY_MS * 2) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'dd.MM HH:mm', timeZone);
+        }
+        // less or equal 2 days
+        return (0, _components.formatWithTimeZone)(timeStamp, 'HH:mm', timeZone);
+    };
+}

package/dist/cjs/LinksEditor/index.js

@@ -14,7 +14,6 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./LinksEditor"), exports);
 _export_star(require("./LinkEditorForm"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -37,18 +37,37 @@ function _interop_require_default(obj) {
 const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId, chartRef, data, seriesMapping, enablePinning = true, wrapLabels, format, seriesFormatMap, onUnpinClick, pinnedPos }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const transform = (0, _react.useRef)();
+    const tooltipElementRef = (0, _react.useRef)(null);
     const mousePos = (0, _tooltipmodel.useMousePosition)();
     const { height, width, ref: tooltipRef } = (0, _useresizeobserver.default)();
     const isTooltipPinned = pinnedPos !== null && enablePinning;
+    // Stable callback — prevents the ResizeObserver from disconnecting/reconnecting on every render.
+    const setTooltipRef = (0, _react.useCallback)((node)=>{
+        tooltipElementRef.current = node;
+        tooltipRef(node);
+    }, [
+        tooltipRef
+    ]);
+    const containerElement = containerId ? document.querySelector(containerId) : undefined;
+    // Synchronously reposition after every render to prevent one-frame viewport overflow.
+    (0, _react.useLayoutEffect)(()=>{
+        if (mousePos === null) return;
+        const node = tooltipElementRef.current;
+        if (!node) return;
+        const rect = node.getBoundingClientRect();
+        if (rect.height === 0 || rect.width === 0) return;
+        const nextTransform = (0, _utils.assembleTransform)(mousePos, pinnedPos, rect.height, rect.width, containerElement);
+        if (nextTransform && nextTransform !== transform.current) {
+            transform.current = nextTransform;
+            node.style.transform = nextTransform;
+        }
+    });
     if (mousePos === null || mousePos.target === null || data === null) return null;
-    // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    const containerElement = containerId ? document.querySelector(containerId) : undefined;
-    // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off
+    // Cap height to container so the tooltip is not cut off.
     const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
     transform.current = (0, _utils.assembleTransform)(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);
-    // Get series nearby the cursor and pass into tooltip content children.
     const nearbySeries = (0, _nearbyseries.getNearbySeriesData)({
         mousePos,
         data,
@@ -66,7 +85,7 @@ const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartToolti
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Portal, {
         container: containerElement,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-            ref: tooltipRef,
+            ref: setTooltipRef,
             sx: (theme)=>(0, _utils.getTooltipStyles)(theme, pinnedPos, maxHeight),
             style: {
                 transform: transform.current

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -22,6 +22,7 @@ _export_star(require("./TooltipContent"), exports);
 _export_star(require("./TooltipHeader"), exports);
 _export_star(require("./nearby-series"), exports);
 _export_star(require("./tooltip-model"), exports);
+_export_star(require("./types"), exports);
 _export_star(require("./utils"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {