@iyulab/u-widgets 0.7.1 → 0.8.0

package/dist/u-widgets-tools.js

@@ -15,7 +15,7 @@ const v = {
   avatar: "Avatar image URL field (list)",
   trailing: "Trailing value field (list)",
   badge: "Badge/tag field (list)"
-}, k = {
+}, S = {
   field: "Key name in submitted data",
   label: "Display label",
   type: "Input type",
@@ -87,8 +87,11 @@ const v = {
   colors: "Custom color palette",
   colorRange: "Heatmap color gradient",
   histogram: "Histogram mode (bar)",
+  bins: "Number of histogram bins (auto: Sturges rule)",
   referenceLines: "Reference/threshold lines",
   series: "Per-series overrides [{color?, lineStyle?, symbol?, label?}]",
+  conditionalStyles: "Per-point conditional styling rules [{field, above?, below?, color, symbol?, symbolSize?}]",
+  subtitle: "Static subtitle text (gauge)",
   step: "Step interpolation (line)",
   legend: "Show/hide legend",
   grid: "Show/hide grid lines",
@@ -129,20 +132,21 @@ const v = {
   disabled: "Whether disabled",
   url: "URL for navigate action"
 }, N = {
-  "chart.bar": ["stack", "horizontal", "histogram", "colors", "series", "referenceLines", "legend", "grid", "animate", "showLabel"],
-  "chart.line": ["smooth", "stack", "step", "colors", "series", "referenceLines", "legend", "grid", "animate", "showLabel"],
-  "chart.area": ["smooth", "stack", "colors", "series", "legend", "grid", "animate", "showLabel"],
+  "chart.bar": ["stack", "horizontal", "histogram", "colors", "series", "referenceLines", "conditionalStyles", "legend", "grid", "animate", "showLabel"],
+  "chart.line": ["smooth", "stack", "step", "colors", "series", "referenceLines", "conditionalStyles", "legend", "grid", "animate", "showLabel"],
+  "chart.area": ["smooth", "stack", "colors", "series", "conditionalStyles", "legend", "grid", "animate", "showLabel"],
   "chart.pie": ["donut", "colors", "legend", "animate", "showLabel"],
-  "chart.scatter": ["colors", "legend", "grid", "animate", "showLabel"],
+  "chart.scatter": ["colors", "referenceLines", "conditionalStyles", "legend", "grid", "animate", "showLabel"],
   "chart.radar": ["colors", "legend", "animate", "showLabel"],
   "chart.heatmap": ["colorRange", "legend", "grid", "animate", "showLabel"],
   "chart.box": ["colors", "legend", "grid", "animate"],
   "chart.funnel": ["colors", "legend", "animate", "showLabel"],
   "chart.waterfall": ["colors", "legend", "grid", "animate", "showLabel"],
   "chart.treemap": ["colors", "animate", "showLabel"],
+  "chart.histogram": ["bins", "colors", "referenceLines", "legend", "grid", "animate"],
   metric: [],
   "stat-group": [],
-  gauge: ["min", "max", "unit", "thresholds", "label"],
+  gauge: ["min", "max", "unit", "thresholds", "label", "subtitle"],
   progress: ["min", "max", "unit", "thresholds", "label"],
   table: ["pageSize", "compact", "searchable"],
   list: ["compact"],
@@ -163,7 +167,7 @@ const v = {
   actions: ["layout"],
   divider: [],
   header: []
-}, M = {
+}, P = {
   metric: [
     { key: "value", type: "number | string", desc: "Primary value", required: !0 },
     { key: "label", type: "string", desc: "Display label" },
@@ -247,7 +251,7 @@ const v = {
     { key: "value", type: "string", desc: "Status value", required: !0 },
     { key: "level", type: '"info" | "success" | "warning" | "error" | "neutral"', desc: "Severity level (default info)" }
   ]
-}, P = {
+}, M = {
   "chart.bar": "mapping omittable. First string → x, number fields → y.",
   "chart.line": "mapping omittable. First string → x, numbers → y. Date-like preferred for x.",
   "chart.area": "mapping omittable. Same as line — first string → x, numbers → y.",
@@ -259,6 +263,7 @@ const v = {
   "chart.funnel": "mapping omittable. First string → label, first number → value.",
   "chart.waterfall": "mapping omittable. First string → x, first number → y.",
   "chart.treemap": "No mapping. data is [{name, value, children?}].",
+  "chart.histogram": "Flat number[] or objects with single numeric field → frequency distribution",
   metric: "No mapping needed. data is {value, label?, unit?, change?, trend?}.",
   "stat-group": "No mapping needed. data is [{label, value, ...}]. Optional: icon (emoji), description (sub-label).",
   gauge: "No mapping needed. data is {value}. Set min/max/unit in options.",
@@ -292,7 +297,7 @@ const v = {
   rating: ["submit"],
   actions: ["action"]
 };
-function S(e) {
+function k(e) {
   return x[e] ?? x[e.split(".")[0]] ?? [];
 }
 const y = [
@@ -309,6 +314,7 @@ const y = [
   { widget: "chart.funnel", category: "chart", description: "Funnel chart for sequential stages", mappingKeys: ["label", "value"], dataShape: "array" },
   { widget: "chart.waterfall", category: "chart", description: "Waterfall chart for cumulative values", mappingKeys: ["x", "y"], dataShape: "array" },
   { widget: "chart.treemap", category: "chart", description: "Treemap for hierarchical data", mappingKeys: [], dataShape: "array" },
+  { widget: "chart.histogram", category: "chart", description: "Histogram for frequency distribution with auto-binning", mappingKeys: ["value"], dataShape: "array" },
   // Display
   { widget: "metric", category: "display", description: "Single KPI value with optional trend", mappingKeys: [], dataShape: "object" },
   { widget: "stat-group", category: "display", description: "Multiple KPI values in a row", mappingKeys: [], dataShape: "array" },
@@ -338,12 +344,12 @@ const y = [
   // Composition
   { widget: "compose", category: "composition", description: "Combine multiple widgets with layout hints", mappingKeys: [], dataShape: "none" }
 ];
-function O(e) {
+function E(e) {
   if (!e) return [...y];
   const i = y.find((o) => o.widget === e);
-  if (i) return T(i);
-  const p = y.filter((o) => o.category === e);
-  return p.length > 0 ? p : y.filter((o) => o.widget.startsWith(e));
+  if (i) return K(i);
+  const d = y.filter((o) => o.category === e);
+  return d.length > 0 ? d : y.filter((o) => o.widget.startsWith(e));
 }
 const A = {
   "chart.bar": {
@@ -405,6 +411,10 @@ const A = {
     widget: "chart.treemap",
     data: [{ name: "Group A", value: 100 }, { name: "Group B", value: 80 }]
   },
+  "chart.histogram": {
+    widget: "chart.histogram",
+    data: [12, 15, 22, 28, 35, 42, 48, 55, 62, 68, 72, 78]
+  },
   metric: {
     widget: "metric",
     data: { value: 1284, unit: "users", change: 12.5, trend: "up" }
@@ -542,7 +552,7 @@ console.log(x);`, language: "javascript" }
       { widget: "metric", data: { value: 95, unit: "%" } }
     ]
   }
-}, R = {
+}, q = {
   "chart.bar": [
     {
       label: "Stacked multi-series",
@@ -699,6 +709,21 @@ console.log(x);`, language: "javascript" }
       }
     }
   ],
+  "chart.histogram": [
+    {
+      label: "Custom bins + referenceLines",
+      spec: {
+        widget: "chart.histogram",
+        data: [10, 15, 20, 22, 25, 30, 35, 40, 42, 45, 50, 55, 60, 65, 70, 75],
+        options: {
+          bins: 5,
+          referenceLines: [
+            { axis: "y", value: 4, label: "Expected", color: "#6366f1", style: "dashed" }
+          ]
+        }
+      }
+    }
+  ],
   "chart.treemap": [
     {
       label: "Nested hierarchy",
@@ -1107,43 +1132,43 @@ LIMIT 10;`,
     }
   ]
 };
-function T(e) {
-  const i = e.widget, p = {};
+function K(e) {
+  const i = e.widget, d = {};
   for (const a of e.mappingKeys)
-    v[a] && (p[a] = v[a]);
-  const d = {};
+    v[a] && (d[a] = v[a]);
+  const p = {};
   for (const a of N[i] ?? [])
-    w[a] && (d[a] = w[a]);
-  const o = i === "form" || i === "confirm", s = [], n = A[i];
-  n && s.push({ label: "Minimal", spec: JSON.parse(JSON.stringify(n)) });
-  const r = R[i];
+    w[a] && (p[a] = w[a]);
+  const o = i === "form" || i === "confirm", l = [], n = A[i];
+  n && l.push({ label: "Minimal", spec: JSON.parse(JSON.stringify(n)) });
+  const r = q[i];
   if (r)
     for (const a of r)
-      s.push({ label: a.label, spec: JSON.parse(JSON.stringify(a.spec)) });
+      l.push({ label: a.label, spec: JSON.parse(JSON.stringify(a.spec)) });
   return {
     ...e,
-    autoInference: P[i] ?? "",
-    dataFields: [...M[i] ?? []],
-    mappingDocs: p,
-    optionDocs: d,
-    ...o ? { fieldDocs: { ...k } } : {},
+    autoInference: M[i] ?? "",
+    dataFields: [...P[i] ?? []],
+    mappingDocs: d,
+    optionDocs: p,
+    ...o ? { fieldDocs: { ...S } } : {},
     ...o ? { actionDocs: { ...L } } : {},
-    events: S(i),
-    examples: s
+    events: k(i),
+    examples: l
   };
 }
-function E(e) {
+function O(e) {
   const i = A[e];
   if (i)
     return JSON.parse(JSON.stringify(i));
 }
-function q(e, i) {
+function R(e, i) {
   if (e == null) return [];
-  const p = Array.isArray(e) ? e : [e];
-  if (p.length === 0) return [];
-  const d = p[0], o = Object.keys(d);
+  const d = Array.isArray(e) ? e : [e];
+  if (d.length === 0) return [];
+  const p = d[0], o = Object.keys(p);
   if (o.length === 0) return [];
-  const s = o.filter((t) => typeof d[t] == "string"), n = o.filter((t) => typeof d[t] == "number"), r = Array.isArray(e);
+  const l = o.filter((t) => typeof p[t] == "string"), n = o.filter((t) => typeof p[t] == "number"), r = Array.isArray(e);
   if (i) {
     const t = g(i, e);
     return t ? [{ widget: i, mapping: t, confidence: 0.8, reason: `Auto-inferred mapping for ${i}` }] : [{ widget: i, confidence: 0.3, reason: `No mapping could be inferred for ${i} from this data shape` }];
@@ -1154,7 +1179,7 @@ function q(e, i) {
     confidence: 0.95,
     reason: 'Object data with "value" key is ideal for a metric widget'
   }), !r && !n.includes("value") && o.length >= 2 && o.every((m) => {
-    const c = d[m];
+    const c = p[m];
     return typeof c == "string" || typeof c == "number" || typeof c == "boolean";
   }) && a.push({
     widget: "kv",
@@ -1164,7 +1189,7 @@ function q(e, i) {
     widget: "kv",
     confidence: 0.88,
     reason: 'Array with "key" and "value" fields matches key-value pair pattern'
-  }), r && s.length >= 1 && n.length >= 1) {
+  }), r && l.length >= 1 && n.length >= 1) {
     const t = g("chart.bar", e);
     a.push({
       widget: "chart.bar",
@@ -1173,7 +1198,7 @@ function q(e, i) {
       reason: "Category × value pattern detected"
     });
   }
-  if (r && s.length >= 1 && n.length >= 2) {
+  if (r && l.length >= 1 && n.length >= 2) {
     const t = g("chart.line", e);
     a.push({
       widget: "chart.line",
@@ -1182,7 +1207,7 @@ function q(e, i) {
       reason: "Category × multiple values pattern detected (multi-series)"
     });
   }
-  if (r && s.length >= 1 && n.length >= 1 && s.some((m) => D(String(p[0][m])))) {
+  if (r && l.length >= 1 && n.length >= 1 && l.some((m) => D(String(d[0][m])))) {
     const m = g("chart.area", e);
     a.push({
       widget: "chart.area",
@@ -1191,7 +1216,7 @@ function q(e, i) {
       reason: "Date-like category field detected — suitable for time-series area chart"
     });
   }
-  if (r && s.length >= 1 && n.length === 1) {
+  if (r && l.length >= 1 && n.length === 1) {
     const t = g("chart.pie", e);
     a.push({
       widget: "chart.pie",
@@ -1200,7 +1225,7 @@ function q(e, i) {
       reason: "Label + value pattern could work as proportions"
     });
   }
-  if (r && n.length >= 2 && s.length === 0) {
+  if (r && n.length >= 2 && l.length === 0) {
     const t = g("chart.scatter", e);
     a.push({
       widget: "chart.scatter",
@@ -1214,7 +1239,7 @@ function q(e, i) {
     mapping: g("table", e),
     confidence: 0.75,
     reason: "Multi-field array renders well as a table"
-  }), r && s.length >= 1) {
+  }), r && l.length >= 1) {
     const t = g("list", e);
     a.push({
       widget: "list",
@@ -1231,7 +1256,7 @@ function q(e, i) {
     widget: "gauge",
     confidence: 0.7,
     reason: 'Object with "value" can display as a gauge'
-  }), r && s.length >= 1 && n.length >= 2) {
+  }), r && l.length >= 1 && n.length >= 2) {
     const t = g("chart.radar", e);
     t && a.push({
       widget: "chart.radar",
@@ -1240,7 +1265,7 @@ function q(e, i) {
       reason: "Category × multiple values can display as a radar chart"
     });
   }
-  if (r && s.length >= 2 && n.length >= 1) {
+  if (r && l.length >= 2 && n.length >= 1) {
     const t = g("chart.heatmap", e);
     t && a.push({
       widget: "chart.heatmap",
@@ -1258,7 +1283,7 @@ function q(e, i) {
       reason: "Five or more numeric fields fit a box plot (min/q1/median/q3/max)"
     });
   }
-  if (r && s.length >= 1 && n.length === 1) {
+  if (r && l.length >= 1 && n.length === 1) {
     const t = g("chart.funnel", e);
     t && a.push({
       widget: "chart.funnel",
@@ -1267,7 +1292,7 @@ function q(e, i) {
       reason: "Label + value pattern can display as a funnel"
     });
   }
-  if (r && s.length >= 1 && n.length >= 1) {
+  if (r && l.length >= 1 && n.length >= 1) {
     const t = g("chart.waterfall", e);
     t && a.push({
       widget: "chart.waterfall",
@@ -1276,7 +1301,7 @@ function q(e, i) {
       reason: "Category × value pattern can display as a waterfall chart"
     });
   }
-  if (r && s.length >= 1 && n.length >= 1) {
+  if (r && l.length >= 1 && n.length >= 1) {
     const t = g("chart.treemap", e);
     t && a.push({
       widget: "chart.treemap",
@@ -1292,12 +1317,12 @@ function q(e, i) {
   }), a.sort((t, m) => m.confidence - t.confidence), a;
 }
 function j(e) {
-  const i = q(e);
+  const i = R(e);
   if (i.length === 0) return;
-  const p = i[0];
-  if (p.confidence < 0.7) return;
-  const d = { widget: p.widget, data: e };
-  return p.mapping && (d.mapping = p.mapping), d;
+  const d = i[0];
+  if (d.confidence < 0.7) return;
+  const p = { widget: d.widget, data: e };
+  return d.mapping && (p.mapping = d.mapping), p;
 }
 function b(e) {
   if (e == null) return "null";
@@ -1309,66 +1334,66 @@ function b(e) {
   return typeof e;
 }
 function I(e, i) {
-  const p = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set();
+  const d = /* @__PURE__ */ new Set(), p = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set();
   for (const m of e) {
     const c = m;
-    for (const l of Object.keys(c))
-      l !== "widget" && p.add(l);
+    for (const s of Object.keys(c))
+      s !== "widget" && d.add(s);
     const h = c.data;
     if (Array.isArray(h)) {
-      for (const l of h)
-        if (l && typeof l == "object")
-          for (const [u, f] of Object.entries(l))
-            d.set(u, b(f));
+      for (const s of h)
+        if (s && typeof s == "object")
+          for (const [u, f] of Object.entries(s))
+            p.set(u, b(f));
     } else if (h && typeof h == "object")
-      for (const [l, u] of Object.entries(h))
-        d.set(l, b(u));
+      for (const [s, u] of Object.entries(h))
+        p.set(s, b(u));
     if (c.mapping && typeof c.mapping == "object")
-      for (const [l, u] of Object.entries(c.mapping))
-        o.set(l, Array.isArray(u) ? "string[]" : typeof u);
+      for (const [s, u] of Object.entries(c.mapping))
+        o.set(s, Array.isArray(u) ? "string[]" : typeof u);
     if (c.options && typeof c.options == "object")
-      for (const [l, u] of Object.entries(c.options))
-        s.set(l, b(u));
+      for (const [s, u] of Object.entries(c.options))
+        l.set(s, b(u));
     if (Array.isArray(c.fields))
-      for (const l of c.fields) {
-        for (const [u, f] of Object.entries(l))
+      for (const s of c.fields) {
+        for (const [u, f] of Object.entries(s))
           n.set(u, u === "options" ? "string[]" : b(f));
-        typeof l.type == "string" && r.add(l.type);
+        typeof s.type == "string" && r.add(s.type);
       }
     if (Array.isArray(c.actions))
-      for (const l of c.actions)
-        typeof l.style == "string" && a.add(l.style);
+      for (const s of c.actions)
+        typeof s.style == "string" && a.add(s.style);
   }
-  const t = (m, c) => [...m.entries()].map(([h, l]) => {
+  const t = (m, c) => [...m.entries()].map(([h, s]) => {
     const u = c[h];
-    return u ? { key: h, type: l, desc: u } : { key: h, type: l };
+    return u ? { key: h, type: s, desc: u } : { key: h, type: s };
   });
   return {
-    specKeys: [...p],
-    dataFields: t(d, C),
+    specKeys: [...d],
+    dataFields: t(p, C),
     mappingKeys: t(o, v),
-    optionKeys: t(s, w),
-    fieldProps: t(n, k),
+    optionKeys: t(l, w),
+    fieldProps: t(n, S),
     fieldTypes: [...r],
     actionStyles: [...a],
-    events: i ? S(i) : []
+    events: i ? k(i) : []
   };
 }
 export {
   L as ACTION_PROP_DOCS,
   C as DATA_FIELD_DOCS,
-  k as FIELD_PROP_DOCS,
+  S as FIELD_PROP_DOCS,
   v as MAPPING_DOCS,
   w as OPTION_DOCS,
-  M as WIDGET_DATA_FIELDS,
+  P as WIDGET_DATA_FIELDS,
   x as WIDGET_EVENTS,
-  P as WIDGET_INFERENCE,
+  M as WIDGET_INFERENCE,
   N as WIDGET_OPTIONS,
   j as autoSpec,
-  S as getWidgetEvents,
-  O as help,
+  k as getWidgetEvents,
+  E as help,
   I as specSurface,
-  q as suggestMapping,
-  E as template
+  R as suggestMapping,
+  O as template
 };
 //# sourceMappingURL=u-widgets-tools.js.map