@file-viewer/pptx 3.2.0 → 3.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.en.md +30 -3
- package/README.md +30 -3
- package/dist/chart-config.d.ts +59 -0
- package/dist/chart-config.js +137 -0
- package/dist/chart-types.d.ts +98 -0
- package/dist/chart-types.js +1 -0
- package/dist/chart.d.ts +2 -0
- package/dist/chart.js +142 -130
- package/dist/index.d.ts +2 -1
- package/dist/index.js +1 -1
- package/dist/types.d.ts +2 -1
- package/dist/worker/pptx.worker.js +10 -9
- package/package.json +5 -1
package/dist/chart.js
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
+
import { createPptxCartesianChart } from "./chart-config.js";
|
|
1
2
|
let chartLibraryLoader = null;
|
|
3
|
+
let chartRenderer = null;
|
|
4
|
+
export const registerPptxChartRenderer = (renderer) => {
|
|
5
|
+
chartRenderer = renderer;
|
|
6
|
+
};
|
|
2
7
|
export const registerPptxChartLibraryLoader = (loader) => {
|
|
3
8
|
chartLibraryLoader = loader;
|
|
4
9
|
};
|
|
@@ -221,6 +226,9 @@ const renderChart = async (message, root) => {
|
|
|
221
226
|
if (!chartTarget) {
|
|
222
227
|
return;
|
|
223
228
|
}
|
|
229
|
+
if (chartRenderer && payload.chartModel) {
|
|
230
|
+
return await chartRenderer(payload.chartModel, chartTarget);
|
|
231
|
+
}
|
|
224
232
|
if (!chartLibraryLoader) {
|
|
225
233
|
chartTarget.dataset.fileViewerMissingCapability = 'pptx-charts';
|
|
226
234
|
chartTarget.setAttribute('title', 'PPTX chart rendering requires @file-viewer/capability-pptx-charts. Run `npx file-viewer-cli add pptx-charts --write`, then `npx file-viewer-cli install --yes`.');
|
|
@@ -247,142 +255,146 @@ const renderChart = async (message, root) => {
|
|
|
247
255
|
},
|
|
248
256
|
},
|
|
249
257
|
};
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
const
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
258
|
+
const cartesian = payload.chartModel ? createPptxCartesianChart(payload.chartModel, billboard) : null;
|
|
259
|
+
if (cartesian)
|
|
260
|
+
Object.assign(chart, cartesian);
|
|
261
|
+
else
|
|
262
|
+
switch (payload.chartType) {
|
|
263
|
+
case 'doughnutChart': {
|
|
264
|
+
const series = chartData[0];
|
|
265
|
+
const columns = [];
|
|
266
|
+
const names = {};
|
|
267
|
+
const colors = {};
|
|
268
|
+
for (const [index, point] of ((series === null || series === void 0 ? void 0 : series.values) || []).entries()) {
|
|
269
|
+
if (typeof point.y !== 'number' || !Number.isFinite(point.y) || point.y === 0)
|
|
270
|
+
continue;
|
|
271
|
+
const id = `point-${index}`;
|
|
272
|
+
columns.push([id, Math.abs(point.y)]);
|
|
273
|
+
names[id] = String((_c = (_b = (_a = series.xlabels) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : point.x) !== null && _c !== void 0 ? _c : index);
|
|
274
|
+
const fill = (_h = (_g = (_f = (_e = (_d = payload.chartOptions) === null || _d === void 0 ? void 0 : _d.series) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.points) === null || _g === void 0 ? void 0 : _g[point.x]) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = payload.chartOptions) === null || _j === void 0 ? void 0 : _j.series) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.color;
|
|
275
|
+
if (fill && /^(?:#[\da-f]{6}(?:[\da-f]{2})?|transparent)$/i.test(fill))
|
|
276
|
+
colors[id] = fill;
|
|
277
|
+
}
|
|
278
|
+
const hole = (_m = payload.chartOptions) === null || _m === void 0 ? void 0 : _m.holeSize;
|
|
279
|
+
const holeRatio = (typeof hole === 'number' && Number.isFinite(hole) && hole >= 10 && hole <= 90 ? hole : 50) / 100;
|
|
280
|
+
const angle = (_o = payload.chartOptions) === null || _o === void 0 ? void 0 : _o.firstSliceAngle;
|
|
281
|
+
let adjustingWidth = false;
|
|
282
|
+
Object.assign(chart, {
|
|
283
|
+
data: { columns, names, colors, type: donut(), order: null },
|
|
284
|
+
donut: {
|
|
285
|
+
startingAngle: typeof angle === 'number' && Number.isFinite(angle) ? angle * Math.PI / 180 : 0,
|
|
286
|
+
expand: false,
|
|
287
|
+
label: { show: false },
|
|
288
|
+
},
|
|
289
|
+
transition: { duration: 0 },
|
|
290
|
+
onrendered() {
|
|
291
|
+
if (adjustingWidth || typeof this.config !== 'function')
|
|
292
|
+
return;
|
|
293
|
+
let radius = 0;
|
|
294
|
+
for (const arc of chartTarget.querySelectorAll('.bb-arc')) {
|
|
295
|
+
const match = /[Aa]([\d.+eE-]+)[ ,]+([\d.+eE-]+)/.exec(arc.getAttribute('d') || '');
|
|
296
|
+
if (match)
|
|
297
|
+
radius = Math.max(radius, Number(match[1]));
|
|
298
|
+
}
|
|
299
|
+
if (!(radius > 0) || !Number.isFinite(radius))
|
|
300
|
+
return;
|
|
301
|
+
const width = radius * (1 - holeRatio);
|
|
302
|
+
if (Math.abs(Number(this.config('donut.width')) - width) <= 0.01)
|
|
303
|
+
return;
|
|
304
|
+
adjustingWidth = true;
|
|
305
|
+
try {
|
|
306
|
+
this.config('donut.width', width, true);
|
|
307
|
+
}
|
|
308
|
+
finally {
|
|
309
|
+
adjustingWidth = false;
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
});
|
|
313
|
+
break;
|
|
265
314
|
}
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
return;
|
|
292
|
-
adjustingWidth = true;
|
|
293
|
-
try {
|
|
294
|
-
this.config('donut.width', width, true);
|
|
295
|
-
}
|
|
296
|
-
finally {
|
|
297
|
-
adjustingWidth = false;
|
|
298
|
-
}
|
|
299
|
-
},
|
|
300
|
-
});
|
|
301
|
-
break;
|
|
302
|
-
}
|
|
303
|
-
case 'lineChart':
|
|
304
|
-
Object.assign(chart, {
|
|
305
|
-
data: {
|
|
306
|
-
columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
|
|
307
|
-
type: line(),
|
|
308
|
-
},
|
|
309
|
-
axis,
|
|
310
|
-
interaction: { enabled: true },
|
|
311
|
-
});
|
|
312
|
-
break;
|
|
313
|
-
case 'barChart':
|
|
314
|
-
Object.assign(chart, {
|
|
315
|
-
data: {
|
|
316
|
-
columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
|
|
317
|
-
type: bar(),
|
|
318
|
-
},
|
|
319
|
-
axis: {
|
|
320
|
-
rotated: payload.barDirection === 'bar',
|
|
321
|
-
x: {
|
|
322
|
-
tick: {
|
|
323
|
-
multiline: true,
|
|
324
|
-
format(index) {
|
|
325
|
-
var _a, _b, _c;
|
|
326
|
-
return (_c = (_b = (_a = chartData[0]) === null || _a === void 0 ? void 0 : _a.xlabels) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : index;
|
|
315
|
+
case 'lineChart':
|
|
316
|
+
Object.assign(chart, {
|
|
317
|
+
data: {
|
|
318
|
+
columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
|
|
319
|
+
type: line(),
|
|
320
|
+
},
|
|
321
|
+
axis,
|
|
322
|
+
interaction: { enabled: true },
|
|
323
|
+
});
|
|
324
|
+
break;
|
|
325
|
+
case 'barChart':
|
|
326
|
+
Object.assign(chart, {
|
|
327
|
+
data: {
|
|
328
|
+
columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
|
|
329
|
+
type: bar(),
|
|
330
|
+
},
|
|
331
|
+
axis: {
|
|
332
|
+
rotated: payload.barDirection === 'bar',
|
|
333
|
+
x: {
|
|
334
|
+
tick: {
|
|
335
|
+
multiline: true,
|
|
336
|
+
format(index) {
|
|
337
|
+
var _a, _b, _c;
|
|
338
|
+
return (_c = (_b = (_a = chartData[0]) === null || _a === void 0 ? void 0 : _a.xlabels) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : index;
|
|
339
|
+
},
|
|
327
340
|
},
|
|
328
341
|
},
|
|
329
342
|
},
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
type: pie(),
|
|
345
|
-
},
|
|
346
|
-
});
|
|
347
|
-
break;
|
|
348
|
-
case 'areaChart':
|
|
349
|
-
Object.assign(chart, {
|
|
350
|
-
data: {
|
|
351
|
-
columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
|
|
352
|
-
type: area(),
|
|
353
|
-
},
|
|
354
|
-
axis,
|
|
355
|
-
interaction: { enabled: true },
|
|
356
|
-
});
|
|
357
|
-
break;
|
|
358
|
-
case 'scatterChart':
|
|
359
|
-
Object.assign(chart, {
|
|
360
|
-
data: {
|
|
361
|
-
xs: { y: 'x' },
|
|
362
|
-
columns: chartData.map((item, index) => [index ? 'y' : 'x', ...item]),
|
|
363
|
-
type: scatter(),
|
|
364
|
-
},
|
|
365
|
-
axis: {
|
|
366
|
-
x: {
|
|
367
|
-
label: 'X',
|
|
368
|
-
showDist: true,
|
|
369
|
-
tick: {
|
|
370
|
-
format: d3Format.format('.02f'),
|
|
371
|
-
},
|
|
343
|
+
});
|
|
344
|
+
break;
|
|
345
|
+
case 'pieChart':
|
|
346
|
+
case 'pie3DChart':
|
|
347
|
+
Object.assign(chart, {
|
|
348
|
+
data: {
|
|
349
|
+
columns: Object.values(((_p = chartData[0]) === null || _p === void 0 ? void 0 : _p.xlabels) || {}).map((value, index) => {
|
|
350
|
+
var _a, _b, _c;
|
|
351
|
+
return [
|
|
352
|
+
value,
|
|
353
|
+
(_c = (_b = (_a = chartData[0]) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.y,
|
|
354
|
+
];
|
|
355
|
+
}),
|
|
356
|
+
type: pie(),
|
|
372
357
|
},
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
358
|
+
});
|
|
359
|
+
break;
|
|
360
|
+
case 'areaChart':
|
|
361
|
+
Object.assign(chart, {
|
|
362
|
+
data: {
|
|
363
|
+
columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
|
|
364
|
+
type: area(),
|
|
365
|
+
},
|
|
366
|
+
axis,
|
|
367
|
+
interaction: { enabled: true },
|
|
368
|
+
});
|
|
369
|
+
break;
|
|
370
|
+
case 'scatterChart':
|
|
371
|
+
Object.assign(chart, {
|
|
372
|
+
data: {
|
|
373
|
+
xs: { y: 'x' },
|
|
374
|
+
columns: chartData.map((item, index) => [index ? 'y' : 'x', ...item]),
|
|
375
|
+
type: scatter(),
|
|
376
|
+
},
|
|
377
|
+
axis: {
|
|
378
|
+
x: {
|
|
379
|
+
label: 'X',
|
|
380
|
+
showDist: true,
|
|
381
|
+
tick: {
|
|
382
|
+
format: d3Format.format('.02f'),
|
|
383
|
+
},
|
|
384
|
+
},
|
|
385
|
+
y: {
|
|
386
|
+
label: 'Y',
|
|
387
|
+
showDist: true,
|
|
388
|
+
tick: {
|
|
389
|
+
format: d3Format.format('.02f'),
|
|
390
|
+
},
|
|
378
391
|
},
|
|
379
392
|
},
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
}
|
|
393
|
+
});
|
|
394
|
+
break;
|
|
395
|
+
default:
|
|
396
|
+
return;
|
|
397
|
+
}
|
|
386
398
|
if (chart.data) {
|
|
387
399
|
const options = payload.chartOptions;
|
|
388
400
|
if (options === null || options === void 0 ? void 0 : options.legend) {
|
|
@@ -392,7 +404,7 @@ const renderChart = async (message, root) => {
|
|
|
392
404
|
format: (label) => label === '' ? '\u200b' : label,
|
|
393
405
|
};
|
|
394
406
|
}
|
|
395
|
-
if (['barChart', 'areaChart', 'lineChart'].includes(payload.chartType)) {
|
|
407
|
+
if (!cartesian && ['barChart', 'areaChart', 'lineChart'].includes(payload.chartType)) {
|
|
396
408
|
const used = new Set();
|
|
397
409
|
const reserved = new Set(chart.data.columns.map((column) => String(column[0])));
|
|
398
410
|
const names = {};
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,8 @@ export { PptxViewer } from "./viewer.js";
|
|
|
2
2
|
export { PptxPresentation } from "./presentation.js";
|
|
3
3
|
export type { PptxPresentationLabels, PptxPresentationState } from "./presentation.js";
|
|
4
4
|
export { createPptxWorker, resolvePptxPackageWorkerUrl } from "./worker.js";
|
|
5
|
-
export { registerPptxChartLibraryLoader } from "./chart.js";
|
|
5
|
+
export { registerPptxChartLibraryLoader, registerPptxChartRenderer } from "./chart.js";
|
|
6
6
|
export type { PptxChartLibraries, PptxChartLibraryLoader } from "./chart.js";
|
|
7
|
+
export type { PptxChartType, PptxChartLabels, PptxChartOptions, PptxChartSeries, PptxChartAxis, PptxChartGroup, PptxChartModel, PptxChartMessage, PptxChartCollection, PptxChartRenderer, } from "./chart-types.js";
|
|
7
8
|
export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from "./options.js";
|
|
8
9
|
export type { NativePptxEngineOptions, PptxDiagnosticError, PptxDiagnosticErrorCode, PptxFitMode, PptxListOptions, PptxSlideSize, PptxViewerOptions, PptxWorkerFactoryOptions, PptxWorkerMessage, PptxZipLimits, } from "./types.js";
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { PptxViewer } from "./viewer.js";
|
|
2
2
|
export { PptxPresentation } from "./presentation.js";
|
|
3
3
|
export { createPptxWorker, resolvePptxPackageWorkerUrl } from "./worker.js";
|
|
4
|
-
export { registerPptxChartLibraryLoader } from "./chart.js";
|
|
4
|
+
export { registerPptxChartLibraryLoader, registerPptxChartRenderer } from "./chart.js";
|
|
5
5
|
export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from "./options.js";
|
package/dist/types.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { PptxPresentationLabels, PptxPresentationState } from "./presentation.js";
|
|
2
|
+
import type { PptxChartCollection } from "./chart-types.js";
|
|
2
3
|
export type PptxFitMode = 'contain' | 'none';
|
|
3
4
|
export interface PptxZipLimits {
|
|
4
5
|
maxFileBytes?: number;
|
|
@@ -70,5 +71,5 @@ export interface PptxWorkerMessage {
|
|
|
70
71
|
data?: unknown;
|
|
71
72
|
slide_num?: number;
|
|
72
73
|
file_name?: string;
|
|
73
|
-
charts?:
|
|
74
|
+
charts?: PptxChartCollection;
|
|
74
75
|
}
|