Skip to content

Commit f97aefe

Browse files
graphierosgraphieros
committed
Add llms.txt
1 parent 06d015a commit f97aefe

File tree

2 files changed

+245
-3
lines changed

2 files changed

+245
-3
lines changed

‎llms.txt

+232
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
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.

‎vite.config.js

+13-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
22
import { resolve } from "path";
33
import vue from "@vitejs/plugin-vue";
44
import removeAttr from 'remove-attr';
5+
import fs from "fs";
56

67
const prod = process.env.NODE_ENV === 'production';
78

@@ -10,9 +11,18 @@ export default defineConfig({
1011
plugins: [
1112
vue(),
1213
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+
},
1626
],
1727
build: {
1828
lib: {

0 commit comments

Comments
 (0)