@grafloria/element 0.4.14 → 0.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "type": "module",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",

package/src/lib/dashboard-kit/styles.js

@@ -344,6 +344,14 @@ const CSS = `
   flex: 0 0 auto; width: auto; height: 100%; max-height: 260px; max-width: 60%; aspect-ratio: 1 / 1;
 }
 
+/* READABILITY TIERS (widgets.ts chartTier): the text is always in the DOM;
+   what a short body cannot afford is hidden, not dropped. */
+.axdb-tier-1 .axdb-yt--q, .axdb-tier-1 .axdb-yl--q,
+.axdb-tier-2 .axdb-yt--q, .axdb-tier-2 .axdb-yl--q,
+.axdb-tier-2 .axdb-yt--h, .axdb-tier-2 .axdb-yl--h,
+.axdb-tier-2 .axdb-xt, .axdb-tier-2 .axdb-vt,
+.axdb-lg--off { display: none; }
+
 /* legend chips, shared by line and donut */
 .axdb-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; }
 .axdb-lg--col { flex-direction: column; flex-wrap: nowrap; gap: 6px; margin-top: 0; }

package/src/lib/dashboard-kit/widgets.d.ts

@@ -97,6 +97,21 @@ export declare const BUILT_IN_WIDGET_KINDS: readonly ["kpi", "line", "bar", "don
  * the classic 640×250 stands in, and the size watcher below repaints once the
  * real box exists.
  */
+/**
+ * READABILITY TIERS. A squeezed chart — a one-row line on a fit board, a
+ * 60-px row after a pull — piled its five y labels onto each other and, under
+ * 45 px, gave its whole body to the legend (kit lab L03/L05/L07, scenario
+ * s11/s23). The text set never changes with the box (the save/load gate's
+ * contract: a board reloaded at another size paints the same text), so the
+ * SVG carries a tier class and the stylesheet HIDES what does not fit:
+ * tier 1 drops the quarter ticks, tier 2 keeps only min and max, drops the x
+ * labels and the bar values; a legend on a body under 64 px is hidden and the
+ * chart takes the room. 0 = unmeasured (jsdom, a detached host): full tier.
+ */
+export declare function chartTier(bodyH: number, hasLegend: boolean): {
+    tier: 0 | 1 | 2;
+    legendShown: boolean;
+};
 export declare function chartBox(body: {
     clientWidth: number;
     clientHeight: number;

package/src/lib/dashboard-kit/widgets.js

@@ -101,6 +101,24 @@ const data = (widget) => { var _a; return ((_a = widget.data) !== null && _a !==
  * the classic 640×250 stands in, and the size watcher below repaints once the
  * real box exists.
  */
+/**
+ * READABILITY TIERS. A squeezed chart — a one-row line on a fit board, a
+ * 60-px row after a pull — piled its five y labels onto each other and, under
+ * 45 px, gave its whole body to the legend (kit lab L03/L05/L07, scenario
+ * s11/s23). The text set never changes with the box (the save/load gate's
+ * contract: a board reloaded at another size paints the same text), so the
+ * SVG carries a tier class and the stylesheet HIDES what does not fit:
+ * tier 1 drops the quarter ticks, tier 2 keeps only min and max, drops the x
+ * labels and the bar values; a legend on a body under 64 px is hidden and the
+ * chart takes the room. 0 = unmeasured (jsdom, a detached host): full tier.
+ */
+export function chartTier(bodyH, hasLegend) {
+    if (!bodyH)
+        return { tier: 0, legendShown: hasLegend };
+    const legendShown = hasLegend && bodyH >= 64;
+    const h = bodyH - (legendShown ? 26 : 0);
+    return { tier: h < 60 ? 2 : h < 120 ? 1 : 0, legendShown };
+}
 export function chartBox(body, legend = false) {
     const w = body.clientWidth || 0;
     const h = (body.clientHeight || 0) - (legend ? 26 : 0);
@@ -154,7 +172,7 @@ const srTable = (caption, columns, rows) => `<table class="axdb-sr"><caption>${e
     .join('')}</tr></thead><tbody>${rows
     .map((r) => `<tr>${r.map((v) => `<td>${esc(v)}</td>`).join('')}</tr>`)
     .join('')}</tbody></table>`;
-const legend = (items, column = false) => `<div class="axdb-lg${column ? ' axdb-lg--col' : ''}">` +
+const legend = (items, column = false, off = false) => `<div class="axdb-lg${column ? ' axdb-lg--col' : ''}${off ? ' axdb-lg--off' : ''}">` +
     items.map((i) => `<i><b style="background:${esc(i.color)}"></b>${esc(i.label)}</i>`).join('') +
     '</div>';
 // -- kpi ----------------------------------------------------------------------
@@ -218,10 +236,11 @@ function layoutLine(widget, body) {
     if (!series.length)
         return empty(body);
     const named = series.filter((s) => s.name);
-    if (named.length)
-        body.classList.add('axdb-has-lg');
-    const { W, H } = chartBox(body, named.length > 0);
-    const pad = { l: 34, r: 12, t: 12, b: 22 };
+    const { tier, legendShown } = chartTier(body.clientHeight || 0, named.length > 0);
+    body.classList.toggle('axdb-has-lg', legendShown);
+    const { W, H } = chartBox(body, legendShown);
+    // Tier 2 shows no x labels, so the band they lived in goes to the plot.
+    const pad = tier === 2 ? { l: 34, r: 12, t: 4, b: 6 } : { l: 34, r: 12, t: 12, b: 22 };
     const iw = W - pad.l - pad.r;
     const ih = H - pad.t - pad.b;
     const all = series.flatMap((s) => s.values);
@@ -233,9 +252,10 @@ function layoutLine(widget, body) {
     const grid = [0, 0.25, 0.5, 0.75, 1]
         .map((f) => {
         const y = pad.t + ih - f * ih;
-        return (`<line x1="${pad.l}" y1="${y.toFixed(1)}" x2="${W - pad.r}" y2="${y.toFixed(1)}" ` +
+        const cls = f === 0.5 ? ' axdb-yt--h' : f === 0.25 || f === 0.75 ? ' axdb-yt--q' : '';
+        return (`<line class="axdb-yl${cls.replace('yt', 'yl')}" x1="${pad.l}" y1="${y.toFixed(1)}" x2="${W - pad.r}" y2="${y.toFixed(1)}" ` +
             `stroke="var(--axdb-grid)" stroke-width="1"></line>` +
-            `<text x="${pad.l - 6}" y="${(y + 3).toFixed(1)}" text-anchor="end" font-size="9" ` +
+            `<text class="axdb-yt${cls}" x="${pad.l - 6}" y="${(y + 3).toFixed(1)}" text-anchor="end" font-size="9" ` +
             `fill="var(--axdb-muted)">${esc(compact(min + f * (max - min)))}</text>`);
     })
         .join('');
@@ -247,7 +267,7 @@ function layoutLine(widget, body) {
     const ticks = labels
         .slice(0, count)
         .map((l, i) => i % every === 0
-        ? `<text x="${xAt(i).toFixed(1)}" y="${H - 6}" text-anchor="middle" font-size="9" ` +
+        ? `<text class="axdb-xt" x="${xAt(i).toFixed(1)}" y="${H - 6}" text-anchor="middle" font-size="9" ` +
             `fill="var(--axdb-muted)">${esc(l)}</text>`
         : '')
         .join('');
@@ -276,9 +296,9 @@ function layoutLine(widget, body) {
     })
         .join('');
     body.innerHTML =
-        `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" ` +
+        `<svg class="axdb-tier-${tier}" viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" ` +
             `aria-label="${esc(titleOf(widget))}">${grid}${ticks}${marks}</svg>` +
