Improved error handling

graphieros · Mar 27, 2024 · 2f8f4c4 · 2f8f4c4
1 parent c57567e
commit 2f8f4c4
Show file tree

Hide file tree

Showing 38 changed files with 1,271 additions and 160 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": "2.0.41",
+  "version": "2.0.42",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git a/src/App.vue b/src/App.vue
@@ -364,6 +364,33 @@ const donutDataset = [
   },
 ];
 
+const waffleDataset = [
+  {
+    name: "serie 1",
+    color: "",
+    values: [1],
+    shape: "star"
+  },
+  {
+    name: "serie 2",
+    color: "",
+    values: [2],
+    shape: "diamond"
+  },
+  {
+    name: "serie 3",
+    color: "",
+    values: [3],
+    shape: "triangle"
+  },
+  {
+    name: "serie 4",
+    color: "",
+    values: [3, 5],
+    shape: "hexagon"
+  },
+];
+
 
 const radarDataset = ref({
   categories: [
@@ -2900,9 +2927,7 @@ function testEmit2(data) {
         </template>
         <template #dev>
           <VueDataUiTest component="VueUiNestedDonuts" :dataset="nestedDonutsDataset" :config="nestedDonutsConfig">
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -2990,9 +3015,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3092,9 +3115,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.absoluteWidth / 2" :cy="svg.absoluteHeight / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3235,9 +3256,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3374,11 +3393,6 @@ function testEmit2(data) {
             @selectLegend="selectLegendXY"
             @selectX="selectX"
           >
-          <template #legend="{ legend }">
-            <div v-for="item in legend">
-              {{ item.name }} {{ item.color }}
-            </div>
-          </template>
           </VueDataUiTest>
           <VueDataUiTest
             component="VueUiXy"
@@ -3399,9 +3413,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUi>
           <VueDataUi
             component="VueUiXy"
@@ -3462,9 +3474,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3506,9 +3516,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3551,9 +3559,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3596,9 +3602,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3645,9 +3649,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3693,9 +3695,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3915,9 +3915,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3961,9 +3959,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>
@@ -3999,25 +3995,20 @@ function testEmit2(data) {
           <VueDataUiTest
             component="VueUiWaffle"
             ref="waffletest"
-            :dataset="donutDataset"
+            :dataset="waffleDataset"
             :config="waffleConfig"
             @selectLegend="selectLegendWaffle"
           >
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              <div v-for="item in legend">
-                {{ legend }}
-              </div>
-            </template>
           </VueDataUiTest>
         </template>
         <template #prod>
           <VueDataUi
             component="VueUiWaffle"
             ref="waffletest"
-            :dataset="donutDataset"
+            :dataset="waffleDataset"
              :config="waffleConfig"
             @selectLegend="selectLegendWaffle"
           >
@@ -4211,9 +4202,7 @@ function testEmit2(data) {
             <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
             </template>
-            <template #legend="{ legend }">
-              {{ legend }}
-            </template>
+
           </VueDataUiTest>
         </template>
         <template #prod>

diff --git a/src/components/vue-ui-3d-bar.vue b/src/components/vue-ui-3d-bar.vue
@@ -1,6 +1,11 @@
 <script setup>
 import { ref, computed, onMounted } from "vue";
-import { convertColorToHex, createUid } from '../lib';
+import { 
+    convertColorToHex, 
+    createUid,
+    error,
+    objectIsEmpty 
+} from '../lib';
 import pdf from "../pdf";
 import img from "../img";
 import mainConfig from "../default_configs.json";
@@ -67,6 +72,13 @@ const box = computed(() => {
 const activeValue = ref(barConfig.value.style.chart.animation.use ? 0 : props.dataset.percentage);
 
 onMounted(() => {
+    if(objectIsEmpty(props.dataset)) {
+        error({
+            componentName: 'VueUi3dBar',
+            type: 'dataset'
+        })
+    }
+
     let acceleration = 0;
     let speed = barConfig.value.style.chart.animation.speed;
     let incr = (0.005) * barConfig.value.style.chart.animation.acceleration;

diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
@@ -1,11 +1,13 @@
 <script setup>
-import { ref, computed, nextTick } from "vue";
+import { ref, computed, nextTick, onMounted } from "vue";
 import { 
     createCsvContent, 
     createUid, 
     downloadCsv,
+    error,
     functionReturnsString,
-    isFunction, 
+    isFunction,
+    objectIsEmpty,
     opacity, 
     shiftHue, 
 } from '../lib';
@@ -33,8 +35,16 @@ const props = defineProps({
     },
 });
 
-const uid = ref(createUid());
+onMounted(() => {
+    if(objectIsEmpty(props.dataset)) {
+        error({
+            componentName: 'VueUiAgePyramid',
+            type: 'dataset'
+        })
+    }
+})
 
+const uid = ref(createUid());
 const defaultConfig = ref(mainConfig.vue_ui_age_pyramid);
 
 const isImaging = ref(false);