@dynatrace/strato-components 3.0.1 → 3.1.0

package/charts/tree-map/constants.d.ts

@@ -9,11 +9,11 @@ export declare const LABELS_DISPLAY: Readonly<Readonly<{
     Clusters: "clusters";
 }>>;
 export declare const TEXT_ALIGN: Readonly<Readonly<{
-    Left: "left";
     Right: "right";
     End: "end";
     Start: "start";
     Center: "center";
+    Left: "left";
 }>>;
 export declare const TEXT_BASELINE: Readonly<Readonly<{
     Bottom: "bottom";

package/charts/tree-map/providers/TreeMapChartProviders.d.ts

@@ -1,4 +1,5 @@
 import { type PropsWithChildren } from 'react';
+import type { Unit } from '@dynatrace-sdk/units';
 import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
 import type { ColorPalette, CustomColorPalette } from '../../core/types/color-palette.js';
 import { ColorRuleProps } from '../../core/types/color-rule.js';
@@ -21,6 +22,7 @@ interface TreeMapChartProvidersProps extends PropsWithChildren {
     min?: 'data-min' | number;
     max?: 'data-max' | number;
     colorRules?: ColorRuleProps[];
+    unit?: string | Unit;
 }
 export declare const TreeMapChartProviders: {
     (props: TreeMapChartProvidersProps): import("react/jsx-runtime.js").JSX.Element;

package/charts/tree-map/providers/TreeMapChartProviders.js

@@ -22,6 +22,7 @@ __export(TreeMapChartProviders_exports, {
 });
 module.exports = __toCommonJS(TreeMapChartProviders_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_StoreProvider = require("./StoreProvider.js");
 var import_ChartSeriesActionContext = require("../../core/components/series-action/ChartSeriesActionContext.js");
 var import_ColorRuleContext = require("../../core/context/ColorRuleContext.js");
@@ -47,11 +48,16 @@ const TreeMapChartProviders = (props) => {
     min: configMin,
     max: configMax,
     children,
-    colorRules = []
+    colorRules = [],
+    unit
   } = props;
   const min = configMin === "data-min" ? void 0 : configMin;
   const max = configMax === "data-max" ? void 0 : configMax;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: colorRules, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapRawDataContext.TreeMapRawDataContext.Provider, { value: data, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const memoizedRawData = (0, import_react.useMemo)(
+    () => ({ ...data, unit: unit ?? data.unit }),
+    [data, unit]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: colorRules, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapRawDataContext.TreeMapRawDataContext.Provider, { value: memoizedRawData, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartSeriesActionContext.ChartSeriesActionContext.Provider,
     {
       value: {

package/charts/tree-map/providers/TreeMapInternalDataProvider.js

@@ -48,18 +48,18 @@ const TreeMapInternalDataProvider = (props) => {
     if (isRangeLegend) {
       return (0, import_get_colored_internal_range_data.getColoredInternalRangeData)(
         data,
-        unit,
         rangeColorPalette,
         minMaxConfig,
-        colorRules
+        colorRules,
+        unit
       );
     }
     return (0, import_get_colored_internal_categorical_data.getColoredInternalCategoricalData)(
       data,
-      unit,
       categoricalColorPalette,
       nameAccessor,
-      colorRules
+      colorRules,
+      unit
     );
   }, [
     isRangeLegend,

package/charts/tree-map/types/internal.d.ts

@@ -23,7 +23,7 @@ export type RangeLegendColorMap = Map<Record<string, number>, LegendColorMapValu
 export type LegendColorMap = CategoricalLegendColorMap | RangeLegendColorMap;
 export interface InternalTreeMapData {
     tree: InternalTreeMapNode;
-    unit?: string;
+    unit?: string | Unit;
 }
 export interface ColoredInternalTreeMapData {
     data: InternalTreeMapData;

package/charts/tree-map/types/treemap.d.ts

@@ -47,7 +47,7 @@ export interface TreeMapData {
     /** The tree root node. */
     tree: TreeMapRootNode;
     /** Optional unit to use for the tooltip. */
-    unit?: string;
+    unit?: string | Unit;
 }
 /**
  * Data accessor on leaf nodes by which legend can be defined
@@ -67,7 +67,7 @@ export interface TreeMapProps extends StylingProps, MaskingProps, DataTestId {
      *
      * @defaultValue 100%
      */
-    width?: number;
+    width?: string | number;
     /**
      * Optional height of the chart.
      *
@@ -84,6 +84,8 @@ export interface TreeMapProps extends StylingProps, MaskingProps, DataTestId {
      * Custom value formatter for the chart.
      */
     formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;
+    /** Optional unit for value formatting. Takes priority over data.unit */
+    unit?: string | Unit;
     /**
      * The text truncation mode used for the chart legend.
      *

package/charts/tree-map/utils/build-color-rule.js

@@ -26,13 +26,14 @@ var import_lodash_es = require("lodash");
 var import_is_valid_range_color_rule = require("./is-valid-range-color-rule.js");
 var import_get_color_palette = require("../../core/utils/get-color-palette.js");
 var import_getAccessor = require("../../core/utils/getAccessor.js");
+var import_getValidColor = require("../../core/utils/getValidColor.js");
 var import_validators = require("../../core/utils/validators.js");
 var import_constants = require("../constants.js");
-const getRuleColor = (rule, subject) => rule.colorPalette ? (0, import_get_color_palette.getColorPalette)(`${JSON.stringify(subject)}`, 0, rule.colorPalette).Default : rule.color;
+const getRuleColor = (rule, subject) => rule.colorPalette ? (0, import_get_color_palette.getColorPalette)(`${JSON.stringify(subject)}`, 0, rule.colorPalette).Default : (0, import_getValidColor.getValidColor)(rule.color ?? "");
 const getSubject = (rule, node, defaultValueAccessor) => {
   const valueAccessor = rule.valueAccessor;
   if (!valueAccessor) {
-    return defaultValueAccessor === import_constants.NAME_ACCESSOR.Name ? node.name : node.value;
+    return defaultValueAccessor === import_constants.NAME_ACCESSOR.Value ? node.value : node.name;
   }
   if (valueAccessor === import_constants.NAME_ACCESSOR.Name) {
     return node.name;

package/charts/tree-map/utils/build-tree-map-chart-config.js

@@ -48,7 +48,7 @@ function getLegendConfiguration(contextLegendConfig, slotsLegendConfig) {
 }
 const buildTreeMapChartConfig = (props, config, slots) => {
   const colorPalette = props.colorPalette ?? config.colorPalette ?? import_defaults.defaultTreeMapConfig.colorPalette;
-  const formatter = props.formatter ?? config.formatter ?? (0, import_defaultUnitFormatter.defaultUnitFormatter)(props.data?.unit);
+  const formatter = props.formatter ?? config.formatter ?? (0, import_defaultUnitFormatter.defaultUnitFormatter)(props.unit ?? props.data?.unit);
   const truncationMode = props.truncationMode ?? config.truncationMode ?? import_defaults.defaultTreeMapConfig.truncationMode;
   const loading = props.loading ?? config.loading ?? import_defaults.defaultTreeMapConfig.loading;
   const labelsDisplay = props.labelsDisplay ?? config.labelsDisplay ?? import_defaults.defaultTreeMapConfig.labelsDisplay;

package/charts/tree-map/utils/get-categorical-colored-nodes.d.ts

@@ -1,4 +1,5 @@
 import { ColorToken } from '../../core/types/color-palette.js';
+import type { ColorRuleProps } from '../../core/types/color-rule.js';
 import type { InternalTreeMapNode, LegendColorMap } from '../types/internal.js';
 import { type NameAccessor } from '../types/treemap.js';
 /**
@@ -6,9 +7,10 @@ import { type NameAccessor } from '../types/treemap.js';
  * @param rootNode - InternalTreeMapNode
  * @param legendColorMap - data structure for coloring the nodes
  * @param nameAccessor - targeted property on the leaf node
+ * @param colorRules - raw color rules to apply
  * @returns - children array with applied colors
  */
-export declare const getCategoricalColoredNodes: (rootNode: InternalTreeMapNode, legendColorMap: LegendColorMap, nameAccessor?: NameAccessor) => {
+export declare const getCategoricalColoredNodes: (rootNode: InternalTreeMapNode, legendColorMap: LegendColorMap, nameAccessor?: NameAccessor, colorRules?: ColorRuleProps[]) => {
     color?: ColorToken;
     children?: InternalTreeMapNode[];
     id: string;

package/charts/tree-map/utils/get-categorical-colored-nodes.js

@@ -30,15 +30,25 @@ const getColoredLeafNodes = (nodes, legendColorMap, colorRules, defaultValueAcce
   ...node,
   color: getLeafColor(node, legendColorMap, colorRules, defaultValueAccessor)
 }));
-const getCategoricalColoredNodes = (rootNode, legendColorMap, nameAccessor) => {
+const getCategoricalColoredNodes = (rootNode, legendColorMap, nameAccessor, colorRules) => {
   const clusterNodes = rootNode.children ?? [];
   return clusterNodes.map((clusterNode) => ({
     ...clusterNode,
     ...nameAccessor && {
-      children: getColoredLeafNodes(clusterNode.children || [], legendColorMap)
+      children: getColoredLeafNodes(
+        clusterNode.children || [],
+        legendColorMap,
+        colorRules,
+        nameAccessor
+      )
     },
     ...!nameAccessor && {
-      color: legendColorMap.get(clusterNode.name)?.color
+      color: legendColorMap.get(clusterNode.name)?.color,
+      children: getColoredLeafNodes(
+        clusterNode.children || [],
+        legendColorMap,
+        colorRules
+      )
     }
   }));
 };

package/charts/tree-map/utils/get-categorical-legend-color-map.d.ts

@@ -7,7 +7,7 @@ import type { NameAccessor } from '../types/treemap.js';
  * @param rootNode - InternalTreeMapNode
  * @param colorPalette - color palette
  * @param nameAccessor - targeted property on the leaf node
- * @param colorRules -
+ * @param colorRules - color rules to apply to the legend
  * @returns - LegendColorMap
  */
 export declare const getCategoricalLegendColorMap: (rootNode: InternalTreeMapNode, colorPalette: ColorPalette | CustomColorPalette, nameAccessor: NameAccessor | undefined, colorRules: ColorRuleProps[]) => CategoricalLegendColorMap;

package/charts/tree-map/utils/get-categorical-legend-color-map.js

@@ -26,23 +26,26 @@ var import_get_color_palette = require("../../core/utils/get-color-palette.js");
 const getCategoricalLegendColorMap = (rootNode, colorPalette, nameAccessor, colorRules) => {
   const legendColorMap = /* @__PURE__ */ new Map();
   let colorIdx = 0;
+  const legendTarget = nameAccessor ?? "name";
+  const legendColorRules = colorRules.filter(
+    (rule) => !rule.valueAccessor || rule.valueAccessor === legendTarget
+  );
   rootNode.children?.forEach((cluster) => {
     if (nameAccessor) {
       cluster.children?.forEach((node) => {
         const labelKey = node[nameAccessor];
-        const ruleColor = (0, import_build_color_rule.buildColorRule)(node, colorRules, nameAccessor);
+        const ruleColor = (0, import_build_color_rule.buildColorRule)(node, legendColorRules, nameAccessor);
         if (!legendColorMap.has(labelKey)) {
           const colorToken = ruleColor ? { Default: ruleColor } : (0, import_get_color_palette.getColorPalette)(labelKey, colorIdx, colorPalette);
           legendColorMap.set(labelKey, { color: colorToken });
-          if (!ruleColor) {
-            colorIdx++;
-          }
+          colorIdx++;
         }
       });
     } else {
       const labelKey = cluster.name;
+      const ruleColor = (0, import_build_color_rule.buildColorRule)(cluster, legendColorRules);
       if (!legendColorMap.has(labelKey)) {
-        const colorToken = (0, import_get_color_palette.getColorPalette)(labelKey, colorIdx, colorPalette);
+        const colorToken = ruleColor ? { Default: ruleColor } : (0, import_get_color_palette.getColorPalette)(labelKey, colorIdx, colorPalette);
         legendColorMap.set(labelKey, {
           color: colorToken,
           value: cluster.value

package/charts/tree-map/utils/get-colored-internal-categorical-data.d.ts

@@ -1,3 +1,4 @@
+import type { Unit } from '@dynatrace-sdk/units';
 import { ColorPalette, CustomColorPalette } from '../../core/types/color-palette.js';
 import type { ColorRuleProps } from '../../core/types/color-rule.js';
 import { type ColoredInternalTreeMapData, type InternalTreeMapNode } from '../types/internal.js';
@@ -12,4 +13,4 @@ import { type NameAccessor } from '../types/treemap.js';
  * @param colorRules - raw color rules to apply
  * @returns - InternalTreemapData and Coloring map
  */
-export declare function getColoredInternalCategoricalData(tree: InternalTreeMapNode, unit: string | undefined, colorPalette: ColorPalette | CustomColorPalette, nameAccessor: NameAccessor | undefined, colorRules: ColorRuleProps[]): ColoredInternalTreeMapData;
+export declare function getColoredInternalCategoricalData(tree: InternalTreeMapNode, colorPalette: ColorPalette | CustomColorPalette, nameAccessor: NameAccessor | undefined, colorRules: ColorRuleProps[], unit?: string | Unit): ColoredInternalTreeMapData;

package/charts/tree-map/utils/get-colored-internal-categorical-data.js

@@ -24,7 +24,7 @@ module.exports = __toCommonJS(get_colored_internal_categorical_data_exports);
 var import_get_categorical_colored_nodes = require("./get-categorical-colored-nodes.js");
 var import_get_categorical_legend_color_map = require("./get-categorical-legend-color-map.js");
 var import_constants = require("../constants.js");
-function getColoredInternalCategoricalData(tree, unit, colorPalette, nameAccessor, colorRules) {
+function getColoredInternalCategoricalData(tree, colorPalette, nameAccessor, colorRules, unit) {
   const legendColorMap = (0, import_get_categorical_legend_color_map.getCategoricalLegendColorMap)(
     tree,
     colorPalette,
@@ -34,7 +34,8 @@ function getColoredInternalCategoricalData(tree, unit, colorPalette, nameAccesso
   const nodeArray = (0, import_get_categorical_colored_nodes.getCategoricalColoredNodes)(
     tree,
     legendColorMap,
-    nameAccessor
+    nameAccessor,
+    colorRules
   );
   const rootNodeName = tree.name ?? import_constants.DEFAULT_ROOT_NODE_NAME;
   const data = {

package/charts/tree-map/utils/get-colored-internal-range-data.d.ts

@@ -1,3 +1,4 @@
+import type { Unit } from '@dynatrace-sdk/units';
 import type { ColorPalette } from '../../core/types/color-palette.js';
 import type { ColorRuleProps } from '../../core/types/color-rule.js';
 import type { ColoredRange } from '../../core/types/colored-range.js';
@@ -13,4 +14,4 @@ import { type ColoredInternalTreeMapData, type InternalTreeMapNode } from '../ty
  * @param colorRules - raw color rules to apply
  * @returns - InternalTreemapData and Coloring map
  */
-export declare function getColoredInternalRangeData(tree: InternalTreeMapNode, unit: string | undefined, colorPalette: ColorPalette | ColoredRange[], minMaxConfig: Partial<MinMax>, colorRules: ColorRuleProps[]): ColoredInternalTreeMapData;
+export declare function getColoredInternalRangeData(tree: InternalTreeMapNode, colorPalette: ColorPalette | ColoredRange[], minMaxConfig: Partial<MinMax>, colorRules: ColorRuleProps[], unit?: string | Unit): ColoredInternalTreeMapData;

package/charts/tree-map/utils/get-colored-internal-range-data.js

@@ -31,7 +31,7 @@ var import_build_quantize_scale_from_color_palette = require("../../core/utils/b
 var import_build_threshold_scale_from_ranges = require("../../core/utils/build-threshold-scale-from-ranges.js");
 var import_is_valid_color_palette = require("../../core/utils/is-valid-color-palette.js");
 var import_constants = require("../constants.js");
-function getColoredInternalRangeData(tree, unit, colorPalette, minMaxConfig, colorRules) {
+function getColoredInternalRangeData(tree, colorPalette, minMaxConfig, colorRules, unit) {
   const hasCustomRanges = !(0, import_is_valid_color_palette.isValidColorPalette)(colorPalette);
   let { min, max } = minMaxConfig;
   if ((0, import_lodash_es.isUndefined)(min) || (0, import_lodash_es.isUndefined)(max)) {

package/charts/tree-map/utils/get-mapped-tree.d.ts

@@ -1,3 +1,4 @@
+import type { Unit } from '@dynatrace-sdk/units';
 import type { InternalTreeMapNode, TreeMapFormatter } from '../types/internal.js';
 import { TreeMapRootNode } from '../types/treemap.js';
 /**
@@ -5,4 +6,4 @@ import { TreeMapRootNode } from '../types/treemap.js';
  * @param rootNode - TreeMap root node
  * @returns - InternalTreeMapNode
  */
-export declare const getMappedTree: (rootNode: TreeMapRootNode, formatter: TreeMapFormatter, unit?: string) => InternalTreeMapNode;
+export declare const getMappedTree: (rootNode: TreeMapRootNode, formatter: TreeMapFormatter, unit?: string | Unit) => InternalTreeMapNode;

package/charts/tree-map/utils/get-range-colored-nodes.js

@@ -25,7 +25,7 @@ var import_build_color_rule = require("./build-color-rule.js");
 var import_getTokenComputedStyle = require("../../core/utils/getTokenComputedStyle.js");
 var import_constants = require("../constants.js");
 const getColoredLeafNodes = (nodes, scale, min, max, colorRules) => nodes.map((node) => {
-  const ruleColor = (0, import_build_color_rule.buildColorRule)(node, colorRules);
+  const ruleColor = (0, import_build_color_rule.buildColorRule)(node, colorRules, "value");
   return {
     ...node,
     color: { Default: ruleColor ?? getNodeColor(node, scale, min, max) }

package/charts/tree-map/utils/get-tooltip-item.d.ts

@@ -1,7 +1,8 @@
 import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { Unit } from '@dynatrace-sdk/units';
 import type { Formatter } from '../../core/types/formatter.js';
 import type { InternalTreeMapNode } from '../types/internal.js';
-export declare const getTooltipItem: (formatter: Formatter, content?: HierarchyRectangularNode<InternalTreeMapNode>, unit?: string) => {
+export declare const getTooltipItem: (formatter: Formatter, content?: HierarchyRectangularNode<InternalTreeMapNode>, unit?: string | Unit) => {
     id: string;
     name: string;
     values: string[];

package/charts/tree-map/utils/map-to-internal-tree.d.ts

@@ -1,6 +1,7 @@
+import type { Unit } from '@dynatrace-sdk/units';
 import type { TreeMapFormatter } from '../types/internal.js';
 import type { TreeMapRootNode } from '../types/treemap.js';
-export declare function mapToInternalTree(tree: TreeMapRootNode, formatter: TreeMapFormatter, unit?: string): {
+export declare function mapToInternalTree(tree: TreeMapRootNode, formatter: TreeMapFormatter, unit?: string | Unit): {
     children: {
         children: import("../types/internal.js").InternalTreeMapNode[];
         id: string;

package/charts/xy-chart/XYChartRoot.d.ts

@@ -36,8 +36,8 @@ export declare const XYChart: ((props: XYChartProps & {
         (props: import("./types/xy-chart-props.js").XYChartBarSeriesProps): null;
         displayName: string;
     };
-    _AreaSeries: {
-        (_props: import("./types/xy-chart-props.js")._XYChartAreaSeriesProps): null;
+    AreaSeries: {
+        (props: import("./types/xy-chart-props.js").XYChartAreaSeriesProps): null;
         displayName: string;
     };
     XAxis: {

package/charts/xy-chart/XYChartRoot.js

@@ -40,9 +40,13 @@ var import_XYChartAnnotationsShownIndicatorsProvider = require("./providers/XYCh
 var import_XYChartColorScalesProvider = require("./providers/XYChartColorScalesProvider.js");
 var import_XYChartDataProvider = require("./providers/XYChartDataProvider.js");
 var import_XYChartIdProvider = require("./providers/XYChartIdProvider.js");
+var import_XYChartStoreDomainSync = require("./providers/XYChartStoreDomainSync.js");
 var import_XYChartStoreProvider = require("./providers/XYChartStoreProvider.js");
 var import_XYChartVisibleAxesProvider = require("./providers/XYChartVisibleAxesProvider.js");
+var import_Annotations = require("./slots/Annotations/Annotations.js");
+var import_Marker = require("./slots/Annotations/Marker.js");
 var import_Tooltip = require("./slots/Annotations/Tooltip.js");
+var import_Track = require("./slots/Annotations/Track.js");
 var import_AreaSeries = require("./slots/AreaSeries.js");
 var import_BarSeries = require("./slots/BarSeries.js");
 var import_CustomTooltip = require("./slots/CustomTooltip.js");
@@ -50,6 +54,7 @@ var import_DotSeries = require("./slots/DotSeries.js");
 var import_Legend = require("./slots/Legend.js");
 var import_LineSeries = require("./slots/LineSeries.js");
 var import_RectSeries = require("./slots/RectSeries.js");
+var import_Select = require("./slots/Select.js");
 var import_ThresholdIndicator = require("./slots/ThresholdIndicator.js");
 var import_Toolbar = require("./slots/Toolbar.js");
 var import_XAxis = require("./slots/XAxis.js");
@@ -63,15 +68,11 @@ var import_Intent = require("../../core/slots/Intent/Intent.js");
 var import_ChartLayout = require("../core/components/chart-layout/ChartLayout.js");
 var import_useAutoLegendRefresh = require("../core/components/chart-layout/hooks/useAutoLegendRefresh.js");
 var import_get_chart_states_template = require("../core/components/chart-states/utils/get-chart-states-template.js");
+var import_ColorRuleContext = require("../core/context/ColorRuleContext.js");
 var import_EmptyStateSlot = require("../core/slots/chart-states/EmptyStateSlot.js");
 var import_ErrorStateSlot = require("../core/slots/chart-states/ErrorStateSlot.js");
 var import_ColorRule = require("../core/slots/ColorRule.js");
 var import_coerceSizeValue = require("../core/utils/coerceSizeValue.js");
-var import_Annotations = require("./slots/Annotations/Annotations.js");
-var import_Marker = require("./slots/Annotations/Marker.js");
-var import_Track = require("./slots/Annotations/Track.js");
-var import_Select = require("./slots/Select.js");
-var import_ColorRuleContext = require("../core/context/ColorRuleContext.js");
 const COMPONENT_NAME_BEHAVIOURAL_TRACKING = "XYChart";
 const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
   const {
@@ -109,12 +110,12 @@ const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) =>
     import_XYChartTruncationMode_context.XYChartTruncationModeContext.Provider,
     {
       value: { truncationMode: config.truncationMode },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsConfig_context.XYChartAnnotationsConfig.Provider, { value: config.annotations, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: config.colorRules, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsConfig_context.XYChartAnnotationsConfig.Provider, { value: config.annotations, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: config.colorRules, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartStoreProvider.XYChartStoreProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_XYChartDataProvider.XYChartChartDataProvider,
         {
           data,
           seriesVariantsProps: internalConfig.series,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsDataProvider.XYChartAnnotationsDataProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartVisibleAxesProvider.XYChartVisibleAxesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartColorScalesProvider.XYChartColorScalesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartStoreProvider.XYChartStoreProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsShownIndicatorsProvider.XYChartAnnotationsShownIndicatorsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartStoreDomainSync.XYChartStoreDomainSync, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsDataProvider.XYChartAnnotationsDataProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartVisibleAxesProvider.XYChartVisibleAxesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartColorScalesProvider.XYChartColorScalesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsShownIndicatorsProvider.XYChartAnnotationsShownIndicatorsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             import_ChartLayout.ChartLayout,
             {
               ref: chartLayoutRef,
@@ -150,7 +151,7 @@ const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) =>
             }
           ) }) }) }) }) })
         }
-      ) }) })
+      ) }) }) })
     }
   ) }) }) }) }) }) });
 });
@@ -160,7 +161,7 @@ const XYChart = Object.assign(XYChartRoot, {
   DotSeries: import_DotSeries.DotSeries,
   LineSeries: import_LineSeries.LineSeries,
   BarSeries: import_BarSeries.BarSeries,
-  _AreaSeries: import_AreaSeries._AreaSeries,
+  AreaSeries: import_AreaSeries.AreaSeries,
   XAxis: import_XAxis.XAxis,
   YAxis: import_YAxis.YAxis,
   Legend: import_Legend.Legend,

package/charts/xy-chart/components/annotations/XYChartAnnotationsArea.js

@@ -31,9 +31,9 @@ var import_constants = require("../../../core/components/annotations/constants.j
 var import_ChartGridRoot = require("../../../core/components/chart-grid/ChartGridRoot.js");
 var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_defaults = require("../../constants/defaults.js");
-var import_useAxesConfig = require("../../hooks/useAxesConfig.js");
 var import_useXYChartAnnotationsConfig = require("../../hooks/useXYChartAnnotationsConfig.js");
 var import_useXYChartAnnotationsData = require("../../hooks/useXYChartAnnotationsData.js");
+var import_useXYChartData = require("../../hooks/useXYChartData.js");
 var import_useXYChartScales = require("../../hooks/useXYChartScales.js");
 var import_selectors = require("../../store/selectors.js");
 var import_guards = require("../../types/guards.js");
@@ -45,7 +45,7 @@ const XYChartAnnotationsArea = () => {
   const annotationsData = (0, import_useXYChartAnnotationsData.useXYChartAnnotationsData)();
   const setState = (0, import_selectors.useSetState)();
   const { width } = (0, import_useGridPlotSize.useGridPlotSize)();
-  const axes = (0, import_useAxesConfig.useAxesConfig)();
+  const { axes } = (0, import_useXYChartData.useXYChartData)();
   const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(
     annotationsConfig ?? {}
   );

package/charts/xy-chart/components/annotations/XYChartAnnotationsIndicators.js

@@ -27,9 +27,9 @@ var import_IndicatorsRenderer = require("../../../core/components/annotations/co
 var import_get_unique_indicators_by_priority = require("../../../core/components/annotations/components/indicators/utils/get-unique-indicators-by-priority.js");
 var import_get_min_max_as_number = require("../../../core/components/annotations/utils/get-min-max-as-number.js");
 var import_ChartGrid_css = require("../../../core/components/chart-grid/ChartGrid.sty.js");
-var import_useAxesConfig = require("../../hooks/useAxesConfig.js");
 var import_useXYChartAnnotationsConfig = require("../../hooks/useXYChartAnnotationsConfig.js");
 var import_useXYChartAnnotationsShownIndicators = require("../../hooks/useXYChartAnnotationsShownIndicators.js");
+var import_useXYChartData = require("../../hooks/useXYChartData.js");
 var import_useXYChartScales = require("../../hooks/useXYChartScales.js");
 var import_guards = require("../../types/guards.js");
 var import_get_scale = require("../../utils/get-scale.js");
@@ -37,7 +37,7 @@ const XYChartAnnotationsIndicators = () => {
   const indicators = (0, import_useXYChartAnnotationsShownIndicators.useXYChartAnnotationsShownIndicators)();
   const annotationsConfig = (0, import_useXYChartAnnotationsConfig.useXYChartAnnotationsConfig)();
   const scales = (0, import_useXYChartScales.useXYChartScales)();
-  const axes = (0, import_useAxesConfig.useAxesConfig)();
+  const { axes } = (0, import_useXYChartData.useXYChartData)();
   const axisConfig = axes.find(
     (axis) => axis.id === annotationsConfig?.xAxisId
   );

package/charts/xy-chart/components/axes/AxisArea.css

@@ -1,3 +1,3 @@
-._bidc430-3-0-1 {
+._bidc430-3-1-0 {
   position: relative;
 }

package/charts/xy-chart/components/axes/AxisArea.sty.js

@@ -22,4 +22,4 @@ __export(AxisArea_css_exports, {
 });
 module.exports = __toCommonJS(AxisArea_css_exports);
 var import_AxisArea_css_ts_vanilla = require("./AxisArea.css");
-var axisContainerStyle = "_bidc430-3-0-1";
+var axisContainerStyle = "_bidc430-3-1-0";

package/charts/xy-chart/components/axes/AxisTickWithTruncation.css

@@ -1,8 +1,8 @@
-._z2zz8y2-3-0-1 {
-  direction: var(--_z2zz8y0-3-0-1);
+._z2zz8y2-3-1-0 {
+  direction: var(--_z2zz8y0-3-1-0);
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
-  width: var(--_z2zz8y1-3-0-1);
+  width: var(--_z2zz8y1-3-1-0);
 }

package/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js

@@ -24,6 +24,6 @@ __export(AxisTickWithTruncation_css_exports, {
 });
 module.exports = __toCommonJS(AxisTickWithTruncation_css_exports);
 var import_AxisTickWithTruncation_css_ts_vanilla = require("./AxisTickWithTruncation.css");
-var directionValue = "var(--_z2zz8y0-3-0-1)";
-var tickStyle = "_z2zz8y2-3-0-1";
-var widthContainer = "var(--_z2zz8y1-3-0-1)";
+var directionValue = "var(--_z2zz8y0-3-1-0)";
+var tickStyle = "_z2zz8y2-3-1-0";
+var widthContainer = "var(--_z2zz8y1-3-1-0)";

package/charts/xy-chart/components/displays/AreaDisplay.js

@@ -44,7 +44,16 @@ function AreaDisplay({
   const { datapointMetadataMap, axisIdToScaleDomain } = (0, import_useXYChartData.useXYChartData)();
   const xScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, series.xAxisId);
   const yScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, series.yAxisId);
-  const { curve, color, orientation, variant, pointsDisplay, xAxis, yAxis } = metadata;
+  const {
+    curve,
+    color,
+    orientation,
+    variant,
+    pointsDisplay,
+    xAxis,
+    yAxis,
+    isStacked
+  } = metadata;
   const xRelAccessor = (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain);
   const yRelAccessor = (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain);
   const showBandedArea = variant === "band";
@@ -69,8 +78,8 @@ function AreaDisplay({
     endpointAccessor = isHorizontal ? (0, import_band_accessors.bandX1Accessor)(xScale, xRelAccessor) : (0, import_band_accessors.bandY1Accessor)(yScale, yRelAccessor);
   } else {
     primaryAxisAccessor = isHorizontal ? (0, import_area_accessors.yAccessor)(yScale, yRelAccessor) : (0, import_area_accessors.xAccessor)(xScale, xRelAccessor);
-    baselineAccessor = isHorizontal ? (0, import_area_accessors.x0Accessor)(xScale, datapointMetadataMap, xRelAccessor) : (0, import_area_accessors.y0Accessor)(yScale, datapointMetadataMap, yRelAccessor);
-    endpointAccessor = isHorizontal ? (0, import_area_accessors.x1Accessor)(xScale, datapointMetadataMap, xRelAccessor) : (0, import_area_accessors.y1Accessor)(yScale, datapointMetadataMap, yRelAccessor);
+    baselineAccessor = isHorizontal ? (0, import_area_accessors.x0Accessor)(xScale, datapointMetadataMap, xRelAccessor, isStacked) : (0, import_area_accessors.y0Accessor)(yScale, datapointMetadataMap, yRelAccessor, isStacked);
+    endpointAccessor = isHorizontal ? (0, import_area_accessors.x1Accessor)(xScale, datapointMetadataMap, xRelAccessor, isStacked) : (0, import_area_accessors.y1Accessor)(yScale, datapointMetadataMap, yRelAccessor, isStacked);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_AreaCanvas.AreaCanvas,

package/charts/xy-chart/components/displays/RectDisplay.js

@@ -48,7 +48,7 @@ function RectDisplay(props) {
     return colorScale ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_BarCanvas.BarCanvas,
       {
-        data: rectFilterCallback ? series2.data.filter(rectFilterCallback) : series2.data,
+        data: rectFilterCallback ? series2.filteredData.filter(rectFilterCallback) : series2.filteredData,
         canvasHeight: height,
         canvasWidth: width,
         color: (0, import_rect_accessors.colorAccessor)(colorScale, datapointMetadataMap),

package/charts/xy-chart/components/displays/area-accessors.d.ts

@@ -3,10 +3,10 @@ import type { AnyXYChartScale, MapDatapoints, XYChartAxisDirection } from '../..
 import type { AreaDatapoint } from '../../types/xy-chart.js';
 export declare function applyNumericalBarScaleTransformations(args: AreaScaleLinear & {
     v1: number;
-}, accessorCoord: 'x' | 'y', baseline: XYChartAxisDirection, relAccessor?: ((value: number) => number) | undefined, accumulator?: number, binDomain?: number): AreaScaleLinear & {
+}, accessorCoord: 'x' | 'y', baseline: XYChartAxisDirection, relAccessor?: ((value: number) => number) | undefined, accumulator?: number, binDomain?: number, isSeriesStacked?: boolean): AreaScaleLinear & {
     v1: number;
 };
-export declare function applyNumericalBarScaleTransformations(args: AreaScaleLinear, accessorCoord: 'x' | 'y', baseline: XYChartAxisDirection, relAccessor?: ((value: number) => number) | undefined, accumulator?: number, binDomain?: number): AreaScaleLinear;
+export declare function applyNumericalBarScaleTransformations(args: AreaScaleLinear, accessorCoord: 'x' | 'y', baseline: XYChartAxisDirection, relAccessor?: ((value: number) => number) | undefined, accumulator?: number, binDomain?: number, isSeriesStacked?: boolean): AreaScaleLinear;
 /**
  * X accessor for the primary (category/time) axis in vertical area charts.
  * Used when x0/x1 define the categorical or time dimension.
@@ -17,7 +17,7 @@ export declare const xAccessor: (scale: AnyXYChartScale, relAccessor?: (value: n
  * baselineCoord is 'x' because vertical areas stack along the Y axis
  * while the X axis is the primary/categorical axis.
  */
-export declare const y0Accessor: (scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, relAccessor?: (value: number) => number) => (datapoint: AreaDatapoint) => number, y1Accessor: (scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, relAccessor?: (value: number) => number) => (datapoint: AreaDatapoint) => number;
+export declare const y0Accessor: (scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, relAccessor?: (value: number) => number, isSeriesStacked?: boolean) => (datapoint: AreaDatapoint) => number, y1Accessor: (scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, relAccessor?: (value: number) => number, isSeriesStacked?: boolean) => (datapoint: AreaDatapoint) => number;
 /**
  * Y accessor for the primary (category/time) axis in horizontal area charts.
  * Used when y0/y1 define the categorical or time dimension.
@@ -28,4 +28,4 @@ export declare const yAccessor: (scale: AnyXYChartScale, relAccessor?: (value: n
  * baselineCoord is 'y' because horizontal areas stack along the X axis
  * while the Y axis is the primary/categorical axis.
  */
-export declare const x0Accessor: (scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, relAccessor?: (value: number) => number) => (datapoint: AreaDatapoint) => number, x1Accessor: (scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, relAccessor?: (value: number) => number) => (datapoint: AreaDatapoint) => number;
+export declare const x0Accessor: (scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, relAccessor?: (value: number) => number, isSeriesStacked?: boolean) => (datapoint: AreaDatapoint) => number, x1Accessor: (scale: AnyXYChartScale, datapointsMetadata: MapDatapoints, relAccessor?: (value: number) => number, isSeriesStacked?: boolean) => (datapoint: AreaDatapoint) => number;