Improved fullscreen behavior

graphieros · Jan 9, 2024 · a1ae38b · a1ae38b
1 parent c476f67
commit a1ae38b
Show file tree

Hide file tree

Showing 25 changed files with 167 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.63",
+  "version": "1.9.64",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git a/src/atoms/BaseDirectionPad.vue b/src/atoms/BaseDirectionPad.vue
@@ -4,13 +4,17 @@ const props = defineProps({
     color: {
         type: String,
         default: '#FF0000'
+    },
+    isFullscreen: {
+        type: Boolean,
+        default: false
     }
 });
 const emit = defineEmits(['moveLeft', 'moveTop', 'moveRight', 'moveBottom', 'reset'])
 </script>
 
 <template>
-    <div style="position: absolute;bottom:0;right:0;width:80px;height:80px" data-html2canvas-ignore>
+    <div :style="`position: ${isFullscreen ? 'fixed' : 'absolute'};bottom:0;right:${isFullscreen ? '12px' : '0'};width:80px;height:80px`" data-html2canvas-ignore>
         <div style="position: relative;height:100%;width:100%">           
             <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;">
                 <BaseIcon :stroke="color" name="arrowLeft" style="cursor: pointer"/>

diff --git a/src/atoms/UserOptions.vue b/src/atoms/UserOptions.vue
@@ -59,6 +59,10 @@ const props = defineProps({
     chartElement: {
         type: HTMLElement,
         default: null
+    },
+    isFullscreen: {
+        type: Boolean,
+        default: false,
     }
 });
 
@@ -149,7 +153,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <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; `">
+    <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; `">
         <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">
             <BaseIcon  :name="isOpen ? 'close' : 'menu'" stroke="#CCCCCC" :stroke-width="2" />
         </div>

diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
@@ -35,6 +35,7 @@ const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
 const selectedIndex = ref(null);
