@el-agala/charts 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
type ChartType = 'line' | 'bar' | 'pie' | 'scatter' | 'radar' | 'gauge';
|
|
2
|
+
interface Dataset {
|
|
3
|
+
name?: string;
|
|
4
|
+
data: number[] | number[][];
|
|
5
|
+
color?: string;
|
|
6
|
+
areaStyle?: boolean;
|
|
7
|
+
smooth?: boolean;
|
|
8
|
+
}
|
|
9
|
+
interface Indicator {
|
|
10
|
+
name: string;
|
|
11
|
+
max: number;
|
|
12
|
+
}
|
|
13
|
+
interface Props {
|
|
14
|
+
type: ChartType;
|
|
15
|
+
labels?: string[];
|
|
16
|
+
datasets: Dataset[];
|
|
17
|
+
height?: number;
|
|
18
|
+
stacked?: boolean;
|
|
19
|
+
indicators?: Indicator[];
|
|
20
|
+
max?: number;
|
|
21
|
+
}
|
|
22
|
+
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
23
|
+
labels: string[];
|
|
24
|
+
height: number;
|
|
25
|
+
stacked: boolean;
|
|
26
|
+
indicators: Indicator[];
|
|
27
|
+
max: number;
|
|
28
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
29
|
+
export default _default;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Reads HSL design tokens from the document at runtime and returns
|
|
3
|
+
* an ECharts-compatible theme palette.
|
|
4
|
+
*
|
|
5
|
+
* Tokens are read fresh on every call so theme switches are reflected
|
|
6
|
+
* immediately. Falls back to sensible defaults (SSR / test).
|
|
7
|
+
*/
|
|
8
|
+
export declare function useChartTheme(): {
|
|
9
|
+
getBaseOption: (type: "line" | "bar" | "pie" | "scatter" | "radar" | "gauge") => {
|
|
10
|
+
tooltip: {
|
|
11
|
+
trigger: "item";
|
|
12
|
+
backgroundColor: string;
|
|
13
|
+
borderColor: string;
|
|
14
|
+
borderWidth: number;
|
|
15
|
+
textStyle: {
|
|
16
|
+
color: string;
|
|
17
|
+
};
|
|
18
|
+
show?: undefined;
|
|
19
|
+
};
|
|
20
|
+
legend: {
|
|
21
|
+
textStyle: {
|
|
22
|
+
color: string;
|
|
23
|
+
};
|
|
24
|
+
bottom?: undefined;
|
|
25
|
+
};
|
|
26
|
+
} | {
|
|
27
|
+
tooltip: {
|
|
28
|
+
trigger: "item";
|
|
29
|
+
backgroundColor: string;
|
|
30
|
+
borderColor: string;
|
|
31
|
+
borderWidth: number;
|
|
32
|
+
textStyle: {
|
|
33
|
+
color: string;
|
|
34
|
+
};
|
|
35
|
+
show?: undefined;
|
|
36
|
+
};
|
|
37
|
+
legend: {
|
|
38
|
+
textStyle: {
|
|
39
|
+
color: string;
|
|
40
|
+
};
|
|
41
|
+
bottom: number;
|
|
42
|
+
};
|
|
43
|
+
splitLineColor: string;
|
|
44
|
+
axisLineColor: string;
|
|
45
|
+
} | {
|
|
46
|
+
tooltip: {
|
|
47
|
+
show: boolean;
|
|
48
|
+
trigger?: undefined;
|
|
49
|
+
backgroundColor?: undefined;
|
|
50
|
+
borderColor?: undefined;
|
|
51
|
+
borderWidth?: undefined;
|
|
52
|
+
textStyle?: undefined;
|
|
53
|
+
};
|
|
54
|
+
} | {
|
|
55
|
+
tooltip: {
|
|
56
|
+
trigger: "item" | "axis";
|
|
57
|
+
backgroundColor: string;
|
|
58
|
+
borderColor: string;
|
|
59
|
+
borderWidth: number;
|
|
60
|
+
textStyle: {
|
|
61
|
+
color: string;
|
|
62
|
+
};
|
|
63
|
+
show?: undefined;
|
|
64
|
+
};
|
|
65
|
+
grid: {
|
|
66
|
+
left: string;
|
|
67
|
+
right: string;
|
|
68
|
+
bottom: string;
|
|
69
|
+
containLabel: boolean;
|
|
70
|
+
};
|
|
71
|
+
xAxis: {
|
|
72
|
+
type: "value" | "category";
|
|
73
|
+
axisLine: {
|
|
74
|
+
lineStyle: {
|
|
75
|
+
color: string;
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
axisLabel: {
|
|
79
|
+
color: string;
|
|
80
|
+
};
|
|
81
|
+
splitLine: {
|
|
82
|
+
lineStyle: {
|
|
83
|
+
color: string;
|
|
84
|
+
type: "dashed";
|
|
85
|
+
};
|
|
86
|
+
show?: undefined;
|
|
87
|
+
} | {
|
|
88
|
+
show: boolean;
|
|
89
|
+
lineStyle?: undefined;
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
yAxis: {
|
|
93
|
+
type: "value";
|
|
94
|
+
axisLine: {
|
|
95
|
+
show: boolean;
|
|
96
|
+
};
|
|
97
|
+
axisLabel: {
|
|
98
|
+
color: string;
|
|
99
|
+
};
|
|
100
|
+
splitLine: {
|
|
101
|
+
lineStyle: {
|
|
102
|
+
color: string;
|
|
103
|
+
type: "dashed";
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
getColorPalette: () => string[];
|
|
109
|
+
};
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.base-chart[data-v-624671ab]{width:100%;position:relative}
|
package/dist/index.d.ts
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@el-agala/charts",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Chart components for @el-agala/ui — powered by Apache ECharts",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"module": "./dist/agala-charts.es.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"default": "./dist/agala-charts.es.js"
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "vue-tsc --noEmit && vite build",
|
|
21
|
+
"dev": "vite build --watch"
|
|
22
|
+
},
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"vue": "^3.3.0"
|
|
25
|
+
},
|
|
26
|
+
"dependencies": {
|
|
27
|
+
"echarts": "^5.6.0",
|
|
28
|
+
"vue-echarts": "^7.0.3"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@vitejs/plugin-vue": "^6.0.6",
|
|
32
|
+
"vite": "^8.0.10",
|
|
33
|
+
"vite-plugin-dts": "^4.5.3",
|
|
34
|
+
"vue-tsc": "^3.2.8",
|
|
35
|
+
"typescript": "~5.6.0"
|
|
36
|
+
},
|
|
37
|
+
"repository": {
|
|
38
|
+
"type": "git",
|
|
39
|
+
"url": "https://github.com/el-agala/ui.git"
|
|
40
|
+
},
|
|
41
|
+
"author": "Agala",
|
|
42
|
+
"license": "MIT",
|
|
43
|
+
"publishConfig": {
|
|
44
|
+
"access": "public"
|
|
45
|
+
}
|
|
46
|
+
}
|