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

Add ability to add custom data labels to charts. #1337

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Add ability to add custom data labels to charts. #1337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ccb1967
Add custom data labels to charts.
Jun 30, 2024
72c15b8
Fix lint error.
Jun 30, 2024
4a6602d
Add types to addChart methods data field.
Jun 30, 2024
55a948d
Revert "Add types to addChart methods data field."
Jun 30, 2024
4be1840
Revert "Add types to addChart methods data field."
Jun 30, 2024
499317b
Add types to addChart
Jun 30, 2024
0907ef0
Fix unsanitised text
Jun 30, 2024
689bb74
builds
Jun 30, 2024
c5116c6
Merge branch 'master' into feature/custom-data-labels
Jun 30, 2024
61571e7
Downgrade jszip
Aug 8, 2024
93c136d
add fontsize to datalabels
Aug 29, 2024
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
4 changes: 2 additions & 2 deletions demos/browser/js/pptxgen.bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion demos/browser/js/pptxgen.bundle.js.map
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/pptxgen.bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/pptxgen.bundle.js.map
View file
Open in desktop

Large diffs are not rendered by default.

51 changes: 48 additions & 3 deletions dist/pptxgen.cjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* PptxGenJS 3.13.0-beta.0 @ 2023-05-17T03:15:58.384Z */
/* PptxGenJS 3.13.0-beta.1 @ 2024-06-30T19:00:38.411Z */
'use strict';

