vue-data-ui 2.2.50 → 2.2.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +112 -0
- package/dist/{index-7012246c.js → index-9368a8ad.js} +25753 -24081
- package/dist/{index.es-373c8e6d.js → index.es-3b9e2e30.js} +1 -1
- package/dist/style.css +1 -1
- package/dist/types/vue-data-ui.d.ts +18 -9
- package/dist/vue-data-ui.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -440,6 +440,98 @@ Tailor made icons are available through the VueUiIcon component:
|
|
|
440
440
|
|
|
441
441
|
All names of available icons are available in the vue-data-ui.d.ts file under the `VueUiIconName` type.
|
|
442
442
|
|
|
443
|
+
# User options
|
|
444
|
+
|
|
445
|
+
User options menu is accessible in the burger menu located on the top right of charts, and visible by default.
|
|
446
|
+
To hide user options menu, set config.userOptions.show to false:
|
|
447
|
+
|
|
448
|
+
```js
|
|
449
|
+
const config = ref({
|
|
450
|
+
userOptions: {
|
|
451
|
+
show: false
|
|
452
|
+
},
|
|
453
|
+
...
|
|
454
|
+
})
|
|
455
|
+
```
|
|
456
|
+
|
|
457
|
+
Predefined actions in user options menu depend on the type of chart. Some charts have more or less actions available. Action buttons contain an predefined icons by default.
|
|
458
|
+
|
|
459
|
+
To hide a given action, set the userOption.buttons, for example:
|
|
460
|
+
|
|
461
|
+
```js
|
|
462
|
+
const config = ref({
|
|
463
|
+
userOptions: {
|
|
464
|
+
show: true,
|
|
465
|
+
buttons: {
|
|
466
|
+
pdf: false,
|
|
467
|
+
fullscreen: false,
|
|
468
|
+
// all other actions will be visible by default (list of all actions below)
|
|
469
|
+
},
|
|
470
|
+
},
|
|
471
|
+
});
|
|
472
|
+
```
|
|
473
|
+
|
|
474
|
+
You can use slots to override the content of action buttons.
|
|
475
|
+
What happens when the button is clicked is taken care of by the component, except for the optionFullscreen slot.
|
|
476
|
+
|
|
477
|
+
```html
|
|
478
|
+
<VueUiDonut :config="config" :dataset="dataset">
|
|
479
|
+
<template #optionPdf> GENERATE PDF </template>
|
|
480
|
+
|
|
481
|
+
<!-- This is the only action where scoped content is provided -->
|
|
482
|
+
<template template #optionFullscreen="{ isFullscreen, toggleFullscreen }">
|
|
483
|
+
<div @click="toggleFullscreen(isFullscreen ? 'out' : 'in')">
|
|
484
|
+
TOGGLE FULLSCREEN
|
|
485
|
+
</div>
|
|
486
|
+
</template>
|
|
487
|
+
</VueUiDonut>
|
|
488
|
+
```
|
|
489
|
+
|
|
490
|
+
User options actions available per chart:
|
|
491
|
+
|
|
492
|
+
| Chart name | User options actions slot names |
|
|
493
|
+
| --------------------------- | ----------------------------------------------------------------------------------------- |
|
|
494
|
+
| VueUiDonut | optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen |
|
|
495
|
+
| VueUiXy | optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack |
|
|
496
|
+
| VueUiXyCanvas | optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack |
|
|
497
|
+
| VueUiTreemap | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
498
|
+
| VueUiWaffle | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
499
|
+
| VueUiRadar | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
500
|
+
| VueUiQuadrant | optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen |
|
|
501
|
+
| VueUiGauge | optionPdf, optionImg, optionFullscreen |
|
|
502
|
+
| VueUiWheel | optionPdf, optionImg, optionFullscreen |
|
|
503
|
+
| VueUiTiremarks | optionPdf, optionImg, optionFullscreen |
|
|
504
|
+
| VueUiChestnut | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
505
|
+
| VueUiOnion | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
506
|
+
| VueUiVerticalBar | optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen |
|
|
507
|
+
| VueUiHeatmap | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
508
|
+
| VueUiScatter | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
509
|
+
| VueUiCandlestick | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
510
|
+
| VueUiSparkline | (no user options menu) |
|
|
511
|
+
| VueUiSparkbar | (no user options menu) |
|
|
512
|
+
| VueUiSparkStackbar | (no user options menu) |
|
|
513
|
+
| VueUiSparkHistogram | (no user options menu) |
|
|
514
|
+
| VueUiSparkgauge | (no user options menu) |
|
|
515
|
+
| VueUiSparkTrend | (no user options menu) |
|
|
516
|
+
| VueUiQuickChart | optionPdf, optionImg, optionFullscreen |
|
|
517
|
+
| VueUiAgePyramid | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
518
|
+
| VueUiRelationCircle | optionPdf, optionImg, optionFullscreen |
|
|
519
|
+
| VueUiThermometer | optionPdf, optionImg, optionFullscreen |
|
|
520
|
+
| VueUiRings | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
521
|
+
| VueUiDonutEvolution | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
522
|
+
| VueUiMoodRadar | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
523
|
+
| VueUiMolecule | optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen |
|
|
524
|
+
| VueUiNestedDonuts | optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen |
|
|
525
|
+
| VueUiGalaxy | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
526
|
+
| VueUiStripPlot | optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen |
|
|
527
|
+
| VueUiDumbbell | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
528
|
+
| VueUi3dBar | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
529
|
+
| VueUiTableSparkline | optionPdf, optionImg, optionCsv, optionFullscreen |
|
|
530
|
+
| VueUiTableHeatmap | optionPdf, optionImg, optionCsv, optionFullscreen |
|
|
531
|
+
| VueUiWordCloud | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
532
|
+
| VueUiFlow | optionPdf, optionImg, optionCsv, optionTable, optionFullscreen |
|
|
533
|
+
| VueUiParallelCoordinatePlot | optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen |
|
|
534
|
+
|
|
443
535
|
# Custom palette
|
|
444
536
|
|
|
445
537
|
It is possible to provide a custom palette in the config prop through config.customPalette (string[]) for the following components:
|
|
@@ -475,3 +567,23 @@ It is possible to provide a custom palette in the config prop through config.cus
|
|
|
475
567
|
|
|
476
568
|
If the array of colors provided in customPalette is too small for the dataset, remaining colors will be computed from the default internal palette.
|
|
477
569
|
Accepted color formats: HEX, RGB, HSL, named colors.
|
|
570
|
+
|
|
571
|
+
# Responsive charts
|
|
572
|
+
|
|
573
|
+
By default, all charts will scale to the width of their container.
|
|
574
|
+
However the folowing charts can be made fully responsive, making them better to use in resizable containers:
|
|
575
|
+
|
|
576
|
+
- VueUiQuickChart
|
|
577
|
+
- VueUiXy
|
|
578
|
+
- VueUiDonut
|
|
579
|
+
- VueUiNestedDonuts
|
|
580
|
+
- VueUiOnion
|
|
581
|
+
|
|
582
|
+
To activate responsiveness, set the config.responsive attribute to true:
|
|
583
|
+
|
|
584
|
+
```js
|
|
585
|
+
const config = ref({
|
|
586
|
+
responsive: true,
|
|
587
|
+
// rest of your config
|
|
588
|
+
});
|
|
589
|
+
```
|