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

ydb-platform · Feb 1, 2024 · c51c7aa · c51c7aa
1 parent ab646bc
commit c51c7aa
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/src/components/MetricChart/convertReponse.ts b/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,

diff --git a/src/components/MetricChart/getDefaultDataFormatter.ts b/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});
 }
 

diff --git a/src/components/MetricChart/types.ts b/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 {

diff --git a/src/utils/constants.ts b/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';