@dynatrace/strato-components 3.5.2 → 3.6.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/XYChartBottomAxisArea.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport type { ScaleBand } from 'd3-scale';\nimport { useRef } from 'react';\n\nimport { axisContainerStyle } from './AxisArea.sty.js';\nimport { isAxisPannable } from './utils/is-axis-pannable.js';\nimport { XTickWithTruncation } from './XTickWithTruncation.js';\nimport { XYChartPanningControls } from './XYChartPanningControls.js';\nimport { AxisBottom } from '../../../core/components/axes/AxisBottom.js';\nimport { DivAxisWrapper } from '../../../core/components/axes/components/DivAxisWrapper.js';\nimport {\n  axisFontProps,\n  EMOJI_REGEX,\n} from '../../../core/components/axes/constants.js';\nimport { getXTickMaxSize } from '../../../core/components/axes/utils/calculate-axis-size.js';\nimport {\n  getTickLabelPropsForCategoryAxis,\n  getTickLabelPropsForValueAxis,\n} from '../../../core/components/axes/utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../../../core/components/axes/utils/is-tick-label-visible.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { KEYBOARD_HANDLERS } from '../../../core/components/zoom/constants.js';\nimport { cursorStyle } from '../../../core/components/zoom/ZoomCursors.sty.js';\nimport { XY_CHART_BOTTOM_AXIS_LABEL } from '../../constants/defaults.js';\nimport { useAxesTicks } from '../../hooks/useAxesTicks.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { isCategorical } from '../../types/guards.js';\nimport { AREAS } from '../../utils/grid-templates.js';\nimport { useApplyPanDelta } from '../overlay/hooks/useApplyPanDelta.js';\n\nexport function XYChartBottomAxisArea() {\n  const axisRef = useRef<HTMLDivElement>(null);\n\n  const { bottomTicks } = useAxesTicks();\n  const { bottom: bottomConfig } = useVisibleAxesConfig();\n  const { bottom: bottomScale } = useVisibleAxesScales();\n  const scales = useXYChartScales();\n\n  const canPan = isAxisPannable(bottomConfig, scales);\n\n  const tickFormat = (_: unknown, index: number) =>\n    bottomTicks.formattedTicks[index];\n\n  const isCategoricalAxis = bottomConfig?.type\n    ? isCategorical(bottomConfig.type)\n    : false;\n  const tickLabelProps = isCategoricalAxis\n    ? getTickLabelPropsForCategoryAxis('bottom', bottomConfig?.tickLabelLayout)\n    : getTickLabelPropsForValueAxis('bottom', bottomConfig?.tickLabelLayout);\n\n  const areCategoricalTicksNotFittable =\n    bottomScale &&\n    isCategoricalAxis &&\n    !isTickLabelSpaceAvailable((bottomScale as ScaleBand<string>).step());\n\n  const handlePan = useApplyPanDelta();\n\n  useGesture(\n    {\n      onDrag: (e) =>\n        KEYBOARD_HANDLERS.includes(e.type) ? null : handlePan(-e.delta[0]),\n    },\n    {\n      target: axisRef,\n      eventOptions: { passive: false },\n      drag: { filterTaps: true, pointer: { buttons: [1, 4] } },\n      enabled: canPan,\n    },\n  );\n\n  const hideAxis =\n    bottomConfig === undefined ||\n    areCategoricalTicksNotFittable ||\n    bottomScale === undefined;\n\n  const isTickRotated = bottomConfig?.tickLabelLayout === 'vertical';\n\n  const tickNameHasEmoji = bottomTicks.ticks.some((name) =>\n    EMOJI_REGEX.test(name),\n  );\n\n  return hideAxis ? null : (\n    <ChartGrid.GridArea gridArea={AREAS.bottomAxis}>\n      {({ availableWidth, availableHeight }) => (\n        <div\n          className={clsx(\n            cursorStyle({ isPanEnabled: canPan }),\n            axisContainerStyle,\n          )}\n          ref={axisRef}\n        >\n          {canPan && (\n            <XYChartPanningControls\n              visibleAxis={bottomConfig}\n              onClickPan={(delta) => handlePan(-delta)}\n            />\n          )}\n          <DivAxisWrapper\n            divAxisStyle={axisFontProps}\n            ticks={bottomTicks.formattedTicks}\n            label={bottomConfig.label}\n            isTickVertical\n            isTickRotated={isTickRotated}\n          >\n            <AxisBottom\n              role=\"group\"\n              aria-label={XY_CHART_BOTTOM_AXIS_LABEL}\n              scale={bottomScale}\n              containerSize={availableWidth}\n              height={availableHeight}\n              tickValues={bottomTicks.ticks}\n              tickLabelProps={tickLabelProps}\n              tickFormat={tickFormat}\n              label={bottomConfig.label}\n              tickComponent={(renderProps) => (\n                <XTickWithTruncation\n                  renderProps={renderProps}\n                  maxSpaceForTruncation={getXTickMaxSize(\n                    availableHeight,\n                    availableWidth,\n                    isTickRotated,\n                    bottomScale,\n                    bottomConfig.label,\n                  )}\n                  centerTick={isCategoricalAxis}\n                  isTickRotated={isTickRotated}\n                  position=\"bottom\"\n                  tickNameHasEmoji={tickNameHasEmoji}\n                />\n              )}\n            />\n          </DivAxisWrapper>\n        </div>\n      )}\n    </ChartGrid.GridArea>\n  );\n}\n\nXYChartBottomAxisArea['displayName'] = 'XYChartValueBottomAxisArea';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport type { NumberValue, ScaleBand } from 'd3-scale';\nimport { useRef } from 'react';\n\nimport { axisContainerStyle } from './AxisArea.sty.js';\nimport { computeCollisionAwareMaxSpace } from './utils/compute-collision-aware-max-space.js';\nimport { isAxisPannable } from './utils/is-axis-pannable.js';\nimport { XTickWithTruncation } from './XTickWithTruncation.js';\nimport { XYChartPanningControls } from './XYChartPanningControls.js';\nimport { AxisBottom } from '../../../core/components/axes/AxisBottom.js';\nimport { DivAxisWrapper } from '../../../core/components/axes/components/DivAxisWrapper.js';\nimport {\n  axisFontProps,\n  EMOJI_REGEX,\n} from '../../../core/components/axes/constants.js';\nimport { getXTickMaxSize } from '../../../core/components/axes/utils/calculate-axis-size.js';\nimport { getXAxisTickLabelProps } from '../../../core/components/axes/utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../../../core/components/axes/utils/is-tick-label-visible.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { KEYBOARD_HANDLERS } from '../../../core/components/zoom/constants.js';\nimport { cursorStyle } from '../../../core/components/zoom/ZoomCursors.sty.js';\nimport { XY_CHART_BOTTOM_AXIS_LABEL } from '../../constants/defaults.js';\nimport { useAxesTicks } from '../../hooks/useAxesTicks.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { isCategorical } from '../../types/guards.js';\nimport { AREAS } from '../../utils/grid-templates.js';\nimport { useApplyPanDelta } from '../overlay/hooks/useApplyPanDelta.js';\n\nexport function XYChartBottomAxisArea() {\n  const axisRef = useRef<HTMLDivElement>(null);\n\n  const { bottomTicks } = useAxesTicks();\n  const { bottom: bottomConfig } = useVisibleAxesConfig();\n  const { bottom: bottomScale } = useVisibleAxesScales();\n  const scales = useXYChartScales();\n\n  const canPan = isAxisPannable(bottomConfig, scales);\n\n  const tickFormat = (_: unknown, index: number) =>\n    bottomTicks.formattedTicks[index];\n\n  const isCategoricalAxis = bottomConfig?.type\n    ? isCategorical(bottomConfig.type)\n    : false;\n  const isTickRotated = bottomConfig?.tickLabelLayout === 'vertical';\n  const tickLabelProps = getXAxisTickLabelProps(\n    'bottom',\n    isCategoricalAxis,\n    isTickRotated,\n    bottomScale,\n    bottomConfig?.tickLabelLayout,\n  );\n\n  const areCategoricalTicksNotFittable =\n    bottomScale &&\n    isCategoricalAxis &&\n    !isTickLabelSpaceAvailable((bottomScale as ScaleBand<string>).step());\n\n  const handlePan = useApplyPanDelta();\n\n  useGesture(\n    {\n      onDrag: (e) =>\n        KEYBOARD_HANDLERS.includes(e.type) ? null : handlePan(-e.delta[0]),\n    },\n    {\n      target: axisRef,\n      eventOptions: { passive: false },\n      drag: { filterTaps: true, pointer: { buttons: [1, 4] } },\n      enabled: canPan,\n    },\n  );\n\n  const hideAxis =\n    bottomConfig === undefined ||\n    areCategoricalTicksNotFittable ||\n    bottomScale === undefined;\n\n  const tickNameHasEmoji = bottomTicks.ticks.some((name) =>\n    EMOJI_REGEX.test(name),\n  );\n\n  return hideAxis ? null : (\n    <ChartGrid.GridArea gridArea={AREAS.bottomAxis}>\n      {({ availableWidth, availableHeight }) => {\n        const maxSpaceForTruncation = computeCollisionAwareMaxSpace(\n          getXTickMaxSize(\n            availableHeight,\n            availableWidth,\n            isTickRotated,\n            bottomScale,\n            bottomConfig.label,\n            bottomTicks.ticks.length,\n          ),\n          bottomTicks.formattedTicks,\n          bottomTicks.ticks as unknown as NumberValue[],\n          bottomScale,\n          isCategoricalAxis,\n          isTickRotated,\n        );\n\n        return (\n          <div\n            className={clsx(\n              cursorStyle({ isPanEnabled: canPan }),\n              axisContainerStyle,\n            )}\n            ref={axisRef}\n          >\n            {canPan && (\n              <XYChartPanningControls\n                visibleAxis={bottomConfig}\n                onClickPan={(delta) => handlePan(-delta)}\n              />\n            )}\n            <DivAxisWrapper\n              divAxisStyle={axisFontProps}\n              ticks={bottomTicks.formattedTicks}\n              label={bottomConfig.label}\n              isTickVertical\n              isTickRotated={isTickRotated}\n            >\n              <AxisBottom\n                role=\"group\"\n                aria-label={XY_CHART_BOTTOM_AXIS_LABEL}\n                scale={bottomScale}\n                containerSize={availableWidth}\n                height={availableHeight}\n                tickValues={bottomTicks.ticks}\n                tickLabelProps={tickLabelProps}\n                tickFormat={tickFormat}\n                label={bottomConfig.label}\n                tickComponent={(renderProps) => (\n                  <XTickWithTruncation\n                    renderProps={renderProps}\n                    maxSpaceForTruncation={maxSpaceForTruncation}\n                    centerTick={isCategoricalAxis}\n                    isTickRotated={isTickRotated}\n                    position=\"bottom\"\n                    tickNameHasEmoji={tickNameHasEmoji}\n                  />\n                )}\n              />\n            </DivAxisWrapper>\n          </div>\n        );\n      }}\n    </ChartGrid.GridArea>\n  );\n}\n\nXYChartBottomAxisArea['displayName'] = 'XYChartValueBottomAxisArea';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/XYChartTopAxisArea.js

@@ -3,6 +3,7 @@ import { useGesture } from "@use-gesture/react";
 import clsx from "clsx";
 import { useRef } from "react";
 import { axisContainerStyle } from "./AxisArea.sty.js";
+import { computeCollisionAwareMaxSpace } from "./utils/compute-collision-aware-max-space.js";
 import { isAxisPannable } from "./utils/is-axis-pannable.js";
 import { XTickWithTruncation } from "./XTickWithTruncation.js";
 import { XYChartPanningControls } from "./XYChartPanningControls.js";
@@ -13,10 +14,7 @@ import {
   EMOJI_REGEX
 } from "../../../core/components/axes/constants.js";
 import { getXTickMaxSize } from "../../../core/components/axes/utils/calculate-axis-size.js";
-import {
-  getTickLabelPropsForCategoryAxis,
-  getTickLabelPropsForValueAxis
-} from "../../../core/components/axes/utils/get-tick-label-props.js";
+import { getXAxisTickLabelProps } from "../../../core/components/axes/utils/get-tick-label-props.js";
 import { isTickLabelSpaceAvailable } from "../../../core/components/axes/utils/is-tick-label-visible.js";
 import { ChartGrid } from "../../../core/components/chart-grid/ChartGridRoot.js";
 import { KEYBOARD_HANDLERS } from "../../../core/components/zoom/constants.js";
@@ -38,10 +36,16 @@ function XYChartTopAxisArea() {
   const canPan = isAxisPannable(topConfig, scales);
   const tickFormat = (_, index) => topTicks.formattedTicks[index];
   const isCategoricalAxis = topConfig?.type ? isCategorical(topConfig.type) : false;
-  const tickLabelProps = isCategoricalAxis ? getTickLabelPropsForCategoryAxis("top", topConfig?.tickLabelLayout) : getTickLabelPropsForValueAxis("top", topConfig?.tickLabelLayout);
+  const isTickRotated = topConfig?.tickLabelLayout === "vertical";
+  const tickLabelProps = getXAxisTickLabelProps(
+    "top",
+    isCategoricalAxis,
+    isTickRotated,
+    topScale,
+    topConfig?.tickLabelLayout
+  );
   const areCategoricalTicksNotFittable = topScale && isCategoricalAxis && !isTickLabelSpaceAvailable(topScale.step());
   const hideAxis = topConfig === void 0 || areCategoricalTicksNotFittable || topScale === void 0;
-  const isTickRotated = topConfig?.tickLabelLayout === "vertical";
   const handlePan = useApplyPanDelta();
   useGesture(
     {
@@ -57,66 +61,77 @@ function XYChartTopAxisArea() {
   const tickNameHasEmoji = topTicks.ticks.some(
     (name) => EMOJI_REGEX.test(name)
   );
-  return hideAxis ? null : /* @__PURE__ */ jsx(ChartGrid.GridArea, { gridArea: AREAS.topAxis, children: ({ availableWidth, availableHeight }) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        cursorStyle({ isPanEnabled: canPan }),
-        axisContainerStyle
+  return hideAxis ? null : /* @__PURE__ */ jsx(ChartGrid.GridArea, { gridArea: AREAS.topAxis, children: ({ availableWidth, availableHeight }) => {
+    const maxSpaceForTruncation = computeCollisionAwareMaxSpace(
+      getXTickMaxSize(
+        availableHeight,
+        availableWidth,
+        isTickRotated,
+        topScale,
+        topConfig.label,
+        topTicks.ticks.length
       ),
-      ref: axisRef,
-      children: [
-        canPan && /* @__PURE__ */ jsx(
-          XYChartPanningControls,
-          {
-            visibleAxis: topConfig,
-            onClickPan: (delta) => handlePan(-delta)
-          }
+      topTicks.formattedTicks,
+      topTicks.ticks,
+      topScale,
+      isCategoricalAxis,
+      isTickRotated
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          cursorStyle({ isPanEnabled: canPan }),
+          axisContainerStyle
         ),
-        /* @__PURE__ */ jsx(
-          DivAxisWrapper,
-          {
-            divAxisStyle: axisFontProps,
-            ticks: topTicks.formattedTicks,
-            label: topConfig.label,
-            isTickVertical: true,
-            isTickRotated,
-            children: /* @__PURE__ */ jsx(
-              AxisTop,
-              {
-                role: "group",
-                "aria-label": XY_CHART_TOP_AXIS_LABEL,
-                scale: topScale,
-                containerSize: availableWidth,
-                height: availableHeight,
-                tickValues: topTicks.ticks,
-                tickLabelProps,
-                tickFormat,
-                label: topConfig.label,
-                tickComponent: (renderProps) => /* @__PURE__ */ jsx(
-                  XTickWithTruncation,
-                  {
-                    renderProps,
-                    maxSpaceForTruncation: getXTickMaxSize(
-                      availableHeight,
-                      availableWidth,
+        ref: axisRef,
+        children: [
+          canPan && /* @__PURE__ */ jsx(
+            XYChartPanningControls,
+            {
+              visibleAxis: topConfig,
+              onClickPan: (delta) => handlePan(-delta)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DivAxisWrapper,
+            {
+              divAxisStyle: axisFontProps,
+              ticks: topTicks.formattedTicks,
+              label: topConfig.label,
+              isTickVertical: true,
+              isTickRotated,
+              children: /* @__PURE__ */ jsx(
+                AxisTop,
+                {
+                  role: "group",
+                  "aria-label": XY_CHART_TOP_AXIS_LABEL,
+                  scale: topScale,
+                  containerSize: availableWidth,
+                  height: availableHeight,
+                  tickValues: topTicks.ticks,
+                  tickLabelProps,
+                  tickFormat,
+                  label: topConfig.label,
+                  tickComponent: (renderProps) => /* @__PURE__ */ jsx(
+                    XTickWithTruncation,
+                    {
+                      renderProps,
+                      maxSpaceForTruncation,
+                      centerTick: isCategoricalAxis,
                       isTickRotated,
-                      topScale,
-                      topConfig.label
-                    ),
-                    centerTick: isCategoricalAxis,
-                    isTickRotated,
-                    position: "top",
-                    tickNameHasEmoji
-                  }
-                )
-              }
-            )
-          }
-        )
-      ]
-    }
-  ) });
+                      position: "top",
+                      tickNameHasEmoji
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  } });
 }
 XYChartTopAxisArea["displayName"] = "XYChartTopAxisArea";
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/XYChartTopAxisArea.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport type { ScaleBand } from 'd3-scale';\nimport { useRef } from 'react';\n\nimport { axisContainerStyle } from './AxisArea.sty.js';\nimport { isAxisPannable } from './utils/is-axis-pannable.js';\nimport { XTickWithTruncation } from './XTickWithTruncation.js';\nimport { XYChartPanningControls } from './XYChartPanningControls.js';\nimport { AxisTop } from '../../../core/components/axes/AxisTop.js';\nimport { DivAxisWrapper } from '../../../core/components/axes/components/DivAxisWrapper.js';\nimport {\n  axisFontProps,\n  EMOJI_REGEX,\n} from '../../../core/components/axes/constants.js';\nimport { getXTickMaxSize } from '../../../core/components/axes/utils/calculate-axis-size.js';\nimport {\n  getTickLabelPropsForCategoryAxis,\n  getTickLabelPropsForValueAxis,\n} from '../../../core/components/axes/utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../../../core/components/axes/utils/is-tick-label-visible.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { KEYBOARD_HANDLERS } from '../../../core/components/zoom/constants.js';\nimport { cursorStyle } from '../../../core/components/zoom/ZoomCursors.sty.js';\nimport { XY_CHART_TOP_AXIS_LABEL } from '../../constants/defaults.js';\nimport { useAxesTicks } from '../../hooks/useAxesTicks.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { isCategorical } from '../../types/guards.js';\nimport { AREAS } from '../../utils/grid-templates.js';\nimport { useApplyPanDelta } from '../overlay/hooks/useApplyPanDelta.js';\n\nexport function XYChartTopAxisArea() {\n  const axisRef = useRef<HTMLDivElement>(null);\n\n  const { topTicks } = useAxesTicks();\n  const { top: topConfig } = useVisibleAxesConfig();\n  const { top: topScale } = useVisibleAxesScales();\n\n  const scales = useXYChartScales();\n\n  const canPan = isAxisPannable(topConfig, scales);\n\n  const tickFormat = (_: unknown, index: number) =>\n    topTicks.formattedTicks[index];\n\n  const isCategoricalAxis = topConfig?.type\n    ? isCategorical(topConfig.type)\n    : false;\n  const tickLabelProps = isCategoricalAxis\n    ? getTickLabelPropsForCategoryAxis('top', topConfig?.tickLabelLayout)\n    : getTickLabelPropsForValueAxis('top', topConfig?.tickLabelLayout);\n\n  const areCategoricalTicksNotFittable =\n    topScale &&\n    isCategoricalAxis &&\n    !isTickLabelSpaceAvailable((topScale as ScaleBand<string>).step());\n\n  const hideAxis =\n    topConfig === undefined ||\n    areCategoricalTicksNotFittable ||\n    topScale === undefined;\n\n  const isTickRotated = topConfig?.tickLabelLayout === 'vertical';\n\n  const handlePan = useApplyPanDelta();\n\n  useGesture(\n    {\n      onDrag: (e) =>\n        KEYBOARD_HANDLERS.includes(e.type) ? null : handlePan(-e.delta[0]),\n    },\n    {\n      target: axisRef,\n      eventOptions: { passive: false },\n      drag: { filterTaps: true, pointer: { buttons: [1, 4] } },\n      enabled: canPan,\n    },\n  );\n\n  const tickNameHasEmoji = topTicks.ticks.some((name) =>\n    EMOJI_REGEX.test(name),\n  );\n\n  return hideAxis ? null : (\n    <ChartGrid.GridArea gridArea={AREAS.topAxis}>\n      {({ availableWidth, availableHeight }) => (\n        <div\n          className={clsx(\n            cursorStyle({ isPanEnabled: canPan }),\n            axisContainerStyle,\n          )}\n          ref={axisRef}\n        >\n          {canPan && (\n            <XYChartPanningControls\n              visibleAxis={topConfig}\n              onClickPan={(delta) => handlePan(-delta)}\n            />\n          )}\n          <DivAxisWrapper\n            divAxisStyle={axisFontProps}\n            ticks={topTicks.formattedTicks}\n            label={topConfig.label}\n            isTickVertical\n            isTickRotated={isTickRotated}\n          >\n            <AxisTop\n              role=\"group\"\n              aria-label={XY_CHART_TOP_AXIS_LABEL}\n              scale={topScale}\n              containerSize={availableWidth}\n              height={availableHeight}\n              tickValues={topTicks.ticks}\n              tickLabelProps={tickLabelProps}\n              tickFormat={tickFormat}\n              label={topConfig.label}\n              tickComponent={(renderProps) => (\n                <XTickWithTruncation\n                  renderProps={renderProps}\n                  maxSpaceForTruncation={getXTickMaxSize(\n                    availableHeight,\n                    availableWidth,\n                    isTickRotated,\n                    topScale,\n                    topConfig.label,\n                  )}\n                  centerTick={isCategoricalAxis}\n                  isTickRotated={isTickRotated}\n                  position=\"top\"\n                  tickNameHasEmoji={tickNameHasEmoji}\n                />\n              )}\n            />\n          </DivAxisWrapper>\n        </div>\n      )}\n    </ChartGrid.GridArea>\n  );\n}\n\nXYChartTopAxisArea['displayName'] = 'XYChartTopAxisArea';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport type { NumberValue, ScaleBand } from 'd3-scale';\nimport { useRef } from 'react';\n\nimport { axisContainerStyle } from './AxisArea.sty.js';\nimport { computeCollisionAwareMaxSpace } from './utils/compute-collision-aware-max-space.js';\nimport { isAxisPannable } from './utils/is-axis-pannable.js';\nimport { XTickWithTruncation } from './XTickWithTruncation.js';\nimport { XYChartPanningControls } from './XYChartPanningControls.js';\nimport { AxisTop } from '../../../core/components/axes/AxisTop.js';\nimport { DivAxisWrapper } from '../../../core/components/axes/components/DivAxisWrapper.js';\nimport {\n  axisFontProps,\n  EMOJI_REGEX,\n} from '../../../core/components/axes/constants.js';\nimport { getXTickMaxSize } from '../../../core/components/axes/utils/calculate-axis-size.js';\nimport { getXAxisTickLabelProps } from '../../../core/components/axes/utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../../../core/components/axes/utils/is-tick-label-visible.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { KEYBOARD_HANDLERS } from '../../../core/components/zoom/constants.js';\nimport { cursorStyle } from '../../../core/components/zoom/ZoomCursors.sty.js';\nimport { XY_CHART_TOP_AXIS_LABEL } from '../../constants/defaults.js';\nimport { useAxesTicks } from '../../hooks/useAxesTicks.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { isCategorical } from '../../types/guards.js';\nimport { AREAS } from '../../utils/grid-templates.js';\nimport { useApplyPanDelta } from '../overlay/hooks/useApplyPanDelta.js';\n\nexport function XYChartTopAxisArea() {\n  const axisRef = useRef<HTMLDivElement>(null);\n\n  const { topTicks } = useAxesTicks();\n  const { top: topConfig } = useVisibleAxesConfig();\n  const { top: topScale } = useVisibleAxesScales();\n\n  const scales = useXYChartScales();\n\n  const canPan = isAxisPannable(topConfig, scales);\n\n  const tickFormat = (_: unknown, index: number) =>\n    topTicks.formattedTicks[index];\n\n  const isCategoricalAxis = topConfig?.type\n    ? isCategorical(topConfig.type)\n    : false;\n  const isTickRotated = topConfig?.tickLabelLayout === 'vertical';\n  const tickLabelProps = getXAxisTickLabelProps(\n    'top',\n    isCategoricalAxis,\n    isTickRotated,\n    topScale,\n    topConfig?.tickLabelLayout,\n  );\n\n  const areCategoricalTicksNotFittable =\n    topScale &&\n    isCategoricalAxis &&\n    !isTickLabelSpaceAvailable((topScale as ScaleBand<string>).step());\n\n  const hideAxis =\n    topConfig === undefined ||\n    areCategoricalTicksNotFittable ||\n    topScale === undefined;\n\n  const handlePan = useApplyPanDelta();\n\n  useGesture(\n    {\n      onDrag: (e) =>\n        KEYBOARD_HANDLERS.includes(e.type) ? null : handlePan(-e.delta[0]),\n    },\n    {\n      target: axisRef,\n      eventOptions: { passive: false },\n      drag: { filterTaps: true, pointer: { buttons: [1, 4] } },\n      enabled: canPan,\n    },\n  );\n\n  const tickNameHasEmoji = topTicks.ticks.some((name) =>\n    EMOJI_REGEX.test(name),\n  );\n\n  return hideAxis ? null : (\n    <ChartGrid.GridArea gridArea={AREAS.topAxis}>\n      {({ availableWidth, availableHeight }) => {\n        const maxSpaceForTruncation = computeCollisionAwareMaxSpace(\n          getXTickMaxSize(\n            availableHeight,\n            availableWidth,\n            isTickRotated,\n            topScale,\n            topConfig.label,\n            topTicks.ticks.length,\n          ),\n          topTicks.formattedTicks,\n          topTicks.ticks as unknown as NumberValue[],\n          topScale,\n          isCategoricalAxis,\n          isTickRotated,\n        );\n\n        return (\n          <div\n            className={clsx(\n              cursorStyle({ isPanEnabled: canPan }),\n              axisContainerStyle,\n            )}\n            ref={axisRef}\n          >\n            {canPan && (\n              <XYChartPanningControls\n                visibleAxis={topConfig}\n                onClickPan={(delta) => handlePan(-delta)}\n              />\n            )}\n            <DivAxisWrapper\n              divAxisStyle={axisFontProps}\n              ticks={topTicks.formattedTicks}\n              label={topConfig.label}\n              isTickVertical\n              isTickRotated={isTickRotated}\n            >\n              <AxisTop\n                role=\"group\"\n                aria-label={XY_CHART_TOP_AXIS_LABEL}\n                scale={topScale}\n                containerSize={availableWidth}\n                height={availableHeight}\n                tickValues={topTicks.ticks}\n                tickLabelProps={tickLabelProps}\n                tickFormat={tickFormat}\n                label={topConfig.label}\n                tickComponent={(renderProps) => (\n                  <XTickWithTruncation\n                    renderProps={renderProps}\n                    maxSpaceForTruncation={maxSpaceForTruncation}\n                    centerTick={isCategoricalAxis}\n                    isTickRotated={isTickRotated}\n                    position=\"top\"\n                    tickNameHasEmoji={tickNameHasEmoji}\n                  />\n                )}\n              />\n            </DivAxisWrapper>\n          </div>\n        );\n      }}\n    </ChartGrid.GridArea>\n  );\n}\n\nXYChartTopAxisArea['displayName'] = 'XYChartTopAxisArea';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/utils/compute-collision-aware-max-space.js

@@ -0,0 +1,35 @@
+import { isBandScale } from "../../../../core/utils/detect-scale.js";
+import {
+  hasHorizontalLabelCollision,
+  TICK_LABEL_GAP_PX
+} from "../../../../core/utils/has-horizontal-label-collision.js";
+function computeCollisionAwareMaxSpace(baseMax, formattedTicks, rawTicks, scale, isCategoricalAxis, isTickRotated) {
+  if (isCategoricalAxis || isTickRotated || rawTicks.length !== 2 || !scale || isBandScale(scale)) {
+    return baseMax;
+  }
+  const continuousScale = scale;
+  const domain = continuousScale.domain();
+  const domainBounds = [+domain[0], +domain[1]];
+  if (!hasHorizontalLabelCollision(
+    formattedTicks,
+    rawTicks,
+    continuousScale,
+    domainBounds
+  )) {
+    return baseMax;
+  }
+  const pos0 = continuousScale(rawTicks[0]);
+  const pos1 = continuousScale(rawTicks[1]);
+  const pixelGap = pos1 - pos0;
+  const t0IsStart = +rawTicks[0] === domainBounds[0];
+  const t1IsEnd = +rawTicks[1] === domainBounds[1];
+  const bothAtDomainEdges = t0IsStart && t1IsEnd;
+  const oneAtDomainEdge = t0IsStart || t1IsEnd;
+  const gapAfterPadding = pixelGap - TICK_LABEL_GAP_PX;
+  const tighterMax = bothAtDomainEdges ? gapAfterPadding / 2 : oneAtDomainEdge ? 2 * gapAfterPadding / 3 : gapAfterPadding;
+  return Math.max(tighterMax, 0);
+}
+export {
+  computeCollisionAwareMaxSpace
+};
+//# sourceMappingURL=compute-collision-aware-max-space.js.map

package/esm/charts/xy-chart/components/axes/utils/compute-collision-aware-max-space.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/xy-chart/components/axes/utils/compute-collision-aware-max-space.ts"],
+  "sourcesContent": ["import type { NumberValue } from 'd3-scale';\n\nimport type { AnyScale } from '../../../../core/types/scales.js';\nimport { isBandScale } from '../../../../core/utils/detect-scale.js';\nimport {\n  hasHorizontalLabelCollision,\n  type ContinuousScale,\n  TICK_LABEL_GAP_PX,\n} from '../../../../core/utils/has-horizontal-label-collision.js';\n\n/**\n * Applies collision-aware clamping to a tick-label truncation budget.\n *\n * When exactly two continuous-scale ticks collide, this function shrinks\n * `baseMax` so that each label only occupies its fair share of the pixel gap\n * between the two tick positions. The share depends on domain-boundary\n * alignment: a boundary-anchored label uses less space than a centered one.\n *\n * Returns `baseMax` unchanged whenever the conditions for collision detection\n * are not met (categorical, rotated, \u22602 ticks, band scale, or no collision).\n */\nexport function computeCollisionAwareMaxSpace(\n  baseMax: number,\n  formattedTicks: string[],\n  rawTicks: NumberValue[],\n  scale: AnyScale | undefined,\n  isCategoricalAxis: boolean,\n  isTickRotated: boolean,\n): number {\n  if (\n    isCategoricalAxis ||\n    isTickRotated ||\n    rawTicks.length !== 2 ||\n    !scale ||\n    isBandScale(scale)\n  ) {\n    return baseMax;\n  }\n\n  const continuousScale = scale as unknown as ContinuousScale;\n  const domain = continuousScale.domain() as [number | Date, number | Date];\n  const domainBounds: [number, number] = [+domain[0], +domain[1]];\n\n  if (\n    !hasHorizontalLabelCollision(\n      formattedTicks,\n      rawTicks,\n      continuousScale,\n      domainBounds,\n    )\n  ) {\n    return baseMax;\n  }\n\n  const pos0 = continuousScale(rawTicks[0]);\n  const pos1 = continuousScale(rawTicks[1]);\n  const pixelGap = pos1 - pos0;\n\n  const t0IsStart = +rawTicks[0] === domainBounds[0];\n  const t1IsEnd = +rawTicks[1] === domainBounds[1];\n\n  const bothAtDomainEdges = t0IsStart && t1IsEnd;\n  const oneAtDomainEdge = t0IsStart || t1IsEnd;\n\n  const gapAfterPadding = pixelGap - TICK_LABEL_GAP_PX;\n\n  const tighterMax = bothAtDomainEdges\n    ? gapAfterPadding / 2\n    : oneAtDomainEdge\n    ? (2 * gapAfterPadding) / 3\n    : gapAfterPadding;\n\n  return Math.max(tighterMax, 0);\n}\n"],
+  "mappings": "AAGA,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AAaA,SAAS,8BACd,SACA,gBACA,UACA,OACA,mBACA,eACQ;AACR,MACE,qBACA,iBACA,SAAS,WAAW,KACpB,CAAC,SACD,YAAY,KAAK,GACjB;AACA,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB;AACxB,QAAM,SAAS,gBAAgB,OAAO;AACtC,QAAM,eAAiC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAE9D,MACE,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA;AACA,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,gBAAgB,SAAS,CAAC,CAAC;AACxC,QAAM,OAAO,gBAAgB,SAAS,CAAC,CAAC;AACxC,QAAM,WAAW,OAAO;AAExB,QAAM,YAAY,CAAC,SAAS,CAAC,MAAM,aAAa,CAAC;AACjD,QAAM,UAAU,CAAC,SAAS,CAAC,MAAM,aAAa,CAAC;AAE/C,QAAM,oBAAoB,aAAa;AACvC,QAAM,kBAAkB,aAAa;AAErC,QAAM,kBAAkB,WAAW;AAEnC,QAAM,aAAa,oBACf,kBAAkB,IAClB,kBACC,IAAI,kBAAmB,IACxB;AAEJ,SAAO,KAAK,IAAI,YAAY,CAAC;AAC/B;",
+  "names": []
+}

package/esm/charts/xy-chart/components/displays/{BarDisplay.js → BarDisplay/BarDisplay.js}

@@ -1,19 +1,22 @@
 import { jsx } from "react/jsx-runtime";
+import { BarCanvas } from "../../../../core/components/canvas/components/BarCanvas.js";
+import { useGridPlotSize } from "../../../../core/components/chart-grid/hooks/useGridPlotSize.js";
+import { POINT_OVERLAY_PADDING } from "../../../../core/components/data-point/constants.js";
+import { DEFAULT_FILL_OPACITY } from "../../../../core/constants.js";
+import { safeGet } from "../../../../core/utils/safe-get.js";
+import { useBarData } from "../../../hooks/useBarData.js";
+import { useXYChartData } from "../../../hooks/useXYChartData.js";
+import {
+  getCurrentScale,
+  getDimensionScale
+} from "../../../utils/get-scale.js";
+import { relAccessor } from "../../../utils/value-representation.js";
 import {
   heightAccessor,
   widthAccessor,
   xAccessor,
   yAccessor
-} from "./bar-accessors.js";
-import { BarCanvas } from "../../../core/components/canvas/components/BarCanvas.js";
-import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
-import { POINT_OVERLAY_PADDING } from "../../../core/components/data-point/constants.js";
-import { DEFAULT_FILL_OPACITY } from "../../../core/constants.js";
-import { safeGet } from "../../../core/utils/safe-get.js";
-import { useBarData } from "../../hooks/useBarData.js";
-import { useXYChartData } from "../../hooks/useXYChartData.js";
-import { getCurrentScale, getDimensionScale } from "../../utils/get-scale.js";
-import { relAccessor } from "../../utils/value-representation.js";
+} from "../bar-accessors.js";
 function isXBaselineAccessor(datapoint) {
   return !!datapoint && datapoint.x0 !== void 0;
 }

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/xy-chart/components/displays/BarDisplay/BarDisplay.tsx"],
+  "sourcesContent": ["import { BarCanvas } from '../../../../core/components/canvas/components/BarCanvas.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../../core/constants.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { AxisIdToScales } from '../../../context/XYChartScales.context.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport type {\n  BarMetadata,\n  BarSeriesWithDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { type BarDatapoint } from '../../../types/xy-chart.js';\nimport {\n  getCurrentScale,\n  getDimensionScale,\n} from '../../../utils/get-scale.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport {\n  heightAccessor,\n  widthAccessor,\n  xAccessor,\n  yAccessor,\n} from '../bar-accessors.js';\n\ninterface BarDisplayProps {\n  axisIdToScales: AxisIdToScales;\n  series: BarSeriesWithDatapoints;\n  metadata: BarMetadata;\n}\n\n// `BarDisplay` registers paint operations against the shared chart <Canvas>\n// via context and returns null. The HTML bar labels are rendered in a sibling\n// layer by `BarLabelLayout` because children of <canvas> are fallback content,\n// not visible DOM siblings \u2014 see ./BarLabelLayout.tsx for the chart-level\n// wrapper that pairs with this display.\n\nexport function isXBaselineAccessor(datapoint?: BarDatapoint): boolean {\n  return !!datapoint && datapoint.x0 !== undefined;\n}\n\nexport function isYBaselineAccessor(datapoint?: BarDatapoint): boolean {\n  return !!datapoint && datapoint.y0 !== undefined;\n}\n\nexport function BarDisplay({\n  axisIdToScales,\n  series,\n  metadata,\n}: Readonly<BarDisplayProps>) {\n  const { height, width } = useGridPlotSize();\n\n  const xScale = getCurrentScale(\n    axisIdToScales,\n    series.xAxisId,\n    isXBaselineAccessor(series.data[0]) ? series.type : undefined,\n  );\n  const dimensionXScale = getDimensionScale(axisIdToScales, series.xAxisId);\n  const yScale = getCurrentScale(\n    axisIdToScales,\n    series.yAxisId,\n    isYBaselineAccessor(series.data[0]) ? series.type : undefined,\n  );\n  const dimensionYScale = getDimensionScale(axisIdToScales, series.yAxisId);\n  const { color } = metadata;\n\n  const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();\n  const { seriesToMetadata } = useBarData();\n\n  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n\n  return (\n    <BarCanvas<BarDatapoint>\n      key={series.id}\n      data={series.data}\n      canvasHeight={height}\n      canvasWidth={width}\n      opacity={() => DEFAULT_FILL_OPACITY}\n      color={() => color.Default}\n      x={xAccessor(\n        xScale,\n        datapointMetadataMap,\n        dimensionXScale,\n        series.id,\n        relAccessor(xAxis, axisIdToScaleDomain),\n      )}\n      y={yAccessor(\n        yScale,\n        datapointMetadataMap,\n        dimensionYScale,\n        series.id,\n        relAccessor(yAxis, axisIdToScaleDomain),\n      )}\n      width={widthAccessor(\n        xScale,\n        datapointMetadataMap,\n        dimensionXScale,\n        relAccessor(xAxis, axisIdToScaleDomain),\n      )}\n      height={heightAccessor(\n        yScale,\n        datapointMetadataMap,\n        dimensionYScale,\n        relAccessor(yAxis, axisIdToScaleDomain),\n      )}\n      enableDotOverflow\n      overlayPadding={POINT_OVERLAY_PADDING}\n    />\n  );\n}\n\nBarDisplay['displayName'] = 'BarDisplay';\n"],
+  "mappings": "AAwEI;AAxEJ,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAM/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcA,SAAS,oBAAoB,WAAmC;AACrE,SAAO,CAAC,CAAC,aAAa,UAAU,OAAO;AACzC;AAEO,SAAS,oBAAoB,WAAmC;AACrE,SAAO,CAAC,CAAC,aAAa,UAAU,OAAO;AACzC;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAE1C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,OAAO;AAAA,IACP,oBAAoB,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,OAAO;AAAA,EACtD;AACA,QAAM,kBAAkB,kBAAkB,gBAAgB,OAAO,OAAO;AACxE,QAAM,SAAS;AAAA,IACb;AAAA,IACA,OAAO;AAAA,IACP,oBAAoB,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,OAAO;AAAA,EACtD;AACA,QAAM,kBAAkB,kBAAkB,gBAAgB,OAAO,OAAO;AACxE,QAAM,EAAE,MAAM,IAAI;AAElB,QAAM,EAAE,sBAAsB,oBAAoB,IAAI,eAAe;AACrE,QAAM,EAAE,iBAAiB,IAAI,WAAW;AAExC,QAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,kBAAkB,MAAM;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,OAAO;AAAA,MACb,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS,MAAM;AAAA,MACf,OAAO,MAAM,MAAM;AAAA,MACnB,GAAG;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,GAAG;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,OAAO,mBAAmB;AAAA,MACxC;AAAA,MACA,mBAAiB;AAAA,MACjB,gBAAgB;AAAA;AAAA,IAjCX,OAAO;AAAA,EAkCd;AAEJ;AAEA,WAAW,aAAa,IAAI;",
+  "names": []
+}

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

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { BarLabelOverlay } from "./BarLabelOverlay.js";
+import { plotLayout } from "../../../../core/components/chart-grid/ChartGrid.sty.js";
+import { zIndicesXYChartAreas } from "../../../constants/xy-chart-z-index-areas.js";
+import { useBarData } from "../../../hooks/useBarData.js";
+import { useXYChartScales } from "../../../hooks/useXYChartScales.js";
+function BarLabelLayout() {
+  const axisIdToScales = useXYChartScales();
+  const { filteredSeriesWithDatapoints, seriesToMetadata } = useBarData();
+  const labelSeries = filteredSeriesWithDatapoints.filter(
+    (s) => s.hasLabels === true
+  );
+  if (labelSeries.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: plotLayout,
+      style: {
+        zIndex: zIndicesXYChartAreas.plot + 1,
+        pointerEvents: "none"
+      },
+      children: labelSeries.map((series) => {
+        const metadata = seriesToMetadata.get(series);
+        if (!metadata) {
+          return null;
+        }
+        return /* @__PURE__ */ jsx(
+          BarLabelOverlay,
+          {
+            axisIdToScales,
+            series,
+            metadata
+          },
+          series.id
+        );
+      })
+    }
+  );
+}
+BarLabelLayout["displayName"] = "BarLabelLayout";
+export {
+  BarLabelLayout
+};
+//# sourceMappingURL=BarLabelLayout.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/xy-chart/components/displays/BarDisplay/BarLabelLayout.tsx"],
+  "sourcesContent": ["import { BarLabelOverlay } from './BarLabelOverlay.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { zIndicesXYChartAreas } from '../../../constants/xy-chart-z-index-areas.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\n\n/**\n * Chart-level wrapper that mounts the HTML bar labels for every bar series\n * with `hasLabels === true`. Rendered as a sibling of the canvas plot inside\n * `<ChartGrid.PlotArea>` because HTML cannot live inside `<canvas>` \u2014 see\n * `./BarDisplay.tsx` for the canvas-paint counterpart.\n */\nexport function BarLabelLayout() {\n  const axisIdToScales = useXYChartScales();\n  const { filteredSeriesWithDatapoints, seriesToMetadata } = useBarData();\n\n  const labelSeries = filteredSeriesWithDatapoints.filter(\n    (s) => s.hasLabels === true,\n  );\n\n  if (labelSeries.length === 0) {\n    return null;\n  }\n\n  // z-index above the canvas (`plot` layer) so the HTML labels render on top\n  // of the 0.8-opacity bar fills \u2014 otherwise the canvas paints over the\n  // labels and blends them with the bar color.\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 metadata = seriesToMetadata.get(series);\n        if (!metadata) {\n          return null;\n        }\n        return (\n          <BarLabelOverlay\n            key={series.id}\n            axisIdToScales={axisIdToScales}\n            series={series}\n            metadata={metadata}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nBarLabelLayout['displayName'] = 'BarLabelLayout';\n"],
+  "mappings": "AAyCU;AAzCV,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAQ1B,SAAS,iBAAiB;AAC/B,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,EAAE,8BAA8B,iBAAiB,IAAI,WAAW;AAEtE,QAAM,cAAc,6BAA6B;AAAA,IAC/C,CAAC,MAAM,EAAE,cAAc;AAAA,EACzB;AAEA,MAAI,YAAY,WAAW,GAAG;AAC5B,WAAO;AAAA,EACT;AAKA,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,WAAW,iBAAiB,IAAI,MAAM;AAC5C,YAAI,CAAC,UAAU;AACb,iBAAO;AAAA,QACT;AACA,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAHK,OAAO;AAAA,QAId;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,eAAe,aAAa,IAAI;",
+  "names": []
+}

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

@@ -0,0 +1,19 @@
+._b76tm80-3-6-0 {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+._b76tm81-3-6-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;
+}
+._b76tm82-3-6-0 {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+}

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

@@ -0,0 +1,150 @@
+import { jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import Colors from "@dynatrace/strato-design-tokens/colors";
+import { isXBaselineAccessor, isYBaselineAccessor } from "./BarDisplay.js";
+import { overlayContainer } from "./BarLabelOverlay.sty.js";
+import { HorizontalBarLabel } from "./HorizontalBarLabel.js";
+import { VerticalBarLabel } from "./VerticalBarLabel.js";
+import { getCanvasColor } from "../../../../core/components/canvas/utils/canvas-color.js";
+import { useGridPlotSize } from "../../../../core/components/chart-grid/hooks/useGridPlotSize.js";
+import { getColorByContrast } from "../../../../core/utils/color-contrast.js";
+import { safeGet } from "../../../../core/utils/safe-get.js";
+import { useBarData } from "../../../hooks/useBarData.js";
+import { useXYChartData } from "../../../hooks/useXYChartData.js";
+import { useXYChartTruncationMode } from "../../../hooks/useXYChartTruncationMode.js";
+import { XYAxisTypeCategorical } from "../../../types/axis.js";
+import {
+  getCurrentScale,
+  getDimensionScale
+} from "../../../utils/get-scale.js";
+import { relAccessor } from "../../../utils/value-representation.js";
+import {
+  heightAccessor,
+  widthAccessor,
+  xAccessor,
+  yAccessor
+} from "../bar-accessors.js";
+function filterToScaleDomain(data, scale, isVertical) {
+  const domainFn = scale?.domain;
+  if (typeof domainFn !== "function") {
+    return data;
+  }
+  const domain = domainFn.call(scale);
+  if (!Array.isArray(domain)) {
+    return data;
+  }
+  const allowed = new Set(domain);
+  return data.filter((d) => {
+    const key = isVertical ? d.x0 : d.y0;
+    return typeof key === "string" ? allowed.has(key) : true;
+  });
+}
+function BarLabelOverlay({
+  axisIdToScales,
+  series,
+  metadata
+}) {
+  const { width: canvasWidth, height: canvasHeight } = useGridPlotSize();
+  const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();
+  const { seriesToMetadata } = useBarData();
+  const { truncationMode } = useXYChartTruncationMode();
+  if (!series.hasLabels) {
+    return null;
+  }
+  const xScale = getCurrentScale(
+    axisIdToScales,
+    series.xAxisId,
+    isXBaselineAccessor(series.data[0]) ? series.type : void 0
+  );
+  const dimensionXScale = getDimensionScale(axisIdToScales, series.xAxisId);
+  const yScale = getCurrentScale(
+    axisIdToScales,
+    series.yAxisId,
+    isYBaselineAccessor(series.data[0]) ? series.type : void 0
+  );
+  const dimensionYScale = getDimensionScale(axisIdToScales, series.yAxisId);
+  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);
+  const isVertical = xAxis.type === XYAxisTypeCategorical;
+  const isRTL = !isVertical && Boolean(xAxis.reversed);
+  const isTTB = isVertical && Boolean(yAxis.reversed);
+  const xFn = xAccessor(
+    xScale,
+    datapointMetadataMap,
+    dimensionXScale,
+    series.id,
+    relAccessor(xAxis, axisIdToScaleDomain)
+  );
+  const yFn = yAccessor(
+    yScale,
+    datapointMetadataMap,
+    dimensionYScale,
+    series.id,
+    relAccessor(yAxis, axisIdToScaleDomain)
+  );
+  const wFn = widthAccessor(
+    xScale,
+    datapointMetadataMap,
+    dimensionXScale,
+    relAccessor(xAxis, axisIdToScaleDomain)
+  );
+  const hFn = heightAccessor(
+    yScale,
+    datapointMetadataMap,
+    dimensionYScale,
+    relAccessor(yAxis, axisIdToScaleDomain)
+  );
+  const fillHex = getCanvasColor(metadata.color.Default);
+  const insideColor = getColorByContrast(fillHex);
+  const outsideColor = Colors.Text.Neutral.Default;
+  const data = filterToScaleDomain(
+    series.data,
+    isVertical ? xScale : yScale,
+    isVertical
+  );
+  return /* @__PURE__ */ jsx("div", { className: overlayContainer, children: data.map((datum, index) => {
+    const text = datum.label;
+    if (!text) {
+      return null;
+    }
+    const x = xFn(datum);
+    const y = yFn(datum);
+    const w = wFn(datum);
+    const h = hFn(datum);
+    const barWidth = Math.abs(w);
+    const barHeight = Math.abs(h);
+    return /* @__PURE__ */ jsx(Fragment, { children: isVertical ? /* @__PURE__ */ jsx(
+      VerticalBarLabel,
+      {
+        x,
+        y,
+        barWidth,
+        barHeight,
+        canvasHeight,
+        isReversed: isTTB,
+        text,
+        insideColor,
+        outsideColor,
+        truncationMode
+      }
+    ) : /* @__PURE__ */ jsx(
+      HorizontalBarLabel,
+      {
+        x,
+        y,
+        barWidth,
+        barHeight,
+        canvasWidth,
+        isReversed: isRTL,
+        text,
+        insideColor,
+        outsideColor,
+        truncationMode
+      }
+    ) }, index);
+  }) });
+}
+BarLabelOverlay["displayName"] = "BarLabelOverlay";
+export {
+  BarLabelOverlay
+};
+//# sourceMappingURL=BarLabelOverlay.js.map