Skip to content

Commit 95afceb

Browse files
graphierosgraphieros
committed
Update README
1 parent 9e26f05 commit 95afceb

File tree

1 file changed

+32
-30
lines changed

1 file changed

+32
-30
lines changed

‎README.md‎

Lines changed: 32 additions & 30 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) // Renamed as VueUiHorizontalBar in v3
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)
@@ -171,19 +171,21 @@ Types are available in the 'vue-data-ui.d.ts' file under the types directory of
171171

172172
## Vue Data UI version2 -> version3 migration
173173

174-
Vue Data UI v3 is easy to migrate to:
175-
176-
- If a component has new v3 features, it contains the `config.autoSize` attribute, set to `true` by default
177-
- To restore v2 behavior set config.autoSize to `false`
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.
178176

179177
### Version 3 features
180178

181-
- `config.autoSize` (default: true) set to true, sets up the chart layout automatically, hides or shows some data labels when they can be
182-
183179
- `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.
184180

185181
- `config.debug` (default: false) set to true to show warning messages during development, turn off for production.
186182

183+
- smart label resizing and auto-rotating features
184+
185+
- more charts support responsive mode
186+
187+
- config event callbacks
188+
187189
## Nuxt
188190

189191
[This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
@@ -300,7 +302,7 @@ The following charts bear these slots:
300302
- VueUiSparkStackbar
301303
- VueUiStackbar
302304
- VueUiTreemap
303-
- VueUiVerticalBar
305+
- VueUiHorizontalBar
304306
- VueUiWordCloud
305307
- VueUiXy \*
306308
- VueUiXyCanvas
@@ -472,7 +474,7 @@ From the dataset you pass into the props, this component will produce the most a
472474
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
473475
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
474476
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#breadcrumb-label`, `#breadcrumb-arrow` | ✅ | ✅ |
475-
| `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` | ✅ | ✅ |
476478
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#pattern` | ✅ | ✅ |
477479
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
478480
| `VueUiWordCloud` | `VueUiWordCloudDatasetItem[] / string` | `VueUiWordCloudConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTooltip` , `getImage` | `#svg`, `#reset-action`, `#watermark`, `#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
@@ -658,7 +660,7 @@ User options actions available per chart:
658660
| VueUiThermometer | optionPdf, optionImg, optionFullscreen, optionAnnotator |
659661
| VueUiTiremarks | optionPdf, optionImg, optionFullscreen, optionAnnotator |
660662
| VueUiTreemap | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
661-
| VueUiVerticalBar | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator |
663+
| VueUiHorizontalBar | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen, optionAnnotator |
662664
| VueUiWaffle | optionTooltip, optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
663665
| VueUiWheel | optionPdf, optionImg, optionFullscreen, optionAnnotator |
664666
| VueUiWordCloud | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen, optionAnnotator |
@@ -706,7 +708,7 @@ It is possible to provide a custom palette in the config prop through config.cus
706708
- VueUiTableSparkline
707709
- VueUiThermometer
708710
- VueUiTreemap
709-
- VueUiVerticalBar
711+
- VueUiHorizontalBar
710712
- VueUiWaffle
711713
- VueUiWordCloud
712714
- VueUiWorld
@@ -723,25 +725,25 @@ However the folowing charts can be made fully responsive, making them better to
723725

724726
| Component | Responsive feature implemented |
725727
| --------------------------- | ------------------------------ |
726-
| VueUi3dBar | - |
728+
| VueUi3dBar | ✅ |
727729
| VueUiAgePyramid | ✅ |
728730
| VueUiAgePyramid | ✅ |
729-
| VueUiBullet | - |
731+
| VueUiBullet | ✅ |
730732
| VueUiCarouselTable | - |
731733
| VueUiChestnut | - |
732734
| VueUiChord | ✅ |
733-
| VueUiCirclePack | - |
735+
| VueUiCirclePack | ✅ (built-in) |
734736
| VueUiDonut | ✅ |
735-
| VueUiDonutEvolution | - |
737+
| VueUiDonutEvolution | ✅ |
736738
| VueUiDumbbell | ✅ |
737-
| VueUiFlow | - |
739+
| VueUiFlow | ✅ |
738740
| VueUiFunnel | ✅ |
739-
| VueUiGalaxy | - |
741+
| VueUiGalaxy | ✅ |
740742
| VueUiGauge | ✅ |
741-
| VueUiHeatmap | - |
743+
| VueUiHeatmap | ✅ |
742744
| VueUiHistoryPlot | ✅ |
743745
| VueUiMolecule | - |
744-
| VueUiMoodRadar | - |
746+
| VueUiMoodRadar | ✅ |
745747
| VueUiNestedDonuts | ✅ |
746748
| VueUiOnion | ✅ |
747749
| VueUiParallelCoordinatePlot | ✅ |
@@ -752,21 +754,21 @@ However the folowing charts can be made fully responsive, making them better to
752754
| VueUiRidgeline | ✅ |
753755
| VueUiRings | ✅ |
754756
| VueUiScatter | ✅ |
755-
| VueUiSparkHistogram | - |
757+
| VueUiSparkHistogram | ✅ |
756758
| VueUiSparkStackbar | - |
757-
| VueUiSparkTrend | - |
759+
| VueUiSparkTrend | ✅ |
758760
| VueUiSparkbar | - |
759761
| VueUiSparkgauge | - |
760762
| VueUiSparkline | ✅ |
761763
| VueUiStackbar | ✅ |
762764
| VueUiStripPlot | ✅ |
763765
| VueUiTableHeatmap | - |
764766
| VueUiTableSparkline | - |
765-
| VueUiThermometer | - |
767+
| VueUiThermometer | ✅ |
766768
| VueUiTimer | ✅ |
767-
| VueUiTiremarks | - |
769+
| VueUiTiremarks | ✅ |
768770
| VueUiTreemap | ✅ |
769-
| VueUiVerticalBar | ✅ |
771+
| VueUiHorizontalBar | ✅ |
770772
| VueUiWaffle | ✅ |
771773
| VueUiWheel | ✅ |
772774
| VueUiWordCloud | ✅ |
@@ -792,12 +794,12 @@ The following charts use the LTTB algorithm (Largest-Triangle-Three-Bucket) beyo
792794

793795
| Component | Default Threshold | Remark |
794796
| --------------- | ----------------- | --------------------------------------------------------- |
795-
| VueUiXy | 500 | |
797+
| VueUiXy | 1095 | |
796798
| VueUiXyCanvas | 10000 | Since this chart uses canvas, threhsold can be set higher |
797-
| VueUiQuadrant | 500 | |
798-
| VueUiScatter | 500 | |
799-
| VueUiSparkline | 500 | |
800-
| VueUiSparkTrend | 500 | |
799+
| VueUiQuadrant | 1095 | |
800+
| VueUiScatter | 1095 | |
801+
| VueUiSparkline | 1095 | |
802+
| VueUiSparkTrend | 1095 | |
801803

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

@@ -873,7 +875,7 @@ The #pattern slot is available on the following components:
873875
- VueUiRidgeline
874876
- VueUiRings
875877
- VueUiStackbar
876-
- VueUiVerticalBar
878+
- VueUiHorizontalBar
877879
- VueUiWaffle
878880
- VueUiWorld
879881
- VueUiXy

0 commit comments

Comments
 (0)