Skip to content

Commit a1ae38b

Browse files
graphierosgraphieros
committed
Improved fullscreen behavior
1 parent c476f67 commit a1ae38b

25 files changed

+167
-26
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.63",
4+
"version": "1.9.64",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/atoms/BaseDirectionPad.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,17 @@ const props = defineProps({
44
color: {
55
type: String,
66
default: '#FF0000'
7+
},
8+
isFullscreen: {
9+
type: Boolean,
10+
default: false
711
}
812
});
913
const emit = defineEmits(['moveLeft', 'moveTop', 'moveRight', 'moveBottom', 'reset'])
1014
</script>
1115

1216
<template>
13-
<div style="position: absolute;bottom:0;right:0;width:80px;height:80px" data-html2canvas-ignore>
17+
<div :style="`position: ${isFullscreen ? 'fixed' : 'absolute'};bottom:0;right:${isFullscreen ? '12px' : '0'};width:80px;height:80px`" data-html2canvas-ignore>
1418
<div style="position: relative;height:100%;width:100%">
1519
<button @click="emit('moveLeft')" style="position: absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
1620
<BaseIcon :stroke="color" name="arrowLeft" style="cursor: pointer"/>

‎src/atoms/UserOptions.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ const props = defineProps({
5959
chartElement: {
6060
type: HTMLElement,
6161
default: null
62+
},
63+
isFullscreen: {
64+
type: Boolean,
65+
default: false,
6266
}
6367
});
6468
@@ -149,7 +153,7 @@ onBeforeUnmount(() => {
149153
</script>
150154

151155
<template>
152-
<div v-click-outside="closeIfOpen" data-html2canvas-ignore class="vue-ui-user-options" :style="`width: 34px; height: 34px; position: absolute; top: 0; right:0; padding: 4px; background:transparent; `">
156+
<div v-click-outside="closeIfOpen" data-html2canvas-ignore class="vue-ui-user-options" :style="`width: 34px; height: 34px; position: ${isFullscreen ? 'fixed' : 'absolute'}; top: 0; right:${isFullscreen ? '12px': '0'}; padding: 4px; background:transparent; `">
153157
<div tabindex="0" data-cy="user-options-summary" :style="`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${backgroundColor};`" @click.stop="toggle" @keypress.enter="toggle">
154158
<BaseIcon :name="isOpen ? 'close' : 'menu'" stroke="#CCCCCC" :stroke-width="2" />
155159
</div>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const details = ref(null);
3535
const isTooltip = ref(false);
3636
const tooltipContent = ref("");
3737
const selectedIndex = ref(null);
38+
const step = ref(0);
3839
3940
const agePyramidConfig = computed(() => {
4041
return useNestedProp({
@@ -257,6 +258,7 @@ function generateCsv() {
257258
const isFullscreen = ref(false)
258259
function toggleFullscreen(state) {
259260
isFullscreen.value = state;
261+
step.value += 1;
260262
}
261263
262264
defineExpose({
@@ -268,7 +270,7 @@ defineExpose({
268270
</script>
269271

270272
<template>
271-
<div class="vue-ui-age-pyramid" ref="agePyramid" :id="`vue-ui-age-pyramid_${uid}`" :style="`font-family:${agePyramidConfig.style.fontFamily};width:100%; text-align:center;${!agePyramidConfig.style.title.text ? 'padding-top:36px' : ''};background:${agePyramidConfig.style.backgroundColor}`">
273+
<div :class="`vue-ui-age-pyramid ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" ref="agePyramid" :id="`vue-ui-age-pyramid_${uid}`" :style="`font-family:${agePyramidConfig.style.fontFamily};width:100%; text-align:center;${!agePyramidConfig.style.title.text ? 'padding-top:36px' : ''};background:${agePyramidConfig.style.backgroundColor}`">
272274

273275
<div v-if="(!mutableConfig.inside || isPrinting) && agePyramidConfig.style.title.text" :style="`width:100%;background:${agePyramidConfig.style.backgroundColor}`">
274276
<Title
@@ -294,6 +296,7 @@ defineExpose({
294296
<!-- OPTIONS -->
295297
<UserOptions
296298
ref="details"
299+
:key="`user_options_${step}`"
297300
v-if="agePyramidConfig.userOptions.show"
298301
:backgroundColor="agePyramidConfig.style.backgroundColor"
299302
:color="agePyramidConfig.style.color"
@@ -304,6 +307,7 @@ defineExpose({
304307
:hasImg="true"
305308
hasTable
306309
hasFullscreen
310+
:isFullscreen="isFullscreen"
307311
:chartElement="agePyramid"
308312
@toggleFullscreen="toggleFullscreen"
309313
@generatePdf="generatePdf"
@@ -659,4 +663,7 @@ defineExpose({
659663
.vue-data-ui-fullscreen--off {
660664
max-width: 100%;
661665
}
666+
.vue-data-ui-wrapper-fullscreen {
667+
overflow: auto;
668+
}
662669
</style>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const isTooltip = ref(false);
3434
const tooltipContent = ref("");
3535
const candlestickChart = ref(null);
3636
const hoveredIndex = ref(undefined);
37+
const step = ref(0);
3738
3839
onMounted(() => {
3940
const sliderOne = document.getElementById(`start_${uid.value}`);
@@ -270,6 +271,7 @@ function generateCsv() {
270271
const isFullscreen = ref(false)
271272
function toggleFullscreen(state) {
272273
isFullscreen.value = state;
274+
step.value += 1;
273275
}
274276
275277
defineExpose({
@@ -281,7 +283,7 @@ defineExpose({
281283
</script>
282284

283285
<template>
284-
<div ref="candlestickChart" :class="`vue-ui-candlestick ${candlestickConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${candlestickConfig.style.fontFamily};width:100%; text-align:center;${!candlestickConfig.style.title.text ? 'padding-top:36px' : ''};background:${candlestickConfig.style.backgroundColor}`" :id="`vue-ui-candlestick_${uid}`">
286+
<div ref="candlestickChart" :class="`vue-ui-candlestick ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${candlestickConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${candlestickConfig.style.fontFamily};width:100%; text-align:center;${!candlestickConfig.style.title.text ? 'padding-top:36px' : ''};background:${candlestickConfig.style.backgroundColor}`" :id="`vue-ui-candlestick_${uid}`">
285287
<div v-if="(!mutableConfig.inside || isPrinting) && candlestickConfig.style.title.text" :style="`width:100%;background:${candlestickConfig.style.backgroundColor}`">
286288
<!-- TITLE AS DIV -->
287289
<Title
@@ -307,6 +309,7 @@ defineExpose({
307309
<!-- OPTIONS -->
308310
<UserOptions
309311
ref="details"
312+
:key="`user_options_${step}`"
310313
v-if="candlestickConfig.userOptions.show"
311314
:backgroundColor="candlestickConfig.style.backgroundColor"
312315
:color="candlestickConfig.style.color"
@@ -317,6 +320,7 @@ defineExpose({
317320
:hasImg="true"
318321
hasTable
319322
hasFullscreen
323+
:isFullscreen="isFullscreen"
320324
:chartElement="candlestickChart"
321325
@toggleFullscreen="toggleFullscreen"
322326
@generatePdf="generatePdf"
@@ -806,5 +810,7 @@ input[type="range"]:active::-webkit-slider-thumb{
806810
.vue-data-ui-fullscreen--off {
807811
max-width: 100%;
808812
}
809-
813+
.vue-data-ui-wrapper-fullscreen {
814+
overflow: auto;
815+
}
810816
</style>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const isImaging = ref(false);
3030
const isPrinting = ref(false);
3131
const chestnutChart = ref(null);
3232
const details = ref(null);
33+
const step = ref(0);
3334
3435
const chestnutConfig = computed(() => {
3536
return useNestedProp({
@@ -384,6 +385,7 @@ function generateCsv() {
384385
const isFullscreen = ref(false)
385386
function toggleFullscreen(state) {
386387
isFullscreen.value = state;
388+
step.value += 1;
387389
}
388390
389391
defineExpose({
@@ -397,14 +399,15 @@ defineExpose({
397399

398400
<template>
399401
<div
400-
class="vue-ui-chestnut"
402+
:class="`vue-ui-chestnut ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
401403
ref="chestnutChart"
402404
:id="`vue-ui-chestnut_${uid}`"
403405
:style="`font-family:${chestnutConfig.style.fontFamily};width:100%; text-align:center;padding-top:36px;background:${chestnutConfig.style.chart.backgroundColor}`"
404406
>
405407
<!-- OPTIONS -->
406408
<UserOptions
407409
ref="details"
410+
:key="`user_options_${step}`"
408411
v-if="chestnutConfig.userOptions.show"
409412
:backgroundColor="chestnutConfig.style.chart.backgroundColor"
410413
:color="chestnutConfig.style.chart.color"
@@ -415,6 +418,7 @@ defineExpose({
415418
:hasImg="true"
416419
hasTable
417420
hasFullscreen
421+
:isFullscreen="isFullscreen"
418422
:chartElement="chestnutChart"
419423
@toggleFullscreen="toggleFullscreen"
420424
@generatePdf="generatePdf"
@@ -1120,4 +1124,7 @@ defineExpose({
11201124
.vue-data-ui-fullscreen--off {
11211125
max-width: 100%;
11221126
}
1127+
.vue-data-ui-wrapper-fullscreen {
1128+
overflow: auto;
1129+
}
11231130
</style>

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ const hoveredIndex = ref(null);
3636
const hoveredDatapoint = ref(null);
3737
const isFixed = ref(false);
3838
const fixedDatapoint = ref(null);
39-
const donutEvolutionChart = ref(null)
39+
const donutEvolutionChart = ref(null);
40+
const step = ref(0);
4041
4142
const emit = defineEmits(['selectLegend'])
4243
@@ -362,6 +363,7 @@ function generateCsv() {
362363
const isFullscreen = ref(false)
363364
function toggleFullscreen(state) {
364365
isFullscreen.value = state;
366+
step.value += 1;
365367
}
366368
367369
defineExpose({
@@ -374,7 +376,7 @@ defineExpose({
374376
</script>
375377
376378
<template>
377-
<div ref="donutEvolutionChart" :class="`vue-ui-donut-evolution ${donutEvolutionConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`overflow: visible;font-family:${donutEvolutionConfig.style.fontFamily};width:100%; text-align:center;${!donutEvolutionConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${donutEvolutionConfig.style.chart.backgroundColor}`" :id="uid">
379+
<div ref="donutEvolutionChart" :class="`vue-ui-donut-evolution ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${donutEvolutionConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${donutEvolutionConfig.style.fontFamily};width:100%; text-align:center;${!donutEvolutionConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${donutEvolutionConfig.style.chart.backgroundColor}`" :id="uid">
378380
<div v-if="donutEvolutionConfig.style.chart.title.text" :style="`width:100%;background:${donutEvolutionConfig.style.chart.backgroundColor};padding-bottom:24px`" @mouseleave="leave">
379381
<!-- TITLE AS DIV -->
380382
<Title
@@ -399,6 +401,7 @@ defineExpose({
399401
400402
<UserOptions
401403
ref="details"
404+
:key="`user_options_${step}`"
402405
v-if="donutEvolutionConfig.userOptions.show"
403406
:backgroundColor="donutEvolutionConfig.style.chart.backgroundColor"
404407
:color="donutEvolutionConfig.style.chart.color"
@@ -409,6 +412,7 @@ defineExpose({
409412
hasImg
410413
hasTable
411414
hasFullscreen
415+
:isFullscreen="isFullscreen"
412416
@toggleFullscreen="toggleFullscreen"
413417
:chartElement="donutEvolutionChart"
414418
@generatePdf="generatePdf"
@@ -814,4 +818,7 @@ path {
814818
.vue-data-ui-fullscreen--off {
815819
max-width: 100%;
816820
}
821+
.vue-data-ui-wrapper-fullscreen {
822+
overflow: auto;
823+
}
817824
</style>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const details = ref(null);
3737
const isTooltip = ref(false);
3838
const tooltipContent = ref("");
3939
const selectedSerie = ref(null);
40+
const step = ref(0);
4041
4142
const donutConfig = computed(() => {
4243
return useNestedProp({
@@ -295,6 +296,7 @@ const dataTable = computed(() => {
295296
const isFullscreen = ref(false)
296297
function toggleFullscreen(state) {
297298
isFullscreen.value = state;
299+
step.value += 1;
298300
}
299301
300302
defineExpose({
@@ -307,7 +309,7 @@ defineExpose({
307309
</script>
308310

309311
<template>
310-
<div ref="donutChart" :class="`vue-ui-donut ${donutConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${donutConfig.style.fontFamily};width:100%; text-align:center;${!donutConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${donutConfig.style.chart.backgroundColor}`" :id="`donut__${uid}`">
312+
<div ref="donutChart" :class="`vue-ui-donut ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${donutConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${donutConfig.style.fontFamily};width:100%; text-align:center;${!donutConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${donutConfig.style.chart.backgroundColor}`" :id="`donut__${uid}`">
311313
<div v-if="(!mutableConfig.inside || isPrinting) && donutConfig.style.chart.title.text" :style="`width:100%;background:${donutConfig.style.chart.backgroundColor};padding-bottom:24px`">
312314
<!-- TITLE AS DIV -->
313315
<Title
@@ -333,6 +335,7 @@ defineExpose({
333335
<!-- OPTIONS -->
334336
<UserOptions
335337
ref="details"
338+
:key="`user_option_${step}`"
336339
v-if="donutConfig.userOptions.show"
337340
:backgroundColor="donutConfig.style.chart.backgroundColor"
338341
:color="donutConfig.style.chart.color"
@@ -344,6 +347,7 @@ defineExpose({
344347
hasTable
345348
hasLabel
346349
hasFullscreen
350+
:isFullscreen="isFullscreen"
347351
:chartElement="donutChart"
348352
@toggleFullscreen="toggleFullscreen"
349353
@generatePdf="generatePdf"
@@ -674,4 +678,7 @@ path {
674678
.vue-data-ui-fullscreen--off {
675679
max-width: 100%;
676680
}
681+
.vue-data-ui-wrapper-fullscreen {
682+
overflow: auto;
683+
}
677684
</style>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const isImaging = ref(false);
2929
const isPrinting = ref(false);
3030
const gaugeChart = ref(null);
3131
const details = ref(null);
32+
const step = ref(0);
3233
3334
const gaugeConfig = computed(() => {
3435
return useNestedProp({
@@ -272,6 +273,7 @@ function generateImage() {
272273
const isFullscreen = ref(false)
273274
function toggleFullscreen(state) {
274275
isFullscreen.value = state;
276+
step.value += 1;
275277
}
276278
277279
defineExpose({
@@ -283,7 +285,7 @@ defineExpose({
283285

284286
<template>
285287
<div
286-
class="vue-ui-gauge"
288+
:class="`vue-ui-gauge ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
287289
ref="gaugeChart"
288290
:id="`vue-ui-gauge_${uid}`"
289291
:style="`font-family:${gaugeConfig.style.fontFamily};width:100%; text-align:center;background:${gaugeConfig.style.chart.backgroundColor}`"
@@ -304,6 +306,7 @@ defineExpose({
304306
<!-- OPTIONS -->
305307
<UserOptions
306308
ref="details"
309+
:key="`user_options_${step}`"
307310
v-if="gaugeConfig.userOptions.show"
308311
:backgroundColor="gaugeConfig.style.chart.backgroundColor"
309312
:color="gaugeConfig.style.chart.color"
@@ -314,6 +317,7 @@ defineExpose({
314317
:hasXls="false"
315318
:hasImg="true"
316319
hasFullscreen
320+
:isFullscreen="isFullscreen"
317321
:chartElement="gaugeChart"
318322
@toggleFullscreen="toggleFullscreen"
319323
@generatePdf="generatePdf"
@@ -533,4 +537,7 @@ defineExpose({
533537
.vue-data-ui-fullscreen--off {
534538
max-width: 100%;
535539
}
540+
.vue-data-ui-wrapper-fullscreen {
541+
overflow: auto;
542+
}
536543
</style>

0 commit comments

Comments
 (0)