Skip to content

Commit ca72091

Browse files
graphierosgraphieros
committed
Improved chart components resilience when dataset is undefined or empty, also showing a skeleton
1 parent c9cf1fc commit ca72091

37 files changed

+826
-99
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "2.0.60",
4+
"version": "2.0.61",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/atoms/BaseIcon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const icons = computed(() => {
4545
chartSparkHistogram: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 9 2 11C2 12 3 12 3 12L5 12C6 12 6 11 6 11L6 9C6 8 5 8 5 8L3 8C2 8 2 9 2 9M8 8 8 12C8 12 8 13 9 13L11 13C12 13 12 12 12 12L12 8C12 7 11 7 11 7L9 7C8 7 8 8 8 8M14 9 14 11C14 12 15 12 15 12L17 12C18 12 18 11 18 11L18 9C18 9 18 8 17 8L15 8C14 8 14 9 14 9" />`,
4646
chartSparkStackbar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 10 L 18 10" style="opacity:0.3" /><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 10 L 14 10" style="opacity:0.5" /><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 10 L 8 10" />`,
4747
chartTable: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 3 2 17C2 18 2 18 3 18L17 18C18 18 18 18 18 17L18 3C18 2 18 2 17 2L3 2C2 2 2 2 2 3M10 6 10 18M2 10 18 10M6 2M14 2M2 6 18 6M2 14 18 14M6 8 8 8M6 12 8 12M6 16 8 16M14 8 16 8M14 12 16 12M14 16 16 16" />`,
48-
chartThermometer: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 13 4 A 1 1 0 0 0 7 4 L 7 16 A 1 1 0 0 0 13 16 L 13 4 M 7 15 L 8 15 M 7 12 L 8 12 M 7 9 L 8 9 M 7 6 L 8 6 M 12 15 L 13 15 M 12 12 L 13 12 M 12 9 L 13 9 M 12 6 L 13 6 " /><path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" style="opacity: 0.6" d="M 10 17 L 10 12 " /><path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" opacity="M 10 17 L 10 9" /><path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" opacity="0.3" d="M 10 17 L 10 6" /><path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" style="opacity: 0.1" d="M 10 17 L 10 3" />`,
48+
chartThermometer: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 13 4 A 1 1 0 0 0 7 4 L 7 16 A 1 1 0 0 0 13 16 L 13 4 M 7 15 L 8 15 M 7 12 L 8 12 M 7 9 L 8 9 M 7 6 L 8 6 M 12 15 L 13 15 M 12 12 L 13 12 M 12 9 L 13 9 M 12 6 L 13 6 " /><path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" style="opacity: 0.6" d="M 10 17 L 10 12 " /><path stroke-linecap="round" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" opacity="M 10 17 L 10 9" /><path stroke-linecap="round" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" opacity="0.3" d="M 10 17 L 10 6" /><path stroke-linecap="round" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" style="opacity: 0.1" d="M 10 17 L 10 3" />`,
4949
chartTiremarks: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 8 1 12M3 8 3 12M5 8 5 12M7 8 7 12M9 8 9 12M11 8 11 12M13 8 13 12" /><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 8 1 12M3 8 3 12M5 8 5 12M7 8 7 12M9 8 9 12M11 8 11 12M13 8 13 12M15 8 15 12M17 8 17 12M19 8 19 12" style="opacity:0.4" />`,
5050
chartVerticalBar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 3 1 5C1 6 1 6 2 6L9 6C10 6 10 6 10 5L10 3C10 2 10 2 9 2L2 2C1 2 1 2 1 3M1 9 1 11C1 12 1 12 2 12L13 12C14 12 14 12 14 11L14 9C14 8 14 8 13 8L2 8C1 8 1 8 1 9M1 15 1 17C1 18 1 18 2 18L17 18C18 18 18 18 18 17L18 15C18 14 18 14 17 14L2 14C1 14 1 14 1 15" />`,
5151
chartWaffle: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 2 1 4C1 5 1 5 2 5L4 5C5 5 5 5 5 4L5 2C5 1 5 1 4 1L2 1C1 1 1 1 1 2M18 1 16 1C15 1 15 1 15 2L15 4C15 5 15 5 16 5L18 5C19 5 19 5 19 4L19 2C19 1 19 1 18 1M8 2 8 4C8 5 8 5 9 5L11 5C12 5 12 5 12 4L12 2C12 1 12 1 11 1L9 1C8 1 8 1 8 2M2 19 4 19C5 19 5 19 5 18L5 16C5 15 5 15 4 15L2 15C1 15 1 15 1 16L1 18C1 19 1 19 2 19M1 9 1 11C1 12 1 12 2 12L4 12C5 12 5 12 5 11L5 9C5 8 5 8 4 8L2 8C1 8 1 8 1 9M15 16 15 18C15 19 15 19 16 19L18 19C19 19 19 19 19 18L19 16C19 15 19 15 18 15L16 15C15 15 15 15 15 16M8 16 8 18C8 19 8 19 9 19L11 19C12 19 12 19 12 18L12 16C12 15 12 15 11 15L9 15C8 15 8 15 8 16M8 9 8 11C8 12 8 12 9 12L11 12C12 12 12 12 12 11L12 9C12 8 12 8 11 8L9 8C8 8 8 8 8 9M15 9 15 11C15 12 15 12 16 12L18 12C19 12 19 12 19 11L19 9C19 8 19 8 18 8L16 8C15 8 15 8 15 9" />`,

‎src/components/vue-ui-3d-bar.vue‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import mainConfig from "../default_configs.json";
1212
import Title from "../atoms/Title.vue";
1313
import { useNestedProp } from "../useNestedProp";
1414
import UserOptions from "../atoms/UserOptions.vue";
15+
import Skeleton from "./vue-ui-skeleton.vue";
1516
1617
const props = defineProps({
1718
config: {
@@ -28,6 +29,10 @@ const props = defineProps({
2829
},
2930
});
3031
32+
const isDataset = computed(() => {
33+
return !!props.dataset && Object.keys(props.dataset).length;
34+
})
35+
3136
const uid = ref(createUid());
3237
3338
const defaultConfig = ref(mainConfig.vue_ui_3d_bar);
@@ -198,7 +203,7 @@ defineExpose({
198203
<!-- OPTIONS -->
199204
<UserOptions
200205
ref="details"
201-
v-if="barConfig.userOptions.show"
206+
v-if="barConfig.userOptions.show && isDataset"
202207
:backgroundColor="barConfig.style.chart.backgroundColor"
203208
:color="barConfig.style.chart.color"
204209
:isPrinting="isPrinting"
@@ -214,7 +219,7 @@ defineExpose({
214219
@generateImage="generateImage"
215220
/>
216221

217-
<svg :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="3d-bar-svg" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%; overflow: visible; background:${barConfig.style.chart.backgroundColor};color:${barConfig.style.chart.color}`">
222+
<svg v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="3d-bar-svg" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%; overflow: visible; background:${barConfig.style.chart.backgroundColor};color:${barConfig.style.chart.color}`">
218223

219224
<!-- DEFS -->
220225
<defs>
@@ -276,6 +281,20 @@ defineExpose({
276281

277282
<slot name="svg" :svg="svg"/>
278283
</svg>
284+
285+
<Skeleton
286+
v-if="!isDataset"
287+
:config="{
288+
type: 'bar3d',
289+
style: {
290+
backgroundColor: barConfig.style.chart.backgroundColor,
291+
bar3d: {
292+
color: '#CCCCCC'
293+
}
294+
}
295+
}"
296+
/>
297+
279298
</div>
280299
</template>
281300

‎src/components/vue-ui-age-pyramid.vue‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import Title from "../atoms/Title.vue";
1919
import UserOptions from "../atoms/UserOptions.vue";
2020
import Tooltip from "../atoms/Tooltip.vue";
2121
import DataTable from "../atoms/DataTable.vue";
22+
import Skeleton from "./vue-ui-skeleton.vue";
2223
2324
const props = defineProps({
2425
config: {
@@ -35,6 +36,10 @@ const props = defineProps({
3536
},
3637
});
3738
39+
const isDataset = computed(() => {
40+
return !!props.dataset && props.dataset.length
41+
})
42+
3843
onMounted(() => {
3944
if(objectIsEmpty(props.dataset)) {
4045
error({
@@ -386,7 +391,7 @@ defineExpose({
386391
<UserOptions
387392
ref="details"
388393
:key="`user_options_${step}`"
389-
v-if="agePyramidConfig.userOptions.show"
394+
v-if="agePyramidConfig.userOptions.show && isDataset"
390395
:backgroundColor="agePyramidConfig.style.backgroundColor"
391396
:color="agePyramidConfig.style.color"
392397
:isImaging="isImaging"
@@ -406,8 +411,7 @@ defineExpose({
406411
/>
407412

408413
<!-- CHART -->
409-
<svg :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`" >
410-
414+
<svg v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`" >
411415
<defs>
412416
<linearGradient
413417
:id="`age_pyramid_left_${uid}`"
@@ -630,6 +634,19 @@ defineExpose({
630634
<slot name="svg" :svg="svg"/>
631635
</svg>
632636

637+
<Skeleton
638+
v-if="!isDataset"
639+
:config="{
640+
type: 'pyramid',
641+
style: {
642+
backgroundColor: agePyramidConfig.style.backgroundColor,
643+
pyramid: {
644+
color: '#CCCCCC'
645+
}
646+
}
647+
}"
648+
/>
649+
633650
<slot name="legend" v-bind:legend="drawableDataset"></slot>
634651

635652
<!-- TOOLTIP -->
@@ -650,7 +667,7 @@ defineExpose({
650667
</Tooltip>
651668

652669
<!-- DATA TABLE -->
653-
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
670+
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable && isDataset">
654671
<DataTable
655672
:colNames="dataTable.colNames"
656673
:head="dataTable.head"

‎src/components/vue-ui-candlestick.vue‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import Title from "../atoms/Title.vue";
2121
import UserOptions from "../atoms/UserOptions.vue";
2222
import Tooltip from "../atoms/Tooltip.vue";
2323
import DataTable from "../atoms/DataTable.vue";
24+
import Skeleton from "./vue-ui-skeleton.vue";
2425
2526
const props = defineProps({
2627
config: {
@@ -37,6 +38,10 @@ const props = defineProps({
3738
}
3839
});
3940
41+
const isDataset = computed(() => {
42+
return !!props.dataset && props.dataset.length;
43+
})
44+
4045
const uid = ref(createUid());
4146
const defaultConfig = ref(mainConfig.vue_ui_candlestick);
4247
@@ -444,7 +449,7 @@ defineExpose({
444449
<UserOptions
445450
ref="details"
446451
:key="`user_options_${step}`"
447-
v-if="candlestickConfig.userOptions.show"
452+
v-if="candlestickConfig.userOptions.show && isDataset"
448453
:backgroundColor="candlestickConfig.style.backgroundColor"
449454
:color="candlestickConfig.style.color"
450455
:isImaging="isImaging"
@@ -464,7 +469,7 @@ defineExpose({
464469
/>
465470

466471
<!-- CHART -->
467-
<svg :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${candlestickConfig.style.backgroundColor};color:${candlestickConfig.style.color}`">
472+
<svg v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${candlestickConfig.style.backgroundColor};color:${candlestickConfig.style.color}`">
468473
<g v-if="drawableDataset.length > 0">
469474
<!-- DEFS -->
470475
<defs>
@@ -672,8 +677,26 @@ defineExpose({
672677
<slot name="svg" :svg="svg"/>
673678
</svg>
674679

680+
<Skeleton
681+
v-if="!isDataset"
682+
:config="{
683+
type: 'candlesticks',
684+
style: {
685+
backgroundColor: candlestickConfig.style.backgroundColor,
686+
candlesticks: {
687+
axis: {
688+
color: '#CCCCCC'
689+
},
690+
candle: {
691+
color: '#CCCCCC'
692+
}
693+
}
694+
}
695+
}"
696+
/>
697+
675698
<!-- SLICER -->
676-
<div v-if="candlestickConfig.style.zoom.show" class="vue-ui-candlestick-range-slider-wrapper" data-html2canvas-ignore>
699+
<div v-if="candlestickConfig.style.zoom.show && isDataset" class="vue-ui-candlestick-range-slider-wrapper" data-html2canvas-ignore>
677700
<div class="vue-ui-candlestick-range-slider-label-left">
678701
{{ dataset[slicer.start] ? dataset[slicer.start][0] : dataset[0][0] }}
679702
</div>
@@ -708,7 +731,7 @@ defineExpose({
708731
</Tooltip>
709732

710733
<!-- DATA TABLE -->
711-
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:48px`" v-if="mutableConfig.showTable">
734+
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:48px`" v-if="mutableConfig.showTable && isDataset">
712735
<DataTable
713736
:colNames="dataTable.colNames"
714737
:head="dataTable.head"

‎src/components/vue-ui-chestnut.vue‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import img from "../img";
2121
import mainConfig from "../default_configs.json";
2222
import { useNestedProp } from "../useNestedProp";
2323
import UserOptions from "../atoms/UserOptions.vue";
24+
import Skeleton from "./vue-ui-skeleton.vue";
2425
2526
const props = defineProps({
2627
config: {
@@ -37,6 +38,10 @@ const props = defineProps({
3738
}
3839
});
3940
41+
const isDataset = computed(() => {
42+
return !!props.dataset && props.dataset.length;
43+
})
44+
4045
const uid = ref(createUid());
4146
4247
const defaultConfig = ref(mainConfig.vue_ui_chestnut);
@@ -91,6 +96,9 @@ const drawableArea = computed(() => {
9196
});
9297
9398
const treeTotal = computed(() => {
99+
if(!isDataset.value) {
100+
return 0
101+
}
94102
return props.dataset.flatMap(root => root.branches.map(branch => branch.value)).reduce((a,b) => a + b);
95103
})
96104
@@ -478,7 +486,7 @@ defineExpose({
478486
<UserOptions
479487
ref="details"
480488
:key="`user_options_${step}`"
481-
v-if="chestnutConfig.userOptions.show"
489+
v-if="chestnutConfig.userOptions.show && isDataset"
482490
:backgroundColor="chestnutConfig.style.chart.backgroundColor"
483491
:color="chestnutConfig.style.chart.color"
484492
:isImaging="isImaging"
@@ -497,7 +505,7 @@ defineExpose({
497505
@toggleTable="mutableConfig.showTable = !mutableConfig.showTable"
498506
/>
499507

500-
<svg :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" v-if="svg.height > 0" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${chestnutConfig.style.chart.backgroundColor};color:${chestnutConfig.style.chart.color}`" >
508+
<svg :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" v-if="svg.height > 0 && isDataset" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${chestnutConfig.style.chart.backgroundColor};color:${chestnutConfig.style.chart.color}`" >
501509

502510
<!-- TITLE AS G -->
503511
<g v-if="!selectedNut">
@@ -1022,10 +1030,23 @@ defineExpose({
10221030
</g>
10231031
<slot name="svg" :svg="svg"/>
10241032
</svg>
1033+
1034+
<Skeleton
1035+
v-if="!isDataset"
1036+
:config="{
1037+
type: 'chestnut',
1038+
style: {
1039+
backgroundColor: chestnutConfig.style.chart.backgroundColor,
1040+
chestnut: {
1041+
color: '#CCCCCC'
1042+
}
1043+
}
1044+
}"
1045+
/>
10251046
<slot name="legend" v-bind:legend="mutableDataset"></slot>
10261047
<!-- DATA TABLE -->
10271048
<div ref="tableContainer" class="vue-ui-chestnut-table">
1028-
<div v-if="mutableConfig.showTable">
1049+
<div v-if="mutableConfig.showTable && isDataset">
10291050
<div style="width: 100%" :class="{'vue-ui-responsive': isResponsive}">
10301051
<table data-cy="chestnut-table" class="vue-ui-data-table">
10311052
<caption :style="{backgroundColor: chestnutConfig.table.th.backgroundColor, color: chestnutConfig.table.th.color, outline: chestnutConfig.table.th.outline }" class="vue-ui-data-table__caption">

‎src/components/vue-ui-donut-evolution.vue‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { useNestedProp } from "../useNestedProp";
2525
import UserOptions from "../atoms/UserOptions.vue";
2626
import DataTable from "../atoms/DataTable.vue";
2727
import Legend from "../atoms/Legend.vue";
28+
import Skeleton from "./vue-ui-skeleton.vue";
2829
2930
const props = defineProps({
3031
config: {
@@ -41,6 +42,10 @@ const props = defineProps({
4142
},
4243
});
4344
45+
const isDataset = computed(() => {
46+
return !!props.dataset && props.dataset.length;
47+
})
48+
4449
onMounted(() => {
4550
if(objectIsEmpty(props.dataset)) {
4651
error({
@@ -463,7 +468,7 @@ defineExpose({
463468
<UserOptions
464469
ref="details"
465470
:key="`user_options_${step}`"
466-
v-if="donutEvolutionConfig.userOptions.show"
471+
v-if="donutEvolutionConfig.userOptions.show && isDataset"
467472
:backgroundColor="donutEvolutionConfig.style.chart.backgroundColor"
468473
:color="donutEvolutionConfig.style.chart.color"
469474
:isPrinting="isPrinting"
@@ -483,7 +488,7 @@ defineExpose({
483488
/>
484489
485490
486-
<svg :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="donut-evolution-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.absoluteHeight}`" :style="`max-width:100%; overflow: visible; background:${donutEvolutionConfig.style.chart.backgroundColor};color:${donutEvolutionConfig.style.chart.color}`">
491+
<svg v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="donut-evolution-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.absoluteHeight}`" :style="`max-width:100%; overflow: visible; background:${donutEvolutionConfig.style.chart.backgroundColor};color:${donutEvolutionConfig.style.chart.color}`">
487492
488493
<defs>
489494
<linearGradient :id="`hover_${uid}`" x1="0%" y1="0%" x2="0%" y2="100%">
@@ -808,6 +813,24 @@ defineExpose({
808813
<slot name="svg" :svg="svg"/>
809814
</svg>
810815
816+
<Skeleton
817+
v-if="!isDataset"
818+
:config="{
819+
type: 'donutEvolution',
820+
style: {
821+
backgroundColor: donutEvolutionConfig.style.chart.backgroundColor,
822+
donutEvolution: {
823+
axis: {
824+
color: '#CCCCCC'
825+
},
826+
donuts: {
827+
color: '#CCCCCC'
828+
}
829+
}
830+
}
831+
}"
832+
/>
833+
811834
<Legend
812835
v-if="donutEvolutionConfig.style.chart.legend.show"
813836
:legendSet="legendSet"
@@ -829,7 +852,7 @@ defineExpose({
829852
830853
<slot name="legend" v-bind:legend="convertedDataset"></slot>
831854
832-
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:48px`" v-if="mutableConfig.showTable">
855+
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:48px`" v-if="mutableConfig.showTable && isDataset">
833856
<DataTable
834857
:colNames="table.colNames"
835858
:head="table.head"

0 commit comments

Comments
 (0)