@dynatrace/strato-components 3.2.1 → 3.3.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/sparkline-display/components/ContextValueIndicator.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nimport { TextEllipsis } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { TestIds } from '../../annotations/constants.js';\nimport { DEFAULT_STROKE_WIDTH } from '../../grid/GridLine.js';\nimport { charsFontWidth12pixelsSize500Map } from '../../text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../text-ellipsis/truncate-string.js';\nimport {\n  CONTEXT_VALUE_LINE_OFFSET_MAX_DIVISOR,\n  CONTEXT_VALUE_LINE_OFFSET_MIN,\n  CONTEXT_VALUE_LINE_HEIGHT,\n  CONTEXT_VALUE_STROKE_COLOR,\n  CONTEXT_VALUE_STROKE_DASHARRAY,\n  CONTEXT_VALUE_STROKE_LINECAP,\n  CONTEXT_VALUE_TEXT_OFFSET_MAX_DIVISOR,\n  CONTEXT_VALUE_TEXT_OFFSET_MIN_DIVISOR,\n  CONTEXT_VALUES_Y_OFFSET,\n  NEGATIVE_SIGN,\n} from '../constants.js';\nimport { contextValueText, negativeSign } from '../Sparkline.sty.js';\nimport {\n  SparklineContainerHeight,\n  SparklineContainerHeightFontSize,\n} from '../types/sparkline-container-height.js';\nimport { SparklinLabelsAlignment } from '../types/sparkline-props.js';\nimport { getContextValueXOffset } from '../utils/get-context-value-x-offset.js';\n\ninterface ExtremesIndicatorProps {\n  formattedValue: string;\n  yPosition: number;\n  dottedLineWidth: number;\n  containerHeight: SparklineContainerHeight;\n  fontSize: SparklineContainerHeightFontSize;\n  labelsAlignment?: SparklinLabelsAlignment;\n  chartLeftOffset: number;\n  labelsFixedWidth?: number;\n  isMax?: boolean;\n  color?: string;\n}\n\nexport const ContextValueIndicator = (props: ExtremesIndicatorProps) => {\n  const {\n    formattedValue,\n    containerHeight,\n    yPosition,\n    dottedLineWidth,\n    fontSize,\n    labelsAlignment,\n    chartLeftOffset,\n    labelsFixedWidth,\n    isMax = false,\n    color,\n  } = props;\n  const isNegative = formattedValue.startsWith(NEGATIVE_SIGN);\n\n  const displayValue = isNegative ? formattedValue.slice(1) : formattedValue;\n  const isLeft = labelsAlignment !== 'right';\n  const actualWidth = calculateWidth(\n    displayValue,\n    charsFontWidth12pixelsSize500Map,\n  );\n\n  const labelWidth =\n    typeof labelsFixedWidth === 'number' && !Number.isNaN(labelsFixedWidth)\n      ? labelsFixedWidth\n      : actualWidth;\n  const positioningWidth = isLeft\n    ? Math.min(actualWidth, labelWidth)\n    : labelWidth;\n  const { signXOffset, textXOffset } = getContextValueXOffset(\n    isLeft,\n    chartLeftOffset,\n    positioningWidth,\n    dottedLineWidth,\n    containerHeight,\n    fontSize === SparklineContainerHeightFontSize.SMALLER_THAN_32,\n  );\n\n  const textOffsetDivisor = isMax\n    ? CONTEXT_VALUE_TEXT_OFFSET_MAX_DIVISOR\n    : CONTEXT_VALUE_TEXT_OFFSET_MIN_DIVISOR;\n  const svgTopOffset = isMax\n    ? -(CONTEXT_VALUE_LINE_HEIGHT / CONTEXT_VALUE_LINE_OFFSET_MAX_DIVISOR)\n    : CONTEXT_VALUE_LINE_OFFSET_MIN;\n\n  return (\n    <div\n      className={contextValueText({ fontSize })}\n      style={{\n        transform: `translateY(${yPosition}px) translateX(${\n          isLeft ? 0 : chartLeftOffset\n        }px)`,\n      }}\n    >\n      <svg\n        width={dottedLineWidth}\n        style={{\n          position: 'absolute',\n          left: isLeft ? chartLeftOffset : 0,\n          top: svgTopOffset,\n        }}\n      >\n        <line\n          data-testid={TestIds.AnnotationIndicator}\n          x1={0}\n          x2={dottedLineWidth}\n          y1={CONTEXT_VALUES_Y_OFFSET}\n          y2={CONTEXT_VALUES_Y_OFFSET}\n          stroke={CONTEXT_VALUE_STROKE_COLOR}\n          strokeWidth={DEFAULT_STROKE_WIDTH}\n          strokeDasharray={CONTEXT_VALUE_STROKE_DASHARRAY}\n          strokeLinecap={CONTEXT_VALUE_STROKE_LINECAP}\n        />\n      </svg>\n\n      <div\n        className={clsx(negativeSign({ containerHeight }))}\n        style={{\n          transform: `translateY(${-(\n            CONTEXT_VALUE_LINE_HEIGHT / textOffsetDivisor\n          )}px) translateX(${signXOffset}px)`,\n        }}\n      >\n        {isNegative && NEGATIVE_SIGN}\n      </div>\n      <TextEllipsis\n        truncationMode=\"middle\"\n        style={{\n          width: `${actualWidth}px`,\n          position: 'absolute',\n          transform: `translateY(${-(\n            CONTEXT_VALUE_LINE_HEIGHT / textOffsetDivisor\n          )}px) translateX(${textXOffset}px)`,\n          color,\n        }}\n      >\n        {displayValue}\n      </TextEllipsis>\n    </div>\n  );\n};\n"],
-  "mappings": "AAsFI,SAgBI,KAhBJ;AAtFJ,OAAO,UAAU;AAEjB,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,4BAA4B;AACrC,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB,oBAAoB;AAC/C;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,8BAA8B;AAehC,MAAM,wBAAwB,CAAC,UAAkC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACF,IAAI;AACJ,QAAM,aAAa,eAAe,WAAW,aAAa;AAE1D,QAAM,eAAe,aAAa,eAAe,MAAM,CAAC,IAAI;AAC5D,QAAM,SAAS,oBAAoB;AACnC,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,aACJ,OAAO,qBAAqB,YAAY,CAAC,OAAO,MAAM,gBAAgB,IAClE,mBACA;AACN,QAAM,mBAAmB,SACrB,KAAK,IAAI,aAAa,UAAU,IAChC;AACJ,QAAM,EAAE,aAAa,YAAY,IAAI;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,iCAAiC;AAAA,EAChD;AAEA,QAAM,oBAAoB,QACtB,wCACA;AACJ,QAAM,eAAe,QACjB,EAAE,4BAA4B,yCAC9B;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB,EAAE,SAAS,CAAC;AAAA,MACxC,OAAO;AAAA,QACL,WAAW,cAAc,SAAS,kBAChC,SAAS,IAAI,eACf;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM,SAAS,kBAAkB;AAAA,cACjC,KAAK;AAAA,YACP;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAa,QAAQ;AAAA,gBACrB,IAAI;AAAA,gBACJ,IAAI;AAAA,gBACJ,IAAI;AAAA,gBACJ,IAAI;AAAA,gBACJ,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,iBAAiB;AAAA,gBACjB,eAAe;AAAA;AAAA,YACjB;AAAA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAAA,YACjD,OAAO;AAAA,cACL,WAAW,cAAc,EACvB,4BAA4B,kBAC7B,kBAAkB,WAAW;AAAA,YAChC;AAAA,YAEC,wBAAc;AAAA;AAAA,QACjB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,OAAO;AAAA,cACL,OAAO,GAAG,WAAW;AAAA,cACrB,UAAU;AAAA,cACV,WAAW,cAAc,EACvB,4BAA4B,kBAC7B,kBAAkB,WAAW;AAAA,cAC9B;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport { TextEllipsis } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { TestIds } from '../../annotations/constants.js';\nimport { DEFAULT_STROKE_WIDTH } from '../../grid/GridLine.js';\nimport { charsFontWidth12pixelsSize500Map } from '../../text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../text-ellipsis/truncate-string.js';\nimport {\n  CONTEXT_VALUE_STROKE_COLOR,\n  CONTEXT_VALUE_STROKE_DASHARRAY,\n  CONTEXT_VALUE_STROKE_LINECAP,\n  CONTEXT_VALUE_TEXT_OFFSET_MAX,\n  CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE,\n  CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL,\n  CONTEXT_VALUES_Y_OFFSET,\n  NEGATIVE_SIGN,\n} from '../constants.js';\nimport { contextValueText, negativeSign } from '../Sparkline.sty.js';\nimport {\n  SparklineContainerHeight,\n  SparklineContainerHeightFontSize,\n} from '../types/sparkline-container-height.js';\nimport { SparklinLabelsAlignment } from '../types/sparkline-props.js';\nimport { getContextValueXOffset } from '../utils/get-context-value-x-offset.js';\n\ninterface ExtremesIndicatorProps {\n  formattedValue: string;\n  yPosition: number;\n  dottedLineWidth: number;\n  containerHeight: SparklineContainerHeight;\n  fontSize: SparklineContainerHeightFontSize;\n  labelsAlignment?: SparklinLabelsAlignment;\n  chartLeftOffset: number;\n  labelsFixedWidth?: number;\n  /** Y-position for the text label. When omitted, defaults to `yPosition`.\n   *  The dashed line always stays at `yPosition`; only the text is shifted. */\n  labelYPosition?: number;\n  isMax?: boolean;\n  color?: string;\n  /** Pixel height of the sparkline chart area, used to clamp text within bounds. */\n  sparklineHeight: number;\n}\n\ninterface IndicatorPositioning {\n  containerTransform: string;\n  svgLeft: number;\n  labelYTransform: string;\n  signXOffset: number;\n  textXOffset: number;\n  actualWidth: number;\n  isNegative: boolean;\n  displayValue: string;\n}\n\nfunction getTextOffset(\n  isMax: boolean,\n  fontSize: SparklineContainerHeightFontSize,\n): number {\n  if (isMax) {\n    return CONTEXT_VALUE_TEXT_OFFSET_MAX;\n  }\n\n  return fontSize === SparklineContainerHeightFontSize.SMALLER_THAN_32\n    ? CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL\n    : CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE;\n}\n\nfunction computeIndicatorPositioning(\n  props: ExtremesIndicatorProps,\n): IndicatorPositioning {\n  const {\n    formattedValue,\n    yPosition,\n    dottedLineWidth,\n    containerHeight,\n    fontSize,\n    labelsAlignment,\n    chartLeftOffset,\n    labelsFixedWidth,\n    labelYPosition,\n    isMax = false,\n  } = props;\n\n  const isNegative = formattedValue.startsWith(NEGATIVE_SIGN);\n  const displayValue = isNegative ? formattedValue.slice(1) : formattedValue;\n  const isLeft = labelsAlignment !== 'right';\n\n  const actualWidth = calculateWidth(\n    displayValue,\n    charsFontWidth12pixelsSize500Map,\n  );\n  const labelWidth =\n    typeof labelsFixedWidth === 'number' && !Number.isNaN(labelsFixedWidth)\n      ? labelsFixedWidth\n      : actualWidth;\n  const positioningWidth = isLeft\n    ? Math.min(actualWidth, labelWidth)\n    : labelWidth;\n\n  const { signXOffset, textXOffset } = getContextValueXOffset(\n    isLeft,\n    chartLeftOffset,\n    positioningWidth,\n    dottedLineWidth,\n    containerHeight,\n    fontSize === SparklineContainerHeightFontSize.SMALLER_THAN_32,\n  );\n\n  const textOffset = getTextOffset(isMax, fontSize);\n\n  const labelYDelta = (labelYPosition ?? yPosition) - yPosition;\n\n  return {\n    containerTransform: `translateY(${yPosition}px) translateX(${\n      isLeft ? 0 : chartLeftOffset\n    }px)`,\n    svgLeft: isLeft ? chartLeftOffset : 0,\n    labelYTransform: `translateY(${labelYDelta - textOffset}px)`,\n    signXOffset,\n    textXOffset,\n    actualWidth,\n    isNegative,\n    displayValue,\n  };\n}\n\nexport const ContextValueIndicator = (props: ExtremesIndicatorProps) => {\n  const { dottedLineWidth, containerHeight, fontSize, color } = props;\n\n  const {\n    containerTransform,\n    svgLeft,\n    labelYTransform,\n    signXOffset,\n    textXOffset,\n    actualWidth,\n    isNegative,\n    displayValue,\n  } = computeIndicatorPositioning(props);\n\n  return (\n    <div\n      className={contextValueText({ fontSize })}\n      style={{ transform: containerTransform }}\n    >\n      <svg\n        width={dottedLineWidth}\n        style={{ position: 'absolute', left: svgLeft, top: 0 }}\n      >\n        <line\n          data-testid={TestIds.AnnotationIndicator}\n          x1={0}\n          x2={dottedLineWidth}\n          y1={CONTEXT_VALUES_Y_OFFSET}\n          y2={CONTEXT_VALUES_Y_OFFSET}\n          stroke={CONTEXT_VALUE_STROKE_COLOR}\n          strokeWidth={DEFAULT_STROKE_WIDTH}\n          strokeDasharray={CONTEXT_VALUE_STROKE_DASHARRAY}\n          strokeLinecap={CONTEXT_VALUE_STROKE_LINECAP}\n        />\n      </svg>\n\n      <div\n        className={clsx(negativeSign({ containerHeight }))}\n        style={{\n          transform: `${labelYTransform} translateX(${signXOffset}px)`,\n        }}\n      >\n        {isNegative && NEGATIVE_SIGN}\n      </div>\n      <TextEllipsis\n        truncationMode=\"middle\"\n        style={{\n          width: `${actualWidth}px`,\n          position: 'absolute',\n          transform: `${labelYTransform} translateX(${textXOffset}px)`,\n          color,\n        }}\n      >\n        {displayValue}\n      </TextEllipsis>\n    </div>\n  );\n};\n"],
+  "mappings": "AA6II,SAQI,KARJ;AA7IJ,OAAO,UAAU;AAEjB,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,4BAA4B;AACrC,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB,oBAAoB;AAC/C;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,8BAA8B;AA+BvC,SAAS,cACP,OACA,UACQ;AACR,MAAI,OAAO;AACT,WAAO;AAAA,EACT;AAEA,SAAO,aAAa,iCAAiC,kBACjD,sCACA;AACN;AAEA,SAAS,4BACP,OACsB;AACtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,aAAa,eAAe,WAAW,aAAa;AAC1D,QAAM,eAAe,aAAa,eAAe,MAAM,CAAC,IAAI;AAC5D,QAAM,SAAS,oBAAoB;AAEnC,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,EACF;AACA,QAAM,aACJ,OAAO,qBAAqB,YAAY,CAAC,OAAO,MAAM,gBAAgB,IAClE,mBACA;AACN,QAAM,mBAAmB,SACrB,KAAK,IAAI,aAAa,UAAU,IAChC;AAEJ,QAAM,EAAE,aAAa,YAAY,IAAI;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,iCAAiC;AAAA,EAChD;AAEA,QAAM,aAAa,cAAc,OAAO,QAAQ;AAEhD,QAAM,eAAe,kBAAkB,aAAa;AAEpD,SAAO;AAAA,IACL,oBAAoB,cAAc,SAAS,kBACzC,SAAS,IAAI,eACf;AAAA,IACA,SAAS,SAAS,kBAAkB;AAAA,IACpC,iBAAiB,cAAc,cAAc,UAAU;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,wBAAwB,CAAC,UAAkC;AACtE,QAAM,EAAE,iBAAiB,iBAAiB,UAAU,MAAM,IAAI;AAE9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B,KAAK;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB,EAAE,SAAS,CAAC;AAAA,MACxC,OAAO,EAAE,WAAW,mBAAmB;AAAA,MAEvC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,OAAO,EAAE,UAAU,YAAY,MAAM,SAAS,KAAK,EAAE;AAAA,YAErD;AAAA,cAAC;AAAA;AAAA,gBACC,eAAa,QAAQ;AAAA,gBACrB,IAAI;AAAA,gBACJ,IAAI;AAAA,gBACJ,IAAI;AAAA,gBACJ,IAAI;AAAA,gBACJ,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,iBAAiB;AAAA,gBACjB,eAAe;AAAA;AAAA,YACjB;AAAA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAAA,YACjD,OAAO;AAAA,cACL,WAAW,GAAG,eAAe,eAAe,WAAW;AAAA,YACzD;AAAA,YAEC,wBAAc;AAAA;AAAA,QACjB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,OAAO;AAAA,cACL,OAAO,GAAG,WAAW;AAAA,cACrB,UAAU;AAAA,cACV,WAAW,GAAG,eAAe,eAAe,WAAW;AAAA,cACvD;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -19,34 +19,46 @@ const CONTEXT_VALUE_STROKE_COLOR = Colors.Background.Field.Neutral.DefaultActive
 const CONTEXT_VALUES_Y_OFFSET = 0;
 const AXIS_HEIGHT = 25;
 const CONTEXT_VALUE_LINE_HEIGHT = 12;
