@dynatrace/strato-components 3.8.0 → 3.9.0

package/charts/xy-chart/processing-strategies/strategies/bar-series.js

@@ -23,6 +23,7 @@ module.exports = __toCommonJS(bar_series_exports);
 var import_fast_series = require("./fast-series.js");
 var import_groupable_series = require("./groupable-series.js");
 var import_stackable_series = require("./stackable-series.js");
+var import_single_line_name = require("../../../core/utils/single-line-name.js");
 var import_guards = require("../../types/guards.js");
 var import_xy_chart = require("../../types/xy-chart.js");
 var import_type_guards = require("../../utils/type-guards.js");
@@ -82,18 +83,20 @@ class BarSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
       seriesNameAccessor,
       datum
     });
+    const name = (0, import_single_line_name.singleLineName)(seriesName);
     const color = this.getColor(
       datum,
       seriesProps,
       context.colorPalette,
-      seriesName,
+      name,
       seriesIndex
     );
     return {
       xAxis,
       yAxis,
       ...color,
-      name: seriesName,
+      name,
+      nameSegments: Array.isArray(seriesName) ? seriesName : void 0,
       variant: variant ?? import_xy_chart.BAR_VARIANT_SINGLE,
       actions: seriesProps.actions,
       chartOrientation: (0, import_get_datapoints.getChartOrientation)(seriesProps)
@@ -277,18 +280,8 @@ class BarSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
   getDatapoint(datum, seriesProps, xAxis, yAxis) {
     return (0, import_get_bar_datapoints.getBarDatapoint)(datum, seriesProps, xAxis, yAxis);
   }
-  // ---------------------------------------------------------------------------
-  // Fast-numeric path (numerical X / numerical Y)
-  // Preconditions verified by `isEligibleForFastPath`:
-  //   – both axes are linear-numerical (not log, time, or categorical)
-  //   – orientation is vertical (x0 + y1 accessors set)
-  //   – variant is single or stack (not group)
-  //   – no labelAccessor
-  //   – all four accessors are flat strings (no lodash path traversal)
-  //   – first datum values at the accessor paths are numbers
-  // ---------------------------------------------------------------------------
   isEligibleForFastPath(data, seriesProps, xAxis, yAxis) {
-    if (!(0, import_guards.isLinear)(xAxis.type) || !(0, import_guards.isLinear)(yAxis.type)) {
+    if (!(0, import_guards.isLinear)(yAxis.type)) {
       return false;
     }
     if (seriesProps.variant === import_xy_chart.BAR_VARIANT_GROUP) {
@@ -309,11 +302,17 @@ class BarSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
     if (!(0, import_get_datapoints.isFlatStringPath)(x0Acc) || !(0, import_get_datapoints.isFlatStringPath)(x1Acc) || !(0, import_get_datapoints.isFlatStringPath)(y1Acc) || !(0, import_get_datapoints.isFlatStringPath)(seriesProps.seriesIdAccessor)) {
       return false;
     }
-    const d0 = data[0];
-    if (d0 === void 0) {
+    const datum0 = data[0];
+    if (datum0 === void 0) {
       return false;
     }
-    return typeof d0[x0Acc] === "number" && typeof d0[x1Acc] === "number" && typeof d0[y1Acc] === "number";
+    if ((0, import_guards.isTime)(xAxis.type)) {
+      return datum0[x0Acc] instanceof Date && datum0[x1Acc] instanceof Date && typeof datum0[y1Acc] === "number";
+    }
+    if ((0, import_guards.isLinear)(xAxis.type)) {
+      return typeof datum0[x0Acc] === "number" && typeof datum0[x1Acc] === "number" && typeof datum0[y1Acc] === "number";
+    }
+    return false;
   }
   getFastAxisKey(xAxisId, yAxisId) {
     return `${xAxisId}-${yAxisId}-vertical`;
@@ -341,8 +340,7 @@ class BarSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
     const len = data.length;
     for (let i = 0; i < len; i++) {
       const d = data[i];
-      const x0 = d[x0Acc];
-      const x1 = d[x1Acc];
+      const { x0, x1 } = this.resolveX(d[x0Acc], d[x1Acc], xAxis.type);
       const y1 = d[y1Acc];
       const seriesId = d[seriesIdAccessor];
       if (filteredSeriesIds !== void 0 && !filteredSeriesIds.has(seriesId)) {
@@ -374,11 +372,13 @@ class BarSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
     const x0Acc = seriesProps.x0Accessor;
     const x1Acc = seriesProps.x1Accessor;
     const y1Acc = seriesProps.y1Accessor;
-    const x0 = datum[x0Acc];
-    const x1 = datum[x1Acc];
-    const y1 = datum[y1Acc];
+    const d = datum;
+    const x0Raw = d[x0Acc];
+    const x1Raw = d[x1Acc];
+    const { x0, x1 } = this.resolveX(x0Raw, x1Raw, xAxis.type);
+    const y1 = d[y1Acc];
     const seriesIdAccessor = seriesProps.seriesIdAccessor;
-    const seriesId = datum[seriesIdAccessor];
+    const seriesId = d[seriesIdAccessor];
     const isSeriesVisible = context.filteredSeriesIds === void 0 || context.filteredSeriesIds.has(seriesId);
     const isStack = seriesProps.variant === import_xy_chart.BAR_VARIANT_STACK;
     let stackingOffset = 0;
@@ -438,7 +438,7 @@ class BarSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
         isVisible: isSeriesVisible
       });
     }
-    const dp = x0Acc === "x0" && x1Acc === "x1" && y1Acc === "y1" ? datum : { ...datum, x0, x1, y1 };
+    const dp = this.buildBarDatapoint(datum, x0Raw, x1Raw, y1, xAxis.type);
     currentSeries.data.push(dp);
     context.datapointMetadataMap.set(dp, {
       isGap: false,
@@ -486,4 +486,17 @@ class BarSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
       });
     }
   }
+  resolveX(x0Raw, x1Raw, xAxisType) {
+    if ((0, import_guards.isTime)(xAxisType)) {
+      const x0 = x0Raw.getTime();
+      return { x0, x1: x1Raw instanceof Date ? x1Raw.getTime() : x0 };
+    }
+    return { x0: x0Raw, x1: x1Raw };
+  }
+  buildBarDatapoint(datum, x0Raw, x1Raw, y1, xAxisType) {
+    if ((0, import_guards.isTime)(xAxisType)) {
+      return { ...datum, x0: x0Raw, x1: x1Raw, y1 };
+    }
+    return { ...datum, x0: x0Raw, x1: x1Raw, y1 };
+  }
 }

package/charts/xy-chart/processing-strategies/strategies/base-series.d.ts

@@ -60,7 +60,7 @@ export declare abstract class SeriesBaseStrategy<T extends XYChartSelectionLinea
     getSeriesName(intl: IntlShape, seriesIndex: number, seriesNameFallback: string | undefined, namingWithAccessor?: {
         seriesNameAccessor?: string;
         datum: XYChartData;
-    }): string;
+    }): string | string[];
     abstract getColor(...args: any[]): {
         color: {
             Default: string;

package/charts/xy-chart/processing-strategies/strategies/dot-series.d.ts

@@ -8,6 +8,7 @@ export declare class DotSeriesStrategy extends SeriesBaseStrategy<XYChartSelecti
     protected getSeriesId(datum: XYChartData, seriesProps: XYChartDotSeriesInternal): string;
     protected createSeriesMetadata(datum: XYChartData, seriesProps: XYChartDotSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, seriesId: string, context: MutableProcessingContext): {
         name: string;
+        nameSegments: string[] | undefined;
         shape: import("../../../index.js").PointShapeType | undefined;
         color: import("../../../index.js").ColorToken;
         colorPalette: XYChartColorPalette;

package/charts/xy-chart/processing-strategies/strategies/dot-series.js

@@ -22,6 +22,7 @@ __export(dot_series_exports, {
 module.exports = __toCommonJS(dot_series_exports);
 var import_base_series = require("./base-series.js");
 var import_safe_get = require("../../../core/utils/safe-get.js");
+var import_single_line_name = require("../../../core/utils/single-line-name.js");
 var import_type_guards = require("../../utils/type-guards.js");
 var import_get_datapoints = require("../utils/access-datapoint/get-datapoints.js");
 var import_get_calculated_linear_point = require("../utils/cast-data/get-calculated-linear-point.js");
@@ -53,11 +54,12 @@ class DotSeriesStrategy extends import_base_series.SeriesBaseStrategy {
         datum
       }
     );
+    const name = (0, import_single_line_name.singleLineName)(seriesName);
     const color = this.getColor(
       datum,
       seriesProps,
       context.colorPalette,
-      seriesName,
+      name,
       seriesIndex
     );
     return {
@@ -65,7 +67,8 @@ class DotSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       yAxis,
       actions: seriesProps.actions,
       ...color,
-      name: seriesName,
+      name,
+      nameSegments: Array.isArray(seriesName) ? seriesName : void 0,
       shape: seriesProps.shape
     };
   }

package/charts/xy-chart/processing-strategies/strategies/line-series.d.ts

@@ -1,15 +1,16 @@
-import { SeriesBaseStrategy } from './base-series.js';
+import { FastSeriesBaseStrategy } from './fast-series.js';
 import type { XYChartAxisInternal, XYChartLineSeriesInternal, XYChartVariantsInternal } from '../../types/xy-chart-internals.js';
 import type { XYChartSelectionLinearMetadata } from '../../types/xy-chart-selection.js';
 import { type LineDatapoint, type XYChartColorPalette, type XYChartData } from '../../types/xy-chart.js';
-import type { LineSeriesConstructor, MutableProcessingContext } from '../types/processing-types.js';
-export declare class LineSeriesStrategy extends SeriesBaseStrategy<XYChartSelectionLinearMetadata> {
+import type { ControlFlowCommand, LineSeriesConstructor, MutableProcessingContext } from '../types/processing-types.js';
+export declare class LineSeriesStrategy extends FastSeriesBaseStrategy<XYChartSelectionLinearMetadata> {
     private readonly gapHelper;
     constructor(initializer: LineSeriesConstructor);
     canHandle(seriesProps: XYChartVariantsInternal): seriesProps is XYChartLineSeriesInternal;
     protected getSeriesId(datum: XYChartData, seriesProps: XYChartLineSeriesInternal): string;
     protected createSeriesMetadata(datum: XYChartData, seriesProps: XYChartLineSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, seriesId: string, context: MutableProcessingContext): {
         name: string;
+        nameSegments: string[] | undefined;
         color: import("../../../index.js").ColorToken;
         colorPalette: XYChartColorPalette;
         colorIsFromSlot: boolean;
@@ -24,6 +25,8 @@ export declare class LineSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
         y0: import("../../types/xy-chart.js").XYAccessorDataTypes;
     };
     protected processImpl(datum: XYChartData, seriesProps: XYChartLineSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, datapoint: LineDatapoint, context: MutableProcessingContext): void;
+    protected isEligibleForFastPath(data: XYChartData[], seriesProps: XYChartLineSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): boolean;
+    protected processFastPath(datum: XYChartData, seriesProps: XYChartLineSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
     getColor(datum: XYChartData, seriesProps: XYChartLineSeriesInternal, configColorPalette: XYChartColorPalette | undefined, seriesName: string, seriesIndex: number): {
         color: import("../../../index.js").ColorToken;
         colorPalette: XYChartColorPalette;

package/charts/xy-chart/processing-strategies/strategies/line-series.js

@@ -20,16 +20,19 @@ __export(line_series_exports, {
   LineSeriesStrategy: () => LineSeriesStrategy
 });
 module.exports = __toCommonJS(line_series_exports);
-var import_base_series = require("./base-series.js");
+var import_fast_series = require("./fast-series.js");
 var import_gappable_series = require("./gappable-series.js");
 var import_is_valid_points_display = require("../../../core/components/canvas/utils/is-valid-points-display.js");
 var import_safe_get = require("../../../core/utils/safe-get.js");
+var import_single_line_name = require("../../../core/utils/single-line-name.js");
 var import_defaults = require("../../constants/defaults.js");
+var import_guards = require("../../types/guards.js");
 var import_type_guards = require("../../utils/type-guards.js");
 var import_get_datapoints = require("../utils/access-datapoint/get-datapoints.js");
 var import_get_calculated_linear_point = require("../utils/cast-data/get-calculated-linear-point.js");
 var import_get_linear_color_palette = require("../utils/coloring/get-linear-color-palette.js");
-class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
+const GAP_FALSE_METADATA = { isGap: false };
+class LineSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
   gapHelper;
   constructor(initializer) {
     super(initializer);
@@ -52,11 +55,12 @@ class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       seriesNameAccessor,
       datum
     });
+    const name = (0, import_single_line_name.singleLineName)(seriesName);
     const color = this.getColor(
       datum,
       seriesProps,
       context.colorPalette,
-      seriesName,
+      name,
       seriesIndex
     );
     return {
@@ -66,7 +70,8 @@ class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       actions: seriesProps.actions,
       pointsDisplay: seriesProps.pointsDisplay && (0, import_is_valid_points_display.isValidPointsDisplay)(seriesProps.pointsDisplay) ? seriesProps.pointsDisplay : import_defaults.DEFAULT_POINTS_DISPLAY,
       ...color,
-      name: seriesName
+      name,
+      nameSegments: Array.isArray(seriesName) ? seriesName : void 0
     };
   }
   getCalculationPoint(datapoint, xAxis, yAxis) {
@@ -140,6 +145,109 @@ class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       });
     }
   }
+  isEligibleForFastPath(data, seriesProps, xAxis, yAxis) {
+    if (!(0, import_guards.isTime)(xAxis.type) || !(0, import_guards.isLinear)(yAxis.type)) {
+      return false;
+    }
+    const x0Acc = seriesProps.x0Accessor;
+    const x1Acc = seriesProps.x1Accessor;
+    const y0Acc = seriesProps.y0Accessor;
+    if (!x0Acc || !y0Acc) {
+      return false;
+    }
+    if (!(0, import_get_datapoints.isFlatStringPath)(x0Acc) || x1Acc !== void 0 && !(0, import_get_datapoints.isFlatStringPath)(x1Acc) || !(0, import_get_datapoints.isFlatStringPath)(y0Acc) || !(0, import_get_datapoints.isFlatStringPath)(seriesProps.seriesIdAccessor)) {
+      return false;
+    }
+    const d0 = data[0];
+    if (d0 === void 0) {
+      return false;
+    }
+    return d0[x0Acc] instanceof Date && typeof d0[y0Acc] === "number";
+  }
+  processFastPath(datum, seriesProps, xAxis, yAxis, context) {
+    const x0Acc = seriesProps.x0Accessor;
+    const x1Acc = seriesProps.x1Accessor;
+    const y0Acc = seriesProps.y0Accessor;
+    const seriesIdAccessor = seriesProps.seriesIdAccessor;
+    const d = datum;
+    const x0 = d[x0Acc];
+    const x1 = x1Acc ? d[x1Acc] : void 0;
+    const y0 = d[y0Acc];
+    const seriesId = d[seriesIdAccessor];
+    const isSeriesVisible = context.filteredSeriesIds === void 0 || context.filteredSeriesIds.has(seriesId);
+    const { seriesMap, seriesToMetadata } = context;
+    const dp = { ...datum, x0, x1, y0 };
+    let currentSeries = seriesMap.get(seriesId);
+    if (currentSeries === void 0) {
+      currentSeries = this.createSeries(
+        seriesId,
+        seriesProps,
+        xAxis,
+        yAxis
+      );
+      this.registerSeries(currentSeries, seriesId, context);
+      const metadata = this.createSeriesMetadata(
+        datum,
+        seriesProps,
+        xAxis,
+        yAxis,
+        seriesId,
+        context
+      );
+      seriesToMetadata.set(currentSeries, {
+        ...metadata,
+        isVisible: isSeriesVisible
+      });
+    }
+    if (isSeriesVisible) {
+      const gappedDatapoint = this.gapHelper.handleGapDetection(
+        dp,
+        currentSeries,
+        xAxis,
+        yAxis
+      );
+      if (gappedDatapoint) {
+        this.registerDatapoint(
+          gappedDatapoint,
+          { isGap: true },
+          currentSeries,
+          context
+        );
+      }
+    }
+    this.registerDatapoint(dp, GAP_FALSE_METADATA, currentSeries, context);
+    const centerMs = x1 ? (x0.getTime() + x1.getTime()) / 2 : x0.getTime();
+    const axisIdToScaleDomain = context.axisIdToScaleDomain;
+    const xDom = axisIdToScaleDomain.get(xAxis.id);
+    if (xDom === void 0) {
+      axisIdToScaleDomain.set(xAxis.id, { min: centerMs, max: centerMs });
+    } else if (centerMs < xDom.min) {
+      xDom.min = centerMs;
+    } else if (centerMs > xDom.max) {
+      xDom.max = centerMs;
+    }
+    if (isSeriesVisible) {
+      const yDom = axisIdToScaleDomain.get(yAxis.id);
+      if (yDom === void 0) {
+        axisIdToScaleDomain.set(yAxis.id, { min: y0, max: y0 });
+      } else {
+        if (yDom.min === void 0 || y0 < yDom.min) {
+          yDom.min = y0;
+        }
+        if (yDom.max === void 0 || y0 > yDom.max) {
+          yDom.max = y0;
+        }
+      }
+      context.axisWithSeries.add(xAxis.id);
+      context.axisWithSeries.add(yAxis.id);
+      const currentSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
+      this.addValue({
+        series: currentSeries,
+        datapoint: dp,
+        color: currentSeriesMetadata?.color
+      });
+    }
+  }
   getColor(datum, seriesProps, configColorPalette, seriesName, seriesIndex) {
     return (0, import_get_linear_color_palette.getLinearColor)(
       datum,

package/charts/xy-chart/processing-strategies/strategies/rect-series.d.ts

@@ -18,6 +18,7 @@ export declare class RectSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
     };
     protected createSeriesMetadata(_datum: XYChartData, seriesProps: XYChartRectSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, seriesId: string, context: MutableProcessingContext): {
         name: string;
+        nameSegments: string[] | undefined;
         xAxis: XYChartAxisInternal;
         yAxis: XYChartAxisInternal;
         actions: ((datapoint: import("../../types/xy-chart.js").XYChartRectSeriesActionItem, series?: import("../../types/xy-chart.js").XYChartRectSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;

package/charts/xy-chart/processing-strategies/strategies/rect-series.js

@@ -22,6 +22,7 @@ __export(rect_series_exports, {
 module.exports = __toCommonJS(rect_series_exports);
 var import_base_series = require("./base-series.js");
 var import_safe_get = require("../../../core/utils/safe-get.js");
+var import_single_line_name = require("../../../core/utils/single-line-name.js");
 var import_defaults = require("../../constants/defaults.js");
 var import_xy_chart_internals = require("../../types/xy-chart-internals.js");
 var import_type_guards = require("../../utils/type-guards.js");
@@ -56,8 +57,10 @@ class RectSeriesStrategy extends import_base_series.SeriesBaseStrategy {
     const color = this.getColor(seriesProps.colorPalette, context.colorPalette);
     const seriesIndex = this.getOrCreateSeriesIndex(seriesId, seriesIndexes);
     const seriesName = this.getSeriesName(intl, seriesIndex, void 0);
+    const name = (0, import_single_line_name.singleLineName)(seriesName);
     return {
-      name: seriesName,
+      name,
+      nameSegments: Array.isArray(seriesName) ? seriesName : void 0,
       xAxis,
       yAxis,
       actions: seriesProps.actions,

package/charts/xy-chart/processing-strategies/utils/series-naming/get-series-name.d.ts

@@ -1,4 +1,4 @@
 import type { IntlShape } from 'react-intl';
 import type { XYAccessorDataTypes, XYChartData } from '../../../types/xy-chart.js';
 export declare function getSeriesNameWithFallback(intl: IntlShape, seriesIndex: number, seriesNameFallback: XYAccessorDataTypes | undefined): string;
-export declare function getSeriesNameWithAccessor(intl: IntlShape, seriesIndex: number, seriesNameFallback: string | undefined, seriesNameAccessor: string | undefined, datum: XYChartData): string;
+export declare function getSeriesNameWithAccessor(intl: IntlShape, seriesIndex: number, seriesNameFallback: string | undefined, seriesNameAccessor: string | undefined, datum: XYChartData): string | string[];

package/charts/xy-chart/processing-strategies/utils/series-naming/get-series-name.js

@@ -29,13 +29,31 @@ function getSeriesNameWithFallback(intl, seriesIndex, seriesNameFallback) {
     index: seriesIndex + 1
   });
 }
+function getNameRawValue(datum, accessor) {
+  if (!accessor) {
+    return void 0;
+  }
+  const value = (0, import_get_datapoints.getDatumValue)(datum, accessor);
+  if (value === void 0 || value === null) {
+    return void 0;
+  }
+  if (Array.isArray(value)) {
+    const strings = value.filter(
+      (v) => v !== void 0 && v !== null && !(typeof v === "number" && Number.isNaN(v))
+    ).map(String);
+    return strings.length > 0 ? strings : void 0;
+  }
+  if (typeof value === "number" && Number.isNaN(value)) {
+    return void 0;
+  }
+  const stringValue = String(value);
+  return stringValue.length > 0 ? stringValue : void 0;
+}
 function getSeriesNameWithAccessor(intl, seriesIndex, seriesNameFallback, seriesNameAccessor, datum) {
-  const seriesNameFromAccessor = (0, import_get_datapoints.getDatumValue)(datum, seriesNameAccessor);
+  const seriesNameFromAccessor = getNameRawValue(datum, seriesNameAccessor);
+  if (Array.isArray(seriesNameFromAccessor)) {
+    return seriesNameFromAccessor;
+  }
   const finalSeriesName = seriesNameFromAccessor ?? seriesNameFallback;
-  const seriesNameValidated = getSeriesNameWithFallback(
-    intl,
-    seriesIndex,
-    finalSeriesName
-  );
-  return seriesNameValidated;
+  return getSeriesNameWithFallback(intl, seriesIndex, finalSeriesName);
 }

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

@@ -81,7 +81,9 @@ const XYChartOverlayPerformanceProvider = ({
       datapointMetadataMap,
       axisIdToScaleDomain
     );
-    return { query: (0, import_query_single.buildQuerySingle)(queryClosest, queryHovered) };
+    return {
+      query: (0, import_query_single.buildQuerySingle)(queryClosest, queryHovered, datapointMetadataMap)
+    };
   }, [
     axisIdToScales,
     datapointMetadataMap,

package/charts/xy-chart/slots/Annotations/Marker.d.ts

@@ -17,6 +17,8 @@ export interface XYChartAnnotationsMarkerProps {
      *  @defaultValue Colors.Charts.Categorical.Color01.Default
      */
     colorAccessor?: string;
+    /** Indicates what data field from the data object should be used as the symbol color of each marker */
+    symbolColorAccessor?: string;
     /** Indicates what data field from the data object should be used as the title of each marker */
     titleAccessor?: string;
     /** letter/emoji/icon/glyph or Unicode character */

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

@@ -304,6 +304,7 @@ export interface AreaSeriesWithDatapoints {
 export type AnyDatapoint = RectDatapointInternal | DotDatapoint | LineDatapoint | BarDatapoint | AreaDatapoint;
 export type BaseMetadata = {
     name: string;
+    nameSegments?: string[];
     xAxis: XYChartAxisInternal;
     yAxis: XYChartAxisInternal;
     colorPalette: XYChartColorPalette;

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

@@ -20,7 +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 type { ChartTooltipConfigProps, SeriesDisplayMode } from '../../core/types/tooltip.js';
 import { XYChartAnnotationsConfigProps } from '../context/XYChartAnnotationsConfig.context.js';
 import type { XYChartSelectProps } from '../slots/Select.js';
 /**
@@ -628,6 +628,14 @@ export type XYChartTooltipProps = {
      * @internal
      */
     _variant?: _XYChartTooltipVariant;
+    /**
+     * The tooltip items display mode.
+     *
+     * If this prop is `undefined`, XYChart renders series names in single-line mode by default.
+     * Set this prop to `'multi-line'` to render array-based series names on separate lines.
+     * @defaultValue 'single-line'
+     */
+    _seriesDisplayMode?: SeriesDisplayMode;
 };
 /**
  * Props for the XYChart.Legend slot component

package/charts/xy-chart/utils/build-and-download-csv.js

@@ -27,7 +27,8 @@ var import_download = require("../../../core/utils/download.js");
 var import_constants = require("../../core/constants.js");
 const getSeriesName = (metadata) => {
   return (series) => {
-    return metadata.get(series)?.name;
+    const name = metadata.get(series)?.name;
+    return name !== void 0 ? name : "";
   };
 };
 const buildAndDownloadCsv = (data, seriesMetadata, datapointMetadata, downloadDataCallback) => {

package/charts/xy-chart/utils/coloring/apply-color-rule-to-bar-series.d.ts

@@ -0,0 +1,3 @@
+import { ColorRuleProps } from '../../../core/types/color-rule.js';
+import type { BarMetadata, BarSeriesWithDatapoints, ColorRuleValidator, MapDatapoints, SeriesToMetadata } from '../../types/xy-chart-internals.js';
+export declare const applyColorRuleToBarSeries: (series: BarSeriesWithDatapoints, rules: ColorRuleProps[], isValid: ColorRuleValidator, datapointMetadataMap: MapDatapoints, seriesToMetadata: SeriesToMetadata, seriesMetadata: BarMetadata) => void;

package/charts/xy-chart/utils/coloring/apply-color-rule-to-bar-series.js

@@ -0,0 +1,58 @@
+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 apply_color_rule_to_bar_series_exports = {};
+__export(apply_color_rule_to_bar_series_exports, {
+  applyColorRuleToBarSeries: () => applyColorRuleToBarSeries
+});
+module.exports = __toCommonJS(apply_color_rule_to_bar_series_exports);
+var import_bar_datapoint_matches_color_rule = require("./bar-datapoint-matches-color-rule.js");
+var import_get_color_from_rule = require("./get-color-from-rule.js");
+var import_safe_get = require("../../../core/utils/safe-get.js");
+const applyColorRuleToBarSeries = (series, rules, isValid, datapointMetadataMap, seriesToMetadata, seriesMetadata) => {
+  const datapointCount = series.data.length;
+  let matchedCount = 0;
+  const matchedColors = /* @__PURE__ */ new Set();
+  series.data.forEach((datapoint) => {
+    const matchingRule = rules.find(
+      (rule) => (0, import_bar_datapoint_matches_color_rule.barDatapointMatchesColorRule)(datapoint, rule, isValid, series)
+    );
+    if (!matchingRule) {
+      return;
+    }
+    const color = (0, import_get_color_from_rule.getColorFromRule)(matchingRule);
+    if (!color) {
+      return;
+    }
+    matchedCount += 1;
+    matchedColors.add(color);
+    const metadata = (0, import_safe_get.safeGet)(datapointMetadataMap, datapoint);
+    if (metadata) {
+      datapointMetadataMap.set(datapoint, {
+        ...metadata,
+        colorOverride: color
+      });
+    }
+  });
+  if (datapointCount > 0 && matchedCount === datapointCount && matchedColors.size === 1) {
+    const [sharedColor] = matchedColors;
+    seriesToMetadata.set(series, {
+      ...seriesMetadata,
+      color: { Default: sharedColor }
+    });
+  }
+};

package/charts/xy-chart/utils/coloring/apply-color-rule-to-series-metadata.js

@@ -22,7 +22,8 @@ __export(apply_color_rule_to_series_metadata_exports, {
 module.exports = __toCommonJS(apply_color_rule_to_series_metadata_exports);
 var import_get_color_palette = require("../../../core/utils/get-color-palette.js");
 const applyColorRuleToSeriesMetadata = (seriesToMetadata, series, seriesMetadata, rule, index) => {
-  const colorOverride = rule.colorPalette ? (0, import_get_color_palette.getColorPalette)(seriesMetadata.name, index, rule.colorPalette) : { Default: rule.color };
+  const seriesName = seriesMetadata.name ?? "";
+  const colorOverride = rule.colorPalette ? (0, import_get_color_palette.getColorPalette)(seriesName, index, rule.colorPalette) : { Default: rule.color };
   if (colorOverride) {
     seriesToMetadata.set(series, {
       ...seriesMetadata,

package/charts/xy-chart/utils/coloring/bar-datapoint-matches-color-rule.d.ts

@@ -0,0 +1,4 @@
+import { ColorRuleProps } from '../../../core/types/color-rule.js';
+import type { BarSeriesWithDatapoints, ColorRuleValidator } from '../../types/xy-chart-internals.js';
+import type { BarDatapoint } from '../../types/xy-chart.js';
+export declare const barDatapointMatchesColorRule: (datapoint: BarDatapoint, rule: ColorRuleProps, isValid: ColorRuleValidator, series: BarSeriesWithDatapoints) => boolean;

package/charts/xy-chart/utils/coloring/bar-datapoint-matches-color-rule.js

@@ -0,0 +1,29 @@
+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 bar_datapoint_matches_color_rule_exports = {};
+__export(bar_datapoint_matches_color_rule_exports, {
+  barDatapointMatchesColorRule: () => barDatapointMatchesColorRule
+});
+module.exports = __toCommonJS(bar_datapoint_matches_color_rule_exports);
+var import_lodash_es = require("lodash");
+var import_get_fallback_value_accessor = require("../get-fallback-value-accessor.js");
+const barDatapointMatchesColorRule = (datapoint, rule, isValid, series) => {
+  const accessor = rule.valueAccessor ?? (0, import_get_fallback_value_accessor.getFallbackValueAccessor)(series);
+  const subject = (0, import_lodash_es.get)(datapoint, accessor);
+  return !(0, import_lodash_es.isNil)(subject) && isValid(subject, rule.comparator, rule.matchValue);
+};

package/charts/xy-chart/utils/coloring/has-series-matching-datapoint.js

@@ -21,11 +21,13 @@ __export(has_series_matching_datapoint_exports, {
 });
 module.exports = __toCommonJS(has_series_matching_datapoint_exports);
 var import_lodash_es = require("lodash");
+var import_single_line_name = require("../../../core/utils/single-line-name.js");
 var import_get_fallback_value_accessor = require("../get-fallback-value-accessor.js");
 const hasSeriesMatchingDatapoint = (series, rule, isValid) => {
   const accessor = rule.valueAccessor ?? (0, import_get_fallback_value_accessor.getFallbackValueAccessor)(series);
   return series.data.some((datapoint) => {
-    const subject = (0, import_lodash_es.get)(datapoint, accessor);
+    const rawSubject = (0, import_lodash_es.get)(datapoint, accessor);
+    const subject = Array.isArray(rawSubject) ? (0, import_single_line_name.singleLineName)(rawSubject) : rawSubject;
     return !(0, import_lodash_es.isNil)(subject) && isValid(subject, rule.comparator, rule.matchValue);
   });
 };

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

@@ -117,7 +117,8 @@ const iterateSlots = (children) => {
       slots.tooltip = {
         hidden: child.props.hidden ?? false,
         template: child.props.children,
-        variant: child.props._variant ?? "single"
+        variant: child.props._variant ?? "single",
+        seriesDisplayMode: child.props._seriesDisplayMode
       };
     }
   });