@dynatrace/strato-components 3.13.2 → 3.14.0

package/esm/charts/single-value-grid/SingleValueGrid.sty.js

@@ -1,5 +1,5 @@
 import "./SingleValueGrid.css";
-var gridRows = "_1mx9zjb0-3-13-2";
+var gridRows = "_1mx9zjb0-3-14-0";
 export {
   gridRows
 };

package/esm/charts/single-value-grid/SingleValueGrid.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/single-value-grid/SingleValueGrid.css.ts"],
-  "sourcesContent": ["import './SingleValueGrid.css';\nexport var gridRows = '_1mx9zjb0-3-13-2';"],
+  "sourcesContent": ["import './SingleValueGrid.css';\nexport var gridRows = '_1mx9zjb0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

package/esm/charts/single-value-grid/components/GlobalFontSizeVariables.css

@@ -1,4 +1,4 @@
-._eom86z0-3-13-2 {
+._eom86z0-3-14-0 {
   position: relative;
   width: 100%;
   height: 100%;

package/esm/charts/single-value-grid/components/GlobalFontSizeVariables.sty.js

@@ -1,5 +1,5 @@
 import "./GlobalFontSizeVariables.css";
-var fontSizeWrapper = "_eom86z0-3-13-2";
+var fontSizeWrapper = "_eom86z0-3-14-0";
 export {
   fontSizeWrapper
 };

package/esm/charts/single-value-grid/components/GlobalFontSizeVariables.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/single-value-grid/components/GlobalFontSizeVariables.css.ts"],
-  "sourcesContent": ["import './GlobalFontSizeVariables.css';\nexport var fontSizeWrapper = '_eom86z0-3-13-2';"],
+  "sourcesContent": ["import './GlobalFontSizeVariables.css';\nexport var fontSizeWrapper = '_eom86z0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/single-value-grid/slots/Sparkline.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/single-value-grid/slots/Sparkline.ts"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { XAxis } from '../../core/components/sparkline-display/slots/XAxis.js';\nimport { YAxis } from '../../core/components/sparkline-display/slots/YAxis.js';\nimport type { SparklineProps } from '../../core/components/sparkline-display/types/sparkline-props.js';\n\n/**\n * Slot props for the sparkline component within SingleValueGrid.\n * @public\n */\nexport interface SingleValueGridSparklineProps\n  extends Omit<\n    SparklineProps,\n    | 'data'\n    | 'loading'\n    | 'labelsAlignment'\n    | 'labelsFixedWidth'\n    | 'width'\n    | 'height'\n  > {\n  /** Accessor function or string to retrieve the data for the sparkline. */\n  dataAccessor?: string;\n  /** Accessor function to retrieve the color of the sparkline. */\n  colorAccessor?: string;\n}\n\nconst SparklineRoot = (\n  props: PropsWithChildren<SingleValueGridSparklineProps>,\n) => null;\n\n/**\n * @public\n */\nexport const Sparkline = Object.assign(SparklineRoot, {\n  XAxis,\n  YAxis,\n});\n\n(Sparkline as typeof Sparkline & { displayName: string }).displayName =\n  'SingleValueGrid.Sparkline';\n"],
-  "mappings": "AAEA,SAAS,aAAa;AACtB,SAAS,aAAa;AAuBtB,MAAM,gBAAgB,CACpB,UACG;AAKE,MAAM,YAAY,OAAO,OAAO,eAAe;AAAA,EACpD;AAAA,EACA;AACF,CAAC;AAEA,UAAyD,cACxD;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { XAxis } from '../../core/components/sparkline-display/slots/XAxis.js';\nimport { YAxis } from '../../core/components/sparkline-display/slots/YAxis.js';\nimport type { SparklineProps } from '../../core/components/sparkline-display/types/sparkline-props.js';\n\n/**\n * Slot props for the sparkline component within SingleValueGrid.\n * @public\n */\nexport interface SingleValueGridSparklineProps extends Omit<\n  SparklineProps,\n  | 'data'\n  | 'loading'\n  | 'labelsAlignment'\n  | 'labelsFixedWidth'\n  | 'width'\n  | 'height'\n> {\n  /** Accessor function or string to retrieve the data for the sparkline. */\n  dataAccessor?: string;\n  /** Accessor function to retrieve the color of the sparkline. */\n  colorAccessor?: string;\n}\n\nconst SparklineRoot = (\n  props: PropsWithChildren<SingleValueGridSparklineProps>,\n) => null;\n\n/**\n * @public\n */\nexport const Sparkline = Object.assign(SparklineRoot, {\n  XAxis,\n  YAxis,\n});\n\n(Sparkline as typeof Sparkline & { displayName: string }).displayName =\n  'SingleValueGrid.Sparkline';\n"],
+  "mappings": "AAEA,SAAS,aAAa;AACtB,SAAS,aAAa;AAsBtB,MAAM,gBAAgB,CACpB,UACG;AAKE,MAAM,YAAY,OAAO,OAAO,eAAe;AAAA,EACpD;AAAA,EACA;AACF,CAAC;AAEA,UAAyD,cACxD;",
   "names": []
 }

package/esm/charts/timeseries/TimeseriesChartInternal.js

@@ -20,11 +20,15 @@ import { TimeseriesChartProviders } from "./providers/TimeseriesChartProviders.j
 import { AREAS } from "./types/timeseries-grid-area-rules.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { defaultChartSize } from "../../core/styles/defaultChartValues.sty.js";
-import { SCROLLBAR_WIDTH } from "../core/components/annotations/constants.js";
+import {
+  COMPACT_ANNOTATIONS_DIMENSIONS,
+  SCROLLBAR_WIDTH
+} from "../core/components/annotations/constants.js";
 import { getAnnotationsVisibleArea } from "../core/components/annotations/utils/get-annotations-visible-area.js";
 import { ChartGrid } from "../core/components/chart-grid/ChartGridRoot.js";
 import {
-  shouldShowAnnotations,
+  AnnotationDisplayMode,
+  getAnnotationDisplayMode,
   shouldShowAxes
 } from "../core/components/chart-grid/constants.js";
 import { useChartLayoutLoading } from "../core/components/chart-layout/hooks/useChartLayoutLoading.js";
@@ -76,11 +80,6 @@ const TimeseriesChartInternal = /* @__PURE__ */ forwardRef(({ config }, forwarde
   const { right: axisRightConfig, left: axisLeftConfig } = useTimeseriesFilteredYAxis();
   const { units } = useTimeseriesFilteredData();
   const { hidden: legendHidden } = useTimeseriesLegend();
-  const annotationsVisibleArea = getAnnotationsVisibleArea(
-    tracksQuantity,
-    annotations.visibleTracksLimit,
-    numHiddenTracks
-  );
   const availableWidth = tracksQuantity && orientation === "vertical" ? width - SCROLLBAR_WIDTH : width;
   const isLegendHiddenOrVertical = orientation === "vertical" || legendHidden;
   const isLegendHiddenOrRight = orientation === "horizontal" || legendHidden;
@@ -91,14 +90,23 @@ const TimeseriesChartInternal = /* @__PURE__ */ forwardRef(({ config }, forwarde
     isLegendHiddenOrVertical
   );
   const chartGridHeight = height - (!tracksQuantity || isLegendHiddenOrRight ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT : 0);
-  const showAnnotations = shouldShowAnnotations(
-    chartGridHeight,
-    tracksQuantity
+  const annotationDisplayMode = getAnnotationDisplayMode(
+    height,
+    tracksQuantity,
+    true
+  );
+  const compactAnnotations = annotationDisplayMode === AnnotationDisplayMode.Compact;
+  const showAnnotations = annotationDisplayMode !== AnnotationDisplayMode.Hidden;
+  const annotationsVisibleArea = getAnnotationsVisibleArea(
+    tracksQuantity,
+    compactAnnotations ? 1 : annotations.visibleTracksLimit,
+    numHiddenTracks,
+    compactAnnotations ? COMPACT_ANNOTATIONS_DIMENSIONS : void 0
   );
   const showAxes = shouldShowAxes(chartGridHeight);
   const chartGridRenderHeight = tracksQuantity && !isLegendHiddenOrRight && !showAnnotations ? chartGridHeight - OVERLAY_PADDING : chartGridHeight;
   const annotationsRowHeight = showAnnotations ? annotationsVisibleArea : 0;
-  const timeseriesGridTemplateRows = showAxes ? `minmax(0, ${annotationsRowHeight}px) minmax(60%, 1fr) minmax(0, auto)` : "0px 1fr 1px";
+  const timeseriesGridTemplateRows = showAxes ? `minmax(0, ${annotationsRowHeight}px) minmax(60%, 1fr) minmax(0, auto)` : `${annotationsRowHeight}px 1fr 1px`;
   useChartInteractions();
   return /* @__PURE__ */ jsx(
     "div",
@@ -146,7 +154,7 @@ const TimeseriesChartInternal = /* @__PURE__ */ forwardRef(({ config }, forwarde
                 ] }),
                 showAxes && /* @__PURE__ */ jsx(TimeseriesValueRightAxisArea, {}),
                 /* @__PURE__ */ jsx(TimeseriesThresholdArea, {}),
-                showAnnotations && /* @__PURE__ */ jsx(TimeseriesChartAnnotationsArea, {})
+                showAnnotations && /* @__PURE__ */ jsx(TimeseriesChartAnnotationsArea, { compact: compactAnnotations })
               ]
             }
           ) })

package/esm/charts/timeseries/TimeseriesChartInternal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/timeseries/TimeseriesChartInternal.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { TimeseriesAnnotationsIndicators } from './components/annotations-timeseries/TimeseriesAnnotationsIndicators.js';\nimport { TimeseriesChartAnnotationsArea } from './components/annotations-timeseries/TimeseriesChartAnnotationsArea.js';\nimport { TimeseriesTimeBottomAxisArea } from './components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.js';\nimport { TimeseriesValueLeftAxisArea } from './components/axes/TimeseriesValueLeftAxisArea.js';\nimport { TimeseriesValueRightAxisArea } from './components/axes/TimeseriesValueRightAxisArea.js';\nimport { TimeseriesChartOverlays } from './components/overlays/TimeseriesChartOverlays.js';\nimport { ThresholdIndicators } from './components/thresholds/ThresholdIndicators.js';\nimport { TimeseriesThresholdArea } from './components/thresholds/TimeseriesThresholdArea.js';\nimport { DISPLAY_NAME, TIMESERIES_ARIA_LABEL } from './constants.js';\nimport { useAnnotationsConfig } from './hooks/useAnnotationsConfig.js';\nimport { useChartInteractions } from './hooks/useChartInteractions.js';\nimport { useTimeseriesFilteredData } from './hooks/useTimeseriesFilteredData.js';\nimport { useTimeseriesFilteredYAxis } from './hooks/useTimeseriesFilteredYAxis.js';\nimport { useTimeseriesLegend } from './hooks/useTimeseriesLegend.js';\nimport { TimeseriesChartPlot } from './layout/TimeseriesChartPlot.js';\nimport { TimeseriesChartImperativeHandler } from './providers/TimeseriesChartImperativeHandler.js';\nimport { TimeseriesChartProviders } from './providers/TimeseriesChartProviders.js';\nimport type { TimeseriesChartConfiguration } from './types/timeseries-config.js';\nimport { AREAS } from './types/timeseries-grid-area-rules.js';\nimport type { TimeseriesChartRef } from './types/timeseries-ref.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { SCROLLBAR_WIDTH } from '../core/components/annotations/constants.js';\nimport { getAnnotationsVisibleArea } from '../core/components/annotations/utils/get-annotations-visible-area.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport {\n  shouldShowAnnotations,\n  shouldShowAxes,\n} from '../core/components/chart-grid/constants.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport { ChartLoaderOverlay } from '../core/components/chart-loader-overlay/ChartLoaderOverlay.js';\nimport {\n  BOTTOM_PADDING_ADJUSTMENT,\n  OVERLAY_PADDING,\n} from '../core/components/data-point/constants.js';\nimport { useAriaLabelingContext } from '../core/context/AriaLabelingContext.js';\n\nexport function computeChartPadding(\n  axisLeftConfig: unknown,\n  axisRightConfig: unknown,\n  unitsCount: number,\n  isLegendHiddenOrVertical: boolean,\n): { hasLeftPadding: boolean; hasRightPadding: boolean } {\n  const singleUnit = unitsCount === 1 && isLegendHiddenOrVertical;\n  const paddingRight = Boolean(\n    (!axisLeftConfig && !axisRightConfig && singleUnit) ||\n    (axisLeftConfig && axisRightConfig && singleUnit) ||\n    (axisLeftConfig && isLegendHiddenOrVertical),\n  );\n  const onlyRightAxis = !axisLeftConfig && Boolean(axisRightConfig);\n  return {\n    hasLeftPadding: onlyRightAxis,\n    hasRightPadding: onlyRightAxis || paddingRight,\n  };\n}\n\nconst timeseriesGridTemplateAreas = `\n  \"${AREAS.annotations} ${AREAS.annotations} ${AREAS.annotations} . .\"\n  \"${AREAS.leftAxis} ${AREAS.leftThreshold} plot ${AREAS.rightThreshold} ${AREAS.rightAxis}\"\n  \". . ${AREAS.bottomAxis} . .\"\n`;\nconst timeseriesGridTemplateColumns =\n  'minmax(0, auto) auto minmax(60%, 1fr) auto minmax(0, auto)';\n\nexport interface _TimeseriesChartProps {\n  config: TimeseriesChartConfiguration;\n}\n\nexport const TimeseriesChartInternal = /* @__PURE__ */ forwardRef<\n  TimeseriesChartRef,\n  PropsWithChildren<_TimeseriesChartProps>\n>(({ config }, forwardedRef) => {\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n  } = useAriaLabelingContext();\n  const loading = useChartLayoutLoading();\n  const annotations = useAnnotationsConfig();\n  const tracksQuantity = annotations.tracks.length;\n  const numHiddenTracks = annotations.tracks.filter(\n    (value) => value.hidden,\n  ).length;\n\n  const chartRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs<TimeseriesChartRef | HTMLDivElement>([\n    forwardedRef,\n    chartRef,\n  ]);\n\n  const { width, height } = useGraphSize();\n  const { orientation } = useChartLayoutOrientation();\n  const { right: axisRightConfig, left: axisLeftConfig } =\n    useTimeseriesFilteredYAxis();\n  const { units } = useTimeseriesFilteredData();\n  const { hidden: legendHidden } = useTimeseriesLegend();\n\n  const annotationsVisibleArea = getAnnotationsVisibleArea(\n    tracksQuantity,\n    annotations.visibleTracksLimit,\n    numHiddenTracks,\n  );\n\n  const availableWidth =\n    tracksQuantity && orientation === 'vertical'\n      ? width - SCROLLBAR_WIDTH\n      : width;\n\n  const isLegendHiddenOrVertical = orientation === 'vertical' || legendHidden;\n  const isLegendHiddenOrRight = orientation === 'horizontal' || legendHidden;\n\n  const { hasLeftPadding, hasRightPadding } = computeChartPadding(\n    axisLeftConfig,\n    axisRightConfig,\n    units.length,\n    isLegendHiddenOrVertical,\n  );\n\n  const chartGridHeight =\n    height -\n    (!tracksQuantity || isLegendHiddenOrRight\n      ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT\n      : 0);\n\n  const showAnnotations = shouldShowAnnotations(\n    chartGridHeight,\n    tracksQuantity,\n  );\n\n  const showAxes = shouldShowAxes(chartGridHeight);\n  const chartGridRenderHeight =\n    tracksQuantity && !isLegendHiddenOrRight && !showAnnotations\n      ? chartGridHeight - OVERLAY_PADDING\n      : chartGridHeight;\n\n  const annotationsRowHeight = showAnnotations ? annotationsVisibleArea : 0;\n\n  const timeseriesGridTemplateRows = showAxes\n    ? `minmax(0, ${annotationsRowHeight}px) minmax(60%, 1fr) minmax(0, auto)`\n    : '0px 1fr 1px';\n\n  useChartInteractions();\n\n  return (\n    <div\n      style={{\n        paddingTop: showAnnotations ? 0 : OVERLAY_PADDING,\n        paddingLeft: hasLeftPadding ? OVERLAY_PADDING : 0,\n      }}\n      className={defaultChartSize}\n      aria-label={ariaLabel ?? TIMESERIES_ARIA_LABEL}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-details={ariaDetails}\n      role=\"img\"\n    >\n      <ChartGrid\n        width={availableWidth - (hasRightPadding ? OVERLAY_PADDING : 0)}\n        height={chartGridRenderHeight}\n        gridTemplateAreas={timeseriesGridTemplateAreas}\n        gridTemplateColumns={timeseriesGridTemplateColumns}\n        gridTemplateRows={timeseriesGridTemplateRows}\n        ref={mergedRef}\n      >\n        <TimeseriesChartProviders>\n          <TimeseriesChartImperativeHandler\n            config={config}\n            forwardedRef={forwardedRef}\n            chartRef={chartRef}\n          >\n            {showAxes && <TimeseriesValueLeftAxisArea />}\n            {showAxes && <TimeseriesTimeBottomAxisArea />}\n\n            <ChartGrid.PlotArea>\n              <TimeseriesChartPlot />\n              {showAnnotations && <TimeseriesAnnotationsIndicators />}\n              <ChartLoaderOverlay\n                loading={!!loading}\n                zoomEnabled={!!config.interactions?.zoom?.enabled}\n              >\n                <TimeseriesChartOverlays />\n              </ChartLoaderOverlay>\n\n              <ThresholdIndicators indicatorType=\"line\" />\n            </ChartGrid.PlotArea>\n\n            {showAxes && <TimeseriesValueRightAxisArea />}\n            <TimeseriesThresholdArea />\n\n            {showAnnotations && <TimeseriesChartAnnotationsArea />}\n          </TimeseriesChartImperativeHandler>\n        </TimeseriesChartProviders>\n      </ChartGrid>\n    </div>\n  );\n});\n\n(\n  TimeseriesChartInternal as typeof TimeseriesChartInternal & {\n    displayName: string;\n  }\n).displayName = DISPLAY_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { TimeseriesAnnotationsIndicators } from './components/annotations-timeseries/TimeseriesAnnotationsIndicators.js';\nimport { TimeseriesChartAnnotationsArea } from './components/annotations-timeseries/TimeseriesChartAnnotationsArea.js';\nimport { TimeseriesTimeBottomAxisArea } from './components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.js';\nimport { TimeseriesValueLeftAxisArea } from './components/axes/TimeseriesValueLeftAxisArea.js';\nimport { TimeseriesValueRightAxisArea } from './components/axes/TimeseriesValueRightAxisArea.js';\nimport { TimeseriesChartOverlays } from './components/overlays/TimeseriesChartOverlays.js';\nimport { ThresholdIndicators } from './components/thresholds/ThresholdIndicators.js';\nimport { TimeseriesThresholdArea } from './components/thresholds/TimeseriesThresholdArea.js';\nimport { DISPLAY_NAME, TIMESERIES_ARIA_LABEL } from './constants.js';\nimport { useAnnotationsConfig } from './hooks/useAnnotationsConfig.js';\nimport { useChartInteractions } from './hooks/useChartInteractions.js';\nimport { useTimeseriesFilteredData } from './hooks/useTimeseriesFilteredData.js';\nimport { useTimeseriesFilteredYAxis } from './hooks/useTimeseriesFilteredYAxis.js';\nimport { useTimeseriesLegend } from './hooks/useTimeseriesLegend.js';\nimport { TimeseriesChartPlot } from './layout/TimeseriesChartPlot.js';\nimport { TimeseriesChartImperativeHandler } from './providers/TimeseriesChartImperativeHandler.js';\nimport { TimeseriesChartProviders } from './providers/TimeseriesChartProviders.js';\nimport type { TimeseriesChartConfiguration } from './types/timeseries-config.js';\nimport { AREAS } from './types/timeseries-grid-area-rules.js';\nimport type { TimeseriesChartRef } from './types/timeseries-ref.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport {\n  COMPACT_ANNOTATIONS_DIMENSIONS,\n  SCROLLBAR_WIDTH,\n} from '../core/components/annotations/constants.js';\nimport { getAnnotationsVisibleArea } from '../core/components/annotations/utils/get-annotations-visible-area.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport {\n  AnnotationDisplayMode,\n  getAnnotationDisplayMode,\n  shouldShowAxes,\n} from '../core/components/chart-grid/constants.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport { ChartLoaderOverlay } from '../core/components/chart-loader-overlay/ChartLoaderOverlay.js';\nimport {\n  BOTTOM_PADDING_ADJUSTMENT,\n  OVERLAY_PADDING,\n} from '../core/components/data-point/constants.js';\nimport { useAriaLabelingContext } from '../core/context/AriaLabelingContext.js';\n\nexport function computeChartPadding(\n  axisLeftConfig: unknown,\n  axisRightConfig: unknown,\n  unitsCount: number,\n  isLegendHiddenOrVertical: boolean,\n): { hasLeftPadding: boolean; hasRightPadding: boolean } {\n  const singleUnit = unitsCount === 1 && isLegendHiddenOrVertical;\n  const paddingRight = Boolean(\n    (!axisLeftConfig && !axisRightConfig && singleUnit) ||\n    (axisLeftConfig && axisRightConfig && singleUnit) ||\n    (axisLeftConfig && isLegendHiddenOrVertical),\n  );\n  const onlyRightAxis = !axisLeftConfig && Boolean(axisRightConfig);\n  return {\n    hasLeftPadding: onlyRightAxis,\n    hasRightPadding: onlyRightAxis || paddingRight,\n  };\n}\n\nconst timeseriesGridTemplateAreas = `\n  \"${AREAS.annotations} ${AREAS.annotations} ${AREAS.annotations} . .\"\n  \"${AREAS.leftAxis} ${AREAS.leftThreshold} plot ${AREAS.rightThreshold} ${AREAS.rightAxis}\"\n  \". . ${AREAS.bottomAxis} . .\"\n`;\nconst timeseriesGridTemplateColumns =\n  'minmax(0, auto) auto minmax(60%, 1fr) auto minmax(0, auto)';\n\nexport interface _TimeseriesChartProps {\n  config: TimeseriesChartConfiguration;\n}\n\nexport const TimeseriesChartInternal = /* @__PURE__ */ forwardRef<\n  TimeseriesChartRef,\n  PropsWithChildren<_TimeseriesChartProps>\n>(({ config }, forwardedRef) => {\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n  } = useAriaLabelingContext();\n  const loading = useChartLayoutLoading();\n  const annotations = useAnnotationsConfig();\n  const tracksQuantity = annotations.tracks.length;\n  const numHiddenTracks = annotations.tracks.filter(\n    (value) => value.hidden,\n  ).length;\n\n  const chartRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs<TimeseriesChartRef | HTMLDivElement>([\n    forwardedRef,\n    chartRef,\n  ]);\n\n  const { width, height } = useGraphSize();\n  const { orientation } = useChartLayoutOrientation();\n  const { right: axisRightConfig, left: axisLeftConfig } =\n    useTimeseriesFilteredYAxis();\n  const { units } = useTimeseriesFilteredData();\n  const { hidden: legendHidden } = useTimeseriesLegend();\n\n  const availableWidth =\n    tracksQuantity && orientation === 'vertical'\n      ? width - SCROLLBAR_WIDTH\n      : width;\n\n  const isLegendHiddenOrVertical = orientation === 'vertical' || legendHidden;\n  const isLegendHiddenOrRight = orientation === 'horizontal' || legendHidden;\n\n  const { hasLeftPadding, hasRightPadding } = computeChartPadding(\n    axisLeftConfig,\n    axisRightConfig,\n    units.length,\n    isLegendHiddenOrVertical,\n  );\n\n  const chartGridHeight =\n    height -\n    (!tracksQuantity || isLegendHiddenOrRight\n      ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT\n      : 0);\n\n  const annotationDisplayMode = getAnnotationDisplayMode(\n    height,\n    tracksQuantity,\n    true,\n  );\n  const compactAnnotations =\n    annotationDisplayMode === AnnotationDisplayMode.Compact;\n  const showAnnotations =\n    annotationDisplayMode !== AnnotationDisplayMode.Hidden;\n\n  const annotationsVisibleArea = getAnnotationsVisibleArea(\n    tracksQuantity,\n    compactAnnotations ? 1 : annotations.visibleTracksLimit,\n    numHiddenTracks,\n    compactAnnotations ? COMPACT_ANNOTATIONS_DIMENSIONS : undefined,\n  );\n\n  const showAxes = shouldShowAxes(chartGridHeight);\n  const chartGridRenderHeight =\n    tracksQuantity && !isLegendHiddenOrRight && !showAnnotations\n      ? chartGridHeight - OVERLAY_PADDING\n      : chartGridHeight;\n\n  const annotationsRowHeight = showAnnotations ? annotationsVisibleArea : 0;\n\n  const timeseriesGridTemplateRows = showAxes\n    ? `minmax(0, ${annotationsRowHeight}px) minmax(60%, 1fr) minmax(0, auto)`\n    : `${annotationsRowHeight}px 1fr 1px`;\n\n  useChartInteractions();\n\n  return (\n    <div\n      style={{\n        paddingTop: showAnnotations ? 0 : OVERLAY_PADDING,\n        paddingLeft: hasLeftPadding ? OVERLAY_PADDING : 0,\n      }}\n      className={defaultChartSize}\n      aria-label={ariaLabel ?? TIMESERIES_ARIA_LABEL}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-details={ariaDetails}\n      role=\"img\"\n    >\n      <ChartGrid\n        width={availableWidth - (hasRightPadding ? OVERLAY_PADDING : 0)}\n        height={chartGridRenderHeight}\n        gridTemplateAreas={timeseriesGridTemplateAreas}\n        gridTemplateColumns={timeseriesGridTemplateColumns}\n        gridTemplateRows={timeseriesGridTemplateRows}\n        ref={mergedRef}\n      >\n        <TimeseriesChartProviders>\n          <TimeseriesChartImperativeHandler\n            config={config}\n            forwardedRef={forwardedRef}\n            chartRef={chartRef}\n          >\n            {showAxes && <TimeseriesValueLeftAxisArea />}\n            {showAxes && <TimeseriesTimeBottomAxisArea />}\n\n            <ChartGrid.PlotArea>\n              <TimeseriesChartPlot />\n              {showAnnotations && <TimeseriesAnnotationsIndicators />}\n              <ChartLoaderOverlay\n                loading={!!loading}\n                zoomEnabled={!!config.interactions?.zoom?.enabled}\n              >\n                <TimeseriesChartOverlays />\n              </ChartLoaderOverlay>\n\n              <ThresholdIndicators indicatorType=\"line\" />\n            </ChartGrid.PlotArea>\n\n            {showAxes && <TimeseriesValueRightAxisArea />}\n            <TimeseriesThresholdArea />\n\n            {showAnnotations && (\n              <TimeseriesChartAnnotationsArea compact={compactAnnotations} />\n            )}\n          </TimeseriesChartImperativeHandler>\n        </TimeseriesChartProviders>\n      </ChartGrid>\n    </div>\n  );\n});\n\n(\n  TimeseriesChartInternal as typeof TimeseriesChartInternal & {\n    displayName: string;\n  }\n).displayName = DISPLAY_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/timeseries/components/annotations-timeseries/TimeseriesChartAnnotationsArea.js

@@ -3,6 +3,7 @@ import { useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioral
 import { AnnotationsTimeDisplay } from "../../../core/components/annotations/components/displays/AnnotationsTimeDisplay.js";
 import { AnnotationsScrollWrapper } from "../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js";
 import {
+  COMPACT_ANNOTATIONS_DIMENSIONS,
   DEFAULT_TEXT_OVERFLOW,
   DEFAULT_SHOW_LABELS,
   SCROLLBAR_THRESHOLD
@@ -14,7 +15,9 @@ import { useAnnotationsConfig } from "../../hooks/useAnnotationsConfig.js";
 import { useXScales } from "../../hooks/useXScale.js";
 import { AREAS } from "../../types/timeseries-grid-area-rules.js";
 const COMPONENT_NAME = "AnnotationsChart";
-const TimeseriesChartAnnotationsArea = () => {
+const TimeseriesChartAnnotationsArea = ({
+  compact = false
+}) => {
   const config = useAnnotationsConfig();
   const {
     tracks,
@@ -50,12 +53,16 @@ const TimeseriesChartAnnotationsArea = () => {
             tracks,
             width: availableWidth,
             scale,
-            showLabels: showLabels ?? DEFAULT_SHOW_LABELS,
+            showLabels: compact ? false : showLabels ?? DEFAULT_SHOW_LABELS,
             labelsOffset: labelOffset,
             annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
             markerGroupHover: handleUpdateIndicators,
             textOverflow,
             tooltipConfig: tooltip,
+            ...compact && {
+              dimensions: COMPACT_ANNOTATIONS_DIMENSIONS,
+              showMarkerContent: false
+            },
             ...behaviorTrackingProps,
             "data-dt-component": COMPONENT_NAME
           }

package/esm/charts/timeseries/components/annotations-timeseries/TimeseriesChartAnnotationsArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/annotations-timeseries/TimeseriesChartAnnotationsArea.tsx"],
-  "sourcesContent": ["import { ScaleTime } from 'd3-scale';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { AnnotationsTimeDisplay } from '../../../core/components/annotations/components/displays/AnnotationsTimeDisplay.js';\nimport { AnnotationsScrollWrapper } from '../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js';\nimport {\n  DEFAULT_TEXT_OVERFLOW,\n  DEFAULT_SHOW_LABELS,\n  SCROLLBAR_THRESHOLD,\n} from '../../../core/components/annotations/constants.js';\nimport type { AnnotationsActionsPayload } from '../../../core/components/annotations/types/annotations.js';\nimport type { SelectionState } from '../../../core/components/annotations/types/state.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { useSetState } from '../../hooks/store/selectors.js';\nimport { useAnnotationsConfig } from '../../hooks/useAnnotationsConfig.js';\nimport { useXScales } from '../../hooks/useXScale.js';\nimport { AREAS } from '../../types/timeseries-grid-area-rules.js';\n\nconst COMPONENT_NAME = 'AnnotationsChart';\n\nexport const TimeseriesChartAnnotationsArea = () => {\n  const config = useAnnotationsConfig();\n  const {\n    tracks,\n    showLabels = DEFAULT_SHOW_LABELS,\n    annotationsActions,\n    tooltip,\n    textOverflow = DEFAULT_TEXT_OVERFLOW,\n  } = config;\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(config);\n  const setState = useSetState();\n  const { currentScale } = useXScales();\n\n  // TODO: TimeseriesChart needs to use d3-scale types instead of visx\n  const scale = currentScale as ScaleTime<number, number>;\n\n  const { width } = useGridPlotSize();\n\n  const handleUpdateIndicators = (event: Partial<SelectionState>) => {\n    setState((prev) => ({\n      ...prev,\n      annotations: {\n        ...prev.annotations,\n        ...event,\n      },\n    }));\n  };\n\n  return (\n    <ChartGrid.GridArea gridArea={AREAS.annotations}>\n      {({ availableWidth, availableHeight }) => {\n        const labelOffset = availableWidth - width;\n\n        return (\n          <AnnotationsScrollWrapper\n            height={availableHeight}\n            width={availableWidth + SCROLLBAR_THRESHOLD}\n          >\n            <AnnotationsTimeDisplay\n              tracks={tracks}\n              width={availableWidth}\n              scale={scale}\n              showLabels={showLabels ?? DEFAULT_SHOW_LABELS}\n              labelsOffset={labelOffset}\n              annotationsActions={(\n                annotation: AnnotationsActionsPayload | undefined,\n              ) => annotation && annotationsActions?.(annotation)}\n              markerGroupHover={handleUpdateIndicators}\n              textOverflow={textOverflow}\n              tooltipConfig={tooltip}\n              {...behaviorTrackingProps}\n              data-dt-component={COMPONENT_NAME}\n            />\n          </AnnotationsScrollWrapper>\n        );\n      }}\n    </ChartGrid.GridArea>\n  );\n};\n"],
-  "mappings": "AA2DY;AAzDZ,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AAEtB,MAAM,iBAAiB;AAEhB,MAAM,iCAAiC,MAAM;AAClD,QAAM,SAAS,qBAAqB;AACpC,QAAM;AAAA,IACJ;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,IAAI;AACJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,MAAM;AACjE,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,aAAa,IAAI,WAAW;AAGpC,QAAM,QAAQ;AAEd,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,yBAAyB,CAAC,UAAmC;AACjE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,aAAa;AAAA,QACX,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,SACE,oBAAC,UAAU,UAAV,EAAmB,UAAU,MAAM,aACjC,WAAC,EAAE,gBAAgB,gBAAgB,MAAM;AACxC,UAAM,cAAc,iBAAiB;AAErC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO,iBAAiB;AAAA,QAExB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA,YAAY,cAAc;AAAA,YAC1B,cAAc;AAAA,YACd,oBAAoB,CAClB,eACG,cAAc,qBAAqB,UAAU;AAAA,YAClD,kBAAkB;AAAA,YAClB;AAAA,YACA,eAAe;AAAA,YACd,GAAG;AAAA,YACJ,qBAAmB;AAAA;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,EAEJ,GACF;AAEJ;",
+  "sourcesContent": ["import { ScaleTime } from 'd3-scale';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { AnnotationsTimeDisplay } from '../../../core/components/annotations/components/displays/AnnotationsTimeDisplay.js';\nimport { AnnotationsScrollWrapper } from '../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js';\nimport {\n  COMPACT_ANNOTATIONS_DIMENSIONS,\n  DEFAULT_TEXT_OVERFLOW,\n  DEFAULT_SHOW_LABELS,\n  SCROLLBAR_THRESHOLD,\n} from '../../../core/components/annotations/constants.js';\nimport type { AnnotationsActionsPayload } from '../../../core/components/annotations/types/annotations.js';\nimport type { SelectionState } from '../../../core/components/annotations/types/state.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { useSetState } from '../../hooks/store/selectors.js';\nimport { useAnnotationsConfig } from '../../hooks/useAnnotationsConfig.js';\nimport { useXScales } from '../../hooks/useXScale.js';\nimport { AREAS } from '../../types/timeseries-grid-area-rules.js';\n\nconst COMPONENT_NAME = 'AnnotationsChart';\n\ntype TimeseriesChartAnnotationsAreaProps = {\n  compact?: boolean;\n};\n\nexport const TimeseriesChartAnnotationsArea = ({\n  compact = false,\n}: TimeseriesChartAnnotationsAreaProps) => {\n  const config = useAnnotationsConfig();\n  const {\n    tracks,\n    showLabels = DEFAULT_SHOW_LABELS,\n    annotationsActions,\n    tooltip,\n    textOverflow = DEFAULT_TEXT_OVERFLOW,\n  } = config;\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(config);\n  const setState = useSetState();\n  const { currentScale } = useXScales();\n\n  // TODO: TimeseriesChart needs to use d3-scale types instead of visx\n  const scale = currentScale as ScaleTime<number, number>;\n\n  const { width } = useGridPlotSize();\n\n  const handleUpdateIndicators = (event: Partial<SelectionState>) => {\n    setState((prev) => ({\n      ...prev,\n      annotations: {\n        ...prev.annotations,\n        ...event,\n      },\n    }));\n  };\n\n  return (\n    <ChartGrid.GridArea gridArea={AREAS.annotations}>\n      {({ availableWidth, availableHeight }) => {\n        const labelOffset = availableWidth - width;\n\n        return (\n          <AnnotationsScrollWrapper\n            height={availableHeight}\n            width={availableWidth + SCROLLBAR_THRESHOLD}\n          >\n            <AnnotationsTimeDisplay\n              tracks={tracks}\n              width={availableWidth}\n              scale={scale}\n              showLabels={compact ? false : (showLabels ?? DEFAULT_SHOW_LABELS)}\n              labelsOffset={labelOffset}\n              annotationsActions={(\n                annotation: AnnotationsActionsPayload | undefined,\n              ) => annotation && annotationsActions?.(annotation)}\n              markerGroupHover={handleUpdateIndicators}\n              textOverflow={textOverflow}\n              tooltipConfig={tooltip}\n              {...(compact && {\n                dimensions: COMPACT_ANNOTATIONS_DIMENSIONS,\n                showMarkerContent: false,\n              })}\n              {...behaviorTrackingProps}\n              data-dt-component={COMPONENT_NAME}\n            />\n          </AnnotationsScrollWrapper>\n        );\n      }}\n    </ChartGrid.GridArea>\n  );\n};\n"],
+  "mappings": "AAkEY;AAhEZ,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AAEtB,MAAM,iBAAiB;AAMhB,MAAM,iCAAiC,CAAC;AAAA,EAC7C,UAAU;AACZ,MAA2C;AACzC,QAAM,SAAS,qBAAqB;AACpC,QAAM;AAAA,IACJ;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,IAAI;AACJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,MAAM;AACjE,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,aAAa,IAAI,WAAW;AAGpC,QAAM,QAAQ;AAEd,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,yBAAyB,CAAC,UAAmC;AACjE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,aAAa;AAAA,QACX,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,SACE,oBAAC,UAAU,UAAV,EAAmB,UAAU,MAAM,aACjC,WAAC,EAAE,gBAAgB,gBAAgB,MAAM;AACxC,UAAM,cAAc,iBAAiB;AAErC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO,iBAAiB;AAAA,QAExB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA,YAAY,UAAU,QAAS,cAAc;AAAA,YAC7C,cAAc;AAAA,YACd,oBAAoB,CAClB,eACG,cAAc,qBAAqB,UAAU;AAAA,YAClD,kBAAkB;AAAA,YAClB;AAAA,YACA,eAAe;AAAA,YACd,GAAI,WAAW;AAAA,cACd,YAAY;AAAA,cACZ,mBAAmB;AAAA,YACrB;AAAA,YACC,GAAG;AAAA,YACJ,qBAAmB;AAAA;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,EAEJ,GACF;AAEJ;",
   "names": []
 }

package/esm/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.css

@@ -1,6 +1,6 @@
-._19z0vdp0-3-13-2 {
+._19z0vdp0-3-14-0 {
   position: relative;
 }
-._19z0vdp1-3-13-2 {
+._19z0vdp1-3-14-0 {
   touch-action: none;
 }

package/esm/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.sty.js

@@ -1,6 +1,6 @@
 import "./TimeseriesTimeBottomAxisArea.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var timeBottomAxisContainer = _7a468({ defaultClassName: "_19z0vdp0-3-13-2", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
+var timeBottomAxisContainer = _7a468({ defaultClassName: "_19z0vdp0-3-14-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   timeBottomAxisContainer
 };

package/esm/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.css.ts"],
-  "sourcesContent": ["import './TimeseriesTimeBottomAxisArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var timeBottomAxisContainer = _7a468({defaultClassName:'_19z0vdp0-3-13-2',variantClassNames:{isTouchableDevice:{true:'_19z0vdp1-3-13-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './TimeseriesTimeBottomAxisArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var timeBottomAxisContainer = _7a468({defaultClassName:'_19z0vdp0-3-14-0',variantClassNames:{isTouchableDevice:{true:'_19z0vdp1-3-14-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,mBAAkB,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/timeseries/components/displays/shared/utils/datapoint-stacking.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/timeseries/components/displays/shared/utils/datapoint-stacking.ts"],
-  "sourcesContent": ["import { formatUnit } from '@dynatrace-sdk/units';\n\nimport type { ChartUnit } from '../../../../../core/types/chart-unit.js';\nimport { isUnit } from '../../../../../core/types/formatter.js';\nimport { TimeseriesDatapoint } from '../../../../../core/types/timeseries.js';\n\nexport type CumulativePoint = {\n  datapointsCumulative: number;\n  baseCumulative: number;\n  seriesId: string;\n};\n\nexport type MapStackedPoint = Map<string, CumulativePoint>;\n\nfunction getUnitString(unit: ChartUnit) {\n  if (unit === undefined) {\n    return 'undefined';\n  }\n  if (unit === null) {\n    return 'null';\n  }\n\n  if (unit === '') {\n    return '';\n  }\n\n  if (isUnit(unit)) {\n    return formatUnit(unit);\n  }\n\n  return unit.toString();\n}\n\n/**\n * Gets the stacked key for the mapStackedPoints Map\n *\n * @param sign - current sign\n * @param datapoint - Current datapoint\n * @param unit - Current series unit\n * @returns - Stacked key to access the mapStackedPoints\n */\nexport function getStackedKeyByUnit(\n  sign: number,\n  datapoint: TimeseriesDatapoint,\n  unit: ChartUnit,\n) {\n  return (\n    Math.sign(sign).toString() +\n    datapoint.start.getTime() +\n    datapoint.end?.getTime() +\n    getUnitString(unit)\n  );\n}\n\n/**\n * Gets the cumulative point value from the mapStackedPoints given the new value.\n *\n * @param mapStackedPoints - Given MapStackedPoint map\n * @param datapoint - Current datapoint\n * @param unit - Current series unit\n * @param seriesId - Current series id\n * @param value - Current modified value of the datapoint\n * @param sign - sign where value will be stacked\n * @returns - CumulativePoint\n */\nexport function getCumulativeValue(\n  mapStackedPoints: MapStackedPoint,\n  datapoint: TimeseriesDatapoint,\n  unit: ChartUnit,\n  seriesId: string,\n  value: number = 0,\n  sign: number,\n) {\n  const key = getStackedKeyByUnit(sign, datapoint, unit);\n\n  const stackedDataPoint = mapStackedPoints.get(key);\n\n  let datapointsCumulative = 0;\n  let baseCumulative = 0;\n  let cumulativeValue = value;\n\n  if (stackedDataPoint) {\n    const {\n      datapointsCumulative: prevDatapointsCumulative,\n      baseCumulative: prevBaseCumulative,\n      seriesId: prevSeriesId,\n    } = stackedDataPoint;\n\n    datapointsCumulative = prevDatapointsCumulative ?? 0;\n    baseCumulative = prevBaseCumulative ?? 0;\n\n    const baseCumulativeHasToChange = prevSeriesId !== seriesId;\n\n    if (baseCumulativeHasToChange) {\n      baseCumulative = datapointsCumulative;\n    }\n\n    cumulativeValue = baseCumulative + value;\n  }\n\n  datapointsCumulative =\n    stackedDataPoint?.seriesId !== seriesId\n      ? cumulativeValue\n      : Math.sign(sign) > 0\n      ? Math.max(cumulativeValue, datapointsCumulative)\n      : Math.min(cumulativeValue, datapointsCumulative);\n\n  return { cumulativeValue, datapointsCumulative, baseCumulative, key };\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAG3B,SAAS,cAAc;AAWvB,SAAS,cAAc,MAAiB;AACtC,MAAI,SAAS,QAAW;AACtB,WAAO;AAAA,EACT;AACA,MAAI,SAAS,MAAM;AACjB,WAAO;AAAA,EACT;AAEA,MAAI,SAAS,IAAI;AACf,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,IAAI,GAAG;AAChB,WAAO,WAAW,IAAI;AAAA,EACxB;AAEA,SAAO,KAAK,SAAS;AACvB;AAUO,SAAS,oBACd,MACA,WACA,MACA;AACA,SACE,KAAK,KAAK,IAAI,EAAE,SAAS,IACzB,UAAU,MAAM,QAAQ,IACxB,UAAU,KAAK,QAAQ,IACvB,cAAc,IAAI;AAEtB;AAaO,SAAS,mBACd,kBACA,WACA,MACA,UACA,QAAgB,GAChB,MACA;AACA,QAAM,MAAM,oBAAoB,MAAM,WAAW,IAAI;AAErD,QAAM,mBAAmB,iBAAiB,IAAI,GAAG;AAEjD,MAAI,uBAAuB;AAC3B,MAAI,iBAAiB;AACrB,MAAI,kBAAkB;AAEtB,MAAI,kBAAkB;AACpB,UAAM;AAAA,MACJ,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACZ,IAAI;AAEJ,2BAAuB,4BAA4B;AACnD,qBAAiB,sBAAsB;AAEvC,UAAM,4BAA4B,iBAAiB;AAEnD,QAAI,2BAA2B;AAC7B,uBAAiB;AAAA,IACnB;AAEA,sBAAkB,iBAAiB;AAAA,EACrC;AAEA,yBACE,kBAAkB,aAAa,WAC3B,kBACA,KAAK,KAAK,IAAI,IAAI,IAClB,KAAK,IAAI,iBAAiB,oBAAoB,IAC9C,KAAK,IAAI,iBAAiB,oBAAoB;AAEpD,SAAO,EAAE,iBAAiB,sBAAsB,gBAAgB,IAAI;AACtE;",
+  "sourcesContent": ["import { formatUnit } from '@dynatrace-sdk/units';\n\nimport type { ChartUnit } from '../../../../../core/types/chart-unit.js';\nimport { isUnit } from '../../../../../core/types/formatter.js';\nimport { TimeseriesDatapoint } from '../../../../../core/types/timeseries.js';\n\nexport type CumulativePoint = {\n  datapointsCumulative: number;\n  baseCumulative: number;\n  seriesId: string;\n};\n\nexport type MapStackedPoint = Map<string, CumulativePoint>;\n\nfunction getUnitString(unit: ChartUnit) {\n  if (unit === undefined) {\n    return 'undefined';\n  }\n  if (unit === null) {\n    return 'null';\n  }\n\n  if (unit === '') {\n    return '';\n  }\n\n  if (isUnit(unit)) {\n    return formatUnit(unit);\n  }\n\n  return unit.toString();\n}\n\n/**\n * Gets the stacked key for the mapStackedPoints Map\n *\n * @param sign - current sign\n * @param datapoint - Current datapoint\n * @param unit - Current series unit\n * @returns - Stacked key to access the mapStackedPoints\n */\nexport function getStackedKeyByUnit(\n  sign: number,\n  datapoint: TimeseriesDatapoint,\n  unit: ChartUnit,\n) {\n  return (\n    Math.sign(sign).toString() +\n    datapoint.start.getTime() +\n    datapoint.end?.getTime() +\n    getUnitString(unit)\n  );\n}\n\n/**\n * Gets the cumulative point value from the mapStackedPoints given the new value.\n *\n * @param mapStackedPoints - Given MapStackedPoint map\n * @param datapoint - Current datapoint\n * @param unit - Current series unit\n * @param seriesId - Current series id\n * @param value - Current modified value of the datapoint\n * @param sign - sign where value will be stacked\n * @returns - CumulativePoint\n */\nexport function getCumulativeValue(\n  mapStackedPoints: MapStackedPoint,\n  datapoint: TimeseriesDatapoint,\n  unit: ChartUnit,\n  seriesId: string,\n  value: number = 0,\n  sign: number,\n) {\n  const key = getStackedKeyByUnit(sign, datapoint, unit);\n\n  const stackedDataPoint = mapStackedPoints.get(key);\n\n  let datapointsCumulative = 0;\n  let baseCumulative = 0;\n  let cumulativeValue = value;\n\n  if (stackedDataPoint) {\n    const {\n      datapointsCumulative: prevDatapointsCumulative,\n      baseCumulative: prevBaseCumulative,\n      seriesId: prevSeriesId,\n    } = stackedDataPoint;\n\n    datapointsCumulative = prevDatapointsCumulative ?? 0;\n    baseCumulative = prevBaseCumulative ?? 0;\n\n    const baseCumulativeHasToChange = prevSeriesId !== seriesId;\n\n    if (baseCumulativeHasToChange) {\n      baseCumulative = datapointsCumulative;\n    }\n\n    cumulativeValue = baseCumulative + value;\n  }\n\n  datapointsCumulative =\n    stackedDataPoint?.seriesId !== seriesId\n      ? cumulativeValue\n      : Math.sign(sign) > 0\n        ? Math.max(cumulativeValue, datapointsCumulative)\n        : Math.min(cumulativeValue, datapointsCumulative);\n\n  return { cumulativeValue, datapointsCumulative, baseCumulative, key };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAG3B,SAAS,cAAc;AAWvB,SAAS,cAAc,MAAiB;AACtC,MAAI,SAAS,QAAW;AACtB,WAAO;AAAA,EACT;AACA,MAAI,SAAS,MAAM;AACjB,WAAO;AAAA,EACT;AAEA,MAAI,SAAS,IAAI;AACf,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,IAAI,GAAG;AAChB,WAAO,WAAW,IAAI;AAAA,EACxB;AAEA,SAAO,KAAK,SAAS;AACvB;AAUO,SAAS,oBACd,MACA,WACA,MACA;AACA,SACE,KAAK,KAAK,IAAI,EAAE,SAAS,IACzB,UAAU,MAAM,QAAQ,IACxB,UAAU,KAAK,QAAQ,IACvB,cAAc,IAAI;AAEtB;AAaO,SAAS,mBACd,kBACA,WACA,MACA,UACA,QAAgB,GAChB,MACA;AACA,QAAM,MAAM,oBAAoB,MAAM,WAAW,IAAI;AAErD,QAAM,mBAAmB,iBAAiB,IAAI,GAAG;AAEjD,MAAI,uBAAuB;AAC3B,MAAI,iBAAiB;AACrB,MAAI,kBAAkB;AAEtB,MAAI,kBAAkB;AACpB,UAAM;AAAA,MACJ,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACZ,IAAI;AAEJ,2BAAuB,4BAA4B;AACnD,qBAAiB,sBAAsB;AAEvC,UAAM,4BAA4B,iBAAiB;AAEnD,QAAI,2BAA2B;AAC7B,uBAAiB;AAAA,IACnB;AAEA,sBAAkB,iBAAiB;AAAA,EACrC;AAEA,yBACE,kBAAkB,aAAa,WAC3B,kBACA,KAAK,KAAK,IAAI,IAAI,IAChB,KAAK,IAAI,iBAAiB,oBAAoB,IAC9C,KAAK,IAAI,iBAAiB,oBAAoB;AAEtD,SAAO,EAAE,iBAAiB,sBAAsB,gBAAgB,IAAI;AACtE;",
   "names": []
 }

package/esm/charts/timeseries/components/legend/TimeseriesChartLegend.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
+import { memo, useEffect, useMemo } from "react";
 import Colors from "@dynatrace/strato-design-tokens/colors";
 import {
   BandChartIcon,
@@ -65,6 +65,13 @@ const TimeseriesChartLegend = memo(() => {
     () => createItemData(dataPerVariant, seriesMap),
     [dataPerVariant, seriesMap]
   );
+  const itemIdsKey = useMemo(
+    () => legendItems.map((item) => item.id).join("\0"),
+    [legendItems]
+  );
+  useEffect(() => {
+    setState((prev) => ({ ...prev, filteredSeriesIds: /* @__PURE__ */ new Set() }));
+  }, [itemIdsKey]);
   const updateHighlightedSeries = (item) => {
     setState((prev) => ({
       ...prev,

package/esm/charts/timeseries/components/legend/TimeseriesChartLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/legend/TimeseriesChartLegend.tsx"],
-  "sourcesContent": ["import { memo, useMemo } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport {\n  BandChartIcon,\n  BarChartIcon,\n  LineChartIcon,\n  StackedAreaChartIcon,\n} from '@dynatrace/strato-icons';\n\nimport { useChartLayoutLoading } from '../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../core/components/chart-layout/utils/orientation.js';\nimport { reduceExploreCancelTooltip } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { ChartLegend } from '../../../core/components/legend/categorical/ChartLegend.js';\nimport { useLegendSeriesActions } from '../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js';\nimport {\n  ChartIcon,\n  LegendItem,\n} from '../../../core/components/legend/categorical/types/legend.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { singleLineName } from '../../../core/utils/single-line-name.js';\nimport { useSetState } from '../../hooks/store/selectors.js';\nimport { useTimeseriesData } from '../../hooks/useTimeseriesData.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport {\n  SeriesMetadata,\n  TimeseriesPerVariant,\n  TimeseriesSlotProps,\n} from '../../types/timeseries.js';\nimport { hasMultiGeometries } from '../../utils/timeseries.js';\n\nexport const renderIcon = (variant?: ChartIcon) => {\n  switch (variant) {\n    case 'bar':\n      return <BarChartIcon size=\"small\" />;\n    case 'area':\n      return <StackedAreaChartIcon size=\"small\" />;\n    case 'band':\n      return <BandChartIcon size=\"small\" />;\n    case 'line':\n    default:\n      return <LineChartIcon size=\"small\" />;\n  }\n};\n\nconst createItemData = (\n  series: TimeseriesPerVariant,\n  seriesMap: WeakMap<object, SeriesMetadata>,\n): LegendItem[] => {\n  const isMultiGeometries = hasMultiGeometries(series);\n  const result: LegendItem[] = [];\n\n  for (const variant of series.shapePriority) {\n    const variantSeries = series[variant];\n\n    for (let index = 0; index < variantSeries.length; index++) {\n      const singleSeries = variantSeries[index];\n      const seriesMetadata = safeGet(seriesMap, singleSeries);\n\n      result.push({\n        id: seriesMetadata.id ?? `item-${index}`,\n        color: seriesMetadata.color ?? Colors.Text.Neutral.Default,\n        icon: isMultiGeometries ? renderIcon(variant) : undefined,\n        name: singleLineName(singleSeries.name) ?? seriesMetadata.id,\n      });\n    }\n  }\n\n  return result;\n};\n\n/**\n * ChartLegend component.\n */\nexport const TimeseriesChartLegend = memo(() => {\n  const { dataPerVariant, data, seriesMap } = useTimeseriesData();\n  const truncationMode = useTruncationMode();\n  const setState = useSetState();\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const isLoading = useChartLayoutLoading();\n  const legendOrientation = getLegendOrientation(layoutOrientation);\n\n  const legendActions = useLegendSeriesActions<TimeseriesSlotProps>(\n    data,\n    (s) => safeGet(seriesMap, s).id,\n  );\n  const legendItems = useMemo(\n    () => createItemData(dataPerVariant, seriesMap),\n    [dataPerVariant, seriesMap],\n  );\n\n  const updateHighlightedSeries = (item?: LegendItem) => {\n    setState((prev) => ({\n      ...prev,\n      highlightedSeriesId: item?.id,\n    }));\n  };\n\n  const updateVisibleSeries = (visibleSeries: LegendItem[]) => {\n    const visibleSeriesSet = new Set(visibleSeries.map((s) => s.id));\n\n    setState((prev) =>\n      reduceExploreCancelTooltip({\n        ...prev,\n        filteredSeriesIds: visibleSeriesSet,\n      }),\n    );\n  };\n\n  return (\n    <ChartLegend\n      items={legendItems}\n      orientation={legendOrientation}\n      interactionsDisabled={isLoading}\n      onHover={updateHighlightedSeries}\n      onClick={updateVisibleSeries}\n      onSeriesAction={legendActions}\n      truncationMode={truncationMode}\n    />\n  );\n});\n\nTimeseriesChartLegend['displayName'] = 'TimeseriesChartLegend';\n"],
-  "mappings": "AAmCa;AAnCb,SAAS,MAAM,eAAe;AAE9B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAKvC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAMlC,SAAS,0BAA0B;AAE5B,MAAM,aAAa,CAAC,YAAwB;AACjD,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,oBAAC,gBAAa,MAAK,SAAQ;AAAA,IACpC,KAAK;AACH,aAAO,oBAAC,wBAAqB,MAAK,SAAQ;AAAA,IAC5C,KAAK;AACH,aAAO,oBAAC,iBAAc,MAAK,SAAQ;AAAA,IACrC,KAAK;AAAA,IACL;AACE,aAAO,oBAAC,iBAAc,MAAK,SAAQ;AAAA,EACvC;AACF;AAEA,MAAM,iBAAiB,CACrB,QACA,cACiB;AACjB,QAAM,oBAAoB,mBAAmB,MAAM;AACnD,QAAM,SAAuB,CAAC;AAE9B,aAAW,WAAW,OAAO,eAAe;AAC1C,UAAM,gBAAgB,OAAO,OAAO;AAEpC,aAAS,QAAQ,GAAG,QAAQ,cAAc,QAAQ,SAAS;AACzD,YAAM,eAAe,cAAc,KAAK;AACxC,YAAM,iBAAiB,QAAQ,WAAW,YAAY;AAEtD,aAAO,KAAK;AAAA,QACV,IAAI,eAAe,MAAM,QAAQ,KAAK;AAAA,QACtC,OAAO,eAAe,SAAS,OAAO,KAAK,QAAQ;AAAA,QACnD,MAAM,oBAAoB,WAAW,OAAO,IAAI;AAAA,QAChD,MAAM,eAAe,aAAa,IAAI,KAAK,eAAe;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AACT;AAKO,MAAM,wBAAwB,KAAK,MAAM;AAC9C,QAAM,EAAE,gBAAgB,MAAM,UAAU,IAAI,kBAAkB;AAC9D,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,YAAY,sBAAsB;AACxC,QAAM,oBAAoB,qBAAqB,iBAAiB;AAEhE,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,MAAM,QAAQ,WAAW,CAAC,EAAE;AAAA,EAC/B;AACA,QAAM,cAAc;AAAA,IAClB,MAAM,eAAe,gBAAgB,SAAS;AAAA,IAC9C,CAAC,gBAAgB,SAAS;AAAA,EAC5B;AAEA,QAAM,0BAA0B,CAAC,SAAsB;AACrD,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,qBAAqB,MAAM;AAAA,IAC7B,EAAE;AAAA,EACJ;AAEA,QAAM,sBAAsB,CAAC,kBAAgC;AAC3D,UAAM,mBAAmB,IAAI,IAAI,cAAc,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAE/D;AAAA,MAAS,CAAC,SACR,2BAA2B;AAAA,QACzB,GAAG;AAAA,QACH,mBAAmB;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,aAAa;AAAA,MACb,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { memo, useEffect, useMemo } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport {\n  BandChartIcon,\n  BarChartIcon,\n  LineChartIcon,\n  StackedAreaChartIcon,\n} from '@dynatrace/strato-icons';\n\nimport { useChartLayoutLoading } from '../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../../../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { getLegendOrientation } from '../../../core/components/chart-layout/utils/orientation.js';\nimport { reduceExploreCancelTooltip } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { ChartLegend } from '../../../core/components/legend/categorical/ChartLegend.js';\nimport { useLegendSeriesActions } from '../../../core/components/legend/categorical/hooks/useLegendSeriesActions.js';\nimport {\n  ChartIcon,\n  LegendItem,\n} from '../../../core/components/legend/categorical/types/legend.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { singleLineName } from '../../../core/utils/single-line-name.js';\nimport { useSetState } from '../../hooks/store/selectors.js';\nimport { useTimeseriesData } from '../../hooks/useTimeseriesData.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport {\n  SeriesMetadata,\n  TimeseriesPerVariant,\n  TimeseriesSlotProps,\n} from '../../types/timeseries.js';\nimport { hasMultiGeometries } from '../../utils/timeseries.js';\n\nexport const renderIcon = (variant?: ChartIcon) => {\n  switch (variant) {\n    case 'bar':\n      return <BarChartIcon size=\"small\" />;\n    case 'area':\n      return <StackedAreaChartIcon size=\"small\" />;\n    case 'band':\n      return <BandChartIcon size=\"small\" />;\n    case 'line':\n    default:\n      return <LineChartIcon size=\"small\" />;\n  }\n};\n\nconst createItemData = (\n  series: TimeseriesPerVariant,\n  seriesMap: WeakMap<object, SeriesMetadata>,\n): LegendItem[] => {\n  const isMultiGeometries = hasMultiGeometries(series);\n  const result: LegendItem[] = [];\n\n  for (const variant of series.shapePriority) {\n    const variantSeries = series[variant];\n\n    for (let index = 0; index < variantSeries.length; index++) {\n      const singleSeries = variantSeries[index];\n      const seriesMetadata = safeGet(seriesMap, singleSeries);\n\n      result.push({\n        id: seriesMetadata.id ?? `item-${index}`,\n        color: seriesMetadata.color ?? Colors.Text.Neutral.Default,\n        icon: isMultiGeometries ? renderIcon(variant) : undefined,\n        name: singleLineName(singleSeries.name) ?? seriesMetadata.id,\n      });\n    }\n  }\n\n  return result;\n};\n\n/**\n * ChartLegend component.\n */\nexport const TimeseriesChartLegend = memo(() => {\n  const { dataPerVariant, data, seriesMap } = useTimeseriesData();\n  const truncationMode = useTruncationMode();\n  const setState = useSetState();\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const isLoading = useChartLayoutLoading();\n  const legendOrientation = getLegendOrientation(layoutOrientation);\n\n  const legendActions = useLegendSeriesActions<TimeseriesSlotProps>(\n    data,\n    (s) => safeGet(seriesMap, s).id,\n  );\n  const legendItems = useMemo(\n    () => createItemData(dataPerVariant, seriesMap),\n    [dataPerVariant, seriesMap],\n  );\n\n  const itemIdsKey = useMemo(\n    () => legendItems.map((item) => item.id).join('\\0'),\n    [legendItems],\n  );\n\n  // oxlint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    setState((prev) => ({ ...prev, filteredSeriesIds: new Set() }));\n  }, [itemIdsKey]);\n\n  const updateHighlightedSeries = (item?: LegendItem) => {\n    setState((prev) => ({\n      ...prev,\n      highlightedSeriesId: item?.id,\n    }));\n  };\n\n  const updateVisibleSeries = (visibleSeries: LegendItem[]) => {\n    const visibleSeriesSet = new Set(visibleSeries.map((s) => s.id));\n\n    setState((prev) =>\n      reduceExploreCancelTooltip({\n        ...prev,\n        filteredSeriesIds: visibleSeriesSet,\n      }),\n    );\n  };\n\n  return (\n    <ChartLegend\n      items={legendItems}\n      orientation={legendOrientation}\n      interactionsDisabled={isLoading}\n      onHover={updateHighlightedSeries}\n      onClick={updateVisibleSeries}\n      onSeriesAction={legendActions}\n      truncationMode={truncationMode}\n    />\n  );\n});\n\nTimeseriesChartLegend['displayName'] = 'TimeseriesChartLegend';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/timeseries/components/overlays/TimeseriesExplore/TimeseriesCrosshair.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/timeseries/components/overlays/TimeseriesExplore/TimeseriesCrosshair.tsx"],
-  "sourcesContent": ["import { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport { OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { reduceResetExploreVisible } from '../../../../core/components/interactions-state-helpers/reducers/reset-reducers.js';\nimport { THRESHOLD_BAR_THICKNESS } from '../../../../core/components/threshold-bar/types/constants.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport {\n  useExploreState,\n  useSetState,\n} from '../../../hooks/store/selectors.js';\nimport { useThresholdConfig } from '../../../hooks/useThresholdConfig.js';\nimport { useTimeseriesFilteredData } from '../../../hooks/useTimeseriesFilteredData.js';\nimport { useTimeseriesOverlayRef } from '../../../hooks/useTimeseriesOverlayRef.js';\nimport { useTimeseriesXFormatter } from '../../../hooks/useTimeseriesXFormatter.js';\nimport { useTimeseriesYFormatter } from '../../../hooks/useTimeseriesYFormatter.js';\nimport { useXScales } from '../../../hooks/useXScale.js';\nimport { useYScales } from '../../../hooks/useYScales.js';\nimport { crosshairLayout } from '../TimeseriesOverlays.sty.js';\nimport {\n  generateXMagnifierLabels,\n  generateYMagnifierLabels,\n} from '../utils/magnifiers-utils.js';\nimport type { TimeseriesClosestPoint } from '../utils/tooltip/find-closest-points.js';\n\ninterface TimeseriesCrosshairProps {\n  closestPoint: TimeseriesClosestPoint;\n}\n\nexport function TimeseriesCrosshair({\n  closestPoint,\n}: Readonly<TimeseriesCrosshairProps>) {\n  const { units } = useTimeseriesFilteredData();\n  const yFormatters = useTimeseriesYFormatter();\n  const xFormatter = useTimeseriesXFormatter();\n  const yScale = useYScales();\n  const { currentScale: xScale } = useXScales();\n  const { width, height } = useGridPlotSize();\n  const overlaysRef = useTimeseriesOverlayRef();\n  const { pinned, visible, position } = useExploreState();\n\n  const { left: leftThreshold, right: rightThreshold } = useThresholdConfig();\n  const hasLeftThresholds = leftThreshold && leftThreshold.length > 0;\n  const hasRightThresholds = rightThreshold && rightThreshold.length > 0;\n\n  const relativeMousePosition = position?.relative;\n  const chartBounds = overlaysRef?.current?.getBoundingClientRect();\n\n  const isMouseHovering = relativeMousePosition && visible;\n  const showVerticalCrosshair = isMouseHovering || pinned;\n  const showHorizontalCrosshair = isMouseHovering && !pinned;\n  const thresholdLeftSize = hasLeftThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n  const thresholdRightSize = hasRightThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n\n  const setState = useSetState();\n  const isCallbackOnScrollDisabled = pinned || !isMouseHovering;\n  const onScrollCallback = () => setState(reduceResetExploreVisible);\n\n  useApplyCallbackOnScroll(isCallbackOnScrollDisabled, onScrollCallback);\n\n  const horizontalCrosshairWidth =\n    width + thresholdLeftSize + thresholdRightSize;\n\n  const verticalXCrosshair =\n    pinned && closestPoint\n      ? closestPoint.x - OVERLAY_PADDING\n      : relativeMousePosition?.x ?? 0;\n\n  const yMagnifierLabels = relativeMousePosition\n    ? generateYMagnifierLabels(\n        yScale,\n        relativeMousePosition,\n        units,\n        yFormatters,\n      )\n    : undefined;\n\n  const hoveredDate = xScale.invert(relativeMousePosition?.x ?? 0);\n\n  const xMagnifierLabel = pinned\n    ? ''\n    : generateXMagnifierLabels(xFormatter, hoveredDate);\n\n  return (\n    <svg className={crosshairLayout}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          leftLabel={yMagnifierLabels?.left}\n          rightLabel={yMagnifierLabels?.right}\n          y={relativeMousePosition?.y}\n          width={horizontalCrosshairWidth}\n          height={height}\n          leftOffset={thresholdLeftSize}\n          rightOffset={thresholdRightSize}\n          chartBounds={chartBounds}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          x={verticalXCrosshair}\n          bottomLabel={xMagnifierLabel}\n          height={height}\n          width={horizontalCrosshairWidth}\n          dashed={!pinned}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n"],
-  "mappings": "AAoFI,SAEI,KAFJ;AApFJ,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,+BAA+B;AACxC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAC1C,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,SAAS,oBAAoB;AAAA,EAClC;AACF,GAAuC;AACrC,QAAM,EAAE,MAAM,IAAI,0BAA0B;AAC5C,QAAM,cAAc,wBAAwB;AAC5C,QAAM,aAAa,wBAAwB;AAC3C,QAAM,SAAS,WAAW;AAC1B,QAAM,EAAE,cAAc,OAAO,IAAI,WAAW;AAC5C,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,cAAc,wBAAwB;AAC5C,QAAM,EAAE,QAAQ,SAAS,SAAS,IAAI,gBAAgB;AAEtD,QAAM,EAAE,MAAM,eAAe,OAAO,eAAe,IAAI,mBAAmB;AAC1E,QAAM,oBAAoB,iBAAiB,cAAc,SAAS;AAClE,QAAM,qBAAqB,kBAAkB,eAAe,SAAS;AAErE,QAAM,wBAAwB,UAAU;AACxC,QAAM,cAAc,aAAa,SAAS,sBAAsB;AAEhE,QAAM,kBAAkB,yBAAyB;AACjD,QAAM,wBAAwB,mBAAmB;AACjD,QAAM,0BAA0B,mBAAmB,CAAC;AACpD,QAAM,oBAAoB,oBAAoB,0BAA0B;AACxE,QAAM,qBAAqB,qBAAqB,0BAA0B;AAE1E,QAAM,WAAW,YAAY;AAC7B,QAAM,6BAA6B,UAAU,CAAC;AAC9C,QAAM,mBAAmB,MAAM,SAAS,yBAAyB;AAEjE,2BAAyB,4BAA4B,gBAAgB;AAErE,QAAM,2BACJ,QAAQ,oBAAoB;AAE9B,QAAM,qBACJ,UAAU,eACN,aAAa,IAAI,kBACjB,uBAAuB,KAAK;AAElC,QAAM,mBAAmB,wBACrB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA;AAEJ,QAAM,cAAc,OAAO,OAAO,uBAAuB,KAAK,CAAC;AAE/D,QAAM,kBAAkB,SACpB,KACA,yBAAyB,YAAY,WAAW;AAEpD,SACE,qBAAC,SAAI,WAAW,iBACb;AAAA,+BACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,kBAAkB;AAAA,QAC7B,YAAY,kBAAkB;AAAA,QAC9B,GAAG,uBAAuB;AAAA,QAC1B,OAAO;AAAA,QACP;AAAA,QACA,YAAY;AAAA,QACZ,aAAa;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IAED,yBACC;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACH,aAAa;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QACP,QAAQ,CAAC;AAAA,QACT;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;",
+  "sourcesContent": ["import { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport { OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { reduceResetExploreVisible } from '../../../../core/components/interactions-state-helpers/reducers/reset-reducers.js';\nimport { THRESHOLD_BAR_THICKNESS } from '../../../../core/components/threshold-bar/types/constants.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport {\n  useExploreState,\n  useSetState,\n} from '../../../hooks/store/selectors.js';\nimport { useThresholdConfig } from '../../../hooks/useThresholdConfig.js';\nimport { useTimeseriesFilteredData } from '../../../hooks/useTimeseriesFilteredData.js';\nimport { useTimeseriesOverlayRef } from '../../../hooks/useTimeseriesOverlayRef.js';\nimport { useTimeseriesXFormatter } from '../../../hooks/useTimeseriesXFormatter.js';\nimport { useTimeseriesYFormatter } from '../../../hooks/useTimeseriesYFormatter.js';\nimport { useXScales } from '../../../hooks/useXScale.js';\nimport { useYScales } from '../../../hooks/useYScales.js';\nimport { crosshairLayout } from '../TimeseriesOverlays.sty.js';\nimport {\n  generateXMagnifierLabels,\n  generateYMagnifierLabels,\n} from '../utils/magnifiers-utils.js';\nimport type { TimeseriesClosestPoint } from '../utils/tooltip/find-closest-points.js';\n\ninterface TimeseriesCrosshairProps {\n  closestPoint: TimeseriesClosestPoint;\n}\n\nexport function TimeseriesCrosshair({\n  closestPoint,\n}: Readonly<TimeseriesCrosshairProps>) {\n  const { units } = useTimeseriesFilteredData();\n  const yFormatters = useTimeseriesYFormatter();\n  const xFormatter = useTimeseriesXFormatter();\n  const yScale = useYScales();\n  const { currentScale: xScale } = useXScales();\n  const { width, height } = useGridPlotSize();\n  const overlaysRef = useTimeseriesOverlayRef();\n  const { pinned, visible, position } = useExploreState();\n\n  const { left: leftThreshold, right: rightThreshold } = useThresholdConfig();\n  const hasLeftThresholds = leftThreshold && leftThreshold.length > 0;\n  const hasRightThresholds = rightThreshold && rightThreshold.length > 0;\n\n  const relativeMousePosition = position?.relative;\n  const chartBounds = overlaysRef?.current?.getBoundingClientRect();\n\n  const isMouseHovering = relativeMousePosition && visible;\n  const showVerticalCrosshair = isMouseHovering || pinned;\n  const showHorizontalCrosshair = isMouseHovering && !pinned;\n  const thresholdLeftSize = hasLeftThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n  const thresholdRightSize = hasRightThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n\n  const setState = useSetState();\n  const isCallbackOnScrollDisabled = pinned || !isMouseHovering;\n  const onScrollCallback = () => setState(reduceResetExploreVisible);\n\n  useApplyCallbackOnScroll(isCallbackOnScrollDisabled, onScrollCallback);\n\n  const horizontalCrosshairWidth =\n    width + thresholdLeftSize + thresholdRightSize;\n\n  const verticalXCrosshair =\n    pinned && closestPoint\n      ? closestPoint.x - OVERLAY_PADDING\n      : (relativeMousePosition?.x ?? 0);\n\n  const yMagnifierLabels = relativeMousePosition\n    ? generateYMagnifierLabels(\n        yScale,\n        relativeMousePosition,\n        units,\n        yFormatters,\n      )\n    : undefined;\n\n  const hoveredDate = xScale.invert(relativeMousePosition?.x ?? 0);\n\n  const xMagnifierLabel = pinned\n    ? ''\n    : generateXMagnifierLabels(xFormatter, hoveredDate);\n\n  return (\n    <svg className={crosshairLayout}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          leftLabel={yMagnifierLabels?.left}\n          rightLabel={yMagnifierLabels?.right}\n          y={relativeMousePosition?.y}\n          width={horizontalCrosshairWidth}\n          height={height}\n          leftOffset={thresholdLeftSize}\n          rightOffset={thresholdRightSize}\n          chartBounds={chartBounds}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          x={verticalXCrosshair}\n          bottomLabel={xMagnifierLabel}\n          height={height}\n          width={horizontalCrosshairWidth}\n          dashed={!pinned}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n"],
+  "mappings": "AAoFI,SAEI,KAFJ;AApFJ,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,+BAA+B;AACxC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAC1C,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,SAAS,oBAAoB;AAAA,EAClC;AACF,GAAuC;AACrC,QAAM,EAAE,MAAM,IAAI,0BAA0B;AAC5C,QAAM,cAAc,wBAAwB;AAC5C,QAAM,aAAa,wBAAwB;AAC3C,QAAM,SAAS,WAAW;AAC1B,QAAM,EAAE,cAAc,OAAO,IAAI,WAAW;AAC5C,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,cAAc,wBAAwB;AAC5C,QAAM,EAAE,QAAQ,SAAS,SAAS,IAAI,gBAAgB;AAEtD,QAAM,EAAE,MAAM,eAAe,OAAO,eAAe,IAAI,mBAAmB;AAC1E,QAAM,oBAAoB,iBAAiB,cAAc,SAAS;AAClE,QAAM,qBAAqB,kBAAkB,eAAe,SAAS;AAErE,QAAM,wBAAwB,UAAU;AACxC,QAAM,cAAc,aAAa,SAAS,sBAAsB;AAEhE,QAAM,kBAAkB,yBAAyB;AACjD,QAAM,wBAAwB,mBAAmB;AACjD,QAAM,0BAA0B,mBAAmB,CAAC;AACpD,QAAM,oBAAoB,oBAAoB,0BAA0B;AACxE,QAAM,qBAAqB,qBAAqB,0BAA0B;AAE1E,QAAM,WAAW,YAAY;AAC7B,QAAM,6BAA6B,UAAU,CAAC;AAC9C,QAAM,mBAAmB,MAAM,SAAS,yBAAyB;AAEjE,2BAAyB,4BAA4B,gBAAgB;AAErE,QAAM,2BACJ,QAAQ,oBAAoB;AAE9B,QAAM,qBACJ,UAAU,eACN,aAAa,IAAI,kBAChB,uBAAuB,KAAK;AAEnC,QAAM,mBAAmB,wBACrB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA;AAEJ,QAAM,cAAc,OAAO,OAAO,uBAAuB,KAAK,CAAC;AAE/D,QAAM,kBAAkB,SACpB,KACA,yBAAyB,YAAY,WAAW;AAEpD,SACE,qBAAC,SAAI,WAAW,iBACb;AAAA,+BACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,kBAAkB;AAAA,QAC7B,YAAY,kBAAkB;AAAA,QAC9B,GAAG,uBAAuB;AAAA,QAC1B,OAAO;AAAA,QACP;AAAA,QACA,YAAY;AAAA,QACZ,aAAa;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IAED,yBACC;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACH,aAAa;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QACP,QAAQ,CAAC;AAAA,QACT;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;",
   "names": []
 }

package/esm/charts/timeseries/components/overlays/TimeseriesOverlays.css

@@ -1,8 +1,8 @@
-._17fdb110-3-13-2 {
+._17fdb110-3-14-0 {
   z-index: 1;
   pointer-events: none;
 }
-._17fdb111-3-13-2 {
+._17fdb111-3-14-0 {
   top: -3.5px;
   left: -3.5px;
   width: calc(100% + 7px);
@@ -10,7 +10,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._17fdb112-3-13-2 {
+._17fdb112-3-14-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -18,7 +18,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._17fdb113-3-13-2 {
+._17fdb113-3-14-0 {
   cursor: crosshair;
   overflow: visible;
   pointer-events: none;

package/esm/charts/timeseries/components/overlays/TimeseriesOverlays.sty.js

@@ -1,9 +1,9 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./TimeseriesOverlays.css";
-var canvasPlot = "_17fdb110-3-13-2 _13lzg4k0-3-13-2";
-var crosshairLayout = "_17fdb113-3-13-2 _13lzg4k0-3-13-2";
-var datapointCanvasPlot = "_17fdb111-3-13-2 _13lzg4k0-3-13-2";
-var datapointIndicatorLayout = "_17fdb112-3-13-2 _13lzg4k0-3-13-2";
+var canvasPlot = "_17fdb110-3-14-0 _13lzg4k0-3-14-0";
+var crosshairLayout = "_17fdb113-3-14-0 _13lzg4k0-3-14-0";
+var datapointCanvasPlot = "_17fdb111-3-14-0 _13lzg4k0-3-14-0";
+var datapointIndicatorLayout = "_17fdb112-3-14-0 _13lzg4k0-3-14-0";
 export {
   canvasPlot,
   crosshairLayout,

package/esm/charts/timeseries/components/overlays/TimeseriesOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/overlays/TimeseriesOverlays.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './TimeseriesOverlays.css';\nexport var canvasPlot = '_17fdb110-3-13-2 _13lzg4k0-3-13-2';\nexport var crosshairLayout = '_17fdb113-3-13-2 _13lzg4k0-3-13-2';\nexport var datapointCanvasPlot = '_17fdb111-3-13-2 _13lzg4k0-3-13-2';\nexport var datapointIndicatorLayout = '_17fdb112-3-13-2 _13lzg4k0-3-13-2';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './TimeseriesOverlays.css';\nexport var canvasPlot = '_17fdb110-3-14-0 _13lzg4k0-3-14-0';\nexport var crosshairLayout = '_17fdb113-3-14-0 _13lzg4k0-3-14-0';\nexport var datapointCanvasPlot = '_17fdb111-3-14-0 _13lzg4k0-3-14-0';\nexport var datapointIndicatorLayout = '_17fdb112-3-14-0 _13lzg4k0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,kBAAkB;AACtB,IAAI,sBAAsB;AAC1B,IAAI,2BAA2B;",
   "names": []
 }

package/esm/charts/timeseries/components/overlays/TimeseriesSelection/utils/get-datapoint-info.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/timeseries/components/overlays/TimeseriesSelection/utils/get-datapoint-info.ts"],
-  "sourcesContent": ["import { ScaleTime } from 'd3-scale';\n\nimport { OVERLAY_PADDING } from '../../../../../core/components/data-point/constants.js';\nimport { sanitizeZeroValues } from '../../../../../core/utils/sanitize-zero-values.js';\nimport { YAxisScales } from '../../../../types/state.js';\nimport { DatapointsMap } from '../../../../types/timeseries.js';\nimport { getDatapointTime } from '../../../../utils/timeseries.js';\nimport { getYScaleByUnit } from '../../../../utils/yAxis.js';\nimport { isDatapointMapBand } from '../../../types/datapoint-map-band.js';\n\nexport const getDatapointInfo = (\n  currentDatapoint: DatapointsMap,\n  xScale: ScaleTime<number, number>,\n  yScales: YAxisScales,\n) => {\n  const { start, center, end, unit, cumulativeValue, value, seriesId, color } =\n    currentDatapoint;\n\n  const datapointTimestamp = getDatapointTime(start, end, center);\n  const datapointXPosition = xScale(datapointTimestamp);\n  const yScale = getYScaleByUnit(unit, yScales);\n\n  if (isDatapointMapBand(currentDatapoint)) {\n    return [\n      {\n        id: seriesId,\n        color,\n        x: datapointXPosition + OVERLAY_PADDING,\n        y: sanitizeZeroValues(yScale, currentDatapoint.y0) + OVERLAY_PADDING,\n      },\n      {\n        id: seriesId,\n        color,\n        x: datapointXPosition + OVERLAY_PADDING,\n        y: sanitizeZeroValues(yScale, currentDatapoint.y1) + OVERLAY_PADDING,\n      },\n    ];\n  }\n\n  const y = sanitizeZeroValues(\n    yScale,\n    cumulativeValue ? cumulativeValue : value ?? 0,\n  );\n  return {\n    id: seriesId,\n    color,\n    x: datapointXPosition + OVERLAY_PADDING,\n    y: y + OVERLAY_PADDING,\n  };\n};\n"],
-  "mappings": "AAEA,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAGnC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAE5B,MAAM,mBAAmB,CAC9B,kBACA,QACA,YACG;AACH,QAAM,EAAE,OAAO,QAAQ,KAAK,MAAM,iBAAiB,OAAO,UAAU,MAAM,IACxE;AAEF,QAAM,qBAAqB,iBAAiB,OAAO,KAAK,MAAM;AAC9D,QAAM,qBAAqB,OAAO,kBAAkB;AACpD,QAAM,SAAS,gBAAgB,MAAM,OAAO;AAE5C,MAAI,mBAAmB,gBAAgB,GAAG;AACxC,WAAO;AAAA,MACL;AAAA,QACE,IAAI;AAAA,QACJ;AAAA,QACA,GAAG,qBAAqB;AAAA,QACxB,GAAG,mBAAmB,QAAQ,iBAAiB,EAAE,IAAI;AAAA,MACvD;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ;AAAA,QACA,GAAG,qBAAqB;AAAA,QACxB,GAAG,mBAAmB,QAAQ,iBAAiB,EAAE,IAAI;AAAA,MACvD;AAAA,IACF;AAAA,EACF;AAEA,QAAM,IAAI;AAAA,IACR;AAAA,IACA,kBAAkB,kBAAkB,SAAS;AAAA,EAC/C;AACA,SAAO;AAAA,IACL,IAAI;AAAA,IACJ;AAAA,IACA,GAAG,qBAAqB;AAAA,IACxB,GAAG,IAAI;AAAA,EACT;AACF;",
+  "sourcesContent": ["import { ScaleTime } from 'd3-scale';\n\nimport { OVERLAY_PADDING } from '../../../../../core/components/data-point/constants.js';\nimport { sanitizeZeroValues } from '../../../../../core/utils/sanitize-zero-values.js';\nimport { YAxisScales } from '../../../../types/state.js';\nimport { DatapointsMap } from '../../../../types/timeseries.js';\nimport { getDatapointTime } from '../../../../utils/timeseries.js';\nimport { getYScaleByUnit } from '../../../../utils/yAxis.js';\nimport { isDatapointMapBand } from '../../../types/datapoint-map-band.js';\n\nexport const getDatapointInfo = (\n  currentDatapoint: DatapointsMap,\n  xScale: ScaleTime<number, number>,\n  yScales: YAxisScales,\n) => {\n  const { start, center, end, unit, cumulativeValue, value, seriesId, color } =\n    currentDatapoint;\n\n  const datapointTimestamp = getDatapointTime(start, end, center);\n  const datapointXPosition = xScale(datapointTimestamp);\n  const yScale = getYScaleByUnit(unit, yScales);\n\n  if (isDatapointMapBand(currentDatapoint)) {\n    return [\n      {\n        id: seriesId,\n        color,\n        x: datapointXPosition + OVERLAY_PADDING,\n        y: sanitizeZeroValues(yScale, currentDatapoint.y0) + OVERLAY_PADDING,\n      },\n      {\n        id: seriesId,\n        color,\n        x: datapointXPosition + OVERLAY_PADDING,\n        y: sanitizeZeroValues(yScale, currentDatapoint.y1) + OVERLAY_PADDING,\n      },\n    ];\n  }\n\n  const y = sanitizeZeroValues(\n    yScale,\n    cumulativeValue ? cumulativeValue : (value ?? 0),\n  );\n  return {\n    id: seriesId,\n    color,\n    x: datapointXPosition + OVERLAY_PADDING,\n    y: y + OVERLAY_PADDING,\n  };\n};\n"],
+  "mappings": "AAEA,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAGnC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAE5B,MAAM,mBAAmB,CAC9B,kBACA,QACA,YACG;AACH,QAAM,EAAE,OAAO,QAAQ,KAAK,MAAM,iBAAiB,OAAO,UAAU,MAAM,IACxE;AAEF,QAAM,qBAAqB,iBAAiB,OAAO,KAAK,MAAM;AAC9D,QAAM,qBAAqB,OAAO,kBAAkB;AACpD,QAAM,SAAS,gBAAgB,MAAM,OAAO;AAE5C,MAAI,mBAAmB,gBAAgB,GAAG;AACxC,WAAO;AAAA,MACL;AAAA,QACE,IAAI;AAAA,QACJ;AAAA,QACA,GAAG,qBAAqB;AAAA,QACxB,GAAG,mBAAmB,QAAQ,iBAAiB,EAAE,IAAI;AAAA,MACvD;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ;AAAA,QACA,GAAG,qBAAqB;AAAA,QACxB,GAAG,mBAAmB,QAAQ,iBAAiB,EAAE,IAAI;AAAA,MACvD;AAAA,IACF;AAAA,EACF;AAEA,QAAM,IAAI;AAAA,IACR;AAAA,IACA,kBAAkB,kBAAmB,SAAS;AAAA,EAChD;AACA,SAAO;AAAA,IACL,IAAI;AAAA,IACJ;AAAA,IACA,GAAG,qBAAqB;AAAA,IACxB,GAAG,IAAI;AAAA,EACT;AACF;",
   "names": []
 }

package/esm/charts/timeseries/components/overlays/utils/tooltip/find-closest-points.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/timeseries/components/overlays/utils/tooltip/find-closest-points.ts"],
-  "sourcesContent": ["import type { ScaleTime } from 'd3-scale';\nimport { isNaN } from 'lodash-es';\n\nimport { OVERLAY_PADDING } from '../../../../../core/components/data-point/constants.js';\nimport { ColorToken } from '../../../../../core/types/color-palette.js';\nimport { getClusterBoundariesAtPosition } from '../../../../../core/utils/binary-search.js';\nimport { safeGet } from '../../../../../core/utils/safe-get.js';\nimport { sanitizeZeroValues } from '../../../../../core/utils/sanitize-zero-values.js';\nimport { YAxisScales } from '../../../../types/state.js';\nimport { WeakMapDatapoints } from '../../../../types/timeseries.js';\nimport { getDatapointTime } from '../../../../utils/timeseries.js';\nimport { getYScaleByUnit } from '../../../../utils/yAxis.js';\nimport { TimeseriesDataPointAllTypes } from '../../../displays/shared/types.js';\n\nexport type TimeseriesClosestPoint = {\n  id: string;\n  x: number;\n  y: number;\n  datapoint: TimeseriesDataPointAllTypes;\n  color: ColorToken;\n};\n\nexport const getClosestPoint = (\n  xPoints: TimeseriesClosestPoint[],\n  mouseY: number = 0,\n) => {\n  let aux = Infinity;\n  let auxPoint = xPoints[0];\n  // new object needed to preserve the points sorting\n  xPoints.forEach((elem) => {\n    if (Math.abs(elem.y - mouseY) < aux) {\n      aux = Math.abs(elem.y - mouseY);\n      auxPoint = elem;\n    }\n  });\n  return auxPoint;\n};\n\nfunction xAccessor(xAxisScale: ScaleTime<number, number>) {\n  return (datapoint: TimeseriesDataPointAllTypes) =>\n    xAxisScale(getDatapointTime(datapoint.start, datapoint.end));\n}\n\nfunction roundTo2Decimals(num: number): number {\n  const factor = 100;\n  return Math.round(num * factor) / factor;\n}\n\nfunction clusterAccessor(\n  xAxisScale: ScaleTime<number, number>,\n  mouseX: number,\n) {\n  return (datapoint: TimeseriesDataPointAllTypes) =>\n    roundTo2Decimals(\n      Math.abs(\n        xAxisScale(getDatapointTime(datapoint.start, datapoint.end)) - mouseX,\n      ),\n    );\n}\n\nfunction mapToClosestPoints(\n  datapointsMap: WeakMapDatapoints,\n  xAxisScale: ScaleTime<number, number>,\n  yAxis: YAxisScales,\n) {\n  return (datapoint: TimeseriesDataPointAllTypes): TimeseriesClosestPoint[] => {\n    const datapointMap = safeGet(datapointsMap, datapoint);\n    const {\n      isGap,\n      color,\n      value,\n      unit,\n      y0,\n      y1,\n      cumulativeValue,\n      seriesId,\n      start,\n      end,\n      center,\n      variant,\n    } = datapointMap;\n\n    if (isGap) {\n      return [];\n    }\n\n    const yScale = getYScaleByUnit(unit, yAxis);\n    const x = xAxisScale(getDatapointTime(start, end, center)) as number;\n\n    if (variant === 'band') {\n      const pointY0 = sanitizeZeroValues(yScale, y0 ?? 0);\n      const pointY1 = sanitizeZeroValues(yScale, y1 ?? 0);\n\n      return [\n        { id: seriesId, x, y: pointY0, color, datapoint },\n        { id: seriesId, x, y: pointY1, color, datapoint },\n      ];\n    }\n\n    const y = sanitizeZeroValues(\n      yScale,\n      cumulativeValue ? cumulativeValue : value ?? 0,\n    );\n\n    if (!isNaN(y)) {\n      return [{ id: seriesId, x, y, color, datapoint }];\n    }\n\n    return [];\n  };\n}\n\n/**\n * Returns the closest points sorted by proximity given a series and mouse\n * coordinates within the same X coordinate as the closest point.\n */\nexport const findClosestPoints = (\n  mouseX: number,\n  datapoints: TimeseriesDataPointAllTypes[],\n  xAxisScale: ScaleTime<number, number>,\n  yAxis: YAxisScales,\n  datapointsMap: WeakMapDatapoints,\n): TimeseriesClosestPoint[] => {\n  const [leftIndex, rightIndex] = getClusterBoundariesAtPosition(\n    mouseX,\n    datapoints,\n    xAccessor(xAxisScale),\n    clusterAccessor(xAxisScale, mouseX),\n  );\n\n  const toClosestPoint = mapToClosestPoints(datapointsMap, xAxisScale, yAxis);\n\n  const closestPoints: TimeseriesClosestPoint[] = [];\n  for (let i = leftIndex; i <= rightIndex; i++) {\n    closestPoints.push(...toClosestPoint(datapoints[i]));\n  }\n\n  return closestPoints;\n};\n/**\n * Filters the data points that would fall outside the charts, but inside the overlays area.\n */\nexport const filterOutOfBounds =\n  (overlaysWidth: number, overlaysHeight: number) =>\n  (datapoint: TimeseriesClosestPoint) => {\n    return (\n      datapoint.y >= OVERLAY_PADDING &&\n      datapoint.y <= overlaysHeight + OVERLAY_PADDING &&\n      datapoint.x >= OVERLAY_PADDING &&\n      datapoint.x <= overlaysWidth + OVERLAY_PADDING\n    );\n  };\n"],
-  "mappings": "AACA,SAAS,aAAa;AAEtB,SAAS,uBAAuB;AAEhC,SAAS,sCAAsC;AAC/C,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAGnC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAWzB,MAAM,kBAAkB,CAC7B,SACA,SAAiB,MACd;AACH,MAAI,MAAM;AACV,MAAI,WAAW,QAAQ,CAAC;AAExB,UAAQ,QAAQ,CAAC,SAAS;AACxB,QAAI,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK;AACnC,YAAM,KAAK,IAAI,KAAK,IAAI,MAAM;AAC9B,iBAAW;AAAA,IACb;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEA,SAAS,UAAU,YAAuC;AACxD,SAAO,CAAC,cACN,WAAW,iBAAiB,UAAU,OAAO,UAAU,GAAG,CAAC;AAC/D;AAEA,SAAS,iBAAiB,KAAqB;AAC7C,QAAM,SAAS;AACf,SAAO,KAAK,MAAM,MAAM,MAAM,IAAI;AACpC;AAEA,SAAS,gBACP,YACA,QACA;AACA,SAAO,CAAC,cACN;AAAA,IACE,KAAK;AAAA,MACH,WAAW,iBAAiB,UAAU,OAAO,UAAU,GAAG,CAAC,IAAI;AAAA,IACjE;AAAA,EACF;AACJ;AAEA,SAAS,mBACP,eACA,YACA,OACA;AACA,SAAO,CAAC,cAAqE;AAC3E,UAAM,eAAe,QAAQ,eAAe,SAAS;AACrD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,QAAI,OAAO;AACT,aAAO,CAAC;AAAA,IACV;AAEA,UAAM,SAAS,gBAAgB,MAAM,KAAK;AAC1C,UAAM,IAAI,WAAW,iBAAiB,OAAO,KAAK,MAAM,CAAC;AAEzD,QAAI,YAAY,QAAQ;AACtB,YAAM,UAAU,mBAAmB,QAAQ,MAAM,CAAC;AAClD,YAAM,UAAU,mBAAmB,QAAQ,MAAM,CAAC;AAElD,aAAO;AAAA,QACL,EAAE,IAAI,UAAU,GAAG,GAAG,SAAS,OAAO,UAAU;AAAA,QAChD,EAAE,IAAI,UAAU,GAAG,GAAG,SAAS,OAAO,UAAU;AAAA,MAClD;AAAA,IACF;AAEA,UAAM,IAAI;AAAA,MACR;AAAA,MACA,kBAAkB,kBAAkB,SAAS;AAAA,IAC/C;AAEA,QAAI,CAAC,MAAM,CAAC,GAAG;AACb,aAAO,CAAC,EAAE,IAAI,UAAU,GAAG,GAAG,OAAO,UAAU,CAAC;AAAA,IAClD;AAEA,WAAO,CAAC;AAAA,EACV;AACF;AAMO,MAAM,oBAAoB,CAC/B,QACA,YACA,YACA,OACA,kBAC6B;AAC7B,QAAM,CAAC,WAAW,UAAU,IAAI;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,UAAU,UAAU;AAAA,IACpB,gBAAgB,YAAY,MAAM;AAAA,EACpC;AAEA,QAAM,iBAAiB,mBAAmB,eAAe,YAAY,KAAK;AAE1E,QAAM,gBAA0C,CAAC;AACjD,WAAS,IAAI,WAAW,KAAK,YAAY,KAAK;AAC5C,kBAAc,KAAK,GAAG,eAAe,WAAW,CAAC,CAAC,CAAC;AAAA,EACrD;AAEA,SAAO;AACT;AAIO,MAAM,oBACX,CAAC,eAAuB,mBACxB,CAAC,cAAsC;AACrC,SACE,UAAU,KAAK,mBACf,UAAU,KAAK,iBAAiB,mBAChC,UAAU,KAAK,mBACf,UAAU,KAAK,gBAAgB;AAEnC;",
+  "sourcesContent": ["import type { ScaleTime } from 'd3-scale';\nimport { isNaN } from 'lodash-es';\n\nimport { OVERLAY_PADDING } from '../../../../../core/components/data-point/constants.js';\nimport { ColorToken } from '../../../../../core/types/color-palette.js';\nimport { getClusterBoundariesAtPosition } from '../../../../../core/utils/binary-search.js';\nimport { safeGet } from '../../../../../core/utils/safe-get.js';\nimport { sanitizeZeroValues } from '../../../../../core/utils/sanitize-zero-values.js';\nimport { YAxisScales } from '../../../../types/state.js';\nimport { WeakMapDatapoints } from '../../../../types/timeseries.js';\nimport { getDatapointTime } from '../../../../utils/timeseries.js';\nimport { getYScaleByUnit } from '../../../../utils/yAxis.js';\nimport { TimeseriesDataPointAllTypes } from '../../../displays/shared/types.js';\n\nexport type TimeseriesClosestPoint = {\n  id: string;\n  x: number;\n  y: number;\n  datapoint: TimeseriesDataPointAllTypes;\n  color: ColorToken;\n};\n\nexport const getClosestPoint = (\n  xPoints: TimeseriesClosestPoint[],\n  mouseY: number = 0,\n) => {\n  let aux = Infinity;\n  let auxPoint = xPoints[0];\n  // new object needed to preserve the points sorting\n  xPoints.forEach((elem) => {\n    if (Math.abs(elem.y - mouseY) < aux) {\n      aux = Math.abs(elem.y - mouseY);\n      auxPoint = elem;\n    }\n  });\n  return auxPoint;\n};\n\nfunction xAccessor(xAxisScale: ScaleTime<number, number>) {\n  return (datapoint: TimeseriesDataPointAllTypes) =>\n    xAxisScale(getDatapointTime(datapoint.start, datapoint.end));\n}\n\nfunction roundTo2Decimals(num: number): number {\n  const factor = 100;\n  return Math.round(num * factor) / factor;\n}\n\nfunction clusterAccessor(\n  xAxisScale: ScaleTime<number, number>,\n  mouseX: number,\n) {\n  return (datapoint: TimeseriesDataPointAllTypes) =>\n    roundTo2Decimals(\n      Math.abs(\n        xAxisScale(getDatapointTime(datapoint.start, datapoint.end)) - mouseX,\n      ),\n    );\n}\n\nfunction mapToClosestPoints(\n  datapointsMap: WeakMapDatapoints,\n  xAxisScale: ScaleTime<number, number>,\n  yAxis: YAxisScales,\n) {\n  return (datapoint: TimeseriesDataPointAllTypes): TimeseriesClosestPoint[] => {\n    const datapointMap = safeGet(datapointsMap, datapoint);\n    const {\n      isGap,\n      color,\n      value,\n      unit,\n      y0,\n      y1,\n      cumulativeValue,\n      seriesId,\n      start,\n      end,\n      center,\n      variant,\n    } = datapointMap;\n\n    if (isGap) {\n      return [];\n    }\n\n    const yScale = getYScaleByUnit(unit, yAxis);\n    const x = xAxisScale(getDatapointTime(start, end, center)) as number;\n\n    if (variant === 'band') {\n      const pointY0 = sanitizeZeroValues(yScale, y0 ?? 0);\n      const pointY1 = sanitizeZeroValues(yScale, y1 ?? 0);\n\n      return [\n        { id: seriesId, x, y: pointY0, color, datapoint },\n        { id: seriesId, x, y: pointY1, color, datapoint },\n      ];\n    }\n\n    const y = sanitizeZeroValues(\n      yScale,\n      cumulativeValue ? cumulativeValue : (value ?? 0),\n    );\n\n    if (!isNaN(y)) {\n      return [{ id: seriesId, x, y, color, datapoint }];\n    }\n\n    return [];\n  };\n}\n\n/**\n * Returns the closest points sorted by proximity given a series and mouse\n * coordinates within the same X coordinate as the closest point.\n */\nexport const findClosestPoints = (\n  mouseX: number,\n  datapoints: TimeseriesDataPointAllTypes[],\n  xAxisScale: ScaleTime<number, number>,\n  yAxis: YAxisScales,\n  datapointsMap: WeakMapDatapoints,\n): TimeseriesClosestPoint[] => {\n  const [leftIndex, rightIndex] = getClusterBoundariesAtPosition(\n    mouseX,\n    datapoints,\n    xAccessor(xAxisScale),\n    clusterAccessor(xAxisScale, mouseX),\n  );\n\n  const toClosestPoint = mapToClosestPoints(datapointsMap, xAxisScale, yAxis);\n\n  const closestPoints: TimeseriesClosestPoint[] = [];\n  for (let i = leftIndex; i <= rightIndex; i++) {\n    closestPoints.push(...toClosestPoint(datapoints[i]));\n  }\n\n  return closestPoints;\n};\n/**\n * Filters the data points that would fall outside the charts, but inside the overlays area.\n */\nexport const filterOutOfBounds =\n  (overlaysWidth: number, overlaysHeight: number) =>\n  (datapoint: TimeseriesClosestPoint) => {\n    return (\n      datapoint.y >= OVERLAY_PADDING &&\n      datapoint.y <= overlaysHeight + OVERLAY_PADDING &&\n      datapoint.x >= OVERLAY_PADDING &&\n      datapoint.x <= overlaysWidth + OVERLAY_PADDING\n    );\n  };\n"],
+  "mappings": "AACA,SAAS,aAAa;AAEtB,SAAS,uBAAuB;AAEhC,SAAS,sCAAsC;AAC/C,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAGnC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAWzB,MAAM,kBAAkB,CAC7B,SACA,SAAiB,MACd;AACH,MAAI,MAAM;AACV,MAAI,WAAW,QAAQ,CAAC;AAExB,UAAQ,QAAQ,CAAC,SAAS;AACxB,QAAI,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK;AACnC,YAAM,KAAK,IAAI,KAAK,IAAI,MAAM;AAC9B,iBAAW;AAAA,IACb;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEA,SAAS,UAAU,YAAuC;AACxD,SAAO,CAAC,cACN,WAAW,iBAAiB,UAAU,OAAO,UAAU,GAAG,CAAC;AAC/D;AAEA,SAAS,iBAAiB,KAAqB;AAC7C,QAAM,SAAS;AACf,SAAO,KAAK,MAAM,MAAM,MAAM,IAAI;AACpC;AAEA,SAAS,gBACP,YACA,QACA;AACA,SAAO,CAAC,cACN;AAAA,IACE,KAAK;AAAA,MACH,WAAW,iBAAiB,UAAU,OAAO,UAAU,GAAG,CAAC,IAAI;AAAA,IACjE;AAAA,EACF;AACJ;AAEA,SAAS,mBACP,eACA,YACA,OACA;AACA,SAAO,CAAC,cAAqE;AAC3E,UAAM,eAAe,QAAQ,eAAe,SAAS;AACrD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,QAAI,OAAO;AACT,aAAO,CAAC;AAAA,IACV;AAEA,UAAM,SAAS,gBAAgB,MAAM,KAAK;AAC1C,UAAM,IAAI,WAAW,iBAAiB,OAAO,KAAK,MAAM,CAAC;AAEzD,QAAI,YAAY,QAAQ;AACtB,YAAM,UAAU,mBAAmB,QAAQ,MAAM,CAAC;AAClD,YAAM,UAAU,mBAAmB,QAAQ,MAAM,CAAC;AAElD,aAAO;AAAA,QACL,EAAE,IAAI,UAAU,GAAG,GAAG,SAAS,OAAO,UAAU;AAAA,QAChD,EAAE,IAAI,UAAU,GAAG,GAAG,SAAS,OAAO,UAAU;AAAA,MAClD;AAAA,IACF;AAEA,UAAM,IAAI;AAAA,MACR;AAAA,MACA,kBAAkB,kBAAmB,SAAS;AAAA,IAChD;AAEA,QAAI,CAAC,MAAM,CAAC,GAAG;AACb,aAAO,CAAC,EAAE,IAAI,UAAU,GAAG,GAAG,OAAO,UAAU,CAAC;AAAA,IAClD;AAEA,WAAO,CAAC;AAAA,EACV;AACF;AAMO,MAAM,oBAAoB,CAC/B,QACA,YACA,YACA,OACA,kBAC6B;AAC7B,QAAM,CAAC,WAAW,UAAU,IAAI;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,UAAU,UAAU;AAAA,IACpB,gBAAgB,YAAY,MAAM;AAAA,EACpC;AAEA,QAAM,iBAAiB,mBAAmB,eAAe,YAAY,KAAK;AAE1E,QAAM,gBAA0C,CAAC;AACjD,WAAS,IAAI,WAAW,KAAK,YAAY,KAAK;AAC5C,kBAAc,KAAK,GAAG,eAAe,WAAW,CAAC,CAAC,CAAC;AAAA,EACrD;AAEA,SAAO;AACT;AAIO,MAAM,oBACX,CAAC,eAAuB,mBACxB,CAAC,cAAsC;AACrC,SACE,UAAU,KAAK,mBACf,UAAU,KAAK,iBAAiB,mBAChC,UAAU,KAAK,mBACf,UAAU,KAAK,gBAAgB;AAEnC;",
   "names": []
 }

package/esm/charts/timeseries/components/thresholds/ThresholdIndicators.css

@@ -1,6 +1,6 @@
-._9p8qi20-3-13-2 {
+._9p8qi20-3-14-0 {
   z-index: 2;
 }
-._9p8qi21-3-13-2 {
+._9p8qi21-3-14-0 {
   z-index: 0;
 }

package/esm/charts/timeseries/components/thresholds/ThresholdIndicators.sty.js

@@ -1,7 +1,7 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./ThresholdIndicators.css";
-var thresholdPlotLine = "_9p8qi20-3-13-2 _13lzg4k0-3-13-2";
-var thresholdPlotRange = "_9p8qi21-3-13-2 _13lzg4k0-3-13-2";
+var thresholdPlotLine = "_9p8qi20-3-14-0 _13lzg4k0-3-14-0";
+var thresholdPlotRange = "_9p8qi21-3-14-0 _13lzg4k0-3-14-0";
 export {
   thresholdPlotLine,
   thresholdPlotRange

package/esm/charts/timeseries/components/thresholds/ThresholdIndicators.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/thresholds/ThresholdIndicators.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './ThresholdIndicators.css';\nexport var thresholdPlotLine = '_9p8qi20-3-13-2 _13lzg4k0-3-13-2';\nexport var thresholdPlotRange = '_9p8qi21-3-13-2 _13lzg4k0-3-13-2';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './ThresholdIndicators.css';\nexport var thresholdPlotLine = '_9p8qi20-3-14-0 _13lzg4k0-3-14-0';\nexport var thresholdPlotRange = '_9p8qi21-3-14-0 _13lzg4k0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,qBAAqB;",
   "names": []
 }