@file-viewer/pptx 3.2.1 → 3.3.0

package/dist/chart.js

@@ -1,4 +1,9 @@
+import { createPptxCartesianChart } from "./chart-config.js";
 let chartLibraryLoader = null;
+let chartRenderer = null;
+export const registerPptxChartRenderer = (renderer) => {
+    chartRenderer = renderer;
+};
 export const registerPptxChartLibraryLoader = (loader) => {
     chartLibraryLoader = loader;
 };
@@ -221,6 +226,9 @@ const renderChart = async (message, root) => {
     if (!chartTarget) {
         return;
     }
+    if (chartRenderer && payload.chartModel) {
+        return await chartRenderer(payload.chartModel, chartTarget);
+    }
     if (!chartLibraryLoader) {
         chartTarget.dataset.fileViewerMissingCapability = 'pptx-charts';
         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) => {
             },
         },
     };
-    switch (payload.chartType) {
-        case 'doughnutChart': {
-            const series = chartData[0];
-            const columns = [];
-            const names = {};
-            const colors = {};
-            for (const [index, point] of ((series === null || series === void 0 ? void 0 : series.values) || []).entries()) {
-                if (typeof point.y !== 'number' || !Number.isFinite(point.y) || point.y === 0)
-                    continue;
-                const id = `point-${index}`;
-                columns.push([id, Math.abs(point.y)]);
-                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);
-                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;
-                if (fill && /^(?:#[\da-f]{6}(?:[\da-f]{2})?|transparent)$/i.test(fill))
-                    colors[id] = fill;
+    const cartesian = payload.chartModel ? createPptxCartesianChart(payload.chartModel, billboard) : null;
+    if (cartesian)
+        Object.assign(chart, cartesian);
+    else
+        switch (payload.chartType) {
+            case 'doughnutChart': {
+                const series = chartData[0];
+                const columns = [];
+                const names = {};
+                const colors = {};
+                for (const [index, point] of ((series === null || series === void 0 ? void 0 : series.values) || []).entries()) {
+                    if (typeof point.y !== 'number' || !Number.isFinite(point.y) || point.y === 0)
+                        continue;
+                    const id = `point-${index}`;
+                    columns.push([id, Math.abs(point.y)]);
+                    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);
+                    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;
+                    if (fill && /^(?:#[\da-f]{6}(?:[\da-f]{2})?|transparent)$/i.test(fill))
+                        colors[id] = fill;
+                }
+                const hole = (_m = payload.chartOptions) === null || _m === void 0 ? void 0 : _m.holeSize;
+                const holeRatio = (typeof hole === 'number' && Number.isFinite(hole) && hole >= 10 && hole <= 90 ? hole : 50) / 100;
+                const angle = (_o = payload.chartOptions) === null || _o === void 0 ? void 0 : _o.firstSliceAngle;
+                let adjustingWidth = false;
+                Object.assign(chart, {
+                    data: { columns, names, colors, type: donut(), order: null },
+                    donut: {
+                        startingAngle: typeof angle === 'number' && Number.isFinite(angle) ? angle * Math.PI / 180 : 0,
+                        expand: false,
+                        label: { show: false },
+                    },
+                    transition: { duration: 0 },
+                    onrendered() {
+                        if (adjustingWidth || typeof this.config !== 'function')
+                            return;
+                        let radius = 0;
+                        for (const arc of chartTarget.querySelectorAll('.bb-arc')) {
+                            const match = /[Aa]([\d.+eE-]+)[ ,]+([\d.+eE-]+)/.exec(arc.getAttribute('d') || '');
+                            if (match)
+                                radius = Math.max(radius, Number(match[1]));
+                        }
+                        if (!(radius > 0) || !Number.isFinite(radius))
+                            return;
+                        const width = radius * (1 - holeRatio);
+                        if (Math.abs(Number(this.config('donut.width')) - width) <= 0.01)
+                            return;
+                        adjustingWidth = true;
+                        try {
+                            this.config('donut.width', width, true);
+                        }
+                        finally {
+                            adjustingWidth = false;
+                        }
+                    },
+                });
+                break;
             }
-            const hole = (_m = payload.chartOptions) === null || _m === void 0 ? void 0 : _m.holeSize;
-            const holeRatio = (typeof hole === 'number' && Number.isFinite(hole) && hole >= 10 && hole <= 90 ? hole : 50) / 100;
-            const angle = (_o = payload.chartOptions) === null || _o === void 0 ? void 0 : _o.firstSliceAngle;
-            let adjustingWidth = false;
-            Object.assign(chart, {
-                data: { columns, names, colors, type: donut(), order: null },
-                donut: {
-                    startingAngle: typeof angle === 'number' && Number.isFinite(angle) ? angle * Math.PI / 180 : 0,
-                    expand: false,
-                    label: { show: false },
-                },
-                transition: { duration: 0 },
-                onrendered() {
-                    if (adjustingWidth || typeof this.config !== 'function')
-                        return;
-                    let radius = 0;
-                    for (const arc of chartTarget.querySelectorAll('.bb-arc')) {
-                        const match = /[Aa]([\d.+eE-]+)[ ,]+([\d.+eE-]+)/.exec(arc.getAttribute('d') || '');
-                        if (match)
-                            radius = Math.max(radius, Number(match[1]));
-                    }
-                    if (!(radius > 0) || !Number.isFinite(radius))
-                        return;
-                    const width = radius * (1 - holeRatio);
-                    if (Math.abs(Number(this.config('donut.width')) - width) <= 0.01)
-                        return;
-                    adjustingWidth = true;
-                    try {
-                        this.config('donut.width', width, true);
-                    }
-                    finally {
-                        adjustingWidth = false;
-                    }
-                },
-            });
-            break;
-        }
-        case 'lineChart':
-            Object.assign(chart, {
-                data: {
-                    columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
-                    type: line(),
-                },
-                axis,
-                interaction: { enabled: true },
-            });
-            break;
-        case 'barChart':
-            Object.assign(chart, {
-                data: {
-                    columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
-                    type: bar(),
-                },
-                axis: {
-                    rotated: payload.barDirection === 'bar',
-                    x: {
-                        tick: {
-                            multiline: true,
-                            format(index) {
-                                var _a, _b, _c;
-                                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;
+            case 'lineChart':
+                Object.assign(chart, {
+                    data: {
+                        columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
+                        type: line(),
+                    },
+                    axis,
+                    interaction: { enabled: true },
+                });
+                break;
+            case 'barChart':
+                Object.assign(chart, {
+                    data: {
+                        columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
+                        type: bar(),
+                    },
+                    axis: {
+                        rotated: payload.barDirection === 'bar',
+                        x: {
+                            tick: {
+                                multiline: true,
+                                format(index) {
+                                    var _a, _b, _c;
+                                    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;
+                                },
                             },
                         },
                     },
-                },
-            });
-            break;
-        case 'pieChart':
-        case 'pie3DChart':
-            Object.assign(chart, {
-                data: {
-                    columns: Object.values(((_p = chartData[0]) === null || _p === void 0 ? void 0 : _p.xlabels) || {}).map((value, index) => {
-                        var _a, _b, _c;
-                        return [
-                            value,
-                            (_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,
-                        ];
-                    }),
-                    type: pie(),
-                },
-            });
-            break;
-        case 'areaChart':
-            Object.assign(chart, {
-                data: {
-                    columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
-                    type: area(),
-                },
-                axis,
-                interaction: { enabled: true },
-            });
-            break;
-        case 'scatterChart':
-            Object.assign(chart, {
-                data: {
-                    xs: { y: 'x' },
-                    columns: chartData.map((item, index) => [index ? 'y' : 'x', ...item]),
-                    type: scatter(),
-                },
-                axis: {
-                    x: {
-                        label: 'X',
-                        showDist: true,
-                        tick: {
-                            format: d3Format.format('.02f'),
-                        },
+                });
+                break;
+            case 'pieChart':
+            case 'pie3DChart':
+                Object.assign(chart, {
+                    data: {
+                        columns: Object.values(((_p = chartData[0]) === null || _p === void 0 ? void 0 : _p.xlabels) || {}).map((value, index) => {
+                            var _a, _b, _c;
+                            return [
+                                value,
+                                (_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,
+                            ];
+                        }),
+                        type: pie(),
                     },
-                    y: {
-                        label: 'Y',
-                        showDist: true,
-                        tick: {
-                            format: d3Format.format('.02f'),
+                });
+                break;
+            case 'areaChart':
+                Object.assign(chart, {
+                    data: {
+                        columns: chartData.map((item) => [item.key, ...item.values.map(({ y }) => y)]),
+                        type: area(),
+                    },
+                    axis,
+                    interaction: { enabled: true },
+                });
+                break;
+            case 'scatterChart':
+                Object.assign(chart, {
+                    data: {
+                        xs: { y: 'x' },
+                        columns: chartData.map((item, index) => [index ? 'y' : 'x', ...item]),
+                        type: scatter(),
+                    },
+                    axis: {
+                        x: {
+                            label: 'X',
+                            showDist: true,
+                            tick: {
+                                format: d3Format.format('.02f'),
+                            },
+                        },
+                        y: {
+                            label: 'Y',
+                            showDist: true,
+                            tick: {
+                                format: d3Format.format('.02f'),
+                            },
                         },
                     },
-                },
-            });
-            break;
-        default:
-            return;
-    }
+                });
+                break;
+            default:
+                return;
+        }
     if (chart.data) {
         const options = payload.chartOptions;
         if (options === null || options === void 0 ? void 0 : options.legend) {
@@ -392,7 +404,7 @@ const renderChart = async (message, root) => {
                 format: (label) => label === '' ? '\u200b' : label,
             };
         }
-        if (['barChart', 'areaChart', 'lineChart'].includes(payload.chartType)) {
+        if (!cartesian && ['barChart', 'areaChart', 'lineChart'].includes(payload.chartType)) {
             const used = new Set();
             const reserved = new Set(chart.data.columns.map((column) => String(column[0])));
             const names = {};

package/dist/index.d.ts

@@ -2,7 +2,8 @@ export { PptxViewer } from "./viewer.js";
 export { PptxPresentation } from "./presentation.js";
 export type { PptxPresentationLabels, PptxPresentationState } from "./presentation.js";
 export { createPptxWorker, resolvePptxPackageWorkerUrl } from "./worker.js";
-export { registerPptxChartLibraryLoader } from "./chart.js";
+export { registerPptxChartLibraryLoader, registerPptxChartRenderer } from "./chart.js";
 export type { PptxChartLibraries, PptxChartLibraryLoader } from "./chart.js";
+export type { PptxChartType, PptxChartLabels, PptxChartOptions, PptxChartSeries, PptxChartAxis, PptxChartGroup, PptxChartModel, PptxChartMessage, PptxChartCollection, PptxChartRenderer, } from "./chart-types.js";
 export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from "./options.js";
 export type { NativePptxEngineOptions, PptxDiagnosticError, PptxDiagnosticErrorCode, PptxFitMode, PptxListOptions, PptxSlideSize, PptxViewerOptions, PptxWorkerFactoryOptions, PptxWorkerMessage, PptxZipLimits, } from "./types.js";

package/dist/index.js

@@ -1,5 +1,5 @@
 export { PptxViewer } from "./viewer.js";
 export { PptxPresentation } from "./presentation.js";
 export { createPptxWorker, resolvePptxPackageWorkerUrl } from "./worker.js";
-export { registerPptxChartLibraryLoader } from "./chart.js";
+export { registerPptxChartLibraryLoader, registerPptxChartRenderer } from "./chart.js";
 export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from "./options.js";

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import type { PptxPresentationLabels, PptxPresentationState } from "./presentation.js";
+import type { PptxChartCollection } from "./chart-types.js";
 export type PptxFitMode = 'contain' | 'none';
 export interface PptxZipLimits {
     maxFileBytes?: number;
@@ -70,5 +71,5 @@ export interface PptxWorkerMessage {
     data?: unknown;
     slide_num?: number;
     file_name?: string;
-    charts?: unknown;
+    charts?: PptxChartCollection;
 }