@validationcloud/fractal-ui 1.57.0 → 1.58.0

package/dist/lib/render-chart-to-image.d.ts

@@ -1,6 +1,18 @@
+/** Font family registration for server-side chart rendering */
+export interface FontRegistration {
+    /** Font family name (e.g., 'Poppins', 'Inter') */
+    family: string;
+    /** Font data buffers for each weight/style variant */
+    data: readonly Buffer[];
+}
 export interface RenderChartToImageOptions {
     option: unknown;
     theme?: Record<string, unknown>;
+    /**
+     * Fonts to register before rendering. Each font family is registered once
+     * and cached for subsequent renders.
+     */
+    fonts?: FontRegistration[];
     /**
      * Adds Validation Cloud watermark graphic to the chart option before rendering.
      *
@@ -32,4 +44,4 @@ export interface RenderChartToImageOptions {
  * });
  * ```
  */
-export declare function renderChartToImage({ option, theme, includeWatermark, width, height, devicePixelRatio, }: RenderChartToImageOptions): Buffer;
+export declare function renderChartToImage({ option, theme, fonts, includeWatermark, width, height, devicePixelRatio, }: RenderChartToImageOptions): Buffer;

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

@@ -1,40 +1,31 @@
 import * as p from "echarts";
-import { randomUUID as y } from "node:crypto";
-import e from "node:path";
-import { fileURLToPath as O } from "node:url";
-import { Image as b, Canvas as g, FontLibrary as h } from "skia-canvas";
-import { calculateTitleLayout as j } from "../components/echarts-renderer/calculate-title-layout.js";
-import { addWatermarkToOptions as P } from "../components/echarts-renderer/watermark-graphic.js";
-globalThis.Image = b;
-let s = !1;
-function T() {
-  if (!s)
-    try {
-      const t = e.dirname(O(import.meta.url)), r = [
-        // dist/src/lib -> dist/fonts (packaged) OR src/lib -> src/fonts (dev)
-        e.resolve(t, "../../fonts"),
-        // dist/lib -> dist/fonts (packaged)
-        e.resolve(t, "../fonts")
-      ];
-      let n;
-      for (const o of r)
-        try {
-          h.use("Poppins", [
-            e.join(o, "Poppins-Regular.ttf"),
-            e.join(o, "Poppins-Medium.ttf"),
-            e.join(o, "Poppins-SemiBold.ttf"),
-            e.join(o, "Poppins-Bold.ttf")
-          ]), s = !0;
-          return;
-        } catch (a) {
-          n = a;
-        }
-      throw n;
-    } catch (t) {
-      console.warn("Failed to register Poppins fonts, charts will use fallback font:", t), s = !0;
-    }
+import { randomUUID as h } from "node:crypto";
+import { writeFileSync as O, mkdtempSync as T } from "node:fs";
+import { tmpdir as b } from "node:os";
+import d from "node:path";
+import { Image as j, Canvas as F, FontLibrary as S } from "skia-canvas";
+import { calculateTitleLayout as I } from "../components/echarts-renderer/calculate-title-layout.js";
+import { addWatermarkToOptions as C } from "../components/echarts-renderer/watermark-graphic.js";
+globalThis.Image = j;
+const u = /* @__PURE__ */ new Set();
+let f;
+function w() {
+  return f || (f = T(d.join(b(), "chart-fonts-"))), f;
 }
-const I = /* @__PURE__ */ new Set([
+function A(r) {
+  for (const t of r)
+    if (!u.has(t.family))
+      try {
+        const e = w(), i = t.data.map((o, n) => {
+          const a = d.join(e, `${t.family}-${String(n)}.ttf`);
+          return O(a, o), a;
+        });
+        S.use(t.family, i), u.add(t.family);
+      } catch (e) {
+        console.warn(`Failed to register ${t.family} fonts, charts will use fallback font:`, e);
+      }
+}
+const D = /* @__PURE__ */ new Set([
   "aria",
   // Tries to set DOM attributes which node-canvas doesn't implement
   "toolbox",
@@ -46,38 +37,39 @@ const I = /* @__PURE__ */ new Set([
   "axisPointer"
   // Crosshair on hover
 ]);
-function v(t) {
-  if (!t || typeof t != "object" || Array.isArray(t))
+function E(r) {
+  if (!r || typeof r != "object" || Array.isArray(r))
     return { animation: !1 };
-  const r = Object.fromEntries(
-    Object.entries(t).filter(([n]) => !I.has(n))
+  const t = Object.fromEntries(
+    Object.entries(r).filter(([e]) => !D.has(e))
   );
-  return r.animation = !1, r;
+  return t.animation = !1, t;
 }
-function S({
-  option: t,
-  theme: r,
-  includeWatermark: n = !1,
+function L({
+  option: r,
+  theme: t,
+  fonts: e,
+  includeWatermark: i = !1,
   width: o = 800,
-  height: a = 600,
-  devicePixelRatio: m = 2
+  height: n = 600,
+  devicePixelRatio: a = 2
 }) {
-  T();
-  let i;
-  r && typeof r == "object" && (i = `theme-${y()}`, p.registerTheme(i, r));
-  const f = new g(o, a), c = p.init(f, i, {
+  e?.length && A(e);
+  let s;
+  t && typeof t == "object" && (s = `theme-${h()}`, p.registerTheme(s, t));
+  const m = new F(o, n), c = p.init(m, s, {
     renderer: "canvas",
-    devicePixelRatio: m,
+    devicePixelRatio: a,
     width: o,
-    height: a
+    height: n
   });
   try {
-    const u = v(t), l = j(u, o, r), d = n ? P(l) : l;
-    return c.setOption(d), f.toBufferSync("png");
+    const y = E(r), l = I(y, o, t), g = i ? C(l) : l;
+    return c.setOption(g), m.toBufferSync("png");
   } finally {
     c.dispose();
   }
 }
 export {
-  S as renderChartToImage
+  L as renderChartToImage
 };

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

@@ -1,22 +1,28 @@
 import { selectMavrikTheme as n } from "../components/echarts-renderer/mavrik-theme.js";
-import { renderChartToImage as f } from "./render-chart-to-image.js";
-function c({
+import { PoppinsRegular as p, PoppinsMedium as a, PoppinsSemiBold as s, PoppinsBold as f } from "./font-data.js";
+import { renderChartToImage as P } from "./render-chart-to-image.js";
+const d = {
+  family: "Poppins",
+  data: [p, a, s, f]
+};
+function g({
   option: e,
-  includeWatermark: r = !1,
-  width: t = 800,
-  height: m = 600,
-  devicePixelRatio: o = 2
+  includeWatermark: o = !1,
+  width: r = 800,
+  height: i = 600,
+  devicePixelRatio: m = 2
 }) {
-  const a = n(e);
-  return f({
+  const t = n(e);
+  return P({
     option: e,
-    theme: a.config,
-    includeWatermark: r,
-    width: t,
-    height: m,
-    devicePixelRatio: o
+    theme: t.config,
+    fonts: [d],
+    includeWatermark: o,
+    width: r,
+    height: i,
+    devicePixelRatio: m
   });
 }
 export {
-  c as renderMavrikChartToImage
+  g as renderMavrikChartToImage
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.57.0",
+  "version": "1.58.0",
   "module": "./dist/index.js",
   "type": "module",
   "files": [
@@ -18,7 +18,7 @@
     "url": "https://github.com/validationcloud/fractal-ui/issues"
   },
   "scripts": {
-    "prebuild": "pnpm run generate:theme",
+    "prebuild": "pnpm run generate:theme && pnpm run generate:fonts",
     "build": "vite build",
     "lint": "eslint",
     "storybook": "storybook dev -p 6006",
@@ -28,7 +28,8 @@
     "typecheck": "tsc -b --noEmit",
     "test": "vitest run",
     "prepublishOnly": "pnpm build",
-    "generate:theme": "node --experimental-transform-types scripts/generate-mavrik-theme.ts && prettier --write src/components/echarts-renderer/mavrik-theme*.json"
+    "generate:theme": "node --experimental-transform-types scripts/generate-mavrik-theme.ts && prettier --write src/components/echarts-renderer/mavrik-theme*.json",
+    "generate:fonts": "node --experimental-transform-types scripts/generate-font-data.ts && prettier --write src/lib/font-data.ts"
   },
   "exports": {
     ".": {