@dynatrace/strato-components 3.5.0 → 3.6.0

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

@@ -1,5 +1,6 @@
 import { type ConvertibleUnit, type FormatOptions, type Unit } from '@dynatrace-sdk/units';
 import { type AnyNumericFormatter, type CategoricalFormatter, type FormatterWithPrecision } from '../../core/types/formatter.js';
+import type { ContinuousScale } from '../../core/utils/has-horizontal-label-collision.js';
 interface AxisFormatterConfig {
     isRelative: boolean;
     type: string;
@@ -50,5 +51,16 @@ export type NiceUnitTicksResultOrNull = NiceUnitTicksResult | null;
  *
  * Requires explicit input and output units in formatterOptions.
  */
-export declare function computeNiceUnitTicks(domain: [number, number], formatterOptions: FormatOptions<Unit, ConvertibleUnit>, availableSize: number, orientation: 'horizontal' | 'vertical', formatter: FormatterWithPrecision): NiceUnitTicksResultOrNull;
+export declare function computeNiceUnitTicks(domain: [number, number], formatterOptions: FormatOptions<Unit, ConvertibleUnit>, availableSize: number, orientation: 'horizontal' | 'vertical', formatter: FormatterWithPrecision, scale?: ContinuousScale): NiceUnitTicksResultOrNull;
+export type NiceUnitTickCandidate = NiceUnitTicksResult & {
+    rawTicks: number[];
+};
+/**
+ * Returns a stateful candidate builder for `adaptivelyReduceHorizontalTicks`.
+ *
+ * Attempt 0 builds at `initialStep`; each subsequent attempt doubles the
+ * step. Exposed for unit testing — production callers should pass the result
+ * directly to `adaptivelyReduceHorizontalTicks`.
+ */
+export declare function createDoublingStepCandidateBuilder(initialStep: number, buildResult: (step: number) => NiceUnitTicksResult): (attempt: number) => NiceUnitTickCandidate;
 export {};

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

@@ -18,6 +18,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var generate_nice_unit_ticks_exports = {};
 __export(generate_nice_unit_ticks_exports, {
   computeNiceUnitTicks: () => computeNiceUnitTicks,
+  createDoublingStepCandidateBuilder: () => createDoublingStepCandidateBuilder,
   generateTicks: () => generateTicks,
   getBestModulusDivisor: () => getBestModulusDivisor,
   niceUnitDomain: () => niceUnitDomain,
@@ -26,6 +27,7 @@ __export(generate_nice_unit_ticks_exports, {
 module.exports = __toCommonJS(generate_nice_unit_ticks_exports);
 var import_units = require("@dynatrace-sdk/units");
 var import_formatter = require("../../core/types/formatter.js");
+var import_adaptively_reduce_horizontal_ticks = require("../../core/utils/adaptively-reduce-horizontal-ticks.js");
 var import_ticks = require("../../core/utils/ticks.js");
 var import_guards = require("../types/guards.js");
 function shouldUseNiceUnitTicks(config) {
@@ -106,7 +108,7 @@ function niceUnitDomain(domain, formatterOptions, niceMin, niceMax) {
     max: (0, import_units.convert)(nicedMax, outputUnit, inputUnit, true)
   };
 }
-function computeNiceUnitTicks(domain, formatterOptions, availableSize, orientation, formatter) {
+function computeNiceUnitTicks(domain, formatterOptions, availableSize, orientation, formatter, scale) {
   const { targetMin, targetMax, inputUnit, outputUnit } = convertDomainToTargetUnit(domain, formatterOptions);
   if (targetMin === targetMax) {
     return {
@@ -125,14 +127,43 @@ function computeNiceUnitTicks(domain, formatterOptions, availableSize, orientati
   if (step === 0) {
     return null;
   }
-  const targetTicks = generateTicks([targetMin, targetMax], step);
-  const baseUnitTicks = targetTicks.map(
-    (tick) => (0, import_units.convert)(tick, outputUnit, inputUnit, true)
+  const buildResult = (currentStep) => {
+    const targetTicks = generateTicks([targetMin, targetMax], currentStep);
+    if (targetTicks[targetTicks.length - 1] !== targetMax) {
+      targetTicks.push(targetMax);
+    }
+    if (targetTicks[0] !== targetMin) {
+      targetTicks.unshift(targetMin);
+    }
+    const baseUnitTicks = targetTicks.map(
+      (tick) => (0, import_units.convert)(tick, outputUnit, inputUnit, true)
+    );
+    return {
+      ticks: baseUnitTicks.map(String),
+      formattedTicks: baseUnitTicks.map((tick) => formatter(tick)),
+      numericTicks: baseUnitTicks
+    };
+  };
+  if (orientation !== "horizontal" || scale === void 0) {
+    return buildResult(step);
+  }
+  const reduced = (0, import_adaptively_reduce_horizontal_ticks.adaptivelyReduceHorizontalTicks)(
+    createDoublingStepCandidateBuilder(step, buildResult),
+    scale
   );
-  const formattedStrings = baseUnitTicks.map((tick) => formatter(tick));
   return {
-    ticks: baseUnitTicks.map(String),
-    formattedTicks: formattedStrings,
-    numericTicks: baseUnitTicks
+    ticks: reduced.ticks,
+    formattedTicks: reduced.formattedTicks,
+    numericTicks: reduced.numericTicks
+  };
+}
+function createDoublingStepCandidateBuilder(initialStep, buildResult) {
+  let currentStep = initialStep;
+  return (attempt) => {
+    if (attempt > 0) {
+      currentStep *= 2;
+    }
+    const r = buildResult(currentStep);
+    return { ...r, rawTicks: r.numericTicks };
   };
 }

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

@@ -1,6 +1,26 @@
+import { type NumberValue } from 'd3-scale';
 import type { DateTimeFormatter, FormatterWithPrecision, StringFormatter } from '../../core/types/formatter.js';
+import { type TickAxis } from '../../core/utils/formatter-by-ticks.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): {
+export declare function getTicksFormattedByConfig(config: XYChartAxisInternal | undefined, numTicks: number, scale: AnyXYChartScale | undefined, formatter: FormatterWithPrecision | DateTimeFormatter | StringFormatter | undefined, availableWidth?: number): {
     ticks: any[];
     formattedTicks: string[];
+} | {
+    numericTicks: number[];
+    ticks: string[];
+    formattedTicks: string[];
+    rawTicks: NumberValue[];
+};
+export type FormattedTickCandidate = TickAxis & {
+    rawTicks: NumberValue[];
 };
+/**
+ * Returns a stateful candidate builder for `adaptivelyReduceHorizontalTicks`.
+ *
+ * Attempt 0 returns `initialResult` directly. Each subsequent attempt halves
+ * the d3 tick-count hint (floored to `minTickCount`); if d3's nice-snapping
+ * returns the same count for a given hint, the next halving eventually forces
+ * d3 to pick a coarser nice step. Exposed for unit testing — production
+ * callers should pass the result directly to `adaptivelyReduceHorizontalTicks`.
+ */
+export declare function createHalvingHintCandidateBuilder(initialResult: TickAxis, getTicksForCount: (count: number) => TickAxis, minTickCount: number): (attempt: number) => FormattedTickCandidate;

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

@@ -17,28 +17,110 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var get_ticks_formatted_by_config_exports = {};
 __export(get_ticks_formatted_by_config_exports, {
+  createHalvingHintCandidateBuilder: () => createHalvingHintCandidateBuilder,
   getTicksFormattedByConfig: () => getTicksFormattedByConfig
 });
 module.exports = __toCommonJS(get_ticks_formatted_by_config_exports);
+var import_adaptively_reduce_horizontal_ticks = require("../../core/utils/adaptively-reduce-horizontal-ticks.js");
 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 MIN_TICK_COUNT = 2;
+function getTicksFormattedByConfig(config, numTicks, scale, formatter, availableWidth) {
   const axisType = config?.type || "";
   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,
+  const getTicksForCount = (0, import_guards.isLogarithmic)(axisType) ? (count) => (0, import_formatter_by_ticks.getFormattedTicks)(
+    count,
+    scale,
+    void 0,
+    formatter
+  ) : (count) => (0, import_formatter_by_ticks.getDateNumericalFormattedTicks)(
+    count,
     scale,
     (0, import_guards.isLinear)(axisType) && !config?.isRelative ? config?.unit : void 0,
     formatter
   );
+  const result = getTicksForCount(numTicks);
+  if (availableWidth === void 0 || scale === void 0) {
+    return result;
+  }
+  let initialResult = result;
+  if (result.formattedTicks.length < MIN_TICK_COUNT) {
+    const boosted = getTicksForCount(MIN_TICK_COUNT);
+    if (boosted.formattedTicks.length >= MIN_TICK_COUNT) {
+      initialResult = boosted;
+    } else {
+      return result;
+    }
+  }
+  const continuousScale = scale;
+  const rawDomain = typeof scale.domain === "function" ? scale.domain() : null;
+  const domainBounds = rawDomain !== null && rawDomain.length >= 2 ? [+rawDomain[0], +rawDomain[rawDomain.length - 1]] : void 0;
+  const reduced = (0, import_adaptively_reduce_horizontal_ticks.adaptivelyReduceHorizontalTicks)(
+    (0, import_guards.isLogarithmic)(axisType) ? createLogMajorTickThinningBuilder(initialResult, MIN_TICK_COUNT) : createHalvingHintCandidateBuilder(
+      initialResult,
+      getTicksForCount,
+      MIN_TICK_COUNT
+    ),
+    continuousScale,
+    { domainBounds }
+  );
+  return {
+    ...reduced,
+    numericTicks: reduced.rawTicks.map(Number)
+  };
+}
+function createLogMajorTickThinningBuilder(initialResult, minTickCount) {
+  const allTicks = initialResult.ticks;
+  const majorIndices = initialResult.formattedTicks.reduce(
+    (acc, label, i) => {
+      if (label !== "") {
+        acc.push(i);
+      }
+      return acc;
+    },
+    []
+  );
+  return (attempt) => {
+    if (attempt === 0) {
+      return {
+        ...initialResult,
+        rawTicks: allTicks
+      };
+    }
+    const step = Math.pow(2, attempt);
+    const selectedMajorIndices = majorIndices.filter(
+      (_, i) => i === 0 || i === majorIndices.length - 1 || i % step === 0
+    );
+    if (selectedMajorIndices.length < minTickCount) {
+      return null;
+    }
+    const selectedSet = new Set(selectedMajorIndices);
+    const newFormattedTicks = initialResult.formattedTicks.map((label, i) => {
+      if (label === "") {
+        return "";
+      }
+      return selectedSet.has(i) ? label : "";
+    });
+    return {
+      ...initialResult,
+      formattedTicks: newFormattedTicks,
+      rawTicks: allTicks
+    };
+  };
+}
+function createHalvingHintCandidateBuilder(initialResult, getTicksForCount, minTickCount) {
+  let hint = initialResult.formattedTicks.length;
+  return (attempt) => {
+    if (attempt === 0) {
+      return {
+        ...initialResult,
+        rawTicks: initialResult.ticks
+      };
+    }
+    hint = Math.max(Math.floor(hint / 2), minTickCount);
+    const next = getTicksForCount(hint);
+    return { ...next, rawTicks: next.ticks };
+  };
 }

package/charts/xy-chart/utils/query-hovered.d.ts

@@ -24,7 +24,7 @@ export declare const getPixelDimensionsForDatapoint: (datapoint: RectDatapointIn
 /**
  * Retrieves the datapoint that is currently being hovered over based on the given position.
  */
-export declare function getHoveredDatapoint(position: Point, series: RectSeriesWithDatapoints | BarSeriesWithDatapoints, axisIdToScales: AxisIdToScales, datapointMetadataMap: MapDatapoints, seriesToMetadata: SeriesToMetadata, axisIdToScaleDomain: AxisIdToScaleDomain): BarDatapoint | undefined;
+export declare function getHoveredDatapoint(position: Point, series: RectSeriesWithDatapoints | BarSeriesWithDatapoints, axisIdToScales: AxisIdToScales, datapointMetadataMap: MapDatapoints, seriesToMetadata: SeriesToMetadata, axisIdToScaleDomain: AxisIdToScaleDomain): BarDatapoint | RectDatapointInternal | undefined;
 export declare function buildQueryHovered(axisIdToScales: AxisIdToScales, datapointMetadataMap: MapDatapoints, seriesToMetadata: SeriesToMetadata, axisIdToScaleDomain: AxisIdToScaleDomain): {
     (arrayOfSeries: RectSeriesWithDatapoints[], position: Point): RectSeriesQueryResult | undefined;
     (arrayOfSeries: BarSeriesWithDatapoints[], position: Point): BarSeriesQueryResult | undefined;

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

@@ -0,0 +1,6 @@
+import { type TimeseriesChartRef } from './types/timeseries.js';
+export declare const TimeseriesToXY: (props: {
+    data?: import("../../index.js").Timeseries[];
+    variant?: import("./types/timeseries.js").ChartVariant;
+    children?: import("react").ReactNode;
+} & Record<string, unknown> & import("react").RefAttributes<TimeseriesChartRef>) => import("react").ReactElement | null;

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

@@ -0,0 +1,79 @@
+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 TimeseriesToXY_exports = {};
+__export(TimeseriesToXY_exports, {
+  TimeseriesToXY: () => TimeseriesToXY
+});
+module.exports = __toCommonJS(TimeseriesToXY_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_iterate_slots = require("./iterate-slots.js");
+var import_transformer_data_to_xy = require("./transformer-data-to-xy.js");
+var import_timeseries = require("./types/timeseries.js");
+var import_render_series = require("./utils/render-series.js");
+var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
+const TimeseriesToXY = (0, import_react.forwardRef)((props, _ref) => {
+  const { data = [], variant = import_timeseries.DEFAULT_VARIANT, children } = props;
+  const { line, bar, area, band, shapePriority } = (0, import_iterate_slots.iterateSeriesSlots)(children);
+  const buckets = {
+    line: variant === "line" ? [...data, ...line] : line,
+    area: variant === "area" ? [...data, ...area] : area,
+    bar: variant === "bar" ? [...data, ...bar] : bar,
+    band
+  };
+  const order = [...shapePriority];
+  if (data.length > 0 && !order.includes(variant)) {
+    order.push(variant);
+  }
+  const result = (0, import_transformer_data_to_xy.transformTimeseriesDataToXYChart)(buckets, order);
+  const seriesForShape = (shape) => {
+    switch (shape) {
+      case "line":
+        return result.line.map(import_render_series.renderLineSeries);
+      case "area":
+        return result.area.map(import_render_series.renderAreaSeries);
+      case "bar":
+        return result.bar.map(import_render_series.renderBarSeries);
+      case "band":
+        return result.band.map(import_render_series.renderBandSeries);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_XYChartRoot.XYChart, { data: [], children: [
+    order.flatMap(seriesForShape),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_XYChartRoot.XYChart.XAxis,
+      {
+        id: import_render_series.xAxisId,
+        type: "time",
+        position: "bottom",
+        min: "data-min",
+        max: "data-max"
+      }
+    ),
+    [...result.units].map((unit, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_XYChartRoot.XYChart.YAxis,
+      {
+        id: (0, import_render_series.defineAxisId)(unit),
+        type: "numerical",
+        unit,
+        position: index % 2 === 0 ? "left" : "right"
+      },
+      (0, import_render_series.defineAxisId)(unit)
+    ))
+  ] });
+});

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import type { ChartVariantInternal, TimeseriesBand } from './types/timeseries.js';
+import type { Timeseries } from '../../core/types/timeseries.js';
+export type SeriesSlots = {
+    line: Timeseries[];
+    area: Timeseries[];
+    bar: Timeseries[];
+    band: TimeseriesBand[];
+    shapePriority: ChartVariantInternal[];
+};
+export declare function iterateSeriesSlots(children: ReactNode): SeriesSlots;

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

@@ -0,0 +1,78 @@
+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 iterate_slots_exports = {};
+__export(iterate_slots_exports, {
+  iterateSeriesSlots: () => iterateSeriesSlots
+});
+module.exports = __toCommonJS(iterate_slots_exports);
+var import_react = require("react");
+var import_react_is = require("react-is");
+const SLOT_DISPLAY_NAMES = {
+  line: "TimeseriesChart.Line",
+  area: "TimeseriesChart.Area",
+  bar: "TimeseriesChart.Bar",
+  band: "TimeseriesChart.Band"
+};
+function iterateSeriesSlots(children) {
+  const line = [];
+  const area = [];
+  const bar = [];
+  const band = [];
+  const shapePriority = [];
+  import_react.Children.forEach(children, (child) => {
+    if (!(0, import_react_is.isElement)(child)) {
+      return;
+    }
+    const displayName = child.type.displayName;
+    switch (displayName) {
+      case SLOT_DISPLAY_NAMES.line: {
+        const { data } = child.props;
+        line.push(data);
+        if (!shapePriority.includes("line")) {
+          shapePriority.push("line");
+        }
+        break;
+      }
+      case SLOT_DISPLAY_NAMES.area: {
+        const { data } = child.props;
+        area.push(data);
+        if (!shapePriority.includes("area")) {
+          shapePriority.push("area");
+        }
+        break;
+      }
+      case SLOT_DISPLAY_NAMES.bar: {
+        const { data } = child.props;
+        bar.push(data);
+        if (!shapePriority.includes("bar")) {
+          shapePriority.push("bar");
+        }
+        break;
+      }
+      case SLOT_DISPLAY_NAMES.band: {
+        const { data } = child.props;
+        band.push(data);
+        if (!shapePriority.includes("band")) {
+          shapePriority.push("band");
+        }
+        break;
+      }
+    }
+  });
+  return { line, area, bar, band, shapePriority };
+}

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

@@ -1,13 +1,23 @@
+import type { ChartVariantInternal, TimeseriesBand } from './types/timeseries.js';
 import type { ChartUnit } from '../../core/types/chart-unit.js';
 import type { Timeseries } from '../../core/types/timeseries.js';
 import type { XYChartData } from '../../xy-chart/types/xy-chart.js';
-interface TransformTimeseriesDataResult {
-    seriesProps: SeriesProps[];
-    units: Set<ChartUnit>;
+export interface TimeseriesPerShapeInput {
+    line: Timeseries[];
+    area: Timeseries[];
+    bar: Timeseries[];
+    band: TimeseriesBand[];
 }
-type SeriesProps = {
+export type SeriesProps = {
     data: XYChartData[];
     unit: ChartUnit;
+    seriesId: string;
 };
-export declare function transformTimeseriesDataToXYChart(data: Timeseries[]): TransformTimeseriesDataResult;
-export {};
+export interface TransformTimeseriesDataResult {
+    line: SeriesProps[];
+    area: SeriesProps[];
+    bar: SeriesProps[];
+    band: SeriesProps[];
+    units: Set<ChartUnit>;
+}
+export declare function transformTimeseriesDataToXYChart(input: TimeseriesPerShapeInput, shapeRenderOrder: ChartVariantInternal[]): TransformTimeseriesDataResult;

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

@@ -21,24 +21,60 @@ __export(transformer_data_to_xy_exports, {
 });
 module.exports = __toCommonJS(transformer_data_to_xy_exports);
 var import_single_line_name = require("../../core/utils/single-line-name.js");
-function transformTimeseriesDataToXYChart(data) {
+const mapTimeseries = (series, seriesId) => {
+  const { datapoints, name, unit, ...extraSeriesProps } = series;
+  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,
+    seriesId
+  }));
+  return { data, unit, seriesId };
+};
+const mapBand = (band, seriesId) => {
+  const { datapoints, name, unit, ...extraSeriesProps } = band;
+  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,
+    seriesId
+  }));
+  return { data, unit, seriesId };
+};
+function transformTimeseriesDataToXYChart(input, shapeRenderOrder) {
   const units = /* @__PURE__ */ new Set();
-  const seriesProps = [];
-  data.forEach((series, index) => {
-    const { datapoints, name, unit, ...extraSeriesProps } = series;
-    const seriesName = (0, import_single_line_name.singleLineName)(name);
-    const seriesId = index.toString();
-    const xyData = datapoints.map((datapoint) => ({
-      ...extraSeriesProps,
-      start: datapoint.start,
-      end: datapoint.end,
-      center: datapoint.center,
-      value: datapoint.value,
-      seriesName,
-      seriesId
-    }));
-    seriesProps.push({ data: xyData, unit });
-    units.add(unit);
+  const result = {
+    line: [],
+    area: [],
+    bar: [],
+    band: [],
+    units
+  };
+  let globalIndex = 0;
+  shapeRenderOrder.forEach((shape) => {
+    if (shape === "band") {
+      input.band.forEach((band) => {
+        const mapped = mapBand(band, `${shape}-${globalIndex}`);
+        result.band.push(mapped);
+        units.add(mapped.unit);
+        globalIndex++;
+      });
+    } else {
+      input[shape].forEach((series) => {
+        const mapped = mapTimeseries(series, `${shape}-${globalIndex}`);
+        result[shape].push(mapped);
+        units.add(mapped.unit);
+        globalIndex++;
+      });
+    }
   });
-  return { seriesProps, units };
+  return result;
 }

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

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { ChartUnit } from '../../../core/types/chart-unit.js';
+import type { Timeseries } from '../../../core/types/timeseries.js';
+import type { ProgrammaticZoomHandlers } from '../../../core/types/zoom.js';
+export declare const CHART_VARIANT_OPTIONS: readonly ["line", "area", "bar"];
+export type ChartVariant = (typeof CHART_VARIANT_OPTIONS)[number];
+export type ChartVariantInternal = ChartVariant | 'band';
+export declare const DEFAULT_VARIANT: ChartVariant;
+export interface TimeseriesBandDataPoint {
+    y0: number;
+    y1: number;
+    start: Date;
+    end?: Date;
+}
+export interface TimeseriesBand extends Record<string, unknown> {
+    datapoints: TimeseriesBandDataPoint[];
+    name: string | string[];
+    unit?: ChartUnit;
+}
+export interface TimeseriesChartLineProps {
+    data: Timeseries;
+}
+export interface TimeseriesChartAreaProps {
+    data: Timeseries;
+}
+export interface TimeseriesChartBarProps {
+    data: Timeseries;
+}
+export interface TimeseriesChartBandProps {
+    data: TimeseriesBand;
+}
+export type TimeseriesChartProps = {
+    data?: Timeseries[];
+    variant?: ChartVariant;
+    children?: ReactNode;
+} & Record<string, unknown>;
+export interface TimeseriesChartRef extends ProgrammaticZoomHandlers {
+    element: HTMLDivElement | null;
+    getConfig: () => string;
+    downloadData: () => void;
+}

package/charts/xy-chart-adoption/timeseries/types/timeseries.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 timeseries_exports = {};
+__export(timeseries_exports, {
+  CHART_VARIANT_OPTIONS: () => CHART_VARIANT_OPTIONS,
+  DEFAULT_VARIANT: () => DEFAULT_VARIANT
+});
+module.exports = __toCommonJS(timeseries_exports);
+const CHART_VARIANT_OPTIONS = ["line", "area", "bar"];
+const DEFAULT_VARIANT = "line";

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

@@ -0,0 +1,8 @@
+import type { ChartUnit } from '../../../core/types/chart-unit.js';
+import type { SeriesProps } from '../transformer-data-to-xy.js';
+export declare const xAxisId = "x-axis";
+export declare const defineAxisId: (unit: ChartUnit) => string;
+export declare const renderLineSeries: (series: SeriesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderAreaSeries: (series: SeriesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderBarSeries: (series: SeriesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderBandSeries: (series: SeriesProps) => import("react/jsx-runtime").JSX.Element;