@dynatrace/strato-components 3.4.1 → 3.5.2

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

@@ -23,18 +23,23 @@ module.exports = __toCommonJS(HistogramToXY_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_use_histogram_to_xy_color_rules = require("./hooks/use-histogram-to-xy-color-rules.js");
-var import_iterate_histogram_slots = require("./iterate-histogram-slots.js");
+var import_transformer_annotations_to_xy = require("./transformer-annotations-to-xy.js");
 var import_transformer_data_to_xy = require("./transformer-data-to-xy.js");
 var import_transformer_selection_to_histogram = require("./transformer-selection-to-histogram.js");
 var import_transformer_series_actions_to_xy = require("./transformer-series-actions-to-xy.js");
-var import_axis_config_mapping = require("./utils/axis-config-mapping.js");
+var import_transformer_thresholds_to_xy = require("./transformer-thresholds-to-xy.js");
 var import_axis_props_mapping = require("./utils/axis-props-mapping.js");
+var import_build_histogram_imperative_handle = require("./utils/build-histogram-imperative-handle.js");
+var import_build_y_axes_config = require("./utils/build-y-axes-config.js");
 var import_define_axis_id = require("./utils/define-axis-id.js");
+var import_derive_xychart_props_from_config = require("./utils/derive-xychart-props-from-config.js");
 var import_format_csv = require("./utils/format-csv.js");
 var import_download = require("../../../core/utils/download.js");
 var import_get_chart_states_template = require("../../core/components/chart-states/utils/get-chart-states-template.js");
 var import_constants = require("../../core/constants.js");
+var import_useHistogramChartConfig = require("../../histogram/hooks/useHistogramChartConfig.js");
 var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
+const getAnnotationField = (d, key) => d[key];
 const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     data: propsData,
@@ -48,50 +53,74 @@ const HistogramToXY = (0, import_react.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
-  } = (0, import_iterate_histogram_slots.iterateHistogramSlots)(children);
+  const config = (0, import_useHistogramChartConfig.useHistogramChartConfig)(children, {
+    colorPalette,
+    truncationMode,
+    valueRepresentation,
+    initialZoom,
+    currentZoom,
+    onZoomChange,
+    infiniteZoom
+  });
   const { barSeriesProps, units, seriesColors } = (0, import_transformer_data_to_xy.transformHistogramDataToXYChart)(propsData);
   const allColorRules = (0, import_use_histogram_to_xy_color_rules.useHistogramToXYColorRules)({
-    data: props.data,
+    data: propsData,
     seriesColors,
-    colorRules
+    colorRules: config.colorRules
   });
-  const yAxesConfig = (0, import_axis_config_mapping.yAxisConfigMapping)(yAxis);
   const { emptyState, errorState } = (0, import_get_chart_states_template.getChartStatesTemplates)(children);
   const downloadDataCallback = (0, import_react.useCallback)(() => {
     const csvString = (0, import_format_csv.formatCSV)(propsData);
     (0, import_download.downloadCSV)(csvString, import_constants.CSS_DOWNLOAD_FILENAME);
   }, [propsData]);
+  const selectActions = config.select?.actions;
   const mappedSeriesActions = (0, import_react.useMemo)(
     () => seriesActions ? (0, import_transformer_series_actions_to_xy.mapHistogramSeriesActionsToXY)(seriesActions, propsData) : void 0,
     [seriesActions, propsData]
   );
+  const yAxesConfig = (0, import_build_y_axes_config.buildYAxesConfigFromConfig)(config);
+  const mappedThresholds = (0, import_react.useMemo)(
+    () => (0, import_transformer_thresholds_to_xy.mapHistogramThresholdsToXY)(config.thresholds, [...units]),
+    [config.thresholds, units]
+  );
+  const {
+    xAxisConfig,
+    disableZoom,
+    disablePan,
+    toolbarEnabled,
+    toolbarPlacement,
+    toolbarIntents,
+    onZoomChange: effectiveOnZoomChange
+  } = (0, import_derive_xychart_props_from_config.deriveXYChartPropsFromConfig)(config, onZoomChange);
+  const xyRef = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(
+    forwardedRef,
+    () => (0, import_build_histogram_imperative_handle.buildHistogramImperativeHandle)(xyRef, config),
+    [config]
+  );
+  const annotations = config.annotations;
+  const xAxisId = "x-axis";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_XYChartRoot.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__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.ErrorState, { children: errorState }),
@@ -109,12 +138,12 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
           import_XYChartRoot.XYChart.BarSeries,
           {
             data,
-            xAxisId: "x-axis",
+            xAxisId,
             yAxisId: (0, import_define_axis_id.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
@@ -124,28 +153,31 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_XYChartRoot.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__ */ (0, import_jsx_runtime.jsx)(
-            import_XYChartRoot.XYChart.YAxis,
-            {
-              ...(0, import_axis_props_mapping.buildYAxisProps)(index, unit, yAxesConfig)
-            },
-            (0, import_define_axis_id.defineAxisId)(unit)
-          );
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { ...legend }),
+        [...units].map((unit, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.YAxis,
+          {
+            ...(0, import_axis_props_mapping.buildYAxisProps)(
+              index,
+              unit,
+              yAxesConfig,
+              config.valueRepresentation
+            )
+          },
+          (0, import_define_axis_id.defineAxisId)(unit)
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { ...config.legend }),
         allColorRules.map((rule) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_XYChartRoot.XYChart.ColorRule,
           {
@@ -153,9 +185,60 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
           },
           `${rule.comparator}-${rule.matchValue}-${rule.valueAccessor}`
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { hidden: toolbar.hidden, placement: toolbar.placement }),
-        deprecatedToolbar.enabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { placement: deprecatedToolbar.placement }),
-        intents?.map((intentProps, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Intent, { ...intentProps }, index))
+        mappedThresholds.map((threshold) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.ThresholdIndicator,
+          {
+            ...threshold
+          },
+          `${threshold.yAxisId}-${threshold.color}-${threshold.label ?? ""}`
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { hidden: !toolbarEnabled, placement: toolbarPlacement }),
+        toolbarIntents?.map((intentProps, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Intent, { ...intentProps }, index)),
+        annotations && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_XYChartRoot.XYChart.Annotations,
+          {
+            data: (0, import_transformer_annotations_to_xy.transformHistogramAnnotationsToXY)(annotations.tracks),
+            xAxisId,
+            showLabels: annotations.showLabels,
+            fixedTracks: annotations.visibleTracksLimit,
+            annotationsActions: annotations.annotationsActions,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_XYChartRoot.XYChartAnnotations.Track,
+                {
+                  trackIdAccessor: import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.trackId,
+                  labelAccessor: import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.trackLabel,
+                  colorAccessor: import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.trackColor,
+                  hidden: (d) => getAnnotationField(d, import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.trackHidden),
+                  symbol: (d) => getAnnotationField(d, import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.trackSymbol),
+                  indicatorsDisplay: (d) => getAnnotationField(
+                    d,
+                    import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.trackIndicators
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_XYChartRoot.XYChartAnnotations.Marker,
+                {
+                  startAccessor: import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.markerStart,
+                  endAccessor: import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.markerEnd,
+                  trackByAccessor: import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.trackId,
+                  titleAccessor: import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.markerTitle,
+                  descriptionAccessor: import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.markerDescription,
+                  colorAccessor: import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.markerColor,
+                  hidden: (d) => getAnnotationField(d, import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.markerHidden),
+                  symbol: (d) => getAnnotationField(d, import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.markerSymbol),
+                  indicatorsDisplay: (d) => getAnnotationField(
+                    d,
+                    import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.markerIndicators
+                  ),
+                  priority: (d) => getAnnotationField(d, import_transformer_annotations_to_xy.ANNOTATIONS_KEYS.markerPriority)
+                }
+              ),
+              annotations.tooltip?.template && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChartAnnotations.Tooltip, { hidden: annotations.tooltip.hidden, children: annotations.tooltip.template })
+            ]
+          }
+        )
       ]
     }
   );

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