-            (named.length ? legend(series.map((s, i) => { var _a; return ({ label: String((_a = s.name) !== null && _a !== void 0 ? _a : ''), color: colorAt(i) }); })) : '') +
+            (named.length ? legend(series.map((s, i) => { var _a; return ({ label: String((_a = s.name) !== null && _a !== void 0 ? _a : ''), color: colorAt(i) }); }), false, !legendShown) : '') +
             srTable(titleOf(widget), ['', ...series.map((s, i) => { var _a; return String((_a = s.name) !== null && _a !== void 0 ? _a : `Series ${i + 1}`); })], Array.from({ length: count }, (_, i) => { var _a; return [(_a = labels[i]) !== null && _a !== void 0 ? _a : String(i + 1), ...series.map((s) => { var _a; return (_a = s.values[i]) !== null && _a !== void 0 ? _a : ''; })]; }));
 }
 // -- bar ----------------------------------------------------------------------
@@ -294,8 +314,9 @@ function layoutBar(widget, body) {
     const bars = (Array.isArray(d.bars) ? d.bars : []).filter((b) => !!b);
     if (!bars.length)
         return empty(body);
+    const { tier } = chartTier(body.clientHeight || 0, false);
     const { W, H } = chartBox(body);
-    const pad = { l: 34, r: 12, t: 12, b: 26 };
+    const pad = tier === 2 ? { l: 34, r: 12, t: 4, b: 6 } : { l: 34, r: 12, t: 12, b: 26 };
     const iw = W - pad.l - pad.r;
     const ih = H - pad.t - pad.b;
     const max = niceMax(Math.max(...bars.map((b) => num(b.value))));
@@ -304,9 +325,10 @@ function layoutBar(widget, body) {
     const grid = [0, 0.5, 1]
         .map((f) => {
         const y = pad.t + ih - f * ih;
-        return (`<line x1="${pad.l}" y1="${y.toFixed(1)}" x2="${W - pad.r}" y2="${y.toFixed(1)}" ` +
+        const cls = f === 0.5 ? ' axdb-yt--h' : '';
+        return (`<line class="axdb-yl${cls.replace('yt', 'yl')}" x1="${pad.l}" y1="${y.toFixed(1)}" x2="${W - pad.r}" y2="${y.toFixed(1)}" ` +
             `stroke="var(--axdb-grid)" stroke-width="1"></line>` +
-            `<text x="${pad.l - 6}" y="${(y + 3).toFixed(1)}" text-anchor="end" font-size="9" ` +
+            `<text class="axdb-yt${cls}" x="${pad.l - 6}" y="${(y + 3).toFixed(1)}" text-anchor="end" font-size="9" ` +
             `fill="var(--axdb-muted)">${esc(compact(f * max))}</text>`);
     })
         .join('');
@@ -319,14 +341,14 @@ function layoutBar(widget, body) {
         const y = pad.t + ih - h;
         return (`<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${bw.toFixed(1)}" height="${h.toFixed(1)}" ` +
             `rx="4" fill="${colorAt(i)}"></rect>` +
-            `<text x="${(x + bw / 2).toFixed(1)}" y="${(y - 4).toFixed(1)}" text-anchor="middle" font-size="9.5" ` +
+            `<text class="axdb-vt" x="${(x + bw / 2).toFixed(1)}" y="${(y - 4).toFixed(1)}" text-anchor="middle" font-size="9.5" ` +
             `font-weight="600" fill="var(--axdb-ink)">${esc(compact(num(b.value)))}</text>` +
-            `<text x="${(x + bw / 2).toFixed(1)}" y="${H - 8}" text-anchor="middle" font-size="9" ` +
+            `<text class="axdb-xt" x="${(x + bw / 2).toFixed(1)}" y="${H - 8}" text-anchor="middle" font-size="9" ` +
             `fill="var(--axdb-muted)">${esc((_a = b.label) !== null && _a !== void 0 ? _a : '')}</text>`);
     })
         .join('');
     body.innerHTML =
-        `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" ` +
+        `<svg class="axdb-tier-${tier}" viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" ` +
             `aria-label="${esc(titleOf(widget))}">${grid}${marks}</svg>` +
             srTable(titleOf(widget), ['Category', 'Value'], bars.map((b) => { var _a; return [(_a = b.label) !== null && _a !== void 0 ? _a : '', num(b.value)]; }));
 }