diff --git a/src/components/MetricChart/convertReponse.ts b/src/components/MetricChart/convertReponse.ts index 1a4ced6c2..7520d0788 100644 --- 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 index d421f7f5b..6f3e3bb55 100644 --- 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 index 179250123..94cce8e71 100644 --- 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 index 91f373ac2..9fdd8f59e 100644 --- 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';