@dynatrace/strato-components 3.8.0 → 3.9.0

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

@@ -22,6 +22,7 @@ __export(TimeseriesToXY_exports, {
 module.exports = __toCommonJS(TimeseriesToXY_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_use_timeseries_chart_config = require("./hooks/use-timeseries-chart-config.js");
 var import_iterate_slots = require("./iterate-slots.js");
 var import_map_select_actions = require("./map-select-actions.js");
 var import_map_series_actions = require("./map-series-actions.js");
@@ -31,11 +32,13 @@ var import_transformer_data_to_xy = require("./transformer-data-to-xy.js");
 var import_timeseries = require("./types/timeseries.js");
 var import_build_buckets = require("./utils/build-buckets.js");
 var import_build_timeseries_imperative_handle = require("./utils/build-timeseries-imperative-handle.js");
+var import_derive_xychart_props_from_config = require("./utils/derive-xychart-props-from-config.js");
 var import_format_csv = require("./utils/download/format-csv.js");
 var import_map_axis_slots = require("./utils/map-axis-slots.js");
 var import_map_timeseries_to_xy_color_rules = require("./utils/map-timeseries-to-xy-color-rules.js");
 var import_render_series = require("./utils/render-series.js");
 var import_resolve_gap_policy = require("./utils/resolve-gap-policy.js");
+var import_transformer_thresholds_to_xy = require("./utils/transformer-thresholds-to-xy.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");
@@ -46,7 +49,6 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     data = [],
     variant = import_timeseries.DEFAULT_VARIANT,
-    valueRepresentation: rootValueRepresentation,
     children,
     loading,
     className,
@@ -57,6 +59,7 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     truncationMode,
+    valueRepresentation,
     initialZoom,
     currentZoom,
     onZoomChange,
@@ -65,27 +68,20 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
     gapPolicy,
     pointsDisplay
   } = props;
-  const {
-    line,
-    bar,
-    area,
-    band,
-    shapePriority,
-    disableZoom,
-    disablePan,
-    selectActions,
-    legend,
-    intents,
-    colorRules,
-    xAxis,
-    leftYAxis,
-    rightYAxis,
-    annotations,
-    toolbar,
-    deprecatedToolbar
-  } = (0, import_iterate_slots.iterateSlots)(children);
+  const config = (0, import_use_timeseries_chart_config.useTimeseriesChartConfig)(children, {
+    colorPalette,
+    truncationMode,
+    valueRepresentation,
+    gapPolicy,
+    pointsDisplay,
+    initialZoom,
+    currentZoom,
+    onZoomChange,
+    infiniteZoom
+  });
+  const { line, bar, area, band, shapePriority, deprecatedToolbar } = (0, import_iterate_slots.iterateSlots)(children);
   const resolvedValueRepresentation = (0, import_resolve_value_representation.resolveValueRepresentation)(
-    rootValueRepresentation,
+    config.valueRepresentation,
     ...line.map((s) => s.valueRepresentation),
     ...area.map((s) => s.valueRepresentation),
     ...bar.map((s) => s.valueRepresentation)
@@ -102,17 +98,30 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
     data,
     variant,
     { line, area, bar, band, shapePriority },
-    pointsDisplay
+    config.pointsDisplay
   );
   const result = (0, import_transformer_data_to_xy.transformTimeseriesDataToXYChart)(buckets, order);
-  const effectiveGapPolicy = (0, import_resolve_gap_policy.resolveGapPolicy)(gapPolicies, gapPolicy);
-  const allColorRules = (0, import_map_timeseries_to_xy_color_rules.resolveTimeseriesColorRules)(allSeriesData, colorRules);
-  const xAxisConfig = (0, import_map_axis_slots.mapXAxisSlot)(xAxis);
+  const effectiveGapPolicy = (0, import_resolve_gap_policy.resolveGapPolicy)(gapPolicies, config.gapPolicy);
+  const allColorRules = (0, import_map_timeseries_to_xy_color_rules.resolveTimeseriesColorRules)(
+    allSeriesData,
+    config.colorRules
+  );
+  const xAxisConfig = (0, import_map_axis_slots.mapXAxisSlot)(config.xAxis);
   const { configuredAxes, renderedUnits } = (0, import_map_axis_slots.mapYAxisSlots)(
-    leftYAxis,
-    rightYAxis,
+    config.yAxis.left,
+    config.yAxis.right,
     [...result.units]
   );
+  const yAxesConfig = renderedUnits.map((unit, index) => ({
+    unit,
+    axisId: (0, import_render_series.defineAxisId)(unit),
+    ...(0, import_map_axis_slots.mapYAxisSlotToProps)(index, configuredAxes[index])
+  }));
+  const flatThresholds = config.thresholds ? [...config.thresholds.left ?? [], ...config.thresholds.right ?? []] : [];
+  const mappedThresholds = (0, import_transformer_thresholds_to_xy.mapTimeseriesToXYThresholds)(
+    flatThresholds,
+    yAxesConfig
+  );
   const mappedSeriesActions = seriesActions ? (0, import_map_series_actions.mapSeriesActionsToXY)(seriesActions, lineAreaBarData) : void 0;
   const mappedBandActions = seriesActions ? (0, import_map_series_actions.mapBandSeriesActionsToXY)(seriesActions, bandData) : void 0;
   const seriesForShape = (shape) => {
@@ -135,11 +144,21 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
         );
     }
   };
