@json-to-office/core-docx 1.1.0 → 1.3.0

package/dist/index.js

@@ -2217,6 +2217,10 @@ function inlineChildren(children, resources = /* @__PURE__ */ new Map()) {
         throw new Error(
           "the docxjs renderer has no emitter for a drawing group; this document should have been refused by the capability check"
         );
+      case "chart":
+        throw new Error(
+          "the docxjs renderer has no emitter for a chart; this document should have been refused by the capability check"
+        );
       case "noteReference":
         out.push(
           child.noteKind === "endnote" ? new EndnoteReferenceRun(child.id) : new FootnoteReferenceRun(child.id)
@@ -2817,6 +2821,17 @@ var init_features = __esm({
        * pictures — a backend can plausibly have the first and not the second.
        */
       "drawing-groups",
+      /**
+       * A native chart part: a `c:chartSpace` with its own embedded workbook.
+       *
+       * Separate from `images` because a chart is not a picture with extra data —
+       * it is its own part, its own relationship and its own workbook, and a
+       * backend either writes all three or writes none. docx.js has no chart
+       * primitive at all, which is what turns a `chart` component sent to that
+       * backend into a named capability error rather than a document missing a
+       * figure.
+       */
+      "charts",
       /** A table-of-contents field. */
       "toc",
       /** TOC entries baked in so an unrefreshed reader still shows them. */
@@ -3286,7 +3301,11 @@ var init_docxjs = __esm({
       // than a slice boundary: docx.js has no `wpg:wgp`. Leaving it out is what
       // turns a native `visual` sent to this backend into a named capability
       // error instead of a document with the graphic missing.
-      "drawing-groups"
+      "drawing-groups",
+      // `charts` is the second real backend gap: docx.js has no chart primitive at
+      // all, so a `chart` component sent here becomes a named capability error
+      // rather than a document missing a figure.
+      "charts"
     ]);
     DOCXJS_CAPABILITIES = new Set(
       [...ALL_DOCX_FEATURES].filter((feature) => !NOT_YET_EMITTED.has(feature))
@@ -3294,11 +3313,105 @@ var init_docxjs = __esm({
   }
 });
 
+// src/utils/chartWorkbook.ts
+import AdmZip3 from "adm-zip";
+import { chartWorkbookParts } from "@json-to-office/shared/rendering";
+import {
+  CHART_WORKBOOK_SHEET_NAME,
+  categoryReference,
+  columnLetter,
+  seriesNameReference,
+  seriesValueReference
+} from "@json-to-office/shared/rendering";
+function buildChartWorkbook(series) {
+  const zip = new AdmZip3();
+  for (const [name, content] of chartWorkbookParts(series)) {
+    zip.addFile(name, Buffer.from(content, "utf8"));
+  }
+  for (const entry of zip.getEntries()) {
+    entry.header.timeval = WORKBOOK_TIMESTAMP;
+  }
+  return new Uint8Array(zip.toBuffer());
+}
+var WORKBOOK_TIMESTAMP;
+var init_chartWorkbook = __esm({
+  "src/utils/chartWorkbook.ts"() {
+    "use strict";
+    init_packageDocument();
+    WORKBOOK_TIMESTAMP = toDosTime(DEFAULT_GENERATION_DATE);
+  }
+});
+
+// src/renderers/office-open/chartParts.ts
+import {
+  CHART_WORKBOOK_CONTENT_TYPE,
+  chartWorkbookRelsXml,
+  matchChartParts,
+  spliceChartXml
+} from "@json-to-office/shared/rendering";
+function spliceInput(chart) {
+  return {
+    chartType: chart.chartType,
+    series: chart.series,
+    colors: chart.colors,
+    ...chart.legendPosition ? { legendPosition: chart.legendPosition } : {},
+    ...chart.categoryAxisTitle ? { categoryAxis: { title: chart.categoryAxisTitle } } : {},
+    ...chart.valueAxisTitle ? { valueAxis: { title: chart.valueAxisTitle } } : {}
+  };
+}
+function declareWorkbookContentType(zip) {
+  const entry = zip.getEntry("[Content_Types].xml");
+  if (!entry) return;
+  const xml = entry.getData().toString("utf8");
+  if (xml.includes(`Extension="xlsx"`)) return;
+  zip.updateFile(
+    entry,
+    Buffer.from(
+      xml.replace(
+        '<Default Extension="xml"',
+        `<Default Extension="xlsx" ContentType="${CHART_WORKBOOK_CONTENT_TYPE}"/><Default Extension="xml"`
+      ),
+      "utf8"
+    )
+  );
+}
+function spliceChartParts(zip, charts) {
+  if (charts.length === 0) return;
+  const parts = zip.getEntries().map((entry) => entry.entryName).map((name) => name.match(/^word\/charts\/chart(\d+)\.xml$/)).filter((match) => match !== null).map(
+    (match) => [
+      Number(match[1]),
+      zip.getEntry(match[0]).getData().toString("utf8")
+    ]
+  );
+  for (const { ordinal, xml, chart } of matchChartParts(parts, charts)) {
+    const workbookName = `chart${ordinal}.xlsx`;
+    zip.updateFile(
+      zip.getEntry(`word/charts/chart${ordinal}.xml`),
+      Buffer.from(spliceChartXml(xml, spliceInput(chart)), "utf8")
+    );
+    zip.addFile(
+      `word/embeddings/${workbookName}`,
+      Buffer.from(buildChartWorkbook(chart.series))
+    );
+    zip.addFile(
+      `word/charts/_rels/chart${ordinal}.xml.rels`,
+      Buffer.from(chartWorkbookRelsXml(workbookName), "utf8")
+    );
+  }
+  declareWorkbookContentType(zip);
+}
+var init_chartParts = __esm({
+  "src/renderers/office-open/chartParts.ts"() {
+    "use strict";
+    init_chartWorkbook();
+  }
+});
+
 // src/renderers/office-open/emit.ts
 import { assertNever as assertNever2 } from "@json-to-office/shared/rendering";
 function emptyContext() {
   let next = 1;
-  return { pictures: /* @__PURE__ */ new Map(), nextDrawingId: () => next++ };
+  return { pictures: /* @__PURE__ */ new Map(), nextDrawingId: () => next++, charts: [] };
 }
 function simpleField(instruction, cachedText) {
   return {
@@ -3434,6 +3547,10 @@ function inlineChildren2(children, ctx = emptyContext()) {
       case "shape":
         out.push({ wpsShape: shapeOptions(child, ctx) });
         break;
+      case "chart":
+        ctx.charts?.push(child);
+        out.push({ chart: chartOptions(child, ctx) });
+        break;
       case "noteReference":
         out.push(
           child.noteKind === "endnote" ? { endnoteReference: child.id } : { footnoteReference: child.id }
@@ -3542,6 +3659,25 @@ function drawingGroupOptions(group, ctx) {
     ...group.floating ? { floating: floatingOptions2(group.floating) } : {}
   };
 }
+function chartOptions(chart, ctx) {
+  const id = ctx.nextDrawingId();
+  return {
+    type: chart.chartType,
+    categories: chart.series[0]?.labels ?? [],
+    series: chart.series.map((entry, index) => ({
+      name: entry.name ?? `Series ${index + 1}`,
+      values: entry.values
+    })),
+    ...chart.title && chart.showTitle !== false ? { title: chart.title } : {},
+    ...chart.showLegend !== void 0 ? { showLegend: chart.showLegend } : {},
+    transformation: { width: chart.widthEmu, height: chart.heightEmu },
+    altText: {
+      id: String(id),
+      ...chart.altText ? { description: chart.altText } : {}
+    },
+    ...chart.floating ? { floating: floatingOptions2(chart.floating) } : {}
+  };
+}
 function groupChild(child, ctx) {
   return child.kind === "shape" ? groupShape(child, ctx) : groupPicture(child, ctx);
 }
@@ -4114,6 +4250,7 @@ __export(office_open_exports, {
   buildDocumentOptions: () => buildDocumentOptions,
   createOfficeOpenDocxRenderer: () => createOfficeOpenDocxRenderer
 });
+import AdmZip4 from "adm-zip";
 async function createOfficeOpenDocxRenderer() {
   const backend = await import(
     /* @vite-ignore */
@@ -4129,13 +4266,19 @@ async function createOfficeOpenDocxRenderer() {
     format: "docx",
     capabilities: OFFICE_OPEN_CAPABILITIES,
     async render(ir, options) {
-      const document = await buildDocumentOptions(ir);
+      const charts = [];
+      const document = await buildDocumentOptions(ir, charts);
       const bytes = await backend.generateDocument(document, {
         type: "uint8array"
       });
-      const raw = Buffer.from(
+      let raw = Buffer.from(
         bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes)
       );
+      if (charts.length > 0) {
+        const zip = new AdmZip4(raw);
+        spliceChartParts(zip, charts);
+        raw = zip.toBuffer();
+      }
       if (options?.deterministic === false) return new Uint8Array(raw);
       return new Uint8Array(
         canonicalizeDocxBuffer(
@@ -4149,11 +4292,12 @@ async function createOfficeOpenDocxRenderer() {
     }
   };
 }
-async function buildDocumentOptions(ir) {
+async function buildDocumentOptions(ir, charts = []) {
   let nextDrawingId = 1;
   const ctx = {
     pictures: await prepareImages2(ir),
-    nextDrawingId: () => nextDrawingId++
+    nextDrawingId: () => nextDrawingId++,
+    charts
   };
   return {
     styles: emitStyles2(ir.styles),
@@ -4428,6 +4572,7 @@ var init_office_open = __esm({
   "src/renderers/office-open/index.ts"() {
     "use strict";
     init_features();
+    init_chartParts();
     init_imageUtils();
     init_packageDocument();
     init_emit2();
@@ -5358,7 +5503,10 @@ init_colorUtils();
 import {
   FeatureRequirementCollector
 } from "@json-to-office/shared/rendering";
-import { synthesizeFamilyName } from "@json-to-office/shared";
+import {
+  synthesizeFamilyName,
+  DEFAULT_CHART_THEME_COLORS as DEFAULT_CHART_THEME_COLORS2
+} from "@json-to-office/shared";
 import {
   isNativeVisualProps as isNativeVisualProps4
 } from "@json-to-office/shared-docx";
@@ -8164,6 +8312,8 @@ function compileComponent(component, scope) {
       return compileImage2(component, scope);
     case "visual":
       return compileVisual(component, scope);
+    case "chart":
+      return compileChart(component, scope);
     case "table":
       return compileTable(component, scope);
     default:
@@ -9554,6 +9704,111 @@ function compileImage2(component, scope) {
   if (caption) blocks.push(caption);
   return blocks;
 }
+var DEFAULT_CHART_HEIGHT_INCHES = 3;
+function compileChart(component, scope) {
+  const { ctx, path: path4 } = scope;
+  const props = component.props ?? {};
+  if (props.type === "bubble") {
+    throw new Error(
+      `Chart at ${path4} is a bubble chart, which no docx renderer draws; use the pptx \`chart\` component on the pptxgenjs renderer for one.`
+    );
+  }
+  const rawSeries = Array.isArray(props.data) ? props.data : [];
+  if (rawSeries.length === 0) {
+    throw new Error(`Chart at ${path4} has no data series.`);
+  }
+  const series = rawSeries.map((entry, index) => {
+    const raw = entry ?? {};
+    const label = typeof raw.name === "string" ? raw.name : `series ${index}`;
+    const labels = raw.labels;
+    const values = raw.values;
+    if (!Array.isArray(labels) || !Array.isArray(values)) {
+      throw new Error(
+        `Chart series "${label}" at ${path4} needs both "labels" and "values"; every series carries its own, not just the first.`
+      );
+    }
+    if (labels.length !== values.length) {
+      throw new Error(
+        `Chart series "${label}" at ${path4} has ${labels.length} labels and ${values.length} values; they must be the same length.`
+      );
+    }
+    return {
+      ...typeof raw.name === "string" ? { name: raw.name } : {},
+      labels: labels.map((value) => String(value)),
+      values: values.map((value) => Number(value))
+    };
+  });
+  const categories = series[0].labels;
+  for (const [index, entry] of series.entries()) {
+    if (index === 0) continue;
+    if (entry.labels.length !== categories.length || entry.labels.some((label, i) => label !== categories[i])) {
+      throw new Error(
+        `Chart series "${entry.name ?? `series ${index}`}" at ${path4} has different labels from the first series. A chart has one category axis, so every series must name the same categories in the same order.`
+      );
+    }
+  }
+  const colors = Array.isArray(props.chartColors) ? props.chartColors.map(
+    (color) => resolveColor(String(color), ctx.theme)
+  ) : DEFAULT_CHART_THEME_COLORS2.map((token) => {
+    const value = ctx.theme?.colors?.[token];
+    if (typeof value !== "string" || value.length === 0) return void 0;
+    try {
+      return resolveColor(token, ctx.theme);
+    } catch {
+      return void 0;
+    }
+  }).filter((color) => color !== void 0);
+  const page = getPageSetup(ctx.theme);
+  const contentWidthInches = (page.size.width - page.margin.left - page.margin.right) / 1440;
+  const widthInches = typeof props.width === "number" ? props.width : contentWidthInches;
+  const heightInches = typeof props.height === "number" ? props.height : DEFAULT_CHART_HEIGHT_INCHES;
+  const chart = {
+    kind: "chart",
+    chartType: props.type,
+    series,
+    colors,
+    widthEmu: inchesToEmu(widthInches),
+    heightEmu: inchesToEmu(heightInches),
+    ...typeof props.title === "string" ? { title: props.title } : {},
+    ...props.showTitle !== void 0 ? { showTitle: props.showTitle } : {},
+    ...props.showLegend !== void 0 ? { showLegend: props.showLegend } : {},
+    ...props.legendPos ? { legendPosition: props.legendPos } : {},
+    ...typeof props.catAxisTitle === "string" ? { categoryAxisTitle: props.catAxisTitle } : {},
+    ...typeof props.valAxisTitle === "string" ? { valueAxisTitle: props.valAxisTitle } : {},
+    ...typeof props.alt === "string" && props.alt ? { altText: props.alt } : {},
+    ...props.floating ? { floating: compileFloating(props.floating, ctx, path4) } : {}
+  };
+  ctx.features.require("charts", path4);
+  if (props.floating) ctx.features.require("floating-images", path4);
+  const spacing = {};
+  if (props.spacing?.before !== void 0) {
+    spacing.beforeTwips = pointsToTwips2(props.spacing.before);
+  }
+  if (props.spacing?.after !== void 0) {
+    spacing.afterTwips = pointsToTwips2(props.spacing.after);
+  }
+  const blocks = [
+    {
+      kind: "paragraph",
+      id: scope.id,
+      path: path4,
+      children: [chart],
+      formatting: {
+        // An anchored chart moves with its anchor, so aligning the paragraph
+        // would move the anchor rather than the chart — the same reasoning as
+        // a floating image.
+        ...props.floating ? {} : { alignment: compileAlignment(props.alignment) ?? "center" },
+        ...Object.keys(spacing).length > 0 ? { spacing } : {},
+        ...props.keepNext !== void 0 ? { keepNext: props.keepNext } : {},
+        ...props.keepLines !== void 0 ? { keepLines: props.keepLines } : {}
+      }
+    }
+  ];
+  const caption = captionBlock(props.caption, scope, "chart");
+  if (caption === void 0) return [];
+  if (caption) blocks.push(caption);
+  return blocks;
+}
 function captionBlock(value, scope, componentName) {
   if (!value) return null;
   const { ctx, path: path4 } = scope;