Skip to content

Commit ae8a248

Browse files
graphierosgraphieros
authored
Merge pull request #239 from graphieros/next
v3
2 parents 4cf8725 + 91f45a0 commit ae8a248

File tree

136 files changed

+22182
-10457
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

136 files changed

+22182
-10457
lines changed

‎README.md‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Available components
5353
- [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)
5454
- [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
5555
- [VueUiTreemap](https://vue-data-ui.graphieros.com/docs#vue-ui-treemap)
56-
- [VueUiVerticalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-vertical-bar)
56+
- [VueUiHorizontalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-horizontal-bar)
5757
- [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle)
5858
- [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
5959
- [VueUiWordCloud](https://vue-data-ui.graphieros.com/docs#vue-ui-word-cloud)
@@ -133,7 +133,7 @@ Or you can import just what you need in your files:
133133
<script setup>import {(VueUiRadar, VueUiXy)} from "vue-data-ui";</script>
134134
```
135135

136-
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.
136+
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.
137137

138138
```js
139139
<script setup>
@@ -169,6 +169,23 @@ Note that the following utility components are not supported by the universal Vu
169169

170170
Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.
171171

172+
## Vue Data UI version2 -> version3 migration
173+
174+
Vue Data UI v3 does not contain breaking changes.
175+
However, some charts have their padding configs modified, which can lead to excessive padding with a v2 config.
176+
177+
### Version 3 features
178+
179+
- `config.loading` (default: false) toggle loading state manually, to display a beautiful skeleton loader which uses the same chart component and shares layout features derived from your config. This skeleton loader is also triggered automatically if the provided dataset is undefined.
180+
181+
- `config.debug` (default: false) set to true to show warning messages during development, turn off for production.
182+
183+
- smart label resizing and auto-rotating features
184+
185+
- more charts support responsive mode
186+
187+
- config event callbacks
188+
172189
## Nuxt
173190

174191
[This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
@@ -285,7 +302,7 @@ The following charts bear these slots:
285302
- VueUiSparkStackbar
286303
- VueUiStackbar
287304
- VueUiTreemap
288-
- VueUiVerticalBar
305+
- VueUiHorizontalBar
289306
- VueUiWordCloud
290307
- VueUiXy \*
291308
- VueUiXyCanvas
@@ -457,7 +474,7 @@ From the dataset you pass into the props, this component will produce the most a
457474
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
458475
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
459476
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#breadcrumb-label`, `#breadcrumb-arrow` | ✅ | ✅ |
460-
| `VueUiVerticalBar` | `VueUiVerticalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleSort`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
477+
| `VueUiHorizontalBar` | `VueUiHorizontalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleSort`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
461478
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#pattern` | ✅ | ✅ |
462479
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
463480
| `VueUiWordCloud` | `VueUiWordCloudDatasetItem[] / string` | `VueUiWordCloudConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTooltip` , `getImage` | `#svg`, `#reset-action`, `#watermark`, `#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
@@ -643,7 +660,7 @@ User options actions available per chart:
643660
| VueUiThermometer | optionPdf, optionImg, optionFullscreen, optionAnnotator |
644661
| VueUiTiremarks | optionPdf, optionImg, optionFullscreen, optionAnnotator |
645662
| VueUiTreemap | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
646-
| VueUiVerticalBar | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator |
663+
| VueUiHorizontalBar | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator |
647664
| VueUiWaffle | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
648665
| VueUiWheel | optionPdf, optionImg, optionFullscreen, optionAnnotator |
649666
| VueUiWordCloud | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
@@ -691,7 +708,7 @@ It is possible to provide a custom palette in the config prop through config.cus
691708
- VueUiTableSparkline
692709
- VueUiThermometer
693710
- VueUiTreemap
694-
- VueUiVerticalBar
711+
- VueUiHorizontalBar
695712
- VueUiWaffle
696713
- VueUiWordCloud
697714
- VueUiWorld
@@ -708,25 +725,25 @@ However the folowing charts can be made fully responsive, making them better to
708725

709726
| Component | Responsive feature implemented |
710727
| --------------------------- | ------------------------------ |
711-
| VueUi3dBar | - |
728+
| VueUi3dBar | ✅ |
712729
| VueUiAgePyramid | ✅ |
713730
| VueUiAgePyramid | ✅ |
714-
| VueUiBullet | - |
731+
| VueUiBullet | ✅ |
715732
| VueUiCarouselTable | - |
716733
| VueUiChestnut | - |
717734
| VueUiChord | ✅ |
718-
| VueUiCirclePack | - |
735+
| VueUiCirclePack | ✅ (built-in) |
719736
| VueUiDonut | ✅ |
720-
| VueUiDonutEvolution | - |
737+
| VueUiDonutEvolution | ✅ |
721738
| VueUiDumbbell | ✅ |
722-
| VueUiFlow | - |
739+
| VueUiFlow | ✅ |
723740
| VueUiFunnel | ✅ |
724-
| VueUiGalaxy | - |
741+
| VueUiGalaxy | ✅ |
725742
| VueUiGauge | ✅ |
726-
| VueUiHeatmap | - |
743+
| VueUiHeatmap | ✅ |
727744
| VueUiHistoryPlot | ✅ |
728745
| VueUiMolecule | - |
729-
| VueUiMoodRadar | - |
746+
| VueUiMoodRadar | ✅ |
730747
| VueUiNestedDonuts | ✅ |
731748
| VueUiOnion | ✅ |
732749
| VueUiParallelCoordinatePlot | ✅ |
@@ -737,21 +754,21 @@ However the folowing charts can be made fully responsive, making them better to
737754
| VueUiRidgeline | ✅ |
738755
| VueUiRings | ✅ |
739756
| VueUiScatter | ✅ |
740-
| VueUiSparkHistogram | - |
757+
| VueUiSparkHistogram | ✅ |
741758
| VueUiSparkStackbar | - |
742-
| VueUiSparkTrend | - |
759+
| VueUiSparkTrend | ✅ |
743760
| VueUiSparkbar | - |
744761
| VueUiSparkgauge | - |
745762
| VueUiSparkline | ✅ |
746763
| VueUiStackbar | ✅ |
747764
| VueUiStripPlot | ✅ |
748765
| VueUiTableHeatmap | - |
749766
| VueUiTableSparkline | - |
750-
| VueUiThermometer | - |
767+
| VueUiThermometer | ✅ |
751768
| VueUiTimer | ✅ |
752-
| VueUiTiremarks | - |
769+
| VueUiTiremarks | ✅ |
753770
| VueUiTreemap | ✅ |
754-
| VueUiVerticalBar | ✅ |
771+
| VueUiHorizontalBar | ✅ |
755772
| VueUiWaffle | ✅ |
756773
| VueUiWheel | ✅ |
757774
| VueUiWordCloud | ✅ |
@@ -777,12 +794,12 @@ The following charts use the LTTB algorithm (Largest-Triangle-Three-Bucket) beyo
777794

778795
| Component | Default Threshold | Remark |
779796
| --------------- | ----------------- | --------------------------------------------------------- |
780-
| VueUiXy | 500 | |
797+
| VueUiXy | 1095 | |
781798
| VueUiXyCanvas | 10000 | Since this chart uses canvas, threhsold can be set higher |
782-
| VueUiQuadrant | 500 | |
783-
| VueUiScatter | 500 | |
784-
| VueUiSparkline | 500 | |
785-
| VueUiSparkTrend | 500 | |
799+
| VueUiQuadrant | 1095 | |
800+
| VueUiScatter | 1095 | |
801+
| VueUiSparkline | 1095 | |
802+
| VueUiSparkTrend | 1095 | |
786803

787804
The downsample threshold for each component can be set in the config prop passed to components:
788805

@@ -858,7 +875,7 @@ The #pattern slot is available on the following components:
858875
- VueUiRidgeline
859876
- VueUiRings
860877
- VueUiStackbar
861-
- VueUiVerticalBar
878+
- VueUiHorizontalBar
862879
- VueUiWaffle
863880
- VueUiWorld
864881
- VueUiXy

‎TestingArena/ArenaVueUi3dBar.vue‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,14 @@ import { useArena } from "../src/useArena";
99
const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
1010
1111
const datasets = ref({
12-
simple: {
13-
percentage: 66.666
14-
},
15-
stacked: {
12+
simple: undefined,
13+
stacked: undefined
14+
})
15+
16+
onMounted(() => {
17+
setTimeout(() => {
18+
datasets.value.simple = { percentage: 66.666 },
19+
datasets.value.stacked = {
1620
series: [
1721
{
1822
name: 'Serie 1 with a long name that should be shorter but we do not have the choice',
@@ -54,9 +58,8 @@ const datasets = ref({
5458
}
5559
]
5660
}
57-
})
61+
}, 2000)
5862
59-
onMounted(() => {
6063
setTimeout(() => {
6164
datasets.value.stacked.series.push({
6265
name: 'ALT',
@@ -76,11 +79,14 @@ onMounted(() => {
7679
}
7780
]
7881
})
79-
}, 3000)
82+
}, 4000)
8083
})
8184
8285
const model = ref([
86+
{ key: 'debug', def: true, type: 'checkbox'},
87+
{ key: 'loading', def: false, type: 'checkbox'},
8388
{ key: 'responsive', def: false, type: 'checkbox'},
89+
{ key: 'useCssAnimation', def: false, type: 'checkbox'},
8490
{ key: 'userOptions.show', def: true, type: 'checkbox'},
8591
{ key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
8692
{ key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
@@ -101,7 +107,7 @@ const model = ref([
101107
{ key: 'style.chart.animation.use', def: true, type: 'checkbox'},
102108
{ key: 'style.chart.animation.speed', def: 1, type: 'number', min: 0.1, max: 2, step: 0.1},
103109
{ key: 'style.chart.animation.acceleration', def: 1, type: 'number', min: 0.1, max: 10, step: 0.1},
104-
{ key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
110+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
105111
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
106112
{ key: 'style.chart.bar.color', def: '#6376DD', type: 'color'},
107113
{ key: 'style.chart.bar.stroke', def: '#6376DD', type: 'color'},
@@ -164,22 +170,33 @@ const themeOptions = ref([
164170
"celebrationNight"
165171
])
166172
167-
const currentTheme = ref(themeOptions.value[6])
173+
const currentTheme = ref(themeOptions.value[0])
168174
169175
const config = computed(() => {
170176
const c = convertArrayToObject(model.value);
171177
return {
172178
...c,
179+
events: {
180+
datapointEnter: ({ datapoint, seriesIndex }) => {
181+
console.log('enter event', { datapoint, seriesIndex });
182+
},
183+
datapointLeave: ({ datapoint, seriesIndex }) => {
184+
console.log('leave event', { datapoint, seriesIndex });
185+
},
186+
datapointClick: ({ datapoint, seriesIndex }) => {
187+
console.log('click event', { datapoint, seriesIndex });
188+
}
189+
},
173190
style: {
174191
...c.style,
175192
chart: {
176193
...c.style.chart,
177194
dataLabel: {
178195
...c.style.chart.dataLabel,
179-
formatter: ({value, config}) => {
180-
console.log(config)
181-
return `f | ${value}`
182-
}
196+
// formatter: ({value, config}) => {
197+
// console.log(config)
198+
// return `f | ${value}`
199+
// }
183200
}
184201
}
185202
},
@@ -190,7 +207,7 @@ const config = computed(() => {
190207
191208
const step = ref(0)
192209
193-
const selectedDataset = ref('stacked')
210+
const selectedDataset = ref('stacked') // simple | stacked
194211
195212
const dataset = computed(() => datasets.value[selectedDataset.value])
196213
@@ -218,9 +235,9 @@ onMounted(async () => {
218235
...config,
219236
responsive: true
220237
}">
221-
<template #chart-background>
238+
<!-- <template #chart-background>
222239
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
223-
</template>
240+
</template> -->
224241
<template #watermark="{ isPrinting }">
225242
<div v-if="isPrinting" style="font-size: 100px; opacity: 0.1; transform: rotate(-10deg)">
226243
WATERMARK

0 commit comments

Comments
 (0)