@antv/s2-react
Version:
use S2 with react
65 lines • 3.04 kB
JavaScript
import { __rest } from "tslib";
import { customMerge } from '@antv/s2';
import { isEmpty, size } from 'lodash';
import React from 'react';
import { BaseSheet } from '../base-sheet';
import { StrategySheetColCell, StrategySheetDataCell } from './custom-cell';
import { StrategySheetDataSet } from './custom-data-set';
import { StrategySheetColCellTooltip, StrategySheetDataCellTooltip, StrategySheetRowCellTooltip, } from './custom-tooltip';
/**
* 趋势分析表特性：
* 1. 维度为空时默认为自定义目录树结构
* 2. 单指标时数值置于列头，且隐藏指标列头
* 3. 多指标时数值置于行头，不隐藏指标列头
* 4. 支持 KPI 进度 (子弹图)
* 5. 行头, 数值单元格不支持多选
*/
export const StrategySheet = React.memo((props) => {
const { options, themeCfg, dataCfg } = props, restProps = __rest(props, ["options", "themeCfg", "dataCfg"]);
const strategySheetOptions = React.useMemo(() => {
var _a;
if (isEmpty(dataCfg)) {
return null;
}
// 单指标非自定义树结构隐藏指标列
const shouldHideValue = size((_a = dataCfg === null || dataCfg === void 0 ? void 0 : dataCfg.fields) === null || _a === void 0 ? void 0 : _a.values) === 1;
return {
hierarchyType: 'tree',
dataCell: (viewMeta, spreadsheet) => new StrategySheetDataCell(viewMeta, spreadsheet),
colCell: (node, spreadsheet, headerConfig) => new StrategySheetColCell(node, spreadsheet, headerConfig),
dataSet: (spreadSheet) => new StrategySheetDataSet(spreadSheet),
showDefaultHeaderActionIcon: false,
style: {
colCell: {
hideValue: shouldHideValue,
},
},
interaction: {
autoResetSheetStyle: true,
// 趋势分析表禁用 刷选, 多选, 区间多选
brushSelection: false,
selectedCellMove: false,
multiSelection: false,
rangeSelection: false,
},
tooltip: {
operation: {
hiddenColumns: true,
},
rowCell: {
content: (cell) => React.createElement(StrategySheetRowCellTooltip, { cell: cell }),
},
colCell: {
content: (cell) => React.createElement(StrategySheetColCellTooltip, { cell: cell }),
},
dataCell: {
content: (cell) => React.createElement(StrategySheetDataCellTooltip, { cell: cell }),
},
},
};
}, [dataCfg]);
const s2Options = React.useMemo(() => customMerge(strategySheetOptions, options), [options, strategySheetOptions]);
return (React.createElement(BaseSheet, Object.assign({ options: s2Options, themeCfg: themeCfg, dataCfg: dataCfg }, restProps)));
});
StrategySheet.displayName = 'StrategySheet';
//# sourceMappingURL=index.js.map