-const CONTEXT_VALUE_TEXT_OFFSET_MAX_DIVISOR = 2.5;
-const CONTEXT_VALUE_TEXT_OFFSET_MIN_DIVISOR = 1.5;
-const CONTEXT_VALUE_LINE_OFFSET_MAX_DIVISOR = 7.5;
-const CONTEXT_VALUE_LINE_OFFSET_MIN = -1.5;
-const CONTEXT_VALUE_MIN_LABELS_DISTANCE = CONTEXT_VALUE_LINE_HEIGHT + 2;
+const CONTEXT_VALUE_LARGE_LINE_HEIGHT = 16;
+const CONTEXT_VALUE_TEXT_OFFSET_MAX = 4;
+const CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL = 8;
+const CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE = 12;
+const CONTEXT_VALUE_LABELS_GAP = 8;
+const CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL = CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL + CONTEXT_VALUE_LINE_HEIGHT + CONTEXT_VALUE_LABELS_GAP - CONTEXT_VALUE_TEXT_OFFSET_MAX;
+const CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE = CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE + CONTEXT_VALUE_LARGE_LINE_HEIGHT + CONTEXT_VALUE_LABELS_GAP - CONTEXT_VALUE_TEXT_OFFSET_MAX;
 const CONTEXT_VALUES_FONT = Typography.Text.Small.Emphasized;
 const CONTEXT_VALUE_MAX_WIDTH = 300;
 const SPARKLINE_ARIA_LABEL = "Sparkline";
 const CONTEXT_VALUE_INDICATOR_X_OFFSET = 8;
