@splunk/visualizations 28.4.0 → 28.5.1

package/FillerGauge.js

@@ -985,7 +985,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.4.0 - 002bd482f"
+  "data-splunk-visualization-version": "28.5.1 - 617766eb3"
 })`
     position: relative;
     width: 100%;
@@ -1075,7 +1075,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.4.0 - 002bd482f",
+        "data-splunk-visualization-version": "28.5.1 - 617766eb3",
         width,
         height,
         backgroundColor
@@ -1701,16 +1701,14 @@ var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
       splitDataSources[val] = (0, lodash_exports.cloneDeep)(
         (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
       );
-      splitDataSources[val].primary.data.fields = [
-        { name: fields[0].name },
-        ...dataSourceKeys.map((k) => ({
-          name: k
-        }))
-      ];
+      splitDataSources[val].primary.data.fields = [{ name: fields[0].name }];
       splitDataSources[val].primary.data.columns = [[...columns[0]]];
       dataSourceKeys.forEach((dsKey) => {
         fields.forEach((field, idx) => {
           if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
+            splitDataSources[val].primary.data.fields.push({
+              name: dsKey
+            });
             splitDataSources[val].primary.data.columns.push([...columns[idx]]);
           }
         });
@@ -2011,25 +2009,27 @@ var parseAxisValue = (val) => {
   const num = typeof val === "number" ? val : Number.parseFloat(val);
   return Number.isNaN(num) ? void 0 : num;
 };
-var SideLegendWidth = 75;
-var SeriesCompareLegendWidth = 200;
+var parseXAxisLineVisibility = (visibility) => {
+  if (visibility === "hide") return false;
+  if (visibility === "show") return true;
+  return void 0;
+};
 var getLegend = (props) => {
   const legendPlacement = props == null ? void 0 : props.legendDisplay;
-  const { isSeriesCompare } = props;
+  const { isSeriesCompare, legendTruncation } = props;
   const commonLegendProps = {
     center: true,
     fontSize: 12,
     largerTiles: true,
-    hideSeriesValue: !isSeriesCompare
+    hideSeriesValue: !isSeriesCompare,
     // Show values if in seriesCompare mode
+    legendTruncation
   };
   switch (legendPlacement) {
     case "off":
       return false;
     case "left":
-      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({
-        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
-      }, commonLegendProps));
+      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({}, commonLegendProps));
     case "bottom":
       return (0, visualization_canvas_exports.BottomLegendFactory)(__spreadValues({
         wrap: true
@@ -2039,9 +2039,7 @@ var getLegend = (props) => {
         wrap: true
       }, commonLegendProps));
     default:
-      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
-        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
-      }, commonLegendProps));
+      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({}, commonLegendProps));
   }
 };
 var getComputedAxisTitles = (inputAxisTitle, fields, axisTitleVisibility) => {
@@ -2102,9 +2100,7 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibilit
   if (yAxisAbbreviation !== "none") {
     yConfig.y.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1);
   }
-  if (yAxisAbbreviation === "none") {
-    yConfig.y.width = 55;
-  } else {
+  if (yAxisAbbreviation !== "none") {
     yConfig.y.width = label && label.length > 0 ? 30 : 10;
   }
   if (yAxisLabelVisibility === "hide") {
@@ -2127,6 +2123,7 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   y2Config.y2.type = scaleType;
   if (axisAbbreviation !== "none") {
     y2Config.y2.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1, roundAxisLabelsToInteger);
+    y2Config.y2.width = label && label.length > 0 ? 50 : 10;
   } else if (roundAxisLabelsToInteger) {
     y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
   }
@@ -2142,7 +2139,7 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField, stepPosition, stepPositionsByField) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -2169,6 +2166,8 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
       );
       if (shouldAssignToY2) {
         seriesConfig[field].overrides.scale = "y2";
+      } else {
+        seriesConfig[field].overrides.scale = "y";
       }
     }
     if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
@@ -2181,6 +2180,11 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
     if (fieldDashStyle) {
       seriesConfig[field].lineDashStyle = fieldDashStyle;
     }
+    const hasFieldStepPosition = Object.hasOwn(stepPositionsByField || {}, field);
+    const fieldStepPosition = hasFieldStepPosition ? stepPositionsByField == null ? void 0 : stepPositionsByField[field] : stepPosition;
+    if (fieldStepPosition && fieldStepPosition !== "off") {
+      seriesConfig[field].stepPosition = fieldStepPosition;
+    }
     if (replaceNullsWithZero !== void 0) {
       seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
     }
@@ -2405,6 +2409,9 @@ var TimeSeriesChartWrapper = (props) => {
     backgroundColor,
     defaultFontColor,
     additionalTooltipValues,
+    xAxisLineVisibility: xAxisLineVisibility,
+    yAxisLineVisibility,
+    y2AxisLineVisibility,
     showYAxisWithZero: showYAxisWithZeroFromProps,
     showY2AxisWithZero: showY2AxisWithZeroFromProps
   } = _a, otherOptions = __objRest(_a, [
@@ -2428,6 +2435,10 @@ var TimeSeriesChartWrapper = (props) => {
     "backgroundColor",
     "defaultFontColor",
     "additionalTooltipValues",
+    // Extract axis line visibility options from props
+    "xAxisLineVisibility",
+    "yAxisLineVisibility",
+    "y2AxisLineVisibility",
     // Extract showYAxisWithZero directly from props for accelerated render mode
     "showYAxisWithZero",
     "showY2AxisWithZero"
@@ -2440,6 +2451,7 @@ var TimeSeriesChartWrapper = (props) => {
     fieldColors,
     legendLabels: legendLabelsStr,
     legendMode,
+    legendTruncation,
     "axisTitleX.text": xAxisTitleText,
     "axisTitleY.text": yAxisTitleText,
     "axisTitleY2.text": y2AxisTitleText,
@@ -2448,6 +2460,7 @@ var TimeSeriesChartWrapper = (props) => {
     "axisTitleY2.visibility": y2AxisTitleVisibility,
     "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
     "axisLabelsX.majorLabelStyle.rotation": xAxisLabelRotation,
+    "axisLabelsX.maxLabelParts": xAxisMaxLabelParts,
     "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
     "axisLabelsY.majorUnit": yAxisMajorUnitFromSimpleXML,
     "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
@@ -2465,6 +2478,8 @@ var TimeSeriesChartWrapper = (props) => {
     lineWidth,
     lineDashStyle,
     fieldDashStyles: lineDashStylesByFieldStr,
+    stepPosition,
+    fieldStepPositions: stepPositionsByFieldStr,
     yAxisMin: yAxisMinRaw,
     yAxisMax: yAxisMaxRaw,
     y2AxisMin: y2AxisMinRaw,
@@ -2475,6 +2490,8 @@ var TimeSeriesChartWrapper = (props) => {
     showYMinorGridLines,
     showY2MinorGridLines,
     showLineSmoothing,
+    xAxisMajorTickVisibility,
+    xAxisMajorTickSize,
     yAxisMajorTickVisibility,
     y2AxisMajorTickVisibility,
     yAxisMajorTickSize,
@@ -2491,10 +2508,14 @@ var TimeSeriesChartWrapper = (props) => {
   const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
   const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
   const showY2AxisWithZero = showY2AxisWithZeroFromProps != null ? showY2AxisWithZeroFromProps : showY2AxisWithZeroFromOptions;
+  const showXMajorTicks = xAxisMajorTickVisibility !== "hide";
   const showYMajorTicks = yAxisMajorTickVisibility === "show";
   const showY2MajorTicks = y2AxisMajorTickVisibility === "show";
   const showYMinorTicks = yAxisMinorTickVisibility === "show";
   const showY2MinorTicks = y2AxisMinorTickVisibility === "show";
+  const showXAxisLine = parseXAxisLineVisibility(xAxisLineVisibility);
+  const showYAxisLine = yAxisLineVisibility === "show";
+  const showY2AxisLine = y2AxisLineVisibility === "show";
   const yAxisMin = parseAxisValue(yAxisMinRaw);
   const yAxisMax = parseAxisValue(yAxisMaxRaw);
   const y2AxisMin = parseAxisValue(y2AxisMinRaw);
@@ -2509,13 +2530,15 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
-  const yAxisMajorTickSizeNum = yAxisMajorTickSize ? Number(yAxisMajorTickSize) : void 0;
-  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize ? Number(y2AxisMajorTickSize) : void 0;
-  const yAxisMinorTickSizeNum = yAxisMinorTickSize ? Number(yAxisMinorTickSize) : void 0;
-  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize ? Number(y2AxisMinorTickSize) : void 0;
+  const xAxisMajorTickSizeNum = xAxisMajorTickSize != null ? Number(xAxisMajorTickSize) : void 0;
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize != null ? Number(yAxisMajorTickSize) : void 0;
+  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize != null ? Number(y2AxisMajorTickSize) : void 0;
+  const yAxisMinorTickSizeNum = yAxisMinorTickSize != null ? Number(yAxisMinorTickSize) : void 0;
+  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize != null ? Number(y2AxisMinorTickSize) : void 0;
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
   const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
+  const stepPositionsByField = stepPositionsByFieldStr ? JSON.parse(stepPositionsByFieldStr) : void 0;
   const legendLabels = parseArrayOption(legendLabelsStr);
   const bgColor = backgroundColor || bgColorFromOptions;
   const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
@@ -2603,7 +2626,9 @@ var TimeSeriesChartWrapper = (props) => {
       nullValueMode,
       markerDisplay,
       lineDashStyle,
-      lineDashStylesByField
+      lineDashStylesByField,
+      stepPosition,
+      stepPositionsByField
     ),
     [
       yFields,
@@ -2614,7 +2639,9 @@ var TimeSeriesChartWrapper = (props) => {
       nullValueMode,
       markerDisplay,
       lineDashStyle,
-      lineDashStylesByField
+      lineDashStylesByField,
+      stepPosition,
+      stepPositionsByField
     ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
@@ -2629,9 +2656,14 @@ var TimeSeriesChartWrapper = (props) => {
     () => __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig),
     [xScaleConfig, yScaleConfig, y2ScaleConfig]
   );
+  const isSeriesCompare = legendMode === "seriesCompare";
   const legend = (0, react_exports.useMemo)(
-    () => getLegend({ legendDisplay, isSeriesCompare: legendMode === "seriesCompare" }),
-    [legendDisplay, legendMode]
+    () => getLegend({
+      legendDisplay: isSeriesCompare && legendDisplay !== "off" ? "right" : legendDisplay,
+      isSeriesCompare,
+      legendTruncation
+    }),
+    [legendDisplay, isSeriesCompare, legendTruncation]
   );
   const handleChartClick = react_exports.useCallback(
     (event) => {
@@ -2736,6 +2768,7 @@ var TimeSeriesChartWrapper = (props) => {
         seriesConfig: seriesOverrides,
         legend,
         legendLabels,
+        legendTruncation,
         isSeriesCompare: legendMode === "seriesCompare",
         maxSeriesFocus: legendMode === "seriesCompare" ? 0 : void 0,
         scaleConfig,
@@ -2757,6 +2790,8 @@ var TimeSeriesChartWrapper = (props) => {
         showY2MinorGridLines,
         showLineSmoothing,
         dataValuesDisplay,
+        showXMajorTicks,
+        xAxisMajorTickSize: xAxisMajorTickSizeNum,
         showYMajorTicks,
         showY2MajorTicks,
         yAxisMajorTickSize: yAxisMajorTickSizeNum,
@@ -2768,7 +2803,11 @@ var TimeSeriesChartWrapper = (props) => {
         yAxisMinorTickSize: yAxisMinorTickSizeNum,
         y2AxisMinorTickSize: y2AxisMinorTickSizeNum,
         showYAxisWithZero,
-        showY2AxisWithZero
+        showY2AxisWithZero,
+        showXAxisLine,
+        showYAxisLine,
+        showY2AxisLine,
+        xAxisMaxLabelParts
       }
     ));
   }, [
@@ -2783,6 +2822,7 @@ var TimeSeriesChartWrapper = (props) => {
     seriesOverrides,
     legend,
     legendLabels,
+    legendTruncation,
     scaleConfig,
     onClick,
     handleChartClick,
@@ -2801,6 +2841,8 @@ var TimeSeriesChartWrapper = (props) => {
     showY2MinorGridLines,
     showLineSmoothing,
     dataValuesDisplay,
+    showXMajorTicks,
+    xAxisMajorTickSizeNum,
     showYMajorTicks,
     showY2MajorTicks,
     yAxisMajorTickSizeNum,
@@ -2813,7 +2855,11 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMinorTickSizeNum,
     showYAxisWithZero,
     showY2AxisWithZero,
-    legendMode
+    showXAxisLine,
+    showYAxisLine,
+    showY2AxisLine,
+    legendMode,
+    xAxisMaxLabelParts
   ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
@@ -3137,6 +3183,10 @@ var colorConstants_default = "default" in defaultImport33 ? defaultImport33.defa
 // src/common/gaugeUtils.ts
 var GAUGE_THICKNESS = 50;
 var FILL_THICKNESS = 38;
+var DEFAULT_NUM_OF_TICKS = 5;
+var MAX_TICK_LABEL_DECIMAL_PLACES = 5;
+var MAX_VALUE_LABEL_DIGITS_WITHOUT_PERCENT = 6;
+var MAX_VALUE_LABEL_DIGITS_WITH_PERCENT = 5;
 var getGaugeWidth = ({ containerWidth, orientation }) => orientation === "vertical" ? GAUGE_THICKNESS : containerWidth * 0.8;
 var getGaugeHeight = ({ containerHeight, orientation }) => orientation === "vertical" ? containerHeight * 0.8 : GAUGE_THICKNESS;
 var getGaugeLength = ({ containerWidth, containerHeight, orientation }) => orientation === "vertical" ? getGaugeHeight({ containerHeight, orientation }) : getGaugeWidth({ containerWidth, orientation });
@@ -3260,6 +3310,137 @@ var getFillerGaugeValueMarkerPositions = ({ fillBarX, fillBarY, fillBarLength, o
     valueMarkerY
   };
 };
+var getDecimalPlaces = (value) => {
+  const numericValue = Number(value);
+  if (!Number.isFinite(numericValue)) {
+    return 0;
+  }
+  const fractionPart = numericValue.toString().split(".")[1];
+  return fractionPart ? fractionPart.length : 0;
+};
+var getUniqueDecimalPlaces = ({
+  values,
+  minimumDecimalPlaces
+}) => {
+  if (values.length <= 1) {
+    return minimumDecimalPlaces;
+  }
+  for (let decimalPlaces = minimumDecimalPlaces; decimalPlaces <= MAX_TICK_LABEL_DECIMAL_PLACES; decimalPlaces += 1) {
+    const roundedValues = values.map((value) => Number(value.toFixed(decimalPlaces)));
+    if (new Set(roundedValues).size === roundedValues.length) {
+      return decimalPlaces;
+    }
+  }
+  return MAX_TICK_LABEL_DECIMAL_PLACES;
+};
+var getPercentageFromRange = ({ value, min, range: range2 }) => {
+  if (range2 === 0) {
+    return 0;
+  }
+  return (value - min) / range2 * 100;
+};
+var getNumOfTicks = ({
+  min,
+  max,
+  majorUnit,
+  usePercentageRange
+}) => {
+  const range2 = max - min;
+  const majorUnitNumber = Number(majorUnit);
+  const isAutoMajorUnit = majorUnit === "auto" || Number.isNaN(majorUnitNumber) || majorUnitNumber <= 0;
+  let numOfTicks = DEFAULT_NUM_OF_TICKS;
+  if (!isAutoMajorUnit) {
+    numOfTicks = usePercentageRange ? 100 / majorUnitNumber : range2 / majorUnitNumber;
+  }
+  return { numOfTicks, isAutoMajorUnit, majorUnitNumber };
+};
+var getTickLabelFormatter = ({
+  min,
+  max,
+  majorUnit,
+  usePercentageRange
+}) => {
+  const range2 = max - min;
+  const { numOfTicks, isAutoMajorUnit, majorUnitNumber } = getNumOfTicks({
+    min,
+    max,
+    majorUnit,
+    usePercentageRange
+  });
+  const numericStep = range2 / numOfTicks;
+  const tickValues = [];
+  for (let i = 0; i <= numOfTicks; i += 1) {
+    tickValues.push(min + numericStep * i);
+  }
+  if (!Number.isInteger(numOfTicks)) {
+    tickValues.push(max);
+  }
+  const minimumNumericDecimalPlaces = Math.min(
+    MAX_TICK_LABEL_DECIMAL_PLACES,
+    Math.max(
+      getDecimalPlaces(min),
+      getDecimalPlaces(max),
+      isAutoMajorUnit ? 0 : getDecimalPlaces(majorUnitNumber)
+    )
+  );
+  const numericLabelDecimalPlaces = getUniqueDecimalPlaces({
+    values: tickValues,
+    minimumDecimalPlaces: minimumNumericDecimalPlaces
+  });
+  const percentageLabelDecimalPlaces = getUniqueDecimalPlaces({
+    values: tickValues.map((value) => getPercentageFromRange({ value, min, range: range2 })),
+    minimumDecimalPlaces: 0
+  });
+  const formatTickLabel = (value) => {
+    if (usePercentageRange) {
+      const percentageValue = getPercentageFromRange({ value, min, range: range2 });
+      return `${percentageValue.toFixed(percentageLabelDecimalPlaces)}%`;
+    }
+    const numericLabel = value.toFixed(numericLabelDecimalPlaces);
+    if (numericLabel.includes(".")) {
+      return numericLabel;
+    }
+    return (0, numberUtils_exports.formatNumber)(Number(numericLabel), 0, {
+      useThousandSeparators: true,
+      useTrendUnits: true
+    }).replace(/k$/, "K");
+  };
+  return { numOfTicks, numericStep, formatTickLabel };
+};
+var getDigitsBeforeDecimal = (numericValue) => Math.abs(Math.trunc(Number(numericValue))).toString().length;
+var getCappedDecimalPlaces = (numericValue, rawDecimalPlaces, maxDigits) => {
+  const digitsBeforeDecimal = getDigitsBeforeDecimal(numericValue);
+  const maxDecimalPlaces = Math.max(0, maxDigits - digitsBeforeDecimal);
+  return Math.min(rawDecimalPlaces, maxDecimalPlaces);
+};
+var formatGaugeValueLabel = ({
+  value,
+  min,
+  max,
+  usePercentageValue
+}) => {
+  const numericValue = Number(value);
+  const range2 = max - min || 1;
+  const percentageValue = getPercentageFromRange({ value: numericValue, min, range: range2 });
+  const trendFormatOptions = {
+    useThousandSeparators: true,
+    useTrendUnits: true
+  };
+  if (usePercentageValue) {
+    const percentageDecimalPlaces = getCappedDecimalPlaces(
+      percentageValue,
+      2,
+      MAX_VALUE_LABEL_DIGITS_WITH_PERCENT
+    );
+    return `${(0, numberUtils_exports.formatNumber)(percentageValue, percentageDecimalPlaces, trendFormatOptions)}%`;
+  }
+  const valueDecimalPlaces = getCappedDecimalPlaces(
+    numericValue,
+    getDecimalPlaces(numericValue),
+    MAX_VALUE_LABEL_DIGITS_WITHOUT_PERCENT
+  );
+  return (0, numberUtils_exports.formatNumber)(numericValue, valueDecimalPlaces, trendFormatOptions);
+};
 var gaugeOptionsMapping = {
   majorTickInterval: "majorUnit",
   gaugeRanges: "ranges"
@@ -3288,9 +3469,9 @@ var mapValueLabelDisplay = (labelOrValue, options) => {
 var convertToGaugeProperties = (originalOptions) => (0, lodash_exports.chain)(mapToOldKey(originalOptions)).thru((options) => mapValueLabelDisplay("label", options)).thru((options) => mapValueLabelDisplay("value", options)).value();
 
 // src/common/GaugeMajorTicks.jsx
-var DEFAULT_NUM_OF_TICKS = 5;
 var TICK_LENGTH_DELTA = 5;
 var TICK_LABEL_PADDING_FACTOR = 3.2;
+var VERTICAL_START_ANCHOR_OFFSET = 8;
 var MajorTickLine = styled_components_default.line`
     stroke: ${(props) => props.majorTickStrokeColor};
     stroke-width: 2px;
