Skip to content

Commit 916de2e

Browse files
scottsutscottsut
authored
Merge pull request #1200 from qxqzx13/dev
feat:(Chart) add pivotSheetChart theme
2 parents 8f19bcd + 9849958 commit 916de2e

File tree

13 files changed

+508
-117
lines changed

13 files changed

+508
-117
lines changed

‎frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,47 +16,45 @@
1616
* limitations under the License.
1717
*/
1818

19-
import { S2Theme } from '@antv/s2';
2019
import { SheetComponent } from '@antv/s2-react';
2120
import '@antv/s2-react/dist/style.min.css';
2221
import { FC, memo } from 'react';
2322
import styled from 'styled-components/macro';
2423
import { FONT_SIZE_LABEL } from 'styles/StyleConstants';
24+
import { AndvS2Config } from './types';
2525

26-
const AntVS2Wrapper: FC<{
27-
dataCfg;
28-
options;
29-
theme?: S2Theme;
30-
}> = memo(({ dataCfg, options, theme }) => {
31-
if (!dataCfg) {
32-
return <div></div>;
33-
}
26+
const AntVS2Wrapper: FC<AndvS2Config> = memo(
27+
({ dataCfg, options, theme, palette }) => {
28+
if (!dataCfg) {
29+
return <div></div>;
30+
}
3431

35-
const onDataCellHover = ({ event, viewMeta }) => {
36-
viewMeta.spreadsheet.tooltip.show({
37-
position: {
38-
x: event.clientX,
39-
y: event.clientY,
40-
},
41-
content: (
42-
<TableDataCellTooltip
43-
datas={viewMeta.data}
44-
meta={viewMeta.spreadsheet.dataCfg.meta}
45-
/>
46-
),
47-
});
48-
};
32+
const onDataCellHover = ({ event, viewMeta }) => {
33+
viewMeta.spreadsheet.tooltip.show({
34+
position: {
35+
x: event.clientX,
36+
y: event.clientY,
37+
},
38+
content: (
39+
<TableDataCellTooltip
40+
datas={viewMeta.data}
41+
meta={viewMeta.spreadsheet.dataCfg.meta}
42+
/>
43+
),
44+
});
45+
};
4946

50-
return (
51-
<StyledAntVS2Wrapper
52-
sheetType="pivot"
53-
dataCfg={dataCfg}
54-
options={options}
55-
themeCfg={{ theme }}
56-
onDataCellHover={onDataCellHover}
57-
/>
58-
);
59-
});
47+
return (
48+
<StyledAntVS2Wrapper
49+
sheetType="pivot"
50+
dataCfg={dataCfg}
51+
options={options}
52+
themeCfg={{ theme, palette }}
53+
onDataCellHover={onDataCellHover}
54+
/>
55+
);
56+
},
57+
);
6058

