@dynatrace/strato-components 3.4.0 → 3.5.0

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

@@ -2,24 +2,34 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import {
   forwardRef,
   useCallback,
-  useMemo
+  useImperativeHandle,
+  useMemo,
+  useRef
 } from "react";
 import { useHistogramToXYColorRules } from "./hooks/use-histogram-to-xy-color-rules.js";
-import { iterateHistogramSlots } from "./iterate-histogram-slots.js";
+import {
+  ANNOTATIONS_KEYS,
+  transformHistogramAnnotationsToXY
+} from "./transformer-annotations-to-xy.js";
 import { transformHistogramDataToXYChart } from "./transformer-data-to-xy.js";
 import {
   mapSelectedSeriesToHistogram,
   mapSelectionDomainToHistogramDomains
 } from "./transformer-selection-to-histogram.js";
 import { mapHistogramSeriesActionsToXY } from "./transformer-series-actions-to-xy.js";
-import { yAxisConfigMapping } from "./utils/axis-config-mapping.js";
+import { mapHistogramThresholdsToXY } from "./transformer-thresholds-to-xy.js";
 import { buildYAxisProps } from "./utils/axis-props-mapping.js";
+import { buildHistogramImperativeHandle } from "./utils/build-histogram-imperative-handle.js";
+import { buildYAxesConfigFromConfig } from "./utils/build-y-axes-config.js";
 import { defineAxisId } from "./utils/define-axis-id.js";
+import { deriveXYChartPropsFromConfig } from "./utils/derive-xychart-props-from-config.js";
 import { formatCSV } from "./utils/format-csv.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";
