[Metrics UI] remove middle number in legend and adjust calculation of max number (#89020) (#89893)

* get midpoint of max and min instead of half of max number

* remove middle tick from stepped gradient legend

* use value instead of max values to calculate bounds

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Author: neptunian

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/stepped_gradient_legend.tsx

@@ -16,13 +16,12 @@ interface Props {
   bounds: InfraWaffleMapBounds;
   formatter: InfraFormatter;
 }
-
+type TickValue = 0 | 1;
 export const SteppedGradientLegend: React.FC<Props> = ({ legend, bounds, formatter }) => {
   return (
     <LegendContainer>
       <Ticks>
         <TickLabel value={0} bounds={bounds} formatter={formatter} />
-        <TickLabel value={0.5} bounds={bounds} formatter={formatter} />
         <TickLabel value={1} bounds={bounds} formatter={formatter} />
       </Ticks>
       <GradientContainer>
@@ -39,7 +38,7 @@ export const SteppedGradientLegend: React.FC<Props> = ({ legend, bounds, formatt
 
 interface TickProps {
   bounds: InfraWaffleMapBounds;
-  value: number;
+  value: TickValue;
   formatter: InfraFormatter;
 }
 

x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/calculate_bounds_from_nodes.test.ts

@@ -37,14 +37,14 @@ describe('calculateBoundsFromNodes', () => {
     const bounds = calculateBoundsFromNodes(nodes);
     expect(bounds).toEqual({
       min: 0.2,
-      max: 1.5,
+      max: 0.5,
     });
   });
   it('should have a minimum of 0 for only a single node', () => {
     const bounds = calculateBoundsFromNodes([nodes[0]]);
     expect(bounds).toEqual({
       min: 0,
-      max: 1.5,
+      max: 0.5,
     });
   });
   it('should return zero for empty nodes', () => {

x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/calculate_bounds_from_nodes.ts

@@ -9,23 +9,17 @@ import { SnapshotNode } from '../../../../../common/http_api/snapshot_api';
 import { InfraWaffleMapBounds } from '../../../../lib/lib';
 
 export const calculateBoundsFromNodes = (nodes: SnapshotNode[]): InfraWaffleMapBounds => {
-  const maxValues = nodes.map((node) => {
+  const values = nodes.map((node) => {
     const metric = first(node.metrics);
-    if (!metric) return 0;
-    return metric.max;
-  });
-  const minValues = nodes.map((node) => {
-    const metric = first(node.metrics);
-    if (!metric) return 0;
-    return metric.value;
+    return !metric || !metric.value ? 0 : metric.value;
   });
   // if there is only one value then we need to set the bottom range to zero for min
   // otherwise the legend will look silly since both values are the same for top and
   // bottom.
-  if (minValues.length === 1) {
-    minValues.unshift(0);
+  if (values.length === 1) {
+    values.unshift(0);
   }
-  const maxValue = max(maxValues) || 0;
-  const minValue = min(minValues) || 0;
+  const maxValue = max(values) || 0;
+  const minValue = min(values) || 0;
   return { min: isFinite(minValue) ? minValue : 0, max: isFinite(maxValue) ? maxValue : 0 };
 };