@dynatrace/strato-components 3.8.0 → 3.9.0

package/charts/xy-chart/components/tooltip/HoveredPointTooltip/hoveredPointTooltipHeaderUtils.js

@@ -58,9 +58,14 @@ const buildHoveredPointTooltipHeaderProps = ({
     const metadataActions = enrichedDatapoint.metadata.actions;
     actions = metadataActions ? () => metadataActions(enrichedDatapoint.datapoint) : void 0;
   } else if ((0, import_type_guards.isBarTooltipContext)(enrichedDatapoint)) {
-    const { color, name: barName } = metadata;
+    const {
+      color,
+      name: barName,
+      nameSegments: barNameSegments
+    } = metadata;
+    const datapointMetadata = (0, import_safe_get.safeGet)(datapointMetadataMap, datapoint);
     name = barName ?? "";
-    colorToDisplay = color?.Default ?? "";
+    colorToDisplay = datapointMetadata.colorOverride ?? color?.Default ?? "";
     const metadataActions = enrichedDatapoint.metadata.actions;
     actions = metadataActions ? () => {
       const actionItem = (0, import_build_series_action_item.buildBarSeriesActionItem)({
@@ -72,6 +77,13 @@ const buildHoveredPointTooltipHeaderProps = ({
       });
       return metadataActions(actionItem);
     } : void 0;
+    return {
+      color: colorToDisplay,
+      name,
+      nameSegments: barNameSegments,
+      value: valueToDisplay,
+      actions
+    };
   }
   return {
     color: colorToDisplay,

package/charts/xy-chart/components/tooltip/SharedXYChartTooltip/SharedXYChartTooltip.js

@@ -30,17 +30,22 @@ var import_useBarData = require("../../../hooks/useBarData.js");
 var import_useFormatCategory = require("../../../hooks/useFormatCategory.js");
 var import_useXYChartColorScales = require("../../../hooks/useXYChartColorScales.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
+var import_useXYChartTooltip = require("../../../hooks/useXYChartTooltip.js");
 var import_useXYChartTruncationMode = require("../../../hooks/useXYChartTruncationMode.js");
 function LazySharedTooltipRow({
   raw,
-  ctx
+  ctx,
+  seriesDisplayMode
 }) {
   const row = (0, import_sharedXYChartTooltipUtils.buildSharedTooltipRow)(raw.result, ctx);
   const value = row.yAxisDuration ? `${row.yAxisValue} (${row.yAxisDuration})` : row.yAxisValue;
+  const isMultiLine = row.nameSegments !== void 0 && seriesDisplayMode === "multi-line";
+  const displayName = isMultiLine ? row.nameSegments : row.name;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_OverlayTooltip.OverlayTooltip.SeriesItem,
     {
-      name: row.name,
+      name: displayName,
+      multiLine: isMultiLine,
       value,
       color: row.color,
       actions: row.actions
@@ -58,6 +63,7 @@ function SharedXYChartTooltip({
   const { truncationMode } = (0, import_useXYChartTruncationMode.useXYChartTruncationMode)();
   const formatCategory = (0, import_useFormatCategory.useFormatCategory)();
   const { filteredSeriesWithDatapoints } = (0, import_useBarData.useBarData)();
+  const { seriesDisplayMode } = (0, import_useXYChartTooltip.useXYChartTooltip)();
   const ctx = {
     seriesToMetadata,
     axisIdToFormatter,
@@ -72,10 +78,16 @@ function SharedXYChartTooltip({
     preferred,
     ctx
   );
-  const rows = datapoints.map((result) => ({
-    name: (0, import_safe_get.safeGet)(seriesToMetadata, result.series).name,
-    result
-  }));
+  const rows = datapoints.map((result) => {
+    const metadata = (0, import_safe_get.safeGet)(seriesToMetadata, result.series);
+    const row = (0, import_sharedXYChartTooltipUtils.buildSharedTooltipRow)(result, ctx);
+    const isMultiLine = row.nameSegments !== void 0 && seriesDisplayMode === "multi-line";
+    return {
+      name: isMultiLine ? row.nameSegments : metadata.name,
+      nameSegments: row.nameSegments,
+      result
+    };
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_OverlayTooltip.OverlayTooltip, { truncation: truncationMode, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_OverlayTooltip.OverlayTooltip.Header,
@@ -91,7 +103,14 @@ function SharedXYChartTooltip({
         data: rows,
         variant: "shared",
         activeItem: -1,
-        seriesItemTemplate: (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LazySharedTooltipRow, { raw: item, ctx })
+        seriesItemTemplate: (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          LazySharedTooltipRow,
+          {
+            raw: item,
+            ctx,
+            seriesDisplayMode
+          }
+        )
       }
     )
   ] });

package/charts/xy-chart/components/tooltip/SharedXYChartTooltip/sharedXYChartTooltipUtils.d.ts

@@ -15,6 +15,7 @@ type SharedTooltipContext = {
 };
 export type SharedTooltipRow = {
     name: string;
+    nameSegments?: string[];
     color: string;
     yAxisValue: string;
     yAxisDuration: string | undefined;

package/charts/xy-chart/components/tooltip/SharedXYChartTooltip/sharedXYChartTooltipUtils.js

@@ -95,7 +95,7 @@ function buildSharedTooltipRow(result, ctx) {
     allBarSeries
   } = ctx;
   const metadata = (0, import_safe_get.safeGet)(seriesToMetadata, result.series);
-  const colorOverride = result.type === import_xy_chart_internals.RECT_VARIANT ? (0, import_safe_get.safeGet)(datapointMetadataMap, result.datapoint).colorOverride : void 0;
+  const colorOverride = result.type === import_xy_chart_internals.RECT_VARIANT || result.type === import_xy_chart_internals.BAR_VARIANT ? (0, import_safe_get.safeGet)(datapointMetadataMap, result.datapoint).colorOverride : void 0;
   const color = (0, import_get_color.getColor)(
     result.series,
     result.datapoint,
@@ -121,5 +121,12 @@ function buildSharedTooltipRow(result, ctx) {
       };
     }
   }
-  return { name: metadata.name, color, yAxisValue, yAxisDuration, actions };
+  return {
+    name: metadata.name,
+    nameSegments: metadata.nameSegments,
+    color,
+    yAxisValue,
+    yAxisDuration,
+    actions
+  };
 }

package/charts/xy-chart/components/tooltip/TopListTooltip.js

@@ -70,7 +70,7 @@ function TopListTooltip({
     { name: legendHidden ? topListLabel : name, value: valueText, color }
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_OverlayTooltip.OverlayTooltip, { truncation: truncationMode, children: [
-    !legendHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip.Header, { header1: topListLabel }),
+    !legendHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip.Header, { header1: topListLabel, label: "" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_OverlayTooltip.OverlayTooltip.Series,
       {

package/charts/xy-chart/components/tooltip/XYChartTooltipContent.js

@@ -61,7 +61,7 @@ const XYChartTooltipContent = ({
       return null;
     }
     if (customTooltipContent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate: customTooltipContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { template: customTooltipContent });
     }
   }
   switch (content.type) {

package/charts/xy-chart/components/tooltip/utils/get-color.js

@@ -28,5 +28,8 @@ const getColor = (series, datapoint, metadata, colorScaleMap, colorOverride) =>
     const colorScale = (0, import_safe_get.safeGet)(colorScaleMap, series.id);
     return typeof datapoint.value === "string" || typeof datapoint.value === "number" ? (0, import_get_color_from_scale_and_data.getColorFromScaleAndData)(colorScale, datapoint.value, colorOverride) : "";
   }
+  if ((0, import_type_guards.isBarSeries)(series)) {
+    return colorOverride ?? metadata.color.Default;
+  }
   return metadata.color.Default;
 };

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.css

@@ -1,23 +1,23 @@
-._1u58xor0-3-8-0 {
+._1u58xor0-3-9-0 {
   display: flex;
   flex-wrap: wrap;
   overflow-wrap: anywhere;
   margin-left: var(--dt-spacings-size-4, 4px);
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._1u58xor1-3-8-0 {
+._1u58xor1-3-9-0 {
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1u58xor1-3-8-0::after {
+._1u58xor1-3-9-0::after {
   content: " ";
   white-space: pre;
 }
-._1u58xor2-3-8-0 {
+._1u58xor2-3-9-0 {
   flex: 0 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }
-._1u58xor3-3-8-0 {
+._1u58xor3-3-9-0 {
   flex: 1 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js

@@ -24,7 +24,7 @@ __export(tooltip_styles_css_exports, {
 });
 module.exports = __toCommonJS(tooltip_styles_css_exports);
 var import_tooltip_styles_css_ts_vanilla = require("./tooltip-styles.css");
-var axisName = "_1u58xor1-3-8-0";
-var axisValue = "_1u58xor2-3-8-0";
-var duration = "_1u58xor3-3-8-0";
-var wrapper = "_1u58xor0-3-8-0";
+var axisName = "_1u58xor1-3-9-0";
+var axisValue = "_1u58xor2-3-9-0";
+var duration = "_1u58xor3-3-9-0";
+var wrapper = "_1u58xor0-3-9-0";

package/charts/xy-chart/constants/defaults.d.ts

@@ -15,8 +15,6 @@ export declare const defaultLegend: XYChartChartLegendProps;
 export declare const defaultToolbar: XYChartToolbarConfigProps;
 export declare const defaultConfig: XYChartConfigProperties;
 export declare const XY_CHART_ARIA_LABEL = "XY Chart";
-/** Annotations bottom padding in pixels */
-export declare const ANNOTATIONS_PADDING_BOTTOM = 6;
 export declare const DISPLAY_UNITS_LIMIT = 3;
 export declare const DEFAULT_POINTS_DISPLAY: PointsDisplay;
 export declare const RECT_STROKE_WIDTH = 1;

package/charts/xy-chart/constants/defaults.js

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var defaults_exports = {};
 __export(defaults_exports, {
-  ANNOTATIONS_PADDING_BOTTOM: () => ANNOTATIONS_PADDING_BOTTOM,
   BAR_STROKE_WIDTH: () => BAR_STROKE_WIDTH,
   DEFAULT_AXIS_CONFIG: () => DEFAULT_AXIS_CONFIG,
   DEFAULT_CHART_HEIGHT: () => DEFAULT_CHART_HEIGHT,
@@ -90,7 +89,6 @@ const defaultConfig = {
   colorRules: []
 };
 const XY_CHART_ARIA_LABEL = "XY Chart";
-const ANNOTATIONS_PADDING_BOTTOM = 6;
 const DISPLAY_UNITS_LIMIT = 3;
 const DEFAULT_POINTS_DISPLAY = "auto";
 const RECT_STROKE_WIDTH = 1;

package/charts/xy-chart/context/XYChartTooltip.context.d.ts

@@ -1,11 +1,12 @@
 import { type ReactNode } from 'react';
 import { DEFAULT_CUSTOM_TOOLTIP_CONFIG } from '../../core/constants.js';
-import type { ChartTooltipConfig } from '../../core/types/tooltip.js';
+import type { ChartTooltipConfig, SeriesDisplayMode } from '../../core/types/tooltip.js';
 import type { _XYChartTooltipVariant } from '../types/xy-chart-props.js';
 import { XYChartTooltipPayload } from '../types/xy-chart.js';
 export interface XYChartTooltipConfig extends ChartTooltipConfig {
     template?: (tooltipPayload: XYChartTooltipPayload) => ReactNode;
     variant: _XYChartTooltipVariant;
+    seriesDisplayMode?: SeriesDisplayMode;
 }
 export { DEFAULT_CUSTOM_TOOLTIP_CONFIG };
 export declare const XYChartTooltipContext: import("react").Context<XYChartTooltipConfig>;

package/charts/xy-chart/hooks/useColorRule.js

@@ -24,6 +24,7 @@ var import_ColorRuleContext = require("../../core/context/ColorRuleContext.js");
 var import_safe_get = require("../../core/utils/safe-get.js");
 var import_validators = require("../../core/utils/validators.js");
 var import_xy_chart_internals = require("../types/xy-chart-internals.js");
+var import_apply_color_rule_to_bar_series = require("../utils/coloring/apply-color-rule-to-bar-series.js");
 var import_apply_color_rule_to_rect_series = require("../utils/coloring/apply-color-rule-to-rect-series.js");
 var import_apply_color_rule_to_series_metadata = require("../utils/coloring/apply-color-rule-to-series-metadata.js");
 var import_has_series_matching_datapoint = require("../utils/coloring/has-series-matching-datapoint.js");
@@ -56,6 +57,15 @@ const useColorRule = ({
           categoricalColorOverrides
         });
       }
+    } else if (series.type === import_xy_chart_internals.BAR_VARIANT) {
+      (0, import_apply_color_rule_to_bar_series.applyColorRuleToBarSeries)(
+        series,
+        reversedRules,
+        isValid,
+        datapointMetadataMap,
+        seriesToMetadata,
+        seriesMetadata
+      );
     } else {
       const validColorRule = reversedRules.find(
         (rule) => (0, import_has_series_matching_datapoint.hasSeriesMatchingDatapoint)(series, rule, isValid)

package/charts/xy-chart/layout/XYChartLayout.css

@@ -1,10 +1,10 @@
-._1ru1qe70-3-8-0 {
+._1ru1qe70-3-9-0 {
   pointer-events: none;
   width: 100%;
   height: 100%;
   z-index: 1;
 }
-._1ru1qe71-3-8-0 {
+._1ru1qe71-3-9-0 {
   top: -5.5px;
   left: -5.5px;
   width: calc(100% + 11px);

package/charts/xy-chart/layout/XYChartLayout.sty.js

@@ -23,5 +23,5 @@ __export(XYChartLayout_css_exports, {
 module.exports = __toCommonJS(XYChartLayout_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartLayout_css_ts_vanilla = require("./XYChartLayout.css");
-var datapointCanvasPlot = "_1ru1qe71-3-8-0 _13lzg4k0-3-8-0 _1ru1qe70-3-8-0";
-var rectangleCanvasPlot = "_13lzg4k0-3-8-0 _1ru1qe70-3-8-0";
+var datapointCanvasPlot = "_1ru1qe71-3-9-0 _13lzg4k0-3-9-0 _1ru1qe70-3-9-0";
+var rectangleCanvasPlot = "_13lzg4k0-3-9-0 _1ru1qe70-3-9-0";

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

@@ -1,10 +1,10 @@
-import { SeriesBaseStrategy } from './base-series.js';
+import { FastSeriesBaseStrategy } from './fast-series.js';
 import type { Orientation } from '../../../core/components/canvas/types/canvas-shape.js';
 import type { XYChartAreaSeriesInternal, XYChartAreaVariant, XYChartAxisInternal, XYChartOrientation, XYChartVariantsInternal } from '../../types/xy-chart-internals.js';
 import type { XYChartSelectionLinearMetadata } from '../../types/xy-chart-selection.js';
 import type { AreaDatapoint, XYChartColorPalette, XYChartData } from '../../types/xy-chart.js';
 import type { AreaSeriesConstructor, ControlFlowCommand, MutableProcessingContext } from '../types/processing-types.js';
-export declare class AreaSeriesStrategy extends SeriesBaseStrategy<XYChartSelectionLinearMetadata> {
+export declare class AreaSeriesStrategy extends FastSeriesBaseStrategy<XYChartSelectionLinearMetadata> {
     private readonly stackHelper;
     private readonly gapHelper;
     /**
@@ -13,6 +13,9 @@ export declare class AreaSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
     readonly combinedAxesOrientationKeyToSeriesCount: Map<string, number>;
     /** This set contains series Id that has been preprocessed at least once */
     private readonly preprocessedSeriesIds;
+    private readonly fastStackGroups;
+    private readonly fastStackDomain;
+    private readonly fastAxisStats;
     constructor(initializer: AreaSeriesConstructor);
     canHandle(seriesProps: XYChartVariantsInternal): seriesProps is XYChartAreaSeriesInternal;
     protected getSeriesId(datum: XYChartData, seriesProps: XYChartAreaSeriesInternal): string;
@@ -25,6 +28,7 @@ export declare class AreaSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
     };
     protected createSeriesMetadata(datum: XYChartData, seriesProps: XYChartAreaSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, seriesId: string, context: MutableProcessingContext): {
         name: string;
+        nameSegments: string[] | undefined;
         orientation: Orientation;
         curve: import("../../types/xy-chart.js").SeriesCurve | undefined;
         variant: XYChartAreaVariant;
@@ -59,6 +63,10 @@ export declare class AreaSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
     };
     protected preprocessImpl(data: XYChartData[], seriesProps: XYChartAreaSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
     protected processImpl(datum: XYChartData, seriesProps: XYChartAreaSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, datapoint: AreaDatapoint, context: MutableProcessingContext): "continue" | undefined;
+    private getFastAxisKey;
+    protected isEligibleForFastPath(data: XYChartData[], seriesProps: XYChartAreaSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): boolean;
+    protected preprocessFastPath(data: XYChartData[], seriesProps: XYChartAreaSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
+    protected processFastPath(datum: XYChartData, seriesProps: XYChartAreaSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
     getColor(datum: XYChartData, seriesProps: XYChartAreaSeriesInternal, configColorPalette: XYChartColorPalette | undefined, seriesName: string, seriesIndex: number): {
         color: import("../../../index.js").ColorToken;
         colorPalette: XYChartColorPalette;

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

@@ -20,12 +20,14 @@ __export(area_series_exports, {
   AreaSeriesStrategy: () => AreaSeriesStrategy
 });
 module.exports = __toCommonJS(area_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_stackable_series = require("./stackable-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_area_datapoints = require("../utils/access-datapoint/get-area-datapoints.js");
 var import_get_datapoints = require("../utils/access-datapoint/get-datapoints.js");
@@ -33,7 +35,7 @@ var import_get_calculated_linear_point = require("../utils/cast-data/get-calcula
 var import_get_linear_color_palette = require("../utils/coloring/get-linear-color-palette.js");
 var import_is_area_series_stacked = require("../utils/stacking/is-area-series-stacked.js");
 var import_stack_datapoints = require("../utils/stacking/stack-datapoints.js");
-class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
+class AreaSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
   stackHelper;
   gapHelper;
   /**
@@ -42,12 +44,18 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
   combinedAxesOrientationKeyToSeriesCount;
   /** This set contains series Id that has been preprocessed at least once */
   preprocessedSeriesIds;
+  fastStackGroups;
+  fastStackDomain;
+  fastAxisStats;
   constructor(initializer) {
     super(initializer);
     this.stackHelper = new import_stackable_series.StackableSeriesHelper();
     this.gapHelper = new import_gappable_series.GappableSeriesHelper();
     this.combinedAxesOrientationKeyToSeriesCount = /* @__PURE__ */ new Map();
     this.preprocessedSeriesIds = /* @__PURE__ */ new Set();
+    this.fastStackGroups = /* @__PURE__ */ new Map();
+    this.fastStackDomain = /* @__PURE__ */ new Map();
+    this.fastAxisStats = /* @__PURE__ */ new Map();
   }
   canHandle(seriesProps) {
     return (0, import_type_guards.isAreaSeries)(seriesProps);
@@ -75,11 +83,12 @@ class AreaSeriesStrategy 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
     );
     const chartOrientation = (0, import_get_datapoints.getChartOrientation)(seriesProps);
@@ -92,7 +101,8 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       xAxis,
       yAxis,
       ...color,
-      name: seriesName,
+      name,
+      nameSegments: Array.isArray(seriesName) ? seriesName : void 0,
       orientation,
       curve,
       variant,
@@ -255,6 +265,233 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       });
     }
   }
+  getFastAxisKey(xAxisId, yAxisId) {
+    return `${xAxisId}-${yAxisId}-vertical`;
+  }
+  isEligibleForFastPath(data, seriesProps, xAxis, yAxis) {
+    if ((0, import_get_datapoints.getChartOrientation)(seriesProps) !== "vertical") {
+      return false;
+    }
+    if ((0, import_get_datapoints.getChartAreaVariant)("vertical", seriesProps) !== "area") {
+      return false;
+    }
+    if (!(0, import_guards.isTime)(xAxis.type) || !(0, import_guards.isLinear)(yAxis.type)) {
+      return false;
+    }
+    const x0Acc = seriesProps.x0Accessor;
+    const x1Acc = seriesProps.x1Accessor;
+    const y1Acc = seriesProps.y1Accessor;
+    if (!x0Acc || !y1Acc) {
+      return false;
+    }
+    if (!(0, import_get_datapoints.isFlatStringPath)(x0Acc) || !(0, import_get_datapoints.isFlatStringPath)(y1Acc) || x1Acc !== void 0 && !(0, import_get_datapoints.isFlatStringPath)(x1Acc) || !(0, import_get_datapoints.isFlatStringPath)(seriesProps.seriesIdAccessor)) {
+      return false;
+    }
+    const d0 = data[0];
+    if (d0 === void 0) {
+      return false;
+    }
+    if (!(d0[x0Acc] instanceof Date) || typeof d0[y1Acc] !== "number") {
+      return false;
+    }
+    if (x1Acc !== void 0 && !(d0[x1Acc] instanceof Date)) {
+      return false;
+    }
+    return true;
+  }
+  preprocessFastPath(data, seriesProps, xAxis, yAxis, context) {
+    const axisKey = this.getFastAxisKey(xAxis.id, yAxis.id);
+    let domainByX0 = this.fastStackDomain.get(axisKey);
+    if (domainByX0 === void 0) {
+      domainByX0 = /* @__PURE__ */ new Map();
+      this.fastStackDomain.set(axisKey, domainByX0);
+    }
+    let stats = this.fastAxisStats.get(axisKey);
+    if (stats === void 0) {
+      stats = { seriesIds: /* @__PURE__ */ new Set(), maxBinAbsValue: 0 };
+      this.fastAxisStats.set(axisKey, stats);
+    }
+    const x0Acc = seriesProps.x0Accessor;
+    const x1Acc = seriesProps.x1Accessor;
+    const y1Acc = seriesProps.y1Accessor;
+    const seriesIdAccessor = seriesProps.seriesIdAccessor;
+    const filteredSeriesIds = context.filteredSeriesIds;
+    for (const datum of data) {
+      const d = datum;
+      const x0Ms = d[x0Acc].getTime();
+      const x1Raw = x1Acc ? d[x1Acc] : void 0;
+      const x1Ms = x1Raw instanceof Date ? x1Raw.getTime() : x0Ms;
+      const y1 = d[y1Acc];
+      const seriesId = d[seriesIdAccessor];
+      if (filteredSeriesIds !== void 0 && !filteredSeriesIds.has(seriesId)) {
+        continue;
+      }
+      this.registerSeriesCountOnPreprocessing(
+        seriesId,
+        xAxis.id,
+        yAxis.id,
+        "vertical"
+      );
+      stats.seriesIds.add(seriesId);
+      let domainByX1 = domainByX0.get(x0Ms);
+      if (domainByX1 === void 0) {
+        domainByX1 = /* @__PURE__ */ new Map();
+        domainByX0.set(x0Ms, domainByX1);
+      }
+      let acc = domainByX1.get(x1Ms);
+      if (acc === void 0) {
+        acc = { totalPositive: 0, totalNegative: 0 };
+        domainByX1.set(x1Ms, acc);
+      }
+      if (y1 >= 0) {
+        acc.totalPositive += y1;
+      } else {
+        acc.totalNegative += -y1;
+      }
+      const binAbs = acc.totalPositive > acc.totalNegative ? acc.totalPositive : acc.totalNegative;
+      if (binAbs > stats.maxBinAbsValue) {
+        stats.maxBinAbsValue = binAbs;
+      }
+    }
+  }
+  processFastPath(datum, seriesProps, xAxis, yAxis, context) {
+    const x0Acc = seriesProps.x0Accessor;
+    const x1Acc = seriesProps.x1Accessor;
+    const y1Acc = seriesProps.y1Accessor;
+    const d = datum;
+    const x0 = d[x0Acc];
+    const x1 = x1Acc ? d[x1Acc] : void 0;
+    const y1 = d[y1Acc];
+    const seriesId = d[seriesProps.seriesIdAccessor];
+    const isSeriesVisible = context.filteredSeriesIds === void 0 || context.filteredSeriesIds.has(seriesId);
+    const x0Ms = x0.getTime();
+    const x1Ms = x1 ? x1.getTime() : x0Ms;
+    let stackingOffset = 0;
+    let binDomain;
+    if (isSeriesVisible) {
+      const axisKey = this.getFastAxisKey(xAxis.id, yAxis.id);
+      let groupsByX0 = this.fastStackGroups.get(axisKey);
+      if (groupsByX0 === void 0) {
+        groupsByX0 = /* @__PURE__ */ new Map();
+        this.fastStackGroups.set(axisKey, groupsByX0);
+      }
+      let groupsByX1 = groupsByX0.get(x0Ms);
+      if (groupsByX1 === void 0) {
+        groupsByX1 = /* @__PURE__ */ new Map();
+        groupsByX0.set(x0Ms, groupsByX1);
+      }
+      let prev = groupsByX1.get(x1Ms);
+      if (prev === void 0) {
+        prev = { minBoundary: 0, maxBoundary: 0 };
+        groupsByX1.set(x1Ms, prev);
+      }
+      stackingOffset = y1 > 0 ? prev.maxBoundary : prev.minBoundary;
+      const domainByX0 = this.fastStackDomain.get(axisKey);
+      const domainByX1 = domainByX0 && domainByX0.get(x0Ms);
+      const acc = domainByX1 && domainByX1.get(x1Ms);
+      if (acc !== void 0) {
+        const axisStats = this.fastAxisStats.get(axisKey);
+        if (axisStats !== void 0 && axisStats.seriesIds.size === 1) {
+          binDomain = axisStats.maxBinAbsValue;
+        } else {
+          binDomain = acc.totalPositive + acc.totalNegative;
+        }
+      }
+      if (y1 < 0) {
+        prev.minBoundary += y1;
+      } else if (y1 > 0) {
+        prev.maxBoundary += y1;
+      }
+    }
+    const { seriesMap, seriesToMetadata } = context;
+    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,
+        isStacked: (0, import_is_area_series_stacked.isAreaSeriesStacked)(
+          (0, import_stack_datapoints.getCombinedAxesOrientationKey)(xAxis.id, yAxis.id, "vertical"),
+          this.combinedAxesOrientationKeyToSeriesCount,
+          "area"
+        )
+      });
+    }
+    const dp = {
+      ...datum,
+      x0,
+      x1,
+      y1
+    };
+    if (isSeriesVisible) {
+      const gappedDatapoint = this.gapHelper.handleGapDetection(
+        dp,
+        currentSeries,
+        xAxis,
+        yAxis
+      );
+      if (gappedDatapoint) {
+        this.registerDatapoint(
+          gappedDatapoint,
+          { isGap: true },
+          currentSeries,
+          context
+        );
+      }
+    }
+    this.registerDatapoint(
+      dp,
+      isSeriesVisible ? {
+        isGap: false,
+        baseline: "x",
+        accumulator: stackingOffset,
+        binDomain
+      } : { isGap: false, baseline: "x" },
+      currentSeries,
+      context
+    );
+    const axisIdToScaleDomain = context.axisIdToScaleDomain;
+    const centerMs = x1 ? (x0Ms + x1Ms) / 2 : x0Ms;
+    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 stackedY1 = y1 + stackingOffset;
+      const yDom = axisIdToScaleDomain.get(yAxis.id);
+      if (yDom === void 0) {
+        axisIdToScaleDomain.set(yAxis.id, { min: stackedY1, max: stackedY1 });
+      } else {
+        if (yDom.min === void 0 || stackedY1 < yDom.min) {
+          yDom.min = stackedY1;
+        }
+        if (yDom.max === void 0 || stackedY1 > yDom.max) {
+          yDom.max = stackedY1;
+        }
+      }
+      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/bar-series.d.ts

@@ -29,6 +29,7 @@ export declare class BarSeriesStrategy extends FastSeriesBaseStrategy<XYChartSel
     };
     protected createSeriesMetadata(datum: XYChartData, seriesProps: XYChartBarSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, seriesId: string, context: MutableProcessingContext, variant?: BarSeriesVariant): {
         name: string;
+        nameSegments: string[] | undefined;
         variant: BarSeriesVariant;
         actions: ((datapoint: import("../../types/xy-chart.js").XYChartBarSeriesActionItem, series?: import("../../types/xy-chart.js").XYChartBarSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
         chartOrientation: import("../../types/xy-chart-internals.js").XYChartOrientation | undefined;
@@ -51,4 +52,6 @@ export declare class BarSeriesStrategy extends FastSeriesBaseStrategy<XYChartSel
     private getFastAxisKey;
     protected preprocessFastPath(data: XYChartData[], seriesProps: XYChartBarSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
     protected processFastPath(datum: XYChartData, seriesProps: XYChartBarSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
+    private resolveX;
+    private buildBarDatapoint;
 }