VueUiScatter added marginal lines optional config

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.1.31",
+  "version": "2.1.32",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [

package.json

@@ -1061,7 +1061,7 @@ const weeks = computed(() => {
 
 const scat1 = computed(() => {
   const arr = [];
-  for (let i = 0; i < 100; i += 1) {
+  for (let i = -100; i < 100; i += 1) {
     arr.push({
       x: Math.random() * i + 12,
       y: (Math.random() * i) / 20,
@@ -1072,7 +1072,7 @@ const scat1 = computed(() => {
 });
 const scat2 = computed(() => {
   const arr = [];
-  for (let i = 0; i < 50; i += 1) {
+  for (let i = -50; i < 50; i += 1) {
     arr.push({
       x: (Math.random() * i) / 2,
       y: (Math.random() * i) / 10,
@@ -1143,12 +1143,14 @@ const scatterDataset = computed(() => {
     {
       name: "Cluster 1",
       values: scat1.value,
-      shape: "star"
+      shape: "star",
+      color: '#FF0000'
     },
     {
       name: "Cluster 2",
       values: scat2.value,
-      shape: "diamond"
+      shape: "diamond",
+      color: "#00FF00"
     },
   ];
 });
@@ -2826,9 +2828,14 @@ const heatmapConfig = ref({
 const scatterConfig = ref({
   style: {
     layout: {
+      marginalBars: {
+        show: true,
+        showLines: true,
+        linesStrokeWidth: 1
+      },
       plots: {
         giftWrap: {
-          show: true,
+          show: false,
           strokeDasharray: 10
         }
       }
@@ -3801,7 +3808,7 @@ const pillConfig = ref({
         </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
@@ -4442,7 +4449,7 @@ const pillConfig = ref({
         </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

src/App.vue

@@ -12,6 +12,7 @@ import {
     objectIsEmpty,
     opacity, 
     palette,
+    createSmoothPath,
     XMLNS
 } from '../lib';
 import pdf from "../pdf";
@@ -264,14 +265,19 @@ function getData() {
 }
 
 function aggregateCoordinates(arr, scale) {
-    const flattened = arr.flatMap(a => {
+    const flattened = Array.isArray(arr) ? arr.flatMap(a => {
         return a.plots.map((p) => {
             return {
                 x: p.x,
                 y: p.y
             }
         })
-    });
+    }) : arr.plots.map(p => {
+        return {
+            x: p.x,
+            y: p.y
+        }
+    })
 
     let xMin = Infinity, xMax = -Infinity, yMin = Infinity, yMax = -Infinity;
 
@@ -314,8 +320,35 @@ function aggregateCoordinates(arr, scale) {
 }
 
 const scale = computed(() => scatterConfig.value.style.layout.marginalBars.tranches)
+
 const marginalBars = computed(() => {
     return aggregateCoordinates(mutableDataset.value, scale.value)
+});
+
+const marginalLines = computed(() => {
+    const top = drawingArea.value.top - scatterConfig.value.style.layout.marginalBars.offset;
+    const right = drawingArea.value.right + scatterConfig.value.style.layout.marginalBars.offset;
+    return mutableDataset.value.map(ds => {
+        const coords = aggregateCoordinates(ds, scale.value);
+
+        return {
+            coords,
+            dX: createSmoothPath(coords.avgX.map((el,i) => {
+                return { 
+                    x: el, 
+                    y: top - coords.x[i] / coords.maxX * scatterConfig.value.style.layout.marginalBars.size
+                }
+            })),
+            dY: createSmoothPath(coords.avgY.map((el, i) => {
+                return {
+                    y: el,
+                    x: right + (scatterConfig.value.style.layout.marginalBars.size * coords.y[i] / coords.maxY)
+                }
+            })),
+            color: ds.color,
+            id: ds.id,
+        }
+    })
 })
 
 const selectedPlotId = ref(undefined);
@@ -692,6 +725,46 @@ defineExpose({
                         :rx="scatterConfig.style.layout.marginalBars.borderRadius"
                     />
                 </g>
+                <g v-if="scatterConfig.style.layout.marginalBars.showLines">
+                    <template v-for="line in marginalLines">                   
+                        <path
+                            v-if="!segregated.includes(line.id)"
+                            :d="`M ${line.dX}`"
+                            :stroke="scatterConfig.style.backgroundColor"
+                            :stroke-width="scatterConfig.style.layout.marginalBars.linesStrokeWidth + 1"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            fill="none"
+                        />
+                        <path
+                            v-if="!segregated.includes(line.id)"
+                            :d="`M ${line.dX}`"
+                            :stroke="line.color"
+                            :stroke-width="scatterConfig.style.layout.marginalBars.linesStrokeWidth"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            fill="none"
+                        />
+                        <path
+                            v-if="!segregated.includes(line.id)"
+                            :d="`M ${line.dY}`"
+                            :stroke="scatterConfig.style.backgroundColor"
+                            :stroke-width="scatterConfig.style.layout.marginalBars.linesStrokeWidth + 1"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            fill="none"
+                        />
+                        <path
+                            v-if="!segregated.includes(line.id)"
+                            :d="`M ${line.dY}`"
+                            :stroke="line.color"
+                            :stroke-width="scatterConfig.style.layout.marginalBars.linesStrokeWidth"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            fill="none"
+                        />
+                    </template>
+                </g>
             </g>
 
             <!-- AXIS LABELS -->
@@ -764,8 +837,8 @@ defineExpose({
 
             <clipPath :id="`clip_path_${uid}`">
                 <rect
-                    :x="scatterConfig.style.layout.padding.left"
-                    :y="scatterConfig.style.layout.padding.top"
+                    :x="drawingArea.left"
+                    :y="drawingArea.top"
                     :width="drawingArea.width"
                     :height="drawingArea.height"
                 />

src/components/vue-ui-scatter.vue

@@ -1925,7 +1925,9 @@
                     "strokeWidth": 1,
                     "offset": 20,
                     "borderRadius": 2,
-                    "useGradient": true
+                    "useGradient": true,
+                    "showLines": false,
+                    "linesStrokeWidth": 1
                 },
                 "plots": {
                     "radius": 2,

src/default_configs.json

@@ -2007,6 +2007,8 @@ declare module 'vue-data-ui' {
                     offset?: number;
                     borderRadius?: number;
                     useGradient?: boolean;
+                    showLines?: boolean;
+                    linesStrokeWidth?: number;
                 };
                 correlation?: {
                     show?: boolean;