waffle-board 0.2.2 → 0.2.4

package/README.md

@@ -3,16 +3,16 @@
 A **JSON schema-based dashboard renderer** for React. Build complex, draggable grid layouts simply by defining a JSON configuration.
 
 [![NPM Version](https://img.shields.io/npm/v/waffle-board)](https://www.npmjs.com/package/waffle-board)
-[![Live Demo](https://img.shields.io/badge/demo-live-green)](https://mbuchthal.github.io/waffle-board/)
+[![Live Demo](https://img.shields.io/badge/demo-live-green)](https://surprisewaffles-io.github.io/waffle-board/)
 
-![Dashboard Preview](https://github.com/mbuchthal/waffle-board/raw/main/public/preview.png)
+![Dashboard Preview](https://github.com/surprisewaffles-io/waffle-board/raw/main/public/preview.png)
 
 ## Features
 
 - **JSON-Driven**: Define your entire dashboard layout and widget configuration in a simple JSON object.
 - **Drag & Drop**: Built-in support for resizing and rearranging widgets (powered by `react-grid-layout`).
 - **Theme System**: 4 distinct themes (Ocean, Forest, Sunset, Default) with dark mode support.
-- **Waffle Charts Integration**: Showcases the full power of the [Waffle Charts](https://github.com/mbuchthal/waffle-charts) library.
+- **Waffle Charts Integration**: Showcases the full power of the [Waffle Charts](https://github.com/surprisewaffles-io/waffle-charts) library.
 - **Modern UI**: Clean aesthetics using Tailwind CSS and Lucide icons.
 
 ## Tech Stack
@@ -20,7 +20,7 @@ A **JSON schema-based dashboard renderer** for React. Build complex, draggable g
 - **Framework**: [React](https://react.dev/) + [Vite](https://vitejs.dev/)
 - **Language**: TypeScript
 - **Styling**: Tailwind CSS
-- **Charts**: [Waffle Charts](https://github.com/mbuchthal/waffle-charts) (Visx-based)
+- **Charts**: [Waffle Charts](https://github.com/surprisewaffles-io/waffle-charts) (Visx-based)
 - **Grid**: `react-grid-layout`
 
 ## Installation (As a Library)
@@ -35,7 +35,8 @@ npm install waffle-board
 
 ```tsx
 import { Dashboard } from 'waffle-board';
-import { BarChart, LineChart } from 'waffle-charts'; // Your chart components
+import { BarChart } from '@waffle-charts/components/waffle/BarChart';
+import { LineChart } from '@waffle-charts/components/waffle/LineChart'; // Your chart components
 import 'waffle-board/dist-lib/style.css'; // Import styles
 
 const registry = {
@@ -54,7 +55,44 @@ function MyDashboard() {
 }
 ```
 
-## Running the Project
+> **Note**: The Vite config in this repo defines an alias `@waffle-charts` that points to the local source of the `waffle-charts` library. This lets you import chart components directly from their file paths.
+
+### Supported Charts
+Directly import these components from `@waffle-charts/components/waffle/`:
+
+- `BarChart` - Supports stacked and grouped variants
+- `LineChart` - Supports multi-series and legends
+- `AreaChart`
+- `PieChart`
+- `CandlestickChart` - Financial OHLC data
+- `ScatterChart`
+- `RadarChart`
+- `HeatmapChart`
+- `TreemapChart`
+- `SankeyChart`
+- `ChordChart`
+
+### Registry Explanation
+The `registry` object maps the string `type` found in your JSON configuration (e.g., `"type": "my-bar-chart"`) to the actual React component. This allows the JSON schema to remain serializable and agnostic of implementation details.
+
+### Data Integration (Dynamic Loading)
+Widgets can fetch their own data by defining a `dataSource` in the JSON config. You provide the `fetcher` implementation.
+
+```tsx
+<Dashboard
+  // ...
+  fetcher={async (dataSource) => {
+    // Implement your data fetching logic here
+    if (dataSource.type === 'api') {
+      const response = await fetch(dataSource.endpoint);
+      return response.json();
+    }
+    return null;
+  }}
+/>
+```
+
+### Running the Project
 
 ### Demo App
 To run the included demo application:
@@ -78,6 +116,15 @@ Themes are defined in `src/index.css` using CSS variables. To add a new theme:
 2. Define the color palette (background, foreground, primary, etc.).
 3. Add the theme to the `themes` array in `src/App.tsx`.
 
+## Troubleshooting
+
+- **Module not found**: Verify the `@waffle-charts` alias exists in `vite.config.ts`.
+- **TypeScript errors**: Run `npm run build:lib` to generate the compiled type definitions.
+
+## Contributing
+
+See [CONTRIBUTING.md](https://github.com/surprisewaffles-io/waffle-board/blob/main/CONTRIBUTING.md) for guidelines.
+
 ## License
 
 MIT

package/dist-lib/{AreaChart-BybfMJe7.js → AreaChart-FcTyoMIU.js}

@@ -1,38 +1,38 @@
 import { j as o, c as C } from "./utils-B4eT4KZs.js";
-import N, { useMemo as I } from "react";
-import { G, c as W, P as J } from "./ParentSize-DgScxYmK.js";
-import { c as Q } from "./time-BkG4aUoI.js";
-import { c as U, b as V } from "./linear-BMy3dF_L.js";
-import { u as Z, a as _, d as tt } from "./useTooltipInPortal-DOXS3zAG.js";
-import { G as et, A as at, a as rt } from "./GridRows-DGQ9ou3n.js";
-import { G as ot } from "./GridColumns-Bmuw2WtH.js";
-import { c as nt, b as st } from "./D3ShapeFactories-D3zwXaLE.js";
-import { l as lt } from "./localPoint-BIHUncaY.js";
-var it = ["className", "top", "left", "keys", "data", "curve", "defined", "x", "x0", "x1", "y0", "y1", "value", "order", "offset", "color", "children"];
-function R() {
-  return R = Object.assign ? Object.assign.bind() : function(t) {
+import N, { useMemo as G } from "react";
+import { G as R, c as W, P as Q } from "./ParentSize-DgScxYmK.js";
+import { c as U } from "./time-CYw7WqrE.js";
+import { c as V, b as Z } from "./linear-BdXdqDf3.js";
+import { u as _, a as tt, d as et } from "./useTooltipInPortal-DOXS3zAG.js";
+import { G as at, A as rt, a as ot } from "./GridRows-7-3enkd1.js";
+import { G as nt } from "./GridColumns-B3meoJgP.js";
+import { s as st, b as lt } from "./D3ShapeFactories-BW5r_o96.js";
+import { l as it } from "./localPoint-BIHUncaY.js";
+var ct = ["className", "top", "left", "keys", "data", "curve", "defined", "x", "x0", "x1", "y0", "y1", "value", "order", "offset", "color", "children"];
+function I() {
+  return I = Object.assign ? Object.assign.bind() : function(t) {
     for (var r = 1; r < arguments.length; r++) {
       var a = arguments[r];
       for (var n in a)
         Object.prototype.hasOwnProperty.call(a, n) && (t[n] = a[n]);
     }
     return t;
-  }, R.apply(this, arguments);
+  }, I.apply(this, arguments);
 }
-function ct(t, r) {
+function dt(t, r) {
   if (t == null) return {};
   var a = {}, n = Object.keys(t), s, l;
   for (l = 0; l < n.length; l++)
     s = n[l], !(r.indexOf(s) >= 0) && (a[s] = t[s]);
   return a;
 }
-function dt(t) {
-  var r = t.className, a = t.top, n = t.left, s = t.keys, l = t.data, S = t.curve, O = t.defined, P = t.x, b = t.x0, k = t.x1, T = t.y0, A = t.y1, M = t.value, w = t.order, c = t.offset, u = t.color, p = t.children, i = ct(t, it), h = nt({
+function ut(t) {
+  var r = t.className, a = t.top, n = t.left, s = t.keys, l = t.data, S = t.curve, O = t.defined, P = t.x, b = t.x0, k = t.x1, T = t.y0, A = t.y1, M = t.value, w = t.order, c = t.offset, u = t.color, p = t.children, i = dt(t, ct), y = st({
     keys: s,
     value: M,
     order: w,
     offset: c
-  }), j = st({
+  }), j = lt({
     x: P,
     x0: b,
     x1: k,
@@ -40,35 +40,35 @@ function dt(t) {
     y1: A,
     curve: S,
     defined: O
-  }), x = h(l);
+  }), x = y(l);
   return p ? /* @__PURE__ */ N.createElement(N.Fragment, null, p({
     stacks: x,
     path: j,
-    stack: h
-  })) : /* @__PURE__ */ N.createElement(G, {
+    stack: y
+  })) : /* @__PURE__ */ N.createElement(R, {
     top: a,
     left: n
-  }, x.map(function(d, v) {
-    return /* @__PURE__ */ N.createElement("path", R({
+  }, x.map(function(d, m) {
+    return /* @__PURE__ */ N.createElement("path", I({
       className: W("visx-stack", r),
-      key: "stack-" + v + "-" + (d.key || ""),
+      key: "stack-" + m + "-" + (d.key || ""),
       d: j(d) || "",
-      fill: u?.(d.key, v)
+      fill: u?.(d.key, m)
     }, i));
   }));
 }
-var ut = ["className", "top", "left", "keys", "data", "curve", "defined", "x", "x0", "x1", "y0", "y1", "value", "order", "offset", "color", "children"];
-function D() {
-  return D = Object.assign ? Object.assign.bind() : function(t) {
+var pt = ["className", "top", "left", "keys", "data", "curve", "defined", "x", "x0", "x1", "y0", "y1", "value", "order", "offset", "color", "children"];
+function z() {
+  return z = Object.assign ? Object.assign.bind() : function(t) {
     for (var r = 1; r < arguments.length; r++) {
       var a = arguments[r];
       for (var n in a)
         Object.prototype.hasOwnProperty.call(a, n) && (t[n] = a[n]);
     }
     return t;
-  }, D.apply(this, arguments);
+  }, z.apply(this, arguments);
 }
-function pt(t, r) {
+function mt(t, r) {
   if (t == null) return {};
   var a = {}, n = Object.keys(t), s, l;
   for (l = 0; l < n.length; l++)
@@ -76,8 +76,8 @@ function pt(t, r) {
   return a;
 }
 function xt(t) {
-  var r = t.className, a = t.top, n = t.left, s = t.keys, l = t.data, S = t.curve, O = t.defined, P = t.x, b = t.x0, k = t.x1, T = t.y0, A = t.y1, M = t.value, w = t.order, c = t.offset, u = t.color, p = t.children, i = pt(t, ut);
-  return /* @__PURE__ */ N.createElement(dt, D({
+  var r = t.className, a = t.top, n = t.left, s = t.keys, l = t.data, S = t.curve, O = t.defined, P = t.x, b = t.x0, k = t.x1, T = t.y0, A = t.y1, M = t.value, w = t.order, c = t.offset, u = t.color, p = t.children, i = mt(t, pt);
+  return /* @__PURE__ */ N.createElement(ut, z({
     className: r,
     top: a,
     left: n,
@@ -94,19 +94,19 @@ function xt(t) {
     order: w,
     offset: c,
     color: u
-  }, i), p || function(h) {
-    var j = h.stacks, x = h.path;
-    return j.map(function(d, v) {
-      return /* @__PURE__ */ N.createElement("path", D({
+  }, i), p || function(y) {
+    var j = y.stacks, x = y.path;
+    return j.map(function(d, m) {
+      return /* @__PURE__ */ N.createElement("path", z({
         className: W("visx-area-stack", r),
-        key: "area-stack-" + v + "-" + (d.key || ""),
+        key: "area-stack-" + m + "-" + (d.key || ""),
         d: x(d) || "",
-        fill: u?.(d.key, v)
+        fill: u?.(d.key, m)
       }, i));
     });
   });
 }
-function mt({
+function ft({
   data: t,
   width: r,
   height: a,
@@ -125,53 +125,56 @@ function mt({
   const c = { ...{ top: 40, right: 30, bottom: 50, left: 50 }, ...M }, u = r - c.left - c.right, p = a - c.top - c.bottom;
   if (!Array.isArray(t))
     return console.warn("AreaChart: data prop is not an array", t), null;
-  const i = (e) => new Date(e[n]), h = (e) => e[0], j = (e) => e[1], x = I(
-    () => Q({
+  const i = (e) => new Date(e[n]), y = (e) => e[0], j = (e) => e[1], x = G(() => t.filter((e) => {
+    const f = i(e);
+    return f instanceof Date && !isNaN(f.getTime());
+  }), [t, i]), d = G(
+    () => U({
       range: [0, u],
-      domain: [Math.min(...t.map((e) => i(e).getTime())), Math.max(...t.map((e) => i(e).getTime()))]
+      domain: [
+        Math.min(...x.map((e) => i(e).getTime())) || 0,
+        Math.max(...x.map((e) => i(e).getTime())) || 0
+      ]
     }),
-    [u, t, n]
-  ), d = I(
-    () => U({
+    [u, x, n]
+  ), m = G(
+    () => V({
       range: [p, 0],
       round: !0,
-      // Calculate max value from stacked data could be complex, assuming simplistic sum or finding max from data
-      // For accurate stacking, we should ideally calculate the max stack value.
-      // For this demo, let's just make sure we cover the data range generously.
-      domain: [0, Math.max(...t.map((e) => s.reduce((y, m) => y + Number(e[m]), 0))) * 1.1],
+      domain: [0, Math.max(...x.map((e) => s.reduce((f, h) => f + (Number(e[h]) || 0), 0))) * 1.1 || 100],
       nice: !0
     }),
-    [p, t, s]
+    [p, x, s]
   ), {
-    tooltipOpen: v,
-    tooltipLeft: H,
-    tooltipTop: Y,
+    tooltipOpen: H,
+    tooltipLeft: Y,
+    tooltipTop: B,
     tooltipData: E,
-    hideTooltip: B,
-    showTooltip: F
-  } = Z(), { containerRef: K, TooltipInPortal: X } = _({
+    hideTooltip: F,
+    showTooltip: K
+  } = _(), { containerRef: X, TooltipInPortal: q } = tt({
     scroll: !0
-  }), q = V((e) => i(e)).left, $ = (e) => {
-    const { x: y } = lt(e) || { x: 0 }, m = x.invert(y - c.left), L = q(t, m, 1), g = t[L - 1], f = t[L];
-    let z = g;
-    f && i(f) && (z = m.valueOf() - i(g).valueOf() > i(f).valueOf() - m.valueOf() ? f : g), z && F({
-      tooltipData: z,
-      tooltipLeft: x(i(z)) + c.left,
-      tooltipTop: d(0) + c.top
+  }), J = Z((e) => i(e)).left, $ = (e) => {
+    const { x: f } = it(e) || { x: 0 }, h = d.invert(f - c.left), L = J(t, h, 1), g = t[L - 1], v = t[L];
+    let D = g;
+    v && i(v) && (D = h.valueOf() - i(g).valueOf() > i(v).valueOf() - h.valueOf() ? v : g), D && K({
+      tooltipData: D,
+      tooltipLeft: d(i(D)) + c.left,
+      tooltipTop: m(0) + c.top
       // Snap to bottom or follow mouse
     });
   };
   return r < 10 || a < 100 ? null : /* @__PURE__ */ o.jsxs("div", { className: C("relative", S), children: [
-    /* @__PURE__ */ o.jsx("svg", { ref: K, width: r, height: a, className: "overflow-visible", children: /* @__PURE__ */ o.jsxs(G, { left: c.left, top: c.top, children: [
-      (b || k) && /* @__PURE__ */ o.jsxs(G, { children: [
-        b && /* @__PURE__ */ o.jsx(et, { scale: d, width: u, height: p, strokeDasharray: "3,3", stroke: "hsl(var(--border, 214.3 31.8% 91.4%))" }),
-        k && /* @__PURE__ */ o.jsx(ot, { scale: x, width: u, height: p, strokeDasharray: "3,3", stroke: "hsl(var(--border, 214.3 31.8% 91.4%))" })
+    /* @__PURE__ */ o.jsx("svg", { ref: X, width: r, height: a, className: "overflow-visible", children: /* @__PURE__ */ o.jsxs(R, { left: c.left, top: c.top, children: [
+      (b || k) && /* @__PURE__ */ o.jsxs(R, { children: [
+        b && /* @__PURE__ */ o.jsx(at, { scale: m, width: u, height: p, strokeDasharray: "3,3", stroke: "hsl(var(--border, 214.3 31.8% 91.4%))" }),
+        k && /* @__PURE__ */ o.jsx(nt, { scale: d, width: u, height: p, strokeDasharray: "3,3", stroke: "hsl(var(--border, 214.3 31.8% 91.4%))" })
       ] }),
       O && /* @__PURE__ */ o.jsx(
-        at,
+        rt,
         {
           top: p,
-          scale: x,
+          scale: d,
           stroke: "hsl(var(--border, 214.3 31.8% 91.4%))",
           tickStroke: "hsl(var(--border, 214.3 31.8% 91.4%))",
           label: T,
@@ -190,9 +193,9 @@ function mt({
         }
       ),
       P && /* @__PURE__ */ o.jsx(
-        rt,
+        ot,
         {
-          scale: d,
+          scale: m,
           stroke: "transparent",
           tickStroke: "hsl(var(--border))",
           label: A,
@@ -216,20 +219,20 @@ function mt({
         {
           data: t,
           keys: s,
-          x: (e) => x(i(e.data)) ?? 0,
-          y0: (e) => d(h(e)) ?? 0,
-          y1: (e) => d(j(e)) ?? 0,
-          children: ({ stacks: e, path: y }) => e.map((m, L) => {
-            const g = l[L % l.length], f = g.startsWith("#");
+          x: (e) => d(i(e.data)) ?? 0,
+          y0: (e) => m(y(e)) ?? 0,
+          y1: (e) => m(j(e)) ?? 0,
+          children: ({ stacks: e, path: f }) => e.map((h, L) => {
+            const g = l[L % l.length], v = g.startsWith("#");
             return /* @__PURE__ */ o.jsx(
               "path",
               {
-                d: y(m) || "",
+                d: f(h) || "",
                 stroke: "transparent",
-                fill: f ? g : void 0,
-                className: C("opacity-80 hover:opacity-100 transition-opacity", !f && "fill-current", !f && g)
+                fill: v ? g : void 0,
+                className: C("opacity-80 hover:opacity-100 transition-opacity", !v && "fill-current", !v && g)
               },
-              `stack-${m.key}`
+              `stack-${h.key}`
             );
           })
         }
@@ -245,20 +248,20 @@ function mt({
           onTouchStart: $,
           onTouchMove: $,
           onMouseMove: $,
-          onMouseLeave: () => B()
+          onMouseLeave: () => F()
         }
       )
     ] }) }),
-    v && E && /* @__PURE__ */ o.jsx(
-      X,
+    H && E && /* @__PURE__ */ o.jsx(
+      q,
       {
-        top: Y,
-        left: H,
-        style: { ...tt, padding: 0, borderRadius: 0, boxShadow: "none", background: "transparent", zIndex: 50 },
+        top: B,
+        left: Y,
+        style: { ...et, padding: 0, borderRadius: 0, boxShadow: "none", background: "transparent", zIndex: 50 },
         children: /* @__PURE__ */ o.jsxs("div", { className: "rounded-md border bg-white dark:bg-slate-900 px-3 py-1.5 text-sm text-slate-900 dark:text-slate-100 shadow-lg", children: [
           /* @__PURE__ */ o.jsx("p", { className: "font-semibold text-xs text-muted-foreground mb-1", children: i(E).toLocaleDateString() }),
-          s.map((e, y) => /* @__PURE__ */ o.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ o.jsx("div", { className: C("w-2 h-2 rounded-full bg-current", l[y % l.length]) }),
+          s.map((e, f) => /* @__PURE__ */ o.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ o.jsx("div", { className: C("w-2 h-2 rounded-full bg-current", l[f % l.length]) }),
             /* @__PURE__ */ o.jsxs("span", { className: "text-xs capitalize", children: [
               e,
               ":"
@@ -270,7 +273,7 @@ function mt({
     )
   ] });
 }
-const Ot = (t) => /* @__PURE__ */ o.jsx("div", { style: { width: "100%", height: "100%", minHeight: 100 }, children: /* @__PURE__ */ o.jsx(J, { children: ({ width: r, height: a }) => /* @__PURE__ */ o.jsx(mt, { ...t, width: r, height: a }) }) });
+const Pt = (t) => /* @__PURE__ */ o.jsx("div", { style: { width: "100%", height: "100%", minHeight: 100 }, children: /* @__PURE__ */ o.jsx(Q, { children: ({ width: r, height: a }) => /* @__PURE__ */ o.jsx(ft, { ...t, width: r, height: a }) }) });
 export {
-  Ot as AreaChart
+  Pt as AreaChart
 };