@dynatrace/strato-components 3.7.1 → 3.8.0

package/charts/gantt-chart/GanttChartLine.css

@@ -1,4 +1,4 @@
-._1pk2ed10-3-7-1 {
+._1pk2ed10-3-8-0 {
   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-7-1";
+var wrapper = "_1pk2ed10-3-8-0";

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

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

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

@@ -21,7 +21,6 @@ __export(GanttChartLineRenderer_exports, {
 });
 module.exports = __toCommonJS(GanttChartLineRenderer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_group = require("@visx/group");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
 var import_GanttChartLineRenderer_css = require("./GanttChartLineRenderer.sty.js");
@@ -101,7 +100,7 @@ const _GanttChartLineRenderer = (0, import_react.forwardRef)((props, forwardedRe
           },
           index
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_group.Group, { children: segmentsData.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: segmentsData.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_GanttSegment.GanttSegment,
           {
             containerWidth: width,

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-7-1";
+var svgWrapperCSS = "_mnxak30-3-8-0";

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

@@ -1,4 +1,4 @@
-._1v8s3xl0-3-7-1._1v8s3xl0-3-7-1 {
+._1v8s3xl0-3-8-0._1v8s3xl0-3-8-0 {
   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-7-1";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-8-0";

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

@@ -1,4 +1,4 @@
-._ezp7cy0-3-7-1 {
+._ezp7cy0-3-8-0 {
   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-7-1";
+var layoutContainer = "_ezp7cy0-3-8-0";

package/charts/gauge/components/GaugeChartLayout/GaugeChartToolbar.d.ts

@@ -1,7 +1,9 @@
 import type { IntentProps } from '../../../../core/slots/Intent/Intent.js';
+import type { ChartToolbarRendererProps } from '../../../core/components/toolbar/types.js';
 import type { CompactToolbarProps } from '../../../core/slots/toolbar/CompactToolbar.js';
 export type GaugeChartToolbarProps = {
     intents: IntentProps[];
     toolbar: Required<CompactToolbarProps>;
+    handlerRef?: ChartToolbarRendererProps['handlerRef'];
 };
 export declare const GaugeChartToolbar: (props: GaugeChartToolbarProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -27,14 +27,13 @@ var import_zoom = require("../../../core/utils/zoom.js");
 var import_constants = require("../../constants.js");
 const GaugeChartToolbar = (props) => {
   const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
-  const { intents, toolbar } = props;
+  const { intents, toolbar, handlerRef } = props;
   if (toolbar.hidden) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartToolbarRenderer.ChartToolbarRenderer,
     {
-      visible: false,
       collapsed: false,
       draggable: true,
       placement: toolbar.placement,
@@ -47,6 +46,7 @@ const GaugeChartToolbar = (props) => {
       toolbarDisplayMode: "overlay",
       removeDragHandle: true,
       visibleWhenMouseInBounds: true,
+      handlerRef,
       onToggleMenu: (isOpen) => {
         if (isOpen) {
           dispatch({ type: "RESET_TOOLTIP" })();

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

@@ -1,22 +1,22 @@
-._18ourc20-3-7-1 {
+._18ourc20-3-8-0 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-7-1 {
+._18ourc21-3-8-0 {
   width: fit-content;
 }
-._18ourc22-3-7-1 {
+._18ourc22-3-8-0 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-7-1 {
+._18ourc23-3-8-0 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-7-1 {
+._18ourc24-3-8-0 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-7-1 {
+  ._18ourc24-3-8-0 {
     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-7-1";
-var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ 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-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";

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

@@ -1,4 +1,4 @@
-._1fbjcz30-3-7-1 {
+._1fbjcz30-3-8-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-8-0 > #value-label {
   grid-area: valueLabel;
 }
-._1fbjcz30-3-7-1 > #label {
+._1fbjcz30-3-8-0 > #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-7-1";
+var labelsContainer = "_1fbjcz30-3-8-0";

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

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

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

@@ -21,11 +21,13 @@ __export(GaugeLayoutOverlay_exports, {
 });
 module.exports = __toCommonJS(GaugeLayoutOverlay_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_GaugeLayoutOverlay_css = require("./GaugeLayoutOverlay.sty.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_LoaderOverlay = require("../../../core/components/loader-overlay/LoaderOverlay.js");
 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_GaugeChartTooltipContext = require("../../contexts/GaugeChartTooltipContext.js");
 var import_useGaugeChartTooltipOverlayBounds = require("../../hooks/useGaugeChartTooltipOverlayBounds.js");
 var import_GaugeChartToolbar = require("../GaugeChartLayout/GaugeChartToolbar.js");
@@ -36,6 +38,8 @@ const GaugeChartOverlay = (props) => {
   const overlayBounds = (0, import_useGaugeChartTooltipOverlayBounds.useGaugeChartTooltipOverlayBounds)();
   const { name: tooltipName, hidden: tooltipHidden } = (0, import_GaugeChartTooltipContext.useGaugeChartTooltip)();
   const { hover, togglePin, outOfBounds } = (0, import_useTooltipActions.useTooltipActions)();
+  const toolbarHandlerRef = (0, import_useToolbarHandlerRef.useToolbarHandlerRef)();
+  const isTouchInteractionRef = (0, import_react.useRef)(false);
   const data = {
     geometry: "meterbar",
     series: [{ name: tooltipName ?? "Value", value, color }]
@@ -47,6 +51,19 @@ const GaugeChartOverlay = (props) => {
     width: overlayBounds.width,
     height: overlayBounds.height
   } : void 0;
+  const handleClick = (event) => {
+    if (isTouchInteractionRef.current || event.target !== event.currentTarget) {
+      return;
+    }
+    togglePin(event, data);
+  };
+  const handlePointerDown = (event) => {
+    isTouchInteractionRef.current = event.pointerType === "touch";
+    toolbarHandlerRef.current.handleFocus();
+    if (isTouchInteractionRef.current && event.target === event.currentTarget) {
+      togglePin(event, data);
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Flex.Flex,
     {
@@ -54,14 +71,22 @@ const GaugeChartOverlay = (props) => {
       "data-testid": "gauge-overlay-wrapper",
       className: (0, import_GaugeLayoutOverlay_css.container)({ showLoading }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartToolbar.GaugeChartToolbar, { intents, toolbar }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_GaugeChartToolbar.GaugeChartToolbar,
+          {
+            intents,
+            toolbar,
+            handlerRef: toolbarHandlerRef
+          }
+        ),
         !showLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_Flex.Flex,
           {
             className: overlayClassName,
             onPointerMove: (event) => hover(event, data),
             onPointerLeave: outOfBounds,
-            onClick: (event) => togglePin(event, data),
+            onClick: handleClick,
+            onPointerDown: handlePointerDown,
             style: overlayStyle,
             children: !tooltipHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeOverlayTooltip.GaugeOverlayTooltip, { value, color })
           }

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-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 = (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";

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

@@ -1,4 +1,4 @@
-._13c0oci0-3-7-1 {
+._13c0oci0-3-8-0 {
   width: 100%;
   height: 100%;
   justify-content: center;
@@ -9,7 +9,7 @@
   margin: 0;
   gap: 0;
 }
-._13c0oci1-3-7-1 svg {
+._13c0oci1-3-8-0 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-7-1";
-var responsiveLabelContainer = "_13c0oci0-3-7-1";
+var parentSvgStyle = "_13c0oci1-3-8-0";
+var responsiveLabelContainer = "_13c0oci0-3-8-0";

package/charts/histogram/HistogramChart.d.ts

@@ -1,8 +1,8 @@
 import { type PropsWithChildren } from 'react';
 import type { HistogramChartProps } from './types/histogram-props.js';
 import type { HistogramChartRef } from './types/histogram-ref.js';
-import type { _XYChartAdoptionProps } from '../xy-chart-adoption/types/props.js';
-export declare const HistogramChartSwitcher: (props: HistogramChartProps & _XYChartAdoptionProps & {
+import type { _XYChartLegacyProps } from '../xy-chart-adoption/shared/types/legacy-props.js';
+export declare const HistogramChartSwitcher: (props: HistogramChartProps & _XYChartLegacyProps & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HistogramChartRef>) => import("react").ReactElement | null;
 /**
@@ -13,7 +13,7 @@ export declare const HistogramChartSwitcher: (props: HistogramChartProps & _XYCh
  * where the height of the bar reflects the frequency or count of data points within that interval
  * @public
  */
-export declare const HistogramChart: ((props: HistogramChartProps & _XYChartAdoptionProps & {
+export declare const HistogramChart: ((props: HistogramChartProps & _XYChartLegacyProps & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HistogramChartRef>) => import("react").ReactElement | null) & {
     XAxis: {

package/charts/histogram/HistogramChart.js

@@ -43,14 +43,13 @@ var import_Intent = require("../../core/slots/Intent/Intent.js");
 var import_EmptyStateSlot = require("../core/slots/chart-states/EmptyStateSlot.js");
 var import_ErrorStateSlot = require("../core/slots/chart-states/ErrorStateSlot.js");
 var import_ColorRule = require("../core/slots/ColorRule.js");
-var import_is_feature_enabled = require("../core/utils/is-feature-enabled.js");
 var import_HistogramToXY = require("../xy-chart-adoption/histogram/HistogramToXY.js");
 const HistogramChartSwitcher = (0, import_react.forwardRef)((props, forwardedRef) => {
-  const { __useXYAdoption, ...rest } = props;
-  if (__useXYAdoption ?? (0, import_is_feature_enabled.isFeatureEnabled)("histogramToXY")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramToXY.HistogramToXY, { ...rest, ref: forwardedRef });
+  const { __useLegacy, ...rest } = props;
+  if (__useLegacy) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramChartRoot.HistogramChartRoot, { ...rest, ref: forwardedRef });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramChartRoot.HistogramChartRoot, { ...rest, ref: forwardedRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramToXY.HistogramToXY, { ...rest, ref: forwardedRef });
 });
 HistogramChartSwitcher.displayName = "HistogramChart";
 const HistogramChart = Object.assign(HistogramChartSwitcher, {

package/charts/histogram/HistogramChartInternal.js

@@ -50,11 +50,12 @@ var import_defaultChartValues_css = require("../../core/styles/defaultChartValue
 var import_constants2 = 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_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_constants3 = require("../core/components/data-point/constants.js");
+var import_constants4 = 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}"
@@ -73,7 +74,6 @@ const HistogramChartInternal = (0, import_react.forwardRef)(({ config }, forward
     annotations?.visibleTracksLimit,
     numHiddenTracks
   );
-  const histogramGridTemplateRows = `minmax(0, ${annotationsVisibleArea + (tracksQuantity ? import_constants.ANNOTATIONS_PADDING_BOTTOM : 0)}px) minmax(60%, 1fr) minmax(0, auto)`;
   const { leftThreshold, rightThreshold } = (0, import_useHistogramThresholds.useHistogramThresholds)();
   const hasThresholds = !(0, import_lodash_es.isEmpty)(leftThreshold) || !(0, import_lodash_es.isEmpty)(rightThreshold);
   const { width, height } = (0, import_useGraphSize.useGraphSize)();
@@ -91,12 +91,21 @@ const HistogramChartInternal = (0, import_react.forwardRef)(({ config }, forward
   const noLegendRight = legendHidden || orientation === "vertical";
   const noLegendBottom = legendHidden || orientation === "horizontal";
   const hasRightPadding = noAxisRight && noLegendRight;
-  const chartGridHeight = height - (!tracksQuantity || noLegendBottom ? import_constants3.OVERLAY_PADDING + import_constants3.BOTTOM_PADDING_ADJUSTMENT : 0);
+  const chartGridHeight = height - (!tracksQuantity || noLegendBottom ? import_constants4.OVERLAY_PADDING + import_constants4.BOTTOM_PADDING_ADJUSTMENT : 0);
+  const showAnnotations = (0, import_constants3.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 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: !tracksQuantity ? import_constants3.OVERLAY_PADDING : 0,
+        paddingTop: showAnnotations ? 0 : import_constants4.OVERLAY_PADDING,
         paddingLeft: 0
       },
       className: import_defaultChartValues_css.defaultChartSize,
@@ -105,8 +114,8 @@ const HistogramChartInternal = (0, import_react.forwardRef)(({ config }, forward
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ChartGridRoot.ChartGrid,
         {
-          width: availableWidth - (hasRightPadding ? import_constants3.OVERLAY_PADDING : 0),
-          height: chartGridHeight,
+          width: availableWidth - (hasRightPadding ? import_constants4.OVERLAY_PADDING : 0),
+          height: chartGridRenderHeight,
           gridTemplateAreas: histogramGridTemplateAreas,
           gridTemplateColumns: histogramGridTemplateColumns,
           gridTemplateRows: histogramGridTemplateRows,
@@ -119,13 +128,13 @@ const HistogramChartInternal = (0, import_react.forwardRef)(({ config }, forward
               forwardedRef,
               chartRef,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramValueLeftAxisArea.HistogramValueLeftAxisArea, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramValueBottomAxisArea.HistogramValueBottomAxisArea, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramValueRightAxisArea.HistogramValueRightAxisArea, {}),
-                !!tracksQuantity && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramAnnotationsArea.HistogramAnnotationsArea, {}),
+                showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramValueLeftAxisArea.HistogramValueLeftAxisArea, {}),
+                showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramValueBottomAxisArea.HistogramValueBottomAxisArea, {}),
+                showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramValueRightAxisArea.HistogramValueRightAxisArea, {}),
+                showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramAnnotationsArea.HistogramAnnotationsArea, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartGridRoot.ChartGrid.PlotArea, { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramChartPlot.HistogramChartPlot, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramAnnotationsIndicators.HistogramAnnotationsIndicators, {}),
+                  showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistogramAnnotationsIndicators.HistogramAnnotationsIndicators, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThresholdIndicators.ThresholdIndicators, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_ChartLoaderOverlay.ChartLoaderOverlay,

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

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

package/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.sty.js

@@ -21,4 +21,4 @@ __export(HistogramValueBottomAxisArea_css_exports, {
 });
 module.exports = __toCommonJS(HistogramValueBottomAxisArea_css_exports);
 var import_HistogramValueBottomAxisArea_css_ts_vanilla = require("./HistogramValueBottomAxisArea.css");
-var axisContainerStyle = "_9phcbi0-3-7-1";
+var axisContainerStyle = "_9phcbi0-3-8-0";

package/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.css

@@ -1,4 +1,4 @@
-._fzvydv0-3-7-1 {
+._fzvydv0-3-8-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }

package/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.sty.js

@@ -21,4 +21,4 @@ __export(HistogramTooltip_css_exports, {
 });
 module.exports = __toCommonJS(HistogramTooltip_css_exports);
 var import_HistogramTooltip_css_ts_vanilla = require("./HistogramTooltip.css");
-var wrapper = "_fzvydv0-3-7-1";
+var wrapper = "_fzvydv0-3-8-0";

package/charts/histogram/components/overlays/HistogramOverlays.css

@@ -1,4 +1,4 @@
-._drl8ns0-3-7-1 {
+._drl8ns0-3-8-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._drl8ns1-3-7-1 {
+._drl8ns1-3-8-0 {
   pointer-events: none;
   overflow: visible;
   z-index: 1;

package/charts/histogram/components/overlays/HistogramOverlays.sty.js

@@ -23,5 +23,5 @@ __export(HistogramOverlays_css_exports, {
 module.exports = __toCommonJS(HistogramOverlays_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_HistogramOverlays_css_ts_vanilla = require("./HistogramOverlays.css");
-var crosshairLayout = "_drl8ns1-3-7-1 _13lzg4k0-3-7-1";
-var datapointLayout = "_drl8ns0-3-7-1 _13lzg4k0-3-7-1";
+var crosshairLayout = "_drl8ns1-3-8-0 _13lzg4k0-3-8-0";
+var datapointLayout = "_drl8ns0-3-8-0 _13lzg4k0-3-8-0";

package/charts/honeycomb/HoneycombChart.css

@@ -1,3 +1,3 @@
-._p8cogi0-3-7-1 {
+._p8cogi0-3-8-0 {
   position: relative;
 }

package/charts/honeycomb/HoneycombChart.js

@@ -41,6 +41,7 @@ var import_honeycomb_formatter_context = require("./context/honeycomb-formatter.
 var import_honeycomb_labels_display_context = require("./context/honeycomb-labels-display.context.js");
 var import_honeycomb_loading_context = require("./context/honeycomb-loading.context.js");
 var import_honeycomb_shape_context = require("./context/honeycomb-shape.context.js");
+var import_honeycomb_text_size_context = require("./context/honeycomb-text-size.context.js");
 var import_honeycomb_truncation_mode_context = require("./context/honeycomb-truncation-mode.context.js");
 var import_use_honeycomb_chart_config = require("./hooks/use-honeycomb-chart-config.js");
 var import_honeycomb_base_scale_provider = require("./providers/honeycomb-base-scale.provider.js");
@@ -54,6 +55,8 @@ var import_HoneycombLegend = require("./slots/HoneycombLegend.js");
 var import_Toolbar = require("./slots/Toolbar.js");
 var import_Tooltip = require("./slots/Tooltip.js");
 var import_build_and_download_csv = require("./utils/build-and-download-csv.js");
+var import_build_honeycomb_config = require("./utils/build-honeycomb-config.js");
+var import_normalize_honeycomb_chart_data = require("./utils/normalize-honeycomb-chart-data.js");
 var import_normalize_tiles_data = require("./utils/normalize-tiles-data.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
@@ -93,7 +96,7 @@ const _HoneycombChart = (0, import_react.forwardRef)((props, forwardedRef) => {
     forwardedRef,
     containerRef
   ]);
-  const sanitizedData = (0, import_normalize_tiles_data.normalizeTilesData)(data);
+  const sanitizedData = (0, import_build_honeycomb_config.isHoneycombChartAccessorDataProps)(props) ? (0, import_normalize_honeycomb_chart_data.normalizeHoneycombChartData)(data, props.valueAccessor) : (0, import_normalize_tiles_data.normalizeTilesData)(data);
   const config = (0, import_use_honeycomb_chart_config.useHoneycombChartConfig)(props);
   const formatterContext = {
     formatter: config.formatter,
@@ -131,7 +134,7 @@ const _HoneycombChart = (0, import_react.forwardRef)((props, forwardedRef) => {
         import_honeycomb_labels_display_context.HoneycombLabelsDisplayContext.Provider,
         {
           value: config.labelsDisplay,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_honeycomb_text_size_context.HoneycombTextSizeContext.Provider, { value: config.textSize, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_honeycomb_filtered_data_provider.HoneycombFilteredDataProvider,
             {
               data: sanitizedData,
@@ -148,7 +151,7 @@ const _HoneycombChart = (0, import_react.forwardRef)((props, forwardedRef) => {
                 }
               ) }) })
             }
-          )
+          ) })
         }
       ) }) }) }) }) }) })
     }

package/charts/honeycomb/HoneycombChart.sty.js

@@ -21,4 +21,4 @@ __export(HoneycombChart_css_exports, {
 });
 module.exports = __toCommonJS(HoneycombChart_css_exports);
 var import_HoneycombChart_css_ts_vanilla = require("./HoneycombChart.css");
-var graphContainer = "_p8cogi0-3-7-1";
+var graphContainer = "_p8cogi0-3-8-0";

package/charts/honeycomb/components/HiveOverlay.css

@@ -1,4 +1,4 @@
-._lmrhfg0-3-7-1 {
+._lmrhfg0-3-8-0 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/honeycomb/components/HiveOverlay.js

@@ -36,12 +36,7 @@ const HiveOverlay = () => {
   const toolbarConfig = (0, import_use_honeycomb_toolbar_config.useHoneycombToolbarConfig)();
   const toolbarEnabled = (0, import_is_toolbar_enabled.isToolbarEnabled)(toolbarConfig);
   const overlay = (0, import_OverlayContext.useOverlay)();
-  const {
-    handlePointerEnter,
-    handlePointerMove,
-    handlePointerLeave,
-    handleMouseClick
-  } = (0, import_use_overlay_events.useOverlayEvents)(overlay);
+  const eventHandlers = (0, import_use_overlay_events.useOverlayEvents)(overlay);
   const { height, width } = (0, import_useGraphSize.useGraphSize)();
   const { chartSeriesActions } = (0, import_ChartSeriesActionContext.useSeriesActions)();
   const data = (0, import_useTooltipData.useTooltipData)().data;
@@ -56,11 +51,8 @@ const HiveOverlay = () => {
         width
       },
       "data-testid": "honeycomb-overlay",
-      onPointerEnter: handlePointerEnter,
-      onPointerMove: handlePointerMove,
-      onPointerLeave: handlePointerLeave,
-      onClick: handleMouseClick,
       ref: overlay.overlayRef,
+      ...eventHandlers,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_HoneycombOverlayTooltip.HoneycombOverlayTooltip,

package/charts/honeycomb/components/HiveOverlay.sty.js

@@ -21,4 +21,4 @@ __export(HiveOverlay_css_exports, {
 });
 module.exports = __toCommonJS(HiveOverlay_css_exports);
 var import_HiveOverlay_css_ts_vanilla = require("./HiveOverlay.css");
-var overlay = "_lmrhfg0-3-7-1";
+var overlay = "_lmrhfg0-3-8-0";

package/charts/honeycomb/components/canvas/HiveCanvasLayout.css

@@ -1,4 +1,4 @@
-._12htcxh0-3-7-1 {
+._12htcxh0-3-8-0 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/honeycomb/components/canvas/HiveCanvasLayout.sty.js

@@ -21,4 +21,4 @@ __export(HiveCanvasLayout_css_exports, {
 });
 module.exports = __toCommonJS(HiveCanvasLayout_css_exports);
 var import_HiveCanvasLayout_css_ts_vanilla = require("./HiveCanvasLayout.css");
-var canvasContainer = "_12htcxh0-3-7-1";
+var canvasContainer = "_12htcxh0-3-8-0";

package/charts/honeycomb/components/canvas/renderers/CanvasCircleRenderer.js

@@ -22,6 +22,7 @@ __export(CanvasCircleRenderer_exports, {
 module.exports = __toCommonJS(CanvasCircleRenderer_exports);
 var import_react = require("react");
 var import_useCanvas = require("../../../../core/components/canvas/hooks/useCanvas.js");
+var import_use_honeycomb_text_size = require("../../../hooks/use-honeycomb-text-size.js");
 var import_draw_label_and_value = require("../utils/draw-label-and-value.js");
 var import_fill_shape = require("../utils/fill-shape.js");
 var import_remove_transparent_border = require("../utils/remove-transparent-border.js");
@@ -53,6 +54,7 @@ const CanvasCircleRenderer = (props) => {
     labelsDisplay,
     truncationMode
   } = props;
+  const textSize = (0, import_use_honeycomb_text_size.useHoneycombTextSize)();
   const squareSideSize = getCircumscribedSquare(radius);
   const textArea = getCircleTextArea(x, y, squareSideSize);
   const draw = (0, import_react.useCallback)(
@@ -68,7 +70,8 @@ const CanvasCircleRenderer = (props) => {
           fillColor,
           name,
           truncationMode,
-          labelsDisplay
+          labelsDisplay,
+          textSize
         );
       }
       return false;
@@ -82,7 +85,9 @@ const CanvasCircleRenderer = (props) => {
       labelsDisplay,
       truncationMode,
       name,
-      value
+      value,
+      textArea,
+      textSize
     ]
   );
   (0, import_useCanvas.useCanvas)("honeycomb-circle", draw);