Skip to content

Commit

Permalink
Merge pull request #1200 from qxqzx13/dev
Browse files Browse the repository at this point in the history 
feat:(Chart) add pivotSheetChart theme
  • Loading branch information
@scottsut
scottsut authored Apr 15, 2022
2 parents 8f19bcd + 9849958 commit 916de2e
Show file tree
Hide file tree
Showing 13 changed files with 508 additions and 117 deletions.
70 changes: 36 additions & 34 deletions frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 <div></div>;
}
const AntVS2Wrapper: FC<AndvS2Config> = memo(
({ dataCfg, options, theme, palette }) => {
if (!dataCfg) {
return <div></div>;
}

const onDataCellHover = ({ event, viewMeta }) => {
viewMeta.spreadsheet.tooltip.show({
position: {
x: event.clientX,
y: event.clientY,
},
content: (
<TableDataCellTooltip
datas={viewMeta.data}
meta={viewMeta.spreadsheet.dataCfg.meta}
/>
),
});
};
const onDataCellHover = ({ event, viewMeta }) => {
viewMeta.spreadsheet.tooltip.show({
position: {
x: event.clientX,
y: event.clientY,
},
content: (
<TableDataCellTooltip
datas={viewMeta.data}
meta={viewMeta.spreadsheet.dataCfg.meta}
/>
),
});
};

return (
<StyledAntVS2Wrapper
sheetType="pivot"
dataCfg={dataCfg}
options={options}
themeCfg={{ theme }}
onDataCellHover={onDataCellHover}
/>
);
});
return (
<StyledAntVS2Wrapper
sheetType="pivot"
dataCfg={dataCfg}
options={options}
themeCfg={{ theme, palette }}
onDataCellHover={onDataCellHover}
/>
);
},
);

const TableDataCellTooltip: FC<{
datas?: object;
Expand All @@ -72,7 +70,11 @@ const TableDataCellTooltip: FC<{
.map(m => {
const uniqKey = m?.field;
if (uniqKey in datas) {
return <li>{`${m?.name}: ${m?.formatter(datas[uniqKey])}`}</li>;
return (
<li key={uniqKey}>{`${m?.name}: ${m?.formatter(
datas[uniqKey],
)}`}</li>
);
}
return null;
})
Expand Down
95 changes: 57 additions & 38 deletions frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 = `<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>`;
Expand Down Expand Up @@ -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(
Expand All @@ -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 || []);

Expand Down Expand Up @@ -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: {
Expand All @@ -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: {
Expand Down Expand Up @@ -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)
Expand All @@ -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<string> {
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<string>,
): RowAndColStyle {
): Partial<Style> {
const [bodyHeight, bodyWidth] = getStyles(
style,
['tableBodyStyle'],
Expand Down Expand Up @@ -306,7 +335,7 @@ class PivotSheetChart extends ReactChart {
private getTableSorters(
sectionConfigRows: ChartDataSectionField[],
chartDataSet: IChartDataSet<string>,
): TableSorters[] {
): Array<SortParam> {
return sectionConfigRows
.map(config => {
if (!config?.sort?.type || config?.sort?.type === SortActionType.NONE) {
Expand All @@ -323,22 +352,17 @@ class PivotSheetChart extends ReactChart {
},
};
})
.filter(Boolean);
.filter(Boolean) as Array<SortParam>;
}

private getBodyStyle(styleConfigs: ChartStyleConfig[]): TextStyle {
const [bodyFont, oddBgColor, evenBgColor, bodyTextAlign] = getStyles(
private getBodyStyle(styleConfigs: ChartStyleConfig[]): DefaultCellTheme {
const [bodyFont, bodyTextAlign] = getStyles(
styleConfigs,
['tableBodyStyle'],
['font', 'oddBgColor', 'evenBgColor', 'align'],
['font', 'align'],
);
return {
cell: {
crossBackgroundColor: evenBgColor,
backgroundColor: oddBgColor,
},
text: {
fill: bodyFont?.color,
fontFamily: bodyFont?.fontFamily,
fontSize: bodyFont?.fontSize,
fontWeight: bodyFont?.fontWeight,
Expand All @@ -347,25 +371,20 @@ class PivotSheetChart extends ReactChart {
};
}

private getHeaderStyle(styleConfigs: ChartStyleConfig[]): TextStyle {
const [headerFont, headerBgColor, headerTextAlign] = getStyles(
private getHeaderStyle(styleConfigs: ChartStyleConfig[]): DefaultCellTheme {
const [headerFont, headerTextAlign] = getStyles(
styleConfigs,
['tableHeaderStyle'],
['font', 'bgColor', 'align'],
['font', 'align'],
);
return {
cell: {
backgroundColor: headerBgColor,
},
text: {
fill: headerFont?.color,
fontFamily: headerFont?.fontFamily,
fontSize: headerFont?.fontSize,
fontWeight: headerFont?.fontWeight,
textAlign: headerTextAlign,
},
bolderText: {
fill: headerFont?.color,
fontFamily: headerFont?.fontFamily,
fontSize: headerFont?.fontSize,
fontWeight: headerFont?.fontWeight,
Expand Down
Loading

0 comments on commit 916de2e

Please sign in to comment.