@dynatrace/strato-components 3.8.0 → 3.9.1

package/esm/charts/xy-chart-adoption/categorical-bar/transformer-data-to-xy.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/xy-chart-adoption/categorical-bar/transformer-data-to-xy.ts"],
+  "sourcesContent": ["import type { CategoricalBarChartData } from '../../categorical-bar/types/categorical-bar-chart.js';\nimport type { ChartUnit } from '../../core/types/chart-unit.js';\nimport type { XYChartData } from '../../xy-chart/types/xy-chart.js';\n\ninterface TransformCategoricalBarDataResult {\n  data: XYChartData[];\n  unit: ChartUnit | undefined;\n}\n\nexport function transformCategoricalBarDataToXY(\n  data: CategoricalBarChartData[],\n): TransformCategoricalBarDataResult {\n  const unit = data[0]?.unit as ChartUnit | undefined;\n  const result: XYChartData[] = [];\n\n  for (const entry of data) {\n    const { category, value, unit: _unit, ...extraProps } = entry;\n    if (typeof value === 'object' && value !== null) {\n      for (const [dimensionKey, dimensionValue] of Object.entries(value)) {\n        result.push({\n          ...extraProps,\n          category,\n          value: dimensionValue,\n          seriesId: dimensionKey,\n          seriesName: dimensionKey,\n        });\n      }\n    } else {\n      result.push({\n        ...extraProps,\n        category,\n        value,\n        seriesId: category,\n        seriesName: category,\n      });\n    }\n  }\n\n  return { data: result, unit };\n}\n"],
+  "mappings": "AASO,SAAS,gCACd,MACmC;AACnC,QAAM,OAAO,KAAK,CAAC,GAAG;AACtB,QAAM,SAAwB,CAAC;AAE/B,aAAW,SAAS,MAAM;AACxB,UAAM,EAAE,UAAU,OAAO,MAAM,OAAO,GAAG,WAAW,IAAI;AACxD,QAAI,OAAO,UAAU,YAAY,UAAU,MAAM;AAC/C,iBAAW,CAAC,cAAc,cAAc,KAAK,OAAO,QAAQ,KAAK,GAAG;AAClE,eAAO,KAAK;AAAA,UACV,GAAG;AAAA,UACH;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV,YAAY;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF,OAAO;AACL,aAAO,KAAK;AAAA,QACV,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,YAAY;AAAA,MACd,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO,EAAE,MAAM,QAAQ,KAAK;AAC9B;",
+  "names": []
+}

package/esm/charts/xy-chart-adoption/histogram/HistogramToXY.js

