formatting & labels

elastic · Nov 19, 2021 · df66bc9 · df66bc9
1 parent 72cc085
commit df66bc9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/x-pack/plugins/lens/public/visualizations/gauge/chart_component.tsx b/x-pack/plugins/lens/public/visualizations/gauge/chart_component.tsx
@@ -89,6 +89,26 @@ function getTitle(visTitleMode: GaugeTitleMode, visTitle?: string, fallbackTitle
   return `${visTitle || fallbackTitle || ''}   `;
 }
 
+// TODO: once charts handle not displaying labels when there's no space for them, it's safe to remove this
+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;
+    }
+
+    if (
+      stop - baseStops[i - 1] < tenPercentRange ||
+      baseStops[lastIndex] - stop < tenPercentRange
+    ) {
+      return false;
+    }
+
+    return true;
+  });
+}
+
 function getTicks(
   ticksPosition: GaugeTicksPosition,
   range: [number, number],
@@ -100,7 +120,7 @@ function getTicks(
     const TICKS_NO = 3;
     return scaleLinear().domain(range).nice().ticks(TICKS_NO);
   } else {
-    return colorBands;
+    return colorBands && getTicksLabels(colorBands);
   }
 }
 
@@ -191,7 +211,7 @@ export const GaugeComponent: FC<GaugeRenderProps> = ({
   const colors = (palette?.params as CustomPaletteState)?.colors ?? undefined;
   const ranges = (palette?.params as CustomPaletteState)
     ? shiftAndNormalizeStops(args.palette?.params as CustomPaletteState, { min, max })
-    : undefined;
+    : [min, max];
 
   const metricColumn = table.columns.find((col) => col.id === metricAccessor);
   const formatter = formatFactory(
@@ -200,7 +220,7 @@ export const GaugeComponent: FC<GaugeRenderProps> = ({
       : {
           id: 'number',
           params: {
-            pattern: `0,0`,
+            pattern: max - min > 10 ? `0,0` : `0,0.0`,
           },
         }
   );

diff --git a/x-pack/plugins/lens/public/visualizations/gauge/visualization.tsx b/x-pack/plugins/lens/public/visualizations/gauge/visualization.tsx
@@ -427,6 +427,14 @@ export const getGaugeVisualization = ({
     const minValue = minAccessor && row[minAccessor];
     const goalValue = goalAccessor && row[goalAccessor];
 
+    if (minValue && minValue === maxValue) {
+      warnings.push([
+        <FormattedMessage
+          id="xpack.lens.gaugeVisualization.minValueBiggerMetricShortMessage"
+          defaultMessage="Minimum value is equal to maximum value."
+        />,
+      ]);
+    }
     if (minValue > metricValue) {
       warnings.push([
         <FormattedMessage

diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts
@@ -53,7 +53,6 @@ export function getSuggestions({
   // //   visualizationGroups: dimensionGroups,
   // // });
 
-  // console.log(state, table, subVisualizationId);
 
   const incompleteTable =
     !table.isMultiRow ||