deepsea-components 5.17.5 → 5.17.7

package/dist/components/Echart.cjs

@@ -1,6 +1,15 @@
 "use client"
 "use strict";
 var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -25,53 +34,155 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    Candlestick: ()=>Candlestick,
     Pie: ()=>Pie,
+    Gauge: ()=>Gauge,
     Line: ()=>Line,
-    Bar: ()=>Bar
+    Parallel: ()=>Parallel,
+    Bar: ()=>Bar,
+    Scatter: ()=>Scatter,
+    Custom: ()=>Custom,
+    EffectScatter: ()=>EffectScatter,
+    Radar: ()=>Radar,
+    Sunburst: ()=>Sunburst,
+    ThemeRiver: ()=>ThemeRiver,
+    Chord: ()=>Chord,
+    Heatmap: ()=>Heatmap,
+    Echart: ()=>Echart,
+    Map: ()=>Map,
+    Tree: ()=>Tree,
+    Treemap: ()=>Treemap,
+    PictorialBar: ()=>PictorialBar,
+    Sankey: ()=>Sankey,
+    Lines: ()=>Lines,
+    Funnel: ()=>Funnel,
+    Graph: ()=>Graph,
+    Boxplot: ()=>Boxplot
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const external_echarts_namespaceObject = require("echarts");
-const Echart = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
-    const { width, height, option, chart, ...rest } = props;
+const external_stable_hash_namespaceObject = require("stable-hash");
+var external_stable_hash_default = /*#__PURE__*/ __webpack_require__.n(external_stable_hash_namespaceObject);
+function Echart({ ref, width, height, locale, init: initOption, option, chart, ...rest }) {
     const container = (0, external_react_namespaceObject.useRef)(null);
     const chartRef = (0, external_react_namespaceObject.useRef)(null);
     (0, external_react_namespaceObject.useLayoutEffect)(()=>{
         const ele = container.current;
         chartRef.current = (0, external_echarts_namespaceObject.init)(ele, option, {
+            ...initOption,
             width,
-            height
+            height,
+            locale
         });
         return ()=>{
             var _chartRef_current;
             return null == (_chartRef_current = chartRef.current) ? void 0 : _chartRef_current.dispose();
         };
     }, []);
-    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>container.current, []);
-    (0, external_react_namespaceObject.useImperativeHandle)(chart, ()=>chartRef.current, []);
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>container.current);
+    (0, external_react_namespaceObject.useImperativeHandle)(chart, ()=>chartRef.current);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        var _chartRef_current;
+        return null == (_chartRef_current = chartRef.current) ? void 0 : _chartRef_current.setOption(option);
+    }, [
+        external_stable_hash_default()(option)
+    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        var _chartRef_current, _chartRef_current1;
-        null == (_chartRef_current = chartRef.current) || _chartRef_current.setOption(option);
-        null == (_chartRef_current1 = chartRef.current) || _chartRef_current1.resize({
+        var _chartRef_current;
+        return null == (_chartRef_current = chartRef.current) ? void 0 : _chartRef_current.resize({
             width,
             height
         });
-    });
+    }, [
+        width,
+        height
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        var _chartRef_current;
+        return null == (_chartRef_current = chartRef.current) ? void 0 : _chartRef_current.setOption({
+            locale
+        });
+    }, [
+        locale
+    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: container,
         ...rest
     });
-});
-const Pie = Echart;
+}
 const Bar = Echart;
+const Boxplot = Echart;
+const Candlestick = Echart;
+const Chord = Echart;
+const Custom = Echart;
+const EffectScatter = Echart;
+const Funnel = Echart;
+const Gauge = Echart;
+const Graph = Echart;
+const Heatmap = Echart;
 const Line = Echart;
+const Lines = Echart;
+const Map = Echart;
+const Parallel = Echart;
+const PictorialBar = Echart;
+const Pie = Echart;
+const Radar = Echart;
+const Sankey = Echart;
+const Scatter = Echart;
+const Sunburst = Echart;
+const ThemeRiver = Echart;
+const Tree = Echart;
+const Treemap = Echart;
 exports.Bar = __webpack_exports__.Bar;
