@openpresentation/opf-render 0.13.1 → 0.15.0

package/dist/chart-options.js

@@ -3,17 +3,16 @@
 // Core owns the normalisation and the per-type support table (`resolveChartOptions`); this module owns the drawing.
 // A chart that carries none of the three fields resolves to `active: false` and never reaches any code here, so
 // its SVG is exactly what it was before.
-import * as core from "@openpresentation/opf/composition";
+import { chartLabelText, formatChartLabelNumber, formatChartLabelPercent, formatDataNumber, resolveChartOptions, textColorForFill } from "@openpresentation/opf/composition";
 
 const INACTIVE = Object.freeze({ active: false, axisTitles: {}, diagnostics: [] });
 
 /**
- * The resolved options of a chart. An older core without `resolveChartOptions` ignores the fields, like any other
- * field it does not know. `spec` is the catalog spec this module's charts.js resolved (`kind`, `grouping`).
+ * The resolved options of a chart. `spec` is the catalog spec this module's charts.js resolved (`kind`, `grouping`).
  */
 export function resolveOptions(chart, spec) {
-  if (typeof core.resolveChartOptions !== "function" || !chart || typeof chart !== "object") return INACTIVE;
-  return core.resolveChartOptions(chart, { kind: spec.kind, stacked: spec.grouping === "stacked" || spec.grouping === "percentStacked" });
+  if (!chart || typeof chart !== "object") return INACTIVE;
+  return resolveChartOptions(chart, { kind: spec.kind, stacked: spec.grouping === "stacked" || spec.grouping === "percentStacked" });
 }
 
 export function reportOptionDiagnostics(c, resolved) {
@@ -22,9 +21,13 @@ export function reportOptionDiagnostics(c, resolved) {
   }
 }
 
