@dynatrace/strato-components 3.7.1 → 3.8.0

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

@@ -22,6 +22,7 @@ __export(CanvasHexagonRenderer_exports, {
 module.exports = __toCommonJS(CanvasHexagonRenderer_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_get_hexagon_geometry = require("../../../utils/get-hexagon-geometry.js");
 var import_draw_label_and_value = require("../utils/draw-label-and-value.js");
 var import_fill_shape = require("../utils/fill-shape.js");
@@ -50,6 +51,7 @@ const CanvasHexagonRenderer = (props) => {
     labelsDisplay,
     truncationMode
   } = props;
+  const textSize = (0, import_use_honeycomb_text_size.useHoneycombTextSize)();
   const { hexagonGeometry, textArea } = (0, import_get_hexagon_geometry.getHexagonGeometry)(x, y, width);
   const draw = (0, import_react.useCallback)(
     (ctx) => {
@@ -64,21 +66,23 @@ const CanvasHexagonRenderer = (props) => {
           fillColor,
           name,
           truncationMode,
-          labelsDisplay
+          labelsDisplay,
+          textSize
         );
       }
       return false;
     },
     [
-      x,
-      y,
-      width,
       fillColor,
       strokeColor,
       labelsDisplay,
       truncationMode,
       name,
-      value
+      value,
+      hexagonGeometry,
+      radius,
+      textArea,
+      textSize
     ]
   );
   (0, import_useCanvas.useCanvas)("honeycomb-hexagon", draw);

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

@@ -22,6 +22,7 @@ __export(CanvasSquareRenderer_exports, {
 module.exports = __toCommonJS(CanvasSquareRenderer_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");
@@ -52,6 +53,7 @@ const CanvasSquareRenderer = (props) => {
     labelsDisplay,
     truncationMode
   } = props;
+  const textSize = (0, import_use_honeycomb_text_size.useHoneycombTextSize)();
   const textArea = getSquareTextArea(x, y, width);
   const draw = (0, import_react.useCallback)(
     (ctx) => {
@@ -66,7 +68,8 @@ const CanvasSquareRenderer = (props) => {
           fillColor,
           name,
           truncationMode,
-          labelsDisplay
+          labelsDisplay,
+          textSize
         );
       }
       return false;
@@ -81,7 +84,9 @@ const CanvasSquareRenderer = (props) => {
       truncationMode,
       name,
       value,
-      radius
+      radius,
+      textArea,
+      textSize
     ]
   );
   (0, import_useCanvas.useCanvas)("honeycomb-square", draw);

package/charts/honeycomb/components/canvas/utils/draw-label-and-value.d.ts

@@ -1,4 +1,5 @@
 import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';
+import type { TextSize } from '../../../../core/types/text-size.js';
 import { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';
 import type { HoneycombLabelsDisplay } from '../../../types/honeycomb.js';
-export declare const drawLabelAndValue: (ctx: CanvasRenderingContext2D, value: string | number, textArea: CanvasTextAreaProps, backgroundColor: string, name: string | undefined, truncationMode: TruncationMode | undefined, labelsDisplay: HoneycombLabelsDisplay) => void;
+export declare const drawLabelAndValue: (ctx: CanvasRenderingContext2D, value: string | number, textArea: CanvasTextAreaProps, backgroundColor: string, name: string | undefined, truncationMode: TruncationMode | undefined, labelsDisplay: HoneycombLabelsDisplay, textSize?: TextSize) => void;

package/charts/honeycomb/components/canvas/utils/draw-label-and-value.js

@@ -20,10 +20,12 @@ __export(draw_label_and_value_exports, {
   drawLabelAndValue: () => drawLabelAndValue
 });
 module.exports = __toCommonJS(draw_label_and_value_exports);
+var import_get_font_sizes = require("./get-font-sizes.js");
 var import_get_truncation_method = require("./get-truncation-method.js");
 var import_measure_node_text_content = require("./measure-node-text-content.js");
 var import_render_text_to_canvas = require("./render-text-to-canvas.js");
 var import_color_contrast = require("../../../../core/utils/color-contrast.js");
+var import_text_measure = require("../../../../core/utils/text-measure.js");
 var import_constants = require("../../../constants.js");
 const topAndBottomPadding = 2;
 const renderNameMode = ({
@@ -32,10 +34,18 @@ const renderNameMode = ({
   y,
   renderedName,
   nameHeight,
-  ableToRenderName
+  ableToRenderName,
+  labelFontSize
 }) => {
   if (ableToRenderName) {
-    (0, import_render_text_to_canvas.renderTextToCanvas)(ctx, renderedName, "label", x, y + nameHeight / 2);
+    (0, import_render_text_to_canvas.renderTextToCanvas)(
+      ctx,
+      renderedName,
+      "label",
+      x,
+      y + nameHeight / 2,
+      labelFontSize
+    );
   }
 };
 const renderValueMode = (params) => {
@@ -50,19 +60,37 @@ const renderValueMode = (params) => {
     ableToRenderName,
     textArea,
     value,
-    truncationMode
+    truncationMode,
+    labelFontSize,
+    valueFontSize,
+    labelMeasure
   } = params;
   if (ableToRenderValue) {
-    (0, import_render_text_to_canvas.renderTextToCanvas)(ctx, renderedValue, "value", x, y + valueHeight / 2);
+    (0, import_render_text_to_canvas.renderTextToCanvas)(
+      ctx,
+      renderedValue,
+      "value",
+      x,
+      y + valueHeight / 2,
+      valueFontSize
+    );
   } else if (ableToRenderName) {
     const cropValueAsLabel = (0, import_get_truncation_method.getTruncationMethod)(
-      ctx,
       textArea,
       value.toString(),
       truncationMode,
-      "label"
+      labelMeasure,
+      "label",
+      labelFontSize
+    );
+    (0, import_render_text_to_canvas.renderTextToCanvas)(
+      ctx,
+      cropValueAsLabel(),
+      "label",
+      x,
+      y + nameHeight / 2,
+      labelFontSize
     );
-    (0, import_render_text_to_canvas.renderTextToCanvas)(ctx, cropValueAsLabel(), "label", x, y + nameHeight / 2);
   }
 };
 const renderAllMode = ({
@@ -75,32 +103,74 @@ const renderAllMode = ({
   valueHeight,
   ableToRenderBoth,
   ableToRenderName,
-  ableToRenderValue
+  ableToRenderValue,
+  labelFontSize,
+  valueFontSize
 }) => {
   if (ableToRenderBoth) {
-    (0, import_render_text_to_canvas.renderTextToCanvas)(ctx, renderedName, "label", x, y - 2);
+    (0, import_render_text_to_canvas.renderTextToCanvas)(ctx, renderedName, "label", x, y - 2, labelFontSize);
     (0, import_render_text_to_canvas.renderTextToCanvas)(
       ctx,
       renderedValue,
       "value",
       x,
-      y + nameHeight + nameHeight * 0.5
+      y + nameHeight + nameHeight * 0.5,
+      valueFontSize
     );
   } else if (ableToRenderName) {
-    (0, import_render_text_to_canvas.renderTextToCanvas)(ctx, renderedName, "label", x, y + nameHeight / 2);
+    (0, import_render_text_to_canvas.renderTextToCanvas)(
+      ctx,
+      renderedName,
+      "label",
+      x,
+      y + nameHeight / 2,
+      labelFontSize
+    );
   } else if (ableToRenderValue) {
-    (0, import_render_text_to_canvas.renderTextToCanvas)(ctx, renderedValue, "value", x, y + valueHeight / 2);
+    (0, import_render_text_to_canvas.renderTextToCanvas)(
+      ctx,
+      renderedValue,
+      "value",
+      x,
+      y + valueHeight / 2,
+      valueFontSize
+    );
   }
 };
-const drawLabelAndValue = (ctx, value, textArea, backgroundColor, name = "", truncationMode = "middle", labelsDisplay) => {
+const drawLabelAndValue = (ctx, value, textArea, backgroundColor, name = "", truncationMode = "middle", labelsDisplay, textSize = import_constants.HONEYCOMB_VALUE_LABEL_FONT_SIZE) => {
+  const availableWidth = textArea.width - topAndBottomPadding * 2;
+  const availableHeight = textArea.height;
+  const { valueFontSize, labelFontSize } = (0, import_get_font_sizes.getFontSizes)(
+    ctx,
+    textSize,
+    value.toString(),
+    availableWidth,
+    availableHeight
+  );
+  const valueMeasure = (0, import_text_measure.getTextMeasurer)(ctx, valueFontSize, {
+    fontWeight: import_constants.HONEYCOMB_VALUE_FONT_WEIGHT
+  });
+  const labelMeasure = (0, import_text_measure.getTextMeasurer)(ctx, labelFontSize, {
+    fontWeight: import_constants.HONEYCOMB_LABEL_FONT_WEIGHT
+  });
   const { x, y } = textArea;
+  const croppingTextArea = { ...textArea, width: availableWidth };
   const cropNameToFit = (0, import_get_truncation_method.getTruncationMethod)(
-    ctx,
-    textArea,
+    croppingTextArea,
     name,
-    truncationMode
+    truncationMode,
+    labelMeasure,
+    "label",
+    labelFontSize
   );
-  const cropValueToFit = typeof value === "string" ? (0, import_get_truncation_method.getTruncationMethod)(ctx, textArea, value, truncationMode, "value") : () => value.toString();
+  const cropValueToFit = typeof value === "string" ? (0, import_get_truncation_method.getTruncationMethod)(
+    croppingTextArea,
+    value,
+    truncationMode,
+    valueMeasure,
+    "value",
+    valueFontSize
+  ) : () => value.toString();
   const {
     valueHeight,
     nameHeight,
@@ -110,13 +180,20 @@ const drawLabelAndValue = (ctx, value, textArea, backgroundColor, name = "", tru
     nameWidth,
     ableToRenderName,
     ableToRenderValue
-  } = (0, import_measure_node_text_content.measureNodeTextContent)(ctx, value, name, textArea);
+  } = (0, import_measure_node_text_content.measureNodeTextContent)(
+    value,
+    name,
+    textArea,
+    labelMeasure,
+    valueMeasure,
+    labelFontSize,
+    valueFontSize
+  );
   if (ableToRenderNothing) {
     return;
   }
   ctx.textAlign = import_constants.HONEYCOMB_DEFAULT_TEXT_ALIGNMENT;
   ctx.fillStyle = (0, import_color_contrast.getColorByContrast)(backgroundColor);
-  const availableWidth = textArea.width - topAndBottomPadding * 2;
   const renderParams = {
     ctx,
     x,
@@ -130,7 +207,10 @@ const drawLabelAndValue = (ctx, value, textArea, backgroundColor, name = "", tru
     ableToRenderBoth,
     textArea,
     value,
-    truncationMode
+    truncationMode,
+    labelFontSize,
+    valueFontSize,
+    labelMeasure
   };
   if (labelsDisplay === "name") {
     renderNameMode(renderParams);

package/charts/honeycomb/components/canvas/utils/get-font-sizes.d.ts

@@ -0,0 +1,5 @@
+import type { TextSize } from '../../../../core/types/text-size.js';
+export declare const getFontSizes: (ctx: CanvasRenderingContext2D, textSize: TextSize, valueText: string, availableWidth: number, availableHeight: number) => {
+    valueFontSize: number;
+    labelFontSize: number;
+};

package/charts/honeycomb/components/canvas/utils/get-font-sizes.js

@@ -0,0 +1,52 @@
+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 get_font_sizes_exports = {};
+__export(get_font_sizes_exports, {
+  getFontSizes: () => getFontSizes
+});
+module.exports = __toCommonJS(get_font_sizes_exports);
+var import_constants = require("../../../../core/constants.js");
+var import_text_measure = require("../../../../core/utils/text-measure.js");
+var import_constants2 = require("../../../constants.js");
+const getFontSizes = (ctx, textSize, valueText, availableWidth, availableHeight) => {
+  if (textSize !== "auto") {
+    return {
+      valueFontSize: textSize,
+      labelFontSize: Math.max(0, textSize - import_constants2.HONEYCOMB_LABEL_FONT_SIZE_OFFSET)
+    };
+  }
+  const measure = (0, import_text_measure.getTextMeasurer)(ctx, textSize, {
+    fontWeight: import_constants2.HONEYCOMB_VALUE_FONT_WEIGHT
+  });
+  for (let i = 0; i < import_constants.AUTO_TEXT_SIZE_PRESETS.length; i++) {
+    const valueFontSize = import_constants.AUTO_TEXT_SIZE_PRESETS[i];
+    const labelFontSize = valueFontSize - import_constants2.HONEYCOMB_LABEL_FONT_SIZE_OFFSET;
+    const totalHeight = valueFontSize + valueFontSize * import_constants2.HONEYCOMB_VALUE_LINE_HEIGHT_RATIO + labelFontSize;
+    if (measure(valueText, valueFontSize) <= availableWidth && totalHeight <= availableHeight) {
+      return {
+        valueFontSize,
+        labelFontSize
+      };
+    }
+  }
+  const smallestPreset = import_constants.AUTO_TEXT_SIZE_PRESETS.at(-1) ?? import_constants2.HONEYCOMB_LABEL_FONT_SIZE;
+  return {
+    valueFontSize: smallestPreset + import_constants2.HONEYCOMB_LABEL_FONT_SIZE_OFFSET,
+    labelFontSize: smallestPreset
+  };
+};

package/charts/honeycomb/components/canvas/utils/get-truncation-method.d.ts

@@ -1,2 +1,4 @@
+import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';
+import type { TextMeasurer } from '../../../../core/utils/text-measure.js';
 import { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';
-export declare const getTruncationMethod: (ctx: CanvasRenderingContext2D, textArea: CanvasTextAreaProps, name: string, truncationMode: "start" | "middle" | "end", contentType?: "value" | "label") => () => string;
+export declare const getTruncationMethod: (textArea: CanvasTextAreaProps, text: string, truncationMode: TruncationMode, measure: TextMeasurer, contentType?: "value" | "label", fontSize?: number) => () => string;

package/charts/honeycomb/components/canvas/utils/get-truncation-method.js

@@ -20,14 +20,84 @@ __export(get_truncation_method_exports, {
   getTruncationMethod: () => getTruncationMethod
 });
 module.exports = __toCommonJS(get_truncation_method_exports);
-var import_define_text_to_render = require("./define-text-to-render.js");
-var import_set_font_details_to_context = require("./set-font-details-to-context.js");
 var import_constants = require("../../../constants.js");
-const getTruncationMethod = (ctx, textArea, name, truncationMode, contentType = "label") => () => {
-  (0, import_set_font_details_to_context.setFontDetailsToContext)(ctx, contentType);
-  const minimumNameSizes = ctx.measureText(
-    import_constants.HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT
+const ELLIPSIS = "\u2026";
+const truncateEnd = (text, charWidths, capacity) => {
+  let kept = "";
+  let usedWidth = 0;
+  for (let i = 0; i < charWidths.length; i++) {
+    if (usedWidth + charWidths[i] > capacity) {
+      break;
+    }
+    kept += text[i];
+    usedWidth += charWidths[i];
+  }
+  return kept + ELLIPSIS;
+};
+const truncateStart = (text, charWidths, capacity) => {
+  let kept = "";
+  let usedWidth = 0;
+  for (let i = charWidths.length - 1; i >= 0; i--) {
+    if (usedWidth + charWidths[i] > capacity) {
+      break;
+    }
+    kept = text[i] + kept;
+    usedWidth += charWidths[i];
+  }
+  return ELLIPSIS + kept;
+};
+const truncateMiddle = (text, charWidths, capacity) => {
+  let head = "";
+  let headWidth = 0;
+  let tail = "";
+  let tailWidth = 0;
+  let lo = 0;
+  let hi = charWidths.length - 1;
+  let pickHead = true;
+  while (lo <= hi) {
+    if (pickHead) {
+      if (headWidth + charWidths[lo] + tailWidth > capacity) {
+        break;
+      }
+      head += text[lo];
+      headWidth += charWidths[lo++];
+    } else {
+      if (headWidth + charWidths[hi] + tailWidth > capacity) {
+        break;
+      }
+      tail = text[hi] + tail;
+      tailWidth += charWidths[hi--];
+    }
+    pickHead = !pickHead;
+  }
+  return head + ELLIPSIS + tail;
+};
+const truncateWithCanvas = (measureTextWidth, text, maxWidth, mode) => {
+  const ellipsisWidth = measureTextWidth(ELLIPSIS);
+  const capacity = maxWidth - ellipsisWidth;
+  if (capacity <= 0) {
+    return "";
+  }
+  const charWidths = Array.from(text).map((ch) => measureTextWidth(ch));
+  switch (mode) {
+    case "end":
+      return truncateEnd(text, charWidths, capacity);
+    case "start":
+      return truncateStart(text, charWidths, capacity);
+    default:
+      return truncateMiddle(text, charWidths, capacity);
+  }
+};
+const getTruncationMethod = (textArea, text, truncationMode, measure, contentType = "label", fontSize) => () => {
+  const resolvedFontSize = fontSize ?? (contentType === "value" ? import_constants.HONEYCOMB_VALUE_LABEL_FONT_SIZE : import_constants.HONEYCOMB_LABEL_FONT_SIZE);
+  const measureTextWidth = (textValue) => measure(textValue, resolvedFontSize);
+  if (measureTextWidth(text) <= textArea.width) {
+    return text;
+  }
+  return truncateWithCanvas(
+    measureTextWidth,
+    text,
+    textArea.width,
+    truncationMode
   );
-  const ellipsisMinWidth = minimumNameSizes.width;
-  return ellipsisMinWidth > textArea.width ? "" : (0, import_define_text_to_render.defineTextToRender)(name, truncationMode, textArea, contentType);
 };

package/charts/honeycomb/components/canvas/utils/measure-node-text-content.d.ts

@@ -1,5 +1,6 @@
+import type { TextMeasurer } from '../../../../core/utils/text-measure.js';
 import { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';
-export declare const measureNodeTextContent: (ctx: CanvasRenderingContext2D, value: string | number, name: string, textArea: CanvasTextAreaProps) => {
+export declare const measureNodeTextContent: (value: string | number, name: string, textArea: CanvasTextAreaProps, labelMeasure: TextMeasurer, valueMeasure: TextMeasurer, labelFontSize?: number, valueFontSize?: number) => {
     valueHeight: number;
     nameHeight: number;
     ableToRenderNothing: boolean;

package/charts/honeycomb/components/canvas/utils/measure-node-text-content.js

@@ -20,26 +20,23 @@ __export(measure_node_text_content_exports, {
   measureNodeTextContent: () => measureNodeTextContent
 });
 module.exports = __toCommonJS(measure_node_text_content_exports);
-var import_set_font_details_to_context = require("./set-font-details-to-context.js");
 var import_constants = require("../../../constants.js");
-const measureNodeTextContent = (ctx, value, name, textArea) => {
-  (0, import_set_font_details_to_context.setFontDetailsToContext)(ctx, "label");
-  const nameSizes = ctx.measureText(name);
-  const minNameWidth = ctx.measureText(
-    import_constants.HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT
-  ).width;
-  (0, import_set_font_details_to_context.setFontDetailsToContext)(ctx, "value");
-  const valueSizes = ctx.measureText(value.toString());
-  const minValueWidth = ctx.measureText(
-    import_constants.HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT
-  ).width;
-  const valueHeight = import_constants.HONEYCOMB_VALUE_LABEL_FONT_SIZE;
-  const valueWidth = valueSizes.width;
+const measureNodeTextContent = (value, name, textArea, labelMeasure, valueMeasure, labelFontSize = import_constants.HONEYCOMB_LABEL_FONT_SIZE, valueFontSize = import_constants.HONEYCOMB_VALUE_LABEL_FONT_SIZE) => {
+  const nameWidth = labelMeasure(name, labelFontSize);
+  const minNameWidth = labelMeasure(
+    import_constants.HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,
+    labelFontSize
+  );
+  const valueWidth = valueMeasure(value.toString(), valueFontSize);
+  const minValueWidth = valueMeasure(
+    import_constants.HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,
+    valueFontSize
+  );
+  const valueHeight = valueFontSize;
   const isValueHeightFitting = valueHeight < textArea.height;
   const ableToRenderValue = isValueHeightFitting && typeof value === "string" ? textArea.width > minValueWidth : valueWidth < textArea.width;
-  const nameHeight = import_constants.HONEYCOMB_LABEL_FONT_SIZE;
+  const nameHeight = labelFontSize;
   const isNameHeightFitting = nameHeight < textArea.height;
-  const nameWidth = nameSizes.width;
   const ableToRenderName = isNameHeightFitting && textArea.width > minNameWidth;
   const totalHeight = valueHeight + valueHeight * 0.5 + nameHeight;
   const ableToRenderNothing = !ableToRenderValue && !ableToRenderName;

package/charts/honeycomb/components/canvas/utils/render-text-to-canvas.d.ts

@@ -1 +1 @@
-export declare const renderTextToCanvas: (ctx: CanvasRenderingContext2D, text: string, type: "value" | "label", x: number, y: number) => void;
+export declare const renderTextToCanvas: (ctx: CanvasRenderingContext2D, text: string, type: "value" | "label", x: number, y: number, fontSize?: number) => void;

package/charts/honeycomb/components/canvas/utils/render-text-to-canvas.js

@@ -21,7 +21,7 @@ __export(render_text_to_canvas_exports, {
 });
 module.exports = __toCommonJS(render_text_to_canvas_exports);
 var import_set_font_details_to_context = require("./set-font-details-to-context.js");
-const renderTextToCanvas = (ctx, text, type, x, y) => {
-  (0, import_set_font_details_to_context.setFontDetailsToContext)(ctx, type);
+const renderTextToCanvas = (ctx, text, type, x, y, fontSize) => {
+  (0, import_set_font_details_to_context.setFontDetailsToContext)(ctx, type, fontSize);
   ctx.fillText(text, x, y);
 };

package/charts/honeycomb/components/canvas/utils/set-font-details-to-context.d.ts

@@ -1 +1 @@
-export declare const setFontDetailsToContext: (ctx: CanvasRenderingContext2D, type: "value" | "label") => string;
+export declare const setFontDetailsToContext: (ctx: CanvasRenderingContext2D, type: "value" | "label", fontSize?: number) => void;

package/charts/honeycomb/components/canvas/utils/set-font-details-to-context.js

@@ -22,12 +22,14 @@ __export(set_font_details_to_context_exports, {
 module.exports = __toCommonJS(set_font_details_to_context_exports);
 var import_get_font_details = require("../../../../core/utils/get-font-details.js");
 var import_constants = require("../../../constants.js");
-const setFontDetailsToContext = (ctx, type) => type === "label" ? ctx.font = (0, import_get_font_details.getFontDetails)(
-  import_constants.HONEYCOMB_LABEL_FONT_WEIGHT,
-  import_constants.HONEYCOMB_LABEL_FONT_SIZE,
-  import_constants.HONEYCOMB_LABEL_LINE_HEIGHT
-) : ctx.font = (0, import_get_font_details.getFontDetails)(
-  import_constants.HONEYCOMB_VALUE_FONT_WEIGHT,
-  import_constants.HONEYCOMB_VALUE_LABEL_FONT_SIZE,
-  import_constants.HONEYCOMB_VALUE_LINE_HEIGHT
-);
+const setFontDetailsToContext = (ctx, type, fontSize) => {
+  if (type === "label") {
+    const size = fontSize ?? import_constants.HONEYCOMB_LABEL_FONT_SIZE;
+    const lineHeight = Math.round(size * (import_constants.HONEYCOMB_LABEL_LINE_HEIGHT / import_constants.HONEYCOMB_LABEL_FONT_SIZE));
+    ctx.font = (0, import_get_font_details.getFontDetails)(import_constants.HONEYCOMB_LABEL_FONT_WEIGHT, size, lineHeight);
+  } else {
+    const size = fontSize ?? import_constants.HONEYCOMB_VALUE_LABEL_FONT_SIZE;
+    const lineHeight = Math.round(size * (import_constants.HONEYCOMB_VALUE_LINE_HEIGHT / import_constants.HONEYCOMB_VALUE_LABEL_FONT_SIZE));
+    ctx.font = (0, import_get_font_details.getFontDetails)(import_constants.HONEYCOMB_VALUE_FONT_WEIGHT, size, lineHeight);
+  }
+};

package/charts/honeycomb/components/toolbar/HoneycombToolbar.js

@@ -28,10 +28,8 @@ var import_useTooltipReducer = require("../../../core/components/overlay-tooltip
 var import_ChartToolbarRenderer = require("../../../core/components/toolbar/ChartToolbarRenderer.js");
 var import_use_honeycomb_data = require("../../hooks/use-honeycomb-data.js");
 var import_use_honeycomb_toolbar_config = require("../../hooks/use-honeycomb-toolbar-config.js");
-var import_selectors = require("../../store/selectors.js");
 var import_build_and_download_csv = require("../../utils/build-and-download-csv.js");
 const HoneycombToolbar = () => {
-  const toolbarVisible = (0, import_selectors.useHoneycombToolbarVisibleState)();
   const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
   const toolbarConfig = (0, import_use_honeycomb_toolbar_config.useHoneycombToolbarConfig)();
   const rawData = (0, import_use_honeycomb_data.useHoneycombData)();
@@ -53,7 +51,7 @@ const HoneycombToolbar = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartToolbarRenderer.ChartToolbarRenderer,
     {
-      visible: toolbarVisible,
+      visibleWhenMouseInBounds: true,
       collapsed: toolbarConfig.collapsed,
       draggable: true,
       placement: toolbarConfig.placement || defaultToolbarPlacement,

package/charts/honeycomb/constants.d.ts

@@ -3,6 +3,7 @@ import { type HoneycombDatasetType, type HoneycombLabelsDisplay } from './types/
 import { HiveTileBestFitProps } from './types/rendering.js';
 import { HoneycombState } from './types/state.js';
 import { type LegendPosition } from '../core/types/legend.js';
+import type { TextSize } from '../core/types/text-size.js';
 export declare const DISPLAY_NAME = "HoneycombChart";
 export declare const DEFAULT_DATASET_TYPE: HoneycombDatasetType;
 export declare const DEFAULT_HONEYCOMB_WIDTH = "100%";
@@ -33,10 +34,6 @@ export declare const NOT_HOVERED_TILE_OPACITY = 0.2;
 export declare const HOVERED_TILE_OPACITY = 1;
 export declare const DEFAULT_LEGEND_POSITION: LegendPosition;
 export declare const DEFAULT_HONEYCOMB_LABELS_DISPLAY: HoneycombLabelsDisplay;
-export declare const DEFAULT_HONEYCOMB_CONFIG: HoneycombRequiredConfigProps;
-export declare const DEFAULT_TILE_NAME = "node";
-export declare const initialState: HoneycombState;
-export declare const bestFitInitialState: HiveTileBestFitProps;
 export declare const MAX_GAP_SIZE = 16;
 export declare const HONEYCOMB_LABEL_FONT_SIZE = 12;
 export declare const HONEYCOMB_VALUE_LABEL_FONT_SIZE = 16;
@@ -44,6 +41,13 @@ export declare const HONEYCOMB_LABEL_FONT_WEIGHT = 400;
 export declare const HONEYCOMB_VALUE_FONT_WEIGHT = 500;
 export declare const HONEYCOMB_LABEL_LINE_HEIGHT = 20;
 export declare const HONEYCOMB_VALUE_LINE_HEIGHT = 28;
+export declare const HONEYCOMB_LABEL_FONT_SIZE_OFFSET = 4;
+export declare const HONEYCOMB_VALUE_LINE_HEIGHT_RATIO = 0.5;
 export declare const HONEYCOMB_DEFAULT_TEXT_ALIGNMENT = "center";
 export declare const HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT = "w...w";
 export declare const HONEYCOMB_CHART_ARIA_LABEL = "Honeycomb Chart";
+export declare const DEFAULT_TEXT_SIZE: TextSize;
+export declare const DEFAULT_HONEYCOMB_CONFIG: HoneycombRequiredConfigProps;
+export declare const DEFAULT_TILE_NAME = "node";
+export declare const initialState: HoneycombState;
+export declare const bestFitInitialState: HiveTileBestFitProps;