6159
const TableDataCellTooltip: FC<{
6260
datas?: object;
@@ -72,7 +70,11 @@ const TableDataCellTooltip: FC<{
7270
.map(m => {
7371
const uniqKey = m?.field;
7472
if (uniqKey in datas) {
75-
return <li>{`${m?.name}: ${m?.formatter(datas[uniqKey])}`}</li>;
73+
return (
74+
<li key={uniqKey}>{`${m?.name}: ${m?.formatter(
75+
datas[uniqKey],
76+
)}`}</li>
77+
);
7678
}
7779
return null;
7880
})

‎frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx‎

Lines changed: 57 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@
1616
* limitations under the License.
1717
*/
1818

19+
import { Data, DefaultCellTheme, Meta, SortParam, Style } from '@antv/s2';
1920
import { ChartDataSectionType, SortActionType } from 'app/constants';
2021
import ReactChart from 'app/models/ReactChart';
2122
import {
2223
ChartConfig,
24+
ChartDataConfig,
2325
ChartDataSectionField,
2426
ChartStyleConfig,
2527
} from 'app/types/ChartConfig';
@@ -30,9 +32,10 @@ import {
3032
toFormattedValue,
3133
transformToDataSet,
3234
} from 'app/utils/chartHelper';
35+
import { PIVOT_THEME_LIST } from '../../FormGenerator/Customize/PivotSheetTheme/theme';
3336
import AntVS2Wrapper from './AntVS2Wrapper';
3437
import Config from './config';
35-
import { RowAndColStyle, TableSorters, TextStyle } from './types';
38+
import { AndvS2Config } from './types';
3639

3740
class PivotSheetChart extends ReactChart {
3841
static icon = `<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'><path d='M10 8h11V5c0-1.1-.9-2-2-2h-9v5zM3 8h5V3H5c-1.1 0-2 .9-2 2v3zm2 13h3V10H3v9c0 1.1.9 2 2 2zm8 1l-4-4l4-4zm1-9l4-4l4 4zm.58 6H13v-2h1.58c1.33 0 2.42-1.08 2.42-2.42V13h2v1.58c0 2.44-1.98 4.42-4.42 4.42z' fill='gray'/></svg>`;
@@ -78,12 +81,18 @@ class PivotSheetChart extends ReactChart {
7881
}
7982
}
8083

81-
getOptions(context, dataset?: ChartDataSetDTO, config?: ChartConfig) {
84+
getOptions(
85+
context,
86+
dataset?: ChartDataSetDTO,
87+
config?: ChartConfig,
88+
): AndvS2Config {
8289
if (!dataset || !config) {
83-
return {};
90+
return {
91+
options: {},
92+
};
8493
}
8594

86-
const dataConfigs = config.datas || [];
95+
const dataConfigs: ChartDataConfig[] = config.datas || [];
8796
const styleConfigs = config.styles || [];
8897
const settingConfigs = config.settings || [];
8998
const chartDataSet = transformToDataSet(
@@ -92,21 +101,21 @@ class PivotSheetChart extends ReactChart {
92101
dataConfigs,
93102
);
94103

95-
const rowSectionConfigRows = dataConfigs
104+
const rowSectionConfigRows: ChartDataSectionField[] = dataConfigs
96105
.filter(c => c.type === ChartDataSectionType.GROUP)
97106
.filter(c => c.key === 'row')
98107
.flatMap(config => config.rows || []);
99108

100-
const columnSectionConfigRows = dataConfigs
109+
const columnSectionConfigRows: ChartDataSectionField[] = dataConfigs
101110
.filter(c => c.type === ChartDataSectionType.GROUP)
102111
.filter(c => c.key === 'column')
103112
.flatMap(config => config.rows || []);
104113

105-
const metricsSectionConfigRows = dataConfigs
114+
const metricsSectionConfigRows: ChartDataSectionField[] = dataConfigs
106115
.filter(c => c.type === ChartDataSectionType.AGGREGATE)
107116
.flatMap(config => config.rows || []);
108117

109-
const infoSectionConfigRows = dataConfigs
118+
const infoSectionConfigRows: ChartDataSectionField[] = dataConfigs
110119
.filter(c => c.type === ChartDataSectionType.INFO)
111120
.flatMap(config => config.rows || []);
112121

@@ -169,10 +178,12 @@ class PivotSheetChart extends ReactChart {
169178
reverseLayout: Boolean(rowTotalPosition),
170179
showSubTotals: Boolean(enableRowSubTotal),
171180
reverseSubLayout: Boolean(rowSubTotalPosition),
172-
subTotalsDimensions: rowSectionConfigRows.map(
173-
chartDataSet.getFieldKey,
174-
chartDataSet,
175-
)?.[0],
181+
subTotalsDimensions: [
182+
rowSectionConfigRows.map(
183+
chartDataSet.getFieldKey,
184+
chartDataSet,
185+
)?.[0],
186+
],
176187
label: context.translator('summary.total'),
177188
subLabel: context.translator('summary.subTotal'),
178189
calcTotals: {
@@ -184,10 +195,12 @@ class PivotSheetChart extends ReactChart {
184195
reverseLayout: Boolean(colTotalPosition),
185196
showSubTotals: Boolean(enableColSubTotal),
186197
reverseSubLayout: Boolean(colSubTotalPosition),
187-
subTotalsDimensions: columnSectionConfigRows.map(
188-
chartDataSet.getFieldKey,
189-
chartDataSet,
190-
)?.[0],
198+
subTotalsDimensions: [
199+
columnSectionConfigRows.map(
200+
chartDataSet.getFieldKey,
201+
chartDataSet,
202+
)?.[0],
203+
],
191204
label: context.translator('summary.total'),
192205
subLabel: context.translator('summary.subTotal'),
193206
calcTotals: {
@@ -224,10 +237,11 @@ class PivotSheetChart extends ReactChart {
224237
return {
225238
field: chartDataSet.getFieldKey(config),
226239
name: getColumnRenderName(config),
227-
formatter: value => toFormattedValue(value, config?.format),
228-
};
240+
formatter: (value?: string | number) =>
241+
toFormattedValue(value, config?.format),
242+
} as Meta;
229243
}),
230-
data: chartDataSet?.map(row => row.convertToObject()),
244+
data: chartDataSet?.map(row => row.convertToObject()) as Data[],
231245
sortParams: this.getTableSorters(
232246
rowSectionConfigRows
233247
.concat(columnSectionConfigRows)
@@ -248,16 +262,31 @@ class PivotSheetChart extends ReactChart {
248262
colCell: this.getHeaderStyle(styleConfigs),
249263
rowCell: this.getHeaderStyle(styleConfigs),
250264
dataCell: this.getBodyStyle(styleConfigs),
265+
background: {
266+
opacity: 0,
267+
},
268+
},
269+
palette: {
270+
basicColors: this.getThemeColorList(styleConfigs),
271+
semanticColors: {
272+
red: '#FF4D4F',
273+
green: '#29A294',
274+
},
251275
},
252276
};
253277
}
254278

279+
private getThemeColorList(style: ChartStyleConfig[]): Array<string> {
280+
const [basicColors] = getStyles(style, ['theme'], ['themeType']);
281+
return basicColors?.colors || PIVOT_THEME_LIST[basicColors?.themeType || 0];
282+
}
283+
255284
private getRowAndColStyle(
256285
style: ChartStyleConfig[],
257286
metricsSectionConfigRows: ChartDataSectionField[],
258287
columnSectionConfigRows: ChartDataSectionField[],
259288
chartDataSet: IChartDataSet<string>,
260-
): RowAndColStyle {
289+
): Partial<Style> {
261290
const [bodyHeight, bodyWidth] = getStyles(
262291
style,
263292
['tableBodyStyle'],
@@ -306,7 +335,7 @@ class PivotSheetChart extends ReactChart {
306335
private getTableSorters(
307336
sectionConfigRows: ChartDataSectionField[],
308337
chartDataSet: IChartDataSet<string>,
309-
): TableSorters[] {
338+
): Array<SortParam> {
310339
return sectionConfigRows
311340
.map(config => {
312341
if (!config?.sort?.type || config?.sort?.type === SortActionType.NONE) {
@@ -323,22 +352,17 @@ class PivotSheetChart extends ReactChart {
323352
},
324353
};
325354
})
326-
.filter(Boolean);
355+
.filter(Boolean) as Array<SortParam>;
327356
}
328357

329-
private getBodyStyle(styleConfigs: ChartStyleConfig[]): TextStyle {
330-
const [bodyFont, oddBgColor, evenBgColor, bodyTextAlign] = getStyles(
358+
private getBodyStyle(styleConfigs: ChartStyleConfig[]): DefaultCellTheme {
359+
const [bodyFont, bodyTextAlign] = getStyles(
331360
styleConfigs,
332361
['tableBodyStyle'],
333-
['font', 'oddBgColor', 'evenBgColor', 'align'],
362+
['font', 'align'],
334363
);
335364
return {
336-
cell: {
337-
crossBackgroundColor: evenBgColor,
338-
backgroundColor: oddBgColor,
339-
},
340365
text: {
341-
fill: bodyFont?.color,
342366
fontFamily: bodyFont?.fontFamily,
343367
fontSize: bodyFont?.fontSize,
344368
fontWeight: bodyFont?.fontWeight,
@@ -347,25 +371,20 @@ class PivotSheetChart extends ReactChart {
347371
};
348372
}
349373

350-
private getHeaderStyle(styleConfigs: ChartStyleConfig[]): TextStyle {
351-
const [headerFont, headerBgColor, headerTextAlign] = getStyles(
374+
private getHeaderStyle(styleConfigs: ChartStyleConfig[]): DefaultCellTheme {
375+
const [headerFont, headerTextAlign] = getStyles(
352376
styleConfigs,
353377
['tableHeaderStyle'],
354-
['font', 'bgColor', 'align'],
378+
['font', 'align'],
355379
);
356380
return {
357-
cell: {
358-
backgroundColor: headerBgColor,
359-
},
360381
text: {
361-
fill: headerFont?.color,
362382
fontFamily: headerFont?.fontFamily,
363383
fontSize: headerFont?.fontSize,
364384
fontWeight: headerFont?.fontWeight,
365385
textAlign: headerTextAlign,
366386
},
367387
bolderText: {
368-
fill: headerFont?.color,
369388
fontFamily: headerFont?.fontFamily,
370389
fontSize: headerFont?.fontSize,
371390
fontWeight: headerFont?.fontWeight,

0 commit comments

Comments
 (0)