graphieros.npmx.social
[READ-ONLY] Mirror of https://github.com/graphieros/vue-data-ui. An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling
vue-data-ui.graphieros.com/
charts
components-library
dashboard
data-storytelling
data-visualization
donut
gauge
heatmap
quadrant
radar
rating-stars
scatter
screenshot
skeleton-loader
sparkline
table
vue-data-ui
vue3
vuejs
vuejs3
Add llms.txt
author
graphieros
date
(Apr 3, 2025, 9:35 PM +0200)
commit
f97aefef
f97aefefb189a3baaaf6b3496dff10b7bc6e2cc9
parent
06d015a2
06d015a2cb2254a742243cfacf4f552c12d6e858
+245
-3
+232
llms.txt
+232
llms.txt
···
1
+
# Vue Data UI
2
+
3
+
> VueDataUI is a Vue 3 data visualization library providing numerous chart components (pie/donut, bar, line, radar, etc.), as well as tables and rating components. This guide offers ready-to-use examples and best practices for integrating VueDataUI into your Vue application. The content is optimized for AI code editors (GitHub Copilot, Cursor, etc.) to suggest correct usage patterns.
4
+
5
+
Important notes:
6
+
- This library is *not* compatible with Vue2. It is to be used with Vue3.
7
+
- **Import and CSS:** Always import the required VueDataUI component and ensure you include the library's CSS.
8
+
- **Reactive Data:** Use Vue's reactivity (`ref` or `computed`) to manage your `dataset` and `config` objects.
9
+
- **Component Customization:** Use the config object to customize appearance (colors, legends, chart dimensions, etc.) based on your specific needs.
10
+
- **CLI Utilization:** Leverage `vue-data-ui-cli` for quick scaffolding of new components, ensuring proper structure and reducing setup errors.
11
+
- **AI Integration:** With these clear examples, AI code editors should suggest correct imports, prop bindings, and data structures, making it easier to build interactive charts with VueDataUI.
12
+
13
+
## Docs
14
+
15
+
- [README](https://github.com/graphieros/vue-data-ui/blob/master/README.md): Readme file of the vue-data-ui library
16
+
- [Documentation]https://vue-data-ui.graphieros.com/: Official documentation website for the vue-data-ui library
17
+
18
+
## Getting Started with VueDataUI
19
+
20
+
To begin, install the library and include its stylesheet:
21
+
22
+
npm install vue-data-ui
23
+
24
+
In your main entry file (e.g., main.js or main.ts), import the CSS and optionally register components globally:
25
+
26
+
import { createApp } from 'vue';
27
+
import App from './App.vue';
28
+
import 'vue-data-ui/style.css'; // Include VueDataUI styles
29
+
30
+
// Example: register a component globally (optional)
31
+
import { VueUiXy } from 'vue-data-ui';
32
+
const app = createApp(App);
33
+
app.component('VueUiXy', VueUiXy);
34
+
35
+
app.mount('#app');
36
+
37
+
You can also import components locally within Vue single-file components (see examples below). VueDataUI offers a **universal component** `<VueDataUi>` that can load any chart dynamically. For example:
38
+
39
+
<template>
40
+
<!-- Using the universal component to load a Donut chart -->
41
+
<VueDataUi component="VueUiDonut" :dataset="dataset" :config="config" />
42
+
</template>
43
+
44
+
<script setup>
45
+
import { ref } from 'vue';
46
+
import { VueDataUi } from 'vue-data-ui'; // universal component
47
+
import 'vue-data-ui/style.css'; // ensure styles are imported
48
+
49
+
const dataset = ref([ /* ... data ... */ ]);
50
+
const config = ref({ /* ... config ... */ });
51
+
</script>
52
+
53
+
Using `VueDataUi` will lazy-load only the specified chart component.
54
+
55
+
## XY Chart Example
56
+
57
+
For line (or area) charts, bar chart, or combined charts, use the `VueUiXy` component. The dataset is an array of data points with the following datastructure:
58
+
59
+
type VueUiXyDatasetItem = {
60
+
name: string;
61
+
series: number[];
62
+
type: "bar" | "line" | "plot";
63
+
color?: string;
64
+
dashed?: boolean;
65
+
useTag?: "start" | "end" | "none";
66
+
showSerieName?: "start" | "end";
67
+
useArea?: boolean;
68
+
dataLabels?: boolean;
69
+
useProgression?: boolean; // Display a trend line
70
+
scaleSteps?: number; // The preferred number of scale segments on the y axis
71
+
scaleLabel?: string;
72
+
scaleMax?: number; // Force the max scale value
73
+
scaleMin?: number; // Force the min scale value
74
+
autoScaling?: boolean;
75
+
stackRatio?: number; // In stacked mode, sets the height ratio of the datapoint
76
+
comments?: string[]; // Provide an array of comments which will display at same index as the series item
77
+
shape?: Shape; // circle, triangle, square, pentagon, hexagon, star
78
+
smooth?: boolean; // Display as a spline
79
+
prefix?: string; // Use a prefix on data labels
80
+
suffix?: string; // Use a suffix on data labels
81
+
}
82
+
83
+
<!-- LineChart.vue - example of a basic line chart -->
84
+
<template>
85
+
<VueUiXy :dataset="dataset" :config="config" />
86
+
</template>
87
+
88
+
<script setup>
89
+
import { ref } from 'vue';
90
+
import { VueUiXy } from 'vue-data-ui'; // import the XY chart component
91
+
92
+
// Reactive dataset: array of points with minimal required attributes
93
+
const dataset = ref([
94
+
{ name: 'Serie A', series: [1, 2, 3, 5], type: 'line' },
95
+
{ name: 'Serie B', series: [13, 21, 3, 2], type: 'bar' },
96
+
{ name: 'Serie C', series: [8, 2, 3, 6], type: 'plot' },
97
+
]);
98
+
99
+
// Minimal config for the line chart (optional). The TS type for the config is VueUiXyConfig
100
+
const config = ref({
101
+
chart: {
102
+
fontFamily: "inherit",
103
+
backgroundColor: "#FFFFFF",
104
+
color: "#1A1A1A",
105
+
grid: {
106
+
showHorizontalLines: false,
107
+
showVerticalLines: false,
108
+
labels: {
109
+
show: true, // shows datapoint labels if the
110
+
color: "#1A1A1A",
111
+
xAxisLabels: {
112
+
values: ['01-01-2026', '02-01-2026', '03-01-2026', '04-01-2026'], // The values displayed on the x axis (time labels)
113
+
rotation: 0, // to rotate the x axis labels
114
+
}
115
+
}
116
+
},
117
+
title: {
118
+
text: 'Title',
119
+
color: '#1A1A1A'
120
+
},
121
+
bar: { // Specific config for bar types
122
+
labels: {
123
+
show: true,
124
+
}
125
+
},
126
+
line: { // Specific config for line types
127
+
labels: {
128
+
show: true
129
+
}
130
+
},
131
+
plot: { // Specific config for plot types
132
+
labels: {
133
+
show: true
134
+
}
135
+
},
136
+
tooltip: {
137
+
show: true,
138
+
customFormat: null, // Provide a custom html content with a callback, for example: ({ seriesIndex, datapoint, series, config, bars, lines, plots }) => { return `Your content` }
139
+
}
140
+
}
141
+
});
142
+
</script>
143
+
144
+
## Sparkline Chart Example
145
+
146
+
Sparkline charts are mini charts for showing trends. The `VueUiSparkline` component renders a small, minimalist line chart. The dataset is an array of data points with the following datastructure:
147
+
148
+
type VueUiSparklineDatasetItem = {
149
+
period: string // For example, a date
150
+
value: number
151
+
}
152
+
153
+
<!-- SparklineChart.vue - example of a sparkline chart -->
154
+
<template>
155
+
<VueUiSparkline :dataset="dataset" :config="config" />
156
+
</template>
157
+
158
+
<script setup>
159
+
import { ref } from 'vue';
160
+
import { VueUiSparkline } from 'vue-data-ui'; // import the Sparkline component
161
+
162
+
163
+
// Reactive dataset: an array of objects of type VueUiSparklineDatasetItem
164
+
const dataset = ref([
165
+
{ period: 'January', value: 1 },
166
+
{ period: 'February', value: 2 },
167
+
{ period: 'March', value: 3 },
168
+
]);
169
+
170
+
// Minimal config example for the sparkline chart (optional). Full config type is VueUiSparklineConfig
171
+
const config = ref({
172
+
type: 'line', // or 'bar'
173
+
style: {
174
+
area: {
175
+
show: true,
176
+
},
177
+
dataLabel: {
178
+
show: true
179
+
},
180
+
line: {
181
+
color: '#6376DD'
182
+
},
183
+
plot: {
184
+
show: true,
185
+
radius: 4
186
+
},
187
+
title: {
188
+
show: true,
189
+
text: 'Title'
190
+
},
191
+
tooltip: {
192
+
show: true
193
+
},
194
+
verticalIndicator: {
195
+
show: true,
196
+
}
197
+
}
198
+
});
199
+
</script>
200
+
201
+
Notes:
202
+
- Ideal for embedding in dashboards or tables to indicate trends.
203
+
204
+
## Using the vue-data-ui-cli
205
+
206
+
VueDataUI offers a CLI tool, `vue-data-ui-cli`, to quickly generate chart component boilerplates.
207
+
208
+
### Installation:
209
+
210
+
npm install -g vue-data-ui-cli
211
+
212
+
This installs a global command `vdui-cli` (short for VueDataUI CLI).
213
+
214
+
### Usage:
215
+
216
+
Run the CLI in your project directory:
217
+
218
+
vdui-cli
219
+
220
+
You'll be prompted for:
221
+
- **Component Type:** Select the VueDataUI chart type (e.g., Donut, Radar, etc.).
222
+
- **Reactive API:** Choose how to manage reactive data (using `ref` or `computed`).
223
+
- **TypeScript Usage:** Decide if the component should be in TypeScript or JavaScript.
224
+
- **Component Name:** Provide a name for your component (e.g., `MyDonutChart`).
225
+
- **Target Directory:** Specify where to create the new component file.
226
+
227
+
The CLI will generate a Vue single-file component pre-populated with:
228
+
- Correct imports for VueDataUI components.
229
+
- Sample reactive `dataset` and `config` objects.
230
+
- A template ready to render the selected chart.
231
+
232
+
This tool helps maintain consistency and speeds up development by providing a reliable boilerplate.
+13
-3
vite.config.js
+13
-3
vite.config.js
···
2
2
import { resolve } from "path";
3
3
import vue from "@vitejs/plugin-vue";
4
4
import removeAttr from 'remove-attr';
5
+
import fs from "fs";
5
6
6
7
const prod = process.env.NODE_ENV === 'production';
7
8
···
10
11
plugins: [
11
12
vue(),
12
13
removeAttr({
13
-
extensions: [ 'vue' ],
14
-
attributes: prod ? [ 'data-cy' ] : [],
15
-
})
14
+
extensions: [ 'vue' ],
15
+
attributes: prod ? [ 'data-cy' ] : [],
16
+
}),
17
+
{
18
+
name: "copy-llms-file",
19
+
closeBundle() {
20
+
const src = resolve(__dirname, "llms.txt");
21
+
const dest = resolve(__dirname, "dist", "llms.txt");
22
+
fs.copyFileSync(src, dest);
23
+
console.log("llms.txt copied to dist folder.");
24
+
},
25
+
},
16
26
],
17
27
build: {
18
28
lib: {