@dynatrace/strato-components 3.4.0 → 3.5.0

package/charts/xy-chart/providers/XYChartDataProvider.js

@@ -35,6 +35,7 @@ const XYChartChartDataProvider = ({
   const {
     axes,
     axisIdToScaleDomain,
+    axisIdToCategoryDatum,
     seriesIdToValueScaleDomain,
     axesMetadata,
     datapointMetadataMap,
@@ -60,6 +61,7 @@ const XYChartChartDataProvider = ({
         filteredSeriesWithDatapoints,
         seriesToMetadata,
         axisIdToScaleDomain,
+        axisIdToCategoryDatum,
         datapointMetadataMap,
         axisIdToDimension
       },

package/charts/xy-chart/slots/CustomTooltip.d.ts

@@ -1,4 +1,7 @@
 import type { XYChartCustomTooltipProps } from '../types/xy-chart-props.js';
+/**
+ * @deprecated Use `XYChart.Tooltip` instead. The `CustomTooltip` slot will be removed in a future release.
+ */
 export declare const CustomTooltip: {
     (props: XYChartCustomTooltipProps): null;
     displayName: string;

package/charts/xy-chart/slots/Tooltip.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import { XYChartTooltipPayload } from '../types/xy-chart.js';
+export declare const XYChartTooltipSlot: {
+    (props: {
+        hidden?: boolean;
+        children?: (tooltipPayload: XYChartTooltipPayload) => ReactNode;
+    }): null;
+    displayName: string;
+};

package/charts/xy-chart/slots/Tooltip.js

@@ -0,0 +1,25 @@
+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 Tooltip_exports = {};
+__export(Tooltip_exports, {
+  XYChartTooltipSlot: () => XYChartTooltipSlot
+});
+module.exports = __toCommonJS(Tooltip_exports);
+var import_Tooltip = require("../../core/slots/Tooltip.js");
+var import_defaults = require("../constants/defaults.js");
+const XYChartTooltipSlot = (0, import_Tooltip.Tooltip)(import_defaults.DISPLAY_NAME);

package/charts/xy-chart/types/xy-chart-internals.d.ts

@@ -1,7 +1,7 @@
 import { type ScaleBand, type ScaleLinear, type ScaleOrdinal, ScaleQuantize, type ScaleSymLog, ScaleThreshold, type ScaleTime } from 'd3-scale';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
 import type { XYAxisTypeLinear, XYAxisTypeLog } from './axis.js';
-import type { XYChartAreaSeriesProps, XYChartBarSeriesProps, XYChartCategoricalAxisProps, XYChartChartLegendProps, XYChartCustomTooltipProps, XYChartDotSeriesProps, XYChartLineSeriesProps, XYChartLogAxisProps, XYChartNumericalAxisProps, XYChartProps, XYChartRectSeriesProps, XYChartSelectConfig, XYChartSeriesBaseProps, XYChartThresholdIndicatorProps, XYChartTimeAxisProps, XYChartToolbarConfigProps, XYChartXAxisProps, XYChartYAxisProps, XYShapeColorPaletteProp } from './xy-chart-props.js';
+import type { XYChartAreaSeriesProps, XYChartBarSeriesProps, XYChartCategoricalAxisProps, XYChartChartLegendProps, XYChartDotSeriesProps, XYChartLineSeriesProps, XYChartLogAxisProps, XYChartNumericalAxisProps, XYChartProps, XYChartRectSeriesProps, XYChartSelectConfig, XYChartSeriesBaseProps, XYChartThresholdIndicatorProps, XYChartTimeAxisProps, XYChartToolbarConfigProps, XYChartXAxisProps, XYChartYAxisProps, XYShapeColorPaletteProp } from './xy-chart-props.js';
 import type { XYChartAreaSeries, XYChartBarSeries, XYChartDotSeries, XYChartLineSeries, XYChartRectSeries, AreaDatapoint, BarDatapoint, BarSeriesVariant, BaseDatapoint, DotDatapoint, LineDatapoint, SeriesCurve, XYAccessorDataTypes, XYChartAreaSeriesActionItem, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeriesActionItem, XYChartLineSeriesActionItem, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
 import type { TickLabelLayout } from '../../core/components/axes/types.js';
 import { type Orientation, type PointsDisplay } from '../../core/components/canvas/types/canvas-shape.js';
@@ -11,11 +11,12 @@ import { ChartUnit } from '../../core/types/chart-unit.js';
 import type { ColorToken } from '../../core/types/color-palette.js';
 import type { ColorRuleProps, MatchValue } from '../../core/types/color-rule.js';
 import type { DataPoint } from '../../core/types/data-point.js';
-import type { DateTimeFormatter, Formatter, FormatterWithPrecision } from '../../core/types/formatter.js';
+import type { CategoricalFormatter, DateTimeFormatter, Formatter, FormatterWithPrecision } from '../../core/types/formatter.js';
 import type { ZoomChangeHandler } from '../../core/types/interactions.js';
 import type { MinMax } from '../../core/types/min-max.js';
 import { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';
 import { XYChartAnnotationsConfigProps } from '../context/XYChartAnnotationsConfig.context.js';
+import { XYChartCustomTooltipConfig } from '../context/XYChartCustomTooltip.context.js';
 /**
  * Type for the validator function returned by buildValidator(VALUE_MATCHERS)
  */
@@ -43,7 +44,7 @@ export interface XYChartLogAxisInternalProps extends Omit<XYChartLogAxisProps, '
  */
 export type XYChartAxisInternal = XYChartAxisInternalProps & {
     tickLabelLayout: TickLabelLayout;
-    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;
+    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit> | CategoricalFormatter;
     unit?: ChartUnit;
     isRelative: boolean;
 } & ({
@@ -154,7 +155,7 @@ export interface XYChartSlots {
     annotations?: XYChartAnnotationsConfigProps;
     select?: XYChartSelectConfig;
     colorRules?: ColorRuleProps[];
-    customTooltip?: XYChartCustomTooltipProps;
+    tooltip: XYChartCustomTooltipConfig | undefined;
 }
 export interface XYChartInternals {
     series: XYChartSlots['series'];

package/charts/xy-chart/types/xy-chart-props.d.ts

@@ -11,7 +11,7 @@ import type { PointsDisplay } from '../../core/components/canvas/types/canvas-sh
 import type { PointShapeType } from '../../core/components/shape/type.js';
 import type { ChartUnit } from '../../core/types/chart-unit.js';
 import type { ColorRuleProps } from '../../core/types/color-rule.js';
-import type { Formatter, TimeFormatter } from '../../core/types/formatter.js';
+import type { CategoricalFormatter, Formatter, TimeFormatter } from '../../core/types/formatter.js';
 import type { NumericalGapPolicy, TimeGapPolicy } from '../../core/types/gap-policy.js';
 import type { ZoomChangeHandler } from '../../core/types/interactions.js';
 import type { LegendProps } from '../../core/types/legend.js';
@@ -20,6 +20,7 @@ import type { ValueRepresentation } from '../../core/types/scales.js';
 import type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';
 import { BaseThresholdConfig } from '../../core/types/thresholds.js';
 import type { ChartToolbarConfig } from '../../core/types/toolbar.js';
+import type { ChartTooltipConfigProps } from '../../core/types/tooltip.js';
 import { XYChartAnnotationsConfigProps } from '../context/XYChartAnnotationsConfig.context.js';
 import type { XYChartSelectProps } from '../slots/Select.js';
 /**
@@ -499,6 +500,10 @@ export interface XYChartNumericalAxisProps extends XYChartAxisBaseProps {
  */
 export interface XYChartCategoricalAxisProps extends XYChartAxisBaseProps {
     type: 'categorical';
+    /**
+     * If specified, categorical tick labels will be formatted with the given formatter function or options.
+     */
+    formatter?: CategoricalFormatter | FormatOptions<Unit, ConvertibleUnit>;
 }
 /**
  * XYChart Time based Axis Props
@@ -570,12 +575,18 @@ export interface XYChartConfigProperties {
     colorRules?: ColorRuleProps[];
     /**
      * Custom tooltip configuration
+     * @deprecated Use `tooltip` in `XYChartConfigProperties` instead. (APPDEV-17650)
      */
     customTooltip?: XYChartCustomTooltipProps;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: ChartTooltipConfigProps;
 }
 /**
  * Props for the XYChart.CustomTooltip slot component
  * @public
+ * @deprecated Use `XYChart.Tooltip` instead. The `CustomTooltip` slot will be removed in a future release.
  */
 export type XYChartCustomTooltipProps = {
     /**

package/charts/xy-chart/utils/calculate-axes-domains.d.ts

@@ -1,7 +1,7 @@
 import type { MinMax } from '../../core/types/min-max.js';
 import type { AxisIdToScaleDomain, XYChartAxisInternal } from '../types/xy-chart-internals.js';
 import { type AreaDatapoint, type BarDatapoint, type DotDatapoint, type LineDatapoint, type RectDatapoint } from '../types/xy-chart.js';
-export declare function calculateAxesDomains(xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, datapoint: LineDatapoint | DotDatapoint | BarDatapoint | RectDatapoint | AreaDatapoint, axisIdToScaleDomain: AxisIdToScaleDomain): {
+export declare function calculateAxesDomains(xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, datapoint: LineDatapoint | DotDatapoint | BarDatapoint | RectDatapoint | AreaDatapoint, axisIdToScaleDomain: AxisIdToScaleDomain, isSeriesVisible: boolean): {
     xDomain: Set<string> | MinMax;
-    yDomain: Set<string> | MinMax;
+    yDomain: {};
 };

package/charts/xy-chart/utils/calculate-axes-domains.js

@@ -80,18 +80,18 @@ const calculateAxesDomainsMap = {
     );
   }
 };
-function calculateAxesDomains(xAxis, yAxis, datapoint, axisIdToScaleDomain) {
+function calculateAxesDomains(xAxis, yAxis, datapoint, axisIdToScaleDomain, isSeriesVisible) {
   const xDomain = calculateAxesDomainsMap[xAxis.type]({
     axisId: xAxis.id,
     a0: datapoint.x0,
     a1: datapoint.x1,
     axisIdToScaleDomain
   });
-  const yDomain = calculateAxesDomainsMap[yAxis.type]({
+  const yDomain = isSeriesVisible || yAxis.type === import_axis.XYAxisTypeCategorical ? calculateAxesDomainsMap[yAxis.type]({
     axisId: yAxis.id,
     a0: datapoint.y0,
     a1: datapoint.y1,
     axisIdToScaleDomain
-  });
+  }) : axisIdToScaleDomain.get(yAxis.id) ?? {};
   return { xDomain, yDomain };
 }

package/charts/xy-chart/utils/generate-nice-unit-ticks.d.ts

@@ -1,9 +1,9 @@
 import { type ConvertibleUnit, type FormatOptions, type Unit } from '@dynatrace-sdk/units';
-import { type AnyNumericFormatter, type FormatterWithPrecision } from '../../core/types/formatter.js';
+import { type AnyNumericFormatter, type CategoricalFormatter, type FormatterWithPrecision } from '../../core/types/formatter.js';
 interface AxisFormatterConfig {
     isRelative: boolean;
     type: string;
-    formatter?: AnyNumericFormatter;
+    formatter?: AnyNumericFormatter | CategoricalFormatter;
 }
 /**
  * Returns true when the axis should use nice unit-converted ticks.

package/charts/xy-chart/utils/generate-nice-unit-ticks.js

@@ -29,7 +29,11 @@ var import_formatter = require("../../core/types/formatter.js");
 var import_ticks = require("../../core/utils/ticks.js");
 var import_guards = require("../types/guards.js");
 function shouldUseNiceUnitTicks(config) {
-  return config !== void 0 && !config.isRelative && (0, import_guards.isLinear)(config.type) && (0, import_formatter.isFormatterOptions)(config.formatter) && config.formatter.input !== void 0 && config.formatter.output !== void 0;
+  if (!config || config.isRelative || !(0, import_guards.isLinear)(config.type)) {
+    return false;
+  }
+  const formatter = config.formatter;
+  return (0, import_formatter.isFormatterOptions)(formatter) && formatter.input !== void 0 && formatter.output !== void 0;
 }
 function getBestModulusDivisor(totalDomain) {
   let bestDivisor = 4;

package/charts/xy-chart/utils/get-ticks-formatted-by-config.d.ts

@@ -1,6 +1,6 @@
-import type { DateTimeFormatter, FormatterWithPrecision } from '../../core/types/formatter.js';
-import type { XYChartAxisInternal, AnyXYChartScale } from '../types/xy-chart-internals.js';
-export declare function getTicksFormattedByConfig(config: XYChartAxisInternal | undefined, numTicks: number, scale: AnyXYChartScale | undefined, formatter: FormatterWithPrecision | DateTimeFormatter | undefined): {
+import type { DateTimeFormatter, FormatterWithPrecision, StringFormatter } from '../../core/types/formatter.js';
+import type { AnyXYChartScale, XYChartAxisInternal } from '../types/xy-chart-internals.js';
+export declare function getTicksFormattedByConfig(config: XYChartAxisInternal | undefined, numTicks: number, scale: AnyXYChartScale | undefined, formatter: FormatterWithPrecision | DateTimeFormatter | StringFormatter | undefined): {
     ticks: any[];
-    formattedTicks: any[];
+    formattedTicks: string[];
 };

package/charts/xy-chart/utils/get-ticks-formatted-by-config.js

@@ -24,15 +24,21 @@ var import_formatter_by_ticks = require("../../core/utils/formatter-by-ticks.js"
 var import_guards = require("../types/guards.js");
 function getTicksFormattedByConfig(config, numTicks, scale, formatter) {
   const axisType = config?.type || "";
-  return (0, import_guards.isCategorical)(axisType) ? (0, import_formatter_by_ticks.getCategoricalTicks)(scale) : (0, import_guards.isLogarithmic)(axisType) ? (0, import_formatter_by_ticks.getFormattedTicks)(
-    numTicks,
-    scale,
-    void 0,
-    formatter
-  ) : (0, import_formatter_by_ticks.getDateNumericalFormattedTicks)(
+  if ((0, import_guards.isCategorical)(axisType)) {
+    return (0, import_formatter_by_ticks.getCategoricalTicks)(scale, formatter);
+  }
+  if ((0, import_guards.isLogarithmic)(axisType)) {
+    return (0, import_formatter_by_ticks.getFormattedTicks)(
+      numTicks,
+      scale,
+      void 0,
+      formatter
+    );
+  }
+  return (0, import_formatter_by_ticks.getDateNumericalFormattedTicks)(
     numTicks,
     scale,
-    (0, import_guards.isLinear)(axisType) ? config?.unit : void 0,
+    (0, import_guards.isLinear)(axisType) && !config?.isRelative ? config?.unit : void 0,
     formatter
   );
 }

package/charts/xy-chart/utils/iterate-slots.js

@@ -36,6 +36,7 @@ var import_RectSeries = require("../slots/RectSeries.js");
 var import_Select = require("../slots/Select.js");
 var import_ThresholdIndicator = require("../slots/ThresholdIndicator.js");
 var import_Toolbar = require("../slots/Toolbar.js");
+var import_Tooltip = require("../slots/Tooltip.js");
 var import_XAxis = require("../slots/XAxis.js");
 var import_YAxis = require("../slots/YAxis.js");
 var import_xy_chart_internals = require("../types/xy-chart-internals.js");
@@ -48,7 +49,7 @@ const iterateSlots = (children) => {
     toolbar: {},
     thresholds: [],
     colorRules: [],
-    customTooltip: {}
+    tooltip: void 0
   };
   let intents;
   import_react.Children.forEach(children, (child) => {
@@ -107,7 +108,15 @@ const iterateSlots = (children) => {
     } else if ((0, import_is_slot.isSlot)(child, import_ColorRule.ColorRule)) {
       (0, import_ColorRule.isValidColorRule)(child.props) && slots.colorRules.push(child.props);
     } else if ((0, import_is_slot.isSlot)(child, import_CustomTooltip.CustomTooltip)) {
-      slots.customTooltip = child.props;
+      slots.tooltip = {
+        hidden: false,
+        template: child.props.children
+      };
+    } else if ((0, import_is_slot.isSlot)(child, import_Tooltip.XYChartTooltipSlot)) {
+      slots.tooltip = {
+        hidden: child.props.hidden ?? false,
+        template: child.props.children
+      };
     }
   });
   return {

package/charts/xy-chart/utils/type-guards.d.ts

@@ -1,4 +1,4 @@
-import { DateTimeFormatter, FormatterWithPrecision, type TimeFrameFormatter } from '../../core/types/formatter.js';
+import { DateTimeFormatter, FormatterWithPrecision, type StringFormatter, type TimeFrameFormatter } from '../../core/types/formatter.js';
 import { ScaleTypesMap } from '../types/scale-types-map.js';
 import type { AreaSeriesContent, DotSeriesContent, LineSeriesContent, XYChartExploreState } from '../types/state.js';
 import { AnyXYChartScale, type AREA_HORIZONTAL, type AREA_VERTICAL, type AreaMetadata, type AreaSeriesWithDatapoints, type BAND_HORIZONTAL, type BAND_VERTICAL, type BarMetadata, type BarSeriesWithDatapoints, type BaseMetadata, DOT_VARIANT, type DotMetadata, DotSeriesWithDatapoints, LINE_VARIANT, type LineMetadata, type LineSeriesWithDatapoints, type MapDatapoints, type RectDatapointInternal, type RectMetadata, RectSeriesWithDatapoints, type XYChartAreaSeriesInternal, type XYChartBarSeriesInternal, XYChartDotSeriesInternal, type XYChartLineSeriesInternal, XYChartRectSeriesInternal, XYChartSeriesWithDatapoints, XYChartVariantsInternal, type XYValueAccessorDataTypes } from '../types/xy-chart-internals.js';
@@ -49,10 +49,11 @@ interface AreaSeriesScaleGuard {
 export declare function isNumericalAreaScale(args: AreaSeriesScaleGuard): args is ScaleTypesMap['numerical.linear']['areaScale'];
 export declare function isTimeAreaScale(args: AreaSeriesScaleGuard): args is ScaleTypesMap['time']['areaScale'];
 export declare function isCategoricalAreaScale(args: AreaSeriesScaleGuard): args is ScaleTypesMap['categorical']['areaScale'];
+export type TooltipFormatter = FormatterWithPrecision | DateTimeFormatter | TimeFrameFormatter | StringFormatter | undefined;
 export type TooltipGuard = BaseGuard & ({
-    formatter: FormatterWithPrecision | DateTimeFormatter | TimeFrameFormatter | undefined;
+    formatter: TooltipFormatter;
 } | {
-    formatter: FormatterWithPrecision | DateTimeFormatter | TimeFrameFormatter | undefined;
+    formatter: TooltipFormatter;
     v1: XYAccessorDataTypes;
 });
 export declare function isNumericalToolTip<T1 extends TooltipGuard, T2 extends T1 & ScaleTypesMap['numerical.linear']['tooltip']>(args: T1): args is Pick<T2, keyof T1>;

package/charts/xy-chart/utils/xy-chart-configuration.d.ts

@@ -1,7 +1,8 @@
 import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
 import { XYChartAnnotationsConfigProps } from '../context/XYChartAnnotationsConfig.context.js';
+import { XYChartCustomTooltipConfig } from '../context/XYChartCustomTooltip.context.js';
 import { type ExportableXYChartProps, type XYChartInternals, type XYChartSlots } from '../types/xy-chart-internals.js';
-import type { XYChartAxisProps, XYChartConfigProperties, XYChartCustomTooltipProps, XYChartSelectConfig } from '../types/xy-chart-props.js';
+import type { XYChartAxisProps, XYChartConfigProperties, XYChartSelectConfig } from '../types/xy-chart-props.js';
 import { type XYChartColorPalette } from '../types/xy-chart.js';
 export declare function getTruncationModeConfiguration(contextTruncationMode?: TruncationMode, propsTruncationMode?: TruncationMode): TruncationMode;
 export declare function getXYChartAnnotationsConfiguration(slotsAnnotations?: XYChartAnnotationsConfigProps, configAnnotations?: XYChartAnnotationsConfigProps): XYChartAnnotationsConfigProps | undefined;
@@ -12,12 +13,13 @@ export declare function getXYChartAnnotationsConfiguration(slotsAnnotations?: XY
  * @param contextConfig - config pass in config context
  * @param rootProps - Config props passed in root component level
  */
-export declare const createXYChartConfiguration: (slots: XYChartSlots, contextConfig: XYChartConfigProperties, rootProps: ExportableXYChartProps) => Omit<Required<XYChartConfigProperties>, "annotations" | "select" | "colorPalette" | "customTooltip"> & {
+export type XYChartConfig = Omit<Required<XYChartConfigProperties>, 'annotations' | 'select' | 'colorPalette' | 'tooltip'> & {
     annotations?: XYChartAnnotationsConfigProps;
     select?: XYChartSelectConfig;
     colorPalette?: XYChartColorPalette;
-    customTooltip?: XYChartCustomTooltipProps;
+    tooltip: XYChartCustomTooltipConfig;
 };
+export declare const createXYChartConfiguration: (slots: XYChartSlots, contextConfig: XYChartConfigProperties, rootProps: ExportableXYChartProps) => XYChartConfig;
 export declare function getAxes<T extends XYChartAxisProps>(slotAxes: T[], contextAxes: T[] | undefined): T[];
 export declare const deserializeConfig: (serializedConfig: string) => XYChartConfigProperties;
 type InternalConfig = {

package/charts/xy-chart/utils/xy-chart-configuration.js

@@ -38,6 +38,7 @@ var import_is_valid_legend_position = require("../../core/utils/is-valid-legend-
 var import_is_valid_toolbar_placement = require("../../core/utils/is-valid-toolbar-placement.js");
 var import_builder = require("../components/thresholds/builder.js");
 var import_defaults2 = require("../constants/defaults.js");
+var import_XYChartCustomTooltip_context = require("../context/XYChartCustomTooltip.context.js");
 var import_axis = require("../types/axis.js");
 var import_xy_chart = require("../types/xy-chart.js");
 function getLegendConfiguration(slotsLegend, contextLegend) {
@@ -89,6 +90,15 @@ function getXYChartAnnotationsConfiguration(slotsAnnotations, configAnnotations)
   }
   return (0, import_lodash_es.merge)({}, configAnnotations, slotsAnnotations);
 }
+function getCustomTooltipConfiguration(slotsCustomTooltip, contextCustomTooltip) {
+  if (slotsCustomTooltip !== void 0) {
+    return slotsCustomTooltip;
+  }
+  return {
+    ...import_XYChartCustomTooltip_context.DEFAULT_CUSTOM_TOOLTIP_CONFIG,
+    hidden: contextCustomTooltip?.hidden ?? import_XYChartCustomTooltip_context.DEFAULT_CUSTOM_TOOLTIP_CONFIG.hidden
+  };
+}
 const createXYChartConfiguration = (slots, contextConfig, rootProps) => {
   const colorPalette = getColorPaletteConfiguration(
     contextConfig.colorPalette,
@@ -112,7 +122,10 @@ const createXYChartConfiguration = (slots, contextConfig, rootProps) => {
     ...contextConfig.thresholdIndicators || []
   ];
   const colorRules = (contextConfig.colorRules || []).filter(import_ColorRule.isValidColorRule).concat(slots.colorRules || []);
-  const customTooltip = slots.customTooltip || void 0;
+  const tooltip = getCustomTooltipConfiguration(
+    slots.tooltip,
+    contextConfig.tooltip
+  );
   return {
     colorPalette,
     legend,
@@ -124,7 +137,8 @@ const createXYChartConfiguration = (slots, contextConfig, rootProps) => {
     annotations,
     select,
     colorRules,
-    customTooltip
+    tooltip,
+    customTooltip: {}
   };
 };
 function getAxes(slotAxes, contextAxes) {

package/charts/xy-chart-adoption/histogram/HistogramToXY.d.ts

@@ -1,5 +1,6 @@
+import { type ReactNode } from 'react';
 import type { HistogramChartProps } from '../../histogram/types/histogram-props.js';
 import type { HistogramChartRef } from '../../histogram/types/histogram-ref.js';
 export declare const HistogramToXY: (props: HistogramChartProps & {
-    children?: import("react").ReactNode | undefined;
+    children?: ReactNode | undefined;
 } & import("react").RefAttributes<HistogramChartRef>) => import("react").ReactElement | null;

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 })
+            ]
+          }
+        )
       ]
     }
   );