Skip to content

Commit cc763dd

Browse files
graphierosgraphieros
committed
Added fullscreen toggle user option
1 parent 1cf31fd commit cc763dd

28 files changed

+405
-39
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": "1.9.61",
4+
"version": "1.9.62",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3875,12 +3875,14 @@ const moodRadarConfig = ref({
38753875
<BaseIcon name="arrowTop" stroke="#42d392" />
38763876
<BaseIcon name="arrowLeft" stroke="#42d392" />
38773877
<BaseIcon name="arrowBottom" stroke="#42d392" />
3878+
<BaseIcon name="fullscreen" stroke="#42d392" />
3879+
<BaseIcon name="exitFullscreen" stroke="#42d392" />
38783880

38793881
</div>
38803882
</template>
38813883
</Box>
38823884

3883-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_molecule)">
3885+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_molecule)">
38843886
<template #title>
38853887
<BaseIcon name="chartCluster"/>
38863888
VueUiMolecule
@@ -3896,7 +3898,7 @@ const moodRadarConfig = ref({
38963898
</template>
38973899
</Box>
38983900

3899-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_mood_radar)">
3901+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_mood_radar)">
39003902
<template #title>
39013903
<BaseIcon name="chartMoodRadar"/>
39023904
VueUiMoodRadar

‎src/atoms/BaseIcon.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,9 @@ const icons = computed(() => {
8484
arrowTop: `<path fill="${props.stroke}" stroke="none" stroke-width="none" d="M10 2 1 17C7 14 13 14 19 17L10 2" stroke-linejoin="round" />`,
8585
arrowLeft: `<path fill="${props.stroke}" stroke="none" stroke-width="none" d="M2 10 17 1C14 7 14 13 17 19L2 10" stroke-linejoin="round" />`,
8686
arrowBottom: `<path fill="${props.stroke}" stroke="none" stroke-width="none" d="M10 18 1 3C7 6 13 6 19 3L10 18" stroke-linejoin="round" />`,
87+
fullscreen: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M1 6 1 4C1 2 2 1 4 1L6 1M14 1 16 1C18 1 19 2 19 4L19 6M19 14 19 16C19 18 18 19 16 19L14 19M6 19 4 19C2 19 1 18 1 16L1 14M9 9 5 5M11 9 15 5M11 11 15 15M9 11 5 15M5 12 5 15 8 15M12 15 15 15 15 12M15 8 15 5 12 5M8 5 5 5 5 8" />`,
88+
exitFullscreen: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M1 6 1 4C1 2 2 1 4 1L6 1M14 1 16 1C18 1 19 2 19 4L19 6M19 14 19 16C19 18 18 19 16 19L14 19M6 19 4 19C2 19 1 18 1 16L1 14M8 8 4 4M12 8 16 4M12 12 16 16M8 12 4 16M5 12 8 12 8 15M12 15 12 12 15 12M15 8 12 8 12 5M8 5 8 8 5 8" />`,
89+
8790
}
8891
})
8992

