@dynatrace/strato-components 3.5.2 → 3.6.0

package/esm/charts/timeseries/TimeseriesChart.js

@@ -1,136 +1,70 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
-import { ANNOTATIONS_PADDING_BOTTOM } from "./components/annotations-timeseries/constants.js";
-import { TimeseriesAnnotationsIndicators } from "./components/annotations-timeseries/TimeseriesAnnotationsIndicators.js";
-import { TimeseriesChartAnnotationsArea } from "./components/annotations-timeseries/TimeseriesChartAnnotationsArea.js";
-import { TimeseriesTimeBottomAxisArea } from "./components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.js";
-import { TimeseriesValueLeftAxisArea } from "./components/axes/TimeseriesValueLeftAxisArea.js";
-import { TimeseriesValueRightAxisArea } from "./components/axes/TimeseriesValueRightAxisArea.js";
-import { TimeseriesChartOverlays } from "./components/overlays/TimeseriesChartOverlays.js";
-import { ThresholdIndicators } from "./components/thresholds/ThresholdIndicators.js";
-import { TimeseriesThresholdArea } from "./components/thresholds/TimeseriesThresholdArea.js";
-import { DISPLAY_NAME, TIMESERIES_ARIA_LABEL } from "./constants.js";
-import { useAnnotationsConfig } from "./hooks/useAnnotationsConfig.js";
-import { useChartInteractions } from "./hooks/useChartInteractions.js";
-import { useTimeseriesFilteredData } from "./hooks/useTimeseriesFilteredData.js";
-import { useTimeseriesFilteredYAxis } from "./hooks/useTimeseriesFilteredYAxis.js";
-import { useTimeseriesLegend } from "./hooks/useTimeseriesLegend.js";
-import { TimeseriesChartPlot } from "./layout/TimeseriesChartPlot.js";
-import { TimeseriesChartImperativeHandler } from "./providers/TimeseriesChartImperativeHandler.js";
-import { TimeseriesChartProviders } from "./providers/TimeseriesChartProviders.js";
-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 { getAnnotationsVisibleArea } from "../core/components/annotations/utils/get-annotations-visible-area.js";
-import { ChartGrid } from "../core/components/chart-grid/ChartGridRoot.js";
-import { useChartLayoutLoading } from "../core/components/chart-layout/hooks/useChartLayoutLoading.js";
-import { useChartLayoutOrientation } from "../core/components/chart-layout/hooks/useChartLayoutOrientation.js";
-import { useGraphSize } from "../core/components/chart-layout/hooks/useGraphSize.js";
-import { ChartLoaderOverlay } from "../core/components/chart-loader-overlay/ChartLoaderOverlay.js";
-import {
-  BOTTOM_PADDING_ADJUSTMENT,
-  OVERLAY_PADDING
-} from "../core/components/data-point/constants.js";
-const timeseriesGridTemplateAreas = `
-  "${AREAS.annotations} ${AREAS.annotations} ${AREAS.annotations} . ."
-  "${AREAS.leftAxis} ${AREAS.leftThreshold} plot ${AREAS.rightThreshold} ${AREAS.rightAxis}"
-  ". . ${AREAS.bottomAxis} . ."
-`;
-const timeseriesGridTemplateColumns = "minmax(0, auto) auto minmax(60%, 1fr) auto minmax(0, auto)";
-const TimeseriesChart = /* @__PURE__ */ forwardRef(({ config }, forwardedRef) => {
-  const loading = useChartLayoutLoading();
-  const annotations = useAnnotationsConfig();
-  const tracksQuantity = annotations.tracks.length;
-  const numHiddenTracks = annotations.tracks.filter(
-    (value) => value.hidden
-  ).length;
-  const chartRef = useRef(null);
-  const mergedRef = useMergeRefs([
-    forwardedRef,
-    chartRef
-  ]);
-  const { width, height } = useGraphSize();
-  const { orientation } = useChartLayoutOrientation();
-  const { right: axisRightConfig, left: axisLeftConfig } = useTimeseriesFilteredYAxis();
-  const { units } = useTimeseriesFilteredData();
-  const { hidden: legendHidden } = useTimeseriesLegend();
-  const annotationsVisibleArea = getAnnotationsVisibleArea(
-    tracksQuantity,
-    annotations.visibleTracksLimit,
-    numHiddenTracks
-  );
-  const timeseriesGridTemplateRows = `minmax(0, ${annotationsVisibleArea + (tracksQuantity && ANNOTATIONS_PADDING_BOTTOM)}px)  minmax(60%, 1fr) minmax(0, auto)`;
-  const availableWidth = tracksQuantity && orientation === "vertical" ? width - SCROLLBAR_WIDTH : width;
-  const isLegendHiddenOrVertical = orientation === "vertical" || legendHidden;
-  const isLegendHiddenOrRight = orientation === "horizontal" || legendHidden;
-  const bothConfigsUndefinedAndOneUnit = !axisLeftConfig && !axisRightConfig && units.length === 1 && isLegendHiddenOrVertical;
-  const bothConfigsSetAndOneUnit = axisLeftConfig && axisRightConfig && units.length === 1 && isLegendHiddenOrVertical;
-  const leftConfigSetAndVertical = axisLeftConfig && isLegendHiddenOrVertical;
-  const rightConfigSet = axisRightConfig;
-  const paddingRight = bothConfigsUndefinedAndOneUnit || bothConfigsSetAndOneUnit || leftConfigSetAndVertical;
-  const onlyRightAxis = !axisLeftConfig && rightConfigSet;
-  const hasLeftPadding = onlyRightAxis;
-  const hasRightPadding = hasLeftPadding || paddingRight;
-  const chartGridHeight = height - (!tracksQuantity || isLegendHiddenOrRight ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT : 0);
-  useChartInteractions();
-  if (!height || !width) {
-    return null;
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Annotations } from "./slots/annotations/Annotations.js";
+import { Marker } from "./slots/annotations/Marker.js";
+import { AnnotationsTooltip } from "./slots/annotations/Tooltip.js";
+import { Track } from "./slots/annotations/Track.js";
+import { TimeseriesChartDownloadCSVSlot } from "./slots/DownloadCSV.js";
+import { Legend } from "./slots/Legend.js";
+import { Pan } from "./slots/Pan.js";
+import { Select } from "./slots/Select.js";
+import { Area } from "./slots/shapes/Area.js";
+import { Band } from "./slots/shapes/Band.js";
+import { Bar } from "./slots/shapes/Bar.js";
+import { Line } from "./slots/shapes/Line.js";
+import { ThresholdIndicator } from "./slots/ThresholdIndicator.js";
+import { Toolbar } from "./slots/Toolbar.js";
+import { Tooltip } from "./slots/Tooltip.js";
+import { XAxis } from "./slots/XAxis.js";
+import { YAxis } from "./slots/YAxis.js";
+import { Zoom } from "./slots/Zoom.js";
+import { TimeseriesChartRoot } from "./TimeseriesChartRoot.js";
+import { Intent } from "../../core/slots/Intent/Intent.js";
+import { EmptyStateSlot } from "../core/slots/chart-states/EmptyStateSlot.js";
+import { ErrorStateSlot } from "../core/slots/chart-states/ErrorStateSlot.js";
+import { ColorRule } from "../core/slots/ColorRule.js";
+import { isFeatureEnabled } from "../core/utils/is-feature-enabled.js";
+import { TimeseriesToXY } from "../xy-chart-adoption/timeseries/TimeseriesToXY.js";
+const TimeseriesChartSwitcher = forwardRef((props, forwardedRef) => {
+  const { __useXYAdoption, ...rest } = props;
+  if (__useXYAdoption ?? isFeatureEnabled("timeseriesToXY")) {
+    return /* @__PURE__ */ jsx(TimeseriesToXY, { ...rest, ref: forwardedRef });
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        paddingTop: tracksQuantity ? 0 : OVERLAY_PADDING,
-        paddingLeft: hasLeftPadding ? OVERLAY_PADDING : 0
-      },
-      className: defaultChartSize,
-      "aria-label": TIMESERIES_ARIA_LABEL,
-      role: "img",
-      children: /* @__PURE__ */ jsx(
-        ChartGrid,
-        {
-          width: availableWidth - (hasRightPadding ? OVERLAY_PADDING : 0),
-          height: chartGridHeight,
-          gridTemplateAreas: timeseriesGridTemplateAreas,
-          gridTemplateColumns: timeseriesGridTemplateColumns,
-          gridTemplateRows: timeseriesGridTemplateRows,
-          ref: mergedRef,
-          children: /* @__PURE__ */ jsx(TimeseriesChartProviders, { children: /* @__PURE__ */ jsxs(
-            TimeseriesChartImperativeHandler,
-            {
-              config,
-              forwardedRef,
-              chartRef,
-              children: [
-                /* @__PURE__ */ jsx(TimeseriesValueLeftAxisArea, {}),
-                /* @__PURE__ */ jsx(TimeseriesTimeBottomAxisArea, {}),
-                /* @__PURE__ */ jsxs(ChartGrid.PlotArea, { children: [
-                  /* @__PURE__ */ jsx(TimeseriesChartPlot, {}),
-                  /* @__PURE__ */ jsx(TimeseriesAnnotationsIndicators, {}),
-                  /* @__PURE__ */ jsx(
-                    ChartLoaderOverlay,
-                    {
-                      loading: !!loading,
-                      zoomEnabled: !!config.interactions?.zoom?.enabled,
-                      children: /* @__PURE__ */ jsx(TimeseriesChartOverlays, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(ThresholdIndicators, { indicatorType: "line" })
-                ] }),
-                /* @__PURE__ */ jsx(TimeseriesValueRightAxisArea, {}),
-                /* @__PURE__ */ jsx(TimeseriesThresholdArea, {}),
-                !!tracksQuantity && /* @__PURE__ */ jsx(TimeseriesChartAnnotationsArea, {})
-              ]
-            }
-          ) })
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsx(TimeseriesChartRoot, { ...rest, ref: forwardedRef });
 });
-TimeseriesChart.displayName = DISPLAY_NAME;
+TimeseriesChartSwitcher.displayName = "TimeseriesChart";
+const TimeseriesChart = Object.assign(TimeseriesChartSwitcher, {
+  Band,
+  Legend,
+  YAxis,
+  XAxis,
+  Tooltip,
+  Annotations,
+  Line,
+  Area,
+  Bar,
+  ThresholdIndicator,
+  Select,
+  Intent,
+  EmptyState: EmptyStateSlot,
+  ErrorState: ErrorStateSlot,
+  ColorRule,
+  Toolbar,
+  DownloadCSV: TimeseriesChartDownloadCSVSlot,
+  Pan,
+  Zoom
+});
+const TimeseriesAnnotations = Object.assign(
+  {},
+  {
+    Marker,
+    Track,
+    Tooltip: AnnotationsTooltip
+  }
+);
 export {
-  TimeseriesChart
+  TimeseriesAnnotations,
+  TimeseriesChart,
+  TimeseriesChartSwitcher
 };
 //# sourceMappingURL=TimeseriesChart.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/timeseries/TimeseriesChart.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { ANNOTATIONS_PADDING_BOTTOM } from './components/annotations-timeseries/constants.js';\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 { 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';\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 TimeseriesChart = /* @__PURE__ */ forwardRef<\n  TimeseriesChartRef,\n  PropsWithChildren<_TimeseriesChartProps>\n>(({ config }, forwardedRef) => {\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 timeseriesGridTemplateRows = `minmax(0, ${\n    annotationsVisibleArea + (tracksQuantity && ANNOTATIONS_PADDING_BOTTOM)\n  }px)  minmax(60%, 1fr) minmax(0, auto)`;\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 bothConfigsUndefinedAndOneUnit =\n    !axisLeftConfig &&\n    !axisRightConfig &&\n    units.length === 1 &&\n    isLegendHiddenOrVertical;\n  const bothConfigsSetAndOneUnit =\n    axisLeftConfig &&\n    axisRightConfig &&\n    units.length === 1 &&\n    isLegendHiddenOrVertical;\n  const leftConfigSetAndVertical = axisLeftConfig && isLegendHiddenOrVertical;\n  const rightConfigSet = axisRightConfig;\n\n  const paddingRight =\n    bothConfigsUndefinedAndOneUnit ||\n    bothConfigsSetAndOneUnit ||\n    leftConfigSetAndVertical;\n  const onlyRightAxis = !axisLeftConfig && rightConfigSet;\n\n  const hasLeftPadding = onlyRightAxis;\n  const hasRightPadding = hasLeftPadding || paddingRight;\n\n  const chartGridHeight =\n    height -\n    (!tracksQuantity || isLegendHiddenOrRight\n      ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT\n      : 0);\n\n  useChartInteractions();\n\n  if (!height || !width) {\n    return null;\n  }\n\n  return (\n    <div\n      style={{\n        paddingTop: tracksQuantity ? 0 : OVERLAY_PADDING,\n        paddingLeft: hasLeftPadding ? OVERLAY_PADDING : 0,\n      }}\n      className={defaultChartSize}\n      aria-label={TIMESERIES_ARIA_LABEL}\n      role=\"img\"\n    >\n      <ChartGrid\n        width={availableWidth - (hasRightPadding ? OVERLAY_PADDING : 0)}\n        height={chartGridHeight}\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            <TimeseriesValueLeftAxisArea />\n            <TimeseriesTimeBottomAxisArea />\n\n            <ChartGrid.PlotArea>\n              <TimeseriesChartPlot />\n              <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            <TimeseriesValueRightAxisArea />\n            <TimeseriesThresholdArea />\n\n            {!!tracksQuantity && <TimeseriesChartAnnotationsArea />}\n          </TimeseriesChartImperativeHandler>\n        </TimeseriesChartProviders>\n      </ChartGrid>\n    </div>\n  );\n});\n\n(\n  TimeseriesChart as typeof TimeseriesChart & { displayName: string }\n).displayName = DISPLAY_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren } from 'react';\n\nimport { Annotations } from './slots/annotations/Annotations.js';\nimport { Marker } from './slots/annotations/Marker.js';\nimport { AnnotationsTooltip } from './slots/annotations/Tooltip.js';\nimport { Track } from './slots/annotations/Track.js';\nimport { TimeseriesChartDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { Legend } from './slots/Legend.js';\nimport { Pan } from './slots/Pan.js';\nimport { Select } from './slots/Select.js';\nimport { Area } from './slots/shapes/Area.js';\nimport { Band } from './slots/shapes/Band.js';\nimport { Bar } from './slots/shapes/Bar.js';\nimport { Line } from './slots/shapes/Line.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { XAxis } from './slots/XAxis.js';\nimport { YAxis } from './slots/YAxis.js';\nimport { Zoom } from './slots/Zoom.js';\nimport { TimeseriesChartRoot } from './TimeseriesChartRoot.js';\nimport type { TimeseriesChartProps } from './types/timeseries-props.js';\nimport type { TimeseriesChartRef } from './types/timeseries-ref.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { isFeatureEnabled } from '../core/utils/is-feature-enabled.js';\n// eslint-disable-next-line no-restricted-imports\nimport { TimeseriesToXY } from '../xy-chart-adoption/timeseries/TimeseriesToXY.js';\nimport type { _XYChartAdoptionProps } from '../xy-chart-adoption/types/props.js';\n\nexport const TimeseriesChartSwitcher = forwardRef<\n  TimeseriesChartRef,\n  PropsWithChildren<TimeseriesChartProps & _XYChartAdoptionProps>\n>((props, forwardedRef) => {\n  const { __useXYAdoption, ...rest } = props;\n  if (__useXYAdoption ?? isFeatureEnabled('timeseriesToXY')) {\n    return <TimeseriesToXY {...rest} ref={forwardedRef} />;\n  }\n  return <TimeseriesChartRoot {...rest} ref={forwardedRef} />;\n});\n\n(\n  TimeseriesChartSwitcher as typeof TimeseriesChartSwitcher & {\n    displayName: string;\n  }\n).displayName = 'TimeseriesChart';\n\n/**\n * The `TimeseriesChart` visually represents data in sequential order of time.\n * It's used to observe trends, patterns, and fluctuations in the data over a\n * specific time period.\n * @public\n */\nexport const TimeseriesChart = Object.assign(TimeseriesChartSwitcher, {\n  Band,\n  Legend,\n  YAxis,\n  XAxis,\n  Tooltip,\n  Annotations,\n  Line,\n  Area,\n  Bar,\n  ThresholdIndicator,\n  Select,\n  Intent,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n  Toolbar,\n  DownloadCSV: TimeseriesChartDownloadCSVSlot,\n  Pan,\n  Zoom,\n});\n\n/**\n * Annotations Slots\n * @public\n */\nexport const TimeseriesAnnotations = Object.assign(\n  {},\n  {\n    Marker,\n    Track,\n    Tooltip: AnnotationsTooltip,\n  },\n);\n"],
+  "mappings": "AAsCW;AAtCX,SAAS,kBAA0C;AAEnD,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,aAAa;AACtB,SAAS,sCAAsC;AAC/C,SAAS,cAAc;AACvB,SAAS,WAAW;AACpB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,WAAW;AACpB,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAGpC,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AAEjC,SAAS,sBAAsB;AAGxB,MAAM,0BAA0B,WAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,iBAAiB,GAAG,KAAK,IAAI;AACrC,MAAI,mBAAmB,iBAAiB,gBAAgB,GAAG;AACzD,WAAO,oBAAC,kBAAgB,GAAG,MAAM,KAAK,cAAc;AAAA,EACtD;AACA,SAAO,oBAAC,uBAAqB,GAAG,MAAM,KAAK,cAAc;AAC3D,CAAC;AAGC,wBAGA,cAAc;AAQT,MAAM,kBAAkB,OAAO,OAAO,yBAAyB;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AACF,CAAC;AAMM,MAAM,wBAAwB,OAAO;AAAA,EAC1C,CAAC;AAAA,EACD;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/esm/charts/timeseries/TimeseriesChartInternal.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { ANNOTATIONS_PADDING_BOTTOM } from "./components/annotations-timeseries/constants.js";
+import { TimeseriesAnnotationsIndicators } from "./components/annotations-timeseries/TimeseriesAnnotationsIndicators.js";
+import { TimeseriesChartAnnotationsArea } from "./components/annotations-timeseries/TimeseriesChartAnnotationsArea.js";
+import { TimeseriesTimeBottomAxisArea } from "./components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.js";
+import { TimeseriesValueLeftAxisArea } from "./components/axes/TimeseriesValueLeftAxisArea.js";
+import { TimeseriesValueRightAxisArea } from "./components/axes/TimeseriesValueRightAxisArea.js";
+import { TimeseriesChartOverlays } from "./components/overlays/TimeseriesChartOverlays.js";
+import { ThresholdIndicators } from "./components/thresholds/ThresholdIndicators.js";
+import { TimeseriesThresholdArea } from "./components/thresholds/TimeseriesThresholdArea.js";
+import { DISPLAY_NAME, TIMESERIES_ARIA_LABEL } from "./constants.js";
+import { useAnnotationsConfig } from "./hooks/useAnnotationsConfig.js";
+import { useChartInteractions } from "./hooks/useChartInteractions.js";
+import { useTimeseriesFilteredData } from "./hooks/useTimeseriesFilteredData.js";
+import { useTimeseriesFilteredYAxis } from "./hooks/useTimeseriesFilteredYAxis.js";
+import { useTimeseriesLegend } from "./hooks/useTimeseriesLegend.js";
+import { TimeseriesChartPlot } from "./layout/TimeseriesChartPlot.js";
+import { TimeseriesChartImperativeHandler } from "./providers/TimeseriesChartImperativeHandler.js";
+import { TimeseriesChartProviders } from "./providers/TimeseriesChartProviders.js";
+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 { getAnnotationsVisibleArea } from "../core/components/annotations/utils/get-annotations-visible-area.js";
+import { ChartGrid } from "../core/components/chart-grid/ChartGridRoot.js";
+import { useChartLayoutLoading } from "../core/components/chart-layout/hooks/useChartLayoutLoading.js";
+import { useChartLayoutOrientation } from "../core/components/chart-layout/hooks/useChartLayoutOrientation.js";
+import { useGraphSize } from "../core/components/chart-layout/hooks/useGraphSize.js";
+import { ChartLoaderOverlay } from "../core/components/chart-loader-overlay/ChartLoaderOverlay.js";
+import {
+  BOTTOM_PADDING_ADJUSTMENT,
+  OVERLAY_PADDING
+} from "../core/components/data-point/constants.js";
+const timeseriesGridTemplateAreas = `
+  "${AREAS.annotations} ${AREAS.annotations} ${AREAS.annotations} . ."
+  "${AREAS.leftAxis} ${AREAS.leftThreshold} plot ${AREAS.rightThreshold} ${AREAS.rightAxis}"
+  ". . ${AREAS.bottomAxis} . ."
+`;
+const timeseriesGridTemplateColumns = "minmax(0, auto) auto minmax(60%, 1fr) auto minmax(0, auto)";
+const TimeseriesChartInternal = /* @__PURE__ */ forwardRef(({ config }, forwardedRef) => {
+  const loading = useChartLayoutLoading();
+  const annotations = useAnnotationsConfig();
+  const tracksQuantity = annotations.tracks.length;
+  const numHiddenTracks = annotations.tracks.filter(
+    (value) => value.hidden
+  ).length;
+  const chartRef = useRef(null);
+  const mergedRef = useMergeRefs([
+    forwardedRef,
+    chartRef
+  ]);
+  const { width, height } = useGraphSize();
+  const { orientation } = useChartLayoutOrientation();
+  const { right: axisRightConfig, left: axisLeftConfig } = useTimeseriesFilteredYAxis();
+  const { units } = useTimeseriesFilteredData();
+  const { hidden: legendHidden } = useTimeseriesLegend();
+  const annotationsVisibleArea = getAnnotationsVisibleArea(
+    tracksQuantity,
+    annotations.visibleTracksLimit,
+    numHiddenTracks
+  );
+  const timeseriesGridTemplateRows = `minmax(0, ${annotationsVisibleArea + (tracksQuantity && ANNOTATIONS_PADDING_BOTTOM)}px)  minmax(60%, 1fr) minmax(0, auto)`;
+  const availableWidth = tracksQuantity && orientation === "vertical" ? width - SCROLLBAR_WIDTH : width;
+  const isLegendHiddenOrVertical = orientation === "vertical" || legendHidden;
+  const isLegendHiddenOrRight = orientation === "horizontal" || legendHidden;
+  const bothConfigsUndefinedAndOneUnit = !axisLeftConfig && !axisRightConfig && units.length === 1 && isLegendHiddenOrVertical;
+  const bothConfigsSetAndOneUnit = axisLeftConfig && axisRightConfig && units.length === 1 && isLegendHiddenOrVertical;
+  const leftConfigSetAndVertical = axisLeftConfig && isLegendHiddenOrVertical;
+  const rightConfigSet = axisRightConfig;
+  const paddingRight = bothConfigsUndefinedAndOneUnit || bothConfigsSetAndOneUnit || leftConfigSetAndVertical;
+  const onlyRightAxis = !axisLeftConfig && rightConfigSet;
+  const hasLeftPadding = onlyRightAxis;
+  const hasRightPadding = hasLeftPadding || paddingRight;
+  const chartGridHeight = height - (!tracksQuantity || isLegendHiddenOrRight ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT : 0);
+  useChartInteractions();
+  if (!height || !width) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        paddingTop: tracksQuantity ? 0 : OVERLAY_PADDING,
+        paddingLeft: hasLeftPadding ? OVERLAY_PADDING : 0
+      },
+      className: defaultChartSize,
+      "aria-label": TIMESERIES_ARIA_LABEL,
+      role: "img",
+      children: /* @__PURE__ */ jsx(
+        ChartGrid,
+        {
+          width: availableWidth - (hasRightPadding ? OVERLAY_PADDING : 0),
+          height: chartGridHeight,
+          gridTemplateAreas: timeseriesGridTemplateAreas,
+          gridTemplateColumns: timeseriesGridTemplateColumns,
+          gridTemplateRows: timeseriesGridTemplateRows,
+          ref: mergedRef,
+          children: /* @__PURE__ */ jsx(TimeseriesChartProviders, { children: /* @__PURE__ */ jsxs(
+            TimeseriesChartImperativeHandler,
+            {
+              config,
+              forwardedRef,
+              chartRef,
+              children: [
+                /* @__PURE__ */ jsx(TimeseriesValueLeftAxisArea, {}),
+                /* @__PURE__ */ jsx(TimeseriesTimeBottomAxisArea, {}),
+                /* @__PURE__ */ jsxs(ChartGrid.PlotArea, { children: [
+                  /* @__PURE__ */ jsx(TimeseriesChartPlot, {}),
+                  /* @__PURE__ */ jsx(TimeseriesAnnotationsIndicators, {}),
+                  /* @__PURE__ */ jsx(
+                    ChartLoaderOverlay,
+                    {
+                      loading: !!loading,
+                      zoomEnabled: !!config.interactions?.zoom?.enabled,
+                      children: /* @__PURE__ */ jsx(TimeseriesChartOverlays, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ThresholdIndicators, { indicatorType: "line" })
+                ] }),
+                /* @__PURE__ */ jsx(TimeseriesValueRightAxisArea, {}),
+                /* @__PURE__ */ jsx(TimeseriesThresholdArea, {}),
+                !!tracksQuantity && /* @__PURE__ */ jsx(TimeseriesChartAnnotationsArea, {})
+              ]
+            }
+          ) })
+        }
+      )
+    }
+  );
+});
+TimeseriesChartInternal.displayName = DISPLAY_NAME;
+export {
+  TimeseriesChartInternal
+};
+//# sourceMappingURL=TimeseriesChartInternal.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/charts/timeseries/TimeseriesChartInternal.tsx"],
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { ANNOTATIONS_PADDING_BOTTOM } from './components/annotations-timeseries/constants.js';\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 { 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';\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 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 timeseriesGridTemplateRows = `minmax(0, ${\n    annotationsVisibleArea + (tracksQuantity && ANNOTATIONS_PADDING_BOTTOM)\n  }px)  minmax(60%, 1fr) minmax(0, auto)`;\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 bothConfigsUndefinedAndOneUnit =\n    !axisLeftConfig &&\n    !axisRightConfig &&\n    units.length === 1 &&\n    isLegendHiddenOrVertical;\n  const bothConfigsSetAndOneUnit =\n    axisLeftConfig &&\n    axisRightConfig &&\n    units.length === 1 &&\n    isLegendHiddenOrVertical;\n  const leftConfigSetAndVertical = axisLeftConfig && isLegendHiddenOrVertical;\n  const rightConfigSet = axisRightConfig;\n\n  const paddingRight =\n    bothConfigsUndefinedAndOneUnit ||\n    bothConfigsSetAndOneUnit ||\n    leftConfigSetAndVertical;\n  const onlyRightAxis = !axisLeftConfig && rightConfigSet;\n\n  const hasLeftPadding = onlyRightAxis;\n  const hasRightPadding = hasLeftPadding || paddingRight;\n\n  const chartGridHeight =\n    height -\n    (!tracksQuantity || isLegendHiddenOrRight\n      ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT\n      : 0);\n\n  useChartInteractions();\n\n  if (!height || !width) {\n    return null;\n  }\n\n  return (\n    <div\n      style={{\n        paddingTop: tracksQuantity ? 0 : OVERLAY_PADDING,\n        paddingLeft: hasLeftPadding ? OVERLAY_PADDING : 0,\n      }}\n      className={defaultChartSize}\n      aria-label={TIMESERIES_ARIA_LABEL}\n      role=\"img\"\n    >\n      <ChartGrid\n        width={availableWidth - (hasRightPadding ? OVERLAY_PADDING : 0)}\n        height={chartGridHeight}\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            <TimeseriesValueLeftAxisArea />\n            <TimeseriesTimeBottomAxisArea />\n\n            <ChartGrid.PlotArea>\n              <TimeseriesChartPlot />\n              <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            <TimeseriesValueRightAxisArea />\n            <TimeseriesThresholdArea />\n\n            {!!tracksQuantity && <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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",
+  "names": []
+}

package/esm/charts/timeseries/TimeseriesChartRoot.js

@@ -10,41 +10,19 @@ import { TimeseriesConfigProvider } from "./providers/TimeseriesConfigProviders.
 import { TimeseriesDataProvider } from "./providers/TimeseriesDataProvider.js";
 import { TimeseriesFilteredDataProvider } from "./providers/TimeseriesFilteredDataProvider.js";
 import { TimeseriesMinMaxXAxisProvider } from "./providers/TimeseriesMinMaxXAxisProvider.js";
-import { Annotations } from "./slots/annotations/Annotations.js";
-import { Marker } from "./slots/annotations/Marker.js";
-import { Track } from "./slots/annotations/Track.js";
-import { Legend } from "./slots/Legend.js";
-import { Pan } from "./slots/Pan.js";
-import { Select } from "./slots/Select.js";
-import { Area } from "./slots/shapes/Area.js";
-import { Band } from "./slots/shapes/Band.js";
-import { Bar } from "./slots/shapes/Bar.js";
-import { Line } from "./slots/shapes/Line.js";
-import { ThresholdIndicator } from "./slots/ThresholdIndicator.js";
-import { Toolbar } from "./slots/Toolbar.js";
-import { Tooltip } from "./slots/Tooltip.js";
-import { XAxis } from "./slots/XAxis.js";
-import { YAxis } from "./slots/YAxis.js";
-import { Zoom } from "./slots/Zoom.js";
-import { TimeseriesChart as TimeseriesChartInternal } from "./TimeseriesChart.js";
+import { TimeseriesChartInternal } from "./TimeseriesChartInternal.js";
 import {
   hasSeriesWithDatapoints,
   splitTimeseriesPerVariant
 } from "./utils/timeseries.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
-import { Intent } from "../../core/slots/Intent/Intent.js";
 import { ChartLayout } from "../core/components/chart-layout/ChartLayout.js";
 import { useAutoLegendRefresh } from "../core/components/chart-layout/hooks/useAutoLegendRefresh.js";
 import { getChartStatesTemplates } from "../core/components/chart-states/utils/get-chart-states-template.js";
 import { OverlayProvider } from "../core/components/overlay-tooltip/contexts/OverlayContext.js";
 import { TooltipProvider } from "../core/components/overlay-tooltip/contexts/TooltipContext.js";
 import { ChartSeriesActionContext } from "../core/components/series-action/ChartSeriesActionContext.js";
-import { EmptyStateSlot } from "../core/slots/chart-states/EmptyStateSlot.js";
-import { ErrorStateSlot } from "../core/slots/chart-states/ErrorStateSlot.js";
-import { ColorRule } from "../core/slots/ColorRule.js";
 import { coerceSizeValue } from "../core/utils/coerceSizeValue.js";
-import { AnnotationsTooltip } from "./slots/annotations/Tooltip.js";
-import { TimeseriesChartDownloadCSVSlot } from "./slots/DownloadCSV.js";
 const TIMESERIES_CHART_DEFAULT_HEIGHT = 300;
 const COMPONENT_NAME_BEHAVIOURAL_TRACKING = "TimeseriesChart";
 const TimeseriesChartRoot = forwardRef((props, forwardedRef) => {
@@ -167,37 +145,7 @@ const TimeseriesChartRoot = forwardRef((props, forwardedRef) => {
   ) }) }) });
 });
 TimeseriesChartRoot.displayName = "TimeseriesChartRoot";
-const TimeseriesChart = Object.assign(TimeseriesChartRoot, {
-  Band,
-  Legend,
-  YAxis,
-  XAxis,
-  Tooltip,
-  Annotations,
-  Line,
-  Area,
-  Bar,
-  ThresholdIndicator,
-  Select,
-  Intent,
-  EmptyState: EmptyStateSlot,
-  ErrorState: ErrorStateSlot,
-  ColorRule,
-  Toolbar,
-  DownloadCSV: TimeseriesChartDownloadCSVSlot,
-  Pan,
-  Zoom
-});
-const TimeseriesAnnotations = Object.assign(
-  {},
-  {
-    Marker,
-    Track,
-    Tooltip: AnnotationsTooltip
-  }
-);
 export {
-  TimeseriesAnnotations,
-  TimeseriesChart
+  TimeseriesChartRoot
 };
 //# sourceMappingURL=TimeseriesChartRoot.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/timeseries/TimeseriesChartRoot.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, type ReactElement } from 'react';\n\nimport { TimeseriesChartLegend } from './components/legend/TimeseriesChartLegend.js';\nimport { TIMESERIES_CHART_DEFAULT_VARIANT } from './constants.js';\nimport { TimeseriesRawDataContext } from './context/TimeseriesRawData.context.js';\nimport { useTimeseriesChartConfig } from './hooks/useTimeseriesChartConfig.js';\nimport { StoreProvider } from './providers/StoreProvider.js';\nimport { TimeseriesChartIdProvider } from './providers/TimeseriesChartIdProvider.js';\nimport { TimeseriesConfigProvider } from './providers/TimeseriesConfigProviders.js';\nimport { TimeseriesDataProvider } from './providers/TimeseriesDataProvider.js';\nimport { TimeseriesFilteredDataProvider } from './providers/TimeseriesFilteredDataProvider.js';\nimport { TimeseriesMinMaxXAxisProvider } from './providers/TimeseriesMinMaxXAxisProvider.js';\nimport { Annotations } from './slots/annotations/Annotations.js';\nimport { Marker } from './slots/annotations/Marker.js';\nimport { Track } from './slots/annotations/Track.js';\nimport { Legend } from './slots/Legend.js';\nimport { Pan } from './slots/Pan.js';\nimport { Select } from './slots/Select.js';\nimport { Area } from './slots/shapes/Area.js';\nimport { Band } from './slots/shapes/Band.js';\nimport { Bar } from './slots/shapes/Bar.js';\nimport { Line } from './slots/shapes/Line.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { XAxis } from './slots/XAxis.js';\nimport { YAxis } from './slots/YAxis.js';\nimport { Zoom } from './slots/Zoom.js';\nimport { TimeseriesChart as TimeseriesChartInternal } from './TimeseriesChart.js';\nimport { TimeseriesChartProps } from './types/timeseries-props.js';\nimport { TimeseriesChartRef } from './types/timeseries-ref.js';\nimport {\n  hasSeriesWithDatapoints,\n  splitTimeseriesPerVariant,\n} from './utils/timeseries.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { OverlayProvider } from '../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { ChartSeriesActionContext } from '../core/components/series-action/ChartSeriesActionContext.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\nimport { AnnotationsTooltip } from './slots/annotations/Tooltip.js';\nimport { TimeseriesChartDownloadCSVSlot } from './slots/DownloadCSV.js';\n\n/**\n * The default max height used for the timeserieschart when no explicit\n * height is given\n */\nconst TIMESERIES_CHART_DEFAULT_HEIGHT = 300;\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'TimeseriesChart';\n\n/**\n * TimeseriesChart component\n */\nconst TimeseriesChartRoot = forwardRef<\n  TimeseriesChartRef,\n  TimeseriesChartProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    data,\n    gapPolicy,\n    pointsDisplay,\n    colorPalette,\n    truncationMode,\n    variant = TIMESERIES_CHART_DEFAULT_VARIANT,\n    valueRepresentation,\n    height: heightProp,\n    width,\n    seriesActions,\n    onMessage,\n    loading = false,\n    curve,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const chartHeight =\n    coerceSizeValue(heightProp) || TIMESERIES_CHART_DEFAULT_HEIGHT;\n  const dataPerVariant = splitTimeseriesPerVariant(\n    data ?? [],\n    children,\n    variant,\n  );\n  const config = useTimeseriesChartConfig(children, {\n    gapPolicy,\n    pointsDisplay,\n    valueRepresentation,\n    colorPalette,\n    truncationMode,\n    curve,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n  });\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const { shapePriority, ...rawDataPerVariant } = dataPerVariant;\n  const hasSeries = hasSeriesWithDatapoints(dataPerVariant);\n\n  const {\n    position: legendPosition,\n    onRatioChange,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    hidden: isLegendHidden,\n  } = config.legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <TimeseriesChartIdProvider>\n      <TimeseriesConfigProvider config={config}>\n        <TimeseriesRawDataContext.Provider value={rawDataPerVariant}>\n          <TimeseriesDataProvider\n            data={dataPerVariant}\n            valueRepresentation={config.valueRepresentation}\n            onMessage={onMessage}\n          >\n            <TimeseriesMinMaxXAxisProvider>\n              <ChartSeriesActionContext.Provider\n                value={{\n                  chartSeriesActions: seriesActions as (\n                    series: unknown,\n                    datapoint?: unknown,\n                  ) => ReactElement<PropsWithChildren>,\n                }}\n              >\n                <StoreProvider\n                  data={dataPerVariant}\n                  currentDomain={config.currentZoom}\n                  initialDomain={config.initialZoom}\n                  infiniteZoom={config.infiniteZoom}\n                >\n                  <TimeseriesFilteredDataProvider>\n                    <OverlayProvider>\n                      <TooltipProvider>\n                        <ChartLayout\n                          ref={chartLayoutRef}\n                          chartHeight={chartHeight}\n                          chartWidth={width}\n                          isEmpty={!hasSeries}\n                          emptyState={emptyState}\n                          errorState={errorState}\n                          showLoader={loading}\n                          className={className}\n                          style={style}\n                          {...behaviorTrackingProps}\n                          data-dtrum-mask={dataDtrumMask}\n                          data-dtrum-allow={dataDtrumAllow}\n                          data-dt-component={\n                            COMPONENT_NAME_BEHAVIOURAL_TRACKING\n                          }\n                        >\n                          <ChartLayout.Graph>\n                            <TimeseriesChartInternal\n                              ref={forwardedRef}\n                              config={config}\n                            />\n                          </ChartLayout.Graph>\n                          {!isLegendHidden && (\n                            <ChartLayout.Legend\n                              position={legendPosition}\n                              initialRatio={legendRatio}\n                              onResize={onRatioChange}\n                            >\n                              <TimeseriesChartLegend />\n                            </ChartLayout.Legend>\n                          )}\n                        </ChartLayout>\n                      </TooltipProvider>\n                    </OverlayProvider>\n                  </TimeseriesFilteredDataProvider>\n                </StoreProvider>\n              </ChartSeriesActionContext.Provider>\n            </TimeseriesMinMaxXAxisProvider>\n          </TimeseriesDataProvider>\n        </TimeseriesRawDataContext.Provider>\n      </TimeseriesConfigProvider>\n    </TimeseriesChartIdProvider>\n  );\n});\n\n(\n  TimeseriesChartRoot as typeof TimeseriesChartRoot & { displayName: string }\n).displayName = 'TimeseriesChartRoot';\n\n/**\n * The `TimeseriesChart` visually represents data in sequential order of time.\n * It's used to observe trends, patterns, and fluctuations in the data over a\n * specific time period.\n * @public\n */\nexport const TimeseriesChart = Object.assign(TimeseriesChartRoot, {\n  Band,\n  Legend,\n  YAxis,\n  XAxis,\n  Tooltip,\n  Annotations,\n  Line,\n  Area,\n  Bar,\n  ThresholdIndicator,\n  Select,\n  Intent,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n  Toolbar,\n  DownloadCSV: TimeseriesChartDownloadCSVSlot,\n  Pan,\n  Zoom,\n});\n\n/**\n * Annotations Slots\n * @public\n */\nexport const TimeseriesAnnotations = Object.assign(\n  {},\n  {\n    Marker,\n    Track,\n    Tooltip: AnnotationsTooltip,\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, type ReactElement } from 'react';\n\nimport { TimeseriesChartLegend } from './components/legend/TimeseriesChartLegend.js';\nimport { TIMESERIES_CHART_DEFAULT_VARIANT } from './constants.js';\nimport { TimeseriesRawDataContext } from './context/TimeseriesRawData.context.js';\nimport { useTimeseriesChartConfig } from './hooks/useTimeseriesChartConfig.js';\nimport { StoreProvider } from './providers/StoreProvider.js';\nimport { TimeseriesChartIdProvider } from './providers/TimeseriesChartIdProvider.js';\nimport { TimeseriesConfigProvider } from './providers/TimeseriesConfigProviders.js';\nimport { TimeseriesDataProvider } from './providers/TimeseriesDataProvider.js';\nimport { TimeseriesFilteredDataProvider } from './providers/TimeseriesFilteredDataProvider.js';\nimport { TimeseriesMinMaxXAxisProvider } from './providers/TimeseriesMinMaxXAxisProvider.js';\nimport { TimeseriesChartInternal } from './TimeseriesChartInternal.js';\nimport { TimeseriesChartProps } from './types/timeseries-props.js';\nimport { TimeseriesChartRef } from './types/timeseries-ref.js';\nimport {\n  hasSeriesWithDatapoints,\n  splitTimeseriesPerVariant,\n} from './utils/timeseries.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { OverlayProvider } from '../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { ChartSeriesActionContext } from '../core/components/series-action/ChartSeriesActionContext.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\n/**\n * The default max height used for the timeserieschart when no explicit\n * height is given\n */\nconst TIMESERIES_CHART_DEFAULT_HEIGHT = 300;\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'TimeseriesChart';\n\n/**\n * TimeseriesChart component\n */\nexport const TimeseriesChartRoot = forwardRef<\n  TimeseriesChartRef,\n  TimeseriesChartProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    data,\n    gapPolicy,\n    pointsDisplay,\n    colorPalette,\n    truncationMode,\n    variant = TIMESERIES_CHART_DEFAULT_VARIANT,\n    valueRepresentation,\n    height: heightProp,\n    width,\n    seriesActions,\n    onMessage,\n    loading = false,\n    curve,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const chartHeight =\n    coerceSizeValue(heightProp) || TIMESERIES_CHART_DEFAULT_HEIGHT;\n  const dataPerVariant = splitTimeseriesPerVariant(\n    data ?? [],\n    children,\n    variant,\n  );\n  const config = useTimeseriesChartConfig(children, {\n    gapPolicy,\n    pointsDisplay,\n    valueRepresentation,\n    colorPalette,\n    truncationMode,\n    curve,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n  });\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const { shapePriority, ...rawDataPerVariant } = dataPerVariant;\n  const hasSeries = hasSeriesWithDatapoints(dataPerVariant);\n\n  const {\n    position: legendPosition,\n    onRatioChange,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    hidden: isLegendHidden,\n  } = config.legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <TimeseriesChartIdProvider>\n      <TimeseriesConfigProvider config={config}>\n        <TimeseriesRawDataContext.Provider value={rawDataPerVariant}>\n          <TimeseriesDataProvider\n            data={dataPerVariant}\n            valueRepresentation={config.valueRepresentation}\n            onMessage={onMessage}\n          >\n            <TimeseriesMinMaxXAxisProvider>\n              <ChartSeriesActionContext.Provider\n                value={{\n                  chartSeriesActions: seriesActions as (\n                    series: unknown,\n                    datapoint?: unknown,\n                  ) => ReactElement<PropsWithChildren>,\n                }}\n              >\n                <StoreProvider\n                  data={dataPerVariant}\n                  currentDomain={config.currentZoom}\n                  initialDomain={config.initialZoom}\n                  infiniteZoom={config.infiniteZoom}\n                >\n                  <TimeseriesFilteredDataProvider>\n                    <OverlayProvider>\n                      <TooltipProvider>\n                        <ChartLayout\n                          ref={chartLayoutRef}\n                          chartHeight={chartHeight}\n                          chartWidth={width}\n                          isEmpty={!hasSeries}\n                          emptyState={emptyState}\n                          errorState={errorState}\n                          showLoader={loading}\n                          className={className}\n                          style={style}\n                          {...behaviorTrackingProps}\n                          data-dtrum-mask={dataDtrumMask}\n                          data-dtrum-allow={dataDtrumAllow}\n                          data-dt-component={\n                            COMPONENT_NAME_BEHAVIOURAL_TRACKING\n                          }\n                        >\n                          <ChartLayout.Graph>\n                            <TimeseriesChartInternal\n                              ref={forwardedRef}\n                              config={config}\n                            />\n                          </ChartLayout.Graph>\n                          {!isLegendHidden && (\n                            <ChartLayout.Legend\n                              position={legendPosition}\n                              initialRatio={legendRatio}\n                              onResize={onRatioChange}\n                            >\n                              <TimeseriesChartLegend />\n                            </ChartLayout.Legend>\n                          )}\n                        </ChartLayout>\n                      </TooltipProvider>\n                    </OverlayProvider>\n                  </TimeseriesFilteredDataProvider>\n                </StoreProvider>\n              </ChartSeriesActionContext.Provider>\n            </TimeseriesMinMaxXAxisProvider>\n          </TimeseriesDataProvider>\n        </TimeseriesRawDataContext.Provider>\n      </TimeseriesConfigProvider>\n    </TimeseriesChartIdProvider>\n  );\n});\n\n(\n  TimeseriesChartRoot as typeof TimeseriesChartRoot & { displayName: string }\n).displayName = 'TimeseriesChartRoot';\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

@@ -34,10 +34,12 @@ function TimeseriesTimeBottomAxisArea() {
     {
       target: axisRef,
       eventOptions: { passive: false },
+      enabled: isPanEnabled,
       drag: {
         filterTaps: !isTouchableDevice(),
-        pointer: { buttons: [1, 4] },
-        enabled: isPanEnabled
+        // Without capture:false, tick DOM replacement during panning fires lostpointercapture
+        // on the removed element (non-bubbling), leaving useGesture stuck in active drag state.
+        pointer: { buttons: [1, 4], capture: false }
       }
     }
   );