add back ticks on bands (elastic#142702)

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx

@@ -211,7 +211,7 @@ describe('GaugeComponent', function () {
   });
 
   describe('ticks and color bands', () => {
-    it('sets proper color bands for values smaller than maximum', () => {
+    it('sets proper color bands and ticks on color bands for values smaller than maximum', () => {
       const palette = {
         type: 'palette' as const,
         name: 'custom',
@@ -236,6 +236,7 @@ describe('GaugeComponent', function () {
         },
       } as GaugeRenderProps;
       const goal = shallowWithIntl(<GaugeComponent {...customProps} />).find(Goal);
+      expect(goal.prop('ticks')).toEqual([0, 1, 2, 3, 4, 10]);
       expect(goal.prop('bands')).toEqual([0, 1, 2, 3, 4, 10]);
     });
     it('sets proper color bands if palette steps are smaller than minimum', () => {

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx

@@ -18,6 +18,8 @@ import {
   GaugeLabelMajorMode,
   GaugeLabelMajorModes,
   GaugeColorModes,
+  GaugeShapes,
+  GaugeTicksPositions,
 } from '../../common';
 import {
   getAccessorsFromArgs,
@@ -30,7 +32,7 @@ import {
 } from './utils';
 import { getIcons } from './utils/icons';
 import './index.scss';
-import { GaugeCentralMajorMode } from '../../common/types';
+import { GaugeCentralMajorMode, GaugeTicksPosition } from '../../common/types';
 import { isBulletShape, isRoundShape } from '../../common/utils';
 
 import './gauge.scss';
@@ -135,6 +137,35 @@ const getPreviousSectionValue = (value: number, bands: number[]) => {
   return prevSectionValue;
 };
 
+function getTicksLabels(baseStops: number[]) {
+  const tenPercentRange = (Math.max(...baseStops) - Math.min(...baseStops)) * 0.1;
+  const lastIndex = baseStops.length - 1;
+  return baseStops.filter((stop, i) => {
+    if (i === 0 || i === lastIndex) {
+      return true;
+    }
+
+    return !(
+      stop - baseStops[i - 1] < tenPercentRange || baseStops[lastIndex] - stop < tenPercentRange
+    );
+  });
+}
+
+function getTicks(
+  ticksPosition: GaugeTicksPosition,
+  range: [number, number],
+  colorBands?: number[],
+  percentageMode?: boolean
+) {
+  if (ticksPosition === GaugeTicksPositions.HIDDEN) {
+    return [];
+  }
+
+  if (ticksPosition === GaugeTicksPositions.BANDS && colorBands) {
+    return colorBands && getTicksLabels(colorBands);
+  }
+}
+
 export const GaugeComponent: FC<GaugeRenderProps> = memo(
   ({ data, args, uiState, formatFactory, paletteService, chartsThemeService, renderComplete }) => {
     const {
@@ -146,6 +177,7 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
       labelMajorMode,
       centralMajor,
       centralMajorMode,
+      ticksPosition,
       commonLabel,
     } = args;
 
@@ -294,6 +326,12 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
       actualValue = actualValueToPercentsLegacy(palette?.params as CustomPaletteState, actualValue);
     }
 
+    const totalTicks = getTicks(ticksPosition, [min, max], bands, args.percentageMode);
+    const ticks =
+      totalTicks && gaugeType === GaugeShapes.CIRCLE
+        ? totalTicks.slice(0, totalTicks.length - 1)
+        : totalTicks;
+
     const goalConfig = getGoalConfig(gaugeType);
 
     const labelMajorTitle = getTitle(labelMajorMode, labelMajor, metricColumn?.name);
@@ -329,6 +367,7 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
             tickValueFormatter={({ value: tickValue }) => tickFormatter.convert(tickValue)}
             tooltipValueFormatter={(tooltipValue) => tickFormatter.convert(tooltipValue)}
             bands={bands}
+            ticks={ticks}
             domain={{ min, max }}
             bandFillColor={
               colorMode === GaugeColorModes.PALETTE