-import { XYChart } from "../../xy-chart/XYChartRoot.js";
+import { useHistogramChartConfig } from "../../histogram/hooks/useHistogramChartConfig.js";
+import { XYChart, XYChartAnnotations } from "../../xy-chart/XYChartRoot.js";
+const getAnnotationField = (d, key) => d[key];
 const HistogramToXY = forwardRef((props, forwardedRef) => {
   const {
     data: propsData,
@@ -33,50 +43,74 @@ const HistogramToXY = forwardRef((props, forwardedRef) => {
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     truncationMode,
-    seriesActions
+    valueRepresentation,
+    seriesActions,
+    initialZoom,
+    currentZoom,
+    onZoomChange,
+    infiniteZoom
   } = props;
-  const {
-    yAxis,
-    xAxis,
-    disableZoom,
-    disablePan,
-    legend,
-    selectActions,
-    colorRules,
-    toolbar,
-    deprecatedToolbar,
-    intents
-  } = iterateHistogramSlots(children);
+  const config = useHistogramChartConfig(children, {
+    colorPalette,
+    truncationMode,
+    valueRepresentation,
+    initialZoom,
+    currentZoom,
+    onZoomChange,
+    infiniteZoom
+  });
   const { barSeriesProps, units, seriesColors } = transformHistogramDataToXYChart(propsData);
   const allColorRules = useHistogramToXYColorRules({
-    data: props.data,
+    data: propsData,
     seriesColors,
-    colorRules
+    colorRules: config.colorRules
   });
-  const yAxesConfig = yAxisConfigMapping(yAxis);
   const { emptyState, errorState } = getChartStatesTemplates(children);
   const downloadDataCallback = useCallback(() => {
     const csvString = formatCSV(propsData);
     downloadCSV(csvString, CSS_DOWNLOAD_FILENAME);
   }, [propsData]);
+  const selectActions = config.select?.actions;
   const mappedSeriesActions = useMemo(
     () => seriesActions ? mapHistogramSeriesActionsToXY(seriesActions, propsData) : void 0,
     [seriesActions, propsData]
   );
+  const yAxesConfig = buildYAxesConfigFromConfig(config);
+  const mappedThresholds = useMemo(
+    () => mapHistogramThresholdsToXY(config.thresholds, [...units]),
+    [config.thresholds, units]
+  );
+  const {
+    xAxisConfig,
+    disableZoom,
+    disablePan,
+    toolbarEnabled,
+    toolbarPlacement,
+    toolbarIntents,
+    onZoomChange: effectiveOnZoomChange
+  } = deriveXYChartPropsFromConfig(config, onZoomChange);
+  const xyRef = useRef(null);
+  useImperativeHandle(
+    forwardedRef,
+    () => buildHistogramImperativeHandle(xyRef, config),
+    [config]
+  );
+  const annotations = config.annotations;
+  const xAxisId = "x-axis";
   return /* @__PURE__ */ jsxs(
     XYChart,
     {
       data: [],
-      ref: forwardedRef,
+      ref: xyRef,
       loading,
       className,
       style,
       width,
       height,
-      colorPalette,
+      colorPalette: config.colorPalette,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      truncationMode,
+      truncationMode: config.truncationMode,
       __downloadDataCallback: downloadDataCallback,
       children: [
         errorState && /* @__PURE__ */ jsx(XYChart.ErrorState, { children: errorState }),
@@ -94,12 +128,12 @@ const HistogramToXY = forwardRef((props, forwardedRef) => {
           XYChart.BarSeries,
           {
             data,
-            xAxisId: "x-axis",
+            xAxisId,
             yAxisId: defineAxisId(unit),
             x0Accessor: "x0",
             x1Accessor: "x1",
             y1Accessor: "y1",
-            variant: "stack",
+            variant: config.valueRepresentation === "relative" && propsData.length === 1 ? "single" : "stack",
             seriesIdAccessor: "seriesId",
             nameAccessor: "name",
             actions: mappedSeriesActions
@@ -109,28 +143,31 @@ const HistogramToXY = forwardRef((props, forwardedRef) => {
         /* @__PURE__ */ jsx(
           XYChart.XAxis,
           {
-            id: "x-axis",
-            type: xAxis.scale === "log" ? "log" : "numerical",
+            id: xAxisId,
+            type: xAxisConfig.scale === "log" ? "log" : "numerical",
             position: "bottom",
             disableZoom,
             disablePan,
-            initialZoom: props.initialZoom,
-            currentZoom: props.currentZoom,
-            onZoomChange: props.onZoomChange,
-            infiniteZoom: props.infiniteZoom,
-            ...xAxis
+            initialZoom: config.initialZoom,
+            currentZoom: config.currentZoom,
+            onZoomChange: effectiveOnZoomChange,
+            infiniteZoom: config.infiniteZoom,
+            ...xAxisConfig
           }
         ),
-        [...units].map((unit, index) => {
-          return /* @__PURE__ */ jsx(
-            XYChart.YAxis,
-            {
-              ...buildYAxisProps(index, unit, yAxesConfig)
-            },
-            defineAxisId(unit)
-          );
-        }),
-        /* @__PURE__ */ jsx(XYChart.Legend, { ...legend }),
+        [...units].map((unit, index) => /* @__PURE__ */ jsx(
+          XYChart.YAxis,
+          {
+            ...buildYAxisProps(
+              index,
+              unit,
+              yAxesConfig,
+              config.valueRepresentation
+            )
+          },
+          defineAxisId(unit)
+        )),
+        /* @__PURE__ */ jsx(XYChart.Legend, { ...config.legend }),
         allColorRules.map((rule) => /* @__PURE__ */ jsx(
           XYChart.ColorRule,
           {
@@ -138,9 +175,60 @@ const HistogramToXY = forwardRef((props, forwardedRef) => {
           },
           `${rule.comparator}-${rule.matchValue}-${rule.valueAccessor}`
         )),
-        /* @__PURE__ */ jsx(XYChart.Toolbar, { hidden: toolbar.hidden, placement: toolbar.placement }),
-        deprecatedToolbar.enabled && /* @__PURE__ */ jsx(XYChart.Toolbar, { placement: deprecatedToolbar.placement }),
-        intents?.map((intentProps, index) => /* @__PURE__ */ jsx(XYChart.Intent, { ...intentProps }, index))
+        mappedThresholds.map((threshold) => /* @__PURE__ */ jsx(
+          XYChart.ThresholdIndicator,
+          {
+            ...threshold
+          },
+          `${threshold.yAxisId}-${threshold.color}-${threshold.label ?? ""}`
+        )),
+        /* @__PURE__ */ jsx(XYChart.Toolbar, { hidden: !toolbarEnabled, placement: toolbarPlacement }),
+        toolbarIntents?.map((intentProps, index) => /* @__PURE__ */ jsx(XYChart.Intent, { ...intentProps }, index)),
+        annotations && /* @__PURE__ */ jsxs(
+          XYChart.Annotations,
+          {
+            data: transformHistogramAnnotationsToXY(annotations.tracks),
+            xAxisId,
+            showLabels: annotations.showLabels,
+            fixedTracks: annotations.visibleTracksLimit,
+            annotationsActions: annotations.annotationsActions,
+            children: [
+              /* @__PURE__ */ jsx(
+                XYChartAnnotations.Track,
+                {
+                  trackIdAccessor: ANNOTATIONS_KEYS.trackId,
+                  labelAccessor: ANNOTATIONS_KEYS.trackLabel,
+                  colorAccessor: ANNOTATIONS_KEYS.trackColor,
+                  hidden: (d) => getAnnotationField(d, ANNOTATIONS_KEYS.trackHidden),
+                  symbol: (d) => getAnnotationField(d, ANNOTATIONS_KEYS.trackSymbol),
+                  indicatorsDisplay: (d) => getAnnotationField(
+                    d,
+                    ANNOTATIONS_KEYS.trackIndicators
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                XYChartAnnotations.Marker,
+                {
+                  startAccessor: ANNOTATIONS_KEYS.markerStart,
+                  endAccessor: ANNOTATIONS_KEYS.markerEnd,
+                  trackByAccessor: ANNOTATIONS_KEYS.trackId,
+                  titleAccessor: ANNOTATIONS_KEYS.markerTitle,
+                  descriptionAccessor: ANNOTATIONS_KEYS.markerDescription,
+                  colorAccessor: ANNOTATIONS_KEYS.markerColor,
+                  hidden: (d) => getAnnotationField(d, ANNOTATIONS_KEYS.markerHidden),
+                  symbol: (d) => getAnnotationField(d, ANNOTATIONS_KEYS.markerSymbol),
+                  indicatorsDisplay: (d) => getAnnotationField(
+                    d,
+                    ANNOTATIONS_KEYS.markerIndicators
+                  ),
+                  priority: (d) => getAnnotationField(d, ANNOTATIONS_KEYS.markerPriority)
+                }
+              ),
+              annotations.tooltip?.template && /* @__PURE__ */ jsx(XYChartAnnotations.Tooltip, { hidden: annotations.tooltip.hidden, children: annotations.tooltip.template })
+            ]
+          }
+        )
       ]
     }
   );

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  useMemo,\n} from 'react';\n\nimport { useHistogramToXYColorRules } from './hooks/use-histogram-to-xy-color-rules.js';\nimport { iterateHistogramSlots } from './iterate-histogram-slots.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 { yAxisConfigMapping } from './utils/axis-config-mapping.js';\nimport { buildYAxisProps } from './utils/axis-props-mapping.js';\nimport { defineAxisId } from './utils/define-axis-id.js';\nimport { formatCSV } from './utils/format-csv.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 type { HistogramChartProps } from '../../histogram/types/histogram-props.js';\nimport type { HistogramChartRef } from '../../histogram/types/histogram-ref.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.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    seriesActions,\n  } = props;\n  const {\n    yAxis,\n    xAxis,\n    disableZoom,\n    disablePan,\n    legend,\n    selectActions,\n    colorRules,\n    toolbar,\n    deprecatedToolbar,\n    intents,\n  } = iterateHistogramSlots(children);\n  const { barSeriesProps, units, seriesColors } =\n    transformHistogramDataToXYChart(propsData);\n\n  const allColorRules = useHistogramToXYColorRules({\n    data: props.data,\n    seriesColors,\n    colorRules,\n  });\n\n  const yAxesConfig = yAxisConfigMapping(yAxis);\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 mappedSeriesActions = useMemo(\n    () =>\n      seriesActions\n        ? mapHistogramSeriesActionsToXY(seriesActions, propsData)\n        : undefined,\n    [seriesActions, propsData],\n  );\n  return (\n    <XYChart\n      data={[]}\n      ref={forwardedRef}\n      loading={loading}\n      className={className}\n      style={style}\n      width={width}\n      height={height}\n      colorPalette={colorPalette}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      truncationMode={truncationMode}\n      __downloadDataCallback={downloadDataCallback}\n    >\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=\"x-axis\"\n          yAxisId={defineAxisId(unit)}\n          x0Accessor=\"x0\"\n          x1Accessor=\"x1\"\n          y1Accessor=\"y1\"\n          // Stack is by default to support multiple series at the moment but this should\n          // dinamically set depending on the use case (e.g. if the histogram has multiple series or not, value representation desired, etc.)\n          // TODO: consider this in APPDEV-16407\n          variant=\"stack\"\n          seriesIdAccessor=\"seriesId\"\n          nameAccessor=\"name\"\n          actions={mappedSeriesActions}\n        />\n      ))}\n      <XYChart.XAxis\n        id=\"x-axis\"\n        type={xAxis.scale === 'log' ? 'log' : 'numerical'}\n        position=\"bottom\"\n        disableZoom={disableZoom}\n        disablePan={disablePan}\n        initialZoom={props.initialZoom as [number, number]}\n        currentZoom={props.currentZoom as [number, number]}\n        onZoomChange={props.onZoomChange}\n        infiniteZoom={props.infiniteZoom}\n        {...xAxis}\n      />\n      {[...units].map((unit, index) => {\n        return (\n          <XYChart.YAxis\n            key={defineAxisId(unit)}\n            {...buildYAxisProps(index, unit, yAxesConfig)}\n          />\n        );\n      })}\n      <XYChart.Legend {...legend} />\n      {allColorRules.map((rule) => (\n        <XYChart.ColorRule\n          key={`${rule.comparator}-${rule.matchValue}-${rule.valueAccessor}`}\n          {...rule}\n        />\n      ))}\n      <XYChart.Toolbar hidden={toolbar.hidden} placement={toolbar.placement} />\n      {/* TODO: Remove after deprecating ChartToolbar (APPDEV-15613) */}\n      {deprecatedToolbar.enabled && (\n        <XYChart.Toolbar placement={deprecatedToolbar.placement} />\n      )}\n      {intents?.map((intentProps, index) => (\n        <XYChart.Intent key={index} {...intentProps} />\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  type ReactNode,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useHistogramToXYColorRules } from './hooks/use-histogram-to-xy-color-rules.js';\nimport {\n  ANNOTATIONS_KEYS,\n  transformHistogramAnnotationsToXY,\n} 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 { downloadCSV } from '../../../core/utils/download.js';\nimport type { IndicatorsDisplay } from '../../core/components/annotations/components/indicators/types.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, XYChartAnnotations } from '../../xy-chart/XYChartRoot.js';\n\ntype AnnotationsKey = (typeof ANNOTATIONS_KEYS)[keyof typeof ANNOTATIONS_KEYS];\nconst getAnnotationField = <T,>(d: unknown, key: AnnotationsKey): T =>\n  (d as Record<string, unknown>)[key] as T;\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 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\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    >\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        <XYChart.Annotations\n          data={transformHistogramAnnotationsToXY(annotations.tracks)}\n          xAxisId={xAxisId}\n          showLabels={annotations.showLabels}\n          fixedTracks={annotations.visibleTracksLimit}\n          annotationsActions={annotations.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          {annotations.tooltip?.template && (\n            <XYChartAnnotations.Tooltip hidden={annotations.tooltip.hidden}>\n              {annotations.tooltip.template}\n            </XYChartAnnotations.Tooltip>\n          )}\n        </XYChart.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/iterate-histogram-slots.js

@@ -1,15 +1,50 @@
 import { Children } from "react";
+import { isElement } from "react-is";
 import { Intent } from "../../../core/slots/Intent/Intent.js";
 import { isSlot } from "../../../core/utils/is-slot.js";
+import { populateMissingMarkerProps } from "../../core/components/annotations/utils/populate-missing-marker-props.js";
+import { populateMissingTrackProps } from "../../core/components/annotations/utils/populate-missing-track-props.js";
 import { ColorRule, isValidColorRule } from "../../core/slots/ColorRule.js";
 import { ChartToolbar } from "../../core/slots/toolbar/ChartToolbar.js";
+import { Annotations } from "../../histogram/slots/annotations/Annotations.js";
+import { Marker } from "../../histogram/slots/annotations/Marker.js";
+import { AnnotationsTooltip } from "../../histogram/slots/annotations/Tooltip.js";
+import { Track } from "../../histogram/slots/annotations/Track.js";
 import { Legend } from "../../histogram/slots/Legend.js";
 import { Pan } from "../../histogram/slots/Pan.js";
 import { Select } from "../../histogram/slots/Select.js";
+import {
+  ThresholdIndicator
+} from "../../histogram/slots/ThresholdIndicator.js";
 import { Toolbar } from "../../histogram/slots/Toolbar.js";
 import { XAxis } from "../../histogram/slots/XAxis.js";
 import { YAxis } from "../../histogram/slots/YAxis.js";
 import { Zoom } from "../../histogram/slots/Zoom.js";
+const iterateAnnotationsChildren = (children) => {
+  const tracks = [];
+  let tooltip;
+  Children.forEach(children, (child) => {
+    if (isSlot(child, Track)) {
+      const { children: trackChildren, ...trackProps } = child.props;
+      const currentTrack = populateMissingTrackProps({
+        ...trackProps,
+        markers: []
+      });
+      Children.forEach(trackChildren, (markerChild) => {
+        if (isElement(markerChild) && isSlot(markerChild, Marker)) {
+          currentTrack.markers.push(
+            populateMissingMarkerProps(markerChild.props, trackProps)
+          );
+        }
+      });
+      tracks.push(currentTrack);
+    } else if (isSlot(child, AnnotationsTooltip)) {
+      const { children: tooltipChildren, hidden } = child.props;
+      tooltip = { template: tooltipChildren, hidden: hidden ?? false };
+    }
+  });
+  return { tracks, tooltip };
+};
 const iterateHistogramSlots = (children) => {
   let disableZoom = false;
   let disablePan = false;
@@ -17,10 +52,12 @@ const iterateHistogramSlots = (children) => {
   let selectActions;
   let intents;
   const colorRules = [];
+  const thresholds = [];
   const yAxis = [];
   let xAxis = {};
   let toolbar = {};
   let deprecatedToolbar = {};
+  let annotations;
   Children.forEach(children, (child) => {
     if (isSlot(child, Zoom)) {
       disableZoom = child.props.disabled === true;
@@ -38,10 +75,8 @@ const iterateHistogramSlots = (children) => {
       };
     } else if (isSlot(child, Select)) {
       selectActions = child.props.actions;
-    } else if (isSlot(child, ColorRule)) {
-      if (isValidColorRule(child.props)) {
-        colorRules.push(child.props);
-      }
+    } else if (isSlot(child, ColorRule) && isValidColorRule(child.props)) {
+      colorRules.push(child.props);
     } else if (isSlot(child, Intent)) {
       intents = intents ? [...intents, child.props] : [child.props];
     } else if (isSlot(child, Toolbar)) {
@@ -51,6 +86,23 @@ const iterateHistogramSlots = (children) => {
         enabled: true,
         ...child.props
       };
+    } else if (isSlot(child, ThresholdIndicator)) {
+      thresholds.push(child.props);
+    } else if (isSlot(child, Annotations)) {
+      const {
+        children: annotationsChildren,
+        showLabels,
+        visibleTracksLimit,
+        annotationsActions
+      } = child.props;
+      const { tracks, tooltip } = iterateAnnotationsChildren(annotationsChildren);
+      annotations = {
+        tracks,
+        tooltip,
+        showLabels,
+        visibleTracksLimit,
+        annotationsActions
+      };
     }
   });
   const interactionSlots = {
@@ -60,6 +112,7 @@ const iterateHistogramSlots = (children) => {
     yAxis,
     xAxis,
     colorRules,
+    thresholds,
     toolbar,
     deprecatedToolbar
   };
@@ -69,6 +122,9 @@ const iterateHistogramSlots = (children) => {
   if (intents) {
     interactionSlots.intents = intents;
   }
+  if (annotations) {
+    interactionSlots.annotations = annotations;
+  }
   return interactionSlots;
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart-adoption/histogram/iterate-histogram-slots.ts"],
-  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport type { HistogramSlots } from './types/slots.js';\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport type { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { ColorRule, isValidColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartToolbar } from '../../core/slots/toolbar/ChartToolbar.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport { Legend } from '../../histogram/slots/Legend.js';\nimport { Pan } from '../../histogram/slots/Pan.js';\nimport type { SelectProps } from '../../histogram/slots/Select.js';\nimport { Select } from '../../histogram/slots/Select.js';\nimport { Toolbar } from '../../histogram/slots/Toolbar.js';\nimport { XAxis } from '../../histogram/slots/XAxis.js';\nimport { YAxis } from '../../histogram/slots/YAxis.js';\nimport { Zoom } from '../../histogram/slots/Zoom.js';\nimport {\n  HistogramChartToolbarProps,\n  type HistogramChartXAxisProps,\n  type HistogramChartYAxisProps,\n} from '../../histogram/types/histogram-props.js';\nimport { HistogramToolbarSlotProps } from '../../histogram/types/toolbar.js';\n\nexport const iterateHistogramSlots = (children: ReactNode): HistogramSlots => {\n  let disableZoom = false;\n  let disablePan = false;\n  let legend: LegendProps = {};\n  let selectActions: SelectProps['actions'];\n  let intents: IntentProps[] | undefined;\n  const colorRules: ColorRuleProps[] = [];\n  const yAxis: HistogramChartYAxisProps[] = [];\n  let xAxis: HistogramChartXAxisProps = {};\n  let toolbar: HistogramToolbarSlotProps = {};\n  // Config for the old API Toolbar to be removed with APPDEV-15614\n  let deprecatedToolbar: HistogramChartToolbarProps = {};\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Zoom)) {\n      disableZoom = child.props.disabled === true;\n    } else if (isSlot(child, Pan)) {\n      disablePan = child.props.disabled === true;\n    } else if (isSlot(child, Legend)) {\n      legend = { ...child.props };\n    } else if (isSlot(child, YAxis)) {\n      yAxis.push({\n        ...child.props,\n      });\n    } else if (isSlot(child, XAxis)) {\n      xAxis = {\n        ...child.props,\n      };\n    } else if (isSlot(child, Select)) {\n      selectActions = child.props.actions;\n    } else if (isSlot(child, ColorRule)) {\n      if (isValidColorRule(child.props)) {\n        colorRules.push(child.props);\n      }\n    } else if (isSlot(child, Intent)) {\n      intents = intents ? [...intents, child.props] : [child.props];\n    } else if (isSlot(child, Toolbar)) {\n      toolbar = child.props;\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n    } else if (isSlot(child, ChartToolbar)) {\n      // TODO: Remove deprecated component support (APPDEV-15613)\n      deprecatedToolbar = {\n        enabled: true,\n        ...child.props,\n      };\n    }\n  });\n\n  const interactionSlots: HistogramSlots = {\n    disableZoom,\n    disablePan,\n    legend,\n    yAxis,\n    xAxis,\n    colorRules,\n    toolbar,\n    deprecatedToolbar,\n  };\n\n  if (selectActions) {\n    interactionSlots.selectActions = selectActions;\n  }\n\n  if (intents) {\n    interactionSlots.intents = intents;\n  }\n\n  return interactionSlots;\n};\n"],
-  "mappings": "AAAA,SAAS,gBAAgC;AAGzC,SAAS,cAAc;AAEvB,SAAS,cAAc;AACvB,SAAS,WAAW,wBAAwB;AAC5C,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AACvB,SAAS,WAAW;AAEpB,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,YAAY;AAQd,MAAM,wBAAwB,CAAC,aAAwC;AAC5E,MAAI,cAAc;AAClB,MAAI,aAAa;AACjB,MAAI,SAAsB,CAAC;AAC3B,MAAI;AACJ,MAAI;AACJ,QAAM,aAA+B,CAAC;AACtC,QAAM,QAAoC,CAAC;AAC3C,MAAI,QAAkC,CAAC;AACvC,MAAI,UAAqC,CAAC;AAE1C,MAAI,oBAAgD,CAAC;AAErD,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,IAAI,GAAG;AACvB,oBAAc,MAAM,MAAM,aAAa;AAAA,IACzC,WAAW,OAAO,OAAO,GAAG,GAAG;AAC7B,mBAAa,MAAM,MAAM,aAAa;AAAA,IACxC,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,eAAS,EAAE,GAAG,MAAM,MAAM;AAAA,IAC5B,WAAW,OAAO,OAAO,KAAK,GAAG;AAC/B,YAAM,KAAK;AAAA,QACT,GAAG,MAAM;AAAA,MACX,CAAC;AAAA,IACH,WAAW,OAAO,OAAO,KAAK,GAAG;AAC/B,cAAQ;AAAA,QACN,GAAG,MAAM;AAAA,MACX;AAAA,IACF,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,sBAAgB,MAAM,MAAM;AAAA,IAC9B,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,UAAI,iBAAiB,MAAM,KAAK,GAAG;AACjC,mBAAW,KAAK,MAAM,KAAK;AAAA,MAC7B;AAAA,IACF,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,gBAAU,UAAU,CAAC,GAAG,SAAS,MAAM,KAAK,IAAI,CAAC,MAAM,KAAK;AAAA,IAC9D,WAAW,OAAO,OAAO,OAAO,GAAG;AACjC,gBAAU,MAAM;AAAA,IAElB,WAAW,OAAO,OAAO,YAAY,GAAG;AAEtC,0BAAoB;AAAA,QAClB,SAAS;AAAA,QACT,GAAG,MAAM;AAAA,MACX;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,mBAAmC;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,eAAe;AACjB,qBAAiB,gBAAgB;AAAA,EACnC;AAEA,MAAI,SAAS;AACX,qBAAiB,UAAU;AAAA,EAC7B;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { Children, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport type {\n  HistogramAnnotationsSlots,\n  HistogramSlots,\n} from './types/slots.js';\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport type { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport type { AnnotationsTooltipConfig } from '../../core/components/annotations/components/tooltip/types/annotations-tooltip-props.js';\nimport type { AnnotationsTrackConfig } from '../../core/components/annotations/types/annotations-track-props.js';\nimport { populateMissingMarkerProps } from '../../core/components/annotations/utils/populate-missing-marker-props.js';\nimport { populateMissingTrackProps } from '../../core/components/annotations/utils/populate-missing-track-props.js';\nimport { ColorRule, isValidColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartToolbar } from '../../core/slots/toolbar/ChartToolbar.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport { Annotations } from '../../histogram/slots/annotations/Annotations.js';\nimport { Marker } from '../../histogram/slots/annotations/Marker.js';\nimport { AnnotationsTooltip } from '../../histogram/slots/annotations/Tooltip.js';\nimport { Track } from '../../histogram/slots/annotations/Track.js';\nimport { Legend } from '../../histogram/slots/Legend.js';\nimport { Pan } from '../../histogram/slots/Pan.js';\nimport type { SelectProps } from '../../histogram/slots/Select.js';\nimport { Select } from '../../histogram/slots/Select.js';\nimport {\n  ThresholdIndicator,\n  type HistogramThresholdIndicatorProps,\n} from '../../histogram/slots/ThresholdIndicator.js';\nimport { Toolbar } from '../../histogram/slots/Toolbar.js';\nimport { XAxis } from '../../histogram/slots/XAxis.js';\nimport { YAxis } from '../../histogram/slots/YAxis.js';\nimport { Zoom } from '../../histogram/slots/Zoom.js';\nimport {\n  HistogramChartToolbarProps,\n  type HistogramChartXAxisProps,\n  type HistogramChartYAxisProps,\n} from '../../histogram/types/histogram-props.js';\nimport { HistogramToolbarSlotProps } from '../../histogram/types/toolbar.js';\n\nconst iterateAnnotationsChildren = (\n  children: ReactNode,\n): {\n  tracks: AnnotationsTrackConfig[];\n  tooltip: AnnotationsTooltipConfig | undefined;\n} => {\n  const tracks: AnnotationsTrackConfig[] = [];\n  let tooltip: AnnotationsTooltipConfig | undefined;\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Track)) {\n      const { children: trackChildren, ...trackProps } = child.props;\n      const currentTrack: AnnotationsTrackConfig = populateMissingTrackProps({\n        ...trackProps,\n        markers: [],\n      });\n\n      Children.forEach(trackChildren, (markerChild) => {\n        if (isElement(markerChild) && isSlot(markerChild, Marker)) {\n          currentTrack.markers.push(\n            populateMissingMarkerProps(markerChild.props, trackProps),\n          );\n        }\n      });\n\n      tracks.push(currentTrack);\n    } else if (isSlot(child, AnnotationsTooltip)) {\n      const { children: tooltipChildren, hidden } = child.props;\n      tooltip = { template: tooltipChildren, hidden: hidden ?? false };\n    }\n  });\n\n  return { tracks, tooltip };\n};\n\nexport const iterateHistogramSlots = (children: ReactNode): HistogramSlots => {\n  let disableZoom = false;\n  let disablePan = false;\n  let legend: LegendProps = {};\n  let selectActions: SelectProps['actions'];\n  let intents: IntentProps[] | undefined;\n  const colorRules: ColorRuleProps[] = [];\n  const thresholds: HistogramThresholdIndicatorProps[] = [];\n  const yAxis: HistogramChartYAxisProps[] = [];\n  let xAxis: HistogramChartXAxisProps = {};\n  let toolbar: HistogramToolbarSlotProps = {};\n  // Config for the old API Toolbar to be removed with APPDEV-15614\n  let deprecatedToolbar: HistogramChartToolbarProps = {};\n  let annotations: HistogramAnnotationsSlots | undefined;\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Zoom)) {\n      disableZoom = child.props.disabled === true;\n    } else if (isSlot(child, Pan)) {\n      disablePan = child.props.disabled === true;\n    } else if (isSlot(child, Legend)) {\n      legend = { ...child.props };\n    } else if (isSlot(child, YAxis)) {\n      yAxis.push({\n        ...child.props,\n      });\n    } else if (isSlot(child, XAxis)) {\n      xAxis = {\n        ...child.props,\n      };\n    } else if (isSlot(child, Select)) {\n      selectActions = child.props.actions;\n    } else if (isSlot(child, ColorRule) && isValidColorRule(child.props)) {\n      colorRules.push(child.props);\n    } else if (isSlot(child, Intent)) {\n      intents = intents ? [...intents, child.props] : [child.props];\n    } else if (isSlot(child, Toolbar)) {\n      toolbar = child.props;\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n    } else if (isSlot(child, ChartToolbar)) {\n      // TODO: Remove deprecated component support (APPDEV-15613)\n      deprecatedToolbar = {\n        enabled: true,\n        ...child.props,\n      };\n    } else if (isSlot(child, ThresholdIndicator)) {\n      thresholds.push(child.props);\n    } else if (isSlot(child, Annotations)) {\n      const {\n        children: annotationsChildren,\n        showLabels,\n        visibleTracksLimit,\n        annotationsActions,\n      } = child.props;\n      const { tracks, tooltip } =\n        iterateAnnotationsChildren(annotationsChildren);\n      annotations = {\n        tracks,\n        tooltip,\n        showLabels,\n        visibleTracksLimit,\n        annotationsActions,\n      };\n    }\n  });\n\n  const interactionSlots: HistogramSlots = {\n    disableZoom,\n    disablePan,\n    legend,\n    yAxis,\n    xAxis,\n    colorRules,\n    thresholds,\n    toolbar,\n    deprecatedToolbar,\n  };\n\n  if (selectActions) {\n    interactionSlots.selectActions = selectActions;\n  }\n\n  if (intents) {\n    interactionSlots.intents = intents;\n  }\n\n  if (annotations) {\n    interactionSlots.annotations = annotations;\n  }\n\n  return interactionSlots;\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -0,0 +1,50 @@
+const ANNOTATIONS_KEYS = {
+  trackId: "__annotationsTrackId",
+  trackLabel: "__annotationsTrackLabel",
+  trackColor: "__annotationsTrackColor",
+  trackHidden: "__annotationsTrackHidden",
+  trackSymbol: "__annotationsTrackSymbol",
+  trackIndicators: "__annotationsTrackIndicators",
+  markerStart: "__annotationsMarkerStart",
+  markerEnd: "__annotationsMarkerEnd",
+  markerTitle: "__annotationsMarkerTitle",
+  markerDescription: "__annotationsMarkerDescription",
+  markerColor: "__annotationsMarkerColor",
+  markerHidden: "__annotationsMarkerHidden",
+  markerSymbol: "__annotationsMarkerSymbol",
+  markerIndicators: "__annotationsMarkerIndicators",
+  markerPriority: "__annotationsMarkerPriority"
+};
+const transformHistogramAnnotationsToXY = (tracks) => {
+  const data = [];
+  tracks.forEach((track, trackIndex) => {
+    const histogramTrack = track;
+    const trackId = `track-${trackIndex}`;
+    track.markers.forEach((marker) => {
+      const histogramMarker = marker;
+      data.push({
+        [ANNOTATIONS_KEYS.trackId]: trackId,
+        [ANNOTATIONS_KEYS.trackLabel]: histogramTrack.label,
+        [ANNOTATIONS_KEYS.trackColor]: histogramTrack.color,
+        [ANNOTATIONS_KEYS.trackHidden]: histogramTrack.hidden,
+        [ANNOTATIONS_KEYS.trackSymbol]: histogramTrack.symbol,
+        [ANNOTATIONS_KEYS.trackIndicators]: histogramTrack.indicatorsDisplay,
+        [ANNOTATIONS_KEYS.markerStart]: histogramMarker.start,
+        [ANNOTATIONS_KEYS.markerEnd]: histogramMarker.end,
+        [ANNOTATIONS_KEYS.markerTitle]: histogramMarker.title,
+        [ANNOTATIONS_KEYS.markerDescription]: histogramMarker.description,
+        [ANNOTATIONS_KEYS.markerColor]: histogramMarker.color,
+        [ANNOTATIONS_KEYS.markerHidden]: histogramMarker.hidden,
+        [ANNOTATIONS_KEYS.markerSymbol]: histogramMarker.symbol,
+        [ANNOTATIONS_KEYS.markerIndicators]: histogramMarker.indicatorsDisplay,
+        [ANNOTATIONS_KEYS.markerPriority]: histogramMarker.priority
+      });
+    });
+  });
+  return data;
+};
+export {
+  ANNOTATIONS_KEYS,
+  transformHistogramAnnotationsToXY
+};
+//# sourceMappingURL=transformer-annotations-to-xy.js.map

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

@@ -0,0 +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';\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\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": "AAOO,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;AAEO,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;",
+  "names": []
+}

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

@@ -1,32 +1,31 @@
 function transformHistogramDataToXYChart(data) {
   const seriesColors = [];
   const units = /* @__PURE__ */ new Set();
-  const barSeriesProps = [];
+  const unitToData = /* @__PURE__ */ new Map();
+  const unitToSeriesCount = /* @__PURE__ */ new Map();
   data.forEach((series, index) => {
-    const xyData = [];
     const { bins, name, color, unit, ...extraSeriesProps } = series;
     if (color) {
       seriesColors.push({ name, color });
     }
-    bins.forEach((bin) => {
-      const datapoint = {
-        ...extraSeriesProps,
-        x0: bin.from,
-        x1: bin.to,
-        y1: bin.value,
-        name,
-        seriesId: index.toString()
-      };
-      xyData.push(datapoint);
-    });
-    barSeriesProps.push({
-      data: xyData,
-      unit
-    });
+    const binData = bins.map((bin) => ({
+      ...extraSeriesProps,
+      x0: bin.from,
+      x1: bin.to,
+      y1: bin.value,
+      name,
+      seriesId: index.toString()
+    }));
+    unitToData.set(unit, [...unitToData.get(unit) ?? [], ...binData]);
+    unitToSeriesCount.set(unit, (unitToSeriesCount.get(unit) ?? 0) + 1);
     units.add(unit);
   });
   return {
-    barSeriesProps,
+    barSeriesProps: Array.from(unitToData, ([unit, data2]) => ({
+      unit,
+      data: data2,
+      seriesCount: unitToSeriesCount.get(unit) ?? 1
+    })),
     units,
     seriesColors
   };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart-adoption/histogram/transformer-data-to-xy.ts"],
-  "sourcesContent": ["import type { ChartUnit } from '../../core/types/chart-unit.js';\nimport type { HistogramSeries } from '../../histogram/types/histogram.js';\nimport type { XYChartData } from '../../xy-chart/types/xy-chart.js';\nexport interface SeriesColor {\n  name: string;\n  color: string;\n}\ninterface TransformHistogramDataResult {\n  barSeriesProps: BarSeriesProps[];\n  units: Set<ChartUnit>;\n  seriesColors: SeriesColor[];\n}\n\ntype BarSeriesProps = {\n  data: XYChartData[];\n  unit: ChartUnit;\n};\n\nexport function transformHistogramDataToXYChart(\n  data: HistogramSeries[],\n): TransformHistogramDataResult {\n  const seriesColors: SeriesColor[] = [];\n  const units: Set<ChartUnit> = new Set();\n\n  const barSeriesProps: BarSeriesProps[] = [];\n\n  data.forEach((series, index) => {\n    const xyData: XYChartData[] = [];\n    const { bins, name, color, unit, ...extraSeriesProps } =\n      series as HistogramSeries & Record<string, unknown>;\n\n    if (color) {\n      seriesColors.push({ name, color });\n    }\n\n    bins.forEach((bin) => {\n      const datapoint: XYChartData = {\n        ...extraSeriesProps,\n        x0: bin.from,\n        x1: bin.to,\n        y1: bin.value,\n        name,\n        seriesId: index.toString(),\n      };\n\n      xyData.push(datapoint);\n    });\n\n    barSeriesProps.push({\n      data: xyData,\n      unit,\n    });\n\n    units.add(unit);\n  });\n  return {\n    barSeriesProps,\n    units,\n    seriesColors,\n  };\n}\n"],
-  "mappings": "AAkBO,SAAS,gCACd,MAC8B;AAC9B,QAAM,eAA8B,CAAC;AACrC,QAAM,QAAwB,oBAAI,IAAI;AAEtC,QAAM,iBAAmC,CAAC;AAE1C,OAAK,QAAQ,CAAC,QAAQ,UAAU;AAC9B,UAAM,SAAwB,CAAC;AAC/B,UAAM,EAAE,MAAM,MAAM,OAAO,MAAM,GAAG,iBAAiB,IACnD;AAEF,QAAI,OAAO;AACT,mBAAa,KAAK,EAAE,MAAM,MAAM,CAAC;AAAA,IACnC;AAEA,SAAK,QAAQ,CAAC,QAAQ;AACpB,YAAM,YAAyB;AAAA,QAC7B,GAAG;AAAA,QACH,IAAI,IAAI;AAAA,QACR,IAAI,IAAI;AAAA,QACR,IAAI,IAAI;AAAA,QACR;AAAA,QACA,UAAU,MAAM,SAAS;AAAA,MAC3B;AAEA,aAAO,KAAK,SAAS;AAAA,IACvB,CAAC;AAED,mBAAe,KAAK;AAAA,MAClB,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAED,UAAM,IAAI,IAAI;AAAA,EAChB,CAAC;AACD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": []
+  "sourcesContent": ["import type { ChartUnit } from '../../core/types/chart-unit.js';\nimport type { HistogramSeries } from '../../histogram/types/histogram.js';\nimport type { XYChartData } from '../../xy-chart/types/xy-chart.js';\n\nexport interface SeriesColor {\n  name: string;\n  color: string;\n}\ninterface TransformHistogramDataResult {\n  barSeriesProps: BarSeriesProps[];\n  units: Set<ChartUnit>;\n  seriesColors: SeriesColor[];\n}\n\ntype BarSeriesProps = {\n  data: XYChartData[];\n  unit: ChartUnit;\n  seriesCount: number;\n};\n\nexport function transformHistogramDataToXYChart(\n  data: HistogramSeries[],\n): TransformHistogramDataResult {\n  const seriesColors: SeriesColor[] = [];\n  const units: Set<ChartUnit> = new Set();\n  const unitToData = new Map<ChartUnit, XYChartData[]>();\n  const unitToSeriesCount = new Map<ChartUnit, number>();\n\n  data.forEach((series, index) => {\n    const { bins, name, color, unit, ...extraSeriesProps } =\n      series as HistogramSeries & Record<string, unknown>;\n\n    if (color) {\n      seriesColors.push({ name, color });\n    }\n\n    const binData = bins.map((bin) => ({\n      ...extraSeriesProps,\n      x0: bin.from,\n      x1: bin.to,\n      y1: bin.value,\n      name,\n      seriesId: index.toString(),\n    }));\n\n    unitToData.set(unit, [...(unitToData.get(unit) ?? []), ...binData]);\n    unitToSeriesCount.set(unit, (unitToSeriesCount.get(unit) ?? 0) + 1);\n    units.add(unit);\n  });\n\n  return {\n    barSeriesProps: Array.from(unitToData, ([unit, data]) => ({\n      unit,\n      data,\n      seriesCount: unitToSeriesCount.get(unit) ?? 1,\n    })),\n    units,\n    seriesColors,\n  };\n}\n"],
+  "mappings": "AAoBO,SAAS,gCACd,MAC8B;AAC9B,QAAM,eAA8B,CAAC;AACrC,QAAM,QAAwB,oBAAI,IAAI;AACtC,QAAM,aAAa,oBAAI,IAA8B;AACrD,QAAM,oBAAoB,oBAAI,IAAuB;AAErD,OAAK,QAAQ,CAAC,QAAQ,UAAU;AAC9B,UAAM,EAAE,MAAM,MAAM,OAAO,MAAM,GAAG,iBAAiB,IACnD;AAEF,QAAI,OAAO;AACT,mBAAa,KAAK,EAAE,MAAM,MAAM,CAAC;AAAA,IACnC;AAEA,UAAM,UAAU,KAAK,IAAI,CAAC,SAAS;AAAA,MACjC,GAAG;AAAA,MACH,IAAI,IAAI;AAAA,MACR,IAAI,IAAI;AAAA,MACR,IAAI,IAAI;AAAA,MACR;AAAA,MACA,UAAU,MAAM,SAAS;AAAA,IAC3B,EAAE;AAEF,eAAW,IAAI,MAAM,CAAC,GAAI,WAAW,IAAI,IAAI,KAAK,CAAC,GAAI,GAAG,OAAO,CAAC;AAClE,sBAAkB,IAAI,OAAO,kBAAkB,IAAI,IAAI,KAAK,KAAK,CAAC;AAClE,UAAM,IAAI,IAAI;AAAA,EAChB,CAAC;AAED,SAAO;AAAA,IACL,gBAAgB,MAAM,KAAK,YAAY,CAAC,CAAC,MAAMA,KAAI,OAAO;AAAA,MACxD;AAAA,MACA,MAAAA;AAAA,MACA,aAAa,kBAAkB,IAAI,IAAI,KAAK;AAAA,IAC9C,EAAE;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": ["data"]
 }