fix(chart): fix multi reference line missing issue

Author: Cuiyansong

frontend/src/app/components/ChartGraph/BasicBarChart/BasicBarChart.tsx

@@ -198,7 +198,7 @@ class BasicBarChart extends Chart {
     if (!colorConfigs.length) {
       const flatSeries = aggregateConfigs.map(aggConfig => {
         return {
-          ...this.getBarSeiesImpl(
+          ...this.getBarSeriesImpl(
             styleConfigs,
             settingConfigs,
             chartDataSet,
@@ -230,7 +230,7 @@ class BasicBarChart extends Chart {
         );
 
         return {
-          ...this.getBarSeiesImpl(
+          ...this.getBarSeriesImpl(
             styleConfigs,
             settingConfigs,
             chartDataSet,
@@ -246,7 +246,7 @@ class BasicBarChart extends Chart {
               value: row?.getCell(aggConfig) || 0,
             };
           }),
-          itemStyle: this.getSerieItemStyle(styleConfigs, {
+          itemStyle: this.getSeriesItemStyle(styleConfigs, {
             color: itemStyleColor?.value,
           }),
         };
@@ -255,7 +255,7 @@ class BasicBarChart extends Chart {
     return colorizeGroupedSeries;
   }
 
-  private getBarSeiesImpl(
+  private getBarSeriesImpl(
     styleConfigs,
     settingConfigs,
     chartDataSet: IChartDataSet<string>,
@@ -264,9 +264,9 @@ class BasicBarChart extends Chart {
     return {
       type: 'bar',
       sampling: 'average',
-      barGap: this.getSerieBarGap(styleConfigs),
-      barWidth: this.getSerieBarWidth(styleConfigs),
-      itemStyle: this.getSerieItemStyle(styleConfigs, {
+      barGap: this.getSeriesBarGap(styleConfigs),
+      barWidth: this.getSeriesBarWidth(styleConfigs),
+      itemStyle: this.getSeriesItemStyle(styleConfigs, {
         color: dataConfig?.color?.start,
       }),
       ...this.getLabelStyle(styleConfigs),
@@ -307,7 +307,7 @@ class BasicBarChart extends Chart {
       });
     };
 
-    const _sereisTotalArrayByDataIndex = (series?.[0]?.data || []).map(
+    const _seriesTotalArrayByDataIndex = (series?.[0]?.data || []).map(
       (_, index) => {
         const sum = series.reduce((acc, cur) => {
           const value = +_getAbsValue(cur.data?.[index] || 0);
@@ -318,12 +318,12 @@ class BasicBarChart extends Chart {
       },
     );
     (series || []).forEach(s => {
-      s.data = _convertToPercentage(s.data, _sereisTotalArrayByDataIndex);
+      s.data = _convertToPercentage(s.data, _seriesTotalArrayByDataIndex);
     });
     return series;
   }
 
-  private getSerieItemStyle(styles, itemStyle?) {
+  private getSeriesItemStyle(styles, itemStyle?) {
     const [borderStyle, borderRadius] = getStyles(
       styles,
       ['bar'],
@@ -339,12 +339,12 @@ class BasicBarChart extends Chart {
     };
   }
 
-  private getSerieBarGap(styles) {
+  private getSeriesBarGap(styles) {
     const [gap] = getStyles(styles, ['bar'], ['gap']);
     return gap;
   }
 
-  private getSerieBarWidth(styles) {
+  private getSeriesBarWidth(styles) {
     const [width] = getStyles(styles, ['bar'], ['width']);
     return width;
   }

frontend/src/app/utils/chartHelper.ts

@@ -493,14 +493,29 @@ export function getReference2(
     'rows',
   );
 
+  console.log(
+    `getMarkArea2(
+      referenceTabs,
+      dataSetRows,
+      dataConfig,
+      isHorizonDisplay,
+    ), ---> `,
+    getMarkArea2(referenceTabs, dataSetRows, dataConfig, isHorizonDisplay),
+  );
+
   return {
     markLine: getMarkLine2(
       referenceTabs,
       dataSetRows,
       dataConfig,
       isHorizonDisplay,
     ),
-    markArea: getMarkArea2(referenceTabs, dataSetRows, isHorizonDisplay),
+    markArea: getMarkArea2(
+      referenceTabs,
+      dataSetRows,
+      dataConfig,
+      isHorizonDisplay,
+    ),
   };
 }
 
@@ -676,8 +691,10 @@ function getMarkAreaData2(
   valueTypeKey,
   constantValueKey,
   metricKey,
+  dataConfig,
   isHorizonDisplay,
 ) {
+  const metric = getSettingValue(mark.rows, metricKey, 'value');
   const valueKey = isHorizonDisplay ? 'xAxis' : 'yAxis';
   const show = getSettingValue(mark.rows, 'showLabel', 'value');
   const enableMarkArea = getSettingValue(mark.rows, 'enableMarkArea', 'value');
@@ -692,8 +709,10 @@ function getMarkAreaData2(
   );
   const name = mark.value;
   const valueType = getSettingValue(mark.rows, valueTypeKey, 'value');
-  const metric = getSettingValue(mark.rows, metricKey, 'value');
-  const metricDatas = dataSetRows.map(d => +d.getCellByKey(metric));
+  const metricDatas =
+    dataConfig.uid === metric
+      ? dataSetRows.map(d => +d.getCell(dataConfig))
+      : [];
   const constantValue = getSettingValue(mark.rows, constantValueKey, 'value');
   let yAxis = 0;
   switch (valueType) {
@@ -711,8 +730,8 @@ function getMarkAreaData2(
       break;
   }
 
-  if (!enableMarkArea) {
-    return null;
+  if (!enableMarkArea || !Number.isFinite(yAxis) || Number.isNaN(yAxis)) {
+    return;
   }
 
   return {
@@ -826,12 +845,12 @@ function getMarkArea(refTabs, dataColumns, isHorizonDisplay) {
 function getMarkArea2(
   refTabs,
   dataSetRows: IChartDataSetRow<string>[],
+  dataConfig,
   isHorizonDisplay,
 ) {
   const refAreas = refTabs?.reduce((acc, cur) => {
     const markLineConfigs = cur?.rows?.filter(r => r.key === 'markArea');
-    acc.push(...markLineConfigs);
-    return acc;
+    return acc.concat(markLineConfigs);
   }, []);
   return {
     data: refAreas
@@ -844,13 +863,14 @@ function getMarkArea2(
               `${prefix}ValueType`,
               `${prefix}ConstantValue`,
               `${prefix}Metric`,
+              dataConfig,
               isHorizonDisplay,
             );
           })
           .filter(Boolean);
         return markAreaData;
       })
-      .filter(m => Boolean(m?.length)),
+      .filter(m => m?.length === 2),
   };
 }