Skip to content

Commit d24c7ba

Browse files
singerlasingerla
committed
feat(chart): support 'a:fld' data label style for scatter charts
1 parent 6859770 commit d24c7ba

File tree

4 files changed

+198
-86
lines changed

4 files changed

+198
-86
lines changed

‎__tests__/modify-chart-scatter.test.ts‎

Lines changed: 125 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,154 @@
1-
import Automizer, { modify } from '../src/index';
2-
import {ChartData} from '../dist';
1+
import Automizer, {
2+
ChartValueStyle,
3+
LabelPosition,
4+
modify,
5+
} from '../src/index';
6+
import { ChartData } from '../dist';
37

48
test('create presentation, add and modify a scatter chart.', async () => {
59
const automizer = new Automizer({
610
templateDir: `${__dirname}/pptx-templates`,
7-
outputDir: `${__dirname}/pptx-output`
11+
outputDir: `${__dirname}/pptx-output`,
812
});
913

1014
const pres = automizer
1115
.loadRoot(`RootTemplate.pptx`)
1216
.load(`ChartScatter.pptx`, 'charts');
1317

14-
const dataScatter = <ChartData><unknown>{
18+
const dataScatter = <ChartData>(<unknown>{
1519
series: [
16-
{label: 'series s1'},
17-
{label: 'series s2'},
18-
{label: 'series s3'}
20+
{ label: 'series s1' },
21+
{ label: 'series s2' },
22+
{ label: 'series s3' },
1923
],
2024
categories: [
21-
{label: 'r1', values: [{x: 10, y: 20}, {x: 9, y: 30}, {x: 19, y: 40}]},
22-
{label: 'r2', values: [{x: 21, y: 11}, {x: 8, y: 31}, {x: 18, y: 41}]},
23-
{label: 'r3', values: [{x: 22, y: 28}, {x: 7, y: 26}, {x: 17, y: 36}]},
24-
{label: 'r4', values: [{x: 13, y: 13}, {x: 16, y: 28}, {x: 26, y: 38}]},
25-
{label: 'r5', values: [{x: 18, y: 24}, {x: 15, y: 24}, {x: 25, y: 34}]},
26-
{label: 'r6', values: [{x: 28, y: 34}, {x: 25, y: 34}, {x: 35, y: 44}]},
25+
{
26+
label: 'r1',
27+
values: [
28+
{ x: 10, y: 20 },
29+
{ x: 9, y: 30 },
30+
{ x: 19, y: 40 },
31+
],
32+
},
33+
{
34+
label: 'r2',
35+
values: [
36+
{ x: 21, y: 11 },
37+
{ x: 8, y: 31 },
38+
{ x: 18, y: 41 },
39+
],
40+
},
41+
{
42+
label: 'r3',
43+
values: [
44+
{ x: 22, y: 28 },
45+
{ x: 7, y: 26 },
46+
{ x: 17, y: 36 },
47+
],
48+
},
49+
{
50+
label: 'r4',
51+
values: [
52+
{ x: 13, y: 13 },
53+
{ x: 16, y: 28 },
54+
{ x: 26, y: 38 },
55+
],
56+
},
57+
{
58+
label: 'r5',
59+
values: [
60+
{ x: 18, y: 24 },
61+
{ x: 15, y: 24 },
62+
{ x: 25, y: 34 },
63+
],
64+
},
65+
{
66+
label: 'r6',
67+
values: [
68+
{ x: 28, y: 34 },
69+
{ x: 25, y: 34 },
70+
{ x: 35, y: 44 },
71+
],
72+
},
2773
],
28-
}
74+
});
75+
76+
const dataScatterSmall = <ChartData>(<unknown>{
77+
series: [{ label: 'series s1' }],
78+
categories: [
79+
{
80+
label: 'r1',
81+
values: [{ x: 10, y: 20 }],
82+
styles: [
83+
{
84+
color: {
85+
type: 'srgbClr',
86+
value: 'cccccc',
87+
},
88+
label: {
89+
size: 1600,
90+
},
91+
},
92+
],
93+
},
94+
{
95+
label: 'r2',
96+
values: [{ x: 21, y: 11 }],
97+
styles: [
98+
{
99+
color: {
100+
type: 'srgbClr',
101+
value: 'cc00cc',
102+
},
103+
label: {
104+
size: 1800,
105+
},
106+
},
107+
],
108+
},
109+
{
110+
label: 'r3',
111+
values: [{ x: 31, y: 21 }],
112+
styles: <ChartValueStyle[]>[
113+
{
114+
color: {
115+
type: 'srgbClr',
116+
value: 'cccc00',
117+
},
118+
label: {
119+
size: 2000,
120+
showVal: false,
121+
},
122+
},
123+
],
124+
},
125+
],
126+
});
29127

30128
const result = await pres
31-
.addSlide('charts', 1, (slide) => {
32-
slide.modifyElement('Scatter', [
33-
modify.setChartScatter(dataScatter),
129+
.addSlide('charts', 4, (slide) => {
130+
slide.modifyElement('ScatterPointLabel', [
131+
modify.setChartScatter(dataScatterSmall),
34132
]);
35133
})
134+
.addSlide('charts', 1, (slide) => {
135+
slide.modifyElement('Scatter', [modify.setChartScatter(dataScatter)]);
136+
})
36137
.addSlide('charts', 2, (slide) => {
37-
// Set color of a single datapoint
38138
dataScatter.categories[0].styles = [
39139
{
40140
color: {
41141
type: 'srgbClr',
42-
value: 'cccccc'
43-
}
44-
}
45-
]
142+
value: 'cccccc',
143+
},
144+
},
145+
];
146+
46147
slide.modifyElement('ScatterPoint', [
47148
modify.setChartScatter(dataScatter),
48149
]);
49150
})
50-
.write(`modify-chart-scatter.test.pptx`)
151+
.write(`modify-chart-scatter.test.pptx`);
51152

52-
expect(result.charts).toBe(4);
153+
expect(result.charts).toBe(6);
53154
});

‎__tests__/pptx-templates/ChartScatter.pptx‎

13.3 KB
Binary file not shown.

‎src/helper/modify-chart-helper.ts‎

Lines changed: 52 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -574,70 +574,61 @@ export default class ModifyChartHelper {
574574
...applyToSeries,
575575
children: {
576576
'c:dLbls': {
577-
children: {
578-
'c:spPr': {
579-
modify: [ModifyColorHelper.solidFill(dataLabel.solidFill)],
580-
},
581-
'c:dLblPos': {
582-
modify: [ModifyXmlHelper.attribute('val', dataLabel.dLblPos)],
583-
},
584-
'c:showLegendKey': {
585-
modify: [
586-
ModifyXmlHelper.booleanAttribute(
587-
'val',
588-
dataLabel.showLegendKey,
589-
),
590-
],
591-
},
592-
'c:showVal': {
593-
modify: [
594-
ModifyXmlHelper.booleanAttribute('val', dataLabel.showVal),
595-
],
596-
},
597-
'c:showCatName': {
598-
modify: [
599-
ModifyXmlHelper.booleanAttribute(
600-
'val',
601-
dataLabel.showCatName,
602-
),
603-
],
604-
},
605-
'c:showSerName': {
606-
modify: [
607-
ModifyXmlHelper.booleanAttribute(
608-
'val',
609-
dataLabel.showSerName,
610-
),
611-
],
612-
},
613-
'c:showPercent': {
614-
modify: [
615-
ModifyXmlHelper.booleanAttribute(
616-
'val',
617-
dataLabel.showPercent,
618-
),
619-
],
620-
},
621-
'c:showBubbleSize': {
622-
modify: [
623-
ModifyXmlHelper.booleanAttribute(
624-
'val',
625-
dataLabel.showBubbleSize,
626-
),
627-
],
628-
},
629-
'c:showLeaderLines': {
630-
modify: [
631-
ModifyXmlHelper.booleanAttribute(
632-
'val',
633-
dataLabel.showLeaderLines,
634-
),
635-
],
636-
},
637-
},
577+
children:
578+
ModifyChartHelper.setDataPointLabelAttributes(dataLabel),
638579
},
639580
},
640581
},
641582
});
642583
};
584+
585+
static setDataPointLabelAttributes = (
586+
dataLabel: ChartSeriesDataLabelAttributes,
587+
) => {
588+
return {
589+
'c:spPr': {
590+
modify: [ModifyColorHelper.solidFill(dataLabel.solidFill)],
591+
},
592+
'c:dLblPos': {
593+
modify: [ModifyXmlHelper.attribute('val', dataLabel.dLblPos)],
594+
},
595+
'c:showLegendKey': {
596+
modify: [
597+
ModifyXmlHelper.booleanAttribute('val', dataLabel.showLegendKey),
598+
],
599+
},
600+
'c:showVal': {
601+
modify: [ModifyXmlHelper.booleanAttribute('val', dataLabel.showVal)],
602+
},
603+
'c:showCatName': {
604+
modify: [
605+
ModifyXmlHelper.booleanAttribute('val', dataLabel.showCatName),
606+
],
607+
},
608+
'c:showSerName': {
609+
modify: [
610+
ModifyXmlHelper.booleanAttribute('val', dataLabel.showSerName),
611+
],
612+
},
613+
'c:showPercent': {
614+
modify: [
615+
ModifyXmlHelper.booleanAttribute('val', dataLabel.showPercent),
616+
],
617+
},
618+
'c:showBubbleSize': {
619+
modify: [
620+
ModifyXmlHelper.booleanAttribute('val', dataLabel.showBubbleSize),
621+
],
622+
},
623+
'c:showLeaderLines': {
624+
modify: [
625+
ModifyXmlHelper.booleanAttribute('val', dataLabel.showLeaderLines),
626+
],
627+
},
628+
};
629+
};
643630
}
631+
632+
/*
633+
634+
*/

