linetemporalchart: Add 'NAN' to display hyphen for the data non existed

src/lib/components/constants.js

@@ -66,3 +66,5 @@ export const queryTimeSpansCodes = [
     frequency: SAMPLE_FREQUENCY_LAST_ONE_HOUR,
   },
 ];
+
+export const NAN_STRING = 'NAN';

src/lib/components/linetemporalchart/ChartUtil.js

@@ -1,10 +1,10 @@
 //@flow
 import { type Series } from './LineTemporalChart.component.js';
-
+import { NAN_STRING } from '../constants.js';
 export type VegaData = {
   timestamp: number,
   label: string, // same as the tooltip label
-  value: number | null, // the value can be null, in order to not display the line during the downtime of the platform
+  value: number | 'NAN', // the "NAN" is used by the tooltip to display a dash for the data which are not exist.
   isNegativeValue: boolean, // if the metricPrefix is read and out, we need to convert the value to negative before assigning it to the vega-lite spec
 }[];
 
@@ -17,7 +17,8 @@ export function convert2VegaData(
       const obj = {
         timestamp: datum[0] * 1000, // convert to million second
         label: line.getTooltipLabel(line.metricPrefix, line.resource),
-        value: datum[1] ? Number(datum[1]) : null,
+        value:
+          datum[1] && datum[1] !== NAN_STRING ? Number(datum[1]) : NAN_STRING,
         isNegativeValue:
           line.metricPrefix === 'read' || line.metricPrefix === 'out',
       };
@@ -32,7 +33,7 @@ export function convertDataBaseValue(data: VegaData, base: number): VegaData {
   return data.map((datum) => {
     return {
       ...datum,
-      value: datum.value ? datum.value / base : null,
+      value: typeof datum.value === 'number' ? datum.value / base : NAN_STRING,
     };
   });
 }
@@ -91,7 +92,6 @@ export function addMissingDataPoint(
 ): [number, string | null][] {
   if (
     !orginalValues ||
-    orginalValues.length === 0 ||
     startingTimeStamp === undefined ||
     !sampleDuration ||
     !sampleFrequency ||
@@ -108,7 +108,7 @@ export function addMissingDataPoint(
 
   // initialize the array with all `null` value
   for (let i = 0; i < numberOfDataPoints; i++) {
-    newValues.push([samplingPointTime, null]);
+    newValues.push([samplingPointTime, NAN_STRING]);
     samplingPointTime += sampleFrequency;
   }
 
@@ -120,7 +120,6 @@ export function addMissingDataPoint(
       orginalValues[nextIndex] &&
       newValues[i][0] === orginalValues[nextIndex][0]
     ) {
-      // $FlowFixMe get flow error because assign a value to null
       newValues[i][1] = orginalValues[nextIndex][1];
       nextIndex++;
     }

src/lib/components/linetemporalchart/LineTemporalChart.component.js

@@ -193,9 +193,9 @@ function LineTemporalChart({
       vegaData.map(function (datum: {
         timestamp: number,
         label: string,
-        value: number | null,
+        value: number | 'NAN',
       }): number {
-        if (datum.value) {
+        if (datum.value && typeof datum.value === 'number') {
           return datum.value;
         }
         return 0;
@@ -217,10 +217,14 @@ function LineTemporalChart({
     (data: {
       timestamp: number,
       label: string, // same as the tooltip label
-      value: number | null, // the value can be null, in order to not display the line during the downtime of the platform
+      value: number | 'NAN', // manually set it to a string. It's for the tooltip to display a hyphen for the data that don't exist
       isNegativeValue: boolean,
     }) => {
-      if (data.isNegativeValue && data.value) {
+      if (
+        data.isNegativeValue &&
+        data.value &&
+        typeof data.value === 'number'
+      ) {
         return { ...data, value: 0 - data.value };
       } else return { ...data };
     },

src/lib/components/vegachartv2/VegaChartV2.component.js

@@ -183,6 +183,18 @@ function VegaChart(
         .insert(themedSpec.data.values); //only the data.values changes trigger the graph's repaint
       // For some reason source_0 is the default dataset name
       view.change('source_0', changeset).run();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    // eslint-disable-next-line
+    JSON.stringify(themedSpec.data.values),
+    vegaInstance,
+  ]);
+
+  useLayoutEffect(() => {
+    if (vegaInstance.current) {
+      const view = vegaInstance.current.view;
+
       // when the mouse go out, we trigger the event to set cursorX to null
       if (
         !themedSpec.params.find((param) => param.name === 'cursorX').value ||
@@ -214,8 +226,6 @@ function VegaChart(
   }, [
     // eslint-disable-next-line
     JSON.stringify(themedSpec),
-    // eslint-disable-next-line
-    JSON.stringify(tooltipOptions),
     vegaInstance,
   ]);
   return (