routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+521
@@ -0,0 +1,521 @@
|
||||
export type VBarlineSlots = {
|
||||
default: void;
|
||||
label: {
|
||||
index: number;
|
||||
value: string;
|
||||
};
|
||||
};
|
||||
export type SparklineItem = number | {
|
||||
value: number;
|
||||
};
|
||||
export type SparklineText = {
|
||||
x: number;
|
||||
value: string;
|
||||
};
|
||||
export interface Boundary {
|
||||
minX: number;
|
||||
minY: number;
|
||||
maxX: number;
|
||||
maxY: number;
|
||||
}
|
||||
export interface Bar {
|
||||
x: number;
|
||||
y: number;
|
||||
height: number;
|
||||
value: number;
|
||||
}
|
||||
export declare const makeVBarlineProps: <Defaults extends {
|
||||
autoDraw?: unknown;
|
||||
autoDrawDuration?: unknown;
|
||||
autoDrawEasing?: unknown;
|
||||
color?: unknown;
|
||||
gradient?: unknown;
|
||||
gradientDirection?: unknown;
|
||||
height?: unknown;
|
||||
labels?: unknown;
|
||||
labelSize?: unknown;
|
||||
lineWidth?: unknown;
|
||||
id?: unknown;
|
||||
itemValue?: unknown;
|
||||
modelValue?: unknown;
|
||||
min?: unknown;
|
||||
max?: unknown;
|
||||
padding?: unknown;
|
||||
showLabels?: unknown;
|
||||
smooth?: unknown;
|
||||
width?: unknown;
|
||||
autoLineWidth?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
autoDraw: unknown extends Defaults["autoDraw"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["autoDraw"] ? boolean : boolean | Defaults["autoDraw"]>;
|
||||
default: unknown extends Defaults["autoDraw"] ? boolean : boolean | Defaults["autoDraw"];
|
||||
};
|
||||
autoDrawDuration: unknown extends Defaults["autoDrawDuration"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["autoDrawDuration"] ? string | number : string | number | Defaults["autoDrawDuration"]>;
|
||||
default: unknown extends Defaults["autoDrawDuration"] ? string | number : Defaults["autoDrawDuration"] | NonNullable<string | number>;
|
||||
};
|
||||
autoDrawEasing: unknown extends Defaults["autoDrawEasing"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["autoDrawEasing"] ? string : string | Defaults["autoDrawEasing"]>;
|
||||
default: unknown extends Defaults["autoDrawEasing"] ? string : string | Defaults["autoDrawEasing"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
gradient: unknown extends Defaults["gradient"] ? {
|
||||
type: import("vue").PropType<string[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["gradient"] ? string[] : string[] | Defaults["gradient"]>;
|
||||
default: unknown extends Defaults["gradient"] ? string[] : string[] | Defaults["gradient"];
|
||||
};
|
||||
gradientDirection: unknown extends Defaults["gradientDirection"] ? {
|
||||
type: import("vue").PropType<"bottom" | "left" | "right" | "top">;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<"bottom" | "left" | "right" | "top">;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["gradientDirection"] ? "bottom" | "left" | "right" | "top" : "bottom" | "left" | "right" | "top" | Defaults["gradientDirection"]>;
|
||||
default: unknown extends Defaults["gradientDirection"] ? "bottom" | "left" | "right" | "top" : Defaults["gradientDirection"] | NonNullable<"bottom" | "left" | "right" | "top">;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
labels: unknown extends Defaults["labels"] ? {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["labels"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["labels"]>;
|
||||
default: unknown extends Defaults["labels"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["labels"];
|
||||
};
|
||||
labelSize: unknown extends Defaults["labelSize"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["labelSize"] ? string | number : string | number | Defaults["labelSize"]>;
|
||||
default: unknown extends Defaults["labelSize"] ? string | number : Defaults["labelSize"] | NonNullable<string | number>;
|
||||
};
|
||||
lineWidth: unknown extends Defaults["lineWidth"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["lineWidth"] ? string | number : string | number | Defaults["lineWidth"]>;
|
||||
default: unknown extends Defaults["lineWidth"] ? string | number : Defaults["lineWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
id: unknown extends Defaults["id"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["id"] ? string : string | Defaults["id"]>;
|
||||
default: unknown extends Defaults["id"] ? string : string | Defaults["id"];
|
||||
};
|
||||
itemValue: unknown extends Defaults["itemValue"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["itemValue"] ? string : string | Defaults["itemValue"]>;
|
||||
default: unknown extends Defaults["itemValue"] ? string : string | Defaults["itemValue"];
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["modelValue"];
|
||||
};
|
||||
min: unknown extends Defaults["min"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["min"] ? string | number : string | number | Defaults["min"]>;
|
||||
default: unknown extends Defaults["min"] ? string | number : Defaults["min"] | NonNullable<string | number>;
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["max"] ? string | number : string | number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? string | number : Defaults["max"] | NonNullable<string | number>;
|
||||
};
|
||||
padding: unknown extends Defaults["padding"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["padding"] ? string | number : string | number | Defaults["padding"]>;
|
||||
default: unknown extends Defaults["padding"] ? string | number : Defaults["padding"] | NonNullable<string | number>;
|
||||
};
|
||||
showLabels: unknown extends Defaults["showLabels"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["showLabels"] ? boolean : boolean | Defaults["showLabels"]>;
|
||||
default: unknown extends Defaults["showLabels"] ? boolean : boolean | Defaults["showLabels"];
|
||||
};
|
||||
smooth: unknown extends Defaults["smooth"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["smooth"] ? string | number | boolean : string | number | boolean | Defaults["smooth"]>;
|
||||
default: unknown extends Defaults["smooth"] ? string | number | boolean : Defaults["smooth"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
autoLineWidth: unknown extends Defaults["autoLineWidth"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["autoLineWidth"] ? boolean : boolean | Defaults["autoLineWidth"]>;
|
||||
default: unknown extends Defaults["autoLineWidth"] ? boolean : boolean | Defaults["autoLineWidth"];
|
||||
};
|
||||
};
|
||||
export declare const VBarline: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
} & {
|
||||
autoDrawDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
id?: string | undefined;
|
||||
min?: string | number | undefined;
|
||||
max?: string | number | undefined;
|
||||
smooth?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: void) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: void) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
} & {
|
||||
autoDrawDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
id?: string | undefined;
|
||||
min?: string | number | undefined;
|
||||
max?: string | number | undefined;
|
||||
smooth?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: void) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
} & {
|
||||
autoDrawDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
id?: string | undefined;
|
||||
min?: string | number | undefined;
|
||||
max?: string | number | undefined;
|
||||
smooth?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: void) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: void) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
autoDraw: BooleanConstructor;
|
||||
autoDrawDuration: (NumberConstructor | StringConstructor)[];
|
||||
autoDrawEasing: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
gradient: {
|
||||
type: import("vue").PropType<string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
gradientDirection: {
|
||||
type: import("vue").PropType<"bottom" | "left" | "right" | "top">;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
};
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
labels: {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
labelSize: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
lineWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
id: StringConstructor;
|
||||
itemValue: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
min: (NumberConstructor | StringConstructor)[];
|
||||
max: (NumberConstructor | StringConstructor)[];
|
||||
padding: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
showLabels: BooleanConstructor;
|
||||
smooth: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
autoLineWidth: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
autoDraw: BooleanConstructor;
|
||||
autoDrawDuration: (NumberConstructor | StringConstructor)[];
|
||||
autoDrawEasing: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
gradient: {
|
||||
type: import("vue").PropType<string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
gradientDirection: {
|
||||
type: import("vue").PropType<"bottom" | "left" | "right" | "top">;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
};
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
labels: {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
labelSize: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
lineWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
id: StringConstructor;
|
||||
itemValue: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
min: (NumberConstructor | StringConstructor)[];
|
||||
max: (NumberConstructor | StringConstructor)[];
|
||||
padding: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
showLabels: BooleanConstructor;
|
||||
smooth: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
autoLineWidth: BooleanConstructor;
|
||||
}>>;
|
||||
export type VBarline = InstanceType<typeof VBarline>;
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
// Utilities
|
||||
import { computed, useId, createElementVNode as _createElementVNode, Fragment as _Fragment } from 'vue';
|
||||
import { makeLineProps } from "./util/line.js";
|
||||
import { genericComponent, getPropertyFromItem, PREFERS_REDUCED_MOTION, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVBarlineProps = propsFactory({
|
||||
autoLineWidth: Boolean,
|
||||
...makeLineProps()
|
||||
}, 'VBarline');
|
||||
export const VBarline = genericComponent()({
|
||||
name: 'VBarline',
|
||||
props: makeVBarlineProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const uid = useId();
|
||||
const id = computed(() => props.id || `barline-${uid}`);
|
||||
const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || 500);
|
||||
const hasLabels = computed(() => {
|
||||
return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
|
||||
});
|
||||
const lineWidth = computed(() => parseFloat(props.lineWidth) || 4);
|
||||
const totalWidth = computed(() => Math.max(props.modelValue.length * lineWidth.value, Number(props.width)));
|
||||
const boundary = computed(() => {
|
||||
return {
|
||||
minX: 0,
|
||||
maxX: totalWidth.value,
|
||||
minY: 0,
|
||||
maxY: parseInt(props.height, 10)
|
||||
};
|
||||
});
|
||||
const items = computed(() => props.modelValue.map(item => getPropertyFromItem(item, props.itemValue, item)));
|
||||
function genBars(values, boundary) {
|
||||
const {
|
||||
minX,
|
||||
maxX,
|
||||
minY,
|
||||
maxY
|
||||
} = boundary;
|
||||
const totalValues = values.length;
|
||||
let maxValue = props.max != null ? Number(props.max) : Math.max(...values);
|
||||
let minValue = props.min != null ? Number(props.min) : Math.min(...values);
|
||||
if (minValue > 0 && props.min == null) minValue = 0;
|
||||
if (maxValue < 0 && props.max == null) maxValue = 0;
|
||||
const gridX = maxX / (totalValues === 1 ? 2 : totalValues);
|
||||
const gridY = (maxY - minY) / (maxValue - minValue || 1);
|
||||
const horizonY = maxY - Math.abs(minValue * gridY);
|
||||
return values.map((value, index) => {
|
||||
const height = Math.abs(gridY * value);
|
||||
return {
|
||||
x: minX + index * gridX,
|
||||
y: horizonY - height + Number(value < 0) * height,
|
||||
height,
|
||||
value
|
||||
};
|
||||
});
|
||||
}
|
||||
const parsedLabels = computed(() => {
|
||||
const labels = [];
|
||||
const points = genBars(items.value, boundary.value);
|
||||
const len = points.length;
|
||||
for (let i = 0; labels.length < len; i++) {
|
||||
const item = points[i];
|
||||
let value = props.labels[i];
|
||||
if (!value) {
|
||||
value = typeof item === 'object' ? item.value : item;
|
||||
}
|
||||
labels.push({
|
||||
x: item.x,
|
||||
value: String(value)
|
||||
});
|
||||
}
|
||||
return labels;
|
||||
});
|
||||
const bars = computed(() => genBars(items.value, boundary.value));
|
||||
const offsetX = computed(() => bars.value.length === 1 ? (boundary.value.maxX - lineWidth.value) / 2 : (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2);
|
||||
const smooth = computed(() => typeof props.smooth === 'boolean' ? props.smooth ? 2 : 0 : Number(props.smooth));
|
||||
useRender(() => {
|
||||
const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
|
||||
return _createElementVNode("svg", {
|
||||
"display": "block"
|
||||
}, [_createElementVNode("defs", null, [_createElementVNode("linearGradient", {
|
||||
"id": id.value,
|
||||
"gradientUnits": "userSpaceOnUse",
|
||||
"x1": props.gradientDirection === 'left' ? '100%' : '0',
|
||||
"y1": props.gradientDirection === 'top' ? '100%' : '0',
|
||||
"x2": props.gradientDirection === 'right' ? '100%' : '0',
|
||||
"y2": props.gradientDirection === 'bottom' ? '100%' : '0'
|
||||
}, [gradientData.map((color, index) => _createElementVNode("stop", {
|
||||
"offset": index / Math.max(gradientData.length - 1, 1),
|
||||
"stop-color": color || 'currentColor'
|
||||
}, null))])]), _createElementVNode("clipPath", {
|
||||
"id": `${id.value}-clip`
|
||||
}, [bars.value.map(item => _createElementVNode("rect", {
|
||||
"x": item.x + offsetX.value,
|
||||
"y": item.y,
|
||||
"width": lineWidth.value,
|
||||
"height": item.height,
|
||||
"rx": smooth.value,
|
||||
"ry": smooth.value
|
||||
}, [props.autoDraw && !PREFERS_REDUCED_MOTION() && _createElementVNode(_Fragment, null, [_createElementVNode("animate", {
|
||||
"attributeName": "y",
|
||||
"from": item.y + item.height,
|
||||
"to": item.y,
|
||||
"dur": `${autoDrawDuration.value}ms`,
|
||||
"fill": "freeze"
|
||||
}, null), _createElementVNode("animate", {
|
||||
"attributeName": "height",
|
||||
"from": "0",
|
||||
"to": item.height,
|
||||
"dur": `${autoDrawDuration.value}ms`,
|
||||
"fill": "freeze"
|
||||
}, null)])]))]), hasLabels.value && _createElementVNode("g", {
|
||||
"key": "labels",
|
||||
"style": {
|
||||
textAnchor: 'middle',
|
||||
dominantBaseline: 'mathematical',
|
||||
fill: 'currentColor'
|
||||
}
|
||||
}, [parsedLabels.value.map((item, i) => _createElementVNode("text", {
|
||||
"x": item.x + offsetX.value + lineWidth.value / 2,
|
||||
"y": parseInt(props.height, 10) - 2 + (parseInt(props.labelSize, 10) || 7 * 0.75),
|
||||
"font-size": Number(props.labelSize) || 7
|
||||
}, [slots.label?.({
|
||||
index: i,
|
||||
value: item.value
|
||||
}) ?? item.value]))]), _createElementVNode("g", {
|
||||
"clip-path": `url(#${id.value}-clip)`,
|
||||
"fill": `url(#${id.value})`
|
||||
}, [_createElementVNode("rect", {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": Math.max(props.modelValue.length * lineWidth.value, Number(props.width)),
|
||||
"height": props.height
|
||||
}, null)])]);
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VBarline.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+541
@@ -0,0 +1,541 @@
|
||||
import type { PropType } from 'vue';
|
||||
export declare const makeVSparklineProps: <Defaults extends {
|
||||
autoDraw?: unknown;
|
||||
autoDrawDuration?: unknown;
|
||||
autoDrawEasing?: unknown;
|
||||
color?: unknown;
|
||||
gradient?: unknown;
|
||||
gradientDirection?: unknown;
|
||||
height?: unknown;
|
||||
labels?: unknown;
|
||||
labelSize?: unknown;
|
||||
lineWidth?: unknown;
|
||||
id?: unknown;
|
||||
itemValue?: unknown;
|
||||
modelValue?: unknown;
|
||||
min?: unknown;
|
||||
max?: unknown;
|
||||
padding?: unknown;
|
||||
showLabels?: unknown;
|
||||
smooth?: unknown;
|
||||
width?: unknown;
|
||||
autoLineWidth?: unknown;
|
||||
fill?: unknown;
|
||||
type?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
autoDraw: unknown extends Defaults["autoDraw"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["autoDraw"] ? boolean : boolean | Defaults["autoDraw"]>;
|
||||
default: unknown extends Defaults["autoDraw"] ? boolean : boolean | Defaults["autoDraw"];
|
||||
};
|
||||
autoDrawDuration: unknown extends Defaults["autoDrawDuration"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["autoDrawDuration"] ? string | number : string | number | Defaults["autoDrawDuration"]>;
|
||||
default: unknown extends Defaults["autoDrawDuration"] ? string | number : Defaults["autoDrawDuration"] | NonNullable<string | number>;
|
||||
};
|
||||
autoDrawEasing: unknown extends Defaults["autoDrawEasing"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["autoDrawEasing"] ? string : string | Defaults["autoDrawEasing"]>;
|
||||
default: unknown extends Defaults["autoDrawEasing"] ? string : string | Defaults["autoDrawEasing"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
gradient: unknown extends Defaults["gradient"] ? {
|
||||
type: PropType<string[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<string[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["gradient"] ? string[] : string[] | Defaults["gradient"]>;
|
||||
default: unknown extends Defaults["gradient"] ? string[] : string[] | Defaults["gradient"];
|
||||
};
|
||||
gradientDirection: unknown extends Defaults["gradientDirection"] ? {
|
||||
type: PropType<'top' | 'bottom' | 'left' | 'right'>;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'top' | 'bottom' | 'left' | 'right'>;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["gradientDirection"] ? "bottom" | "left" | "right" | "top" : "bottom" | "left" | "right" | "top" | Defaults["gradientDirection"]>;
|
||||
default: unknown extends Defaults["gradientDirection"] ? "bottom" | "left" | "right" | "top" : Defaults["gradientDirection"] | NonNullable<"bottom" | "left" | "right" | "top">;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
labels: unknown extends Defaults["labels"] ? {
|
||||
type: PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["labels"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["labels"]>;
|
||||
default: unknown extends Defaults["labels"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["labels"];
|
||||
};
|
||||
labelSize: unknown extends Defaults["labelSize"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["labelSize"] ? string | number : string | number | Defaults["labelSize"]>;
|
||||
default: unknown extends Defaults["labelSize"] ? string | number : Defaults["labelSize"] | NonNullable<string | number>;
|
||||
};
|
||||
lineWidth: unknown extends Defaults["lineWidth"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["lineWidth"] ? string | number : string | number | Defaults["lineWidth"]>;
|
||||
default: unknown extends Defaults["lineWidth"] ? string | number : Defaults["lineWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
id: unknown extends Defaults["id"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["id"] ? string : string | Defaults["id"]>;
|
||||
default: unknown extends Defaults["id"] ? string : string | Defaults["id"];
|
||||
};
|
||||
itemValue: unknown extends Defaults["itemValue"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["itemValue"] ? string : string | Defaults["itemValue"]>;
|
||||
default: unknown extends Defaults["itemValue"] ? string : string | Defaults["itemValue"];
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["modelValue"];
|
||||
};
|
||||
min: unknown extends Defaults["min"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["min"] ? string | number : string | number | Defaults["min"]>;
|
||||
default: unknown extends Defaults["min"] ? string | number : Defaults["min"] | NonNullable<string | number>;
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["max"] ? string | number : string | number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? string | number : Defaults["max"] | NonNullable<string | number>;
|
||||
};
|
||||
padding: unknown extends Defaults["padding"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["padding"] ? string | number : string | number | Defaults["padding"]>;
|
||||
default: unknown extends Defaults["padding"] ? string | number : Defaults["padding"] | NonNullable<string | number>;
|
||||
};
|
||||
showLabels: unknown extends Defaults["showLabels"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["showLabels"] ? boolean : boolean | Defaults["showLabels"]>;
|
||||
default: unknown extends Defaults["showLabels"] ? boolean : boolean | Defaults["showLabels"];
|
||||
};
|
||||
smooth: unknown extends Defaults["smooth"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["smooth"] ? string | number | boolean : string | number | boolean | Defaults["smooth"]>;
|
||||
default: unknown extends Defaults["smooth"] ? string | number | boolean : Defaults["smooth"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
autoLineWidth: unknown extends Defaults["autoLineWidth"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["autoLineWidth"] ? boolean : boolean | Defaults["autoLineWidth"]>;
|
||||
default: unknown extends Defaults["autoLineWidth"] ? boolean : boolean | Defaults["autoLineWidth"];
|
||||
};
|
||||
fill: unknown extends Defaults["fill"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["fill"] ? boolean : boolean | Defaults["fill"]>;
|
||||
default: unknown extends Defaults["fill"] ? boolean : boolean | Defaults["fill"];
|
||||
};
|
||||
type: unknown extends Defaults["type"] ? {
|
||||
type: PropType<'trend' | 'bar'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'trend' | 'bar'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["type"] ? "bar" | "trend" : "bar" | "trend" | Defaults["type"]>;
|
||||
default: unknown extends Defaults["type"] ? "bar" | "trend" : Defaults["type"] | NonNullable<"bar" | "trend">;
|
||||
};
|
||||
};
|
||||
export type VSparklineSlots = {
|
||||
default: void;
|
||||
label: {
|
||||
index: number;
|
||||
value: string;
|
||||
};
|
||||
};
|
||||
export declare const VSparkline: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
fill: boolean;
|
||||
type: "bar" | "trend";
|
||||
} & {
|
||||
autoDrawDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
id?: string | undefined;
|
||||
min?: string | number | undefined;
|
||||
max?: string | number | undefined;
|
||||
smooth?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: void) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
fill: boolean;
|
||||
type: "bar" | "trend";
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: void) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
fill: boolean;
|
||||
type: "bar" | "trend";
|
||||
} & {
|
||||
autoDrawDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
id?: string | undefined;
|
||||
min?: string | number | undefined;
|
||||
max?: string | number | undefined;
|
||||
smooth?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: void) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
fill: boolean;
|
||||
type: "bar" | "trend";
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
fill: boolean;
|
||||
type: "bar" | "trend";
|
||||
} & {
|
||||
autoDrawDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
id?: string | undefined;
|
||||
min?: string | number | undefined;
|
||||
max?: string | number | undefined;
|
||||
smooth?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: void) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
autoLineWidth: boolean;
|
||||
fill: boolean;
|
||||
type: "bar" | "trend";
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: void) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
autoDraw: BooleanConstructor;
|
||||
autoDrawDuration: (NumberConstructor | StringConstructor)[];
|
||||
autoDrawEasing: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
gradient: {
|
||||
type: PropType<string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
gradientDirection: {
|
||||
type: PropType<'top' | 'bottom' | 'left' | 'right'>;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
};
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
labels: {
|
||||
type: PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
labelSize: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
lineWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
id: StringConstructor;
|
||||
itemValue: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
min: (NumberConstructor | StringConstructor)[];
|
||||
max: (NumberConstructor | StringConstructor)[];
|
||||
padding: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
showLabels: BooleanConstructor;
|
||||
smooth: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
autoLineWidth: BooleanConstructor;
|
||||
fill: BooleanConstructor;
|
||||
type: {
|
||||
type: PropType<'trend' | 'bar'>;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
autoDraw: BooleanConstructor;
|
||||
autoDrawDuration: (NumberConstructor | StringConstructor)[];
|
||||
autoDrawEasing: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
gradient: {
|
||||
type: PropType<string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
gradientDirection: {
|
||||
type: PropType<'top' | 'bottom' | 'left' | 'right'>;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
};
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
labels: {
|
||||
type: PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
labelSize: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
lineWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
id: StringConstructor;
|
||||
itemValue: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
min: (NumberConstructor | StringConstructor)[];
|
||||
max: (NumberConstructor | StringConstructor)[];
|
||||
padding: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
showLabels: BooleanConstructor;
|
||||
smooth: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
autoLineWidth: BooleanConstructor;
|
||||
fill: BooleanConstructor;
|
||||
type: {
|
||||
type: PropType<'trend' | 'bar'>;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
export type VSparkline = InstanceType<typeof VSparkline>;
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { makeVBarlineProps, VBarline } from "./VBarline.js";
|
||||
import { makeVTrendlineProps, VTrendline } from "./VTrendline.js"; // Composables
|
||||
import { useTextColor } from "../../composables/color.js"; // Utilities
|
||||
import { computed } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
// Types
|
||||
|
||||
export const makeVSparklineProps = propsFactory({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'trend'
|
||||
},
|
||||
...makeVBarlineProps(),
|
||||
...makeVTrendlineProps()
|
||||
}, 'VSparkline');
|
||||
export const VSparkline = genericComponent()({
|
||||
name: 'VSparkline',
|
||||
props: makeVSparklineProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => props.color);
|
||||
const hasLabels = computed(() => {
|
||||
return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
|
||||
});
|
||||
const totalHeight = computed(() => {
|
||||
let height = parseInt(props.height, 10);
|
||||
if (hasLabels.value) height += parseInt(props.labelSize, 10) * 1.5;
|
||||
return height;
|
||||
});
|
||||
useRender(() => {
|
||||
const Tag = props.type === 'trend' ? VTrendline : VBarline;
|
||||
const lineProps = props.type === 'trend' ? VTrendline.filterProps(props) : VBarline.filterProps(props);
|
||||
return _createVNode(Tag, _mergeProps({
|
||||
"key": props.type,
|
||||
"class": textColorClasses.value,
|
||||
"style": textColorStyles.value,
|
||||
"viewBox": `0 0 ${props.width} ${parseInt(totalHeight.value, 10)}`
|
||||
}, lineProps), slots);
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VSparkline.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VSparkline.js","names":["makeVBarlineProps","VBarline","makeVTrendlineProps","VTrendline","useTextColor","computed","genericComponent","propsFactory","useRender","makeVSparklineProps","type","String","default","VSparkline","name","props","setup","slots","textColorClasses","textColorStyles","color","hasLabels","Boolean","showLabels","labels","length","label","totalHeight","height","parseInt","value","labelSize","Tag","lineProps","filterProps","_createVNode","_mergeProps","width"],"sources":["../../../src/components/VSparkline/VSparkline.tsx"],"sourcesContent":["// Components\nimport { makeVBarlineProps, VBarline } from './VBarline'\nimport { makeVTrendlineProps, VTrendline } from './VTrendline'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\n\nexport const makeVSparklineProps = propsFactory({\n type: {\n type: String as PropType<'trend' | 'bar'>,\n default: 'trend',\n },\n\n ...makeVBarlineProps(),\n ...makeVTrendlineProps(),\n}, 'VSparkline')\n\nexport type VSparklineSlots = {\n default: void\n label: { index: number, value: string }\n}\n\nexport const VSparkline = genericComponent<VSparklineSlots>()({\n name: 'VSparkline',\n\n props: makeVSparklineProps(),\n\n setup (props, { slots }) {\n const { textColorClasses, textColorStyles } = useTextColor(() => props.color)\n const hasLabels = computed(() => {\n return Boolean(\n props.showLabels ||\n props.labels.length > 0 ||\n !!slots?.label\n )\n })\n const totalHeight = computed(() => {\n let height = parseInt(props.height, 10)\n\n if (hasLabels.value) height += parseInt(props.labelSize, 10) * 1.5\n\n return height\n })\n\n useRender(() => {\n const Tag = props.type === 'trend' ? VTrendline : VBarline\n const lineProps = props.type === 'trend' ? VTrendline.filterProps(props) : VBarline.filterProps(props)\n\n return (\n <Tag\n key={ props.type }\n class={ textColorClasses.value }\n style={ textColorStyles.value }\n viewBox={ `0 0 ${props.width} ${parseInt(totalHeight.value, 10)}` }\n { ...lineProps }\n v-slots={ slots }\n />\n )\n })\n },\n})\n\nexport type VSparkline = InstanceType<typeof VSparkline>\n"],"mappings":";AAAA;AAAA,SACSA,iBAAiB,EAAEC,QAAQ;AAAA,SAC3BC,mBAAmB,EAAEC,UAAU,2BAExC;AAAA,SACSC,YAAY,sCAErB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAElD;AAGA;;AAEA,OAAO,MAAMC,mBAAmB,GAAGF,YAAY,CAAC;EAC9CG,IAAI,EAAE;IACJA,IAAI,EAAEC,MAAmC;IACzCC,OAAO,EAAE;EACX,CAAC;EAED,GAAGZ,iBAAiB,CAAC,CAAC;EACtB,GAAGE,mBAAmB,CAAC;AACzB,CAAC,EAAE,YAAY,CAAC;AAOhB,OAAO,MAAMW,UAAU,GAAGP,gBAAgB,CAAkB,CAAC,CAAC;EAC5DQ,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAEN,mBAAmB,CAAC,CAAC;EAE5BO,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvB,MAAM;MAAEC,gBAAgB;MAAEC;IAAgB,CAAC,GAAGf,YAAY,CAAC,MAAMW,KAAK,CAACK,KAAK,CAAC;IAC7E,MAAMC,SAAS,GAAGhB,QAAQ,CAAC,MAAM;MAC/B,OAAOiB,OAAO,CACZP,KAAK,CAACQ,UAAU,IAChBR,KAAK,CAACS,MAAM,CAACC,MAAM,GAAG,CAAC,IACvB,CAAC,CAACR,KAAK,EAAES,KACX,CAAC;IACH,CAAC,CAAC;IACF,MAAMC,WAAW,GAAGtB,QAAQ,CAAC,MAAM;MACjC,IAAIuB,MAAM,GAAGC,QAAQ,CAACd,KAAK,CAACa,MAAM,EAAE,EAAE,CAAC;MAEvC,IAAIP,SAAS,CAACS,KAAK,EAAEF,MAAM,IAAIC,QAAQ,CAACd,KAAK,CAACgB,SAAS,EAAE,EAAE,CAAC,GAAG,GAAG;MAElE,OAAOH,MAAM;IACf,CAAC,CAAC;IAEFpB,SAAS,CAAC,MAAM;MACd,MAAMwB,GAAG,GAAGjB,KAAK,CAACL,IAAI,KAAK,OAAO,GAAGP,UAAU,GAAGF,QAAQ;MAC1D,MAAMgC,SAAS,GAAGlB,KAAK,CAACL,IAAI,KAAK,OAAO,GAAGP,UAAU,CAAC+B,WAAW,CAACnB,KAAK,CAAC,GAAGd,QAAQ,CAACiC,WAAW,CAACnB,KAAK,CAAC;MAEtG,OAAAoB,YAAA,CAAAH,GAAA,EAAAI,WAAA;QAAA,OAEUrB,KAAK,CAACL,IAAI;QAAA,SACRQ,gBAAgB,CAACY,KAAK;QAAA,SACtBX,eAAe,CAACW,KAAK;QAAA,WACnB,OAAOf,KAAK,CAACsB,KAAK,IAAIR,QAAQ,CAACF,WAAW,CAACG,KAAK,EAAE,EAAE,CAAC;MAAE,GAC5DG,SAAS,GACJhB,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+520
@@ -0,0 +1,520 @@
|
||||
export type VTrendlineSlots = {
|
||||
default: void;
|
||||
label: {
|
||||
index: number;
|
||||
value: string;
|
||||
};
|
||||
};
|
||||
export type SparklineItem = number | {
|
||||
value: number;
|
||||
};
|
||||
export type SparklineText = {
|
||||
x: number;
|
||||
value: string;
|
||||
};
|
||||
export interface Boundary {
|
||||
minX: number;
|
||||
minY: number;
|
||||
maxX: number;
|
||||
maxY: number;
|
||||
}
|
||||
export interface Point {
|
||||
x: number;
|
||||
y: number;
|
||||
value: number;
|
||||
}
|
||||
export declare const makeVTrendlineProps: <Defaults extends {
|
||||
autoDraw?: unknown;
|
||||
autoDrawDuration?: unknown;
|
||||
autoDrawEasing?: unknown;
|
||||
color?: unknown;
|
||||
gradient?: unknown;
|
||||
gradientDirection?: unknown;
|
||||
height?: unknown;
|
||||
labels?: unknown;
|
||||
labelSize?: unknown;
|
||||
lineWidth?: unknown;
|
||||
id?: unknown;
|
||||
itemValue?: unknown;
|
||||
modelValue?: unknown;
|
||||
min?: unknown;
|
||||
max?: unknown;
|
||||
padding?: unknown;
|
||||
showLabels?: unknown;
|
||||
smooth?: unknown;
|
||||
width?: unknown;
|
||||
fill?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
autoDraw: unknown extends Defaults["autoDraw"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["autoDraw"] ? boolean : boolean | Defaults["autoDraw"]>;
|
||||
default: unknown extends Defaults["autoDraw"] ? boolean : boolean | Defaults["autoDraw"];
|
||||
};
|
||||
autoDrawDuration: unknown extends Defaults["autoDrawDuration"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["autoDrawDuration"] ? string | number : string | number | Defaults["autoDrawDuration"]>;
|
||||
default: unknown extends Defaults["autoDrawDuration"] ? string | number : Defaults["autoDrawDuration"] | NonNullable<string | number>;
|
||||
};
|
||||
autoDrawEasing: unknown extends Defaults["autoDrawEasing"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["autoDrawEasing"] ? string : string | Defaults["autoDrawEasing"]>;
|
||||
default: unknown extends Defaults["autoDrawEasing"] ? string : string | Defaults["autoDrawEasing"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
gradient: unknown extends Defaults["gradient"] ? {
|
||||
type: import("vue").PropType<string[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["gradient"] ? string[] : string[] | Defaults["gradient"]>;
|
||||
default: unknown extends Defaults["gradient"] ? string[] : string[] | Defaults["gradient"];
|
||||
};
|
||||
gradientDirection: unknown extends Defaults["gradientDirection"] ? {
|
||||
type: import("vue").PropType<"bottom" | "left" | "right" | "top">;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<"bottom" | "left" | "right" | "top">;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["gradientDirection"] ? "bottom" | "left" | "right" | "top" : "bottom" | "left" | "right" | "top" | Defaults["gradientDirection"]>;
|
||||
default: unknown extends Defaults["gradientDirection"] ? "bottom" | "left" | "right" | "top" : Defaults["gradientDirection"] | NonNullable<"bottom" | "left" | "right" | "top">;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
labels: unknown extends Defaults["labels"] ? {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["labels"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["labels"]>;
|
||||
default: unknown extends Defaults["labels"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["labels"];
|
||||
};
|
||||
labelSize: unknown extends Defaults["labelSize"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["labelSize"] ? string | number : string | number | Defaults["labelSize"]>;
|
||||
default: unknown extends Defaults["labelSize"] ? string | number : Defaults["labelSize"] | NonNullable<string | number>;
|
||||
};
|
||||
lineWidth: unknown extends Defaults["lineWidth"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["lineWidth"] ? string | number : string | number | Defaults["lineWidth"]>;
|
||||
default: unknown extends Defaults["lineWidth"] ? string | number : Defaults["lineWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
id: unknown extends Defaults["id"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["id"] ? string : string | Defaults["id"]>;
|
||||
default: unknown extends Defaults["id"] ? string : string | Defaults["id"];
|
||||
};
|
||||
itemValue: unknown extends Defaults["itemValue"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["itemValue"] ? string : string | Defaults["itemValue"]>;
|
||||
default: unknown extends Defaults["itemValue"] ? string : string | Defaults["itemValue"];
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? import("./util/line.js").SparklineItem[] : import("./util/line.js").SparklineItem[] | Defaults["modelValue"];
|
||||
};
|
||||
min: unknown extends Defaults["min"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["min"] ? string | number : string | number | Defaults["min"]>;
|
||||
default: unknown extends Defaults["min"] ? string | number : Defaults["min"] | NonNullable<string | number>;
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["max"] ? string | number : string | number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? string | number : Defaults["max"] | NonNullable<string | number>;
|
||||
};
|
||||
padding: unknown extends Defaults["padding"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["padding"] ? string | number : string | number | Defaults["padding"]>;
|
||||
default: unknown extends Defaults["padding"] ? string | number : Defaults["padding"] | NonNullable<string | number>;
|
||||
};
|
||||
showLabels: unknown extends Defaults["showLabels"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["showLabels"] ? boolean : boolean | Defaults["showLabels"]>;
|
||||
default: unknown extends Defaults["showLabels"] ? boolean : boolean | Defaults["showLabels"];
|
||||
};
|
||||
smooth: unknown extends Defaults["smooth"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["smooth"] ? string | number | boolean : string | number | boolean | Defaults["smooth"]>;
|
||||
default: unknown extends Defaults["smooth"] ? string | number | boolean : Defaults["smooth"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
fill: unknown extends Defaults["fill"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["fill"] ? boolean : boolean | Defaults["fill"]>;
|
||||
default: unknown extends Defaults["fill"] ? boolean : boolean | Defaults["fill"];
|
||||
};
|
||||
};
|
||||
export declare const VTrendline: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
fill: boolean;
|
||||
} & {
|
||||
autoDrawDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
id?: string | undefined;
|
||||
min?: string | number | undefined;
|
||||
max?: string | number | undefined;
|
||||
smooth?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: void) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
fill: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: void) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
fill: boolean;
|
||||
} & {
|
||||
autoDrawDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
id?: string | undefined;
|
||||
min?: string | number | undefined;
|
||||
max?: string | number | undefined;
|
||||
smooth?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: void) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
fill: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
fill: boolean;
|
||||
} & {
|
||||
autoDrawDuration?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
id?: string | undefined;
|
||||
min?: string | number | undefined;
|
||||
max?: string | number | undefined;
|
||||
smooth?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: void) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: void) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
autoDraw: boolean;
|
||||
autoDrawEasing: string;
|
||||
gradient: string[];
|
||||
gradientDirection: "bottom" | "left" | "right" | "top";
|
||||
height: string | number;
|
||||
labels: import("./util/line.js").SparklineItem[];
|
||||
labelSize: string | number;
|
||||
lineWidth: string | number;
|
||||
itemValue: string;
|
||||
modelValue: import("./util/line.js").SparklineItem[];
|
||||
padding: string | number;
|
||||
showLabels: boolean;
|
||||
width: string | number;
|
||||
fill: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: void) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: {
|
||||
index: number;
|
||||
value: string;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
autoDraw: BooleanConstructor;
|
||||
autoDrawDuration: (NumberConstructor | StringConstructor)[];
|
||||
autoDrawEasing: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
gradient: {
|
||||
type: import("vue").PropType<string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
gradientDirection: {
|
||||
type: import("vue").PropType<"bottom" | "left" | "right" | "top">;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
};
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
labels: {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
labelSize: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
lineWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
id: StringConstructor;
|
||||
itemValue: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
min: (NumberConstructor | StringConstructor)[];
|
||||
max: (NumberConstructor | StringConstructor)[];
|
||||
padding: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
showLabels: BooleanConstructor;
|
||||
smooth: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
fill: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
autoDraw: BooleanConstructor;
|
||||
autoDrawDuration: (NumberConstructor | StringConstructor)[];
|
||||
autoDrawEasing: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
gradient: {
|
||||
type: import("vue").PropType<string[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
gradientDirection: {
|
||||
type: import("vue").PropType<"bottom" | "left" | "right" | "top">;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
};
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
labels: {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
labelSize: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
lineWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
id: StringConstructor;
|
||||
itemValue: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: import("vue").PropType<import("./util/line.js").SparklineItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
min: (NumberConstructor | StringConstructor)[];
|
||||
max: (NumberConstructor | StringConstructor)[];
|
||||
padding: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
showLabels: BooleanConstructor;
|
||||
smooth: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
fill: BooleanConstructor;
|
||||
}>>;
|
||||
export type VTrendline = InstanceType<typeof VTrendline>;
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
// Utilities
|
||||
import { computed, nextTick, ref, useId, watch, createElementVNode as _createElementVNode } from 'vue';
|
||||
import { makeLineProps } from "./util/line.js";
|
||||
import { genPath as _genPath } from "./util/path.js";
|
||||
import { genericComponent, getPropertyFromItem, PREFERS_REDUCED_MOTION, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVTrendlineProps = propsFactory({
|
||||
fill: Boolean,
|
||||
...makeLineProps()
|
||||
}, 'VTrendline');
|
||||
export const VTrendline = genericComponent()({
|
||||
name: 'VTrendline',
|
||||
props: makeVTrendlineProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const uid = useId();
|
||||
const id = computed(() => props.id || `trendline-${uid}`);
|
||||
const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000));
|
||||
const lastLength = ref(0);
|
||||
const path = ref(null);
|
||||
function genPoints(values, boundary) {
|
||||
const {
|
||||
minX,
|
||||
maxX,
|
||||
minY,
|
||||
maxY
|
||||
} = boundary;
|
||||
if (values.length === 1) {
|
||||
values = [values[0], values[0]];
|
||||
}
|
||||
const totalValues = values.length;
|
||||
const maxValue = props.max != null ? Number(props.max) : Math.max(...values);
|
||||
const minValue = props.min != null ? Number(props.min) : Math.min(...values);
|
||||
const gridX = (maxX - minX) / (totalValues - 1);
|
||||
const gridY = (maxY - minY) / (maxValue - minValue || 1);
|
||||
return values.map((value, index) => {
|
||||
return {
|
||||
x: minX + index * gridX,
|
||||
y: maxY - (value - minValue) * gridY,
|
||||
value
|
||||
};
|
||||
});
|
||||
}
|
||||
const hasLabels = computed(() => {
|
||||
return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
|
||||
});
|
||||
const lineWidth = computed(() => {
|
||||
return parseFloat(props.lineWidth) || 4;
|
||||
});
|
||||
const totalWidth = computed(() => Number(props.width));
|
||||
const boundary = computed(() => {
|
||||
const padding = Number(props.padding);
|
||||
return {
|
||||
minX: padding,
|
||||
maxX: totalWidth.value - padding,
|
||||
minY: padding,
|
||||
maxY: parseInt(props.height, 10) - padding
|
||||
};
|
||||
});
|
||||
const items = computed(() => props.modelValue.map(item => getPropertyFromItem(item, props.itemValue, item)));
|
||||
const parsedLabels = computed(() => {
|
||||
const labels = [];
|
||||
const points = genPoints(items.value, boundary.value);
|
||||
const len = points.length;
|
||||
for (let i = 0; labels.length < len; i++) {
|
||||
const item = points[i];
|
||||
let value = props.labels[i];
|
||||
if (!value) {
|
||||
value = typeof item === 'object' ? item.value : item;
|
||||
}
|
||||
labels.push({
|
||||
x: item.x,
|
||||
value: String(value)
|
||||
});
|
||||
}
|
||||
return labels;
|
||||
});
|
||||
watch(() => props.modelValue, async () => {
|
||||
await nextTick();
|
||||
if (!props.autoDraw || !path.value || PREFERS_REDUCED_MOTION()) return;
|
||||
const pathRef = path.value;
|
||||
const length = pathRef.getTotalLength();
|
||||
if (!props.fill) {
|
||||
// Initial setup to "hide" the line by using the stroke dash array
|
||||
pathRef.style.strokeDasharray = `${length}`;
|
||||
pathRef.style.strokeDashoffset = `${length}`;
|
||||
|
||||
// Force reflow to ensure the transition starts from this state
|
||||
pathRef.getBoundingClientRect();
|
||||
|
||||
// Animate the stroke dash offset to "draw" the line
|
||||
pathRef.style.transition = `stroke-dashoffset ${autoDrawDuration.value}ms ${props.autoDrawEasing}`;
|
||||
pathRef.style.strokeDashoffset = '0';
|
||||
} else {
|
||||
// Your existing logic for filled paths remains the same
|
||||
pathRef.style.transformOrigin = 'bottom center';
|
||||
pathRef.style.transition = 'none';
|
||||
pathRef.style.transform = `scaleY(0)`;
|
||||
pathRef.getBoundingClientRect();
|
||||
pathRef.style.transition = `transform ${autoDrawDuration.value}ms ${props.autoDrawEasing}`;
|
||||
pathRef.style.transform = `scaleY(1)`;
|
||||
}
|
||||
lastLength.value = length;
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
function genPath(fill) {
|
||||
const smoothValue = typeof props.smooth === 'boolean' ? props.smooth ? 8 : 0 : Number(props.smooth);
|
||||
return _genPath(genPoints(items.value, boundary.value), smoothValue, fill, parseInt(props.height, 10));
|
||||
}
|
||||
useRender(() => {
|
||||
const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
|
||||
return _createElementVNode("svg", {
|
||||
"display": "block",
|
||||
"stroke-width": parseFloat(props.lineWidth) ?? 4
|
||||
}, [_createElementVNode("defs", null, [_createElementVNode("linearGradient", {
|
||||
"id": id.value,
|
||||
"gradientUnits": "userSpaceOnUse",
|
||||
"x1": props.gradientDirection === 'left' ? '100%' : '0',
|
||||
"y1": props.gradientDirection === 'top' ? '100%' : '0',
|
||||
"x2": props.gradientDirection === 'right' ? '100%' : '0',
|
||||
"y2": props.gradientDirection === 'bottom' ? '100%' : '0'
|
||||
}, [gradientData.map((color, index) => _createElementVNode("stop", {
|
||||
"offset": index / Math.max(gradientData.length - 1, 1),
|
||||
"stop-color": color || 'currentColor'
|
||||
}, null))])]), hasLabels.value && _createElementVNode("g", {
|
||||
"key": "labels",
|
||||
"style": {
|
||||
textAnchor: 'middle',
|
||||
dominantBaseline: 'mathematical',
|
||||
fill: 'currentColor'
|
||||
}
|
||||
}, [parsedLabels.value.map((item, i) => _createElementVNode("text", {
|
||||
"x": item.x + lineWidth.value / 2 + lineWidth.value / 2,
|
||||
"y": parseInt(props.height, 10) - 4 + (parseInt(props.labelSize, 10) || 7 * 0.75),
|
||||
"font-size": Number(props.labelSize) || 7
|
||||
}, [slots.label?.({
|
||||
index: i,
|
||||
value: item.value
|
||||
}) ?? item.value]))]), _createElementVNode("path", {
|
||||
"ref": path,
|
||||
"d": genPath(props.fill),
|
||||
"fill": props.fill ? `url(#${id.value})` : 'none',
|
||||
"stroke": props.fill ? 'none' : `url(#${id.value})`
|
||||
}, null), props.fill && _createElementVNode("path", {
|
||||
"d": genPath(false),
|
||||
"fill": "none",
|
||||
"stroke": props.color ?? props.gradient?.[0]
|
||||
}, null)]);
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTrendline.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+1
@@ -0,0 +1 @@
|
||||
export { VSparkline } from './VSparkline.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VSparkline } from "./VSparkline.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VSparkline"],"sources":["../../../src/components/VSparkline/index.ts"],"sourcesContent":["export { VSparkline } from './VSparkline'\n"],"mappings":"SAASA,UAAU","ignoreList":[]}
|
||||
+170
@@ -0,0 +1,170 @@
|
||||
import type { PropType } from 'vue';
|
||||
export type SparklineItem = string | number | {
|
||||
value: number;
|
||||
};
|
||||
export declare const makeLineProps: <Defaults extends {
|
||||
autoDraw?: unknown;
|
||||
autoDrawDuration?: unknown;
|
||||
autoDrawEasing?: unknown;
|
||||
color?: unknown;
|
||||
gradient?: unknown;
|
||||
gradientDirection?: unknown;
|
||||
height?: unknown;
|
||||
labels?: unknown;
|
||||
labelSize?: unknown;
|
||||
lineWidth?: unknown;
|
||||
id?: unknown;
|
||||
itemValue?: unknown;
|
||||
modelValue?: unknown;
|
||||
min?: unknown;
|
||||
max?: unknown;
|
||||
padding?: unknown;
|
||||
showLabels?: unknown;
|
||||
smooth?: unknown;
|
||||
width?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
autoDraw: unknown extends Defaults["autoDraw"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["autoDraw"] ? boolean : boolean | Defaults["autoDraw"]>;
|
||||
default: unknown extends Defaults["autoDraw"] ? boolean : boolean | Defaults["autoDraw"];
|
||||
};
|
||||
autoDrawDuration: unknown extends Defaults["autoDrawDuration"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["autoDrawDuration"] ? string | number : string | number | Defaults["autoDrawDuration"]>;
|
||||
default: unknown extends Defaults["autoDrawDuration"] ? string | number : Defaults["autoDrawDuration"] | NonNullable<string | number>;
|
||||
};
|
||||
autoDrawEasing: unknown extends Defaults["autoDrawEasing"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["autoDrawEasing"] ? string : string | Defaults["autoDrawEasing"]>;
|
||||
default: unknown extends Defaults["autoDrawEasing"] ? string : string | Defaults["autoDrawEasing"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
gradient: unknown extends Defaults["gradient"] ? {
|
||||
type: PropType<string[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<string[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["gradient"] ? string[] : string[] | Defaults["gradient"]>;
|
||||
default: unknown extends Defaults["gradient"] ? string[] : string[] | Defaults["gradient"];
|
||||
};
|
||||
gradientDirection: unknown extends Defaults["gradientDirection"] ? {
|
||||
type: PropType<'top' | 'bottom' | 'left' | 'right'>;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'top' | 'bottom' | 'left' | 'right'>;
|
||||
validator: (val: string) => boolean;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["gradientDirection"] ? "bottom" | "left" | "right" | "top" : "bottom" | "left" | "right" | "top" | Defaults["gradientDirection"]>;
|
||||
default: unknown extends Defaults["gradientDirection"] ? "bottom" | "left" | "right" | "top" : Defaults["gradientDirection"] | NonNullable<"bottom" | "left" | "right" | "top">;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
labels: unknown extends Defaults["labels"] ? {
|
||||
type: PropType<SparklineItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<SparklineItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["labels"] ? SparklineItem[] : SparklineItem[] | Defaults["labels"]>;
|
||||
default: unknown extends Defaults["labels"] ? SparklineItem[] : SparklineItem[] | Defaults["labels"];
|
||||
};
|
||||
labelSize: unknown extends Defaults["labelSize"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["labelSize"] ? string | number : string | number | Defaults["labelSize"]>;
|
||||
default: unknown extends Defaults["labelSize"] ? string | number : Defaults["labelSize"] | NonNullable<string | number>;
|
||||
};
|
||||
lineWidth: unknown extends Defaults["lineWidth"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["lineWidth"] ? string | number : string | number | Defaults["lineWidth"]>;
|
||||
default: unknown extends Defaults["lineWidth"] ? string | number : Defaults["lineWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
id: unknown extends Defaults["id"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["id"] ? string : string | Defaults["id"]>;
|
||||
default: unknown extends Defaults["id"] ? string : string | Defaults["id"];
|
||||
};
|
||||
itemValue: unknown extends Defaults["itemValue"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["itemValue"] ? string : string | Defaults["itemValue"]>;
|
||||
default: unknown extends Defaults["itemValue"] ? string : string | Defaults["itemValue"];
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: PropType<SparklineItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<SparklineItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? SparklineItem[] : SparklineItem[] | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? SparklineItem[] : SparklineItem[] | Defaults["modelValue"];
|
||||
};
|
||||
min: unknown extends Defaults["min"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["min"] ? string | number : string | number | Defaults["min"]>;
|
||||
default: unknown extends Defaults["min"] ? string | number : Defaults["min"] | NonNullable<string | number>;
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["max"] ? string | number : string | number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? string | number : Defaults["max"] | NonNullable<string | number>;
|
||||
};
|
||||
padding: unknown extends Defaults["padding"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["padding"] ? string | number : string | number | Defaults["padding"]>;
|
||||
default: unknown extends Defaults["padding"] ? string | number : Defaults["padding"] | NonNullable<string | number>;
|
||||
};
|
||||
showLabels: unknown extends Defaults["showLabels"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["showLabels"] ? boolean : boolean | Defaults["showLabels"]>;
|
||||
default: unknown extends Defaults["showLabels"] ? boolean : boolean | Defaults["showLabels"];
|
||||
};
|
||||
smooth: unknown extends Defaults["smooth"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["smooth"] ? string | number | boolean : string | number | boolean | Defaults["smooth"]>;
|
||||
default: unknown extends Defaults["smooth"] ? string | number | boolean : Defaults["smooth"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
};
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
// Utilities
|
||||
import { propsFactory } from "../../../util/index.js"; // Types
|
||||
export const makeLineProps = propsFactory({
|
||||
autoDraw: Boolean,
|
||||
autoDrawDuration: [Number, String],
|
||||
autoDrawEasing: {
|
||||
type: String,
|
||||
default: 'ease'
|
||||
},
|
||||
color: String,
|
||||
gradient: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
gradientDirection: {
|
||||
type: String,
|
||||
validator: val => ['top', 'bottom', 'left', 'right'].includes(val),
|
||||
default: 'top'
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 75
|
||||
},
|
||||
labels: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
labelSize: {
|
||||
type: [Number, String],
|
||||
default: 7
|
||||
},
|
||||
lineWidth: {
|
||||
type: [String, Number],
|
||||
default: 4
|
||||
},
|
||||
id: String,
|
||||
itemValue: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
min: [String, Number],
|
||||
max: [String, Number],
|
||||
padding: {
|
||||
type: [String, Number],
|
||||
default: 8
|
||||
},
|
||||
showLabels: Boolean,
|
||||
smooth: [Boolean, String, Number],
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 300
|
||||
}
|
||||
}, 'Line');
|
||||
//# sourceMappingURL=line.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"line.js","names":["propsFactory","makeLineProps","autoDraw","Boolean","autoDrawDuration","Number","String","autoDrawEasing","type","default","color","gradient","Array","gradientDirection","validator","val","includes","height","labels","labelSize","lineWidth","id","itemValue","modelValue","min","max","padding","showLabels","smooth","width"],"sources":["../../../../src/components/VSparkline/util/line.ts"],"sourcesContent":["// Utilities\nimport { propsFactory } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type SparklineItem = string | number | { value: number }\n\nexport const makeLineProps = propsFactory({\n autoDraw: Boolean,\n autoDrawDuration: [Number, String],\n autoDrawEasing: {\n type: String,\n default: 'ease',\n },\n color: String,\n gradient: {\n type: Array as PropType<string[]>,\n default: () => ([]),\n },\n gradientDirection: {\n type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,\n validator: (val: string) => ['top', 'bottom', 'left', 'right'].includes(val),\n default: 'top',\n },\n height: {\n type: [String, Number],\n default: 75,\n },\n labels: {\n type: Array as PropType<SparklineItem[]>,\n default: () => ([]),\n },\n labelSize: {\n type: [Number, String],\n default: 7,\n },\n lineWidth: {\n type: [String, Number],\n default: 4,\n },\n id: String,\n itemValue: {\n type: String,\n default: 'value',\n },\n modelValue: {\n type: Array as PropType<SparklineItem[]>,\n default: () => ([]),\n },\n min: [String, Number],\n max: [String, Number],\n padding: {\n type: [String, Number],\n default: 8,\n },\n showLabels: Boolean,\n smooth: [Boolean, String, Number],\n width: {\n type: [Number, String],\n default: 300,\n },\n}, 'Line')\n"],"mappings":"AAAA;AAAA,SACSA,YAAY,kCAErB;AAKA,OAAO,MAAMC,aAAa,GAAGD,YAAY,CAAC;EACxCE,QAAQ,EAAEC,OAAO;EACjBC,gBAAgB,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EAClCC,cAAc,EAAE;IACdC,IAAI,EAAEF,MAAM;IACZG,OAAO,EAAE;EACX,CAAC;EACDC,KAAK,EAAEJ,MAAM;EACbK,QAAQ,EAAE;IACRH,IAAI,EAAEI,KAA2B;IACjCH,OAAO,EAAEA,CAAA,KAAO;EAClB,CAAC;EACDI,iBAAiB,EAAE;IACjBL,IAAI,EAAEF,MAAuD;IAC7DQ,SAAS,EAAGC,GAAW,IAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAACC,QAAQ,CAACD,GAAG,CAAC;IAC5EN,OAAO,EAAE;EACX,CAAC;EACDQ,MAAM,EAAE;IACNT,IAAI,EAAE,CAACF,MAAM,EAAED,MAAM,CAAC;IACtBI,OAAO,EAAE;EACX,CAAC;EACDS,MAAM,EAAE;IACNV,IAAI,EAAEI,KAAkC;IACxCH,OAAO,EAAEA,CAAA,KAAO;EAClB,CAAC;EACDU,SAAS,EAAE;IACTX,IAAI,EAAE,CAACH,MAAM,EAAEC,MAAM,CAAC;IACtBG,OAAO,EAAE;EACX,CAAC;EACDW,SAAS,EAAE;IACTZ,IAAI,EAAE,CAACF,MAAM,EAAED,MAAM,CAAC;IACtBI,OAAO,EAAE;EACX,CAAC;EACDY,EAAE,EAAEf,MAAM;EACVgB,SAAS,EAAE;IACTd,IAAI,EAAEF,MAAM;IACZG,OAAO,EAAE;EACX,CAAC;EACDc,UAAU,EAAE;IACVf,IAAI,EAAEI,KAAkC;IACxCH,OAAO,EAAEA,CAAA,KAAO;EAClB,CAAC;EACDe,GAAG,EAAE,CAAClB,MAAM,EAAED,MAAM,CAAC;EACrBoB,GAAG,EAAE,CAACnB,MAAM,EAAED,MAAM,CAAC;EACrBqB,OAAO,EAAE;IACPlB,IAAI,EAAE,CAACF,MAAM,EAAED,MAAM,CAAC;IACtBI,OAAO,EAAE;EACX,CAAC;EACDkB,UAAU,EAAExB,OAAO;EACnByB,MAAM,EAAE,CAACzB,OAAO,EAAEG,MAAM,EAAED,MAAM,CAAC;EACjCwB,KAAK,EAAE;IACLrB,IAAI,EAAE,CAACH,MAAM,EAAEC,MAAM,CAAC;IACtBG,OAAO,EAAE;EACX;AACF,CAAC,EAAE,MAAM,CAAC","ignoreList":[]}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
import { Point } from '../VSparkline.js';
|
||||
/**
|
||||
* From https://github.com/unsplash/react-trend/blob/master/src/helpers/DOM.helpers.js#L18
|
||||
*/
|
||||
export declare function genPath(points: Point[], radius: number, fill?: boolean, height?: number): string;
|
||||
/**
|
||||
* https://en.wikipedia.org/wiki/Collinearity
|
||||
* x=(x1+x2)/2
|
||||
* y=(y1+y2)/2
|
||||
*/
|
||||
export declare function checkCollinear(p0: Point, p1: Point, p2: Point): boolean;
|
||||
export declare function getDistance(p1: Point, p2: Point): number;
|
||||
export declare function moveTo(to: Point, from: Point, radius: number): {
|
||||
x: any;
|
||||
y: any;
|
||||
};
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
|
||||
// import { checkCollinear, getDistance, moveTo } from './math'
|
||||
|
||||
/**
|
||||
* From https://github.com/unsplash/react-trend/blob/master/src/helpers/DOM.helpers.js#L18
|
||||
*/
|
||||
export function genPath(points, radius, fill = false, height = 75) {
|
||||
if (points.length === 0) return '';
|
||||
const start = points.shift();
|
||||
const end = points[points.length - 1];
|
||||
return (fill ? `M${start.x} ${height - start.x + 2} L${start.x} ${start.y}` : `M${start.x} ${start.y}`) + points.map((point, index) => {
|
||||
const next = points[index + 1];
|
||||
const prev = points[index - 1] || start;
|
||||
const isCollinear = next && checkCollinear(next, point, prev);
|
||||
if (!next || isCollinear) {
|
||||
return `L${point.x} ${point.y}`;
|
||||
}
|
||||
const threshold = Math.min(getDistance(prev, point), getDistance(next, point));
|
||||
const isTooCloseForRadius = threshold / 2 < radius;
|
||||
const radiusForPoint = isTooCloseForRadius ? threshold / 2 : radius;
|
||||
const before = moveTo(prev, point, radiusForPoint);
|
||||
const after = moveTo(next, point, radiusForPoint);
|
||||
return `L${before.x} ${before.y}S${point.x} ${point.y} ${after.x} ${after.y}`;
|
||||
}).join('') + (fill ? `L${end.x} ${height - start.x + 2} Z` : '');
|
||||
}
|
||||
function int(value) {
|
||||
return parseInt(value, 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* https://en.wikipedia.org/wiki/Collinearity
|
||||
* x=(x1+x2)/2
|
||||
* y=(y1+y2)/2
|
||||
*/
|
||||
export function checkCollinear(p0, p1, p2) {
|
||||
return int(p0.x + p2.x) === int(2 * p1.x) && int(p0.y + p2.y) === int(2 * p1.y);
|
||||
}
|
||||
export function getDistance(p1, p2) {
|
||||
return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
|
||||
}
|
||||
export function moveTo(to, from, radius) {
|
||||
const vector = {
|
||||
x: to.x - from.x,
|
||||
y: to.y - from.y
|
||||
};
|
||||
const length = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
|
||||
const unitVector = {
|
||||
x: vector.x / length,
|
||||
y: vector.y / length
|
||||
};
|
||||
return {
|
||||
x: from.x + unitVector.x * radius,
|
||||
y: from.y + unitVector.y * radius
|
||||
};
|
||||
}
|
||||
//# sourceMappingURL=path.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user