@@ -21,17 +21,50 @@ __export(iterate_histogram_slots_exports, {
 });
 module.exports = __toCommonJS(iterate_histogram_slots_exports);
 var import_react = require("react");
+var import_react_is = require("react-is");
 var import_Intent = require("../../../core/slots/Intent/Intent.js");
 var import_is_slot = require("../../../core/utils/is-slot.js");
+var import_populate_missing_marker_props = require("../../core/components/annotations/utils/populate-missing-marker-props.js");
+var import_populate_missing_track_props = require("../../core/components/annotations/utils/populate-missing-track-props.js");
 var import_ColorRule = require("../../core/slots/ColorRule.js");
 var import_ChartToolbar = require("../../core/slots/toolbar/ChartToolbar.js");
+var import_Annotations = require("../../histogram/slots/annotations/Annotations.js");
+var import_Marker = require("../../histogram/slots/annotations/Marker.js");
+var import_Tooltip = require("../../histogram/slots/annotations/Tooltip.js");
+var import_Track = require("../../histogram/slots/annotations/Track.js");
 var import_Legend = require("../../histogram/slots/Legend.js");
 var import_Pan = require("../../histogram/slots/Pan.js");
 var import_Select = require("../../histogram/slots/Select.js");
+var import_ThresholdIndicator = require("../../histogram/slots/ThresholdIndicator.js");
 var import_Toolbar = require("../../histogram/slots/Toolbar.js");
 var import_XAxis = require("../../histogram/slots/XAxis.js");
 var import_YAxis = require("../../histogram/slots/YAxis.js");
 var import_Zoom = require("../../histogram/slots/Zoom.js");
