@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/charts/gauge/components/GaugeLabel/GaugeLabel.css

@@ -1,22 +1,22 @@
-._18ourc20-3-7-1 {
+._18ourc20-3-9-0 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-7-1 {
+._18ourc21-3-9-0 {
   width: fit-content;
 }
-._18ourc22-3-7-1 {
+._18ourc22-3-9-0 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-7-1 {
+._18ourc23-3-9-0 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-7-1 {
+._18ourc24-3-9-0 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-7-1 {
+  ._18ourc24-3-9-0 {
     display: block;
   }
 }

package/esm/charts/gauge/components/GaugeLabel/GaugeLabel.sty.js

@@ -1,8 +1,8 @@
 import "./GaugeLabel.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var elementLabelWrapper = "_18ourc20-3-7-1";
-var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-7-1", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-7-1", hanging: "_18ourc23-3-7-1" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
-var textContainer = "_18ourc24-3-7-1";
+var elementLabelWrapper = "_18ourc20-3-9-0";
+var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-9-0", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-9-0", hanging: "_18ourc23-3-9-0" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
+var textContainer = "_18ourc24-3-9-0";
 export {
   elementLabelWrapper,
   foreignObjectContainer,

package/esm/charts/gauge/components/GaugeLabel/GaugeLabel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLabel/GaugeLabel.css.ts"],
-  "sourcesContent": ["import './GaugeLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementLabelWrapper = '_18ourc20-3-7-1';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-7-1',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-7-1',hanging:'_18ourc23-3-7-1'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-7-1';"],
+  "sourcesContent": ["import './GaugeLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementLabelWrapper = '_18ourc20-3-9-0';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-9-0',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-9-0',hanging:'_18ourc23-3-9-0'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB;AAC1B,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,kBAAiB,EAAC,MAAK,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,kBAAiB,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjO,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.css

@@ -1,4 +1,4 @@
-._1fbjcz30-3-7-1 {
+._1fbjcz30-3-9-0 {
   display: grid;
   grid-template-columns: 1fr;
   grid-template: "valueLabel" 2fr
@@ -7,9 +7,9 @@
   width: 100%;
   height: 100%;
 }
-._1fbjcz30-3-7-1 > #value-label {
+._1fbjcz30-3-9-0 > #value-label {
   grid-area: valueLabel;
 }
-._1fbjcz30-3-7-1 > #label {
+._1fbjcz30-3-9-0 > #label {
   grid-area: label;
 }

package/esm/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.sty.js

@@ -1,5 +1,5 @@
 import "./GaugeLabelsWrapper.css";
-var labelsContainer = "_1fbjcz30-3-7-1";
+var labelsContainer = "_1fbjcz30-3-9-0";
 export {
   labelsContainer
 };

package/esm/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.css.ts"],
-  "sourcesContent": ["import './GaugeLabelsWrapper.css';\nexport var labelsContainer = '_1fbjcz30-3-7-1';"],
+  "sourcesContent": ["import './GaugeLabelsWrapper.css';\nexport var labelsContainer = '_1fbjcz30-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.css

@@ -1,17 +1,17 @@
-._l0e5zm0-3-7-1 {
+._l0e5zm0-3-9-0 {
   position: relative;
   height: 100%;
   z-index: 0;
 }
-._l0e5zm1-3-7-1 {
+._l0e5zm1-3-9-0 {
   cursor: default;
   user-select: none;
 }
-._l0e5zm2-3-7-1 {
+._l0e5zm2-3-9-0 {
   position: absolute;
   z-index: 1;
 }
-._l0e5zm3-3-7-1 {
+._l0e5zm3-3-9-0 {
   top: 0;
   left: 0;
   width: 100%;

package/esm/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.js

@@ -1,4 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useRef
+} from "react";
 import {
   container,
   tooltipOverlay,
@@ -9,18 +12,40 @@ import { Flex } from "../../../../layouts/flex/Flex.js";
 import { LoaderOverlay } from "../../../core/components/loader-overlay/LoaderOverlay.js";
 import { useOverlay } from "../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
 import { useTooltipActions } from "../../../core/components/overlay-tooltip/useTooltipActions.js";
+import { useToolbarHandlerRef } from "../../../core/components/toolbar/hooks/useToolbarHandlerRef.js";
+import {
+  ARC_INNER_RADIUS_PERCENTAGE,
+  ARC_OUTER_RADIUS_PERCENTAGE
+} from "../../constants.js";
 import { useGaugeChartTooltip } from "../../contexts/GaugeChartTooltipContext.js";
 import { useGaugeChartTooltipOverlayBounds } from "../../hooks/useGaugeChartTooltipOverlayBounds.js";
+import { isInGaugeHitArea } from "../../utils/is-in-gauge-hit-area.js";
 import {
   GaugeChartToolbar
 } from "../GaugeChartLayout/GaugeChartToolbar.js";
 import { GaugeOverlayTooltip } from "../GaugeChartTooltip/GaugeOverlayTooltip.js";
+const isPointerEventInHitArea = (event, overlayBounds) => {
+  if (!overlayBounds) {
+    return true;
+  }
+  const rect = event.currentTarget.getBoundingClientRect();
+  const arcOuterRadius = overlayBounds.width / 2;
+  const arcInnerRadius = arcOuterRadius * (ARC_INNER_RADIUS_PERCENTAGE / ARC_OUTER_RADIUS_PERCENTAGE);
+  return isInGaugeHitArea(
+    event.clientX - rect.left - arcOuterRadius,
+    event.clientY - rect.top - arcOuterRadius,
+    arcOuterRadius,
+    arcInnerRadius
+  );
+};
 const GaugeChartOverlay = (props) => {
   const { children, value, color, intents, toolbar, showLoading } = props;
   const overlay = useOverlay();
   const overlayBounds = useGaugeChartTooltipOverlayBounds();
   const { name: tooltipName, hidden: tooltipHidden } = useGaugeChartTooltip();
   const { hover, togglePin, outOfBounds } = useTooltipActions();
+  const toolbarHandlerRef = useToolbarHandlerRef();
+  const isTouchInteractionRef = useRef(false);
   const data = {
     geometry: "meterbar",
     series: [{ name: tooltipName ?? "Value", value, color }]
@@ -32,6 +57,26 @@ const GaugeChartOverlay = (props) => {
     width: overlayBounds.width,
     height: overlayBounds.height
   } : void 0;
+  const handleClick = (event) => {
+    if (isTouchInteractionRef.current || event.target !== event.currentTarget || !isPointerEventInHitArea(event, overlayBounds)) {
+      return;
+    }
+    togglePin(event, data);
+  };
+  const handlePointerMove = (event) => {
+    if (event.target === event.currentTarget && !isPointerEventInHitArea(event, overlayBounds)) {
+      outOfBounds();
+      return;
+    }
+    hover(event, data);
+  };
+  const handlePointerDown = (event) => {
+    isTouchInteractionRef.current = event.pointerType === "touch";
+    toolbarHandlerRef.current.handleFocus();
+    if (isTouchInteractionRef.current && event.target === event.currentTarget && isPointerEventInHitArea(event, overlayBounds)) {
+      togglePin(event, data);
+    }
+  };
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -39,14 +84,22 @@ const GaugeChartOverlay = (props) => {
       "data-testid": "gauge-overlay-wrapper",
       className: container({ showLoading }),
       children: [
-        /* @__PURE__ */ jsx(GaugeChartToolbar, { intents, toolbar }),
+        /* @__PURE__ */ jsx(
+          GaugeChartToolbar,
+          {
+            intents,
+            toolbar,
+            handlerRef: toolbarHandlerRef
+          }
+        ),
         !showLoading && /* @__PURE__ */ jsx(
           Flex,
           {
             className: overlayClassName,
-            onPointerMove: (event) => hover(event, data),
+            onPointerMove: handlePointerMove,
             onPointerLeave: outOfBounds,
-            onClick: (event) => togglePin(event, data),
+            onClick: handleClick,
+            onPointerDown: handlePointerDown,
             style: overlayStyle,
             children: !tooltipHidden && /* @__PURE__ */ jsx(GaugeOverlayTooltip, { value, color })
           }

package/esm/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport {\n  container,\n  tooltipOverlay,\n  tooltipOverlayFull,\n  consumerLoadingStyle,\n} from './GaugeLayoutOverlay.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { LoaderOverlay } from '../../../core/components/loader-overlay/LoaderOverlay.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useTooltipActions } from '../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { useGaugeChartTooltip } from '../../contexts/GaugeChartTooltipContext.js';\nimport { useGaugeChartTooltipOverlayBounds } from '../../hooks/useGaugeChartTooltipOverlayBounds.js';\nimport {\n  GaugeChartToolbar,\n  type GaugeChartToolbarProps,\n} from '../GaugeChartLayout/GaugeChartToolbar.js';\nimport { GaugeOverlayTooltip } from '../GaugeChartTooltip/GaugeOverlayTooltip.js';\n\ninterface GaugeChartOverlayProps {\n  value: number;\n  color: string;\n  showLoading?: boolean;\n  intents: GaugeChartToolbarProps['intents'];\n  toolbar: GaugeChartToolbarProps['toolbar'];\n}\n\nexport const GaugeChartOverlay = (\n  props: PropsWithChildren<GaugeChartOverlayProps>,\n) => {\n  const { children, value, color, intents, toolbar, showLoading } = props;\n  const overlay = useOverlay();\n  const overlayBounds = useGaugeChartTooltipOverlayBounds();\n  const { name: tooltipName, hidden: tooltipHidden } = useGaugeChartTooltip();\n  const { hover, togglePin, outOfBounds } = useTooltipActions();\n\n  const data = {\n    geometry: 'meterbar' as const,\n    series: [{ name: tooltipName ?? 'Value', value, color }],\n  };\n\n  const overlayClassName = overlayBounds\n    ? tooltipOverlay\n    : `${tooltipOverlay} ${tooltipOverlayFull}`;\n  const overlayStyle = overlayBounds\n    ? {\n        top: overlayBounds.top,\n        left: overlayBounds.left,\n        width: overlayBounds.width,\n        height: overlayBounds.height,\n      }\n    : undefined;\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      data-testid=\"gauge-overlay-wrapper\"\n      className={container({ showLoading })}\n    >\n      <GaugeChartToolbar intents={intents} toolbar={toolbar} />\n\n      {!showLoading && (\n        <Flex\n          className={overlayClassName}\n          onPointerMove={(event) => hover(event, data)}\n          onPointerLeave={outOfBounds}\n          onClick={(event) => togglePin(event, data)}\n          style={overlayStyle}\n        >\n          {!tooltipHidden && (\n            <GaugeOverlayTooltip value={value} color={color} />\n          )}\n        </Flex>\n      )}\n\n      {children}\n      {showLoading ? (\n        <LoaderOverlay\n          gridArea=\"1/1/2/2\"\n          consumerStyle={consumerLoadingStyle}\n        />\n      ) : null}\n    </Flex>\n  );\n};\n\nGaugeChartOverlay['displayName'] = 'GaugeChartOverlay';\n"],
-  "mappings": "AAuDI,SAKE,KALF;AArDJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,yCAAyC;AAClD;AAAA,EACE;AAAA,OAEK;AACP,SAAS,2BAA2B;AAU7B,MAAM,oBAAoB,CAC/B,UACG;AACH,QAAM,EAAE,UAAU,OAAO,OAAO,SAAS,SAAS,YAAY,IAAI;AAClE,QAAM,UAAU,WAAW;AAC3B,QAAM,gBAAgB,kCAAkC;AACxD,QAAM,EAAE,MAAM,aAAa,QAAQ,cAAc,IAAI,qBAAqB;AAC1E,QAAM,EAAE,OAAO,WAAW,YAAY,IAAI,kBAAkB;AAE5D,QAAM,OAAO;AAAA,IACX,UAAU;AAAA,IACV,QAAQ,CAAC,EAAE,MAAM,eAAe,SAAS,OAAO,MAAM,CAAC;AAAA,EACzD;AAEA,QAAM,mBAAmB,gBACrB,iBACA,GAAG,cAAc,IAAI,kBAAkB;AAC3C,QAAM,eAAe,gBACjB;AAAA,IACE,KAAK,cAAc;AAAA,IACnB,MAAM,cAAc;AAAA,IACpB,OAAO,cAAc;AAAA,IACrB,QAAQ,cAAc;AAAA,EACxB,IACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,eAAY;AAAA,MACZ,WAAW,UAAU,EAAE,YAAY,CAAC;AAAA,MAEpC;AAAA,4BAAC,qBAAkB,SAAkB,SAAkB;AAAA,QAEtD,CAAC,eACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,eAAe,CAAC,UAAU,MAAM,OAAO,IAAI;AAAA,YAC3C,gBAAgB;AAAA,YAChB,SAAS,CAAC,UAAU,UAAU,OAAO,IAAI;AAAA,YACzC,OAAO;AAAA,YAEN,WAAC,iBACA,oBAAC,uBAAoB,OAAc,OAAc;AAAA;AAAA,QAErD;AAAA,QAGD;AAAA,QACA,cACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,eAAe;AAAA;AAAA,QACjB,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;AAEA,kBAAkB,aAAa,IAAI;",
+  "sourcesContent": ["import {\n  useRef,\n  type PropsWithChildren,\n  type MouseEvent,\n  type PointerEvent,\n} from 'react';\n\nimport {\n  container,\n  tooltipOverlay,\n  tooltipOverlayFull,\n  consumerLoadingStyle,\n} from './GaugeLayoutOverlay.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { LoaderOverlay } from '../../../core/components/loader-overlay/LoaderOverlay.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useTooltipActions } from '../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport {\n  ARC_INNER_RADIUS_PERCENTAGE,\n  ARC_OUTER_RADIUS_PERCENTAGE,\n} from '../../constants.js';\nimport { useGaugeChartTooltip } from '../../contexts/GaugeChartTooltipContext.js';\nimport { useGaugeChartTooltipOverlayBounds } from '../../hooks/useGaugeChartTooltipOverlayBounds.js';\nimport { isInGaugeHitArea } from '../../utils/is-in-gauge-hit-area.js';\nimport {\n  GaugeChartToolbar,\n  type GaugeChartToolbarProps,\n} from '../GaugeChartLayout/GaugeChartToolbar.js';\nimport { GaugeOverlayTooltip } from '../GaugeChartTooltip/GaugeOverlayTooltip.js';\n\nconst isPointerEventInHitArea = (\n  event: MouseEvent<HTMLDivElement>,\n  overlayBounds: { width: number } | undefined,\n): boolean => {\n  if (!overlayBounds) {\n    return true;\n  }\n  const rect = event.currentTarget.getBoundingClientRect();\n  const arcOuterRadius = overlayBounds.width / 2;\n  const arcInnerRadius =\n    arcOuterRadius *\n    (ARC_INNER_RADIUS_PERCENTAGE / ARC_OUTER_RADIUS_PERCENTAGE);\n  return isInGaugeHitArea(\n    event.clientX - rect.left - arcOuterRadius,\n    event.clientY - rect.top - arcOuterRadius,\n    arcOuterRadius,\n    arcInnerRadius,\n  );\n};\n\ninterface GaugeChartOverlayProps {\n  value: number;\n  color: string;\n  showLoading?: boolean;\n  intents: GaugeChartToolbarProps['intents'];\n  toolbar: GaugeChartToolbarProps['toolbar'];\n}\n\nexport const GaugeChartOverlay = (\n  props: PropsWithChildren<GaugeChartOverlayProps>,\n) => {\n  const { children, value, color, intents, toolbar, showLoading } = props;\n  const overlay = useOverlay();\n  const overlayBounds = useGaugeChartTooltipOverlayBounds();\n  const { name: tooltipName, hidden: tooltipHidden } = useGaugeChartTooltip();\n  const { hover, togglePin, outOfBounds } = useTooltipActions();\n  const toolbarHandlerRef = useToolbarHandlerRef();\n  const isTouchInteractionRef = useRef(false);\n\n  const data = {\n    geometry: 'meterbar' as const,\n    series: [{ name: tooltipName ?? 'Value', value, color }],\n  };\n\n  const overlayClassName = overlayBounds\n    ? tooltipOverlay\n    : `${tooltipOverlay} ${tooltipOverlayFull}`;\n  const overlayStyle = overlayBounds\n    ? {\n        top: overlayBounds.top,\n        left: overlayBounds.left,\n        width: overlayBounds.width,\n        height: overlayBounds.height,\n      }\n    : undefined;\n\n  const handleClick = (\n    event: MouseEvent<HTMLDivElement> | PointerEvent<HTMLDivElement>,\n  ) => {\n    // The pinned tooltip is portaled but still bubbles its events here\n    // through the React tree; only toggle for taps on the gauge itself,\n    // otherwise interacting with the tooltip (e.g. series actions)\n    // would close it. On touch the tooltip is already toggled in\n    // onPointerDown, and iOS may still emit a (sometimes delayed)\n    // synthetic click, so skip it here to avoid toggling back off.\n    if (\n      isTouchInteractionRef.current ||\n      event.target !== event.currentTarget ||\n      !isPointerEventInHitArea(event, overlayBounds)\n    ) {\n      return;\n    }\n    togglePin(event, data);\n  };\n\n  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (\n      event.target === event.currentTarget &&\n      !isPointerEventInHitArea(event, overlayBounds)\n    ) {\n      outOfBounds();\n      return;\n    }\n    hover(event, data);\n  };\n\n  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    isTouchInteractionRef.current = event.pointerType === 'touch';\n    toolbarHandlerRef.current.handleFocus();\n    // On touch devices the first tap reveals the toolbar, which makes\n    // iOS suppress the following synthetic click. Toggle the tooltip\n    // here so both appear on the first tap \u2014 but only for taps on the\n    // gauge itself, not on the portaled tooltip bubbling its events up.\n    if (\n      isTouchInteractionRef.current &&\n      event.target === event.currentTarget &&\n      isPointerEventInHitArea(event, overlayBounds)\n    ) {\n      togglePin(event, data);\n    }\n  };\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      data-testid=\"gauge-overlay-wrapper\"\n      className={container({ showLoading })}\n    >\n      <GaugeChartToolbar\n        intents={intents}\n        toolbar={toolbar}\n        handlerRef={toolbarHandlerRef}\n      />\n\n      {!showLoading && (\n        <Flex\n          className={overlayClassName}\n          onPointerMove={handlePointerMove}\n          onPointerLeave={outOfBounds}\n          onClick={handleClick}\n          onPointerDown={handlePointerDown}\n          style={overlayStyle}\n        >\n          {!tooltipHidden && (\n            <GaugeOverlayTooltip value={value} color={color} />\n          )}\n        </Flex>\n      )}\n\n      {children}\n      {showLoading ? (\n        <LoaderOverlay\n          gridArea=\"1/1/2/2\"\n          consumerStyle={consumerLoadingStyle}\n        />\n      ) : null}\n    </Flex>\n  );\n};\n\nGaugeChartOverlay['displayName'] = 'GaugeChartOverlay';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.sty.js

@@ -1,9 +1,9 @@
 import "./GaugeLayoutOverlay.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
 var consumerLoadingStyle = { position: "absolute", top: 0, width: "100%", height: "100%", zIndex: 1, pointerEvents: "none", backgroundColor: "var(--dt-colors-background-base-default, #f9f9fa)", opacity: 0.4 };
-var container = _7a468({ defaultClassName: "_l0e5zm0-3-7-1", variantClassNames: { showLoading: { true: "_l0e5zm1-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var tooltipOverlay = "_l0e5zm2-3-7-1";
-var tooltipOverlayFull = "_l0e5zm3-3-7-1";
+var container = _7a468({ defaultClassName: "_l0e5zm0-3-9-0", variantClassNames: { showLoading: { true: "_l0e5zm1-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var tooltipOverlay = "_l0e5zm2-3-9-0";
+var tooltipOverlayFull = "_l0e5zm3-3-9-0";
 export {
   consumerLoadingStyle,
   container,

package/esm/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.css.ts"],
-  "sourcesContent": ["import './GaugeLayoutOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var consumerLoadingStyle = {position:'absolute',top:0,width:'100%',height:'100%',zIndex:1,pointerEvents:'none',backgroundColor:'var(--dt-colors-background-base-default, #f9f9fa)',opacity:0.4};\nexport var container = _7a468({defaultClassName:'_l0e5zm0-3-7-1',variantClassNames:{showLoading:{true:'_l0e5zm1-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var tooltipOverlay = '_l0e5zm2-3-7-1';\nexport var tooltipOverlayFull = '_l0e5zm3-3-7-1';"],
+  "sourcesContent": ["import './GaugeLayoutOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var consumerLoadingStyle = {position:'absolute',top:0,width:'100%',height:'100%',zIndex:1,pointerEvents:'none',backgroundColor:'var(--dt-colors-background-base-default, #f9f9fa)',opacity:0.4};\nexport var container = _7a468({defaultClassName:'_l0e5zm0-3-9-0',variantClassNames:{showLoading:{true:'_l0e5zm1-3-9-0'}},defaultVariants:{},compoundVariants:[]});\nexport var tooltipOverlay = '_l0e5zm2-3-9-0';\nexport var tooltipOverlayFull = '_l0e5zm3-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,EAAC,UAAS,YAAW,KAAI,GAAE,OAAM,QAAO,QAAO,QAAO,QAAO,GAAE,eAAc,QAAO,iBAAgB,qDAAoD,SAAQ,IAAG;AAC9L,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzJ,IAAI,iBAAiB;AACrB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.css

@@ -1,4 +1,4 @@
-._13c0oci0-3-7-1 {
+._13c0oci0-3-9-0 {
   width: 100%;
   height: 100%;
   justify-content: center;
@@ -9,7 +9,7 @@
   margin: 0;
   gap: 0;
 }
-._13c0oci1-3-7-1 svg {
+._13c0oci1-3-9-0 svg {
   width: 1em;
   height: 1em;
   vertical-align: text-bottom;

package/esm/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.sty.js

@@ -1,6 +1,6 @@
 import "./GaugeResponsiveLabel.css";
-var parentSvgStyle = "_13c0oci1-3-7-1";
-var responsiveLabelContainer = "_13c0oci0-3-7-1";
+var parentSvgStyle = "_13c0oci1-3-9-0";
+var responsiveLabelContainer = "_13c0oci0-3-9-0";
 export {
   parentSvgStyle,
   responsiveLabelContainer

package/esm/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.css.ts"],
-  "sourcesContent": ["import './GaugeResponsiveLabel.css';\nexport var parentSvgStyle = '_13c0oci1-3-7-1';\nexport var responsiveLabelContainer = '_13c0oci0-3-7-1';"],
+  "sourcesContent": ["import './GaugeResponsiveLabel.css';\nexport var parentSvgStyle = '_13c0oci1-3-9-0';\nexport var responsiveLabelContainer = '_13c0oci0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,2BAA2B;",
   "names": []
 }

package/esm/charts/gauge/utils/is-in-gauge-hit-area.js

@@ -0,0 +1,19 @@
+import { ARC_END_ANGLE, ARC_START_ANGLE } from "../constants.js";
+const isInGaugeHitArea = (dx, dy, arcOuterRadius, arcInnerRadius) => {
+  const r = Math.sqrt(dx * dx + dy * dy);
+  if (r <= arcInnerRadius) {
+    return dy <= arcOuterRadius * -Math.cos(ARC_END_ANGLE);
+  }
+  if (r > arcOuterRadius) {
+    return false;
+  }
+  let angle = Math.atan2(dy, dx) + Math.PI / 2;
+  if (angle > Math.PI) {
+    angle -= 2 * Math.PI;
+  }
+  return angle >= ARC_START_ANGLE && angle <= ARC_END_ANGLE;
+};
+export {
+  isInGaugeHitArea
+};
+//# sourceMappingURL=is-in-gauge-hit-area.js.map

package/esm/charts/gauge/utils/is-in-gauge-hit-area.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/gauge/utils/is-in-gauge-hit-area.ts"],
+  "sourcesContent": ["import { ARC_END_ANGLE, ARC_START_ANGLE } from '../constants.js';\n\n/**\n * Returns true if a point \u2014 given as an offset from the arc center in\n * overlay-local pixel coordinates \u2014 falls within the gauge's interactive\n * hit area: either the arc ring or the inner disk (center area).\n *\n * Angle convention matches d3/polarToCartesian: 0 = top (12 o'clock), CW positive.\n * Inverse mapping: angle = atan2(dy, dx) + \u03C0/2, normalized to [-\u03C0, \u03C0].\n */\nexport const isInGaugeHitArea = (\n  dx: number,\n  dy: number,\n  arcOuterRadius: number,\n  arcInnerRadius: number,\n): boolean => {\n  const r = Math.sqrt(dx * dx + dy * dy);\n  if (r <= arcInnerRadius) {\n    // Clip inner disk to above the chord connecting the two arc endpoints;\n    // the bottom segment falls in the gap where no arc is drawn.\n    return dy <= arcOuterRadius * -Math.cos(ARC_END_ANGLE);\n  }\n  if (r > arcOuterRadius) {\n    return false;\n  }\n\n  let angle = Math.atan2(dy, dx) + Math.PI / 2;\n  if (angle > Math.PI) {\n    angle -= 2 * Math.PI;\n  }\n  return angle >= ARC_START_ANGLE && angle <= ARC_END_ANGLE;\n};\n"],
+  "mappings": "AAAA,SAAS,eAAe,uBAAuB;AAUxC,MAAM,mBAAmB,CAC9B,IACA,IACA,gBACA,mBACY;AACZ,QAAM,IAAI,KAAK,KAAK,KAAK,KAAK,KAAK,EAAE;AACrC,MAAI,KAAK,gBAAgB;AAGvB,WAAO,MAAM,iBAAiB,CAAC,KAAK,IAAI,aAAa;AAAA,EACvD;AACA,MAAI,IAAI,gBAAgB;AACtB,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,KAAK,MAAM,IAAI,EAAE,IAAI,KAAK,KAAK;AAC3C,MAAI,QAAQ,KAAK,IAAI;AACnB,aAAS,IAAI,KAAK;AAAA,EACpB;AACA,SAAO,SAAS,mBAAmB,SAAS;AAC9C;",
+  "names": []
+}

package/esm/charts/histogram/HistogramChart.js

@@ -19,14 +19,13 @@ import { Intent } from "../../core/slots/Intent/Intent.js";
 import { EmptyStateSlot } from "../core/slots/chart-states/EmptyStateSlot.js";
 import { ErrorStateSlot } from "../core/slots/chart-states/ErrorStateSlot.js";
 import { ColorRule } from "../core/slots/ColorRule.js";
-import { isFeatureEnabled } from "../core/utils/is-feature-enabled.js";
 import { HistogramToXY } from "../xy-chart-adoption/histogram/HistogramToXY.js";
 const HistogramChartSwitcher = forwardRef((props, forwardedRef) => {
-  const { __useXYAdoption, ...rest } = props;
-  if (__useXYAdoption ?? isFeatureEnabled("histogramToXY")) {
-    return /* @__PURE__ */ jsx(HistogramToXY, { ...rest, ref: forwardedRef });
+  const { __useLegacy, ...rest } = props;
+  if (__useLegacy) {
+    return /* @__PURE__ */ jsx(HistogramChartRoot, { ...rest, ref: forwardedRef });
   }
-  return /* @__PURE__ */ jsx(HistogramChartRoot, { ...rest, ref: forwardedRef });
+  return /* @__PURE__ */ jsx(HistogramToXY, { ...rest, ref: forwardedRef });
 });
 HistogramChartSwitcher.displayName = "HistogramChart";
 const HistogramChart = Object.assign(HistogramChartSwitcher, {

package/esm/charts/histogram/HistogramChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/histogram/HistogramChart.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren } from 'react';\n\nimport { HistogramChartRoot } from './HistogramChartRoot.js';\nimport { Annotations } from './slots/annotations/Annotations.js';\nimport { Marker } from './slots/annotations/Marker.js';\nimport { AnnotationsTooltip } from './slots/annotations/Tooltip.js';\nimport { Track } from './slots/annotations/Track.js';\nimport { HistogramChartDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { Legend } from './slots/Legend.js';\nimport { Pan } from './slots/Pan.js';\nimport { Select } from './slots/Select.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { XAxis } from './slots/XAxis.js';\nimport { YAxis } from './slots/YAxis.js';\nimport { Zoom } from './slots/Zoom.js';\nimport type { HistogramChartProps } from './types/histogram-props.js';\nimport type { HistogramChartRef } from './types/histogram-ref.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { isFeatureEnabled } from '../core/utils/is-feature-enabled.js';\nimport { HistogramToXY } from '../xy-chart-adoption/histogram/HistogramToXY.js';\nimport type { _XYChartAdoptionProps } from '../xy-chart-adoption/types/props.js';\n\nexport const HistogramChartSwitcher = forwardRef<\n  HistogramChartRef,\n  PropsWithChildren<HistogramChartProps & _XYChartAdoptionProps>\n>((props, forwardedRef) => {\n  const { __useXYAdoption, ...rest } = props;\n  if (__useXYAdoption ?? isFeatureEnabled('histogramToXY')) {\n    return <HistogramToXY {...rest} ref={forwardedRef} />;\n  }\n  return <HistogramChartRoot {...rest} ref={forwardedRef} />;\n});\n\n(\n  HistogramChartSwitcher as typeof HistogramChartSwitcher & {\n    displayName: string;\n  }\n).displayName = 'HistogramChart';\n/**\n * A `HistogramChart` is a type of graph that represents the distribution of numerical data.\n * It\u2019s constructed by dividing the entire range of values into a series of intervals\u2014known as bins\n * and then counting how many values fall into each interval.\n * The bins are typically of equal size and are adjacent to each other, with no gaps. Each bin is represented by a bar,\n * where the height of the bar reflects the frequency or count of data points within that interval\n * @public\n */\nexport const HistogramChart = Object.assign(HistogramChartSwitcher, {\n  XAxis,\n  YAxis,\n  Legend,\n  Tooltip,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  Annotations,\n  ColorRule,\n  ThresholdIndicator,\n  Select,\n  Intent,\n  Toolbar,\n  DownloadCSV: HistogramChartDownloadCSVSlot,\n  Pan,\n  Zoom,\n});\n\n/**\n * Annotations Slots\n * @public\n */\nexport const HistogramAnnotations = Object.assign(\n  {},\n  {\n    Marker,\n    Track,\n    Tooltip: AnnotationsTooltip,\n  },\n);\n"],
-  "mappings": "AAiCW;AAjCX,SAAS,kBAA0C;AAEnD,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,aAAa;AACtB,SAAS,qCAAqC;AAC9C,SAAS,cAAc;AACvB,SAAS,WAAW;AACpB,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,YAAY;AAGrB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAGvB,MAAM,yBAAyB,WAGpC,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,iBAAiB,GAAG,KAAK,IAAI;AACrC,MAAI,mBAAmB,iBAAiB,eAAe,GAAG;AACxD,WAAO,oBAAC,iBAAe,GAAG,MAAM,KAAK,cAAc;AAAA,EACrD;AACA,SAAO,oBAAC,sBAAoB,GAAG,MAAM,KAAK,cAAc;AAC1D,CAAC;AAGC,uBAGA,cAAc;AAST,MAAM,iBAAiB,OAAO,OAAO,wBAAwB;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AACF,CAAC;AAMM,MAAM,uBAAuB,OAAO;AAAA,EACzC,CAAC;AAAA,EACD;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren } from 'react';\n\nimport { HistogramChartRoot } from './HistogramChartRoot.js';\nimport { Annotations } from './slots/annotations/Annotations.js';\nimport { Marker } from './slots/annotations/Marker.js';\nimport { AnnotationsTooltip } from './slots/annotations/Tooltip.js';\nimport { Track } from './slots/annotations/Track.js';\nimport { HistogramChartDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { Legend } from './slots/Legend.js';\nimport { Pan } from './slots/Pan.js';\nimport { Select } from './slots/Select.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { XAxis } from './slots/XAxis.js';\nimport { YAxis } from './slots/YAxis.js';\nimport { Zoom } from './slots/Zoom.js';\nimport type { HistogramChartProps } from './types/histogram-props.js';\nimport type { HistogramChartRef } from './types/histogram-ref.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { HistogramToXY } from '../xy-chart-adoption/histogram/HistogramToXY.js';\nimport type { _XYChartLegacyProps } from '../xy-chart-adoption/shared/types/legacy-props.js';\n\nexport const HistogramChartSwitcher = forwardRef<\n  HistogramChartRef,\n  PropsWithChildren<HistogramChartProps & _XYChartLegacyProps>\n>((props, forwardedRef) => {\n  const { __useLegacy, ...rest } = props;\n  if (__useLegacy) {\n    return <HistogramChartRoot {...rest} ref={forwardedRef} />;\n  }\n  return <HistogramToXY {...rest} ref={forwardedRef} />;\n});\n\n(\n  HistogramChartSwitcher as typeof HistogramChartSwitcher & {\n    displayName: string;\n  }\n).displayName = 'HistogramChart';\n/**\n * A `HistogramChart` is a type of graph that represents the distribution of numerical data.\n * It\u2019s constructed by dividing the entire range of values into a series of intervals\u2014known as bins\n * and then counting how many values fall into each interval.\n * The bins are typically of equal size and are adjacent to each other, with no gaps. Each bin is represented by a bar,\n * where the height of the bar reflects the frequency or count of data points within that interval\n * @public\n */\nexport const HistogramChart = Object.assign(HistogramChartSwitcher, {\n  XAxis,\n  YAxis,\n  Legend,\n  Tooltip,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  Annotations,\n  ColorRule,\n  ThresholdIndicator,\n  Select,\n  Intent,\n  Toolbar,\n  DownloadCSV: HistogramChartDownloadCSVSlot,\n  Pan,\n  Zoom,\n});\n\n/**\n * Annotations Slots\n * @public\n */\nexport const HistogramAnnotations = Object.assign(\n  {},\n  {\n    Marker,\n    Track,\n    Tooltip: AnnotationsTooltip,\n  },\n);\n"],
+  "mappings": "AAgCW;AAhCX,SAAS,kBAA0C;AAEnD,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,aAAa;AACtB,SAAS,qCAAqC;AAC9C,SAAS,cAAc;AACvB,SAAS,WAAW;AACpB,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,YAAY;AAGrB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAGvB,MAAM,yBAAyB,WAGpC,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,aAAa,GAAG,KAAK,IAAI;AACjC,MAAI,aAAa;AACf,WAAO,oBAAC,sBAAoB,GAAG,MAAM,KAAK,cAAc;AAAA,EAC1D;AACA,SAAO,oBAAC,iBAAe,GAAG,MAAM,KAAK,cAAc;AACrD,CAAC;AAGC,uBAGA,cAAc;AAST,MAAM,iBAAiB,OAAO,OAAO,wBAAwB;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AACF,CAAC;AAMM,MAAM,uBAAuB,OAAO;AAAA,EACzC,CAAC;AAAA,EACD;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/esm/charts/histogram/HistogramChartInternal.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isEmpty } from "lodash-es";
 import { forwardRef, useRef } from "react";
-import { ANNOTATIONS_PADDING_BOTTOM } from "./components/annotations-histogram/constants.js";
 import { HistogramAnnotationsArea } from "./components/annotations-histogram/HistogramAnnotationsArea.js";
 import { HistogramAnnotationsIndicators } from "./components/annotations-histogram/HistogramAnnotationsIndicators.js";
 import { HistogramValueBottomAxisArea } from "./components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.js";
@@ -31,6 +30,10 @@ import { defaultChartSize } from "../../core/styles/defaultChartValues.sty.js";
 import { SCROLLBAR_WIDTH } from "../core/components/annotations/constants.js";
 import { getAnnotationsVisibleArea } from "../core/components/annotations/utils/get-annotations-visible-area.js";
 import { ChartGrid } from "../core/components/chart-grid/ChartGridRoot.js";
+import {
+  shouldShowAnnotations,
+  shouldShowAxes
+} from "../core/components/chart-grid/constants.js";
 import { useChartLayoutLoading } from "../core/components/chart-layout/hooks/useChartLayoutLoading.js";
 import { useChartLayoutOrientation } from "../core/components/chart-layout/hooks/useChartLayoutOrientation.js";
 import { useGraphSize } from "../core/components/chart-layout/hooks/useGraphSize.js";
@@ -57,7 +60,6 @@ const HistogramChartInternal = forwardRef(({ config }, forwardedRef) => {
     annotations?.visibleTracksLimit,
     numHiddenTracks
   );
-  const histogramGridTemplateRows = `minmax(0, ${annotationsVisibleArea + (tracksQuantity ? ANNOTATIONS_PADDING_BOTTOM : 0)}px) minmax(60%, 1fr) minmax(0, auto)`;
   const { leftThreshold, rightThreshold } = useHistogramThresholds();
   const hasThresholds = !isEmpty(leftThreshold) || !isEmpty(rightThreshold);
   const { width, height } = useGraphSize();
@@ -76,11 +78,19 @@ const HistogramChartInternal = forwardRef(({ config }, forwardedRef) => {
   const noLegendBottom = legendHidden || orientation === "horizontal";
   const hasRightPadding = noAxisRight && noLegendRight;
   const chartGridHeight = height - (!tracksQuantity || noLegendBottom ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT : 0);
+  const showAnnotations = shouldShowAnnotations(
+    chartGridHeight,
+    tracksQuantity
+  );
+  const showAxes = shouldShowAxes(chartGridHeight);
+  const chartGridRenderHeight = tracksQuantity && !noLegendBottom && !showAnnotations ? chartGridHeight - OVERLAY_PADDING : chartGridHeight;
+  const annotationsRowHeight = showAnnotations ? annotationsVisibleArea : 0;
+  const histogramGridTemplateRows = showAxes ? `minmax(0, ${annotationsRowHeight}px) minmax(60%, 1fr) minmax(0, auto)` : "0px 1fr 1px";
   return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
-        paddingTop: !tracksQuantity ? OVERLAY_PADDING : 0,
+        paddingTop: showAnnotations ? 0 : OVERLAY_PADDING,
         paddingLeft: 0
       },
       className: defaultChartSize,
@@ -90,7 +100,7 @@ const HistogramChartInternal = forwardRef(({ config }, forwardedRef) => {
         ChartGrid,
         {
           width: availableWidth - (hasRightPadding ? OVERLAY_PADDING : 0),
-          height: chartGridHeight,
+          height: chartGridRenderHeight,
           gridTemplateAreas: histogramGridTemplateAreas,
           gridTemplateColumns: histogramGridTemplateColumns,
           gridTemplateRows: histogramGridTemplateRows,
@@ -103,13 +113,13 @@ const HistogramChartInternal = forwardRef(({ config }, forwardedRef) => {
               forwardedRef,
               chartRef,
               children: [
-                /* @__PURE__ */ jsx(HistogramValueLeftAxisArea, {}),
-                /* @__PURE__ */ jsx(HistogramValueBottomAxisArea, {}),
-                /* @__PURE__ */ jsx(HistogramValueRightAxisArea, {}),
-                !!tracksQuantity && /* @__PURE__ */ jsx(HistogramAnnotationsArea, {}),
+                showAxes && /* @__PURE__ */ jsx(HistogramValueLeftAxisArea, {}),
+                showAxes && /* @__PURE__ */ jsx(HistogramValueBottomAxisArea, {}),
+                showAxes && /* @__PURE__ */ jsx(HistogramValueRightAxisArea, {}),
+                showAnnotations && /* @__PURE__ */ jsx(HistogramAnnotationsArea, {}),
                 /* @__PURE__ */ jsxs(ChartGrid.PlotArea, { children: [
                   /* @__PURE__ */ jsx(HistogramChartPlot, {}),
-                  /* @__PURE__ */ jsx(HistogramAnnotationsIndicators, {}),
+                  showAnnotations && /* @__PURE__ */ jsx(HistogramAnnotationsIndicators, {}),
                   /* @__PURE__ */ jsx(ThresholdIndicators, {}),
                   /* @__PURE__ */ jsx(
                     ChartLoaderOverlay,

package/esm/charts/histogram/HistogramChartInternal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/histogram/HistogramChartInternal.tsx"],
-  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { ANNOTATIONS_PADDING_BOTTOM } from './components/annotations-histogram/constants.js';\nimport { HistogramAnnotationsArea } from './components/annotations-histogram/HistogramAnnotationsArea.js';\nimport { HistogramAnnotationsIndicators } from './components/annotations-histogram/HistogramAnnotationsIndicators.js';\nimport { HistogramValueBottomAxisArea } from './components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.js';\nimport { HistogramValueLeftAxisArea } from './components/axes/HistogramValueLeftAxisArea.js';\nimport { HistogramValueRightAxisArea } from './components/axes/HistogramValueRightAxisArea.js';\nimport { HistogramChartPlot } from './components/layout/HistogramChartPlot.js';\nimport { HistogramOverlays } from './components/overlays/HistogramOverlays.js';\nimport { HistogramThresholdArea } from './components/thresholds/HistogramThresholdArea.js';\nimport { ThresholdIndicators } from './components/thresholds/ThresholdIndicators.js';\nimport {\n  DISPLAY_NAME,\n  HISTOGRAM_CHART_ARIA_LABEL,\n} from './constants/defaults.js';\nimport { AREAS } from './constants/histogram-grid-area-rules.js';\nimport { useHistogramAnnotationsConfig } from './hooks/useHistogramAnnotationsConfig.js';\nimport { useHistogramFilteredData } from './hooks/useHistogramFilteredData.js';\nimport { useHistogramLegend } from './hooks/useHistogramLegend.js';\nimport { useHistogramThresholds } from './hooks/useHistogramThresholds.js';\nimport { useYAxisConfig } from './hooks/useYAxisConfig.js';\nimport { HistogramAnnotationsDataProvider } from './providers/HistogramAnnotationsDataProvider.js';\nimport { HistogramChartImperativeHandler } from './providers/HistogramChartImperativeHandler.js';\nimport { HistogramFormatterProvider } from './providers/HistogramFormatterProvider.js';\nimport { HistogramXScaleProvider } from './providers/HistogramXScaleProvider.js';\nimport { HistogramYScalesProvider } from './providers/HistogramYScalesProvider.js';\nimport type { HistogramChartConfiguration } from './types/histogram-props.js';\nimport type { HistogramChartRef } from './types/histogram-ref.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { SCROLLBAR_WIDTH } from '../core/components/annotations/constants.js';\nimport { getAnnotationsVisibleArea } from '../core/components/annotations/utils/get-annotations-visible-area.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport { ChartLoaderOverlay } from '../core/components/chart-loader-overlay/ChartLoaderOverlay.js';\nimport {\n  BOTTOM_PADDING_ADJUSTMENT,\n  OVERLAY_PADDING,\n} from '../core/components/data-point/constants.js';\n\nconst histogramGridTemplateAreas = `\n  \"${AREAS.annotations} ${AREAS.annotations} ${AREAS.annotations} . .\"\n  \"${AREAS.leftAxis} ${AREAS.leftThreshold} plot ${AREAS.rightThreshold} ${AREAS.rightAxis}\"\n  \". . ${AREAS.bottomAxis} . .\"\n`;\nconst histogramGridTemplateColumns =\n  'minmax(0, auto) auto minmax(60%, 1fr) auto minmax(0, auto)';\n\nexport interface _HistogramChartProps {\n  config: HistogramChartConfiguration;\n}\n\nexport const HistogramChartInternal = forwardRef<\n  HistogramChartRef,\n  PropsWithChildren<_HistogramChartProps>\n>(({ config }, forwardedRef) => {\n  const loading = useChartLayoutLoading();\n\n  const annotations = useHistogramAnnotationsConfig();\n\n  const tracksQuantity = annotations.tracks.length;\n  const numHiddenTracks = annotations.tracks.filter(\n    (value) => value.hidden,\n  ).length;\n\n  const annotationsVisibleArea = getAnnotationsVisibleArea(\n    tracksQuantity,\n    annotations?.visibleTracksLimit,\n    numHiddenTracks,\n  );\n\n  const histogramGridTemplateRows = `minmax(0, ${\n    annotationsVisibleArea + (tracksQuantity ? ANNOTATIONS_PADDING_BOTTOM : 0)\n  }px) minmax(60%, 1fr) minmax(0, auto)`;\n\n  const { leftThreshold, rightThreshold } = useHistogramThresholds();\n  const hasThresholds = !isEmpty(leftThreshold) || !isEmpty(rightThreshold);\n  const { width, height } = useGraphSize();\n\n  const chartRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs<HistogramChartRef | HTMLDivElement>([\n    forwardedRef,\n    chartRef,\n  ]);\n\n  const { orientation } = useChartLayoutOrientation();\n  const { right: axisRight } = useYAxisConfig();\n  const { hidden: legendHidden } = useHistogramLegend();\n  const { units } = useHistogramFilteredData();\n\n  const availableWidth =\n    tracksQuantity && orientation === 'vertical'\n      ? width - SCROLLBAR_WIDTH\n      : width;\n\n  const noAxisRight = !axisRight || units.length === 1;\n\n  const noLegendRight = legendHidden || orientation === 'vertical';\n  const noLegendBottom = legendHidden || orientation === 'horizontal';\n\n  const hasRightPadding = noAxisRight && noLegendRight;\n\n  const chartGridHeight =\n    height -\n    (!tracksQuantity || noLegendBottom\n      ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT\n      : 0);\n\n  return (\n    <div\n      style={{\n        paddingTop: !tracksQuantity ? OVERLAY_PADDING : 0,\n        paddingLeft: 0,\n      }}\n      className={defaultChartSize}\n      role=\"img\"\n      aria-label={HISTOGRAM_CHART_ARIA_LABEL}\n    >\n      <ChartGrid\n        width={availableWidth - (hasRightPadding ? OVERLAY_PADDING : 0)}\n        height={chartGridHeight}\n        gridTemplateAreas={histogramGridTemplateAreas}\n        gridTemplateColumns={histogramGridTemplateColumns}\n        gridTemplateRows={histogramGridTemplateRows}\n        ref={mergedRef}\n        data-testid=\"histogram-chart-root\"\n      >\n        <HistogramXScaleProvider>\n          <HistogramYScalesProvider>\n            <HistogramFormatterProvider>\n              <HistogramAnnotationsDataProvider>\n                <HistogramChartImperativeHandler\n                  config={config}\n                  forwardedRef={forwardedRef}\n                  chartRef={chartRef}\n                >\n                  <HistogramValueLeftAxisArea />\n                  <HistogramValueBottomAxisArea />\n                  <HistogramValueRightAxisArea />\n                  {!!tracksQuantity && <HistogramAnnotationsArea />}\n                  <ChartGrid.PlotArea>\n                    <HistogramChartPlot />\n                    <HistogramAnnotationsIndicators />\n                    <ThresholdIndicators />\n                    <ChartLoaderOverlay\n                      loading={!!loading}\n                      zoomEnabled={!!config.interactions?.zoom?.enabled}\n                    >\n                      <HistogramOverlays />\n                    </ChartLoaderOverlay>\n                  </ChartGrid.PlotArea>\n                  {hasThresholds && <HistogramThresholdArea />}\n                </HistogramChartImperativeHandler>\n              </HistogramAnnotationsDataProvider>\n            </HistogramFormatterProvider>\n          </HistogramYScalesProvider>\n        </HistogramXScaleProvider>\n      </ChartGrid>\n    </div>\n  );\n});\n\n(\n  HistogramChartInternal as typeof HistogramChartInternal & {\n    displayName: string;\n  }\n).displayName = DISPLAY_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { HistogramAnnotationsArea } from './components/annotations-histogram/HistogramAnnotationsArea.js';\nimport { HistogramAnnotationsIndicators } from './components/annotations-histogram/HistogramAnnotationsIndicators.js';\nimport { HistogramValueBottomAxisArea } from './components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.js';\nimport { HistogramValueLeftAxisArea } from './components/axes/HistogramValueLeftAxisArea.js';\nimport { HistogramValueRightAxisArea } from './components/axes/HistogramValueRightAxisArea.js';\nimport { HistogramChartPlot } from './components/layout/HistogramChartPlot.js';\nimport { HistogramOverlays } from './components/overlays/HistogramOverlays.js';\nimport { HistogramThresholdArea } from './components/thresholds/HistogramThresholdArea.js';\nimport { ThresholdIndicators } from './components/thresholds/ThresholdIndicators.js';\nimport {\n  DISPLAY_NAME,\n  HISTOGRAM_CHART_ARIA_LABEL,\n} from './constants/defaults.js';\nimport { AREAS } from './constants/histogram-grid-area-rules.js';\nimport { useHistogramAnnotationsConfig } from './hooks/useHistogramAnnotationsConfig.js';\nimport { useHistogramFilteredData } from './hooks/useHistogramFilteredData.js';\nimport { useHistogramLegend } from './hooks/useHistogramLegend.js';\nimport { useHistogramThresholds } from './hooks/useHistogramThresholds.js';\nimport { useYAxisConfig } from './hooks/useYAxisConfig.js';\nimport { HistogramAnnotationsDataProvider } from './providers/HistogramAnnotationsDataProvider.js';\nimport { HistogramChartImperativeHandler } from './providers/HistogramChartImperativeHandler.js';\nimport { HistogramFormatterProvider } from './providers/HistogramFormatterProvider.js';\nimport { HistogramXScaleProvider } from './providers/HistogramXScaleProvider.js';\nimport { HistogramYScalesProvider } from './providers/HistogramYScalesProvider.js';\nimport type { HistogramChartConfiguration } from './types/histogram-props.js';\nimport type { HistogramChartRef } from './types/histogram-ref.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { SCROLLBAR_WIDTH } from '../core/components/annotations/constants.js';\nimport { getAnnotationsVisibleArea } from '../core/components/annotations/utils/get-annotations-visible-area.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport {\n  shouldShowAnnotations,\n  shouldShowAxes,\n} from '../core/components/chart-grid/constants.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport { ChartLoaderOverlay } from '../core/components/chart-loader-overlay/ChartLoaderOverlay.js';\nimport {\n  BOTTOM_PADDING_ADJUSTMENT,\n  OVERLAY_PADDING,\n} from '../core/components/data-point/constants.js';\n\nconst histogramGridTemplateAreas = `\n  \"${AREAS.annotations} ${AREAS.annotations} ${AREAS.annotations} . .\"\n  \"${AREAS.leftAxis} ${AREAS.leftThreshold} plot ${AREAS.rightThreshold} ${AREAS.rightAxis}\"\n  \". . ${AREAS.bottomAxis} . .\"\n`;\nconst histogramGridTemplateColumns =\n  'minmax(0, auto) auto minmax(60%, 1fr) auto minmax(0, auto)';\n\nexport interface _HistogramChartProps {\n  config: HistogramChartConfiguration;\n}\n\nexport const HistogramChartInternal = forwardRef<\n  HistogramChartRef,\n  PropsWithChildren<_HistogramChartProps>\n>(({ config }, forwardedRef) => {\n  const loading = useChartLayoutLoading();\n\n  const annotations = useHistogramAnnotationsConfig();\n\n  const tracksQuantity = annotations.tracks.length;\n  const numHiddenTracks = annotations.tracks.filter(\n    (value) => value.hidden,\n  ).length;\n\n  const annotationsVisibleArea = getAnnotationsVisibleArea(\n    tracksQuantity,\n    annotations?.visibleTracksLimit,\n    numHiddenTracks,\n  );\n\n  const { leftThreshold, rightThreshold } = useHistogramThresholds();\n  const hasThresholds = !isEmpty(leftThreshold) || !isEmpty(rightThreshold);\n  const { width, height } = useGraphSize();\n\n  const chartRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs<HistogramChartRef | HTMLDivElement>([\n    forwardedRef,\n    chartRef,\n  ]);\n\n  const { orientation } = useChartLayoutOrientation();\n  const { right: axisRight } = useYAxisConfig();\n  const { hidden: legendHidden } = useHistogramLegend();\n  const { units } = useHistogramFilteredData();\n\n  const availableWidth =\n    tracksQuantity && orientation === 'vertical'\n      ? width - SCROLLBAR_WIDTH\n      : width;\n\n  const noAxisRight = !axisRight || units.length === 1;\n\n  const noLegendRight = legendHidden || orientation === 'vertical';\n  const noLegendBottom = legendHidden || orientation === 'horizontal';\n\n  const hasRightPadding = noAxisRight && noLegendRight;\n\n  const chartGridHeight =\n    height -\n    (!tracksQuantity || noLegendBottom\n      ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT\n      : 0);\n\n  const showAnnotations = shouldShowAnnotations(\n    chartGridHeight,\n    tracksQuantity,\n  );\n\n  const showAxes = shouldShowAxes(chartGridHeight);\n\n  const chartGridRenderHeight =\n    tracksQuantity && !noLegendBottom && !showAnnotations\n      ? chartGridHeight - OVERLAY_PADDING\n      : chartGridHeight;\n\n  const annotationsRowHeight = showAnnotations ? annotationsVisibleArea : 0;\n\n  const histogramGridTemplateRows = showAxes\n    ? `minmax(0, ${annotationsRowHeight}px) minmax(60%, 1fr) minmax(0, auto)`\n    : '0px 1fr 1px';\n\n  return (\n    <div\n      style={{\n        paddingTop: showAnnotations ? 0 : OVERLAY_PADDING,\n        paddingLeft: 0,\n      }}\n      className={defaultChartSize}\n      role=\"img\"\n      aria-label={HISTOGRAM_CHART_ARIA_LABEL}\n    >\n      <ChartGrid\n        width={availableWidth - (hasRightPadding ? OVERLAY_PADDING : 0)}\n        height={chartGridRenderHeight}\n        gridTemplateAreas={histogramGridTemplateAreas}\n        gridTemplateColumns={histogramGridTemplateColumns}\n        gridTemplateRows={histogramGridTemplateRows}\n        ref={mergedRef}\n        data-testid=\"histogram-chart-root\"\n      >\n        <HistogramXScaleProvider>\n          <HistogramYScalesProvider>\n            <HistogramFormatterProvider>\n              <HistogramAnnotationsDataProvider>\n                <HistogramChartImperativeHandler\n                  config={config}\n                  forwardedRef={forwardedRef}\n                  chartRef={chartRef}\n                >\n                  {showAxes && <HistogramValueLeftAxisArea />}\n                  {showAxes && <HistogramValueBottomAxisArea />}\n                  {showAxes && <HistogramValueRightAxisArea />}\n                  {showAnnotations && <HistogramAnnotationsArea />}\n                  <ChartGrid.PlotArea>\n                    <HistogramChartPlot />\n                    {showAnnotations && <HistogramAnnotationsIndicators />}\n                    <ThresholdIndicators />\n                    <ChartLoaderOverlay\n                      loading={!!loading}\n                      zoomEnabled={!!config.interactions?.zoom?.enabled}\n                    >\n                      <HistogramOverlays />\n                    </ChartLoaderOverlay>\n                  </ChartGrid.PlotArea>\n                  {hasThresholds && <HistogramThresholdArea />}\n                </HistogramChartImperativeHandler>\n              </HistogramAnnotationsDataProvider>\n            </HistogramFormatterProvider>\n          </HistogramYScalesProvider>\n        </HistogramXScaleProvider>\n      </ChartGrid>\n    </div>\n  );\n});\n\n(\n  HistogramChartInternal as typeof HistogramChartInternal & {\n    displayName: string;\n  }\n).displayName = DISPLAY_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/histogram/components/annotations-histogram/HistogramAnnotationsArea.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { toInteger } from "lodash-es";
-import { ANNOTATIONS_PADDING_BOTTOM } from "./constants.js";
 import { useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
 import { AnnotationsNumericalDisplay } from "../../../core/components/annotations/components/displays/AnnotationsNumericalDisplay.js";
 import { AnnotationsScrollWrapper } from "../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js";
@@ -39,40 +38,33 @@ const HistogramAnnotationsArea = () => {
     }));
   };
   const { formatter = (value) => `${toInteger(value)}` } = useXAxisConfig();
-  return /* @__PURE__ */ jsx(
-    ChartGrid.GridArea,
-    {
-      paddingBottom: ANNOTATIONS_PADDING_BOTTOM,
-      gridArea: AREAS.annotations,
-      children: ({ availableWidth, availableHeight }) => {
-        const labelOffset = availableWidth - trackWidth;
-        return /* @__PURE__ */ jsx(
-          AnnotationsScrollWrapper,
+  return /* @__PURE__ */ jsx(ChartGrid.GridArea, { gridArea: AREAS.annotations, children: ({ availableWidth, availableHeight }) => {
+    const labelOffset = availableWidth - trackWidth;
+    return /* @__PURE__ */ jsx(
+      AnnotationsScrollWrapper,
+      {
+        height: availableHeight,
+        width: availableWidth + SCROLLBAR_THRESHOLD,
+        children: /* @__PURE__ */ jsx(
+          AnnotationsNumericalDisplay,
           {
-            height: availableHeight,
-            width: availableWidth + SCROLLBAR_THRESHOLD,
-            children: /* @__PURE__ */ jsx(
-              AnnotationsNumericalDisplay,
-              {
-                tracks,
-                width: availableWidth,
-                scale: xScale,
-                showLabels,
-                labelsOffset: labelOffset,
-                annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
-                markerGroupHover: handleUpdateIndicators,
-                formatter,
-                textOverflow: DEFAULT_INTEGRATION_TEXT_OVERFLOW,
-                tooltipConfig: tooltip,
-                ...behaviorTrackingProps,
-                "data-dt-component": COMPONENT_NAME
-              }
-            )
+            tracks,
+            width: availableWidth,
+            scale: xScale,
+            showLabels,
+            labelsOffset: labelOffset,
+            annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
+            markerGroupHover: handleUpdateIndicators,
+            formatter,
+            textOverflow: DEFAULT_INTEGRATION_TEXT_OVERFLOW,
+            tooltipConfig: tooltip,
+            ...behaviorTrackingProps,
+            "data-dt-component": COMPONENT_NAME
           }
-        );
+        )
       }
-    }
-  );
+    );
+  } });
 };
 HistogramAnnotationsArea["displayName"] = "HistogramAnnotationsArea";
 export {