@json-to-office/core-pptx 1.0.0 → 1.3.0

package/dist/core/structure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"structure.d.ts","sourceRoot":"","sources":["../../src/core/structure.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAGV,+BAA+B,EAC/B,qBAAqB,EAGtB,MAAM,UAAU,CAAC;AAQlB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAmCrD,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,+BAA+B,EACzC,OAAO,CAAC,EAAE,iBAAiB,GAC1B,qBAAqB,CAwJvB"}
+{"version":3,"file":"structure.d.ts","sourceRoot":"","sources":["../../src/core/structure.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAGV,+BAA+B,EAC/B,qBAAqB,EAItB,MAAM,UAAU,CAAC;AAQlB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAmCrD,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,+BAA+B,EACzC,OAAO,CAAC,EAAE,iBAAiB,GAC1B,qBAAqB,CA8JvB"}

package/dist/index.js

@@ -186,6 +186,39 @@ var init_features = __esm({
       "table-auto-page",
       /** Native OOXML charts with an embedded workbook. */
       "charts",
+      /*
+       * Chart styling, split finer than `charts` itself.
+       *
+       * `charts` says a backend can draw a chart from data. It says nothing about
+       * whether that backend honours the options the author styled it with, and one
+       * coarse feature let a renderer accept a chart, draw it, and quietly ignore
+       * half of what was asked for — an ignored axis maximum draws a different
+       * chart from the authored one and the file says nothing about it.
+       *
+       * Each name below is required by the compiler *only when the matching prop
+       * was authored*, at that prop's own path, so a default never demands a
+       * capability and a refusal always names the line that caused it.
+       */
+      /** `barGapWidthPct`, `barOverlapPct`. */
+      "chart-bar-style",
+      /** `firstSliceAng`, `holeSize`. */
+      "chart-pie-style",
+      /** `lineSmooth`, `lineDataSymbol`, `lineSize`, `lineDataSymbolSize`. */
+      "chart-line-style",
+      /** `radarStyle` — anything but the `standard` a backend may hardcode. */
+      "chart-radar-style",
+      /** `showValue`, `showPercent`, `showLabel`, `showSerName`, `dataLabelPosition`. */
+      "chart-data-labels",
+      /** `dataBorder`: an outline on bars, slices and areas. */
+      "chart-data-border",
+      /** Value-axis bounds and number format: min, max, major unit, format code. */
+      "chart-axis-scale",
+      /** Hiding an axis or its line. */
+      "chart-axis-visibility",
+      /** Axis label rotation and grid lines. */
+      "chart-axis-style",
+      /** Font family, size, weight and colour on any chart text. */
+      "chart-text-style",
       "solid-fills",
       "gradient-fills",
       "pattern-fills",
@@ -938,11 +971,6 @@ async function finalizePackage(zip, generatedAt) {
   await canonicalizeChartIds(zip);
   await canonicalizePackage(zip, generatedAt);
 }
-async function finalizePackageBuffer(buffer, options = {}) {
-  const zip = await readPackage(buffer);
-  await finalizePackage(zip, resolveGeneratedAt(options.generatedAt));
-  return writePackage(zip);
-}
 function replaceCoreTimestamp(xml, tag, value) {
   const expression = new RegExp(
     `(<dcterms:${tag}\\b[^>]*>)[^<]*(</dcterms:${tag}>)`,
@@ -1348,6 +1376,143 @@ var init_pptxgenjs = __esm({
   }
 });
 
+// src/renderers/office-open/chartParts.ts
+import JSZip2 from "jszip";
+import {
+  CHART_WORKBOOK_CONTENT_TYPE,
+  chartWorkbookParts,
+  chartWorkbookRelsXml,
+  matchChartParts,
+  spliceChartXml
+} from "@json-to-office/shared/rendering";
+function spliceInput(element) {
+  return {
+    chartType: element.chartType,
+    series: element.series.map((series) => ({
+      ...series.name !== void 0 ? { name: series.name } : {},
+      labels: series.labels ?? [],
+      values: series.values ?? []
+    })),
+    colors: element.options.colors,
+    ...element.options.barGrouping ? { barGrouping: element.options.barGrouping } : {},
+    // Spliced rather than emitted: see `chartChild`, which cannot pass `axes`
+    // without also inventing the axis ids the plot area references.
+    categoryAxis: axisEdits(element.options.categoryAxis),
+    valueAxis: axisEdits(element.options.valueAxis),
+    // Three the backend has nowhere to put: `ChartSeriesCommon` has no line
+    // width, no data-element outline, and `c:radarStyle` is written from a
+    // literal rather than an option.
+    ...element.options.lineSize !== void 0 ? { lineWidthPoints: element.options.lineSize } : {},
+    ...element.options.dataBorder ? {
+      dataBorder: {
+        widthPoints: element.options.dataBorder.widthPoints,
+        color: element.options.dataBorder.color.hex
+      }
+    } : {},
+    ...element.options.radarStyle ? { radarStyle: element.options.radarStyle } : {},
+    // Fonts: `c:txPr` and `a:defRPr` on four different elements, none of which
+    // the backend exposes an option for.
+    ...textStyle(element.options.titleFont) ? { titleFont: textStyle(element.options.titleFont) } : {},
+    ...textStyle(element.options.legendFont) ? { legendFont: textStyle(element.options.legendFont) } : {},
+    ...textStyle(element.options.dataLabelFont) ? { dataLabelFont: textStyle(element.options.dataLabelFont) } : {}
+  };
+}
+function textStyle(font) {
+  if (!font) return void 0;
+  const style = {
+    ...font.fontFamily !== void 0 ? { fontFamily: font.fontFamily } : {},
+    ...font.fontSize !== void 0 ? { fontSize: font.fontSize } : {},
+    ...font.bold !== void 0 ? { bold: font.bold } : {},
+    ...font.color ? { color: font.color.hex } : {}
+  };
+  return Object.keys(style).length > 0 ? style : void 0;
+}
+function axisEdits(axis) {
+  const value = axis;
+  return {
+    ...axis.title !== void 0 ? { title: axis.title } : {},
+    ...axis.hidden !== void 0 ? { hidden: axis.hidden } : {},
+    ...axis.showLine !== void 0 ? { lineVisible: axis.showLine } : {},
+    ...axis.labelRotate !== void 0 ? { labelRotation: axis.labelRotate } : {},
+    ...textStyle(axis.labelFont) ? { labelFont: textStyle(axis.labelFont) } : {},
+    ...axis.gridLine ? {
+      gridLine: {
+        ...textStyle(axis.labelFont) ? { labelFont: textStyle(axis.labelFont) } : {},
+        ...axis.gridLine.style !== void 0 ? { style: axis.gridLine.style } : {},
+        ...textStyle(axis.labelFont) ? { labelFont: textStyle(axis.labelFont) } : {},
+        ...axis.gridLine.size !== void 0 ? { size: axis.gridLine.size } : {},
+        ...textStyle(axis.labelFont) ? { labelFont: textStyle(axis.labelFont) } : {},
+        ...axis.gridLine.color ? { color: axis.gridLine.color.hex } : {}
+      }
+    } : {},
+    ...value.minValue !== void 0 ? { min: value.minValue } : {},
+    ...value.maxValue !== void 0 ? { max: value.maxValue } : {},
+    ...value.majorUnit !== void 0 ? { majorUnit: value.majorUnit } : {},
+    ...value.labelFormatCode !== void 0 ? { numberFormat: value.labelFormatCode } : {}
+  };
+}
+function declareWorkbookContentType(zip, xml) {
+  if (xml.includes(`Extension="xlsx"`)) return;
+  const patched = xml.replace(
+    '<Default Extension="xml"',
+    `<Default Extension="xlsx" ContentType="${CHART_WORKBOOK_CONTENT_TYPE}"/><Default Extension="xml"`
+  );
+  if (patched === xml) {
+    throw new Error(
+      'Could not declare the embedded workbook content type: [Content_Types].xml has no `<Default Extension="xml"` to anchor on. The package would ship an .xlsx part no content type covers.'
+    );
+  }
+  zip.file("[Content_Types].xml", patched, { createFolders: false });
+}
+async function workbookBytes(chart) {
+  const book = new JSZip2();
+  for (const [path4, content] of chartWorkbookParts(chart.series)) {
+    book.file(path4, content, { createFolders: false });
+  }
+  return book.generateAsync({
+    type: "uint8array",
+    compression: "DEFLATE",
+    compressionOptions: { level: 6 }
+  });
+}
+async function spliceChartParts(zip, charts) {
+  if (charts.length === 0) return;
+  const inputs = charts.map(spliceInput);
+  const parts = [];
+  for (const path4 of Object.keys(zip.files)) {
+    const match = path4.match(/^ppt\/charts\/chart(\d+)\.xml$/);
+    if (!match) continue;
+    parts.push([Number(match[1]), await zip.file(path4).async("string")]);
+  }
+  parts.sort(([a], [b]) => a - b);
+  for (const { ordinal, xml, chart } of matchChartParts(parts, inputs)) {
+    const workbook = workbookName(ordinal);
+    zip.file(`ppt/charts/chart${ordinal}.xml`, spliceChartXml(xml, chart), {
+      createFolders: false
+    });
+    zip.file(`ppt/embeddings/${workbook}`, await workbookBytes(chart), {
+      binary: true,
+      createFolders: false
+    });
+    zip.file(
+      `ppt/charts/_rels/chart${ordinal}.xml.rels`,
+      chartWorkbookRelsXml(workbook),
+      { createFolders: false }
+    );
+  }
+  const contentTypes = zip.file("[Content_Types].xml");
+  if (contentTypes) {
+    declareWorkbookContentType(zip, await contentTypes.async("string"));
+  }
+}
+var workbookName;
+var init_chartParts = __esm({
+  "src/renderers/office-open/chartParts.ts"() {
+    "use strict";
+    workbookName = (ordinal) => `Microsoft_Excel_Worksheet${ordinal}.xlsx`;
+  }
+});
+
 // src/renderers/office-open/emit.ts
 import { assertNever as assertNever2 } from "@json-to-office/shared/rendering";
 function geometryName(geometry) {
@@ -1684,6 +1849,82 @@ function groupChild(element, ctx) {
   }
   return { group };
 }
+function chartChild(element, ctx) {
+  const { options, transform } = element;
+  const series = element.series;
+  const dataLabels = dataLabelOptions(options);
+  const marker = markerOptions(options);
+  if (element.chartType === "bubble") {
+    throw new Error(
+      `the office-open renderer does not draw bubble charts (${element.path}); use the pptxgenjs renderer for this chart`
+    );
+  }
+  return {
+    // Stated, never left to the backend: `_nextChartId` in
+    // `@office-open/pptx` is module-level and never resets, so an unnamed
+    // chart is numbered differently on every render in the same process.
+    id: ctx.nextId(),
+    ...chartTypeOptions(element),
+    categories: series[0]?.labels ?? [],
+    series: series.map((entry, index) => ({
+      name: entry.name ?? `Series ${index + 1}`,
+      values: entry.values ?? [],
+      // Every series, not just the first: PowerPoint labels each one, and a
+      // chart that labelled only its first series would be a different chart.
+      ...dataLabels ? { dataLabels } : {},
+      ...options.lineSmooth !== void 0 ? { smooth: options.lineSmooth } : {},
+      ...marker ? { marker } : {}
+    })),
+    ...options.title && options.showTitle !== false ? { title: options.title } : {},
+    ...options.showLegend !== void 0 ? { showLegend: options.showLegend } : {},
+    ...chartFamilyOptions(options),
+    ...options.legendPosition ? { legendPosition: options.legendPosition } : {},
+    x: transform.xEmu,
+    y: transform.yEmu,
+    width: transform.widthEmu,
+    height: transform.heightEmu,
+    ...element.altText ? { description: element.altText } : {}
+  };
+}
+function chartFamilyOptions(options) {
+  return {
+    ...options.barGapWidthPercent !== void 0 ? { gapWidth: options.barGapWidthPercent } : {},
+    ...options.barOverlapPercent !== void 0 ? { overlap: options.barOverlapPercent } : {},
+    ...options.holeSize !== void 0 ? { holeSize: options.holeSize } : {},
+    ...options.firstSliceAngle !== void 0 ? { firstSliceAngle: options.firstSliceAngle } : {}
+  };
+}
+function dataLabelOptions(options) {
+  const authored = options.showValue !== void 0 || options.showPercent !== void 0 || options.showLabel !== void 0 || options.showSeriesName !== void 0 || options.dataLabelPosition !== void 0;
+  if (!authored) return void 0;
+  return {
+    showVal: options.showValue ?? false,
+    showPercent: options.showPercent ?? false,
+    showCatName: options.showLabel ?? false,
+    showSerName: options.showSeriesName ?? false,
+    showBubbleSize: false,
+    showLegendKey: false,
+    ...options.dataLabelPosition ? { position: options.dataLabelPosition } : {}
+  };
+}
+function markerOptions(options) {
+  const marker = {
+    ...options.lineDataSymbol ? { symbol: options.lineDataSymbol } : {},
+    ...options.lineDataSymbolSize !== void 0 ? { size: options.lineDataSymbolSize } : {}
+  };
+  return Object.keys(marker).length > 0 ? marker : void 0;
+}
+function chartTypeOptions(element) {
+  const horizontal = element.options.barDirection === "bar";
+  switch (element.chartType) {
+    case "bar":
+      return { type: horizontal ? "bar" : "column" };
+    case "bar3D":
+      return { type: horizontal ? "bar" : "column", threeD: true };
+    default:
+      return { type: element.chartType };
+  }
+}
 function slideChild(element, ctx) {
   switch (element.kind) {
     case "textBox":
@@ -1697,9 +1938,8 @@ function slideChild(element, ctx) {
     case "group":
       return groupChild(element, ctx);
     case "chart":
-      throw new Error(
-        `the office-open renderer does not emit charts (${element.path})`
-      );
+      ctx.charts?.push(element);
+      return { chart: chartChild(element, ctx) };
     default:
       return assertNever2(element, "PptxIrElement");
   }
@@ -1801,26 +2041,30 @@ async function createOfficeOpenPptxRenderer() {
     format: "pptx",
     capabilities: OFFICE_OPEN_CAPABILITIES,
     async render(ir, options) {
-      const presentation = await buildPresentationOptions(ir);
+      const charts = [];
+      const presentation = await buildPresentationOptions(ir, charts);
       const bytes = await backend.generatePresentation(presentation, {
         type: "uint8array"
       });
       const raw = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
-      if (options?.deterministic === false) return raw;
-      return new Uint8Array(
-        await finalizePackageBuffer(Buffer.from(raw), {
-          generatedAt: options?.generatedAt
-        })
-      );
+      if (charts.length === 0 && options?.deterministic === false) return raw;
+      const zip = await readPackage(Buffer.from(raw));
+      await spliceChartParts(zip, charts);
+      if (options?.deterministic === false) {
+        return new Uint8Array(await writePackage(zip));
+      }
+      await finalizePackage(zip, resolveGeneratedAt(options?.generatedAt));
+      return new Uint8Array(await writePackage(zip));
     }
   };
 }
-async function buildPresentationOptions(ir) {
+async function buildPresentationOptions(ir, charts = []) {
   let nextDrawingId = 2;
   const ctx = {
     resources: new Map(ir.resources.map((r) => [r.id, r])),
     resourceBytes: await loadResourceBytes(ir.resources),
-    nextId: () => nextDrawingId++
+    nextId: () => nextDrawingId++,
+    charts
   };
   const presentation = {
     size: { width: ir.size.widthEmu, height: ir.size.heightEmu },
@@ -1911,13 +2155,13 @@ var init_office_open = __esm({
   "src/renderers/office-open/index.ts"() {
     "use strict";
     init_finalizePackage();
+    init_chartParts();
     init_features();
     init_emit2();
     OFFICE_OPEN_PPTX_RENDERER_ID = "office-open";
     OFFICE_OPEN_PPTX = "@office-open/pptx";
     UNSUPPORTED = /* @__PURE__ */ new Set([
       "svg",
-      "charts",
       "image-transform",
       "image-crop",
       "image-rounding",
@@ -3343,6 +3587,61 @@ var CHART_TYPES = [
   "radar",
   "scatter"
 ];
+var CHART_STYLE_FEATURES = {
+  showValue: "chart-data-labels",
+  showPercent: "chart-data-labels",
+  showLabel: "chart-data-labels",
+  showSerName: "chart-data-labels",
+  dataLabelPosition: "chart-data-labels",
+  dataBorder: "chart-data-border",
+  catAxisHidden: "chart-axis-visibility",
+  valAxisHidden: "chart-axis-visibility",
+  catAxisLineShow: "chart-axis-visibility",
+  valAxisLineShow: "chart-axis-visibility",
+  catAxisLabelRotate: "chart-axis-style",
+  catGridLine: "chart-axis-style",
+  valGridLine: "chart-axis-style",
+  valAxisMinVal: "chart-axis-scale",
+  valAxisMaxVal: "chart-axis-scale",
+  valAxisMajorUnit: "chart-axis-scale",
+  valAxisLabelFormatCode: "chart-axis-scale",
+  barGapWidthPct: "chart-bar-style",
+  barOverlapPct: "chart-bar-style",
+  firstSliceAng: "chart-pie-style",
+  holeSize: "chart-pie-style",
+  lineSmooth: "chart-line-style",
+  lineDataSymbol: "chart-line-style",
+  lineSize: "chart-line-style",
+  lineDataSymbolSize: "chart-line-style",
+  radarStyle: "chart-radar-style",
+  titleFontSize: "chart-text-style",
+  titleColor: "chart-text-style",
+  titleFontFace: "chart-text-style",
+  titleFontWeight: "chart-text-style",
+  legendFontSize: "chart-text-style",
+  legendFontFace: "chart-text-style",
+  legendFontWeight: "chart-text-style",
+  legendColor: "chart-text-style",
+  catAxisLabelFontSize: "chart-text-style",
+  catAxisLabelColor: "chart-text-style",
+  catAxisLabelFontFace: "chart-text-style",
+  catAxisLabelFontWeight: "chart-text-style",
+  valAxisLabelFontSize: "chart-text-style",
+  valAxisLabelColor: "chart-text-style",
+  valAxisLabelFontFace: "chart-text-style",
+  valAxisLabelFontWeight: "chart-text-style",
+  dataLabelColor: "chart-text-style",
+  dataLabelFontSize: "chart-text-style",
+  dataLabelFontFace: "chart-text-style",
+  dataLabelFontWeight: "chart-text-style",
+  dataLabelFontBold: "chart-text-style"
+};
+function requireChartStyleFeatures(props, ctx, path4) {
+  for (const [prop, feature] of Object.entries(CHART_STYLE_FEATURES)) {
+    if (props[prop] === void 0) continue;
+    ctx.features.require(feature, `${path4}.${prop}`);
+  }
+}
 function compileChart(component, scope) {
   const { ctx, path: path4 } = scope;
   const props = component.props;
@@ -3385,6 +3684,7 @@ function compileChart(component, scope) {
     );
   }
   ctx.features.require("charts", path4);
+  requireChartStyleFeatures(props, ctx, path4);
   return {
     kind: "chart",
     id: scope.id,
@@ -4416,15 +4716,16 @@ function processPresentation(document, options) {
         slideComponents,
         theme
       ).map((component) => remapHyperlinkSlideRefs(component, slideIndexMap));
-      const placeholders = child.props.placeholders;
+      const slideProps = child.props ?? {};
+      const placeholders = slideProps.placeholders;
       slides.push({
         components: resolvedComponents,
-        background: child.props.background,
-        transition: child.props.transition,
-        notes: child.props.notes,
-        layout: child.props.layout,
-        hidden: child.props.hidden,
-        template: child.props.template,
+        background: slideProps.background,
+        transition: slideProps.transition,
+        notes: slideProps.notes,
+        layout: slideProps.layout,
+        hidden: slideProps.hidden,
+        template: slideProps.template,
         placeholders: placeholders ? Object.fromEntries(
           Object.entries(placeholders).map(([name, component]) => [
             name,