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

Author: neptunian

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

@@ -16,7 +16,7 @@ interface Props {
   bounds: InfraWaffleMapBounds;
   formatter: InfraFormatter;
 }
-
+type TickValue = 0 | 0.5 | 1;
 export const SteppedGradientLegend: React.FC<Props> = ({ legend, bounds, formatter }) => {
   return (
     <LegendContainer>
@@ -39,12 +39,14 @@ export const SteppedGradientLegend: React.FC<Props> = ({ legend, bounds, formatt
 
 interface TickProps {
   bounds: InfraWaffleMapBounds;
-  value: number;
+  value: TickValue;
   formatter: InfraFormatter;
 }
 
 const TickLabel = ({ value, bounds, formatter }: TickProps) => {
-  const normalizedValue = value === 0 ? bounds.min : bounds.max * value;
+  // if looking for the midpoint (0.5), calculate from min and max bounds
+  const normalizedValue =
+    value === 0 ? bounds.min : value === 0.5 ? (bounds.min + bounds.max) / 2 : bounds.max * value;
   const style = { left: `${value * 100}%` };
   const label = formatter(normalizedValue);
   return <Tick style={style}>{label}</Tick>;