‎src/modify/modify-chart.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ export class ModifyChart {
236236
);
237237

238238
if (series.style?.label) {
239-
// Apply chart for all label props helper if required
239+
// Apply style for all label props helper if required
240240
modify.setDataLabelAttributes({
241241
applyToSeries: s,
242242
...series.style?.label,
@@ -434,6 +434,7 @@ export class ModifyChart {
434434
children: {
435435
'c:dLbl': {
436436
index: index,
437+
fromIndex: 0,
437438
children: {
438439
'c:idx': {
439440
modify: ModifyXmlHelper.attribute('val', String(idx)),
@@ -447,12 +448,31 @@ export class ModifyChart {
447448
},
448449
},
449450
},
451+
'a:fld': {
452+
modify: modifyFld,
453+
children: {
454+
'a:rPr': {
455+
modify: [
456+
ModifyColorHelper.solidFill(labelStyle?.color),
457+
ModifyTextHelper.style(labelStyle),
458+
],
459+
},
460+
'a:defRPr': {
461+
isRequired: false,
462+
modify: [
463+
ModifyColorHelper.solidFill(labelStyle?.color),
464+
ModifyTextHelper.style(labelStyle),
465+
],
466+
},
467+
},
468+
},
450469
},
451470
},
452471
},
453472
},
454473
};
455474
};
475+
456476
seriesId = (series: number): ModificationTags => {
457477
return {
458478
'c:idx': {

0 commit comments

Comments
 (0)