Merge pull request #2 from antvis/master

update fork

.eslintrc.js

@@ -34,7 +34,7 @@ module.exports = {
   },
   rules: {
     'prettier/prettier': [
-      1,
+      2,
       {
         endOfLine: 'lf',
         semi: true,
@@ -74,6 +74,7 @@ module.exports = {
         extensions: ['.ts', '.tsx', '.js', '.jsx'],
       },
     ],
+    'react/sort-comp': 2,
     'react/display-name': 0,
     'react/prop-types': 0,
     'react/state-in-constructor': 0,

package.json

@@ -60,7 +60,7 @@
     "lint:style": "stylelint packages/**/*.less --syntax less",
     "lint:docs": "markdownlint '**/*.md'",
     "lint:word": "case-police '**/*.md'",
-    "lint:fix-word": "yarn lint:words --fix",
+    "lint:fix-word": "yarn lint:word --fix",
     "lint:fix": "yarn lint:fix-script && yarn lint:fix-style && yarn lint:fix-docs && yarn lint:fix-word",
     "lint:fix-script": "yarn lint:script --fix",
     "lint:fix-style": "yarn lint:style --fix",

packages/s2-core/__tests__/spreadsheet/scroll-spec.ts

@@ -419,7 +419,7 @@ describe('Scroll Tests', () => {
 
     s2.changeSheetSize(1000, 150); // 纵向滚动条
     s2.render(false);
-    expect(s2.facet.vScrollBar.getCanvasBBox().x).toBe(185);
+    expect(s2.facet.vScrollBar.getCanvasBBox().x).toBe(190);
 
     s2.setOptions({
       interaction: {

packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts

@@ -1,7 +1,8 @@
 import * as mockDataConfig from 'tests/data/simple-data.json';
 import { getContainer, sleep } from 'tests/util/helpers';
+import { omit, pick } from 'lodash';
 import { PivotSheet, TableSheet } from '@/sheet-type';
-import { S2Event, type S2Options } from '@/common';
+import { DEFAULT_OPTIONS, S2Event, type S2Options } from '@/common';
 
 const s2Options: S2Options = {
   width: 200,
@@ -272,4 +273,156 @@ describe('SpreadSheet Tests', () => {
       expect(container.querySelectorAll('canvas')).toHaveLength(1);
     });
   });
+
+  describe('Sheet Config Change Tests', () => {
+    let container: HTMLElement;
+
+    beforeAll(() => {
+      container = getContainer();
+    });
+
+    afterAll(() => {
+      container?.remove();
+    });
+
+    test('should update all Data Config when reset is true', () => {
+      const totalData = [
+        {
+          province: '浙江',
+          type: '笔',
+          price: 3,
+          cost: 6,
+        },
+      ];
+      const s2 = new PivotSheet(
+        container,
+        { ...mockDataConfig, totalData },
+        s2Options,
+      );
+      s2.render();
+
+      expect(s2.dataSet.totalData).toEqual([
+        {
+          $$extra$$: 'price',
+          $$value$$: 3,
+          cost: 6,
+          price: 3,
+          province: '浙江',
+          type: '笔',
+        },
+        {
+          $$extra$$: 'cost',
+          $$value$$: 6,
+          cost: 6,
+          price: 3,
+          province: '浙江',
+          type: '笔',
+        },
+      ]);
+      expect(s2.dataCfg.totalData).toEqual(totalData);
+
+      // 改变 totalData 为 undefined 再次渲染
+      s2.setDataCfg({ ...mockDataConfig, totalData: undefined }, true);
+      s2.render();
+
+      expect(s2.dataSet.totalData).toEqual([]);
+      expect(s2.dataCfg.fields).toEqual({
+        ...mockDataConfig.fields,
+        customTreeItems: [],
+      });
+      expect(s2.dataCfg.totalData).toEqual([]);
+      s2.destroy();
+    });
+
+    test('should update all Data Config when reset is false', () => {
+      const totalData = [
+        {
+          province: '浙江',
+          type: '笔',
+          price: 3,
+          cost: 6,
+        },
+      ];
+      const s2 = new PivotSheet(
+        container,
+        { ...mockDataConfig, totalData },
+        s2Options,
+      );
+      s2.render();
+
+      const totalDataSet = [
+        {
+          $$extra$$: 'price',
+          $$value$$: 3,
+          cost: 6,
+          price: 3,
+          province: '浙江',
+          type: '笔',
+        },
+        {
+          $$extra$$: 'cost',
+          $$value$$: 6,
+          cost: 6,
+          price: 3,
+          province: '浙江',
+          type: '笔',
+        },
+      ];
+
+      // 改变 totalData 为 undefined 再次渲染
+      s2.setDataCfg({ ...mockDataConfig, totalData: undefined }, false);
+      s2.render();
+
+      expect(s2.dataSet.totalData).toEqual(totalDataSet);
+      expect(s2.dataCfg.fields).toEqual({
+        ...mockDataConfig.fields,
+        customTreeItems: [],
+      });
+      expect(s2.dataCfg.totalData).toEqual(totalData);
+      s2.destroy();
+    });
+
+    test('should update all Options when reset is true', () => {
+      const s2 = new PivotSheet(container, mockDataConfig, s2Options);
+      s2.render();
+      const emitAttrs = ['width', 'height', 'hierarchyType', 'hdAdapter'];
+      const partialOptions = pick(s2.options, emitAttrs);
+      expect(partialOptions).toEqual(s2Options);
+
+      s2.setOptions(
+        {
+          width: 300,
+          hdAdapter: false,
+        },
+        true,
+      );
+      expect(pick(s2.options, emitAttrs)).toEqual({
+        height: DEFAULT_OPTIONS.height,
+        hierarchyType: DEFAULT_OPTIONS.hierarchyType,
+        width: 300,
+        hdAdapter: false,
+      });
+    });
+
+    test('should update all Options when reset is false', () => {
+      const s2 = new PivotSheet(container, mockDataConfig, s2Options);
+      s2.render();
+      const emitAttrs = ['width', 'height', 'hierarchyType', 'hdAdapter'];
+
+      s2.setOptions(
+        {
+          width: 300,
+          hdAdapter: false,
+        },
+        false,
+      );
+
+      expect(pick(s2.options, emitAttrs)).toEqual({
+        height: s2Options.height,
+        hierarchyType: s2Options.hierarchyType,
+        width: 300,
+        hdAdapter: false,
+      });
+    });
+  });
 });

packages/s2-core/__tests__/spreadsheet/spread-sheet-tree-mode-spec.ts

@@ -26,7 +26,7 @@ describe('SpreadSheet Tree Mode Tests', () => {
       s2.render();
 
       const rowsHierarchyWidth = s2.facet.layoutResult.rowsHierarchy.width;
-      expect(rowsHierarchyWidth).toEqual(120);
+      expect(Math.round(rowsHierarchyWidth)).toEqual(123);
 
       // 行头维度均更改为较长的 name
       const newDataCfg: S2DataConfig = {

packages/s2-core/__tests__/spreadsheet/theme-spec.ts

@@ -356,7 +356,7 @@ describe('SpreadSheet Theme Tests', () => {
 
         expectTextAlign({
           textAlign,
-          fontWight: 500,
+          fontWight: 700,
           customNodes: isRowCell ? rowTotalNodes : colTotalNodes,
         });
       },

packages/s2-core/__tests__/unit/cell/data-cell-spec.ts

@@ -7,6 +7,10 @@ import { PivotDataSet } from '@/data-set';
 import { SpreadSheet, PivotSheet } from '@/sheet-type';
 import { DataCell } from '@/cell';
 import type { PivotFacet } from '@/facet';
+import {
+  DEFAULT_FONT_COLOR,
+  REVERSE_FONT_COLOR,
+} from '@/common/constant/condition';
 
 const MockPivotSheet = PivotSheet as unknown as jest.Mock<PivotSheet>;
 const MockPivotDataSet = PivotDataSet as unknown as jest.Mock<PivotDataSet>;
@@ -54,11 +58,14 @@ describe('Data Cell Tests', () => {
     test('should return correct formatted value', () => {
       const formatter: Formatter = (_, data) => `${get(data, 'value') * 10}`;
       jest.spyOn(s2.dataSet, 'getFieldFormatter').mockReturnValue(formatter);
-
       const dataCell = new DataCell(meta, s2);
 
-      // @ts-ignore
-      expect(dataCell.textShape.attr('text')).toEqual('120');
+      expect(dataCell.getTextShape().attr('text')).toEqual('120');
+    });
+
+    test('should get correct text fill color', () => {
+      const dataCell = new DataCell(meta, s2);
+      expect(dataCell.getTextShape().attr('fill')).toEqual(DEFAULT_FONT_COLOR);
     });
   });
   describe('Condition Tests', () => {
@@ -118,7 +125,7 @@ describe('Data Cell Tests', () => {
               field: 'cost',
               mapping() {
                 return {
-                  fill: '#F7B46F',
+                  fill: '#fffae6',
                 };
               },
             },
@@ -130,7 +137,8 @@ describe('Data Cell Tests', () => {
         .getChildByIndex(0)
         // @ts-ignore
         .getChildByIndex(2);
-      expect(get(dataCell, 'backgroundShape.attrs.fill')).toEqual('#F7B46F');
+      expect(get(dataCell, 'backgroundShape.attrs.fill')).toEqual('#fffae6');
+      expect(get(dataCell, 'textShape.attrs.fill')).toEqual(DEFAULT_FONT_COLOR);
     });
 
     test('should draw condition interval shape', () => {
@@ -169,5 +177,79 @@ describe('Data Cell Tests', () => {
         cellWidth,
       );
     });
+
+    test('should draw REVERSE_FONT_COLOR on text when background low brightness and intelligentReverseTextColor is true', () => {
+      s2.setOptions({
+        conditions: {
+          background: [
+            {
+              field: 'cost',
+              mapping() {
+                return {
+                  fill: '#000000',
+                  intelligentReverseTextColor: true,
+                };
+              },
+            },
+          ],
+        },
+      });
+      s2.render();
+      const dataCell = s2.facet.panelGroup
+        .getChildByIndex(0)
+        // @ts-ignore
+        .getChildByIndex(2);
+      expect(get(dataCell, 'textShape.attrs.fill')).toEqual(REVERSE_FONT_COLOR);
+      expect(get(dataCell, 'backgroundShape.attrs.fill')).toEqual('#000000');
+    });
+
+    test('should draw DEFAULT_FONT_COLOR on text when background low brightness and intelligentReverseTextColor is false', () => {
+      s2.setOptions({
+        conditions: {
+          background: [
+            {
+              field: 'cost',
+              mapping() {
+                return {
+                  fill: '#000000',
+                };
+              },
+            },
+          ],
+        },
+      });
+      s2.render();
+      const dataCell = s2.facet.panelGroup
+        .getChildByIndex(0)
+        // @ts-ignore
+        .getChildByIndex(2);
+      expect(get(dataCell, 'textShape.attrs.fill')).toEqual(DEFAULT_FONT_COLOR);
+      expect(get(dataCell, 'backgroundShape.attrs.fill')).toEqual('#000000');
+    });
+
+    test('should draw DEFAULT_FONT_COLOR on text when background high brightness is and intelligentReverseTextColor is true', () => {
+      s2.setOptions({
+        conditions: {
+          background: [
+            {
+              field: 'cost',
+              mapping() {
+                return {
+                  fill: '#ffffff',
+                  intelligentReverseTextColor: true,
+                };
+              },
+            },
+          ],
+        },
+      });
+      s2.render();
+      const dataCell = s2.facet.panelGroup
+        .getChildByIndex(0)
+        // @ts-ignore
+        .getChildByIndex(2);
+      expect(get(dataCell, 'textShape.attrs.fill')).toEqual(DEFAULT_FONT_COLOR);
+      expect(get(dataCell, 'backgroundShape.attrs.fill')).toEqual('#ffffff');
+    });
   });
 });