@validationcloud/fractal-ui 1.49.0 → 1.51.0

package/dist/components/echarts-renderer/echarts-chart-option.d.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+/**
+ * A loose Zod schema for validating ECharts chart options.
+ *
+ * This schema validates the basic structure without enforcing
+ * strict ECharts types, which allows JSON imports to pass validation
+ * while still providing runtime type checking.
+ */
+export declare const EChartsChartOption: z.ZodObject<{}, z.core.$catchall<z.ZodUnknown>>;
+export type EChartsChartOption = z.infer<typeof EChartsChartOption>;
+export declare function isEChartsChartOption(value: unknown): value is EChartsChartOption;

package/dist/components/echarts-renderer/echarts-chart-option.js

@@ -0,0 +1,9 @@
+import { z as t } from "zod";
+const n = t.object({}).catchall(t.unknown());
+function s(r) {
+  return n.safeParse(r).success;
+}
+export {
+  n as EChartsChartOption,
+  s as isEChartsChartOption
+};

package/dist/components/echarts-renderer/echarts-renderer.d.ts

@@ -0,0 +1,22 @@
+import { EChartsOption } from 'echarts';
+import { EChartsThemeOption } from './echarts-theme-option';
+export type { EChartsOption, EChartsThemeOption };
+export type EChartsRendererRef = {
+    download: () => Promise<void>;
+};
+export type EChartsRendererProps = {
+    readonly option: EChartsOption;
+    readonly theme?: {
+        name: string;
+        config: EChartsThemeOption;
+    };
+    readonly className?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+export declare const EChartsRenderer: import('react').ForwardRefExoticComponent<{
+    readonly option: EChartsOption;
+    readonly theme?: {
+        name: string;
+        config: EChartsThemeOption;
+    };
+    readonly className?: string;
+} & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & import('react').RefAttributes<EChartsRendererRef>>;

package/dist/components/echarts-renderer/echarts-renderer.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as f, useImperativeHandle as i } from "react";
+import { twMerge as d } from "../../lib/tailwind-merge.js";
+import { useChartInstance as m } from "./use-chart-instance.js";
+const v = f(function({ className: o, option: t, theme: n, ...a }, l) {
+  const { containerRef: s, downloadChart: e } = m({
+    options: t,
+    theme: n
+  });
+  return i(
+    l,
+    () => ({
+      download: e
+    }),
+    [e]
+  ), /* @__PURE__ */ r("div", { className: d("relative h-full w-full", o), ...a, children: /* @__PURE__ */ r("div", { className: "h-full w-full", ref: s }) });
+});
+export {
+  v as EChartsRenderer
+};

package/dist/components/echarts-renderer/echarts-theme-option.d.ts

@@ -0,0 +1,4 @@
+import { z } from 'zod';
+export declare const EChartsThemeOption: z.ZodObject<{}, z.core.$catchall<z.ZodUnknown>>;
+export type EChartsThemeOption = z.infer<typeof EChartsThemeOption>;
+export declare function isEChartsThemeOption(value: unknown): value is EChartsThemeOption;

package/dist/components/echarts-renderer/echarts-theme-option.js

@@ -0,0 +1,9 @@
+import { z as t } from "zod";
+const n = t.object({}).catchall(t.unknown());
+function s(e) {
+  return n.safeParse(e).success;
+}
+export {
+  n as EChartsThemeOption,
+  s as isEChartsThemeOption
+};

package/dist/components/echarts-renderer/mavrik-theme.d.ts

