@validationcloud/fractal-ui 1.52.0 → 1.54.0

package/dist/components/echarts-renderer/calculate-title-layout.d.ts

@@ -0,0 +1,8 @@
+import { EChartsOption } from 'echarts';
+import { EChartsThemeOption } from './echarts-theme-option';
+/**
+ * Calculates adjusted ECharts options with proper title layout.
+ * Sets title width based on grid/title margins and truncates with ellipsis if too long.
+ * Merges options with theme settings (options take precedence).
+ */
+export declare function calculateTitleLayout(options: EChartsOption, containerWidth: number, theme?: EChartsThemeOption): EChartsOption;

package/dist/components/echarts-renderer/calculate-title-layout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/echarts-renderer/detect-horizontal-bars.d.ts

@@ -0,0 +1,13 @@
+import { EChartsOption } from 'echarts';
+/**
+ * Detects if a chart configuration represents a horizontal bar chart.
+ *
+ * A horizontal bar chart has bars extending horizontally (left to right),
+ * which means the category axis is on the Y-axis instead of the X-axis.
+ *
+ * Detection logic:
+ * 1. Chart must have at least one bar series
+ * 2. The Y-axis must be of type 'category' (or have data which implies category)
+ * 3. The X-axis must NOT be of type 'category'
+ */
+export declare function hasHorizontalBars(option: EChartsOption): boolean;

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

@@ -0,0 +1,19 @@
+import { EChartsOption } from 'echarts';
+import { EChartsRendererRef } from './echarts-renderer';
+export type MavrikChartProps = {
+    readonly option: EChartsOption;
+    readonly className?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+/**
+ * ECharts renderer with Mavrik theme applied.
+ *
+ * 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 EChartsRenderer directly.
+ */
+export declare const MavrikChart: import('react').ForwardRefExoticComponent<{
+    readonly option: EChartsOption;
+    readonly className?: string;
+} & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & import('react').RefAttributes<EChartsRendererRef>>;

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

@@ -0,0 +1,277 @@
+declare const _default: {
+  "color": [
+    {
+      "type": "linear",
+      "x": 0,
+      "y": 0,
+      "x2": 1,
+      "y2": 0,
+      "colorStops": [
+        {
+          "offset": 0,
+          "color": "#C14E64"
+        },
+        {
+          "offset": 1,
+          "color": "#DF687D"
+        }
+      ]
+    },
+    {
+      "type": "linear",
+      "x": 0,
+      "y": 0,
+      "x2": 1,
+      "y2": 0,
+      "colorStops": [
+        {
+          "offset": 0,
+          "color": "#FFFFFF"
+        },
+        {
+          "offset": 1,
+          "color": "#FFFFFF"
+        }
+      ]
+    },
+    {
+      "type": "linear",
+      "x": 0,
+      "y": 0,
+      "x2": 1,
+      "y2": 0,
+      "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",
+      "hideOverlap": true
+    },
+    "nameLocation": "middle",
+    "nameTextStyle": {
+      "color": "#A7A9AD",
+      "fontSize": 11,
+      "fontWeight": 400
+    },
+    "splitLine": {
+      "show": false
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": false
+    },
+    "axisTick": {
+      "show": false
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#A7A9AD",
+      "hideOverlap": true
+    },
+    "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",
+      "hideOverlap": true
+    },
+    "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",
+      "hideOverlap": true
+    },
+    "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": 32,
+    "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.d.ts

@@ -1,3 +1,5 @@
+import { EChartsOption } from 'echarts';
+/** Default Mavrik theme with vertical gradients (for vertical bars and other charts) */
 export declare const MAVRIK_THEME: {
     readonly name: "mavrik";
     readonly config: {
@@ -229,3 +231,243 @@ export declare const MAVRIK_THEME: {
         };
     };
 };
+/** Mavrik theme variant with horizontal gradients (for horizontal bar charts) */
+export declare const MAVRIK_THEME_HORIZONTAL: {
+    readonly name: "mavrik-horizontal";
+    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;
+                hideOverlap: boolean;
+            };
+            nameLocation: string;
+            nameTextStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            splitLine: {
+                show: boolean;
+            };
+        };
+        valueAxis: {
+            axisLine: {
+                show: boolean;
+            };
+            axisTick: {
+                show: boolean;
+            };
+            axisLabel: {
+                show: boolean;
+                color: string;
+                hideOverlap: boolean;
+            };
+            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;
+                hideOverlap: boolean;
+            };
+            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;
+                hideOverlap: boolean;
+            };
+            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;
+                };
+            };
+        };
+    };
+};
+export type MavrikTheme = typeof MAVRIK_THEME | typeof MAVRIK_THEME_HORIZONTAL;
+/**
+ * Selects the appropriate Mavrik theme variant based on chart options.
+ *
+ * - Returns horizontal gradient theme for horizontal bar charts
+ * - Returns vertical gradient theme for all other chart types
+ */
+export declare function selectMavrikTheme(option: EChartsOption): MavrikTheme;

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

