bank20baht-ui 0.12.2 → 0.12.3

package/dist/components/primitives/baht-line-chart.d.ts

@@ -26,9 +26,9 @@ export declare class BahtLineChart extends BahtChartBase {
     /** Accessible summary; falls back to a generated sentence. */
     label: string;
     /**
-     * Drawing width in SVG units. It follows the host up to `W`, so on a phone
-     * one unit is one CSS pixel and tick text keeps its real size instead of
-     * shrinking with a 640-wide drawing scaled into a 360px card.
+     * Drawing width in SVG units. It follows the host, so one unit is one CSS
+     * pixel and tick text keeps its real size: not shrunk on a phone, not blown
+     * up in a wide card (a capped drawing stretched to 1050px set 11px ticks at 18px).
      */
     private width;
     private resizeObserver;

package/dist/components/primitives/baht-line-chart.js

@@ -1,16 +1,16 @@
 import { html as _, nothing as y, svg as l } from "lit";
-import { property as x, state as H, customElement as N } from "lit/decorators.js";
+import { property as x, state as E, customElement as H } from "lit/decorators.js";
 import { hasDom as k, arr as L } from "../base.js";
-import { BahtChartBase as W, niceTicks as q, linearScale as O, chartColor as g, renderTableTwin as R } from "./charts.js";
-var U = Object.defineProperty, V = Object.getOwnPropertyDescriptor, c = (o, s, $, r) => {
-  for (var d = r > 1 ? void 0 : r ? V(s, $) : s, f = o.length - 1, b; f >= 0; f--)
+import { BahtChartBase as N, niceTicks as W, linearScale as O, chartColor as g, renderTableTwin as q } from "./charts.js";
+var R = Object.defineProperty, U = Object.getOwnPropertyDescriptor, c = (o, s, $, r) => {
+  for (var d = r > 1 ? void 0 : r ? U(s, $) : s, f = o.length - 1, b; f >= 0; f--)
     (b = o[f]) && (d = (r ? b(s, $, d) : b(d)) || d);
-  return r && d && U(s, $, d), d;
+  return r && d && R(s, $, d), d;
 };
-const T = 640, X = 280, A = 260, I = 56, a = { top: 14, right: 72, bottom: 30, left: 60 };
-let h = class extends W {
+const V = 640, X = 280, A = 260, I = 56, a = { top: 14, right: 72, bottom: 30, left: 60 };
+let h = class extends N {
   constructor() {
-    super(...arguments), this.series = [], this.categories = [], this.area = !1, this.markers = [], this.forecast = 0, this.baseline = null, this.labelValues = "ends", this.label = "", this.width = T, this.crosshairAt = null;
+    super(...arguments), this.series = [], this.categories = [], this.area = !1, this.markers = [], this.forecast = 0, this.baseline = null, this.labelValues = "ends", this.label = "", this.width = V, this.crosshairAt = null;
   }
   connectedCallback() {
     super.connectedCallback(), !(!k() || typeof ResizeObserver > "u") && (this.resizeObserver = new ResizeObserver(() => {
@@ -31,7 +31,7 @@ let h = class extends W {
     if (!k() || !this.isConnected) return;
     const o = this.clientWidth;
     if (o <= 0) return;
-    const s = Math.min(T, Math.max(X, Math.round(o)));
+    const s = Math.max(X, Math.round(o));
     s !== this.width && (this.width = s);
   }
   get plot() {
@@ -44,20 +44,20 @@ let h = class extends W {
     }), { series: s, categories: $ } = o;
     if (s.length === 0)
       return _`<div class=${this.rootClass("baht-line-chart")}>${this.renderEmpty()}</div>`;
-    const r = Math.max(...s.map((t) => t.values.length)), d = s.flatMap((t) => t.values).filter((t) => Number.isFinite(t)), f = Math.max(0, ...d, ...this.markers.map((t) => t.value)), b = q(f, 4), z = b[b.length - 1] ?? 1, { w: v, h: F } = this.plot, p = O([0, Math.max(1, r - 1)], [a.left, a.left + v]), i = O([0, z], [a.top + F, a.top]), M = Math.max(0, r - 1 - Math.max(0, this.forecast)), w = (t, e, n) => t.slice(e, n + 1).map((u, m) => `${m === 0 ? "M" : "L"}${p(e + m).toFixed(2)},${i(u).toFixed(2)}`).join(" "), P = s.map((t, e) => ({
+    const r = Math.max(...s.map((t) => t.values.length)), d = s.flatMap((t) => t.values).filter((t) => Number.isFinite(t)), f = Math.max(0, ...d, ...this.markers.map((t) => t.value)), b = W(f, 4), T = b[b.length - 1] ?? 1, { w: v, h: F } = this.plot, p = O([0, Math.max(1, r - 1)], [a.left, a.left + v]), i = O([0, T], [a.top + F, a.top]), M = Math.max(0, r - 1 - Math.max(0, this.forecast)), w = (t, e, n) => t.slice(e, n + 1).map((u, m) => `${m === 0 ? "M" : "L"}${p(e + m).toFixed(2)},${i(u).toFixed(2)}`).join(" "), P = s.map((t, e) => ({
       i: e,
       name: t.name,
       value: t.values[t.values.length - 1] ?? 0,
       yPos: i(t.values[t.values.length - 1] ?? 0),
       color: g(e, t.color)
-    })), C = [...P].sort((t, e) => t.yPos - e.yPos), B = C.some((t, e) => e > 0 && t.yPos - C[e - 1].yPos < 15), j = this.labelValues === "ends" && !B, D = Math.max(1, Math.ceil(r / Math.max(2, Math.min(8, Math.floor(v / I))))), E = this.label || `Line chart, ${s.length} series over ${r} points. ${s.map((t, e) => `${t.name}: ${this.fmt(P[e].value)} at the end`).join(". ")}`;
+    })), C = [...P].sort((t, e) => t.yPos - e.yPos), z = C.some((t, e) => e > 0 && t.yPos - C[e - 1].yPos < 15), B = this.labelValues === "ends" && !z, j = Math.max(1, Math.ceil(r / Math.max(2, Math.min(8, Math.floor(v / I))))), D = this.label || `Line chart, ${s.length} series over ${r} points. ${s.map((t, e) => `${t.name}: ${this.fmt(P[e].value)} at the end`).join(". ")}`;
     return _`<div class=${this.rootClass("baht-line-chart")}>
       <svg
         class="baht-chart-svg"
         viewBox="0 0 ${this.width} ${A}"
         preserveAspectRatio="xMidYMid meet"
         role="img"
-        aria-label=${E}
+        aria-label=${D}
       >
         ${b.map(
       (t) => l`
@@ -91,13 +91,13 @@ let h = class extends W {
               cy=${i(t.values[t.values.length - 1] ?? 0).toFixed(2)} r="4" fill=${n}/>`
       ), u;
     })}
-        ${j ? P.map(
+        ${B ? P.map(
       (t) => l`
                   <text class="baht-chart-end-label" x=${p(r - 1) + 10} y=${(t.yPos + 4).toFixed(2)}
                     text-anchor="start">${this.fmt(t.value)}</text>`
     ) : y}
         ${$.map(
-      (t, e) => e % D === 0 ? l`<text class="baht-chart-tick" x=${p(e).toFixed(2)} y=${A - 10} text-anchor="middle">${t}</text>` : y
+      (t, e) => e % j === 0 ? l`<text class="baht-chart-tick" x=${p(e).toFixed(2)} y=${A - 10} text-anchor="middle">${t}</text>` : y
     )}
         ${Array.from({ length: r }, (t, e) => {
       const n = v / Math.max(1, r - 1), u = `${$[e] ?? `Point ${e + 1}`}: ${s.map((m) => `${m.name} ${this.fmt(m.values[e] ?? 0)}`).join(", ")}`;
@@ -125,7 +125,7 @@ let h = class extends W {
       s.map((t, e) => ({ label: t.name, color: g(e, t.color) })),
       "line"
     )}
-      ${this.showTable ? R(
+      ${this.showTable ? q(
       this.label || "Line chart data",
       ["Point", ...s.map((t) => t.name)],
       Array.from({ length: r }, (t, e) => [
@@ -167,10 +167,10 @@ c([
   x()
 ], h.prototype, "label", 2);
 c([
-  H()
+  E()
 ], h.prototype, "width", 2);
 h = c([
-  N("baht-line-chart")
+  H("baht-line-chart")
 ], h);
 export {
   h as BahtLineChart

package/dist/css/components.css

@@ -29,6 +29,15 @@
 .baht-field--w-full {
   flex-basis: 100%;
 }
+/* Phone: a half- or quarter-width field is too narrow to read (a datepicker
+   cut "19:02" to "19:0"), so every field takes the whole row. */
+@media (max-width: 480px) {
+  .baht-field--w-1-4,
+  .baht-field--w-1-2,
+  .baht-field--w-3-4 {
+    flex-basis: 100%;
+  }
+}
 .baht-field--hidden {
   display: none;
 }

package/dist/custom-elements.json

@@ -10143,7 +10143,7 @@
               "name": "width",
               "privacy": "private",
               "default": "640",
-              "description": "Drawing width in SVG units. It follows the host up to `W`, so on a phone\none unit is one CSS pixel and tick text keeps its real size instead of\nshrinking with a 640-wide drawing scaled into a 360px card.",
+              "description": "Drawing width in SVG units. It follows the host, so one unit is one CSS\npixel and tick text keeps its real size: not shrunk on a phone, not blown\nup in a wide card (a capped drawing stretched to 1050px set 11px ticks at 18px).",
               "type": {
                 "text": "number"
               }

package/dist/tokens.css

@@ -463,6 +463,15 @@
 .baht-field--w-full {
   flex-basis: 100%;
 }
+/* Phone: a half- or quarter-width field is too narrow to read (a datepicker
+   cut "19:02" to "19:0"), so every field takes the whole row. */
+@media (max-width: 480px) {
+  .baht-field--w-1-4,
+  .baht-field--w-1-2,
+  .baht-field--w-3-4 {
+    flex-basis: 100%;
+  }
+}
 .baht-field--hidden {
   display: none;
 }

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "bank20baht-ui",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bank20baht-ui",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "type": "module",
   "description": "JSON-driven form + workflow engine. Send JSON in, get an interactive form out.",
   "license": "MIT",