-/** Which edge carries which axis title: the category axis of a bar or funnel chart is vertical (left). */
-function titleSides(spec) {
+/**
+ * Which edge carries which axis title: the category axis of a bar or funnel chart is vertical (left). A combo chart titles its
+ * secondary value axis at the right, next to that axis; right to left, its two value axes trade sides (FA-15).
+ */
+function titleSides(spec, rtl = false) {
   const verticalCategory = (spec.kind === "bar" && spec.dir === "bar") || spec.kind === "funnel";
+  if (spec.kind === "combo") return rtl ? { category: "bottom", value: "right", secondary: "left" } : { category: "bottom", value: "left", secondary: "right" };
   return verticalCategory ? { category: "left", value: "bottom" } : { category: "bottom", value: "left" };
 }
 
@@ -33,12 +36,13 @@ function titleSides(spec) {
  * The renderers lay the plot out inside `c.box`, so they need no knowledge of the bands.
  */
 export function reserveAxisTitles(c, spec, titles) {
-  const sides = titleSides(spec);
-  const bands = { left: 0, bottom: 0 };
+  const sides = titleSides(spec, spec.kind === "combo" && c.bound.geometry?.direction === "rtl");
+  const bands = { left: 0, bottom: 0, right: 0 };
   c.axisTitleBands = [];
-  for (const axis of ["category", "value"]) {
+  for (const axis of ["category", "value", "secondary"]) {
     const text = titles[axis];
-    if (!text) continue;
+    // A secondary title is drawn only when the combo chart has a secondary axis (core reports the title it drops).
+    if (!text || !sides[axis] || (axis === "secondary" && !c.combo?.some((entry) => entry.axis === "secondary"))) continue;
     const side = sides[axis];
     bands[side] = c.lineHeight;
     c.axisTitleBands.push({ axis, side, text });
@@ -46,7 +50,7 @@ export function reserveAxisTitles(c, spec, titles) {
   if (!c.axisTitleBands.length) return;
   const outer = c.box;
   c.axisTitleOuter = outer;
-  c.box = { x: outer.x + bands.left, y: outer.y, width: Math.max(1, outer.width - bands.left), height: Math.max(1, outer.height - bands.bottom) };
+  c.box = { x: outer.x + bands.left, y: outer.y, width: Math.max(1, outer.width - bands.left - bands.right), height: Math.max(1, outer.height - bands.bottom) };
 }
 
 /**
@@ -65,8 +69,10 @@ export function drawAxisTitles(c) {
       c.text(text, rect, path, "center");
     } else {
       const span = plot ? { y: plot.y, height: plot.height } : { y: inner.y, height: inner.height };
-      // The rotated text box is laid out horizontally, `length` wide and one line tall, then turned about its centre.
-      const length = Math.max(1, span.height), centreX = outer.x + c.lineHeight / 2, centreY = span.y + span.height / 2;
+      // The rotated text box is laid out horizontally, `length` wide and one line tall, then turned about its centre. A right title
+      // (a combo chart's secondary axis) is rotated the same way, as PowerPoint draws every vertical axis title by default.
+      const length = Math.max(1, span.height), centreY = span.y + span.height / 2;
+      const centreX = side === "right" ? outer.x + outer.width - (c.axisTitleRightInset ?? 0) - c.lineHeight / 2 : outer.x + c.lineHeight / 2;
       const rect = { x: centreX - length / 2, y: centreY - c.lineHeight / 2, width: length, height: c.lineHeight };
       const element = c.textElement(text, rect, path, "center");
       if (element) c.children.push(c.svg.tag("g", { transform: `rotate(-90 ${c.num(centreX)} ${c.num(centreY)})` }, element));
@@ -84,9 +90,9 @@ export function labelString(c, { category, value, share, format }) {
   const labels = c.dataLabels;
   const parts = {};
   if (category !== undefined && category !== null) parts.category = String(category);
-  if (typeof value === "number" && Number.isFinite(value)) parts.value = format !== undefined && typeof core.formatDataNumber === "function" ? core.formatDataNumber(value, format) : core.formatChartLabelNumber(value);
-  if (typeof share === "number" && Number.isFinite(share)) parts.percent = core.formatChartLabelPercent(share);
-  return core.chartLabelText(parts, labels.content, labels.separator);
+  if (typeof value === "number" && Number.isFinite(value)) parts.value = format !== undefined ? formatDataNumber(value, format) : formatChartLabelNumber(value);
+  if (typeof share === "number" && Number.isFinite(share)) parts.percent = formatChartLabelPercent(share);
+  return chartLabelText(parts, labels.content, labels.separator);
 }
 
 const labelSize = (c, text) => ({ width: c.width(text) + c.fontPx * 0.5, height: c.lineHeight });
@@ -99,7 +105,7 @@ function drawLabel(c, text, rect, path, fill) {
 
 /** The text colour for a label placed inside a mark of colour `fill`: the contrasting one; outside marks keep the chart text colour. */
 export function labelFill(c, position, fill) {
-  return INSIDE.has(position) && fill ? core.textColorForFill?.(fill, c.labelColor) ?? c.labelColor : c.labelColor;
+  return INSIDE.has(position) && fill ? textColorForFill(fill, c.labelColor) : c.labelColor;
 }
 
 /**
@@ -133,9 +139,8 @@ export function drawBarLabel(c, text, rect, direction, path, fill) {
   drawLabel(c, text, { x, y, width, height }, path, labelFill(c, position, fill));
 }
 
-/** A label beside a point mark (line and scatter): above, below, left, right or centred on it. */
-export function drawPointLabel(c, text, point, path) {
-  const position = c.dataLabels.position ?? "above";
+/** A label beside a point mark (line and scatter): above, below, left, right or centred on it. `position` overrides the chart's (a combo chart's line series). */
+export function drawPointLabel(c, text, point, path, position = c.dataLabels.position ?? "above") {
   const { width, height } = labelSize(c, text);
   const gap = 3 * c.pt + c.fontPx * 0.25;
   const [px, py] = point;