@@ -0,0 +1,227 @@
+export declare const MAVRIK_THEME: {
+    readonly name: "mavrik";
+    readonly config: {
+        color: {
+            type: string;
+            x: number;
+            y: number;
+            x2: number;
+            y2: number;
+            colorStops: {
+                offset: number;
+                color: string;
+            }[];
+        }[];
+        backgroundColor: string;
+        textStyle: {
+            fontFamily: string;
+            fontWeight: number;
+        };
+        title: {
+            top: number;
+            left: number;
+            textStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            subtextStyle: {
+                color: string;
+            };
+        };
+        line: {
+            itemStyle: {
+                borderWidth: number;
+            };
+            lineStyle: {
+                width: number;
+            };
+            areaStyle: {
+                opacity: number;
+            };
+            showSymbol: boolean;
+            symbolSize: number;
+            symbol: string;
+            smooth: boolean;
+            sampling: string;
+        };
+        bar: {
+            barGap: string;
+            barCategoryGap: string;
+        };
+        categoryAxis: {
+            axisLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string;
+                    type: string;
+                };
+            };
+            axisTick: {
+                show: boolean;
+            };
+            axisLabel: {
+                show: boolean;
+                color: string;
+            };
+            nameLocation: string;
+            nameTextStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            splitLine: {
+                show: boolean;
+            };
+        };
+        valueAxis: {
+            axisLine: {
+                show: boolean;
+            };
+            axisTick: {
+                show: boolean;
+            };
+            axisLabel: {
+                show: boolean;
+                color: string;
+            };
+            nameLocation: string;
+            nameTextStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            splitLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string[];
+                    type: string;
+                };
+            };
+        };
+        logAxis: {
+            axisLine: {
+                show: boolean;
+            };
+            axisTick: {
+                show: boolean;
+            };
+            axisLabel: {
+                show: boolean;
+                color: string;
+            };
+            nameLocation: string;
+            nameTextStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            splitLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string[];
+                    type: string;
+                };
+            };
+        };
+        timeAxis: {
+            axisLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string;
+                };
+            };
+            axisTick: {
+                show: boolean;
+            };
+            axisLabel: {
+                show: boolean;
+                color: string;
+            };
+            nameLocation: string;
+            nameTextStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            splitLine: {
+                show: boolean;
+            };
+        };
+        legend: {
+            top: number;
+            left: string;
+            right: number;
+            icon: string;
+            itemGap: number;
+            itemWidth: number;
+            itemHeight: number;
+            textStyle: {
+                color: string;
+                fontSize: number;
+            };
+        };
+        grid: {
+            top: number;
+            left: number;
+            right: number;
+            bottom: number;
+            outerBoundsMode: string;
+            outerBoundsContain: string;
+        };
+        dataZoom: {
+            backgroundColor: string;
+            borderColor: string;
+            borderRadius: number;
+            dataBackground: {
+                lineStyle: {
+                    color: string;
+                    width: number;
+                };
+                areaStyle: {
+                    color: string;
+                };
+            };
+            selectedDataBackground: {
+                lineStyle: {
+                    color: string;
+                    width: number;
+                };
+                areaStyle: {
+                    color: string;
+                };
+            };
+            fillerColor: string;
+            handleStyle: {
+                color: string;
+                borderColor: string;
+            };
+            moveHandleStyle: {
+                color: string;
+            };
+            brushStyle: {
+                color: string;
+            };
+            emphasis: {
+                handleStyle: {
+                    color: string;
+                    borderColor: string;
+                };
+            };
+            handleSize: string;
+            textStyle: {
+                color: string;
+            };
+        };
+        markPoint: {
+            label: {
+                color: string;
+            };
+            emphasis: {
+                label: {
+                    color: string;
+                };
+            };
+        };
+    };
+};

package/dist/components/echarts-renderer/mavrik-theme.js

@@ -0,0 +1,11 @@
+import { isEChartsThemeOption as r } from "./echarts-theme-option.js";
+import o from "./mavrik-theme.json.js";
+if (!r(o))
+  throw new Error("Invalid mavrik theme configuration");
+const t = {
+  name: "mavrik",
+  config: o
+};
+export {
+  t as MAVRIK_THEME
+};

package/dist/components/echarts-renderer/mavrik-theme.json.d.ts

