refactor: ♻️ separate TableSheet and PivotSheet from the SpreadSheet …

…and close  #301 (#310)

* refactor: ♻️ add TableSheet and PivotSheet based on the SpreadSheet

* refactor: ♻️ remove the mode from S2Options

* chore: ✅ add test for checking sheetType switch

* chore: ✏️ correct type defination

* fix: optimize the pagination

README.en-US.md

@@ -138,12 +138,12 @@ const s2options = {
 ```
 
 ```ts
-import { SpreadSheet } from '@antv/s2';
+import { PivotSheet } from '@antv/s2';
 import '@antv/s2/dist/s2.min.css'
 
 const container = document.getElementById('container');
 
-const s2 = new SpreadSheet(container, s2DataCfg, s2options)
+const s2 = new PivotSheet(container, s2DataCfg, s2options)
 
 s2.render()
 ```

README.md

@@ -134,12 +134,12 @@ const s2options = {
 ```
 
 ```ts
-import { SpreadSheet } from '@antv/s2';
+import { PivotSheet } from '@antv/s2';
 import '@antv/s2/dist/s2.min.css'
 
 const container = document.getElementById('container');
 
-const s2 = new SpreadSheet(container, s2DataConfig, s2options)
+const s2 = new PivotSheet(container, s2DataConfig, s2options)
 
 s2.render()
 ```

packages/s2-core/README.en-US.md

@@ -138,12 +138,12 @@ const s2options = {
 ```
 
 ```ts
-import { SpreadSheet } from '@antv/s2';
+import { PivotSheet } from '@antv/s2';
 import '@antv/s2/dist/s2.min.css'
 
 const container = document.getElementById('container');
 
-const s2 = new SpreadSheet(container, s2DataCfg, s2options)
+const s2 = new PivotSheet(container, s2DataCfg, s2options)
 
 s2.render()
 ```

packages/s2-core/README.md

@@ -135,12 +135,12 @@ const s2options = {
 ```
 
 ```ts
-import { SpreadSheet } from '@antv/s2';
+import { PivotSheet } from '@antv/s2';
 import '@antv/s2/dist/s2.min.css'
 
 const container = document.getElementById('container');
 
-const s2 = new SpreadSheet(container, s2DataConfig, s2options)
+const s2 = new PivotSheet(container, s2DataConfig, s2options)
 
 s2.render()
 ```

packages/s2-core/__tests__/bugs/issue-285-spec.tsx

@@ -30,7 +30,7 @@ function MainLayout() {
         dataCfg={dataCfg}
         options={{}}
         themeCfg={{ name: 'default' }}
-        forceUpdate={true}
+        forceUpdateDataCfg={true}
         header={
           <Switch
             checkedChildren="有列头"

packages/s2-core/__tests__/spreadsheet/custom-tree-header-spec.tsx

@@ -3,22 +3,19 @@ import 'antd/dist/antd.min.css';
 import ReactDOM from 'react-dom';
 import React from 'react';
 import { getContainer } from '../util/helpers';
-import {
-  S2DataConfig,
-  S2Options,
-  SheetComponent,
-  SpreadSheet,
-} from '../../src';
 import { customTreeItems } from '../data/custom-tree-items';
 import { dataCustomTrees } from '../data/data-custom-trees';
+import { PivotSheet } from '@/sheet-type';
+import { S2DataConfig, S2Options } from '@/common/interface';
+import { SheetComponent } from '@/components';
 import { transformCustomTreeItems } from '@/utils/layout/transform-custom-tree-items';
 
 const getSpreadSheet = (
   dom: string | HTMLElement,
   dataCfg: S2DataConfig,
   options: S2Options,
 ) => {
-  return new SpreadSheet(dom, dataCfg, options);
+  return new PivotSheet(dom, dataCfg, options);
 };
 
 const getDataCfg = () => {
@@ -50,7 +47,6 @@ const getOptions = () => {
     hierarchyType: 'customTree',
     hierarchyCollapse: false,
     freezeRowHeader: false,
-    mode: 'pivot',
     style: {
       treeRowsWidth: 120,
       collapsedRows: {},

packages/s2-core/__tests__/spreadsheet/layout-hooks-spec.tsx

@@ -2,17 +2,18 @@ import { act } from 'react-dom/test-utils';
 import 'antd/dist/antd.min.css';
 import ReactDOM from 'react-dom';
 import React from 'react';
+import { getContainer, getMockData } from '../util/helpers';
 import {
   GetCellMeta,
   Node,
   S2DataConfig,
   S2Options,
   SheetComponent,
   SpreadSheet,
+  PivotSheet,
   SpreadSheetFacetCfg,
   ViewMeta,
-} from '../../src';
-import { getContainer, getMockData } from '../util/helpers';
+} from '@/index';
 import { LayoutHierarchyReturnType } from '@/common/interface/hooks';
 import { generateId } from '@/utils/layout/generate-id';
 const data = getMockData('../data/tableau-supermarket.csv');
@@ -23,7 +24,7 @@ const getSpreadSheet = (
   dataCfg: S2DataConfig,
   options: S2Options,
 ) => {
-  innerSS = new SpreadSheet(dom, dataCfg, options);
+  innerSS = new PivotSheet(dom, dataCfg, options);
   return innerSS;
 };
 
@@ -160,7 +161,6 @@ const getOptions = () => {
     hierarchyType: 'grid',
     hierarchyCollapse: false,
     freezeRowHeader: true,
-    mode: 'pivot',
     style: {
       treeRowsWidth: 120,
       collapsedRows: {},

packages/s2-core/__tests__/spreadsheet/merge-cells-spec.tsx

@@ -12,7 +12,8 @@ import {
   S2DataConfig,
   S2Options,
   SheetComponent,
-  SpreadSheet,
+  PivotSheet,
+  SheetType,
 } from '@/index';
 
 let data = getMockData('../data/tableau-supermarket.csv');
@@ -30,7 +31,7 @@ const getSpreadSheet = (
   dataCfg: S2DataConfig,
   options: S2Options,
 ) => {
-  return new SpreadSheet(dom, dataCfg, options);
+  return new PivotSheet(dom, dataCfg, options);
 };
 
 const baseDataCfg: S2DataConfig = {
@@ -103,7 +104,6 @@ const baseOptions = {
   hierarchyCollapse: false,
   showSeriesNumber: true,
   freezeRowHeader: false,
-  mode: 'pivot',
   valueInCols: true,
   conditions: {
     text: [],
@@ -339,31 +339,31 @@ const tabularOptions = {
   ],
 } as S2Options;
 
-const getDataCfg = (sheetType: 'base' | 'tabular') => {
+const getDataCfg = (sheetType: SheetType) => {
   switch (sheetType) {
     case 'tabular':
       return tabularDataCfg;
-    case 'base':
+    case 'pivot':
     default:
       return baseDataCfg;
   }
 };
 
-const getOptions = (sheetType: 'base' | 'tabular') => {
+const getOptions = (sheetType: SheetType) => {
   switch (sheetType) {
     case 'tabular':
       return tabularOptions;
-    case 'base':
+    case 'pivot':
     default:
       return baseOptions;
   }
 };
 
 function MainLayout() {
-  const [sheetType, setSheetType] = React.useState<'base' | 'tabular'>('base');
-  const [options, setOptions] = React.useState<S2Options>(getOptions('base'));
+  const [sheetType, setSheetType] = React.useState<SheetType>('pivot');
+  const [options, setOptions] = React.useState<S2Options>(getOptions('pivot'));
   const [dataCfg, setDataCfg] = React.useState<S2DataConfig>(
-    getDataCfg('base'),
+    getDataCfg('pivot'),
   );
 
   let sheet;
@@ -408,7 +408,7 @@ function MainLayout() {
   };
 
   const onCheckChanged = (checked) => {
-    const type = checked ? 'base' : 'tabular';
+    const type = checked ? 'pivot' : 'tabular';
     setSheetType(type);
     setDataCfg(getDataCfg(type));
     setOptions(getOptions(type));

packages/s2-core/__tests__/spreadsheet/multiple-values-cell-spec.tsx

@@ -9,6 +9,7 @@ import {
   S2Options,
   SheetComponent,
   SpreadSheet,
+  PivotSheet,
 } from '../../src';
 import {
   multipleDataWithBottom,
@@ -23,7 +24,7 @@ const getSpreadSheet = (
   dataCfg: S2DataConfig,
   options: S2Options,
 ) => {
-  sheet = new SpreadSheet(dom, dataCfg, options);
+  sheet = new PivotSheet(dom, dataCfg, options);
   (window as any).sheet = sheet;
   return sheet;
 };
@@ -84,7 +85,6 @@ const getOptions = (): S2Options => {
     hierarchyCollapse: false,
     showSeriesNumber: true,
     freezeRowHeader: false,
-    mode: 'pivot',
     conditions: {
       text: [],
       interval: [

packages/s2-core/__tests__/spreadsheet/part-drill-down-spec.tsx

@@ -52,7 +52,6 @@ const getOptions = () => {
     hierarchyCollapse: false,
     showSeriesNumber: false,
     freezeRowHeader: false,
-    mode: 'pivot',
     style: {
       treeRowsWidth: 100,
       collapsedRows: {},

packages/s2-core/__tests__/spreadsheet/pressure-test-spec.tsx

@@ -7,7 +7,7 @@ import {
   S2DataConfig,
   S2Options,
   SheetComponent,
-  SpreadSheet,
+  PivotSheet,
 } from '../../src';
 import { getContainer } from '../util/helpers';
 
@@ -29,7 +29,7 @@ const getSpreadSheet = (
   dataCfg: S2DataConfig,
   options: S2Options,
 ) => {
-  return new SpreadSheet(dom, dataCfg, options);
+  return new PivotSheet(dom, dataCfg, options);
 };
 
 const getDataCfg = () => {
@@ -61,7 +61,6 @@ const getOptions = () => {
     hierarchyCollapse: false,
     showSeriesNumber: false,
     freezeRowHeader: false,
-    mode: 'pivot',
     totals: {
       row: {
         showGrandTotals: true,

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

@@ -3,18 +3,27 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { getContainer } from '../util/helpers';
-import { SheetEntry } from '../util/sheet-entry';
+import { SheetEntry, assembleDataCfg } from '../util/sheet-entry';
+// import * as tableData from '../data/mock-dataset.json';
 import { CustomTooltip } from './custom/custom-tooltip';
-import { ThemeName } from '@/index';
+import { ThemeName, SheetType } from '@/index';
+
+const tableDataFields = {
+  fields: {
+    columns: ['province', 'city', 'type', 'sub_type', 'price'],
+    valueInCols: true,
+  },
+};
 
 function MainLayout() {
+  const [dataCfg, setDataCfg] = React.useState(assembleDataCfg({}));
   const [render, setRender] = React.useState(true);
-
+  const [sheetType, setSheetType] = React.useState<SheetType>('pivot');
   const [spotLight, setSpotLight] = React.useState(true);
+  const [isPivotSheet, setIsPivotSheet] = React.useState(true);
   const [hoverHighlight, setHoverHighlight] = React.useState(true);
   const [showPagination, setShowPagination] = React.useState(false);
   const [showTooltip, setShowTooltip] = React.useState(true);
-
   const [themeName, setThemeName] = React.useState<ThemeName>('default');
 
   const onToggleRender = () => {
@@ -38,6 +47,19 @@ function MainLayout() {
     selectedCellsSpotlight: spotLight,
     hoverHighlight: hoverHighlight,
   };
+
+  const onSheetTypeChange = (checked) => {
+    setIsPivotSheet(checked);
+    // 透视表
+    if (checked) {
+      setSheetType('pivot');
+      setDataCfg(assembleDataCfg({}));
+    } else {
+      setSheetType('table');
+      setDataCfg(assembleDataCfg(tableDataFields));
+    }
+  };
+
   return (
     <div>
       <Space size="middle" style={{ marginBottom: 20 }}>
@@ -50,9 +72,10 @@ function MainLayout() {
       </Space>
       {render && (
         <SheetEntry
-          dataCfg={{}}
+          dataCfg={dataCfg}
           options={mergedOptions}
           themeCfg={{ name: themeName }}
+          sheetType={sheetType}
           header={
             <Space size="middle" style={{ marginBottom: 20 }}>
               <Radio.Group onChange={onRadioChange} defaultValue="default">
@@ -86,6 +109,12 @@ function MainLayout() {
                 checked={showTooltip}
                 onChange={setShowTooltip}
               />
+              <Switch
+                checkedChildren="透视表"
+                unCheckedChildren="明细表"
+                checked={isPivotSheet}
+                onChange={onSheetTypeChange}
+              />
             </Space>
           }
         />

packages/s2-core/__tests__/spreadsheet/table-sheet-spec.tsx

@@ -4,21 +4,21 @@ import 'antd/dist/antd.min.css';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
+import { getContainer, getMockData } from '../util/helpers';
 import {
   S2DataConfig,
   S2Event,
   S2Options,
   SheetComponent,
   SpreadSheet,
-} from '../../src';
-import { getContainer, getMockData } from '../util/helpers';
-
+  TableSheet,
+} from '@/index';
 const data = getMockData('../data/tableau-supermarket.csv');
 
 const getSpreadSheet =
   (ref) =>
   (dom: string | HTMLElement, dataCfg: S2DataConfig, options: S2Options) => {
-    const s2 = new SpreadSheet(dom, dataCfg, options);
+    const s2 = new TableSheet(dom, dataCfg, options);
     ref.current = s2;
     return s2;
   };
@@ -85,7 +85,6 @@ function MainLayout() {
     width: 800,
     height: 600,
     showSeriesNumber: true,
-    mode: 'table',
     enableCopy: true,
     style: {
       colCfg: {
@@ -141,6 +140,7 @@ function MainLayout() {
         dataCfg={dataCfg}
         adaptive={false}
         options={options}
+        sheetType={'table'}
         spreadsheet={getSpreadSheet(s2Ref)}
       />
     </div>