Merge pull request #227 from graphieros/trunk

#221
#222
#225

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.15.2",
+  "version": "2.15.3-beta.1",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [

package.json

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed } from "vue";
+import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
 import vClickOutside from '../directives/vClickOutside';
 import BaseIcon from "./BaseIcon.vue";
 import img from "../img";
@@ -255,39 +255,35 @@ function toggleTooltip() {
     }
 }
 
-const isFullscreen = ref(false);
+const _isFullscreen = computed({
+    get: () => props.isFullscreen,
+    set: (val) => emit('toggleFullscreen', val)
+});
+
+function toggleFullscreen() {
+    if (!props.chartElement) return;
+
+    const next = !props.isFullscreen;
+    _isFullscreen.value = next;
 
-function toggleFullscreen(state) {
-    if (props.callbacks.fullscreen) {
-        props.callbacks.fullscreen();
+    if (next) {
+        props.chartElement.requestFullscreen()
     } else {
-        if(!props.chartElement) return;
-        if(state === "in") {
-            isFullscreen.value = true;
-            props.chartElement.requestFullscreen();
-            emit('toggleFullscreen', true);
-        }else {
-            isFullscreen.value = false;
-            document && document.exitFullscreen();
-            emit('toggleFullscreen', false);
-        }
+        document.exitFullscreen();
     }
 }
 
-function fullscreenchanged(_event) {
-    if (document.fullscreenElement) {
-        isFullscreen.value = true;
-    } else {
-        isFullscreen.value = false;
-    }
+function fullscreenchanged() {
+    const flag = !!document.fullscreenElement;
+    emit('toggleFullscreen', flag);
 }
 
 onMounted(() => {
-    document.addEventListener('fullscreenchange', fullscreenchanged)
+    document.addEventListener('fullscreenchange', fullscreenchanged);
 })
 
 onBeforeUnmount(() => {
-    document.removeEventListener('fullscreenchange', fullscreenchanged)
+    document.removeEventListener('fullscreenchange', fullscreenchanged);
 })
 
 const isDesktop = ref(window.innerWidth > 600)

src/atoms/UserOptions.vue

@@ -287,8 +287,8 @@
                 <!-- HIGHLIGHT AREAS -->
                 <g v-for="oneArea in highlightAreas">
                     <template v-if="oneArea.show">
+                        <!-- HIGHLIGHT AREA FILLED RECT UNITS -->
                         <g v-for="(_, i) in oneArea.span">
-                            <!-- HIGHLIGHT AREA FILLED RECT UNITS -->
                             <rect
                                 data-cy="highlight-area"
                                 :style="{ 
@@ -301,8 +301,9 @@
                                 :width="drawingArea.width / maxSeries < 0 ? 0.00001 : drawingArea.width / maxSeries"
                                 :fill="setOpacity(oneArea.color, oneArea.opacity)"
                             />
-
-                            <!-- HIGHLIGHT AREA CAPTION -->
+                        </g>
+                        <!-- HIGHLIGHT AREA CAPTION -->
+                        <g v-for="(_, i) in oneArea.span">
                             <foreignObject v-if="oneArea.caption.text && i === 0"
                                 :x="drawingArea.left + (drawingArea.width / maxSeries) * ((oneArea.from + i) - slicer.start) - (oneArea.caption.width === 'auto' ? 0 : oneArea.caption.width / 2 - (drawingArea.width / maxSeries) * oneArea.span / 2)"
                                 :y="drawingArea.top + oneArea.caption.offsetY"
@@ -3269,23 +3270,23 @@ export default {
                 // Title height to substract
                 let title = null;
                 let titleHeight = 0;
-                if (this.FINAL_CONFIG.chart.title.show) {
+                if (this.FINAL_CONFIG.chart.title.show && this.$refs.chartTitle) {
                     title = this.$refs.chartTitle;
                     titleHeight = title.getBoundingClientRect().height;
                 }
 
                 // Slicer height to substract
                 let slicer = null;
                 let slicerHeight = 0;
-                if (this.FINAL_CONFIG.chart.zoom.show && this.maxX > 6 && this.isDataset) {
+                if (this.FINAL_CONFIG.chart.zoom.show && this.maxX > 6 && this.isDataset && this.$refs.chartSlicer && this.$refs.chartSlicer.$el) {
                     slicer = this.$refs.chartSlicer.$el;
                     slicerHeight = slicer.getBoundingClientRect().height;
                 }
 
                 // Legend height to substract
                 let legend = null;
                 let legendHeight = 0
-                if (this.FINAL_CONFIG.chart.legend.show) {
+                if (this.FINAL_CONFIG.chart.legend.show && this.$refs.chartLegend) {
                     legend = this.$refs.chartLegend;
                     legendHeight = legend.getBoundingClientRect().height;
                 }
@@ -3302,27 +3303,54 @@ export default {
                     noTitleHeight = this.$refs.noTitle.getBoundingClientRect().height;
                 }
 
-                this.height = height - titleHeight - legendHeight - slicerHeight - sourceHeight - noTitleHeight;
+                this.height = height 
+                    - titleHeight 
+                    - legendHeight 
+                    - slicerHeight 
+                    - sourceHeight 
+                    - noTitleHeight
+                    - 12;
+
                 this.width = width;
                 this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`;
                 this.convertSizes();
 
                 const ro = new ResizeObserver((entries) => {
                     for(const entry of entries) {
-                        if (this.$refs.chartTitle) {
+                        if (this.FINAL_CONFIG.chart.title.show && this.$refs.chartTitle) {
                             titleHeight = this.$refs.chartTitle.getBoundingClientRect().height;
+                        } else {
+                            titleHeight = 0;
                         }
                         if (this.$refs.chartSlicer && this.$refs.chartSlicer.$el) {
                             slicerHeight = this.$refs.chartSlicer.$el.getBoundingClientRect().height;
+                        } else {
+                            slicerHeight = 0;
                         }
                         if (this.$refs.chartLegend) {
                             legendHeight = this.$refs.chartLegend.getBoundingClientRect().height;
+                        } else {
+                            legendHeight = 0;
                         }
                         if (this.$refs.source) {
                             sourceHeight = this.$refs.source.getBoundingClientRect().height;
+                        } else {
+                            sourceHeight = 0;
+                        }
+                        if (this.$refs.noTitle) {
+                            noTitleHeight = this.$refs.noTitle.getBoundingClientRect().height;
+                        } else {
+                            noTitleHeight = 0;
                         }
                         requestAnimationFrame(() => {
-                            this.height = entry.contentBoxSize[0].blockSize - titleHeight - legendHeight - slicerHeight - sourceHeight - 24;
+                            this.height = entry.contentRect.height
+                                - titleHeight 
+                                - legendHeight 
+                                - slicerHeight 
+                                - sourceHeight 
+                                - noTitleHeight
+                                - 12
+
                             this.width = entry.contentBoxSize[0].inlineSize;
                             this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`;
                             this.convertSizes();

src/components/vue-ui-xy.vue

@@ -23,22 +23,35 @@ export function useResponsive({
 
         if (title) {
             heightTitle = title.getBoundingClientRect().height;
+        } else {
+            heightTitle = 0;
         }
         if (slicer) {
             heightSlicer = slicer.getBoundingClientRect().height;
+        } else {
+            heightSlicer = 0;
         }
         if (legend) {
             heightLegend = legend.getBoundingClientRect().height;
+        } else {
+            heightLegend = 0;
         }
         if (source) {
             heightSource = source.getBoundingClientRect().height;
+        } else {
+            heightSource = 0;
         }
         if (noTitle) {
             heightNoTitle = noTitle.getBoundingClientRect().height;
+        } else {
+            heightNoTitle = 0;
         }
         if (padding) {
             heightPadding = padding.top + padding.bottom;
             widthPadding = padding.right + padding.left;
+        } else {
+            heightPadding = 0;
+            widthPadding = 0;
         }
 
         height = parentHeight