plotto 0.4.0 → 0.4.1

package/README.md

@@ -197,7 +197,8 @@ One-time setup:
 Each release (`main` takes changes only through a reviewed pull request):
 
 ```bash
-# 1. Merge your changes into main through a pull request
+# 1. Merge your changes into main through a pull request,
+#    with a line for each change under "## Unreleased" in CHANGELOG.md
 
 # 2. Prepare the release
 git switch main && git pull && source .venv/bin/activate
@@ -211,7 +212,7 @@ scripts/release.sh tag    # answer y
 npm view plotto version && pip index versions python-plotto
 ```
 
-- `scripts/release.sh X.Y.Z` checks that `main` is current and the version is new. It runs every test and lint. Then, on the branch `release/vX.Y.Z`, it sets the version in `package.json`, `package-lock.json` and `python/plotto/__init__.py`, builds `docs/`, commits and pushes.
+- `scripts/release.sh X.Y.Z` checks that `main` is current, that the version is new and that `CHANGELOG.md` has changes under "Unreleased". It runs every test and lint. Then, on the branch `release/vX.Y.Z`, it sets the version in `package.json`, `package-lock.json` and `python/plotto/__init__.py`, moves the "Unreleased" changes to a dated `X.Y.Z` section, builds `docs/`, commits and pushes.
 - `scripts/release.sh tag` tags the merged `main` as `vX.Y.Z`, asks before it pushes the tag, and deletes the release branch.
 - The pushed tag runs `.github/workflows/release.yml`, which publishes to PyPI and npm. Follow it in the Actions tab.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plotto",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Grammar-of-graphics plots for notebooks, web pages and slides with one renderer.",
   "license": "MIT",
   "homepage": "https://theoradusz.github.io/plotto/",

package/src/figure.js

@@ -16,6 +16,8 @@ import { layerEdges, makeView } from "./views.js";
 const NARROW = 560; // px: below this width, a right legend moves to the bottom
 const MIN_HEIGHT = 240; // px: the smallest height of a reflowed figure
 const ASPECT_GROWTH = 1.2; // a theme aspect makes a reflowed figure at most this much taller
+const RIGHT_SHARE = 0.25; // a format with "shrink" keeps the right column (legend, info card) to this share of the width
+const SHRINK_STEP = 0.05; // and makes their text smaller by this share of its size at each step
 
 // options: document (the browser or jsdom), width (lay out at this width), domains and hidden (keep a view after a resize).
 export function figure(spec, { document: doc = globalThis.document, width, domains, hidden = new Set() } = {}) {
@@ -25,7 +27,6 @@ export function figure(spec, { document: doc = globalThis.document, width, domai
   const reflowed = width && theme.reflow && !theme.fixedHeight;
   let H = reflowed ? Math.max(MIN_HEIGHT, Math.round((W * theme.height) / theme.width)) : theme.height;
   if (theme.legend === "right" && W < NARROW) theme.legend = "bottom";
-  const fonts = fontSizes(theme);
   const grid = facetPanels(ns);
   const kind = { x: axisKind(ns, "x"), y: axisKind(ns, "y") };
   const color = colorScale(ns);
@@ -33,19 +34,32 @@ export function figure(spec, { document: doc = globalThis.document, width, domai
   for (const p of grid.panels) p.views = ns.layers.map((layer, li) => makeView(ctx, layer, p.rows[li], new Set()));
   const home = homeDomains(ns, grid, kind);
   const horizontal = theme.legend === "bottom";
+  // The legend and the info card fit: a right column of at most RIGHT_SHARE of the width, one legend column,
+  // no cut legend label, no cut info key and no "+N more" row. A format with "shrink" (slide) makes their text smaller until they
+  // fit, down to that share of the size; the other formats keep the size.
+  const fits = (info, legend) => {
+    const right = Math.max(legend && !legend.horizontal ? legend.width : 0, info?.position === "right" ? info.width : 0);
+    const cut = legend?.items?.some((it) => it.lines.at(-1).endsWith("…") || (!legend.horizontal && it.x > 0));
+    return right <= W * RIGHT_SHARE && !cut && !info?.cut;
+  };
   const arrange = (H) => {
-    const info = infoModel(ns, fonts, { W, H, narrow: W < NARROW });
-    const above = info?.position === "right" ? info.height + fonts.base : 0; // the info card sits above a right legend
-    const legend = legendModel(ns, color, fonts, { horizontal, maxWidth: W * 0.9, maxHeight: H * 0.8 - above });
-    return { info, legend, layout: place({ ns, grid, kind, home, legend, info, fonts, W, H }) };
+    const base = fontSizes(theme);
+    for (let k = 1; ; k -= SHRINK_STEP) {
+      const f = { ...base, legend: Math.round(base.legend * k * 10) / 10 };
+      const info = infoModel(ns, f, { W, H, narrow: W < NARROW });
+      const above = info?.position === "right" ? info.height + f.base : 0; // the info card sits above a right legend
+      const legend = legendModel(ns, color, f, { horizontal, maxWidth: W * 0.9, maxHeight: H * 0.8 - above });
+      if (fits(info, legend) || k - SHRINK_STEP < (theme.shrink ?? 1) - 1e-9) return { fonts: f, info, legend, layout: place({ ns, grid, kind, home, legend, info, fonts: f, W, H }) };
+    }
   };
-  let { info, legend, layout } = arrange(H);
+  let fonts, info, legend, layout;
+  ({ fonts, info, legend, layout } = arrange(H));
   // aspect: when the height follows the width, it changes so that the panels get their shape, up to 1.2 times the
   // usual height; beyond that, the panels get narrower.
   if (theme.aspect && theme.fitHeight) {
     const fit = H + grid.nrow * (layout.room.w * theme.aspect - layout.room.h);
     H = Math.round(Math.min(H * ASPECT_GROWTH, Math.max(MIN_HEIGHT, fit)));
-    ({ info, legend, layout } = arrange(H));
+    ({ fonts, info, legend, layout } = arrange(H));
   }
 
   const svg = svgElement(doc, "svg", {

package/src/info.js

@@ -62,7 +62,9 @@ function model(ns, fonts, entries, position, W, maxHeight) {
     kept--;
     t = table([...all.slice(0, kept), { key: `+${all.length - kept} more`, value: "" }]);
   }
-  return { position, size, pad, lineH, keyGap, ...t };
+  // cut: the entries that do not show, plus the keys that end with an ellipsis.
+  const keys = t.columns.flatMap((c) => c.rows).filter((r) => r.key !== r.full).length;
+  return { position, size, pad, lineH, keyGap, cut: all.length - kept + keys, ...t };
 }
 
 // The table as an SVG group at (x, y): keys in the muted color, values in the ink color, on a strip-colored card.

package/theme.json

@@ -142,6 +142,7 @@
       "width": 960,
       "height": 600,
       "size": 22,
+      "shrink": 0.7,
       "line": 2.5,
       "point": 4,
       "reflow": false