@dynatrace/strato-components 3.8.0 → 3.9.0

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import type { Unit } from '@dynatrace-sdk/units';
+import type { TimeseriesChartConfiguration } from './timeseries-config.js';
 import type { MaskingProps } from '../../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../../core/types/styling-props.js';
 import type { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';
@@ -9,8 +10,11 @@ import type { TimeGapPolicy } from '../../../core/types/gap-policy.js';
 import type { ZoomChangeHandler } from '../../../core/types/interactions.js';
 import type { ValueRepresentation } from '../../../core/types/scales.js';
 import type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';
+import type { DateThresholdConfig } from '../../../core/types/thresholds.js';
 import type { Timeseries, TimeseriesDatapoint, TimeseriesUnit } from '../../../core/types/timeseries.js';
 import type { ProgrammaticZoomHandlers } from '../../../core/types/zoom.js';
+export type TimeseriesChartThresholdIndicatorProps = DateThresholdConfig;
+export type ResolvedTimeseriesChartConfig = TimeseriesChartConfiguration;
 export type TimeseriesSelectActions = (selectedSeries: Timeseries[], selectionDomain: [Date, Date]) => ReactNode | Promise<ReactNode>;
 export declare const CHART_VARIANT_OPTIONS: readonly ["line", "area", "bar"];
 export type ChartVariant = (typeof CHART_VARIANT_OPTIONS)[number];

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

@@ -0,0 +1,10 @@
+import type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';
+import { BaseToolbarProps, ChartToolbarConfig, InternalChartToolbarConfigured } from '../../../core/types/toolbar.js';
+export interface TimeseriesChartToolbarConfig extends ChartToolbarConfig {
+    /** Toggles the toolbar display */
+    enabled?: boolean;
+}
+export type TimeseriesChartToolbarSlotProps = BaseToolbarProps;
+export interface TimeseriesToolbarInternalProps extends InternalChartToolbarConfigured, BehaviorTrackingProps {
+    enabled?: boolean;
+}

package/charts/xy-chart-adoption/timeseries/types/toolbar.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 toolbar_exports = {};
+module.exports = __toCommonJS(toolbar_exports);

package/charts/xy-chart-adoption/timeseries/utils/build-timeseries-imperative-handle.d.ts

@@ -1,4 +1,13 @@
 import type { RefObject } from 'react';
 import type { XYChartRef } from '../../../xy-chart/types/xy-chart.js';
-import type { TimeseriesChartRef } from '../types/timeseries.js';
-export declare const buildTimeseriesImperativeHandle: (xyRef: RefObject<XYChartRef | null>) => TimeseriesChartRef;
+import type { ResolvedTimeseriesChartConfig, TimeseriesChartRef } from '../types/timeseries.js';
+/**
+ * Builds the Timeseries-shaped imperative handle for `TimeseriesToXY`.
+ *
+ * - All programmatic interaction methods are delegated to the inner
+ *   `XYChart` ref.
+ * - `getConfig()` returns a Timeseries-shaped serialized payload built from
+ *   the resolved `TimeseriesChartConfiguration` (see
+ *   `serializeTimeseriesConfig`).
+ */
+export declare const buildTimeseriesImperativeHandle: (xyRef: RefObject<XYChartRef | null>, config: ResolvedTimeseriesChartConfig) => TimeseriesChartRef;

package/charts/xy-chart-adoption/timeseries/utils/build-timeseries-imperative-handle.js

@@ -20,11 +20,12 @@ __export(build_timeseries_imperative_handle_exports, {
   buildTimeseriesImperativeHandle: () => buildTimeseriesImperativeHandle
 });
 module.exports = __toCommonJS(build_timeseries_imperative_handle_exports);
-const buildTimeseriesImperativeHandle = (xyRef) => ({
+var import_serialize_timeseries_config = require("./serialize-timeseries-config.js");
+const buildTimeseriesImperativeHandle = (xyRef, config) => ({
   get element() {
     return xyRef.current?.element ?? null;
   },
-  getConfig: () => xyRef.current?.getConfig() ?? "{}",
+  getConfig: () => (0, import_serialize_timeseries_config.serializeTimeseriesConfig)(config),
   downloadData: () => xyRef.current?.downloadData(),
   exploreMode: () => xyRef.current?.exploreMode(),
   zoomMode: () => xyRef.current?.zoomMode(),

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

@@ -0,0 +1,39 @@
+import type { PointsDisplay } from '../../../core/components/canvas/types/canvas-shape.js';
+import { ColorPalette, CustomColorPalette } from '../../../core/types/color-palette.js';
+import type { TimeGapPolicy } from '../../../core/types/gap-policy.js';
+import { ValueRepresentation } from '../../../core/types/scales.js';
+import { SeriesCurve } from '../../../core/types/timeseries.js';
+import { TimeseriesChartLegendProps } from '../../../timeseries/slots/Legend.js';
+import { TimeseriesChartTooltipProps } from '../../../timeseries/slots/Tooltip.js';
+import { TimeseriesChartXAxisProps } from '../../../timeseries/slots/XAxis.js';
+import { TimeseriesChartYAxisProps } from '../../../timeseries/slots/YAxis.js';
+import { TimeseriesChartConfigProperties, TimeseriesChartConfigProps, TimeseriesChartConfiguration, TimeseriesChartLegendConfig, TimeseriesChartSlots, TimeseriesChartThresholdConfig, TimeseriesChartThresholdsConfig, TimeseriesChartTooltipConfig, TimeseriesChartXAxisConfig, TimeseriesChartYAxisConfig, TimeseriesZoomDomain } from '../types/timeseries-config.js';
+import type { TimeseriesChartThresholdIndicatorProps } from '../types/timeseries.js';
+import { TimeseriesChartToolbarConfig, TimeseriesChartToolbarSlotProps, TimeseriesToolbarInternalProps } from '../types/toolbar.js';
+export declare function getYAxisConfiguration(slotsYAxis: TimeseriesChartYAxisProps[], contextYAxis: TimeseriesChartYAxisProps[] | undefined): TimeseriesChartYAxisConfig;
+export declare function getLegendConfiguration(contextLegend: TimeseriesChartLegendProps | undefined, slotsLegend: TimeseriesChartLegendProps): TimeseriesChartLegendConfig;
+export declare function getTooltipConfiguration(contextTooltip: TimeseriesChartTooltipProps | undefined, slotsTooltip: TimeseriesChartTooltipProps): TimeseriesChartTooltipConfig;
+export declare function getXAxisConfiguration(contextXAxis: TimeseriesChartXAxisProps | undefined, slotsXAxis: TimeseriesChartXAxisProps | undefined): TimeseriesChartXAxisConfig;
+export declare function getThresholdsConfiguration(contextThresholds?: TimeseriesChartThresholdConfig[], slotsThresholds?: TimeseriesChartThresholdIndicatorProps[]): TimeseriesChartThresholdsConfig | undefined;
+export declare function getToolbar(contextToolbar: TimeseriesChartToolbarConfig | undefined, slotsChartToolbar: TimeseriesChartToolbarSlotProps | undefined, slotDownloadCSV?: {
+    enabled?: boolean;
+}, contextDownloadCSV?: {
+    enabled?: boolean;
+}): TimeseriesToolbarInternalProps;
+export declare function getGapPolicyConfiguration(contextGapPolicy?: TimeGapPolicy, propsGapPolicy?: TimeGapPolicy): TimeGapPolicy;
+export declare function getPointsDisplayConfiguration(contextPointsDisplay?: PointsDisplay, propsPointsDisplay?: PointsDisplay): "auto" | "always" | "never";
+export declare function getValueRepresentationConfiguration(contextValueRepresentation?: ValueRepresentation, propsValueRepresentation?: ValueRepresentation): "absolute" | "relative";
+export declare function getColorPaletteConfiguration(contextColorPalette?: ColorPalette | CustomColorPalette, propsColorPalette?: ColorPalette | CustomColorPalette): "blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | "status" | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | CustomColorPalette;
+export declare function getSeriesCurveConfiguration(contextConfig?: SeriesCurve, propsConfig?: SeriesCurve): SeriesCurve;
+export declare function getInfiniteZoomConfiguration(contextConfig?: boolean, propsConfig?: boolean): boolean;
+export declare function getInitialZoomConfiguration(contextConfig?: TimeseriesZoomDomain, propsConfig?: TimeseriesZoomDomain): TimeseriesZoomDomain | undefined;
+export declare function getCurrentZoomConfiguration(contextConfig?: TimeseriesZoomDomain, propsConfig?: TimeseriesZoomDomain): TimeseriesZoomDomain | undefined;
+/**
+ * Creates a timeseries Configuration merging the configuration provided in
+ * the context config, slots, and defaults.
+ */
+export declare function createTimeseriesConfiguration(slots: TimeseriesChartSlots, contextConfig: TimeseriesChartConfigProperties, timeseriesChartConfigProps: TimeseriesChartConfigProps): TimeseriesChartConfiguration;
+/**
+ * Deserializes a Timeseries string config
+ */
+export declare function deserializeConfig(serializedConfig: string): TimeseriesChartConfigProperties;

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

@@ -0,0 +1,289 @@
+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 chart_configuration_exports = {};
+__export(chart_configuration_exports, {
+  createTimeseriesConfiguration: () => createTimeseriesConfiguration,
+  deserializeConfig: () => deserializeConfig,
+  getColorPaletteConfiguration: () => getColorPaletteConfiguration,
+  getCurrentZoomConfiguration: () => getCurrentZoomConfiguration,
+  getGapPolicyConfiguration: () => getGapPolicyConfiguration,
+  getInfiniteZoomConfiguration: () => getInfiniteZoomConfiguration,
+  getInitialZoomConfiguration: () => getInitialZoomConfiguration,
+  getLegendConfiguration: () => getLegendConfiguration,
+  getPointsDisplayConfiguration: () => getPointsDisplayConfiguration,
+  getSeriesCurveConfiguration: () => getSeriesCurveConfiguration,
+  getThresholdsConfiguration: () => getThresholdsConfiguration,
+  getToolbar: () => getToolbar,
+  getTooltipConfiguration: () => getTooltipConfiguration,
+  getValueRepresentationConfiguration: () => getValueRepresentationConfiguration,
+  getXAxisConfiguration: () => getXAxisConfiguration,
+  getYAxisConfiguration: () => getYAxisConfiguration
+});
+module.exports = __toCommonJS(chart_configuration_exports);
+var import_lodash_es = require("lodash");
+var import_is_valid_points_display = require("../../../core/components/canvas/utils/is-valid-points-display.js");
+var import_constants = require("../../../core/constants.js");
+var import_ColorRule = require("../../../core/slots/ColorRule.js");
+var import_color_palette = require("../../../core/types/color-palette.js");
+var import_getValidColor = require("../../../core/utils/getValidColor.js");
+var import_interactions = require("../../../core/utils/interactions.js");
+var import_is_valid_color_palette = require("../../../core/utils/is-valid-color-palette.js");
+var import_is_valid_legend_position = require("../../../core/utils/is-valid-legend-position.js");
+var import_is_valid_series_display_mode = require("../../../core/utils/is-valid-series-display-mode.js");
+var import_is_valid_tooltip_variant = require("../../../core/utils/is-valid-tooltip-variant.js");
+var import_is_valid_value_representation = require("../../../core/utils/is-valid-value-representation.js");
+var import_constants2 = require("../constants.js");
+const sanitizeYAxisConfig = (yAxes) => {
+  const reversedYAxes = yAxes.reverse();
+  const leftAxis = reversedYAxes.find(
+    (axis) => axis?.position === "left" || axis?.position === void 0
+  );
+  const rightAxis = reversedYAxes.find((axis) => axis?.position === "right");
+  const sanitizedYAxes = {};
+  if (leftAxis) {
+    sanitizedYAxes.left = leftAxis;
+  }
+  if (rightAxis) {
+    sanitizedYAxes.right = rightAxis;
+  }
+  return sanitizedYAxes;
+};
+function getYAxisConfiguration(slotsYAxis, contextYAxis) {
+  const contextConfig = contextYAxis === void 0 ? {} : sanitizeYAxisConfig(contextYAxis);
+  const slotsConfig = slotsYAxis === void 0 ? {} : sanitizeYAxisConfig(slotsYAxis);
+  const { left, right } = (0, import_lodash_es.merge)({}, contextConfig, slotsConfig);
+  if (left === void 0 && right === void 0) {
+    return import_constants2.defaultYAxis;
+  }
+  const result = {};
+  if (left) {
+    result.left = (0, import_lodash_es.merge)({}, import_constants2.defaultYAxis.left, left);
+  }
+  if (right) {
+    const defaultRight = { ...import_constants2.defaultYAxis.left, position: "right" };
+    result.right = (0, import_lodash_es.merge)({}, defaultRight, right);
+  }
+  return result;
+}
+function getLegendConfiguration(contextLegend, slotsLegend) {
+  const legendConfig = (0, import_lodash_es.merge)(
+    {},
+    import_constants2.defaultLegend,
+    contextLegend,
+    slotsLegend
+  );
+  legendConfig.position = (0, import_is_valid_legend_position.isValidLegendPosition)(legendConfig.position) ? legendConfig.position : import_constants2.defaultLegend.position;
+  return legendConfig;
+}
+function getTooltipConfiguration(contextTooltip, slotsTooltip) {
+  const tooltip = (0, import_lodash_es.merge)(
+    {},
+    { variant: import_constants2.defaultTooltipVariant },
+    contextTooltip,
+    slotsTooltip
+  );
+  tooltip.variant = (0, import_is_valid_tooltip_variant.isValidTooltipVariant)(tooltip.variant) ? tooltip.variant : import_constants2.defaultTooltipVariant;
+  if (tooltip.seriesDisplayMode) {
+    tooltip.seriesDisplayMode = (0, import_is_valid_series_display_mode.isValidSeriesDisplayMode)(
+      tooltip.seriesDisplayMode
+    ) ? tooltip.seriesDisplayMode : "multi-line";
+  } else {
+    tooltip.seriesDisplayMode = tooltip.variant === "shared" ? "single-line" : "multi-line";
+  }
+  return tooltip;
+}
+function getXAxisConfiguration(contextXAxis, slotsXAxis) {
+  return (0, import_lodash_es.merge)({}, contextXAxis, slotsXAxis);
+}
+function getThresholdsConfiguration(contextThresholds = [], slotsThresholds = []) {
+  const allThresholds = contextThresholds.concat(slotsThresholds).map((threshold) => ({
+    ...threshold,
+    id: crypto.randomUUID(),
+    position: !threshold.position ? "left" : threshold.position,
+    color: (0, import_getValidColor.isValidCSSColor)(threshold.color) ? threshold.color : import_constants2.DEFAULT_SCALE_FALLBACK_COLOR
+  }));
+  if (!allThresholds.length) {
+    return void 0;
+  }
+  const thresholdConfig = {};
+  thresholdConfig.left = allThresholds.filter(
+    (threshold) => threshold.position === "left"
+  );
+  thresholdConfig.right = allThresholds.filter(
+    (threshold) => threshold.position === "right"
+  );
+  return thresholdConfig;
+}
+const isUndefinedOrIsEmpty = (value) => {
+  return (0, import_lodash_es.isUndefined)(value) && (0, import_lodash_es.isEmpty)(value);
+};
+const processToolbarConfig = (config) => {
+  if (!config) {
+    return config;
+  }
+  const { hidden, ...rest } = config;
+  if (hidden === true) {
+    return { ...rest, enabled: false };
+  }
+  return config;
+};
+function getToolbar(contextToolbar, slotsChartToolbar, slotDownloadCSV, contextDownloadCSV) {
+  const hasNoDownloadData = isUndefinedOrIsEmpty(slotDownloadCSV) && isUndefinedOrIsEmpty(contextDownloadCSV);
+  if (!contextToolbar && (0, import_lodash_es.isEmpty)(slotsChartToolbar) && hasNoDownloadData) {
+    return { ...import_constants2.defaultToolbar };
+  }
+  const processedContextToolbar = processToolbarConfig(contextToolbar);
+  const processedSlotsToolbar = processToolbarConfig(slotsChartToolbar);
+  return (0, import_lodash_es.merge)(
+    {},
+    import_constants2.defaultToolbar,
+    processedContextToolbar,
+    processedSlotsToolbar,
+    {
+      downloadData: slotDownloadCSV ?? contextDownloadCSV
+    }
+  );
+}
+function getGapPolicyConfiguration(contextGapPolicy, propsGapPolicy) {
+  return propsGapPolicy ?? contextGapPolicy ?? import_constants2.defaultGapPolicy;
+}
+function getPointsDisplayConfiguration(contextPointsDisplay, propsPointsDisplay) {
+  const pointsDisplay = propsPointsDisplay ?? contextPointsDisplay ?? import_constants2.defaultPointsDisplay;
+  return (0, import_is_valid_points_display.isValidPointsDisplay)(pointsDisplay) ? pointsDisplay : import_constants2.defaultPointsDisplay;
+}
+function getValueRepresentationConfiguration(contextValueRepresentation, propsValueRepresentation) {
+  const valueRepresentation = propsValueRepresentation ?? contextValueRepresentation ?? import_constants2.defaultValueRepresentation;
+  return (0, import_is_valid_value_representation.isValidValueRepresentation)(valueRepresentation) ? valueRepresentation : import_constants2.defaultValueRepresentation;
+}
+function getColorPaletteConfiguration(contextColorPalette, propsColorPalette) {
+  const colorPalette = propsColorPalette ?? contextColorPalette ?? import_constants2.defaultColorPalette;
+  return (0, import_color_palette.isCustomColorPalette)(colorPalette) || (0, import_is_valid_color_palette.isValidColorPalette)(colorPalette) ? colorPalette : import_constants2.defaultTimeseriesChartConfig.colorPalette ?? import_constants2.defaultColorPalette;
+}
+function getSeriesCurveConfiguration(contextConfig, propsConfig) {
+  return propsConfig ?? contextConfig ?? import_constants2.defaultSeriesCurve;
+}
+function getInfiniteZoomConfiguration(contextConfig, propsConfig) {
+  return propsConfig ?? contextConfig ?? import_constants.DEFAULT_INFINITE_ZOOM;
+}
+function getInitialZoomConfiguration(contextConfig, propsConfig) {
+  return propsConfig ?? contextConfig;
+}
+function getCurrentZoomConfiguration(contextConfig, propsConfig) {
+  return propsConfig ?? contextConfig;
+}
+function createTimeseriesConfiguration(slots, contextConfig, timeseriesChartConfigProps) {
+  const yAxis = getYAxisConfiguration(slots.yAxis, contextConfig.yAxis);
+  const truncationMode = timeseriesChartConfigProps?.truncationMode ?? contextConfig.truncationMode ?? import_constants.DEFAULT_TRUNCATION_MODE;
+  const legend = getLegendConfiguration(contextConfig.legend, slots.legend);
+  const tooltip = getTooltipConfiguration(contextConfig.tooltip, slots.tooltip);
+  const xAxis = getXAxisConfiguration(contextConfig.xAxis, slots.xAxis);
+  const configThresholds = contextConfig.thresholdIndicators || [];
+  const thresholds = getThresholdsConfiguration(
+    configThresholds,
+    slots.thresholds
+  );
+  const toolbar = getToolbar(contextConfig.toolbar, slots.toolbar);
+  const propsInteractions = {
+    onZoomChange: timeseriesChartConfigProps.onZoomChange
+  };
+  const hasContextInteractions = contextConfig && (contextConfig.pan || contextConfig.zoom);
+  const chartConfigInteractions = hasContextInteractions ? {
+    pan: { enabled: contextConfig.pan?.disabled !== true },
+    zoom: { enabled: contextConfig.zoom?.disabled !== true },
+    zoomX: { enabled: contextConfig.zoom?.disabled !== true }
+  } : {};
+  const interactions = (0, import_interactions.getInteractions)(
+    contextConfig.interactions,
+    slots.interactions,
+    propsInteractions,
+    chartConfigInteractions
+  );
+  const gapPolicy = getGapPolicyConfiguration(
+    contextConfig.gapPolicy,
+    timeseriesChartConfigProps?.gapPolicy
+  );
+  const pointsDisplay = getPointsDisplayConfiguration(
+    contextConfig.pointsDisplay,
+    timeseriesChartConfigProps?.pointsDisplay
+  );
+  const valueRepresentation = getValueRepresentationConfiguration(
+    contextConfig.valueRepresentation,
+    timeseriesChartConfigProps?.valueRepresentation
+  );
+  const colorPalette = getColorPaletteConfiguration(
+    contextConfig.colorPalette,
+    timeseriesChartConfigProps?.colorPalette
+  );
+  const curve = getSeriesCurveConfiguration(
+    contextConfig.curve,
+    timeseriesChartConfigProps?.curve
+  );
+  const infiniteZoom = getInfiniteZoomConfiguration(
+    contextConfig.infiniteZoom,
+    timeseriesChartConfigProps.infiniteZoom
+  );
+  const initialZoom = getInitialZoomConfiguration(
+    contextConfig.initialZoom,
+    timeseriesChartConfigProps.initialZoom
+  );
+  const currentZoom = getCurrentZoomConfiguration(
+    contextConfig.currentZoom,
+    timeseriesChartConfigProps.currentZoom
+  );
+  const select = timeseriesChartConfigProps.select ?? slots.select;
+  const colorRules = (contextConfig.colorRules ?? []).filter(import_ColorRule.isValidColorRule).concat(slots.colorRules ?? []);
+  return {
+    gapPolicy,
+    pointsDisplay,
+    valueRepresentation,
+    colorPalette,
+    legend,
+    tooltip,
+    toolbar,
+    xAxis,
+    yAxis,
+    annotations: slots.annotations,
+    truncationMode,
+    thresholds,
+    interactions,
+    initialZoom,
+    currentZoom,
+    infiniteZoom,
+    curve,
+    select,
+    colorRules
+  };
+}
+const dateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z$/;
+function reviver(key, value) {
+  if (typeof value === "string" && dateFormat.test(value)) {
+    return new Date(value);
+  }
+  return value;
+}
+function deserializeConfig(serializedConfig) {
+  try {
+    return (0, import_lodash_es.merge)(
+      {},
+      import_constants2.defaultTimeseriesChartConfig,
+      JSON.parse(serializedConfig, reviver)
+    );
+  } catch {
+    return import_constants2.defaultTimeseriesChartConfig;
+  }
+}

package/charts/xy-chart-adoption/timeseries/utils/derive-xychart-props-from-config.d.ts

@@ -0,0 +1,27 @@
+import type { IntentProps } from '../../../../core/slots/Intent/Intent.js';
+import type { ZoomChangeHandler } from '../../../core/types/interactions.js';
+import type { ToolbarPlacement } from '../../../core/types/toolbar.js';
+import type { ResolvedTimeseriesChartConfig } from '../types/timeseries.js';
+export type DerivedXYChartProps = {
+    /** Whether the XYChart x-axis should disable zoom. */
+    disableZoom: boolean;
+    /** Whether the XYChart x-axis should disable pan. */
+    disablePan: boolean;
+    /** Whether the XYChart toolbar should be visible. */
+    toolbarEnabled: boolean;
+    /** Toolbar placement (or undefined if defaults should apply). */
+    toolbarPlacement: ToolbarPlacement | undefined;
+    /** Resolved toolbar intents. */
+    toolbarIntents: IntentProps[] | undefined;
+    /**
+     * Effective onZoomChange handler. Timeseries exposes it both at root-prop
+     * level and (after merging) inside `interactions`. Root prop wins.
+     */
+    onZoomChange: ZoomChangeHandler | undefined;
+};
+/**
+ * Derives the props the `TimeseriesToXY` adapter needs to forward to the
+ * underlying `XYChart` (and its slots) from a resolved
+ * `TimeseriesChartConfiguration`.
+ */
+export declare const deriveXYChartPropsFromConfig: (config: ResolvedTimeseriesChartConfig, rootOnZoomChange: ZoomChangeHandler | undefined) => DerivedXYChartProps;

package/charts/xy-chart-adoption/timeseries/utils/derive-xychart-props-from-config.js

@@ -0,0 +1,30 @@
+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 derive_xychart_props_from_config_exports = {};
+__export(derive_xychart_props_from_config_exports, {
+  deriveXYChartPropsFromConfig: () => deriveXYChartPropsFromConfig
+});
+module.exports = __toCommonJS(derive_xychart_props_from_config_exports);
+const deriveXYChartPropsFromConfig = (config, rootOnZoomChange) => ({
+  disableZoom: config.interactions?.zoom?.enabled === false,
+  disablePan: config.interactions?.pan?.enabled === false,
+  toolbarEnabled: config.toolbar?.enabled !== false,
+  toolbarPlacement: config.toolbar?.placement,
+  toolbarIntents: config.toolbar?.intents,
+  onZoomChange: rootOnZoomChange ?? config.interactions?.onZoomChange
+});

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

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import { TimeseriesChartSlots } from '../types/timeseries-config.js';
+export declare const iterateConfigSlots: (children: ReactNode) => TimeseriesChartSlots;