fix(MetricChart): do not convert nulls (#677)

Author: artemmufazalov

src/components/MetricChart/convertReponse.ts

@@ -8,12 +8,13 @@ export const convertResponse = (
     const preparedMetrics = data
         .map(({datapoints, target}) => {
             const metricDescription = metrics.find((metric) => metric.target === target);
-            const chartData = datapoints.map((datapoint) => datapoint[0] || 0);
 
             if (!metricDescription) {
                 return undefined;
             }
 
+            const chartData = datapoints.map((datapoint) => datapoint[0]);
+
             return {
                 ...metricDescription,
                 data: chartData,

src/components/MetricChart/getDefaultDataFormatter.ts

@@ -1,4 +1,5 @@
 import {formatBytes} from '../../utils/bytesParsers';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
 import {formatToMs} from '../../utils/timeParsers';
 import {isNumeric} from '../../utils/utils';
@@ -18,11 +19,19 @@ export const getDefaultDataFormatter = (dataType?: ChartDataType) => {
     }
 };
 
+// Values in y axis won't be null and will always be present and properly formatted
+// EMPTY_DATA_PLACEHOLDER is actually empty data format for values in a tooltip
 function formatChartValueToMs(value: ChartValue) {
+    if (value === null) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
     return formatToMs(roundToPrecision(convertToNumber(value), 2));
 }
 
 function formatChartValueToSize(value: ChartValue) {
+    if (value === null) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
     return formatBytes({value: convertToNumber(value), precision: 3});
 }
 

src/components/MetricChart/types.ts

@@ -15,7 +15,7 @@ export interface MetricDescription {
 }
 
 export interface PreparedMetric extends MetricDescription {
-    data: number[];
+    data: (number | null)[];
 }
 
 export interface PreparedMetricsData {

src/utils/constants.ts

@@ -71,6 +71,8 @@ export const COLORS_PRIORITY = {
 
 export const TENANT_OVERVIEW_TABLES_LIMIT = 5;
 
+export const EMPTY_DATA_PLACEHOLDER = '—';
+
 // ==== Titles ====
 export const DEVELOPER_UI_TITLE = 'Developer UI';
 export const CLUSTER_DEFAULT_TITLE = 'Cluster';