@validationcloud/fractal-ui 1.51.0 → 1.53.0

package/dist/index.js

@@ -2,68 +2,71 @@ import { AnimatedLoader as t } from "./components/animated-loader/animated-loade
 import { Badge as p } from "./components/badge/badge.js";
 import { Box as x } from "./components/box/box.js";
 import { Button as n } from "./components/button/button.js";
-import { EChartsRenderer as d } from "./components/echarts-renderer/echarts-renderer.js";
+import { EChartsRenderer as i } from "./components/echarts-renderer/echarts-renderer.js";
 import { EChartsThemeOption as u, isEChartsThemeOption as h } from "./components/echarts-renderer/echarts-theme-option.js";
-import { EChartsChartOption as l, isEChartsChartOption as C } from "./components/echarts-renderer/echarts-chart-option.js";
+import { EChartsChartOption as C, isEChartsChartOption as l } from "./components/echarts-renderer/echarts-chart-option.js";
 import { useChartInstance as T } from "./components/echarts-renderer/use-chart-instance.js";
-import { MAVRIK_THEME as E } from "./components/echarts-renderer/mavrik-theme.js";
-import { ClientModal as M } from "./components/client-modal/client-modal.js";
-import { CopyButton as w } from "./components/copy-button/copy-button.js";
-import { DecoratedIcon as D } from "./components/decorated-icon/decorated-icon.js";
-import { DropdownMenu as P, DropdownMenuItem as A } from "./components/dropdown-menu/dropdown-menu.js";
-import { ErrorBoundary as y } from "./components/error-boundary/error-boundary.js";
-import { ScrollArea as R } from "./components/scroll-area/index.js";
-import { Icon as b } from "./components/icon/icon.js";
-import { IconButton as F } from "./components/icon-button/icon-button.js";
-import { InputButton as K } from "./components/input-button/input-button.js";
-import { MountSvgSprite as V } from "./components/mount-svg-sprite/mount-svg-sprite.js";
-import { NotFoundComponent as j } from "./components/not-found-component/not-found-component.js";
-import { PagePadding as z } from "./components/page-padding/page-padding.js";
-import { ProtocolLogo as J } from "./components/protocol-logo/protocol-logo.js";
-import { Skeleton as W } from "./components/skeleton/skeleton.js";
-import { Switch as Y } from "./components/switch/switch.js";
-import { TextInput as $ } from "./components/text-input/text-input.js";
-import { Tooltip as ro } from "./components/tooltip/tooltip.js";
-import { TooltipProvider as eo } from "./components/tooltip-provider/tooltip-provider.js";
-import { TouchTarget as mo } from "./components/touch-target/touch-target.js";
-import { twMerge as fo } from "./lib/tailwind-merge.js";
-import { UserDropdown as ao } from "./components/user-dropdown/user-dropdown.js";
-import { UserDropdownMobile as uo } from "./components/user-dropdown-mobile/user-dropdown-mobile.js";
-import { useScrollToBottom as so } from "./hooks/use-scroll-to-bottom.js";
+import { MavrikChart as E } from "./components/echarts-renderer/mavrik-chart.js";
+import { MAVRIK_THEME as B, MAVRIK_THEME_HORIZONTAL as g } from "./components/echarts-renderer/mavrik-theme.js";
+import { ClientModal as O } from "./components/client-modal/client-modal.js";
+import { CopyButton as A } from "./components/copy-button/copy-button.js";
+import { DecoratedIcon as P } from "./components/decorated-icon/decorated-icon.js";
+import { DropdownMenu as v, DropdownMenuItem as H } from "./components/dropdown-menu/dropdown-menu.js";
+import { ErrorBoundary as _ } from "./components/error-boundary/error-boundary.js";
+import { ScrollArea as y } from "./components/scroll-area/index.js";
+import { Icon as N } from "./components/icon/icon.js";
+import { IconButton as V } from "./components/icon-button/icon-button.js";
+import { InputButton as F } from "./components/input-button/input-button.js";
+import { MountSvgSprite as j } from "./components/mount-svg-sprite/mount-svg-sprite.js";
+import { NotFoundComponent as z } from "./components/not-found-component/not-found-component.js";
+import { PagePadding as J } from "./components/page-padding/page-padding.js";
+import { ProtocolLogo as W } from "./components/protocol-logo/protocol-logo.js";
+import { Skeleton as Y } from "./components/skeleton/skeleton.js";
+import { Switch as oo } from "./components/switch/switch.js";
+import { TextInput as to } from "./components/text-input/text-input.js";
+import { Tooltip as po } from "./components/tooltip/tooltip.js";
+import { TooltipProvider as xo } from "./components/tooltip-provider/tooltip-provider.js";
+import { TouchTarget as no } from "./components/touch-target/touch-target.js";
+import { twMerge as io } from "./lib/tailwind-merge.js";
+import { UserDropdown as ho } from "./components/user-dropdown/user-dropdown.js";
+import { UserDropdownMobile as Co } from "./components/user-dropdown-mobile/user-dropdown-mobile.js";
+import { useScrollToBottom as Mo } from "./hooks/use-scroll-to-bottom.js";
 export {
   t as AnimatedLoader,
   p as Badge,
   x as Box,
   n as Button,
-  M as ClientModal,
-  w as CopyButton,
-  D as DecoratedIcon,
-  P as DropdownMenu,
-  A as DropdownMenuItem,
-  l as EChartsChartOption,
-  d as EChartsRenderer,
+  O as ClientModal,
+  A as CopyButton,
+  P as DecoratedIcon,
+  v as DropdownMenu,
+  H as DropdownMenuItem,
+  C as EChartsChartOption,
+  i as EChartsRenderer,
   u as EChartsThemeOption,
-  y as ErrorBoundary,
-  b as Icon,
-  F as IconButton,
-  K as InputButton,
-  E as MAVRIK_THEME,
-  V as MountSvgSprite,
-  j as NotFoundComponent,
-  z as PagePadding,
-  J as ProtocolLogo,
-  R as ScrollArea,
-  W as Skeleton,
-  Y as Switch,
-  $ as TextInput,
-  ro as Tooltip,
-  eo as TooltipProvider,
-  mo as TouchTarget,
-  ao as UserDropdown,
-  uo as UserDropdownMobile,
-  C as isEChartsChartOption,
+  _ as ErrorBoundary,
+  N as Icon,
+  V as IconButton,
+  F as InputButton,
+  B as MAVRIK_THEME,
+  g as MAVRIK_THEME_HORIZONTAL,
+  E as MavrikChart,
+  j as MountSvgSprite,
+  z as NotFoundComponent,
+  J as PagePadding,
+  W as ProtocolLogo,
+  y as ScrollArea,
+  Y as Skeleton,
+  oo as Switch,
+  to as TextInput,
+  po as Tooltip,
+  xo as TooltipProvider,
+  no as TouchTarget,
+  ho as UserDropdown,
+  Co as UserDropdownMobile,
+  l as isEChartsChartOption,
   h as isEChartsThemeOption,
-  fo as twMerge,
+  io as twMerge,
   T as useChartInstance,
-  so as useScrollToBottom
+  Mo as useScrollToBottom
 };

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

