@dynatrace/strato-components 3.4.1 → 3.5.2

package/esm/charts/core/components/single-value-renderer/components/SingleValueToolbar.sty.js

@@ -1,5 +1,5 @@
 import "./SingleValueToolbar.css";
-var toolbarOverlayPadding = "_xtlx2j0-3-4-1";
+var toolbarOverlayPadding = "_xtlx2j0-3-5-2";
 export {
   toolbarOverlayPadding
 };

package/esm/charts/core/components/single-value-renderer/components/SingleValueToolbar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/SingleValueToolbar.css.ts"],
-  "sourcesContent": ["import './SingleValueToolbar.css';\nexport var toolbarOverlayPadding = '_xtlx2j0-3-4-1';"],
+  "sourcesContent": ["import './SingleValueToolbar.css';\nexport var toolbarOverlayPadding = '_xtlx2j0-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,wBAAwB;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/Value.css

@@ -1,4 +1,4 @@
-._eff5no0-3-4-1 {
+._eff5no0-3-5-2 {
   grid-area: value;
   width: 100%;
   height: 100%;
@@ -6,20 +6,20 @@
   align-items: center;
   gap: 0;
 }
-._eff5no1-3-4-1 {
+._eff5no1-3-5-2 {
   white-space: nowrap;
   position: relative;
   font-size: min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))px;
   font-weight: 500;
   overflow: hidden;
 }
-._eff5no2-3-4-1 {
+._eff5no2-3-5-2 {
   padding-left: 2ch;
 }
-._eff5no3-3-4-1 {
+._eff5no3-3-5-2 {
   padding-left: 0;
 }
-._eff5no4-3-4-1 {
+._eff5no4-3-5-2 {
   white-space: nowrap;
   overflow: hidden;
   font-size: calc(min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)) * 0.66px);

package/esm/charts/core/components/single-value-renderer/components/Value.sty.js

@@ -1,8 +1,8 @@
 import "./Value.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var unitStyle = "_eff5no4-3-4-1";
-var valueArea = "_eff5no0-3-4-1";
-var valueStyle = _7a468({ defaultClassName: "_eff5no1-3-4-1", variantClassNames: { isReactNode: { true: "_eff5no2-3-4-1", false: "_eff5no3-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var unitStyle = "_eff5no4-3-5-2";
+var valueArea = "_eff5no0-3-5-2";
+var valueStyle = _7a468({ defaultClassName: "_eff5no1-3-5-2", variantClassNames: { isReactNode: { true: "_eff5no2-3-5-2", false: "_eff5no3-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   unitStyle,
   valueArea,

package/esm/charts/core/components/single-value-renderer/components/Value.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/Value.css.ts"],
-  "sourcesContent": ["import './Value.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var unitStyle = '_eff5no4-3-4-1';\nexport var valueArea = '_eff5no0-3-4-1';\nexport var valueStyle = _7a468({defaultClassName:'_eff5no1-3-4-1',variantClassNames:{isReactNode:{true:'_eff5no2-3-4-1',false:'_eff5no3-3-4-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Value.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var unitStyle = '_eff5no4-3-5-2';\nexport var valueArea = '_eff5no0-3-5-2';\nexport var valueStyle = _7a468({defaultClassName:'_eff5no1-3-5-2',variantClassNames:{isReactNode:{true:'_eff5no2-3-5-2',false:'_eff5no3-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/trend/Trend.css

@@ -1,13 +1,13 @@
-._i0i2v10-3-4-1 {
+._i0i2v10-3-5-2 {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-._i0i2v11-3-4-1 {
+._i0i2v11-3-5-2 {
   white-space: nowrap;
   font-size: calc(min(var(--dt-charts-single-value-label-font-size, min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))), min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))) * 1px);
   overflow: hidden;
 }
-._i0i2v12-3-4-1 {
+._i0i2v12-3-5-2 {
   margin-left: min(10px, 1ch);
 }

package/esm/charts/core/components/single-value-renderer/components/trend/Trend.sty.js

@@ -1,7 +1,7 @@
 import "./Trend.css";
-var trendContainer = "_i0i2v10-3-4-1";
-var trendLabel = "_i0i2v12-3-4-1";
-var valueLabelContainer = "_i0i2v11-3-4-1";
+var trendContainer = "_i0i2v10-3-5-2";
+var trendLabel = "_i0i2v12-3-5-2";
+var valueLabelContainer = "_i0i2v11-3-5-2";
 export {
   trendContainer,
   trendLabel,

package/esm/charts/core/components/single-value-renderer/components/trend/Trend.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/single-value-renderer/components/trend/Trend.css.ts"],
-  "sourcesContent": ["import './Trend.css';\nexport var trendContainer = '_i0i2v10-3-4-1';\nexport var trendLabel = '_i0i2v12-3-4-1';\nexport var valueLabelContainer = '_i0i2v11-3-4-1';"],
+  "sourcesContent": ["import './Trend.css';\nexport var trendContainer = '_i0i2v10-3-5-2';\nexport var trendLabel = '_i0i2v12-3-5-2';\nexport var valueLabelContainer = '_i0i2v11-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,aAAa;AACjB,IAAI,sBAAsB;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/trend/components/Icon.css

@@ -1,8 +1,8 @@
-._160ezq60-3-4-1 {
+._160ezq60-3-5-2 {
   font-size: calc(min(var(--dt-charts-single-value-label-font-size, min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))), min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))) * 1px);
   position: relative;
 }
-._160ezq60-3-4-1 svg {
+._160ezq60-3-5-2 svg {
   position: absolute;
   width: 2ch;
   height: 2ch;

package/esm/charts/core/components/single-value-renderer/components/trend/components/Icon.sty.js

@@ -1,5 +1,5 @@
 import "./Icon.css";
-var iconStyles = "_160ezq60-3-4-1";
+var iconStyles = "_160ezq60-3-5-2";
 export {
   iconStyles
 };

package/esm/charts/core/components/single-value-renderer/components/trend/components/Icon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/single-value-renderer/components/trend/components/Icon.css.ts"],
-  "sourcesContent": ["import './Icon.css';\nexport var iconStyles = '_160ezq60-3-4-1';"],
+  "sourcesContent": ["import './Icon.css';\nexport var iconStyles = '_160ezq60-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/core/components/sparkline-display/Sparkline.css

@@ -1,22 +1,22 @@
-._8d5rf80-3-4-1 {
+._8d5rf80-3-5-2 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._8d5rf81-3-4-1 {
+._8d5rf81-3-5-2 {
   font-size: 9px;
   line-height: 12px;
 }
-._8d5rf82-3-4-1 {
+._8d5rf82-3-5-2 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._8d5rf83-3-4-1 {
+._8d5rf83-3-5-2 {
   position: absolute;
 }
-._8d5rf84-3-4-1 {
+._8d5rf84-3-5-2 {
   width: 4px;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._8d5rf85-3-4-1 {
+._8d5rf85-3-5-2 {
   width: 6px;
   margin-left: var(--dt-spacings-size-4, 4px);
 }

package/esm/charts/core/components/sparkline-display/Sparkline.sty.js

@@ -1,7 +1,7 @@
 import "./Sparkline.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var contextValueText = _7a468({ defaultClassName: "_8d5rf80-3-4-1", variantClassNames: { fontSize: { smallerThan32: "_8d5rf81-3-4-1", greaterOrEqual32: "_8d5rf82-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var negativeSign = _7a468({ defaultClassName: "_8d5rf83-3-4-1", variantClassNames: { containerHeight: { height24: "_8d5rf84-3-4-1", height32: "_8d5rf85-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var contextValueText = _7a468({ defaultClassName: "_8d5rf80-3-5-2", variantClassNames: { fontSize: { smallerThan32: "_8d5rf81-3-5-2", greaterOrEqual32: "_8d5rf82-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var negativeSign = _7a468({ defaultClassName: "_8d5rf83-3-5-2", variantClassNames: { containerHeight: { height24: "_8d5rf84-3-5-2", height32: "_8d5rf85-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   contextValueText,
   negativeSign

package/esm/charts/core/components/sparkline-display/Sparkline.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/sparkline-display/Sparkline.css.ts"],
-  "sourcesContent": ["import './Sparkline.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var contextValueText = _7a468({defaultClassName:'_8d5rf80-3-4-1',variantClassNames:{fontSize:{smallerThan32:'_8d5rf81-3-4-1',greaterOrEqual32:'_8d5rf82-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var negativeSign = _7a468({defaultClassName:'_8d5rf83-3-4-1',variantClassNames:{containerHeight:{height24:'_8d5rf84-3-4-1',height32:'_8d5rf85-3-4-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Sparkline.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var contextValueText = _7a468({defaultClassName:'_8d5rf80-3-5-2',variantClassNames:{fontSize:{smallerThan32:'_8d5rf81-3-5-2',greaterOrEqual32:'_8d5rf82-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var negativeSign = _7a468({defaultClassName:'_8d5rf83-3-5-2',variantClassNames:{containerHeight:{height24:'_8d5rf84-3-5-2',height32:'_8d5rf85-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,eAAc,kBAAiB,kBAAiB,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxM,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,iBAAgB,EAAC,UAAS,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/sparkline-display/SparklineContainer.js

@@ -17,7 +17,7 @@ import {
 import { SparklineRenderer } from "./SparklineRenderer.js";
 import { SparklineContainerHeightFontSize } from "./types/sparkline-container-height.js";
 import { calculateArcRadius } from "./utils/arc-radius.js";
-import { getAdjustedContextValueYPosition } from "./utils/get-adjusted-context-value-y-position.js";
+import { getContextValueYPositions } from "./utils/get-adjusted-context-value-y-position.js";
 import { getContextValueLayout } from "./utils/get-context-value-layout.js";
 import { getFormattedContextValues } from "./utils/get-formatted-context-values.js";
 import { getShowContextValues } from "./utils/get-show-context-values.js";
@@ -131,26 +131,16 @@ const SparklineContainer = (props) => {
   const minLabelsDistance = fontSize === SparklineContainerHeightFontSize.GREATER_OR_EQUAL_32 ? CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE : CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL;
   const maxTextOffset = CONTEXT_VALUE_TEXT_OFFSET_MAX;
   const minTextOffset = fontSize === SparklineContainerHeightFontSize.SMALLER_THAN_32 ? CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL : CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE;
-  const adjustedMinLabelY = getAdjustedContextValueYPosition(
+  const { adjustedMinLabelY, adjustedMaxLabelY } = getContextValueYPositions({
     rawMinY,
     rawMaxY,
+    showContextMin,
     showContextMax,
-    false,
     minLabelsDistance,
     minTextOffset,
-    height,
-    maxTextOffset
-  );
-  const adjustedMaxLabelY = getAdjustedContextValueYPosition(
-    rawMinY,
-    rawMaxY,
-    showContextMin,
-    true,
-    minLabelsDistance,
     maxTextOffset,
-    height,
-    maxTextOffset
-  );
+    chartHeight: height
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/esm/charts/core/components/sparkline-display/SparklineContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/sparkline-display/SparklineContainer.tsx"],
-  "sourcesContent": ["import { Line as ZeroLine } from '@visx/shape';\nimport { type MutableRefObject } from 'react';\n\nimport { ContextValueIndicator } from './components/ContextValueIndicator.js';\nimport {\n  AXIS_HEIGHT,\n  CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE,\n  CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL,\n  CONTEXT_VALUE_TEXT_OFFSET_MAX,\n  CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE,\n  CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL,\n  DEFAULT_SCALE_FALLBACK_COLOR,\n  DEFAULT_SHOW_CONTEXT_VALUES,\n  defaultYAxisConfig,\n  FONT_SIZE_BREAKING_POINT,\n  SPARKLINE_ARIA_LABEL,\n} from './constants.js';\nimport { SparklineRenderer } from './SparklineRenderer.js';\nimport { SparklineContainerHeightFontSize } from './types/sparkline-container-height.js';\nimport type { SparklineDisplayProps } from './types/sparkline-display-props.js';\nimport { calculateArcRadius } from './utils/arc-radius.js';\nimport { getAdjustedContextValueYPosition } from './utils/get-adjusted-context-value-y-position.js';\nimport { getContextValueLayout } from './utils/get-context-value-layout.js';\nimport { getFormattedContextValues } from './utils/get-formatted-context-values.js';\nimport { getShowContextValues } from './utils/get-show-context-values.js';\nimport { getSparklineHeight } from './utils/get-sparkline-height.js';\nimport { getSparklineXScale } from './utils/get-sparkline-x-scale.js';\nimport { getSparklineYScale } from './utils/get-sparkline-y-scale.js';\nimport { getXAxisConfig } from './utils/get-x-axis-config.js';\nimport { mapContainerHeightToVariant } from './utils/map-container-height-to-variant.js';\nimport { sanitizeSparklineData } from './utils/sanitize-sparkline-data.js';\nimport { calculateStrokeWidth } from './utils/stroke-width.js';\nimport { mapToThresholdsIndicators } from './utils/threshold-indicators.js';\nimport { useCurrentTheme } from '../../../../core/hooks/useCurrentTheme.js';\nimport { useObserveContainerSize } from '../../hooks/useObserveContainerSize.js';\nimport { Timeseries } from '../../types/timeseries.js';\nimport { getFormattedTicks } from '../../utils/formatter-by-ticks.js';\nimport { getValidColor } from '../../utils/getValidColor.js';\nimport { getHorizontalNumTicks } from '../../utils/ticks.js';\nimport { TimeBottomAxis } from '../axes/components/TimeBottomAxis.js';\nimport { Canvas } from '../canvas/Canvas.js';\nimport { CanvasContext } from '../canvas/CanvasContext.js';\nimport type { CanvasShape } from '../canvas/types/canvas-shape.js';\nimport { createCanvasGradient } from '../canvas/utils/create-canvas-gradient.js';\nimport {\n  DEFAULT_STROKE_COLOR,\n  DEFAULT_STROKE_WIDTH,\n} from '../grid/GridLine.js';\nimport { ThresholdIndicator } from '../threshold-bar/indicators/ThresholdIndicator.js';\n\ninterface SparklineContainerProps extends SparklineDisplayProps {\n  data: Timeseries;\n}\n\n/** Clamps a context value Y position within the sparkline height bounds. */\nfunction getYPosition(height: number, adjustedY: number): number {\n  return Math.max(0, Math.min(height, adjustedY));\n}\n\n/**\n * SparklineContainer component\n */\nexport const SparklineContainer = (props: SparklineContainerProps) => {\n  const {\n    data,\n    color,\n    variant = 'line',\n    showTicks = false,\n    thresholds = [],\n    gapPolicy = 'connect',\n    showContextValues = DEFAULT_SHOW_CONTEXT_VALUES,\n    curve,\n    ticksColor,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className,\n    style: consumerStyle,\n    labelsAlignment = 'left',\n    labelsFixedWidth,\n  } = props;\n\n  const [containerDimension, sizeObserverRef] = useObserveContainerSize();\n\n  const theme = useCurrentTheme();\n\n  const shouldShowTicks = showTicks && containerDimension.height >= 40;\n\n  const { width: containerWidth } = containerDimension;\n\n  const xAxis = getXAxisConfig(props.xAxis);\n  const yAxis = {\n    ...defaultYAxisConfig,\n    ...props.yAxis,\n  };\n\n  const { sanitizedSeries, domainValues } = sanitizeSparklineData(\n    data,\n    gapPolicy,\n    xAxis,\n  );\n\n  const { showContextMin, showContextMax } = showContextValues\n    ? getShowContextValues(yAxis, domainValues)\n    : { showContextMin: false, showContextMax: false };\n\n  const height = getSparklineHeight(containerDimension.height, shouldShowTicks);\n\n  const isBarVariant = variant === 'bar';\n\n  const yScale = getSparklineYScale(domainValues, height, yAxis, isBarVariant);\n\n  const { formattedContextMaxValue, formattedContextMinValue } =\n    getFormattedContextValues({\n      unit: data?.unit,\n      formatter: props.yAxis?.formatter,\n      domainValues,\n    });\n\n  const { chartLeftOffset, chartWidth } = getContextValueLayout({\n    containerHeight: containerDimension.height,\n    containerWidth,\n    showContextValues,\n    formattedContextMaxValue,\n    formattedContextMinValue,\n    labelsAlignment,\n    labelsFixedWidth,\n  });\n\n  const strokeWidth = calculateStrokeWidth(height, chartWidth);\n  const arcRadius = calculateArcRadius(height, chartWidth);\n\n  const xScale = getSparklineXScale(\n    sanitizedSeries,\n    chartWidth,\n    strokeWidth / 2,\n    isBarVariant,\n  );\n\n  const horizontalNumTicks = getHorizontalNumTicks(chartWidth);\n  const { ticks, formattedTicks } = getFormattedTicks(\n    horizontalNumTicks,\n    xScale,\n    undefined,\n    undefined,\n  );\n\n  const thresholdIndicators = mapToThresholdsIndicators(\n    thresholds,\n    chartWidth,\n    height,\n    xScale,\n    yScale,\n  );\n\n  const validatedColor = getValidColor(color, DEFAULT_SCALE_FALLBACK_COLOR);\n\n  const [min, max] = yScale.domain();\n  const displayZeroLine = min <= 0 && max >= 0;\n  const zeroLineYPos = yScale(0) ?? -1;\n\n  // Dashed lines sit at the raw data y-positions; text labels are pushed apart\n  // if their text boxes would overlap, without moving the dashed lines.\n  const rawMinY = yScale(domainValues.min);\n  const rawMaxY = yScale(domainValues.max);\n\n  const containerHeight = mapContainerHeightToVariant(\n    containerDimension.height,\n  );\n\n  const fontSize =\n    containerDimension.height >= FONT_SIZE_BREAKING_POINT\n      ? SparklineContainerHeightFontSize.GREATER_OR_EQUAL_32\n      : SparklineContainerHeightFontSize.SMALLER_THAN_32;\n\n  const minLabelsDistance =\n    fontSize === SparklineContainerHeightFontSize.GREATER_OR_EQUAL_32\n      ? CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE\n      : CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL;\n\n  const maxTextOffset = CONTEXT_VALUE_TEXT_OFFSET_MAX;\n  const minTextOffset =\n    fontSize === SparklineContainerHeightFontSize.SMALLER_THAN_32\n      ? CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL\n      : CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE;\n\n  const adjustedMinLabelY = getAdjustedContextValueYPosition(\n    rawMinY,\n    rawMaxY,\n    showContextMax,\n    false,\n    minLabelsDistance,\n    minTextOffset,\n    height,\n    maxTextOffset,\n  );\n  const adjustedMaxLabelY = getAdjustedContextValueYPosition(\n    rawMinY,\n    rawMaxY,\n    showContextMin,\n    true,\n    minLabelsDistance,\n    maxTextOffset,\n    height,\n    maxTextOffset,\n  );\n\n  return (\n    <div\n      style={{ height: '100%' }}\n      className={className}\n      ref={sizeObserverRef}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-label={SPARKLINE_ARIA_LABEL}\n      role=\"img\"\n    >\n      <div\n        style={{\n          transform: `translate(${chartLeftOffset}px)`,\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        <svg\n          width={chartWidth}\n          height={height}\n          style={{ position: 'absolute' }}\n        >\n          {displayZeroLine && (\n            <ZeroLine\n              from={{ x: 0, y: zeroLineYPos }}\n              to={{ x: chartWidth, y: zeroLineYPos }}\n              stroke={DEFAULT_STROKE_COLOR}\n              strokeWidth={DEFAULT_STROKE_WIDTH}\n              data-testid=\"sparkline-zero-baseline\"\n            />\n          )}\n          {thresholdIndicators.length > 0 &&\n            thresholdIndicators.map(\n              ({ id, indicatorData, color, strokeOnly }) => (\n                <ThresholdIndicator\n                  key={`threshold-indicator-${id}`}\n                  data={indicatorData}\n                  color={color}\n                  strokeOnly={strokeOnly}\n                  isActive={false}\n                />\n              ),\n            )}\n        </svg>\n        <div style={{ position: 'absolute', ...consumerStyle }}>\n          <CanvasContext.Provider\n            value={{\n              shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n            }}\n          >\n            <Canvas width={containerWidth} height={height}>\n              <SparklineRenderer\n                data={sanitizedSeries.datapoints}\n                width={chartWidth}\n                height={height}\n                xScale={xScale}\n                yScale={yScale}\n                strokeColor={validatedColor}\n                fillColor={createCanvasGradient({\n                  height,\n                  color: validatedColor,\n                  domain: yScale.domain(),\n                  theme,\n                })}\n                variant={variant}\n                strokeWidth={strokeWidth}\n                radius={arcRadius}\n                curve={curve}\n                gapPolicy={gapPolicy}\n              />\n            </Canvas>\n          </CanvasContext.Provider>\n\n          {shouldShowTicks && (\n            <TimeBottomAxis\n              ticks={ticks}\n              tickColor={ticksColor}\n              formattedTicks={formattedTicks}\n              scale={xScale}\n              containerHeight={AXIS_HEIGHT}\n              containerWidth={chartWidth - 16}\n            />\n          )}\n        </div>\n      </div>\n\n      {showContextMin && (\n        <ContextValueIndicator\n          formattedValue={formattedContextMinValue}\n          dottedLineWidth={chartWidth}\n          labelsFixedWidth={labelsFixedWidth}\n          yPosition={getYPosition(height, rawMinY)}\n          labelYPosition={adjustedMinLabelY}\n          containerHeight={containerHeight}\n          fontSize={fontSize}\n          labelsAlignment={labelsAlignment}\n          chartLeftOffset={chartLeftOffset}\n          color={ticksColor}\n          sparklineHeight={height}\n        />\n      )}\n      {showContextMax && (\n        <ContextValueIndicator\n          formattedValue={formattedContextMaxValue}\n          dottedLineWidth={chartWidth}\n          yPosition={getYPosition(height, rawMaxY)}\n          labelYPosition={adjustedMaxLabelY}\n          containerHeight={containerHeight}\n          fontSize={fontSize}\n          labelsAlignment={labelsAlignment}\n          chartLeftOffset={chartLeftOffset}\n          labelsFixedWidth={labelsFixedWidth}\n          color={ticksColor}\n          sparklineHeight={height}\n          isMax\n        />\n      )}\n    </div>\n  );\n};\n\nSparklineContainer['displayName'] = 'SparklineContainer';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Line as ZeroLine } from '@visx/shape';\nimport { type MutableRefObject } from 'react';\n\nimport { ContextValueIndicator } from './components/ContextValueIndicator.js';\nimport {\n  AXIS_HEIGHT,\n  CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE,\n  CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL,\n  CONTEXT_VALUE_TEXT_OFFSET_MAX,\n  CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE,\n  CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL,\n  DEFAULT_SCALE_FALLBACK_COLOR,\n  DEFAULT_SHOW_CONTEXT_VALUES,\n  defaultYAxisConfig,\n  FONT_SIZE_BREAKING_POINT,\n  SPARKLINE_ARIA_LABEL,\n} from './constants.js';\nimport { SparklineRenderer } from './SparklineRenderer.js';\nimport { SparklineContainerHeightFontSize } from './types/sparkline-container-height.js';\nimport type { SparklineDisplayProps } from './types/sparkline-display-props.js';\nimport { calculateArcRadius } from './utils/arc-radius.js';\nimport { getContextValueYPositions } from './utils/get-adjusted-context-value-y-position.js';\nimport { getContextValueLayout } from './utils/get-context-value-layout.js';\nimport { getFormattedContextValues } from './utils/get-formatted-context-values.js';\nimport { getShowContextValues } from './utils/get-show-context-values.js';\nimport { getSparklineHeight } from './utils/get-sparkline-height.js';\nimport { getSparklineXScale } from './utils/get-sparkline-x-scale.js';\nimport { getSparklineYScale } from './utils/get-sparkline-y-scale.js';\nimport { getXAxisConfig } from './utils/get-x-axis-config.js';\nimport { mapContainerHeightToVariant } from './utils/map-container-height-to-variant.js';\nimport { sanitizeSparklineData } from './utils/sanitize-sparkline-data.js';\nimport { calculateStrokeWidth } from './utils/stroke-width.js';\nimport { mapToThresholdsIndicators } from './utils/threshold-indicators.js';\nimport { useCurrentTheme } from '../../../../core/hooks/useCurrentTheme.js';\nimport { useObserveContainerSize } from '../../hooks/useObserveContainerSize.js';\nimport { Timeseries } from '../../types/timeseries.js';\nimport { getFormattedTicks } from '../../utils/formatter-by-ticks.js';\nimport { getValidColor } from '../../utils/getValidColor.js';\nimport { getHorizontalNumTicks } from '../../utils/ticks.js';\nimport { TimeBottomAxis } from '../axes/components/TimeBottomAxis.js';\nimport { Canvas } from '../canvas/Canvas.js';\nimport { CanvasContext } from '../canvas/CanvasContext.js';\nimport type { CanvasShape } from '../canvas/types/canvas-shape.js';\nimport { createCanvasGradient } from '../canvas/utils/create-canvas-gradient.js';\nimport {\n  DEFAULT_STROKE_COLOR,\n  DEFAULT_STROKE_WIDTH,\n} from '../grid/GridLine.js';\nimport { ThresholdIndicator } from '../threshold-bar/indicators/ThresholdIndicator.js';\n\ninterface SparklineContainerProps extends SparklineDisplayProps {\n  data: Timeseries;\n}\n\n/** Clamps a context value Y position within the sparkline height bounds. */\nfunction getYPosition(height: number, adjustedY: number): number {\n  return Math.max(0, Math.min(height, adjustedY));\n}\n\n/**\n * SparklineContainer component\n */\nexport const SparklineContainer = (props: SparklineContainerProps) => {\n  const {\n    data,\n    color,\n    variant = 'line',\n    showTicks = false,\n    thresholds = [],\n    gapPolicy = 'connect',\n    showContextValues = DEFAULT_SHOW_CONTEXT_VALUES,\n    curve,\n    ticksColor,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className,\n    style: consumerStyle,\n    labelsAlignment = 'left',\n    labelsFixedWidth,\n  } = props;\n\n  const [containerDimension, sizeObserverRef] = useObserveContainerSize();\n\n  const theme = useCurrentTheme();\n\n  const shouldShowTicks = showTicks && containerDimension.height >= 40;\n\n  const { width: containerWidth } = containerDimension;\n\n  const xAxis = getXAxisConfig(props.xAxis);\n  const yAxis = {\n    ...defaultYAxisConfig,\n    ...props.yAxis,\n  };\n\n  const { sanitizedSeries, domainValues } = sanitizeSparklineData(\n    data,\n    gapPolicy,\n    xAxis,\n  );\n\n  const { showContextMin, showContextMax } = showContextValues\n    ? getShowContextValues(yAxis, domainValues)\n    : { showContextMin: false, showContextMax: false };\n\n  const height = getSparklineHeight(containerDimension.height, shouldShowTicks);\n\n  const isBarVariant = variant === 'bar';\n\n  const yScale = getSparklineYScale(domainValues, height, yAxis, isBarVariant);\n\n  const { formattedContextMaxValue, formattedContextMinValue } =\n    getFormattedContextValues({\n      unit: data?.unit,\n      formatter: props.yAxis?.formatter,\n      domainValues,\n    });\n\n  const { chartLeftOffset, chartWidth } = getContextValueLayout({\n    containerHeight: containerDimension.height,\n    containerWidth,\n    showContextValues,\n    formattedContextMaxValue,\n    formattedContextMinValue,\n    labelsAlignment,\n    labelsFixedWidth,\n  });\n\n  const strokeWidth = calculateStrokeWidth(height, chartWidth);\n  const arcRadius = calculateArcRadius(height, chartWidth);\n\n  const xScale = getSparklineXScale(\n    sanitizedSeries,\n    chartWidth,\n    strokeWidth / 2,\n    isBarVariant,\n  );\n\n  const horizontalNumTicks = getHorizontalNumTicks(chartWidth);\n  const { ticks, formattedTicks } = getFormattedTicks(\n    horizontalNumTicks,\n    xScale,\n    undefined,\n    undefined,\n  );\n\n  const thresholdIndicators = mapToThresholdsIndicators(\n    thresholds,\n    chartWidth,\n    height,\n    xScale,\n    yScale,\n  );\n\n  const validatedColor = getValidColor(color, DEFAULT_SCALE_FALLBACK_COLOR);\n\n  const [min, max] = yScale.domain();\n  const displayZeroLine = min <= 0 && max >= 0;\n  const zeroLineYPos = yScale(0) ?? -1;\n\n  // Dashed lines sit at the raw data y-positions; text labels are pushed apart\n  // if their text boxes would overlap, without moving the dashed lines.\n  const rawMinY = yScale(domainValues.min);\n  const rawMaxY = yScale(domainValues.max);\n\n  const containerHeight = mapContainerHeightToVariant(\n    containerDimension.height,\n  );\n\n  const fontSize =\n    containerDimension.height >= FONT_SIZE_BREAKING_POINT\n      ? SparklineContainerHeightFontSize.GREATER_OR_EQUAL_32\n      : SparklineContainerHeightFontSize.SMALLER_THAN_32;\n\n  const minLabelsDistance =\n    fontSize === SparklineContainerHeightFontSize.GREATER_OR_EQUAL_32\n      ? CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE\n      : CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL;\n\n  const maxTextOffset = CONTEXT_VALUE_TEXT_OFFSET_MAX;\n  const minTextOffset =\n    fontSize === SparklineContainerHeightFontSize.SMALLER_THAN_32\n      ? CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL\n      : CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE;\n\n  const { adjustedMinLabelY, adjustedMaxLabelY } = getContextValueYPositions({\n    rawMinY,\n    rawMaxY,\n    showContextMin,\n    showContextMax,\n    minLabelsDistance,\n    minTextOffset,\n    maxTextOffset,\n    chartHeight: height,\n  });\n\n  return (\n    <div\n      style={{ height: '100%' }}\n      className={className}\n      ref={sizeObserverRef}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-label={SPARKLINE_ARIA_LABEL}\n      role=\"img\"\n    >\n      <div\n        style={{\n          transform: `translate(${chartLeftOffset}px)`,\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        <svg\n          width={chartWidth}\n          height={height}\n          style={{ position: 'absolute' }}\n        >\n          {displayZeroLine && (\n            <ZeroLine\n              from={{ x: 0, y: zeroLineYPos }}\n              to={{ x: chartWidth, y: zeroLineYPos }}\n              stroke={DEFAULT_STROKE_COLOR}\n              strokeWidth={DEFAULT_STROKE_WIDTH}\n              data-testid=\"sparkline-zero-baseline\"\n            />\n          )}\n          {thresholdIndicators.length > 0 &&\n            thresholdIndicators.map(\n              ({ id, indicatorData, color, strokeOnly }) => (\n                <ThresholdIndicator\n                  key={`threshold-indicator-${id}`}\n                  data={indicatorData}\n                  color={color}\n                  strokeOnly={strokeOnly}\n                  isActive={false}\n                />\n              ),\n            )}\n        </svg>\n        <div style={{ position: 'absolute', ...consumerStyle }}>\n          <CanvasContext.Provider\n            value={{\n              shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n            }}\n          >\n            <Canvas width={containerWidth} height={height}>\n              <SparklineRenderer\n                data={sanitizedSeries.datapoints}\n                width={chartWidth}\n                height={height}\n                xScale={xScale}\n                yScale={yScale}\n                strokeColor={validatedColor}\n                fillColor={createCanvasGradient({\n                  height,\n                  color: validatedColor,\n                  domain: yScale.domain(),\n                  theme,\n                })}\n                variant={variant}\n                strokeWidth={strokeWidth}\n                radius={arcRadius}\n                curve={curve}\n                gapPolicy={gapPolicy}\n              />\n            </Canvas>\n          </CanvasContext.Provider>\n\n          {shouldShowTicks && (\n            <TimeBottomAxis\n              ticks={ticks}\n              tickColor={ticksColor}\n              formattedTicks={formattedTicks}\n              scale={xScale}\n              containerHeight={AXIS_HEIGHT}\n              containerWidth={chartWidth - 16}\n            />\n          )}\n        </div>\n      </div>\n\n      {showContextMin && (\n        <ContextValueIndicator\n          formattedValue={formattedContextMinValue}\n          dottedLineWidth={chartWidth}\n          labelsFixedWidth={labelsFixedWidth}\n          yPosition={getYPosition(height, rawMinY)}\n          labelYPosition={adjustedMinLabelY}\n          containerHeight={containerHeight}\n          fontSize={fontSize}\n          labelsAlignment={labelsAlignment}\n          chartLeftOffset={chartLeftOffset}\n          color={ticksColor}\n          sparklineHeight={height}\n        />\n      )}\n      {showContextMax && (\n        <ContextValueIndicator\n          formattedValue={formattedContextMaxValue}\n          dottedLineWidth={chartWidth}\n          yPosition={getYPosition(height, rawMaxY)}\n          labelYPosition={adjustedMaxLabelY}\n          containerHeight={containerHeight}\n          fontSize={fontSize}\n          labelsAlignment={labelsAlignment}\n          chartLeftOffset={chartLeftOffset}\n          labelsFixedWidth={labelsFixedWidth}\n          color={ticksColor}\n          sparklineHeight={height}\n          isMax\n        />\n      )}\n    </div>\n  );\n};\n\nSparklineContainer['displayName'] = 'SparklineContainer';\n"],
+  "mappings": "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",
   "names": ["color"]
 }

package/esm/charts/core/components/sparkline-display/utils/get-adjusted-context-value-y-position.js

@@ -15,7 +15,39 @@ function getAdjustedContextValueYPosition(rawMinYPos, rawMaxYPos, otherIndicator
   }
   return position;
 }
+function getContextValueYPositions({
+  rawMinY,
+  rawMaxY,
+  showContextMin,
+  showContextMax,
+  minLabelsDistance,
+  minTextOffset,
+  maxTextOffset,
+  chartHeight
+}) {
+  return {
+    adjustedMinLabelY: getAdjustedContextValueYPosition(
+      rawMinY,
+      rawMaxY,
+      showContextMax,
+      false,
+      minLabelsDistance,
+      minTextOffset,
+      chartHeight,
+      maxTextOffset
+    ),
+    adjustedMaxLabelY: getAdjustedContextValueYPosition(
+      rawMinY,
+      rawMaxY,
+      showContextMin,
+      true,
+      minLabelsDistance,
+      maxTextOffset
+    )
+  };
+}
 export {
-  getAdjustedContextValueYPosition
+  getAdjustedContextValueYPosition,
+  getContextValueYPositions
 };
 //# sourceMappingURL=get-adjusted-context-value-y-position.js.map

package/esm/charts/core/components/sparkline-display/utils/get-adjusted-context-value-y-position.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/sparkline-display/utils/get-adjusted-context-value-y-position.ts"],
-  "sourcesContent": ["/**\n * Returns the adjusted y-position for a context-value indicator.\n * Prevents label overlap when min/max values are too close together\n * and clamps the result so the text label stays within the chart area.\n *\n * @param rawMinYPos\n * @param rawMaxYPos\n * @param otherIndicatorVisible - Whether the other indicator is rendered.\n * @param isMax - True when computing the position for the max indicator.\n * @param minLabelsDistance - Minimum vertical gap (px) between the two indicators\n *   to prevent overlap. Use `CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL` (24 px)\n *   or `CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE` (32 px) depending on font size.\n * @param textOffset - Space (px) the label needs above its anchor. Used to\n *   clamp the max label within the top boundary.\n * @param chartHeight - Chart area height (px). When set, the min label is\n *   clamped so it doesn't overflow below the chart.\n * @param textBottomOverflow - How far (px) the label extends below its anchor\n *   (`lineHeight \u2212 textOffset`, typically 4 px). When omitted, no bottom clamping is applied.\n */\nexport function getAdjustedContextValueYPosition(\n  rawMinYPos: number,\n  rawMaxYPos: number,\n  otherIndicatorVisible: boolean,\n  isMax: boolean,\n  minLabelsDistance: number,\n  textOffset: number,\n  chartHeight?: number,\n  textBottomOverflow?: number,\n): number {\n  const currentVerticalGap = rawMinYPos - rawMaxYPos;\n  const needsOverlapAdjustment =\n    otherIndicatorVisible && currentVerticalGap < minLabelsDistance;\n\n  let position: number;\n\n  if (needsOverlapAdjustment) {\n    const requiredShift = (minLabelsDistance - currentVerticalGap) / 2;\n    position = isMax ? rawMaxYPos - requiredShift : rawMinYPos + requiredShift;\n  } else {\n    position = isMax ? rawMaxYPos : rawMinYPos;\n  }\n\n  // Clamp so the text label stays within the chart boundaries.\n  if (isMax) {\n    // Max label: text is rendered at (position \u2212 textOffset), must be \u2265 0.\n    position = Math.max(position, textOffset);\n  } else if (chartHeight !== undefined && textBottomOverflow !== undefined) {\n    // Min label: text bottom is at (position + textBottomOverflow), must be \u2264 chartHeight.\n    position = Math.min(position, chartHeight - textBottomOverflow);\n  }\n\n  return position;\n}\n"],
-  "mappings": "AAmBO,SAAS,iCACd,YACA,YACA,uBACA,OACA,mBACA,YACA,aACA,oBACQ;AACR,QAAM,qBAAqB,aAAa;AACxC,QAAM,yBACJ,yBAAyB,qBAAqB;AAEhD,MAAI;AAEJ,MAAI,wBAAwB;AAC1B,UAAM,iBAAiB,oBAAoB,sBAAsB;AACjE,eAAW,QAAQ,aAAa,gBAAgB,aAAa;AAAA,EAC/D,OAAO;AACL,eAAW,QAAQ,aAAa;AAAA,EAClC;AAGA,MAAI,OAAO;AAET,eAAW,KAAK,IAAI,UAAU,UAAU;AAAA,EAC1C,WAAW,gBAAgB,UAAa,uBAAuB,QAAW;AAExE,eAAW,KAAK,IAAI,UAAU,cAAc,kBAAkB;AAAA,EAChE;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/**\n * Returns the adjusted y-position for a context-value indicator.\n * Prevents label overlap when min/max values are too close together\n * and clamps the result so the text label stays within the chart area.\n *\n * @param rawMinYPos\n * @param rawMaxYPos\n * @param otherIndicatorVisible - Whether the other indicator is rendered.\n * @param isMax - True when computing the position for the max indicator.\n * @param minLabelsDistance - Minimum vertical gap (px) between the two indicators\n *   to prevent overlap. Use `CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL` (24 px)\n *   or `CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE` (32 px) depending on font size.\n * @param textOffset - Space (px) the label needs above its anchor. Used to\n *   clamp the max label within the top boundary.\n * @param chartHeight - Chart area height (px). When set, the min label is\n *   clamped so it doesn't overflow below the chart.\n * @param textBottomOverflow - How far (px) the label extends below its anchor\n *   (`lineHeight \u2212 textOffset`, typically 4 px). When omitted, no bottom clamping is applied.\n */\nexport function getAdjustedContextValueYPosition(\n  rawMinYPos: number,\n  rawMaxYPos: number,\n  otherIndicatorVisible: boolean,\n  isMax: boolean,\n  minLabelsDistance: number,\n  textOffset: number,\n  chartHeight?: number,\n  textBottomOverflow?: number,\n): number {\n  const currentVerticalGap = rawMinYPos - rawMaxYPos;\n  const needsOverlapAdjustment =\n    otherIndicatorVisible && currentVerticalGap < minLabelsDistance;\n\n  let position: number;\n\n  if (needsOverlapAdjustment) {\n    const requiredShift = (minLabelsDistance - currentVerticalGap) / 2;\n    position = isMax ? rawMaxYPos - requiredShift : rawMinYPos + requiredShift;\n  } else {\n    position = isMax ? rawMaxYPos : rawMinYPos;\n  }\n\n  // Clamp so the text label stays within the chart boundaries.\n  if (isMax) {\n    // Max label: text is rendered at (position \u2212 textOffset), must be \u2265 0.\n    position = Math.max(position, textOffset);\n  } else if (chartHeight !== undefined && textBottomOverflow !== undefined) {\n    // Min label: text bottom is at (position + textBottomOverflow), must be \u2264 chartHeight.\n    position = Math.min(position, chartHeight - textBottomOverflow);\n  }\n\n  return position;\n}\n\ninterface ContextValueYPositionsParams {\n  rawMinY: number;\n  rawMaxY: number;\n  showContextMin: boolean;\n  showContextMax: boolean;\n  minLabelsDistance: number;\n  minTextOffset: number;\n  maxTextOffset: number;\n  chartHeight: number;\n}\n\n/**\n * Computes the adjusted Y positions for both context value labels (min & max)\n * in a single call by delegating to `getAdjustedContextValueYPosition`.\n */\nexport function getContextValueYPositions({\n  rawMinY,\n  rawMaxY,\n  showContextMin,\n  showContextMax,\n  minLabelsDistance,\n  minTextOffset,\n  maxTextOffset,\n  chartHeight,\n}: ContextValueYPositionsParams): {\n  adjustedMinLabelY: number;\n  adjustedMaxLabelY: number;\n} {\n  return {\n    adjustedMinLabelY: getAdjustedContextValueYPosition(\n      rawMinY,\n      rawMaxY,\n      showContextMax,\n      false,\n      minLabelsDistance,\n      minTextOffset,\n      chartHeight,\n      maxTextOffset,\n    ),\n    adjustedMaxLabelY: getAdjustedContextValueYPosition(\n      rawMinY,\n      rawMaxY,\n      showContextMin,\n      true,\n      minLabelsDistance,\n      maxTextOffset,\n    ),\n  };\n}\n"],
+  "mappings": "AAmBO,SAAS,iCACd,YACA,YACA,uBACA,OACA,mBACA,YACA,aACA,oBACQ;AACR,QAAM,qBAAqB,aAAa;AACxC,QAAM,yBACJ,yBAAyB,qBAAqB;AAEhD,MAAI;AAEJ,MAAI,wBAAwB;AAC1B,UAAM,iBAAiB,oBAAoB,sBAAsB;AACjE,eAAW,QAAQ,aAAa,gBAAgB,aAAa;AAAA,EAC/D,OAAO;AACL,eAAW,QAAQ,aAAa;AAAA,EAClC;AAGA,MAAI,OAAO;AAET,eAAW,KAAK,IAAI,UAAU,UAAU;AAAA,EAC1C,WAAW,gBAAgB,UAAa,uBAAuB,QAAW;AAExE,eAAW,KAAK,IAAI,UAAU,cAAc,kBAAkB;AAAA,EAChE;AAEA,SAAO;AACT;AAiBO,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGE;AACA,SAAO;AAAA,IACL,mBAAmB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,mBAAmB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/text-ellipsis/ChartTextEllipsis.css

@@ -1,4 +1,4 @@
-._ix5ox20-3-4-1 {
+._ix5ox20-3-5-2 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,25 +9,25 @@
   text-decoration: inherit;
   width: 100%;
 }
-._ix5ox21-3-4-1 {
+._ix5ox21-3-5-2 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-._ix5ox21-3-4-1::after, ._ix5ox21-3-4-1::before {
+._ix5ox21-3-5-2::after, ._ix5ox21-3-5-2::before {
   content: "‎";
 }
-._ix5ox22-3-4-1 {
+._ix5ox22-3-5-2 {
   text-overflow: ellipsis;
 }
-._ix5ox24-3-4-1 {
+._ix5ox24-3-5-2 {
   position: relative;
   width: 100%;
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
 }
-._ix5ox24-3-4-1::after {
+._ix5ox24-3-5-2::after {
   content: attr(data-sourcetext) / "";
   color: transparent;
   display: table;
@@ -36,7 +36,7 @@
   user-select: none;
   overflow: hidden;
 }
-._ix5ox25-3-4-1 {
+._ix5ox25-3-5-2 {
   white-space: nowrap;
   display: block;
   overflow: hidden;

package/esm/charts/core/components/text-ellipsis/ChartTextEllipsis.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/text-ellipsis/ChartTextEllipsis.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useRef,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\n\n\nimport {\n  FontWidthMap,\n  charsFontWidth12pixelsSize400Map,\n} from './chars-font-width-map.js';\nimport * as styles from './ChartTextEllipsis.sty.js';\nimport {\n  truncationContainer,\n  truncationText,\n} from './ChartTextEllipsis.sty.js';\nimport { useTruncateMiddleEllipsis } from './useTruncateMiddleEllipsis.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\n\n/**\n * Available modes for how overly long text is truncated and where the ellipsis is placed.\n * @public\n */\nexport type TruncationMode = 'start' | 'middle' | 'end';\n\n/**\n * The props for the TextEllipsis component.\n * @public\n */\nexport interface TextEllipsisProps\n  extends HTMLAttributes<HTMLDivElement>,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Pixel width map per character used to compute truncation.\n   * Keys are single characters and values are their widths in CSS pixels.\n   * Important: the widths must match the effective font family, size, and weight\n   * used in the rendered label (e.g., the legend item). If a character is missing,\n   * the implementation typically falls back to the width of 'W'.\n   *\n   * Example shape:\n   * { 'A': 7.12, 'B': 7.04, ' ': 3.00, '.': 2.00, ... }\n   *\n   * @defaultValue charsFontWidth12pixelsSize400Map\n   */\n  charsFontWidthMap?: FontWidthMap;\n  /**\n   * The mode used for truncating the text, either at the start, in the middle or at the end.\n   * @defaultValue 'end'\n   */\n  truncationMode?: TruncationMode;\n}\n\nconst ComputedTextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  TextEllipsisProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    charsFontWidthMap,\n    truncationMode,\n    ...containerProps\n  } = props;\n\n  const internalContainerRef = useRef<HTMLDivElement>(null);\n  const mergedContainerRef = useMergeRefs<HTMLSpanElement>([\n    internalContainerRef,\n    forwardedRef,\n  ]);\n\n  const text = typeof children === 'string' ? children : String(children);\n  const displayText = useTruncateMiddleEllipsis(\n    text,\n    charsFontWidthMap ?? charsFontWidth12pixelsSize400Map,\n    internalContainerRef,\n  );\n\n  return (\n    <div\n      ref={mergedContainerRef}\n      className={clsx(truncationContainer, consumerClassName)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-sourcetext={children}\n      style={consumerStyle}\n      {...containerProps}\n    >\n      <span className={truncationText}>{displayText}</span>\n    </div>\n  );\n});\n\nconst CssTextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  PropsWithChildren<TextEllipsisProps>\n>((props, forwardedRef) => {\n  const {\n    children,\n    truncationMode = 'end',\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    charsFontWidthMap, // important to exclude from  remaining props to avoid problems in DOM.\n    ...remainingProps\n  } = props;\n\n  return (\n    <span\n      ref={forwardedRef}\n      aria-label={String(children)}\n      data-testid={dataTestId}\n      className={clsx(styles.ellipsis({ truncationMode }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n    >\n      <span>{children}</span>\n    </span>\n  );\n});\n\n/**\n * @public\n * @param props.charsFontWidthMap - Pixel width map per character (must match the effective font).\n * @param props.truncationMode - Truncation mode: 'start' | 'middle' | 'end' (default 'end').\n */\nexport const ChartTextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  PropsWithChildren<TextEllipsisProps>\n>((props, forwardedRef) => {\n  const cssOnlyEllipsis = props.truncationMode !== 'middle';\n\n  return cssOnlyEllipsis ? (\n    <CssTextEllipsis ref={forwardedRef} {...props} />\n  ) : (\n    <ComputedTextEllipsis ref={forwardedRef} {...props} />\n  );\n});\n\n(\n  ChartTextEllipsis as typeof ChartTextEllipsis & { displayName: string }\n).displayName = 'ChartTextEllipsis';\n"],
-  "mappings": "AAmGM;AAnGN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EAEE;AAAA,OACK;AACP,YAAY,YAAY;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAwC7B,MAAM,uBAAuC,2BAG3C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,uBAAuB,OAAuB,IAAI;AACxD,QAAM,qBAAqB,aAA8B;AAAA,IACvD;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,OAAO,OAAO,aAAa,WAAW,WAAW,OAAO,QAAQ;AACtE,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,qBAAqB,iBAAiB;AAAA,MACtD,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ,8BAAC,UAAK,WAAW,gBAAiB,uBAAY;AAAA;AAAA,EAChD;AAEJ,CAAC;AAED,MAAM,kBAAkC,2BAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAY,OAAO,QAAQ;AAAA,MAC3B,eAAa;AAAA,MACb,WAAW,KAAK,OAAO,SAAS,EAAE,eAAe,CAAC,GAAG,iBAAiB;AAAA,MACtE,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ,8BAAC,UAAM,UAAS;AAAA;AAAA,EAClB;AAEJ,CAAC;AAOM,MAAM,oBAAoC,2BAG/C,CAAC,OAAO,iBAAiB;AACzB,QAAM,kBAAkB,MAAM,mBAAmB;AAEjD,SAAO,kBACL,oBAAC,mBAAgB,KAAK,cAAe,GAAG,OAAO,IAE/C,oBAAC,wBAAqB,KAAK,cAAe,GAAG,OAAO;AAExD,CAAC;AAGC,kBACA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useRef,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\n\nimport {\n  FontWidthMap,\n  charsFontWidth12pixelsSize400Map,\n} from './chars-font-width-map.js';\nimport * as styles from './ChartTextEllipsis.sty.js';\nimport {\n  truncationContainer,\n  truncationText,\n} from './ChartTextEllipsis.sty.js';\nimport { useTruncateMiddleEllipsis } from './useTruncateMiddleEllipsis.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';\n\n/**\n * The props for the TextEllipsis component.\n * @public\n */\nexport interface TextEllipsisProps\n  extends HTMLAttributes<HTMLDivElement>,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Pixel width map per character used to compute truncation.\n   * Keys are single characters and values are their widths in CSS pixels.\n   * Important: the widths must match the effective font family, size, and weight\n   * used in the rendered label (e.g., the legend item). If a character is missing,\n   * the implementation typically falls back to the width of 'W'.\n   *\n   * Example shape:\n   * { 'A': 7.12, 'B': 7.04, ' ': 3.00, '.': 2.00, ... }\n   *\n   * @defaultValue charsFontWidth12pixelsSize400Map\n   */\n  charsFontWidthMap?: FontWidthMap;\n  /**\n   * The mode used for truncating the text, either at the start, in the middle or at the end.\n   * @defaultValue 'end'\n   */\n  truncationMode?: TruncationMode;\n}\n\nconst ComputedTextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  TextEllipsisProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    charsFontWidthMap,\n    truncationMode,\n    ...containerProps\n  } = props;\n\n  const internalContainerRef = useRef<HTMLDivElement>(null);\n  const mergedContainerRef = useMergeRefs<HTMLSpanElement>([\n    internalContainerRef,\n    forwardedRef,\n  ]);\n\n  const text = typeof children === 'string' ? children : String(children);\n  const displayText = useTruncateMiddleEllipsis(\n    text,\n    charsFontWidthMap ?? charsFontWidth12pixelsSize400Map,\n    internalContainerRef,\n  );\n\n  return (\n    <div\n      ref={mergedContainerRef}\n      className={clsx(truncationContainer, consumerClassName)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-sourcetext={children}\n      style={consumerStyle}\n      {...containerProps}\n    >\n      <span className={truncationText}>{displayText}</span>\n    </div>\n  );\n});\n\nconst CssTextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  PropsWithChildren<TextEllipsisProps>\n>((props, forwardedRef) => {\n  const {\n    children,\n    truncationMode = 'end',\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    charsFontWidthMap, // important to exclude from  remaining props to avoid problems in DOM.\n    ...remainingProps\n  } = props;\n\n  return (\n    <span\n      ref={forwardedRef}\n      aria-label={String(children)}\n      data-testid={dataTestId}\n      className={clsx(styles.ellipsis({ truncationMode }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n    >\n      <span>{children}</span>\n    </span>\n  );\n});\n\n/**\n * @public\n * @param props.charsFontWidthMap - Pixel width map per character (must match the effective font).\n * @param props.truncationMode - Truncation mode: 'start' | 'middle' | 'end' (default 'end').\n */\nexport const ChartTextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  PropsWithChildren<TextEllipsisProps>\n>((props, forwardedRef) => {\n  const cssOnlyEllipsis = props.truncationMode !== 'middle';\n\n  return cssOnlyEllipsis ? (\n    <CssTextEllipsis ref={forwardedRef} {...props} />\n  ) : (\n    <ComputedTextEllipsis ref={forwardedRef} {...props} />\n  );\n});\n\n(\n  ChartTextEllipsis as typeof ChartTextEllipsis & { displayName: string }\n).displayName = 'ChartTextEllipsis';\n"],
+  "mappings": "AA6FM;AA7FN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP;AAAA,EAEE;AAAA,OACK;AACP,YAAY,YAAY;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAmC7B,MAAM,uBAAuC,2BAG3C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,uBAAuB,OAAuB,IAAI;AACxD,QAAM,qBAAqB,aAA8B;AAAA,IACvD;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,OAAO,OAAO,aAAa,WAAW,WAAW,OAAO,QAAQ;AACtE,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,qBAAqB,iBAAiB;AAAA,MACtD,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ,8BAAC,UAAK,WAAW,gBAAiB,uBAAY;AAAA;AAAA,EAChD;AAEJ,CAAC;AAED,MAAM,kBAAkC,2BAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAY,OAAO,QAAQ;AAAA,MAC3B,eAAa;AAAA,MACb,WAAW,KAAK,OAAO,SAAS,EAAE,eAAe,CAAC,GAAG,iBAAiB;AAAA,MACtE,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ,8BAAC,UAAM,UAAS;AAAA;AAAA,EAClB;AAEJ,CAAC;AAOM,MAAM,oBAAoC,2BAG/C,CAAC,OAAO,iBAAiB;AACzB,QAAM,kBAAkB,MAAM,mBAAmB;AAEjD,SAAO,kBACL,oBAAC,mBAAgB,KAAK,cAAe,GAAG,OAAO,IAE/C,oBAAC,wBAAqB,KAAK,cAAe,GAAG,OAAO;AAExD,CAAC;AAGC,kBACA,cAAc;",
   "names": []
 }

package/esm/charts/core/components/text-ellipsis/ChartTextEllipsis.sty.js

@@ -1,8 +1,8 @@
 import "./ChartTextEllipsis.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var ellipsis = _7a468({ defaultClassName: "_ix5ox20-3-4-1", variantClassNames: { truncationMode: { start: "_ix5ox21-3-4-1", end: "_ix5ox22-3-4-1", middle: "_ix5ox23-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var truncationContainer = "_ix5ox24-3-4-1";
-var truncationText = "_ix5ox25-3-4-1";
+var ellipsis = _7a468({ defaultClassName: "_ix5ox20-3-5-2", variantClassNames: { truncationMode: { start: "_ix5ox21-3-5-2", end: "_ix5ox22-3-5-2", middle: "_ix5ox23-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var truncationContainer = "_ix5ox24-3-5-2";
+var truncationText = "_ix5ox25-3-5-2";
 export {
   ellipsis,
   truncationContainer,

package/esm/charts/core/components/text-ellipsis/ChartTextEllipsis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/text-ellipsis/ChartTextEllipsis.css.ts"],
-  "sourcesContent": ["import './ChartTextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ellipsis = _7a468({defaultClassName:'_ix5ox20-3-4-1',variantClassNames:{truncationMode:{start:'_ix5ox21-3-4-1',end:'_ix5ox22-3-4-1',middle:'_ix5ox23-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var truncationContainer = '_ix5ox24-3-4-1';\nexport var truncationText = '_ix5ox25-3-4-1';"],
+  "sourcesContent": ["import './ChartTextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ellipsis = _7a468({defaultClassName:'_ix5ox20-3-5-2',variantClassNames:{truncationMode:{start:'_ix5ox21-3-5-2',end:'_ix5ox22-3-5-2',middle:'_ix5ox23-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var truncationContainer = '_ix5ox24-3-5-2';\nexport var truncationText = '_ix5ox25-3-5-2';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,WAAW,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,gBAAe,EAAC,OAAM,kBAAiB,KAAI,kBAAiB,QAAO,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzM,IAAI,sBAAsB;AAC1B,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/core/components/text-ellipsis/truncate-string.js

@@ -1,8 +1,12 @@
 import { ELLIPSIS_CHARACTER as _ELLIPSIS_CHARACTER } from "../../../../typography/utils.js";
 const TEXT_HEIGHT = 12;
-const calculateWidth = (text, fontWidthMap) => Array.from(text).reduce((totalWidth, char) => {
-  return totalWidth + (fontWidthMap[char] ?? fontWidthMap["@"]);
-}, 0);
+const calculateWidth = (text, fontWidthMap) => {
+  let totalWidth = 0;
+  for (const char of text) {
+    totalWidth += fontWidthMap[char] ?? fontWidthMap["@"];
+  }
+  return totalWidth;
+};
 function accumulateUntilCapacity(availableWidth, fontWidthMap, generator) {
   let keptText = "";
   let keptWidth = 0;

package/esm/charts/core/components/text-ellipsis/truncate-string.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/text-ellipsis/truncate-string.ts"],
-  "sourcesContent": ["import { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ELLIPSIS_CHARACTER as _ELLIPSIS_CHARACTER } from '../../../../typography/utils.js';\n\n/**\n * Approximate pixel height for a single line of text.\n * Used by consumers for layout calculations; not involved in truncation logic.\n * @public\n */\nexport const TEXT_HEIGHT = 12;\n\n/**\n * Computes the pixel width of a string using a per-character width map.\n * Unknown characters fall back to the width of '\\@'.\n *\n * @param text - The string to measure.\n * @param fontWidthMap - Map of character to pixel width for the active font.\n * @returns The total width in CSS pixels.\n * @public\n */\nexport const calculateWidth = (\n  text: string,\n  fontWidthMap: Record<string, number>,\n) =>\n  Array.from(text).reduce((totalWidth, char) => {\n    return totalWidth + (fontWidthMap[char] ?? fontWidthMap['@']);\n  }, 0);\n\n/**\n * Iteratively accumulates characters produced by a generator until the available\n * capacity (availableWidth minus ellipsis width) is reached, then returns the\n * accumulated characters. This function does not apply the ellipsis; it only\n * determines what characters can be kept.\n *\n * @param availableWidth - Maximum width allowed for the final text including the ellipsis.\n * @param fontWidthMap - Map of character to pixel width for the active font.\n * @param generator - Generator that yields characters in the order they should be kept.\n * @returns The sequence of kept characters that fit within the capacity.\n * @internal\n */\nfunction accumulateUntilCapacity(\n  availableWidth: number,\n  fontWidthMap: Record<string, number>,\n  generator: Generator<string>,\n) {\n  let keptText = '';\n  let keptWidth = 0;\n  const capacity =\n    availableWidth - calculateWidth(_ELLIPSIS_CHARACTER, fontWidthMap);\n\n  for (const ch of generator) {\n    const chWidth = calculateWidth(ch, fontWidthMap);\n    if (keptWidth + chWidth > capacity) {\n      return keptText;\n    }\n    keptText += ch;\n    keptWidth += chWidth;\n  }\n\n  return keptText;\n}\n\n/**\n * Tolerance in CSS pixels for width comparisons to avoid subpixel off-by-ones\n * that cause visual clipping at the right edge.\n * @internal\n */\nconst EPSILON_PX = 0.5;\n\n/**\n * If the available width is below this threshold (considering epsilon), the function\n * returns only the ellipsis to avoid unstable truncation artifacts.\n * @internal\n */\nconst MIN_AVAILABLE_WIDTH = 19;\n\n/**\n * Controls which side of the string the middle-truncation generator starts\n * collecting characters from. 'start' keeps head characters first (e.g.\n * \"3\u2026\" for \"37%\"), 'end' keeps tail characters first (e.g. \"\u2026%\" for \"37%\").\n * Only affects the 'middle' truncation mode.\n * @public\n */\nexport type TruncationPriority = 'start' | 'end';\n\n/**\n * Produces the final truncated string by inserting an ellipsis in the appropriate\n * position for each truncation mode, based on the sequence of kept characters.\n *\n * - 'start': Places ellipsis at the beginning and reverses kept characters.\n * - 'end': Places ellipsis at the end.\n * - 'middle': Interleaves characters into head and tail based on index parity,\n *   then places the ellipsis between head and tail.\n * @internal\n */\nconst buildTruncatedOutput = {\n  start: (kept: string) => {\n    let reversed = '';\n    for (const ch of kept) {\n      reversed = ch + reversed;\n    }\n    return `${_ELLIPSIS_CHARACTER}${reversed}`;\n  },\n  end: (kept: string) => `${kept}${_ELLIPSIS_CHARACTER}`,\n  middle: (kept: string, priority: TruncationPriority) => {\n    let head = '';\n    let tail = '';\n    if (priority === 'start') {\n      for (let i = 0; i < kept.length; i++) {\n        if (i % 2 === 0) {\n          head += kept[i];\n        } else {\n          tail = kept[i] + tail;\n        }\n      }\n    } else {\n      for (let i = 0; i < kept.length; i++) {\n        if (i % 2 === 0) {\n          tail = kept[i] + tail;\n        } else {\n          head += kept[i];\n        }\n      }\n    }\n    return `${head}${_ELLIPSIS_CHARACTER}${tail}`;\n  },\n};\n\n/**\n * Character generators that yield the sequence of characters to keep for each\n * truncation mode before the ellipsis is applied.\n *\n * - 'start': Yields from end to start (tail-first).\n * - 'end': Yields from start to end (head-first).\n * - 'middle': Alternates from both ends toward the center.\n *   The `priority` parameter controls which end yields first.\n * @internal\n */\nconst keepSequenceGenerators = {\n  start: function* fromTail(text: string) {\n    for (let i = text.length - 1; i >= 0; i--) {\n      yield text[i];\n    }\n  },\n  end: function* fromHead(text: string) {\n    for (const ch of text) {\n      yield ch;\n    }\n  },\n  middle: function* fromBothEnds(text: string, priority: TruncationPriority) {\n    let left = 0;\n    let right = text.length - 1;\n    while (left < right) {\n      if (priority === 'start') {\n        yield text[left++];\n        yield text[right--];\n      } else {\n        yield text[right--];\n        yield text[left++];\n      }\n    }\n    if (left === right) {\n      yield text[left];\n    }\n  },\n};\n\n/**\n * Truncates a string to fit within the given width by placing an ellipsis at the\n * start, middle, or end, depending on the truncation mode. If the text fits, it\n * is returned unchanged. If the width is too small, returns only the ellipsis.\n *\n * Key behaviors:\n * - Uses a generator to determine which characters to keep for each mode.\n * - Accumulates characters until the capacity (availableWidth minus ellipsis width).\n * - Applies EPSILON tolerance to treat near-equal widths as fitting.\n * - Uses MIN_AVAILABLE_WIDTH to return a stable ellipsis when space is minimal.\n *\n * @param text - The input string to truncate.\n * @param availableWidth - Max allowed width in CSS pixels for the final output.\n * @param fontWidthMap - Per-character width map for the active font.\n * @param truncationMode - Where to place the ellipsis: 'start' | 'middle' | 'end'.\n * @param priority - For 'middle' mode only: 'start' keeps head characters first\n *   (e.g. \"3\u2026\"), 'end' keeps tail characters first (e.g. \"\u2026%\").\n *   Defaults to 'end' to match the legacy behavior.\n * @returns The truncated string with ellipsis applied according to the mode.\n * @public\n */\nexport const truncateString = (\n  text: string,\n  availableWidth: number,\n  fontWidthMap: Record<string, number>,\n  truncationMode: TruncationMode = 'middle',\n  priority: TruncationPriority = 'end',\n) => {\n  // The EPSILON_PX tolerance allows text that is very close to the available\n  // width to be considered as fitting, avoiding unnecessary truncation for\n  // borderline cases where subpixel differences don't cause visible overflow.\n  const fullTextWidth = calculateWidth(text, fontWidthMap);\n  const roundedAvailableWidth = Math.round(availableWidth) + EPSILON_PX;\n\n  if (fullTextWidth <= roundedAvailableWidth) {\n    return text;\n  }\n\n  if (MIN_AVAILABLE_WIDTH >= roundedAvailableWidth) {\n    return _ELLIPSIS_CHARACTER;\n  }\n\n  const keptChars = accumulateUntilCapacity(\n    availableWidth,\n    fontWidthMap,\n    truncationMode === 'middle'\n      ? keepSequenceGenerators.middle(text, priority)\n      : keepSequenceGenerators[truncationMode](text),\n  );\n\n  return truncationMode === 'middle'\n    ? buildTruncatedOutput.middle(keptChars, priority)\n    : buildTruncatedOutput[truncationMode](keptChars);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ELLIPSIS_CHARACTER as _ELLIPSIS_CHARACTER } from '../../../../typography/utils.js';\n\n/**\n * Approximate pixel height for a single line of text.\n * Used by consumers for layout calculations; not involved in truncation logic.\n * @public\n */\nexport const TEXT_HEIGHT = 12;\n\n/**\n * Computes the pixel width of a string using a per-character width map.\n * Unknown characters fall back to the width of '\\@'.\n *\n * @param text - The string to measure.\n * @param fontWidthMap - Map of character to pixel width for the active font.\n * @returns The total width in CSS pixels.\n * @public\n */\nexport const calculateWidth = (\n  text: string,\n  fontWidthMap: Record<string, number>,\n): number => {\n  let totalWidth = 0;\n  for (const char of text) {\n    totalWidth += fontWidthMap[char] ?? fontWidthMap['@'];\n  }\n  return totalWidth;\n};\n\n/**\n * Iteratively accumulates characters produced by a generator until the available\n * capacity (availableWidth minus ellipsis width) is reached, then returns the\n * accumulated characters. This function does not apply the ellipsis; it only\n * determines what characters can be kept.\n *\n * @param availableWidth - Maximum width allowed for the final text including the ellipsis.\n * @param fontWidthMap - Map of character to pixel width for the active font.\n * @param generator - Generator that yields characters in the order they should be kept.\n * @returns The sequence of kept characters that fit within the capacity.\n * @internal\n */\nfunction accumulateUntilCapacity(\n  availableWidth: number,\n  fontWidthMap: Record<string, number>,\n  generator: Generator<string>,\n) {\n  let keptText = '';\n  let keptWidth = 0;\n  const capacity =\n    availableWidth - calculateWidth(_ELLIPSIS_CHARACTER, fontWidthMap);\n\n  for (const ch of generator) {\n    const chWidth = calculateWidth(ch, fontWidthMap);\n    if (keptWidth + chWidth > capacity) {\n      return keptText;\n    }\n    keptText += ch;\n    keptWidth += chWidth;\n  }\n\n  return keptText;\n}\n\n/**\n * Tolerance in CSS pixels for width comparisons to avoid subpixel off-by-ones\n * that cause visual clipping at the right edge.\n * @internal\n */\nconst EPSILON_PX = 0.5;\n\n/**\n * If the available width is below this threshold (considering epsilon), the function\n * returns only the ellipsis to avoid unstable truncation artifacts.\n * @internal\n */\nconst MIN_AVAILABLE_WIDTH = 19;\n\n/**\n * Controls which side of the string the middle-truncation generator starts\n * collecting characters from. 'start' keeps head characters first (e.g.\n * \"3\u2026\" for \"37%\"), 'end' keeps tail characters first (e.g. \"\u2026%\" for \"37%\").\n * Only affects the 'middle' truncation mode.\n * @public\n */\nexport type TruncationPriority = 'start' | 'end';\n\n/**\n * Produces the final truncated string by inserting an ellipsis in the appropriate\n * position for each truncation mode, based on the sequence of kept characters.\n *\n * - 'start': Places ellipsis at the beginning and reverses kept characters.\n * - 'end': Places ellipsis at the end.\n * - 'middle': Interleaves characters into head and tail based on index parity,\n *   then places the ellipsis between head and tail.\n * @internal\n */\nconst buildTruncatedOutput = {\n  start: (kept: string) => {\n    let reversed = '';\n    for (const ch of kept) {\n      reversed = ch + reversed;\n    }\n    return `${_ELLIPSIS_CHARACTER}${reversed}`;\n  },\n  end: (kept: string) => `${kept}${_ELLIPSIS_CHARACTER}`,\n  middle: (kept: string, priority: TruncationPriority) => {\n    let head = '';\n    let tail = '';\n    if (priority === 'start') {\n      for (let i = 0; i < kept.length; i++) {\n        if (i % 2 === 0) {\n          head += kept[i];\n        } else {\n          tail = kept[i] + tail;\n        }\n      }\n    } else {\n      for (let i = 0; i < kept.length; i++) {\n        if (i % 2 === 0) {\n          tail = kept[i] + tail;\n        } else {\n          head += kept[i];\n        }\n      }\n    }\n    return `${head}${_ELLIPSIS_CHARACTER}${tail}`;\n  },\n};\n\n/**\n * Character generators that yield the sequence of characters to keep for each\n * truncation mode before the ellipsis is applied.\n *\n * - 'start': Yields from end to start (tail-first).\n * - 'end': Yields from start to end (head-first).\n * - 'middle': Alternates from both ends toward the center.\n *   The `priority` parameter controls which end yields first.\n * @internal\n */\nconst keepSequenceGenerators = {\n  start: function* fromTail(text: string) {\n    for (let i = text.length - 1; i >= 0; i--) {\n      yield text[i];\n    }\n  },\n  end: function* fromHead(text: string) {\n    for (const ch of text) {\n      yield ch;\n    }\n  },\n  middle: function* fromBothEnds(text: string, priority: TruncationPriority) {\n    let left = 0;\n    let right = text.length - 1;\n    while (left < right) {\n      if (priority === 'start') {\n        yield text[left++];\n        yield text[right--];\n      } else {\n        yield text[right--];\n        yield text[left++];\n      }\n    }\n    if (left === right) {\n      yield text[left];\n    }\n  },\n};\n\n/**\n * Truncates a string to fit within the given width by placing an ellipsis at the\n * start, middle, or end, depending on the truncation mode. If the text fits, it\n * is returned unchanged. If the width is too small, returns only the ellipsis.\n *\n * Key behaviors:\n * - Uses a generator to determine which characters to keep for each mode.\n * - Accumulates characters until the capacity (availableWidth minus ellipsis width).\n * - Applies EPSILON tolerance to treat near-equal widths as fitting.\n * - Uses MIN_AVAILABLE_WIDTH to return a stable ellipsis when space is minimal.\n *\n * @param text - The input string to truncate.\n * @param availableWidth - Max allowed width in CSS pixels for the final output.\n * @param fontWidthMap - Per-character width map for the active font.\n * @param truncationMode - Where to place the ellipsis: 'start' | 'middle' | 'end'.\n * @param priority - For 'middle' mode only: 'start' keeps head characters first\n *   (e.g. \"3\u2026\"), 'end' keeps tail characters first (e.g. \"\u2026%\").\n *   Defaults to 'end' to match the legacy behavior.\n * @returns The truncated string with ellipsis applied according to the mode.\n * @public\n */\nexport const truncateString = (\n  text: string,\n  availableWidth: number,\n  fontWidthMap: Record<string, number>,\n  truncationMode: TruncationMode = 'middle',\n  priority: TruncationPriority = 'end',\n) => {\n  // The EPSILON_PX tolerance allows text that is very close to the available\n  // width to be considered as fitting, avoiding unnecessary truncation for\n  // borderline cases where subpixel differences don't cause visible overflow.\n  const fullTextWidth = calculateWidth(text, fontWidthMap);\n  const roundedAvailableWidth = Math.round(availableWidth) + EPSILON_PX;\n\n  if (fullTextWidth <= roundedAvailableWidth) {\n    return text;\n  }\n\n  if (MIN_AVAILABLE_WIDTH >= roundedAvailableWidth) {\n    return _ELLIPSIS_CHARACTER;\n  }\n\n  const keptChars = accumulateUntilCapacity(\n    availableWidth,\n    fontWidthMap,\n    truncationMode === 'middle'\n      ? keepSequenceGenerators.middle(text, priority)\n      : keepSequenceGenerators[truncationMode](text),\n  );\n\n  return truncationMode === 'middle'\n    ? buildTruncatedOutput.middle(keptChars, priority)\n    : buildTruncatedOutput[truncationMode](keptChars);\n};\n"],
+  "mappings": "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",
   "names": []
 }