@@ -75,9 +75,14 @@ const HistogramToXY = forwardRef((props, forwardedRef) => {
     [seriesActions, propsData]
   );
   const yAxesConfig = buildYAxesConfigFromConfig(config);
-  const mappedThresholds = useMemo(
-    () => mapHistogramThresholdsToXY(config.thresholds, [...units]),
-    [config.thresholds, units]
+  const renderedAxisEntries = [...units].map((unit, index) => ({
+    unit,
+    axisId: defineAxisId(unit),
+    position: index % 2 === 0 ? "left" : "right"
+  }));
+  const mappedThresholds = mapHistogramThresholdsToXY(
+    config.thresholds,
+    renderedAxisEntries
   );
   const {
     xAxisConfig,
@@ -158,7 +163,7 @@ const HistogramToXY = forwardRef((props, forwardedRef) => {
             ...xAxisConfig
           }
         ),
-        [...units].map((unit, index) => /* @__PURE__ */ jsx(
+        renderedAxisEntries.map(({ unit, axisId }, index) => /* @__PURE__ */ jsx(
           XYChart.YAxis,
           {
             ...buildYAxisProps(
@@ -168,7 +173,7 @@ const HistogramToXY = forwardRef((props, forwardedRef) => {
               config.valueRepresentation
             )
           },
-          defineAxisId(unit)
+          axisId
         )),
         /* @__PURE__ */ jsx(XYChart.Legend, { ...config.legend }),
         allColorRules.map((rule) => /* @__PURE__ */ jsx(

package/esm/charts/xy-chart-adoption/histogram/HistogramToXY.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart-adoption/histogram/HistogramToXY.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useHistogramToXYColorRules } from './hooks/use-histogram-to-xy-color-rules.js';\nimport { transformHistogramAnnotationsToXY } from './transformer-annotations-to-xy.js';\nimport { transformHistogramDataToXYChart } from './transformer-data-to-xy.js';\nimport {\n  mapSelectedSeriesToHistogram,\n  mapSelectionDomainToHistogramDomains,\n} from './transformer-selection-to-histogram.js';\nimport { mapHistogramSeriesActionsToXY } from './transformer-series-actions-to-xy.js';\nimport { mapHistogramThresholdsToXY } from './transformer-thresholds-to-xy.js';\nimport { buildYAxisProps } from './utils/axis-props-mapping.js';\nimport { buildHistogramImperativeHandle } from './utils/build-histogram-imperative-handle.js';\nimport { buildYAxesConfigFromConfig } from './utils/build-y-axes-config.js';\nimport { defineAxisId } from './utils/define-axis-id.js';\nimport { deriveXYChartPropsFromConfig } from './utils/derive-xychart-props-from-config.js';\nimport { formatCSV } from './utils/format-csv.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { downloadCSV } from '../../../core/utils/download.js';\nimport { getChartStatesTemplates } from '../../core/components/chart-states/utils/get-chart-states-template.js';\nimport { CSS_DOWNLOAD_FILENAME } from '../../core/constants.js';\nimport { useHistogramChartConfig } from '../../histogram/hooks/useHistogramChartConfig.js';\nimport type { HistogramChartProps } from '../../histogram/types/histogram-props.js';\nimport type { HistogramChartRef } from '../../histogram/types/histogram-ref.js';\nimport type { XYChartRef } from '../../xy-chart/types/xy-chart.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport { renderXYAnnotations } from '../shared/utils/render-xy-annotations.js';\n\nexport const HistogramToXY = forwardRef<\n  HistogramChartRef,\n  PropsWithChildren<HistogramChartProps>\n>((props, forwardedRef) => {\n  const {\n    data: propsData,\n    loading,\n    children,\n    className,\n    style,\n    width,\n    height,\n    colorPalette,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    truncationMode,\n    valueRepresentation,\n    seriesActions,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useHistogramChartConfig(children, {\n    colorPalette,\n    truncationMode,\n    valueRepresentation,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n  });\n\n  const { barSeriesProps, units, seriesColors } =\n    transformHistogramDataToXYChart(propsData);\n\n  const allColorRules = useHistogramToXYColorRules({\n    data: propsData,\n    seriesColors,\n    colorRules: config.colorRules,\n  });\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const downloadDataCallback = useCallback(() => {\n    const csvString = formatCSV(propsData);\n    downloadCSV(csvString, CSS_DOWNLOAD_FILENAME);\n  }, [propsData]);\n\n  const selectActions = config.select?.actions;\n  const mappedSeriesActions = useMemo(\n    () =>\n      seriesActions\n        ? mapHistogramSeriesActionsToXY(seriesActions, propsData)\n        : undefined,\n    [seriesActions, propsData],\n  );\n\n  const yAxesConfig = buildYAxesConfigFromConfig(config);\n\n  const mappedThresholds = useMemo(\n    () => mapHistogramThresholdsToXY(config.thresholds, [...units]),\n    [config.thresholds, units],\n  );\n\n  const {\n    xAxisConfig,\n    disableZoom,\n    disablePan,\n    toolbarEnabled,\n    toolbarPlacement,\n    toolbarIntents,\n    onZoomChange: effectiveOnZoomChange,\n  } = deriveXYChartPropsFromConfig(config, onZoomChange);\n\n  const xyRef = useRef<XYChartRef>(null);\n\n  useImperativeHandle(\n    forwardedRef,\n    () => buildHistogramImperativeHandle(xyRef, config),\n    [config],\n  );\n\n  const annotations = config.annotations;\n  const xAxisId = 'x-axis';\n  // 'grouped' is a Histogram-only variant \u2014 XYChart only knows 'single' | 'shared'\n  const tooltipVariant =\n    config.tooltip.variant === 'single' ? 'single' : 'shared';\n\n  return (\n    <XYChart\n      data={[]}\n      ref={xyRef}\n      loading={loading}\n      className={className}\n      style={style}\n      width={width}\n      height={height}\n      colorPalette={config.colorPalette}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      truncationMode={config.truncationMode}\n      __downloadDataCallback={downloadDataCallback}\n      data-dt-component=\"HistogramChart\"\n      {...behaviorTrackingProps}\n    >\n      <XYChart.Tooltip _variant={tooltipVariant} />\n      {errorState && <XYChart.ErrorState>{errorState}</XYChart.ErrorState>}\n      {emptyState && <XYChart.EmptyState>{emptyState}</XYChart.EmptyState>}\n      {selectActions ? (\n        <XYChart.Select\n          actions={(selectedSeries, selectionDomain) =>\n            selectActions(\n              mapSelectedSeriesToHistogram(selectedSeries),\n              mapSelectionDomainToHistogramDomains(selectionDomain),\n            )\n          }\n        />\n      ) : null}\n      {barSeriesProps.map(({ data, unit }, index) => (\n        <XYChart.BarSeries\n          key={index}\n          data={data}\n          xAxisId={xAxisId}\n          yAxisId={defineAxisId(unit)}\n          x0Accessor=\"x0\"\n          x1Accessor=\"x1\"\n          y1Accessor=\"y1\"\n          variant={\n            config.valueRepresentation === 'relative' && propsData.length === 1\n              ? 'single'\n              : 'stack'\n          }\n          seriesIdAccessor=\"seriesId\"\n          nameAccessor=\"name\"\n          actions={mappedSeriesActions}\n        />\n      ))}\n      <XYChart.XAxis\n        id={xAxisId}\n        type={xAxisConfig.scale === 'log' ? 'log' : 'numerical'}\n        position=\"bottom\"\n        disableZoom={disableZoom}\n        disablePan={disablePan}\n        initialZoom={config.initialZoom as [number, number]}\n        currentZoom={config.currentZoom as [number, number]}\n        onZoomChange={effectiveOnZoomChange}\n        infiniteZoom={config.infiniteZoom}\n        {...xAxisConfig}\n      />\n      {[...units].map((unit, index) => (\n        <XYChart.YAxis\n          key={defineAxisId(unit)}\n          {...buildYAxisProps(\n            index,\n            unit,\n            yAxesConfig,\n            config.valueRepresentation,\n          )}\n        />\n      ))}\n      <XYChart.Legend {...config.legend} />\n      {allColorRules.map((rule) => (\n        <XYChart.ColorRule\n          key={`${rule.comparator}-${rule.matchValue}-${rule.valueAccessor}`}\n          {...rule}\n        />\n      ))}\n      {mappedThresholds.map((threshold) => (\n        <XYChart.ThresholdIndicator\n          key={`${threshold.yAxisId}-${threshold.color}-${\n            threshold.label ?? ''\n          }`}\n          {...threshold}\n        />\n      ))}\n      <XYChart.Toolbar hidden={!toolbarEnabled} placement={toolbarPlacement} />\n      {toolbarIntents?.map((intentProps, index) => (\n        <XYChart.Intent key={index} {...intentProps} />\n      ))}\n      {annotations &&\n        renderXYAnnotations(\n          transformHistogramAnnotationsToXY(annotations.tracks),\n          xAxisId,\n          annotations,\n        )}\n    </XYChart>\n  );\n});\n\n(\n  HistogramToXY as typeof HistogramToXY & {\n    displayName: string;\n  }\n).displayName = 'HistogramToXY';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useHistogramToXYColorRules } from './hooks/use-histogram-to-xy-color-rules.js';\nimport { transformHistogramAnnotationsToXY } from './transformer-annotations-to-xy.js';\nimport { transformHistogramDataToXYChart } from './transformer-data-to-xy.js';\nimport {\n  mapSelectedSeriesToHistogram,\n  mapSelectionDomainToHistogramDomains,\n} from './transformer-selection-to-histogram.js';\nimport { mapHistogramSeriesActionsToXY } from './transformer-series-actions-to-xy.js';\nimport { mapHistogramThresholdsToXY } from './transformer-thresholds-to-xy.js';\nimport { buildYAxisProps } from './utils/axis-props-mapping.js';\nimport { buildHistogramImperativeHandle } from './utils/build-histogram-imperative-handle.js';\nimport { buildYAxesConfigFromConfig } from './utils/build-y-axes-config.js';\nimport { defineAxisId } from './utils/define-axis-id.js';\nimport { deriveXYChartPropsFromConfig } from './utils/derive-xychart-props-from-config.js';\nimport { formatCSV } from './utils/format-csv.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { downloadCSV } from '../../../core/utils/download.js';\nimport { getChartStatesTemplates } from '../../core/components/chart-states/utils/get-chart-states-template.js';\nimport { CSS_DOWNLOAD_FILENAME } from '../../core/constants.js';\nimport { useHistogramChartConfig } from '../../histogram/hooks/useHistogramChartConfig.js';\nimport type { HistogramChartProps } from '../../histogram/types/histogram-props.js';\nimport type { HistogramChartRef } from '../../histogram/types/histogram-ref.js';\nimport type { XYChartRef } from '../../xy-chart/types/xy-chart.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport { renderXYAnnotations } from '../shared/utils/render-xy-annotations.js';\n\nexport const HistogramToXY = forwardRef<\n  HistogramChartRef,\n  PropsWithChildren<HistogramChartProps>\n>((props, forwardedRef) => {\n  const {\n    data: propsData,\n    loading,\n    children,\n    className,\n    style,\n    width,\n    height,\n    colorPalette,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    truncationMode,\n    valueRepresentation,\n    seriesActions,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useHistogramChartConfig(children, {\n    colorPalette,\n    truncationMode,\n    valueRepresentation,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n  });\n\n  const { barSeriesProps, units, seriesColors } =\n    transformHistogramDataToXYChart(propsData);\n\n  const allColorRules = useHistogramToXYColorRules({\n    data: propsData,\n    seriesColors,\n    colorRules: config.colorRules,\n  });\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const downloadDataCallback = useCallback(() => {\n    const csvString = formatCSV(propsData);\n    downloadCSV(csvString, CSS_DOWNLOAD_FILENAME);\n  }, [propsData]);\n\n  const selectActions = config.select?.actions;\n  const mappedSeriesActions = useMemo(\n    () =>\n      seriesActions\n        ? mapHistogramSeriesActionsToXY(seriesActions, propsData)\n        : undefined,\n    [seriesActions, propsData],\n  );\n\n  const yAxesConfig = buildYAxesConfigFromConfig(config);\n\n  const renderedAxisEntries = [...units].map((unit, index) => ({\n    unit,\n    axisId: defineAxisId(unit),\n    position: (index % 2 === 0 ? 'left' : 'right') as 'left' | 'right',\n  }));\n\n  const mappedThresholds = mapHistogramThresholdsToXY(\n    config.thresholds,\n    renderedAxisEntries,\n  );\n\n  const {\n    xAxisConfig,\n    disableZoom,\n    disablePan,\n    toolbarEnabled,\n    toolbarPlacement,\n    toolbarIntents,\n    onZoomChange: effectiveOnZoomChange,\n  } = deriveXYChartPropsFromConfig(config, onZoomChange);\n\n  const xyRef = useRef<XYChartRef>(null);\n\n  useImperativeHandle(\n    forwardedRef,\n    () => buildHistogramImperativeHandle(xyRef, config),\n    [config],\n  );\n\n  const annotations = config.annotations;\n  const xAxisId = 'x-axis';\n  // 'grouped' is a Histogram-only variant \u2014 XYChart only knows 'single' | 'shared'\n  const tooltipVariant =\n    config.tooltip.variant === 'single' ? 'single' : 'shared';\n\n  return (\n    <XYChart\n      data={[]}\n      ref={xyRef}\n      loading={loading}\n      className={className}\n      style={style}\n      width={width}\n      height={height}\n      colorPalette={config.colorPalette}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      truncationMode={config.truncationMode}\n      __downloadDataCallback={downloadDataCallback}\n      data-dt-component=\"HistogramChart\"\n      {...behaviorTrackingProps}\n    >\n      <XYChart.Tooltip _variant={tooltipVariant} />\n      {errorState && <XYChart.ErrorState>{errorState}</XYChart.ErrorState>}\n      {emptyState && <XYChart.EmptyState>{emptyState}</XYChart.EmptyState>}\n      {selectActions ? (\n        <XYChart.Select\n          actions={(selectedSeries, selectionDomain) =>\n            selectActions(\n              mapSelectedSeriesToHistogram(selectedSeries),\n              mapSelectionDomainToHistogramDomains(selectionDomain),\n            )\n          }\n        />\n      ) : null}\n      {barSeriesProps.map(({ data, unit }, index) => (\n        <XYChart.BarSeries\n          key={index}\n          data={data}\n          xAxisId={xAxisId}\n          yAxisId={defineAxisId(unit)}\n          x0Accessor=\"x0\"\n          x1Accessor=\"x1\"\n          y1Accessor=\"y1\"\n          variant={\n            config.valueRepresentation === 'relative' && propsData.length === 1\n              ? 'single'\n              : 'stack'\n          }\n          seriesIdAccessor=\"seriesId\"\n          nameAccessor=\"name\"\n          actions={mappedSeriesActions}\n        />\n      ))}\n      <XYChart.XAxis\n        id={xAxisId}\n        type={xAxisConfig.scale === 'log' ? 'log' : 'numerical'}\n        position=\"bottom\"\n        disableZoom={disableZoom}\n        disablePan={disablePan}\n        initialZoom={config.initialZoom as [number, number]}\n        currentZoom={config.currentZoom as [number, number]}\n        onZoomChange={effectiveOnZoomChange}\n        infiniteZoom={config.infiniteZoom}\n        {...xAxisConfig}\n      />\n      {renderedAxisEntries.map(({ unit, axisId }, index) => (\n        <XYChart.YAxis\n          key={axisId}\n          {...buildYAxisProps(\n            index,\n            unit,\n            yAxesConfig,\n            config.valueRepresentation,\n          )}\n        />\n      ))}\n      <XYChart.Legend {...config.legend} />\n      {allColorRules.map((rule) => (\n        <XYChart.ColorRule\n          key={`${rule.comparator}-${rule.matchValue}-${rule.valueAccessor}`}\n          {...rule}\n        />\n      ))}\n      {mappedThresholds.map((threshold) => (\n        <XYChart.ThresholdIndicator\n          key={`${threshold.yAxisId}-${threshold.color}-${\n            threshold.label ?? ''\n          }`}\n          {...threshold}\n        />\n      ))}\n      <XYChart.Toolbar hidden={!toolbarEnabled} placement={toolbarPlacement} />\n      {toolbarIntents?.map((intentProps, index) => (\n        <XYChart.Intent key={index} {...intentProps} />\n      ))}\n      {annotations &&\n        renderXYAnnotations(\n          transformHistogramAnnotationsToXY(annotations.tracks),\n          xAxisId,\n          annotations,\n        )}\n    </XYChart>\n  );\n});\n\n(\n  HistogramToXY as typeof HistogramToXY & {\n    displayName: string;\n  }\n).displayName = 'HistogramToXY';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart-adoption/histogram/transformer-annotations-to-xy.js

@@ -19,6 +19,7 @@ const transformHistogramAnnotationsToXY = (tracks) => {
         [ANNOTATIONS_KEYS.markerTitle]: histogramMarker.title,
         [ANNOTATIONS_KEYS.markerDescription]: histogramMarker.description,
         [ANNOTATIONS_KEYS.markerColor]: histogramMarker.color,
+        [ANNOTATIONS_KEYS.markerSymbolColor]: histogramMarker.symbolColor,
         [ANNOTATIONS_KEYS.markerHidden]: histogramMarker.hidden,
         [ANNOTATIONS_KEYS.markerSymbol]: histogramMarker.symbol,
         [ANNOTATIONS_KEYS.markerIndicators]: histogramMarker.indicatorsDisplay,

package/esm/charts/xy-chart-adoption/histogram/transformer-annotations-to-xy.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart-adoption/histogram/transformer-annotations-to-xy.ts"],
-  "sourcesContent": ["import type { AnnotationsTrackConfig } from '../../core/components/annotations/types/annotations-track-props.js';\nimport type {\n  NumericalAnnotationsMarkerConfig,\n  NumericalAnnotationsTrackConfig,\n} from '../../core/components/annotations/types/numerical-annotations-config.js';\nimport type { XYChartData } from '../../xy-chart/types/xy-chart.js';\nimport { ANNOTATIONS_KEYS } from '../shared/utils/render-xy-annotations.js';\n\nexport { ANNOTATIONS_KEYS } from '../shared/utils/render-xy-annotations.js';\n\nexport const transformHistogramAnnotationsToXY = (\n  tracks: AnnotationsTrackConfig[],\n): XYChartData[] => {\n  const data: XYChartData[] = [];\n\n  tracks.forEach((track, trackIndex) => {\n    const histogramTrack = track as NumericalAnnotationsTrackConfig;\n    const trackId = `track-${trackIndex}`;\n\n    track.markers.forEach((marker) => {\n      const histogramMarker = marker as NumericalAnnotationsMarkerConfig;\n\n      data.push({\n        [ANNOTATIONS_KEYS.trackId]: trackId,\n        [ANNOTATIONS_KEYS.trackLabel]: histogramTrack.label,\n        [ANNOTATIONS_KEYS.trackColor]: histogramTrack.color,\n        [ANNOTATIONS_KEYS.trackHidden]: histogramTrack.hidden,\n        [ANNOTATIONS_KEYS.trackSymbol]: histogramTrack.symbol,\n        [ANNOTATIONS_KEYS.trackIndicators]: histogramTrack.indicatorsDisplay,\n        [ANNOTATIONS_KEYS.markerStart]: histogramMarker.start,\n        [ANNOTATIONS_KEYS.markerEnd]: histogramMarker.end,\n        [ANNOTATIONS_KEYS.markerTitle]: histogramMarker.title,\n        [ANNOTATIONS_KEYS.markerDescription]: histogramMarker.description,\n        [ANNOTATIONS_KEYS.markerColor]: histogramMarker.color,\n        [ANNOTATIONS_KEYS.markerHidden]: histogramMarker.hidden,\n        [ANNOTATIONS_KEYS.markerSymbol]: histogramMarker.symbol,\n        [ANNOTATIONS_KEYS.markerIndicators]: histogramMarker.indicatorsDisplay,\n        [ANNOTATIONS_KEYS.markerPriority]: histogramMarker.priority,\n      });\n    });\n  });\n\n  return data;\n};\n"],
-  "mappings": "AAMA,SAAS,wBAAwB;AAEjC,SAAS,oBAAAA,yBAAwB;AAE1B,MAAM,oCAAoC,CAC/C,WACkB;AAClB,QAAM,OAAsB,CAAC;AAE7B,SAAO,QAAQ,CAAC,OAAO,eAAe;AACpC,UAAM,iBAAiB;AACvB,UAAM,UAAU,SAAS,UAAU;AAEnC,UAAM,QAAQ,QAAQ,CAAC,WAAW;AAChC,YAAM,kBAAkB;AAExB,WAAK,KAAK;AAAA,QACR,CAAC,iBAAiB,OAAO,GAAG;AAAA,QAC5B,CAAC,iBAAiB,UAAU,GAAG,eAAe;AAAA,QAC9C,CAAC,iBAAiB,UAAU,GAAG,eAAe;AAAA,QAC9C,CAAC,iBAAiB,WAAW,GAAG,eAAe;AAAA,QAC/C,CAAC,iBAAiB,WAAW,GAAG,eAAe;AAAA,QAC/C,CAAC,iBAAiB,eAAe,GAAG,eAAe;AAAA,QACnD,CAAC,iBAAiB,WAAW,GAAG,gBAAgB;AAAA,QAChD,CAAC,iBAAiB,SAAS,GAAG,gBAAgB;AAAA,QAC9C,CAAC,iBAAiB,WAAW,GAAG,gBAAgB;AAAA,QAChD,CAAC,iBAAiB,iBAAiB,GAAG,gBAAgB;AAAA,QACtD,CAAC,iBAAiB,WAAW,GAAG,gBAAgB;AAAA,QAChD,CAAC,iBAAiB,YAAY,GAAG,gBAAgB;AAAA,QACjD,CAAC,iBAAiB,YAAY,GAAG,gBAAgB;AAAA,QACjD,CAAC,iBAAiB,gBAAgB,GAAG,gBAAgB;AAAA,QACrD,CAAC,iBAAiB,cAAc,GAAG,gBAAgB;AAAA,MACrD,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AACT;",
+  "sourcesContent": ["import type { AnnotationsTrackConfig } from '../../core/components/annotations/types/annotations-track-props.js';\nimport type {\n  NumericalAnnotationsMarkerConfig,\n  NumericalAnnotationsTrackConfig,\n} from '../../core/components/annotations/types/numerical-annotations-config.js';\nimport type { XYChartData } from '../../xy-chart/types/xy-chart.js';\nimport { ANNOTATIONS_KEYS } from '../shared/utils/render-xy-annotations.js';\n\nexport { ANNOTATIONS_KEYS } from '../shared/utils/render-xy-annotations.js';\n\nexport const transformHistogramAnnotationsToXY = (\n  tracks: AnnotationsTrackConfig[],\n): XYChartData[] => {\n  const data: XYChartData[] = [];\n\n  tracks.forEach((track, trackIndex) => {\n    const histogramTrack = track as NumericalAnnotationsTrackConfig;\n    const trackId = `track-${trackIndex}`;\n\n    track.markers.forEach((marker) => {\n      const histogramMarker = marker as NumericalAnnotationsMarkerConfig;\n\n      data.push({\n        [ANNOTATIONS_KEYS.trackId]: trackId,\n        [ANNOTATIONS_KEYS.trackLabel]: histogramTrack.label,\n        [ANNOTATIONS_KEYS.trackColor]: histogramTrack.color,\n        [ANNOTATIONS_KEYS.trackHidden]: histogramTrack.hidden,\n        [ANNOTATIONS_KEYS.trackSymbol]: histogramTrack.symbol,\n        [ANNOTATIONS_KEYS.trackIndicators]: histogramTrack.indicatorsDisplay,\n        [ANNOTATIONS_KEYS.markerStart]: histogramMarker.start,\n        [ANNOTATIONS_KEYS.markerEnd]: histogramMarker.end,\n        [ANNOTATIONS_KEYS.markerTitle]: histogramMarker.title,\n        [ANNOTATIONS_KEYS.markerDescription]: histogramMarker.description,\n        [ANNOTATIONS_KEYS.markerColor]: histogramMarker.color,\n        [ANNOTATIONS_KEYS.markerSymbolColor]: histogramMarker.symbolColor,\n        [ANNOTATIONS_KEYS.markerHidden]: histogramMarker.hidden,\n        [ANNOTATIONS_KEYS.markerSymbol]: histogramMarker.symbol,\n        [ANNOTATIONS_KEYS.markerIndicators]: histogramMarker.indicatorsDisplay,\n        [ANNOTATIONS_KEYS.markerPriority]: histogramMarker.priority,\n      });\n    });\n  });\n\n  return data;\n};\n"],
+  "mappings": "AAMA,SAAS,wBAAwB;AAEjC,SAAS,oBAAAA,yBAAwB;AAE1B,MAAM,oCAAoC,CAC/C,WACkB;AAClB,QAAM,OAAsB,CAAC;AAE7B,SAAO,QAAQ,CAAC,OAAO,eAAe;AACpC,UAAM,iBAAiB;AACvB,UAAM,UAAU,SAAS,UAAU;AAEnC,UAAM,QAAQ,QAAQ,CAAC,WAAW;AAChC,YAAM,kBAAkB;AAExB,WAAK,KAAK;AAAA,QACR,CAAC,iBAAiB,OAAO,GAAG;AAAA,QAC5B,CAAC,iBAAiB,UAAU,GAAG,eAAe;AAAA,QAC9C,CAAC,iBAAiB,UAAU,GAAG,eAAe;AAAA,QAC9C,CAAC,iBAAiB,WAAW,GAAG,eAAe;AAAA,QAC/C,CAAC,iBAAiB,WAAW,GAAG,eAAe;AAAA,QAC/C,CAAC,iBAAiB,eAAe,GAAG,eAAe;AAAA,QACnD,CAAC,iBAAiB,WAAW,GAAG,gBAAgB;AAAA,QAChD,CAAC,iBAAiB,SAAS,GAAG,gBAAgB;AAAA,QAC9C,CAAC,iBAAiB,WAAW,GAAG,gBAAgB;AAAA,QAChD,CAAC,iBAAiB,iBAAiB,GAAG,gBAAgB;AAAA,QACtD,CAAC,iBAAiB,WAAW,GAAG,gBAAgB;AAAA,QAChD,CAAC,iBAAiB,iBAAiB,GAAG,gBAAgB;AAAA,QACtD,CAAC,iBAAiB,YAAY,GAAG,gBAAgB;AAAA,QACjD,CAAC,iBAAiB,YAAY,GAAG,gBAAgB;AAAA,QACjD,CAAC,iBAAiB,gBAAgB,GAAG,gBAAgB;AAAA,QACrD,CAAC,iBAAiB,cAAc,GAAG,gBAAgB;AAAA,MACrD,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AACT;",
   "names": ["ANNOTATIONS_KEYS"]
 }

package/esm/charts/xy-chart-adoption/histogram/transformer-thresholds-to-xy.js

@@ -1,80 +1,32 @@
-import { defineAxisId } from "./utils/define-axis-id.js";
 import {
   isDynamicNumeric,
-  isDynamicNumericRange,
-  isStatic,
-  isStaticRange
+  isDynamicNumericRange
 } from "../../core/types/type-guards.js";
+import {
+  reduceThresholdsToXY
+} from "../shared/utils/thresholds/reduce-thresholds-to-xy.js";
 const X_AXIS_ID = "x-axis";
-function buildPositionToAxisIdMap(units) {
-  if (units.length <= 1) {
-    const axisId = units.length === 1 ? defineAxisId(units[0]) : "";
-    return { left: axisId, right: axisId };
-  }
-  const map = {};
-  units.forEach((unit, index) => {
-    const position = index % 2 === 0 ? "left" : "right";
-    if (!(position in map)) {
-      map[position] = defineAxisId(unit);
-    }
-  });
-  return map;
-}
-function mapHistogramThresholdsToXY(thresholds, units) {
+function mapHistogramThresholdsToXY(thresholds, axisEntries) {
   if (!thresholds) {
     return [];
   }
-  const positionToAxisId = buildPositionToAxisIdMap(units);
   const flatThresholds = [
     ...thresholds.leftThreshold ?? [],
     ...thresholds.rightThreshold ?? []
   ];
-  return flatThresholds.reduce(
-    (result, threshold) => {
-      const position = threshold.position ?? "left";
-      const yAxisId = positionToAxisId[position];
-      if (!yAxisId) {
-        return result;
+  return reduceThresholdsToXY(
+    flatThresholds,
+    axisEntries,
+    X_AXIS_ID,
+    (data) => {
+      if (isDynamicNumeric(data)) {
+        return data.map((d) => ({ y: d.value, x: d.point }));
       }
-      const { data, color, label, strokeOnly } = threshold;
-      if (isStatic(data)) {
-        result.push({
-          data: { y: data.value },
-          color,
-          label,
-          strokeOnly,
-          yAxisId
-        });
-      } else if (isStaticRange(data)) {
-        result.push({
-          data: { yMin: data.min, yMax: data.max },
-          color,
-          label,
-          strokeOnly,
-          yAxisId
-        });
-      } else if (isDynamicNumeric(data)) {
-        result.push({
-          data: data.map((d) => ({ y: d.value, x: d.point })),
-          color,
-          label,
-          strokeOnly,
-          yAxisId,
-          xAxisId: X_AXIS_ID
-        });
-      } else if (isDynamicNumericRange(data)) {
-        result.push({
-          data: data.map((d) => ({ yMin: d.min, yMax: d.max, x: d.point })),
-          color,
-          label,
-          strokeOnly,
-          yAxisId,
-          xAxisId: X_AXIS_ID
-        });
+      if (isDynamicNumericRange(data)) {
+        return data.map((d) => ({ yMin: d.min, yMax: d.max, x: d.point }));
       }
-      return result;
-    },
-    []
+      return null;
+    }
   );
 }
 export {

package/esm/charts/xy-chart-adoption/histogram/transformer-thresholds-to-xy.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart-adoption/histogram/transformer-thresholds-to-xy.ts"],
-  "sourcesContent": ["import { defineAxisId } from './utils/define-axis-id.js';\nimport type { ChartUnit } from '../../core/types/chart-unit.js';\nimport {\n  isDynamicNumeric,\n  isDynamicNumericRange,\n  isStatic,\n  isStaticRange,\n} from '../../core/types/type-guards.js';\nimport type { HistogramThresholdsConfig } from '../../histogram/types/histogram-props.js';\nimport type { XYChartThresholdIndicatorProps } from '../../xy-chart/types/xy-chart-props.js';\n\nconst X_AXIS_ID = 'x-axis';\n\nfunction buildPositionToAxisIdMap(units: ChartUnit[]): Record<string, string> {\n  if (units.length <= 1) {\n    const axisId = units.length === 1 ? defineAxisId(units[0]) : '';\n    return { left: axisId, right: axisId };\n  }\n\n  const map: Record<string, string> = {};\n  units.forEach((unit, index) => {\n    const position = index % 2 === 0 ? 'left' : 'right';\n    if (!(position in map)) {\n      map[position] = defineAxisId(unit);\n    }\n  });\n\n  return map;\n}\n\nexport function mapHistogramThresholdsToXY(\n  thresholds: HistogramThresholdsConfig | undefined,\n  units: ChartUnit[],\n): XYChartThresholdIndicatorProps[] {\n  if (!thresholds) {\n    return [];\n  }\n\n  const positionToAxisId = buildPositionToAxisIdMap(units);\n  // `config.thresholds` is bucketed by axis position. Each item already\n  // carries its `position`, so flattening both buckets restores the original\n  // slot-shaped list this transformer reasons about.\n  const flatThresholds = [\n    ...(thresholds.leftThreshold ?? []),\n    ...(thresholds.rightThreshold ?? []),\n  ];\n\n  return flatThresholds.reduce<XYChartThresholdIndicatorProps[]>(\n    (result, threshold) => {\n      const position = threshold.position ?? 'left';\n      const yAxisId = positionToAxisId[position];\n\n      if (!yAxisId) {\n        return result;\n      }\n\n      const { data, color, label, strokeOnly } = threshold;\n\n      if (isStatic(data)) {\n        result.push({\n          data: { y: data.value },\n          color,\n          label,\n          strokeOnly,\n          yAxisId,\n        });\n      } else if (isStaticRange(data)) {\n        result.push({\n          data: { yMin: data.min, yMax: data.max },\n          color,\n          label,\n          strokeOnly,\n          yAxisId,\n        });\n      } else if (isDynamicNumeric(data)) {\n        result.push({\n          data: data.map((d) => ({ y: d.value, x: d.point })),\n          color,\n          label,\n          strokeOnly,\n          yAxisId,\n          xAxisId: X_AXIS_ID,\n        });\n      } else if (isDynamicNumericRange(data)) {\n        result.push({\n          data: data.map((d) => ({ yMin: d.min, yMax: d.max, x: d.point })),\n          color,\n          label,\n          strokeOnly,\n          yAxisId,\n          xAxisId: X_AXIS_ID,\n        });\n      }\n\n      return result;\n    },\n    [],\n  );\n}\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAE7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,MAAM,YAAY;AAElB,SAAS,yBAAyB,OAA4C;AAC5E,MAAI,MAAM,UAAU,GAAG;AACrB,UAAM,SAAS,MAAM,WAAW,IAAI,aAAa,MAAM,CAAC,CAAC,IAAI;AAC7D,WAAO,EAAE,MAAM,QAAQ,OAAO,OAAO;AAAA,EACvC;AAEA,QAAM,MAA8B,CAAC;AACrC,QAAM,QAAQ,CAAC,MAAM,UAAU;AAC7B,UAAM,WAAW,QAAQ,MAAM,IAAI,SAAS;AAC5C,QAAI,EAAE,YAAY,MAAM;AACtB,UAAI,QAAQ,IAAI,aAAa,IAAI;AAAA,IACnC;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEO,SAAS,2BACd,YACA,OACkC;AAClC,MAAI,CAAC,YAAY;AACf,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,mBAAmB,yBAAyB,KAAK;AAIvD,QAAM,iBAAiB;AAAA,IACrB,GAAI,WAAW,iBAAiB,CAAC;AAAA,IACjC,GAAI,WAAW,kBAAkB,CAAC;AAAA,EACpC;AAEA,SAAO,eAAe;AAAA,IACpB,CAAC,QAAQ,cAAc;AACrB,YAAM,WAAW,UAAU,YAAY;AACvC,YAAM,UAAU,iBAAiB,QAAQ;AAEzC,UAAI,CAAC,SAAS;AACZ,eAAO;AAAA,MACT;AAEA,YAAM,EAAE,MAAM,OAAO,OAAO,WAAW,IAAI;AAE3C,UAAI,SAAS,IAAI,GAAG;AAClB,eAAO,KAAK;AAAA,UACV,MAAM,EAAE,GAAG,KAAK,MAAM;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH,WAAW,cAAc,IAAI,GAAG;AAC9B,eAAO,KAAK;AAAA,UACV,MAAM,EAAE,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI;AAAA,UACvC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH,WAAW,iBAAiB,IAAI,GAAG;AACjC,eAAO,KAAK;AAAA,UACV,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,GAAG,EAAE,MAAM,EAAE;AAAA,UAClD;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX,CAAC;AAAA,MACH,WAAW,sBAAsB,IAAI,GAAG;AACtC,eAAO,KAAK;AAAA,UACV,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,GAAG,EAAE,MAAM,EAAE;AAAA,UAChE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import {\n  isDynamicNumeric,\n  isDynamicNumericRange,\n} from '../../core/types/type-guards.js';\nimport type { HistogramThresholdsConfig } from '../../histogram/types/histogram-props.js';\nimport type { XYChartThresholdIndicatorProps } from '../../xy-chart/types/xy-chart-props.js';\nimport {\n  type AxisEntry,\n  reduceThresholdsToXY,\n} from '../shared/utils/thresholds/reduce-thresholds-to-xy.js';\n\nconst X_AXIS_ID = 'x-axis';\n\nexport function mapHistogramThresholdsToXY(\n  thresholds: HistogramThresholdsConfig | undefined,\n  axisEntries: AxisEntry[],\n): XYChartThresholdIndicatorProps[] {\n  if (!thresholds) {\n    return [];\n  }\n\n  const flatThresholds = [\n    ...(thresholds.leftThreshold ?? []),\n    ...(thresholds.rightThreshold ?? []),\n  ];\n\n  return reduceThresholdsToXY(\n    flatThresholds,\n    axisEntries,\n    X_AXIS_ID,\n    (data) => {\n      if (isDynamicNumeric(data)) {\n        return data.map((d) => ({ y: d.value, x: d.point }));\n      }\n      if (isDynamicNumericRange(data)) {\n        return data.map((d) => ({ yMin: d.min, yMax: d.max, x: d.point }));\n      }\n      return null;\n    },\n  );\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EAEE;AAAA,OACK;AAEP,MAAM,YAAY;AAEX,SAAS,2BACd,YACA,aACkC;AAClC,MAAI,CAAC,YAAY;AACf,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,iBAAiB;AAAA,IACrB,GAAI,WAAW,iBAAiB,CAAC;AAAA,IACjC,GAAI,WAAW,kBAAkB,CAAC;AAAA,EACpC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,CAAC,SAAS;AACR,UAAI,iBAAiB,IAAI,GAAG;AAC1B,eAAO,KAAK,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,GAAG,EAAE,MAAM,EAAE;AAAA,MACrD;AACA,UAAI,sBAAsB,IAAI,GAAG;AAC/B,eAAO,KAAK,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,GAAG,EAAE,MAAM,EAAE;AAAA,MACnE;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/xy-chart-adoption/shared/utils/render-xy-annotations.js

@@ -12,6 +12,7 @@ const ANNOTATIONS_KEYS = {
   markerTitle: "__annotationsMarkerTitle",
   markerDescription: "__annotationsMarkerDescription",
   markerColor: "__annotationsMarkerColor",
+  markerSymbolColor: "__annotationsMarkerSymbolColor",
   markerHidden: "__annotationsMarkerHidden",
   markerSymbol: "__annotationsMarkerSymbol",
   markerIndicators: "__annotationsMarkerIndicators",
@@ -50,6 +51,7 @@ const renderXYAnnotations = (data, xAxisId, config) => /* @__PURE__ */ jsxs(
           titleAccessor: ANNOTATIONS_KEYS.markerTitle,
           descriptionAccessor: ANNOTATIONS_KEYS.markerDescription,
           colorAccessor: ANNOTATIONS_KEYS.markerColor,
+          symbolColorAccessor: ANNOTATIONS_KEYS.markerSymbolColor,
           hidden: (d) => getAnnotationField(d, ANNOTATIONS_KEYS.markerHidden),
           symbol: (d) => getAnnotationField(d, ANNOTATIONS_KEYS.markerSymbol),
           indicatorsDisplay: (d) => getAnnotationField(

package/esm/charts/xy-chart-adoption/shared/utils/render-xy-annotations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart-adoption/shared/utils/render-xy-annotations.tsx"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport type { IndicatorsDisplay } from '../../../core/components/annotations/components/indicators/types.js';\nimport type { AnnotationsTooltipConfig } from '../../../core/components/annotations/components/tooltip/types/annotations-tooltip-props.js';\nimport type { AnnotationsActionsHandler } from '../../../core/components/annotations/types/annotations.js';\nimport type { XYChartData } from '../../../xy-chart/types/xy-chart.js';\nimport { XYChart, XYChartAnnotations } from '../../../xy-chart/XYChartRoot.js';\n\nexport const ANNOTATIONS_KEYS = {\n  trackId: '__annotationsTrackId',\n  trackLabel: '__annotationsTrackLabel',\n  trackColor: '__annotationsTrackColor',\n  trackHidden: '__annotationsTrackHidden',\n  trackSymbol: '__annotationsTrackSymbol',\n  trackIndicators: '__annotationsTrackIndicators',\n  markerStart: '__annotationsMarkerStart',\n  markerEnd: '__annotationsMarkerEnd',\n  markerTitle: '__annotationsMarkerTitle',\n  markerDescription: '__annotationsMarkerDescription',\n  markerColor: '__annotationsMarkerColor',\n  markerHidden: '__annotationsMarkerHidden',\n  markerSymbol: '__annotationsMarkerSymbol',\n  markerIndicators: '__annotationsMarkerIndicators',\n  markerPriority: '__annotationsMarkerPriority',\n} as const;\n\ntype AnnotationsKey = (typeof ANNOTATIONS_KEYS)[keyof typeof ANNOTATIONS_KEYS];\n\nconst getAnnotationField = <T,>(d: unknown, key: AnnotationsKey): T =>\n  (d as Record<string, unknown>)[key] as T;\n\nexport type XYAnnotationsConfig = {\n  showLabels?: boolean;\n  visibleTracksLimit?: number;\n  annotationsActions?: AnnotationsActionsHandler;\n  tooltip?: AnnotationsTooltipConfig;\n};\n\nexport const renderXYAnnotations = (\n  data: XYChartData[],\n  xAxisId: string,\n  config: XYAnnotationsConfig,\n) => (\n  <XYChart.Annotations\n    data={data}\n    xAxisId={xAxisId}\n    showLabels={config.showLabels}\n    fixedTracks={config.visibleTracksLimit}\n    annotationsActions={config.annotationsActions}\n  >\n    <XYChartAnnotations.Track\n      trackIdAccessor={ANNOTATIONS_KEYS.trackId}\n      labelAccessor={ANNOTATIONS_KEYS.trackLabel}\n      colorAccessor={ANNOTATIONS_KEYS.trackColor}\n      hidden={(d) =>\n        getAnnotationField<boolean>(d, ANNOTATIONS_KEYS.trackHidden)\n      }\n      symbol={(d) =>\n        getAnnotationField<ReactNode>(d, ANNOTATIONS_KEYS.trackSymbol)\n      }\n      indicatorsDisplay={(d) =>\n        getAnnotationField<IndicatorsDisplay>(\n          d,\n          ANNOTATIONS_KEYS.trackIndicators,\n        )\n      }\n    />\n    <XYChartAnnotations.Marker\n      startAccessor={ANNOTATIONS_KEYS.markerStart}\n      endAccessor={ANNOTATIONS_KEYS.markerEnd}\n      trackByAccessor={ANNOTATIONS_KEYS.trackId}\n      titleAccessor={ANNOTATIONS_KEYS.markerTitle}\n      descriptionAccessor={ANNOTATIONS_KEYS.markerDescription}\n      colorAccessor={ANNOTATIONS_KEYS.markerColor}\n      hidden={(d) =>\n        getAnnotationField<boolean>(d, ANNOTATIONS_KEYS.markerHidden)\n      }\n      symbol={(d) =>\n        getAnnotationField<ReactNode>(d, ANNOTATIONS_KEYS.markerSymbol)\n      }\n      indicatorsDisplay={(d) =>\n        getAnnotationField<IndicatorsDisplay>(\n          d,\n          ANNOTATIONS_KEYS.markerIndicators,\n        )\n      }\n      priority={(d) =>\n        getAnnotationField<number>(d, ANNOTATIONS_KEYS.markerPriority)\n      }\n    />\n    {config.tooltip?.template && (\n      <XYChartAnnotations.Tooltip hidden={config.tooltip.hidden}>\n        {config.tooltip.template}\n      </XYChartAnnotations.Tooltip>\n    )}\n  </XYChart.Annotations>\n);\n"],
-  "mappings": "AA2CE,SAOE,KAPF;AArCF,SAAS,SAAS,0BAA0B;AAErC,MAAM,mBAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,gBAAgB;AAClB;AAIA,MAAM,qBAAqB,CAAK,GAAY,QACzC,EAA8B,GAAG;AAS7B,MAAM,sBAAsB,CACjC,MACA,SACA,WAEA;AAAA,EAAC,QAAQ;AAAA,EAAR;AAAA,IACC;AAAA,IACA;AAAA,IACA,YAAY,OAAO;AAAA,IACnB,aAAa,OAAO;AAAA,IACpB,oBAAoB,OAAO;AAAA,IAE3B;AAAA;AAAA,QAAC,mBAAmB;AAAA,QAAnB;AAAA,UACC,iBAAiB,iBAAiB;AAAA,UAClC,eAAe,iBAAiB;AAAA,UAChC,eAAe,iBAAiB;AAAA,UAChC,QAAQ,CAAC,MACP,mBAA4B,GAAG,iBAAiB,WAAW;AAAA,UAE7D,QAAQ,CAAC,MACP,mBAA8B,GAAG,iBAAiB,WAAW;AAAA,UAE/D,mBAAmB,CAAC,MAClB;AAAA,YACE;AAAA,YACA,iBAAiB;AAAA,UACnB;AAAA;AAAA,MAEJ;AAAA,MACA;AAAA,QAAC,mBAAmB;AAAA,QAAnB;AAAA,UACC,eAAe,iBAAiB;AAAA,UAChC,aAAa,iBAAiB;AAAA,UAC9B,iBAAiB,iBAAiB;AAAA,UAClC,eAAe,iBAAiB;AAAA,UAChC,qBAAqB,iBAAiB;AAAA,UACtC,eAAe,iBAAiB;AAAA,UAChC,QAAQ,CAAC,MACP,mBAA4B,GAAG,iBAAiB,YAAY;AAAA,UAE9D,QAAQ,CAAC,MACP,mBAA8B,GAAG,iBAAiB,YAAY;AAAA,UAEhE,mBAAmB,CAAC,MAClB;AAAA,YACE;AAAA,YACA,iBAAiB;AAAA,UACnB;AAAA,UAEF,UAAU,CAAC,MACT,mBAA2B,GAAG,iBAAiB,cAAc;AAAA;AAAA,MAEjE;AAAA,MACC,OAAO,SAAS,YACf,oBAAC,mBAAmB,SAAnB,EAA2B,QAAQ,OAAO,QAAQ,QAChD,iBAAO,QAAQ,UAClB;AAAA;AAAA;AAEJ;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport type { IndicatorsDisplay } from '../../../core/components/annotations/components/indicators/types.js';\nimport type { AnnotationsTooltipConfig } from '../../../core/components/annotations/components/tooltip/types/annotations-tooltip-props.js';\nimport type { AnnotationsActionsHandler } from '../../../core/components/annotations/types/annotations.js';\nimport type { XYChartData } from '../../../xy-chart/types/xy-chart.js';\nimport { XYChart, XYChartAnnotations } from '../../../xy-chart/XYChartRoot.js';\n\nexport const ANNOTATIONS_KEYS = {\n  trackId: '__annotationsTrackId',\n  trackLabel: '__annotationsTrackLabel',\n  trackColor: '__annotationsTrackColor',\n  trackHidden: '__annotationsTrackHidden',\n  trackSymbol: '__annotationsTrackSymbol',\n  trackIndicators: '__annotationsTrackIndicators',\n  markerStart: '__annotationsMarkerStart',\n  markerEnd: '__annotationsMarkerEnd',\n  markerTitle: '__annotationsMarkerTitle',\n  markerDescription: '__annotationsMarkerDescription',\n  markerColor: '__annotationsMarkerColor',\n  markerSymbolColor: '__annotationsMarkerSymbolColor',\n  markerHidden: '__annotationsMarkerHidden',\n  markerSymbol: '__annotationsMarkerSymbol',\n  markerIndicators: '__annotationsMarkerIndicators',\n  markerPriority: '__annotationsMarkerPriority',\n} as const;\n\ntype AnnotationsKey = (typeof ANNOTATIONS_KEYS)[keyof typeof ANNOTATIONS_KEYS];\n\nconst getAnnotationField = <T,>(d: unknown, key: AnnotationsKey): T =>\n  (d as Record<string, unknown>)[key] as T;\n\nexport type XYAnnotationsConfig = {\n  showLabels?: boolean;\n  visibleTracksLimit?: number;\n  annotationsActions?: AnnotationsActionsHandler;\n  tooltip?: AnnotationsTooltipConfig;\n};\n\nexport const renderXYAnnotations = (\n  data: XYChartData[],\n  xAxisId: string,\n  config: XYAnnotationsConfig,\n) => (\n  <XYChart.Annotations\n    data={data}\n    xAxisId={xAxisId}\n    showLabels={config.showLabels}\n    fixedTracks={config.visibleTracksLimit}\n    annotationsActions={config.annotationsActions}\n  >\n    <XYChartAnnotations.Track\n      trackIdAccessor={ANNOTATIONS_KEYS.trackId}\n      labelAccessor={ANNOTATIONS_KEYS.trackLabel}\n      colorAccessor={ANNOTATIONS_KEYS.trackColor}\n      hidden={(d) =>\n        getAnnotationField<boolean>(d, ANNOTATIONS_KEYS.trackHidden)\n      }\n      symbol={(d) =>\n        getAnnotationField<ReactNode>(d, ANNOTATIONS_KEYS.trackSymbol)\n      }\n      indicatorsDisplay={(d) =>\n        getAnnotationField<IndicatorsDisplay>(\n          d,\n          ANNOTATIONS_KEYS.trackIndicators,\n        )\n      }\n    />\n    <XYChartAnnotations.Marker\n      startAccessor={ANNOTATIONS_KEYS.markerStart}\n      endAccessor={ANNOTATIONS_KEYS.markerEnd}\n      trackByAccessor={ANNOTATIONS_KEYS.trackId}\n      titleAccessor={ANNOTATIONS_KEYS.markerTitle}\n      descriptionAccessor={ANNOTATIONS_KEYS.markerDescription}\n      colorAccessor={ANNOTATIONS_KEYS.markerColor}\n      symbolColorAccessor={ANNOTATIONS_KEYS.markerSymbolColor}\n      hidden={(d) =>\n        getAnnotationField<boolean>(d, ANNOTATIONS_KEYS.markerHidden)\n      }\n      symbol={(d) =>\n        getAnnotationField<ReactNode>(d, ANNOTATIONS_KEYS.markerSymbol)\n      }\n      indicatorsDisplay={(d) =>\n        getAnnotationField<IndicatorsDisplay>(\n          d,\n          ANNOTATIONS_KEYS.markerIndicators,\n        )\n      }\n      priority={(d) =>\n        getAnnotationField<number>(d, ANNOTATIONS_KEYS.markerPriority)\n      }\n    />\n    {config.tooltip?.template && (\n      <XYChartAnnotations.Tooltip hidden={config.tooltip.hidden}>\n        {config.tooltip.template}\n      </XYChartAnnotations.Tooltip>\n    )}\n  </XYChart.Annotations>\n);\n"],
+  "mappings": "AA4CE,SAOE,KAPF;AAtCF,SAAS,SAAS,0BAA0B;AAErC,MAAM,mBAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,gBAAgB;AAClB;AAIA,MAAM,qBAAqB,CAAK,GAAY,QACzC,EAA8B,GAAG;AAS7B,MAAM,sBAAsB,CACjC,MACA,SACA,WAEA;AAAA,EAAC,QAAQ;AAAA,EAAR;AAAA,IACC;AAAA,IACA;AAAA,IACA,YAAY,OAAO;AAAA,IACnB,aAAa,OAAO;AAAA,IACpB,oBAAoB,OAAO;AAAA,IAE3B;AAAA;AAAA,QAAC,mBAAmB;AAAA,QAAnB;AAAA,UACC,iBAAiB,iBAAiB;AAAA,UAClC,eAAe,iBAAiB;AAAA,UAChC,eAAe,iBAAiB;AAAA,UAChC,QAAQ,CAAC,MACP,mBAA4B,GAAG,iBAAiB,WAAW;AAAA,UAE7D,QAAQ,CAAC,MACP,mBAA8B,GAAG,iBAAiB,WAAW;AAAA,UAE/D,mBAAmB,CAAC,MAClB;AAAA,YACE;AAAA,YACA,iBAAiB;AAAA,UACnB;AAAA;AAAA,MAEJ;AAAA,MACA;AAAA,QAAC,mBAAmB;AAAA,QAAnB;AAAA,UACC,eAAe,iBAAiB;AAAA,UAChC,aAAa,iBAAiB;AAAA,UAC9B,iBAAiB,iBAAiB;AAAA,UAClC,eAAe,iBAAiB;AAAA,UAChC,qBAAqB,iBAAiB;AAAA,UACtC,eAAe,iBAAiB;AAAA,UAChC,qBAAqB,iBAAiB;AAAA,UACtC,QAAQ,CAAC,MACP,mBAA4B,GAAG,iBAAiB,YAAY;AAAA,UAE9D,QAAQ,CAAC,MACP,mBAA8B,GAAG,iBAAiB,YAAY;AAAA,UAEhE,mBAAmB,CAAC,MAClB;AAAA,YACE;AAAA,YACA,iBAAiB;AAAA,UACnB;AAAA,UAEF,UAAU,CAAC,MACT,mBAA2B,GAAG,iBAAiB,cAAc;AAAA;AAAA,MAEjE;AAAA,MACC,OAAO,SAAS,YACf,oBAAC,mBAAmB,SAAnB,EAA2B,QAAQ,OAAO,QAAQ,QAChD,iBAAO,QAAQ,UAClB;AAAA;AAAA;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart-adoption/shared/utils/thresholds/reduce-thresholds-to-xy.js

@@ -0,0 +1,40 @@
+import { isStatic, isStaticRange } from "../../../../core/types/type-guards.js";
+function buildPositionToAxisIdMap(axisEntries) {
+  return axisEntries.reduce(
+    (map, { position, axisId }) => {
+      if (!(position in map)) {
+        map[position] = axisId;
+      }
+      return map;
+    },
+    {}
+  );
+}
+function reduceThresholdsToXY(thresholds, axisEntries, xAxisId, mapDynamic) {
+  const positionToAxisId = buildPositionToAxisIdMap(axisEntries);
+  return thresholds.reduce(
+    (result, { data, color, label, strokeOnly, position }) => {
+      const yAxisId = positionToAxisId[position ?? "left"];
+      if (!yAxisId) {
+        return result;
+      }
+      const common = { color, label, strokeOnly, yAxisId };
+      if (isStatic(data)) {
+        result.push({ ...common, data: { y: data.value } });
+      } else if (isStaticRange(data)) {
+        result.push({ ...common, data: { yMin: data.min, yMax: data.max } });
+      } else {
+        const dynamicData = mapDynamic(data);
+        if (dynamicData !== null) {
+          result.push({ ...common, data: dynamicData, xAxisId });
+        }
+      }
+      return result;
+    },
+    []
+  );
+}
+export {
+  reduceThresholdsToXY
+};
+//# sourceMappingURL=reduce-thresholds-to-xy.js.map

package/esm/charts/xy-chart-adoption/shared/utils/thresholds/reduce-thresholds-to-xy.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/xy-chart-adoption/shared/utils/thresholds/reduce-thresholds-to-xy.ts"],
+  "sourcesContent": ["import type {\n  DateThresholdData,\n  NumericalThresholdData,\n} from '../../../../core/types/thresholds.js';\nimport { isStatic, isStaticRange } from '../../../../core/types/type-guards.js';\nimport type {\n  XYChartThresholdIndicatorProps,\n  XYChartThresholdDynamicProps,\n} from '../../../../xy-chart/types/xy-chart-props.js';\n\nexport type AxisEntry = { position: 'left' | 'right'; axisId: string };\n\ninterface ThresholdInput {\n  data: DateThresholdData | NumericalThresholdData;\n  color: string;\n  label?: string;\n  strokeOnly?: boolean;\n  position?: 'left' | 'right';\n}\n\nfunction buildPositionToAxisIdMap(\n  axisEntries: AxisEntry[],\n): Record<string, string> {\n  return axisEntries.reduce<Record<string, string>>(\n    (map, { position, axisId }) => {\n      if (!(position in map)) {\n        map[position] = axisId;\n      }\n      return map;\n    },\n    {},\n  );\n}\n\nexport function reduceThresholdsToXY(\n  thresholds: ThresholdInput[],\n  axisEntries: AxisEntry[],\n  xAxisId: string,\n  mapDynamic: (\n    data: DateThresholdData | NumericalThresholdData,\n  ) => XYChartThresholdDynamicProps['data'] | null,\n): XYChartThresholdIndicatorProps[] {\n  const positionToAxisId = buildPositionToAxisIdMap(axisEntries);\n  return thresholds.reduce<XYChartThresholdIndicatorProps[]>(\n    (result, { data, color, label, strokeOnly, position }) => {\n      const yAxisId = positionToAxisId[position ?? 'left'];\n\n      if (!yAxisId) {\n        return result;\n      }\n\n      const common = { color, label, strokeOnly, yAxisId };\n\n      if (isStatic(data)) {\n        result.push({ ...common, data: { y: data.value } });\n      } else if (isStaticRange(data)) {\n        result.push({ ...common, data: { yMin: data.min, yMax: data.max } });\n      } else {\n        const dynamicData = mapDynamic(data);\n        if (dynamicData !== null) {\n          result.push({ ...common, data: dynamicData, xAxisId });\n        }\n      }\n\n      return result;\n    },\n    [],\n  );\n}\n"],
+  "mappings": "AAIA,SAAS,UAAU,qBAAqB;AAgBxC,SAAS,yBACP,aACwB;AACxB,SAAO,YAAY;AAAA,IACjB,CAAC,KAAK,EAAE,UAAU,OAAO,MAAM;AAC7B,UAAI,EAAE,YAAY,MAAM;AACtB,YAAI,QAAQ,IAAI;AAAA,MAClB;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEO,SAAS,qBACd,YACA,aACA,SACA,YAGkC;AAClC,QAAM,mBAAmB,yBAAyB,WAAW;AAC7D,SAAO,WAAW;AAAA,IAChB,CAAC,QAAQ,EAAE,MAAM,OAAO,OAAO,YAAY,SAAS,MAAM;AACxD,YAAM,UAAU,iBAAiB,YAAY,MAAM;AAEnD,UAAI,CAAC,SAAS;AACZ,eAAO;AAAA,MACT;AAEA,YAAM,SAAS,EAAE,OAAO,OAAO,YAAY,QAAQ;AAEnD,UAAI,SAAS,IAAI,GAAG;AAClB,eAAO,KAAK,EAAE,GAAG,QAAQ,MAAM,EAAE,GAAG,KAAK,MAAM,EAAE,CAAC;AAAA,MACpD,WAAW,cAAc,IAAI,GAAG;AAC9B,eAAO,KAAK,EAAE,GAAG,QAAQ,MAAM,EAAE,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,EAAE,CAAC;AAAA,MACrE,OAAO;AACL,cAAM,cAAc,WAAW,IAAI;AACnC,YAAI,gBAAgB,MAAM;AACxB,iBAAO,KAAK,EAAE,GAAG,QAAQ,MAAM,aAAa,QAAQ,CAAC;AAAA,QACvD;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/esm/charts/xy-chart-adoption/timeseries/TimeseriesToXY.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef } from "react";
+import { useTimeseriesChartConfig } from "./hooks/use-timeseries-chart-config.js";
 import { iterateSlots } from "./iterate-slots.js";
 import {
   mapSelectedSeriesToTimeseries,
@@ -17,6 +18,7 @@ import {
 } from "./types/timeseries.js";
 import { buildBuckets } from "./utils/build-buckets.js";
 import { buildTimeseriesImperativeHandle } from "./utils/build-timeseries-imperative-handle.js";
+import { deriveXYChartPropsFromConfig } from "./utils/derive-xychart-props-from-config.js";
 import { formatCSV } from "./utils/download/format-csv.js";
 import {
   mapXAxisSlot,
@@ -33,6 +35,7 @@ import {
   xAxisId
 } from "./utils/render-series.js";
 import { resolveGapPolicy } from "./utils/resolve-gap-policy.js";
+import { mapTimeseriesToXYThresholds } from "./utils/transformer-thresholds-to-xy.js";
 import { downloadCSV } from "../../../core/utils/download.js";
 import { getChartStatesTemplates } from "../../core/components/chart-states/utils/get-chart-states-template.js";
 import { CSS_DOWNLOAD_FILENAME } from "../../core/constants.js";
@@ -43,7 +46,6 @@ const TimeseriesToXY = forwardRef((props, forwardedRef) => {
   const {
     data = [],
     variant = DEFAULT_VARIANT,
-    valueRepresentation: rootValueRepresentation,
     children,
     loading,
     className,
@@ -54,6 +56,7 @@ const TimeseriesToXY = forwardRef((props, forwardedRef) => {
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     truncationMode,
+    valueRepresentation,
     initialZoom,
     currentZoom,
     onZoomChange,
@@ -62,27 +65,20 @@ const TimeseriesToXY = forwardRef((props, forwardedRef) => {
     gapPolicy,
     pointsDisplay
   } = props;
-  const {
-    line,
-    bar,
-    area,
-    band,
-    shapePriority,
-    disableZoom,
-    disablePan,
-    selectActions,
-    legend,
-    intents,
-    colorRules,
-    xAxis,
-    leftYAxis,
-    rightYAxis,
-    annotations,
-    toolbar,
-    deprecatedToolbar
-  } = iterateSlots(children);
+  const config = useTimeseriesChartConfig(children, {
+    colorPalette,
+    truncationMode,
+    valueRepresentation,
+    gapPolicy,
+    pointsDisplay,
+    initialZoom,
+    currentZoom,
+    onZoomChange,
+    infiniteZoom
+  });
+  const { line, bar, area, band, shapePriority, deprecatedToolbar } = iterateSlots(children);
   const resolvedValueRepresentation = resolveValueRepresentation(
-    rootValueRepresentation,
+    config.valueRepresentation,
     ...line.map((s) => s.valueRepresentation),
     ...area.map((s) => s.valueRepresentation),
     ...bar.map((s) => s.valueRepresentation)
@@ -99,17 +95,30 @@ const TimeseriesToXY = forwardRef((props, forwardedRef) => {
     data,
     variant,
     { line, area, bar, band, shapePriority },
-    pointsDisplay
+    config.pointsDisplay
   );
   const result = transformTimeseriesDataToXYChart(buckets, order);
-  const effectiveGapPolicy = resolveGapPolicy(gapPolicies, gapPolicy);
-  const allColorRules = resolveTimeseriesColorRules(allSeriesData, colorRules);
-  const xAxisConfig = mapXAxisSlot(xAxis);
+  const effectiveGapPolicy = resolveGapPolicy(gapPolicies, config.gapPolicy);
+  const allColorRules = resolveTimeseriesColorRules(
+    allSeriesData,
+    config.colorRules
+  );
+  const xAxisConfig = mapXAxisSlot(config.xAxis);
   const { configuredAxes, renderedUnits } = mapYAxisSlots(
-    leftYAxis,
-    rightYAxis,
+    config.yAxis.left,
+    config.yAxis.right,
     [...result.units]
   );
+  const yAxesConfig = renderedUnits.map((unit, index) => ({
+    unit,
+    axisId: defineAxisId(unit),
+    ...mapYAxisSlotToProps(index, configuredAxes[index])
+  }));
+  const flatThresholds = config.thresholds ? [...config.thresholds.left ?? [], ...config.thresholds.right ?? []] : [];
+  const mappedThresholds = mapTimeseriesToXYThresholds(
+    flatThresholds,
+    yAxesConfig
+  );
   const mappedSeriesActions = seriesActions ? mapSeriesActionsToXY(seriesActions, lineAreaBarData) : void 0;
   const mappedBandActions = seriesActions ? mapBandSeriesActionsToXY(seriesActions, bandData) : void 0;
   const seriesForShape = (shape) => {
@@ -132,11 +141,21 @@ const TimeseriesToXY = forwardRef((props, forwardedRef) => {
         );
     }
   };
+  const {
+    disableZoom,
+    disablePan,
+    toolbarEnabled,
+    toolbarPlacement,
+    toolbarIntents,
+    onZoomChange: effectiveOnZoomChange
+  } = deriveXYChartPropsFromConfig(config, onZoomChange);
+  const selectActions = config.select?.actions;
+  const tooltipVariant = config.tooltip.variant === "single" ? "single" : "shared";
   const xyRef = useRef(null);
   useImperativeHandle(
     forwardedRef,
-    () => buildTimeseriesImperativeHandle(xyRef),
-    []
+    () => buildTimeseriesImperativeHandle(xyRef, config),
+    [config]
   );
   const downloadDataCallback = () => {
     const csvString = formatCSV({
@@ -157,12 +176,19 @@ const TimeseriesToXY = forwardRef((props, forwardedRef) => {
       style,
       width,
       height,
-      colorPalette,
+      colorPalette: config.colorPalette,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      truncationMode,
+      truncationMode: config.truncationMode,
       __downloadDataCallback: downloadDataCallback,
       children: [
+        /* @__PURE__ */ jsx(
+          XYChart.Tooltip,
+          {
+            _variant: tooltipVariant,
+            _seriesDisplayMode: config.tooltip.seriesDisplayMode
+          }
+        ),
         errorState && /* @__PURE__ */ jsx(XYChart.ErrorState, { children: errorState }),
         emptyState && /* @__PURE__ */ jsx(XYChart.EmptyState, { children: emptyState }),
         order.flatMap(seriesForShape),
@@ -192,24 +218,24 @@ const TimeseriesToXY = forwardRef((props, forwardedRef) => {
             label: xAxisConfig.label,
             disableZoom,
             disablePan,
-            initialZoom,
-            currentZoom,
-            onZoomChange,
-            infiniteZoom,
+            initialZoom: config.initialZoom,
+            currentZoom: config.currentZoom,
+            onZoomChange: effectiveOnZoomChange,
+            infiniteZoom: config.infiniteZoom,
             gapPolicy: effectiveGapPolicy
           }
         ),
-        renderedUnits.map((unit, index) => /* @__PURE__ */ jsx(
+        yAxesConfig.map(({ unit, axisId, ...axisProps }) => /* @__PURE__ */ jsx(
           XYChart.YAxis,
           {
-            id: defineAxisId(unit),
+            id: axisId,
             unit,
-            ...mapYAxisSlotToProps(index, configuredAxes[index]),
+            ...axisProps,
             valueRepresentation: resolvedValueRepresentation
           },
-          defineAxisId(unit)
+          axisId
         )),
-        /* @__PURE__ */ jsx(XYChart.Legend, { ...legend }),
+        /* @__PURE__ */ jsx(XYChart.Legend, { ...config.legend }),
         allColorRules.map((rule) => /* @__PURE__ */ jsx(
           XYChart.ColorRule,
           {
@@ -220,18 +246,19 @@ const TimeseriesToXY = forwardRef((props, forwardedRef) => {
         /* @__PURE__ */ jsx(
           XYChart.Toolbar,
           {
-            hidden: toolbar.hidden,
-            placement: toolbar.placement,
-            ...extractBehaviorTrackingProps(toolbar)
+            hidden: !toolbarEnabled,
+            placement: toolbarPlacement,
+            ...extractBehaviorTrackingProps(config.toolbar ?? {})
           }
         ),
         deprecatedToolbar.enabled && /* @__PURE__ */ jsx(XYChart.Toolbar, { placement: deprecatedToolbar.placement }),
-        intents.map((intentProps, index) => /* @__PURE__ */ jsx(XYChart.Intent, { ...intentProps }, index)),
-        annotations && renderXYAnnotations(
-          transformTimeseriesAnnotationsToXY(annotations.tracks),
+        toolbarIntents?.map((intentProps, index) => /* @__PURE__ */ jsx(XYChart.Intent, { ...intentProps }, index)),
+        config.annotations && renderXYAnnotations(
+          transformTimeseriesAnnotationsToXY(config.annotations.tracks),
           xAxisId,
-          annotations
-        )
+          config.annotations
+        ),
+        mappedThresholds.map((threshold, index) => /* @__PURE__ */ jsx(XYChart.ThresholdIndicator, { ...threshold }, index))
       ]
     }
   );