Use constants for height values for charts for better consistency.

Author: JeanMarcMilletScality

ui/src/components/DashboardChartSystemLoad.tsx

@@ -19,6 +19,7 @@ import {
   getNodesSystemLoadQuery,
 } from '../services/platformlibrary/metrics';
 import NonSymmetricalQuantileChart from './NonSymmetricalQuantileChart';
+import { HEIGHT_DEFAULT_CHART } from '../constants';
 
 const DashboardChartSystemLoad = () => {
   const { isShowQuantileChart } = useShowQuantileChart();
@@ -67,7 +68,7 @@ const DashboardChartSystemLoadWithoutQuantiles = () => {
   return (
     <LineTimeSerieChart
       series={series}
-      height={110}
+      height={HEIGHT_DEFAULT_CHART}
       interval={interval}
       duration={duration}
       title="System Load"

ui/src/components/DashboardChartThroughput.tsx

@@ -22,7 +22,11 @@ import {
 } from '../services/platformlibrary/metrics';
 import { getMultipleSymmetricalSeries } from '../services/graphUtils';
 import SymmetricalQuantileChart from './SymmetricalQuantileChart';
-import { UNIT_RANGE_BS, YAXIS_TITLE_READ_WRITE } from '../constants';
+import {
+  HEIGHT_SYMMETRICAL_CHART,
+  UNIT_RANGE_BS,
+  YAXIS_TITLE_READ_WRITE,
+} from '../constants';
 
 const DashboardChartThroughput = () => {
   const { isShowQuantileChart } = useShowQuantileChart();
@@ -105,7 +109,7 @@ const DashboardChartThroughputWithoutQuantile = () => {
         above: series.above,
         below: series.below,
       }}
-      height={150}
+      height={HEIGHT_SYMMETRICAL_CHART}
       unitRange={UNIT_RANGE_BS}
       interval={interval}
       duration={duration}

ui/src/components/NonSymmetricalQuantileChart.tsx

@@ -7,7 +7,7 @@ import {
 import { useCallback, useMemo } from 'react';
 import { UseQueryOptions } from 'react-query';
 import { useSelector } from 'react-redux';
-import { PORT_NODE_EXPORTER } from '../constants';
+import { HEIGHT_DEFAULT_CHART, PORT_NODE_EXPORTER } from '../constants';
 import { useChartSeries, useNodeAddressesSelector, useNodes } from '../hooks';
 import {
   convertPrometheusResultToSerie,
@@ -169,7 +169,7 @@ const NonSymmetricalQuantileChart = ({
     <ChartLegendWrapper colorSet={colorSet}>
       <LineTimeSerieChart
         series={seriesQuantile}
-        height={110}
+        height={HEIGHT_DEFAULT_CHART}
         title={title}
         helpText={helpText}
         startingTimeStamp={startingTimeStampQuantile}

ui/src/components/VolumeCharts.tsx

@@ -7,6 +7,7 @@ import {
 } from '@scality/core-ui/dist/next';
 import { useCallback } from 'react';
 import {
+  HEIGHT_DEFAULT_CHART,
   UNIT_RANGE_BS,
   UNIT_RANGE_SECONDS,
   YAXIS_TITLE_READ_WRITE,
@@ -224,7 +225,7 @@ export const VolumeUsageChart = ({
       <Stack direction="vertical" gap="r1">
         <LineTimeSerieChart
           series={series}
-          height={160}
+          height={HEIGHT_DEFAULT_CHART}
           interval={interval}
           duration={duration}
           title="Usage"