VueUiScatter added 'weight' value dataset option to create a bubble chart

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.82",
+  "version": "2.0.83",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
@@ -84,7 +84,6 @@
     "sass": "^1.57.1",
     "vite": "^4.5.3",
     "vitest": "^0.34.1",
-    "vue": "^3.3.4",
-    "vue-data-ui": "file:../vue-data-ui"
+    "vue": "^3.3.4"
   }
 }

package.json

@@ -1037,11 +1037,12 @@ const weeks = computed(() => {
 
 const scat1 = computed(() => {
   const arr = [];
-  for (let i = 0; i < 50; i += 1) {
+  for (let i = 0; i < 200; i += 1) {
     arr.push({
       x: Math.random() * i + 12,
       y: (Math.random() * i) / 20,
       name: `plot_${i}_cluster_1`,
+      weight: Math.random() * 10
     });
   }
   return arr;
@@ -1121,11 +1122,11 @@ const scatterDataset = computed(() => {
       values: scat1.value,
       shape: "star"
     },
-    {
-      name: "Cluster 2",
-      values: scat2.value,
-      shape: "diamond"
-    },
+    // {
+    //   name: "Cluster 2",
+    //   values: scat2.value,
+    //   shape: "diamond"
+    // },
   ];
 });
 
@@ -4051,7 +4052,7 @@ function selectBar(bar) {
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_scatter)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_scatter)">
         <template #title>
           <BaseIcon name="chartScatter" />
           VueUiScatter
@@ -4589,7 +4590,7 @@ function selectBar(bar) {
         </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_waffle)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_waffle)">
         <template #title>
           <BaseIcon name="chartWaffle"/>
           VueUiWaffle

src/App.vue

@@ -174,7 +174,7 @@ const datasetWithId = computed(() => {
             id,
             color: ds.color ? ds.color : (palette[i] || palette[i % palette.length]),
             opacity: segregated.value.includes(id) ? 0.5: 1,
-            shape: ds.shape ?? 'circle'
+            shape: ds.shape ?? 'circle',
         }
     })
 })
@@ -204,7 +204,8 @@ const mutableDataset = computed(() => {
                     },
                     clusterName: ds.name,
                     color: ds.color ? ds.color : (palette[i] || palette[i % palette.length]),
-                    id: `plot_${uid.value}_${Math.random()}`
+                    id: `plot_${uid.value}_${Math.random()}`,
+                    weight: v.weight ?? scatterConfig.value.style.layout.plots.radius
                 }
             }),
         }
@@ -562,7 +563,7 @@ defineExpose({
                         :data-cy="`scatter-plot-${i}-${j}`"
                         :cx="plot.x"
                         :cy="plot.y"
-                        :r="selectedPlotId && selectedPlotId === plot.id ? scatterConfig.style.layout.plots.radius * 2 : scatterConfig.style.layout.plots.radius"
+                        :r="selectedPlotId && selectedPlotId === plot.id ? plot.weight * 2 : plot.weight"
                         :fill="`${ds.color}${opacity[scatterConfig.style.layout.plots.opacity * 100]}`"
                         :stroke="scatterConfig.style.layout.plots.stroke"
                         :stroke-width="scatterConfig.style.layout.plots.strokeWidth"
@@ -576,7 +577,7 @@ defineExpose({
                         v-for="(plot, j) in ds.plots"
                         :data-cy="`scatter-plot-${i}-${j}`"
                         :plot="{x: plot.x, y: plot.y }"
-                        :radius="selectedPlotId && selectedPlotId === plot.id ? scatterConfig.style.layout.plots.radius * 2 : scatterConfig.style.layout.plots.radius"
+                        :radius="selectedPlotId && selectedPlotId === plot.id ? plot.weight * 2 : plot.weight"
                         :shape="ds.shape"
                         :color="`${ds.color}${opacity[scatterConfig.style.layout.plots.opacity * 100]}`"
                         :stroke="scatterConfig.style.layout.plots.stroke"