From eb90c187532ea0a8b346a90b5bbfedb47405f9a1 Mon Sep 17 00:00:00 2001 From: tianlei Date: Thu, 14 Apr 2022 19:26:29 +0800 Subject: [PATCH 1/4] feat:(Chart) add pivotSheetChart theme --- .../PivotSheetChart/AntVS2Wrapper.tsx | 7 +- .../PivotSheetChart/PivotSheetChart.tsx | 33 +-- .../ChartGraph/PivotSheetChart/config.ts | 76 +++++-- .../ChartGraph/PivotSheetChart/types.ts | 6 +- .../ColorPicker/ColorPickerPopover.tsx | 1 + .../FormGenerator/Basic/components/Group.ts | 2 +- .../FormGenerator/Customize/FontAlignment.tsx | 1 + .../PivotSheetTheme/PivotSheetTheme.tsx | 191 ++++++++++++++++++ .../Customize/PivotSheetTheme/index.tsx | 21 ++ .../Customize/PivotSheetTheme/theme.ts | 107 ++++++++++ .../FormGenerator/Customize/index.ts | 1 + .../FormGenerator/Layout/ItemLayout.tsx | 3 + frontend/src/app/constants.ts | 1 + 13 files changed, 408 insertions(+), 42 deletions(-) create mode 100644 frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/PivotSheetTheme.tsx create mode 100644 frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/index.tsx create mode 100644 frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/theme.ts diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx b/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx index bddea80eb..1c5c2d2f8 100644 --- a/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx +++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ -import { S2Theme } from '@antv/s2'; +import { Palette, S2Theme } from '@antv/s2'; import { SheetComponent } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; import { FC, memo } from 'react'; @@ -27,7 +27,8 @@ const AntVS2Wrapper: FC<{ dataCfg; options; theme?: S2Theme; -}> = memo(({ dataCfg, options, theme }) => { + palette?: Palette; +}> = memo(({ dataCfg, options, theme, palette }) => { if (!dataCfg) { return
; } @@ -52,7 +53,7 @@ const AntVS2Wrapper: FC<{ sheetType="pivot" dataCfg={dataCfg} options={options} - themeCfg={{ theme }} + themeCfg={{ theme, palette }} onDataCellHover={onDataCellHover} /> ); diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx b/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx index 50f7179b8..119e0a680 100644 --- a/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx +++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx @@ -248,10 +248,25 @@ 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[]) { + const [basicColors] = getStyles(style, ['theme'], ['themeType']); + return basicColors?.colors || []; + } + private getRowAndColStyle( style: ChartStyleConfig[], metricsSectionConfigRows: ChartDataSectionField[], @@ -327,18 +342,13 @@ class PivotSheetChart extends ReactChart { } private getBodyStyle(styleConfigs: ChartStyleConfig[]): TextStyle { - const [bodyFont, oddBgColor, evenBgColor, bodyTextAlign] = getStyles( + 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, @@ -348,24 +358,19 @@ class PivotSheetChart extends ReactChart { } private getHeaderStyle(styleConfigs: ChartStyleConfig[]): TextStyle { - const [headerFont, headerBgColor, headerTextAlign] = getStyles( + 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, diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts b/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts index 3e95d40cc..dd0e28a5b 100644 --- a/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts +++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts @@ -164,11 +164,6 @@ const config: ChartConfig = { key: 'tableHeaderStyle', comType: 'group', rows: [ - { - label: 'style.bgColor', - key: 'bgColor', - comType: 'fontColor', - }, { label: 'style.font', key: 'font', @@ -177,7 +172,6 @@ const config: ChartConfig = { fontFamily: 'PingFangSC', fontSize: 12, fontWeight: 'normal', - color: '#495057', }, options: { fontFamilies: [ @@ -189,6 +183,7 @@ const config: ChartConfig = { 'sans-serif', ], showFontStyle: false, + showFontColor: false, }, }, { @@ -221,16 +216,6 @@ const config: ChartConfig = { key: 'tableBodyStyle', comType: 'group', rows: [ - { - label: 'style.oddBgColor', - key: 'oddBgColor', - comType: 'fontColor', - }, - { - label: 'style.evenBgColor', - key: 'evenBgColor', - comType: 'fontColor', - }, { label: 'style.font', key: 'font', @@ -239,7 +224,6 @@ const config: ChartConfig = { fontFamily: 'PingFangSC', fontSize: 12, fontWeight: 'normal', - color: '#495057', }, options: { fontFamilies: [ @@ -251,6 +235,7 @@ const config: ChartConfig = { 'sans-serif', ], showFontStyle: false, + showFontColor: false, }, }, { @@ -278,6 +263,21 @@ const config: ChartConfig = { }, ], }, + { + label: 'theme.title', + key: 'theme', + comType: 'group', + rows: [ + { + label: 'theme.themeType', + key: 'themeType', + comType: 'pivotSheetTheme', + default: { + themeType: 1, + }, + }, + ], + }, ], settings: [ { @@ -443,8 +443,6 @@ const config: ChartConfig = { tableHeaderStyle: '表头样式', tableBodyStyle: '表体样式', bgColor: '背景颜色', - evenBgColor: '偶数行背景颜色', - oddBgColor: '奇数行背景颜色', font: '字体', align: '对齐方式', colHeight: '列表头高度', @@ -452,6 +450,25 @@ const config: ChartConfig = { height: '单元格高度', width: '单元格宽度', }, + theme: { + title: '主题', + themeType: '主题类型', + headerFontColor: '表头字体颜色', + evenBgColor: '偶数行背景颜色', + oddBgColor: '奇数行背景颜色', + hoverDataBgColor: '数据选中背景颜色', + hoverHeaderBgColor: '选中列表头背景颜色', + headerBgColor: '表头背景颜色', + prepareSelectMaskBgColor: '刷选遮罩样式背景颜色', + linkTextColor: '超链接字体颜色', + hoverSplitLineColor: '划上分割线颜色', + dataBorderColor: '数据单元格边框颜色', + headerBorderColor: '表头单元格边框颜色', + verticalSplitLineColor: '垂直分割线颜色', + horizontalSplitLineColor: '水平分割线颜色', + dataColor: '数据单元格文字颜色', + rowCellFontColor: '行标题颜色', + }, summary: { title: '数据汇总', rowSummary: '行总计', @@ -503,8 +520,6 @@ const config: ChartConfig = { tableHeaderStyle: 'Table Header Style', tableBodyStyle: 'Table Body Style', bgColor: 'Background Color', - evenBgColor: 'Even Row Background Color', - oddBgColor: 'Odd Row Background Color', font: 'Font', align: 'Align', colHeight: 'Col Header Height', @@ -512,6 +527,25 @@ const config: ChartConfig = { height: 'Height', width: 'Width', }, + theme: { + title: 'Theme', + themeType: 'Theme Type', + headerFontColor: 'Header Font Color', + evenBgColor: 'Even Row Background Color', + oddBgColor: 'Odd Row Background Color', + hoverDataBgColor: 'Hover And Select Data Color', + hoverHeaderBgColor: 'Hover And Select Header Color', + headerBgColor: 'Header Background Color', + prepareSelectMaskBgColor: 'Prepare Select Mask Color', + linkTextColor: 'Link Text Color', + hoverSplitLineColor: 'Hover Split Line Color', + dataBorderColor: 'Data Border Color', + headerBorderColor: 'Header Border Color', + verticalSplitLineColor: 'Vertical Split Line Color', + horizontalSplitLineColor: 'Horizontal Split Line Color', + dataColor: 'Data Font Color', + rowCellFontColor: 'Row Cell Font Color', + }, summary: { title: 'Summary', rowSummary: 'Row Total', diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/types.ts b/frontend/src/app/components/ChartGraph/PivotSheetChart/types.ts index fd51bb506..3a66dcb1d 100644 --- a/frontend/src/app/components/ChartGraph/PivotSheetChart/types.ts +++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/types.ts @@ -1,9 +1,9 @@ import { FontStyle } from 'app/types/ChartConfig'; export type TextStyle = { - cell: { backgroundColor: string; crossBackgroundColor?: string }; - text: { fill: string; textAlign: string } & FontStyle; - bolderText?: { fill: string; textAlign: string } & FontStyle; + cell?: { backgroundColor?: string; crossBackgroundColor?: string }; + text: { textAlign: string } & FontStyle; + bolderText?: { textAlign: string } & FontStyle; }; export type TableSorters = { diff --git a/frontend/src/app/components/ColorPicker/ColorPickerPopover.tsx b/frontend/src/app/components/ColorPicker/ColorPickerPopover.tsx index cd52db989..a0a7ea98c 100644 --- a/frontend/src/app/components/ColorPicker/ColorPickerPopover.tsx +++ b/frontend/src/app/components/ColorPicker/ColorPickerPopover.tsx @@ -47,6 +47,7 @@ export const ColorPickerPopover: FC = ({ content={} trigger="click" placement="right" + className="color-picker" > {children || ( div:last-of-type { + > .color-picker { margin-left: ${SPACE_XS}; } `; diff --git a/frontend/src/app/components/FormGenerator/Customize/FontAlignment.tsx b/frontend/src/app/components/FormGenerator/Customize/FontAlignment.tsx index 6af290e07..60996e393 100644 --- a/frontend/src/app/components/FormGenerator/Customize/FontAlignment.tsx +++ b/frontend/src/app/components/FormGenerator/Customize/FontAlignment.tsx @@ -66,6 +66,7 @@ const FontAlignment: FC> = memo( translate: t, onChange, dataConfigs, + flatten: true, }; return ; diff --git a/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/PivotSheetTheme.tsx b/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/PivotSheetTheme.tsx new file mode 100644 index 000000000..9300767eb --- /dev/null +++ b/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/PivotSheetTheme.tsx @@ -0,0 +1,191 @@ +/** + * Datart + * + * Copyright 2021 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Select } from 'antd'; +import { ChartStyleConfig } from 'app/types/ChartConfig'; +import { updateByKey } from 'app/utils/mutation'; +import { FC, memo, useEffect } from 'react'; +import styled from 'styled-components/macro'; +import { SPACE } from '../../../../../styles/StyleConstants'; +import { isNumber } from '../../../../utils/number'; +import { BasicColorSelector } from '../../Basic'; +import { BW } from '../../Basic/components/BasicWrapper'; +import { ItemLayoutProps } from '../../types'; +import { itemLayoutComparer } from '../../utils'; +import { PIVOT_THEME_LIST, PIVOT_THEME_SELECT } from './theme'; + +const template = [ + { + label: 'theme.headerFontColor', + key: 'headerFontColor', + index: 0, + }, + { + label: 'theme.headerBgColor', + key: 'headerBgColor', + index: 3, + }, + { + label: 'theme.hoverHeaderBgColor', + key: 'hoverHeaderBgColor', + index: 4, + }, + { + label: 'theme.headerBorderColor', + key: 'headerBorderColor', + index: 10, + }, + { + label: 'theme.rowCellFontColor', + key: 'rowCellFontColor', + index: 14, + }, + { + label: 'theme.dataColor', + key: 'dataColor', + index: 13, + }, + { + label: 'theme.hoverDataBgColor', + key: 'hoverDataBgColor', + index: 2, + }, + { + label: 'theme.dataBorderColor', + key: 'dataBorderColor', + index: 9, + }, + { + label: 'theme.oddBgColor', + key: 'oddBgColor', + index: 1, + }, + { + label: 'theme.evenBgColor', + key: 'evenBgColor', + index: 8, + }, + { + label: 'theme.verticalSplitLineColor', + key: 'verticalSplitLineColor', + index: 11, + }, + { + label: 'theme.horizontalSplitLineColor', + key: 'horizontalSplitLineColor', + index: 12, + }, + { + label: 'theme.hoverSplitLineColor', + key: 'hoverSplitLineColor', + index: 7, + }, + { + label: 'theme.prepareSelectMaskBgColor', + key: 'prepareSelectMaskBgColor', + index: 5, + }, + { + label: 'theme.linkTextColor', + key: 'linkTextColor', + index: 6, + }, +]; + +const PivotSheetTheme: FC> = memo( + ({ ancestors, translate: t = title => title, data, onChange }) => { + const { options, comType, ...rest } = data; + + useEffect(() => { + if (!data.value?.colors?.length && isNumber(data.value?.themeType)) { + handleSettingChange({ + themeType: data.value.themeType, + colors: PIVOT_THEME_LIST[data.value.themeType], + }); + } + }, [data.value?.themeType, data.value]); + + const handleSettingChange = value => { + const newData = updateByKey(data, 'value', value); + onChange?.(ancestors, newData); + }; + + const handlePickerSelect = index => (ancestors, value) => { + const newColors = data.value?.colors?.concat(); + newColors[index] = value; + handleSettingChange({ + themeType: data.value.themeType, + colors: newColors, + }); + }; + + const handleThemeSelect = value => { + handleSettingChange({ + themeType: value, + colors: PIVOT_THEME_LIST[value], + }); + }; + + return ( + <> + + + + + + {template.map(item => { + const props = { + ancestors, + translate: t, + data: { + value: data.value?.colors[item.index], + label: item.label, + key: item.key, + comType: 'fontColor', + }, + onChange: handlePickerSelect(item.index), + }; + return ( + + + + ); + })} + + ); + }, + itemLayoutComparer, +); + +export default PivotSheetTheme; + +const StyledItemLayout = styled.div` + padding: ${SPACE} 0 ${SPACE} 0; + user-select: none; +`; diff --git a/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/index.tsx b/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/index.tsx new file mode 100644 index 000000000..1ef01d4f0 --- /dev/null +++ b/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/index.tsx @@ -0,0 +1,21 @@ +/** + * Datart + * + * Copyright 2021 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import PivotSheetTheme from './PivotSheetTheme'; + +export default PivotSheetTheme; diff --git a/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/theme.ts b/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/theme.ts new file mode 100644 index 000000000..db78bf290 --- /dev/null +++ b/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/theme.ts @@ -0,0 +1,107 @@ +/** + * Datart + * + * Copyright 2021 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export const PIVOT_THEME_SELECT = [ + { + name: 'Default', + value: 0, + }, + { + name: 'Gray', + value: 1, + }, + { + name: 'Colorful', + value: 2, + }, +]; + +export const PIVOT_THEME_LIST = [ + [ + '#000000', + '#f7faff', + '#E1EAFE', + '#E1EAFE', + '#CCDBFD', + '#2C60D3', + '#0000EE', + '#326EF4', + '#FFFFFF', + '#EBF2FF', + '#D6E3FE', + '#3471F9', + '#3471F9', + '#282B33', + '#121826', + ], + [ + '#000000', + '#FcFcFd', + '#F4F5F7', + '#F3F4F6', + '#E7E8EA', + '#CECFD1', + '#A9AAAB', + '#616162', + '#FFFFFF', + '#F2F2F2', + '#E8E6E6', + '#D1D4DC', + '#BEC2CB', + '#282B33', + '#121826', + ], + [ + '#FFFFFF', + '#F4F7FE', + '#DDE7FD', + '#3471F9', + '#2C60D3', + '#2C60D3', + '#0000EE', + '#326EF4', + '#FFFFFF', + '#E0E9FE', + '#5286F9', + '#5286F9', + '#3471F9', + '#282B33', + '#121826', + ], +] + +/** + * 这只是个栗子！ + * */ +const dictionaries = [ + '#FFFFFF', // 0: 标题字体颜色 + '#F8F5FE', // 1: 奇行颜色 + '#EDE1FD', // 2: 划上和选中数据背景颜色 + '#873BF4', // 3: 表头背景色 + '#7232CF', // 4: 划上和选中表头背景颜色 + '#7232CF', // 5: 刷选遮罩样式背景颜色 + '#7232CF', // 6: 链接文本颜色 + '#AB76F7', // 7: 划上分割线颜色 + '#FFFFFF', // 8: 背景色(包括整体背景色，数据背景色) 此处用来代替偶行染色 + '#DDC7FC', // 9: 数据单元格边框颜色 + '#9858F5', // 10: 头表格边框颜色 + '#B98EF8', // 11: 垂直分割线 + '#873BF4', // 12: 水平分割线 + '#282B33', // 13: 数据单元格文字颜色 + '#121826', // 14: 行标题颜色 +]; diff --git a/frontend/src/app/components/FormGenerator/Customize/index.ts b/frontend/src/app/components/FormGenerator/Customize/index.ts index ecba66520..803ea800c 100644 --- a/frontend/src/app/components/FormGenerator/Customize/index.ts +++ b/frontend/src/app/components/FormGenerator/Customize/index.ts @@ -24,5 +24,6 @@ export { default as LegendPosition } from './LegendPosition'; export { default as LegendType } from './LegendType'; export { default as ListTemplatePanel } from './ListTemplatePanel'; export { default as NameLocation } from './NameLocation'; +export { default as PivotSheetTheme } from './PivotSheetTheme'; export { default as ScorecardConditionalStylePanel } from './ScorecardConditionalStyle'; export { default as UnControlledTableHeaderPanel } from './UnControlledTableHeaderPanel'; diff --git a/frontend/src/app/components/FormGenerator/Layout/ItemLayout.tsx b/frontend/src/app/components/FormGenerator/Layout/ItemLayout.tsx index e95e08bc9..a206ccb18 100644 --- a/frontend/src/app/components/FormGenerator/Layout/ItemLayout.tsx +++ b/frontend/src/app/components/FormGenerator/Layout/ItemLayout.tsx @@ -57,6 +57,7 @@ import { LegendType, ListTemplatePanel, NameLocation, + PivotSheetTheme, ScorecardConditionalStylePanel, UnControlledTableHeaderPanel, } from '../Customize'; @@ -186,6 +187,8 @@ const ItemLayout: FC> = memo( return ; case ChartStyleSectionComponentType.ScorecardConditionalStyle: return ; + case ChartStyleSectionComponentType.PivotSheetTheme: + return ; default: return
{`no matched component comType of ${data.comType}`}
; } diff --git a/frontend/src/app/constants.ts b/frontend/src/app/constants.ts index dc1cef375..d90510205 100644 --- a/frontend/src/app/constants.ts +++ b/frontend/src/app/constants.ts @@ -209,6 +209,7 @@ export const ChartStyleSectionComponentType = { LegendPosition: 'legendPosition', ScorecardListTemplate: 'scorecardListTemplate', ScorecardConditionalStyle: 'scorecardConditionalStyle', + PivotSheetTheme: 'pivotSheetTheme', }; export enum DownloadFileType { From b2845d5919b4ab71398c9ce7ac3706d705b62c3c Mon Sep 17 00:00:00 2001 From: tianlei Date: Fri, 15 Apr 2022 12:43:37 +0800 Subject: [PATCH 2/4] refactor:(Chart) refactor PivotSheetTheme component --- .../PivotSheetChart/AntVS2Wrapper.tsx | 6 +- .../ChartGraph/PivotSheetChart/config.ts | 13 +- .../PivotSheetTheme/PivotSheetTheme.tsx | 137 ++++++++++-------- .../Customize/PivotSheetTheme/theme.ts | 8 +- 4 files changed, 98 insertions(+), 66 deletions(-) diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx b/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx index 1c5c2d2f8..481af4d95 100644 --- a/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx +++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx @@ -73,7 +73,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/config.ts b/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts index dd0e28a5b..303a2004f 100644 --- a/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts +++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts @@ -272,9 +272,6 @@ const config: ChartConfig = { label: 'theme.themeType', key: 'themeType', comType: 'pivotSheetTheme', - default: { - themeType: 1, - }, }, ], }, @@ -468,6 +465,11 @@ const config: ChartConfig = { horizontalSplitLineColor: '水平分割线颜色', dataColor: '数据单元格文字颜色', rowCellFontColor: '行标题颜色', + type: { + default: '默认', + gray: '简约灰', + colorful: '多彩蓝', + } }, summary: { title: '数据汇总', @@ -545,6 +547,11 @@ const config: ChartConfig = { horizontalSplitLineColor: 'Horizontal Split Line Color', dataColor: 'Data Font Color', rowCellFontColor: 'Row Cell Font Color', + type: { + default: 'Default', + gray: 'Gray', + colorful: 'Colorful', + } }, summary: { title: 'Summary', diff --git a/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/PivotSheetTheme.tsx b/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/PivotSheetTheme.tsx index 9300767eb..3d19c0b1d 100644 --- a/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/PivotSheetTheme.tsx +++ b/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/PivotSheetTheme.tsx @@ -16,15 +16,13 @@ * limitations under the License. */ -import { Select } from 'antd'; import { ChartStyleConfig } from 'app/types/ChartConfig'; import { updateByKey } from 'app/utils/mutation'; -import { FC, memo, useEffect } from 'react'; +import { FC, memo, useCallback, useEffect, useMemo } from 'react'; import styled from 'styled-components/macro'; import { SPACE } from '../../../../../styles/StyleConstants'; import { isNumber } from '../../../../utils/number'; -import { BasicColorSelector } from '../../Basic'; -import { BW } from '../../Basic/components/BasicWrapper'; +import { ItemLayout } from '../../Layout'; import { ItemLayoutProps } from '../../types'; import { itemLayoutComparer } from '../../utils'; import { PIVOT_THEME_LIST, PIVOT_THEME_SELECT } from './theme'; @@ -107,9 +105,26 @@ const template = [ }, ]; +const themeSelectTemplate = { + label: 'theme.themeType', + key: 'themeType', + comType: 'select', + default: 0, + options: { + translateItemLabel: true, + items: PIVOT_THEME_SELECT, + }, +}; + const PivotSheetTheme: FC> = memo( ({ ancestors, translate: t = title => title, data, onChange }) => { - const { options, comType, ...rest } = data; + const handleSettingChange = useCallback( + value => { + const newData = updateByKey(data, 'value', value); + onChange?.(ancestors, newData); + }, + [onChange, ancestors, data], + ); useEffect(() => { if (!data.value?.colors?.length && isNumber(data.value?.themeType)) { @@ -118,65 +133,71 @@ const PivotSheetTheme: FC> = memo( colors: PIVOT_THEME_LIST[data.value.themeType], }); } - }, [data.value?.themeType, data.value]); + }, [data, handleSettingChange]); - const handleSettingChange = value => { - const newData = updateByKey(data, 'value', value); - onChange?.(ancestors, newData); - }; + const handlePickerSelect = useCallback( + index => (_, colorConfig) => { + const newColors = data.value?.colors?.concat(); + newColors[index] = colorConfig.value; + handleSettingChange({ + themeType: data.value.themeType, + colors: newColors, + }); + }, + [handleSettingChange, data], + ); - const handlePickerSelect = index => (ancestors, value) => { - const newColors = data.value?.colors?.concat(); - newColors[index] = value; - handleSettingChange({ - themeType: data.value.themeType, - colors: newColors, - }); - }; + const handleThemeSelect = useCallback( + (_, config) => { + handleSettingChange({ + themeType: config.value, + colors: PIVOT_THEME_LIST[config.value], + }); + }, + [handleSettingChange], + ); - const handleThemeSelect = value => { - handleSettingChange({ - themeType: value, - colors: PIVOT_THEME_LIST[value], - }); - }; + const themePropsList: ItemLayoutProps[] = useMemo(() => { + const themeSelectProps: ItemLayoutProps[] = [ + { + ancestors, + translate: t, + data: { + label: data?.label || themeSelectTemplate.label, + default: data?.default?.themeType || themeSelectTemplate.default, + key: data.key || themeSelectTemplate.key, + comType: 'select', + options: data?.options || themeSelectTemplate.options, + value: data?.value?.themeType, + }, + onChange: handleThemeSelect, + flatten: true, + }, + ]; + const colorsProps: ItemLayoutProps[] = template.map( + item => ({ + ancestors, + translate: t, + data: { + value: data.value?.colors[item.index], + label: item.label, + key: item.key, + comType: 'fontColor', + }, + onChange: handlePickerSelect(item.index), + flatten: true, + }), + ); + return themeSelectProps.concat(colorsProps); + }, [data, handleThemeSelect, handlePickerSelect, t, ancestors]); return ( <> - - - - - - {template.map(item => { - const props = { - ancestors, - translate: t, - data: { - value: data.value?.colors[item.index], - label: item.label, - key: item.key, - comType: 'fontColor', - }, - onChange: handlePickerSelect(item.index), - }; - return ( - - - - ); - })} + {themePropsList.map(props => ( + + + + ))} ); }, diff --git a/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/theme.ts b/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/theme.ts index db78bf290..bc1281680 100644 --- a/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/theme.ts +++ b/frontend/src/app/components/FormGenerator/Customize/PivotSheetTheme/theme.ts @@ -18,15 +18,15 @@ export const PIVOT_THEME_SELECT = [ { - name: 'Default', + label: 'theme.type.default', value: 0, }, { - name: 'Gray', + label: 'theme.type.gray', value: 1, }, { - name: 'Colorful', + label: 'theme.type.colorful', value: 2, }, ]; @@ -83,7 +83,7 @@ export const PIVOT_THEME_LIST = [ '#282B33', '#121826', ], -] +]; /** * 这只是个栗子！ From be5cc7131523b1394c08d84acf70dbe994653db0 Mon Sep 17 00:00:00 2001 From: tianlei Date: Fri, 15 Apr 2022 15:06:39 +0800 Subject: [PATCH 3/4] feat(Chart) add antvS2 types --- .../PivotSheetChart/AntVS2Wrapper.tsx | 65 +++++++++---------- .../PivotSheetChart/PivotSheetChart.tsx | 63 +++++++++++------- .../ChartGraph/PivotSheetChart/types.ts | 29 ++------- 3 files changed, 75 insertions(+), 82 deletions(-) diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx b/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx index 481af4d95..1cd96e472 100644 --- a/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx +++ b/frontend/src/app/components/ChartGraph/PivotSheetChart/AntVS2Wrapper.tsx @@ -16,48 +16,45 @@ * limitations under the License. */ -import { Palette, 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; - palette?: Palette; -}> = memo(({ dataCfg, options, theme, palette }) => { - 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; diff --git a/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx b/frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx index 119e0a680..237a0ac0b 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'; @@ -32,7 +34,7 @@ import { } from 'app/utils/chartHelper'; 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 +80,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 +100,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 +177,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 +194,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 +236,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) @@ -262,7 +275,7 @@ class PivotSheetChart extends ReactChart { }; } - private getThemeColorList(style: ChartStyleConfig[]) { + private getThemeColorList(style: ChartStyleConfig[]): Array { const [basicColors] = getStyles(style, ['theme'], ['themeType']); return basicColors?.colors || []; } @@ -272,7 +285,7 @@ class PivotSheetChart extends ReactChart { metricsSectionConfigRows: ChartDataSectionField[], columnSectionConfigRows: ChartDataSectionField[], chartDataSet: IChartDataSet, - ): RowAndColStyle { + ): Partial