@dynatrace/strato-components 3.8.0 → 3.9.0

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

@@ -1,5 +1,5 @@
 import "./GanttChartLine.css";
-var wrapper = "_1pk2ed10-3-8-0";
+var wrapper = "_1pk2ed10-3-9-0";
 export {
   wrapper
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/gantt-chart/GanttChartLine.css.ts"],
-  "sourcesContent": ["import './GanttChartLine.css';\nexport var wrapper = '_1pk2ed10-3-8-0';"],
+  "sourcesContent": ["import './GanttChartLine.css';\nexport var wrapper = '_1pk2ed10-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./GanttChartLineRenderer.css";
-var svgWrapperCSS = "_mnxak30-3-8-0";
+var svgWrapperCSS = "_mnxak30-3-9-0";
 export {
   svgWrapperCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gantt-chart/components/GanttChartLineRenderer.css.ts"],
-  "sourcesContent": ["import './GanttChartLineRenderer.css';\nexport var svgWrapperCSS = '_mnxak30-3-8-0';"],
+  "sourcesContent": ["import './GanttChartLineRenderer.css';\nexport var svgWrapperCSS = '_mnxak30-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./GanttChartTooltip.css";
-var ganttChartTooltipCSS = "_1v8s3xl0-3-8-0";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-9-0";
 export {
   ganttChartTooltipCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gantt-chart/components/tooltip/GanttChartTooltip.css.ts"],
-  "sourcesContent": ["import './GanttChartTooltip.css';\nexport var ganttChartTooltipCSS = '_1v8s3xl0-3-8-0';"],
+  "sourcesContent": ["import './GanttChartTooltip.css';\nexport var ganttChartTooltipCSS = '_1v8s3xl0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,uBAAuB;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./GaugeChartLayout.css";
-var layoutContainer = "_ezp7cy0-3-8-0";
+var layoutContainer = "_ezp7cy0-3-9-0";
 export {
   layoutContainer
 };

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeChartTooltip/GaugeOverlayTooltip.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { useTooltipSeriesActions } from '../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { useGaugeChartTooltip } from '../../contexts/GaugeChartTooltipContext.js';\nimport { useGaugeChartFormatterContext } from '../../hooks/useGaugeChartFormatterContext.js';\nimport type { GaugeChartTooltipItem } from '../../slots/Tooltip.js';\n\ninterface GaugeOverlayTooltipProps {\n  value: number;\n  color: string;\n}\n\nexport const GaugeOverlayTooltip = ({\n  value,\n  color,\n}: GaugeOverlayTooltipProps) => {\n  const intl = useIntl();\n  const { formatter, unit } = useGaugeChartFormatterContext();\n  const { name: tooltipName, template } = useGaugeChartTooltip();\n\n  const seriesName =\n    tooltipName ??\n    intl.formatMessage({ defaultMessage: 'Value', id: 'jc4XDeI4sf7aLs2W' });\n  const formattedValue = formatter(value, unit);\n\n  const tooltipItem = {\n    id: `${seriesName}-${value}`,\n    name: seriesName,\n    values: [formattedValue],\n  };\n\n  const seriesActions = useTooltipSeriesActions(\n    [tooltipItem],\n    (item) => item.id,\n  );\n\n  const actions = (\n    tooltipItem ? () => seriesActions(tooltipItem) : undefined\n  ) as (() => SeriesActionsTemplate) | undefined;\n\n  if (template) {\n    const customItem: GaugeChartTooltipItem = {\n      value,\n      formattedValue,\n      color,\n      name: tooltipName,\n      unit: typeof unit === 'string' ? unit : undefined,\n    };\n    return <OverlayTooltip legacyTemplate={template(customItem)} />;\n  }\n\n  return (\n    <OverlayTooltip>\n      <OverlayTooltip.SeriesItem\n        name={seriesName}\n        value={formattedValue}\n        color={color}\n        actions={actions}\n      />\n    </OverlayTooltip>\n  );\n};\n\nGaugeOverlayTooltip['displayName'] = 'GaugeOverlayTooltip';\n"],
-  "mappings": "AAkDW;AAlDX,SAAS,eAAe;AAExB,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AAExC,SAAS,4BAA4B;AACrC,SAAS,qCAAqC;AAQvC,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,WAAW,KAAK,IAAI,8BAA8B;AAC1D,QAAM,EAAE,MAAM,aAAa,SAAS,IAAI,qBAAqB;AAE7D,QAAM,aACJ,eACA,KAAK,cAAc,EAAE,gBAAgB,SAAS,IAAI,mBAAmB,CAAC;AACxE,QAAM,iBAAiB,UAAU,OAAO,IAAI;AAE5C,QAAM,cAAc;AAAA,IAClB,IAAI,GAAG,UAAU,IAAI,KAAK;AAAA,IAC1B,MAAM;AAAA,IACN,QAAQ,CAAC,cAAc;AAAA,EACzB;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,WAAW;AAAA,IACZ,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,QAAM,UACJ,cAAc,MAAM,cAAc,WAAW,IAAI;AAGnD,MAAI,UAAU;AACZ,UAAM,aAAoC;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM,OAAO,SAAS,WAAW,OAAO;AAAA,IAC1C;AACA,WAAO,oBAAC,kBAAe,gBAAgB,SAAS,UAAU,GAAG;AAAA,EAC/D;AAEA,SACE,oBAAC,kBACC;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { useTooltipSeriesActions } from '../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { useGaugeChartTooltip } from '../../contexts/GaugeChartTooltipContext.js';\nimport { useGaugeChartFormatterContext } from '../../hooks/useGaugeChartFormatterContext.js';\nimport type { GaugeChartTooltipItem } from '../../slots/Tooltip.js';\n\ninterface GaugeOverlayTooltipProps {\n  value: number;\n  color: string;\n}\n\nexport const GaugeOverlayTooltip = ({\n  value,\n  color,\n}: GaugeOverlayTooltipProps) => {\n  const intl = useIntl();\n  const { formatter, unit } = useGaugeChartFormatterContext();\n  const { name: tooltipName, template } = useGaugeChartTooltip();\n\n  const seriesName =\n    tooltipName ??\n    intl.formatMessage({ defaultMessage: 'Value', id: 'jc4XDeI4sf7aLs2W' });\n  const formattedValue = formatter(value, unit);\n\n  const tooltipItem = {\n    id: `${seriesName}-${value}`,\n    name: seriesName,\n    values: [formattedValue],\n  };\n\n  const seriesActions = useTooltipSeriesActions(\n    [tooltipItem],\n    (item) => item.id,\n  );\n\n  const actions = (\n    tooltipItem ? () => seriesActions(tooltipItem) : undefined\n  ) as (() => SeriesActionsTemplate) | undefined;\n\n  if (template) {\n    const customItem: GaugeChartTooltipItem = {\n      value,\n      formattedValue,\n      color,\n      name: tooltipName,\n      unit: typeof unit === 'string' ? unit : undefined,\n    };\n    return <OverlayTooltip template={template(customItem)} />;\n  }\n\n  return (\n    <OverlayTooltip>\n      <OverlayTooltip.SeriesItem\n        name={seriesName}\n        value={formattedValue}\n        color={color}\n        actions={actions}\n      />\n    </OverlayTooltip>\n  );\n};\n\nGaugeOverlayTooltip['displayName'] = 'GaugeOverlayTooltip';\n"],
+  "mappings": "AAkDW;AAlDX,SAAS,eAAe;AAExB,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AAExC,SAAS,4BAA4B;AACrC,SAAS,qCAAqC;AAQvC,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,WAAW,KAAK,IAAI,8BAA8B;AAC1D,QAAM,EAAE,MAAM,aAAa,SAAS,IAAI,qBAAqB;AAE7D,QAAM,aACJ,eACA,KAAK,cAAc,EAAE,gBAAgB,SAAS,IAAI,mBAAmB,CAAC;AACxE,QAAM,iBAAiB,UAAU,OAAO,IAAI;AAE5C,QAAM,cAAc;AAAA,IAClB,IAAI,GAAG,UAAU,IAAI,KAAK;AAAA,IAC1B,MAAM;AAAA,IACN,QAAQ,CAAC,cAAc;AAAA,EACzB;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,WAAW;AAAA,IACZ,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,QAAM,UACJ,cAAc,MAAM,cAAc,WAAW,IAAI;AAGnD,MAAI,UAAU;AACZ,UAAM,aAAoC;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM,OAAO,SAAS,WAAW,OAAO;AAAA,IAC1C;AACA,WAAO,oBAAC,kBAAe,UAAU,SAAS,UAAU,GAAG;AAAA,EACzD;AAEA,SACE,oBAAC,kBACC;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,22 +1,22 @@
-._18ourc20-3-8-0 {
+._18ourc20-3-9-0 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-8-0 {
+._18ourc21-3-9-0 {
   width: fit-content;
 }
-._18ourc22-3-8-0 {
+._18ourc22-3-9-0 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-8-0 {
+._18ourc23-3-9-0 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-8-0 {
+._18ourc24-3-9-0 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-8-0 {
+  ._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-8-0";
-var foreignObjectContainer = _7a468({ 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-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-8-0';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-8-0',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-8-0',hanging:'_18ourc23-3-8-0'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-8-0';"],
+  "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-8-0 {
+._1fbjcz30-3-9-0 {
   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-0 > #value-label {
   grid-area: valueLabel;
 }
-._1fbjcz30-3-8-0 > #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-8-0";
+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-8-0';"],
+  "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-8-0 {
+._l0e5zm0-3-9-0 {
   position: relative;
   height: 100%;
   z-index: 0;
 }
-._l0e5zm1-3-8-0 {
+._l0e5zm1-3-9-0 {
   cursor: default;
   user-select: none;
 }
-._l0e5zm2-3-8-0 {
+._l0e5zm2-3-9-0 {
   position: absolute;
   z-index: 1;
 }
-._l0e5zm3-3-8-0 {
+._l0e5zm3-3-9-0 {
   top: 0;
   left: 0;
   width: 100%;

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

@@ -13,12 +13,31 @@ import { LoaderOverlay } from "../../../core/components/loader-overlay/LoaderOve
 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();
@@ -39,15 +58,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);
     }
   };
@@ -70,7 +96,7 @@ const GaugeChartOverlay = (props) => {
           Flex,
           {
             className: overlayClassName,
-            onPointerMove: (event) => hover(event, data),
+            onPointerMove: handlePointerMove,
             onPointerLeave: outOfBounds,
             onClick: handleClick,
             onPointerDown: handlePointerDown,

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 {\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 { 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  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 = (event: MouseEvent<HTMLDivElement>) => {\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 (isTouchInteractionRef.current || event.target !== event.currentTarget) {\n      return;\n    }\n    togglePin(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 (isTouchInteractionRef.current && event.target === event.currentTarget) {\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={(event) => hover(event, data)}\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": "AAwFI,SAKE,KALF;AAxFJ;AAAA,EACE;AAAA,OAIK;AAEP;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,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;AAC5D,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,wBAAwB,OAAO,KAAK;AAE1C,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,QAAM,cAAc,CAAC,UAAsC;AAOzD,QAAI,sBAAsB,WAAW,MAAM,WAAW,MAAM,eAAe;AACzE;AAAA,IACF;AACA,cAAU,OAAO,IAAI;AAAA,EACvB;AAEA,QAAM,oBAAoB,CAAC,UAAwC;AACjE,0BAAsB,UAAU,MAAM,gBAAgB;AACtD,sBAAkB,QAAQ,YAAY;AAKtC,QAAI,sBAAsB,WAAW,MAAM,WAAW,MAAM,eAAe;AACzE,gBAAU,OAAO,IAAI;AAAA,IACvB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,eAAY;AAAA,MACZ,WAAW,UAAU,EAAE,YAAY,CAAC;AAAA,MAEpC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,YAAY;AAAA;AAAA,QACd;AAAA,QAEC,CAAC,eACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,eAAe,CAAC,UAAU,MAAM,OAAO,IAAI;AAAA,YAC3C,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,eAAe;AAAA,YACf,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-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 = _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-8-0',variantClassNames:{showLoading:{true:'_l0e5zm1-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var tooltipOverlay = '_l0e5zm2-3-8-0';\nexport var tooltipOverlayFull = '_l0e5zm3-3-8-0';"],
+  "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-8-0 {
+._13c0oci0-3-9-0 {
   width: 100%;
   height: 100%;
   justify-content: center;
@@ -9,7 +9,7 @@
   margin: 0;
   gap: 0;
 }
-._13c0oci1-3-8-0 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-8-0";
-var responsiveLabelContainer = "_13c0oci0-3-8-0";
+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-8-0';\nexport var responsiveLabelContainer = '_13c0oci0-3-8-0';"],
+  "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/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";
@@ -85,8 +84,7 @@ const HistogramChartInternal = forwardRef(({ config }, forwardedRef) => {
   );
   const showAxes = shouldShowAxes(chartGridHeight);
   const chartGridRenderHeight = tracksQuantity && !noLegendBottom && !showAnnotations ? chartGridHeight - OVERLAY_PADDING : chartGridHeight;
-  const annotationsPadding = tracksQuantity - numHiddenTracks > 0 ? ANNOTATIONS_PADDING_BOTTOM : 0;
-  const annotationsRowHeight = showAnnotations ? annotationsVisibleArea + annotationsPadding : 0;
+  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",

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 {\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 annotationsPadding =\n    tracksQuantity - numHiddenTracks > 0 ? ANNOTATIONS_PADDING_BOTTOM : 0;\n  const annotationsRowHeight = showAnnotations\n    ? annotationsVisibleArea + annotationsPadding\n    : 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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",
+  "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 {