Fix - VueUiRidgeline - Fix issue with null values in nested VueUiXy config

Author: graphieros

package.json

@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}

src/components/vue-ui-ridgeline.vue

@@ -10,6 +10,7 @@ import {
     createStraightPath, 
     createUid, 
     dataLabel, 
+    deepEmptyObjectToNull,
     downloadCsv, 
     error, 
     getMissingDatasetAttributes, 
@@ -254,7 +255,6 @@ const formattedDataset = computed(() => {
             uid: createUid(),
             datapoints: ds.datapoints.map((dp, j) => {
                 const color = dp.color ? convertColorToHex(dp.color) : customPalette.value[j] || palette[j] || palette[j % palette.length];
-                console.log(color);
                 const id = slugify(dp.name);
                 return {
                     ...dp,
@@ -469,7 +469,7 @@ function createXyDatasetForDialog(ds) {
 
     selectedDatapoint.value = ds;
 
-    xyConfig.value = {
+    xyConfig.value = deepEmptyObjectToNull({
         ...FINAL_CONFIG.value.style.chart.dialog.xyChart,
         responsive: true, // Overriding 
         chart: {
@@ -489,7 +489,7 @@ function createXyDatasetForDialog(ds) {
                 showTimeLabel: FINAL_CONFIG.value.style.chart.xAxis.labels.values.length > 0 // Overriding
             }
         }
-    };
+    })
 
     dialog.value && dialog.value.open();
 }

src/lib.js

@@ -2474,6 +2474,37 @@ export function slugify(str) {
         .replace(/-+$/, ''); // Trim end
 }
 
+export function emptyObjectToNull(obj) {
+    if (
+        obj &&
+        typeof obj === 'object' &&
+        !Array.isArray(obj) &&
+        Object.keys(obj).length === 0
+    ) {
+        return null;
+    }
+    return obj;
+}
+
+export function deepEmptyObjectToNull(value) {
+    if (Array.isArray(value)) {
+        return value.map(deepEmptyObjectToNull);
+    } else if (
+        value &&
+        typeof value === 'object' &&
+        !Array.isArray(value)
+    ) {
+        const result = {};
+        for (const key in value) {
+            if (Object.hasOwn(value, key)) {
+                result[key] = deepEmptyObjectToNull(value[key]);
+            }
+        }
+        return emptyObjectToNull(result);
+    }
+    return value;
+}
+
 
 const lib = {
     XMLNS,
@@ -2515,8 +2546,10 @@ const lib = {
     darkenHexColor,
     dataLabel,
     deepClone,
+    deepEmptyObjectToNull,
     degreesToRadians,
     downloadCsv,
+    emptyObjectToNull,
     error,
     forceValidValue,
     functionReturnsString,