+const iterateAnnotationsChildren = (children) => {
+  const tracks = [];
+  let tooltip;
+  import_react.Children.forEach(children, (child) => {
+    if ((0, import_is_slot.isSlot)(child, import_Track.Track)) {
+      const { children: trackChildren, ...trackProps } = child.props;
+      const currentTrack = (0, import_populate_missing_track_props.populateMissingTrackProps)({
+        ...trackProps,
+        markers: []
+      });
+      import_react.Children.forEach(trackChildren, (markerChild) => {
+        if ((0, import_react_is.isElement)(markerChild) && (0, import_is_slot.isSlot)(markerChild, import_Marker.Marker)) {
+          currentTrack.markers.push(
+            (0, import_populate_missing_marker_props.populateMissingMarkerProps)(markerChild.props, trackProps)
+          );
+        }
+      });
+      tracks.push(currentTrack);
+    } else if ((0, import_is_slot.isSlot)(child, import_Tooltip.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;
@@ -39,10 +72,12 @@ const iterateHistogramSlots = (children) => {
   let selectActions;
   let intents;
   const colorRules = [];
+  const thresholds = [];
   const yAxis = [];
   let xAxis = {};
   let toolbar = {};
   let deprecatedToolbar = {};
+  let annotations;
   import_react.Children.forEach(children, (child) => {
     if ((0, import_is_slot.isSlot)(child, import_Zoom.Zoom)) {
       disableZoom = child.props.disabled === true;
@@ -60,10 +95,8 @@ const iterateHistogramSlots = (children) => {
       };
     } else if ((0, import_is_slot.isSlot)(child, import_Select.Select)) {
       selectActions = child.props.actions;
-    } else if ((0, import_is_slot.isSlot)(child, import_ColorRule.ColorRule)) {
-      if ((0, import_ColorRule.isValidColorRule)(child.props)) {
-        colorRules.push(child.props);
-      }
+    } else if ((0, import_is_slot.isSlot)(child, import_ColorRule.ColorRule) && (0, import_ColorRule.isValidColorRule)(child.props)) {
+      colorRules.push(child.props);
     } else if ((0, import_is_slot.isSlot)(child, import_Intent.Intent)) {
       intents = intents ? [...intents, child.props] : [child.props];
     } else if ((0, import_is_slot.isSlot)(child, import_Toolbar.Toolbar)) {
@@ -73,6 +106,23 @@ const iterateHistogramSlots = (children) => {
         enabled: true,
         ...child.props
       };
+    } else if ((0, import_is_slot.isSlot)(child, import_ThresholdIndicator.ThresholdIndicator)) {
+      thresholds.push(child.props);
+    } else if ((0, import_is_slot.isSlot)(child, import_Annotations.Annotations)) {
+      const {
+        children: annotationsChildren,
+        showLabels,
+        visibleTracksLimit,
+        annotationsActions
+      } = child.props;
+      const { tracks, tooltip } = iterateAnnotationsChildren(annotationsChildren);
+      annotations = {
+        tracks,
+        tooltip,
+        showLabels,
+        visibleTracksLimit,
+        annotationsActions
+      };
     }
   });
   const interactionSlots = {
@@ -82,6 +132,7 @@ const iterateHistogramSlots = (children) => {
     yAxis,
     xAxis,
     colorRules,
+    thresholds,
     toolbar,
     deprecatedToolbar
   };
@@ -91,5 +142,8 @@ const iterateHistogramSlots = (children) => {
   if (intents) {
     interactionSlots.intents = intents;
   }
+  if (annotations) {
+    interactionSlots.annotations = annotations;
+  }
   return interactionSlots;
 };

package/charts/xy-chart-adoption/histogram/transformer-annotations-to-xy.d.ts

@@ -0,0 +1,20 @@
+import type { AnnotationsTrackConfig } from '../../core/components/annotations/types/annotations-track-props.js';
+import type { XYChartData } from '../../xy-chart/types/xy-chart.js';
+export declare const ANNOTATIONS_KEYS: {
+    readonly trackId: "__annotationsTrackId";
+    readonly trackLabel: "__annotationsTrackLabel";
+    readonly trackColor: "__annotationsTrackColor";
+    readonly trackHidden: "__annotationsTrackHidden";
+    readonly trackSymbol: "__annotationsTrackSymbol";
+    readonly trackIndicators: "__annotationsTrackIndicators";
+    readonly markerStart: "__annotationsMarkerStart";
+    readonly markerEnd: "__annotationsMarkerEnd";
+    readonly markerTitle: "__annotationsMarkerTitle";
+    readonly markerDescription: "__annotationsMarkerDescription";
+    readonly markerColor: "__annotationsMarkerColor";
+    readonly markerHidden: "__annotationsMarkerHidden";
+    readonly markerSymbol: "__annotationsMarkerSymbol";
+    readonly markerIndicators: "__annotationsMarkerIndicators";
+    readonly markerPriority: "__annotationsMarkerPriority";
+};
+export declare const transformHistogramAnnotationsToXY: (tracks: AnnotationsTrackConfig[]) => XYChartData[];

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

@@ -0,0 +1,68 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var transformer_annotations_to_xy_exports = {};
+__export(transformer_annotations_to_xy_exports, {
+  ANNOTATIONS_KEYS: () => ANNOTATIONS_KEYS,
+  transformHistogramAnnotationsToXY: () => transformHistogramAnnotationsToXY
+});
+module.exports = __toCommonJS(transformer_annotations_to_xy_exports);
+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;
+};

package/charts/xy-chart-adoption/histogram/transformer-data-to-xy.d.ts

@@ -13,6 +13,7 @@ interface TransformHistogramDataResult {
 type BarSeriesProps = {
     data: XYChartData[];
     unit: ChartUnit;
+    seriesCount: number;
 };
 export declare function transformHistogramDataToXYChart(data: HistogramSeries[]): TransformHistogramDataResult;
 export {};

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

@@ -23,32 +23,31 @@ module.exports = __toCommonJS(transformer_data_to_xy_exports);
 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/charts/xy-chart-adoption/histogram/transformer-thresholds-to-xy.d.ts

@@ -0,0 +1,4 @@
+import type { ChartUnit } from '../../core/types/chart-unit.js';
+import type { HistogramThresholdsConfig } from '../../histogram/types/histogram-props.js';
+import type { XYChartThresholdIndicatorProps } from '../../xy-chart/types/xy-chart-props.js';
+export declare function mapHistogramThresholdsToXY(thresholds: HistogramThresholdsConfig | undefined, units: ChartUnit[]): XYChartThresholdIndicatorProps[];

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

@@ -0,0 +1,96 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var transformer_thresholds_to_xy_exports = {};
+__export(transformer_thresholds_to_xy_exports, {
+  mapHistogramThresholdsToXY: () => mapHistogramThresholdsToXY
+});
+module.exports = __toCommonJS(transformer_thresholds_to_xy_exports);
+var import_define_axis_id = require("./utils/define-axis-id.js");
+var import_type_guards = require("../../core/types/type-guards.js");
+const X_AXIS_ID = "x-axis";
+function buildPositionToAxisIdMap(units) {
+  if (units.length <= 1) {
+    const axisId = units.length === 1 ? (0, import_define_axis_id.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] = (0, import_define_axis_id.defineAxisId)(unit);
+    }
+  });
+  return map;
+}
+function mapHistogramThresholdsToXY(thresholds, units) {
+  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;
+      }
+      const { data, color, label, strokeOnly } = threshold;
+      if ((0, import_type_guards.isStatic)(data)) {
+        result.push({
+          data: { y: data.value },
+          color,
+          label,
+          strokeOnly,
+          yAxisId
+        });
+      } else if ((0, import_type_guards.isStaticRange)(data)) {
+        result.push({
+          data: { yMin: data.min, yMax: data.max },
+          color,
+          label,
+          strokeOnly,
+          yAxisId
+        });
+      } else if ((0, import_type_guards.isDynamicNumeric)(data)) {
+        result.push({
+          data: data.map((d) => ({ y: d.value, x: d.point })),
+          color,
+          label,
+          strokeOnly,
+          yAxisId,
+          xAxisId: X_AXIS_ID
+        });
+      } else if ((0, import_type_guards.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
+        });
+      }
+      return result;
+    },
+    []
+  );
+}

package/charts/xy-chart-adoption/histogram/types/slots.d.ts

@@ -1,22 +1,36 @@
 import type { IntentProps } from '../../../../core/slots/Intent/Intent.js';
+import type { AnnotationsTooltipConfig } from '../../../core/components/annotations/components/tooltip/types/annotations-tooltip-props.js';
+import type { AnnotationsTrackConfig } from '../../../core/components/annotations/types/annotations-track-props.js';
+import type { AnnotationsActionsHandler } from '../../../core/components/annotations/types/annotations.js';
 import type { ColorRuleProps } from '../../../core/types/color-rule.js';
 import type { LegendProps } from '../../../core/types/legend.js';
+import type { ValueRepresentation } from '../../../core/types/scales.js';
 import type { SelectProps } from '../../../histogram/slots/Select.js';
+import type { HistogramThresholdIndicatorProps } from '../../../histogram/slots/ThresholdIndicator.js';
 import type { HistogramChartToolbarProps, HistogramChartXAxisProps, HistogramChartYAxisProps } from '../../../histogram/types/histogram-props.js';
 import type { HistogramToolbarSlotProps } from '../../../histogram/types/toolbar.js';
 import type { XYChartLogAxisProps, XYChartNumericalAxisProps } from '../../../xy-chart/types/xy-chart-props.js';
 import type { LEFT_POSITION, RIGHT_POSITION } from '../../../xy-chart/types/xy-chart.js';
+export interface HistogramAnnotationsSlots {
+    tracks: AnnotationsTrackConfig[];
+    tooltip: AnnotationsTooltipConfig | undefined;
+    showLabels?: boolean;
+    visibleTracksLimit?: number;
+    annotationsActions?: AnnotationsActionsHandler;
+}
 export interface HistogramSlots {
     disableZoom: boolean;
     disablePan: boolean;
     legend: LegendProps;
     selectActions?: SelectProps['actions'];
     colorRules: ColorRuleProps[];
+    thresholds: HistogramThresholdIndicatorProps[];
     yAxis: HistogramChartYAxisProps[];
     xAxis: HistogramChartXAxisProps;
     toolbar: HistogramToolbarSlotProps;
     deprecatedToolbar: HistogramChartToolbarProps;
     intents?: IntentProps[];
+    annotations?: HistogramAnnotationsSlots;
 }
 export type MappedPositionedAxes = {
     left?: Omit<YAxisProps, 'id'>;
@@ -25,5 +39,6 @@ export type MappedPositionedAxes = {
 export type YAxisPosition = typeof LEFT_POSITION | typeof RIGHT_POSITION;
 export type YAxisProps = Pick<XYChartNumericalAxisProps | XYChartLogAxisProps, 'id' | 'min' | 'max' | 'formatter' | 'unit' | 'type' | 'label'> & {
     position: YAxisPosition;
+    valueRepresentation?: ValueRepresentation;
 };
 export type XAxisProps = Pick<XYChartNumericalAxisProps | XYChartLogAxisProps, 'min' | 'max' | 'unit' | 'type' | 'label'>;