var JSZip = require('jszip');
Expand Down Expand Up @@ -3769,7 +3769,35 @@ function makeChartType(chartType, data, opts, valAxisId, catAxisId, isMultiTypeC
// NOTE: [20190117] Adding these to RADAR chart causes unrecoverable corruption!
if (chartType !== CHART_TYPE.RADAR) {
strXml += '<c:dLbls>';
strXml += "<c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
if (obj.dataLabels) {
obj.dataLabels.forEach(function (value, i) {
strXml += ' <c:dLbl>';
strXml += " <c:idx val=\"".concat(i, "\"/>");
strXml += ' <c:tx>';
strXml += ' <c:rich>';
strXml += ' <a:bodyPr/>';
strXml += ' <a:lstStyle/>';
strXml += ' <a:p>';
strXml += ' <a:r>';
strXml += ' <a:rPr lang="en-US"/>';
strXml += " <a:t>".concat(encodeXmlEntities(value), "</a:t>");
strXml += ' </a:r>';
strXml += ' </a:p>';
strXml += ' </c:rich>';
strXml += ' </c:tx>';
strXml += ' <c:dLblPos val="ctr"/>';
strXml += ' <c:showLegendKey val="0"/>';
strXml += ' <c:showVal val="1"/>';
strXml += ' <c:showCatName val="0"/>';
strXml += ' <c:showSerName val="0"/>';
strXml += ' <c:showPercent val="0"/>';
strXml += ' <c:showBubbleSize val="0"/>';
strXml += ' </c:dLbl>';
});
}
else {
strXml += "<c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
}
if (opts.dataLabelBkgrdColors)
strXml += "<c:spPr><a:solidFill>".concat(createColorElement(seriesColor), "</a:solidFill></c:spPr>");
strXml += '<c:txPr><a:bodyPr/><a:lstStyle/><a:p><a:pPr>';
Expand Down Expand Up @@ -4390,9 +4418,26 @@ function makeChartType(chartType, data, opts, valAxisId, catAxisId, isMultiTypeC
// 3: "Data Label" block for every data Label
strXml += '<c:dLbls>';
optsChartData.labels[0].forEach(function (_label, idx) {
var _a, _b;
strXml += '<c:dLbl>';
strXml += " <c:idx val=\"".concat(idx, "\"/>");
strXml += " <c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
if ((_a = optsChartData === null || optsChartData === void 0 ? void 0 : optsChartData.dataLabels) === null || _a === void 0 ? void 0 : _a.at(idx)) {
strXml += ' <c:tx>';
strXml += ' <c:rich>';
strXml += ' <a:bodyPr/>';
strXml += ' <a:lstStyle/>';
strXml += ' <a:p>';
strXml += ' <a:r>';
strXml += ' <a:rPr lang="en-US"/>';
strXml += " <a:t>".concat(encodeXmlEntities((_b = optsChartData.dataLabels) === null || _b === void 0 ? void 0 : _b.at(idx)), "</a:t>");
strXml += ' </a:r>';
strXml += ' </a:p>';
strXml += ' </c:rich>';
strXml += ' </c:tx>';
}
else {
strXml += " <c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
}
strXml += ' <c:spPr/><c:txPr>';
strXml += ' <a:bodyPr/><a:lstStyle/>';
strXml += ' <a:p><a:pPr>';
Expand Down
51 changes: 48 additions & 3 deletions dist/pptxgen.es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* PptxGenJS 3.13.0-beta.0 @ 2023-05-17T03:15:58.392Z */
/* PptxGenJS 3.13.0-beta.1 @ 2024-06-30T19:00:38.416Z */
import JSZip from 'jszip';

/******************************************************************************
Expand Down Expand Up @@ -3763,7 +3763,35 @@ function makeChartType(chartType, data, opts, valAxisId, catAxisId, isMultiTypeC
// NOTE: [20190117] Adding these to RADAR chart causes unrecoverable corruption!
if (chartType !== CHART_TYPE.RADAR) {
strXml += '<c:dLbls>';
strXml += "<c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
if (obj.dataLabels) {
obj.dataLabels.forEach(function (value, i) {
strXml += ' <c:dLbl>';
strXml += " <c:idx val=\"".concat(i, "\"/>");
strXml += ' <c:tx>';
strXml += ' <c:rich>';
strXml += ' <a:bodyPr/>';
strXml += ' <a:lstStyle/>';
strXml += ' <a:p>';
strXml += ' <a:r>';
strXml += ' <a:rPr lang="en-US"/>';
strXml += " <a:t>".concat(encodeXmlEntities(value), "</a:t>");
strXml += ' </a:r>';
strXml += ' </a:p>';
strXml += ' </c:rich>';
strXml += ' </c:tx>';
strXml += ' <c:dLblPos val="ctr"/>';
strXml += ' <c:showLegendKey val="0"/>';
strXml += ' <c:showVal val="1"/>';
strXml += ' <c:showCatName val="0"/>';
strXml += ' <c:showSerName val="0"/>';
strXml += ' <c:showPercent val="0"/>';
strXml += ' <c:showBubbleSize val="0"/>';
strXml += ' </c:dLbl>';
});
}
else {
strXml += "<c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
}
if (opts.dataLabelBkgrdColors)
strXml += "<c:spPr><a:solidFill>".concat(createColorElement(seriesColor), "</a:solidFill></c:spPr>");
strXml += '<c:txPr><a:bodyPr/><a:lstStyle/><a:p><a:pPr>';
Expand Down Expand Up @@ -4384,9 +4412,26 @@ function makeChartType(chartType, data, opts, valAxisId, catAxisId, isMultiTypeC
// 3: "Data Label" block for every data Label
strXml += '<c:dLbls>';
optsChartData.labels[0].forEach(function (_label, idx) {
var _a, _b;
strXml += '<c:dLbl>';
strXml += " <c:idx val=\"".concat(idx, "\"/>");
strXml += " <c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
if ((_a = optsChartData === null || optsChartData === void 0 ? void 0 : optsChartData.dataLabels) === null || _a === void 0 ? void 0 : _a.at(idx)) {
strXml += ' <c:tx>';
strXml += ' <c:rich>';
strXml += ' <a:bodyPr/>';
strXml += ' <a:lstStyle/>';
strXml += ' <a:p>';
strXml += ' <a:r>';
strXml += ' <a:rPr lang="en-US"/>';
strXml += " <a:t>".concat(encodeXmlEntities((_b = optsChartData.dataLabels) === null || _b === void 0 ? void 0 : _b.at(idx)), "</a:t>");
strXml += ' </a:r>';
strXml += ' </a:p>';
strXml += ' </c:rich>';
strXml += ' </c:tx>';
}
else {
strXml += " <c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
}
strXml += ' <c:spPr/><c:txPr>';
strXml += ' <a:bodyPr/><a:lstStyle/>';
strXml += ' <a:p><a:pPr>';
Expand Down
4 changes: 2 additions & 2 deletions dist/pptxgen.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/pptxgen.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"@types/node": "^18.7.3",
"https": "^1.0.0",
"image-size": "^1.0.0",
"jszip": "^3.10.1"
"jszip": "3.1.5"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^21.0.2",
Expand Down
1 change: 1 addition & 0 deletions src/core-interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1181,6 +1181,7 @@ export interface OptsChartData {
// Used internally, probably shouldn't be used by end users
export interface IOptsChartData extends OptsChartData {
labels?: string[][]
dataLabels?: string[]
}
export interface OptsChartGridLine {
/**
Expand Down
46 changes: 44 additions & 2 deletions src/gen-charts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -876,7 +876,34 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh
// NOTE: [20190117] Adding these to RADAR chart causes unrecoverable corruption!
if (chartType !== CHART_TYPE.RADAR) {
strXml += '<c:dLbls>'
strXml += `<c:numFmt formatCode="${encodeXmlEntities(opts.dataLabelFormatCode) || 'General'}" sourceLinked="0"/>`
if (obj.dataLabels) {
obj.dataLabels.forEach((value, i) => {
strXml += ' <c:dLbl>'
strXml += ` <c:idx val="${i}"/>`
strXml += ' <c:tx>'
strXml += ' <c:rich>'
strXml += ' <a:bodyPr/>'
strXml += ' <a:lstStyle/>'
strXml += ' <a:p>'
strXml += ' <a:r>'
strXml += ` <a:rPr lang="en-US" sz="${opts.fontSize * 100}"/>`
strXml += ` <a:t>${encodeXmlEntities(value)}</a:t>`
strXml += ' </a:r>'
strXml += ' </a:p>'
strXml += ' </c:rich>'
strXml += ' </c:tx>'
strXml += ' <c:dLblPos val="ctr"/>'
strXml += ' <c:showLegendKey val="0"/>'
strXml += ' <c:showVal val="1"/>'
strXml += ' <c:showCatName val="0"/>'
strXml += ' <c:showSerName val="0"/>'
strXml += ' <c:showPercent val="0"/>'
strXml += ' <c:showBubbleSize val="0"/>'
strXml += ' </c:dLbl>'
})
} else {
strXml += `<c:numFmt formatCode="${encodeXmlEntities(opts.dataLabelFormatCode) || 'General'}" sourceLinked="0"/>`
}
if (opts.dataLabelBkgrdColors) strXml += `<c:spPr><a:solidFill>${createColorElement(seriesColor)}</a:solidFill></c:spPr>`
strXml += '<c:txPr><a:bodyPr/><a:lstStyle/><a:p><a:pPr>'
strXml += `<a:defRPr b="${opts.dataLabelFontBold ? 1 : 0}" i="${opts.dataLabelFontItalic ? 1 : 0}" strike="noStrike" sz="${Math.round(
Expand Down Expand Up @@ -1542,7 +1569,22 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh
optsChartData.labels[0].forEach((_label, idx) => {
strXml += '<c:dLbl>'
strXml += ` <c:idx val="${idx}"/>`
strXml += ` <c:numFmt formatCode="${encodeXmlEntities(opts.dataLabelFormatCode) || 'General'}" sourceLinked="0"/>`
if (optsChartData?.dataLabels?.at(idx)) {
strXml += ' <c:tx>'
strXml += ' <c:rich>'
strXml += ' <a:bodyPr/>'
strXml += ' <a:lstStyle/>'
strXml += ' <a:p>'
strXml += ' <a:r>'
strXml += ' <a:rPr lang="en-US"/>'
strXml += ` <a:t>${encodeXmlEntities(optsChartData.dataLabels?.at(idx))}</a:t>`
strXml += ' </a:r>'
strXml += ' </a:p>'
strXml += ' </c:rich>'
strXml += ' </c:tx>'
} else {
strXml += ` <c:numFmt formatCode="${encodeXmlEntities(opts.dataLabelFormatCode) || 'General'}" sourceLinked="0"/>`
}
strXml += ' <c:spPr/><c:txPr>'
strXml += ' <a:bodyPr/><a:lstStyle/>'
strXml += ' <a:p><a:pPr>'
Expand Down
2 changes: 1 addition & 1 deletion src/slide.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export default class Slide {
return this._slideNumberProps
}

public get newAutoPagedSlides(): PresSlide[] {
public get newAutoPagedSlides (): PresSlide[] {
return this._newAutoPagedSlides
}

Expand Down
34 changes: 34 additions & 0 deletions types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2586,6 +2586,40 @@ declare namespace PptxGenJS {
title: string
}

export interface OptsChartData {
/**
* category labels
* @example [['Year 2000', 'Year 2010', 'Year 2020'], ['Decades', '', '']] // multi-level category axes labels
* @since `labels` string[][] type added v3.11.0
*/
labels?: string[][]
/**
* series name
* @example 'Locations'
*/
name?: string
/**
* bubble sizes
* @example [5, 1, 5, 1]
*/
sizes?: number[]
/**
* category values
* @example [2000, 2010, 2020]
*/
values?: number[]
/**
* Override `chartColors`
*/

/**
* Custom text that show on top of data points
* @example ['Q1', 'Q2', 'Q3', 'Q4']
*/
dataLabels?: string[]

// color?: string // TODO: WIP: (Pull #727)
}
// LAST: Slide
/**
* `slide.d.ts`
Expand Down