@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/charts/top-list/TopList.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
 import {
   forwardRef,
   useCallback,
@@ -14,28 +15,45 @@ import {
   Y_AXIS_ID
 } from "./constants.js";
 import { scrollContainer } from "./TopList.sty.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { ColorRule } from "../core/slots/ColorRule.js";
+import { isColoredRangeArray } from "../core/types/colored-range.js";
 import {
   coerceSizeValue,
   coerceSizeValueToPixels
 } from "../core/utils/coerceSizeValue.js";
+import { getColorPalette } from "../core/utils/get-color-palette.js";
 import { getFormatter } from "../core/utils/get-formatter.js";
-import { DEFAULT_CHART_HEIGHT } from "../xy-chart/constants/defaults.js";
+import {
+  DEFAULT_CHART_HEIGHT,
+  DEFAULT_COLOR_PALETTE
+} from "../xy-chart/constants/defaults.js";
 import { XYChart } from "../xy-chart/XYChartRoot.js";
 const COMPONENT_NAME_BEHAVIOURAL_TRACKING = "TopList";
-const TopListRoot = forwardRef(function TopList({
-  data,
-  labelAccessor,
-  valueAccessor,
-  valueFormatter,
-  comparator,
-  children,
-  height = DEFAULT_CHART_HEIGHT,
-  // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.
-  "data-dt-component": componentName = COMPONENT_NAME_BEHAVIOURAL_TRACKING,
-  ...xyChartProps
-}, forwardedRef) {
+function TopListRender(props, forwardedRef) {
+  const {
+    data,
+    labelAccessor,
+    valueAccessor,
+    valueFormatter,
+    comparator,
+    actions,
+    colorPaletteMode,
+    colorPalette,
+    children,
+    height = DEFAULT_CHART_HEIGHT,
+    width,
+    loading,
+    truncationMode,
+    className,
+    style,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow,
+    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.
+    "data-dt-component": componentName = COMPONENT_NAME_BEHAVIOURAL_TRACKING
+  } = props;
+  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);
   const internalRef = useRef(null);
   const mergedRef = useMergeRefs([internalRef, forwardedRef]);
   const onScroll = useCallback(() => internalRef.current?.reset(), []);
@@ -48,26 +66,56 @@ const TopListRoot = forwardRef(function TopList({
       [ROW_KEY]: String(i)
     })).sort(comparator ?? sortDescending);
   }, [comparator, data, valueAccessor]);
+  const wrappedActions = useMemo(() => {
+    if (!actions) {
+      return void 0;
+    }
+    return (item) => {
+      const rowKey = item.datapoint[ROW_KEY];
+      return actions(data[Number(rowKey)]);
+    };
+  }, [actions, data]);
   const yAxisFormatter = useMemo(() => {
     const numFormatter = getFormatter(valueFormatter);
     return (_rowKey, record) => numFormatter(Number(record[valueAccessor]));
   }, [valueFormatter, valueAccessor]);
+  const syntheticColorRules = useMemo(() => {
+    if (colorPaletteMode !== "multi-color") {
+      return [];
+    }
+    const effectivePalette = colorPalette ?? DEFAULT_COLOR_PALETTE;
+    if (isColoredRangeArray(effectivePalette)) {
+      return [];
+    }
+    return dataWithSyntheticFields.map((item, i) => ({
+      valueAccessor: ROW_KEY,
+      comparator: "equals",
+      matchValue: String(item[ROW_KEY]),
+      color: getColorPalette(String(item[labelAccessor]), i, effectivePalette).Default
+    }));
+  }, [colorPaletteMode, colorPalette, dataWithSyntheticFields, labelAccessor]);
   const viewportPx = coerceSizeValueToPixels(height) ?? DEFAULT_CHART_HEIGHT;
   const contentHeight = Math.max(viewportPx, data.length * ROW_HEIGHT);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: scrollContainer,
-      style: { height: coerceSizeValue(height) },
+      className: clsx(scrollContainer, className),
+      style: { ...style, height: coerceSizeValue(height) },
       onScroll,
       "data-dt-component": componentName,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      ...behaviorTrackingProps,
       children: /* @__PURE__ */ jsxs(
         XYChart,
         {
           data: dataWithSyntheticFields,
           height: contentHeight,
+          width,
+          loading,
+          truncationMode,
+          colorPalette,
           ref: mergedRef,
-          ...xyChartProps,
           children: [
             /* @__PURE__ */ jsx(
               XYChart.BarSeries,
@@ -79,7 +127,8 @@ const TopListRoot = forwardRef(function TopList({
                 seriesIdAccessor: SERIES_ID_KEY,
                 nameAccessor: SERIES_NAME_KEY,
                 yAxisId: Y_AXIS_ID,
-                xAxisId: X_AXIS_ID
+                xAxisId: X_AXIS_ID,
+                actions: wrappedActions
               }
             ),
             /* @__PURE__ */ jsx(
@@ -104,22 +153,24 @@ const TopListRoot = forwardRef(function TopList({
               }
             ),
             /* @__PURE__ */ jsx(XYChart.Legend, { hidden: true }),
+            syntheticColorRules.map((rule) => /* @__PURE__ */ jsx(XYChart.ColorRule, { ...rule }, rule.matchValue)),
             children
           ]
         }
       )
     }
   );
-});
-const TopList2 = Object.assign(TopListRoot, {
+}
+const TopListRoot = forwardRef(TopListRender);
+const TopList = Object.assign(TopListRoot, {
   /**
    * Apply a conditional color override to bars matching the rule. Same
    * component reference as `XYChart.ColorRule` and `TimeseriesChart.ColorRule`.
    */
   ColorRule
 });
-TopList2.displayName = "TopList";
+TopList.displayName = "TopList";
 export {
-  TopList2 as TopList
+  TopList
 };
 //# sourceMappingURL=TopList.js.map

package/esm/charts/top-list/TopList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/top-list/TopList.tsx"],
-  "sourcesContent": ["import {\n  type ForwardedRef,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport {\n  ROW_HEIGHT,\n  ROW_KEY,\n  SERIES_ID_KEY,\n  SERIES_NAME_KEY,\n  X_AXIS_ID,\n  Y_AXIS_ID,\n} from './constants.js';\nimport { scrollContainer } from './TopList.sty.js';\nimport type { TopListProps } from './types/top-list.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport type { CategoricalFormatter } from '../core/types/formatter.js';\nimport {\n  coerceSizeValue,\n  coerceSizeValueToPixels,\n} from '../core/utils/coerceSizeValue.js';\nimport { getFormatter } from '../core/utils/get-formatter.js';\nimport { DEFAULT_CHART_HEIGHT } from '../xy-chart/constants/defaults.js';\nimport type { XYChartData, XYChartRef } from '../xy-chart/types/xy-chart.js';\nimport { XYChart } from '../xy-chart/XYChartRoot.js';\n\nexport type { TopListProps };\n\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'TopList';\n\nconst TopListRoot = forwardRef<XYChartRef, TopListProps>(function TopList(\n  {\n    data,\n    labelAccessor,\n    valueAccessor,\n    valueFormatter,\n    comparator,\n    children,\n    height = DEFAULT_CHART_HEIGHT,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': componentName = COMPONENT_NAME_BEHAVIOURAL_TRACKING,\n    ...xyChartProps\n  }: TopListProps,\n  forwardedRef: ForwardedRef<XYChartRef>,\n) {\n  const internalRef = useRef<XYChartRef>(null);\n  const mergedRef = useMergeRefs([internalRef, forwardedRef]);\n  const onScroll = useCallback(() => internalRef.current?.reset(), []);\n\n  const dataWithSyntheticFields = useMemo(() => {\n    const sortDescending = (a: XYChartData, b: XYChartData) =>\n      Number(b[valueAccessor]) - Number(a[valueAccessor]);\n\n    return data\n      .map((d, i) => ({\n        ...d,\n        [SERIES_ID_KEY]: 'series',\n        [SERIES_NAME_KEY]: 'Series',\n        [ROW_KEY]: String(i),\n      }))\n      .sort(comparator ?? sortDescending);\n  }, [comparator, data, valueAccessor]);\n\n  const yAxisFormatter = useMemo<CategoricalFormatter>(() => {\n    const numFormatter = getFormatter(valueFormatter);\n    return (_rowKey, record) => numFormatter(Number(record[valueAccessor]));\n  }, [valueFormatter, valueAccessor]);\n\n  const viewportPx = coerceSizeValueToPixels(height) ?? DEFAULT_CHART_HEIGHT;\n  const contentHeight = Math.max(viewportPx, data.length * ROW_HEIGHT);\n\n  return (\n    <div\n      className={scrollContainer}\n      style={{ height: coerceSizeValue(height) }}\n      onScroll={onScroll}\n      data-dt-component={componentName}\n    >\n      <XYChart\n        data={dataWithSyntheticFields}\n        height={contentHeight}\n        ref={mergedRef}\n        {...xyChartProps}\n      >\n        <XYChart.BarSeries\n          variant=\"single\"\n          y0Accessor={ROW_KEY}\n          x1Accessor={valueAccessor}\n          labelAccessor={labelAccessor}\n          seriesIdAccessor={SERIES_ID_KEY}\n          nameAccessor={SERIES_NAME_KEY}\n          yAxisId={Y_AXIS_ID}\n          xAxisId={X_AXIS_ID}\n        />\n        <XYChart.XAxis\n          id={X_AXIS_ID}\n          type=\"numerical\"\n          position=\"bottom\"\n          hidden\n          disableZoom\n          disablePan\n          formatter={valueFormatter}\n        />\n        <XYChart.YAxis\n          id={Y_AXIS_ID}\n          type=\"categorical\"\n          position=\"left\"\n          formatter={yAxisFormatter}\n        />\n        <XYChart.Legend hidden />\n        {children}\n      </XYChart>\n    </div>\n  );\n});\n\n/**\n * A horizontal ranked-bar chart with labels inside bars and a hidden numerical\n * axis, implemented as a wrapper around XYChart. When the list has more items\n * than fit in `height`, the viewport becomes scrollable.\n *\n * Slots such as `<TopList.ColorRule>` can be passed as children to customize\n * bar colors per datapoint; they are forwarded to the internal `XYChart`.\n * @public\n */\nexport const TopList = Object.assign(TopListRoot, {\n  /**\n   * Apply a conditional color override to bars matching the rule. Same\n   * component reference as `XYChart.ColorRule` and `TimeseriesChart.ColorRule`.\n   */\n  ColorRule,\n});\n\n(TopList as typeof TopList & { displayName: string }).displayName = 'TopList';\n"],
-  "mappings": "AAkFM,SAME,KANF;AAlFN;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEhC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAErC,SAAS,eAAe;AAIxB,MAAM,sCAAsC;AAE5C,MAAM,cAAc,WAAqC,SAAS,QAChE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA;AAAA,EAET,qBAAqB,gBAAgB;AAAA,EACrC,GAAG;AACL,GACA,cACA;AACA,QAAM,cAAc,OAAmB,IAAI;AAC3C,QAAM,YAAY,aAAa,CAAC,aAAa,YAAY,CAAC;AAC1D,QAAM,WAAW,YAAY,MAAM,YAAY,SAAS,MAAM,GAAG,CAAC,CAAC;AAEnE,QAAM,0BAA0B,QAAQ,MAAM;AAC5C,UAAM,iBAAiB,CAAC,GAAgB,MACtC,OAAO,EAAE,aAAa,CAAC,IAAI,OAAO,EAAE,aAAa,CAAC;AAEpD,WAAO,KACJ,IAAI,CAAC,GAAG,OAAO;AAAA,MACd,GAAG;AAAA,MACH,CAAC,aAAa,GAAG;AAAA,MACjB,CAAC,eAAe,GAAG;AAAA,MACnB,CAAC,OAAO,GAAG,OAAO,CAAC;AAAA,IACrB,EAAE,EACD,KAAK,cAAc,cAAc;AAAA,EACtC,GAAG,CAAC,YAAY,MAAM,aAAa,CAAC;AAEpC,QAAM,iBAAiB,QAA8B,MAAM;AACzD,UAAM,eAAe,aAAa,cAAc;AAChD,WAAO,CAAC,SAAS,WAAW,aAAa,OAAO,OAAO,aAAa,CAAC,CAAC;AAAA,EACxE,GAAG,CAAC,gBAAgB,aAAa,CAAC;AAElC,QAAM,aAAa,wBAAwB,MAAM,KAAK;AACtD,QAAM,gBAAgB,KAAK,IAAI,YAAY,KAAK,SAAS,UAAU;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,QAAQ,gBAAgB,MAAM,EAAE;AAAA,MACzC;AAAA,MACA,qBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,KAAK;AAAA,UACJ,GAAG;AAAA,UAEJ;AAAA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,SAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ;AAAA,gBACA,kBAAkB;AAAA,gBAClB,cAAc;AAAA,gBACd,SAAS;AAAA,gBACT,SAAS;AAAA;AAAA,YACX;AAAA,YACA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,IAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,QAAM;AAAA,gBACN,aAAW;AAAA,gBACX,YAAU;AAAA,gBACV,WAAW;AAAA;AAAA,YACb;AAAA,YACA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,IAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,WAAW;AAAA;AAAA,YACb;AAAA,YACA,oBAAC,QAAQ,QAAR,EAAe,QAAM,MAAC;AAAA,YACtB;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAWM,MAAMA,WAAU,OAAO,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD;AACF,CAAC;AAEAA,SAAqD,cAAc;",
-  "names": ["TopList"]
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ForwardedRef,\n  type ReactElement,\n  type RefAttributes,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport {\n  ROW_HEIGHT,\n  ROW_KEY,\n  SERIES_ID_KEY,\n  SERIES_NAME_KEY,\n  X_AXIS_ID,\n  Y_AXIS_ID,\n} from './constants.js';\nimport { scrollContainer } from './TopList.sty.js';\nimport type { TopListActionItem, TopListProps } from './types/top-list.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport type {\n  ChartColorPalette,\n  ChartDatapoint,\n} from '../core/types/chart-data.js';\nimport { isColoredRangeArray } from '../core/types/colored-range.js';\nimport type { CategoricalFormatter } from '../core/types/formatter.js';\nimport {\n  coerceSizeValue,\n  coerceSizeValueToPixels,\n} from '../core/utils/coerceSizeValue.js';\nimport { getColorPalette } from '../core/utils/get-color-palette.js';\nimport { getFormatter } from '../core/utils/get-formatter.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_COLOR_PALETTE,\n} from '../xy-chart/constants/defaults.js';\nimport type {\n  XYChartBarSeriesActionItem,\n  XYChartRef,\n} from '../xy-chart/types/xy-chart.js';\nimport { XYChart } from '../xy-chart/XYChartRoot.js';\n\nexport type { ChartColorPalette, TopListActionItem, TopListProps };\n\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'TopList';\n\nfunction TopListRender<Data extends ChartDatapoint = ChartDatapoint>(\n  props: TopListProps<Data>,\n  forwardedRef: ForwardedRef<XYChartRef>,\n) {\n  const {\n    data,\n    labelAccessor,\n    valueAccessor,\n    valueFormatter,\n    comparator,\n    actions,\n    colorPaletteMode,\n    colorPalette,\n    children,\n    height = DEFAULT_CHART_HEIGHT,\n    width,\n    loading,\n    truncationMode,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': componentName = COMPONENT_NAME_BEHAVIOURAL_TRACKING,\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n  const internalRef = useRef<XYChartRef>(null);\n  const mergedRef = useMergeRefs([internalRef, forwardedRef]);\n  const onScroll = useCallback(() => internalRef.current?.reset(), []);\n\n  const dataWithSyntheticFields = useMemo(() => {\n    const sortDescending = (a: ChartDatapoint, b: ChartDatapoint) =>\n      Number(b[valueAccessor]) - Number(a[valueAccessor]);\n\n    return data\n      .map((d, i) => ({\n        ...d,\n        [SERIES_ID_KEY]: 'series',\n        [SERIES_NAME_KEY]: 'Series',\n        [ROW_KEY]: String(i),\n      }))\n      .sort(comparator ?? sortDescending) as ChartDatapoint[];\n  }, [comparator, data, valueAccessor]);\n\n  const wrappedActions = useMemo(() => {\n    if (!actions) {\n      return undefined;\n    }\n\n    return (item: XYChartBarSeriesActionItem) => {\n      const rowKey = item.datapoint[ROW_KEY] as string;\n      return actions(data[Number(rowKey)]);\n    };\n  }, [actions, data]);\n\n  const yAxisFormatter = useMemo<CategoricalFormatter>(() => {\n    const numFormatter = getFormatter(valueFormatter);\n    return (_rowKey, record) => numFormatter(Number(record[valueAccessor]));\n  }, [valueFormatter, valueAccessor]);\n\n  const syntheticColorRules = useMemo(() => {\n    if (colorPaletteMode !== 'multi-color') {\n      return [];\n    }\n\n    const effectivePalette = colorPalette ?? DEFAULT_COLOR_PALETTE;\n\n    if (isColoredRangeArray(effectivePalette)) {\n      return [];\n    }\n\n    return dataWithSyntheticFields.map((item, i) => ({\n      valueAccessor: ROW_KEY,\n      comparator: 'equals' as const,\n      matchValue: String(item[ROW_KEY]),\n      color: getColorPalette(String(item[labelAccessor]), i, effectivePalette)\n        .Default,\n    }));\n  }, [colorPaletteMode, colorPalette, dataWithSyntheticFields, labelAccessor]);\n\n  const viewportPx = coerceSizeValueToPixels(height) ?? DEFAULT_CHART_HEIGHT;\n  const contentHeight = Math.max(viewportPx, data.length * ROW_HEIGHT);\n\n  return (\n    <div\n      className={clsx(scrollContainer, className)}\n      style={{ ...style, height: coerceSizeValue(height) }}\n      onScroll={onScroll}\n      data-dt-component={componentName}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...behaviorTrackingProps}\n    >\n      <XYChart\n        data={dataWithSyntheticFields}\n        height={contentHeight}\n        width={width}\n        loading={loading}\n        truncationMode={truncationMode}\n        colorPalette={colorPalette}\n        ref={mergedRef}\n      >\n        <XYChart.BarSeries\n          variant=\"single\"\n          y0Accessor={ROW_KEY}\n          x1Accessor={valueAccessor}\n          labelAccessor={labelAccessor}\n          seriesIdAccessor={SERIES_ID_KEY}\n          nameAccessor={SERIES_NAME_KEY}\n          yAxisId={Y_AXIS_ID}\n          xAxisId={X_AXIS_ID}\n          actions={wrappedActions}\n        />\n        <XYChart.XAxis\n          id={X_AXIS_ID}\n          type=\"numerical\"\n          position=\"bottom\"\n          hidden\n          disableZoom\n          disablePan\n          formatter={valueFormatter}\n        />\n        <XYChart.YAxis\n          id={Y_AXIS_ID}\n          type=\"categorical\"\n          position=\"left\"\n          formatter={yAxisFormatter}\n        />\n        <XYChart.Legend hidden />\n        {syntheticColorRules.map((rule) => (\n          <XYChart.ColorRule key={rule.matchValue} {...rule} />\n        ))}\n        {children}\n      </XYChart>\n    </div>\n  );\n}\n\nconst TopListRoot = forwardRef(TopListRender) as unknown as <\n  Data extends ChartDatapoint = ChartDatapoint,\n>(\n  props: TopListProps<Data> & RefAttributes<XYChartRef>,\n) => ReactElement | null;\n\n/**\n * A horizontal ranked-bar chart with labels inside bars and a hidden numerical\n * axis, implemented as a wrapper around XYChart. When the list has more items\n * than fit in `height`, the viewport becomes scrollable.\n *\n * Slots such as `<TopList.ColorRule>` can be passed as children to customize\n * bar colors per datapoint; they are forwarded to the internal `XYChart`.\n * @public\n */\nexport const TopList = Object.assign(TopListRoot, {\n  /**\n   * Apply a conditional color override to bars matching the rule. Same\n   * component reference as `XYChart.ColorRule` and `TimeseriesChart.ColorRule`.\n   */\n  ColorRule,\n});\n\n(TopList as typeof TopList & { displayName: string }).displayName = 'TopList';\n"],
+  "mappings": "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",
+  "names": []
 }

package/esm/charts/top-list/TopList.sty.js

@@ -1,5 +1,5 @@
 import "./TopList.css";
-var scrollContainer = "_jwlby60-3-10-4";
+var scrollContainer = "_jwlby60-3-11-0";
 export {
   scrollContainer
 };

package/esm/charts/top-list/TopList.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/top-list/TopList.css.ts"],
-  "sourcesContent": ["import './TopList.css';\nexport var scrollContainer = '_jwlby60-3-10-4';"],
+  "sourcesContent": ["import './TopList.css';\nexport var scrollContainer = '_jwlby60-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.css

@@ -1,4 +1,4 @@
-._1iqz50a0-3-10-4 {
+._1iqz50a0-3-11-0 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.sty.js

@@ -1,5 +1,5 @@
 import "./TreeMapOverlay.css";
-var container = "_1iqz50a0-3-10-4";
+var container = "_1iqz50a0-3-11-0";
 export {
   container
 };

package/esm/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.css.ts"],
-  "sourcesContent": ["import './TreeMapOverlay.css';\nexport var container = '_1iqz50a0-3-10-4';"],
+  "sourcesContent": ["import './TreeMapOverlay.css';\nexport var container = '_1iqz50a0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/tree-map/utils/to-hierarchical-props.js

@@ -1,3 +1,4 @@
+import { accessValue } from "../../../core/utils/accessors/access-value.js";
 const toHierarchicalProps = (props) => {
   const { data, valueAccessor, nameAccessor, groupBy, ...rest } = props;
   const { rootKey, clusterKey, leafKey } = resolveGroupKeys(groupBy);
@@ -39,7 +40,7 @@ const buildClusterNodes = (clusterMap) => Array.from(clusterMap.entries()).map((
 const buildClusterMap = (data, valueAccessor, clusterKey, leafKey) => {
   const clusterMap = /* @__PURE__ */ new Map();
   for (const dp of data) {
-    const rawValue = dp[valueAccessor];
+    const rawValue = accessValue(dp, valueAccessor);
     if (typeof rawValue !== "number") {
       continue;
     }

package/esm/charts/tree-map/utils/to-hierarchical-props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/to-hierarchical-props.ts"],
-  "sourcesContent": ["import type {\n  NameAccessor,\n  TreeMapClusterNode,\n  TreeMapFlatProps,\n  TreeMapHierarchicalProps,\n  TreeMapLeafNode,\n  TreeMapRootNode,\n} from '../types/treemap.js';\n\nexport const toHierarchicalProps = (\n  props: TreeMapFlatProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n): TreeMapHierarchicalProps => {\n  const { data, valueAccessor, nameAccessor, groupBy, ...rest } = props;\n\n  const { rootKey, clusterKey, leafKey } = resolveGroupKeys(groupBy);\n  const rootName = resolveRootName(data, rootKey);\n\n  const clusterMap = buildClusterMap(data, valueAccessor, clusterKey, leafKey);\n\n  const nodes: TreeMapClusterNode[] = buildClusterNodes(clusterMap);\n  const tree = buildRootNode(nodes, rootName);\n\n  return {\n    ...rest,\n    data: { tree },\n    nameAccessor: resolveNameAccessor(data, nameAccessor),\n  };\n};\n\nconst resolveNameAccessor = (\n  data: Record<string, unknown>[],\n  nameAccessor: string | undefined,\n): NameAccessor | undefined => {\n  if (nameAccessor === undefined) {\n    return undefined;\n  }\n  return typeof data[0]?.[nameAccessor] === 'number' ? 'value' : 'name';\n};\n\nconst resolveGroupKeys = (groupBy: string | string[]) => {\n  const groups = Array.isArray(groupBy) ? groupBy.slice(0, 3) : [groupBy];\n  const hasRoot = groups.length >= 3;\n\n  return {\n    rootKey: hasRoot ? groups[0] : undefined,\n    clusterKey: hasRoot ? groups[1] : groups[0],\n    leafKey: groups.length >= 2 ? groups.at(-1) : undefined,\n  };\n};\n\nconst buildRootNode = (\n  nodes: TreeMapClusterNode[],\n  rootName: string | undefined,\n): TreeMapRootNode => ({\n  nodes,\n  value: nodes.reduce((sum, n) => sum + n.value, 0),\n  ...(rootName === undefined ? {} : { name: rootName }),\n});\n\nconst buildClusterNodes = (\n  clusterMap: Map<string, { leaves: TreeMapLeafNode[]; value: number }>,\n): TreeMapClusterNode[] =>\n  Array.from(clusterMap.entries()).map(([name, { leaves, value }]) => ({\n    name,\n    value,\n    ...(leaves.length > 0 ? { nodes: leaves } : {}),\n  }));\n\nconst buildClusterMap = (\n  data: Record<string, unknown>[],\n  valueAccessor: string,\n  clusterKey: string,\n  leafKey: string | undefined,\n) => {\n  const clusterMap = new Map<\n    string,\n    { leaves: TreeMapLeafNode[]; value: number }\n  >();\n\n  for (const dp of data) {\n    const rawValue = dp[valueAccessor];\n    if (typeof rawValue !== 'number') {\n      continue;\n    }\n\n    const clusterName = toSafeString(dp[clusterKey]);\n\n    let cluster = clusterMap.get(clusterName);\n    if (!cluster) {\n      cluster = {\n        leaves: [] as TreeMapLeafNode[],\n        value: 0,\n      };\n      clusterMap.set(clusterName, cluster);\n    }\n\n    cluster.value += rawValue;\n\n    if (leafKey === undefined) {\n      continue;\n    }\n    const leafName = toSafeString(dp[leafKey]);\n    cluster.leaves.push({ name: leafName, value: rawValue });\n  }\n\n  return clusterMap;\n};\n\nconst resolveRootName = (\n  data: Record<string, unknown>[],\n  rootKey: string | undefined,\n): string | undefined => {\n  if (rootKey === undefined) {\n    return undefined;\n  }\n\n  const rootNameValue = data.find(\n    (dp) => dp[rootKey] !== null && dp[rootKey] !== undefined,\n  )?.[rootKey];\n\n  if (rootNameValue === null || rootNameValue === undefined) {\n    return undefined;\n  }\n\n  return toSafeString(rootNameValue);\n};\n\nconst toSafeString = (value: unknown): string => {\n  if (typeof value === 'string') {\n    return value;\n  }\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return `${value}`;\n  }\n  return '';\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { accessValue } from '../../../core/utils/accessors/access-value.js';\nimport type {\n  NameAccessor,\n  TreeMapClusterNode,\n  TreeMapFlatProps,\n  TreeMapHierarchicalProps,\n  TreeMapLeafNode,\n  TreeMapRootNode,\n} from '../types/treemap.js';\n\nexport const toHierarchicalProps = (\n  props: TreeMapFlatProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n): TreeMapHierarchicalProps => {\n  const { data, valueAccessor, nameAccessor, groupBy, ...rest } = props;\n\n  const { rootKey, clusterKey, leafKey } = resolveGroupKeys(groupBy);\n  const rootName = resolveRootName(data, rootKey);\n\n  const clusterMap = buildClusterMap(data, valueAccessor, clusterKey, leafKey);\n\n  const nodes: TreeMapClusterNode[] = buildClusterNodes(clusterMap);\n  const tree = buildRootNode(nodes, rootName);\n\n  return {\n    ...rest,\n    data: { tree },\n    nameAccessor: resolveNameAccessor(data, nameAccessor),\n  };\n};\n\nconst resolveNameAccessor = (\n  data: Record<string, unknown>[],\n  nameAccessor: string | undefined,\n): NameAccessor | undefined => {\n  if (nameAccessor === undefined) {\n    return undefined;\n  }\n  return typeof data[0]?.[nameAccessor] === 'number' ? 'value' : 'name';\n};\n\nconst resolveGroupKeys = (groupBy: string | string[]) => {\n  const groups = Array.isArray(groupBy) ? groupBy.slice(0, 3) : [groupBy];\n  const hasRoot = groups.length >= 3;\n\n  return {\n    rootKey: hasRoot ? groups[0] : undefined,\n    clusterKey: hasRoot ? groups[1] : groups[0],\n    leafKey: groups.length >= 2 ? groups.at(-1) : undefined,\n  };\n};\n\nconst buildRootNode = (\n  nodes: TreeMapClusterNode[],\n  rootName: string | undefined,\n): TreeMapRootNode => ({\n  nodes,\n  value: nodes.reduce((sum, n) => sum + n.value, 0),\n  ...(rootName === undefined ? {} : { name: rootName }),\n});\n\nconst buildClusterNodes = (\n  clusterMap: Map<string, { leaves: TreeMapLeafNode[]; value: number }>,\n): TreeMapClusterNode[] =>\n  Array.from(clusterMap.entries()).map(([name, { leaves, value }]) => ({\n    name,\n    value,\n    ...(leaves.length > 0 ? { nodes: leaves } : {}),\n  }));\n\nconst buildClusterMap = (\n  data: Record<string, unknown>[],\n  valueAccessor: string,\n  clusterKey: string,\n  leafKey: string | undefined,\n) => {\n  const clusterMap = new Map<\n    string,\n    { leaves: TreeMapLeafNode[]; value: number }\n  >();\n\n  for (const dp of data) {\n    const rawValue = accessValue<number>(dp, valueAccessor);\n    if (typeof rawValue !== 'number') {\n      continue;\n    }\n\n    const clusterName = toSafeString(dp[clusterKey]);\n\n    let cluster = clusterMap.get(clusterName);\n    if (!cluster) {\n      cluster = {\n        leaves: [] as TreeMapLeafNode[],\n        value: 0,\n      };\n      clusterMap.set(clusterName, cluster);\n    }\n\n    cluster.value += rawValue;\n\n    if (leafKey === undefined) {\n      continue;\n    }\n    const leafName = toSafeString(dp[leafKey]);\n    cluster.leaves.push({ name: leafName, value: rawValue });\n  }\n\n  return clusterMap;\n};\n\nconst resolveRootName = (\n  data: Record<string, unknown>[],\n  rootKey: string | undefined,\n): string | undefined => {\n  if (rootKey === undefined) {\n    return undefined;\n  }\n\n  const rootNameValue = data.find(\n    (dp) => dp[rootKey] !== null && dp[rootKey] !== undefined,\n  )?.[rootKey];\n\n  if (rootNameValue === null || rootNameValue === undefined) {\n    return undefined;\n  }\n\n  return toSafeString(rootNameValue);\n};\n\nconst toSafeString = (value: unknown): string => {\n  if (typeof value === 'string') {\n    return value;\n  }\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return `${value}`;\n  }\n  return '';\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/XYChart.js

@@ -8,6 +8,7 @@ import { XYChartLeftAxisArea } from "./components/axes/XYChartLeftAxisArea.js";
 import { XYChartRightAxisArea } from "./components/axes/XYChartRightAxisArea.js";
 import { XYChartTopAxisArea } from "./components/axes/XYChartTopAxisArea.js";
 import { BarLabelLayout } from "./components/displays/BarDisplay/BarLabelLayout.js";
+import { RectLabelLayout } from "./components/displays/RectLabelLayout.js";
 import { XYChartGridLayout } from "./components/layout/XYChartGridLayout.js";
 import { XYChartOverlay } from "./components/overlay/XYChartOverlay.js";
 import { XYChartThresholdArea } from "./components/thresholds/XYChartThresholdArea.js";
@@ -116,6 +117,7 @@ const XYChart = forwardRef(
                     /* @__PURE__ */ jsx(XYChartGridLayout, {}),
                     /* @__PURE__ */ jsx(XYChartLayout, {}),
                     /* @__PURE__ */ jsx(BarLabelLayout, {}),
+                    /* @__PURE__ */ jsx(RectLabelLayout, {}),
                     /* @__PURE__ */ jsx(XYChartAxisBorder, {}),
                     showAnnotations && /* @__PURE__ */ jsx(XYChartAnnotationsIndicators, {}),
                     /* @__PURE__ */ jsx(

package/esm/charts/xy-chart/XYChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/xy-chart/XYChart.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { XYChartImperativeHandlerBuilder } from './builders/XYChartImperativeHandlerBuilder.js';\nimport { XYChartAnnotationsArea } from './components/annotations/XYChartAnnotationsArea.js';\nimport { XYChartAnnotationsIndicators } from './components/annotations/XYChartAnnotationsIndicators.js';\nimport { XYChartBottomAxisArea } from './components/axes/XYChartBottomAxisArea.js';\nimport { XYChartLeftAxisArea } from './components/axes/XYChartLeftAxisArea.js';\nimport { XYChartRightAxisArea } from './components/axes/XYChartRightAxisArea.js';\nimport { XYChartTopAxisArea } from './components/axes/XYChartTopAxisArea.js';\nimport { BarLabelLayout } from './components/displays/BarDisplay/BarLabelLayout.js';\nimport { XYChartGridLayout } from './components/layout/XYChartGridLayout.js';\nimport { XYChartOverlay } from './components/overlay/XYChartOverlay.js';\nimport { XYChartThresholdArea } from './components/thresholds/XYChartThresholdArea.js';\nimport { XY_CHART_ARIA_LABEL } from './constants/defaults.js';\nimport { XYChartSelectConfigContext } from './context/XYChartSelectConfig.context.js';\nimport { XYChartTooltipContext } from './context/XYChartTooltip.context.js';\nimport { useVisibleAxesConfig } from './hooks/useVisibleAxesConfig.js';\nimport { useXYChartAnnotationsConfig } from './hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsData } from './hooks/useXYChartAnnotationsData.js';\nimport { useXYChartAnnotationsHiddenTracks } from './hooks/useXYChartAnnotationsHiddenTracks.js';\nimport { useXYChartData } from './hooks/useXYChartData.js';\nimport { XYChartAxisBorder } from './layout/XYChartAxisBorder.js';\nimport { XYChartLayout } from './layout/XYChartLayout.js';\nimport { XYChartProviders } from './providers/XYChartProviders.js';\nimport { XYChartRef } from './types/xy-chart.js';\nimport { getPaddingByAxes } from './utils/get-padding-by-axes.js';\nimport {\n  gridTemplateAreas,\n  gridTemplateColumns,\n  gridTemplateRows,\n} from './utils/grid-templates.js';\nimport type { XYChartConfig } from './utils/xy-chart-configuration.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { getAnnotationsVisibleArea } from '../core/components/annotations/utils/get-annotations-visible-area.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport {\n  shouldShowAnnotations,\n  shouldShowAxes,\n} from '../core/components/chart-grid/constants.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport { ChartLoaderOverlay } from '../core/components/chart-loader-overlay/ChartLoaderOverlay.js';\n\ninterface XYChartProps {\n  config: XYChartConfig;\n}\n\nexport const XYChart = forwardRef<XYChartRef, PropsWithChildren<XYChartProps>>(\n  ({ config }, forwardedRef) => {\n    const loading = useChartLayoutLoading();\n    const { width, height } = useGraphSize();\n    const chartRef = useRef<HTMLDivElement>(null);\n    const chartAndForwardedRef = useMergeRefs<XYChartRef | HTMLDivElement>([\n      forwardedRef,\n      chartRef,\n    ]);\n    const { top, bottom, left, right } = useVisibleAxesConfig();\n    const { axesMetadata } = useXYChartData();\n\n    const topAxisMaxSize = top?.tickLabelMaxSize;\n    const bottomAxisMaxSize = bottom?.tickLabelMaxSize;\n    const leftAxisMaxSize = left?.tickLabelMaxSize;\n    const rightAxisMaxSize = right?.tickLabelMaxSize;\n    const paddings = getPaddingByAxes({ top, bottom, left, right });\n    const chartGridHeight = height - paddings.vertical();\n    const chartGridWidth = width - paddings.horizontal();\n\n    const annotationsData = useXYChartAnnotationsData();\n    const annotationsConfig = useXYChartAnnotationsConfig();\n    const tracksQuantity = annotationsData?.size ?? 0;\n    const hiddenTracks = useXYChartAnnotationsHiddenTracks();\n\n    const annotationsVisibleArea = getAnnotationsVisibleArea(\n      tracksQuantity,\n      annotationsConfig?.fixedTracks,\n      hiddenTracks.length,\n    );\n\n    const annotationsAreaHeight = annotationsVisibleArea;\n\n    const showAnnotations = shouldShowAnnotations(\n      chartGridHeight,\n      tracksQuantity,\n    );\n\n    const showAxes = shouldShowAxes(chartGridHeight);\n\n    const gridAnnotationsHeight = showAnnotations ? annotationsAreaHeight : 0;\n    const computedGridTemplateRows = showAxes\n      ? gridTemplateRows(\n          bottomAxisMaxSize,\n          topAxisMaxSize,\n          gridAnnotationsHeight,\n        )\n      : '0px 0px 1fr 1px';\n\n    return (\n      <div\n        className={defaultChartSize}\n        style={{\n          paddingTop: paddings.top,\n          paddingLeft: paddings.left,\n        }}\n        aria-label={XY_CHART_ARIA_LABEL}\n        role=\"img\"\n      >\n        <ChartGrid\n          width={chartGridWidth}\n          height={chartGridHeight}\n          gridTemplateAreas={gridTemplateAreas}\n          gridTemplateColumns={gridTemplateColumns(\n            leftAxisMaxSize,\n            rightAxisMaxSize,\n          )}\n          gridTemplateRows={computedGridTemplateRows}\n          ref={chartAndForwardedRef}\n        >\n          <XYChartTooltipContext.Provider value={config.tooltip}>\n            <XYChartSelectConfigContext.Provider value={config.select}>\n              <XYChartProviders>\n                <XYChartImperativeHandlerBuilder\n                  chartRef={forwardedRef}\n                  containerRef={chartRef}\n                  config={config}\n                >\n                  {showAxes && <XYChartTopAxisArea />}\n                  {showAxes && <XYChartBottomAxisArea />}\n                  {showAxes && <XYChartLeftAxisArea />}\n                  {showAxes && <XYChartRightAxisArea />}\n\n                  {showAnnotations && <XYChartAnnotationsArea />}\n                  <ChartGrid.PlotArea>\n                    <XYChartGridLayout />\n                    <XYChartLayout />\n                    <BarLabelLayout />\n                    <XYChartAxisBorder />\n                    {showAnnotations && <XYChartAnnotationsIndicators />}\n                    <ChartLoaderOverlay\n                      loading={loading}\n                      zoomEnabled={axesMetadata.isZoomEnabled}\n                    >\n                      <XYChartOverlay />\n                    </ChartLoaderOverlay>\n                  </ChartGrid.PlotArea>\n                  <XYChartThresholdArea />\n                </XYChartImperativeHandlerBuilder>\n              </XYChartProviders>\n            </XYChartSelectConfigContext.Provider>\n          </XYChartTooltipContext.Provider>\n        </ChartGrid>\n      </div>\n    );\n  },\n);\n\n(XYChart as typeof XYChart & { displayName: string }).displayName = 'XYChart';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { XYChartImperativeHandlerBuilder } from './builders/XYChartImperativeHandlerBuilder.js';\nimport { XYChartAnnotationsArea } from './components/annotations/XYChartAnnotationsArea.js';\nimport { XYChartAnnotationsIndicators } from './components/annotations/XYChartAnnotationsIndicators.js';\nimport { XYChartBottomAxisArea } from './components/axes/XYChartBottomAxisArea.js';\nimport { XYChartLeftAxisArea } from './components/axes/XYChartLeftAxisArea.js';\nimport { XYChartRightAxisArea } from './components/axes/XYChartRightAxisArea.js';\nimport { XYChartTopAxisArea } from './components/axes/XYChartTopAxisArea.js';\nimport { BarLabelLayout } from './components/displays/BarDisplay/BarLabelLayout.js';\nimport { RectLabelLayout } from './components/displays/RectLabelLayout.js';\nimport { XYChartGridLayout } from './components/layout/XYChartGridLayout.js';\nimport { XYChartOverlay } from './components/overlay/XYChartOverlay.js';\nimport { XYChartThresholdArea } from './components/thresholds/XYChartThresholdArea.js';\nimport { XY_CHART_ARIA_LABEL } from './constants/defaults.js';\nimport { XYChartSelectConfigContext } from './context/XYChartSelectConfig.context.js';\nimport { XYChartTooltipContext } from './context/XYChartTooltip.context.js';\nimport { useVisibleAxesConfig } from './hooks/useVisibleAxesConfig.js';\nimport { useXYChartAnnotationsConfig } from './hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsData } from './hooks/useXYChartAnnotationsData.js';\nimport { useXYChartAnnotationsHiddenTracks } from './hooks/useXYChartAnnotationsHiddenTracks.js';\nimport { useXYChartData } from './hooks/useXYChartData.js';\nimport { XYChartAxisBorder } from './layout/XYChartAxisBorder.js';\nimport { XYChartLayout } from './layout/XYChartLayout.js';\nimport { XYChartProviders } from './providers/XYChartProviders.js';\nimport { XYChartRef } from './types/xy-chart.js';\nimport { getPaddingByAxes } from './utils/get-padding-by-axes.js';\nimport {\n  gridTemplateAreas,\n  gridTemplateColumns,\n  gridTemplateRows,\n} from './utils/grid-templates.js';\nimport type { XYChartConfig } from './utils/xy-chart-configuration.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { getAnnotationsVisibleArea } from '../core/components/annotations/utils/get-annotations-visible-area.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport {\n  shouldShowAnnotations,\n  shouldShowAxes,\n} from '../core/components/chart-grid/constants.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport { ChartLoaderOverlay } from '../core/components/chart-loader-overlay/ChartLoaderOverlay.js';\n\ninterface XYChartProps {\n  config: XYChartConfig;\n}\n\nexport const XYChart = forwardRef<XYChartRef, PropsWithChildren<XYChartProps>>(\n  ({ config }, forwardedRef) => {\n    const loading = useChartLayoutLoading();\n    const { width, height } = useGraphSize();\n    const chartRef = useRef<HTMLDivElement>(null);\n    const chartAndForwardedRef = useMergeRefs<XYChartRef | HTMLDivElement>([\n      forwardedRef,\n      chartRef,\n    ]);\n    const { top, bottom, left, right } = useVisibleAxesConfig();\n    const { axesMetadata } = useXYChartData();\n\n    const topAxisMaxSize = top?.tickLabelMaxSize;\n    const bottomAxisMaxSize = bottom?.tickLabelMaxSize;\n    const leftAxisMaxSize = left?.tickLabelMaxSize;\n    const rightAxisMaxSize = right?.tickLabelMaxSize;\n    const paddings = getPaddingByAxes({ top, bottom, left, right });\n    const chartGridHeight = height - paddings.vertical();\n    const chartGridWidth = width - paddings.horizontal();\n\n    const annotationsData = useXYChartAnnotationsData();\n    const annotationsConfig = useXYChartAnnotationsConfig();\n    const tracksQuantity = annotationsData?.size ?? 0;\n    const hiddenTracks = useXYChartAnnotationsHiddenTracks();\n\n    const annotationsVisibleArea = getAnnotationsVisibleArea(\n      tracksQuantity,\n      annotationsConfig?.fixedTracks,\n      hiddenTracks.length,\n    );\n\n    const annotationsAreaHeight = annotationsVisibleArea;\n\n    const showAnnotations = shouldShowAnnotations(\n      chartGridHeight,\n      tracksQuantity,\n    );\n\n    const showAxes = shouldShowAxes(chartGridHeight);\n\n    const gridAnnotationsHeight = showAnnotations ? annotationsAreaHeight : 0;\n    const computedGridTemplateRows = showAxes\n      ? gridTemplateRows(\n          bottomAxisMaxSize,\n          topAxisMaxSize,\n          gridAnnotationsHeight,\n        )\n      : '0px 0px 1fr 1px';\n\n    return (\n      <div\n        className={defaultChartSize}\n        style={{\n          paddingTop: paddings.top,\n          paddingLeft: paddings.left,\n        }}\n        aria-label={XY_CHART_ARIA_LABEL}\n        role=\"img\"\n      >\n        <ChartGrid\n          width={chartGridWidth}\n          height={chartGridHeight}\n          gridTemplateAreas={gridTemplateAreas}\n          gridTemplateColumns={gridTemplateColumns(\n            leftAxisMaxSize,\n            rightAxisMaxSize,\n          )}\n          gridTemplateRows={computedGridTemplateRows}\n          ref={chartAndForwardedRef}\n        >\n          <XYChartTooltipContext.Provider value={config.tooltip}>\n            <XYChartSelectConfigContext.Provider value={config.select}>\n              <XYChartProviders>\n                <XYChartImperativeHandlerBuilder\n                  chartRef={forwardedRef}\n                  containerRef={chartRef}\n                  config={config}\n                >\n                  {showAxes && <XYChartTopAxisArea />}\n                  {showAxes && <XYChartBottomAxisArea />}\n                  {showAxes && <XYChartLeftAxisArea />}\n                  {showAxes && <XYChartRightAxisArea />}\n\n                  {showAnnotations && <XYChartAnnotationsArea />}\n                  <ChartGrid.PlotArea>\n                    <XYChartGridLayout />\n                    <XYChartLayout />\n                    <BarLabelLayout />\n                    <RectLabelLayout />\n                    <XYChartAxisBorder />\n                    {showAnnotations && <XYChartAnnotationsIndicators />}\n                    <ChartLoaderOverlay\n                      loading={loading}\n                      zoomEnabled={axesMetadata.isZoomEnabled}\n                    >\n                      <XYChartOverlay />\n                    </ChartLoaderOverlay>\n                  </ChartGrid.PlotArea>\n                  <XYChartThresholdArea />\n                </XYChartImperativeHandlerBuilder>\n              </XYChartProviders>\n            </XYChartSelectConfigContext.Provider>\n          </XYChartTooltipContext.Provider>\n        </ChartGrid>\n      </div>\n    );\n  },\n);\n\n(XYChart as typeof XYChart & { displayName: string }).displayName = 'XYChart';\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./AxisArea.css";
-var axisContainerStyle = "_bidc430-3-10-4";
+var axisContainerStyle = "_bidc430-3-11-0";
 export {
   axisContainerStyle
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisArea.css.ts"],
-  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-10-4';"],
+  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 import "./AxisTickWithTruncation.css";
-var directionValue = "var(--_z2zz8y0-3-10-4)";
-var tickStyle = "_z2zz8y2-3-10-4";
-var widthContainer = "var(--_z2zz8y1-3-10-4)";
+var directionValue = "var(--_z2zz8y0-3-11-0)";
+var tickStyle = "_z2zz8y2-3-11-0";
+var widthContainer = "var(--_z2zz8y1-3-11-0)";
 export {
   directionValue,
   tickStyle,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisTickWithTruncation.css.ts"],
-  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-10-4)';\nexport var tickStyle = '_z2zz8y2-3-10-4';\nexport var widthContainer = 'var(--_z2zz8y1-3-10-4)';"],
+  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-11-0)';\nexport var tickStyle = '_z2zz8y2-3-11-0';\nexport var widthContainer = 'var(--_z2zz8y1-3-11-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,YAAY;AAChB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css

@@ -1,10 +1,10 @@
-._b76tm80-3-10-4 {
+._b76tm80-3-11-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._b76tm81-3-10-4 {
+._b76tm81-3-11-0 {
   position: absolute;
   white-space: nowrap;
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -12,7 +12,7 @@
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   line-height: 1;
 }
-._b76tm82-3-10-4 {
+._b76tm82-3-11-0 {
   position: absolute;
   overflow: hidden;
   pointer-events: none;

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.js

@@ -1,7 +1,7 @@
 import "./BarLabelOverlay.css";
-var labelClipWrapper = "_b76tm82-3-10-4";
-var labelSpan = "_b76tm81-3-10-4";
-var overlayContainer = "_b76tm80-3-10-4";
+var labelClipWrapper = "_b76tm82-3-11-0";
+var labelSpan = "_b76tm81-3-11-0";
+var overlayContainer = "_b76tm80-3-11-0";
 export {
   labelClipWrapper,
   labelSpan,

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css.ts"],
-  "sourcesContent": ["import './BarLabelOverlay.css';\nexport var labelClipWrapper = '_b76tm82-3-10-4';\nexport var labelSpan = '_b76tm81-3-10-4';\nexport var overlayContainer = '_b76tm80-3-10-4';"],
+  "sourcesContent": ["import './BarLabelOverlay.css';\nexport var labelClipWrapper = '_b76tm82-3-11-0';\nexport var labelSpan = '_b76tm81-3-11-0';\nexport var overlayContainer = '_b76tm80-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,YAAY;AAChB,IAAI,mBAAmB;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/RectLabelLayout.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { RectLabelOverlay } from "./RectLabelOverlay.js";
+import { plotLayout } from "../../../core/components/chart-grid/ChartGrid.sty.js";
+import { CANVAS_DIMMED_OPACITY } from "../../../core/utils/apply-opacity-to-canvas.js";
+import { zIndicesXYChartAreas } from "../../constants/xy-chart-z-index-areas.js";
+import { useRectData } from "../../hooks/useRectData.js";
+import { useXYChartScales } from "../../hooks/useXYChartScales.js";
+import { useXYChartHighlightedSeriesIdsState } from "../../store/selectors.js";
+import { getHighlightedSeries } from "../../utils/get-highlighted-series.js";
+function RectLabelLayout() {
+  const axisIdToScales = useXYChartScales();
+  const { filteredSeriesWithDatapoints } = useRectData();
+  const highlightedSeriesId = useXYChartHighlightedSeriesIdsState();
+  const labelSeries = filteredSeriesWithDatapoints.filter(
+    (s) => s.hasLabels === true
+  );
+  if (labelSeries.length === 0) {
+    return null;
+  }
+  const highlightedSeries = highlightedSeriesId ? getHighlightedSeries(labelSeries, highlightedSeriesId) : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: plotLayout,
+      style: {
+        zIndex: zIndicesXYChartAreas.plot + 1,
+        pointerEvents: "none"
+      },
+      children: labelSeries.map((series) => {
+        const opacity = highlightedSeries && series !== highlightedSeries ? +CANVAS_DIMMED_OPACITY : void 0;
+        return /* @__PURE__ */ jsx(
+          RectLabelOverlay,
+          {
+            axisIdToScales,
+            series,
+            opacity
+          },
+          series.id
+        );
+      })
+    }
+  );
+}
+RectLabelLayout["displayName"] = "RectLabelLayout";
+export {
+  RectLabelLayout
+};
+//# sourceMappingURL=RectLabelLayout.js.map

package/esm/charts/xy-chart/components/displays/RectLabelLayout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/xy-chart/components/displays/RectLabelLayout.tsx"],
+  "sourcesContent": ["import { RectLabelOverlay } from './RectLabelOverlay.js';\nimport { plotLayout } from '../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { CANVAS_DIMMED_OPACITY } from '../../../core/utils/apply-opacity-to-canvas.js';\nimport { zIndicesXYChartAreas } from '../../constants/xy-chart-z-index-areas.js';\nimport { useRectData } from '../../hooks/useRectData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useXYChartHighlightedSeriesIdsState } from '../../store/selectors.js';\nimport { getHighlightedSeries } from '../../utils/get-highlighted-series.js';\n\n/**\n * Chart-level wrapper that mounts the HTML labels for every rect series with\n * `hasLabels === true`. Rendered as a sibling of the canvas plot inside\n * `<ChartGrid.PlotArea>` because HTML cannot live inside `<canvas>` \u2014 see\n * `./RectLabelOverlay.tsx` for the per-series clipped-label renderer.\n */\nexport function RectLabelLayout() {\n  const axisIdToScales = useXYChartScales();\n  const { filteredSeriesWithDatapoints } = useRectData();\n  const highlightedSeriesId = useXYChartHighlightedSeriesIdsState();\n\n  const labelSeries = filteredSeriesWithDatapoints.filter(\n    (s) => s.hasLabels === true,\n  );\n\n  if (labelSeries.length === 0) {\n    return null;\n  }\n\n  const highlightedSeries = highlightedSeriesId\n    ? getHighlightedSeries(labelSeries, highlightedSeriesId)\n    : undefined;\n\n  return (\n    <div\n      className={plotLayout}\n      style={{\n        zIndex: zIndicesXYChartAreas.plot + 1,\n        pointerEvents: 'none',\n      }}\n    >\n      {labelSeries.map((series) => {\n        const opacity =\n          highlightedSeries && series !== highlightedSeries\n            ? +CANVAS_DIMMED_OPACITY\n            : undefined;\n        return (\n          <RectLabelOverlay\n            key={series.id}\n            axisIdToScales={axisIdToScales}\n            series={series}\n            opacity={opacity}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nRectLabelLayout['displayName'] = 'RectLabelLayout';\n"],
+  "mappings": "AA8CU;AA9CV,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,2CAA2C;AACpD,SAAS,4BAA4B;AAQ9B,SAAS,kBAAkB;AAChC,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,EAAE,6BAA6B,IAAI,YAAY;AACrD,QAAM,sBAAsB,oCAAoC;AAEhE,QAAM,cAAc,6BAA6B;AAAA,IAC/C,CAAC,MAAM,EAAE,cAAc;AAAA,EACzB;AAEA,MAAI,YAAY,WAAW,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,oBAAoB,sBACtB,qBAAqB,aAAa,mBAAmB,IACrD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ,qBAAqB,OAAO;AAAA,QACpC,eAAe;AAAA,MACjB;AAAA,MAEC,sBAAY,IAAI,CAAC,WAAW;AAC3B,cAAM,UACJ,qBAAqB,WAAW,oBAC5B,CAAC,wBACD;AACN,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAHK,OAAO;AAAA,QAId;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/xy-chart/components/displays/RectLabelOverlay.css

@@ -0,0 +1,19 @@
+._1a48u8w0-3-11-0 {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+._1a48u8w1-3-11-0 {
+  position: absolute;
+  white-space: nowrap;
+  font-size: var(--dt-typography-text-small-default-size, 12px);
+  font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-weight: var(--dt-typography-text-small-default-weight, 400);
+  line-height: 1;
+}
+._1a48u8w2-3-11-0 {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+}