@@ -136,7 +136,9 @@ declare const _default: {
     "splitLine": {
       "show": true,
       "lineStyle": {
-        "color": ["#3A3D46"],
+        "color": [
+          "#3A3D46"
+        ],
         "type": "dashed"
       }
     }
@@ -162,7 +164,9 @@ declare const _default: {
     "splitLine": {
       "show": true,
       "lineStyle": {
-        "color": ["#3A3D46"],
+        "color": [
+          "#3A3D46"
+        ],
         "type": "dashed"
       }
     }

package/dist/components/echarts-renderer/sanitize-chart-options.d.ts

@@ -0,0 +1,6 @@
+import { EChartsOption } from 'echarts';
+/**
+ * Removes problematic interactive components from chart options.
+ * These components have known issues with ECharts' cleanup lifecycle.
+ */
+export declare function sanitizeChartOptions(option: EChartsOption): EChartsOption;

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

@@ -9,7 +9,6 @@ export type UseChartInstanceProps = {
 };
 export type UseChartInstanceReturn = {
     containerRef: React.RefObject<HTMLDivElement | null>;
-    isReady: boolean;
     downloadChart: () => Promise<void>;
 };
 /**

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

@@ -0,0 +1,12 @@
+import { GraphicComponentOption } from 'echarts';
+/**
+ * Watermark graphic element for ECharts charts.
+ * This is applied via setOption(), not via theme (themes don't properly merge graphic components).
+ */
+export declare const WATERMARK_GRAPHIC: GraphicComponentOption;
+/**
+ * Merges watermark graphic into existing ECharts options.
+ */
+export declare function addWatermarkToOptions<T extends {
+    graphic?: GraphicComponentOption | GraphicComponentOption[];
+}>(options: T): T;

package/dist/components/select/select.d.ts

@@ -0,0 +1,23 @@
+/**
+ * SelectItem is a wrapper around Radix's Select.Item component, meant to be used with the Select component.
+ * It applies project-specific styling to the Radix's component.
+ *
+ * When `textValue` is provided:
+ * - The trigger will display `textValue` when this item is selected
+ * - The `children` will be displayed as custom content in the dropdown
+ */
+export declare const SelectItem: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-select').SelectItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement | null>>;
+/**
+ * Select is a wrapper around Radix's Select component.
+ * It applies project-specific styling to the Radix's component.
+ * The component is meant to be used with SelectItem provided as children.
+ *
+ * @see {@link https://radix-ui.com/primitives/docs/components/select}
+ */
+export declare const Select: import('react').ForwardRefExoticComponent<{
+    variant?: "primary" | "secondary" | "ghost";
+    size?: "small" | "large";
+    className?: string;
+    contentClassName?: string;
+    placeholder?: string;
+} & import('@radix-ui/react-select').SelectProps & import('react').RefAttributes<HTMLButtonElement | null>>;

package/dist/index.d.ts

@@ -6,7 +6,8 @@ export { EChartsRenderer, type EChartsRendererProps, type EChartsRendererRef, ty
 export { EChartsThemeOption, isEChartsThemeOption } from './components/echarts-renderer/echarts-theme-option';
 export { EChartsChartOption, isEChartsChartOption } from './components/echarts-renderer/echarts-chart-option';
 export { useChartInstance, type UseChartInstanceProps, type UseChartInstanceReturn, } from './components/echarts-renderer/use-chart-instance';
-export { MAVRIK_THEME } from './components/echarts-renderer/mavrik-theme';
+export { MavrikChart, type MavrikChartProps } from './components/echarts-renderer/mavrik-chart';
+export { MAVRIK_THEME, MAVRIK_THEME_HORIZONTAL } from './components/echarts-renderer/mavrik-theme';
 export { ClientModal } from './components/client-modal/client-modal';
 export { CopyButton } from './components/copy-button/copy-button';
 export { DecoratedIcon } from './components/decorated-icon/decorated-icon';
@@ -20,6 +21,7 @@ export { MountSvgSprite } from './components/mount-svg-sprite/mount-svg-sprite';
 export { NotFoundComponent } from './components/not-found-component/not-found-component';
 export { PagePadding } from './components/page-padding/page-padding';
 export { ProtocolLogo } from './components/protocol-logo/protocol-logo';
+export { Select, SelectItem } from './components/select/select';
 export { Skeleton } from './components/skeleton/skeleton';
 export { Switch } from './components/switch/switch';
 export { TextInput } from './components/text-input/text-input';