VueUiQuickChart fixed errors when a datapoint has 0 value

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.1.15",
+  "version": "2.1.16",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -3290,14 +3290,14 @@ const quickDatasetDonut = ref([
   },
   {
     name: 'Serie 5',
-    value: 1,
+    value: 0,
   },
 ]);
 
 const quickDatasetLine = ref([
   {
     name: 'Serie1',
-    values: [1, 2, 3, 2, 3, 4, 3, 4, 5]
+    values: [1, 0, 3, 2, 3, 4, 3, 4, 5]
   },
   {
     name: 'Serie2',
@@ -3316,7 +3316,7 @@ const quickDatasetSimpleBar = ref([1, 2, -10, -5, 8])
 const quickDatasetBar = ref([
   {
     name: 'Serie1',
-    values: [1, 2, 3, 2, 3]
+    values: [1, 0, 3, 2, 3]
   },
   {
     name: 'Serie2',
@@ -4509,7 +4509,7 @@ const cursorConfig = ref({
         </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
         <template #title>
           <BaseIcon name="chartQuadrant" />
           VueUiQuadrant

src/App.vue

@@ -60,14 +60,16 @@ const quickConfig = computed(() => {
 
 const emit = defineEmits(['selectDatapoint', 'selectLegend'])
 
-const formattedDataset = computed(() => {
+const fd = computed(() => {
     const f = detector.detectChart({ dataset: props.dataset, barLineSwitch: quickConfig.value.chartIsBarUnderDatasetLength });
     if(!f) {
         console.error('VueUiQuickChart : Dataset is not processable')
     }
     return f
 })
 
+const formattedDataset = ref(fd.value)
+
 const isProcessable = computed(() => {
     return !!formattedDataset.value
 })
@@ -135,7 +137,7 @@ const donut = computed(() => {
     const ds = formattedDataset.value.dataset.map((ds, i) => {
         return {
             ...ds,
-            value: ds.VALUE || ds.DATA || ds.SERIE || ds.VALUES || ds.NUM,
+            value: ds.VALUE || ds.DATA || ds.SERIE || ds.VALUES || ds.NUM || 0,
             name: ds.NAME || ds.DESCRIPTION || ds.TITLE || ds.LABEL || `Serie ${i}`,
             id: `donut_${i}`
         }
@@ -199,11 +201,12 @@ const donut = computed(() => {
         centerY: (quickConfig.value.height || defaultSizes.value.donut.height) / 2
     }
     
-    const total = ds.filter(d => !segregated.value.includes(d.id)).map(d => d.value).reduce((a,b) => a + b, 0);
+    const total = ds.filter(d => !segregated.value.includes(d.id)).map(d => d.value||0).reduce((a,b) => a + b, 0);
     const legend = ds.map(d => {
         return {
             ...d,
-            proportion: d.value / total
+            proportion: (d.value || 0) / total,
+            value: d.value || 0
         }
     })
 
@@ -266,7 +269,7 @@ const line = computed(() => {
         ds = formattedDataset.value.dataset.map((d, i) => {
             return {
                 ...d,
-                values: d.VALUE || d.DATA || d.SERIE || d.VALUES || d.NUM,
+                values: d.VALUE || d.DATA || d.SERIE || d.VALUES || d.NUM || 0,
                 name: d.NAME || d.DESCRIPTION || d.TITLE || d.LABEL || `Serie ${i}`,
                 id: `line_${i}`
             }
@@ -420,7 +423,7 @@ const bar = computed(() => {
         ds = formattedDataset.value.dataset.map((d, i) => {
             return {
                 ...d,
-                values: d.VALUE || d.DATA || d.SERIE || d.VALUES || d.NUM,
+                values: d.VALUE || d.DATA || d.SERIE || d.VALUES || d.NUM || 0,
                 name: d.NAME || d.DESCRIPTION || d.TITLE || d.LABEL || `Serie ${i}`,
                 id: `bar_${i}`
             }