@@ -0,0 +1,269 @@
+declare const _default: {
+  "color": [
+    {
+      "type": "linear",
+      "x": 0,
+      "y": 0,
+      "x2": 0,
+      "y2": 1,
+      "colorStops": [
+        {
+          "offset": 0,
+          "color": "#C14E64"
+        },
+        {
+          "offset": 1,
+          "color": "#DF687D"
+        }
+      ]
+    },
+    {
+      "type": "linear",
+      "x": 0,
+      "y": 0,
+      "x2": 0,
+      "y2": 1,
+      "colorStops": [
+        {
+          "offset": 0,
+          "color": "#FFFFFF"
+        },
+        {
+          "offset": 1,
+          "color": "#FFFFFF"
+        }
+      ]
+    },
+    {
+      "type": "linear",
+      "x": 0,
+      "y": 0,
+      "x2": 0,
+      "y2": 1,
+      "colorStops": [
+        {
+          "offset": 0,
+          "color": "#1E6FDA"
+        },
+        {
+          "offset": 1,
+          "color": "#3F8CFF"
+        }
+      ]
+    }
+  ],
+  "backgroundColor": "#242731",
+  "textStyle": {
+    "fontFamily": "Poppins, sans-serif",
+    "fontWeight": 500
+  },
+  "title": {
+    "top": 32,
+    "left": 32,
+    "textStyle": {
+      "color": "#FFFFFF",
+      "fontSize": 16,
+      "fontWeight": 600
+    },
+    "subtextStyle": {
+      "color": "#A7A9AD"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "borderWidth": 1
+    },
+    "lineStyle": {
+      "width": 2
+    },
+    "areaStyle": {
+      "opacity": 0.15
+    },
+    "showSymbol": false,
+    "symbolSize": 5,
+    "symbol": "circle",
+    "smooth": false,
+    "sampling": "lttb"
+  },
+  "bar": {
+    "barGap": "25%",
+    "barCategoryGap": "25%"
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#3A3D46",
+        "type": "dashed"
+      }
+    },
+    "axisTick": {
+      "show": false
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#A7A9AD"
+    },
+    "nameLocation": "middle",
+    "nameTextStyle": {
+      "color": "#A7A9AD",
+      "fontSize": 11,
+      "fontWeight": 400
+    },
+    "splitLine": {
+      "show": false
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": false
+    },
+    "axisTick": {
+      "show": false
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#A7A9AD"
+    },
+    "nameLocation": "middle",
+    "nameTextStyle": {
+      "color": "#A7A9AD",
+      "fontSize": 11,
+      "fontWeight": 400
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#3A3D46"],
+        "type": "dashed"
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": false
+    },
+    "axisTick": {
+      "show": false
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#A7A9AD"
+    },
+    "nameLocation": "middle",
+    "nameTextStyle": {
+      "color": "#A7A9AD",
+      "fontSize": 11,
+      "fontWeight": 400
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#3A3D46"],
+        "type": "dashed"
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#3A3D46"
+      }
+    },
+    "axisTick": {
+      "show": false
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#A7A9AD"
+    },
+    "nameLocation": "middle",
+    "nameTextStyle": {
+      "color": "#A7A9AD",
+      "fontSize": 11,
+      "fontWeight": 400
+    },
+    "splitLine": {
+      "show": false
+    }
+  },
+  "legend": {
+    "top": 82,
+    "left": "auto",
+    "right": 32,
+    "icon": "circle",
+    "itemGap": 22,
+    "itemWidth": 12,
+    "itemHeight": 12,
+    "textStyle": {
+      "color": "#A7A9AD",
+      "fontSize": 11
+    }
+  },
+  "grid": {
+    "top": 132,
+    "left": 32,
+    "right": 32,
+    "bottom": 70,
+    "outerBoundsMode": "same",
+    "outerBoundsContain": "axisLabel"
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(36, 39, 49, 0)",
+    "borderColor": "#3A3D46",
+    "borderRadius": 4,
+    "dataBackground": {
+      "lineStyle": {
+        "color": "#606060",
+        "width": 1
+      },
+      "areaStyle": {
+        "color": "rgba(96, 96, 96, 0.3)"
+      }
+    },
+    "selectedDataBackground": {
+      "lineStyle": {
+        "color": "#b36674",
+        "width": 1
+      },
+      "areaStyle": {
+        "color": "rgba(164, 91, 105, 0.5)"
+      }
+    },
+    "fillerColor": "rgba(82, 45, 52, 0.35)",
+    "handleStyle": {
+      "color": "#C14E64",
+      "borderColor": "#C14E64"
+    },
+    "moveHandleStyle": {
+      "color": "#b36674"
+    },
+    "brushStyle": {
+      "color": "rgba(95, 58, 65, 0.2)"
+    },
+    "emphasis": {
+      "handleStyle": {
+        "color": "rgb(209, 123, 140)",
+        "borderColor": "rgb(209, 123, 140)"
+      }
+    },
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#A7A9AD"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "color": "#A7A9AD"
+    },
+    "emphasis": {
+      "label": {
+        "color": "#FFFFFF"
+      }
+    }
+  }
+}
+;
+
+export default _default;

package/dist/components/echarts-renderer/mavrik-theme.json.js

