Merge pull request #874 from Cuiyansong/hotfix-869

Hotfix 869

Author: Cuiyansong

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

@@ -162,7 +162,7 @@ class BasicTableChart extends ReactChart {
     return {
       rowKey: 'id',
       pagination: tablePagination,
-      dataSource: chartDataSet.map(row => row.convertToObject()),
+      dataSource: chartDataSet,
       columns: tableColumns,
       summaryFn: this.getTableSummaryFn(
         settingConfigs,
@@ -171,6 +171,17 @@ class BasicTableChart extends ReactChart {
         aggregateConfigs,
         context,
       ),
+      onRow: (_, index) => {
+        const row = chartDataSet?.[index];
+        const rowData = mixedSectionConfigRows?.reduce(
+          (acc, cur, sectionIndex) => {
+            acc[chartDataSet.getFieldOriginKey(cur)] = row?.[sectionIndex];
+            return acc;
+          },
+          {},
+        );
+        return { index, rowData };
+      },
       components: this.getTableComponents(styleConfigs, widgetSpecialConfig),
       ...this.getAntdTableStyleOptions(styleConfigs, settingConfigs, context),
       onChange: (pagination, filters, sorter, extra) => {
@@ -500,29 +511,34 @@ class BasicTableChart extends ReactChart {
       },
       body: {
         cell: props => {
-          const { style, dataIndex, ...rest } = props;
+          const { style, key, rowData, ...rest } = props;
           const uid = props.uid;
           const [conditionStyle] = getStyles(
             getAllColumnListInfo,
             [uid, 'conditionStyle'],
             ['conditionStylePanel'],
           );
           const conditionalCellStyle = getCustomBodyCellStyle(
-            props,
+            props?.cellValue,
             conditionStyle,
           );
+          const sensitiveFieldName = Object.keys(rowData || {})?.[0];
           return (
             <TableComponentsTd
               {...rest}
               style={Object.assign(style || {}, conditionalCellStyle)}
-              isLinkCell={linkFields?.includes(dataIndex)}
-              isJumpCell={jumpField === dataIndex}
+              isLinkCell={linkFields?.includes(sensitiveFieldName)}
+              isJumpCell={jumpField === sensitiveFieldName}
             />
           );
         },
         row: props => {
           const { style, ...rest } = props;
-          const rowStyle = getCustomBodyRowStyle(props, allConditionStyle);
+          // NOTE: rowData is case sensitive row keys object
+          const rowStyle = getCustomBodyRowStyle(
+            props.rowData,
+            allConditionStyle,
+          );
           return <tr {...rest} style={Object.assign(style || {}, rowStyle)} />;
         },
         wrapper: props => {
@@ -633,8 +649,7 @@ class BasicTableChart extends ReactChart {
         return {
           sorter: true,
           title: getColumnRenderName(c),
-          dataIndex: chartDataSet.getFieldKey(c),
-          key: chartDataSet.getFieldKey(c),
+          dataIndex: chartDataSet.getFieldIndex(c),
           aggregate: c?.aggregate,
           colName,
           width: colMaxWidth,
@@ -652,18 +667,21 @@ class BasicTableChart extends ReactChart {
               uid: c.uid,
             };
           },
-          onCell: (record, rowIndex) => {
+          onCell: (_, rowIndex) => {
             const row = chartDataSet[rowIndex];
             const cellValue = row.getCell(c);
+            const rowData = { [chartDataSet.getFieldOriginKey(c)]: cellValue };
             return {
               uid: c.uid,
               cellValue,
-              dataIndex: row.getFieldKey(c),
+              dataIndex: row.getFieldIndex(c),
+              rowData,
               ...this.registerTableCellEvents(
-                row.getFieldKey(c),
+                colName,
                 cellValue,
                 rowIndex,
-                record,
+                rowData,
+                c.aggregate,
               ),
             };
           },
@@ -904,15 +922,17 @@ class BasicTableChart extends ReactChart {
     seriesName: string,
     value: any,
     dataIndex: number,
-    record: any,
+    rowData: any,
+    aggOperator?: string,
   ) {
     const eventParams = this.createrEventParams({
       seriesType: 'body',
       name: seriesName,
       data: {
         format: undefined,
         name: seriesName,
-        rowData: record,
+        aggOperator,
+        rowData,
         value: value,
       },
       seriesName, // column name/index

frontend/src/app/components/ChartGraph/BasicTableChart/conditionStyle.ts

@@ -1,3 +1,21 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { ConditionStyleFormValues } from 'app/components/FormGenerator/Customize/ConditionStylePanel';
 import { OperatorTypes } from 'app/components/FormGenerator/Customize/ConditionStylePanel/types';
 import { CSSProperties } from 'react';
@@ -17,20 +35,22 @@ const isMatchedTheCondition = (
       matchTheCondition = value !== conditionValues;
       break;
     case OperatorTypes.Contain:
-      matchTheCondition = (value as string).includes(conditionValues as string);
+      matchTheCondition = (value as string)?.includes(
+        conditionValues as string,
+      );
       break;
     case OperatorTypes.NotContain:
-      matchTheCondition = !(value as string).includes(
+      matchTheCondition = !(value as string)?.includes(
         conditionValues as string,
       );
       break;
     case OperatorTypes.In:
-      matchTheCondition = (conditionValues as (string | number)[]).includes(
+      matchTheCondition = (conditionValues as (string | number)[])?.includes(
         value,
       );
       break;
     case OperatorTypes.NotIn:
-      matchTheCondition = !(conditionValues as (string | number)[]).includes(
+      matchTheCondition = !(conditionValues as (string | number)[])?.includes(
         value,
       );
       break;
@@ -70,13 +90,6 @@ const isMatchedTheCondition = (
 const getTheSameRange = (list, type) =>
   list?.filter(item => item?.range === type);
 
-const getRowRecord = row => {
-  if (!row?.length) {
-    return {};
-  }
-  return row?.[0]?.props?.record || {};
-};
-
 const deleteUndefinedProps = props => {
   return Object.keys(props).reduce((acc, cur) => {
     if (props[cur] !== undefined || props[cur] !== null) {
@@ -87,14 +100,14 @@ const deleteUndefinedProps = props => {
 };
 
 export const getCustomBodyCellStyle = (
-  props: any,
+  cellValue: any,
   conditionStyle: ConditionStyleFormValues[],
 ): CSSProperties => {
   const currentConfigs = getTheSameRange(conditionStyle, 'cell');
   if (!currentConfigs?.length) {
     return {};
   }
-  const text = props.cellValue;
+  const text = cellValue;
   let cellStyle: CSSProperties = {};
 
   try {
@@ -112,7 +125,7 @@ export const getCustomBodyCellStyle = (
 };
 
 export const getCustomBodyRowStyle = (
-  props: any,
+  rowRecord: { [k in string]: any },
   conditionStyle: ConditionStyleFormValues[],
 ): CSSProperties => {
   const currentConfigs: ConditionStyleFormValues[] = getTheSameRange(
@@ -122,8 +135,6 @@ export const getCustomBodyRowStyle = (
   if (!currentConfigs?.length) {
     return {};
   }
-
-  const rowRecord = getRowRecord(props.children);
   let rowStyle: CSSProperties = {};
 
   try {
@@ -134,7 +145,7 @@ export const getCustomBodyRowStyle = (
         color: { background, textColor },
         target: { name },
       }) => {
-        rowStyle = isMatchedTheCondition(rowRecord[name], operator, value)
+        rowStyle = isMatchedTheCondition(rowRecord?.[name], operator, value)
           ? { backgroundColor: background, color: textColor }
           : rowStyle;
       },

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

@@ -45,6 +45,10 @@ class ChartDataSetBase extends Array {
     return this.toCaseInsensitive(getValueByColumnKey(field));
   }
 
+  protected toOriginKey(field: ChartDataSectionField): string {
+    return getValueByColumnKey(field);
+  }
+
   protected createColumnIndexTable(metas?: ChartDatasetMeta[]): {
     [key: string]: number;
   } {
@@ -57,25 +61,35 @@ 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);
   }
 
@@ -87,6 +101,7 @@ export class ChartDataSet<T>
     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(
@@ -121,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);
   }
 
@@ -149,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/types/ChartDataSet.d.ts

@@ -29,11 +29,15 @@ export interface IChartDataSetRow<T> extends Array<T> {
   getFieldIndex(field: ChartDataSectionField): number;
 
   convertToObject(): object;
+
+  convertToCaseSensitiveObject(): object;
 }
 
 export interface IChartDataSet<T> extends Array<IChartDataSetRow<T>> {
   getFieldKey(field: ChartDataSectionField): string;
 
+  getFieldOriginKey(field: ChartDataSectionField): string;
+
   getFieldIndex(field: ChartDataSectionField): number;
 
   sortBy(dataConfigs: ChartDataConfig[]): void;

frontend/src/app/utils/__tests__/chartHelper.test.ts

@@ -468,5 +468,30 @@ describe('Chart Helper ', () => {
       ).toEqual(1);
       expect(chartDataSet[0].getCellByKey('AVG(age)')).toEqual('r1-c2-v');
     });
+
+    test('should get dataset row data with case sensitive', () => {
+      const columns = [['r1-c1-v', 'r1-c2-v']];
+      const metas = [{ name: 'name' }, { name: 'avg(age)' }];
+      const chartDataSet = transformToDataSet(columns, metas, [
+        {
+          rows: [
+            {
+              colName: 'Name',
+            },
+            {
+              colName: 'Age',
+              aggregate: 'AVG',
+            },
+          ],
+        },
+      ] as any);
+
+      expect(chartDataSet?.length).toEqual(1);
+      expect(chartDataSet[0] instanceof ChartDataSetRow).toBeTruthy();
+      expect(chartDataSet[0].convertToCaseSensitiveObject()).toEqual({
+        Name: 'r1-c1-v',
+        'AVG(Age)': 'r1-c2-v',
+      });
+    });
   });
 });