@dynatrace/strato-components 3.13.3 → 3.14.1

package/esm/buttons/run-query-button/RunQueryButton.spec.js

@@ -0,0 +1,185 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render } from "@dynatrace/strato-components-testing/vitest";
+import { RunQueryButton } from "./RunQueryButton.js";
+const getButton = () => screen.getByRole("button");
+describe("RunQueryButton", () => {
+  describe("variants", () => {
+    it("should be cancelable by default", () => {
+      const rendered = render(/* @__PURE__ */ jsx(RunQueryButton, { queryState: "loading" }));
+      const text = rendered.queryByText("Cancel query", { exact: false });
+      expect(text).toBeTruthy();
+    });
+    it("can be set to non-cancelable", () => {
+      const rendered = render(
+        /* @__PURE__ */ jsx(RunQueryButton, { queryState: "loading", cancelable: false })
+      );
+      const text = rendered.queryByText("(click to cancel)", { exact: false });
+      expect(text).toBeFalsy();
+    });
+    it("should trigger the click handler normally for non-loading states", async () => {
+      const onClick = vi.fn();
+      const rendered = render(
+        /* @__PURE__ */ jsx(RunQueryButton, { queryState: "idle", onClick })
+      );
+      const button = getButton();
+      await userEvent.click(button);
+      expect(onClick).toHaveBeenCalledTimes(1);
+      rendered.rerender(
+        /* @__PURE__ */ jsx(RunQueryButton, { queryState: "success", onClick })
+      );
+      await userEvent.click(button);
+      expect(onClick).toHaveBeenCalledTimes(2);
+      rendered.rerender(
+        /* @__PURE__ */ jsx(RunQueryButton, { queryState: "error", onClick })
+      );
+      await userEvent.click(button);
+      expect(onClick).toHaveBeenCalledTimes(3);
+    });
+    it("should trigger the click handler for loading state if it is cancelable", async () => {
+      const onClick = vi.fn();
+      const rendered = render(
+        /* @__PURE__ */ jsx(RunQueryButton, { queryState: "loading", onClick })
+      );
+      const button = getButton();
+      await userEvent.click(button);
+      expect(onClick).toHaveBeenCalledTimes(1);
+      rendered.rerender(
+        /* @__PURE__ */ jsx(
+          RunQueryButton,
+          {
+            queryState: "loading",
+            cancelable: false,
+            onClick
+          }
+        )
+      );
+      await userEvent.click(button);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+  it("should set data-dtrum on the root level of the component", () => {
+    render(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          RunQueryButton,
+          {
+            queryState: "loading",
+            cancelable: false,
+            "data-dtrum-mask": true,
+            "data-dtrum-allow": true,
+            "data-testid": "dtrum"
+          }
+        ),
+        /* @__PURE__ */ jsx(RunQueryButton, { "data-testid": "no-dtrum", cancelable: false })
+      ] })
+    );
+    expect(screen.getByTestId("dtrum")).toHaveAttribute("data-dtrum-mask");
+    expect(screen.getByTestId("dtrum")).toHaveAttribute("data-dtrum-allow");
+    expect(screen.getByTestId("no-dtrum")).not.toHaveAttribute(
+      "data-dtrum-mask"
+    );
+    expect(screen.getByTestId("no-dtrum")).not.toHaveAttribute(
+      "data-dtrum-allow"
+    );
+  });
+  describe("forwardRef", () => {
+    it("should forward the ref to the underlying button component", () => {
+      const ref = createRef();
+      render(/* @__PURE__ */ jsx(RunQueryButton, { ref }));
+      expect(getButton()).toEqual(ref.current);
+    });
+  });
+  describe("behavior tracking attributes", () => {
+    it("should add data-dt-* attributes to the button", () => {
+      render(
+        /* @__PURE__ */ jsx(
+          RunQueryButton,
+          {
+            "data-dt-content": "tracking",
+            "data-dt-name": "MyRunQueryButton",
+            "data-dt-children-name": "RunQueryChildren"
+          }
+        )
+      );
+      const button = getButton();
+      expect(button).toHaveAttribute("data-dt-content", "tracking");
+      expect(button).toHaveAttribute("data-dt-name", "MyRunQueryButton");
+      expect(button).toHaveAttribute(
+        "data-dt-children-name",
+        "RunQueryChildren"
+      );
+    });
+    describe("data-dt-component", () => {
+      it("should not override the data-dt-component attribute", async () => {
+        const componentName = "RunQueryButtonComponent";
+        render(/* @__PURE__ */ jsx(RunQueryButton, { "data-dt-component": componentName }));
+        const iconButton = await screen.findByRole("button");
+        expect(iconButton).toHaveAttribute(
+          "data-dt-component",
+          "RunQueryButton"
+        );
+      });
+    });
+  });
+  describe("loading a11y", () => {
+    it("should set aria-busy when queryState is loading", () => {
+      render(/* @__PURE__ */ jsx(RunQueryButton, { queryState: "loading" }));
+      expect(getButton()).toHaveAttribute("aria-busy", "true");
+    });
+    it.each(["idle", "success", "error"])(
+      "should not set aria-busy when queryState is %s",
+      (queryState) => {
+        render(/* @__PURE__ */ jsx(RunQueryButton, { queryState }));
+        expect(getButton()).toHaveAttribute("aria-busy", "false");
+      }
+    );
+    it("should set aria-disabled when loading and not cancelable", () => {
+      render(/* @__PURE__ */ jsx(RunQueryButton, { queryState: "loading", cancelable: false }));
+      expect(getButton()).toHaveAttribute("aria-disabled", "true");
+    });
+    it("should not set aria-disabled when loading and cancelable", () => {
+      render(/* @__PURE__ */ jsx(RunQueryButton, { queryState: "loading", cancelable: true }));
+      expect(getButton()).toHaveAttribute("aria-disabled", "false");
+    });
+    it.each(["idle", "success", "error"])(
+      "should not set aria-disabled when queryState is %s",
+      (queryState) => {
+        render(/* @__PURE__ */ jsx(RunQueryButton, { queryState }));
+        expect(getButton()).toHaveAttribute("aria-disabled", "false");
+      }
+    );
+    it("should render a live region with the button label for each state", () => {
+      const { rerender } = render(/* @__PURE__ */ jsx(RunQueryButton, { queryState: "idle" }));
+      expect(screen.getByRole("status")).toHaveTextContent("Run query");
+      rerender(/* @__PURE__ */ jsx(RunQueryButton, { queryState: "loading" }));
+      expect(screen.getByRole("status")).toHaveTextContent("Cancel query");
+      rerender(/* @__PURE__ */ jsx(RunQueryButton, { queryState: "loading", cancelable: false }));
+      expect(screen.getByRole("status")).toHaveTextContent("Running");
+      rerender(/* @__PURE__ */ jsx(RunQueryButton, { queryState: "error" }));
+      expect(screen.getByRole("status")).toHaveTextContent(
+        "Error (click to retry)"
+      );
+    });
+  });
+  describe("className & style", () => {
+    it("should add consumer class names and styles", () => {
+      render(
+        /* @__PURE__ */ jsx(
+          RunQueryButton,
+          {
+            className: "test",
+            style: { backgroundColor: "khaki" }
+          }
+        )
+      );
+      const root = getButton();
+      expect(root).toHaveClass("test");
+      expect(root).toHaveStyle("background-color: rgb(240, 230, 140)");
+    });
+  });
+});
+//# sourceMappingURL=RunQueryButton.spec.js.map

