Merge pull request #793 from qxqzx13/dev

fix table background color
running-elephant · Feb 16, 2022 · 9ca68cb · 9ca68cb
2 parents 9a890ad + 8d909cf
commit 9ca68cb
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 11 deletions.
diff --git a/frontend/src/app/components/ChartGraph/BasicTableChart/AntdTableWrapper.tsx b/frontend/src/app/components/ChartGraph/BasicTableChart/AntdTableWrapper.tsx
@@ -82,23 +82,18 @@ const StyledTable = styled(Table)<{ tableStyleConfig?: TableStyleConfigProps }>`
     overflow: ${p =>
       p?.tableStyleConfig?.isFixedColumns ? 'auto scroll' : 'auto !important'};
   }
-  .ant-table-summary {
-    background: #fafafa;
-  }
-  .ant-table-cell-fix-left {
-    background: #fafafa;
-  }
-  .ant-table-cell-fix-right {
-    background: #fafafa;
+
+  .ant-table .ant-table-container .ant-table-body .ant-table-tbody td {
+    background: inherit;
   }
 
-  .ant-table .ant-table-container .ant-table-body .odd td{
+  .ant-table .ant-table-container .ant-table-body .datart-basic-table-odd {
     background: ${p =>
       p?.tableStyleConfig?.odd?.backgroundColor || 'transparent'};
     color: ${p => p?.tableStyleConfig?.odd?.color || 'auto'};
   }
 
-  .ant-table .ant-table-container .ant-table-body .even td{
+  .ant-table .ant-table-container .ant-table-body .datart-basic-table-even {
     background: ${p =>
       p?.tableStyleConfig?.even?.backgroundColor || 'transparent'};
     color: ${p => p?.tableStyleConfig?.even?.color || 'auto'};

diff --git a/frontend/src/app/components/ChartGraph/BasicTableChart/BasicTableChart.tsx b/frontend/src/app/components/ChartGraph/BasicTableChart/BasicTableChart.tsx
@@ -184,7 +184,9 @@ class BasicTableChart extends ReactChart {
         }
       },
       rowClassName: (_, index) => {
-        return index % 2 === 0 ? 'odd' : 'even';
+        return index % 2 === 0
+          ? 'datart-basic-table-odd'
+          : 'datart-basic-table-even';
       },
       tableStyleConfig: this.getTableStyle(styleConfigs),
     };

diff --git a/frontend/src/app/utils/__tests__/chartHelper.test.ts b/frontend/src/app/utils/__tests__/chartHelper.test.ts
@@ -17,11 +17,14 @@
  */
 
 import { ChartDataSetRow } from 'app/components/ChartGraph/models/ChartDataSet';
+import { ChartDataSectionField, IFieldFormatConfig } from '../../types/ChartConfig';
 import {
   getColumnRenderName,
   getStyles,
   getValue,
   isMatchRequirement,
+  toFormattedValue,
+  valueFormatter,
   transformToDataSet,
   transformToObjectArray,
 } from '../chartHelper';
@@ -469,4 +472,149 @@ describe('Chart Helper ', () => {
       expect(chartDataSet[0].getCellByKey('AVG(age)')).toEqual('r1-c2-v');
     });
   });
+
+  describe.each([
+    [1, undefined, 1],
+    [
+      2,
+      {
+        type: 'numeric',
+        numeric: {
+          decimalPlaces: 3,
+          unitKey: 'thousand',
+          useThousandSeparator: true,
+          prefix: 'a',
+          suffix: 'b',
+        },
+      },
+      'a0.002Kb',
+    ],
+    [
+      111,
+      {
+        type: 'numeric',
+        numeric: {
+          decimalPlaces: 3,
+          unitKey: 'thousand',
+          useThousandSeparator: true,
+          prefix: '',
+          suffix: 'b',
+        },
+      },
+      '0.111Kb',
+    ],
+    [
+      333,
+      {
+        type: 'numeric',
+        numeric: {
+          decimalPlaces: 3,
+          unitKey: '',
+          useThousandSeparator: true,
+          prefix: '',
+          suffix: 'b',
+        },
+      },
+      '333.000b',
+    ],
+    [
+      3,
+      {
+        type: 'currency',
+        currency: {
+          decimalPlaces: 3,
+          unitKey: 'thousand',
+          useThousandSeparator: true,
+          currency: 'CNY',
+        },
+      },
+      '¥0.003 K',
+    ],
+    [
+      4,
+      {
+        type: 'percentage',
+        percentage: {
+          decimalPlaces: 2,
+        },
+      },
+      '400.00%',
+    ],
+    [
+      50,
+      {
+        type: 'scientificNotation',
+        scientificNotation: {
+          decimalPlaces: 2,
+        },
+      },
+      `5.00e+1`,
+    ],
+    [
+      55,
+      {
+        type: 'scientificNotation',
+        scientificNotation: {
+          decimalPlaces: 3,
+        },
+      },
+      `5.500e+1`,
+    ],
+  ])('toFormattedValue Test - ', (value, format, expected) => {
+    test(`format aggregate data`, () => {
+      expect(toFormattedValue(value, format as IFieldFormatConfig)).toEqual(
+        expected,
+      );
+    });
+  });
+
+  describe.each([
+    [
+      undefined,
+      undefined,
+      `[unknown]: -`,
+    ],
+    [
+      {
+        aggregate: "",
+        colName: 'name',
+        type: 'STRING',
+        category: 'field',
+      },
+      55,
+      `name: 55`,
+    ],
+    [
+      {
+        aggregate: "SUM",
+        colName: 'name',
+        type: 'STRING',
+        category: 'field',
+      },
+      55,
+      `SUM(name): 55`,
+    ],
+    [
+      {
+        format: {
+          type: 'scientificNotation',
+          scientificNotation: {
+            decimalPlaces: 3,
+          },
+        },
+        aggregate: "SUM",
+        colName: 'name',
+        type: 'STRING',
+        category: 'field',
+      },
+      55,
+      `SUM(name): 5.500e+1`,
+    ],
+  ])('valueFormatter Test - ', (config, value, expected) => {
+    test(`Get chart render string with field name and value`, () => {
+      expect(valueFormatter(config as ChartDataSectionField, value)).toEqual(
+        expected,
+      );
+    });
+  });
 });