-const CONTEXT_VALUE_NEGATIVE_SIGN_X_OFFSET = 1.5;
+const CONTEXT_VALUE_SIGN_COLUMN_SMALL = 8;
+const CONTEXT_VALUE_SIGN_COLUMN_LARGE = 10;
 const NEGATIVE_SIGN = "-";
+const CONTEXT_VALUE_SIGN_NUDGE_RIGHT = 5;
+const CONTEXT_VALUE_TRAILING_PADDING = 3;
+const CONTEXT_VALUE_SIGN_COLUMN_HEIGHT_THRESHOLD = 24;
 const FONT_SIZE_BREAKING_POINT = 32;
 export {
   AXIS_HEIGHT,
   CONTEXT_VALUES_FONT,
   CONTEXT_VALUES_Y_OFFSET,
   CONTEXT_VALUE_INDICATOR_X_OFFSET,
+  CONTEXT_VALUE_LABELS_GAP,
+  CONTEXT_VALUE_LARGE_LINE_HEIGHT,
   CONTEXT_VALUE_LINE_HEIGHT,
-  CONTEXT_VALUE_LINE_OFFSET_MAX_DIVISOR,
-  CONTEXT_VALUE_LINE_OFFSET_MIN,
   CONTEXT_VALUE_MAX_WIDTH,
-  CONTEXT_VALUE_MIN_LABELS_DISTANCE,
-  CONTEXT_VALUE_NEGATIVE_SIGN_X_OFFSET,
+  CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE,
+  CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL,
+  CONTEXT_VALUE_SIGN_COLUMN_HEIGHT_THRESHOLD,
+  CONTEXT_VALUE_SIGN_COLUMN_LARGE,
+  CONTEXT_VALUE_SIGN_COLUMN_SMALL,
+  CONTEXT_VALUE_SIGN_NUDGE_RIGHT,
   CONTEXT_VALUE_STROKE_COLOR,
   CONTEXT_VALUE_STROKE_DASHARRAY,
   CONTEXT_VALUE_STROKE_LINECAP,
-  CONTEXT_VALUE_TEXT_OFFSET_MAX_DIVISOR,
-  CONTEXT_VALUE_TEXT_OFFSET_MIN_DIVISOR,
+  CONTEXT_VALUE_TEXT_OFFSET_MAX,
+  CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE,
+  CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL,
+  CONTEXT_VALUE_TRAILING_PADDING,
   DEFAULT_SCALE_FALLBACK_COLOR,
   DEFAULT_SHOW_CONTEXT_VALUES,
   FONT_SIZE_BREAKING_POINT,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/sparkline-display/constants.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\nimport Typography from '@dynatrace/strato-design-tokens/typography';\n\nimport { SparklineXAxisInternalProps } from './types/sparkline-x-axis-props.js';\nimport type { SparklineYAxisProps } from './types/sparkline-y-axis-props.js';\n\nexport const defaultXAxisConfig: Required<SparklineXAxisInternalProps> = {\n  min: 'data-min',\n  max: 'data-max',\n};\n\nexport const defaultYAxisConfig: Required<\n  Omit<SparklineYAxisProps, 'formatter'>\n> = {\n  min: 'data-min',\n  max: 'data-max',\n  scale: 'linear',\n};\n\nexport const DEFAULT_SCALE_FALLBACK_COLOR = Colors.Text.Neutral.Default;\n\nexport const DEFAULT_SHOW_CONTEXT_VALUES = false;\n\nexport const TIMESTAMP_BAR_WIDTH = 5;\nexport const TIMESTAMP_BAR_X_DEVIATION = 2;\n\nexport const CONTEXT_VALUE_STROKE_DASHARRAY = '2,2';\nexport const CONTEXT_VALUE_STROKE_LINECAP = 'round';\nexport const CONTEXT_VALUE_STROKE_COLOR =\n  Colors.Background.Field.Neutral.DefaultActive;\n\nexport const CONTEXT_VALUES_Y_OFFSET = 0;\nexport const AXIS_HEIGHT = 25;\n\nexport const CONTEXT_VALUE_LINE_HEIGHT = 12;\nexport const CONTEXT_VALUE_TEXT_OFFSET_MAX_DIVISOR = 2.5;\nexport const CONTEXT_VALUE_TEXT_OFFSET_MIN_DIVISOR = 1.5;\nexport const CONTEXT_VALUE_LINE_OFFSET_MAX_DIVISOR = 7.5;\nexport const CONTEXT_VALUE_LINE_OFFSET_MIN = -1.5;\n// Minimum distance between the max and min context\nexport const CONTEXT_VALUE_MIN_LABELS_DISTANCE = CONTEXT_VALUE_LINE_HEIGHT + 2;\n\nexport const CONTEXT_VALUES_FONT = Typography.Text.Small.Emphasized;\nexport const CONTEXT_VALUE_MAX_WIDTH = 300;\n\nexport const SPARKLINE_ARIA_LABEL = 'Sparkline';\n\nexport const CONTEXT_VALUE_INDICATOR_X_OFFSET = 8;\n\nexport const CONTEXT_VALUE_NEGATIVE_SIGN_X_OFFSET = 1.5;\n\nexport const NEGATIVE_SIGN = '-';\n\nexport const FONT_SIZE_BREAKING_POINT = 32;\n"],
-  "mappings": "AAAA,OAAO,YAAY;AACnB,OAAO,gBAAgB;AAKhB,MAAM,qBAA4D;AAAA,EACvE,KAAK;AAAA,EACL,KAAK;AACP;AAEO,MAAM,qBAET;AAAA,EACF,KAAK;AAAA,EACL,KAAK;AAAA,EACL,OAAO;AACT;AAEO,MAAM,+BAA+B,OAAO,KAAK,QAAQ;AAEzD,MAAM,8BAA8B;AAEpC,MAAM,sBAAsB;AAC5B,MAAM,4BAA4B;AAElC,MAAM,iCAAiC;AACvC,MAAM,+BAA+B;AACrC,MAAM,6BACX,OAAO,WAAW,MAAM,QAAQ;AAE3B,MAAM,0BAA0B;AAChC,MAAM,cAAc;AAEpB,MAAM,4BAA4B;AAClC,MAAM,wCAAwC;AAC9C,MAAM,wCAAwC;AAC9C,MAAM,wCAAwC;AAC9C,MAAM,gCAAgC;AAEtC,MAAM,oCAAoC,4BAA4B;AAEtE,MAAM,sBAAsB,WAAW,KAAK,MAAM;AAClD,MAAM,0BAA0B;AAEhC,MAAM,uBAAuB;AAE7B,MAAM,mCAAmC;AAEzC,MAAM,uCAAuC;AAE7C,MAAM,gBAAgB;AAEtB,MAAM,2BAA2B;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\nimport Typography from '@dynatrace/strato-design-tokens/typography';\n\nimport { SparklineXAxisInternalProps } from './types/sparkline-x-axis-props.js';\nimport type { SparklineYAxisProps } from './types/sparkline-y-axis-props.js';\n\nexport const defaultXAxisConfig: Required<SparklineXAxisInternalProps> = {\n  min: 'data-min',\n  max: 'data-max',\n};\n\nexport const defaultYAxisConfig: Required<\n  Omit<SparklineYAxisProps, 'formatter'>\n> = {\n  min: 'data-min',\n  max: 'data-max',\n  scale: 'linear',\n};\n\nexport const DEFAULT_SCALE_FALLBACK_COLOR = Colors.Text.Neutral.Default;\n\nexport const DEFAULT_SHOW_CONTEXT_VALUES = false;\n\nexport const TIMESTAMP_BAR_WIDTH = 5;\nexport const TIMESTAMP_BAR_X_DEVIATION = 2;\n\nexport const CONTEXT_VALUE_STROKE_DASHARRAY = '2,2';\nexport const CONTEXT_VALUE_STROKE_LINECAP = 'round';\nexport const CONTEXT_VALUE_STROKE_COLOR =\n  Colors.Background.Field.Neutral.DefaultActive;\n\nexport const CONTEXT_VALUES_Y_OFFSET = 0;\nexport const AXIS_HEIGHT = 25;\n\nexport const CONTEXT_VALUE_LINE_HEIGHT = 12;\nexport const CONTEXT_VALUE_LARGE_LINE_HEIGHT = 16;\nexport const CONTEXT_VALUE_TEXT_OFFSET_MAX = 4;\nexport const CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL = 8;\nexport const CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE = 12;\nexport const CONTEXT_VALUE_LABELS_GAP = 8;\n// Minimum distance between raw y-positions so text labels don't overlap.\n// Derived from the text-box geometry per font size:\n//   small: textOffsetMinSmall(8) + lineHeight(12) + gap(8) - textOffsetMax(4) = 24\n//   large: textOffsetMinLarge(12) + lineHeightLarge(16) + gap(8) - textOffsetMax(4) = 32\nexport const CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL =\n  CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL +\n  CONTEXT_VALUE_LINE_HEIGHT +\n  CONTEXT_VALUE_LABELS_GAP -\n  CONTEXT_VALUE_TEXT_OFFSET_MAX;\nexport const CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE =\n  CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE +\n  CONTEXT_VALUE_LARGE_LINE_HEIGHT +\n  CONTEXT_VALUE_LABELS_GAP -\n  CONTEXT_VALUE_TEXT_OFFSET_MAX;\n\nexport const CONTEXT_VALUES_FONT = Typography.Text.Small.Emphasized;\nexport const CONTEXT_VALUE_MAX_WIDTH = 300;\n\nexport const SPARKLINE_ARIA_LABEL = 'Sparkline';\n\nexport const CONTEXT_VALUE_INDICATOR_X_OFFSET = 8;\n\n// Horizontal space always reserved for the negative sign and its CSS marginLeft,\n// so that the chart width is stable regardless of whether values are negative.\n// sign-div width + Spacings.Size4 (4 px) CSS marginLeft.\nexport const CONTEXT_VALUE_SIGN_COLUMN_SMALL = 8; // 4 px sign  + 4 px margin (height \u2264 24)\nexport const CONTEXT_VALUE_SIGN_COLUMN_LARGE = 10; // 6 px sign + 4 px margin (height > 24)\n\nexport const NEGATIVE_SIGN = '-';\n\n/** 1 px visual nudge + 4 px CSS marginLeft on the sign element. */\nexport const CONTEXT_VALUE_SIGN_NUDGE_RIGHT = 5;\n\n/** Padding added after the measured label + sign column. */\nexport const CONTEXT_VALUE_TRAILING_PADDING = 3;\n\n/** Height threshold (px) for sign-column sizing: <= uses SMALL, > uses LARGE. */\nexport const CONTEXT_VALUE_SIGN_COLUMN_HEIGHT_THRESHOLD = 24;\n\nexport const FONT_SIZE_BREAKING_POINT = 32;\n"],
+  "mappings": "AAAA,OAAO,YAAY;AACnB,OAAO,gBAAgB;AAKhB,MAAM,qBAA4D;AAAA,EACvE,KAAK;AAAA,EACL,KAAK;AACP;AAEO,MAAM,qBAET;AAAA,EACF,KAAK;AAAA,EACL,KAAK;AAAA,EACL,OAAO;AACT;AAEO,MAAM,+BAA+B,OAAO,KAAK,QAAQ;AAEzD,MAAM,8BAA8B;AAEpC,MAAM,sBAAsB;AAC5B,MAAM,4BAA4B;AAElC,MAAM,iCAAiC;AACvC,MAAM,+BAA+B;AACrC,MAAM,6BACX,OAAO,WAAW,MAAM,QAAQ;AAE3B,MAAM,0BAA0B;AAChC,MAAM,cAAc;AAEpB,MAAM,4BAA4B;AAClC,MAAM,kCAAkC;AACxC,MAAM,gCAAgC;AACtC,MAAM,sCAAsC;AAC5C,MAAM,sCAAsC;AAC5C,MAAM,2BAA2B;AAKjC,MAAM,0CACX,sCACA,4BACA,2BACA;AACK,MAAM,0CACX,sCACA,kCACA,2BACA;AAEK,MAAM,sBAAsB,WAAW,KAAK,MAAM;AAClD,MAAM,0BAA0B;AAEhC,MAAM,uBAAuB;AAE7B,MAAM,mCAAmC;AAKzC,MAAM,kCAAkC;AACxC,MAAM,kCAAkC;AAExC,MAAM,gBAAgB;AAGtB,MAAM,iCAAiC;AAGvC,MAAM,iCAAiC;AAGvC,MAAM,6CAA6C;AAEnD,MAAM,2BAA2B;",
   "names": []
 }

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

