@validationcloud/fractal-ui 1.77.0 → 1.78.0

package/dist/components/echarts-renderer/use-chart-instance.js

@@ -1,56 +1,58 @@
 "use client";
-import { useRef as d, useState as T, useEffect as I, useCallback as S } from "react";
+import { useRef as f, useState as T, useEffect as I, useCallback as S } from "react";
 import { calculateTitleLayout as m } from "./calculate-title-layout.js";
 import { replaceFormatterTokens as O } from "./formatters/replace-formatter-tokens.js";
 import { mergeThemeGraphicIntoOptions as R } from "./merge-theme-graphic-into-options.js";
+import { getRequiredMapName as j, registerMapAsync as x } from "./register-map.js";
 import { sanitizeChartOptions as w } from "./sanitize-chart-options.js";
 const W = /* @__PURE__ */ new Set();
-function L({ options: o, theme: t }) {
-  const n = d(null), c = d(null), y = d(o), C = d(t?.config), z = d(t?.config.graphic), [b, v] = T(!1);
-  y.current = o, C.current = t?.config, z.current = t?.config.graphic, I(() => {
-    const s = n.current;
+function B({ options: i, theme: t }) {
+  const e = f(null), o = f(null), y = f(i), C = f(t?.config), z = f(t?.config.graphic), [b, v] = T(!1);
+  y.current = i, C.current = t?.config, z.current = t?.config.graphic, I(() => {
+    const s = e.current;
     if (!s) return;
-    let r = !0, e;
-    const f = new ResizeObserver((i) => {
-      const a = i[0], u = c.current;
-      if (!a || !u) return;
-      const p = a.contentRect.width, g = w(y.current), l = O(g), h = m(l, p, C.current);
-      u.setOption(R(h, z.current), {
+    let r = !0, n;
+    const d = new ResizeObserver((c) => {
+      const u = c[0], a = o.current;
+      if (!u || !a) return;
+      const p = u.contentRect.width, g = w(y.current), l = O(g), h = m(l, p, C.current);
+      a.setOption(R(h, z.current), {
         replaceMerge: ["graphic"]
-      }), u.resize();
+      }), a.resize();
     });
-    return f.observe(s), (async () => {
+    return d.observe(s), (async () => {
       try {
-        const i = await import("echarts");
-        if (!r || !n.current) return;
-        if (t && !W.has(t.name)) {
-          const { graphic: h, ...F } = t.config;
-          i.registerTheme(t.name, F), W.add(t.name);
+        const c = await import("echarts");
+        if (!r || !e.current) return;
+        const u = j(i);
+        if (u && await x(c, u), t && !W.has(t.name)) {
+          const { graphic: F, ...M } = t.config;
+          c.registerTheme(t.name, M), W.add(t.name);
         }
-        const a = i.getInstanceByDom(n.current);
-        a && a.dispose(), e = i.init(n.current, t?.name, {
+        const a = c.getInstanceByDom(e.current);
+        a && a.dispose(), n = c.init(e.current, t?.name, {
           renderer: "svg"
-        }), c.current = e;
-        const u = n.current.clientWidth, p = w(o), g = O(p), l = m(g, u, t?.config);
-        e.setOption(R(l, t?.config.graphic), {
+        }), o.current = n;
+        const p = e.current.clientWidth, g = w(i), l = O(g), h = m(l, p, t?.config);
+        n.setOption(R(h, t?.config.graphic), {
           replaceMerge: ["graphic"]
-        }), e.resize(), v(!0);
-      } catch (i) {
-        console.error("Failed to load echarts", i);
+        }), n.resize(), v(!0);
+      } catch (c) {
+        console.error("Failed to load echarts", c);
       }
     })(), () => {
-      r = !1, f.disconnect(), e && e.dispose(), c.current = null, v(!1);
+      r = !1, d.disconnect(), n && n.dispose(), o.current = null, v(!1);
     };
-  }, [t, o]), I(() => {
-    if (!b || !c.current || !n.current) return;
-    const s = n.current.clientWidth, r = w(o), e = O(r), f = m(e, s, t?.config);
-    c.current.setOption(R(f, t?.config.graphic), {
+  }, [t, i]), I(() => {
+    if (!b || !o.current || !e.current) return;
+    const s = e.current.clientWidth, r = w(i), n = O(r), d = m(n, s, t?.config);
+    o.current.setOption(R(d, t?.config.graphic), {
       replaceMerge: ["graphic"]
     });
-  }, [b, o, t?.config, t?.config.graphic]);
+  }, [b, i, t?.config, t?.config.graphic]);
   const k = S(async () => {
-    if (!c.current) return;
-    const s = c.current.getDataURL({
+    if (!o.current) return;
+    const s = o.current.getDataURL({
       type: "png",
       pixelRatio: 2,
       backgroundColor: "#fff"
@@ -58,10 +60,10 @@ function L({ options: o, theme: t }) {
     r.download = `chart-${(/* @__PURE__ */ new Date()).toISOString()}.png`, r.href = s, document.body.appendChild(r), r.click(), document.body.removeChild(r);
   }, []);
   return {
-    containerRef: n,
+    containerRef: e,
     downloadChart: k
   };
 }
 export {
-  L as useChartInstance
+  B as useChartInstance
 };

package/dist/hooks/use-scroll-to-bottom.d.ts

@@ -1,12 +1,13 @@
 type UseScrollToBottomOptions = {
     readonly threshold?: number;
 };
-export declare function useScrollToBottom({ threshold }?: UseScrollToBottomOptions): {
-    containerRef: import('react').RefObject<HTMLDivElement | null>;
-    endRef: import('react').RefObject<HTMLDivElement | null>;
+type UseScrollToBottomReturn = {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    endRef: React.RefObject<HTMLDivElement | null>;
     isAtBottom: boolean;
     scrollToBottom: (behavior?: ScrollBehavior) => void;
     onViewportEnter: () => void;
     onViewportLeave: () => void;
 };
+export declare function useScrollToBottom({ threshold }?: UseScrollToBottomOptions): UseScrollToBottomReturn;
 export {};

package/dist/lib/render-chart-to-image.js

@@ -1,33 +1,51 @@
-import * as p from "echarts";
-import { randomUUID as C } from "node:crypto";
-import { writeFileSync as F, mkdtempSync as O } from "node:fs";
-import { tmpdir as b } from "node:os";
-import h from "node:path";
-import { Image as I, Canvas as S, FontLibrary as j } from "skia-canvas";
-import { calculateTitleLayout as w } from "../components/echarts-renderer/calculate-title-layout.js";
-import { isChartTheme as v } from "../components/echarts-renderer/chart-theme.js";
-import { replaceFormatterTokens as A } from "../components/echarts-renderer/formatters/replace-formatter-tokens.js";
-import { mergeThemeGraphicIntoOptions as D } from "../components/echarts-renderer/merge-theme-graphic-into-options.js";
-globalThis.Image = I;
-const l = /* @__PURE__ */ new Set();
-let m;
-function E() {
-  return m || (m = O(h.join(b(), "chart-fonts-"))), m;
+import * as d from "echarts";
+import { writeFileSync as w, mkdtempSync as N } from "node:fs";
+import { tmpdir as T } from "node:os";
+import y from "node:path";
+import { Image as C, Canvas as S, FontLibrary as G } from "skia-canvas";
+import { calculateTitleLayout as F } from "../components/echarts-renderer/calculate-title-layout.js";
+import { isChartTheme as b } from "../components/echarts-renderer/chart-theme.js";
+import { replaceFormatterTokens as J } from "../components/echarts-renderer/formatters/replace-formatter-tokens.js";
+import A from "../components/echarts-renderer/geo/africa-countries.json.js";
+import I from "../components/echarts-renderer/geo/americas-countries.json.js";
+import j from "../components/echarts-renderer/geo/asia-countries.json.js";
+import E from "../components/echarts-renderer/geo/europe-countries.json.js";
+import M from "../components/echarts-renderer/geo/us-states.json.js";
+import R from "../components/echarts-renderer/geo/world-continents.json.js";
+import P from "../components/echarts-renderer/geo/world-countries.json.js";
+import k from "../components/echarts-renderer/geo/world-regions.json.js";
+import { mergeThemeGraphicIntoOptions as v } from "../components/echarts-renderer/merge-theme-graphic-into-options.js";
+import { getRequiredMapName as x, isMapName as D, registerMapSync as _ } from "../components/echarts-renderer/register-map.js";
+const $ = {
+  "world-countries": P,
+  "world-continents": R,
+  "world-regions": k,
+  "us-states": M,
+  "europe-countries": E,
+  "americas-countries": I,
+  "asia-countries": j,
+  "africa-countries": A
+};
+globalThis.Image = C;
+const g = /* @__PURE__ */ new Set();
+let f;
+function z() {
+  return f || (f = N(y.join(T(), "chart-fonts-"))), f;
 }
-function N(r) {
+function L(r) {
   for (const t of r)
-    if (!l.has(t.family))
+    if (!g.has(t.family))
       try {
-        const e = E(), n = t.data.map((i, s) => {
-          const o = h.join(e, `${t.family}-${String(s)}.ttf`);
-          return F(o, i), o;
+        const e = z(), o = t.data.map((a, m) => {
+          const n = y.join(e, `${t.family}-${String(m)}.ttf`);
+          return w(n, a), n;
         });
-        j.use(t.family, n), l.add(t.family);
+        G.use(t.family, o), g.add(t.family);
       } catch (e) {
         console.warn(`Failed to register ${t.family} fonts, charts will use fallback font:`, e);
       }
 }
-const P = /* @__PURE__ */ new Set([
+const V = /* @__PURE__ */ new Set([
   "aria",
   // Tries to set DOM attributes which node-canvas doesn't implement
   "toolbox",
@@ -39,41 +57,52 @@ const P = /* @__PURE__ */ new Set([
   "axisPointer"
   // Crosshair on hover
 ]);
-function $(r) {
+function q(r) {
   if (!r || typeof r != "object" || Array.isArray(r))
     return { animation: !1 };
   const t = Object.fromEntries(
-    Object.entries(r).filter(([e]) => !P.has(e))
+    Object.entries(r).filter(([e]) => !V.has(e))
   );
   return t.animation = !1, t;
 }
-function k({
+function B(r) {
+  const t = new S(r.width, r.height);
+  return t.getContext("2d").drawImage(r, 0, 0), t;
+}
+function U({
   option: r,
   theme: t,
   fonts: e,
-  width: n = 800,
-  height: i = 600,
-  devicePixelRatio: s = 2
+  width: o = 800,
+  height: a = 600,
+  devicePixelRatio: m = 2
 }) {
-  e?.length && N(e);
-  let o, a, c;
+  e?.length && L(e);
+  let n, s, p;
   if (t) {
-    a = v(t) ? t.config : t, c = a.graphic, o = `theme-${C()}`;
-    const { graphic: x, ...T } = a;
-    p.registerTheme(o, T);
+    s = b(t) ? t.config : t, p = s.graphic;
+    const { graphic: h, ...c } = s;
+    n = c;
   }
-  const f = new S(n, i), u = p.init(f, o, {
+  const i = x(r);
+  i && (D(i) ? _(d, i, $[i]) : console.warn(`Unknown map name for server-side rendering: "${i}"`));
+  const l = new S(o, a), u = d.init(l, n, {
     renderer: "canvas",
-    devicePixelRatio: s,
-    width: n,
-    height: i
-  }), g = $(r), d = A(g), y = w(d, n, a);
-  return u.setOption(D(y, c), { replaceMerge: ["graphic"] }), f;
+    devicePixelRatio: m,
+    width: o,
+    height: a
+  });
+  try {
+    const h = q(r), c = J(h), O = F(c, o, s);
+    return u.setOption(v(O, p), { replaceMerge: ["graphic"] }), B(l);
+  } finally {
+    u.dispose();
+  }
 }
-function W(r) {
-  return k(r).toBufferSync("png");
+function ft(r) {
+  return U(r).toBufferSync("png");
 }
 export {
-  k as renderChartToCanvas,
-  W as renderChartToImage
+  U as renderChartToCanvas,
+  ft as renderChartToImage
 };