‎src/atoms/Legend.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function handleClick(legend, i) {
4949
<style scoped>
5050
.vue-data-ui-legend {
5151
user-select:none;
52-
height: 100%;
52+
height: fit-content;
5353
width:100%;
5454
display: flex;
5555
align-items:center;

‎src/atoms/UserOptions.vue‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref } from "vue";
2+
import { ref, onMounted, onBeforeUnmount } from "vue";
33
import vClickOutside from '../directives/vClickOutside';
44
import BaseIcon from "./BaseIcon.vue";
55
@@ -51,10 +51,18 @@ const props = defineProps({
5151
},
5252
uid: {
5353
type: String,
54+
},
55+
hasFullscreen: {
56+
type: Boolean,
57+
default: false
58+
},
59+
chartElement: {
60+
type: HTMLElement,
61+
default: null
5462
}
5563
});
5664
57-
const emit = defineEmits(['generatePdf', 'generateCsv', 'generateImage', 'toggleTable', 'toggleLabels', 'toggleSort']);
65+
const emit = defineEmits(['generatePdf', 'generateCsv', 'generateImage', 'toggleTable', 'toggleLabels', 'toggleSort', 'toggleFullscreen']);
5866
5967
function generatePdf() {
6068
emit('generatePdf');
@@ -106,6 +114,38 @@ function toggleSort() {
106114
emit('toggleSort')
107115
}
108116
117+
const isFullscreen = ref(false);
118+
119+
function toggleFullscreen(state) {
120+
if(!props.chartElement) return;
121+
if(state === "in") {
122+
isFullscreen.value = true;
123+
props.chartElement.requestFullscreen();
124+
emit('toggleFullscreen', true)
125+
}else {
126+
isFullscreen.value = false;
127+
document.exitFullscreen();
128+
emit('toggleFullscreen', false)
129+
}
130+
}
131+
132+
function fullscreenchanged(event) {
133+
if (document.fullscreenElement) {
134+
isFullscreen.value = true;
135+
} else {
136+
isFullscreen.value = false;
137+
}
138+
}
139+
140+
onMounted(() => {
141+
document.addEventListener('fullscreenchange', fullscreenchanged)
142+
})
143+
144+
onBeforeUnmount(() => {
145+
document.removeEventListener('fullscreenchange', fullscreenchanged)
146+
})
147+
148+
109149
</script>
110150

111151
<template>
@@ -141,6 +181,11 @@ function toggleSort() {
141181
<BaseIcon name="sort" :stroke="color"/>
142182
</button>
143183

184+
<button tabindex="0" v-if="hasFullscreen" data-cy="user-options-sort" class="vue-ui-user-options-button" @click="toggleSort">
185+
<BaseIcon v-if="isFullscreen" name="exitFullscreen" :stroke="color" @click="toggleFullscreen('out')"/>
186+
<BaseIcon v-if="!isFullscreen" name="fullscreen" :stroke="color" @click="toggleFullscreen('in')"/>
187+
</button>
188+
144189
</div>
145190
</div>
146191
</template>

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const defaultConfig = ref(mainConfig.vue_ui_3d_bar);
3030
const isPrinting = ref(false);
3131
const isImaging = ref(false);
3232
const details = ref(null);
33+
const bar3dChart = ref(null)
3334
3435
const barConfig = computed(() => {
3536
return useNestedProp({
@@ -144,6 +145,11 @@ function generateImage() {
144145
}, 100)
145146
}
146147
148+
const isFullscreen = ref(false)
149+
function toggleFullscreen(state) {
150+
isFullscreen.value = state;
151+
}
152+
147153
defineExpose({
148154
generatePdf,
149155
generateImage
@@ -153,7 +159,7 @@ defineExpose({
153159
</script>
154160

155161
<template>
156-
<div :ref="`bar3dChart`" :class="`vue-ui-3d-bar`" :style="`font-family:${barConfig.style.fontFamily};width:100%; text-align:center;background:${barConfig.style.chart.backgroundColor}`" :id="`3d_bar_${uid}`">
162+
<div ref="bar3dChart" :class="`vue-ui-3d-bar`" :style="`font-family:${barConfig.style.fontFamily};width:100%; text-align:center;background:${barConfig.style.chart.backgroundColor}`" :id="`3d_bar_${uid}`">
157163

158164
<div v-if="barConfig.style.chart.title.text" :style="`width:100%;background:${barConfig.style.chart.backgroundColor}`">
159165
<!-- TITLE AS DIV -->
@@ -188,12 +194,15 @@ defineExpose({
188194
:title="barConfig.userOptions.title"
189195
:uid="uid"
190196
hasImg
197+
hasFullscreen
198+
:chartElement="bar3dChart"
199+
@toggleFullscreen="toggleFullscreen"
191200
:hasXls="false"
192201
@generatePdf="generatePdf"
193202
@generateImage="generateImage"
194203
/>
195204

196-
<svg 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}`">
205+
<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}`">
197206

198207
<!-- DEFS -->
199208
<defs>
@@ -266,4 +275,10 @@ defineExpose({
266275
user-select: none;
267276
position: relative;
268277
}
278+
.vue-data-ui-fullscreen--on {
279+
height: 100% !important;
280+
}
281+
.vue-data-ui-fullscreen--off {
282+
max-width: 100%;
283+
}
269284
</style>

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,11 @@ function generateCsv() {
254254
});
255255
}
256256
257+
const isFullscreen = ref(false)
258+
function toggleFullscreen(state) {
259+
isFullscreen.value = state;
260+
}
261+
257262
defineExpose({
258263
generatePdf,
259264
generateCsv,
@@ -298,14 +303,17 @@ defineExpose({
298303
:uid="uid"
299304
:hasImg="true"
300305
hasTable
306+
hasFullscreen
307+
:chartElement="agePyramid"
308+
@toggleFullscreen="toggleFullscreen"
301309
@generatePdf="generatePdf"
302310
@generateCsv="generateCsv"
303311
@generateImage="generateImage"
304312
@toggleTable="mutableConfig.showTable = !mutableConfig.showTable"
305313
/>
306314

307315
<!-- CHART -->
308-
<svg :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${agePyramidConfig.style.backgroundColor};color:${agePyramidConfig.style.color}`" >
316+
<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}`" >
309317

310318
<defs>
311319
<linearGradient
@@ -644,4 +652,10 @@ defineExpose({
644652
font-weight: 400;
645653
user-select: none;
646654
}
655+
.vue-data-ui-fullscreen--on {
656+
height: 90% !important;
657+
}
658+
.vue-data-ui-fullscreen--off {
659+
max-width: 100%;
660+
}
647661
</style>

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,11 @@ function generateCsv() {
267267
});
268268
}
269269
270+
const isFullscreen = ref(false)
271+
function toggleFullscreen(state) {
272+
isFullscreen.value = state;
273+
}
274+
270275
defineExpose({
271276
generatePdf,
272277
generateCsv,
@@ -311,14 +316,17 @@ defineExpose({
311316
:uid="uid"
312317
:hasImg="true"
313318
hasTable
319+
hasFullscreen
320+
:chartElement="candlestickChart"
321+
@toggleFullscreen="toggleFullscreen"
314322
@generatePdf="generatePdf"
315323
@generateCsv="generateCsv"
316324
@generateImage="generateImage"
317325
@toggleTable="mutableConfig.showTable = !mutableConfig.showTable"
318326
/>
319327

320328
<!-- CHART -->
321-
<svg :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${candlestickConfig.style.backgroundColor};color:${candlestickConfig.style.color}`">
329+
<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}`">
322330
<g v-if="drawableDataset.length > 0">
323331
<!-- DEFS -->
324332
<defs>
@@ -791,4 +799,11 @@ input[type="range"]:active::-webkit-slider-thumb{
791799
.vue-ui-dna * {
792800
animation: none !important;
793801
}
802+
.vue-data-ui-fullscreen--on {
803+
height: 80% !important;
804+
}
805+
.vue-data-ui-fullscreen--off {
806+
max-width: 100%;
807+
}
808+
794809
</style>

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -381,6 +381,11 @@ function generateCsv() {
381381
});
382382
}
383383
384+
const isFullscreen = ref(false)
385+
function toggleFullscreen(state) {
386+
isFullscreen.value = state;
387+
}
388+
384389
defineExpose({
385390
getData,
386391
generatePdf,
@@ -409,13 +414,16 @@ defineExpose({
409414
:uid="uid"
410415
:hasImg="true"
411416
hasTable
417+
hasFullscreen
418+
:chartElement="chestnutChart"
419+
@toggleFullscreen="toggleFullscreen"
412420
@generatePdf="generatePdf"
413421
@generateCsv="generateCsv"
414422
@generateImage="generateImage"
415423
@toggleTable="mutableConfig.showTable = !mutableConfig.showTable"
416424
/>
417425

418-
<svg 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}`" >
426+
<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}`" >
419427

420428
<!-- TITLE AS G -->
421429
<g v-if="!selectedNut">
@@ -1106,4 +1114,10 @@ defineExpose({
11061114
opacity: 1;
11071115
}
11081116
}
1117+
.vue-data-ui-fullscreen--on {
1118+
height: 100% !important;
1119+
}
1120+
.vue-data-ui-fullscreen--off {
1121+
max-width: 100%;
1122+
}
11091123
</style>

0 commit comments

Comments
 (0)