@dynatrace/strato-components 3.8.0 → 3.9.1

package/charts/core/components/tooltip-atoms/components/styles.css

@@ -1,4 +1,4 @@
-._1b8jnp60-3-8-0 {
+._1b8jnp60-3-9-1 {
   width: 100%;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -6,7 +6,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1b8jnp61-3-8-0 {
+._1b8jnp61-3-9-1 {
   height: 16px;
   min-width: 45px;
   display: flex;
@@ -20,7 +20,7 @@
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1b8jnp62-3-8-0 {
+._1b8jnp62-3-9-1 {
   width: 100%;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -28,7 +28,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1b8jnp63-3-8-0 {
+._1b8jnp63-3-9-1 {
   height: 24px;
   width: 24px;
   display: flex;

package/charts/core/components/tooltip-atoms/components/styles.sty.js

@@ -24,7 +24,7 @@ __export(styles_css_exports, {
 });
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
-var chipAtom = "_1b8jnp61-3-8-0";
-var primaryInfo = "_1b8jnp62-3-8-0";
-var secondaryInfo = "_1b8jnp60-3-8-0";
-var symbolAtom = "_1b8jnp63-3-8-0";
+var chipAtom = "_1b8jnp61-3-9-1";
+var primaryInfo = "_1b8jnp62-3-9-1";
+var secondaryInfo = "_1b8jnp60-3-9-1";
+var symbolAtom = "_1b8jnp63-3-9-1";

package/charts/core/components/zoom/ZoomCursors.css

@@ -1,8 +1,8 @@
-._1idfwsm0-3-8-0 {
+._1idfwsm0-3-9-1 {
   cursor: ew-resize;
   user-select: none;
   touch-action: pan-y;
 }
-._1idfwsm1-3-8-0 {
+._1idfwsm1-3-9-1 {
   cursor: default;
 }

package/charts/core/components/zoom/ZoomCursors.sty.js

@@ -24,6 +24,6 @@ __export(ZoomCursors_css_exports, {
 module.exports = __toCommonJS(ZoomCursors_css_exports);
 var import_ZoomCursors_css_ts_vanilla = require("./ZoomCursors.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var cursorStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1idfwsm2-3-8-0", variantClassNames: { isPanEnabled: { true: "_1idfwsm0-3-8-0", false: "_1idfwsm1-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var defaultCursor = "_1idfwsm1-3-8-0";
-var resizeCursor = "_1idfwsm0-3-8-0";
+var cursorStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1idfwsm2-3-9-1", variantClassNames: { isPanEnabled: { true: "_1idfwsm0-3-9-1", false: "_1idfwsm1-3-9-1" } }, defaultVariants: {}, compoundVariants: [] });
+var defaultCursor = "_1idfwsm1-3-9-1";
+var resizeCursor = "_1idfwsm0-3-9-1";

package/charts/core/hooks/useThrottledCallbackOnResize.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useThrottledCallbackOnResize_exports = {};
 __export(useThrottledCallbackOnResize_exports, {
@@ -31,7 +21,7 @@ __export(useThrottledCallbackOnResize_exports, {
 });
 module.exports = __toCommonJS(useThrottledCallbackOnResize_exports);
 var import_react = require("react");
-var import_use_resize_observer = __toESM(require("use-resize-observer"));
+var import_useResizeObserver = require("../../../core/hooks/useResizeObserver.js");
 var import_throttleRaf = require("../utils/throttleRaf.js");
 const useThrottledCallbackOnResize = (subject, callback, disabled = false) => {
   const throttledCallback = (0, import_react.useMemo)(
@@ -39,7 +29,7 @@ const useThrottledCallbackOnResize = (subject, callback, disabled = false) => {
     } : () => (0, import_throttleRaf.throttleRaf)(callback),
     [disabled]
   );
-  (0, import_use_resize_observer.default)({
+  (0, import_useResizeObserver.useResizeObserver)({
     ref: subject,
     onResize: throttledCallback
   });

package/charts/core/hooks/useThrottledResizeObserver.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useThrottledResizeObserver_exports = {};
 __export(useThrottledResizeObserver_exports, {
@@ -32,11 +22,11 @@ __export(useThrottledResizeObserver_exports, {
 module.exports = __toCommonJS(useThrottledResizeObserver_exports);
 var import_lodash_es = require("lodash");
 var import_react = require("react");
-var import_use_resize_observer = __toESM(require("use-resize-observer"));
+var import_useResizeObserver = require("../../../core/hooks/useResizeObserver.js");
 var import_constants = require("../constants.js");
 function useThrottledResizeObserver(wait = import_constants.SIXTY_FPS) {
   const [size, setSize] = (0, import_react.useState)({});
   const onResize = (0, import_react.useMemo)(() => (0, import_lodash_es.throttle)(setSize, wait), [wait]);
-  const { ref } = (0, import_use_resize_observer.default)({ onResize });
+  const { ref } = (0, import_useResizeObserver.useResizeObserver)({ onResize });
   return { refCallback: ref, ...size };
 }

package/charts/core/typographyStyles.css

@@ -1,3 +1,3 @@
-._18u8ey50-3-8-0 {
+._18u8ey50-3-9-1 {
   font-feature-settings: 'ss01';
 }

package/charts/core/typographyStyles.sty.js

@@ -21,4 +21,4 @@ __export(typographyStyles_css_exports, {
 });
 module.exports = __toCommonJS(typographyStyles_css_exports);
 var import_typographyStyles_css_ts_vanilla = require("./typographyStyles.css");
-var replaceSlashedZero = "_18u8ey50-3-8-0";
+var replaceSlashedZero = "_18u8ey50-3-9-1";

package/charts/gantt-chart/GanttChartLine.css

@@ -1,4 +1,4 @@
-._1pk2ed10-3-8-0 {
+._1pk2ed10-3-9-1 {
   height: 100%;
   width: 100%;
 }

package/charts/gantt-chart/GanttChartLine.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartLine_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartLine_css_exports);
 var import_GanttChartLine_css_ts_vanilla = require("./GanttChartLine.css");
-var wrapper = "_1pk2ed10-3-8-0";
+var wrapper = "_1pk2ed10-3-9-1";

package/charts/gantt-chart/components/GanttChartLineRenderer.css

@@ -1,4 +1,4 @@
-._mnxak30-3-8-0 {
+._mnxak30-3-9-1 {
   height: 100%;
   display: flex;
   justify-content: center;

package/charts/gantt-chart/components/GanttChartLineRenderer.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartLineRenderer_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartLineRenderer_css_exports);
 var import_GanttChartLineRenderer_css_ts_vanilla = require("./GanttChartLineRenderer.css");
-var svgWrapperCSS = "_mnxak30-3-8-0";
+var svgWrapperCSS = "_mnxak30-3-9-1";

package/charts/gantt-chart/components/tooltip/GanttChartTooltip.css

@@ -1,4 +1,4 @@
-._1v8s3xl0-3-8-0._1v8s3xl0-3-8-0 {
+._1v8s3xl0-3-9-1._1v8s3xl0-3-9-1 {
   max-height: initial;
   min-width: 160px;
   max-width: 320px;

package/charts/gantt-chart/components/tooltip/GanttChartTooltip.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartTooltip_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartTooltip_css_exports);
 var import_GanttChartTooltip_css_ts_vanilla = require("./GanttChartTooltip.css");
-var ganttChartTooltipCSS = "_1v8s3xl0-3-8-0";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-9-1";

package/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.css

@@ -1,4 +1,4 @@
-._ezp7cy0-3-8-0 {
+._ezp7cy0-3-9-1 {
   width: 100%;
   height: 100%;
   container-type: size;

package/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.sty.js

@@ -21,4 +21,4 @@ __export(GaugeChartLayout_css_exports, {
 });
 module.exports = __toCommonJS(GaugeChartLayout_css_exports);
 var import_GaugeChartLayout_css_ts_vanilla = require("./GaugeChartLayout.css");
-var layoutContainer = "_ezp7cy0-3-8-0";
+var layoutContainer = "_ezp7cy0-3-9-1";

package/charts/gauge/components/GaugeChartTooltip/GaugeOverlayTooltip.js

@@ -53,7 +53,7 @@ const GaugeOverlayTooltip = ({
       name: tooltipName,
       unit: typeof unit === "string" ? unit : void 0
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate: template(customItem) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { template: template(customItem) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_OverlayTooltip.OverlayTooltip.SeriesItem,

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

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

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

@@ -24,6 +24,6 @@ __export(GaugeLabel_css_exports, {
 module.exports = __toCommonJS(GaugeLabel_css_exports);
 var import_GaugeLabel_css_ts_vanilla = require("./GaugeLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var elementLabelWrapper = "_18ourc20-3-8-0";
-var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18ourc21-3-8-0", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-8-0", hanging: "_18ourc23-3-8-0" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
-var textContainer = "_18ourc24-3-8-0";
+var elementLabelWrapper = "_18ourc20-3-9-1";
+var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18ourc21-3-9-1", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-9-1", hanging: "_18ourc23-3-9-1" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
+var textContainer = "_18ourc24-3-9-1";

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

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

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

@@ -21,4 +21,4 @@ __export(GaugeLabelsWrapper_css_exports, {
 });
 module.exports = __toCommonJS(GaugeLabelsWrapper_css_exports);
 var import_GaugeLabelsWrapper_css_ts_vanilla = require("./GaugeLabelsWrapper.css");
-var labelsContainer = "_1fbjcz30-3-8-0";
+var labelsContainer = "_1fbjcz30-3-9-1";

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

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

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

@@ -28,10 +28,26 @@ var import_LoaderOverlay = require("../../../core/components/loader-overlay/Load
 var import_OverlayContext = require("../../../core/components/overlay-tooltip/contexts/OverlayContext.js");
 var import_useTooltipActions = require("../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_useToolbarHandlerRef = require("../../../core/components/toolbar/hooks/useToolbarHandlerRef.js");
+var import_constants = require("../../constants.js");
 var import_GaugeChartTooltipContext = require("../../contexts/GaugeChartTooltipContext.js");
 var import_useGaugeChartTooltipOverlayBounds = require("../../hooks/useGaugeChartTooltipOverlayBounds.js");
+var import_is_in_gauge_hit_area = require("../../utils/is-in-gauge-hit-area.js");
 var import_GaugeChartToolbar = require("../GaugeChartLayout/GaugeChartToolbar.js");
 var import_GaugeOverlayTooltip = require("../GaugeChartTooltip/GaugeOverlayTooltip.js");
+const isPointerEventInHitArea = (event, overlayBounds) => {
+  if (!overlayBounds) {
+    return true;
+  }
+  const rect = event.currentTarget.getBoundingClientRect();
+  const arcOuterRadius = overlayBounds.width / 2;
+  const arcInnerRadius = arcOuterRadius * (import_constants.ARC_INNER_RADIUS_PERCENTAGE / import_constants.ARC_OUTER_RADIUS_PERCENTAGE);
+  return (0, import_is_in_gauge_hit_area.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 = (0, import_OverlayContext.useOverlay)();
@@ -52,15 +68,22 @@ const GaugeChartOverlay = (props) => {
     height: overlayBounds.height
   } : void 0;
   const handleClick = (event) => {
-    if (isTouchInteractionRef.current || event.target !== event.currentTarget) {
+    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) {
+    if (isTouchInteractionRef.current && event.target === event.currentTarget && isPointerEventInHitArea(event, overlayBounds)) {
       togglePin(event, data);
     }
   };
@@ -83,7 +106,7 @@ const GaugeChartOverlay = (props) => {
           import_Flex.Flex,
           {
             className: overlayClassName,
-            onPointerMove: (event) => hover(event, data),
+            onPointerMove: handlePointerMove,
             onPointerLeave: outOfBounds,
             onClick: handleClick,
             onPointerDown: handlePointerDown,

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

@@ -26,6 +26,6 @@ module.exports = __toCommonJS(GaugeLayoutOverlay_css_exports);
 var import_GaugeLayoutOverlay_css_ts_vanilla = require("./GaugeLayoutOverlay.css");
 var import_createRuntimeFn = require("@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 = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l0e5zm0-3-8-0", variantClassNames: { showLoading: { true: "_l0e5zm1-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var tooltipOverlay = "_l0e5zm2-3-8-0";
-var tooltipOverlayFull = "_l0e5zm3-3-8-0";
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l0e5zm0-3-9-1", variantClassNames: { showLoading: { true: "_l0e5zm1-3-9-1" } }, defaultVariants: {}, compoundVariants: [] });
+var tooltipOverlay = "_l0e5zm2-3-9-1";
+var tooltipOverlayFull = "_l0e5zm3-3-9-1";

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

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

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

@@ -22,5 +22,5 @@ __export(GaugeResponsiveLabel_css_exports, {
 });
 module.exports = __toCommonJS(GaugeResponsiveLabel_css_exports);
 var import_GaugeResponsiveLabel_css_ts_vanilla = require("./GaugeResponsiveLabel.css");
-var parentSvgStyle = "_13c0oci1-3-8-0";
-var responsiveLabelContainer = "_13c0oci0-3-8-0";
+var parentSvgStyle = "_13c0oci1-3-9-1";
+var responsiveLabelContainer = "_13c0oci0-3-9-1";

package/charts/gauge/utils/is-in-gauge-hit-area.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns true if a point — given as an offset from the arc center in
+ * overlay-local pixel coordinates — falls within the gauge's interactive
+ * hit area: either the arc ring or the inner disk (center area).
+ *
+ * Angle convention matches d3/polarToCartesian: 0 = top (12 o'clock), CW positive.
+ * Inverse mapping: angle = atan2(dy, dx) + π/2, normalized to [-π, π].
+ */
+export declare const isInGaugeHitArea: (dx: number, dy: number, arcOuterRadius: number, arcInnerRadius: number) => boolean;

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

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var is_in_gauge_hit_area_exports = {};
+__export(is_in_gauge_hit_area_exports, {
+  isInGaugeHitArea: () => isInGaugeHitArea
+});
+module.exports = __toCommonJS(is_in_gauge_hit_area_exports);
+var import_constants = require("../constants.js");
+const isInGaugeHitArea = (dx, dy, arcOuterRadius, arcInnerRadius) => {
+  const r = Math.sqrt(dx * dx + dy * dy);
+  if (r <= arcInnerRadius) {
+    return dy <= arcOuterRadius * -Math.cos(import_constants.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 >= import_constants.ARC_START_ANGLE && angle <= import_constants.ARC_END_ANGLE;
+};

package/charts/histogram/HistogramChartInternal.js

@@ -23,7 +23,6 @@ module.exports = __toCommonJS(HistogramChartInternal_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
-var import_constants = require("./components/annotations-histogram/constants.js");
 var import_HistogramAnnotationsArea = require("./components/annotations-histogram/HistogramAnnotationsArea.js");
 var import_HistogramAnnotationsIndicators = require("./components/annotations-histogram/HistogramAnnotationsIndicators.js");
 var import_HistogramValueBottomAxisArea = require("./components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.js");
@@ -47,15 +46,15 @@ var import_HistogramXScaleProvider = require("./providers/HistogramXScaleProvide
 var import_HistogramYScalesProvider = require("./providers/HistogramYScalesProvider.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_defaultChartValues_css = require("../../core/styles/defaultChartValues.sty.js");
-var import_constants2 = require("../core/components/annotations/constants.js");
+var import_constants = require("../core/components/annotations/constants.js");
 var import_get_annotations_visible_area = require("../core/components/annotations/utils/get-annotations-visible-area.js");
 var import_ChartGridRoot = require("../core/components/chart-grid/ChartGridRoot.js");
-var import_constants3 = require("../core/components/chart-grid/constants.js");
+var import_constants2 = require("../core/components/chart-grid/constants.js");
 var import_useChartLayoutLoading = require("../core/components/chart-layout/hooks/useChartLayoutLoading.js");
 var import_useChartLayoutOrientation = require("../core/components/chart-layout/hooks/useChartLayoutOrientation.js");
 var import_useGraphSize = require("../core/components/chart-layout/hooks/useGraphSize.js");
 var import_ChartLoaderOverlay = require("../core/components/chart-loader-overlay/ChartLoaderOverlay.js");
-var import_constants4 = require("../core/components/data-point/constants.js");
+var import_constants3 = require("../core/components/data-point/constants.js");
 const histogramGridTemplateAreas = `
   "${import_histogram_grid_area_rules.AREAS.annotations} ${import_histogram_grid_area_rules.AREAS.annotations} ${import_histogram_grid_area_rules.AREAS.annotations} . ."
   "${import_histogram_grid_area_rules.AREAS.leftAxis} ${import_histogram_grid_area_rules.AREAS.leftThreshold} plot ${import_histogram_grid_area_rules.AREAS.rightThreshold} ${import_histogram_grid_area_rules.AREAS.rightAxis}"
@@ -86,26 +85,25 @@ const HistogramChartInternal = (0, import_react.forwardRef)(({ config }, forward
   const { right: axisRight } = (0, import_useYAxisConfig.useYAxisConfig)();
   const { hidden: legendHidden } = (0, import_useHistogramLegend.useHistogramLegend)();
   const { units } = (0, import_useHistogramFilteredData.useHistogramFilteredData)();
-  const availableWidth = tracksQuantity && orientation === "vertical" ? width - import_constants2.SCROLLBAR_WIDTH : width;
+  const availableWidth = tracksQuantity && orientation === "vertical" ? width - import_constants.SCROLLBAR_WIDTH : width;
   const noAxisRight = !axisRight || units.length === 1;
   const noLegendRight = legendHidden || orientation === "vertical";
   const noLegendBottom = legendHidden || orientation === "horizontal";
   const hasRightPadding = noAxisRight && noLegendRight;
-  const chartGridHeight = height - (!tracksQuantity || noLegendBottom ? import_constants4.OVERLAY_PADDING + import_constants4.BOTTOM_PADDING_ADJUSTMENT : 0);
-  const showAnnotations = (0, import_constants3.shouldShowAnnotations)(
+  const chartGridHeight = height - (!tracksQuantity || noLegendBottom ? import_constants3.OVERLAY_PADDING + import_constants3.BOTTOM_PADDING_ADJUSTMENT : 0);
+  const showAnnotations = (0, import_constants2.shouldShowAnnotations)(
     chartGridHeight,
     tracksQuantity
   );
-  const showAxes = (0, import_constants3.shouldShowAxes)(chartGridHeight);
-  const chartGridRenderHeight = tracksQuantity && !noLegendBottom && !showAnnotations ? chartGridHeight - import_constants4.OVERLAY_PADDING : chartGridHeight;
-  const annotationsPadding = tracksQuantity - numHiddenTracks > 0 ? import_constants.ANNOTATIONS_PADDING_BOTTOM : 0;
-  const annotationsRowHeight = showAnnotations ? annotationsVisibleArea + annotationsPadding : 0;
+  const showAxes = (0, import_constants2.shouldShowAxes)(chartGridHeight);
+  const chartGridRenderHeight = tracksQuantity && !noLegendBottom && !showAnnotations ? chartGridHeight - import_constants3.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__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       style: {
-        paddingTop: showAnnotations ? 0 : import_constants4.OVERLAY_PADDING,
+        paddingTop: showAnnotations ? 0 : import_constants3.OVERLAY_PADDING,
         paddingLeft: 0
       },
       className: import_defaultChartValues_css.defaultChartSize,
@@ -114,7 +112,7 @@ const HistogramChartInternal = (0, import_react.forwardRef)(({ config }, forward
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ChartGridRoot.ChartGrid,
         {
-          width: availableWidth - (hasRightPadding ? import_constants4.OVERLAY_PADDING : 0),
+          width: availableWidth - (hasRightPadding ? import_constants3.OVERLAY_PADDING : 0),
           height: chartGridRenderHeight,
           gridTemplateAreas: histogramGridTemplateAreas,
           gridTemplateColumns: histogramGridTemplateColumns,

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

@@ -22,11 +22,10 @@ __export(HistogramAnnotationsArea_exports, {
 module.exports = __toCommonJS(HistogramAnnotationsArea_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
-var import_constants = require("./constants.js");
 var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_AnnotationsNumericalDisplay = require("../../../core/components/annotations/components/displays/AnnotationsNumericalDisplay.js");
 var import_AnnotationsScrollWrapper = require("../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js");
-var import_constants2 = require("../../../core/components/annotations/constants.js");
+var import_constants = require("../../../core/components/annotations/constants.js");
 var import_ChartGridRoot = require("../../../core/components/chart-grid/ChartGridRoot.js");
 var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_histogram_grid_area_rules = require("../../constants/histogram-grid-area-rules.js");
@@ -40,7 +39,7 @@ const HistogramAnnotationsArea = () => {
   const config = (0, import_useHistogramAnnotationsConfig.useHistogramAnnotationsConfig)();
   const {
     tracks,
-    showLabels = import_constants2.DEFAULT_SHOW_LABELS,
+    showLabels = import_constants.DEFAULT_SHOW_LABELS,
     annotationsActions,
     tooltip
   } = config;
@@ -57,39 +56,32 @@ const HistogramAnnotationsArea = () => {
     }));
   };
   const { formatter = (value) => `${(0, import_lodash_es.toInteger)(value)}` } = (0, import_useXAxisConfig.useXAxisConfig)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ChartGridRoot.ChartGrid.GridArea,
-    {
-      paddingBottom: import_constants.ANNOTATIONS_PADDING_BOTTOM,
-      gridArea: import_histogram_grid_area_rules.AREAS.annotations,
-      children: ({ availableWidth, availableHeight }) => {
-        const labelOffset = availableWidth - trackWidth;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_AnnotationsScrollWrapper.AnnotationsScrollWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartGridRoot.ChartGrid.GridArea, { gridArea: import_histogram_grid_area_rules.AREAS.annotations, children: ({ availableWidth, availableHeight }) => {
+    const labelOffset = availableWidth - trackWidth;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_AnnotationsScrollWrapper.AnnotationsScrollWrapper,
+      {
+        height: availableHeight,
+        width: availableWidth + import_constants.SCROLLBAR_THRESHOLD,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_AnnotationsNumericalDisplay.AnnotationsNumericalDisplay,
           {
-            height: availableHeight,
-            width: availableWidth + import_constants2.SCROLLBAR_THRESHOLD,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_AnnotationsNumericalDisplay.AnnotationsNumericalDisplay,
-              {
-                tracks,
-                width: availableWidth,
-                scale: xScale,
-                showLabels,
-                labelsOffset: labelOffset,
-                annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
-                markerGroupHover: handleUpdateIndicators,
-                formatter,
-                textOverflow: import_constants2.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: import_constants.DEFAULT_INTEGRATION_TEXT_OVERFLOW,
+            tooltipConfig: tooltip,
+            ...behaviorTrackingProps,
+            "data-dt-component": COMPONENT_NAME
           }
-        );
+        )
       }
-    }
-  );
+    );
+  } });
 };
 HistogramAnnotationsArea["displayName"] = "HistogramAnnotationsArea";

package/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.css

@@ -1,3 +1,3 @@
-._9phcbi0-3-8-0 {
+._9phcbi0-3-9-1 {
   position: relative;
 }