VueUiScatter added giftWrap config option to display the max area occupied by a dataset's plots

Author: graphieros

package-lock.json

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

package.json

@@ -1042,7 +1042,6 @@ const scat1 = computed(() => {
       x: Math.random() * i + 12,
       y: (Math.random() * i) / 20,
       name: `plot_${i}_cluster_1`,
-      weight: Math.random() * 10
     });
   }
   return arr;
@@ -1122,11 +1121,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"
+    },
   ];
 });
 
@@ -2786,13 +2785,21 @@ const heatmapConfig = ref({
 
 const scatterConfig = ref({
   style: {
-    tooltip: {
-      showShape: false,
-      customFormat: ({ seriesIndex, datapoint, series, config }) => {
-        console.log({ seriesIndex, datapoint, series, config });
-        return "TEST"
+    layout: {
+      plots: {
+        giftWrap: {
+          show: true,
+          strokeDasharray: 10
+        }
       }
     }
+    // tooltip: {
+    //   showShape: false,
+    //   customFormat: ({ seriesIndex, datapoint, series, config }) => {
+    //     console.log({ seriesIndex, datapoint, series, config });
+    //     return "TEST"
+    //   }
+    // }
   }
 })
 
@@ -3442,7 +3449,7 @@ function selectBar(bar) {
         </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_nested_donuts)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_nested_donuts)">
         <template #title>
           <BaseIcon name="chartNestedDonuts"/>
           VueUiNestedDonuts
@@ -4053,7 +4060,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
@@ -4823,7 +4830,7 @@ function selectBar(bar) {
         </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_gauge)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_gauge)">
         <template #title>
           <BaseIcon name="chartGauge"/>
           VueUiGauge

src/App.vue

@@ -6,6 +6,7 @@ import {
     downloadCsv,
     error,
     functionReturnsString,
+    giftWrap,
     isFunction,
     objectIsEmpty,
     opacity, 
@@ -555,6 +556,22 @@ defineExpose({
                 />
             </g>
 
+            <!-- GIFT WRAP -->
+            <g v-if="scatterConfig.style.layout.plots.giftWrap.show">
+                <g v-for="(ds, i) in drawableDataset">
+                    <polygon 
+                        v-if="ds.plots.length > 2"
+                        :points="giftWrap({series: ds.plots})"
+                        :fill="`${ds.color}${opacity[scatterConfig.style.layout.plots.giftWrap.fillOpacity * 100]}`"
+                        :stroke-width="scatterConfig.style.layout.plots.giftWrap.strokeWidth"
+                        :stroke-dasharray="scatterConfig.style.layout.plots.giftWrap.strokeDasharray"
+                        :stroke="ds.color"
+                        stroke-linejoin="round"
+                        stroke-linecap="round"
+                    />
+                </g>
+            </g>
+
             <!-- PLOTS -->
             <g v-for="(ds, i) in drawableDataset">
                 <g v-if="!ds.shape || ds.shape === 'circle'">

src/components/vue-ui-scatter.vue

@@ -1926,6 +1926,12 @@
                     "deviation": {
                         "translation": "deviation",
                         "roundingValue": 1
+                    },
+                    "giftWrap": {
+                        "show": false,
+                        "strokeWidth": 1,
+                        "strokeDasharray": 0,
+                        "fillOpacity": 0.2
                     }
                 },
                 "correlation": {

src/default_configs.json

@@ -1990,6 +1990,12 @@ declare module 'vue-data-ui' {
                         translation?: string;
                         roundingValue?: number;
                     };
+                    giftWrap?: {
+                        show?: boolean;
+                        strokeWidth?: number;
+                        strokeDasharray?: number;
+                        fillOpacity?: number;
+                    };
                 };
                 correlation?: {
                     show?: boolean;