Merge pull request #928 from qxqzx13/dev

fix table number error and add scorecard metrics condition style
running-elephant · Mar 4, 2022 · 68bcf02 · 68bcf02
2 parents 29ff6f1 + b17c1f2
commit 68bcf02
Show file tree

Hide file tree

Showing 22 changed files with 999 additions and 153 deletions.
diff --git a/frontend/src/app/components/ChartGraph/BasicTableChart/BasicTableChart.tsx b/frontend/src/app/components/ChartGraph/BasicTableChart/BasicTableChart.tsx
@@ -35,7 +35,7 @@ import AntdTableWrapper from './AntdTableWrapper';
 import {
   getCustomBodyCellStyle,
   getCustomBodyRowStyle,
-} from './conditionStyle';
+} from './conditionalStyle';
 import Config from './config';
 import { ResizableTitle, TableComponentsTd } from './TableComponents';
 
@@ -165,6 +165,7 @@ class BasicTableChart extends ReactChart {
     const tableColumns = this.getColumns(
       mixedSectionConfigRows,
       styleConfigs,
+      settingConfigs,
       chartDataSet,
       context,
     );
@@ -235,6 +236,7 @@ class BasicTableChart extends ReactChart {
     return this.getColumns(
       mixedSectionConfigRows,
       styleConfigs,
+      settingConfigs,
       chartDataSet,
       context,
     );
@@ -511,15 +513,18 @@ class BasicTableChart extends ReactChart {
       ['column', 'modal', 'list'],
       'rows',
     );
-    let allConditionStyle: any[] = [];
+    let allConditionalStyle: any[] = [];
     getAllColumnListInfo?.forEach(info => {
-      const [getConditionStyleValue] = getStyles(
+      const [getConditionalStyleValue] = getStyles(
         info.rows,
-        ['conditionStyle'],
-        ['conditionStylePanel'],
+        ['conditionalStyle'],
+        ['conditionalStylePanel'],
       );
-      if (Array.isArray(getConditionStyleValue)) {
-        allConditionStyle = [...allConditionStyle, ...getConditionStyleValue];
+      if (Array.isArray(getConditionalStyleValue)) {
+        allConditionalStyle = [
+          ...allConditionalStyle,
+          ...getConditionalStyleValue,
+        ];
       }
     });
     return {
@@ -557,14 +562,14 @@ class BasicTableChart extends ReactChart {
         cell: props => {
           const { style, key, rowData, ...rest } = props;
           const uid = props.uid;
-          const [conditionStyle] = getStyles(
+          const [conditionalStyle] = getStyles(
             getAllColumnListInfo,
-            [uid, 'conditionStyle'],
-            ['conditionStylePanel'],
+            [uid, 'conditionalStyle'],
+            ['conditionalStylePanel'],
           );
           const conditionalCellStyle = getCustomBodyCellStyle(
             props?.cellValue,
-            conditionStyle,
+            conditionalStyle,
           );
           const sensitiveFieldName = Object.keys(rowData || {})?.[0];
           return (
@@ -581,7 +586,7 @@ class BasicTableChart extends ReactChart {
           // NOTE: rowData is case sensitive row keys object
           const rowStyle = getCustomBodyRowStyle(
             props.rowData,
-            allConditionStyle,
+            allConditionalStyle,
           );
           return <tr {...rest} style={Object.assign(style || {}, rowStyle)} />;
         },
@@ -618,6 +623,7 @@ class BasicTableChart extends ReactChart {
   protected getColumns(
     mixedSectionConfigRows,
     styleConfigs,
+    settingConfigs,
     chartDataSet,
     context,
   ) {
@@ -631,6 +637,7 @@ class BasicTableChart extends ReactChart {
       ['header', 'modal'],
       ['tableHeaders'],
     );
+    const [pageSize] = getStyles(settingConfigs, ['paging'], ['pageSize']);
 
     const columnsList =
       !tableHeaderStyles || tableHeaderStyles.length === 0
@@ -655,11 +662,8 @@ class BasicTableChart extends ReactChart {
                 ?.columnWidthValue || 0,
             fixed: leftFixedColumns || rightFixedColumns ? 'left' : null,
             render: (value, row, rowIndex) => {
-              return (
-                (this.pageInfo.pageNo - 1) * this.pageInfo.pageSize +
-                rowIndex +
-                1
-              );
+              const pageNo = this.pageInfo?.pageNo || 1;
+              return (pageNo - 1) * (pageSize || 100) + rowIndex + 1;
             },
           } as any,
         ]

diff --git a/...rtGraph/BasicTableChart/conditionStyle.ts → ...Graph/BasicTableChart/conditionalStyle.ts b/...rtGraph/BasicTableChart/conditionStyle.ts → ...Graph/BasicTableChart/conditionalStyle.ts
@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { ConditionStyleFormValues } from 'app/components/FormGenerator/Customize/ConditionStylePanel';
-import { OperatorTypes } from 'app/components/FormGenerator/Customize/ConditionStylePanel/types';
+import { ConditionalStyleFormValues } from 'app/components/FormGenerator/Customize/ConditionalStyle';
+import { OperatorTypes } from 'app/components/FormGenerator/Customize/ConditionalStyle/types';
 import { CSSProperties } from 'react';
 
 const isMatchedTheCondition = (
@@ -101,9 +101,9 @@ const deleteUndefinedProps = props => {
 
 export const getCustomBodyCellStyle = (
   cellValue: any,
-  conditionStyle: ConditionStyleFormValues[],
+  conditionalStyle: ConditionalStyleFormValues[],
 ): CSSProperties => {
-  const currentConfigs = getTheSameRange(conditionStyle, 'cell');
+  const currentConfigs = getTheSameRange(conditionalStyle, 'cell');
   if (!currentConfigs?.length) {
     return {};
   }
@@ -126,10 +126,10 @@ export const getCustomBodyCellStyle = (
 
 export const getCustomBodyRowStyle = (
   rowRecord: { [k in string]: any },
-  conditionStyle: ConditionStyleFormValues[],
+  conditionalStyle: ConditionalStyleFormValues[],
 ): CSSProperties => {
-  const currentConfigs: ConditionStyleFormValues[] = getTheSameRange(
-    conditionStyle,
+  const currentConfigs: ConditionalStyleFormValues[] = getTheSameRange(
+    conditionalStyle,
     'row',
   );
   if (!currentConfigs?.length) {

diff --git a/frontend/src/app/components/ChartGraph/BasicTableChart/config.ts b/frontend/src/app/components/ChartGraph/BasicTableChart/config.ts
@@ -55,7 +55,7 @@ const config: ChartConfig = {
       ],
     },
     {
-      label: 'column.conditionStyle',
+      label: 'column.conditionalStyle',
       key: 'column',
       comType: 'group',
       rows: [
@@ -95,15 +95,15 @@ const config: ChartConfig = {
                 comType: 'group',
                 rows: [
                   {
-                    label: 'column.conditionStyle',
-                    key: 'conditionStyle',
+                    label: 'column.conditionalStyle',
+                    key: 'conditionalStyle',
                     comType: 'group',
                     options: { expand: true },
                     rows: [
                       {
-                        label: 'column.conditionStylePanel',
-                        key: 'conditionStylePanel',
-                        comType: 'conditionStylePanel',
+                        label: 'column.conditionalStylePanel',
+                        key: 'conditionalStylePanel',
+                        comType: 'conditionalStylePanel',
                       },
                     ],
                   },
@@ -261,8 +261,8 @@ const config: ChartConfig = {
           sortAndFilter: '排序与过滤',
           enableSort: '开启列排序',
           basicStyle: '基础样式',
-          conditionStyle: '条件样式',
-          conditionStylePanel: '条件样式配置器',
+          conditionalStyle: '条件样式',
+          conditionalStylePanel: '条件样式配置器',
           backgroundColor: '背景颜色',
           align: '对齐方式',
           enableFixedCol: '开启固定列宽',
@@ -304,8 +304,8 @@ const config: ChartConfig = {
           sortAndFilter: 'Sort and Filter',
           enableSort: 'Enable Sort',
           basicStyle: 'Baisc Style',
-          conditionStyle: 'Column Condition Style',
-          conditionStylePanel: 'Condition Style Panel',
+          conditionalStyle: 'Column Conditional Style',
+          conditionalStylePanel: 'Conditional Style Panel',
           backgroundColor: 'Background Color',
           align: 'Align',
           enableFixedCol: 'Enable Fixed Column',

diff --git a/frontend/src/app/components/ChartGraph/MingXiTableChart/config.ts b/frontend/src/app/components/ChartGraph/MingXiTableChart/config.ts
@@ -56,7 +56,7 @@ const config: ChartConfig = {
       ],
     },
     {
-      label: 'column.conditionStyle',
+      label: 'column.conditionalStyle',
       key: 'column',
       comType: 'group',
       rows: [
@@ -127,15 +127,15 @@ const config: ChartConfig = {
                     ],
                   },
                   {
-                    label: 'column.conditionStyle',
-                    key: 'conditionStyle',
+                    label: 'column.conditionalStyle',
+                    key: 'conditionalStyle',
                     comType: 'group',
                     options: { expand: true },
                     rows: [
                       {
-                        label: 'column.conditionStylePanel',
-                        key: 'conditionStylePanel',
-                        comType: 'conditionStylePanel',
+                        label: 'column.conditionalStylePanel',
+                        key: 'conditionalStylePanel',
+                        comType: 'conditionalStylePanel',
                       },
                     ],
                   },
@@ -424,8 +424,8 @@ const config: ChartConfig = {
           columnWidth: '列宽',
           columnStyle: '列样式',
           columnStylePanel: '列样式配置器',
-          conditionStyle: '条件样式',
-          conditionStylePanel: '条件样式配置器',
+          conditionalStyle: '条件样式',
+          conditionalStylePanel: '条件样式配置器',
           align: '对齐方式',
           enableFixedCol: '开启固定列宽',
           fixedColWidth: '固定列宽度设置',
@@ -491,8 +491,8 @@ const config: ChartConfig = {
           columnWidth: 'Column Width',
           columnStyle: 'Column Style',
           columnStylePanel: 'Column Style Panel',
-          conditionStyle: 'Condition Style',
-          conditionStylePanel: 'Condition Style Panel',
+          conditionalStyle: 'Conditional Style',
+          conditionalStylePanel: 'Conditional Style Panel',
           align: 'Align',
           enableFixedCol: 'Enable Fixed Column',
           fixedColWidth: 'Fixed Column Width',

diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts b/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts
@@ -100,8 +100,8 @@ const config: ChartConfig = {
     //             comType: 'group',
     //             rows: [
     //               {
-    //                 label: 'column.conditionStyle',
-    //                 key: 'conditionStyle',
+    //                 label: 'column.conditionalStyle',
+    //                 key: 'conditionalStyle',
     //                 comType: 'group',
     //                 options: { expand: true },
     //                 rows: [],

diff --git a/frontend/src/app/components/ChartGraph/Scorecard/Scorecard.tsx b/frontend/src/app/components/ChartGraph/Scorecard/Scorecard.tsx
@@ -23,8 +23,9 @@ import {
   getStyles,
   toFormattedValue,
   transformToDataSet,
-} from '../../../utils/chartHelper';
+} from 'app/utils/chartHelper';
 import ReactChart from '../models/ReactChart';
+import { getConditionalStyle } from './conditionalStyle';
 import Config from './config';
 import ScorecardAdapter from './ScorecardAdapter';
 
@@ -86,15 +87,35 @@ class Scorecard extends ReactChart {
       dataset.columns,
       dataConfigs,
     );
-
     const { padding, width } = this.getPaddingConfig(
       styleConfigs,
       context.width,
     );
     const fontSizeFn = this.getFontSize(width, styleConfigs);
-    const labelConfig = this.getLabelConfig(styleConfigs, fontSizeFn);
-    const dataConfig = this.getDataConfig(styleConfigs, fontSizeFn);
-
+    const aggColorConfig = this.getColorConfig(
+      styleConfigs,
+      aggregateConfigs,
+      chartDataSet,
+    );
+    const labelConfig = this.getLabelConfig(
+      aggColorConfig,
+      styleConfigs,
+      fontSizeFn,
+    );
+    const dataConfig = this.getDataConfig(
+      aggColorConfig,
+      styleConfigs,
+      fontSizeFn,
+    );
+    const data = [
+      {
+        label: getColumnRenderName(aggregateConfigs[0]),
+        value: toFormattedValue(
+          chartDataSet?.[0]?.getCell?.(aggregateConfigs[0]),
+          aggregateConfigs[0]?.format,
+        ),
+      },
+    ];
     return {
       context: {
         width: context.width,
@@ -103,22 +124,37 @@ class Scorecard extends ReactChart {
       dataConfig,
       labelConfig,
       padding,
-      data: {
-        label: getColumnRenderName(aggregateConfigs[0]),
-        value: toFormattedValue(
-          chartDataSet?.[0]?.getCell?.(aggregateConfigs[0]),
-          aggregateConfigs[0]?.format,
-        ),
-      },
+      data,
+      background: aggColorConfig?.[0]?.backgroundColor || 'transparent',
     };
   }
 
-  getDataConfig(style, fontSizeFn) {
+  getColorConfig(style, aggConfig, chartDataSet) {
+    const [conditionalStylePanel] = getStyles(
+      style,
+      ['scorecardConditionalStyle', 'modal'],
+      ['conditionalStylePanel'],
+    );
+    return aggConfig.map(ac =>
+      getConditionalStyle(
+        chartDataSet?.[0]?.getCell?.(ac),
+        conditionalStylePanel,
+        ac.uid,
+      ),
+    );
+  }
+
+  getDataConfig(aggColorConfig, style, fontSizeFn) {
     const [font] = getStyles(style, ['data'], ['font']);
-    return {
-      fontSize: fontSizeFn(['data']),
-      ...font,
-    };
+    return [
+      {
+        font: {
+          fontSize: fontSizeFn(['data']),
+          ...font,
+          color: aggColorConfig?.[0]?.color || font.color,
+        },
+      },
+    ];
   }
 
   getFontSize(width, style) {
@@ -135,7 +171,7 @@ class Scorecard extends ReactChart {
     };
   }
 
-  getLabelConfig(style, fontSizeFn) {
+  getLabelConfig(aggColorConfig, style, fontSizeFn) {
     const [show, font, position, alignment] = getStyles(
       style,
       ['label'],
@@ -146,6 +182,7 @@ class Scorecard extends ReactChart {
       font: {
         fontSize: fontSizeFn(['label']),
         ...font,
+        color: aggColorConfig?.[0]?.color || font.color,
       },
       position,
       alignment,