@@ -1,34 +1,51 @@
-import { createCanvas as f } from "canvas";
-import { randomUUID as m } from "node:crypto";
-import { createRequire as u } from "node:module";
-const p = u(import.meta.url), s = p("echarts");
-function l(r) {
+import { createCanvas as u } from "canvas";
+import { randomUUID as l } from "node:crypto";
+import { createRequire as d } from "node:module";
+import { calculateTitleLayout as O } from "../components/echarts-renderer/calculate-title-layout.js";
+import { addWatermarkToOptions as y } from "../components/echarts-renderer/watermark-graphic.js";
+const T = d(import.meta.url), b = /* @__PURE__ */ new Set([
+  "aria",
+  // Tries to set DOM attributes which node-canvas doesn't implement
+  "toolbox",
+  // Export/zoom/reset buttons - not useful in static image
+  "dataZoom",
+  // Interactive range slider
+  "brush",
+  // Selection tool
+  "axisPointer"
+  // Crosshair on hover
+]);
+function j(r) {
   if (!r || typeof r != "object" || Array.isArray(r))
     return { animation: !1 };
-  const e = { ...r };
-  return "aria" in e && delete e.aria, e.animation = !1, e;
+  const t = Object.fromEntries(
+    Object.entries(r).filter(([e]) => !b.has(e))
+  );
+  return t.animation = !1, t;
 }
-function h({
+function g({
   option: r,
-  theme: e,
-  width: a = 800,
-  height: n = 600,
+  theme: t,
+  width: e = 800,
+  height: o = 600,
   devicePixelRatio: c = 2
 }) {
-  let t;
-  e && typeof e == "object" && (t = `theme-${m()}`, s.registerTheme(t, e));
-  const i = f(a, n), o = s.init(i, t, {
+  const n = T("echarts");
+  let a;
+  t && typeof t == "object" && (a = `theme-${l()}`, n.registerTheme(a, t));
+  const i = u(e, o), s = n.init(i, a, {
     renderer: "canvas",
     devicePixelRatio: c,
-    width: a,
-    height: n
+    width: e,
+    height: o
   });
   try {
-    return o.setOption(l(r)), i.toBuffer("image/png");
+    const m = j(r), f = O(m, e, t), p = y(f);
+    return s.setOption(p), i.toBuffer("image/png");
   } finally {
-    o.dispose();
+    s.dispose();
   }
 }
 export {
-  h as renderChartToImage
+  g as renderChartToImage
 };

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

@@ -0,0 +1,33 @@
+import { EChartsOption } from 'echarts';
+export interface RenderMavrikChartToImageOptions {
+    option: EChartsOption;
+    width?: number;
+    height?: number;
+    devicePixelRatio?: number;
+}
+/**
+ * Renders an ECharts chart to a PNG image buffer using the Mavrik theme.
+ *
+ * Automatically selects the correct theme variant based on chart type:
+ * - Vertical bars: gradient flows top-to-bottom
+ * - Horizontal bars: gradient flows left-to-right
+ *
+ * For custom themes, use renderChartToImage directly.
+ *
+ * @param options - Chart configuration and rendering options
+ * @returns PNG image buffer
+ *
+ * @example
+ * ```ts
+ * const buffer = renderMavrikChartToImage({
+ *   option: {
+ *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
+ *     yAxis: { type: 'value' },
+ *     series: [{ data: [120, 200, 150], type: 'bar' }]
+ *   },
+ *   width: 800,
+ *   height: 600
+ * });
+ * ```
+ */
+export declare function renderMavrikChartToImage({ option, width, height, devicePixelRatio, }: RenderMavrikChartToImageOptions): Buffer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.51.0",
+  "version": "1.53.0",
   "module": "./dist/index.js",
   "type": "module",
   "files": [
@@ -17,6 +17,7 @@
     "url": "https://github.com/validationcloud/fractal-ui/issues"
   },
   "scripts": {
+    "prebuild": "pnpm run generate:theme",
     "build": "vite build",
     "lint": "eslint",
     "storybook": "storybook dev -p 6006",
@@ -25,7 +26,8 @@
     "format:check": "prettier --check .",
     "typecheck": "tsc -b --noEmit",
     "test": "vitest run",
-    "prepublishOnly": "pnpm build"
+    "prepublishOnly": "pnpm build",
+    "generate:theme": "node --experimental-transform-types scripts/generate-mavrik-theme.ts"
   },
   "exports": {
     ".": {
@@ -38,7 +40,7 @@
     },
     "./tailwind.css": "./dist/styles/tailwind.css"
   },
-  "packageManager": "pnpm@10.24.0",
+  "packageManager": "pnpm@10.25.0",
   "engines": {
     "node": ">=22.14.0"
   },
@@ -51,37 +53,39 @@
     "zod": "^4"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.4.1",
+    "@eslint/compat": "^2.0.0",
     "@eslint/js": "^9.39.1",
-    "@storybook/addon-docs": "^10.0.4",
-    "@storybook/addon-onboarding": "^10.0.4",
-    "@storybook/react-vite": "^10.0.4",
+    "@storybook/addon-docs": "^10.1.5",
+    "@storybook/addon-onboarding": "^10.1.5",
+    "@storybook/react-vite": "^10.1.5",
     "@tailwindcss/postcss": "^4",
     "@trivago/prettier-plugin-sort-imports": "^6.0.0",
+    "@types/culori": "^4.0.1",
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@vitejs/plugin-react": "^5.1.0",
+    "@vitejs/plugin-react": "^5.1.2",
     "canvas": "^3.2.0",
+    "culori": "^4.0.2",
     "echarts": "^6.0.0",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^10.0.4",
+    "eslint-plugin-storybook": "^10.1.5",
     "globals": "^16.5.0",
     "postcss": "^8.5.6",
-    "prettier": "3.6.2",
-    "prettier-plugin-tailwindcss": "^0.7.1",
+    "prettier": "3.7.4",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^25.0.2",
-    "storybook": "^10.0.4",
-    "tailwindcss": "^4.1.16",
+    "storybook": "^10.1.5",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5",
-    "typescript-eslint": "^8.46.3",
-    "vite": "^7.1.12",
+    "typescript-eslint": "^8.49.0",
+    "vite": "^7.2.7",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.15"
   },