Skip to content

Commit 6908acb

Browse files
graphierosgraphieros
committed
Improvement - Implement user options optional states
1 parent caa7fa9 commit 6908acb

39 files changed

+339
-70
lines changed

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { usePrinter } from "../usePrinter";
3333
import { useConfig } from "../useConfig";
3434
import PackageVersion from "../atoms/PackageVersion.vue";
3535
import PenAndPaper from "../atoms/PenAndPaper.vue";
36+
import { useUserOptionState } from "../useUserOptionState";
3637
3738
const { vue_ui_3d_bar: DEFAULT_CONFIG } = useConfig();
3839
@@ -73,6 +74,8 @@ const FINAL_CONFIG = computed({
7374
}
7475
});
7576
77+
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
78+
7679
function prepareConfig() {
7780
const mergedConfig = useNestedProp({
7881
userConfig: props.config,
@@ -521,7 +524,7 @@ defineExpose({
521524
</script>
522525

523526
<template>
524-
<div ref="bar3dChart" :class="`vue-ui-3d-bar`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="`3d_bar_${uid}`">
527+
<div ref="bar3dChart" :class="`vue-ui-3d-bar`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="`3d_bar_${uid}`" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
525528
<PenAndPaper
526529
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
527530
:parent="bar3dChart"
@@ -551,7 +554,7 @@ defineExpose({
551554
<!-- OPTIONS -->
552555
<UserOptions
553556
ref="details"
554-
v-if="FINAL_CONFIG.userOptions.show && isDataset"
557+
v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
555558
:backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
556559
:color="FINAL_CONFIG.style.chart.color"
557560
:isPrinting="isPrinting"
@@ -573,6 +576,9 @@ defineExpose({
573576
@generateImage="generateImage"
574577
@toggleTable="toggleTable"
575578
@toggleAnnotator="toggleAnnotator"
579+
:style="{
580+
visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
581+
}"
576582
>
577583
<template #optionPdf v-if="$slots.optionPdf">
578584
<slot name="optionPdf" />

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { useResponsive } from "../useResponsive";
2929
import { useConfig } from "../useConfig";
3030
import PackageVersion from "../atoms/PackageVersion.vue";
3131
import PenAndPaper from "../atoms/PenAndPaper.vue";
32+
import { useUserOptionState } from "../useUserOptionState";
3233
3334
const { vue_ui_age_pyramid: DEFAULT_CONFIG } = useConfig();
3435
@@ -73,6 +74,8 @@ const FINAL_CONFIG = computed({
7374
}
7475
});
7576
77+
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
78+
7679
function prepareConfig() {
7780
const mergedConfig = useNestedProp({
7881
userConfig: props.config,
@@ -430,7 +433,7 @@ defineExpose({
430433
</script>
431434

432435
<template>
433-
<div :class="`vue-ui-age-pyramid ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" ref="agePyramid" :id="`vue-ui-age-pyramid_${uid}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.backgroundColor};${FINAL_CONFIG.responsive ? 'height:100%' : ''}`">
436+
<div :class="`vue-ui-age-pyramid ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" ref="agePyramid" :id="`vue-ui-age-pyramid_${uid}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.backgroundColor};${FINAL_CONFIG.responsive ? 'height:100%' : ''}`" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
434437
<PenAndPaper
435438
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
436439
:parent="agePyramid"
@@ -467,7 +470,7 @@ defineExpose({
467470
<UserOptions
468471
ref="details"
469472
:key="`user_options_${step}`"
470-
v-if="FINAL_CONFIG.userOptions.show && isDataset"
473+
v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
471474
:backgroundColor="FINAL_CONFIG.style.backgroundColor"
472475
:color="FINAL_CONFIG.style.color"
473476
:isImaging="isImaging"
@@ -493,6 +496,9 @@ defineExpose({
493496
@toggleTable="toggleTable"
494497
@toggleTooltip="toggleTooltip"
495498
@toggleAnnotator="toggleAnnotator"
499+
:style="{
500+
visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
501+
}"
496502
>
497503
<template #optionTooltip v-if="$slots.optionTooltip">
498504
<slot name="optionTooltip"/>

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { usePrinter } from "../usePrinter";
1616
import PackageVersion from "../atoms/PackageVersion.vue";
1717
import PenAndPaper from "../atoms/PenAndPaper.vue";
1818
import Skeleton from "./vue-ui-skeleton.vue";
19+
import { useUserOptionState } from "../useUserOptionState";
1920
2021
const { vue_ui_bullet: DEFAULT_CONFIG } = useConfig();
2122
@@ -160,6 +161,8 @@ const FINAL_CONFIG = computed({
160161
}
161162
});
162163
164+
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
165+
163166
watch(() => props.config, (_newCfg) => {
164167
FINAL_CONFIG.value = prepareConfig();
165168
prepareChart();
@@ -363,6 +366,8 @@ defineExpose({
363366
:class="`vue-ui-bullet ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
364367
:style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%;background:${FINAL_CONFIG.style.chart.backgroundColor}`"
365368
:id="`bullet_${uid}`"
369+
@mouseenter="() => setUserOptionsVisibility(true)"
370+
@mouseleave="() => setUserOptionsVisibility(false)"
366371
>
367372
<PenAndPaper
368373
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
@@ -399,7 +404,7 @@ defineExpose({
399404

400405
<UserOptions
401406
ref="details"
402-
v-if="FINAL_CONFIG.userOptions.show && isDataset"
407+
v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
403408
:backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
404409
:color="FINAL_CONFIG.style.chart.color"
405410
:isPrinting="isPrinting"
@@ -422,6 +427,9 @@ defineExpose({
422427
@generatePdf="generatePdf"
423428
@generateImage="generateImage"
424429
@toggleAnnotator="toggleAnnotator"
430+
:style="{
431+
visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
432+
}"
425433
>
426434
<template #optionPdf v-if="$slots.optionPdf">
427435
<slot name="optionPdf" />

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { useResponsive } from "../useResponsive";
3232
import { useConfig } from "../useConfig";
3333
import PackageVersion from "../atoms/PackageVersion.vue";
3434
import PenAndPaper from "../atoms/PenAndPaper.vue";
35+
import { useUserOptionState } from "../useUserOptionState";
3536
3637
const { vue_ui_candlestick: DEFAULT_CONFIG } = useConfig()
3738
@@ -79,6 +80,8 @@ const FINAL_CONFIG = computed({
7980
}
8081
});
8182
83+
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
84+
8285
function prepareConfig() {
8386
const mergedConfig = useNestedProp({
8487
userConfig: props.config,
@@ -536,7 +539,7 @@ defineExpose({
536539
</script>
537540

538541
<template>
539-
<div ref="candlestickChart" :class="`vue-ui-candlestick ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`position:relative;font-family:${FINAL_CONFIG.style.fontFamily}; text-align:center;background:${FINAL_CONFIG.style.backgroundColor}; ${FINAL_CONFIG.responsive ? 'height: 100%' : ''}`" :id="`vue-ui-candlestick_${uid}`">
542+
<div ref="candlestickChart" :class="`vue-ui-candlestick ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`position:relative;font-family:${FINAL_CONFIG.style.fontFamily}; text-align:center;background:${FINAL_CONFIG.style.backgroundColor}; ${FINAL_CONFIG.responsive ? 'height: 100%' : ''}`" :id="`vue-ui-candlestick_${uid}`" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
540543
<PenAndPaper
541544
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
542545
:parent="candlestickChart"
@@ -574,7 +577,7 @@ defineExpose({
574577
<UserOptions
575578
ref="details"
576579
:key="`user_options_${step}`"
577-
v-if="FINAL_CONFIG.userOptions.show && isDataset"
580+
v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
578581
:backgroundColor="FINAL_CONFIG.style.backgroundColor"
579582
:color="FINAL_CONFIG.style.color"
580583
:isImaging="isImaging"
@@ -600,6 +603,9 @@ defineExpose({
600603
@toggleTable="toggleTable"
601604
@toggleTooltip="toggleTooltip"
602605
@toggleAnnotator="toggleAnnotator"
606+
:style="{
607+
visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
608+
}"
603609
>
604610
<template #optionTooltip v-if="$slots.optionTooltip">
605611
<slot name="optionTooltip"/>

‎src/components/vue-ui-carousel-table.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
import { usePrinter } from "../usePrinter";
1414
import UserOptions from "../atoms/UserOptions.vue";
1515
import Skeleton from "./vue-ui-skeleton.vue";
16+
import { useUserOptionState } from "../useUserOptionState";
1617
1718
const { vue_ui_carousel_table: DEFAULT_CONFIG } = useConfig();
1819
@@ -75,6 +76,8 @@ const FINAL_CONFIG = computed({
7576
}
7677
});
7778
79+
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
80+
7881
function prepareConfig() {
7982
return useNestedProp({
8083
userConfig: props.config,
@@ -344,7 +347,7 @@ defineExpose({
344347
</script>
345348

346349
<template>
347-
<div style="position:relative; overflow:visible;" ref="chartContainer">
350+
<div style="position:relative; overflow:visible;" ref="chartContainer" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
348351
<div
349352
ref="tableContainer"
350353
:id="`carousel-table_${uid}`"
@@ -471,7 +474,7 @@ defineExpose({
471474
<UserOptions
472475
ref="details"
473476
:key="`user_option_${step}`"
474-
v-if="FINAL_CONFIG.userOptions.show && isDataset"
477+
v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
475478
:backgroundColor="FINAL_CONFIG.style.backgroundColor"
476479
:color="FINAL_CONFIG.style.color"
477480
:isPrinting="isPrinting"
@@ -497,6 +500,9 @@ defineExpose({
497500
@generateImage="generateImage"
498501
@toggleAnimation="toggleAnimation"
499502
@toggleFullscreen="toggleFullscreen"
503+
:style="{
504+
visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
505+
}"
500506
>
501507
<template #optionPdf v-if="$slots.optionPdf">
502508
<slot name="optionPdf" />

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { usePrinter } from "../usePrinter";
3232
import { useConfig } from "../useConfig";
3333
import PackageVersion from "../atoms/PackageVersion.vue";
3434
import PenAndPaper from "../atoms/PenAndPaper.vue";
35+
import { useUserOptionState } from "../useUserOptionState";
3536
3637
const { vue_ui_chestnut: DEFAULT_CONFIG } = useConfig()
3738
@@ -68,6 +69,8 @@ const FINAL_CONFIG = computed({
6869
}
6970
});
7071
72+
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
73+
7174
function prepareConfig() {
7275
const mergedConfig = useNestedProp({
7376
userConfig: props.config,
@@ -521,6 +524,7 @@ defineExpose({
521524
ref="chestnutChart"
522525
:id="`vue-ui-chestnut_${uid}`"
523526
:style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`"
527+
@mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)"
524528
>
525529
<PenAndPaper
526530
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
@@ -542,7 +546,7 @@ defineExpose({
542546
<UserOptions
543547
ref="details"
544548
:key="`user_options_${step}`"
545-
v-if="FINAL_CONFIG.userOptions.show && isDataset"
549+
v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
546550
:backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
547551
:color="FINAL_CONFIG.style.chart.color"
548552
:isImaging="isImaging"
@@ -565,6 +569,9 @@ defineExpose({
565569
@generateImage="generateImage"
566570
@toggleTable="toggleTable"
567571
@toggleAnnotator="toggleAnnotator"
572+
:style="{
573+
visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
574+
}"
568575
>
569576
<template #optionPdf v-if="$slots.optionPdf">
570577
<slot name="optionPdf" />

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import { usePrinter } from "../usePrinter";
3838
import { useConfig } from "../useConfig";
3939
import PackageVersion from "../atoms/PackageVersion.vue";
4040
import PenAndPaper from "../atoms/PenAndPaper.vue";
41+
import { useUserOptionState } from "../useUserOptionState";
4142
4243
const { vue_ui_donut_evolution: DEFAULT_CONFIG } = useConfig();
4344
@@ -163,6 +164,8 @@ const FINAL_CONFIG = computed({
163164
}
164165
});
165166
167+
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
168+
166169
function prepareConfig() {
167170
const mergedConfig = useNestedProp({
168171
userConfig: props.config,
@@ -581,7 +584,7 @@ defineExpose({
581584
</script>
582585
583586
<template>
584-
<div ref="donutEvolutionChart" :class="`vue-ui-donut-evolution ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="uid">
587+
<div ref="donutEvolutionChart" :class="`vue-ui-donut-evolution ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="uid" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
585588
<PenAndPaper
586589
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
587590
:parent="donutEvolutionChart"
@@ -618,7 +621,7 @@ defineExpose({
618621
<UserOptions
619622
ref="details"
620623
:key="`user_options_${step}`"
621-
v-if="FINAL_CONFIG.userOptions.show && isDataset"
624+
v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
622625
:backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
623626
:color="FINAL_CONFIG.style.chart.color"
624627
:isPrinting="isPrinting"
@@ -641,6 +644,9 @@ defineExpose({
641644
@generateImage="generateImage"
642645
@toggleTable="toggleTable"
643646
@toggleAnnotator="toggleAnnotator"
647+
:style="{
648+
visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
649+
}"
644650
>
645651
<template #optionPdf v-if="$slots.optionPdf">
646652
<slot name="optionPdf" />

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { useResponsive } from "../useResponsive";
3939
import { useConfig } from "../useConfig";
4040
import PackageVersion from "../atoms/PackageVersion.vue";
4141
import PenAndPaper from "../atoms/PenAndPaper.vue";
42+
import { useUserOptionState } from "../useUserOptionState";
4243
4344
const { vue_ui_donut: DEFAULT_CONFIG } = useConfig()
4445
@@ -160,6 +161,8 @@ const FINAL_CONFIG = computed({
160161
}
161162
});
162163
164+
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
165+
163166
watch(() => props.config, (_newCfg) => {
164167
FINAL_CONFIG.value = prepareConfig();
165168
prepareChart();
@@ -654,7 +657,7 @@ defineExpose({
654657
</script>
655658

656659
<template>
657-
<div ref="donutChart" :class="`vue-ui-donut ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; ${FINAL_CONFIG.responsive ? 'height:100%;' : ''} text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="`donut__${uid}`">
660+
<div ref="donutChart" :class="`vue-ui-donut ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; ${FINAL_CONFIG.responsive ? 'height:100%;' : ''} text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="`donut__${uid}`" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
658661
<PenAndPaper
659662
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
660663
:parent="donutChart"
@@ -693,7 +696,7 @@ defineExpose({
693696
<UserOptions
694697
ref="details"
695698
:key="`user_option_${step}`"
696-
v-if="FINAL_CONFIG.userOptions.show && isDataset"
699+
v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
697700
:backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
698701
:color="FINAL_CONFIG.style.chart.color"
699702
:isPrinting="isPrinting"
@@ -721,6 +724,9 @@ defineExpose({
721724
@toggleLabels="toggleLabels"
722725
@toggleTooltip="toggleTooltip"
723726
@toggleAnnotator="toggleAnnotator"
727+
:style="{
728+
visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
729+
}"
724730
>
725731
<template #optionTooltip v-if="$slots.optionTooltip">
726732
<slot name="optionTooltip"/>

0 commit comments

Comments
 (0)