diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx b/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx index bddea80eb..1cd96e472 100644 --- a/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx +++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx @@ -16,47 +16,45 @@ * limitations under the License. */ -import { S2Theme } from '@antv/s2'; import { SheetComponent } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; import { FC, memo } from 'react'; import styled from 'styled-components/macro'; import { FONT_SIZE_LABEL } from 'styles/StyleConstants'; +import { AndvS2Config } from './types'; -const AntVS2Wrapper: FC<{ - dataCfg; - options; - theme?: S2Theme; -}> = memo(({ dataCfg, options, theme }) => { - if (!dataCfg) { - return
; - } +const AntVS2Wrapper: FC = memo( + ({ dataCfg, options, theme, palette }) => { + if (!dataCfg) { + return
; + } - const onDataCellHover = ({ event, viewMeta }) => { - viewMeta.spreadsheet.tooltip.show({ - position: { - x: event.clientX, - y: event.clientY, - }, - content: ( - - ), - }); - }; + const onDataCellHover = ({ event, viewMeta }) => { + viewMeta.spreadsheet.tooltip.show({ + position: { + x: event.clientX, + y: event.clientY, + }, + content: ( + + ), + }); + }; - return ( - - ); -}); + return ( + + ); + }, +); const TableDataCellTooltip: FC<{ datas?: object; @@ -72,7 +70,11 @@ const TableDataCellTooltip: FC<{ .map(m => { const uniqKey = m?.field; if (uniqKey in datas) { - return
  • {`${m?.name}: ${m?.formatter(datas[uniqKey])}`}
    • ; + return ( +
  • {`${m?.name}: ${m?.formatter( + datas[uniqKey], + )}`}
    • + ); } return null; }) diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx b/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx index 50f7179b8..ecfccff02 100644 --- a/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx +++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx @@ -16,10 +16,12 @@ * limitations under the License. */ +import { Data, DefaultCellTheme, Meta, SortParam, Style } from '@antv/s2'; import { ChartDataSectionType, SortActionType } from 'app/constants'; import ReactChart from 'app/models/ReactChart'; import { ChartConfig, + ChartDataConfig, ChartDataSectionField, ChartStyleConfig, } from 'app/types/ChartConfig'; @@ -30,9 +32,10 @@ import { toFormattedValue, transformToDataSet, } from 'app/utils/chartHelper'; +import { PIVOT_THEME_LIST } from '../../FormGenerator/Customize/PivotSheetTheme/theme'; import AntVS2Wrapper from './AntVS2Wrapper'; import Config from './config'; -import { RowAndColStyle, TableSorters, TextStyle } from './types'; +import { AndvS2Config } from './types'; class PivotSheetChart extends ReactChart { static icon = ``; @@ -78,12 +81,18 @@ class PivotSheetChart extends ReactChart { } } - getOptions(context, dataset?: ChartDataSetDTO, config?: ChartConfig) { + getOptions( + context, + dataset?: ChartDataSetDTO, + config?: ChartConfig, + ): AndvS2Config { if (!dataset || !config) { - return {}; + return { + options: {}, + }; } - const dataConfigs = config.datas || []; + const dataConfigs: ChartDataConfig[] = config.datas || []; const styleConfigs = config.styles || []; const settingConfigs = config.settings || []; const chartDataSet = transformToDataSet( @@ -92,21 +101,21 @@ class PivotSheetChart extends ReactChart { dataConfigs, ); - const rowSectionConfigRows = dataConfigs + const rowSectionConfigRows: ChartDataSectionField[] = dataConfigs .filter(c => c.type === ChartDataSectionType.GROUP) .filter(c => c.key === 'row') .flatMap(config => config.rows || []); - const columnSectionConfigRows = dataConfigs + const columnSectionConfigRows: ChartDataSectionField[] = dataConfigs .filter(c => c.type === ChartDataSectionType.GROUP) .filter(c => c.key === 'column') .flatMap(config => config.rows || []); - const metricsSectionConfigRows = dataConfigs + const metricsSectionConfigRows: ChartDataSectionField[] = dataConfigs .filter(c => c.type === ChartDataSectionType.AGGREGATE) .flatMap(config => config.rows || []); - const infoSectionConfigRows = dataConfigs + const infoSectionConfigRows: ChartDataSectionField[] = dataConfigs .filter(c => c.type === ChartDataSectionType.INFO) .flatMap(config => config.rows || []); @@ -169,10 +178,12 @@ class PivotSheetChart extends ReactChart { reverseLayout: Boolean(rowTotalPosition), showSubTotals: Boolean(enableRowSubTotal), reverseSubLayout: Boolean(rowSubTotalPosition), - subTotalsDimensions: rowSectionConfigRows.map( - chartDataSet.getFieldKey, - chartDataSet, - )?.[0], + subTotalsDimensions: [ + rowSectionConfigRows.map( + chartDataSet.getFieldKey, + chartDataSet, + )?.[0], + ], label: context.translator('summary.total'), subLabel: context.translator('summary.subTotal'), calcTotals: { @@ -184,10 +195,12 @@ class PivotSheetChart extends ReactChart { reverseLayout: Boolean(colTotalPosition), showSubTotals: Boolean(enableColSubTotal), reverseSubLayout: Boolean(colSubTotalPosition), - subTotalsDimensions: columnSectionConfigRows.map( - chartDataSet.getFieldKey, - chartDataSet, - )?.[0], + subTotalsDimensions: [ + columnSectionConfigRows.map( + chartDataSet.getFieldKey, + chartDataSet, + )?.[0], + ], label: context.translator('summary.total'), subLabel: context.translator('summary.subTotal'), calcTotals: { @@ -224,10 +237,11 @@ class PivotSheetChart extends ReactChart { return { field: chartDataSet.getFieldKey(config), name: getColumnRenderName(config), - formatter: value => toFormattedValue(value, config?.format), - }; + formatter: (value?: string | number) => + toFormattedValue(value, config?.format), + } as Meta; }), - data: chartDataSet?.map(row => row.convertToObject()), + data: chartDataSet?.map(row => row.convertToObject()) as Data[], sortParams: this.getTableSorters( rowSectionConfigRows .concat(columnSectionConfigRows) @@ -248,16 +262,31 @@ class PivotSheetChart extends ReactChart { colCell: this.getHeaderStyle(styleConfigs), rowCell: this.getHeaderStyle(styleConfigs), dataCell: this.getBodyStyle(styleConfigs), + background: { + opacity: 0, + }, + }, + palette: { + basicColors: this.getThemeColorList(styleConfigs), + semanticColors: { + red: '#FF4D4F', + green: '#29A294', + }, }, }; } + private getThemeColorList(style: ChartStyleConfig[]): Array { + const [basicColors] = getStyles(style, ['theme'], ['themeType']); + return basicColors?.colors || PIVOT_THEME_LIST[basicColors?.themeType || 0]; + } + private getRowAndColStyle( style: ChartStyleConfig[], metricsSectionConfigRows: ChartDataSectionField[], columnSectionConfigRows: ChartDataSectionField[], chartDataSet: IChartDataSet, - ): RowAndColStyle { + ): Partial