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

package/dist/EChart/index.d.ts

@@ -1,2 +1,3 @@
 export * from './EChart';
+export * from './timezone-formatter';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/EChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/EChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC"}

package/dist/EChart/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './EChart';
+export * from './timezone-formatter';
 
 //# sourceMappingURL=index.js.map

package/dist/EChart/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EChart/index.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 * from './EChart';\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;AAEjC,cAAc,WAAW"}
+{"version":3,"sources":["../../src/EChart/index.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 * from './EChart';\nexport * from './timezone-formatter';\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;AAEjC,cAAc,WAAW;AACzB,cAAc,uBAAuB"}

package/dist/EChart/timezone-formatter.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Creates a timezone-aware axis formatter function for different time ranges
+ */
+export declare function createTimezoneAwareAxisFormatter(rangeMs: number, timeZone: string): (value: number) => string;
+//# sourceMappingURL=timezone-formatter.d.ts.map

package/dist/EChart/timezone-formatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone-formatter.d.ts","sourceRoot":"","sources":["../../src/EChart/timezone-formatter.ts"],"names":[],"mappings":"AAmBA;;GAEG;AACH,wBAAgB,gCAAgC,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WACxD,MAAM,KAAG,MAAM,CA0BxC"}

package/dist/EChart/timezone-formatter.js

@@ -0,0 +1,43 @@
+// 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.
+import { formatWithTimeZone } from '@perses-dev/components';
+const DAY_MS = 1000 * 60 * 60 * 24;
+const MONTH_MS = DAY_MS * 30;
+const YEAR_MS = DAY_MS * 365;
+/**
+ * Creates a timezone-aware axis formatter function for different time ranges
+ */ export function createTimezoneAwareAxisFormatter(rangeMs, timeZone) {
+    return function(value) {
+        const timeStamp = new Date(Number(value));
+        // more than 5 years
+        if (rangeMs > YEAR_MS * 5) {
+            return formatWithTimeZone(timeStamp, 'yyyy', timeZone);
+        }
+        // more than 6 months
+        if (rangeMs > MONTH_MS * 6) {
+            return formatWithTimeZone(timeStamp, 'MMM yyyy', timeZone);
+        }
+        // more than 10 days
+        if (rangeMs > DAY_MS * 10) {
+            return formatWithTimeZone(timeStamp, 'dd.MM', timeZone);
+        }
+        // more than 2 days
+        if (rangeMs > DAY_MS * 2) {
+            return formatWithTimeZone(timeStamp, 'dd.MM HH:mm', timeZone);
+        }
+        // less or equal 2 days
+        return formatWithTimeZone(timeStamp, 'HH:mm', timeZone);
+    };
+}
+
+//# sourceMappingURL=timezone-formatter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/EChart/timezone-formatter.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 { formatWithTimeZone } from '@perses-dev/components';\n\nconst DAY_MS = 1000 * 60 * 60 * 24;\nconst MONTH_MS = DAY_MS * 30;\nconst YEAR_MS = DAY_MS * 365;\n\n/**\n * Creates a timezone-aware axis formatter function for different time ranges\n */\nexport function createTimezoneAwareAxisFormatter(rangeMs: number, timeZone: string) {\n  return function (value: number): string {\n    const timeStamp = new Date(Number(value));\n\n    // more than 5 years\n    if (rangeMs > YEAR_MS * 5) {\n      return formatWithTimeZone(timeStamp, 'yyyy', timeZone);\n    }\n\n    // more than 6 months\n    if (rangeMs > MONTH_MS * 6) {\n      return formatWithTimeZone(timeStamp, 'MMM yyyy', timeZone);\n    }\n\n    // more than 10 days\n    if (rangeMs > DAY_MS * 10) {\n      return formatWithTimeZone(timeStamp, 'dd.MM', timeZone);\n    }\n\n    // more than 2 days\n    if (rangeMs > DAY_MS * 2) {\n      return formatWithTimeZone(timeStamp, 'dd.MM HH:mm', timeZone);\n    }\n\n    // less or equal 2 days\n    return formatWithTimeZone(timeStamp, 'HH:mm', timeZone);\n  };\n}\n"],"names":["formatWithTimeZone","DAY_MS","MONTH_MS","YEAR_MS","createTimezoneAwareAxisFormatter","rangeMs","timeZone","value","timeStamp","Date","Number"],"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,kBAAkB,QAAQ,yBAAyB;AAE5D,MAAMC,SAAS,OAAO,KAAK,KAAK;AAChC,MAAMC,WAAWD,SAAS;AAC1B,MAAME,UAAUF,SAAS;AAEzB;;CAEC,GACD,OAAO,SAASG,iCAAiCC,OAAe,EAAEC,QAAgB;IAChF,OAAO,SAAUC,KAAa;QAC5B,MAAMC,YAAY,IAAIC,KAAKC,OAAOH;QAElC,oBAAoB;QACpB,IAAIF,UAAUF,UAAU,GAAG;YACzB,OAAOH,mBAAmBQ,WAAW,QAAQF;QAC/C;QAEA,qBAAqB;QACrB,IAAID,UAAUH,WAAW,GAAG;YAC1B,OAAOF,mBAAmBQ,WAAW,YAAYF;QACnD;QAEA,oBAAoB;QACpB,IAAID,UAAUJ,SAAS,IAAI;YACzB,OAAOD,mBAAmBQ,WAAW,SAASF;QAChD;QAEA,mBAAmB;QACnB,IAAID,UAAUJ,SAAS,GAAG;YACxB,OAAOD,mBAAmBQ,WAAW,eAAeF;QACtD;QAEA,uBAAuB;QACvB,OAAON,mBAAmBQ,WAAW,SAASF;IAChD;AACF"}

package/dist/LinksEditor/index.d.ts

@@ -1,3 +1,2 @@
-export * from './LinksEditor';
 export * from './LinkEditorForm';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/LinksEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/LinksEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC"}

package/dist/LinksEditor/index.js

@@ -10,7 +10,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './LinksEditor';
 export * from './LinkEditorForm';
 
 //# sourceMappingURL=index.js.map

package/dist/LinksEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinksEditor/index.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 * from './LinksEditor';\nexport * from './LinkEditorForm';\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;AAEjC,cAAc,gBAAgB;AAC9B,cAAc,mBAAmB"}
+{"version":3,"sources":["../../src/LinksEditor/index.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 * from './LinkEditorForm';\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;AAEjC,cAAc,mBAAmB"}

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

@@ -1 +1 @@
-{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAQ,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAoB,MAAM,iBAAiB,CAAC;AAMtE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6DA0E3B,CAAC"}
+{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAQ,gBAAgB,EAAkD,MAAM,OAAO,CAAC;AAE/F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAoB,MAAM,iBAAiB,CAAC;AAMtE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6DAiG3B,CAAC"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { memo, useRef, useState } from 'react';
+import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { Box, Portal, Stack } from '@mui/material';
 import useResizeObserver from 'use-resize-observer';
 import { useMousePosition } from './tooltip-model';
@@ -22,18 +22,37 @@ import { TooltipContent } from './TooltipContent';
 export const TimeChartTooltip = /*#__PURE__*/ memo(function TimeChartTooltip({ containerId, chartRef, data, seriesMapping, enablePinning = true, wrapLabels, format, seriesFormatMap, onUnpinClick, pinnedPos }) {
     const [showAllSeries, setShowAllSeries] = useState(false);
     const transform = useRef();
+    const tooltipElementRef = useRef(null);
     const mousePos = useMousePosition();
     const { height, width, ref: tooltipRef } = useResizeObserver();
     const isTooltipPinned = pinnedPos !== null && enablePinning;
+    // Stable callback — prevents the ResizeObserver from disconnecting/reconnecting on every render.
+    const setTooltipRef = 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.
+    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 = 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 = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);
-    // Get series nearby the cursor and pass into tooltip content children.
     const nearbySeries = getNearbySeriesData({
         mousePos,
         data,
@@ -51,7 +70,7 @@ export const TimeChartTooltip = /*#__PURE__*/ memo(function TimeChartTooltip({ c
     return /*#__PURE__*/ _jsx(Portal, {
         container: containerElement,
         children: /*#__PURE__*/ _jsx(Box, {
-            ref: tooltipRef,
+            ref: setTooltipRef,
             sx: (theme)=>getTooltipStyles(theme, pinnedPos, maxHeight),
             style: {
                 transform: transform.current

package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"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 { memo, MutableRefObject, useRef, useState } from 'react';\nimport { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { TimeSeries } from '@perses-dev/spec';\nimport useResizeObserver from 'use-resize-observer';\nimport { FormatOptions, TimeChartSeriesMapping } from '../model';\nimport { CursorCoordinates, useMousePosition } from './tooltip-model';\nimport { assembleTransform, getTooltipStyles } from './utils';\nimport { getNearbySeriesData } from './nearby-series';\nimport { TooltipHeader } from './TooltipHeader';\nimport { TooltipContent } from './TooltipContent';\n\nexport interface TimeChartTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options for per-series formatting (used with multiple Y axes)\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  seriesFormatMap,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const transform = useRef<string | undefined>();\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  if (mousePos === null || mousePos.target === null || data === 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\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    data,\n    seriesMapping,\n    pinnedPos,\n    chart,\n    format,\n    seriesFormatMap,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform: transform.current,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["memo","useRef","useState","Box","Portal","Stack","useResizeObserver","useMousePosition","assembleTransform","getTooltipStyles","getNearbySeriesData","TooltipHeader","TooltipContent","TimeChartTooltip","containerId","chartRef","data","seriesMapping","enablePinning","wrapLabels","format","seriesFormatMap","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","transform","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","nearbySeries","length","totalSeries","container","sx","theme","style","spacing","onShowAllClick","checked","series"],"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,IAAI,EAAoBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACjE,SAASC,GAAG,EAAEC,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAGnD,OAAOC,uBAAuB,sBAAsB;AAEpD,SAA4BC,gBAAgB,QAAQ,kBAAkB;AACtE,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,UAAU;AAC9D,SAASC,mBAAmB,QAAQ,kBAAkB;AACtD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,cAAc,QAAQ,mBAAmB;AAsBlD,OAAO,MAAMC,iCAAmBb,KAAK,SAASa,iBAAiB,EAC7DC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,aAAa,EACbC,gBAAgB,IAAI,EACpBC,UAAU,EACVC,MAAM,EACNC,eAAe,EACfC,YAAY,EACZC,SAAS,EACa;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGvB,SAAS;IACnD,MAAMwB,YAAYzB;IAElB,MAAM0B,WAAWpB;IACjB,MAAM,EAAEqB,MAAM,EAAEC,KAAK,EAAEC,KAAKC,UAAU,EAAE,GAAGzB;IAE3C,MAAM0B,kBAAkBT,cAAc,QAAQL;IAE9C,IAAIS,aAAa,QAAQA,SAASM,MAAM,KAAK,QAAQjB,SAAS,MAAM,OAAO;IAE3E,0EAA0E;IAC1E,IAAIO,cAAc,QAAQ,AAACI,SAASM,MAAM,CAAiBC,OAAO,KAAK,UAAU,OAAO;IAExF,MAAMC,QAAQpB,SAASqB,OAAO;IAE9B,MAAMC,mBAAmBvB,cAAcwB,SAASC,aAAa,CAACzB,eAAe0B;IAC7E,uHAAuH;IACvH,MAAMC,YAAYJ,mBAAmBA,iBAAiBK,qBAAqB,GAAGd,MAAM,GAAGY;IAEvFd,UAAUU,OAAO,GAAG5B,kBAAkBmB,UAAUJ,WAAWK,UAAU,GAAGC,SAAS,GAAGQ;IAEpF,uEAAuE;IACvE,MAAMM,eAAejC,oBAAoB;QACvCiB;QACAX;QACAC;QACAM;QACAY;QACAf;QACAC;QACAG;IACF;IACA,IAAImB,aAAaC,MAAM,KAAK,GAAG;QAC7B,OAAO;IACT;IAEA,MAAMC,cAAc7B,KAAK4B,MAAM;IAE/B,qBACE,KAACxC;QAAO0C,WAAWT;kBACjB,cAAA,KAAClC;YACC2B,KAAKC;YACLgB,IAAI,CAACC,QAAUvC,iBAAiBuC,OAAOzB,WAAWkB;YAClDQ,OAAO;gBACLvB,WAAWA,UAAUU,OAAO;YAC9B;sBAEA,cAAA,MAAC/B;gBAAM6C,SAAS;;kCACd,KAACvC;wBACCgC,cAAcA;wBACdE,aAAaA;wBACb3B,eAAeA;wBACfc,iBAAiBA;wBACjBR,eAAeA;wBACf2B,gBAAgB,CAACC,UAAY3B,iBAAiB2B;wBAC9C9B,cAAcA;;kCAEhB,KAACV;wBAAeyC,QAAQV;wBAAcxB,YAAYA;;;;;;AAK5D,GAAG"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"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 { memo, MutableRefObject, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { TimeSeries } from '@perses-dev/spec';\nimport useResizeObserver from 'use-resize-observer';\nimport { FormatOptions, TimeChartSeriesMapping } from '../model';\nimport { CursorCoordinates, useMousePosition } from './tooltip-model';\nimport { assembleTransform, getTooltipStyles } from './utils';\nimport { getNearbySeriesData } from './nearby-series';\nimport { TooltipHeader } from './TooltipHeader';\nimport { TooltipContent } from './TooltipContent';\n\nexport interface TimeChartTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options for per-series formatting (used with multiple Y axes)\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  seriesFormatMap,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const transform = useRef<string | undefined>();\n  const tooltipElementRef = useRef<HTMLDivElement | null>(null);\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  // Stable callback — prevents the ResizeObserver from disconnecting/reconnecting on every render.\n  const setTooltipRef = useCallback(\n    (node: HTMLDivElement | null): void => {\n      tooltipElementRef.current = node;\n      tooltipRef(node);\n    },\n    [tooltipRef]\n  );\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n\n  // Synchronously reposition after every render to prevent one-frame viewport overflow.\n  useLayoutEffect(() => {\n    if (mousePos === null) return;\n    const node = tooltipElementRef.current;\n    if (!node) return;\n    const rect = node.getBoundingClientRect();\n    if (rect.height === 0 || rect.width === 0) return;\n    const nextTransform = assembleTransform(mousePos, pinnedPos, rect.height, rect.width, containerElement);\n    if (nextTransform && nextTransform !== transform.current) {\n      transform.current = nextTransform;\n      node.style.transform = nextTransform;\n    }\n  });\n\n  if (mousePos === null || mousePos.target === null || data === null) return null;\n\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n\n  // Cap height to container so the tooltip is not cut off.\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    data,\n    seriesMapping,\n    pinnedPos,\n    chart,\n    format,\n    seriesFormatMap,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={setTooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform: transform.current,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["memo","useCallback","useLayoutEffect","useRef","useState","Box","Portal","Stack","useResizeObserver","useMousePosition","assembleTransform","getTooltipStyles","getNearbySeriesData","TooltipHeader","TooltipContent","TimeChartTooltip","containerId","chartRef","data","seriesMapping","enablePinning","wrapLabels","format","seriesFormatMap","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","transform","tooltipElementRef","mousePos","height","width","ref","tooltipRef","isTooltipPinned","setTooltipRef","node","current","containerElement","document","querySelector","undefined","rect","getBoundingClientRect","nextTransform","style","target","tagName","chart","maxHeight","nearbySeries","length","totalSeries","container","sx","theme","spacing","onShowAllClick","checked","series"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TooltipContent.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { NearbySeriesArray } from './nearby-series';
+import { NearbySeriesArray } from './types';
 export interface TooltipContentProps {
     series: NearbySeriesArray | null;
     wrapLabels?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,GAAG,IAAI,CAsC9E"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,GAAG,IAAI,CAsC9E"}

package/dist/TimeSeriesTooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"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 { ReactElement, useMemo } from 'react';\nimport { Box } from '@mui/material';\nimport { NearbySeriesArray } from './nearby-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps): ReactElement | null {\n  const { series, wrapLabels } = props;\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [series]);\n\n  if (series === null || sortedFocusedSeries === null) {\n    return null;\n  }\n  // TODO: use react-virtuoso to improve performance\n  return (\n    <Box\n      sx={(theme) => ({\n        display: 'table',\n        padding: theme.spacing(0.5, 2),\n      })}\n    >\n      {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor }) => {\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            emphasizeText={isClosestToCursor}\n          />\n        );\n      })}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","SeriesInfo","TooltipContent","props","series","wrapLabels","sortedFocusedSeries","sort","a","b","y","sx","theme","display","padding","spacing","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"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,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,UAAU,QAAQ,eAAe;AAO1C,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAE/B,MAAMG,sBAAsBP,QAAQ;QAClC,IAAIK,WAAW,MAAM,OAAO;QAC5B,OAAOA,OAAOG,IAAI,CAAC,CAACC,GAAGC,IAAOD,EAAEE,CAAC,GAAGD,EAAEC,CAAC,GAAG,CAAC,IAAI;IACjD,GAAG;QAACN;KAAO;IAEX,IAAIA,WAAW,QAAQE,wBAAwB,MAAM;QACnD,OAAO;IACT;IACA,kDAAkD;IAClD,qBACE,KAACN;QACCW,IAAI,CAACC,QAAW,CAAA;gBACdC,SAAS;gBACTC,SAASF,MAAMG,OAAO,CAAC,KAAK;YAC9B,CAAA;kBAECT,oBAAoBU,GAAG,CAAC,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAET,CAAC,EAAEU,UAAU,EAAEC,WAAW,EAAEC,iBAAiB,EAAE;YAC1G,IAAIL,aAAa,QAAQC,cAAc,MAAM,OAAO;YACpD,MAAMK,MAAML,UAAUM,QAAQ,KAAKP,SAASO,QAAQ;YAEpD,qBACE,KAACvB;gBAECkB,YAAYA;gBACZT,GAAGA;gBACHU,YAAYA;gBACZC,aAAaA;gBACbI,aAAanB,oBAAoBoB,MAAM;gBACvCrB,YAAYA;gBACZsB,eAAeL;eAPVC;QAUX;;AAGN"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"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 { ReactElement, useMemo } from 'react';\nimport { Box } from '@mui/material';\nimport { NearbySeriesArray } from './types';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps): ReactElement | null {\n  const { series, wrapLabels } = props;\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [series]);\n\n  if (series === null || sortedFocusedSeries === null) {\n    return null;\n  }\n  // TODO: use react-virtuoso to improve performance\n  return (\n    <Box\n      sx={(theme) => ({\n        display: 'table',\n        padding: theme.spacing(0.5, 2),\n      })}\n    >\n      {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor }) => {\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            emphasizeText={isClosestToCursor}\n          />\n        );\n      })}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","SeriesInfo","TooltipContent","props","series","wrapLabels","sortedFocusedSeries","sort","a","b","y","sx","theme","display","padding","spacing","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"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,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,UAAU,QAAQ,eAAe;AAO1C,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAE/B,MAAMG,sBAAsBP,QAAQ;QAClC,IAAIK,WAAW,MAAM,OAAO;QAC5B,OAAOA,OAAOG,IAAI,CAAC,CAACC,GAAGC,IAAOD,EAAEE,CAAC,GAAGD,EAAEC,CAAC,GAAG,CAAC,IAAI;IACjD,GAAG;QAACN;KAAO;IAEX,IAAIA,WAAW,QAAQE,wBAAwB,MAAM;QACnD,OAAO;IACT;IACA,kDAAkD;IAClD,qBACE,KAACN;QACCW,IAAI,CAACC,QAAW,CAAA;gBACdC,SAAS;gBACTC,SAASF,MAAMG,OAAO,CAAC,KAAK;YAC9B,CAAA;kBAECT,oBAAoBU,GAAG,CAAC,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAET,CAAC,EAAEU,UAAU,EAAEC,WAAW,EAAEC,iBAAiB,EAAE;YAC1G,IAAIL,aAAa,QAAQC,cAAc,MAAM,OAAO;YACpD,MAAMK,MAAML,UAAUM,QAAQ,KAAKP,SAASO,QAAQ;YAEpD,qBACE,KAACvB;gBAECkB,YAAYA;gBACZT,GAAGA;gBACHU,YAAYA;gBACZC,aAAaA;gBACbI,aAAanB,oBAAoBoB,MAAM;gBACvCrB,YAAYA;gBACZsB,eAAeL;eAPVC;QAUX;;AAGN"}

package/dist/TimeSeriesTooltip/TooltipHeader.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { NearbySeriesArray } from './nearby-series';
+import { NearbySeriesArray } from './types';
 export interface TooltipHeaderProps {
     nearbySeries: NearbySeriesArray;
     totalSeries: number;

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipHeader.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAQpD,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,0DA4HxB,CAAC"}
+{"version":3,"file":"TooltipHeader.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQ5C,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,0DA4HxB,CAAC"}

package/dist/TimeSeriesTooltip/TooltipHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"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 { Box, Divider, Typography, Stack, Switch } from '@mui/material';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport { memo, ReactElement } from 'react';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { NearbySeriesArray } from './nearby-series';\nimport {\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  PIN_TOOLTIP_HELP_TEXT,\n  UNPIN_TOOLTIP_HELP_TEXT,\n} from './tooltip-model';\n\nexport interface TooltipHeaderProps {\n  nearbySeries: NearbySeriesArray;\n  totalSeries: number;\n  isTooltipPinned: boolean;\n  showAllSeries: boolean;\n  enablePinning?: boolean;\n  onShowAllClick?: (checked: boolean) => void;\n  onUnpinClick?: () => void;\n}\n\nexport const TooltipHeader = memo(function TooltipHeader({\n  nearbySeries,\n  totalSeries,\n  isTooltipPinned,\n  showAllSeries,\n  enablePinning = true,\n  onShowAllClick,\n  onUnpinClick,\n}: TooltipHeaderProps) {\n  const { formatWithUserTimeZone } = useTimeZone();\n  const seriesTimeMs = nearbySeries[0]?.date ?? null;\n  if (seriesTimeMs === null) {\n    return null;\n  }\n\n  const formatTimeSeriesHeader = (timeMs: number): ReactElement => {\n    const date = new Date(timeMs);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n    return (\n      <Box>\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      </Box>\n    );\n  };\n\n  // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT\n  const showAllSeriesToggle = enablePinning && totalSeries > 5;\n\n  const pinTooltipHelpText = isTooltipPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT;\n\n  return (\n    <Box\n      sx={(theme) => ({\n        width: '100%',\n        maxWidth: TOOLTIP_MAX_WIDTH,\n        padding: theme.spacing(1.5, 2, 0.5, 2),\n        backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n        position: 'sticky',\n        top: 0,\n        left: 0,\n      })}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          display: 'flex',\n          justifyContent: 'start',\n          alignItems: 'center',\n          paddingBottom: 0.5,\n        }}\n      >\n        {formatTimeSeriesHeader(seriesTimeMs)}\n        <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }}>\n          {showAllSeriesToggle && (\n            <Stack direction=\"row\" gap={0.5} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n              <Typography sx={{ fontSize: 11 }}>Show All</Typography>\n              <Switch\n                checked={showAllSeries}\n                size=\"small\"\n                onChange={(_, checked) => {\n                  if (onShowAllClick !== undefined) {\n                    return onShowAllClick(checked);\n                  }\n                }}\n                sx={(theme) => ({\n                  '& .MuiSwitch-switchBase': {\n                    color: theme.palette.common.white,\n                  },\n                  '& .MuiSwitch-track': {\n                    backgroundColor: theme.palette.common.white,\n                  },\n                })}\n              />\n            </Stack>\n          )}\n          {enablePinning && (\n            <Stack direction=\"row\" alignItems=\"center\">\n              <Typography\n                sx={{\n                  marginRight: 0.5,\n                  fontSize: 11,\n                  verticalAlign: 'middle',\n                }}\n              >\n                {pinTooltipHelpText}\n              </Typography>\n              {isTooltipPinned ? (\n                <Pin\n                  onClick={() => {\n                    if (onUnpinClick !== undefined) {\n                      onUnpinClick();\n                    }\n                  }}\n                  sx={{\n                    fontSize: 16,\n                    cursor: 'pointer',\n                  }}\n                />\n              ) : (\n                <PinOutline sx={{ fontSize: 16 }} />\n              )}\n            </Stack>\n          )}\n        </Stack>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          width: '100%',\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n    </Box>\n  );\n});\n"],"names":["Box","Divider","Typography","Stack","Switch","Pin","PinOutline","memo","useTimeZone","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT","TooltipHeader","nearbySeries","totalSeries","isTooltipPinned","showAllSeries","enablePinning","onShowAllClick","onUnpinClick","formatWithUserTimeZone","seriesTimeMs","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","showAllSeriesToggle","pinTooltipHelpText","width","maxWidth","padding","spacing","backgroundColor","designSystem","grey","position","top","left","display","justifyContent","alignItems","paddingBottom","direction","gap","marginLeft","textAlign","fontSize","checked","size","onChange","_","undefined","marginRight","verticalAlign","onClick","cursor","borderColor"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"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 { Box, Divider, Typography, Stack, Switch } from '@mui/material';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport { memo, ReactElement } from 'react';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { NearbySeriesArray } from './types';\nimport {\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  PIN_TOOLTIP_HELP_TEXT,\n  UNPIN_TOOLTIP_HELP_TEXT,\n} from './tooltip-model';\n\nexport interface TooltipHeaderProps {\n  nearbySeries: NearbySeriesArray;\n  totalSeries: number;\n  isTooltipPinned: boolean;\n  showAllSeries: boolean;\n  enablePinning?: boolean;\n  onShowAllClick?: (checked: boolean) => void;\n  onUnpinClick?: () => void;\n}\n\nexport const TooltipHeader = memo(function TooltipHeader({\n  nearbySeries,\n  totalSeries,\n  isTooltipPinned,\n  showAllSeries,\n  enablePinning = true,\n  onShowAllClick,\n  onUnpinClick,\n}: TooltipHeaderProps) {\n  const { formatWithUserTimeZone } = useTimeZone();\n  const seriesTimeMs = nearbySeries[0]?.date ?? null;\n  if (seriesTimeMs === null) {\n    return null;\n  }\n\n  const formatTimeSeriesHeader = (timeMs: number): ReactElement => {\n    const date = new Date(timeMs);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n    return (\n      <Box>\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      </Box>\n    );\n  };\n\n  // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT\n  const showAllSeriesToggle = enablePinning && totalSeries > 5;\n\n  const pinTooltipHelpText = isTooltipPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT;\n\n  return (\n    <Box\n      sx={(theme) => ({\n        width: '100%',\n        maxWidth: TOOLTIP_MAX_WIDTH,\n        padding: theme.spacing(1.5, 2, 0.5, 2),\n        backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n        position: 'sticky',\n        top: 0,\n        left: 0,\n      })}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          display: 'flex',\n          justifyContent: 'start',\n          alignItems: 'center',\n          paddingBottom: 0.5,\n        }}\n      >\n        {formatTimeSeriesHeader(seriesTimeMs)}\n        <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }}>\n          {showAllSeriesToggle && (\n            <Stack direction=\"row\" gap={0.5} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n              <Typography sx={{ fontSize: 11 }}>Show All</Typography>\n              <Switch\n                checked={showAllSeries}\n                size=\"small\"\n                onChange={(_, checked) => {\n                  if (onShowAllClick !== undefined) {\n                    return onShowAllClick(checked);\n                  }\n                }}\n                sx={(theme) => ({\n                  '& .MuiSwitch-switchBase': {\n                    color: theme.palette.common.white,\n                  },\n                  '& .MuiSwitch-track': {\n                    backgroundColor: theme.palette.common.white,\n                  },\n                })}\n              />\n            </Stack>\n          )}\n          {enablePinning && (\n            <Stack direction=\"row\" alignItems=\"center\">\n              <Typography\n                sx={{\n                  marginRight: 0.5,\n                  fontSize: 11,\n                  verticalAlign: 'middle',\n                }}\n              >\n                {pinTooltipHelpText}\n              </Typography>\n              {isTooltipPinned ? (\n                <Pin\n                  onClick={() => {\n                    if (onUnpinClick !== undefined) {\n                      onUnpinClick();\n                    }\n                  }}\n                  sx={{\n                    fontSize: 16,\n                    cursor: 'pointer',\n                  }}\n                />\n              ) : (\n                <PinOutline sx={{ fontSize: 16 }} />\n              )}\n            </Stack>\n          )}\n        </Stack>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          width: '100%',\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n    </Box>\n  );\n});\n"],"names":["Box","Divider","Typography","Stack","Switch","Pin","PinOutline","memo","useTimeZone","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT","TooltipHeader","nearbySeries","totalSeries","isTooltipPinned","showAllSeries","enablePinning","onShowAllClick","onUnpinClick","formatWithUserTimeZone","seriesTimeMs","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","showAllSeriesToggle","pinTooltipHelpText","width","maxWidth","padding","spacing","backgroundColor","designSystem","grey","position","top","left","display","justifyContent","alignItems","paddingBottom","direction","gap","marginLeft","textAlign","fontSize","checked","size","onChange","_","undefined","marginRight","verticalAlign","onClick","cursor","borderColor"],"mappings":"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"}

package/dist/TimeSeriesTooltip/index.d.ts

@@ -6,5 +6,6 @@ export * from './TooltipContent';
 export * from './TooltipHeader';
 export * from './nearby-series';
 export * from './tooltip-model';
+export * from './types';
 export * from './utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/TimeSeriesTooltip/index.js

@@ -18,6 +18,7 @@ export * from './TooltipContent';
 export * from './TooltipHeader';
 export * from './nearby-series';
 export * from './tooltip-model';
+export * from './types';
 export * from './utils';
 
 //# sourceMappingURL=index.js.map

package/dist/TimeSeriesTooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/index.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 * from './SeriesInfo';\nexport * from './SeriesLabelsStack';\nexport * from './SeriesMarker';\nexport * from './TimeChartTooltip';\nexport * from './TooltipContent';\nexport * from './TooltipHeader';\nexport * from './nearby-series';\nexport * from './tooltip-model';\nexport * from './utils';\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;AAEjC,cAAc,eAAe;AAC7B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,qBAAqB;AACnC,cAAc,mBAAmB;AACjC,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,UAAU"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/index.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 * from './SeriesInfo';\nexport * from './SeriesLabelsStack';\nexport * from './SeriesMarker';\nexport * from './TimeChartTooltip';\nexport * from './TooltipContent';\nexport * from './TooltipHeader';\nexport * from './nearby-series';\nexport * from './tooltip-model';\nexport * from './types';\nexport * from './utils';\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;AAEjC,cAAc,eAAe;AAC7B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,qBAAqB;AACnC,cAAc,mBAAmB;AACjC,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,UAAU"}

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

@@ -2,26 +2,16 @@ import { ECharts as EChartsInstance } from 'echarts/core';
 import { TimeSeries } from '@perses-dev/spec';
 import { EChartsDataFormat, TimeChartSeriesMapping, FormatOptions } from '../model';
 import { CursorCoordinates, CursorData } from './tooltip-model';
+import { GetYBufferParams, IsWithinPercentageRangeParams, NearbySeriesArray } from './types';
+export type { NearbySeriesArray, NearbySeriesInfo } from './types';
 export declare const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5;
 export declare const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30;
 export declare const SHOW_FEWER_SERIES_LIMIT = 5;
-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[];
 /**
  * Returns formatted series data for the points that are close to the user's cursor.
  * Adjust xBuffer and yBuffer to increase or decrease number of series shown.
  */
-export declare function checkforNearbyTimeSeries(data: TimeSeries[], seriesMapping: TimeChartSeriesMapping, pointInGrid: number[], yBuffer: number, chart: EChartsInstance, format?: FormatOptions, seriesFormatMap?: Map<string, FormatOptions>, cursorPixelY?: number): NearbySeriesArray;
+export declare function checkforNearbyTimeSeries(data: TimeSeries[], seriesMapping: TimeChartSeriesMapping, pointInGrid: number[], yBuffer: number, chart: EChartsInstance, format?: FormatOptions, seriesFormatMap?: Map<string, FormatOptions>, cursorPixelY?: number, cursorXPixel?: number | null): NearbySeriesArray;
 /**
  * [DEPRECATED] 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
@@ -41,14 +31,6 @@ export declare function getNearbySeriesData({ mousePos, pinnedPos, data, seriesM
     seriesFormatMap?: Map<string, FormatOptions>;
     showAllSeries?: boolean;
 }): NearbySeriesArray;
-export declare function isWithinPercentageRange({ valueToCheck, baseValue, percentage, }: {
-    valueToCheck: number;
-    baseValue: number;
-    percentage: number;
-}): boolean;
-export declare function getYBuffer({ yInterval, totalSeries, showAllSeries, }: {
-    yInterval: number;
-    totalSeries: number;
-    showAllSeries?: boolean;
-}): number;
+export declare function isWithinPercentageRange({ valueToCheck, baseValue, percentage, }: IsWithinPercentageRangeParams): boolean;
+export declare function getYBuffer({ yInterval, totalSeries, showAllSeries }: GetYBufferParams): number;
 //# sourceMappingURL=nearby-series.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"nearby-series.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/nearby-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EACL,iBAAiB,EAEjB,sBAAsB,EAEtB,aAAa,EAEd,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAsB,MAAM,iBAAiB,CAAC;AAGpF,eAAO,MAAM,iCAAiC,MAAM,CAAC;AACrD,eAAO,MAAM,gCAAgC,KAAK,CAAC;AACnD,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,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;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,UAAU,EAAE,EAClB,aAAa,EAAE,sBAAsB,EACrC,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,eAAe,EACtB,MAAM,CAAC,EAAE,aAAa,EACtB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,EAE5C,YAAY,CAAC,EAAE,MAAM,GACpB,iBAAiB,CAiLnB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,eAAe,EACvB,MAAM,CAAC,EAAE,aAAa,GACrB,iBAAiB,CAmGnB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,MAAM,EACN,eAAe,EACf,aAAqB,GACtB,EAAE;IACD,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,iBAAiB,CAmEpB;AAKD,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,SAAS,EACT,UAAU,GACX,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,OAAO,CAKV;AAKD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,aAAqB,GACtB,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,MAAM,CAcT"}
+{"version":3,"file":"nearby-series.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/nearby-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EACL,iBAAiB,EAEjB,sBAAsB,EAEtB,aAAa,EAEd,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAsB,MAAM,iBAAiB,CAAC;AAQpF,OAAO,EAAa,gBAAgB,EAAE,6BAA6B,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAExG,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGnE,eAAO,MAAM,iCAAiC,MAAM,CAAC;AACrD,eAAO,MAAM,gCAAgC,KAAK,CAAC;AACnD,eAAO,MAAM,uBAAuB,IAAI,CAAC;AA8PzC;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,UAAU,EAAE,EAClB,aAAa,EAAE,sBAAsB,EACrC,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,eAAe,EACtB,MAAM,CAAC,EAAE,aAAa,EACtB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,EAE5C,YAAY,CAAC,EAAE,MAAM,EACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,GAC3B,iBAAiB,CA+CnB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,eAAe,EACvB,MAAM,CAAC,EAAE,aAAa,GACrB,iBAAiB,CAmGnB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,MAAM,EACN,eAAe,EACf,aAAqB,GACtB,EAAE;IACD,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,iBAAiB,CAiEpB;AAKD,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,SAAS,EACT,UAAU,GACX,EAAE,6BAA6B,GAAG,OAAO,CAKzC;AAKD,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,aAAqB,EAAE,EAAE,gBAAgB,GAAG,MAAM,CActG"}