VueUiGalaxy improvements

Author: graphieros

package.json

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

src/App.vue

@@ -2826,12 +2826,17 @@ const galaxyDataset = ref([
 ]);
 
 const galaxyConfig = ref({
+  useBlurOnHover: true,
   style: {
     chart: {
       layout: {
         arcs: {
-          strokeWidth: 6,
-          borderWidth: 2
+          // strokeWidth: 6,
+          // borderWidth: 2
+          hoverEffect: {
+            show: true,
+            multiplicator: 1.1
+          }
         }
       },
       title: {

src/components/vue-ui-galaxy.vue

@@ -75,7 +75,7 @@ const mutableConfig = ref({
 });
 
 const svg = ref({
-    height: 160, // or 250 if non fibo
+    height: 180, // or 250 if non fibo
     width: 250
 })
 
@@ -127,10 +127,6 @@ const total = computed(() => {
     return immutableSet.value.filter((ds) => !segregated.value.includes(ds.id)).map(ds => ds.value).reduce((a, b) => a + b, 0);
 });
 
-const maxVal = computed(() => {
-    return Math.max(...immutableSet.value.filter(ds => !segregated.value.includes(ds.id)).map(ds => ds.value));
-});
-
 const maxPath = ref(190);
 
 const segregatedSet = computed(() => {
@@ -166,14 +162,12 @@ const galaxySet = computed(() => {
             proportion: serie.value / total.value,
             path: createSpiralPath({
                 points: points,
-                startX: 115,
-                startY: 90
+                startX: 115 + galaxyConfig.value.style.chart.layout.arcs.offsetX,
+                startY: 90 + galaxyConfig.value.style.chart.layout.arcs.offsetY
             })
         })
     }
 
-    console.log(res)
-
     return res        
         .filter((_, i) => !segregated.value.includes(_.id))
         .toSorted((a,b) => b.points - a.points)
@@ -419,16 +413,18 @@ defineExpose({
                     :d="datapoint.path"
                     fill="none"
                     :stroke="galaxyConfig.style.chart.backgroundColor"
-                    :stroke-width="(galaxyConfig.style.chart.layout.arcs.strokeWidth + galaxyConfig.style.chart.layout.arcs.borderWidth) * (selectedSerie === datapoint.id ? 1.3 : 1)"
+                    :stroke-width="(galaxyConfig.style.chart.layout.arcs.strokeWidth + galaxyConfig.style.chart.layout.arcs.borderWidth) * (selectedSerie === datapoint.id && galaxyConfig.style.chart.layout.arcs.hoverEffect.show ? galaxyConfig.style.chart.layout.arcs.hoverEffect.multiplicator : 1)"
                     stroke-linecap="round"
+                    
                 />
                 <path
                     v-if="datapoint.value"
                     :d="datapoint.path"
                     fill="none"
                     :stroke="datapoint.color"
-                    :stroke-width="galaxyConfig.style.chart.layout.arcs.strokeWidth * (selectedSerie === datapoint.id ? 1.3 : 1)"
+                    :stroke-width="galaxyConfig.style.chart.layout.arcs.strokeWidth * (selectedSerie === datapoint.id && galaxyConfig.style.chart.layout.arcs.hoverEffect.show ? galaxyConfig.style.chart.layout.arcs.hoverEffect.multiplicator : 1)"
                     stroke-linecap="round"
+                    :class="`${selectedSerie && selectedSerie !== datapoint.id && galaxyConfig.useBlurOnHover ? 'vue-ui-galaxy-blur' : ''}`"
                 />
             </g>
 

src/default_configs.json

@@ -3306,15 +3306,22 @@
     },
     "vue_ui_galaxy": {
         "useCssAnimation": true,
+        "useBlurOnHover": true,
         "style": {
             "fontFamily": "inherit",
             "chart": {
                 "backgroundColor":"#FFFFFF",
                 "color":"#2D353C",
                 "layout": {
                     "arcs": {
-                        "strokeWidth": 6,
-                        "borderWidth": 2
+                        "strokeWidth": 24,
+                        "borderWidth": 12,
+                        "offsetX": 0,
+                        "offsetY": 0,
+                        "hoverEffect": {
+                            "show": true,
+                            "multiplicator": 1.1
+                        }
                     },
                     "labels": {
                         "dataLabels": {

types/vue-data-ui.d.ts

@@ -24,6 +24,7 @@ declare module 'vue-data-ui' {
 
     export type VueUiGalaxyConfig = {
         useCssAnimation?: boolean;
+        useBlurOnHover?: boolean;
         style?: {
             fontFamily?: string;
             chart?: {
@@ -33,6 +34,12 @@ declare module 'vue-data-ui' {
                     arcs?: {
                         strokeWidth?: number;
                         borderWidth?: number;
+                        offsetX?: number;
+                        offsetY?: number;
+                        hoverEffect?: {
+                            show?: boolean;
+                            multiplicator?: number;
+                        }
                     };
                     labels?: {
                         dataLabels?: {