VueUiSparkStackbar minor bug fix

Author: graphieros

package-lock.json

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

package.json

@@ -1918,17 +1918,14 @@ const stackDataset = ref([
   {
     name: "Vue",
     value: 258,
-    color: ""
   },
   {
     name: "Javascript",
     value: 36,
-    color: ""
   },
   {
     name: "Other",
     value: 16,
-    color: ""
   },
 ]);
 
@@ -3226,7 +3223,7 @@ function selectBar(bar) {
 const tableHeatmapDataset = ref([
   {
     name: "Serie 1",
-    values: [-100, "test", 0, 100, 150, 50, 25]
+    values: [-100, "test", 0, 100, 150, 50, 25, 10, 20, 30, 10, 20, 30, 10]
   },
   {
     name: "Serie 2",

src/App.vue

@@ -42,10 +42,11 @@ const stackConfig = computed(() => {
     });
 });
 
-const safeDatasetCopy = ref(props.dataset.map(d => {
+const safeDatasetCopy = ref(props.dataset.map((d, i ) => {
     return {
         ...d,
         value: stackConfig.value.style.animation.show ? 0 : d.value || 0,
+        color: d.color ? convertColorToHex(d.color) : palette[i] || palette[i % palette.length]
     }
 }));
 
@@ -89,7 +90,7 @@ onMounted(() => {
                     return {
                         ...d,
                         value: d.value += chunkSet[i],
-                        color: convertColorToHex(d.color) || palette[i] || palette[i % palette.length],
+                        color: d.color ? convertColorToHex(d.color) : palette[i] || palette[i % palette.length]
                     }
                 });
                 requestAnimationFrame(animate)
@@ -98,8 +99,8 @@ onMounted(() => {
                     return {
                         ...d,
                         value: d.value || 0,
+                        color: d.color ? convertColorToHex(d.color) : palette[i] || palette[i % palette.length],
                         id: createUid(),
-                        color: convertColorToHex(d.color) || palette[i] || palette[i % palette.length],
                     }
                 })
             }

src/components/vue-ui-sparkstackbar.vue

@@ -200,7 +200,7 @@ defineExpose({
 </script>
 
 <template>
-    <div ref="tableContainer" :style="`width:100%; container-type: inline-size;padding-top:${tableConfig.userOptions.show ? '36px' : ''}`" :class="{ 'vue-ui-responsive' : isResponsive }" :id="`table_heatmap_${uid}`">
+    <div ref="tableContainer" :style="`width:100%; overflow-x:auto; container-type: inline-size;padding-top:${tableConfig.userOptions.show ? '36px' : ''}`" :class="{ 'vue-ui-responsive' : isResponsive }" :id="`table_heatmap_${uid}`">
         <UserOptions
             ref="details"
             :key="`user_option_${step}`"

src/components/vue-ui-table-heatmap.vue

@@ -3631,7 +3631,7 @@
             "showMedian": false,
             "head": {
                 "backgroundColor": "#FFFFFF",
-                "values": ["Series", "JAN", "FEB", "MAR", "APR", "MAY", "JUL"]
+                "values": []
             }
         },
         "userOptions": {

src/default_configs.json

@@ -277,6 +277,7 @@ export function hslToRgb(h, s, l) {
 }
 
 export function shiftHue(hexColor, shiftAmount) {
+
     const hexToRgb = (hex) => ({
         r: parseInt(hex.substring(1, 3), 16),
         g: parseInt(hex.substring(3, 5), 16),
@@ -335,7 +336,7 @@ export function shiftHue(hexColor, shiftAmount) {
         };
     };
 
-    const rgbColor = hexToRgb(hexColor);
+    const rgbColor = hexToRgb(hexColor || "#000000");
     const hslColor = rgbToHsl(rgbColor);
     hslColor.h += shiftAmount;
     hslColor.h = (hslColor.h + 1) % 1;