+exports.Boxplot = __webpack_exports__.Boxplot;
+exports.Candlestick = __webpack_exports__.Candlestick;
+exports.Chord = __webpack_exports__.Chord;
+exports.Custom = __webpack_exports__.Custom;
+exports.Echart = __webpack_exports__.Echart;
+exports.EffectScatter = __webpack_exports__.EffectScatter;
+exports.Funnel = __webpack_exports__.Funnel;
+exports.Gauge = __webpack_exports__.Gauge;
+exports.Graph = __webpack_exports__.Graph;
+exports.Heatmap = __webpack_exports__.Heatmap;
 exports.Line = __webpack_exports__.Line;
+exports.Lines = __webpack_exports__.Lines;
+exports.Map = __webpack_exports__.Map;
+exports.Parallel = __webpack_exports__.Parallel;
+exports.PictorialBar = __webpack_exports__.PictorialBar;
 exports.Pie = __webpack_exports__.Pie;
+exports.Radar = __webpack_exports__.Radar;
+exports.Sankey = __webpack_exports__.Sankey;
+exports.Scatter = __webpack_exports__.Scatter;
+exports.Sunburst = __webpack_exports__.Sunburst;
+exports.ThemeRiver = __webpack_exports__.ThemeRiver;
+exports.Tree = __webpack_exports__.Tree;
+exports.Treemap = __webpack_exports__.Treemap;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "Bar",
+    "Boxplot",
+    "Candlestick",
+    "Chord",
+    "Custom",
+    "Echart",
+    "EffectScatter",
+    "Funnel",
+    "Gauge",
+    "Graph",
+    "Heatmap",
     "Line",
-    "Pie"
+    "Lines",
+    "Map",
+    "Parallel",
+    "PictorialBar",
+    "Pie",
+    "Radar",
+    "Sankey",
+    "Scatter",
+    "Sunburst",
+    "ThemeRiver",
+    "Tree",
+    "Treemap"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/components/Echart.d.ts

@@ -1,15 +1,60 @@
-import { ComponentPropsWithoutRef, ForwardRefExoticComponent, ForwardedRef, RefAttributes } from "react";
-import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts";
-export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
-export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
-export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
-export interface EchartProps<T extends any = any> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
-    width: number;
-    height: number;
+import { ComponentProps, FC, ReactNode, Ref } from "react";
+import { AngleAxisComponentOption, AriaComponentOption, AxisPointerComponentOption, BarSeriesOption, BoxplotSeriesOption, BrushComponentOption, CalendarComponentOption, CandlestickSeriesOption, ChordSeriesOption, ComposeOption, ContinousVisualMapComponentOption, CustomSeriesOption, DataZoomComponentOption, DatasetComponentOption, ECharts, EChartsInitOpts, EffectScatterSeriesOption, FunnelSeriesOption, GaugeSeriesOption, GeoComponentOption, GraphSeriesOption, GraphicComponentOption, GridComponentOption, HeatmapSeriesOption, InsideDataZoomComponentOption, LegendComponentOption, LineSeriesOption, LinesSeriesOption, MapSeriesOption, MarkAreaComponentOption, MarkLineComponentOption, MarkPointComponentOption, MatrixComponentOption, ParallelSeriesOption, PictorialBarSeriesOption, PieSeriesOption, PiecewiseVisualMapComponentOption, PlainLegendComponentOption, PolarComponentOption, RadarComponentOption, RadarSeriesOption, RadiusAxisComponentOption, SankeySeriesOption, ScatterSeriesOption, ScrollableLegendComponentOption, SeriesOption, SingleAxisComponentOption, SliderDataZoomComponentOption, SunburstSeriesOption, ThemeRiverSeriesOption, ThumbnailComponentOption, TimelineComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption, TreeSeriesOption, TreemapSeriesOption, VisualMapComponentOption, XAXisComponentOption, YAXisComponentOption } from "echarts";
+import { ECBasicOption } from "echarts/types/src/util/types.js";
+export type ChartOption<T extends SeriesOption = never> = ComposeOption<T | DatasetComponentOption | GridComponentOption | LegendComponentOption | TitleComponentOption | TooltipComponentOption | AxisPointerComponentOption | GeoComponentOption | MarkLineComponentOption | MarkPointComponentOption | MarkAreaComponentOption | DataZoomComponentOption | AriaComponentOption | BrushComponentOption | PolarComponentOption | RadarComponentOption | XAXisComponentOption | YAXisComponentOption | MatrixComponentOption | GraphicComponentOption | ToolboxComponentOption | CalendarComponentOption | TimelineComponentOption | AngleAxisComponentOption | RadiusAxisComponentOption | SingleAxisComponentOption | VisualMapComponentOption | ThumbnailComponentOption | PlainLegendComponentOption | InsideDataZoomComponentOption | SliderDataZoomComponentOption | PiecewiseVisualMapComponentOption | ContinousVisualMapComponentOption | ScrollableLegendComponentOption>;
+export type BarOption = ChartOption<BarSeriesOption>;
+export type BoxplotOption = ChartOption<BoxplotSeriesOption>;
+export type CandlestickOption = ChartOption<CandlestickSeriesOption>;
+export type ChordOption = ChartOption<ChordSeriesOption>;
+export type CustomOption = ChartOption<CustomSeriesOption>;
+export type EffectScatterOption = ChartOption<EffectScatterSeriesOption>;
+export type FunnelOption = ChartOption<FunnelSeriesOption>;
+export type GaugeOption = ChartOption<GaugeSeriesOption>;
+export type GraphOption = ChartOption<GraphSeriesOption>;
+export type HeatmapOption = ChartOption<HeatmapSeriesOption>;
+export type LineOption = ChartOption<LineSeriesOption>;
+export type LinesOption = ChartOption<LinesSeriesOption>;
+export type MapOption = ChartOption<MapSeriesOption>;
+export type ParallelOption = ChartOption<ParallelSeriesOption>;
+export type PictorialBarOption = ChartOption<PictorialBarSeriesOption>;
+export type PieOption = ChartOption<PieSeriesOption>;
+export type RadarOption = ChartOption<RadarSeriesOption>;
+export type SankeyOption = ChartOption<SankeySeriesOption>;
+export type ScatterOption = ChartOption<ScatterSeriesOption>;
+export type SunburstOption = ChartOption<SunburstSeriesOption>;
+export type ThemeRiverOption = ChartOption<ThemeRiverSeriesOption>;
+export type TreeOption = ChartOption<TreeSeriesOption>;
+export type TreemapOption = ChartOption<TreemapSeriesOption>;
+export type ModifiableEChartsInitOpts = Pick<EChartsInitOpts, "width" | "height" | "locale">;
+export interface EChartInitOption extends Omit<EChartsInitOpts, keyof ModifiableEChartsInitOpts> {
+}
+export interface EchartProps<T extends ECBasicOption = ECBasicOption> extends Omit<ComponentProps<"div">, "children">, ModifiableEChartsInitOpts {
+    init?: EChartInitOption;
     option: T;
-    chart?: ForwardedRef<ECharts>;
+    chart?: Ref<ECharts>;
 }
-export type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<Omit<EchartProps<T>, "ref"> & RefAttributes<HTMLDivElement>>;
-export declare const Pie: EchartComponent<PieOption>;
+export type EchartComponent<T extends ECBasicOption = ECBasicOption> = FC<EchartProps<T>>;
+export declare function Echart<T extends ECBasicOption = ECBasicOption>({ ref, width, height, locale, init: initOption, option, chart, ...rest }: EchartProps<T>): ReactNode;
 export declare const Bar: EchartComponent<BarOption>;
+export declare const Boxplot: EchartComponent<BoxplotOption>;
+export declare const Candlestick: EchartComponent<CandlestickOption>;
+export declare const Chord: EchartComponent<ChordOption>;
+export declare const Custom: EchartComponent<CustomOption>;
+export declare const EffectScatter: EchartComponent<EffectScatterOption>;
+export declare const Funnel: EchartComponent<FunnelOption>;
+export declare const Gauge: EchartComponent<GaugeOption>;
+export declare const Graph: EchartComponent<GraphOption>;
+export declare const Heatmap: EchartComponent<HeatmapOption>;
 export declare const Line: EchartComponent<LineOption>;
+export declare const Lines: EchartComponent<LinesOption>;
+export declare const Map: EchartComponent<MapOption>;
+export declare const Parallel: EchartComponent<ParallelOption>;
+export declare const PictorialBar: EchartComponent<PictorialBarOption>;
+export declare const Pie: EchartComponent<PieOption>;
+export declare const Radar: EchartComponent<RadarOption>;
+export declare const Sankey: EchartComponent<SankeyOption>;
+export declare const Scatter: EchartComponent<ScatterOption>;
+export declare const Sunburst: EchartComponent<SunburstOption>;
+export declare const ThemeRiver: EchartComponent<ThemeRiverOption>;
+export declare const Tree: EchartComponent<TreeOption>;
+export declare const Treemap: EchartComponent<TreemapOption>;

package/dist/components/Echart.js

@@ -1,38 +1,76 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import { useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { init } from "echarts";
-const Echart = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { width, height, option, chart, ...rest } = props;
+import stable_hash from "stable-hash";
+function Echart({ ref, width, height, locale, init: initOption, option, chart, ...rest }) {
     const container = useRef(null);
     const chartRef = useRef(null);
     useLayoutEffect(()=>{
         const ele = container.current;
         chartRef.current = init(ele, option, {
+            ...initOption,
             width,
-            height
+            height,
+            locale
         });
         return ()=>{
             var _chartRef_current;
             return null == (_chartRef_current = chartRef.current) ? void 0 : _chartRef_current.dispose();
         };
     }, []);
-    useImperativeHandle(ref, ()=>container.current, []);
-    useImperativeHandle(chart, ()=>chartRef.current, []);
+    useImperativeHandle(ref, ()=>container.current);
+    useImperativeHandle(chart, ()=>chartRef.current);
+    useEffect(()=>{
+        var _chartRef_current;
+        return null == (_chartRef_current = chartRef.current) ? void 0 : _chartRef_current.setOption(option);
+    }, [
+        stable_hash(option)
+    ]);
     useEffect(()=>{
-        var _chartRef_current, _chartRef_current1;
-        null == (_chartRef_current = chartRef.current) || _chartRef_current.setOption(option);
-        null == (_chartRef_current1 = chartRef.current) || _chartRef_current1.resize({
+        var _chartRef_current;
+        return null == (_chartRef_current = chartRef.current) ? void 0 : _chartRef_current.resize({
             width,
             height
         });
-    });
+    }, [
+        width,
+        height
+    ]);
+    useEffect(()=>{
+        var _chartRef_current;
+        return null == (_chartRef_current = chartRef.current) ? void 0 : _chartRef_current.setOption({
+            locale
+        });
+    }, [
+        locale
+    ]);
     return /*#__PURE__*/ jsx("div", {
         ref: container,
         ...rest
     });
-});
-const Pie = Echart;
+}
 const Bar = Echart;
+const Boxplot = Echart;
+const Candlestick = Echart;
+const Chord = Echart;
+const Custom = Echart;
+const EffectScatter = Echart;
+const Funnel = Echart;
+const Gauge = Echart;
+const Graph = Echart;
+const Heatmap = Echart;
 const Line = Echart;
-export { Bar, Line, Pie };
+const Lines = Echart;
+const Map = Echart;
+const Parallel = Echart;
+const PictorialBar = Echart;
+const Pie = Echart;
+const Radar = Echart;
+const Sankey = Echart;
+const Scatter = Echart;
+const Sunburst = Echart;
+const ThemeRiver = Echart;
+const Tree = Echart;
+const Treemap = Echart;
+export { Bar, Boxplot, Candlestick, Chord, Custom, Echart, EffectScatter, Funnel, Gauge, Graph, Heatmap, Line, Lines, Map, Parallel, PictorialBar, Pie, Radar, Sankey, Scatter, Sunburst, ThemeRiver, Tree, Treemap };

package/dist/components/LoopSwiper.cjs

@@ -68,11 +68,6 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: wrapper,
         className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                    display: flex;
-                    flex-direction: ${flexDirection};
-                    gap: ${gap}px;
-                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
-
                     @keyframes deepsea-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
@@ -108,6 +103,11 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateY(calc(100% + ${gap}px));
                         }
                     }
