feat(chart): all row data used outside of chart should be case sensitive values

Author: Cuiyansong

frontend/src/app/components/ChartGraph/models/ChartDataSet.ts

@@ -61,40 +61,47 @@ class ChartDataSetBase extends Array {
   protected toCaseInsensitive(key) {
     return String(key).toUpperCase();
   }
+
+  public getFieldOriginKey(field: ChartDataSectionField) {
+    return this.toOriginKey(field);
+  }
 }
 
 export class ChartDataSet<T>
   extends ChartDataSetBase
   implements IChartDataSet<T>
 {
   private columnIndexTable: ColumnIndexTable = {};
+  private originalFields?: ChartDataSectionField[];
 
-  constructor(columns: T[][], metas?: ChartDatasetMeta[]) {
+  constructor(
+    columns: T[][],
+    metas?: ChartDatasetMeta[],
+    fields?: ChartDataSectionField[],
+  ) {
     super(
       ...(Array.prototype.map.call(columns, c => {
         if (c?.length === 1) {
           const row = new ChartDataSetRow(metas, []);
           row.push(c[0]);
           return row;
         }
-        return new ChartDataSetRow(metas, c);
+        return new ChartDataSetRow(metas, c, fields);
       }) as any),
     );
+    this.originalFields = fields;
     this.columnIndexTable = super.createColumnIndexTable(metas);
   }
 
   public getFieldKey(field: ChartDataSectionField) {
     return this.toKey(field);
   }
 
-  public getFieldOriginKey(field: ChartDataSectionField) {
-    return this.toOriginKey(field);
-  }
-
   public getFieldIndex(field: ChartDataSectionField) {
     return this.toIndexBy(this.columnIndexTable, field);
   }
 
+  // TODO(Stephen): should be passed by sorted fields not data configs
   public sortBy(dataConfigs: ChartDataConfig[]): void {
     const orderConfigs = dataConfigs
       .filter(
@@ -129,9 +136,13 @@ export class ChartDataSetRow<T>
   implements IChartDataSetRow<T>
 {
   private columnIndexTable: ColumnIndexTable = {};
+  private metas: Array<{ name: string }> = [];
+  private originalFields?: ChartDataSectionField[];
 
-  constructor(metas, items: T[]) {
+  constructor(metas, items: T[], fields?: ChartDataSectionField[]) {
     super(...(items as any));
+    this.metas = metas;
+    this.originalFields = fields;
     this.columnIndexTable = this.createColumnIndexTable(metas);
   }
 
@@ -157,4 +168,11 @@ export class ChartDataSetRow<T>
       return acc;
     }, {});
   }
+
+  public convertToCaseSensitiveObject(): object {
+    return (this.originalFields || []).reduce((acc, cur) => {
+      acc[this.getFieldOriginKey(cur)] = this[this.getFieldIndex(cur)];
+      return acc;
+    }, {});
+  }
 }

frontend/src/app/pages/DashBoardPage/components/WidgetCore/DataChartWidget/index.tsx

@@ -55,6 +55,7 @@ export const DataChartWidget: React.FC<{}> = memo(() => {
       if (!params) {
         return;
       }
+      console.log(`params ---> `, params);
       widgetChartClick(widgetRef.current, params);
     },
     [widgetChartClick],

frontend/src/app/types/ChartDataSet.d.ts

@@ -29,6 +29,8 @@ export interface IChartDataSetRow<T> extends Array<T> {
   getFieldIndex(field: ChartDataSectionField): number;
 
   convertToObject(): object;
+
+  convertToCaseSensitiveObject(): object;
 }
 
 export interface IChartDataSet<T> extends Array<IChartDataSetRow<T>> {

frontend/src/app/utils/chartHelper.ts

@@ -41,11 +41,7 @@ import ChartMetadata from 'app/types/ChartMetadata';
 import { NumberUnitKey, NumericUnitDescriptions } from 'globalConstants';
 import moment from 'moment';
 import { Debugger } from 'utils/debugger';
-import { isEmpty,
-  isEmptyArray,
-  isUndefined,
-  meanValue,
-  pipe,} from 'utils/object';
+import { isEmpty, isEmptyArray, meanValue, pipe } from 'utils/object';
 import {
   flattenHeaderRowsWithoutGroupRow,
   getColumnRenderOriginName,
@@ -73,7 +69,7 @@ import {
  * @param {IFieldFormatConfig} [format]
  * @return {*}
  */
- export function toFormattedValue(
+export function toFormattedValue(
   value?: number | string,
   format?: IFieldFormatConfig,
 ) {
@@ -910,16 +906,17 @@ export function getNameTextStyle(fontFamily, fontSize, color) {
  * @template T
  * @param {T[][]} [datas]
  * @param {ChartDatasetMeta[]} [metas]
- * @param {ChartDataConfig[]} [sortedConfigs]
+ * @param {ChartDataConfig[]} [dataConfigs]
  * @return {*}  {IChartDataSet<T>}
  */
 export function transformToDataSet<T>(
   datas?: T[][],
   metas?: ChartDatasetMeta[],
-  sortedConfigs?: ChartDataConfig[],
+  dataConfigs?: ChartDataConfig[],
 ): IChartDataSet<T> {
-  const ds = new ChartDataSet(datas || [], metas || []);
-  ds.sortBy(sortedConfigs || []);
+  const fields = (dataConfigs || []).flatMap(config => config.rows || []);
+  const ds = new ChartDataSet(datas || [], metas || [], fields || []);
+  ds.sortBy(dataConfigs || []);
   return ds;
 }
 
@@ -1220,7 +1217,8 @@ export function getGridStyle(styles) {
 export function getExtraSeriesRowData(data) {
   if (data instanceof ChartDataSetRow) {
     return {
-      rowData: data?.convertToObject(),
+      // NOTE: row data should be case sensitive except for data chart
+      rowData: data?.convertToCaseSensitiveObject(),
     };
   }