Skip to content

Commit 8ec1647

Browse files
singerlasingerla
committed
feat(chart): directly use ChartDataLabelAttributes with chart series styles
1 parent 3bf517c commit 8ec1647

File tree

5 files changed

+88
-44
lines changed

5 files changed

+88
-44
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Automizer, { LabelPosition, modify } from '../src/index';
2+
import { ChartSeriesDataLabelAttributes } from '../src/types/chart-types';
23

34
test('modify chart data label.', async () => {
45
const automizer = new Automizer({
@@ -11,7 +12,7 @@ test('modify chart data label.', async () => {
1112
.load(`ChartBarsStackedLabels.pptx`, 'charts')
1213
.load(`ChartLinesVertical.pptx`, 'chartLines');
1314

14-
const DataLabelAttributes = {
15+
const DataLabelAttributes: ChartSeriesDataLabelAttributes = {
1516
dLblPos: LabelPosition.Top,
1617
showLegendKey: false,
1718
showVal: false,

‎__tests__/modify-chart-vertical-lines.test.ts‎

Lines changed: 62 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,90 @@
1-
import Automizer, { modify } from '../src/index';
1+
import Automizer, { ChartData, modify } from '../src/index';
22

33
test('create presentation, add and modify a vertical lines chart.', async () => {
44
const automizer = new Automizer({
55
templateDir: `${__dirname}/pptx-templates`,
6-
outputDir: `${__dirname}/pptx-output`
6+
outputDir: `${__dirname}/pptx-output`,
77
});
88

99
const pres = automizer
10-
.loadRoot(`RootTemplate.pptx`)
11-
.load(`ChartLinesVertical.pptx`, 'charts');
10+
.loadRoot(`RootTemplate.pptx`)
11+
.load(`ChartLinesVertical.pptx`, 'charts');
1212

13-
const data = {
13+
const data: ChartData = {
1414
series: [
15-
{ label: 'series s1' },
16-
{ label: 'series s2' },
17-
{ label: 'series s3' }
15+
{ label: 'series s1' },
16+
{
17+
label: 'series s2',
18+
style: {
19+
color: {
20+
type: 'schemeClr',
21+
value: 'accent1',
22+
},
23+
// Disable labels for this series
24+
label: {
25+
showVal: false,
26+
},
27+
},
28+
},
29+
{
30+
label: 'series s3',
31+
style: {
32+
color: {
33+
type: 'schemeClr',
34+
value: 'accent1',
35+
},
36+
// All labels of a series can be styled
37+
// Notice: first, activate Datalabels in your template chart
38+
label: {
39+
color: {
40+
type: 'schemeClr',
41+
value: 'accent2',
42+
},
43+
isBold: false,
44+
size: 2200,
45+
showVal: true,
46+
showLegendKey: true,
47+
solidFill: {
48+
type: 'schemeClr',
49+
value: 'accent1',
50+
},
51+
},
52+
},
53+
},
1854
],
1955
categories: [
20-
{ label: 'item test r1', y: 10, values: [ 10, 16, 12 ] },
21-
{ label: 'item test r2', y: 9, values: [ 12, 18, 15 ] },
22-
{ label: 'item test r3', y: 8, values: [ 14, 12, 11 ] },
23-
{ label: 'item test r4', y: 7, values: [ 8, 11, 9 ] },
24-
{ label: 'item test r5', y: 6, values: [ 6, 15,7 ] },
25-
{ label: 'item test r6', y: 5, values: [ 16, 16, 9 ] },
26-
{ label: 'item test r7', y: 4, values: [ 10, 13, 12 ] },
27-
{ label: 'item test r8', y: 3, values: [ 11, 12, 14 ] },
28-
{ label: 'item test r9', y: 2, values: [ 9, 7, 11 ] },
29-
{ label: 'item test r10', y: 1, values: [ 7, 5, 17 ] }
56+
{ label: 'item test r1', y: 10, values: [10, 16, 12] },
57+
{ label: 'item test r2', y: 9, values: [12, 18, 15] },
58+
{ label: 'item test r3', y: 8, values: [14, 12, 11] },
59+
{ label: 'item test r4', y: 7, values: [8, 11, 9] },
60+
{ label: 'item test r5', y: 6, values: [6, 15, 7] },
61+
{ label: 'item test r6', y: 5, values: [16, 16, 9] },
62+
{ label: 'item test r7', y: 4, values: [10, 13, 12] },
63+
{ label: 'item test r8', y: 3, values: [11, 12, 14] },
64+
{ label: 'item test r9', y: 2, values: [9, 7, 11] },
65+
{ label: 'item test r10', y: 1, values: [7, 5, 17] },
3066
],
31-
}
67+
};
3268

3369
const dataSmaller = {
34-
series: [
35-
{ label: 'series s1' },
36-
],
70+
series: [{ label: 'series s1' }],
3771
categories: [
38-
{ label: 'item test r1', y: 10, values: [ 10 ] },
39-
{ label: 'item test r2', y: 9, values: [ 12 ] },
40-
{ label: 'item test r3', y: 8, values: [ 14 ] },
72+
{ label: 'item test r1', y: 10, values: [10] },
73+
{ label: 'item test r2', y: 9, values: [12] },
74+
{ label: 'item test r3', y: 8, values: [14] },
4175
],
42-
}
76+
};
4377

4478
const result = await pres
4579
.addSlide('charts', 1, (slide) => {
46-
slide.modifyElement('DotMatrix', [
47-
modify.setChartVerticalLines(data),
48-
]);
80+
slide.modifyElement('DotMatrix', [modify.setChartVerticalLines(data)]);
4981
})
5082
.addSlide('charts', 1, (slide) => {
5183
slide.modifyElement('DotMatrix', [
5284
modify.setChartVerticalLines(dataSmaller),
5385
]);
5486
})
55-
.write(`modify-chart-vertical-lines.test.pptx`)
87+
.write(`modify-chart-vertical-lines.test.pptx`);
5688

5789
expect(result.charts).toBe(4);
5890
});

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import {
55
ChartBubble,
66
ChartCategory,
77
ChartData,
8-
ChartDataLabelAttributes,
98
ChartElementCoordinateShares,
109
ChartPoint,
1110
ChartSeries,
11+
ChartSeriesDataLabelAttributes,
1212
ChartSlot,
1313
} from '../types/chart-types';
1414
import ModifyXmlHelper from './modify-xml-helper';
@@ -554,16 +554,17 @@ export default class ModifyChartHelper {
554554
*
555555
*/
556556
static setDataLabelAttributes =
557-
(dataLabel: ChartDataLabelAttributes): ChartModificationCallback =>
557+
(dataLabel: ChartSeriesDataLabelAttributes): ChartModificationCallback =>
558558
(element: XmlElement, chart: XmlDocument): void => {
559559
const modifyXmlHelper = new ModifyXmlHelper(chart);
560-
const applyToSeries = dataLabel.applyToSeries
561-
? {
562-
index: dataLabel.applyToSeries,
563-
}
564-
: {
565-
all: true,
566-
};
560+
const applyToSeries =
561+
typeof dataLabel.applyToSeries === 'number'
562+
? {
563+
index: dataLabel.applyToSeries,
564+
}
565+
: {
566+
all: true,
567+
};
567568

568569
modifyXmlHelper.modify({
569570
'c:ser': {
@@ -635,7 +636,5 @@ export default class ModifyChartHelper {
635636
},
636637
},
637638
});
638-
639-
XmlHelper.dump(chart.getElementsByTagName('c:dLbls').item(0));
640639
};
641640
}

‎src/modify/modify-chart.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import ModifyXmlHelper from '../helper/modify-xml-helper';
2121
import ModifyTextHelper from '../helper/modify-text-helper';
2222
import ModifyColorHelper from '../helper/modify-color-helper';
2323
import { XmlDocument } from '../types/xml-types';
24+
import { modify } from '../index';
2425

2526
export class ModifyChart {
2627
data: ChartData;
@@ -234,6 +235,14 @@ export class ModifyChart {
234235
this.series(s, this.seriesDataLabel(s, series.style?.label)),
235236
);
236237

238+
if (series.style?.label) {
239+
// Apply chart for all label props helper if required
240+
modify.setDataLabelAttributes({
241+
applyToSeries: s,
242+
...series.style?.label,
243+
})(null, this.chart.root as XmlDocument);
244+
}
245+
237246
this.data.categories.forEach((category, c) => {
238247
this.chart.modify(
239248
this.series(s, this.seriesDataLabelsRange(c, category.label)),

‎src/types/chart-types.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export type ChartValueStyle = {
1717
color?: Color;
1818
isBold?: boolean;
1919
size?: number;
20-
};
20+
} & ChartDataLabelAttributes;
2121
gradient?: {
2222
color: Color;
2323
index: number;
@@ -86,8 +86,11 @@ export type ChartAxisRange = {
8686
sourceLinked?: boolean;
8787
};
8888

89-
export type ChartDataLabelAttributes = {
89+
export type ChartSeriesDataLabelAttributes = {
9090
applyToSeries?: number;
91+
} & ChartDataLabelAttributes;
92+
93+
export type ChartDataLabelAttributes = {
9194
dLblPos?: LabelPosition;
9295
showLegendKey?: boolean;
9396
showVal?: boolean;

0 commit comments

Comments
 (0)