@dynatrace/strato-components 3.7.1 → 3.8.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/honeycomb/components/canvas/renderers/CanvasHexagonRenderer.tsx"],
-  "sourcesContent": ["import { useCallback } from 'react';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useCanvas } from '../../../../core/components/canvas/hooks/useCanvas.js';\nimport { Point } from '../../../../core/types/point.js';\nimport type { HoneycombLabelsDisplay } from '../../../types/honeycomb.js';\nimport { getHexagonGeometry } from '../../../utils/get-hexagon-geometry.js';\nimport { drawLabelAndValue } from '../utils/draw-label-and-value.js';\nimport { fillShape } from '../utils/fill-shape.js';\nimport { removeTransparentBorder } from '../utils/remove-transparent-border.js';\nimport { shouldRenderLabels } from '../utils/should-render-labels.js';\n\ninterface CanvasHexagonRendererProps {\n  x: number;\n  y: number;\n  width: number;\n  fillColor: string;\n  value: string | number;\n  name?: string;\n  strokeColor?: 'transparent' | string;\n  radius?: number;\n  labelsDisplay?: HoneycombLabelsDisplay;\n  truncationMode?: TruncationMode;\n}\n\nconst createHexagonPath = (\n  ctx: CanvasRenderingContext2D,\n  hexagonGeometry: Point[],\n  radius: number,\n) => {\n  ctx.beginPath();\n  // Web-kit browsers need to move to the initial point to avoid weird behavior: APPDEV-8494\n  ctx.moveTo(hexagonGeometry[0].x, hexagonGeometry[0].y);\n  for (let i = 0; i < hexagonGeometry.length; i += 2) {\n    const vertex = hexagonGeometry[i];\n    const lineBisect = hexagonGeometry[i + 1];\n\n    ctx.arcTo(vertex.x, vertex.y, lineBisect.x, lineBisect.y, radius);\n  }\n  ctx.closePath();\n};\n\nexport const CanvasHexagonRenderer = (props: CanvasHexagonRendererProps) => {\n  const {\n    x,\n    y,\n    name,\n    value,\n    width,\n    fillColor,\n    strokeColor = fillColor,\n    radius = 0,\n    labelsDisplay,\n    truncationMode,\n  } = props;\n  const { hexagonGeometry, textArea } = getHexagonGeometry(x, y, width);\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      createHexagonPath(ctx, hexagonGeometry, radius);\n      removeTransparentBorder(ctx, strokeColor);\n      fillShape(ctx, fillColor);\n      if (shouldRenderLabels(labelsDisplay)) {\n        drawLabelAndValue(\n          ctx,\n          value,\n          textArea,\n          fillColor,\n          name,\n          truncationMode,\n          labelsDisplay,\n        );\n      }\n\n      return false;\n    },\n    [\n      x,\n      y,\n      width,\n      fillColor,\n      strokeColor,\n      labelsDisplay,\n      truncationMode,\n      name,\n      value,\n    ],\n  );\n\n  useCanvas('honeycomb-hexagon', draw);\n\n  return null;\n};\n\nCanvasHexagonRenderer['displayName'] = 'CanvasHexagonRenderer';\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,iBAAiB;AAG1B,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AAenC,MAAM,oBAAoB,CACxB,KACA,iBACA,WACG;AACH,MAAI,UAAU;AAEd,MAAI,OAAO,gBAAgB,CAAC,EAAE,GAAG,gBAAgB,CAAC,EAAE,CAAC;AACrD,WAAS,IAAI,GAAG,IAAI,gBAAgB,QAAQ,KAAK,GAAG;AAClD,UAAM,SAAS,gBAAgB,CAAC;AAChC,UAAM,aAAa,gBAAgB,IAAI,CAAC;AAExC,QAAI,MAAM,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM;AAAA,EAClE;AACA,MAAI,UAAU;AAChB;AAEO,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,iBAAiB,SAAS,IAAI,mBAAmB,GAAG,GAAG,KAAK;AACpE,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,wBAAkB,KAAK,iBAAiB,MAAM;AAC9C,8BAAwB,KAAK,WAAW;AACxC,gBAAU,KAAK,SAAS;AACxB,UAAI,mBAAmB,aAAa,GAAG;AACrC;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,qBAAqB,IAAI;AAEnC,SAAO;AACT;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useCanvas } from '../../../../core/components/canvas/hooks/useCanvas.js';\nimport { Point } from '../../../../core/types/point.js';\nimport { useHoneycombTextSize } from '../../../hooks/use-honeycomb-text-size.js';\nimport type { HoneycombLabelsDisplay } from '../../../types/honeycomb.js';\nimport { getHexagonGeometry } from '../../../utils/get-hexagon-geometry.js';\nimport { drawLabelAndValue } from '../utils/draw-label-and-value.js';\nimport { fillShape } from '../utils/fill-shape.js';\nimport { removeTransparentBorder } from '../utils/remove-transparent-border.js';\nimport { shouldRenderLabels } from '../utils/should-render-labels.js';\n\ninterface CanvasHexagonRendererProps {\n  x: number;\n  y: number;\n  width: number;\n  fillColor: string;\n  value: string | number;\n  name?: string;\n  strokeColor?: 'transparent' | string;\n  radius?: number;\n  labelsDisplay?: HoneycombLabelsDisplay;\n  truncationMode?: TruncationMode;\n}\n\nconst createHexagonPath = (\n  ctx: CanvasRenderingContext2D,\n  hexagonGeometry: Point[],\n  radius: number,\n) => {\n  ctx.beginPath();\n  // Web-kit browsers need to move to the initial point to avoid weird behavior: APPDEV-8494\n  ctx.moveTo(hexagonGeometry[0].x, hexagonGeometry[0].y);\n  for (let i = 0; i < hexagonGeometry.length; i += 2) {\n    const vertex = hexagonGeometry[i];\n    const lineBisect = hexagonGeometry[i + 1];\n\n    ctx.arcTo(vertex.x, vertex.y, lineBisect.x, lineBisect.y, radius);\n  }\n  ctx.closePath();\n};\n\nexport const CanvasHexagonRenderer = (props: CanvasHexagonRendererProps) => {\n  const {\n    x,\n    y,\n    name,\n    value,\n    width,\n    fillColor,\n    strokeColor = fillColor,\n    radius = 0,\n    labelsDisplay,\n    truncationMode,\n  } = props;\n  const textSize = useHoneycombTextSize();\n  const { hexagonGeometry, textArea } = getHexagonGeometry(x, y, width);\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      createHexagonPath(ctx, hexagonGeometry, radius);\n      removeTransparentBorder(ctx, strokeColor);\n      fillShape(ctx, fillColor);\n      if (shouldRenderLabels(labelsDisplay)) {\n        drawLabelAndValue(\n          ctx,\n          value,\n          textArea,\n          fillColor,\n          name,\n          truncationMode,\n          labelsDisplay,\n          textSize,\n        );\n      }\n\n      return false;\n    },\n    [\n      fillColor,\n      strokeColor,\n      labelsDisplay,\n      truncationMode,\n      name,\n      value,\n      hexagonGeometry,\n      radius,\n      textArea,\n      textSize,\n    ],\n  );\n\n  useCanvas('honeycomb-hexagon', draw);\n\n  return null;\n};\n\nCanvasHexagonRenderer['displayName'] = 'CanvasHexagonRenderer';\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AAErC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AAenC,MAAM,oBAAoB,CACxB,KACA,iBACA,WACG;AACH,MAAI,UAAU;AAEd,MAAI,OAAO,gBAAgB,CAAC,EAAE,GAAG,gBAAgB,CAAC,EAAE,CAAC;AACrD,WAAS,IAAI,GAAG,IAAI,gBAAgB,QAAQ,KAAK,GAAG;AAClD,UAAM,SAAS,gBAAgB,CAAC;AAChC,UAAM,aAAa,gBAAgB,IAAI,CAAC;AAExC,QAAI,MAAM,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM;AAAA,EAClE;AACA,MAAI,UAAU;AAChB;AAEO,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,WAAW,qBAAqB;AACtC,QAAM,EAAE,iBAAiB,SAAS,IAAI,mBAAmB,GAAG,GAAG,KAAK;AACpE,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,wBAAkB,KAAK,iBAAiB,MAAM;AAC9C,8BAAwB,KAAK,WAAW;AACxC,gBAAU,KAAK,SAAS;AACxB,UAAI,mBAAmB,aAAa,GAAG;AACrC;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,qBAAqB,IAAI;AAEnC,SAAO;AACT;AAEA,sBAAsB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { useCanvas } from "../../../../core/components/canvas/hooks/useCanvas.js";
+import { useHoneycombTextSize } from "../../../hooks/use-honeycomb-text-size.js";
 import { drawLabelAndValue } from "../utils/draw-label-and-value.js";
 import { fillShape } from "../utils/fill-shape.js";
 import { removeTransparentBorder } from "../utils/remove-transparent-border.js";
@@ -30,6 +31,7 @@ const CanvasSquareRenderer = (props) => {
     labelsDisplay,
     truncationMode
   } = props;
+  const textSize = useHoneycombTextSize();
   const textArea = getSquareTextArea(x, y, width);
   const draw = useCallback(
     (ctx) => {
@@ -44,7 +46,8 @@ const CanvasSquareRenderer = (props) => {
           fillColor,
           name,
           truncationMode,
-          labelsDisplay
+          labelsDisplay,
+          textSize
         );
       }
       return false;
@@ -59,7 +62,9 @@ const CanvasSquareRenderer = (props) => {
       truncationMode,
       name,
       value,
-      radius
+      radius,
+      textArea,
+      textSize
     ]
   );
   useCanvas("honeycomb-square", draw);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/honeycomb/components/canvas/renderers/CanvasSquareRenderer.tsx"],
-  "sourcesContent": ["import { useCallback } from 'react';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useCanvas } from '../../../../core/components/canvas/hooks/useCanvas.js';\nimport { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';\nimport type { HoneycombLabelsDisplay } from '../../../types/honeycomb.js';\nimport { drawLabelAndValue } from '../utils/draw-label-and-value.js';\nimport { fillShape } from '../utils/fill-shape.js';\nimport { removeTransparentBorder } from '../utils/remove-transparent-border.js';\nimport { shouldRenderLabels } from '../utils/should-render-labels.js';\n\ninterface CanvasSquareRendererProps {\n  x: number;\n  y: number;\n  width: number;\n  fillColor: string;\n  value: string | number;\n  name?: string;\n  strokeColor?: 'transparent' | string;\n  radius?: number;\n  labelsDisplay?: HoneycombLabelsDisplay;\n  truncationMode?: TruncationMode;\n}\n\nconst createRoundedSquarePath = (\n  ctx: CanvasRenderingContext2D,\n  x: number,\n  y: number,\n  width: number,\n  radius: number,\n) => {\n  ctx.moveTo(x, y);\n  ctx.beginPath();\n  ctx.roundRect(x, y, width, width, radius);\n};\n\nconst getSquareTextArea = (x: number, y: number, width: number) => ({\n  x: x + width / 2,\n  y: y + width / 2,\n  width,\n  height: width,\n  leftBoundary: x,\n  rightBoundary: x + width,\n});\n\nexport const CanvasSquareRenderer = (props: CanvasSquareRendererProps) => {\n  const {\n    x,\n    y,\n    width,\n    fillColor,\n    strokeColor = fillColor,\n    value,\n    name = '',\n    radius = 0,\n    labelsDisplay,\n    truncationMode,\n  } = props;\n\n  const textArea: CanvasTextAreaProps = getSquareTextArea(x, y, width);\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      createRoundedSquarePath(ctx, x, y, width, radius);\n      removeTransparentBorder(ctx, strokeColor);\n      fillShape(ctx, fillColor);\n      if (shouldRenderLabels(labelsDisplay)) {\n        drawLabelAndValue(\n          ctx,\n          value,\n          textArea,\n          fillColor,\n          name,\n          truncationMode,\n          labelsDisplay,\n        );\n      }\n\n      return false;\n    },\n    [\n      x,\n      y,\n      width,\n      fillColor,\n      strokeColor,\n      labelsDisplay,\n      truncationMode,\n      name,\n      value,\n      radius,\n    ],\n  );\n\n  useCanvas('honeycomb-square', draw);\n\n  return null;\n};\n\nCanvasSquareRenderer['displayName'] = 'CanvasSquareRenderer';\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AAenC,MAAM,0BAA0B,CAC9B,KACA,GACA,GACA,OACA,WACG;AACH,MAAI,OAAO,GAAG,CAAC;AACf,MAAI,UAAU;AACd,MAAI,UAAU,GAAG,GAAG,OAAO,OAAO,MAAM;AAC1C;AAEA,MAAM,oBAAoB,CAAC,GAAW,GAAW,WAAmB;AAAA,EAClE,GAAG,IAAI,QAAQ;AAAA,EACf,GAAG,IAAI,QAAQ;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,eAAe,IAAI;AACrB;AAEO,MAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,IACP,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAgC,kBAAkB,GAAG,GAAG,KAAK;AAEnE,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,8BAAwB,KAAK,GAAG,GAAG,OAAO,MAAM;AAChD,8BAAwB,KAAK,WAAW;AACxC,gBAAU,KAAK,SAAS;AACxB,UAAI,mBAAmB,aAAa,GAAG;AACrC;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,oBAAoB,IAAI;AAElC,SAAO;AACT;AAEA,qBAAqB,aAAa,IAAI;",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useCanvas } from '../../../../core/components/canvas/hooks/useCanvas.js';\nimport { useHoneycombTextSize } from '../../../hooks/use-honeycomb-text-size.js';\nimport { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';\nimport type { HoneycombLabelsDisplay } from '../../../types/honeycomb.js';\nimport { drawLabelAndValue } from '../utils/draw-label-and-value.js';\nimport { fillShape } from '../utils/fill-shape.js';\nimport { removeTransparentBorder } from '../utils/remove-transparent-border.js';\nimport { shouldRenderLabels } from '../utils/should-render-labels.js';\n\ninterface CanvasSquareRendererProps {\n  x: number;\n  y: number;\n  width: number;\n  fillColor: string;\n  value: string | number;\n  name?: string;\n  strokeColor?: 'transparent' | string;\n  radius?: number;\n  labelsDisplay?: HoneycombLabelsDisplay;\n  truncationMode?: TruncationMode;\n}\n\nconst createRoundedSquarePath = (\n  ctx: CanvasRenderingContext2D,\n  x: number,\n  y: number,\n  width: number,\n  radius: number,\n) => {\n  ctx.moveTo(x, y);\n  ctx.beginPath();\n  ctx.roundRect(x, y, width, width, radius);\n};\n\nconst getSquareTextArea = (x: number, y: number, width: number) => ({\n  x: x + width / 2,\n  y: y + width / 2,\n  width,\n  height: width,\n  leftBoundary: x,\n  rightBoundary: x + width,\n});\n\nexport const CanvasSquareRenderer = (props: CanvasSquareRendererProps) => {\n  const {\n    x,\n    y,\n    width,\n    fillColor,\n    strokeColor = fillColor,\n    value,\n    name = '',\n    radius = 0,\n    labelsDisplay,\n    truncationMode,\n  } = props;\n  const textSize = useHoneycombTextSize();\n\n  const textArea: CanvasTextAreaProps = getSquareTextArea(x, y, width);\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      createRoundedSquarePath(ctx, x, y, width, radius);\n      removeTransparentBorder(ctx, strokeColor);\n      fillShape(ctx, fillColor);\n      if (shouldRenderLabels(labelsDisplay)) {\n        drawLabelAndValue(\n          ctx,\n          value,\n          textArea,\n          fillColor,\n          name,\n          truncationMode,\n          labelsDisplay,\n          textSize,\n        );\n      }\n\n      return false;\n    },\n    [\n      x,\n      y,\n      width,\n      fillColor,\n      strokeColor,\n      labelsDisplay,\n      truncationMode,\n      name,\n      value,\n      radius,\n      textArea,\n      textSize,\n    ],\n  );\n\n  useCanvas('honeycomb-square', draw);\n\n  return null;\n};\n\nCanvasSquareRenderer['displayName'] = 'CanvasSquareRenderer';\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AAGrC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AAenC,MAAM,0BAA0B,CAC9B,KACA,GACA,GACA,OACA,WACG;AACH,MAAI,OAAO,GAAG,CAAC;AACf,MAAI,UAAU;AACd,MAAI,UAAU,GAAG,GAAG,OAAO,OAAO,MAAM;AAC1C;AAEA,MAAM,oBAAoB,CAAC,GAAW,GAAW,WAAmB;AAAA,EAClE,GAAG,IAAI,QAAQ;AAAA,EACf,GAAG,IAAI,QAAQ;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,eAAe,IAAI;AACrB;AAEO,MAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,IACP,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,WAAW,qBAAqB;AAEtC,QAAM,WAAgC,kBAAkB,GAAG,GAAG,KAAK;AAEnE,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,8BAAwB,KAAK,GAAG,GAAG,OAAO,MAAM;AAChD,8BAAwB,KAAK,WAAW;AACxC,gBAAU,KAAK,SAAS;AACxB,UAAI,mBAAmB,aAAa,GAAG;AACrC;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,oBAAoB,IAAI;AAElC,SAAO;AACT;AAEA,qBAAqB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,8 +1,17 @@
+import { getFontSizes } from "./get-font-sizes.js";
 import { getTruncationMethod } from "./get-truncation-method.js";
 import { measureNodeTextContent } from "./measure-node-text-content.js";
 import { renderTextToCanvas } from "./render-text-to-canvas.js";
 import { getColorByContrast } from "../../../../core/utils/color-contrast.js";
-import { HONEYCOMB_DEFAULT_TEXT_ALIGNMENT } from "../../../constants.js";
+import {
+  getTextMeasurer
+} from "../../../../core/utils/text-measure.js";
+import {
+  HONEYCOMB_DEFAULT_TEXT_ALIGNMENT,
+  HONEYCOMB_LABEL_FONT_WEIGHT,
+  HONEYCOMB_VALUE_FONT_WEIGHT,
+  HONEYCOMB_VALUE_LABEL_FONT_SIZE
+} from "../../../constants.js";
 const topAndBottomPadding = 2;
 const renderNameMode = ({
   ctx,
@@ -10,10 +19,18 @@ const renderNameMode = ({
   y,
   renderedName,
   nameHeight,
-  ableToRenderName
+  ableToRenderName,
+  labelFontSize
 }) => {
   if (ableToRenderName) {
-    renderTextToCanvas(ctx, renderedName, "label", x, y + nameHeight / 2);
+    renderTextToCanvas(
+      ctx,
+      renderedName,
+      "label",
+      x,
+      y + nameHeight / 2,
+      labelFontSize
+    );
   }
 };
 const renderValueMode = (params) => {
@@ -28,19 +45,37 @@ const renderValueMode = (params) => {
     ableToRenderName,
     textArea,
     value,
-    truncationMode
+    truncationMode,
+    labelFontSize,
+    valueFontSize,
+    labelMeasure
   } = params;
   if (ableToRenderValue) {
-    renderTextToCanvas(ctx, renderedValue, "value", x, y + valueHeight / 2);
+    renderTextToCanvas(
+      ctx,
+      renderedValue,
+      "value",
+      x,
+      y + valueHeight / 2,
+      valueFontSize
+    );
   } else if (ableToRenderName) {
     const cropValueAsLabel = getTruncationMethod(
-      ctx,
       textArea,
       value.toString(),
       truncationMode,
-      "label"
+      labelMeasure,
+      "label",
+      labelFontSize
+    );
+    renderTextToCanvas(
+      ctx,
+      cropValueAsLabel(),
+      "label",
+      x,
+      y + nameHeight / 2,
+      labelFontSize
     );
-    renderTextToCanvas(ctx, cropValueAsLabel(), "label", x, y + nameHeight / 2);
   }
 };
 const renderAllMode = ({
@@ -53,32 +88,74 @@ const renderAllMode = ({
   valueHeight,
   ableToRenderBoth,
   ableToRenderName,
-  ableToRenderValue
+  ableToRenderValue,
+  labelFontSize,
+  valueFontSize
 }) => {
   if (ableToRenderBoth) {
-    renderTextToCanvas(ctx, renderedName, "label", x, y - 2);
+    renderTextToCanvas(ctx, renderedName, "label", x, y - 2, labelFontSize);
     renderTextToCanvas(
       ctx,
       renderedValue,
       "value",
       x,
-      y + nameHeight + nameHeight * 0.5
+      y + nameHeight + nameHeight * 0.5,
+      valueFontSize
     );
   } else if (ableToRenderName) {
-    renderTextToCanvas(ctx, renderedName, "label", x, y + nameHeight / 2);
+    renderTextToCanvas(
+      ctx,
+      renderedName,
+      "label",
+      x,
+      y + nameHeight / 2,
+      labelFontSize
+    );
   } else if (ableToRenderValue) {
-    renderTextToCanvas(ctx, renderedValue, "value", x, y + valueHeight / 2);
+    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 = HONEYCOMB_VALUE_LABEL_FONT_SIZE) => {
+  const availableWidth = textArea.width - topAndBottomPadding * 2;
+  const availableHeight = textArea.height;
+  const { valueFontSize, labelFontSize } = getFontSizes(
+    ctx,
+    textSize,
+    value.toString(),
+    availableWidth,
+    availableHeight
+  );
+  const valueMeasure = getTextMeasurer(ctx, valueFontSize, {
+    fontWeight: HONEYCOMB_VALUE_FONT_WEIGHT
+  });
+  const labelMeasure = getTextMeasurer(ctx, labelFontSize, {
+    fontWeight: HONEYCOMB_LABEL_FONT_WEIGHT
+  });
   const { x, y } = textArea;
+  const croppingTextArea = { ...textArea, width: availableWidth };
   const cropNameToFit = getTruncationMethod(
-    ctx,
-    textArea,
+    croppingTextArea,
     name,
-    truncationMode
+    truncationMode,
+    labelMeasure,
+    "label",
+    labelFontSize
   );
-  const cropValueToFit = typeof value === "string" ? getTruncationMethod(ctx, textArea, value, truncationMode, "value") : () => value.toString();
+  const cropValueToFit = typeof value === "string" ? getTruncationMethod(
+    croppingTextArea,
+    value,
+    truncationMode,
+    valueMeasure,
+    "value",
+    valueFontSize
+  ) : () => value.toString();
   const {
     valueHeight,
     nameHeight,
@@ -88,13 +165,20 @@ const drawLabelAndValue = (ctx, value, textArea, backgroundColor, name = "", tru
     nameWidth,
     ableToRenderName,
     ableToRenderValue
-  } = measureNodeTextContent(ctx, value, name, textArea);
+  } = measureNodeTextContent(
+    value,
+    name,
+    textArea,
+    labelMeasure,
+    valueMeasure,
+    labelFontSize,
+    valueFontSize
+  );
   if (ableToRenderNothing) {
     return;
   }
   ctx.textAlign = HONEYCOMB_DEFAULT_TEXT_ALIGNMENT;
   ctx.fillStyle = getColorByContrast(backgroundColor);
-  const availableWidth = textArea.width - topAndBottomPadding * 2;
   const renderParams = {
     ctx,
     x,
@@ -108,7 +192,10 @@ const drawLabelAndValue = (ctx, value, textArea, backgroundColor, name = "", tru
     ableToRenderBoth,
     textArea,
     value,
-    truncationMode
+    truncationMode,
+    labelFontSize,
+    valueFontSize,
+    labelMeasure
   };
   if (labelsDisplay === "name") {
     renderNameMode(renderParams);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/honeycomb/components/canvas/utils/draw-label-and-value.ts"],
-  "sourcesContent": ["import { getTruncationMethod } from './get-truncation-method.js';\nimport { measureNodeTextContent } from './measure-node-text-content.js';\nimport { renderTextToCanvas } from './render-text-to-canvas.js';\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { getColorByContrast } from '../../../../core/utils/color-contrast.js';\nimport { HONEYCOMB_DEFAULT_TEXT_ALIGNMENT } from '../../../constants.js';\nimport { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';\nimport type { HoneycombLabelsDisplay } from '../../../types/honeycomb.js';\n\nconst topAndBottomPadding = 2;\n\ntype RenderParams = {\n  ctx: CanvasRenderingContext2D;\n  x: number;\n  y: number;\n  renderedName: string;\n  renderedValue: string;\n  nameHeight: number;\n  valueHeight: number;\n  ableToRenderName: boolean;\n  ableToRenderValue: boolean;\n  ableToRenderBoth: boolean;\n  textArea: CanvasTextAreaProps;\n  value: string | number;\n  truncationMode: TruncationMode;\n};\n\nconst renderNameMode = ({\n  ctx,\n  x,\n  y,\n  renderedName,\n  nameHeight,\n  ableToRenderName,\n}: RenderParams) => {\n  if (ableToRenderName) {\n    renderTextToCanvas(ctx, renderedName, 'label', x, y + nameHeight / 2);\n  }\n};\n\nconst renderValueMode = (params: RenderParams) => {\n  const {\n    ctx,\n    x,\n    y,\n    renderedValue,\n    valueHeight,\n    nameHeight,\n    ableToRenderValue,\n    ableToRenderName,\n    textArea,\n    value,\n    truncationMode,\n  } = params;\n  if (ableToRenderValue) {\n    renderTextToCanvas(ctx, renderedValue, 'value', x, y + valueHeight / 2);\n  } else if (ableToRenderName) {\n    // Value font (16px) doesn't fit but label font (12px) does \u2014 render value at smaller size.\n    const cropValueAsLabel = getTruncationMethod(\n      ctx,\n      textArea,\n      value.toString(),\n      truncationMode,\n      'label',\n    );\n    renderTextToCanvas(ctx, cropValueAsLabel(), 'label', x, y + nameHeight / 2);\n  }\n};\n\nconst renderAllMode = ({\n  ctx,\n  x,\n  y,\n  renderedName,\n  renderedValue,\n  nameHeight,\n  valueHeight,\n  ableToRenderBoth,\n  ableToRenderName,\n  ableToRenderValue,\n}: RenderParams) => {\n  if (ableToRenderBoth) {\n    renderTextToCanvas(ctx, renderedName, 'label', x, y - 2);\n    renderTextToCanvas(\n      ctx,\n      renderedValue,\n      'value',\n      x,\n      y + nameHeight + nameHeight * 0.5,\n    );\n  } else if (ableToRenderName) {\n    renderTextToCanvas(ctx, renderedName, 'label', x, y + nameHeight / 2);\n  } else if (ableToRenderValue) {\n    renderTextToCanvas(ctx, renderedValue, 'value', x, y + valueHeight / 2);\n  }\n};\n\nexport const drawLabelAndValue = (\n  ctx: CanvasRenderingContext2D,\n  value: string | number,\n  textArea: CanvasTextAreaProps,\n  backgroundColor: string,\n  name: string = '',\n  truncationMode: TruncationMode = 'middle',\n  labelsDisplay: HoneycombLabelsDisplay,\n) => {\n  const { x, y } = textArea;\n  const cropNameToFit = getTruncationMethod(\n    ctx,\n    textArea,\n    name,\n    truncationMode,\n  );\n  const cropValueToFit =\n    typeof value === 'string'\n      ? getTruncationMethod(ctx, textArea, value, truncationMode, 'value')\n      : () => value.toString();\n\n  const {\n    valueHeight,\n    nameHeight,\n    ableToRenderNothing,\n    ableToRenderBoth,\n    valueWidth,\n    nameWidth,\n    ableToRenderName,\n    ableToRenderValue,\n  } = measureNodeTextContent(ctx, value, name, textArea);\n\n  if (ableToRenderNothing) {\n    return;\n  }\n\n  ctx.textAlign = HONEYCOMB_DEFAULT_TEXT_ALIGNMENT;\n  ctx.fillStyle = getColorByContrast(backgroundColor);\n\n  const availableWidth = textArea.width - topAndBottomPadding * 2;\n  const renderParams: RenderParams = {\n    ctx,\n    x,\n    y,\n    renderedName: availableWidth > nameWidth ? name : cropNameToFit(),\n    renderedValue:\n      availableWidth >= valueWidth ? value.toString() : cropValueToFit(),\n    nameHeight,\n    valueHeight,\n    ableToRenderName,\n    ableToRenderValue,\n    ableToRenderBoth,\n    textArea,\n    value,\n    truncationMode,\n  };\n\n  if (labelsDisplay === 'name') {\n    renderNameMode(renderParams);\n  } else if (labelsDisplay === 'value') {\n    renderValueMode(renderParams);\n  } else if (labelsDisplay === 'all') {\n    renderAllMode(renderParams);\n  }\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { getFontSizes } from './get-font-sizes.js';\nimport { getTruncationMethod } from './get-truncation-method.js';\nimport { measureNodeTextContent } from './measure-node-text-content.js';\nimport { renderTextToCanvas } from './render-text-to-canvas.js';\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport type { TextSize } from '../../../../core/types/text-size.js';\nimport { getColorByContrast } from '../../../../core/utils/color-contrast.js';\nimport {\n  getTextMeasurer,\n  type TextMeasurer,\n} from '../../../../core/utils/text-measure.js';\nimport {\n  HONEYCOMB_DEFAULT_TEXT_ALIGNMENT,\n  HONEYCOMB_LABEL_FONT_WEIGHT,\n  HONEYCOMB_VALUE_FONT_WEIGHT,\n  HONEYCOMB_VALUE_LABEL_FONT_SIZE,\n} from '../../../constants.js';\nimport { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';\nimport type { HoneycombLabelsDisplay } from '../../../types/honeycomb.js';\n\nconst topAndBottomPadding = 2;\n\ntype RenderParams = {\n  ctx: CanvasRenderingContext2D;\n  x: number;\n  y: number;\n  renderedName: string;\n  renderedValue: string;\n  nameHeight: number;\n  valueHeight: number;\n  ableToRenderName: boolean;\n  ableToRenderValue: boolean;\n  ableToRenderBoth: boolean;\n  textArea: CanvasTextAreaProps;\n  value: string | number;\n  truncationMode: TruncationMode;\n  labelFontSize: number;\n  valueFontSize: number;\n  labelMeasure: TextMeasurer;\n};\n\nconst renderNameMode = ({\n  ctx,\n  x,\n  y,\n  renderedName,\n  nameHeight,\n  ableToRenderName,\n  labelFontSize,\n}: RenderParams) => {\n  if (ableToRenderName) {\n    renderTextToCanvas(\n      ctx,\n      renderedName,\n      'label',\n      x,\n      y + nameHeight / 2,\n      labelFontSize,\n    );\n  }\n};\n\nconst renderValueMode = (params: RenderParams) => {\n  const {\n    ctx,\n    x,\n    y,\n    renderedValue,\n    valueHeight,\n    nameHeight,\n    ableToRenderValue,\n    ableToRenderName,\n    textArea,\n    value,\n    truncationMode,\n    labelFontSize,\n    valueFontSize,\n    labelMeasure,\n  } = params;\n  if (ableToRenderValue) {\n    renderTextToCanvas(\n      ctx,\n      renderedValue,\n      'value',\n      x,\n      y + valueHeight / 2,\n      valueFontSize,\n    );\n  } else if (ableToRenderName) {\n    // Value font doesn't fit but label font does \u2014 render value at the smaller size.\n    const cropValueAsLabel = getTruncationMethod(\n      textArea,\n      value.toString(),\n      truncationMode,\n      labelMeasure,\n      'label',\n      labelFontSize,\n    );\n    renderTextToCanvas(\n      ctx,\n      cropValueAsLabel(),\n      'label',\n      x,\n      y + nameHeight / 2,\n      labelFontSize,\n    );\n  }\n};\n\nconst renderAllMode = ({\n  ctx,\n  x,\n  y,\n  renderedName,\n  renderedValue,\n  nameHeight,\n  valueHeight,\n  ableToRenderBoth,\n  ableToRenderName,\n  ableToRenderValue,\n  labelFontSize,\n  valueFontSize,\n}: RenderParams) => {\n  if (ableToRenderBoth) {\n    renderTextToCanvas(ctx, renderedName, 'label', x, y - 2, labelFontSize);\n    renderTextToCanvas(\n      ctx,\n      renderedValue,\n      'value',\n      x,\n      y + nameHeight + nameHeight * 0.5,\n      valueFontSize,\n    );\n  } else if (ableToRenderName) {\n    renderTextToCanvas(\n      ctx,\n      renderedName,\n      'label',\n      x,\n      y + nameHeight / 2,\n      labelFontSize,\n    );\n  } else if (ableToRenderValue) {\n    renderTextToCanvas(\n      ctx,\n      renderedValue,\n      'value',\n      x,\n      y + valueHeight / 2,\n      valueFontSize,\n    );\n  }\n};\n\nexport const drawLabelAndValue = (\n  ctx: CanvasRenderingContext2D,\n  value: string | number,\n  textArea: CanvasTextAreaProps,\n  backgroundColor: string,\n  name: string = '',\n  truncationMode: TruncationMode = 'middle',\n  labelsDisplay: HoneycombLabelsDisplay,\n  textSize: TextSize = HONEYCOMB_VALUE_LABEL_FONT_SIZE,\n) => {\n  const availableWidth = textArea.width - topAndBottomPadding * 2;\n  const availableHeight = textArea.height;\n  const { valueFontSize, labelFontSize } = getFontSizes(\n    ctx,\n    textSize,\n    value.toString(),\n    availableWidth,\n    availableHeight,\n  );\n  const valueMeasure = getTextMeasurer(ctx, valueFontSize, {\n    fontWeight: HONEYCOMB_VALUE_FONT_WEIGHT,\n  });\n  const labelMeasure = getTextMeasurer(ctx, labelFontSize, {\n    fontWeight: HONEYCOMB_LABEL_FONT_WEIGHT,\n  });\n\n  const { x, y } = textArea;\n  const croppingTextArea = { ...textArea, width: availableWidth };\n  const cropNameToFit = getTruncationMethod(\n    croppingTextArea,\n    name,\n    truncationMode,\n    labelMeasure,\n    'label',\n    labelFontSize,\n  );\n  const cropValueToFit =\n    typeof value === 'string'\n      ? getTruncationMethod(\n          croppingTextArea,\n          value,\n          truncationMode,\n          valueMeasure,\n          'value',\n          valueFontSize,\n        )\n      : () => value.toString();\n\n  const {\n    valueHeight,\n    nameHeight,\n    ableToRenderNothing,\n    ableToRenderBoth,\n    valueWidth,\n    nameWidth,\n    ableToRenderName,\n    ableToRenderValue,\n  } = measureNodeTextContent(\n    value,\n    name,\n    textArea,\n    labelMeasure,\n    valueMeasure,\n    labelFontSize,\n    valueFontSize,\n  );\n\n  if (ableToRenderNothing) {\n    return;\n  }\n\n  ctx.textAlign = HONEYCOMB_DEFAULT_TEXT_ALIGNMENT;\n  ctx.fillStyle = getColorByContrast(backgroundColor);\n\n  const renderParams: RenderParams = {\n    ctx,\n    x,\n    y,\n    renderedName: availableWidth > nameWidth ? name : cropNameToFit(),\n    renderedValue:\n      availableWidth >= valueWidth ? value.toString() : cropValueToFit(),\n    nameHeight,\n    valueHeight,\n    ableToRenderName,\n    ableToRenderValue,\n    ableToRenderBoth,\n    textArea,\n    value,\n    truncationMode,\n    labelFontSize,\n    valueFontSize,\n    labelMeasure,\n  };\n\n  if (labelsDisplay === 'name') {\n    renderNameMode(renderParams);\n  } else if (labelsDisplay === 'value') {\n    renderValueMode(renderParams);\n  } else if (labelsDisplay === 'all') {\n    renderAllMode(renderParams);\n  }\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -0,0 +1,39 @@
+import { AUTO_TEXT_SIZE_PRESETS } from "../../../../core/constants.js";
+import { getTextMeasurer } from "../../../../core/utils/text-measure.js";
+import {
+  HONEYCOMB_LABEL_FONT_SIZE,
+  HONEYCOMB_LABEL_FONT_SIZE_OFFSET,
+  HONEYCOMB_VALUE_FONT_WEIGHT,
+  HONEYCOMB_VALUE_LINE_HEIGHT_RATIO
+} from "../../../constants.js";
+const getFontSizes = (ctx, textSize, valueText, availableWidth, availableHeight) => {
+  if (textSize !== "auto") {
+    return {
+      valueFontSize: textSize,
+      labelFontSize: Math.max(0, textSize - HONEYCOMB_LABEL_FONT_SIZE_OFFSET)
+    };
+  }
+  const measure = getTextMeasurer(ctx, textSize, {
+    fontWeight: HONEYCOMB_VALUE_FONT_WEIGHT
+  });
+  for (let i = 0; i < AUTO_TEXT_SIZE_PRESETS.length; i++) {
+    const valueFontSize = AUTO_TEXT_SIZE_PRESETS[i];
+    const labelFontSize = valueFontSize - HONEYCOMB_LABEL_FONT_SIZE_OFFSET;
+    const totalHeight = valueFontSize + valueFontSize * HONEYCOMB_VALUE_LINE_HEIGHT_RATIO + labelFontSize;
+    if (measure(valueText, valueFontSize) <= availableWidth && totalHeight <= availableHeight) {
+      return {
+        valueFontSize,
+        labelFontSize
+      };
+    }
+  }
+  const smallestPreset = AUTO_TEXT_SIZE_PRESETS.at(-1) ?? HONEYCOMB_LABEL_FONT_SIZE;
+  return {
+    valueFontSize: smallestPreset + HONEYCOMB_LABEL_FONT_SIZE_OFFSET,
+    labelFontSize: smallestPreset
+  };
+};
+export {
+  getFontSizes
+};
+//# sourceMappingURL=get-font-sizes.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/honeycomb/components/canvas/utils/get-font-sizes.ts"],
+  "sourcesContent": ["import { AUTO_TEXT_SIZE_PRESETS } from '../../../../core/constants.js';\nimport type { TextSize } from '../../../../core/types/text-size.js';\nimport { getTextMeasurer } from '../../../../core/utils/text-measure.js';\nimport {\n  HONEYCOMB_LABEL_FONT_SIZE,\n  HONEYCOMB_LABEL_FONT_SIZE_OFFSET,\n  HONEYCOMB_VALUE_FONT_WEIGHT,\n  HONEYCOMB_VALUE_LINE_HEIGHT_RATIO,\n} from '../../../constants.js';\n\nexport const getFontSizes = (\n  ctx: CanvasRenderingContext2D,\n  textSize: TextSize,\n  valueText: string,\n  availableWidth: number,\n  availableHeight: number,\n): { valueFontSize: number; labelFontSize: number } => {\n  if (textSize !== 'auto') {\n    return {\n      valueFontSize: textSize,\n      labelFontSize: Math.max(0, textSize - HONEYCOMB_LABEL_FONT_SIZE_OFFSET),\n    };\n  }\n\n  const measure = getTextMeasurer(ctx, textSize, {\n    fontWeight: HONEYCOMB_VALUE_FONT_WEIGHT,\n  });\n\n  for (let i = 0; i < AUTO_TEXT_SIZE_PRESETS.length; i++) {\n    const valueFontSize = AUTO_TEXT_SIZE_PRESETS[i];\n    const labelFontSize = valueFontSize - HONEYCOMB_LABEL_FONT_SIZE_OFFSET;\n    const totalHeight = valueFontSize + valueFontSize * HONEYCOMB_VALUE_LINE_HEIGHT_RATIO + labelFontSize;\n\n    if (\n      measure(valueText, valueFontSize) <= availableWidth &&\n      totalHeight <= availableHeight\n    ) {\n      return {\n        valueFontSize,\n        labelFontSize,\n      };\n    }\n  }\n\n  const smallestPreset = AUTO_TEXT_SIZE_PRESETS.at(-1) ?? HONEYCOMB_LABEL_FONT_SIZE;\n\n  return {\n    valueFontSize: smallestPreset + HONEYCOMB_LABEL_FONT_SIZE_OFFSET,\n    labelFontSize: smallestPreset,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,8BAA8B;AAEvC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,eAAe,CAC1B,KACA,UACA,WACA,gBACA,oBACqD;AACrD,MAAI,aAAa,QAAQ;AACvB,WAAO;AAAA,MACL,eAAe;AAAA,MACf,eAAe,KAAK,IAAI,GAAG,WAAW,gCAAgC;AAAA,IACxE;AAAA,EACF;AAEA,QAAM,UAAU,gBAAgB,KAAK,UAAU;AAAA,IAC7C,YAAY;AAAA,EACd,CAAC;AAED,WAAS,IAAI,GAAG,IAAI,uBAAuB,QAAQ,KAAK;AACtD,UAAM,gBAAgB,uBAAuB,CAAC;AAC9C,UAAM,gBAAgB,gBAAgB;AACtC,UAAM,cAAc,gBAAgB,gBAAgB,oCAAoC;AAExF,QACE,QAAQ,WAAW,aAAa,KAAK,kBACrC,eAAe,iBACf;AACA,aAAO;AAAA,QACL;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAiB,uBAAuB,GAAG,EAAE,KAAK;AAExD,SAAO;AAAA,IACL,eAAe,iBAAiB;AAAA,IAChC,eAAe;AAAA,EACjB;AACF;",
+  "names": []
+}

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

@@ -1,13 +1,86 @@
-import { defineTextToRender } from "./define-text-to-render.js";
-import { setFontDetailsToContext } from "./set-font-details-to-context.js";
-import { HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT } from "../../../constants.js";
-const getTruncationMethod = (ctx, textArea, name, truncationMode, contentType = "label") => () => {
-  setFontDetailsToContext(ctx, contentType);
-  const minimumNameSizes = ctx.measureText(
-    HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT
+import {
+  HONEYCOMB_LABEL_FONT_SIZE,
+  HONEYCOMB_VALUE_LABEL_FONT_SIZE
+} from "../../../constants.js";
+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" ? HONEYCOMB_VALUE_LABEL_FONT_SIZE : 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 ? "" : defineTextToRender(name, truncationMode, textArea, contentType);
 };
 export {
   getTruncationMethod

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/honeycomb/components/canvas/utils/get-truncation-method.ts"],
-  "sourcesContent": ["import { defineTextToRender } from './define-text-to-render.js';\nimport { setFontDetailsToContext } from './set-font-details-to-context.js';\nimport { HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT } from '../../../constants.js';\nimport { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';\n\nexport const getTruncationMethod =\n  (\n    ctx: CanvasRenderingContext2D,\n    textArea: CanvasTextAreaProps,\n    name: string,\n    truncationMode: 'start' | 'middle' | 'end',\n    contentType: 'value' | 'label' = 'label',\n  ) =>\n  () => {\n    setFontDetailsToContext(ctx, contentType);\n    const minimumNameSizes = ctx.measureText(\n      HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,\n    );\n    const ellipsisMinWidth = minimumNameSizes.width;\n\n    return ellipsisMinWidth > textArea.width\n      ? ''\n      : defineTextToRender(name, truncationMode, textArea, contentType);\n  };\n"],
-  "mappings": "AAAA,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,6CAA6C;AAG/C,MAAM,sBACX,CACE,KACA,UACA,MACA,gBACA,cAAiC,YAEnC,MAAM;AACJ,0BAAwB,KAAK,WAAW;AACxC,QAAM,mBAAmB,IAAI;AAAA,IAC3B;AAAA,EACF;AACA,QAAM,mBAAmB,iBAAiB;AAE1C,SAAO,mBAAmB,SAAS,QAC/B,KACA,mBAAmB,MAAM,gBAAgB,UAAU,WAAW;AACpE;",
+  "sourcesContent": ["import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport type { TextMeasurer } from '../../../../core/utils/text-measure.js';\nimport {\n  HONEYCOMB_LABEL_FONT_SIZE,\n  HONEYCOMB_VALUE_LABEL_FONT_SIZE,\n} from '../../../constants.js';\nimport { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';\n\nconst ELLIPSIS = '\u2026';\n\nconst truncateEnd = (\n  text: string,\n  charWidths: number[],\n  capacity: number,\n): string => {\n  let kept = '';\n  let usedWidth = 0;\n\n  for (let i = 0; i < charWidths.length; i++) {\n    if (usedWidth + charWidths[i] > capacity) {\n      break;\n    }\n    kept += text[i];\n    usedWidth += charWidths[i];\n  }\n\n  return kept + ELLIPSIS;\n};\n\nconst truncateStart = (\n  text: string,\n  charWidths: number[],\n  capacity: number,\n): string => {\n  let kept = '';\n  let usedWidth = 0;\n\n  for (let i = charWidths.length - 1; i >= 0; i--) {\n    if (usedWidth + charWidths[i] > capacity) {\n      break;\n    }\n    kept = text[i] + kept;\n    usedWidth += charWidths[i];\n  }\n\n  return ELLIPSIS + kept;\n};\n\nconst truncateMiddle = (\n  text: string,\n  charWidths: number[],\n  capacity: number,\n): string => {\n  let head = '';\n  let headWidth = 0;\n  let tail = '';\n  let tailWidth = 0;\n  let lo = 0;\n  let hi = charWidths.length - 1;\n  let pickHead = true;\n\n  while (lo <= hi) {\n    if (pickHead) {\n      if (headWidth + charWidths[lo] + tailWidth > capacity) {\n        break;\n      }\n      head += text[lo];\n      headWidth += charWidths[lo++];\n    } else {\n      if (headWidth + charWidths[hi] + tailWidth > capacity) {\n        break;\n      }\n      tail = text[hi] + tail;\n      tailWidth += charWidths[hi--];\n    }\n    pickHead = !pickHead;\n  }\n\n  return head + ELLIPSIS + tail;\n};\n\nconst truncateWithCanvas = (\n  measureTextWidth: (text: string) => number,\n  text: string,\n  maxWidth: number,\n  mode: TruncationMode,\n): string => {\n  const ellipsisWidth = measureTextWidth(ELLIPSIS);\n  const capacity = maxWidth - ellipsisWidth;\n  if (capacity <= 0) {\n    return '';\n  }\n\n  const charWidths = Array.from(text).map((ch) => measureTextWidth(ch));\n\n  switch (mode) {\n    case 'end':\n      return truncateEnd(text, charWidths, capacity);\n    case 'start':\n      return truncateStart(text, charWidths, capacity);\n    default:\n      return truncateMiddle(text, charWidths, capacity);\n  }\n};\n\nexport const getTruncationMethod =\n  (\n    textArea: CanvasTextAreaProps,\n    text: string,\n    truncationMode: TruncationMode,\n    measure: TextMeasurer,\n    contentType: 'value' | 'label' = 'label',\n    fontSize?: number,\n  ) =>\n  (): string => {\n    const resolvedFontSize =\n      fontSize ??\n      (contentType === 'value'\n        ? HONEYCOMB_VALUE_LABEL_FONT_SIZE\n        : HONEYCOMB_LABEL_FONT_SIZE);\n    const measureTextWidth = (textValue: string) =>\n      measure(textValue, resolvedFontSize);\n\n    if (measureTextWidth(text) <= textArea.width) {\n      return text;\n    }\n    return truncateWithCanvas(\n      measureTextWidth,\n      text,\n      textArea.width,\n      truncationMode,\n    );\n  };\n"],
+  "mappings": "AAEA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,MAAM,WAAW;AAEjB,MAAM,cAAc,CAClB,MACA,YACA,aACW;AACX,MAAI,OAAO;AACX,MAAI,YAAY;AAEhB,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AAC1C,QAAI,YAAY,WAAW,CAAC,IAAI,UAAU;AACxC;AAAA,IACF;AACA,YAAQ,KAAK,CAAC;AACd,iBAAa,WAAW,CAAC;AAAA,EAC3B;AAEA,SAAO,OAAO;AAChB;AAEA,MAAM,gBAAgB,CACpB,MACA,YACA,aACW;AACX,MAAI,OAAO;AACX,MAAI,YAAY;AAEhB,WAAS,IAAI,WAAW,SAAS,GAAG,KAAK,GAAG,KAAK;AAC/C,QAAI,YAAY,WAAW,CAAC,IAAI,UAAU;AACxC;AAAA,IACF;AACA,WAAO,KAAK,CAAC,IAAI;AACjB,iBAAa,WAAW,CAAC;AAAA,EAC3B;AAEA,SAAO,WAAW;AACpB;AAEA,MAAM,iBAAiB,CACrB,MACA,YACA,aACW;AACX,MAAI,OAAO;AACX,MAAI,YAAY;AAChB,MAAI,OAAO;AACX,MAAI,YAAY;AAChB,MAAI,KAAK;AACT,MAAI,KAAK,WAAW,SAAS;AAC7B,MAAI,WAAW;AAEf,SAAO,MAAM,IAAI;AACf,QAAI,UAAU;AACZ,UAAI,YAAY,WAAW,EAAE,IAAI,YAAY,UAAU;AACrD;AAAA,MACF;AACA,cAAQ,KAAK,EAAE;AACf,mBAAa,WAAW,IAAI;AAAA,IAC9B,OAAO;AACL,UAAI,YAAY,WAAW,EAAE,IAAI,YAAY,UAAU;AACrD;AAAA,MACF;AACA,aAAO,KAAK,EAAE,IAAI;AAClB,mBAAa,WAAW,IAAI;AAAA,IAC9B;AACA,eAAW,CAAC;AAAA,EACd;AAEA,SAAO,OAAO,WAAW;AAC3B;AAEA,MAAM,qBAAqB,CACzB,kBACA,MACA,UACA,SACW;AACX,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,WAAW,WAAW;AAC5B,MAAI,YAAY,GAAG;AACjB,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,MAAM,KAAK,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,EAAE,CAAC;AAEpE,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,YAAY,MAAM,YAAY,QAAQ;AAAA,IAC/C,KAAK;AACH,aAAO,cAAc,MAAM,YAAY,QAAQ;AAAA,IACjD;AACE,aAAO,eAAe,MAAM,YAAY,QAAQ;AAAA,EACpD;AACF;AAEO,MAAM,sBACX,CACE,UACA,MACA,gBACA,SACA,cAAiC,SACjC,aAEF,MAAc;AACZ,QAAM,mBACJ,aACC,gBAAgB,UACb,kCACA;AACN,QAAM,mBAAmB,CAAC,cACxB,QAAQ,WAAW,gBAAgB;AAErC,MAAI,iBAAiB,IAAI,KAAK,SAAS,OAAO;AAC5C,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,27 +1,24 @@
-import { setFontDetailsToContext } from "./set-font-details-to-context.js";
 import {
   HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,
   HONEYCOMB_LABEL_FONT_SIZE,
   HONEYCOMB_VALUE_LABEL_FONT_SIZE
 } from "../../../constants.js";
-const measureNodeTextContent = (ctx, value, name, textArea) => {
-  setFontDetailsToContext(ctx, "label");
-  const nameSizes = ctx.measureText(name);
-  const minNameWidth = ctx.measureText(
-    HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT
-  ).width;
-  setFontDetailsToContext(ctx, "value");
-  const valueSizes = ctx.measureText(value.toString());
-  const minValueWidth = ctx.measureText(
-    HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT
-  ).width;
-  const valueHeight = HONEYCOMB_VALUE_LABEL_FONT_SIZE;
-  const valueWidth = valueSizes.width;
+const measureNodeTextContent = (value, name, textArea, labelMeasure, valueMeasure, labelFontSize = HONEYCOMB_LABEL_FONT_SIZE, valueFontSize = HONEYCOMB_VALUE_LABEL_FONT_SIZE) => {
+  const nameWidth = labelMeasure(name, labelFontSize);
+  const minNameWidth = labelMeasure(
+    HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,
+    labelFontSize
+  );
+  const valueWidth = valueMeasure(value.toString(), valueFontSize);
+  const minValueWidth = valueMeasure(
+    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 = 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/esm/charts/honeycomb/components/canvas/utils/measure-node-text-content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/honeycomb/components/canvas/utils/measure-node-text-content.ts"],
-  "sourcesContent": ["import { setFontDetailsToContext } from './set-font-details-to-context.js';\nimport {\n  HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,\n  HONEYCOMB_LABEL_FONT_SIZE,\n  HONEYCOMB_VALUE_LABEL_FONT_SIZE,\n} from '../../../constants.js';\nimport { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';\n\nexport const measureNodeTextContent = (\n  ctx: CanvasRenderingContext2D,\n  value: string | number,\n  name: string,\n  textArea: CanvasTextAreaProps,\n) => {\n  setFontDetailsToContext(ctx, 'label');\n  const nameSizes = ctx.measureText(name);\n  const minNameWidth = ctx.measureText(\n    HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,\n  ).width;\n\n  setFontDetailsToContext(ctx, 'value');\n  const valueSizes = ctx.measureText(value.toString());\n  const minValueWidth = ctx.measureText(\n    HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,\n  ).width;\n\n  const valueHeight = HONEYCOMB_VALUE_LABEL_FONT_SIZE;\n  const valueWidth = valueSizes.width;\n  const isValueHeightFitting = valueHeight < textArea.height;\n  const ableToRenderValue =\n    isValueHeightFitting && typeof value === 'string'\n      ? textArea.width > minValueWidth\n      : valueWidth < textArea.width;\n\n  const nameHeight = HONEYCOMB_LABEL_FONT_SIZE;\n  const isNameHeightFitting = nameHeight < textArea.height;\n  const nameWidth = nameSizes.width;\n  const ableToRenderName = isNameHeightFitting && textArea.width > minNameWidth;\n\n  const totalHeight = valueHeight + valueHeight * 0.5 + nameHeight;\n  const ableToRenderNothing = !ableToRenderValue && !ableToRenderName;\n  const ableToRenderBoth =\n    totalHeight < textArea.height && ableToRenderValue && ableToRenderName;\n\n  return {\n    valueHeight,\n    nameHeight,\n    ableToRenderNothing,\n    ableToRenderBoth,\n    valueWidth,\n    nameWidth,\n    ableToRenderName,\n    ableToRenderValue,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,+BAA+B;AACxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,yBAAyB,CACpC,KACA,OACA,MACA,aACG;AACH,0BAAwB,KAAK,OAAO;AACpC,QAAM,YAAY,IAAI,YAAY,IAAI;AACtC,QAAM,eAAe,IAAI;AAAA,IACvB;AAAA,EACF,EAAE;AAEF,0BAAwB,KAAK,OAAO;AACpC,QAAM,aAAa,IAAI,YAAY,MAAM,SAAS,CAAC;AACnD,QAAM,gBAAgB,IAAI;AAAA,IACxB;AAAA,EACF,EAAE;AAEF,QAAM,cAAc;AACpB,QAAM,aAAa,WAAW;AAC9B,QAAM,uBAAuB,cAAc,SAAS;AACpD,QAAM,oBACJ,wBAAwB,OAAO,UAAU,WACrC,SAAS,QAAQ,gBACjB,aAAa,SAAS;AAE5B,QAAM,aAAa;AACnB,QAAM,sBAAsB,aAAa,SAAS;AAClD,QAAM,YAAY,UAAU;AAC5B,QAAM,mBAAmB,uBAAuB,SAAS,QAAQ;AAEjE,QAAM,cAAc,cAAc,cAAc,MAAM;AACtD,QAAM,sBAAsB,CAAC,qBAAqB,CAAC;AACnD,QAAM,mBACJ,cAAc,SAAS,UAAU,qBAAqB;AAExD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { TextMeasurer } from '../../../../core/utils/text-measure.js';\nimport {\n  HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,\n  HONEYCOMB_LABEL_FONT_SIZE,\n  HONEYCOMB_VALUE_LABEL_FONT_SIZE,\n} from '../../../constants.js';\nimport { CanvasTextAreaProps } from '../../../types/canvas-text-area.js';\n\nexport const measureNodeTextContent = (\n  value: string | number,\n  name: string,\n  textArea: CanvasTextAreaProps,\n  labelMeasure: TextMeasurer,\n  valueMeasure: TextMeasurer,\n  labelFontSize: number = HONEYCOMB_LABEL_FONT_SIZE,\n  valueFontSize: number = HONEYCOMB_VALUE_LABEL_FONT_SIZE,\n) => {\n  const nameWidth = labelMeasure(name, labelFontSize);\n  const minNameWidth = labelMeasure(\n    HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,\n    labelFontSize,\n  );\n\n  const valueWidth = valueMeasure(value.toString(), valueFontSize);\n  const minValueWidth = valueMeasure(\n    HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,\n    valueFontSize,\n  );\n\n  const valueHeight = valueFontSize;\n  const isValueHeightFitting = valueHeight < textArea.height;\n  const ableToRenderValue =\n    isValueHeightFitting && typeof value === 'string'\n      ? textArea.width > minValueWidth\n      : valueWidth < textArea.width;\n\n  const nameHeight = labelFontSize;\n  const isNameHeightFitting = nameHeight < textArea.height;\n  const ableToRenderName = isNameHeightFitting && textArea.width > minNameWidth;\n\n  const totalHeight = valueHeight + valueHeight * 0.5 + nameHeight;\n  const ableToRenderNothing = !ableToRenderValue && !ableToRenderName;\n  const ableToRenderBoth =\n    totalHeight < textArea.height && ableToRenderValue && ableToRenderName;\n\n  return {\n    valueHeight,\n    nameHeight,\n    ableToRenderNothing,\n    ableToRenderBoth,\n    valueWidth,\n    nameWidth,\n    ableToRenderName,\n    ableToRenderValue,\n  };\n};\n"],
+  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,yBAAyB,CACpC,OACA,MACA,UACA,cACA,cACA,gBAAwB,2BACxB,gBAAwB,oCACrB;AACH,QAAM,YAAY,aAAa,MAAM,aAAa;AAClD,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,aAAa,aAAa,MAAM,SAAS,GAAG,aAAa;AAC/D,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc;AACpB,QAAM,uBAAuB,cAAc,SAAS;AACpD,QAAM,oBACJ,wBAAwB,OAAO,UAAU,WACrC,SAAS,QAAQ,gBACjB,aAAa,SAAS;AAE5B,QAAM,aAAa;AACnB,QAAM,sBAAsB,aAAa,SAAS;AAClD,QAAM,mBAAmB,uBAAuB,SAAS,QAAQ;AAEjE,QAAM,cAAc,cAAc,cAAc,MAAM;AACtD,QAAM,sBAAsB,CAAC,qBAAqB,CAAC;AACnD,QAAM,mBACJ,cAAc,SAAS,UAAU,qBAAqB;AAExD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import { setFontDetailsToContext } from "./set-font-details-to-context.js";
-const renderTextToCanvas = (ctx, text, type, x, y) => {
-  setFontDetailsToContext(ctx, type);
+const renderTextToCanvas = (ctx, text, type, x, y, fontSize) => {
+  setFontDetailsToContext(ctx, type, fontSize);
   ctx.fillText(text, x, y);
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/honeycomb/components/canvas/utils/render-text-to-canvas.ts"],
-  "sourcesContent": ["import { setFontDetailsToContext } from './set-font-details-to-context.js';\n\nexport const renderTextToCanvas = (\n  ctx: CanvasRenderingContext2D,\n  text: string,\n  type: 'value' | 'label',\n  x: number,\n  y: number,\n) => {\n  setFontDetailsToContext(ctx, type);\n  ctx.fillText(text, x, y);\n};\n"],
-  "mappings": "AAAA,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB,CAChC,KACA,MACA,MACA,GACA,MACG;AACH,0BAAwB,KAAK,IAAI;AACjC,MAAI,SAAS,MAAM,GAAG,CAAC;AACzB;",
+  "sourcesContent": ["import { setFontDetailsToContext } from './set-font-details-to-context.js';\n\nexport const renderTextToCanvas = (\n  ctx: CanvasRenderingContext2D,\n  text: string,\n  type: 'value' | 'label',\n  x: number,\n  y: number,\n  fontSize?: number,\n) => {\n  setFontDetailsToContext(ctx, type, fontSize);\n  ctx.fillText(text, x, y);\n};\n"],
+  "mappings": "AAAA,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB,CAChC,KACA,MACA,MACA,GACA,GACA,aACG;AACH,0BAAwB,KAAK,MAAM,QAAQ;AAC3C,MAAI,SAAS,MAAM,GAAG,CAAC;AACzB;",
   "names": []
 }

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

@@ -7,15 +7,17 @@ import {
   HONEYCOMB_VALUE_LABEL_FONT_SIZE,
   HONEYCOMB_VALUE_LINE_HEIGHT
 } from "../../../constants.js";
-const setFontDetailsToContext = (ctx, type) => type === "label" ? ctx.font = getFontDetails(
-  HONEYCOMB_LABEL_FONT_WEIGHT,
-  HONEYCOMB_LABEL_FONT_SIZE,
-  HONEYCOMB_LABEL_LINE_HEIGHT
-) : ctx.font = getFontDetails(
-  HONEYCOMB_VALUE_FONT_WEIGHT,
-  HONEYCOMB_VALUE_LABEL_FONT_SIZE,
-  HONEYCOMB_VALUE_LINE_HEIGHT
-);
+const setFontDetailsToContext = (ctx, type, fontSize) => {
+  if (type === "label") {
+    const size = fontSize ?? HONEYCOMB_LABEL_FONT_SIZE;
+    const lineHeight = Math.round(size * (HONEYCOMB_LABEL_LINE_HEIGHT / HONEYCOMB_LABEL_FONT_SIZE));
+    ctx.font = getFontDetails(HONEYCOMB_LABEL_FONT_WEIGHT, size, lineHeight);
+  } else {
+    const size = fontSize ?? HONEYCOMB_VALUE_LABEL_FONT_SIZE;
+    const lineHeight = Math.round(size * (HONEYCOMB_VALUE_LINE_HEIGHT / HONEYCOMB_VALUE_LABEL_FONT_SIZE));
+    ctx.font = getFontDetails(HONEYCOMB_VALUE_FONT_WEIGHT, size, lineHeight);
+  }
+};
 export {
   setFontDetailsToContext
 };