package/esm/buttons/run-query-button/RunQueryButton.spec.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/buttons/run-query-button/RunQueryButton.spec.tsx"],
+  "sourcesContent": ["import { screen } from '@testing-library/react';\nimport { userEvent } from '@testing-library/user-event';\nimport { createRef } from 'react';\nimport { describe, expect, it, vi } from 'vitest';\n\nimport { render } from '@dynatrace/strato-components-testing/vitest';\n\nimport { RunQueryButton } from './RunQueryButton.js';\n\n/** Returns the RunQueryButton element */\nconst getButton = () => screen.getByRole('button');\n\ndescribe('RunQueryButton', () => {\n  /** These tests can also be covered by the visual regression tests*/\n  describe('variants', () => {\n    it('should be cancelable by default', () => {\n      const rendered = render(<RunQueryButton queryState=\"loading\" />);\n      const text = rendered.queryByText('Cancel query', { exact: false });\n      expect(text).toBeTruthy();\n    });\n\n    it('can be set to non-cancelable', () => {\n      const rendered = render(\n        <RunQueryButton queryState=\"loading\" cancelable={false} />,\n      );\n      const text = rendered.queryByText('(click to cancel)', { exact: false });\n      expect(text).toBeFalsy();\n    });\n\n    it('should trigger the click handler normally for non-loading states', async () => {\n      const onClick = vi.fn();\n      const rendered = render(\n        <RunQueryButton queryState=\"idle\" onClick={onClick} />,\n      );\n      const button = getButton();\n      await userEvent.click(button);\n      expect(onClick).toHaveBeenCalledTimes(1);\n\n      rendered.rerender(\n        <RunQueryButton queryState=\"success\" onClick={onClick} />,\n      );\n      await userEvent.click(button);\n      expect(onClick).toHaveBeenCalledTimes(2);\n\n      rendered.rerender(\n        <RunQueryButton queryState=\"error\" onClick={onClick} />,\n      );\n      await userEvent.click(button);\n      expect(onClick).toHaveBeenCalledTimes(3);\n    });\n\n    it('should trigger the click handler for loading state if it is cancelable', async () => {\n      const onClick = vi.fn();\n      const rendered = render(\n        <RunQueryButton queryState=\"loading\" onClick={onClick} />,\n      );\n      const button = getButton();\n      await userEvent.click(button);\n      expect(onClick).toHaveBeenCalledTimes(1);\n\n      rendered.rerender(\n        <RunQueryButton\n          queryState=\"loading\"\n          cancelable={false}\n          onClick={onClick}\n        />,\n      );\n      await userEvent.click(button);\n      // Click count should not have changed.\n      expect(onClick).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  it('should set data-dtrum on the root level of the component', () => {\n    render(\n      <>\n        <RunQueryButton\n          queryState=\"loading\"\n          cancelable={false}\n          data-dtrum-mask\n          data-dtrum-allow\n          data-testid=\"dtrum\"\n        />\n        <RunQueryButton data-testid=\"no-dtrum\" cancelable={false} />\n      </>,\n    );\n\n    expect(screen.getByTestId('dtrum')).toHaveAttribute('data-dtrum-mask');\n    expect(screen.getByTestId('dtrum')).toHaveAttribute('data-dtrum-allow');\n    expect(screen.getByTestId('no-dtrum')).not.toHaveAttribute(\n      'data-dtrum-mask',\n    );\n    expect(screen.getByTestId('no-dtrum')).not.toHaveAttribute(\n      'data-dtrum-allow',\n    );\n  });\n\n  describe('forwardRef', () => {\n    it('should forward the ref to the underlying button component', () => {\n      const ref = createRef<HTMLButtonElement>();\n      render(<RunQueryButton ref={ref} />);\n\n      expect(getButton()).toEqual(ref.current);\n    });\n  });\n\n  describe('behavior tracking attributes', () => {\n    it('should add data-dt-* attributes to the button', () => {\n      render(\n        <RunQueryButton\n          data-dt-content=\"tracking\"\n          data-dt-name=\"MyRunQueryButton\"\n          data-dt-children-name=\"RunQueryChildren\"\n        />,\n      );\n\n      const button = getButton();\n      expect(button).toHaveAttribute('data-dt-content', 'tracking');\n      expect(button).toHaveAttribute('data-dt-name', 'MyRunQueryButton');\n      expect(button).toHaveAttribute(\n        'data-dt-children-name',\n        'RunQueryChildren',\n      );\n    });\n\n    describe('data-dt-component', () => {\n      it('should not override the data-dt-component attribute', async () => {\n        const componentName = 'RunQueryButtonComponent';\n        render(<RunQueryButton data-dt-component={componentName} />);\n        const iconButton = await screen.findByRole('button');\n        expect(iconButton).toHaveAttribute(\n          'data-dt-component',\n          'RunQueryButton',\n        );\n      });\n    });\n  });\n\n  describe('loading a11y', () => {\n    it('should set aria-busy when queryState is loading', () => {\n      render(<RunQueryButton queryState=\"loading\" />);\n      expect(getButton()).toHaveAttribute('aria-busy', 'true');\n    });\n\n    it.each(['idle', 'success', 'error'] as const)(\n      'should not set aria-busy when queryState is %s',\n      (queryState) => {\n        render(<RunQueryButton queryState={queryState} />);\n        expect(getButton()).toHaveAttribute('aria-busy', 'false');\n      },\n    );\n\n    it('should set aria-disabled when loading and not cancelable', () => {\n      render(<RunQueryButton queryState=\"loading\" cancelable={false} />);\n      expect(getButton()).toHaveAttribute('aria-disabled', 'true');\n    });\n\n    it('should not set aria-disabled when loading and cancelable', () => {\n      render(<RunQueryButton queryState=\"loading\" cancelable />);\n      expect(getButton()).toHaveAttribute('aria-disabled', 'false');\n    });\n\n    it.each(['idle', 'success', 'error'] as const)(\n      'should not set aria-disabled when queryState is %s',\n      (queryState) => {\n        render(<RunQueryButton queryState={queryState} />);\n        expect(getButton()).toHaveAttribute('aria-disabled', 'false');\n      },\n    );\n\n    it('should render a live region with the button label for each state', () => {\n      const { rerender } = render(<RunQueryButton queryState=\"idle\" />);\n      expect(screen.getByRole('status')).toHaveTextContent('Run query');\n\n      rerender(<RunQueryButton queryState=\"loading\" />);\n      expect(screen.getByRole('status')).toHaveTextContent('Cancel query');\n\n      rerender(<RunQueryButton queryState=\"loading\" cancelable={false} />);\n      expect(screen.getByRole('status')).toHaveTextContent('Running');\n\n      rerender(<RunQueryButton queryState=\"error\" />);\n      expect(screen.getByRole('status')).toHaveTextContent(\n        'Error (click to retry)',\n      );\n    });\n  });\n\n  describe('className & style', () => {\n    it('should add consumer class names and styles', () => {\n      render(\n        <RunQueryButton\n          className=\"test\"\n          style={{ backgroundColor: 'khaki' }}\n        />,\n      );\n\n      const root = getButton();\n      expect(root).toHaveClass('test');\n      expect(root).toHaveStyle('background-color: rgb(240, 230, 140)');\n    });\n  });\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css

@@ -1,9 +1,9 @@
-._1wi8enr0-3-13-3 {
+._1wi8enr0-3-14-1 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-13-3 {
+._1wi8enr1-3-14-1 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react';\n\nimport {\n  crosshairLayout,\n  dataPointLayout,\n} from './CategoricalBarChartInspectOverlay.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { getMagnifierLabel } from '../../../../core/components/crosshair/utils/get-magnifier-label.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport { THRESHOLD_BAR_THICKNESS } from '../../../../core/components/threshold-bar/types/constants.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { GroupDataPoint } from '../../../../core/types/data-point.js';\nimport {\n  useMouseInBoundsState,\n  useMousePositionState,\n  useSetState,\n  useTooltipState,\n} from '../../../hooks/store/selectors.js';\nimport { setMouseOutBounds } from '../../../hooks/store/state-setters.js';\nimport { useCategoricalBarChartBaseConfig } from '../../../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartData } from '../../../hooks/useCategoricalBarChartData.js';\nimport { useCategoricalBarChartOverlayRef } from '../../../hooks/useCategoricalBarChartOverlayRef.js';\nimport { useCategoricalBarChartScales } from '../../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartThresholds } from '../../../hooks/useCategoricalBarChartThresholds.js';\nimport { useClosestDimensionInThresholdPoints } from '../../../hooks/useClosestDimensionInThresholdPoints.js';\nimport { useClosestDimensionPoint } from '../../../hooks/useClosestDimensionPoint.js';\nimport { useFormatter } from '../../../hooks/useFormatter.js';\nimport { DimensionXYPoint } from '../../../types/categorical-bar-chart-data.js';\nimport { isStacked, isVertical } from '../../../utils/layout.js';\nimport { CategoricalBarChartDatapoints } from '../datapoints/CategoricalBarChartDatapoints.js';\nimport { CategoricalBarChartTooltip } from '../tooltip/CategoricalBarChartTooltip.js';\nimport {\n  generateGroupDataPoints,\n  getGroupDataPointsBy,\n  mapToDataPoint,\n} from '../utils/data-points.js';\n\nexport const CROSSHAIR_BAR_CHART_LABEL = 'crosshair for bar chart';\n\nexport const CategoricalBarChartInspectOverlay = () => {\n  const { layout, groupMode } = useCategoricalBarChartBaseConfig();\n  const { width, height } = useGridPlotSize();\n  const { unit } = useCategoricalBarChartData();\n  const formatter = useFormatter();\n  const { valueScale } = useCategoricalBarChartScales();\n  const { visibleTooltip, pinnedTooltip } = useTooltipState();\n  const mousePosition = useMousePositionState();\n  const thresholds = useCategoricalBarChartThresholds();\n  const chartRef = useCategoricalBarChartOverlayRef();\n  const isInChartBounds = useMouseInBoundsState();\n\n  const chartBounds = chartRef?.current?.getBoundingClientRect();\n\n  const hasThresholds = thresholds && thresholds.length > 0;\n\n  const [pinnedClosestPoint, setPinnedClosestPoint] =\n    useState<DimensionXYPoint>();\n  const [pinnedGroupDataPoint, setPinnedGroupDataPoint] =\n    useState<GroupDataPoint>();\n\n  const magnifierCoordinate = isVertical(layout) ? 'y' : 'x';\n\n  const magnifierValue =\n    mousePosition &&\n    getMagnifierLabel(\n      unit,\n      magnifierCoordinate,\n      formatter,\n      mousePosition.relative,\n      valueScale,\n    );\n  const isGroupedAllowed = isStacked(groupMode);\n\n  const { closestDimensionPoint, closestDimensionPoints } =\n    useClosestDimensionPoint(layout, groupMode, mousePosition?.relative);\n\n  const closestDimensionPointInThreshold = useClosestDimensionInThresholdPoints(\n    layout,\n    groupMode,\n    mousePosition?.relative,\n  );\n\n  const groupDataPoints = generateGroupDataPoints(\n    closestDimensionPoints,\n    isGroupedAllowed,\n    layout,\n    layout === 'vertical' ? height : width,\n  );\n\n  useEffect(() => {\n    if (!visibleTooltip && !pinnedTooltip) {\n      setPinnedClosestPoint((prevState) =>\n        prevState !== undefined ? undefined : prevState,\n      );\n      setPinnedGroupDataPoint((prevState) =>\n        prevState !== undefined ? undefined : prevState,\n      );\n    }\n  }, [visibleTooltip, pinnedTooltip]);\n\n  useEffect(() => {\n    if (pinnedTooltip) {\n      onClickHandler();\n    }\n  }, [width, height]);\n\n  const setState = useSetState();\n\n  const onScrollCallback = () => setState(setMouseOutBounds);\n  const notShowingMagnifiers = pinnedTooltip || !isInChartBounds;\n\n  useApplyCallbackOnScroll(notShowingMagnifiers, onScrollCallback);\n\n  const onClickHandler = () => {\n    setState((prev) => ({\n      ...prev,\n      overlays: {\n        ...prev.overlays,\n        pinnedTooltip: setPinned(prev.overlays.pinnedTooltip),\n      },\n    }));\n\n    setPinnedClosestPoint((prev) =>\n      !prev && visibleTooltip\n        ? closestDimensionPointInThreshold ?? closestDimensionPoint\n        : undefined,\n    );\n    setPinnedGroupDataPoint((prev) => {\n      if (!prev && closestDimensionPoint && visibleTooltip) {\n        const dimensionId = (\n          closestDimensionPointInThreshold ?? closestDimensionPoint\n        )?.datapoint.id;\n\n        return getGroupDataPointsBy(groupDataPoints, dimensionId);\n      }\n\n      return undefined;\n    });\n  };\n\n  const setPinned = (prevPinned: boolean) =>\n    visibleTooltip ? !prevPinned : false;\n\n  const verticalCrosshairX =\n    pinnedTooltip && pinnedClosestPoint\n      ? pinnedClosestPoint.x ?? 0\n      : mousePosition?.relative.x ?? 0;\n  const verticalCrosshairLabel =\n    pinnedTooltip || !mousePosition ? '' : magnifierValue;\n\n  const horizontalCrosshairY =\n    pinnedTooltip && pinnedClosestPoint\n      ? pinnedClosestPoint.y ?? 0\n      : mousePosition?.relative.y ?? 0;\n  const horizontalCrosshairLabel =\n    pinnedTooltip || !mousePosition ? '' : magnifierValue;\n\n  const closestPoint =\n    pinnedTooltip && pinnedClosestPoint\n      ? pinnedClosestPoint\n      : closestDimensionPointInThreshold;\n\n  const groupPoints = pinnedGroupDataPoint\n    ? pinnedGroupDataPoint\n    : groupDataPoints;\n\n  const thresholdSize = hasThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n\n  return (\n    <div className={plotLayout}>\n      {(mousePosition || pinnedTooltip) && (\n        <>\n          <div className={dataPointLayout}>\n            <CategoricalBarChartDatapoints\n              points={groupPoints}\n              closestPoint={closestPoint && mapToDataPoint(closestPoint)}\n            />\n          </div>\n          <div>\n            <CategoricalBarChartTooltip\n              closestDimensionPoint={closestPoint}\n              hasHeader={groupPoints.length > 1}\n              formatter={formatter}\n              unit={unit}\n            />\n          </div>\n        </>\n      )}\n      {pinnedTooltip || isInChartBounds ? (\n        <svg\n          className={crosshairLayout}\n          aria-label={CROSSHAIR_BAR_CHART_LABEL}\n          role=\"graphics-symbol\"\n          onClick={onClickHandler}\n        >\n          {!isVertical(layout) ? (\n            <VerticalCrosshair\n              x={verticalCrosshairX}\n              bottomLabel={verticalCrosshairLabel}\n              height={height + thresholdSize}\n              offset={thresholdSize}\n              dashed={!pinnedTooltip}\n              chartBounds={chartBounds}\n            />\n          ) : (\n            <HorizontalCrosshair\n              width={width + thresholdSize}\n              leftLabel={horizontalCrosshairLabel}\n              leftOffset={thresholdSize}\n              y={horizontalCrosshairY}\n              dashed={!pinnedTooltip}\n              chartBounds={chartBounds}\n            />\n          )}\n        </svg>\n      ) : null}\n    </div>\n  );\n};\n\nCategoricalBarChartInspectOverlay['displayName'] =\n  'CategoricalBarChartInspectOverlay';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useState } from 'react';\n\nimport {\n  crosshairLayout,\n  dataPointLayout,\n} from './CategoricalBarChartInspectOverlay.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { getMagnifierLabel } from '../../../../core/components/crosshair/utils/get-magnifier-label.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport { THRESHOLD_BAR_THICKNESS } from '../../../../core/components/threshold-bar/types/constants.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { GroupDataPoint } from '../../../../core/types/data-point.js';\nimport {\n  useMouseInBoundsState,\n  useMousePositionState,\n  useSetState,\n  useTooltipState,\n} from '../../../hooks/store/selectors.js';\nimport { setMouseOutBounds } from '../../../hooks/store/state-setters.js';\nimport { useCategoricalBarChartBaseConfig } from '../../../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartData } from '../../../hooks/useCategoricalBarChartData.js';\nimport { useCategoricalBarChartOverlayRef } from '../../../hooks/useCategoricalBarChartOverlayRef.js';\nimport { useCategoricalBarChartScales } from '../../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartThresholds } from '../../../hooks/useCategoricalBarChartThresholds.js';\nimport { useClosestDimensionInThresholdPoints } from '../../../hooks/useClosestDimensionInThresholdPoints.js';\nimport { useClosestDimensionPoint } from '../../../hooks/useClosestDimensionPoint.js';\nimport { useFormatter } from '../../../hooks/useFormatter.js';\nimport { DimensionXYPoint } from '../../../types/categorical-bar-chart-data.js';\nimport { isStacked, isVertical } from '../../../utils/layout.js';\nimport { CategoricalBarChartDatapoints } from '../datapoints/CategoricalBarChartDatapoints.js';\nimport { CategoricalBarChartTooltip } from '../tooltip/CategoricalBarChartTooltip.js';\nimport {\n  generateGroupDataPoints,\n  getGroupDataPointsBy,\n  mapToDataPoint,\n} from '../utils/data-points.js';\n\nexport const CROSSHAIR_BAR_CHART_LABEL = 'crosshair for bar chart';\n\nexport const CategoricalBarChartInspectOverlay = () => {\n  const { layout, groupMode } = useCategoricalBarChartBaseConfig();\n  const { width, height } = useGridPlotSize();\n  const { unit } = useCategoricalBarChartData();\n  const formatter = useFormatter();\n  const { valueScale } = useCategoricalBarChartScales();\n  const { visibleTooltip, pinnedTooltip } = useTooltipState();\n  const mousePosition = useMousePositionState();\n  const thresholds = useCategoricalBarChartThresholds();\n  const chartRef = useCategoricalBarChartOverlayRef();\n  const isInChartBounds = useMouseInBoundsState();\n\n  const chartBounds = chartRef?.current?.getBoundingClientRect();\n\n  const hasThresholds = thresholds && thresholds.length > 0;\n\n  const [pinnedClosestPoint, setPinnedClosestPoint] =\n    useState<DimensionXYPoint>();\n  const [pinnedGroupDataPoint, setPinnedGroupDataPoint] =\n    useState<GroupDataPoint>();\n\n  const magnifierCoordinate = isVertical(layout) ? 'y' : 'x';\n\n  const magnifierValue =\n    mousePosition &&\n    getMagnifierLabel(\n      unit,\n      magnifierCoordinate,\n      formatter,\n      mousePosition.relative,\n      valueScale,\n    );\n  const isGroupedAllowed = isStacked(groupMode);\n\n  const { closestDimensionPoint, closestDimensionPoints } =\n    useClosestDimensionPoint(layout, groupMode, mousePosition?.relative);\n\n  const closestDimensionPointInThreshold = useClosestDimensionInThresholdPoints(\n    layout,\n    groupMode,\n    mousePosition?.relative,\n  );\n\n  const groupDataPoints = generateGroupDataPoints(\n    closestDimensionPoints,\n    isGroupedAllowed,\n    layout,\n    layout === 'vertical' ? height : width,\n  );\n\n  useEffect(() => {\n    if (!visibleTooltip && !pinnedTooltip) {\n      setPinnedClosestPoint((prevState) =>\n        prevState !== undefined ? undefined : prevState,\n      );\n      setPinnedGroupDataPoint((prevState) =>\n        prevState !== undefined ? undefined : prevState,\n      );\n    }\n  }, [visibleTooltip, pinnedTooltip]);\n\n  useEffect(() => {\n    if (pinnedTooltip) {\n      onClickHandler();\n    }\n  }, [width, height]);\n\n  const setState = useSetState();\n\n  const onScrollCallback = () => setState(setMouseOutBounds);\n  const notShowingMagnifiers = pinnedTooltip || !isInChartBounds;\n\n  useApplyCallbackOnScroll(notShowingMagnifiers, onScrollCallback);\n\n  const onClickHandler = () => {\n    setState((prev) => ({\n      ...prev,\n      overlays: {\n        ...prev.overlays,\n        pinnedTooltip: setPinned(prev.overlays.pinnedTooltip),\n      },\n    }));\n\n    setPinnedClosestPoint((prev) =>\n      !prev && visibleTooltip\n        ? (closestDimensionPointInThreshold ?? closestDimensionPoint)\n        : undefined,\n    );\n    setPinnedGroupDataPoint((prev) => {\n      if (!prev && closestDimensionPoint && visibleTooltip) {\n        const dimensionId = (\n          closestDimensionPointInThreshold ?? closestDimensionPoint\n        )?.datapoint.id;\n\n        return getGroupDataPointsBy(groupDataPoints, dimensionId);\n      }\n\n      return undefined;\n    });\n  };\n\n  const setPinned = (prevPinned: boolean) =>\n    visibleTooltip ? !prevPinned : false;\n\n  const verticalCrosshairX =\n    pinnedTooltip && pinnedClosestPoint\n      ? (pinnedClosestPoint.x ?? 0)\n      : (mousePosition?.relative.x ?? 0);\n  const verticalCrosshairLabel =\n    pinnedTooltip || !mousePosition ? '' : magnifierValue;\n\n  const horizontalCrosshairY =\n    pinnedTooltip && pinnedClosestPoint\n      ? (pinnedClosestPoint.y ?? 0)\n      : (mousePosition?.relative.y ?? 0);\n  const horizontalCrosshairLabel =\n    pinnedTooltip || !mousePosition ? '' : magnifierValue;\n\n  const closestPoint =\n    pinnedTooltip && pinnedClosestPoint\n      ? pinnedClosestPoint\n      : closestDimensionPointInThreshold;\n\n  const groupPoints = pinnedGroupDataPoint\n    ? pinnedGroupDataPoint\n    : groupDataPoints;\n\n  const thresholdSize = hasThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n\n  return (\n    <div className={plotLayout}>\n      {(mousePosition || pinnedTooltip) && (\n        <>\n          <div className={dataPointLayout}>\n            <CategoricalBarChartDatapoints\n              points={groupPoints}\n              closestPoint={closestPoint && mapToDataPoint(closestPoint)}\n            />\n          </div>\n          <div>\n            <CategoricalBarChartTooltip\n              closestDimensionPoint={closestPoint}\n              hasHeader={groupPoints.length > 1}\n              formatter={formatter}\n              unit={unit}\n            />\n          </div>\n        </>\n      )}\n      {pinnedTooltip || isInChartBounds ? (\n        <svg\n          className={crosshairLayout}\n          aria-label={CROSSHAIR_BAR_CHART_LABEL}\n          role=\"graphics-symbol\"\n          onClick={onClickHandler}\n        >\n          {!isVertical(layout) ? (\n            <VerticalCrosshair\n              x={verticalCrosshairX}\n              bottomLabel={verticalCrosshairLabel}\n              height={height + thresholdSize}\n              offset={thresholdSize}\n              dashed={!pinnedTooltip}\n              chartBounds={chartBounds}\n            />\n          ) : (\n            <HorizontalCrosshair\n              width={width + thresholdSize}\n              leftLabel={horizontalCrosshairLabel}\n              leftOffset={thresholdSize}\n              y={horizontalCrosshairY}\n              dashed={!pinnedTooltip}\n              chartBounds={chartBounds}\n            />\n          )}\n        </svg>\n      ) : null}\n    </div>\n  );\n};\n\nCategoricalBarChartInspectOverlay['displayName'] =\n  'CategoricalBarChartInspectOverlay';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./CategoricalBarChartInspectOverlay.css";
-var crosshairLayout = "_1wi8enr0-3-13-3 _13lzg4k0-3-13-3";
-var dataPointLayout = "_1wi8enr1-3-13-3 _13lzg4k0-3-13-3";
+var crosshairLayout = "_1wi8enr0-3-14-1 _13lzg4k0-3-14-1";
+var dataPointLayout = "_1wi8enr1-3-14-1 _13lzg4k0-3-14-1";
 export {
   crosshairLayout,
   dataPointLayout

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-13-3 _13lzg4k0-3-13-3';\nexport var dataPointLayout = '_1wi8enr1-3-13-3 _13lzg4k0-3-13-3';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-14-1 _13lzg4k0-3-14-1';\nexport var dataPointLayout = '_1wi8enr1-3-14-1 _13lzg4k0-3-14-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/categorical-bar/components/thresholds/CategoricalThresholdBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/categorical-bar/components/thresholds/CategoricalThresholdBar.tsx"],
-  "sourcesContent": ["import { ThresholdBar } from '../../../core/components/threshold-bar/ThresholdBar.js';\nimport type { ThresholdMarker } from '../../../core/components/threshold-bar/types.js';\nimport { getMarkerPixel } from '../../../core/components/threshold-bar/utils/get-marker-pixel.js';\nimport { getMarkerValue } from '../../../core/components/threshold-bar/utils/get-marker-value.js';\nimport { isBoundedRange } from '../../../core/types/type-guards.js';\nimport { useSetState } from '../../hooks/store/selectors.js';\nimport { useCategoricalBarChartBaseConfig } from '../../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartScales } from '../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartThresholds } from '../../hooks/useCategoricalBarChartThresholds.js';\nimport { useFormatter } from '../../hooks/useFormatter.js';\n\ninterface CategoricalThresholdBarProps {\n  length: number;\n}\n\nexport const CategoricalThresholdBar = ({\n  length,\n}: CategoricalThresholdBarProps) => {\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { valueScale } = useCategoricalBarChartScales();\n  const setState = useSetState();\n  const formatter = useFormatter();\n  const thresholds = useCategoricalBarChartThresholds();\n\n  const handleHover = (id: string | undefined) => {\n    setState((prev) => ({\n      ...prev,\n      hoveredThresholdId: id,\n    }));\n  };\n\n  const getMarkerProps = (yFirst: number, yLast: number) => ({\n    y0: getMarkerPixel(yFirst, valueScale, layout),\n    y1: getMarkerPixel(yLast, valueScale, layout),\n    value: getMarkerValue({ y0: yFirst, y1: yLast }, formatter),\n  });\n\n  const markers: ThresholdMarker[] = thresholds.map((threshold) => {\n    const domainMin = isBoundedRange(threshold.data)\n      ? threshold.data.value\n      : (threshold.data.min as number | null) ?? -Infinity;\n    const domainMax = isBoundedRange(threshold.data)\n      ? threshold.data.value\n      : (threshold.data.max as number | null) ?? Infinity;\n\n    return {\n      ...threshold,\n      ...getMarkerProps(domainMin, domainMax),\n    };\n  });\n\n  return markers.length ? (\n    <ThresholdBar\n      markers={markers}\n      length={length}\n      layout={layout}\n      onHover={handleHover}\n    />\n  ) : null;\n};\n\nCategoricalThresholdBar['displayName'] = 'TimeseriesThresholdBar';\n"],
-  "mappings": "AAoDI;AApDJ,SAAS,oBAAoB;AAE7B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAC7C,SAAS,wCAAwC;AACjD,SAAS,oBAAoB;AAMtB,MAAM,0BAA0B,CAAC;AAAA,EACtC;AACF,MAAoC;AAClC,QAAM,EAAE,OAAO,IAAI,iCAAiC;AACpD,QAAM,EAAE,WAAW,IAAI,6BAA6B;AACpD,QAAM,WAAW,YAAY;AAC7B,QAAM,YAAY,aAAa;AAC/B,QAAM,aAAa,iCAAiC;AAEpD,QAAM,cAAc,CAAC,OAA2B;AAC9C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,oBAAoB;AAAA,IACtB,EAAE;AAAA,EACJ;AAEA,QAAM,iBAAiB,CAAC,QAAgB,WAAmB;AAAA,IACzD,IAAI,eAAe,QAAQ,YAAY,MAAM;AAAA,IAC7C,IAAI,eAAe,OAAO,YAAY,MAAM;AAAA,IAC5C,OAAO,eAAe,EAAE,IAAI,QAAQ,IAAI,MAAM,GAAG,SAAS;AAAA,EAC5D;AAEA,QAAM,UAA6B,WAAW,IAAI,CAAC,cAAc;AAC/D,UAAM,YAAY,eAAe,UAAU,IAAI,IAC3C,UAAU,KAAK,QACd,UAAU,KAAK,OAAyB;AAC7C,UAAM,YAAY,eAAe,UAAU,IAAI,IAC3C,UAAU,KAAK,QACd,UAAU,KAAK,OAAyB;AAE7C,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,eAAe,WAAW,SAAS;AAAA,IACxC;AAAA,EACF,CAAC;AAED,SAAO,QAAQ,SACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA;AAAA,EACX,IACE;AACN;AAEA,wBAAwB,aAAa,IAAI;",
+  "sourcesContent": ["import { ThresholdBar } from '../../../core/components/threshold-bar/ThresholdBar.js';\nimport type { ThresholdMarker } from '../../../core/components/threshold-bar/types.js';\nimport { getMarkerPixel } from '../../../core/components/threshold-bar/utils/get-marker-pixel.js';\nimport { getMarkerValue } from '../../../core/components/threshold-bar/utils/get-marker-value.js';\nimport { isBoundedRange } from '../../../core/types/type-guards.js';\nimport { useSetState } from '../../hooks/store/selectors.js';\nimport { useCategoricalBarChartBaseConfig } from '../../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartScales } from '../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartThresholds } from '../../hooks/useCategoricalBarChartThresholds.js';\nimport { useFormatter } from '../../hooks/useFormatter.js';\n\ninterface CategoricalThresholdBarProps {\n  length: number;\n}\n\nexport const CategoricalThresholdBar = ({\n  length,\n}: CategoricalThresholdBarProps) => {\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { valueScale } = useCategoricalBarChartScales();\n  const setState = useSetState();\n  const formatter = useFormatter();\n  const thresholds = useCategoricalBarChartThresholds();\n\n  const handleHover = (id: string | undefined) => {\n    setState((prev) => ({\n      ...prev,\n      hoveredThresholdId: id,\n    }));\n  };\n\n  const getMarkerProps = (yFirst: number, yLast: number) => ({\n    y0: getMarkerPixel(yFirst, valueScale, layout),\n    y1: getMarkerPixel(yLast, valueScale, layout),\n    value: getMarkerValue({ y0: yFirst, y1: yLast }, formatter),\n  });\n\n  const markers: ThresholdMarker[] = thresholds.map((threshold) => {\n    const domainMin = isBoundedRange(threshold.data)\n      ? threshold.data.value\n      : ((threshold.data.min as number | null) ?? -Infinity);\n    const domainMax = isBoundedRange(threshold.data)\n      ? threshold.data.value\n      : ((threshold.data.max as number | null) ?? Infinity);\n\n    return {\n      ...threshold,\n      ...getMarkerProps(domainMin, domainMax),\n    };\n  });\n\n  return markers.length ? (\n    <ThresholdBar\n      markers={markers}\n      length={length}\n      layout={layout}\n      onHover={handleHover}\n    />\n  ) : null;\n};\n\nCategoricalThresholdBar['displayName'] = 'TimeseriesThresholdBar';\n"],
+  "mappings": "AAoDI;AApDJ,SAAS,oBAAoB;AAE7B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAC7C,SAAS,wCAAwC;AACjD,SAAS,oBAAoB;AAMtB,MAAM,0BAA0B,CAAC;AAAA,EACtC;AACF,MAAoC;AAClC,QAAM,EAAE,OAAO,IAAI,iCAAiC;AACpD,QAAM,EAAE,WAAW,IAAI,6BAA6B;AACpD,QAAM,WAAW,YAAY;AAC7B,QAAM,YAAY,aAAa;AAC/B,QAAM,aAAa,iCAAiC;AAEpD,QAAM,cAAc,CAAC,OAA2B;AAC9C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,oBAAoB;AAAA,IACtB,EAAE;AAAA,EACJ;AAEA,QAAM,iBAAiB,CAAC,QAAgB,WAAmB;AAAA,IACzD,IAAI,eAAe,QAAQ,YAAY,MAAM;AAAA,IAC7C,IAAI,eAAe,OAAO,YAAY,MAAM;AAAA,IAC5C,OAAO,eAAe,EAAE,IAAI,QAAQ,IAAI,MAAM,GAAG,SAAS;AAAA,EAC5D;AAEA,QAAM,UAA6B,WAAW,IAAI,CAAC,cAAc;AAC/D,UAAM,YAAY,eAAe,UAAU,IAAI,IAC3C,UAAU,KAAK,QACb,UAAU,KAAK,OAAyB;AAC9C,UAAM,YAAY,eAAe,UAAU,IAAI,IAC3C,UAAU,KAAK,QACb,UAAU,KAAK,OAAyB;AAE9C,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,eAAe,WAAW,SAAS;AAAA,IACxC;AAAA,EACF,CAAC;AAED,SAAO,QAAQ,SACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA;AAAA,EACX,IACE;AACN;AAEA,wBAAwB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/categorical-bar/hooks/useGenerateCategoricalBarData.js

@@ -61,6 +61,7 @@ function useGenerateCategoricalBarData(initialData) {
       unit,
       category: categoryName,
       value: categoryValue,
+      // DEPRECATION: [APPDEV-18274] BREAKING-CHANGE: Remove deprecated CategoricalBarChartData.color prop.
       color: categoryColor,
       ...rest
     } = categoryData;

package/esm/charts/categorical-bar/hooks/useGenerateCategoricalBarData.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/categorical-bar/hooks/useGenerateCategoricalBarData.ts"],
-  "sourcesContent": ["import { useCategoricalBarChartBaseConfig } from './useCategoricalBarChartBaseConfig.js';\nimport { useColorRule } from '../../core/color-rule/useColorRule.js';\nimport { useColorRuleConfig } from '../../core/context/ColorRuleContext.js';\nimport {\n  type ColorToken,\n  isCustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { isValidColorPalette } from '../../core/utils/is-valid-color-palette.js';\nimport type { CategoricalChartData } from '../contexts/CategoricalBarChartDataContext.js';\nimport type {\n  CategoricalBarData,\n  CategoryMetadata,\n  WeakMapCategory,\n  WeakMapDimension,\n} from '../types/categorical-bar-chart-data.js';\nimport type { CategoricalBarChartData } from '../types/categorical-bar-chart.js';\nimport {\n  handleMultipleDimensions,\n  handleSingleDimension,\n  type SeriesEntry,\n} from '../utils/generate-categorical-bar-data-helpers.js';\nimport { isGrouped } from '../utils/layout.js';\n\n/**\n * Builds series array for ColorRule evaluation.\n * Multi-dimensional data is expanded into separate entries per subcategory.\n */\nfunction buildSeriesForColorRule(\n  initialData: CategoricalBarChartData[],\n): SeriesEntry[] {\n  const series: SeriesEntry[] = [];\n\n  initialData.forEach((categoryData) => {\n    if (typeof categoryData.value === 'object' && categoryData.value !== null) {\n      Object.entries(categoryData.value).forEach(\n        ([dimensionKey, dimensionValue]) => {\n          series.push({\n            ...categoryData,\n            value: { [dimensionKey]: dimensionValue },\n            _originalData: categoryData,\n            _dimensionKey: dimensionKey,\n          });\n        },\n      );\n    } else {\n      series.push({\n        ...categoryData,\n        _originalData: categoryData,\n      });\n    }\n  });\n\n  return series;\n}\n\nfunction createCategoryMetadata(id: string, name: string): CategoryMetadata {\n  return { id, name };\n}\n\n/**\n * Generate bar data and weakmaps to be filled into categorical bar chart provider\n * - generate single or multiple dimensions object from consumer with ids\n * - generate colors by dimensions\n *\n * @param initialData - Categorical data from component\n * @returns Categorical chart data\n */\nexport function useGenerateCategoricalBarData(\n  initialData: CategoricalBarChartData[],\n): CategoricalChartData {\n  const {\n    valueRepresentation,\n    colorPalette: configuredColorPalette,\n    colorPaletteMode,\n    groupMode,\n  } = useCategoricalBarChartBaseConfig();\n  const isRelative = valueRepresentation === 'relative';\n  const firstCategoryUnit = initialData[0]?.unit;\n\n  const colorRuleConfig = useColorRuleConfig();\n  const hasColorRules = colorRuleConfig.length > 0;\n\n  const seriesForColorRule = hasColorRules\n    ? buildSeriesForColorRule(initialData)\n    : [];\n  const colorRules = useColorRule(seriesForColorRule, 'categoricalBar');\n  const uniqueDimensions = new Set<string>();\n  const categoricalData: CategoricalBarData[] = [];\n  const categoryMap: WeakMapCategory = new WeakMap();\n  const dimensionMap: WeakMapDimension = new WeakMap();\n  const colorByDimension: Map<string, ColorToken> = new Map();\n  const colorByCategory: Map<string, { [id: string]: ColorToken }> = new Map();\n  for (const categoryData of initialData) {\n    const categoryId = crypto.randomUUID();\n    const {\n      unit,\n      category: categoryName,\n      value: categoryValue,\n      color: categoryColor,\n      ...rest\n    } = categoryData;\n    const newCategory: CategoricalBarData = {\n      id: categoryId,\n      name: categoryName,\n      unit,\n      dimensions: [],\n      ...rest,\n    };\n    const isSingleDimension =\n      unit !== firstCategoryUnit || typeof categoryValue !== 'object';\n    const categoricalColorPalette =\n      colorPaletteMode === 'multi-color' ||\n      isGrouped(groupMode) ||\n      !isSingleDimension;\n\n    const colorPalette =\n      isValidColorPalette(configuredColorPalette) ||\n      isCustomColorPalette(configuredColorPalette)\n        ? configuredColorPalette\n        : undefined;\n\n    if (isSingleDimension) {\n      const colorPositionIndex = initialData.indexOf(categoryData);\n      const paletteColorPosition = categoricalColorPalette\n        ? colorPositionIndex\n        : 0;\n      handleSingleDimension({\n        categoryData,\n        rest,\n        categoryName,\n        categoryColor,\n        colorByDimension,\n        colorRules,\n        colorPalette,\n        colorPaletteMode,\n        paletteColorPosition,\n        uniqueDimensions,\n        dimensionMap,\n        newCategory,\n        seriesForColorRule,\n        hasColorRules,\n      });\n    } else {\n      handleMultipleDimensions({\n        categoryData,\n        rest,\n        categoryName,\n        colorByDimension,\n        colorByCategory,\n        colorRules,\n        colorPalette,\n        categoricalColorPalette,\n        uniqueDimensions,\n        dimensionMap,\n        newCategory,\n        seriesForColorRule,\n        hasColorRules,\n      });\n    }\n    const categoryMedatada = createCategoryMetadata(categoryId, categoryName);\n    categoryMap.set(newCategory, categoryMedatada);\n    categoricalData.push(newCategory);\n  }\n  return {\n    categoryMap,\n    dimensionMap,\n    categoricalData,\n    uniqueDimensions: Array.from(uniqueDimensions),\n    unit: isRelative ? 'percent' : firstCategoryUnit,\n    valueRepresentation,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useCategoricalBarChartBaseConfig } from './useCategoricalBarChartBaseConfig.js';\nimport { useColorRule } from '../../core/color-rule/useColorRule.js';\nimport { useColorRuleConfig } from '../../core/context/ColorRuleContext.js';\nimport {\n  type ColorToken,\n  isCustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { isValidColorPalette } from '../../core/utils/is-valid-color-palette.js';\nimport type { CategoricalChartData } from '../contexts/CategoricalBarChartDataContext.js';\nimport type {\n  CategoricalBarData,\n  CategoryMetadata,\n  WeakMapCategory,\n  WeakMapDimension,\n} from '../types/categorical-bar-chart-data.js';\nimport type { CategoricalBarChartData } from '../types/categorical-bar-chart.js';\nimport {\n  handleMultipleDimensions,\n  handleSingleDimension,\n  type SeriesEntry,\n} from '../utils/generate-categorical-bar-data-helpers.js';\nimport { isGrouped } from '../utils/layout.js';\n\n/**\n * Builds series array for ColorRule evaluation.\n * Multi-dimensional data is expanded into separate entries per subcategory.\n */\nfunction buildSeriesForColorRule(\n  initialData: CategoricalBarChartData[],\n): SeriesEntry[] {\n  const series: SeriesEntry[] = [];\n\n  initialData.forEach((categoryData) => {\n    if (typeof categoryData.value === 'object' && categoryData.value !== null) {\n      Object.entries(categoryData.value).forEach(\n        ([dimensionKey, dimensionValue]) => {\n          series.push({\n            ...categoryData,\n            value: { [dimensionKey]: dimensionValue },\n            _originalData: categoryData,\n            _dimensionKey: dimensionKey,\n          });\n        },\n      );\n    } else {\n      series.push({\n        ...categoryData,\n        _originalData: categoryData,\n      });\n    }\n  });\n\n  return series;\n}\n\nfunction createCategoryMetadata(id: string, name: string): CategoryMetadata {\n  return { id, name };\n}\n\n/**\n * Generate bar data and weakmaps to be filled into categorical bar chart provider\n * - generate single or multiple dimensions object from consumer with ids\n * - generate colors by dimensions\n *\n * @param initialData - Categorical data from component\n * @returns Categorical chart data\n */\nexport function useGenerateCategoricalBarData(\n  initialData: CategoricalBarChartData[],\n): CategoricalChartData {\n  const {\n    valueRepresentation,\n    colorPalette: configuredColorPalette,\n    colorPaletteMode,\n    groupMode,\n  } = useCategoricalBarChartBaseConfig();\n  const isRelative = valueRepresentation === 'relative';\n  const firstCategoryUnit = initialData[0]?.unit;\n\n  const colorRuleConfig = useColorRuleConfig();\n  const hasColorRules = colorRuleConfig.length > 0;\n\n  const seriesForColorRule = hasColorRules\n    ? buildSeriesForColorRule(initialData)\n    : [];\n  const colorRules = useColorRule(seriesForColorRule, 'categoricalBar');\n  const uniqueDimensions = new Set<string>();\n  const categoricalData: CategoricalBarData[] = [];\n  const categoryMap: WeakMapCategory = new WeakMap();\n  const dimensionMap: WeakMapDimension = new WeakMap();\n  const colorByDimension: Map<string, ColorToken> = new Map();\n  const colorByCategory: Map<string, { [id: string]: ColorToken }> = new Map();\n  for (const categoryData of initialData) {\n    const categoryId = crypto.randomUUID();\n    const {\n      unit,\n      category: categoryName,\n      value: categoryValue,\n      // DEPRECATION: [APPDEV-18274] BREAKING-CHANGE: Remove deprecated CategoricalBarChartData.color prop.\n      color: categoryColor,\n      ...rest\n    } = categoryData;\n    const newCategory: CategoricalBarData = {\n      id: categoryId,\n      name: categoryName,\n      unit,\n      dimensions: [],\n      ...rest,\n    };\n    const isSingleDimension =\n      unit !== firstCategoryUnit || typeof categoryValue !== 'object';\n    const categoricalColorPalette =\n      colorPaletteMode === 'multi-color' ||\n      isGrouped(groupMode) ||\n      !isSingleDimension;\n\n    const colorPalette =\n      isValidColorPalette(configuredColorPalette) ||\n      isCustomColorPalette(configuredColorPalette)\n        ? configuredColorPalette\n        : undefined;\n\n    if (isSingleDimension) {\n      const colorPositionIndex = initialData.indexOf(categoryData);\n      const paletteColorPosition = categoricalColorPalette\n        ? colorPositionIndex\n        : 0;\n      handleSingleDimension({\n        categoryData,\n        rest,\n        categoryName,\n        categoryColor,\n        colorByDimension,\n        colorRules,\n        colorPalette,\n        colorPaletteMode,\n        paletteColorPosition,\n        uniqueDimensions,\n        dimensionMap,\n        newCategory,\n        seriesForColorRule,\n        hasColorRules,\n      });\n    } else {\n      handleMultipleDimensions({\n        categoryData,\n        rest,\n        categoryName,\n        colorByDimension,\n        colorByCategory,\n        colorRules,\n        colorPalette,\n        categoricalColorPalette,\n        uniqueDimensions,\n        dimensionMap,\n        newCategory,\n        seriesForColorRule,\n        hasColorRules,\n      });\n    }\n    const categoryMedatada = createCategoryMetadata(categoryId, categoryName);\n    categoryMap.set(newCategory, categoryMedatada);\n    categoricalData.push(newCategory);\n  }\n  return {\n    categoryMap,\n    dimensionMap,\n    categoricalData,\n    uniqueDimensions: Array.from(uniqueDimensions),\n    unit: isRelative ? 'percent' : firstCategoryUnit,\n    valueRepresentation,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/categorical-bar/types/categorical-bar-chart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/categorical-bar/types/categorical-bar-chart.ts"],
-  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  ColorPaletteMode,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendPosition, LegendProps } from '../../core/types/legend.js';\nimport type {\n  AxisScaleType,\n  ValueRepresentation,\n} from '../../core/types/scales.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport {\n  ChartToolbarConfig,\n  InternalChartToolbarConfigured,\n} from '../../core/types/toolbar.js';\nimport type { WithId } from '../../core/types/with-id.js';\nimport type { CategoricalBarChartThresholdIndicatorProps } from '../slots/ThresholdIndicator.js';\n\n//region Common\n/**\n * Defines whether the item is displayed horizontally or vertically.\n * @public\n */\nexport const layoutOptions = ['horizontal', 'vertical'] as const;\n/**\n * @public\n */\nexport type Layout = (typeof layoutOptions)[number];\n\n/**\n * Strategy used for grouping the bars in a bar chart.\n * @public\n */\nexport const groupModeOptions = ['grouped', 'stacked'] as const;\n/**\n * @public\n */\nexport type GroupMode = (typeof groupModeOptions)[number];\n\n/**\n * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n * @public\n */\nexport const categoricalChartTooltipVariantOptions = [\n  'single',\n  'grouped',\n] as const;\n/**\n * @public\n */\nexport type CategoricalChartTooltipVariant =\n  (typeof categoricalChartTooltipVariantOptions)[number];\n\n//endregion\n\n//region Slots\n/**\n * @internal\n */\nexport interface CategoricalBarChartSlots {\n  legend: {\n    position?: LegendPosition;\n    hidden?: boolean;\n  };\n  tooltip: {\n    variant?: CategoricalChartTooltipVariant;\n  };\n  valueAxis: {\n    label?: string;\n    min?: number;\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  categoryAxis: {\n    tickLabelLayout?: Layout;\n    label?: string;\n  };\n  thresholds: CategoricalBarChartThresholdIndicatorProps[];\n  toolbar: Partial<CategoricalBarChartToolbarInternalConfigured>;\n  colorRules: ColorRuleProps[];\n  intents: InternalCategoricalBarChartConfig['intents'];\n}\n\n//endregion\n\n//region Configuration\n/**\n * @public\n */\nexport interface CategoricalBarChartConfiguration {\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   * @defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a categories.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Tooltip config for the chart\n   */\n  tooltip?: {\n    /**\n     * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n     */\n    variant?: CategoricalChartTooltipVariant;\n  };\n  /**\n   * Config for the axis holding the category\n   */\n  categoryAxis?: {\n    /**\n     * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n     * @defaultValue 'horizontal'\n     */\n    tickLabelLayout?: Layout;\n    // Optional axis label\n    label?: string;\n  };\n  /**\n   * Config for the axis holding the category values\n   */\n  valueAxis?: {\n    // Optional axis label\n    label?: string;\n    // Min value to be represented on a value axis\n    min?: number;\n    // Max value to be represented on a value axis\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  // Config for the chart legend config.\n  legend?: {\n    /**\n     * Defines the position where to show the chart legend.\n     * @defaultValue \"auto\"\n     */\n    position?: LegendPosition;\n    /**\n     * Whether the legend is hidden or shown\n     * @defaultValue \"false\" - the legend is shown\n     */\n    hidden?: boolean;\n  };\n  /**\n   * Truncation mode to use (start, middle, end)\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"multi-colored\" - each bar gets a color in the palette sequentially\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /**\n   * ThresholdIndicator configuration for the categorical bar chart value axis.\n   */\n  thresholdIndicators?: CategoricalBarChartThresholdConfiguration[];\n  /**\n   * Config for the chart toolbar\n   */\n  toolbar?: CategoricalBarChartToolbarConfiguration;\n  /**\n   * Color rules to apply to the bars\n   */\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * Config type holding all the required config used in the categorical bar chart. Considers that the defaults have already been applied.\n * @public\n */\nexport type RequiredCategoricalBarChartConfiguration =\n  Required<CategoricalBarChartConfiguration> & {\n    tooltip: CategoricalBarChartTooltipConfiguration;\n    legend: CategoricalBarChartLegendConfiguration;\n    categoryAxis: CategoricalBarChartCategoryAxisConfiguration;\n    thresholdIndicators: InternalCategoricalBarChartThresholdConfiguration[];\n    toolbar?: CategoricalBarChartToolbarConfiguration;\n  };\n\n/**\n * @internal\n */\nexport type InternalCategoricalBarChartConfig = Omit<\n  RequiredCategoricalBarChartConfiguration,\n  'toolbar'\n> & {\n  intents: IntentProps[];\n  toolbar: CategoricalBarChartToolbarInternalConfigured &\n    Required<\n      Pick<\n        CategoricalBarChartToolbarInternalConfigured,\n        'placement' | 'hidden' | 'downloadData'\n      >\n    >;\n};\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipConfiguration {\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendConfiguration = LegendProps;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisConfiguration {\n  label?: string;\n  min?: number;\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartToolbarConfiguration = ChartToolbarConfig & {\n  hidden?: boolean;\n};\n\n/**\n * @internal\n */\nexport interface CategoricalBarChartToolbarInternalConfigured extends InternalChartToolbarConfigured {\n  hidden?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisConfiguration {\n  label?: string;\n  tickLabelLayout: Layout;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartThresholdConfiguration =\n  CategoricalBarChartThresholdIndicatorProps;\n\n/**\n * @public\n */\nexport type InternalCategoricalBarChartThresholdConfiguration =\n  WithId<CategoricalBarChartThresholdConfiguration>;\n//endregion\n\n//region Props\n// TODO: ADES-5109 we need to support Unit in the categoricalBarChart\n/**\n * @public\n * @deprecated CategoricalUnit is deprecated, use string | Unit instead.\n */\nexport type CategoricalUnit = string;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartData extends Record<string, unknown> {\n  category: string;\n  value: number | Record<string, number>;\n  // oxlint-disable-next-line typescript/no-deprecated\n  unit?: CategoricalUnit | string | Unit;\n  /* @deprecated - use color rules instead. This key will be removed in a future release */\n  color?: string;\n}\n\n/**\n * Ref of the Categorical bar chart\n * @public\n */\nexport interface CategoricalBarChartRef {\n  /** Chart div element */\n  element: HTMLDivElement | null;\n  /** Returns the current serialized config of the categorical bar chart .*/\n  getConfig: () => string;\n  /** Downloads map raw data .*/\n  downloadData: () => void;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartProps\n  extends StylingProps, MaskingProps, AriaLabelingProps, BehaviorTrackingProps {\n  /**\n   * Data object for the categorical bar chart\n   */\n  data: CategoricalBarChartData[];\n  /**\n   * Chart height. When a number is specified, is considered as pixels, otherwise a valid height string is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  /**\n   * Chart width. When a number is specified, it's treated as pixels,\n   * otherwise a valid width string is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   *@defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a category.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Category actions to be shown in the legend and tooltip actions\n   */\n  seriesActions?: (series: Record<string, unknown>) => SeriesActionsTemplate;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"single-color\" - each bar gets the same color\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /** Show the loading indicator when truthy.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipProps {\n  /**\n   * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the category within a category.\n   */\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisProps {\n  /**\n   * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'horizontal'\n   */\n  tickLabelLayout?: Layout;\n  // Optional axis label\n  label?: string;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisProps {\n  // Optional axis label\n  label?: string;\n  // Min value to be represented on a value axis\n  min?: number;\n  // Max value to be represented on a value axis\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendProps = LegendProps;\n\n/**\n * @internal\n */\nexport type CategoricalValueScales =\n  | ScaleLinear<number, number>\n  | ScaleSymLog<number, number>;\n"],
+  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  ColorPaletteMode,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendPosition, LegendProps } from '../../core/types/legend.js';\nimport type {\n  AxisScaleType,\n  ValueRepresentation,\n} from '../../core/types/scales.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport {\n  ChartToolbarConfig,\n  InternalChartToolbarConfigured,\n} from '../../core/types/toolbar.js';\nimport type { WithId } from '../../core/types/with-id.js';\nimport type { CategoricalBarChartThresholdIndicatorProps } from '../slots/ThresholdIndicator.js';\n\n//region Common\n/**\n * Defines whether the item is displayed horizontally or vertically.\n * @public\n */\nexport const layoutOptions = ['horizontal', 'vertical'] as const;\n/**\n * @public\n */\nexport type Layout = (typeof layoutOptions)[number];\n\n/**\n * Strategy used for grouping the bars in a bar chart.\n * @public\n */\nexport const groupModeOptions = ['grouped', 'stacked'] as const;\n/**\n * @public\n */\nexport type GroupMode = (typeof groupModeOptions)[number];\n\n/**\n * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n * @public\n */\nexport const categoricalChartTooltipVariantOptions = [\n  'single',\n  'grouped',\n] as const;\n/**\n * @public\n */\nexport type CategoricalChartTooltipVariant =\n  (typeof categoricalChartTooltipVariantOptions)[number];\n\n//endregion\n\n//region Slots\n/**\n * @internal\n */\nexport interface CategoricalBarChartSlots {\n  legend: {\n    position?: LegendPosition;\n    hidden?: boolean;\n  };\n  tooltip: {\n    variant?: CategoricalChartTooltipVariant;\n  };\n  valueAxis: {\n    label?: string;\n    min?: number;\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  categoryAxis: {\n    tickLabelLayout?: Layout;\n    label?: string;\n  };\n  thresholds: CategoricalBarChartThresholdIndicatorProps[];\n  toolbar: Partial<CategoricalBarChartToolbarInternalConfigured>;\n  colorRules: ColorRuleProps[];\n  intents: InternalCategoricalBarChartConfig['intents'];\n}\n\n//endregion\n\n//region Configuration\n/**\n * @public\n */\nexport interface CategoricalBarChartConfiguration {\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   * @defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a categories.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Tooltip config for the chart\n   */\n  tooltip?: {\n    /**\n     * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n     */\n    variant?: CategoricalChartTooltipVariant;\n  };\n  /**\n   * Config for the axis holding the category\n   */\n  categoryAxis?: {\n    /**\n     * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n     * @defaultValue 'horizontal'\n     */\n    tickLabelLayout?: Layout;\n    // Optional axis label\n    label?: string;\n  };\n  /**\n   * Config for the axis holding the category values\n   */\n  valueAxis?: {\n    // Optional axis label\n    label?: string;\n    // Min value to be represented on a value axis\n    min?: number;\n    // Max value to be represented on a value axis\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  // Config for the chart legend config.\n  legend?: {\n    /**\n     * Defines the position where to show the chart legend.\n     * @defaultValue \"auto\"\n     */\n    position?: LegendPosition;\n    /**\n     * Whether the legend is hidden or shown\n     * @defaultValue \"false\" - the legend is shown\n     */\n    hidden?: boolean;\n  };\n  /**\n   * Truncation mode to use (start, middle, end)\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"multi-colored\" - each bar gets a color in the palette sequentially\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /**\n   * ThresholdIndicator configuration for the categorical bar chart value axis.\n   */\n  thresholdIndicators?: CategoricalBarChartThresholdConfiguration[];\n  /**\n   * Config for the chart toolbar\n   */\n  toolbar?: CategoricalBarChartToolbarConfiguration;\n  /**\n   * Color rules to apply to the bars\n   */\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * Config type holding all the required config used in the categorical bar chart. Considers that the defaults have already been applied.\n * @public\n */\nexport type RequiredCategoricalBarChartConfiguration =\n  Required<CategoricalBarChartConfiguration> & {\n    tooltip: CategoricalBarChartTooltipConfiguration;\n    legend: CategoricalBarChartLegendConfiguration;\n    categoryAxis: CategoricalBarChartCategoryAxisConfiguration;\n    thresholdIndicators: InternalCategoricalBarChartThresholdConfiguration[];\n    toolbar?: CategoricalBarChartToolbarConfiguration;\n  };\n\n/**\n * @internal\n */\nexport type InternalCategoricalBarChartConfig = Omit<\n  RequiredCategoricalBarChartConfiguration,\n  'toolbar'\n> & {\n  intents: IntentProps[];\n  toolbar: CategoricalBarChartToolbarInternalConfigured &\n    Required<\n      Pick<\n        CategoricalBarChartToolbarInternalConfigured,\n        'placement' | 'hidden' | 'downloadData'\n      >\n    >;\n};\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipConfiguration {\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendConfiguration = LegendProps;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisConfiguration {\n  label?: string;\n  min?: number;\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartToolbarConfiguration = ChartToolbarConfig & {\n  hidden?: boolean;\n};\n\n/**\n * @internal\n */\nexport interface CategoricalBarChartToolbarInternalConfigured extends InternalChartToolbarConfigured {\n  hidden?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisConfiguration {\n  label?: string;\n  tickLabelLayout: Layout;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartThresholdConfiguration =\n  CategoricalBarChartThresholdIndicatorProps;\n\n/**\n * @public\n */\nexport type InternalCategoricalBarChartThresholdConfiguration =\n  WithId<CategoricalBarChartThresholdConfiguration>;\n//endregion\n\n//region Props\n// TODO: ADES-5109 we need to support Unit in the categoricalBarChart\n/**\n * @public\n * @deprecated CategoricalUnit is deprecated, use string | Unit instead.\n */\nexport type CategoricalUnit = string;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartData extends Record<string, unknown> {\n  category: string;\n  value: number | Record<string, number>;\n  // oxlint-disable-next-line typescript/no-deprecated\n  unit?: CategoricalUnit | string | Unit;\n  /* @deprecated - use color rules instead. This key will be removed in a future release */\n  // DEPRECATION: [APPDEV-18274] BREAKING-CHANGE: Remove deprecated CategoricalBarChartData.color prop.\n  color?: string;\n}\n\n/**\n * Ref of the Categorical bar chart\n * @public\n */\nexport interface CategoricalBarChartRef {\n  /** Chart div element */\n  element: HTMLDivElement | null;\n  /** Returns the current serialized config of the categorical bar chart .*/\n  getConfig: () => string;\n  /** Downloads map raw data .*/\n  downloadData: () => void;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartProps\n  extends StylingProps, MaskingProps, AriaLabelingProps, BehaviorTrackingProps {\n  /**\n   * Data object for the categorical bar chart\n   */\n  data: CategoricalBarChartData[];\n  /**\n   * Chart height. When a number is specified, is considered as pixels, otherwise a valid height string is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  /**\n   * Chart width. When a number is specified, it's treated as pixels,\n   * otherwise a valid width string is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   *@defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a category.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Category actions to be shown in the legend and tooltip actions\n   */\n  seriesActions?: (series: Record<string, unknown>) => SeriesActionsTemplate;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"single-color\" - each bar gets the same color\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /** Show the loading indicator when truthy.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipProps {\n  /**\n   * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the category within a category.\n   */\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisProps {\n  /**\n   * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'horizontal'\n   */\n  tickLabelLayout?: Layout;\n  // Optional axis label\n  label?: string;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisProps {\n  // Optional axis label\n  label?: string;\n  // Min value to be represented on a value axis\n  min?: number;\n  // Max value to be represented on a value axis\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendProps = LegendProps;\n\n/**\n * @internal\n */\nexport type CategoricalValueScales =\n  | ScaleLinear<number, number>\n  | ScaleSymLog<number, number>;\n"],
   "mappings": "AAuCO,MAAM,gBAAgB,CAAC,cAAc,UAAU;AAU/C,MAAM,mBAAmB,CAAC,WAAW,SAAS;AAU9C,MAAM,wCAAwC;AAAA,EACnD;AAAA,EACA;AACF;",
   "names": []
 }

package/esm/charts/categorical-bar/utils/categorical-layout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/categorical-bar/utils/categorical-layout.ts"],
-  "sourcesContent": ["import type { ScaleBand } from 'd3-scale';\n\nimport { isStacked } from './layout.js';\nimport { safeGet } from '../../core/utils/safe-get.js';\nimport {\n  CategoricalBarData,\n  Dimension,\n  WeakMapCategory,\n  WeakMapDimension,\n} from '../types/categorical-bar-chart-data.js';\nimport {\n  GroupMode,\n  type CategoricalValueScales,\n} from '../types/categorical-bar-chart.js';\n\nexport type BarPlotCoordinates = {\n  valueCoord: (dimension: Dimension) => number;\n  categoryCoord: (dimension: Dimension, category: CategoricalBarData) => number;\n  barSize: (dimension: Dimension) => number;\n  barThickness: (dimension: Dimension) => number;\n};\n\n/**\n * Get the top bar value coordinate\n * @param dimension - dimension\n * @param valueScale - value scale\n * @param dimensionMap -\n */\nexport function getTopValueCoord(\n  dimension: Dimension,\n  valueScale: CategoricalValueScales,\n  dimensionMap: WeakMapDimension,\n): number {\n  const { value, cumulativeValue } = safeGet(dimensionMap, dimension);\n\n  return valueScale((cumulativeValue ?? 0) + value) ?? 0;\n}\n\n/**\n * Get bar size base on valueScale\n *\n * @internal\n * @param value - value of current dimension\n * @param valueScale - value scale\n */\nexport function getBarSize(\n  value: number,\n  valueScale: CategoricalValueScales,\n): number {\n  const zeroCoordinate = valueScale(0) ?? 0;\n  const scaledValue = valueScale(value) ?? 0;\n\n  if (value >= 0) {\n    return zeroCoordinate - scaledValue;\n  }\n\n  return scaledValue - zeroCoordinate;\n}\n\n/**\n * Get the value coord to print the bar\n * @internal\n * @param dimension - current dimension\n * @param valueScale - value scale\n * @param dimensionMap -\n */\nfunction getValueCoord(\n  dimension: Dimension,\n  valueScale: CategoricalValueScales,\n  dimensionMap: WeakMapDimension,\n): number {\n  const { value, cumulativeValue } = safeGet(dimensionMap, dimension);\n\n  return (\n    valueScale(\n      value >= 0 ? (cumulativeValue ?? 0) + value : cumulativeValue ?? 0,\n    ) ?? 0\n  );\n}\n\n/**\n * Calculates the bar coordinate base on current dimension and the categoryScale. will consider if is Stacked or Grouped.\n * @param groupMode - group mode\n * @param categoryScale - category scale\n * @param valueScale - value scale\n * @param dimensionsScale - dimensions scale\n * @param isSingleDimension - is single dimension\n * @param dimensionMap - dimensions Map\n * @param categoryMap - category Map\n */\nexport function getBarCoordinates(\n  groupMode: GroupMode,\n  categoryScale: ScaleBand<string>,\n  valueScale: CategoricalValueScales,\n  dimensionsScale: ScaleBand<string>,\n  isSingleDimension: boolean,\n  dimensionMap: WeakMapDimension,\n  categoryMap: WeakMapCategory,\n): BarPlotCoordinates {\n  if (isStacked(groupMode) || isSingleDimension) {\n    return {\n      categoryCoord: (dimension, category) =>\n        categoryScale(safeGet(categoryMap, category).id) ?? 0,\n      valueCoord: (dimension) =>\n        getValueCoord(dimension, valueScale, dimensionMap),\n      barThickness: () => categoryScale.bandwidth(),\n      barSize: (dimension) =>\n        getBarSize(safeGet(dimensionMap, dimension).value, valueScale),\n    };\n  }\n\n  return {\n    categoryCoord: (dimension, category) => {\n      const categoryCoord =\n        categoryScale(safeGet(categoryMap, category).id) ?? 0;\n      const dimensionCoord =\n        dimensionsScale(safeGet(dimensionMap, dimension).name) ?? 0;\n\n      return categoryCoord + dimensionCoord;\n    },\n    valueCoord: (dimension) =>\n      getValueCoord(dimension, valueScale, dimensionMap),\n    barThickness: () => dimensionsScale.bandwidth(),\n    barSize: (dimension) =>\n      getBarSize(safeGet(dimensionMap, dimension).value, valueScale),\n  };\n}\n"],
-  "mappings": "AAEA,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAyBjB,SAAS,iBACd,WACA,YACA,cACQ;AACR,QAAM,EAAE,OAAO,gBAAgB,IAAI,QAAQ,cAAc,SAAS;AAElE,SAAO,YAAY,mBAAmB,KAAK,KAAK,KAAK;AACvD;AASO,SAAS,WACd,OACA,YACQ;AACR,QAAM,iBAAiB,WAAW,CAAC,KAAK;AACxC,QAAM,cAAc,WAAW,KAAK,KAAK;AAEzC,MAAI,SAAS,GAAG;AACd,WAAO,iBAAiB;AAAA,EAC1B;AAEA,SAAO,cAAc;AACvB;AASA,SAAS,cACP,WACA,YACA,cACQ;AACR,QAAM,EAAE,OAAO,gBAAgB,IAAI,QAAQ,cAAc,SAAS;AAElE,SACE;AAAA,IACE,SAAS,KAAK,mBAAmB,KAAK,QAAQ,mBAAmB;AAAA,EACnE,KAAK;AAET;AAYO,SAAS,kBACd,WACA,eACA,YACA,iBACA,mBACA,cACA,aACoB;AACpB,MAAI,UAAU,SAAS,KAAK,mBAAmB;AAC7C,WAAO;AAAA,MACL,eAAe,CAAC,WAAW,aACzB,cAAc,QAAQ,aAAa,QAAQ,EAAE,EAAE,KAAK;AAAA,MACtD,YAAY,CAAC,cACX,cAAc,WAAW,YAAY,YAAY;AAAA,MACnD,cAAc,MAAM,cAAc,UAAU;AAAA,MAC5C,SAAS,CAAC,cACR,WAAW,QAAQ,cAAc,SAAS,EAAE,OAAO,UAAU;AAAA,IACjE;AAAA,EACF;AAEA,SAAO;AAAA,IACL,eAAe,CAAC,WAAW,aAAa;AACtC,YAAM,gBACJ,cAAc,QAAQ,aAAa,QAAQ,EAAE,EAAE,KAAK;AACtD,YAAM,iBACJ,gBAAgB,QAAQ,cAAc,SAAS,EAAE,IAAI,KAAK;AAE5D,aAAO,gBAAgB;AAAA,IACzB;AAAA,IACA,YAAY,CAAC,cACX,cAAc,WAAW,YAAY,YAAY;AAAA,IACnD,cAAc,MAAM,gBAAgB,UAAU;AAAA,IAC9C,SAAS,CAAC,cACR,WAAW,QAAQ,cAAc,SAAS,EAAE,OAAO,UAAU;AAAA,EACjE;AACF;",
+  "sourcesContent": ["import type { ScaleBand } from 'd3-scale';\n\nimport { isStacked } from './layout.js';\nimport { safeGet } from '../../core/utils/safe-get.js';\nimport {\n  CategoricalBarData,\n  Dimension,\n  WeakMapCategory,\n  WeakMapDimension,\n} from '../types/categorical-bar-chart-data.js';\nimport {\n  GroupMode,\n  type CategoricalValueScales,\n} from '../types/categorical-bar-chart.js';\n\nexport type BarPlotCoordinates = {\n  valueCoord: (dimension: Dimension) => number;\n  categoryCoord: (dimension: Dimension, category: CategoricalBarData) => number;\n  barSize: (dimension: Dimension) => number;\n  barThickness: (dimension: Dimension) => number;\n};\n\n/**\n * Get the top bar value coordinate\n * @param dimension - dimension\n * @param valueScale - value scale\n * @param dimensionMap -\n */\nexport function getTopValueCoord(\n  dimension: Dimension,\n  valueScale: CategoricalValueScales,\n  dimensionMap: WeakMapDimension,\n): number {\n  const { value, cumulativeValue } = safeGet(dimensionMap, dimension);\n\n  return valueScale((cumulativeValue ?? 0) + value) ?? 0;\n}\n\n/**\n * Get bar size base on valueScale\n *\n * @internal\n * @param value - value of current dimension\n * @param valueScale - value scale\n */\nexport function getBarSize(\n  value: number,\n  valueScale: CategoricalValueScales,\n): number {\n  const zeroCoordinate = valueScale(0) ?? 0;\n  const scaledValue = valueScale(value) ?? 0;\n\n  if (value >= 0) {\n    return zeroCoordinate - scaledValue;\n  }\n\n  return scaledValue - zeroCoordinate;\n}\n\n/**\n * Get the value coord to print the bar\n * @internal\n * @param dimension - current dimension\n * @param valueScale - value scale\n * @param dimensionMap -\n */\nfunction getValueCoord(\n  dimension: Dimension,\n  valueScale: CategoricalValueScales,\n  dimensionMap: WeakMapDimension,\n): number {\n  const { value, cumulativeValue } = safeGet(dimensionMap, dimension);\n\n  return (\n    valueScale(\n      value >= 0 ? (cumulativeValue ?? 0) + value : (cumulativeValue ?? 0),\n    ) ?? 0\n  );\n}\n\n/**\n * Calculates the bar coordinate base on current dimension and the categoryScale. will consider if is Stacked or Grouped.\n * @param groupMode - group mode\n * @param categoryScale - category scale\n * @param valueScale - value scale\n * @param dimensionsScale - dimensions scale\n * @param isSingleDimension - is single dimension\n * @param dimensionMap - dimensions Map\n * @param categoryMap - category Map\n */\nexport function getBarCoordinates(\n  groupMode: GroupMode,\n  categoryScale: ScaleBand<string>,\n  valueScale: CategoricalValueScales,\n  dimensionsScale: ScaleBand<string>,\n  isSingleDimension: boolean,\n  dimensionMap: WeakMapDimension,\n  categoryMap: WeakMapCategory,\n): BarPlotCoordinates {\n  if (isStacked(groupMode) || isSingleDimension) {\n    return {\n      categoryCoord: (dimension, category) =>\n        categoryScale(safeGet(categoryMap, category).id) ?? 0,\n      valueCoord: (dimension) =>\n        getValueCoord(dimension, valueScale, dimensionMap),\n      barThickness: () => categoryScale.bandwidth(),\n      barSize: (dimension) =>\n        getBarSize(safeGet(dimensionMap, dimension).value, valueScale),\n    };\n  }\n\n  return {\n    categoryCoord: (dimension, category) => {\n      const categoryCoord =\n        categoryScale(safeGet(categoryMap, category).id) ?? 0;\n      const dimensionCoord =\n        dimensionsScale(safeGet(dimensionMap, dimension).name) ?? 0;\n\n      return categoryCoord + dimensionCoord;\n    },\n    valueCoord: (dimension) =>\n      getValueCoord(dimension, valueScale, dimensionMap),\n    barThickness: () => dimensionsScale.bandwidth(),\n    barSize: (dimension) =>\n      getBarSize(safeGet(dimensionMap, dimension).value, valueScale),\n  };\n}\n"],
+  "mappings": "AAEA,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAyBjB,SAAS,iBACd,WACA,YACA,cACQ;AACR,QAAM,EAAE,OAAO,gBAAgB,IAAI,QAAQ,cAAc,SAAS;AAElE,SAAO,YAAY,mBAAmB,KAAK,KAAK,KAAK;AACvD;AASO,SAAS,WACd,OACA,YACQ;AACR,QAAM,iBAAiB,WAAW,CAAC,KAAK;AACxC,QAAM,cAAc,WAAW,KAAK,KAAK;AAEzC,MAAI,SAAS,GAAG;AACd,WAAO,iBAAiB;AAAA,EAC1B;AAEA,SAAO,cAAc;AACvB;AASA,SAAS,cACP,WACA,YACA,cACQ;AACR,QAAM,EAAE,OAAO,gBAAgB,IAAI,QAAQ,cAAc,SAAS;AAElE,SACE;AAAA,IACE,SAAS,KAAK,mBAAmB,KAAK,QAAS,mBAAmB;AAAA,EACpE,KAAK;AAET;AAYO,SAAS,kBACd,WACA,eACA,YACA,iBACA,mBACA,cACA,aACoB;AACpB,MAAI,UAAU,SAAS,KAAK,mBAAmB;AAC7C,WAAO;AAAA,MACL,eAAe,CAAC,WAAW,aACzB,cAAc,QAAQ,aAAa,QAAQ,EAAE,EAAE,KAAK;AAAA,MACtD,YAAY,CAAC,cACX,cAAc,WAAW,YAAY,YAAY;AAAA,MACnD,cAAc,MAAM,cAAc,UAAU;AAAA,MAC5C,SAAS,CAAC,cACR,WAAW,QAAQ,cAAc,SAAS,EAAE,OAAO,UAAU;AAAA,IACjE;AAAA,EACF;AAEA,SAAO;AAAA,IACL,eAAe,CAAC,WAAW,aAAa;AACtC,YAAM,gBACJ,cAAc,QAAQ,aAAa,QAAQ,EAAE,EAAE,KAAK;AACtD,YAAM,iBACJ,gBAAgB,QAAQ,cAAc,SAAS,EAAE,IAAI,KAAK;AAE5D,aAAO,gBAAgB;AAAA,IACzB;AAAA,IACA,YAAY,CAAC,cACX,cAAc,WAAW,YAAY,YAAY;AAAA,IACnD,cAAc,MAAM,gBAAgB,UAAU;AAAA,IAC9C,SAAS,CAAC,cACR,WAAW,QAAQ,cAAc,SAAS,EAAE,OAAO,UAAU;AAAA,EACjE;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.css

@@ -1,3 +1,3 @@
-._145zb630-3-13-3 {
+._145zb630-3-14-1 {
   position: relative;
 }