From 502174fcfdcaca6f423acb8a90689844358d1ec4 Mon Sep 17 00:00:00 2001
From: Suhaha <jklopsdfw@gmail.com>
Date: Mon, 18 Jul 2022 15:52:16 +0800
Subject: [PATCH 1/2] fix(metrics): orphan data points caused by `null` value

---
 ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts
index 4d78ad1926..93360f14be 100644
--- a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts
+++ b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts
@@ -38,12 +38,12 @@ export function processRawData(
       let dpValue: number | null = parseSampleValue(value[1])
 
       if (isNaN(dpValue)) {
-        dpValue = null
+        dpValue = 0
       }
 
       const timestamp = value[0] * 1000
       for (let t = baseTimestamp; t < timestamp; t += stepMs) {
-        dps.push([t, null])
+        dps.push([t, 0])
       }
       baseTimestamp = timestamp + stepMs
       dps.push([timestamp, dpValue])
@@ -51,7 +51,7 @@ export function processRawData(
 
     const endTimestamp = options.end * 1000
     for (let t = baseTimestamp; t <= endTimestamp; t += stepMs) {
-      dps.push([t, null])
+      dps.push([t, 0])
     }
 
     return dps

From 7ccb9a8fd5d471eea75862c10b4670cb532b5516 Mon Sep 17 00:00:00 2001
From: Suhaha <jklopsdfw@gmail.com>
Date: Tue, 19 Jul 2022 17:04:01 +0800
Subject: [PATCH 2/2] feat(metrics-chart): add nullValue config

---
 .../src/components/MetricChart/index.tsx      | 22 ++++++++++++++++---
 .../src/utils/prometheus/data.ts              |  6 ++---
 .../src/utils/prometheus/types.ts             |  5 +++++
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/ui/packages/tidb-dashboard-lib/src/components/MetricChart/index.tsx b/ui/packages/tidb-dashboard-lib/src/components/MetricChart/index.tsx
index 1510f6fb84..34fe64a781 100644
--- a/ui/packages/tidb-dashboard-lib/src/components/MetricChart/index.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/components/MetricChart/index.tsx
@@ -38,7 +38,8 @@ import {
   processRawData,
   PromMatrixData,
   QueryOptions,
-  resolveQueryTemplate
+  resolveQueryTemplate,
+  TransformNullValue
 } from '@lib/utils/prometheus'
 import { AxiosPromise } from 'axios'
 import { ReqConfig } from '@lib/types'
@@ -96,6 +97,7 @@ export interface IMetricChartProps {
   queries: IQueryOption[]
   unit?: string
   type: GraphType
+  nullValue?: TransformNullValue
 
   height?: number
 
@@ -126,7 +128,8 @@ export default function MetricChart({
   height = 200,
   onRangeChange,
   onLoadingStateChange,
-  getMetrics
+  getMetrics,
+  nullValue = TransformNullValue.NULL
 }: IMetricChartProps) {
   const chartRef = useRef<Chart>(null)
   const chartContainerRef = useRef<HTMLDivElement>(null)
@@ -204,10 +207,23 @@ export default function MetricChart({
           if (data === null) {
             return
           }
+
+          // transform data according to nullValue config
+          const transformedData =
+            nullValue === TransformNullValue.AS_ZERO
+              ? data.map((d) => {
+                  if (d[1] !== null) {
+                    return d
+                  }
+                  d[1] = 0
+                  return d
+                })
+              : data
+
           sd.push({
             id: `${queryIdx}_${seriesIdx}`,
             name: format(queries[queryIdx].name, promResult.metric),
-            data,
+            data: transformedData,
             color: queries[queryIdx].color
           })
         })
diff --git a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts
index 93360f14be..4d78ad1926 100644
--- a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts
+++ b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/data.ts
@@ -38,12 +38,12 @@ export function processRawData(
       let dpValue: number | null = parseSampleValue(value[1])
 
       if (isNaN(dpValue)) {
-        dpValue = 0
+        dpValue = null
       }
 
       const timestamp = value[0] * 1000
       for (let t = baseTimestamp; t < timestamp; t += stepMs) {
-        dps.push([t, 0])
+        dps.push([t, null])
       }
       baseTimestamp = timestamp + stepMs
       dps.push([timestamp, dpValue])
@@ -51,7 +51,7 @@ export function processRawData(
 
     const endTimestamp = options.end * 1000
     for (let t = baseTimestamp; t <= endTimestamp; t += stepMs) {
-      dps.push([t, 0])
+      dps.push([t, null])
     }
 
     return dps
diff --git a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts
index 397134d93c..f4c050ed54 100644
--- a/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts
+++ b/ui/packages/tidb-dashboard-lib/src/utils/prometheus/types.ts
@@ -84,6 +84,11 @@ export type MatrixOrVectorResult =
   | PromMatrixData['result'][0]
   | PromVectorData['result'][0]
 
+export enum TransformNullValue {
+  NULL = 'null',
+  AS_ZERO = 'as_zero'
+}
+
 // Our customized types
 
 export interface QueryOptions {