@dynatrace/strato-components 3.7.1 → 3.9.0

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 { 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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",
+  "sourcesContent": ["import { 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  const [scaleDomainMin, scaleDomainMax] = yScale.domain();\n\n  const isFlat = domainValues.min === domainValues.max;\n  const effectiveMin = isFlat ? scaleDomainMin : domainValues.min;\n  const effectiveMax = isFlat ? scaleDomainMax : domainValues.max;\n\n  const { formattedContextMaxValue, formattedContextMinValue } =\n    getFormattedContextValues({\n      unit: data?.unit,\n      formatter: props.yAxis?.formatter,\n      domainValues: { min: effectiveMin, max: effectiveMax },\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 displayZeroLine = scaleDomainMin <= 0 && scaleDomainMax >= 0;\n  const zeroLineYPos = yScale(0) ?? -1;\n\n  // Dashed lines sit at the effective min/max y-positions; text labels are pushed\n  // apart if their text boxes would overlap, without moving the dashed lines.\n  const rawMinY = yScale(effectiveMin);\n  const rawMaxY = yScale(effectiveMax);\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            <line\n              x1={0}\n              y1={zeroLineYPos}\n              x2={chartWidth}\n              y2={zeroLineYPos}\n              stroke={DEFAULT_STROKE_COLOR}\n              strokeWidth={DEFAULT_STROKE_WIDTH}\n              shapeRendering=\"crispEdges\"\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-sparkline-y-scale.js

@@ -16,6 +16,10 @@ const getSparklineYScale = (domainValues, height, yAxis, isBarVariant) => {
   if (isNumber(yAxis.min)) {
     yAxisMin = yAxis.min;
   }
+  if (yAxisMin === yAxisMax) {
+    yAxisMin = Math.min(yAxisMin, 0);
+    yAxisMax = Math.max(yAxisMax, 0);
+  }
   return getScale(
     scaleType,
     [yAxisMin, yAxisMax],

package/esm/charts/core/components/sparkline-display/utils/get-sparkline-y-scale.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/sparkline-display/utils/get-sparkline-y-scale.ts"],
-  "sourcesContent": ["import { ScaleLinear, ScaleSymLog } from 'd3-scale';\nimport { isNumber } from 'lodash-es';\n\nimport { getScale } from '../../../utils/core-scale.js';\nimport type { SparklineYAxisProps } from '../types/sparkline-y-axis-props.js';\n\nconst VERTICAL_PADDING = 4;\n\nexport const getSparklineYScale = (\n  domainValues: { min: number; max: number },\n  height: number,\n  yAxis: SparklineYAxisProps,\n  isBarVariant?: boolean,\n): ScaleLinear<number, number> | ScaleSymLog<number, number> => {\n  const { min: dataMin, max: dataMax } = domainValues;\n  const scaleType = yAxis.scale ?? 'linear';\n\n  let yAxisMin = dataMin;\n  let yAxisMax = dataMax;\n\n  if (isBarVariant) {\n    yAxisMin = dataMin > 0 ? 0 : dataMin;\n    yAxisMax = dataMax < 0 ? 0 : dataMax;\n  }\n\n  if (isNumber(yAxis.max)) {\n    yAxisMax = yAxis.max;\n  }\n\n  if (isNumber(yAxis.min)) {\n    yAxisMin = yAxis.min;\n  }\n\n  return getScale(\n    scaleType,\n    [yAxisMin, yAxisMax],\n    [height - VERTICAL_PADDING, VERTICAL_PADDING],\n  );\n};\n"],
-  "mappings": "AACA,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AAGzB,MAAM,mBAAmB;AAElB,MAAM,qBAAqB,CAChC,cACA,QACA,OACA,iBAC8D;AAC9D,QAAM,EAAE,KAAK,SAAS,KAAK,QAAQ,IAAI;AACvC,QAAM,YAAY,MAAM,SAAS;AAEjC,MAAI,WAAW;AACf,MAAI,WAAW;AAEf,MAAI,cAAc;AAChB,eAAW,UAAU,IAAI,IAAI;AAC7B,eAAW,UAAU,IAAI,IAAI;AAAA,EAC/B;AAEA,MAAI,SAAS,MAAM,GAAG,GAAG;AACvB,eAAW,MAAM;AAAA,EACnB;AAEA,MAAI,SAAS,MAAM,GAAG,GAAG;AACvB,eAAW,MAAM;AAAA,EACnB;AAEA,SAAO;AAAA,IACL;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,IACnB,CAAC,SAAS,kBAAkB,gBAAgB;AAAA,EAC9C;AACF;",
+  "sourcesContent": ["import { ScaleLinear, ScaleSymLog } from 'd3-scale';\nimport { isNumber } from 'lodash-es';\n\nimport { getScale } from '../../../utils/core-scale.js';\nimport type { SparklineYAxisProps } from '../types/sparkline-y-axis-props.js';\n\nconst VERTICAL_PADDING = 4;\n\nexport const getSparklineYScale = (\n  domainValues: { min: number; max: number },\n  height: number,\n  yAxis: SparklineYAxisProps,\n  isBarVariant?: boolean,\n): ScaleLinear<number, number> | ScaleSymLog<number, number> => {\n  const { min: dataMin, max: dataMax } = domainValues;\n  const scaleType = yAxis.scale ?? 'linear';\n\n  let yAxisMin = dataMin;\n  let yAxisMax = dataMax;\n\n  if (isBarVariant) {\n    yAxisMin = dataMin > 0 ? 0 : dataMin;\n    yAxisMax = dataMax < 0 ? 0 : dataMax;\n  }\n\n  if (isNumber(yAxis.max)) {\n    yAxisMax = yAxis.max;\n  }\n\n  if (isNumber(yAxis.min)) {\n    yAxisMin = yAxis.min;\n  }\n\n  if (yAxisMin === yAxisMax) {\n    yAxisMin = Math.min(yAxisMin, 0);\n    yAxisMax = Math.max(yAxisMax, 0);\n  }\n\n  return getScale(\n    scaleType,\n    [yAxisMin, yAxisMax],\n    [height - VERTICAL_PADDING, VERTICAL_PADDING],\n  );\n};\n"],
+  "mappings": "AACA,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AAGzB,MAAM,mBAAmB;AAElB,MAAM,qBAAqB,CAChC,cACA,QACA,OACA,iBAC8D;AAC9D,QAAM,EAAE,KAAK,SAAS,KAAK,QAAQ,IAAI;AACvC,QAAM,YAAY,MAAM,SAAS;AAEjC,MAAI,WAAW;AACf,MAAI,WAAW;AAEf,MAAI,cAAc;AAChB,eAAW,UAAU,IAAI,IAAI;AAC7B,eAAW,UAAU,IAAI,IAAI;AAAA,EAC/B;AAEA,MAAI,SAAS,MAAM,GAAG,GAAG;AACvB,eAAW,MAAM;AAAA,EACnB;AAEA,MAAI,SAAS,MAAM,GAAG,GAAG;AACvB,eAAW,MAAM;AAAA,EACnB;AAEA,MAAI,aAAa,UAAU;AACzB,eAAW,KAAK,IAAI,UAAU,CAAC;AAC/B,eAAW,KAAK,IAAI,UAAU,CAAC;AAAA,EACjC;AAEA,SAAO;AAAA,IACL;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,IACnB,CAAC,SAAS,kBAAkB,gBAAgB;AAAA,EAC9C;AACF;",
   "names": []
 }

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

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

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-7-1", variantClassNames: { truncationMode: { start: "_ix5ox21-3-7-1", end: "_ix5ox22-3-7-1", middle: "_ix5ox23-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var truncationContainer = "_ix5ox24-3-7-1";
-var truncationText = "_ix5ox25-3-7-1";
+var ellipsis = _7a468({ defaultClassName: "_ix5ox20-3-9-0", variantClassNames: { truncationMode: { start: "_ix5ox21-3-9-0", end: "_ix5ox22-3-9-0", middle: "_ix5ox23-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var truncationContainer = "_ix5ox24-3-9-0";
+var truncationText = "_ix5ox25-3-9-0";
 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-7-1',variantClassNames:{truncationMode:{start:'_ix5ox21-3-7-1',end:'_ix5ox22-3-7-1',middle:'_ix5ox23-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var truncationContainer = '_ix5ox24-3-7-1';\nexport var truncationText = '_ix5ox25-3-7-1';"],
+  "sourcesContent": ["import './ChartTextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ellipsis = _7a468({defaultClassName:'_ix5ox20-3-9-0',variantClassNames:{truncationMode:{start:'_ix5ox21-3-9-0',end:'_ix5ox22-3-9-0',middle:'_ix5ox23-3-9-0'}},defaultVariants:{},compoundVariants:[]});\nexport var truncationContainer = '_ix5ox24-3-9-0';\nexport var truncationText = '_ix5ox25-3-9-0';"],
   "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/threshold-bar/indicators/ThresholdIndicator.js

@@ -1,58 +1,77 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Area, LinePath } from "@visx/shape";
+import { area, line } from "d3-shape";
+import { useMemo } from "react";
 import { useId } from "../../../../../core/hooks/useId.js";
 import { ThresholdBrightnessFilter } from "../ThresholdBrightnessFilter.js";
+function withFullPrecision(generator) {
+  generator.digits(null);
+  return generator;
+}
 const ThresholdIndicator = (props) => {
   const id = useId();
   const { data, color, isActive = false, strokeOnly = false } = props;
+  const linePath0 = useMemo(
+    () => withFullPrecision(
+      line().x((d) => d.x0).y((d) => d.y0)
+    ),
+    []
+  );
+  const linePath1 = useMemo(
+    () => withFullPrecision(
+      line().x((d) => d.x1).y((d) => d.y1)
+    ),
+    []
+  );
+  const areaPath = useMemo(
+    () => withFullPrecision(
+      area().x0((d) => d.x0).x1((d) => d.x1).y0((d) => d.y0).y1((d) => d.y1)
+    ),
+    []
+  );
   if (data.length === 0) {
     return null;
   }
   const opacity = isActive ? 0.2 : 0.1;
   const strokeWidth = isActive || strokeOnly ? 1 : 0;
   const strokeDasharray = !isActive && strokeOnly ? "3,2" : "0,0";
-  const lineProps = {
-    data,
-    stroke: color,
-    strokeWidth,
-    strokeDasharray
-  };
   const brightnessFilterId = `threshold-indicator-${id}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ThresholdBrightnessFilter, { id: brightnessFilterId }),
     /* @__PURE__ */ jsx(
-      LinePath,
+      "path",
       {
-        ...lineProps,
         role: "graphics-symbol",
         "aria-label": "threshold indicator line 0",
-        x: (d) => d.x0,
-        y: (d) => d.y0
+        d: linePath0(data) ?? void 0,
+        stroke: color,
+        strokeWidth,
+        strokeDasharray,
+        fill: "transparent",
+        strokeLinecap: "round"
       }
     ),
     !strokeOnly && /* @__PURE__ */ jsx(
-      Area,
+      "path",
       {
-        data,
         role: "graphics-symbol",
         "aria-label": "threshold indicator area",
-        x0: (d) => d.x0,
-        x1: (d) => d.x1,
-        y0: (d) => d.y0,
-        y1: (d) => d.y1,
+        d: areaPath(data) ?? void 0,
         fill: color,
         opacity,
         filter: isActive ? `url(#${brightnessFilterId})` : void 0
       }
     ),
     /* @__PURE__ */ jsx(
-      LinePath,
+      "path",
       {
-        ...lineProps,
         role: "graphics-symbol",
         "aria-label": "threshold indicator line 1",
-        x: (d) => d.x1,
-        y: (d) => d.y1
+        d: linePath1(data) ?? void 0,
+        stroke: color,
+        strokeWidth,
+        strokeDasharray,
+        fill: "transparent",
+        strokeLinecap: "round"
       }
     )
   ] });

package/esm/charts/core/components/threshold-bar/indicators/ThresholdIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/threshold-bar/indicators/ThresholdIndicator.tsx"],
-  "sourcesContent": ["import { Area, LinePath } from '@visx/shape';\nimport { LinePathProps } from '@visx/shape/lib/shapes/LinePath';\nimport { AddSVGProps } from '@visx/shape/lib/types';\n\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\n/** @internal */\nexport interface ThresholdIndicatorData {\n  x0: number;\n  x1: number;\n  y0: number;\n  y1: number;\n}\n\n/** @internal */\nexport interface ThresholdIndicatorProps {\n  data: ThresholdIndicatorData[];\n  color: string;\n  isActive?: boolean;\n  strokeOnly?: boolean;\n}\n\n/** @internal */\nexport const ThresholdIndicator = (props: ThresholdIndicatorProps) => {\n  const id = useId();\n\n  const { data, color, isActive = false, strokeOnly = false } = props;\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  const opacity = isActive ? 0.2 : 0.1;\n  const strokeWidth = isActive || strokeOnly ? 1 : 0;\n  const strokeDasharray = !isActive && strokeOnly ? '3,2' : '0,0';\n  const lineProps: AddSVGProps<\n    LinePathProps<ThresholdIndicatorData>,\n    SVGPathElement\n  > = {\n    data,\n    stroke: color,\n    strokeWidth,\n    strokeDasharray,\n  };\n  const brightnessFilterId = `threshold-indicator-${id}`;\n\n  return (\n    <>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <LinePath<ThresholdIndicatorData>\n        {...lineProps}\n        role=\"graphics-symbol\"\n        aria-label=\"threshold indicator line 0\"\n        x={(d) => d.x0}\n        y={(d) => d.y0}\n      />\n      {!strokeOnly && (\n        <Area<ThresholdIndicatorData>\n          data={data}\n          role=\"graphics-symbol\"\n          aria-label=\"threshold indicator area\"\n          x0={(d) => d.x0}\n          x1={(d) => d.x1}\n          y0={(d) => d.y0}\n          y1={(d) => d.y1}\n          fill={color}\n          opacity={opacity}\n          filter={isActive ? `url(#${brightnessFilterId})` : undefined}\n        />\n      )}\n      <LinePath<ThresholdIndicatorData>\n        {...lineProps}\n        role=\"graphics-symbol\"\n        aria-label=\"threshold indicator line 1\"\n        x={(d) => d.x1}\n        y={(d) => d.y1}\n      />\n    </>\n  );\n};\n"],
-  "mappings": "AAgDI,mBACE,KADF;AAhDJ,SAAS,MAAM,gBAAgB;AAI/B,SAAS,aAAa;AACtB,SAAS,iCAAiC;AAmBnC,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,KAAK,MAAM;AAEjB,QAAM,EAAE,MAAM,OAAO,WAAW,OAAO,aAAa,MAAM,IAAI;AAE9D,MAAI,KAAK,WAAW,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,WAAW,MAAM;AACjC,QAAM,cAAc,YAAY,aAAa,IAAI;AACjD,QAAM,kBAAkB,CAAC,YAAY,aAAa,QAAQ;AAC1D,QAAM,YAGF;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF;AACA,QAAM,qBAAqB,uBAAuB,EAAE;AAEpD,SACE,iCACE;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,CAAC,MAAM,EAAE;AAAA,QACZ,GAAG,CAAC,MAAM,EAAE;AAAA;AAAA,IACd;AAAA,IACC,CAAC,cACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,IAAI,CAAC,MAAM,EAAE;AAAA,QACb,MAAM;AAAA,QACN;AAAA,QACA,QAAQ,WAAW,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACrD;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,CAAC,MAAM,EAAE;AAAA,QACZ,GAAG,CAAC,MAAM,EAAE;AAAA;AAAA,IACd;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { area, line } from 'd3-shape';\nimport { useMemo } from 'react';\n\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\n// d3-shape v3 rounds coordinates to 3 decimal places by default; disable to\n// match the full-precision output visx produced with d3-shape v1.\nfunction withFullPrecision<T>(generator: T): T {\n  (generator as unknown as { digits: (d: null) => void }).digits(null);\n  return generator;\n}\n\n/** @internal */\nexport interface ThresholdIndicatorData {\n  x0: number;\n  x1: number;\n  y0: number;\n  y1: number;\n}\n\n/** @internal */\nexport interface ThresholdIndicatorProps {\n  data: ThresholdIndicatorData[];\n  color: string;\n  isActive?: boolean;\n  strokeOnly?: boolean;\n}\n\n/** @internal */\nexport const ThresholdIndicator = (props: ThresholdIndicatorProps) => {\n  const id = useId();\n\n  const { data, color, isActive = false, strokeOnly = false } = props;\n\n  const linePath0 = useMemo(\n    () =>\n      withFullPrecision(\n        line<ThresholdIndicatorData>()\n          .x((d) => d.x0)\n          .y((d) => d.y0),\n      ),\n    [],\n  );\n\n  const linePath1 = useMemo(\n    () =>\n      withFullPrecision(\n        line<ThresholdIndicatorData>()\n          .x((d) => d.x1)\n          .y((d) => d.y1),\n      ),\n    [],\n  );\n\n  const areaPath = useMemo(\n    () =>\n      withFullPrecision(\n        area<ThresholdIndicatorData>()\n          .x0((d) => d.x0)\n          .x1((d) => d.x1)\n          .y0((d) => d.y0)\n          .y1((d) => d.y1),\n      ),\n    [],\n  );\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  const opacity = isActive ? 0.2 : 0.1;\n  const strokeWidth = isActive || strokeOnly ? 1 : 0;\n  const strokeDasharray = !isActive && strokeOnly ? '3,2' : '0,0';\n  const brightnessFilterId = `threshold-indicator-${id}`;\n\n  return (\n    <>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <path\n        role=\"graphics-symbol\"\n        aria-label=\"threshold indicator line 0\"\n        d={linePath0(data) ?? undefined}\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeDasharray={strokeDasharray}\n        fill=\"transparent\"\n        strokeLinecap=\"round\"\n      />\n      {!strokeOnly && (\n        <path\n          role=\"graphics-symbol\"\n          aria-label=\"threshold indicator area\"\n          d={areaPath(data) ?? undefined}\n          fill={color}\n          opacity={opacity}\n          filter={isActive ? `url(#${brightnessFilterId})` : undefined}\n        />\n      )}\n      <path\n        role=\"graphics-symbol\"\n        aria-label=\"threshold indicator line 1\"\n        d={linePath1(data) ?? undefined}\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeDasharray={strokeDasharray}\n        fill=\"transparent\"\n        strokeLinecap=\"round\"\n      />\n    </>\n  );\n};\n"],
+  "mappings": "AA6EI,mBACE,KADF;AA7EJ,SAAS,MAAM,YAAY;AAC3B,SAAS,eAAe;AAExB,SAAS,aAAa;AACtB,SAAS,iCAAiC;AAI1C,SAAS,kBAAqB,WAAiB;AAC7C,EAAC,UAAuD,OAAO,IAAI;AACnE,SAAO;AACT;AAmBO,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,KAAK,MAAM;AAEjB,QAAM,EAAE,MAAM,OAAO,WAAW,OAAO,aAAa,MAAM,IAAI;AAE9D,QAAM,YAAY;AAAA,IAChB,MACE;AAAA,MACE,KAA6B,EAC1B,EAAE,CAAC,MAAM,EAAE,EAAE,EACb,EAAE,CAAC,MAAM,EAAE,EAAE;AAAA,IAClB;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,YAAY;AAAA,IAChB,MACE;AAAA,MACE,KAA6B,EAC1B,EAAE,CAAC,MAAM,EAAE,EAAE,EACb,EAAE,CAAC,MAAM,EAAE,EAAE;AAAA,IAClB;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,WAAW;AAAA,IACf,MACE;AAAA,MACE,KAA6B,EAC1B,GAAG,CAAC,MAAM,EAAE,EAAE,EACd,GAAG,CAAC,MAAM,EAAE,EAAE,EACd,GAAG,CAAC,MAAM,EAAE,EAAE,EACd,GAAG,CAAC,MAAM,EAAE,EAAE;AAAA,IACnB;AAAA,IACF,CAAC;AAAA,EACH;AAEA,MAAI,KAAK,WAAW,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,WAAW,MAAM;AACjC,QAAM,cAAc,YAAY,aAAa,IAAI;AACjD,QAAM,kBAAkB,CAAC,YAAY,aAAa,QAAQ;AAC1D,QAAM,qBAAqB,uBAAuB,EAAE;AAEpD,SACE,iCACE;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,UAAU,IAAI,KAAK;AAAA,QACtB,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,eAAc;AAAA;AAAA,IAChB;AAAA,IACC,CAAC,cACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,SAAS,IAAI,KAAK;AAAA,QACrB,MAAM;AAAA,QACN;AAAA,QACA,QAAQ,WAAW,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACrD;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,GAAG,UAAU,IAAI,KAAK;AAAA,QACtB,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,eAAc;AAAA;AAAA,IAChB;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/markers/CircleMarker.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Group } from "@visx/group";
 import { useRef } from "react";
 import {
   MARKER_STROKE_WIDTH,
@@ -16,7 +15,7 @@ const CircleMarker = (props) => {
   const hovered = useMouseHover(circleRef);
   const id = useId();
   const brightnessFilterId = `threshold-circle-marker-filter-${id}`;
-  return /* @__PURE__ */ jsxs(Group, { children: [
+  return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(ThresholdBrightnessFilter, { id: brightnessFilterId }),
     /* @__PURE__ */ jsx(
       "circle",

package/esm/charts/core/components/threshold-bar/markers/CircleMarker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/threshold-bar/markers/CircleMarker.tsx"],
-  "sourcesContent": ["import { Group } from '@visx/group';\nimport { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n  MARKER_OPACITY,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface CircleMarkerProps {\n  x: number;\n  y: number;\n  color: string;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const CircleMarker = (props: CircleMarkerProps) => {\n  const { x, y, color, onMouseMove, onMouseLeave } = props;\n\n  const circleRef = useRef<SVGCircleElement>(null);\n  const hovered = useMouseHover(circleRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-circle-marker-filter-${id}`;\n\n  return (\n    <Group>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <circle\n        role=\"graphics-symbol\"\n        aria-label=\"circle marker\"\n        ref={circleRef}\n        opacity={MARKER_OPACITY}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        cx={x}\n        cy={y}\n        r={MARKER_RADIUS}\n        fill={color}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n      />\n    </Group>\n  );\n};\n"],
-  "mappings": "AA+BI,SACE,KADF;AA/BJ,SAAS,aAAa;AACtB,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAUnC,MAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,EAAE,GAAG,GAAG,OAAO,aAAa,aAAa,IAAI;AAEnD,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,UAAU,cAAc,SAAS;AACvC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,kCAAkC,EAAE;AAE/D,SACE,qBAAC,SACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACpD;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n  MARKER_OPACITY,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface CircleMarkerProps {\n  x: number;\n  y: number;\n  color: string;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const CircleMarker = (props: CircleMarkerProps) => {\n  const { x, y, color, onMouseMove, onMouseLeave } = props;\n\n  const circleRef = useRef<SVGCircleElement>(null);\n  const hovered = useMouseHover(circleRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-circle-marker-filter-${id}`;\n\n  return (\n    <g>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <circle\n        role=\"graphics-symbol\"\n        aria-label=\"circle marker\"\n        ref={circleRef}\n        opacity={MARKER_OPACITY}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        cx={x}\n        cy={y}\n        r={MARKER_RADIUS}\n        fill={color}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n      />\n    </g>\n  );\n};\n"],
+  "mappings": "AA8BI,SACE,KADF;AA9BJ,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAUnC,MAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,EAAE,GAAG,GAAG,OAAO,aAAa,aAAa,IAAI;AAEnD,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,UAAU,cAAc,SAAS;AACvC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,kCAAkC,EAAE;AAE/D,SACE,qBAAC,OACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA;AAAA,IACpD;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/markers/PillMarker.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Group } from "@visx/group";
 import { useRef } from "react";
 import {
   MARKER_STROKE_WIDTH,
@@ -15,7 +14,7 @@ const PillMarker = (props) => {
   const hovered = useMouseHover(rectRef);
   const id = useId();
   const brightnessFilterId = `threshold-pill-marker-filter-${id}`;
-  return /* @__PURE__ */ jsxs(Group, { children: [
+  return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(ThresholdBrightnessFilter, { id: brightnessFilterId }),
     /* @__PURE__ */ jsx(
       "rect",

package/esm/charts/core/components/threshold-bar/markers/PillMarker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/threshold-bar/markers/PillMarker.tsx"],
-  "sourcesContent": ["import { Group } from '@visx/group';\nimport { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface PillMarkerProps {\n  y0: number;\n  y1: number;\n  x: number;\n  color: string;\n  opacity: number;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const PillMarker = (props: PillMarkerProps) => {\n  const { x, y0, y1, color, onMouseMove, onMouseLeave, opacity } = props;\n\n  const rectRef = useRef<SVGRectElement>(null);\n  const hovered = useMouseHover(rectRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-pill-marker-filter-${id}`;\n\n  return (\n    <Group>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <rect\n        role=\"graphics-symbol\"\n        aria-label=\"pill marker\"\n        ref={rectRef}\n        x={x}\n        y={\n          Math.abs(y1 - y0) > MARKER_RADIUS * 2\n            ? Math.min(y0, y1)\n            : (y0 + y1) / 2 - MARKER_RADIUS\n        }\n        height={Math.max(Math.abs(y1 - y0), MARKER_RADIUS * 2)}\n        width={MARKER_RADIUS * 2}\n        fill={color}\n        rx={MARKER_RADIUS}\n        opacity={opacity}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n      />\n    </Group>\n  );\n};\n"],
-  "mappings": "AAgCI,SACE,KADF;AAhCJ,SAAS,aAAa;AACtB,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAYnC,MAAM,aAAa,CAAC,UAA2B;AACpD,QAAM,EAAE,GAAG,IAAI,IAAI,OAAO,aAAa,cAAc,QAAQ,IAAI;AAEjE,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,UAAU,cAAc,OAAO;AACrC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,gCAAgC,EAAE;AAE7D,SACE,qBAAC,SACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL;AAAA,QACA,GACE,KAAK,IAAI,KAAK,EAAE,IAAI,gBAAgB,IAChC,KAAK,IAAI,IAAI,EAAE,KACd,KAAK,MAAM,IAAI;AAAA,QAEtB,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAAG,gBAAgB,CAAC;AAAA,QACrD,OAAO,gBAAgB;AAAA,QACvB,MAAM;AAAA,QACN,IAAI;AAAA,QACJ;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA,QAClD,QAAQ;AAAA,QACR,aAAa;AAAA,QACb;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { type MouseEventHandler, useRef } from 'react';\n\nimport {\n  MARKER_STROKE_WIDTH,\n  MARKER_STROKE_COLOR,\n  MARKER_RADIUS,\n} from './constants.js';\nimport { useId } from '../../../../../core/hooks/useId.js';\nimport { useMouseHover } from '../../../hooks/useMouseHover.js';\nimport { ThresholdBrightnessFilter } from '../ThresholdBrightnessFilter.js';\n\nexport interface PillMarkerProps {\n  y0: number;\n  y1: number;\n  x: number;\n  color: string;\n  opacity: number;\n  onMouseMove: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\nexport const PillMarker = (props: PillMarkerProps) => {\n  const { x, y0, y1, color, onMouseMove, onMouseLeave, opacity } = props;\n\n  const rectRef = useRef<SVGRectElement>(null);\n  const hovered = useMouseHover(rectRef);\n  const id = useId();\n\n  const brightnessFilterId = `threshold-pill-marker-filter-${id}`;\n\n  return (\n    <g>\n      <ThresholdBrightnessFilter id={brightnessFilterId} />\n      <rect\n        role=\"graphics-symbol\"\n        aria-label=\"pill marker\"\n        ref={rectRef}\n        x={x}\n        y={\n          Math.abs(y1 - y0) > MARKER_RADIUS * 2\n            ? Math.min(y0, y1)\n            : (y0 + y1) / 2 - MARKER_RADIUS\n        }\n        height={Math.max(Math.abs(y1 - y0), MARKER_RADIUS * 2)}\n        width={MARKER_RADIUS * 2}\n        fill={color}\n        rx={MARKER_RADIUS}\n        opacity={opacity}\n        filter={hovered ? `url(#${brightnessFilterId})` : undefined}\n        stroke={MARKER_STROKE_COLOR}\n        strokeWidth={MARKER_STROKE_WIDTH}\n        onMouseMove={onMouseMove}\n        onMouseLeave={onMouseLeave}\n      />\n    </g>\n  );\n};\n"],
+  "mappings": "AA+BI,SACE,KADF;AA/BJ,SAAiC,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAYnC,MAAM,aAAa,CAAC,UAA2B;AACpD,QAAM,EAAE,GAAG,IAAI,IAAI,OAAO,aAAa,cAAc,QAAQ,IAAI;AAEjE,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,UAAU,cAAc,OAAO;AACrC,QAAM,KAAK,MAAM;AAEjB,QAAM,qBAAqB,gCAAgC,EAAE;AAE7D,SACE,qBAAC,OACC;AAAA,wBAAC,6BAA0B,IAAI,oBAAoB;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,KAAK;AAAA,QACL;AAAA,QACA,GACE,KAAK,IAAI,KAAK,EAAE,IAAI,gBAAgB,IAChC,KAAK,IAAI,IAAI,EAAE,KACd,KAAK,MAAM,IAAI;AAAA,QAEtB,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAAG,gBAAgB,CAAC;AAAA,QACrD,OAAO,gBAAgB;AAAA,QACvB,MAAM;AAAA,QACN,IAAI;AAAA,QACJ;AAAA,QACA,QAAQ,UAAU,QAAQ,kBAAkB,MAAM;AAAA,QAClD,QAAQ;AAAA,QACR,aAAa;AAAA,QACb;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/threshold-bar/styles.css

@@ -1,31 +1,31 @@
-._18heesa0-3-7-1 {
+._18heesa0-3-9-0 {
   border-right: unset;
   transform-origin: top left;
   width: 16px;
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa1-3-7-1 {
+._18heesa1-3-9-0 {
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa2-3-7-1 {
+._18heesa2-3-9-0 {
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa3-3-7-1 {
+._18heesa3-3-9-0 {
   border-left: none;
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa4-3-7-1 {
+._18heesa4-3-9-0 {
   transform: scaleX(-1) translateX(-100%);
 }
-._18heesa5-3-7-1 {
+._18heesa5-3-9-0 {
   transform: none;
 }
-._18heesa6-3-7-1 {
+._18heesa6-3-9-0 {
   transform: rotate(-90deg) scaleX(-1);
 }
-._18heesa7-3-7-1 {
+._18heesa7-3-9-0 {
   transform: rotate(-90deg) translateX(-100%);
 }
-._18heesa8-3-7-1 {
+._18heesa8-3-9-0 {
   overflow: hidden;
 }

package/esm/charts/core/components/threshold-bar/styles.sty.js

@@ -1,7 +1,7 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var bodyOverflowOverwrite = "_18heesa8-3-7-1";
-var wrapper = _7a468({ defaultClassName: "_18heesa0-3-7-1", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-7-1", leftBorder: "_18heesa2-3-7-1", rightBorder: "_18heesa3-3-7-1" }, layoutType: { "vertical-flip": "_18heesa4-3-7-1", "vertical-no-flip": "_18heesa5-3-7-1", "horizontal-flip": "_18heesa6-3-7-1", "horizontal-no-flip": "_18heesa7-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var bodyOverflowOverwrite = "_18heesa8-3-9-0";
+var wrapper = _7a468({ defaultClassName: "_18heesa0-3-9-0", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-9-0", leftBorder: "_18heesa2-3-9-0", rightBorder: "_18heesa3-3-9-0" }, layoutType: { "vertical-flip": "_18heesa4-3-9-0", "vertical-no-flip": "_18heesa5-3-9-0", "horizontal-flip": "_18heesa6-3-9-0", "horizontal-no-flip": "_18heesa7-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   bodyOverflowOverwrite,
   wrapper

package/esm/charts/core/components/threshold-bar/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/threshold-bar/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bodyOverflowOverwrite = '_18heesa8-3-7-1';\nexport var wrapper = _7a468({defaultClassName:'_18heesa0-3-7-1',variantClassNames:{borderArea:{bothBorders:'_18heesa1-3-7-1',leftBorder:'_18heesa2-3-7-1',rightBorder:'_18heesa3-3-7-1'},layoutType:{'vertical-flip':'_18heesa4-3-7-1','vertical-no-flip':'_18heesa5-3-7-1','horizontal-flip':'_18heesa6-3-7-1','horizontal-no-flip':'_18heesa7-3-7-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bodyOverflowOverwrite = '_18heesa8-3-9-0';\nexport var wrapper = _7a468({defaultClassName:'_18heesa0-3-9-0',variantClassNames:{borderArea:{bothBorders:'_18heesa1-3-9-0',leftBorder:'_18heesa2-3-9-0',rightBorder:'_18heesa3-3-9-0'},layoutType:{'vertical-flip':'_18heesa4-3-9-0','vertical-no-flip':'_18heesa5-3-9-0','horizontal-flip':'_18heesa6-3-9-0','horizontal-no-flip':'_18heesa7-3-9-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB;AAC5B,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,aAAY,mBAAkB,YAAW,mBAAkB,aAAY,kBAAiB,GAAE,YAAW,EAAC,iBAAgB,mBAAkB,oBAAmB,mBAAkB,mBAAkB,mBAAkB,sBAAqB,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/toolbar/ChartToolbarRenderer.css

@@ -1,4 +1,4 @@
-._1x31hou0-3-7-1 {
+._1x31hou0-3-9-0 {
   padding: var(--dt-spacings-size-4, 4px);
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -6,55 +6,55 @@
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   touch-action: none;
 }
-._1x31hou1-3-7-1 {
+._1x31hou1-3-9-0 {
   visibility: visible;
 }
-._1x31hou2-3-7-1 {
+._1x31hou2-3-9-0 {
   visibility: hidden;
 }
-._1x31hou3-3-7-1 {
+._1x31hou3-3-9-0 {
   padding: 0;
   box-shadow: none;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._1x31hou4-3-7-1 {
+._1x31hou4-3-9-0 {
   background-color: transparent;
   cursor: grab;
   touch-action: none;
 }
-._1x31hou5-3-7-1 {
+._1x31hou5-3-9-0 {
   pointer-events: auto;
 }
-._1x31hou6-3-7-1 {
+._1x31hou6-3-9-0 {
   position: relative;
 }
-._1x31hou7-3-7-1 {
+._1x31hou7-3-9-0 {
   position: absolute;
 }
-body[data-scroll-locked] ._1x31hou8-3-7-1 * {
+body[data-scroll-locked] ._1x31hou8-3-9-0 * {
   pointer-events: none;
 }
-body[data-scroll-locked] ._1x31hou8-3-7-1 button[aria-expanded="true"] {
+body[data-scroll-locked] ._1x31hou8-3-9-0 button[aria-expanded="true"] {
   pointer-events: all;
 }
-._1x31hou9-3-7-1 {
+._1x31hou9-3-9-0 {
   pointer-events: none;
 }
-._1x31houa-3-7-1 {
+._1x31houa-3-9-0 {
   position: relative;
 }
-._1x31houb-3-7-1 {
+._1x31houb-3-9-0 {
   position: absolute;
 }
-._1x31houc-3-7-1 {
+._1x31houc-3-9-0 {
   width: calc(100% - var(--dt-spacings-size-16, 16px));
   height: calc(100% - var(--dt-spacings-size-16, 16px));
   top: var(--dt-spacings-size-8, 8px);
   left: var(--dt-spacings-size-8, 8px);
 }
-._1x31houd-3-7-1 {
+._1x31houd-3-9-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
 }
-._1x31houe-3-7-1 {
+._1x31houe-3-9-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }

package/esm/charts/core/components/toolbar/ChartToolbarRenderer.js

@@ -33,7 +33,6 @@ import {
 import { useToolbar } from "./hooks/useToolbar.js";
 import { TOOLBAR_MESSAGES } from "./messages.js";
 import { doesFitInBounds } from "./utils/does-fit-in-bounds.js";
-import { estimateToolbarWidth } from "./utils/estimate-toolbar-width.js";
 import { getToolbarPlacement } from "./utils/get-toolbar-placement.js";
 import { Button } from "../../../../buttons/button/Button.js";
 import { useBehavioralTrackingProps as _useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
@@ -51,7 +50,7 @@ const InternalChartToolbarRenderer = (props) => {
     behaviorTrackingProps,
     {
       children,
-      visible,
+      visible = false,
       placement,
       collapsed = false,
       draggable = true,
@@ -91,6 +90,8 @@ const InternalChartToolbarRenderer = (props) => {
   const [toolbarElement, setToolbarElement] = useState();
   const [boundSize, boundRef] = useObserveContainerSize();
   const [toolbarSize, toolbarRefCallback] = useObserveContainerSize();
+  const childrenRef = useRef(null);
+  const lastMeasuredWidthRef = useRef(0);
   const intl = useIntl();
   const mouseInBounds = useRef(false);
   const [isVisible, setIsVisible] = useState(false);
@@ -104,10 +105,17 @@ const InternalChartToolbarRenderer = (props) => {
     [toolbarSize, boundSize]
   );
   useEffect(() => {
-    updateFitsBounds(
-      doesFitInBounds(estimateToolbarWidth(children), boundSize)
-    );
-  }, [children, boundSize]);
+    if (!isCollapsable) {
+      return;
+    }
+    if (isExpanded && childrenRef.current) {
+      const w = childrenRef.current.scrollWidth;
+      if (w > 0) {
+        lastMeasuredWidthRef.current = w;
+      }
+    }
+    updateFitsBounds(doesFitInBounds(lastMeasuredWidthRef.current, boundSize));
+  }, [isExpanded, boundSize]);
   useEffect(() => {
     toggleExpanded(fitsBounds && !collapsed);
   }, [collapsed, fitsBounds]);
@@ -265,6 +273,7 @@ const InternalChartToolbarRenderer = (props) => {
               "data-testid": "chart-toolbar-container",
               onBlur: handleOnBlur,
               onKeyDown: handleKeyDown,
+              onPointerDown: onMouseEnterHandler,
               onMouseEnter: onMouseEnterHandler,
               onMouseLeave: onMouseLeaveHandler,
               ...behaviorTrackingProps,
@@ -276,6 +285,7 @@ const InternalChartToolbarRenderer = (props) => {
                     inline: isInlineMode
                   }),
                   "data-testid": "chart-toolbar-wrapper",
+                  ref: childrenRef,
                   children: /* @__PURE__ */ jsxs(Flex, { gap: 0, flexDirection: "row", alignItems: "center", children: [
                     draggable && !removeDragHandle && [
                       /* @__PURE__ */ jsx(