Improvement - VueUiMolecule - Add color dataset attribute

Author: graphieros

TestingArena/ArenaVueUiMolecule.vue

@@ -13,13 +13,15 @@ const dataset = ref([
     {
         name: "Root",
         details: "This is the root node",
+        color: 'red',
         nodes: [
             {
                 name: 'node1',
                 details: 'Lorem ipsum',
+                color: 'blue',
                 nodes: [
                     {
-                        name: 'node1.1', details: 'Lorem ipsum', nodes: [
+                        name: 'node1.1', details: 'Lorem ipsum', color: 'green', nodes: [
                             { name: 'node1.1' },
                             { name: 'node1.2' },
                             { name: 'node1.3' },
@@ -205,7 +207,7 @@ const themeOptions = ref([
     "celebrationNight"
 ])
 
-const currentTheme = ref(themeOptions.value[6])
+const currentTheme = ref(themeOptions.value[0])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

package.json

@@ -107,4 +107,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.13"
   }
-}
+}

src/App.vue

@@ -120,7 +120,7 @@ const components = ref([             //------|
  * Modify the index to display a component
  * [0] = VueUiXy 
  */
- const selectedComponent = ref(components.value[0]);
+ const selectedComponent = ref(components.value[29]);
 
 /**
  * Legacy testing arena where some non chart components can be tested

src/components/vue-ui-molecule.vue

@@ -1,10 +1,12 @@
 <script setup>
 import { ref, computed, nextTick, onMounted, watch } from "vue";
 import { 
+    convertColorToHex,
     convertCustomPalette,
     createCsvContent, 
     createPolygonPath, 
-    createUid, 
+    createUid,
+    deepClone,
     downloadCsv,
     error,
     functionReturnsString,
@@ -173,72 +175,92 @@ function processNodes(
     circleRadius = 24,
     rotation = 0,
     paletteIndex = 0,
-    rootColor = "#BBBBBB"
+    rootColor = "#BBBBBB",
+    depth = 0
 ) {
+    if (!Array.isArray(data) || data.length === 0) return data;
 
-    if (data && data.length > 0) {
-        const polygonPath = createPolygonPath({
-            plot: center,
-            radius,
-            sides: data.length,
-            rotation,
-        });
+    const polygonPath = createPolygonPath({
+        plot:   center,
+        radius,
+        sides:  data.length,
+        rotation
+    });
 
-        data.forEach((node, index) => {
-            const childCenter = polygonPath.coordinates[index];
-            let color;
-
-            if (!node.ancestor) {
-                color = rootColor;
-            } else if (!node.ancestor.ancestor) {
-                color = customPalette.value[paletteIndex] || palette[paletteIndex] || rootColor;
-                paletteIndex += 1;
-            } else {
-                color = node.ancestor.color || rootColor;
-            }
+    data.forEach((node, idx) => {
+        const childCenter = polygonPath.coordinates[idx];
+
+        const converted = node.color
+        ? (() => {
+            let h = convertColorToHex(node.color);
+            return h.startsWith("#") ? h : `#${h}`;
+            })()
+        : null;
+
+        let finalColor;
+        if (converted) {
+            finalColor = converted;
+        } else if (depth === 0) {
+            finalColor = rootColor;
+        } else if (depth === 1) {
+            finalColor = (
+                customPalette.value[paletteIndex] ||
+                palette[paletteIndex]      ||
+                rootColor
+            );
+            paletteIndex += 1;
+        } else {
+            finalColor = rootColor;
+        }
+
+        node.polygonPath = { coordinates: [childCenter] };
+        node.circleRadius = circleRadius;
+        node.color = finalColor;
+        node.uid = createUid();
+
+        if (Array.isArray(node.nodes) && node.nodes.length) {
+            node.nodes = processNodes(
+                node.nodes,
+                childCenter,
+                radius      / 2.9,
+                circleRadius/ 2.2,
+                rotation    + (Math.PI * idx) / node.nodes.length,
+                paletteIndex,
+                finalColor,
+                depth + 1
+            );
+        }
+    });
 
-            node.polygonPath = {
-                coordinates: [childCenter],
-            };
-
-            node.circleRadius = circleRadius;
-            node.color = color;
-            node.uid = createUid();
-
-            if (node.nodes && node.nodes.length > 0) {
-                const nestedPaletteIndex = !node.ancestor || !node.ancestor.ancestor ? paletteIndex : 0;
-                node.nodes = processNodes(
-                    node.nodes,
-                    childCenter,
-                    radius / 2.9,
-                    circleRadius / 2.2,
-                    rotation + (Math.PI * index) / node.nodes.length,
-                    nestedPaletteIndex,
-                    color
-                );
-            }
-        });
-    }
     return data;
 }
 
 function generateGradientIDs(data) {
-    const uniqueColors = new Set();
-    function extractUniqueColors(nodes) {
-        nodes.forEach((node) => {
-            if (node.color && !uniqueColors.has(node.color)) {
-                uniqueColors.add(node.color);
-            }
-            if (node.nodes && node.nodes.length > 0) {
-                extractUniqueColors(node.nodes);
-            }
+    const colors = new Set();
+
+    function recurse(nodes) {
+        nodes.forEach(node => {
+        if (!node.color) return;
+
+        let hex = node.color;
+        if (!/^#?[0-9A-F]{6}$/i.test(hex)) {
+            hex = convertColorToHex(hex);
+        }
+        if (!hex.startsWith("#")) hex = `#${hex}`;
+
+        colors.add(hex);
+
+        if (Array.isArray(node.nodes) && node.nodes.length) {
+            recurse(node.nodes);
+        }
         });
     }
-    extractUniqueColors(data);
+    recurse(data);
 
     const gradientIDs = {};
-    Array.from(uniqueColors).forEach((color, index) => {
-        gradientIDs[color] = `gradient_${index}`;
+    Array.from(colors).forEach(col => {
+        const safe = col.slice(1);       
+        gradientIDs[col] = `gradient_${safe}`;
     });
 
     return gradientIDs;
@@ -249,7 +271,8 @@ const gradientIds = computed(() => {
 })
 
 const convertedDataset = computed(() => {
-    return processNodes(props.dataset);
+    const dataCopy = deepClone(props.dataset);
+    return processNodes(dataCopy);
 })
 
 const dataTooltipSlot = ref(null);

src/lib.js

@@ -2211,8 +2211,8 @@ export function placeHTMLElementAtSVGCoordinates({ svgElement, x, y, offsetY = 0
     };
 }
 
-export function placeXYTag({ svgElement, x, y, element, position}) {
-    if (!svgElement || ! element) return { top: 0, left: 0 };
+export function placeXYTag({ svgElement, x, y, element, position }) {
+    if (!svgElement || !element) return { top: 0, left: 0 };
 
     const point = svgElement.createSVGPoint();
     point.x = x;
@@ -2229,6 +2229,48 @@ export function placeXYTag({ svgElement, x, y, element, position}) {
     };
 }
 
+export function deepClone(value) {
+    if (value === null || typeof value !== 'object') {
+        return value;
+    }
+
+    if (value instanceof Date) {
+        return new Date(value.getTime());
+    }
+
+    if (value instanceof RegExp) {
+        return new RegExp(value.source, value.flags);
+    }
+
+    if (value instanceof Map) {
+        const result = new Map();
+        for (const [key, val] of value.entries()) {
+            result.set(key, deepClone(val));
+        }
+        return result;
+    }
+
+    if (value instanceof Set) {
+        const result = new Set();
+        for (const val of value.values()) {
+            result.add(deepClone(val));
+        }
+        return result;
+    }
+
+    if (Array.isArray(value)) {
+        return value.map(item => deepClone(item));
+    }
+
+    const result = {};
+    for (const key in value) {
+        if (Object.prototype.hasOwnProperty.call(value, key)) {
+            result[key] = deepClone(value[key]);
+        }
+    }
+    return result;
+}
+
 const lib = {
     XMLNS,
     abbreviate,
@@ -2268,6 +2310,7 @@ const lib = {
     createWordCloudDatasetFromPlainText,
     darkenHexColor,
     dataLabel,
+    deepClone,
     degreesToRadians,
     downloadCsv,
     error,

types/vue-data-ui.d.ts

@@ -735,6 +735,7 @@ declare module "vue-data-ui" {
         name: string;
         details?: string;
         nodes?: VueUiMoleculeDatasetNode[];
+        color?: string;
     };
 
     export type VueUiMoleculeConfig = {