@@ -1,12 +1,19 @@
-import { CONTEXT_VALUE_MIN_LABELS_DISTANCE } from "../constants.js";
-function getAdjustedContextValueYPosition(rawMinYPos, rawMaxYPos, otherIndicatorVisible, isMax) {
+function getAdjustedContextValueYPosition(rawMinYPos, rawMaxYPos, otherIndicatorVisible, isMax, minLabelsDistance, textOffset, chartHeight, textBottomOverflow) {
   const currentVerticalGap = rawMinYPos - rawMaxYPos;
-  const needsOverlapAdjustment = otherIndicatorVisible && currentVerticalGap < CONTEXT_VALUE_MIN_LABELS_DISTANCE;
+  const needsOverlapAdjustment = otherIndicatorVisible && currentVerticalGap < minLabelsDistance;
+  let position;
   if (needsOverlapAdjustment) {
-    const requiredShift = (CONTEXT_VALUE_MIN_LABELS_DISTANCE - currentVerticalGap) / 2;
-    return isMax ? rawMaxYPos - requiredShift : rawMinYPos + requiredShift;
+    const requiredShift = (minLabelsDistance - currentVerticalGap) / 2;
+    position = isMax ? rawMaxYPos - requiredShift : rawMinYPos + requiredShift;
+  } else {
+    position = isMax ? rawMaxYPos : rawMinYPos;
   }
-  return isMax ? rawMaxYPos : rawMinYPos;
+  if (isMax) {
+    position = Math.max(position, textOffset);
+  } else if (chartHeight !== void 0 && textBottomOverflow !== void 0) {
+    position = Math.min(position, chartHeight - textBottomOverflow);
+  }
+  return position;
 }
 export {
   getAdjustedContextValueYPosition

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": ["import { CONTEXT_VALUE_MIN_LABELS_DISTANCE } from '../constants.js';\n\n/**\n * Returns the y-position for a context-value indicators\n * Prevents label overlap when min/max values are close together.\n */\nexport function getAdjustedContextValueYPosition(\n  rawMinYPos: number,\n  rawMaxYPos: number,\n  otherIndicatorVisible: boolean,\n  isMax: boolean,\n): number {\n  const currentVerticalGap = rawMinYPos - rawMaxYPos;\n  const needsOverlapAdjustment =\n    otherIndicatorVisible &&\n    currentVerticalGap < CONTEXT_VALUE_MIN_LABELS_DISTANCE;\n\n  if (needsOverlapAdjustment) {\n    const requiredShift =\n      (CONTEXT_VALUE_MIN_LABELS_DISTANCE - currentVerticalGap) / 2;\n    return isMax ? rawMaxYPos - requiredShift : rawMinYPos + requiredShift;\n  }\n\n  return isMax ? rawMaxYPos : rawMinYPos;\n}\n"],
-  "mappings": "AAAA,SAAS,yCAAyC;AAM3C,SAAS,iCACd,YACA,YACA,uBACA,OACQ;AACR,QAAM,qBAAqB,aAAa;AACxC,QAAM,yBACJ,yBACA,qBAAqB;AAEvB,MAAI,wBAAwB;AAC1B,UAAM,iBACH,oCAAoC,sBAAsB;AAC7D,WAAO,QAAQ,aAAa,gBAAgB,aAAa;AAAA,EAC3D;AAEA,SAAO,QAAQ,aAAa;AAC9B;",
+  "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;",
   "names": []
 }

package/esm/charts/core/components/sparkline-display/utils/get-context-value-layout.js

@@ -5,6 +5,10 @@ import {
 import { calculateWidth } from "../../text-ellipsis/truncate-string.js";
 import {
   CONTEXT_VALUE_MAX_WIDTH,
+  CONTEXT_VALUE_SIGN_COLUMN_HEIGHT_THRESHOLD,
+  CONTEXT_VALUE_SIGN_COLUMN_LARGE,
+  CONTEXT_VALUE_SIGN_COLUMN_SMALL,
+  CONTEXT_VALUE_TRAILING_PADDING,
   FONT_SIZE_BREAKING_POINT,
   NEGATIVE_SIGN
 } from "../constants.js";
@@ -21,25 +25,25 @@ function getContextValueLayout({
   const fontMap = containerHeight >= FONT_SIZE_BREAKING_POINT ? charsFontWidth12pixelsSize500Map : charsFontWidth9pixelsSize500Map;
   let contextValueWidth = labelsFixedWidth;
   if (contextValueWidth === void 0) {
+    const stripSign = (s) => s.startsWith(NEGATIVE_SIGN) ? s.slice(1) : s;
+    const maxDigitStr = stripSign(formattedContextMaxValue);
+    const minDigitStr = stripSign(formattedContextMinValue);
     const maxContextValueWidth = showContextValues ? Math.min(
-      Math.ceil(calculateWidth(formattedContextMaxValue, fontMap)),
+      Math.ceil(calculateWidth(maxDigitStr, fontMap)),
       CONTEXT_VALUE_MAX_WIDTH
     ) : 0;
     const minContextValueWidth = showContextValues ? Math.min(
-      Math.ceil(calculateWidth(formattedContextMinValue, fontMap)),
+      Math.ceil(calculateWidth(minDigitStr, fontMap)),
       CONTEXT_VALUE_MAX_WIDTH
     ) : 0;
-    contextValueWidth = Math.max(maxContextValueWidth, minContextValueWidth) + 3;
+    const signColumnReservation = showContextValues ? containerHeight > CONTEXT_VALUE_SIGN_COLUMN_HEIGHT_THRESHOLD ? CONTEXT_VALUE_SIGN_COLUMN_LARGE : CONTEXT_VALUE_SIGN_COLUMN_SMALL : 0;
+    contextValueWidth = Math.max(maxContextValueWidth, minContextValueWidth) + signColumnReservation + CONTEXT_VALUE_TRAILING_PADDING;
   }
-  const contextValuesOnlyPositiveValues = !formattedContextMaxValue.startsWith(NEGATIVE_SIGN) && !formattedContextMinValue.startsWith(NEGATIVE_SIGN);
-  const rightOffset = 0;
-  const chartLeftOffset = showContextValues && labelsAlignment === "left" ? contextValueWidth : rightOffset;
-  const labelsRightOffset = contextValuesOnlyPositiveValues && labelsAlignment !== "left" ? 6 : 0;
-  const chartWidth = showContextValues ? containerWidth - contextValueWidth - labelsRightOffset : containerWidth;
+  const chartLeftOffset = showContextValues && labelsAlignment === "left" ? contextValueWidth : 0;
+  const chartWidth = showContextValues ? containerWidth - contextValueWidth : containerWidth;
   return {
     fontSizePx,
     contextValueWidth,
-    contextValuesOnlyPositiveValues,
     chartLeftOffset,
     chartWidth
   };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/sparkline-display/utils/get-context-value-layout.ts"],
-  "sourcesContent": ["import {\n  charsFontWidth12pixelsSize500Map,\n  charsFontWidth9pixelsSize500Map,\n} from '../../text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../text-ellipsis/truncate-string.js';\nimport {\n  CONTEXT_VALUE_MAX_WIDTH,\n  FONT_SIZE_BREAKING_POINT,\n  NEGATIVE_SIGN,\n} from '../constants.js';\nimport type { SparklinLabelsAlignment } from '../types/sparkline-props.js';\n\ninterface GetContextValueLayoutProps {\n  containerHeight: number;\n  containerWidth: number;\n  showContextValues: boolean;\n  formattedContextMaxValue: string;\n  formattedContextMinValue: string;\n  labelsAlignment: SparklinLabelsAlignment;\n  labelsFixedWidth?: number;\n}\n\ninterface ContextValueLayout {\n  fontSizePx: string;\n  contextValueWidth: number;\n  contextValuesOnlyPositiveValues: boolean;\n  chartLeftOffset: number;\n  chartWidth: number;\n}\n\nexport function getContextValueLayout({\n  containerHeight,\n  containerWidth,\n  showContextValues,\n  formattedContextMaxValue,\n  formattedContextMinValue,\n  labelsAlignment,\n  labelsFixedWidth,\n}: GetContextValueLayoutProps): ContextValueLayout {\n  const fontSizePx =\n    containerHeight >= FONT_SIZE_BREAKING_POINT ? '12px' : '9px';\n\n  const fontMap =\n    containerHeight >= FONT_SIZE_BREAKING_POINT\n      ? charsFontWidth12pixelsSize500Map\n      : charsFontWidth9pixelsSize500Map;\n\n  let contextValueWidth = labelsFixedWidth;\n\n  if (contextValueWidth === undefined) {\n    const maxContextValueWidth = showContextValues\n      ? Math.min(\n          Math.ceil(calculateWidth(formattedContextMaxValue, fontMap)),\n          CONTEXT_VALUE_MAX_WIDTH,\n        )\n      : 0;\n\n    const minContextValueWidth = showContextValues\n      ? Math.min(\n          Math.ceil(calculateWidth(formattedContextMinValue, fontMap)),\n          CONTEXT_VALUE_MAX_WIDTH,\n        )\n      : 0;\n\n    contextValueWidth =\n      Math.max(maxContextValueWidth, minContextValueWidth) + 3;\n  }\n\n  const contextValuesOnlyPositiveValues =\n    !formattedContextMaxValue.startsWith(NEGATIVE_SIGN) &&\n    !formattedContextMinValue.startsWith(NEGATIVE_SIGN);\n\n  const rightOffset = 0;\n\n  const chartLeftOffset =\n    showContextValues && labelsAlignment === 'left'\n      ? contextValueWidth\n      : rightOffset;\n\n  const labelsRightOffset =\n    contextValuesOnlyPositiveValues && labelsAlignment !== 'left' ? 6 : 0;\n\n  const chartWidth = showContextValues\n    ? containerWidth - contextValueWidth - labelsRightOffset\n    : containerWidth;\n\n  return {\n    fontSizePx,\n    contextValueWidth,\n    contextValuesOnlyPositiveValues,\n    chartLeftOffset,\n    chartWidth,\n  };\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAqBA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmD;AACjD,QAAM,aACJ,mBAAmB,2BAA2B,SAAS;AAEzD,QAAM,UACJ,mBAAmB,2BACf,mCACA;AAEN,MAAI,oBAAoB;AAExB,MAAI,sBAAsB,QAAW;AACnC,UAAM,uBAAuB,oBACzB,KAAK;AAAA,MACH,KAAK,KAAK,eAAe,0BAA0B,OAAO,CAAC;AAAA,MAC3D;AAAA,IACF,IACA;AAEJ,UAAM,uBAAuB,oBACzB,KAAK;AAAA,MACH,KAAK,KAAK,eAAe,0BAA0B,OAAO,CAAC;AAAA,MAC3D;AAAA,IACF,IACA;AAEJ,wBACE,KAAK,IAAI,sBAAsB,oBAAoB,IAAI;AAAA,EAC3D;AAEA,QAAM,kCACJ,CAAC,yBAAyB,WAAW,aAAa,KAClD,CAAC,yBAAyB,WAAW,aAAa;AAEpD,QAAM,cAAc;AAEpB,QAAM,kBACJ,qBAAqB,oBAAoB,SACrC,oBACA;AAEN,QAAM,oBACJ,mCAAmC,oBAAoB,SAAS,IAAI;AAEtE,QAAM,aAAa,oBACf,iBAAiB,oBAAoB,oBACrC;AAEJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import {\n  charsFontWidth12pixelsSize500Map,\n  charsFontWidth9pixelsSize500Map,\n} from '../../text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../text-ellipsis/truncate-string.js';\nimport {\n  CONTEXT_VALUE_MAX_WIDTH,\n  CONTEXT_VALUE_SIGN_COLUMN_HEIGHT_THRESHOLD,\n  CONTEXT_VALUE_SIGN_COLUMN_LARGE,\n  CONTEXT_VALUE_SIGN_COLUMN_SMALL,\n  CONTEXT_VALUE_TRAILING_PADDING,\n  FONT_SIZE_BREAKING_POINT,\n  NEGATIVE_SIGN,\n} from '../constants.js';\nimport type { SparklinLabelsAlignment } from '../types/sparkline-props.js';\n\ninterface GetContextValueLayoutProps {\n  containerHeight: number;\n  containerWidth: number;\n  showContextValues: boolean;\n  formattedContextMaxValue: string;\n  formattedContextMinValue: string;\n  labelsAlignment: SparklinLabelsAlignment;\n  labelsFixedWidth?: number;\n}\n\ninterface ContextValueLayout {\n  fontSizePx: string;\n  contextValueWidth: number;\n  chartLeftOffset: number;\n  chartWidth: number;\n}\n\nexport function getContextValueLayout({\n  containerHeight,\n  containerWidth,\n  showContextValues,\n  formattedContextMaxValue,\n  formattedContextMinValue,\n  labelsAlignment,\n  labelsFixedWidth,\n}: GetContextValueLayoutProps): ContextValueLayout {\n  const fontSizePx =\n    containerHeight >= FONT_SIZE_BREAKING_POINT ? '12px' : '9px';\n\n  const fontMap =\n    containerHeight >= FONT_SIZE_BREAKING_POINT\n      ? charsFontWidth12pixelsSize500Map\n      : charsFontWidth9pixelsSize500Map;\n\n  let contextValueWidth = labelsFixedWidth;\n\n  if (contextValueWidth === undefined) {\n    const stripSign = (s: string) =>\n      s.startsWith(NEGATIVE_SIGN) ? s.slice(1) : s;\n    const maxDigitStr = stripSign(formattedContextMaxValue);\n    const minDigitStr = stripSign(formattedContextMinValue);\n\n    const maxContextValueWidth = showContextValues\n      ? Math.min(\n          Math.ceil(calculateWidth(maxDigitStr, fontMap)),\n          CONTEXT_VALUE_MAX_WIDTH,\n        )\n      : 0;\n\n    const minContextValueWidth = showContextValues\n      ? Math.min(\n          Math.ceil(calculateWidth(minDigitStr, fontMap)),\n          CONTEXT_VALUE_MAX_WIDTH,\n        )\n      : 0;\n\n    // Reserve sign-column space only when context values are shown; this keeps\n    // contextValueWidth at its minimal size (3 px) when values are hidden.\n    const signColumnReservation = showContextValues\n      ? containerHeight > CONTEXT_VALUE_SIGN_COLUMN_HEIGHT_THRESHOLD\n        ? CONTEXT_VALUE_SIGN_COLUMN_LARGE\n        : CONTEXT_VALUE_SIGN_COLUMN_SMALL\n      : 0;\n\n    contextValueWidth =\n      Math.max(maxContextValueWidth, minContextValueWidth) +\n      signColumnReservation +\n      CONTEXT_VALUE_TRAILING_PADDING;\n  }\n\n  const chartLeftOffset =\n    showContextValues && labelsAlignment === 'left' ? contextValueWidth : 0;\n\n  const chartWidth = showContextValues\n    ? containerWidth - contextValueWidth\n    : containerWidth;\n\n  return {\n    fontSizePx,\n    contextValueWidth,\n    chartLeftOffset,\n    chartWidth,\n  };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAoBA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmD;AACjD,QAAM,aACJ,mBAAmB,2BAA2B,SAAS;AAEzD,QAAM,UACJ,mBAAmB,2BACf,mCACA;AAEN,MAAI,oBAAoB;AAExB,MAAI,sBAAsB,QAAW;AACnC,UAAM,YAAY,CAAC,MACjB,EAAE,WAAW,aAAa,IAAI,EAAE,MAAM,CAAC,IAAI;AAC7C,UAAM,cAAc,UAAU,wBAAwB;AACtD,UAAM,cAAc,UAAU,wBAAwB;AAEtD,UAAM,uBAAuB,oBACzB,KAAK;AAAA,MACH,KAAK,KAAK,eAAe,aAAa,OAAO,CAAC;AAAA,MAC9C;AAAA,IACF,IACA;AAEJ,UAAM,uBAAuB,oBACzB,KAAK;AAAA,MACH,KAAK,KAAK,eAAe,aAAa,OAAO,CAAC;AAAA,MAC9C;AAAA,IACF,IACA;AAIJ,UAAM,wBAAwB,oBAC1B,kBAAkB,6CAChB,kCACA,kCACF;AAEJ,wBACE,KAAK,IAAI,sBAAsB,oBAAoB,IACnD,wBACA;AAAA,EACJ;AAEA,QAAM,kBACJ,qBAAqB,oBAAoB,SAAS,oBAAoB;AAExE,QAAM,aAAa,oBACf,iBAAiB,oBACjB;AAEJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/sparkline-display/utils/get-context-value-x-offset.js

@@ -1,6 +1,6 @@
 import {
   CONTEXT_VALUE_INDICATOR_X_OFFSET,
-  CONTEXT_VALUE_NEGATIVE_SIGN_X_OFFSET
+  CONTEXT_VALUE_SIGN_NUDGE_RIGHT
 } from "../constants.js";
 import { SparklineContainerHeight } from "../types/sparkline-container-height.js";
 const getContextValueXOffset = (isLeft, chartLeftOffset, labelWidth, dottedLineWidth, containerHeight, isSmallFontSize) => {
@@ -8,12 +8,14 @@ const getContextValueXOffset = (isLeft, chartLeftOffset, labelWidth, dottedLineW
   const signMarginAdjustment = isSmallFontSize ? 1 : 10;
   const textMarginAdjustment = isSmallFontSize ? 7 : 0;
   if (isLeft) {
-    const signXOffset2 = chartLeftOffset - labelWidth - CONTEXT_VALUE_INDICATOR_X_OFFSET + signWidth - signMarginAdjustment;
-    const textXOffset2 = chartLeftOffset - labelWidth - CONTEXT_VALUE_INDICATOR_X_OFFSET + signWidth + textMarginAdjustment;
-    return { signXOffset: signXOffset2, textXOffset: textXOffset2 };
+    const base = chartLeftOffset - labelWidth - CONTEXT_VALUE_INDICATOR_X_OFFSET + signWidth;
+    return {
+      signXOffset: base - signMarginAdjustment,
+      textXOffset: base + textMarginAdjustment
+    };
   }
   const textXOffset = dottedLineWidth + CONTEXT_VALUE_INDICATOR_X_OFFSET;
-  const signXOffset = dottedLineWidth - CONTEXT_VALUE_NEGATIVE_SIGN_X_OFFSET;
+  const signXOffset = textXOffset - signWidth - CONTEXT_VALUE_SIGN_NUDGE_RIGHT;
   return { signXOffset, textXOffset };
 };
 export {

package/esm/charts/core/components/sparkline-display/utils/get-context-value-x-offset.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/sparkline-display/utils/get-context-value-x-offset.ts"],
-  "sourcesContent": ["import {\n  CONTEXT_VALUE_INDICATOR_X_OFFSET,\n  CONTEXT_VALUE_NEGATIVE_SIGN_X_OFFSET,\n} from '../constants.js';\nimport { SparklineContainerHeight } from '../types/sparkline-container-height.js';\n\nexport interface ContextValuePositions {\n  signXOffset: number;\n  textXOffset: number;\n}\n\nexport const getContextValueXOffset = (\n  isLeft: boolean,\n  chartLeftOffset: number,\n  labelWidth: number,\n  dottedLineWidth: number,\n  containerHeight: SparklineContainerHeight,\n  isSmallFontSize: boolean,\n): ContextValuePositions => {\n  const signWidth =\n    containerHeight === SparklineContainerHeight.HEIGHT24 ? 4 : 6;\n  // For left-positioned values, we calculate offsets relative to the chart's left edge\n  // Base position starts at chartLeftOffset, then we subtract:\n  // - labelWidth: space taken by the label text\n  //\n  // signXOffset: Position for the negative sign (e.g., \"-\")\n  // We add signWidth to shift right, then subtract 4px for fine-tuning alignment\n  // textXOffset: Position for the numeric value text\n  // We add (signWidth + 6) to position the text after the sign with 6px gap\n\n  const signMarginAdjustment = isSmallFontSize ? 1 : 10;\n\n  const textMarginAdjustment = isSmallFontSize ? 7 : 0;\n\n  if (isLeft) {\n    const signXOffset =\n      chartLeftOffset -\n      labelWidth -\n      CONTEXT_VALUE_INDICATOR_X_OFFSET +\n      signWidth -\n      signMarginAdjustment;\n    const textXOffset =\n      chartLeftOffset -\n      labelWidth -\n      CONTEXT_VALUE_INDICATOR_X_OFFSET +\n      signWidth +\n      textMarginAdjustment;\n    return { signXOffset, textXOffset };\n  }\n\n  // For right-positioned values, offsets are relative to the dotted line\n  const textXOffset = dottedLineWidth + CONTEXT_VALUE_INDICATOR_X_OFFSET;\n  const signXOffset = dottedLineWidth - CONTEXT_VALUE_NEGATIVE_SIGN_X_OFFSET;\n\n  return { signXOffset, textXOffset };\n};\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAOlC,MAAM,yBAAyB,CACpC,QACA,iBACA,YACA,iBACA,iBACA,oBAC0B;AAC1B,QAAM,YACJ,oBAAoB,yBAAyB,WAAW,IAAI;AAU9D,QAAM,uBAAuB,kBAAkB,IAAI;AAEnD,QAAM,uBAAuB,kBAAkB,IAAI;AAEnD,MAAI,QAAQ;AACV,UAAMA,eACJ,kBACA,aACA,mCACA,YACA;AACF,UAAMC,eACJ,kBACA,aACA,mCACA,YACA;AACF,WAAO,EAAE,aAAAD,cAAa,aAAAC,aAAY;AAAA,EACpC;AAGA,QAAM,cAAc,kBAAkB;AACtC,QAAM,cAAc,kBAAkB;AAEtC,SAAO,EAAE,aAAa,YAAY;AACpC;",
-  "names": ["signXOffset", "textXOffset"]
+  "sourcesContent": ["import {\n  CONTEXT_VALUE_INDICATOR_X_OFFSET,\n  CONTEXT_VALUE_SIGN_NUDGE_RIGHT,\n} from '../constants.js';\nimport { SparklineContainerHeight } from '../types/sparkline-container-height.js';\n\nexport interface ContextValuePositions {\n  signXOffset: number;\n  textXOffset: number;\n}\n\nexport const getContextValueXOffset = (\n  isLeft: boolean,\n  chartLeftOffset: number,\n  labelWidth: number,\n  dottedLineWidth: number,\n  containerHeight: SparklineContainerHeight,\n  isSmallFontSize: boolean,\n): ContextValuePositions => {\n  // Sign glyph width: 4 px (HEIGHT24) or 6 px (larger containers).\n  const signWidth =\n    containerHeight === SparklineContainerHeight.HEIGHT24 ? 4 : 6;\n  // Pixel adjustments that align sign/text relative to the label edge per font size.\n  const signMarginAdjustment = isSmallFontSize ? 1 : 10;\n  const textMarginAdjustment = isSmallFontSize ? 7 : 0;\n\n  if (isLeft) {\n    const base =\n      chartLeftOffset -\n      labelWidth -\n      CONTEXT_VALUE_INDICATOR_X_OFFSET +\n      signWidth;\n    return {\n      signXOffset: base - signMarginAdjustment,\n      textXOffset: base + textMarginAdjustment,\n    };\n  }\n\n  // Right-positioned: offsets are relative to the dotted line end.\n  const textXOffset = dottedLineWidth + CONTEXT_VALUE_INDICATOR_X_OFFSET;\n  const signXOffset = textXOffset - signWidth - CONTEXT_VALUE_SIGN_NUDGE_RIGHT;\n\n  return { signXOffset, textXOffset };\n};\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAOlC,MAAM,yBAAyB,CACpC,QACA,iBACA,YACA,iBACA,iBACA,oBAC0B;AAE1B,QAAM,YACJ,oBAAoB,yBAAyB,WAAW,IAAI;AAE9D,QAAM,uBAAuB,kBAAkB,IAAI;AACnD,QAAM,uBAAuB,kBAAkB,IAAI;AAEnD,MAAI,QAAQ;AACV,UAAM,OACJ,kBACA,aACA,mCACA;AACF,WAAO;AAAA,MACL,aAAa,OAAO;AAAA,MACpB,aAAa,OAAO;AAAA,IACtB;AAAA,EACF;AAGA,QAAM,cAAc,kBAAkB;AACtC,QAAM,cAAc,cAAc,YAAY;AAE9C,SAAO,EAAE,aAAa,YAAY;AACpC;",
+  "names": []
 }

package/esm/charts/core/components/sparkline-display/utils/get-formatted-context-values.js

@@ -1,16 +1,22 @@
+import {
+  formatValue,
+  tickValueFormatter
+} from "../../../utils/format-value.js";
 import { getFormatter } from "../../../utils/get-formatter.js";
-import { getYAxisTickFormatter } from "../../axes/utils/tick-formatters.js";
 function getFormattedContextValues({
-  yScale,
   unit,
   formatter,
   domainValues
 }) {
   const resolvedFormatter = getFormatter(formatter);
-  const tickFormatter = getYAxisTickFormatter(yScale, unit, resolvedFormatter);
+  const contextFormatter = resolvedFormatter ?? formatValue;
+  const wrappedFormatter = tickValueFormatter(
+    (value) => contextFormatter(value, unit),
+    unit
+  );
   return {
-    formattedContextMaxValue: tickFormatter(domainValues.max),
-    formattedContextMinValue: tickFormatter(domainValues.min)
+    formattedContextMaxValue: wrappedFormatter(domainValues.max),
+    formattedContextMinValue: wrappedFormatter(domainValues.min)
   };
 }
 export {

package/esm/charts/core/components/sparkline-display/utils/get-formatted-context-values.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/sparkline-display/utils/get-formatted-context-values.ts"],
-  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { ChartUnit } from '../../../types/chart-unit.js';\nimport type { Formatter } from '../../../types/formatter.js';\nimport { getFormatter } from '../../../utils/get-formatter.js';\nimport { getYAxisTickFormatter } from '../../axes/utils/tick-formatters.js';\n\ninterface GetFormattedContextValuesProps {\n  yScale: ScaleLinear<number, number> | ScaleSymLog<number, number>;\n  unit: ChartUnit;\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  domainValues: { min: number; max: number };\n}\n\ninterface FormattedContextValues {\n  formattedContextMaxValue: string;\n  formattedContextMinValue: string;\n}\n\nexport function getFormattedContextValues({\n  yScale,\n  unit,\n  formatter,\n  domainValues,\n}: GetFormattedContextValuesProps): FormattedContextValues {\n  const resolvedFormatter = getFormatter(formatter);\n  const tickFormatter = getYAxisTickFormatter(yScale, unit, resolvedFormatter);\n\n  return {\n    formattedContextMaxValue: tickFormatter(domainValues.max),\n    formattedContextMinValue: tickFormatter(domainValues.min),\n  };\n}\n"],
-  "mappings": "AAUA,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AAc/B,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2D;AACzD,QAAM,oBAAoB,aAAa,SAAS;AAChD,QAAM,gBAAgB,sBAAsB,QAAQ,MAAM,iBAAiB;AAE3E,SAAO;AAAA,IACL,0BAA0B,cAAc,aAAa,GAAG;AAAA,IACxD,0BAA0B,cAAc,aAAa,GAAG;AAAA,EAC1D;AACF;",
+  "sourcesContent": ["import type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { ChartUnit } from '../../../types/chart-unit.js';\nimport type { Formatter } from '../../../types/formatter.js';\nimport {\n  formatValue,\n  tickValueFormatter,\n} from '../../../utils/format-value.js';\nimport { getFormatter } from '../../../utils/get-formatter.js';\n\ninterface GetFormattedContextValuesProps {\n  unit: ChartUnit;\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  domainValues: { min: number; max: number };\n}\n\ninterface FormattedContextValues {\n  formattedContextMaxValue: string;\n  formattedContextMinValue: string;\n}\n\nexport function getFormattedContextValues({\n  unit,\n  formatter,\n  domainValues,\n}: GetFormattedContextValuesProps): FormattedContextValues {\n  const resolvedFormatter = getFormatter(formatter);\n  const contextFormatter = resolvedFormatter ?? formatValue;\n  const wrappedFormatter = tickValueFormatter(\n    (value: number) => contextFormatter(value, unit),\n    unit,\n  );\n\n  return {\n    formattedContextMaxValue: wrappedFormatter(domainValues.max),\n    formattedContextMinValue: wrappedFormatter(domainValues.min),\n  };\n}\n"],
+  "mappings": "AAQA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAatB,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AACF,GAA2D;AACzD,QAAM,oBAAoB,aAAa,SAAS;AAChD,QAAM,mBAAmB,qBAAqB;AAC9C,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAkB,iBAAiB,OAAO,IAAI;AAAA,IAC/C;AAAA,EACF;AAEA,SAAO;AAAA,IACL,0BAA0B,iBAAiB,aAAa,GAAG;AAAA,IAC3D,0BAA0B,iBAAiB,aAAa,GAAG;AAAA,EAC7D;AACF;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import { isNumber } from "lodash-es";
 import { getScale } from "../../../utils/core-scale.js";
-const VERTICAL_PADDING = 3;
+const VERTICAL_PADDING = 4;
 const getSparklineYScale = (domainValues, height, yAxis, isBarVariant) => {
   const { min: dataMin, max: dataMax } = domainValues;
   const scaleType = yAxis.scale ?? "linear";

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 = 3;\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"],
+  "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;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._ix5ox20-3-2-1 {
+._ix5ox20-3-3-1 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,25 +9,25 @@
   text-decoration: inherit;
   width: 100%;
 }
-._ix5ox21-3-2-1 {
+._ix5ox21-3-3-1 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-._ix5ox21-3-2-1::after, ._ix5ox21-3-2-1::before {
+._ix5ox21-3-3-1::after, ._ix5ox21-3-3-1::before {
   content: "‎";
 }
-._ix5ox22-3-2-1 {
+._ix5ox22-3-3-1 {
   text-overflow: ellipsis;
 }
-._ix5ox24-3-2-1 {
+._ix5ox24-3-3-1 {
   position: relative;
   width: 100%;
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
 }
-._ix5ox24-3-2-1::after {
+._ix5ox24-3-3-1::after {
   content: attr(data-sourcetext) / "";
   color: transparent;
   display: table;
@@ -36,7 +36,7 @@
   user-select: none;
   overflow: hidden;
 }
-._ix5ox25-3-2-1 {
+._ix5ox25-3-3-1 {
   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-2-1", variantClassNames: { truncationMode: { start: "_ix5ox21-3-2-1", end: "_ix5ox22-3-2-1", middle: "_ix5ox23-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
-var truncationContainer = "_ix5ox24-3-2-1";
-var truncationText = "_ix5ox25-3-2-1";
+var ellipsis = _7a468({ defaultClassName: "_ix5ox20-3-3-1", variantClassNames: { truncationMode: { start: "_ix5ox21-3-3-1", end: "_ix5ox22-3-3-1", middle: "_ix5ox23-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
+var truncationContainer = "_ix5ox24-3-3-1";
+var truncationText = "_ix5ox25-3-3-1";
 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-2-1',variantClassNames:{truncationMode:{start:'_ix5ox21-3-2-1',end:'_ix5ox22-3-2-1',middle:'_ix5ox23-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var truncationContainer = '_ix5ox24-3-2-1';\nexport var truncationText = '_ix5ox25-3-2-1';"],
+  "sourcesContent": ["import './ChartTextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ellipsis = _7a468({defaultClassName:'_ix5ox20-3-3-1',variantClassNames:{truncationMode:{start:'_ix5ox21-3-3-1',end:'_ix5ox22-3-3-1',middle:'_ix5ox23-3-3-1'}},defaultVariants:{},compoundVariants:[]});\nexport var truncationContainer = '_ix5ox24-3-3-1';\nexport var truncationText = '_ix5ox25-3-3-1';"],
   "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/styles.css

@@ -1,43 +1,43 @@
-._18heesa0-3-2-1 {
+._18heesa0-3-3-1 {
   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-2-1 {
+._18heesa1-3-3-1 {
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa2-3-2-1 {
+._18heesa2-3-3-1 {
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa3-3-2-1 {
+._18heesa3-3-3-1 {
   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-2-1 {
+._18heesa4-3-3-1 {
   transform: scaleX(-1) translateX(-100%);
 }
-._18heesa5-3-2-1 {
+._18heesa5-3-3-1 {
   transform: none;
 }
-._18heesa6-3-2-1 {
+._18heesa6-3-3-1 {
   transform: rotate(-90deg) scaleX(-1);
 }
-._18heesa7-3-2-1 {
+._18heesa7-3-3-1 {
   transform: rotate(-90deg) translateX(-100%);
 }
-._18heesa8-3-2-1 {
+._18heesa8-3-3-1 {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }
-._18heesa9-3-2-1 {
+._18heesa9-3-3-1 {
   flex: 1;
   margin-right: var(--dt-spacings-size-8, 8px);
 }
-._18heesaa-3-2-1 {
+._18heesaa-3-3-1 {
   min-width: 24px;
   display: flex;
   align-items: center;
@@ -51,6 +51,6 @@
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   word-break: break-word;
 }
-._18heesab-3-2-1 {
+._18heesab-3-3-1 {
   overflow: hidden;
 }

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

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

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 = '_18heesab-3-2-1';\nexport var nameValueContainer = '_18heesa8-3-2-1';\nexport var nameWithSpace = '_18heesa9-3-2-1';\nexport var valueChip = '_18heesaa-3-2-1';\nexport var wrapper = _7a468({defaultClassName:'_18heesa0-3-2-1',variantClassNames:{borderArea:{bothBorders:'_18heesa1-3-2-1',leftBorder:'_18heesa2-3-2-1',rightBorder:'_18heesa3-3-2-1'},layoutType:{'vertical-flip':'_18heesa4-3-2-1','vertical-no-flip':'_18heesa5-3-2-1','horizontal-flip':'_18heesa6-3-2-1','horizontal-no-flip':'_18heesa7-3-2-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bodyOverflowOverwrite = '_18heesab-3-3-1';\nexport var nameValueContainer = '_18heesa8-3-3-1';\nexport var nameWithSpace = '_18heesa9-3-3-1';\nexport var valueChip = '_18heesaa-3-3-1';\nexport var wrapper = _7a468({defaultClassName:'_18heesa0-3-3-1',variantClassNames:{borderArea:{bothBorders:'_18heesa1-3-3-1',leftBorder:'_18heesa2-3-3-1',rightBorder:'_18heesa3-3-3-1'},layoutType:{'vertical-flip':'_18heesa4-3-3-1','vertical-no-flip':'_18heesa5-3-3-1','horizontal-flip':'_18heesa6-3-3-1','horizontal-no-flip':'_18heesa7-3-3-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB;AAC5B,IAAI,qBAAqB;AACzB,IAAI,gBAAgB;AACpB,IAAI,YAAY;AAChB,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,58 +1,58 @@
-._1x31hou0-3-2-1 {
+._1x31hou0-3-3-1 {
   padding: var(--dt-spacings-size-4, 4px);
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   width: fit-content;
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1x31hou1-3-2-1 {
+._1x31hou1-3-3-1 {
   visibility: visible;
 }
-._1x31hou2-3-2-1 {
+._1x31hou2-3-3-1 {
   visibility: hidden;
 }
-._1x31hou3-3-2-1 {
+._1x31hou3-3-3-1 {
   padding: 0;
   box-shadow: none;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._1x31hou4-3-2-1 {
+._1x31hou4-3-3-1 {
   background-color: transparent;
   cursor: grab;
 }
-._1x31hou5-3-2-1 {
+._1x31hou5-3-3-1 {
   pointer-events: auto;
 }
-._1x31hou6-3-2-1 {
+._1x31hou6-3-3-1 {
   position: relative;
 }
-._1x31hou7-3-2-1 {
+._1x31hou7-3-3-1 {
   position: absolute;
 }
-body[data-scroll-locked] ._1x31hou8-3-2-1 * {
+body[data-scroll-locked] ._1x31hou8-3-3-1 * {
   pointer-events: none;
 }
-body[data-scroll-locked] ._1x31hou8-3-2-1 button[aria-expanded="true"] {
+body[data-scroll-locked] ._1x31hou8-3-3-1 button[aria-expanded="true"] {
   pointer-events: all;
 }
-._1x31hou9-3-2-1 {
+._1x31hou9-3-3-1 {
   pointer-events: none;
 }
-._1x31houa-3-2-1 {
+._1x31houa-3-3-1 {
   position: relative;
 }
-._1x31houb-3-2-1 {
+._1x31houb-3-3-1 {
   position: absolute;
 }
-._1x31houc-3-2-1 {
+._1x31houc-3-3-1 {
   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-2-1 {
+._1x31houd-3-3-1 {
   margin: 0 var(--dt-spacings-size-4, 4px);
 }
-._1x31houe-3-2-1 {
+._1x31houe-3-3-1 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }