x-next 1.3.1 → 1.4.0

package/dist/components/trend-chart/index.d.ts

@@ -9,6 +9,14 @@ export declare const TrendChart: {
             type: import('vue').PropType<import('./props').TrendChartStatus>;
             default: undefined;
         };
+        height: {
+            type: import('vue').PropType<number | string>;
+            default: number;
+        };
+        width: {
+            type: import('vue').PropType<number | string>;
+            default: string;
+        };
         grid: {
             default: null;
             type: import('vue').PropType<import('./props').Grid>;
@@ -25,28 +33,70 @@ export declare const TrendChart: {
         };
         padding: {
             default: string;
-            type: StringConstructor;
-            validator(val: string): boolean;
+            type: import('vue').PropType<string | number>;
+            validator(val: string | number): boolean;
+        };
+        smooth: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        stroke: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        fill: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        showPoints: {
+            default: string;
+            type: import('vue').PropType<import('./props').ShowPoints>;
+            validator(val: import('./props').ShowPoints): val is boolean | "auto";
         };
         interactive: {
             default: boolean;
             type: BooleanConstructor;
         };
+        tooltip: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        tooltipFormatter: {
+            default: (value: number) => string;
+            type: import('vue').PropType<(value: number) => string>;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+        };
         theme: {
             type: import('vue').PropType<import('./props').Theme>;
             default: () => {};
         };
     }>> & Readonly<{
-        "onMouse-move"?: ((event: import('./props').MouseMoveEvent) => any) | undefined;
+        "onMouse-move"?: ((event: {
+            index: number;
+            data: number;
+        } | null) => any) | undefined;
     }>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        'mouse-move': (event: import('./props').MouseMoveEvent) => boolean;
+        'mouse-move': (event: {
+            index: number;
+            data: number;
+        } | null) => boolean;
     }, import('vue').PublicProps, {
+        fill: boolean;
         status: import('./props').TrendChartStatus;
+        height: string | number;
+        width: string | number;
         grid: import('./props').Grid;
-        padding: string;
+        padding: string | number;
+        stroke: boolean;
+        smooth: boolean;
+        tooltip: boolean;
         dataset: import('./props').DataSet;
         theme: import('./props').Theme;
         interactive: boolean;
+        showPoints: import('./props').ShowPoints;
+        tooltipFormatter: (value: number) => string;
         labels: import('./props').Labels;
     }, true, {}, {}, {
         TrendChartGrid: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -105,6 +155,8 @@ export declare const TrendChart: {
         TrendChartLabels: import('vue').DefineComponent<{
             boundary: import('./props').Boundary;
             yLabelsTextFormatter: Function;
+            color?: import('../../_props/css').CSSColor | undefined;
+            fontSize?: number | undefined;
             minValue?: number | undefined;
             maxValue?: number | undefined;
             xLabels?: unknown[] | undefined;
@@ -114,6 +166,8 @@ export declare const TrendChart: {
         }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
             boundary: import('./props').Boundary;
             yLabelsTextFormatter: Function;
+            color?: import('../../_props/css').CSSColor | undefined;
+            fontSize?: number | undefined;
             minValue?: number | undefined;
             maxValue?: number | undefined;
             xLabels?: unknown[] | undefined;
@@ -153,6 +207,9 @@ export declare const TrendChart: {
             className: {
                 type: import('vue').PropType<string>;
             };
+            clipPath: {
+                type: StringConstructor;
+            };
             smooth: {
                 default: boolean;
                 type: BooleanConstructor;
@@ -166,13 +223,19 @@ export declare const TrendChart: {
                 type: BooleanConstructor;
             };
             showPoints: {
+                default: string;
+                type: import('vue').PropType<import('./props').ShowPoints>;
+                validator(val: import('./props').ShowPoints): val is boolean | "auto";
+            };
+            tooltip: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-            theme: {
-                type: import('vue').PropType<import('./props').CurveTheme>;
+            tooltipFormatter: {
+                default: (value: number) => string;
+                type: import('vue').PropType<(value: number) => string>;
             };
-            mainTheme: {
+            theme: {
                 type: import('vue').PropType<import('./props').CurveTheme>;
             };
         }>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -206,6 +269,9 @@ export declare const TrendChart: {
             className: {
                 type: import('vue').PropType<string>;
             };
+            clipPath: {
+                type: StringConstructor;
+            };
             smooth: {
                 default: boolean;
                 type: BooleanConstructor;
@@ -219,13 +285,19 @@ export declare const TrendChart: {
                 type: BooleanConstructor;
             };
             showPoints: {
+                default: string;
+                type: import('vue').PropType<import('./props').ShowPoints>;
+                validator(val: import('./props').ShowPoints): val is boolean | "auto";
+            };
+            tooltip: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-            theme: {
-                type: import('vue').PropType<import('./props').CurveTheme>;
+            tooltipFormatter: {
+                default: (value: number) => string;
+                type: import('vue').PropType<(value: number) => string>;
             };
-            mainTheme: {
+            theme: {
                 type: import('vue').PropType<import('./props').CurveTheme>;
             };
         }>> & Readonly<{}>, {
@@ -233,8 +305,10 @@ export declare const TrendChart: {
             data: number[];
             stroke: boolean;
             smooth: boolean;
+            tooltip: boolean;
             boundary: import('./props').Boundary;
-            showPoints: boolean;
+            showPoints: import('./props').ShowPoints;
+            tooltipFormatter: (value: number) => string;
         }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     } & import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
         P: {};
@@ -253,6 +327,14 @@ export declare const TrendChart: {
             type: import('vue').PropType<import('./props').TrendChartStatus>;
             default: undefined;
         };
+        height: {
+            type: import('vue').PropType<number | string>;
+            default: number;
+        };
+        width: {
+            type: import('vue').PropType<number | string>;
+            default: string;
+        };
         grid: {
             default: null;
             type: import('vue').PropType<import('./props').Grid>;
@@ -269,26 +351,65 @@ export declare const TrendChart: {
         };
         padding: {
             default: string;
-            type: StringConstructor;
-            validator(val: string): boolean;
+            type: import('vue').PropType<string | number>;
+            validator(val: string | number): boolean;
+        };
+        smooth: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        stroke: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        fill: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        showPoints: {
+            default: string;
+            type: import('vue').PropType<import('./props').ShowPoints>;
+            validator(val: import('./props').ShowPoints): val is boolean | "auto";
         };
         interactive: {
             default: boolean;
             type: BooleanConstructor;
         };
+        tooltip: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        tooltipFormatter: {
+            default: (value: number) => string;
+            type: import('vue').PropType<(value: number) => string>;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+        };
         theme: {
             type: import('vue').PropType<import('./props').Theme>;
             default: () => {};
         };
     }>> & Readonly<{
-        "onMouse-move"?: ((event: import('./props').MouseMoveEvent) => any) | undefined;
+        "onMouse-move"?: ((event: {
+            index: number;
+            data: number;
+        } | null) => any) | undefined;
     }>, () => VNode, {}, {}, {}, {
+        fill: boolean;
         status: import('./props').TrendChartStatus;
+        height: string | number;
+        width: string | number;
         grid: import('./props').Grid;
-        padding: string;
+        padding: string | number;
+        stroke: boolean;
+        smooth: boolean;
+        tooltip: boolean;
         dataset: import('./props').DataSet;
         theme: import('./props').Theme;
         interactive: boolean;
+        showPoints: import('./props').ShowPoints;
+        tooltipFormatter: (value: number) => string;
         labels: import('./props').Labels;
     }>;
     __isFragment?: never;
@@ -304,6 +425,14 @@ export declare const TrendChart: {
         type: import('vue').PropType<import('./props').TrendChartStatus>;
         default: undefined;
     };
+    height: {
+        type: import('vue').PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: import('vue').PropType<number | string>;
+        default: string;
+    };
     grid: {
         default: null;
         type: import('vue').PropType<import('./props').Grid>;
@@ -320,28 +449,70 @@ export declare const TrendChart: {
     };
     padding: {
         default: string;
-        type: StringConstructor;
-        validator(val: string): boolean;
+        type: import('vue').PropType<string | number>;
+        validator(val: string | number): boolean;
+    };
+    smooth: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    stroke: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    fill: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    showPoints: {
+        default: string;
+        type: import('vue').PropType<import('./props').ShowPoints>;
+        validator(val: import('./props').ShowPoints): val is boolean | "auto";
     };
     interactive: {
         default: boolean;
         type: BooleanConstructor;
     };
+    tooltip: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    tooltipFormatter: {
+        default: (value: number) => string;
+        type: import('vue').PropType<(value: number) => string>;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
     theme: {
         type: import('vue').PropType<import('./props').Theme>;
         default: () => {};
     };
 }>> & Readonly<{
-    "onMouse-move"?: ((event: import('./props').MouseMoveEvent) => any) | undefined;
+    "onMouse-move"?: ((event: {
+        index: number;
+        data: number;
+    } | null) => any) | undefined;
 }>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    'mouse-move': (event: import('./props').MouseMoveEvent) => boolean;
+    'mouse-move': (event: {
+        index: number;
+        data: number;
+    } | null) => boolean;
 }, string, {
+    fill: boolean;
     status: import('./props').TrendChartStatus;
+    height: string | number;
+    width: string | number;
     grid: import('./props').Grid;
-    padding: string;
+    padding: string | number;
+    stroke: boolean;
+    smooth: boolean;
+    tooltip: boolean;
     dataset: import('./props').DataSet;
     theme: import('./props').Theme;
     interactive: boolean;
+    showPoints: import('./props').ShowPoints;
+    tooltipFormatter: (value: number) => string;
     labels: import('./props').Labels;
 }, {}, string, {}, {
     TrendChartGrid: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -400,6 +571,8 @@ export declare const TrendChart: {
     TrendChartLabels: import('vue').DefineComponent<{
         boundary: import('./props').Boundary;
         yLabelsTextFormatter: Function;
+        color?: import('../../_props/css').CSSColor | undefined;
+        fontSize?: number | undefined;
         minValue?: number | undefined;
         maxValue?: number | undefined;
         xLabels?: unknown[] | undefined;
@@ -409,6 +582,8 @@ export declare const TrendChart: {
     }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
         boundary: import('./props').Boundary;
         yLabelsTextFormatter: Function;
+        color?: import('../../_props/css').CSSColor | undefined;
+        fontSize?: number | undefined;
         minValue?: number | undefined;
         maxValue?: number | undefined;
         xLabels?: unknown[] | undefined;
@@ -448,6 +623,9 @@ export declare const TrendChart: {
         className: {
             type: import('vue').PropType<string>;
         };
+        clipPath: {
+            type: StringConstructor;
+        };
         smooth: {
             default: boolean;
             type: BooleanConstructor;
@@ -461,13 +639,19 @@ export declare const TrendChart: {
             type: BooleanConstructor;
         };
         showPoints: {
+            default: string;
+            type: import('vue').PropType<import('./props').ShowPoints>;
+            validator(val: import('./props').ShowPoints): val is boolean | "auto";
+        };
+        tooltip: {
             default: boolean;
             type: BooleanConstructor;
         };
-        theme: {
-            type: import('vue').PropType<import('./props').CurveTheme>;
+        tooltipFormatter: {
+            default: (value: number) => string;
+            type: import('vue').PropType<(value: number) => string>;
         };
-        mainTheme: {
+        theme: {
             type: import('vue').PropType<import('./props').CurveTheme>;
         };
     }>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -501,6 +685,9 @@ export declare const TrendChart: {
         className: {
             type: import('vue').PropType<string>;
         };
+        clipPath: {
+            type: StringConstructor;
+        };
         smooth: {
             default: boolean;
             type: BooleanConstructor;
@@ -514,13 +701,19 @@ export declare const TrendChart: {
             type: BooleanConstructor;
         };
         showPoints: {
+            default: string;
+            type: import('vue').PropType<import('./props').ShowPoints>;
+            validator(val: import('./props').ShowPoints): val is boolean | "auto";
+        };
+        tooltip: {
             default: boolean;
             type: BooleanConstructor;
         };
-        theme: {
-            type: import('vue').PropType<import('./props').CurveTheme>;
+        tooltipFormatter: {
+            default: (value: number) => string;
+            type: import('vue').PropType<(value: number) => string>;
         };
-        mainTheme: {
+        theme: {
             type: import('vue').PropType<import('./props').CurveTheme>;
         };
     }>> & Readonly<{}>, {
@@ -528,8 +721,10 @@ export declare const TrendChart: {
         data: number[];
         stroke: boolean;
         smooth: boolean;
+        tooltip: boolean;
         boundary: import('./props').Boundary;
-        showPoints: boolean;
+        showPoints: import('./props').ShowPoints;
+        tooltipFormatter: (value: number) => string;
     }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 } & import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
     install(app: import('vue').App): void;

package/dist/components/trend-chart/props.d.ts

@@ -34,7 +34,13 @@ export type Labels = {
     xLabels: string[];
     yLabels: number;
     yLabelsTextFormatter: (value: number) => string;
+    fontSize?: number;
+    color?: CSSColor;
 };
+/** 数据点显示策略：true 常显，false 不显示，auto 时数据点少时常显、超过两个时仅高亮当前点 */
+export type ShowPoints = boolean | 'auto';
+/** 填充类型：gradient 由描边色向透明渐变，solid 为统一透明度纯色 */
+export type FillType = 'solid' | 'gradient';
 export type CurveTheme = {
     stroke?: {
         width?: number;
@@ -42,6 +48,7 @@ export type CurveTheme = {
         opacity?: number;
     };
     fill?: {
+        type?: FillType;
         color?: CSSColor;
         opacity?: number;
     };
@@ -69,6 +76,14 @@ export declare const trendChartProps: {
         type: PropType<TrendChartStatus>;
         default: undefined;
     };
+    height: {
+        type: PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: PropType<number | string>;
+        default: string;
+    };
     grid: {
         default: null;
         type: PropType<Grid>;
@@ -85,13 +100,41 @@ export declare const trendChartProps: {
     };
     padding: {
         default: string;
-        type: StringConstructor;
-        validator(val: string): boolean;
+        type: PropType<string | number>;
+        validator(val: string | number): boolean;
+    };
+    smooth: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    stroke: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    fill: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    showPoints: {
+        default: string;
+        type: PropType<ShowPoints>;
+        validator(val: ShowPoints): val is boolean | "auto";
     };
     interactive: {
         default: boolean;
         type: BooleanConstructor;
     };
+    tooltip: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    tooltipFormatter: {
+        default: (value: number) => string;
+        type: PropType<(value: number) => string>;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
     theme: {
         type: PropType<Theme>;
         default: () => {};
@@ -128,6 +171,9 @@ export declare const trendChartCurveProps: {
     className: {
         type: PropType<string>;
     };
+    clipPath: {
+        type: StringConstructor;
+    };
     smooth: {
         default: boolean;
         type: BooleanConstructor;
@@ -141,13 +187,19 @@ export declare const trendChartCurveProps: {
         type: BooleanConstructor;
     };
     showPoints: {
+        default: string;
+        type: PropType<ShowPoints>;
+        validator(val: ShowPoints): val is boolean | "auto";
+    };
+    tooltip: {
         default: boolean;
         type: BooleanConstructor;
     };
-    theme: {
-        type: PropType<CurveTheme>;
+    tooltipFormatter: {
+        default: (value: number) => string;
+        type: PropType<(value: number) => string>;
     };
-    mainTheme: {
+    theme: {
         type: PropType<CurveTheme>;
     };
 };
@@ -199,5 +251,11 @@ export declare const trendChartLabelsProps: {
         default: (value: any) => any;
         type: FunctionConstructor;
     };
+    fontSize: {
+        type: NumberConstructor;
+    };
+    color: {
+        type: PropType<CSSColor>;
+    };
 };
 export type TrendChartLabelsProps = ExtractPropTypes<typeof trendChartLabelsProps>;