+                `, (0, css_namespaceObject.css)`
+                    display: flex;
+                    flex-direction: ${flexDirection};
+                    gap: ${gap}px;
+                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
 
                     ${pauseOnHover ? `&:hover > * {
                         animation-play-state: paused;
@@ -119,6 +119,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                 ref: container,
                 className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
                         display: flex;
+                        flex: none;
                         flex-direction: ${flexDirection};
                         gap: ${gap}px;
                         animation-name: ${animationName};
@@ -131,6 +132,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
                         display: ${swiper ? "flex" : "none"};
+                        flex: none;
                         flex-direction: ${flexDirection};
                         gap: ${gap}px;
                         animation-name: ${animationName};

package/dist/components/LoopSwiper.js

@@ -40,11 +40,6 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
     return /*#__PURE__*/ jsxs("div", {
         ref: wrapper,
         className: clsx(css`
-                    display: flex;
-                    flex-direction: ${flexDirection};
-                    gap: ${gap}px;
-                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
-
                     @keyframes deepsea-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
@@ -80,6 +75,11 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateY(calc(100% + ${gap}px));
                         }
                     }
+                `, css`
+                    display: flex;
+                    flex-direction: ${flexDirection};
+                    gap: ${gap}px;
+                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
 
                     ${pauseOnHover ? `&:hover > * {
                         animation-play-state: paused;
@@ -91,6 +91,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                 ref: container,
                 className: clsx(css`
                         display: flex;
+                        flex: none;
                         flex-direction: ${flexDirection};
                         gap: ${gap}px;
                         animation-name: ${animationName};
@@ -103,6 +104,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
             /*#__PURE__*/ jsx("div", {
                 className: clsx(css`
                         display: ${swiper ? "flex" : "none"};
+                        flex: none;
                         flex-direction: ${flexDirection};
                         gap: ${gap}px;
                         animation-name: ${animationName};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.17.5",
+  "version": "5.17.7",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -40,6 +40,7 @@
     "echarts": "^6.0.0",
     "hls.js": "^1.6.13",
     "smooth-scrollbar": "^8.8.4",
+    "stable-hash": "^0.0.6",
     "deepsea-tools": "5.42.4",
     "soda-hooks": "6.15.2"
   },

package/src/components/Echart.tsx

@@ -1,69 +1,242 @@
 "use client"
 
+import { ComponentProps, FC, ReactNode, Ref, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import {
-    ComponentPropsWithoutRef,
-    ForwardRefExoticComponent,
-    ForwardedRef,
-    RefAttributes,
-    forwardRef,
-    useEffect,
-    useImperativeHandle,
-    useLayoutEffect,
-    useRef,
-} from "react"
-import {
+    AngleAxisComponentOption,
+    AriaComponentOption,
+    AxisPointerComponentOption,
     BarSeriesOption,
+    BoxplotSeriesOption,
+    BrushComponentOption,
+    CalendarComponentOption,
+    CandlestickSeriesOption,
+    ChordSeriesOption,
     ComposeOption,
+    ContinousVisualMapComponentOption,
+    CustomSeriesOption,
+    DataZoomComponentOption,
     DatasetComponentOption,
     ECharts,
+    EChartsInitOpts,
+    EffectScatterSeriesOption,
+    FunnelSeriesOption,
+    GaugeSeriesOption,
+    GeoComponentOption,
+    GraphSeriesOption,
+    GraphicComponentOption,
     GridComponentOption,
+    HeatmapSeriesOption,
+    InsideDataZoomComponentOption,
+    LegendComponentOption,
     LineSeriesOption,
+    LinesSeriesOption,
+    MapSeriesOption,
+    MarkAreaComponentOption,
+    MarkLineComponentOption,
+    MarkPointComponentOption,
+    MatrixComponentOption,
+    ParallelSeriesOption,
+    PictorialBarSeriesOption,
     PieSeriesOption,
+    PiecewiseVisualMapComponentOption,
+    PlainLegendComponentOption,
+    PolarComponentOption,
+    RadarComponentOption,
+    RadarSeriesOption,
+    RadiusAxisComponentOption,
+    SankeySeriesOption,
+    ScatterSeriesOption,
+    ScrollableLegendComponentOption,
+    SeriesOption,
+    SingleAxisComponentOption,
+    SliderDataZoomComponentOption,
+    SunburstSeriesOption,
+    ThemeRiverSeriesOption,
+    ThumbnailComponentOption,
+    TimelineComponentOption,
     TitleComponentOption,
+    ToolboxComponentOption,
     TooltipComponentOption,
+    TreeSeriesOption,
+    TreemapSeriesOption,
+    VisualMapComponentOption,
+    XAXisComponentOption,
+    YAXisComponentOption,
     init,
 } from "echarts"
+import { ECBasicOption } from "echarts/types/src/util/types.js"
+import hash from "stable-hash"
+
+export type ChartOption<T extends SeriesOption = never> = ComposeOption<
+    | T
+    | DatasetComponentOption
+    | GridComponentOption
+    | LegendComponentOption
+    | TitleComponentOption
+    | TooltipComponentOption
+    | AxisPointerComponentOption
+    | GeoComponentOption
+    | MarkLineComponentOption
+    | MarkPointComponentOption
+    | MarkAreaComponentOption
+    | DataZoomComponentOption
+    | AriaComponentOption
+    | BrushComponentOption
+    | PolarComponentOption
+    | RadarComponentOption
+    | XAXisComponentOption
+    | YAXisComponentOption
+    | MatrixComponentOption
+    | GraphicComponentOption
+    | ToolboxComponentOption
+    | CalendarComponentOption
+    | TimelineComponentOption
+    | AngleAxisComponentOption
+    | RadiusAxisComponentOption
+    | SingleAxisComponentOption
+    | VisualMapComponentOption
+    | ThumbnailComponentOption
+    | PlainLegendComponentOption
+    | InsideDataZoomComponentOption
+    | SliderDataZoomComponentOption
+    | PiecewiseVisualMapComponentOption
+    | ContinousVisualMapComponentOption
+    | ScrollableLegendComponentOption
+>
+
+export type BarOption = ChartOption<BarSeriesOption>
+
+export type BoxplotOption = ChartOption<BoxplotSeriesOption>
+
+export type CandlestickOption = ChartOption<CandlestickSeriesOption>
+
+export type ChordOption = ChartOption<ChordSeriesOption>
+
+export type CustomOption = ChartOption<CustomSeriesOption>
+
+export type EffectScatterOption = ChartOption<EffectScatterSeriesOption>
+
+export type FunnelOption = ChartOption<FunnelSeriesOption>
+
+export type GaugeOption = ChartOption<GaugeSeriesOption>
+
+export type GraphOption = ChartOption<GraphSeriesOption>
+
+export type HeatmapOption = ChartOption<HeatmapSeriesOption>
+
+export type LineOption = ChartOption<LineSeriesOption>
 
-export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
+export type LinesOption = ChartOption<LinesSeriesOption>
 
-export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
+export type MapOption = ChartOption<MapSeriesOption>
 
-export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
+export type ParallelOption = ChartOption<ParallelSeriesOption>
 
-export interface EchartProps<T extends any = any> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
-    width: number
-    height: number
+export type PictorialBarOption = ChartOption<PictorialBarSeriesOption>
+
+export type PieOption = ChartOption<PieSeriesOption>
+
+export type RadarOption = ChartOption<RadarSeriesOption>
+
+export type SankeyOption = ChartOption<SankeySeriesOption>
+
+export type ScatterOption = ChartOption<ScatterSeriesOption>
+
+export type SunburstOption = ChartOption<SunburstSeriesOption>
+
+export type ThemeRiverOption = ChartOption<ThemeRiverSeriesOption>
+
+export type TreeOption = ChartOption<TreeSeriesOption>
+
+export type TreemapOption = ChartOption<TreemapSeriesOption>
+
+export type ModifiableEChartsInitOpts = Pick<EChartsInitOpts, "width" | "height" | "locale">
+
+export interface EChartInitOption extends Omit<EChartsInitOpts, keyof ModifiableEChartsInitOpts> {}
+
+export interface EchartProps<T extends ECBasicOption = ECBasicOption> extends Omit<ComponentProps<"div">, "children">, ModifiableEChartsInitOpts {
+    init?: EChartInitOption
     option: T
-    chart?: ForwardedRef<ECharts>
+    chart?: Ref<ECharts>
 }
 
-export type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<
-    Omit<EchartProps<T>, "ref"> & RefAttributes<HTMLDivElement>
->
+export type EchartComponent<T extends ECBasicOption = ECBasicOption> = FC<EchartProps<T>>
 
-const Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {
-    const { width, height, option, chart, ...rest } = props
+export function Echart<T extends ECBasicOption = ECBasicOption>({
+    ref,
+    width,
+    height,
+    locale,
+    init: initOption,
+    option,
+    chart,
+    ...rest
+}: EchartProps<T>): ReactNode {
     const container = useRef<HTMLDivElement>(null)
     const chartRef = useRef<ECharts | null>(null)
 
     useLayoutEffect(() => {
         const ele = container.current!
-        chartRef.current = init(ele, option, { width, height })
+        chartRef.current = init(ele, option, { ...initOption, width, height, locale })
         return () => chartRef.current?.dispose()
     }, [])
 
-    useImperativeHandle(ref, () => container.current!, [])
+    useImperativeHandle(ref, () => container.current!)
+
+    useImperativeHandle(chart, () => chartRef.current!)
 
-    useImperativeHandle(chart, () => chartRef.current!, [])
+    useEffect(() => chartRef.current?.setOption(option), [hash(option)])
 
-    useEffect(() => {
-        chartRef.current?.setOption(option)
-        chartRef.current?.resize({ width, height })
-    })
+    // @ts-expect-error width and height can be string
+    useEffect(() => chartRef.current?.resize({ width, height }), [width, height])
+
+    useEffect(() => chartRef.current?.setOption({ locale }), [locale])
 
     return <div ref={container} {...rest} />
-})
+}
 
-export const Pie = Echart as EchartComponent<PieOption>
 export const Bar = Echart as EchartComponent<BarOption>
+
+export const Boxplot = Echart as EchartComponent<BoxplotOption>
+
+export const Candlestick = Echart as EchartComponent<CandlestickOption>
+
+export const Chord = Echart as EchartComponent<ChordOption>
+
+export const Custom = Echart as EchartComponent<CustomOption>
+
+export const EffectScatter = Echart as EchartComponent<EffectScatterOption>
+
+export const Funnel = Echart as EchartComponent<FunnelOption>
+
+export const Gauge = Echart as EchartComponent<GaugeOption>
+
+export const Graph = Echart as EchartComponent<GraphOption>
+
+export const Heatmap = Echart as EchartComponent<HeatmapOption>
+
 export const Line = Echart as EchartComponent<LineOption>
+
+export const Lines = Echart as EchartComponent<LinesOption>
+
+export const Map = Echart as EchartComponent<MapOption>
+
+export const Parallel = Echart as EchartComponent<ParallelOption>
+
+export const PictorialBar = Echart as EchartComponent<PictorialBarOption>
+
+export const Pie = Echart as EchartComponent<PieOption>
+
+export const Radar = Echart as EchartComponent<RadarOption>
+
+export const Sankey = Echart as EchartComponent<SankeyOption>
+
+export const Scatter = Echart as EchartComponent<ScatterOption>
+
+export const Sunburst = Echart as EchartComponent<SunburstOption>
+
+export const ThemeRiver = Echart as EchartComponent<ThemeRiverOption>
+
+export const Tree = Echart as EchartComponent<TreeOption>
+
+export const Treemap = Echart as EchartComponent<TreemapOption>

package/src/components/LoopSwiper.tsx

@@ -84,11 +84,6 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
             ref={wrapper}
             className={clsx(
                 css`
-                    display: flex;
-                    flex-direction: ${flexDirection};
-                    gap: ${gap}px;
-                    ${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"}
-
                     @keyframes deepsea-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
@@ -124,6 +119,12 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                             transform: translateY(calc(100% + ${gap}px));
                         }
                     }
+                `,
+                css`
+                    display: flex;
+                    flex-direction: ${flexDirection};
+                    gap: ${gap}px;
+                    ${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"}
 
                     ${pauseOnHover
                         ? `&:hover > * {
@@ -141,6 +142,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                 className={clsx(
                     css`
                         display: flex;
+                        flex: none;
                         flex-direction: ${flexDirection};
                         gap: ${gap}px;
                         animation-name: ${animationName};
@@ -157,6 +159,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                 className={clsx(
                     css`
                         display: ${swiper ? "flex" : "none"};
+                        flex: none;
                         flex-direction: ${flexDirection};
                         gap: ${gap}px;
                         animation-name: ${animationName};