+const step = ref(0);
 
 const agePyramidConfig = computed(() => {
     return useNestedProp({
@@ -257,6 +258,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -268,7 +270,7 @@ defineExpose({
 </script>
 
 <template>
-    <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}`">
+    <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}`">
 
         <div v-if="(!mutableConfig.inside || isPrinting) && agePyramidConfig.style.title.text" :style="`width:100%;background:${agePyramidConfig.style.backgroundColor}`">
             <Title
@@ -294,6 +296,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="agePyramidConfig.userOptions.show"
             :backgroundColor="agePyramidConfig.style.backgroundColor"
             :color="agePyramidConfig.style.color"
@@ -304,6 +307,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="agePyramid"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -659,4 +663,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue
@@ -34,6 +34,7 @@ const isTooltip = ref(false);
 const tooltipContent = ref("");
 const candlestickChart = ref(null);
 const hoveredIndex = ref(undefined);
+const step = ref(0);
 
 onMounted(() => {
     const sliderOne = document.getElementById(`start_${uid.value}`);
@@ -270,6 +271,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -281,7 +283,7 @@ defineExpose({
 </script>
 
 <template>
-    <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}`">
+    <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}`">
         <div v-if="(!mutableConfig.inside || isPrinting) && candlestickConfig.style.title.text" :style="`width:100%;background:${candlestickConfig.style.backgroundColor}`">
             <!-- TITLE AS DIV -->
             <Title
@@ -307,6 +309,7 @@ defineExpose({
          <!-- OPTIONS -->
          <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="candlestickConfig.userOptions.show"
             :backgroundColor="candlestickConfig.style.backgroundColor"
             :color="candlestickConfig.style.color"
@@ -317,6 +320,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="candlestickChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -806,5 +810,7 @@ input[type="range"]:active::-webkit-slider-thumb{
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
-
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
diff --git a/src/components/vue-ui-chestnut.vue b/src/components/vue-ui-chestnut.vue
@@ -30,6 +30,7 @@ const isImaging = ref(false);
 const isPrinting = ref(false);
 const chestnutChart = ref(null);
 const details = ref(null);
+const step = ref(0);
 
 const chestnutConfig = computed(() => {
     return useNestedProp({
@@ -384,6 +385,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -397,14 +399,15 @@ defineExpose({
 
 <template>
     <div 
-        class="vue-ui-chestnut"
+        :class="`vue-ui-chestnut ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
         ref="chestnutChart"
         :id="`vue-ui-chestnut_${uid}`"
         :style="`font-family:${chestnutConfig.style.fontFamily};width:100%; text-align:center;padding-top:36px;background:${chestnutConfig.style.chart.backgroundColor}`"
     >
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="chestnutConfig.userOptions.show"
             :backgroundColor="chestnutConfig.style.chart.backgroundColor"
             :color="chestnutConfig.style.chart.color"
@@ -415,6 +418,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="chestnutChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -1120,4 +1124,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue
@@ -36,7 +36,8 @@ const hoveredIndex = ref(null);
 const hoveredDatapoint = ref(null);
 const isFixed = ref(false);
 const fixedDatapoint = ref(null);
-const donutEvolutionChart = ref(null)
+const donutEvolutionChart = ref(null);
+const step = ref(0);
 
 const emit = defineEmits(['selectLegend'])
 
@@ -362,6 +363,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -374,7 +376,7 @@ defineExpose({
 </script>
 
 <template>
-    <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">
+    <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">
         <div v-if="donutEvolutionConfig.style.chart.title.text" :style="`width:100%;background:${donutEvolutionConfig.style.chart.backgroundColor};padding-bottom:24px`" @mouseleave="leave">
             <!-- TITLE AS DIV -->
             <Title
@@ -399,6 +401,7 @@ defineExpose({
 
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="donutEvolutionConfig.userOptions.show"
             :backgroundColor="donutEvolutionConfig.style.chart.backgroundColor"
             :color="donutEvolutionConfig.style.chart.color"
@@ -409,6 +412,7 @@ defineExpose({
             hasImg
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             @toggleFullscreen="toggleFullscreen"
             :chartElement="donutEvolutionChart"
             @generatePdf="generatePdf"
@@ -814,4 +818,7 @@ path {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
@@ -37,6 +37,7 @@ const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
 const selectedSerie = ref(null);
+const step = ref(0);
 
 const donutConfig = computed(() => {
     return useNestedProp({
@@ -295,6 +296,7 @@ const dataTable = computed(() => {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -307,7 +309,7 @@ defineExpose({
 </script>
 
 <template>
-    <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}`">
+    <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}`">
         <div v-if="(!mutableConfig.inside || isPrinting) && donutConfig.style.chart.title.text" :style="`width:100%;background:${donutConfig.style.chart.backgroundColor};padding-bottom:24px`">
             <!-- TITLE AS DIV -->
             <Title
@@ -333,6 +335,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_option_${step}`"
             v-if="donutConfig.userOptions.show"
             :backgroundColor="donutConfig.style.chart.backgroundColor"
             :color="donutConfig.style.chart.color"
@@ -344,6 +347,7 @@ defineExpose({
             hasTable
             hasLabel
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="donutChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -674,4 +678,7 @@ path {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
diff --git a/src/components/vue-ui-gauge.vue b/src/components/vue-ui-gauge.vue
@@ -29,6 +29,7 @@ const isImaging = ref(false);
 const isPrinting = ref(false);
 const gaugeChart = ref(null);
 const details = ref(null);
+const step = ref(0);
 
 const gaugeConfig = computed(() => {
     return useNestedProp({
@@ -272,6 +273,7 @@ function generateImage() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -283,7 +285,7 @@ defineExpose({
 
 <template>
     <div 
-        class="vue-ui-gauge"
+        :class="`vue-ui-gauge ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
         ref="gaugeChart"
         :id="`vue-ui-gauge_${uid}`"
         :style="`font-family:${gaugeConfig.style.fontFamily};width:100%; text-align:center;background:${gaugeConfig.style.chart.backgroundColor}`"
@@ -304,6 +306,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="gaugeConfig.userOptions.show"
             :backgroundColor="gaugeConfig.style.chart.backgroundColor"
             :color="gaugeConfig.style.chart.color"
@@ -314,6 +317,7 @@ defineExpose({
             :hasXls="false"
             :hasImg="true"
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="gaugeChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -533,4 +537,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>