+  const {
+    disableZoom,
+    disablePan,
+    toolbarEnabled,
+    toolbarPlacement,
+    toolbarIntents,
+    onZoomChange: effectiveOnZoomChange
+  } = (0, import_derive_xychart_props_from_config.deriveXYChartPropsFromConfig)(config, onZoomChange);
+  const selectActions = config.select?.actions;
+  const tooltipVariant = config.tooltip.variant === "single" ? "single" : "shared";
   const xyRef = (0, import_react.useRef)(null);
   (0, import_react.useImperativeHandle)(
     forwardedRef,
-    () => (0, import_build_timeseries_imperative_handle.buildTimeseriesImperativeHandle)(xyRef),
-    []
+    () => (0, import_build_timeseries_imperative_handle.buildTimeseriesImperativeHandle)(xyRef, config),
+    [config]
   );
   const downloadDataCallback = () => {
     const csvString = (0, import_format_csv.formatCSV)({
@@ -160,12 +179,19 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
       style,
       width,
       height,
-      colorPalette,
+      colorPalette: config.colorPalette,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      truncationMode,
+      truncationMode: config.truncationMode,
       __downloadDataCallback: downloadDataCallback,
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.Tooltip,
+          {
+            _variant: tooltipVariant,
+            _seriesDisplayMode: config.tooltip.seriesDisplayMode
+          }
+        ),
         errorState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.ErrorState, { children: errorState }),
         emptyState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.EmptyState, { children: emptyState }),
         order.flatMap(seriesForShape),
@@ -195,24 +221,24 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
             label: xAxisConfig.label,
             disableZoom,
             disablePan,
-            initialZoom,
-            currentZoom,
-            onZoomChange,
-            infiniteZoom,
+            initialZoom: config.initialZoom,
+            currentZoom: config.currentZoom,
+            onZoomChange: effectiveOnZoomChange,
+            infiniteZoom: config.infiniteZoom,
             gapPolicy: effectiveGapPolicy
           }
         ),