@@ -0,0 +1,33 @@
+const o = [{ type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#C14E64" }, { offset: 1, color: "#DF687D" }] }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#FFFFFF" }, { offset: 1, color: "#FFFFFF" }] }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#1E6FDA" }, { offset: 1, color: "#3F8CFF" }] }], e = "#242731", t = { fontFamily: "Poppins, sans-serif", fontWeight: 500 }, l = { top: 32, left: 32, textStyle: { color: "#FFFFFF", fontSize: 16, fontWeight: 600 }, subtextStyle: { color: "#A7A9AD" } }, i = { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, areaStyle: { opacity: 0.15 }, showSymbol: !1, symbolSize: 5, symbol: "circle", smooth: !1, sampling: "lttb" }, a = { barGap: "25%", barCategoryGap: "25%" }, s = { axisLine: { show: !0, lineStyle: { color: "#3A3D46", type: "dashed" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD" }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, r = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD" }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, n = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD" }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, c = { axisLine: { show: !0, lineStyle: { color: "#3A3D46" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD" }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, A = { top: 82, left: "auto", right: 32, icon: "circle", itemGap: 22, itemWidth: 12, itemHeight: 12, textStyle: { color: "#A7A9AD", fontSize: 11 } }, y = { top: 132, left: 32, right: 32, bottom: 70, outerBoundsMode: "same", outerBoundsContain: "axisLabel" }, d = { backgroundColor: "rgba(36, 39, 49, 0)", borderColor: "#3A3D46", borderRadius: 4, dataBackground: { lineStyle: { color: "#606060", width: 1 }, areaStyle: { color: "rgba(96, 96, 96, 0.3)" } }, selectedDataBackground: { lineStyle: { color: "#b36674", width: 1 }, areaStyle: { color: "rgba(164, 91, 105, 0.5)" } }, fillerColor: "rgba(82, 45, 52, 0.35)", handleStyle: { color: "#C14E64", borderColor: "#C14E64" }, moveHandleStyle: { color: "#b36674" }, brushStyle: { color: "rgba(95, 58, 65, 0.2)" }, emphasis: { handleStyle: { color: "rgb(209, 123, 140)", borderColor: "rgb(209, 123, 140)" } }, handleSize: "100%", textStyle: { color: "#A7A9AD" } }, f = { label: { color: "#A7A9AD" }, emphasis: { label: { color: "#FFFFFF" } } }, h = {
+  color: o,
+  backgroundColor: e,
+  textStyle: t,
+  title: l,
+  line: i,
+  bar: a,
+  categoryAxis: s,
+  valueAxis: r,
+  logAxis: n,
+  timeAxis: c,
+  legend: A,
+  grid: y,
+  dataZoom: d,
+  markPoint: f
+};
+export {
+  e as backgroundColor,
+  a as bar,
+  s as categoryAxis,
+  o as color,
+  d as dataZoom,
+  h as default,
+  y as grid,
+  A as legend,
+  i as line,
+  n as logAxis,
+  f as markPoint,
+  t as textStyle,
+  c as timeAxis,
+  l as title,
+  r as valueAxis
+};

package/dist/components/echarts-renderer/use-chart-instance.d.ts

@@ -0,0 +1,19 @@
+import { EChartsOption } from 'echarts';
+import { EChartsThemeOption } from './echarts-theme-option';
+export type UseChartInstanceProps = {
+    options: EChartsOption;
+    theme?: {
+        name: string;
+        config: EChartsThemeOption;
+    };
+};
+export type UseChartInstanceReturn = {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    isReady: boolean;
+    downloadChart: () => Promise<void>;
+};
+/**
+ * React hook for managing ECharts instance lifecycle and download functionality.
+ * Handles initialization, updates, cleanup, and resize.
+ */
+export declare function useChartInstance({ options, theme }: UseChartInstanceProps): UseChartInstanceReturn;

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

@@ -0,0 +1,46 @@
+"use client";
+import { init as f, registerTheme as h } from "echarts";
+import { useRef as i, useState as w, useEffect as d, useCallback as g } from "react";
+const u = /* @__PURE__ */ new Set();
+function R(e, n) {
+  u.has(e) || (h(e, n), u.add(e));
+}
+function b({ options: e, theme: n }) {
+  const o = i(null), c = i(null), [s, a] = w(!1);
+  d(() => {
+    if (!o.current) return;
+    n && R(n.name, n.config);
+    const r = f(o.current, n?.name, {
+      renderer: "svg"
+    });
+    c.current = r, r.setOption(e), a(!0);
+    const t = new ResizeObserver(() => {
+      r.resize();
+    });
+    return t.observe(o.current), () => {
+      t.disconnect(), r.dispose(), c.current = null, a(!1);
+    };
+  }, [e, n]), d(() => {
+    !c.current || !s || c.current.setOption(e);
+  }, [e, s]);
+  const l = g(async () => {
+    if (!c.current)
+      throw new Error("Chart is not initialized");
+    try {
+      const r = c.current.getDataURL({
+        type: "svg"
+      }), t = document.createElement("a");
+      t.download = `chart-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.svg`, t.href = r, document.body.appendChild(t), t.click(), document.body.removeChild(t);
+    } catch (r) {
+      throw console.error("Failed to download chart:", r), new Error("Failed to download chart");
+    }
+  }, []);
+  return {
+    containerRef: o,
+    isReady: s,
+    downloadChart: l
+  };
+}
+export {
+  b as useChartInstance
+};