Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 透视表增加斜线表头 #2033

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: 透视表增加斜线表头 #2033

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 131 additions & 0 deletions frontend/src/app/components/ChartGraph/PivotSheetChart/PivotSheetChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@
* limitations under the License.
*/

import { Group } from '@antv/g-canvas';
import {
CornerCell,
CornerHeader,
CornerHeaderConfig,
Data,
DataCell,
DefaultCellTheme,
Expand Down Expand Up @@ -64,6 +68,114 @@ enum BolderFontWeight {
bolder = 'bolder',
}

class SlashCorner extends Group {
node: S2CellType;
headerStyle: DefaultCellTheme;
columns: string[];
rows: string[];
values: string[];
constructor(
node: S2CellType,
headerStyle: DefaultCellTheme,
columns?: string[],
rows?: string[],
values?: string[],
) {
super({});
this.node = node;
this.headerStyle = headerStyle;
this.columns = columns || [];
this.rows = rows || [];
this.values = values || [];
this.initCornerHeader();
}
initCornerHeader() {
this.initBg();
this.initText();
}

initBg() {
this.node.add(
this.addShape('polygon', {
attrs: {
points: [
[0, 0],
[0, this.node.cfg.height],
[this.node.cfg.width, this.node.cfg.height],
[this.node.cfg.width, 0],
],
fill: this.headerStyle.cell?.backgroundColor,
},
}),
);
this.node.add(
this.addShape('line', {
attrs: {
x1: 0,
y1: 0,
x2: this.node.cfg.width,
y2: this.node.cfg.height,
stroke: this.headerStyle.text?.fill || 'black',
lineWidth: 1,
// lineAppendWidth: 1,
},
}),
);
}

initText() {
this.node.add(
this.addShape('text', {
zIndex: 100,
attrs: {
x: (this.node.cfg.width / 3) * 1.2,
y: this.node.cfg.height / 3,
text: this.columns.filter(c => !['$$extra$$'].includes(c)).join('/'),
fontFamily: this.headerStyle.text?.fontFamily,
fontSize: this.headerStyle.text?.fontSize,
fill: this.headerStyle.text?.fill || 'black',
stroke: this.headerStyle.text?.fill || 'black',
},
}),
);

this.node.add(
this.addShape('text', {
zIndex: 100,
attrs: {
x: this.node.cfg.width / 9,
y: (this.node.cfg.height / 5) * 4.8,
text: this.rows.join('/'),
fontFamily: this.headerStyle.text?.fontFamily,
fontSize: this.headerStyle.text?.fontSize,
fill: this.headerStyle.text?.fill || 'black',
stroke: this.headerStyle.text?.fill || 'black',
},
}),
);
}
}

class OriginCornerHeader extends CornerHeader {
node: S2CellType;
constructor(node: S2CellType, headConfig: CornerHeaderConfig) {
super(headConfig);
this.node = node;
}
renderHeader() {
const _this = this;
this.headerConfig.data.forEach(function (item) {
_this.node.add(
new CornerCell(
item,
_this.headerConfig.spreadsheet,
_this.headerConfig,
),
);
});
}
}

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 @@ -171,6 +283,7 @@ class PivotSheetChart extends ReactChart {
enableHoverHighlight,
enableSelectedHighlight,
metricNameShowIn,
enableSlash,
] = getStyles(
styleConfigs,
['style'],
Expand All @@ -179,6 +292,7 @@ class PivotSheetChart extends ReactChart {
'enableHoverHighlight',
'enableSelectedHighlight',
'metricNameShowIn',
'enableSlash',
],
);
const [summaryAggregation] = getStyles(
Expand Down Expand Up @@ -247,6 +361,23 @@ class PivotSheetChart extends ReactChart {
selectedCellsSpotlight: Boolean(enableSelectedHighlight),
autoResetSheetStyle: false,
},
cornerHeader: (node, s2, headConfig) => {
const config = headConfig as CornerHeaderConfig;
if (enableSlash) {
new SlashCorner(
node,
Object.assign(
this.getHeaderStyle(styleConfigs),
s2.theme.cornerCell,
),
config.data.filter(n => n.cornerType === 'col').map(n => n.value),
config.data.filter(n => n.cornerType === 'row').map(n => n.value),
);
} else {
const custom = new OriginCornerHeader(node, config);
custom.renderHeader();
}
},
totals: {
row: {
showGrandTotals: Boolean(enableRowTotal),
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/app/components/ChartGraph/PivotSheetChart/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,12 @@ const config: ChartConfig = {
],
},
},
{
label: 'style.slashHeader',
key: 'enableSlash',
default: false,
comType: 'checkbox',
},
],
},
{
Expand Down Expand Up @@ -448,6 +454,7 @@ const config: ChartConfig = {
tableSize: '表格大小',
tableHeaderStyle: '表头样式',
tableBodyStyle: '表体样式',
slashHeader: '斜线表头',
bgColor: '背景颜色',
font: '字体',
align: '对齐方式',
Expand Down Expand Up @@ -532,6 +539,7 @@ const config: ChartConfig = {
tableSize: 'Table Size',
tableHeaderStyle: 'Table Header Style',
tableBodyStyle: 'Table Body Style',
slashHeader: 'Slash Header',
bgColor: 'Background Color',
font: 'Font',
align: 'Align',
Expand Down