-        renderedUnits.map((unit, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        yAxesConfig.map(({ unit, axisId, ...axisProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_XYChartRoot.XYChart.YAxis,
           {
-            id: (0, import_render_series.defineAxisId)(unit),
+            id: axisId,
             unit,
-            ...(0, import_map_axis_slots.mapYAxisSlotToProps)(index, configuredAxes[index]),
+            ...axisProps,
             valueRepresentation: resolvedValueRepresentation
           },
-          (0, import_render_series.defineAxisId)(unit)
+          axisId
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { ...legend }),
+        /* @__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,
           {
@@ -223,18 +249,19 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_XYChartRoot.XYChart.Toolbar,
           {
-            hidden: toolbar.hidden,
-            placement: toolbar.placement,
-            ...(0, import_extract_behavior_tracking_props.extractBehaviorTrackingProps)(toolbar)
+            hidden: !toolbarEnabled,
+            placement: toolbarPlacement,
+            ...(0, import_extract_behavior_tracking_props.extractBehaviorTrackingProps)(config.toolbar ?? {})
           }
         ),
         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)),
-        annotations && (0, import_render_xy_annotations.renderXYAnnotations)(
-          (0, import_transformer_annotations_to_xy.transformTimeseriesAnnotationsToXY)(annotations.tracks),
+        toolbarIntents?.map((intentProps, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Intent, { ...intentProps }, index)),
+        config.annotations && (0, import_render_xy_annotations.renderXYAnnotations)(
+          (0, import_transformer_annotations_to_xy.transformTimeseriesAnnotationsToXY)(config.annotations.tracks),
           import_render_series.xAxisId,
-          annotations
-        )
+          config.annotations
+        ),
+        mappedThresholds.map((threshold, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.ThresholdIndicator, { ...threshold }, index))
       ]
     }
   );

package/charts/xy-chart-adoption/timeseries/constants.d.ts

@@ -0,0 +1,21 @@
+import { TimeseriesChartConfigProperties, TimeseriesChartLegendConfig, TimeseriesChartYAxisConfig } from './types/timeseries-config.js';
+import { TimeseriesToolbarInternalProps } from './types/toolbar.js';
+import type { PointsDisplay } from '../../core/components/canvas/types/canvas-shape.js';
+import { type TimeGapPolicy } from '../../core/types/gap-policy.js';
+import { ChartInteractionsConfig } from '../../core/types/interactions.js';
+import { ValueRepresentation } from '../../core/types/scales.js';
+import { SeriesCurve } from '../../core/types/timeseries.js';
+import { TooltipVariant } from '../../core/types/tooltip.js';
+export declare const defaultTooltipVariant: TooltipVariant;
+export declare const defaultSeriesDisplayMode = "multi-line";
+export declare const defaultYAxis: TimeseriesChartYAxisConfig;
+export declare const defaultGapPolicy: TimeGapPolicy;
+export declare const defaultSeriesCurve: SeriesCurve;
+export declare const defaultPointsDisplay: PointsDisplay;
+export declare const defaultValueRepresentation: ValueRepresentation;
+export declare const DEFAULT_SCALE_FALLBACK_COLOR: string;
+export declare const defaultLegend: TimeseriesChartLegendConfig;
+export declare const defaultToolbar: TimeseriesToolbarInternalProps;
+export declare const defaultInteractions: ChartInteractionsConfig;
+export declare const defaultColorPalette = "categorical";
+export declare const defaultTimeseriesChartConfig: TimeseriesChartConfigProperties;

package/charts/xy-chart-adoption/timeseries/constants.js

@@ -0,0 +1,76 @@
+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 constants_exports = {};
+__export(constants_exports, {
+  DEFAULT_SCALE_FALLBACK_COLOR: () => DEFAULT_SCALE_FALLBACK_COLOR,
+  defaultColorPalette: () => defaultColorPalette,
+  defaultGapPolicy: () => defaultGapPolicy,
+  defaultInteractions: () => defaultInteractions,
+  defaultLegend: () => defaultLegend,
+  defaultPointsDisplay: () => defaultPointsDisplay,
+  defaultSeriesCurve: () => defaultSeriesCurve,
+  defaultSeriesDisplayMode: () => defaultSeriesDisplayMode,
+  defaultTimeseriesChartConfig: () => defaultTimeseriesChartConfig,
+  defaultToolbar: () => defaultToolbar,
+  defaultTooltipVariant: () => defaultTooltipVariant,
+  defaultValueRepresentation: () => defaultValueRepresentation,
+  defaultYAxis: () => defaultYAxis
+});
+module.exports = __toCommonJS(constants_exports);
+var import_constants = require("../../core/constants.js");
+var import_gap_policy = require("../../core/types/gap-policy.js");
+const defaultTooltipVariant = "single";
+const defaultSeriesDisplayMode = "multi-line";
+const defaultYAxis = {};
+const defaultGapPolicy = import_gap_policy.GAP_POLICY_GAP;
+const defaultSeriesCurve = "linear";
+const defaultPointsDisplay = "auto";
+const defaultValueRepresentation = "absolute";
+const DEFAULT_SCALE_FALLBACK_COLOR = import_constants.SCALE_FALLBACK_COLOR;
+const defaultLegend = {
+  hidden: false,
+  position: "auto",
+  ratio: import_constants.defaultRatio
+};
+const defaultToolbar = {
+  placement: "top-right",
+  enabled: true
+};
+const defaultInteractions = {
+  onZoomChange: void 0,
+  pan: {
+    enabled: true
+  },
+  zoom: {
+    enabled: true
+  }
+};
+const defaultColorPalette = "categorical";
+const defaultTimeseriesChartConfig = {
+  legend: defaultLegend,
+  colorPalette: defaultColorPalette,
+  gapPolicy: defaultGapPolicy,
+  pointsDisplay: defaultPointsDisplay,
+  valueRepresentation: defaultValueRepresentation,
+  tooltip: {
+    variant: defaultTooltipVariant,
+    seriesDisplayMode: defaultSeriesDisplayMode
+  },
+  toolbar: defaultToolbar,
+  interactions: defaultInteractions
+};

package/charts/xy-chart-adoption/timeseries/hooks/use-timeseries-chart-config.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type TimeseriesChartConfigProps, TimeseriesChartConfiguration } from '../types/timeseries-config.js';
+/**
+ * Adoption-local port of the legacy `useTimeseriesChartConfig`, kept
+ * independent from `../../../timeseries`. Reads the same (shared, public)
+ * `TimeseriesChartConfigContext` so `<TimeseriesChartConfig>` keeps working
+ * regardless of which implementation renders underneath.
+ */
+export declare const useTimeseriesChartConfig: (children?: ReactNode, overrides?: TimeseriesChartConfigProps) => TimeseriesChartConfiguration;

package/charts/xy-chart-adoption/timeseries/hooks/use-timeseries-chart-config.js

@@ -0,0 +1,37 @@
+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 use_timeseries_chart_config_exports = {};
+__export(use_timeseries_chart_config_exports, {
+  useTimeseriesChartConfig: () => useTimeseriesChartConfig
+});
+module.exports = __toCommonJS(use_timeseries_chart_config_exports);
+var import_react = require("react");
+var import_TimeseriesChartConfig_context = require("../../../timeseries/context/TimeseriesChartConfig.context.js");
+var import_chart_configuration = require("../utils/chart-configuration.js");
+var import_iterate_config_slots = require("../utils/iterate-config-slots.js");
+const useTimeseriesChartConfig = (children, overrides) => {
+  let contextConfig = (0, import_react.useContext)(import_TimeseriesChartConfig_context.TimeseriesChartConfigContext);
+  if (isSerializedConfig(contextConfig)) {
+    contextConfig = (0, import_chart_configuration.deserializeConfig)(contextConfig);
+  }
+  const slots = (0, import_iterate_config_slots.iterateConfigSlots)(children);
+  return (0, import_chart_configuration.createTimeseriesConfiguration)(slots, contextConfig, overrides || {});
+};
+function isSerializedConfig(contextConfig) {
+  return typeof contextConfig === "string";
+}

package/charts/xy-chart-adoption/timeseries/iterate-slots.d.ts

@@ -1,12 +1,13 @@
 import { type ReactNode } from 'react';
-import type { ChartVariantInternal, TimeseriesChartAreaProps, TimeseriesChartBandProps, TimeseriesChartBarProps, TimeseriesChartLineProps, TimeseriesSelectActions } from './types/timeseries.js';
+import type { ChartVariantInternal, TimeseriesChartAreaProps, TimeseriesChartBandProps, TimeseriesChartBarProps, TimeseriesChartLineProps, TimeseriesChartThresholdIndicatorProps, TimeseriesSelectActions } from './types/timeseries.js';
+import type { TimeseriesChartToolbarConfig, TimeseriesChartToolbarSlotProps } from './types/toolbar.js';
 import type { AnnotationsSlotsConfig } from './utils/collect-annotations-slots.js';
 import { type IntentProps } from '../../../core/slots/Intent/Intent.js';
 import type { ColorRuleProps } from '../../core/types/color-rule.js';
 import type { LegendProps } from '../../core/types/legend.js';
+import { type TimeseriesChartTooltipProps } from '../../timeseries/slots/Tooltip.js';
 import type { TimeseriesChartXAxisProps } from '../../timeseries/slots/XAxis.js';
 import type { TimeseriesChartYAxisProps } from '../../timeseries/slots/YAxis.js';
-import type { TimeseriesChartToolbarConfig, TimeseriesChartToolbarSlotProps } from '../../timeseries/types/toolbar.js';
 export type SeriesSlots = {
     line: TimeseriesChartLineProps[];
     area: TimeseriesChartAreaProps[];
@@ -27,5 +28,7 @@ export type ConfigSlots = {
     annotations: AnnotationsSlotsConfig | undefined;
     toolbar: TimeseriesChartToolbarSlotProps;
     deprecatedToolbar: TimeseriesChartToolbarConfig;
+    thresholds: TimeseriesChartThresholdIndicatorProps[];
+    tooltip: TimeseriesChartTooltipProps | undefined;
 };
 export declare function iterateSlots(children: ReactNode): SeriesSlots & ConfigSlots;

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

@@ -34,7 +34,9 @@ var import_Area = require("../../timeseries/slots/shapes/Area.js");
 var import_Band = require("../../timeseries/slots/shapes/Band.js");
 var import_Bar = require("../../timeseries/slots/shapes/Bar.js");
 var import_Line = require("../../timeseries/slots/shapes/Line.js");
+var import_ThresholdIndicator = require("../../timeseries/slots/ThresholdIndicator.js");
 var import_Toolbar = require("../../timeseries/slots/Toolbar.js");
+var import_Tooltip = require("../../timeseries/slots/Tooltip.js");
 var import_XAxis = require("../../timeseries/slots/XAxis.js");
 var import_YAxis = require("../../timeseries/slots/YAxis.js");
 var import_Zoom = require("../../timeseries/slots/Zoom.js");
@@ -56,6 +58,8 @@ function iterateSlots(children) {
   let annotations;
   let toolbar = {};
   let deprecatedToolbar = {};
+  const thresholds = [];
+  let tooltip;
   import_react.Children.forEach(children, (child) => {
     if ((0, import_is_slot.isSlot)(child, import_Line.Line)) {
       line.push(child.props);
@@ -108,6 +112,10 @@ function iterateSlots(children) {
       }
     } else if ((0, import_is_slot.isSlot)(child, import_Annotations.Annotations)) {
       annotations = (0, import_collect_annotations_slots.collectAnnotationsSlots)(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_Tooltip.Tooltip)) {
+      tooltip = child.props;
     }
   });
   return {
@@ -127,6 +135,8 @@ function iterateSlots(children) {
     rightYAxis,
     annotations,
     toolbar,
-    deprecatedToolbar
+    deprecatedToolbar,
+    thresholds,
+    tooltip
   };
 }

package/charts/xy-chart-adoption/timeseries/map-series-actions.js

@@ -52,7 +52,7 @@ function mapSeriesActionsToXY(seriesActions, originalSeries) {
     const hasNestedDatapoint = "datapoint" in item;
     const rawObj = hasNestedDatapoint ? item.datapoint : item;
     const raw = rawObj;
-    const resolvedName = raw.seriesName ?? item.name ?? "";
+    const resolvedName = (0, import_single_line_name.singleLineName)(raw.seriesName ?? item.name ?? "");
     const timeseries = findByName(originalSeries, resolvedName);
     const isLegendTrigger = series !== void 0;
     const datapoint = isLegendTrigger ? void 0 : buildDatapoint(raw);
@@ -62,7 +62,7 @@ function mapSeriesActionsToXY(seriesActions, originalSeries) {
 function mapBandSeriesActionsToXY(seriesActions, originalBands) {
   return ({ datapoint: xyDatapoint, name }, series) => {
     const raw = xyDatapoint;
-    const resolvedName = raw.seriesName ?? name ?? "";
+    const resolvedName = (0, import_single_line_name.singleLineName)(raw.seriesName ?? name ?? "");
     const band = findByName(originalBands, resolvedName);
     const isLegendTrigger = series !== void 0;
     const datapoint = isLegendTrigger ? void 0 : buildBandDatapoint(raw);

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

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

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

@@ -20,17 +20,17 @@ __export(transformer_data_to_xy_exports, {
   transformTimeseriesDataToXYChart: () => transformTimeseriesDataToXYChart
 });
 module.exports = __toCommonJS(transformer_data_to_xy_exports);
-var import_single_line_name = require("../../core/utils/single-line-name.js");
 const mapTimeseries = (slot, seriesId) => {
   const { datapoints, name, unit, ...extraSeriesProps } = slot.data;
-  const seriesName = (0, import_single_line_name.singleLineName)(name);
   const data = datapoints.map((datapoint) => ({
     ...extraSeriesProps,
     start: datapoint.start,
     end: datapoint.end,
     center: datapoint.center,
     value: datapoint.value,
-    seriesName,
+    resolvedCenter: datapoint.center ?? datapoint.start,
+    resolvedEnd: datapoint.center !== void 0 ? void 0 : datapoint.end,
+    seriesName: name,
     seriesId
   }));
   const pointsDisplay = "pointsDisplay" in slot ? slot.pointsDisplay : void 0;
@@ -38,14 +38,13 @@ const mapTimeseries = (slot, seriesId) => {
 };
 const mapBand = (slot, seriesId) => {
   const { datapoints, name, unit, ...extraSeriesProps } = slot.data;
-  const seriesName = (0, import_single_line_name.singleLineName)(name);
   const data = datapoints.map((datapoint) => ({
     ...extraSeriesProps,
     start: datapoint.start,
     end: datapoint.end,
     y0: datapoint.y0,
     y1: datapoint.y1,
-    seriesName,
+    seriesName: name,
     seriesId
   }));
   return { data, unit, seriesId, color: slot.color };

package/charts/xy-chart-adoption/timeseries/types/internal-types.d.ts

@@ -3,12 +3,12 @@ export type RawTimeseriesPoint = {
     end?: Date;
     center?: Date;
     value: number;
-    seriesName?: string;
+    seriesName?: string | string[];
 };
 export type RawBandPoint = {
     start: Date;
     end?: Date;
     y0: number;
     y1: number;
-    seriesName?: string;
+    seriesName?: string | string[];
 };

package/charts/xy-chart-adoption/timeseries/types/timeseries-config.d.ts

@@ -0,0 +1,100 @@
+import type { TimeseriesChartToolbarConfig, TimeseriesToolbarInternalProps } from './toolbar.js';
+import type { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';
+import type { PointsDisplay } from '../../../core/components/canvas/types/canvas-shape.js';
+import type { ColorPalette, CustomColorPalette } from '../../../core/types/color-palette.js';
+import { ColorRuleProps } from '../../../core/types/color-rule.js';
+import type { TimeGapPolicy } from '../../../core/types/gap-policy.js';
+import type { ChartInteractionsConfig, ZoomInteractions } from '../../../core/types/interactions.js';
+import type { ValueRepresentation } from '../../../core/types/scales.js';
+import type { DateThresholdConfig } from '../../../core/types/thresholds.js';
+import type { SeriesCurve } from '../../../core/types/timeseries.js';
+import type { WithId } from '../../../core/types/with-id.js';
+import type { TimeseriesChartLegendProps } from '../../../timeseries/slots/Legend.js';
+import type { TimeseriesSelectProps } from '../../../timeseries/slots/Select.js';
+import type { TimeseriesChartTooltipProps } from '../../../timeseries/slots/Tooltip.js';
+import type { TimeseriesChartXAxisProps } from '../../../timeseries/slots/XAxis.js';
+import type { TimeseriesChartYAxisProps } from '../../../timeseries/slots/YAxis.js';
+import type { AnnotationsSlotsConfig } from '../utils/collect-annotations-slots.js';
+/**
+ * Resolved config + slots consumed by `createTimeseriesConfiguration`.
+ */
+export type TimeseriesZoomDomain = Date[] | number[];
+export interface TimeseriesChartSlots {
+    toolbar: TimeseriesToolbarInternalProps;
+    legend: TimeseriesChartLegendProps;
+    xAxis?: TimeseriesChartXAxisProps;
+    tooltip: TimeseriesChartTooltipProps;
+    yAxis: TimeseriesChartYAxisProps[];
+    annotations?: AnnotationsSlotsConfig;
+    thresholds: DateThresholdConfig[];
+    interactions: ChartInteractionsConfig;
+    select?: TimeseriesSelectProps;
+    colorRules: ColorRuleProps[];
+}
+export interface TimeseriesChartConfigProperties extends ZoomInteractions<TimeseriesZoomDomain> {
+    gapPolicy?: TimeGapPolicy;
+    pointsDisplay?: PointsDisplay;
+    valueRepresentation?: ValueRepresentation;
+    tooltip?: TimeseriesChartTooltipProps;
+    toolbar?: TimeseriesChartToolbarConfig;
+    interactions?: ChartInteractionsConfig;
+    legend?: TimeseriesChartLegendProps;
+    xAxis?: TimeseriesChartXAxisProps;
+    yAxis?: TimeseriesChartYAxisProps[];
+    colorPalette?: ColorPalette | CustomColorPalette;
+    truncationMode?: TruncationMode;
+    thresholdIndicators?: DateThresholdConfig[];
+    curve?: SeriesCurve;
+    infiniteZoom?: boolean;
+    colorRules?: ColorRuleProps[];
+    pan?: {
+        disabled?: boolean;
+    };
+    zoom?: {
+        disabled?: boolean;
+    };
+}
+export type TimeseriesChartTooltipConfig = Required<TimeseriesChartTooltipProps>;
+export interface TimeseriesChartLegendConfig extends Required<Omit<TimeseriesChartLegendProps, 'onRatioChange' | 'initialRatio'>> {
+    onRatioChange?: (ratio: number) => void;
+    initialRatio?: TimeseriesChartLegendProps['initialRatio'];
+}
+export interface TimeseriesChartConfigProps extends ZoomInteractions<TimeseriesZoomDomain> {
+    gapPolicy?: TimeGapPolicy;
+    pointsDisplay?: PointsDisplay;
+    valueRepresentation?: ValueRepresentation;
+    colorPalette?: ColorPalette | CustomColorPalette;
+    truncationMode?: TruncationMode;
+    curve?: SeriesCurve;
+    infiniteZoom?: boolean;
+    select?: TimeseriesSelectProps;
+}
+export interface TimeseriesChartYAxisConfig {
+    left?: TimeseriesChartYAxisProps;
+    right?: TimeseriesChartYAxisProps;
+}
+export type TimeseriesChartXAxisConfig = TimeseriesChartXAxisProps;
+export type TimeseriesChartThresholdConfig = DateThresholdConfig;
+export interface TimeseriesChartThresholdsConfig {
+    left?: WithId<TimeseriesChartThresholdConfig>[];
+    right?: WithId<TimeseriesChartThresholdConfig>[];
+}
+export interface TimeseriesChartConfiguration extends ZoomInteractions<TimeseriesZoomDomain> {
+    gapPolicy: TimeGapPolicy;
+    pointsDisplay: PointsDisplay;
+    valueRepresentation: ValueRepresentation;
+    colorPalette: ColorPalette | CustomColorPalette;
+    tooltip: TimeseriesChartTooltipConfig;
+    interactions: ChartInteractionsConfig;
+    toolbar?: TimeseriesToolbarInternalProps;
+    legend: TimeseriesChartLegendConfig;
+    xAxis?: TimeseriesChartXAxisConfig;
+    yAxis: TimeseriesChartYAxisConfig;
+    annotations: AnnotationsSlotsConfig | undefined;
+    truncationMode: TruncationMode;
+    thresholds?: TimeseriesChartThresholdsConfig;
+    curve?: SeriesCurve;
+    infiniteZoom: boolean;
+    select?: TimeseriesSelectProps;
+    colorRules: ColorRuleProps[];
+}

package/charts/{timeseries/components/annotations-timeseries/constants.js → xy-chart-adoption/timeseries/types/timeseries-config.js}

@@ -2,10 +2,6 @@ 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))
@@ -15,9 +11,5 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var constants_exports = {};
-__export(constants_exports, {
-  ANNOTATIONS_PADDING_BOTTOM: () => ANNOTATIONS_PADDING_BOTTOM
-});
-module.exports = __toCommonJS(constants_exports);
-const ANNOTATIONS_PADDING_BOTTOM = 6;
+var timeseries_config_exports = {};
+module.exports = __toCommonJS(timeseries_config_exports);