@@ -3303,7 +3484,7 @@ var MajorTickLabel = styled_components_default.text`
         sans-serif;
     line-height: 19px;
     fill: ${(props) => props.majorTickFillColor};
-    text-anchor: middle;
+    text-anchor: ${(props) => props.textAnchor};
     text-align: center;
 `;
 var MajorTick = ({
@@ -3316,6 +3497,7 @@ var MajorTick = ({
   label,
   labelX,
   labelY,
+  textAnchor = "middle",
   majorTickStrokeColor,
   majorTickFillColor
 }) => /* @__PURE__ */ react_default.createElement("g", null, /* @__PURE__ */ react_default.createElement(
@@ -3334,13 +3516,11 @@ var MajorTick = ({
   {
     x: labelX,
     y: labelY,
+    textAnchor,
     majorTickFillColor,
     "data-test": "major-tick-label"
   },
-  (0, numberUtils_exports.isNumerial)(label) ? (0, numberUtils_exports.formatNumber)(label, 0, {
-    useThousandSeparators: true,
-    useTrendUnits: true
-  }) : label
+  label
 ));
 MajorTick.propTypes = {
   index: prop_types_default.number,
@@ -3352,6 +3532,7 @@ MajorTick.propTypes = {
   label: prop_types_default.oneOfType([prop_types_default.string, prop_types_default.number]),
   labelX: prop_types_default.number,
   labelY: prop_types_default.number,
+  textAnchor: prop_types_default.string,
   majorTickStrokeColor: prop_types_default.string,
   majorTickFillColor: prop_types_default.string
 };
@@ -3368,7 +3549,7 @@ var positionMajorTick = ({ width, height, startX, startY, orientation, numOfTick
     y1 = y;
     x2 += width + TICK_LENGTH_DELTA;
     y2 = y;
-    labelX += width + TICK_LENGTH_DELTA * TICK_LABEL_PADDING_FACTOR;
+    labelX += width + TICK_LENGTH_DELTA * TICK_LABEL_PADDING_FACTOR - VERTICAL_START_ANCHOR_OFFSET;
     labelY = y;
   } else {
     const x = width / numOfTicks * i + startX;
@@ -3397,10 +3578,17 @@ var MajorTicks = (_a) => {
     majorTickFillColor,
     majorTickStrokeColor
   } = props;
-  const range2 = max - min;
-  const numOfTicks = majorUnit === "auto" || Number.isNaN(Number(majorUnit)) || majorUnit <= 0 ? DEFAULT_NUM_OF_TICKS : range2 / majorUnit;
+  const isVertical = orientation === "vertical";
+  const textAnchor = isVertical ? "start" : "middle";
+  const { numOfTicks, numericStep, formatTickLabel } = getTickLabelFormatter({
+    min,
+    max,
+    majorUnit,
+    usePercentageRange
+  });
   const majorTicks = [];
   for (let i = 0; i <= numOfTicks; i += 1) {
+    const tickValue = min + numericStep * i;
     const { x1, y1, x2, y2, labelX, labelY } = positionMajorTick({
       width,
       height,
@@ -3410,7 +3598,7 @@ var MajorTicks = (_a) => {
       numOfTicks,
       i
     });
-    const label = usePercentageRange ? `${parseInt((i / numOfTicks - min / range2) * 100, 10)}%` : parseInt(min + range2 / numOfTicks * i, 10);
+    const label = formatTickLabel(tickValue);
     majorTicks.push(
       /* @__PURE__ */ react_default.createElement(
         MajorTick,
@@ -3425,6 +3613,7 @@ var MajorTicks = (_a) => {
           label,
           labelX,
           labelY,
+          textAnchor,
           majorTickFillColor,
           majorTickStrokeColor
         }
@@ -3453,9 +3642,10 @@ var MajorTicks = (_a) => {
           x2,
           y2,
           showLabels,
-          label: usePercentageRange ? "100%" : max,
+          label: formatTickLabel(max),
           labelX,
           labelY,
+          textAnchor,
           majorTickFillColor,
           majorTickStrokeColor
         }
@@ -3610,10 +3800,7 @@ var ValueMarker = (_a) => {
       valueMarkerLabelFillColor,
       "aria-label": (0, format_exports.sprintf)((0, i18n_exports._)("Marker gauge value: %s"), value)
     },
-    usePercentageValue ? `${(value / (max - min) * 100).toFixed(2)}%` : (0, numberUtils_exports.formatNumber)(value, 0, {
-      useThousandSeparators: true,
-      useTrendUnits: true
-    })
+    formatGaugeValueLabel({ value, min, max, usePercentageValue })
   )));
 };
 ValueMarker.propTypes = {