Skip to content

Commit ef264d8

Browse files
graphierosgraphieros
committed
Improved documentation
1 parent fbfcec3 commit ef264d8

File tree

4 files changed

+338
-25
lines changed

4 files changed

+338
-25
lines changed

‎README.md‎

Lines changed: 116 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717

1818
[Interactive documentation](https://vue-data-ui.graphieros.com/)
1919

20-
A user-empowering data visualization Vue components library.
20+
A user-empowering data visualization Vue components library for eloquent data storytelling.
2121

22-
Available components:
22+
Available components
2323

2424
## Charts
2525

@@ -94,8 +94,8 @@ npm i vue-data-ui
9494

9595
You can declare components globally in your main.js:
9696

97-
```
98-
import { createApp } from 'vue'
97+
```js
98+
import { createApp } from "vue";
9999
import App from "./App.vue";
100100
// Include the css;
101101
import "vue-data-ui/style.css";
@@ -106,20 +106,18 @@ import { VueUiRadar } from "vue-data-ui";
106106
const app = createApp(App);
107107

108108
app.component("VueUiRadar", VueUiRadar);
109-
app.mount('#app');
109+
app.mount("#app");
110110
```
111111

112112
Or you can import just what you need in your files:
113113

114-
```
115-
<script setup>
116-
import { VueUiRadar, VueUiXy } from "vue-data-ui";
117-
</script>
114+
```js
115+
<script setup>import {(VueUiRadar, VueUiXy)} from "vue-data-ui";</script>
118116
```
119117

120118
Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using. You can of course use the slots provided, if the target component has them.
121119

122-
```
120+
```js
123121
<script setup>
124122
import { ref } from "vue";
125123
import { VueDataUi } from "vue-data-ui";
@@ -155,7 +153,7 @@ Types are available in the 'vue-data-ui.d.ts' file under the types directory of
155153

156154
Charts with tooltips have a config option to customize tooltip contents:
157155

158-
```
156+
```js
159157

160158
customFormat: ({ seriesIndex, datapoint, series, config }) => {
161159
return `<div>${ ... }</div>`;
@@ -169,17 +167,14 @@ customFormat: ({ seriesIndex, datapoint, series, config }) => {
169167

170168
Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
171169

172-
```
170+
```html
173171
<VueUiXy :dataset="dataset" :config="config">
174172
<template #svg="{ svg }">
175173
<foreignObject x="100" y="0" height="100" width="150">
176-
<div>
177-
This is a custom caption
178-
</div>
174+
<div>This is a custom caption</div>
179175
</foreignObject>
180176
</template>
181177
</VueUiXy>
182-
183178
```
184179

185180
The svg slot also works when using the VueDataUi universal component, if the component it wraps supports it.
@@ -202,12 +197,10 @@ All charts expose a #legend slot except for:
202197
The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
203198
It is recommended to set the show legend config attribute to false, to hide the default legend.
204199

205-
```
200+
```html
206201
<VueUiDonut :config="config" :dataset="dataset">
207202
<template #legend="{ legend }">
208-
<div v-for="item in legend">
209-
{{ legend.name }}
210-
</div>
203+
<div v-for="item in legend">{{ legend.name }}</div>
211204
</template>
212205
</VueUiDonut>
213206
```
@@ -260,7 +253,7 @@ The following charts bear these slots:
260253
261254
```
262255

263-
```
256+
```html
264257
<VueUiDonut :config="config" :dataset="dataset">
265258
<template #tooltip-before={ datapoint, seriesIndex, dataset, config }">
266259
<div>
@@ -281,9 +274,110 @@ The #tooltip-before & #tooltip-after slots also works when using the VueDataUi u
281274

282275
If for some reason you can't access the documentation website and need to get the default config object for a component:
283276

284-
```
277+
```js
285278
import { getVueDataUiConfig } from "vue-data-ui";
286279

287280
const defaultConfigXy = getVueDataUiConfig("vue_ui_xy");
281+
```
288282

283+
# Available components : details
284+
285+
Type definitions are available in the `vue-data-ui.d.ts` file in the `dist/types` directory.
286+
287+
### Universal component
288+
289+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
290+
| ----------- | ---------------------- | ---------------------- | ----------------------- | ---------------------- | ---------------------- |
291+
| `VueDataUi` | (depends on component) | (depends on component) | (depends on component) | (depends on component) | (depends on component) |
292+
293+
### Quick chart
294+
295+
From the dataset you pass into the props, this component will produce the most adapted chart (either a line, bar or donut chart)
296+
297+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
298+
| ----------------- | ------------------------ | ----------------------- | ------------------------------------------------------------------- | ---------------------------------------------- | -------------- |
299+
| `VueUiQuickChart` | `VueUiQuickChartDataset` | `VueUiQuickChartConfig` | `@selectDatapoint`, `@selectLegend`, `generatePdf`, `generateImage` | `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
300+
301+
### Mini charts
302+
303+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
304+
| --------------------- | ---------------------------------- | --------------------------- | ----------------------- | ------ | -------------- |
305+
| `VueUiSparkline` | `VueUiSparklineDatasetItem[]` | `VueUiSparklineConfig` | `@selectDatapoint` | `#svg` | ❌ |
306+
| `VueUiSparkbar` | `VueUiSparkbarDatasetItem[]` | `VueUiSparkbarConfig` | `@selectDatapoint` | ❌ | ❌ |
307+
| `VueUiSparkStackbar` | `VueUiSparkStackbarDatasetItem[]` | `VueUiSparkStackbarConfig` | `@selectDatapoint` | ❌ | ❌ |
308+
| `VueUiSparkHistogram` | `VueUiSparkHistogramDatasetItem[]` | `VueUiSparkHistogramConfig` | `@selectDatapoint` | ❌ | ❌ |
309+
| `VueUiSparkGauge` | `VueUiSparkGaugeDataset` | `VueUiSparkGaugeConfig` | ❌ | ❌ | ❌ |
310+
| `VueUiSparkTrend` | `number[]` | `VueUiSparkTrendConfig` | ❌ | ❌ | ❌ |
311+
312+
### Charts
313+
314+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
315+
| --------------------- | ---------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | -------------- |
316+
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
317+
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
318+
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
319+
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after` | ✅ |
320+
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, | ❌ |
321+
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after` | ✅ |
322+
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, | ❌ |
323+
| `VueUiHeatmap` | `VueUiHeatmapDatasetItem[]` | `VueUiHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
324+
| `VueUiMolecule` | `VueUiMoleculeDatasetNode[]` | `VueUiMoleculeConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#tooltip-before`, `#tooltip-after` | ✅ |
325+
| `VueUiMoodRadar` | `VueUiMoodRadarDataset` | `VueUiMoodRadarConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend` | ❌ |
326+
| `VueUiNestedDonuts` | `VueUiNestedDonutsDatasetItem[]` | `VueUiNestedDonutsConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
327+
| `VueUiOnion` | `VueUiOnionDatasetItem[]` | `VueUiOnionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
328+
| `VueUiQuadrant` | `VueUiQuadrantDatasetItem[]` | `VueUiQuadrantConfig` | `@selectLegend`, `@selectPlot`, `@selectSide`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
329+
| `VueUiRadar` | `VueUiRadarDataset` | `VueUiRadarConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
330+
| `VueUiRings` | `VueUiRingsDatasetItem[]` | `VueUiRingsConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
331+
| `VueUiScatter` | `VueUiScatterDatasetItem[]` | `VueUiScatterConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
332+
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
333+
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ❌ |
334+
| `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
335+
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
336+
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
337+
| `VueUiXy` | `VueUiXyDatasetItem[]` | `VueUiXyConfig` | `@selectLegend`, `@selectX`, `getData`, `generatePdf`, `generateCsv`, `generateImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after` | ✅ |
338+
339+
### 3D charts
340+
341+
| Name | dataset type | config type | emits / exposed methods | slots | custom tooltip |
342+
| ------------ | ------------------- | ------------------ | ------------------------------ | ------ | -------------- |
343+
| `VueUi3dBar` | `VueUi3dBarDataset` | `VueUi3dBarConfig` | `generatePdf`, `generateImage` | `#svg` | ❌ |
344+
345+
### Data tables
346+
347+
| Name | dataset type | config type | emits / exposed methods | slots |
348+
| --------------------- | ---------------------------------- | --------------------------- | --------------------------------------------- | --------------------------------------------------------------- |
349+
| `VueUiTable` | `VueUiTableDataset` | `VueUiTableConfig` | ❌ | ❌ |
350+
| `VueUiTableHeatmap` | `VueUiTableHeatmapDatasetItem[]` | `VueUiTableHeatmapConfig` | `generatePdf`, `generateCsv`, `generateImage` | `#caption`, `#rowTitle`, `#cell`, `#sum`, `#average`, `#median` |
351+
| `VueUiTableSparkline` | `VueUiTableSparklineDatasetItem[]` | `VueUiTableSparklineConfig` | `generatePdf`, `generateCsv`, `generateImage` | ❌ |
352+
353+
### Rating
354+
355+
| Name | dataset type | config type | emits / exposed methods |
356+
| ------------- | -------------------- | ------------------- | ----------------------------------- |
357+
| `VueUiRating` | `VueUiRatingDataset` | `VueUiRatingConfig` | `@rate`, `getData`,`toggleReadonly` |
358+
| `VueUiSmiley` | `VueUiRatingDataset` | `VueUiSmileyConfig` | `@rate`, `getData`,`toggleReadonly` |
359+
360+
### Utilities
361+
362+
| Name | dataset type | config type | emits / exposed methods | slots |
363+
| ----------------- | ------------------------- | ----------------------- | -------------------------------------- | ------------------------------------------------------- |
364+
| `VueUiAccordion` | ❌ | `VueUiAccordionConfig` | ❌ | `#arrow`, `#title`, `#content` |
365+
| `VueUiAnnotator` | `VueUiAnnotatorDataset` | `VueUiAnnotatorConfig` | `@toggleOpenState`, `@saveAnnotations` | ❌ |
366+
| `VueUiCursor` | ❌ | `VueUiCursorConfig` | ❌ | ❌ |
367+
| `VueUiDashboard` | `VueUiDashboardElement[]` | `VueUiDashboardConfig` | `@change` | ❌ |
368+
| `VueUiDigits` | `number` | `VueUiDigitsConfig` | ❌ | ❌ |
369+
| `VueUiKpi` | `number` | `VueUiKpiConfig` | ❌ | `#title`, `#value`, `#comment-before`, `#comment-after` |
370+
| `VueUiMiniLoader` | ❌ | `VueUiMiniLoaderConfig` | ❌ | ❌ |
371+
| `VueUiScreenshot` | ❌ | `VueUiScreenshotConfig` | `@postImage`, `shoot`, `close` | ❌ |
372+
| `VueUiSkeleton` | ❌ | `VueUiSkeletonConfig` | ❌ | ❌ |
373+
| `VueUiIcon` | see below |
374+
375+
### Icons
376+
377+
Tailor made icons are available through the VueUiIcon component:
378+
379+
```html
380+
<VueUiIcon name="arrowRight" :size="24" stroke="#6376DD" />
289381
```
382+
383+
All names of available icons are available in the vue-data-ui.d.ts file under the `VueUiIconName` type.

‎copy-docs.cjs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const fs = require("fs");
2+
const path = require("path");
3+
4+
// Get the directory path of the current module
5+
const currentDir = path.dirname(require.main.filename);
6+
7+
// Resolve the paths to the types and dist directories
8+
const typesDir = path.resolve(currentDir, "documentation");
9+
const distDir = path.resolve(currentDir, "dist");
10+
11+
// Create dist directory if it doesn't exist
12+
if (!fs.existsSync(distDir)) {
13+
fs.mkdirSync(distDir);
14+
}
15+
16+
// Resolve the path to the dist/types directory
17+
const distTypesDir = path.join(distDir, "documentation");
18+
19+
// Create dist/types directory if it doesn't exist
20+
if (!fs.existsSync(distTypesDir)) {
21+
fs.mkdirSync(distTypesDir);
22+
}
23+
24+
// Copy .d.ts files from types directory to dist/types directory
25+
fs.readdirSync(typesDir).forEach((file) => {
26+
const srcFile = path.join(typesDir, file);
27+
const distFile = path.join(distTypesDir, file);
28+
29+
fs.copyFileSync(srcFile, distFile);
30+
});
31+
32+
console.log("Doc directory copied successfully.");

0 commit comments

Comments
 (0)