VueUiScatter added marginal bars config option

Author: graphieros

package-lock.json

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

package.json

@@ -313,7 +313,7 @@ function aggregateCoordinates(arr, scale) {
     return { x: xCounts, y: yCounts, avgX, avgY, maxX, maxY };
 }
 
-const scale = ref(20);
+const scale = computed(() => scatterConfig.value.style.layout.marginalBars.tranches)
 const marginalBars = computed(() => {
     return aggregateCoordinates(mutableDataset.value, scale.value)
 })
@@ -674,6 +674,7 @@ defineExpose({
                         :fill="scatterConfig.style.layout.marginalBars.useGradient ? `url(#marginal_x_${uid})` : scatterConfig.style.layout.marginalBars.fill"
                         :style="`opacity:${scatterConfig.style.layout.marginalBars.opacity}`"
                         :stroke="scatterConfig.style.backgroundColor"
+                        :stroke-width="scatterConfig.style.layout.marginalBars.strokeWidth"
                         :rx="scatterConfig.style.layout.marginalBars.borderRadius"
                     />
                 </g>
@@ -687,6 +688,7 @@ defineExpose({
                         :fill="scatterConfig.style.layout.marginalBars.useGradient ? `url(#marginal_y_${uid})` : scatterConfig.style.layout.marginalBars.fill"
                         :style="`opacity:${scatterConfig.style.layout.marginalBars.opacity}`"
                         :stroke="scatterConfig.style.backgroundColor"
+                        :stroke-width="scatterConfig.style.layout.marginalBars.strokeWidth"
                         :rx="scatterConfig.style.layout.marginalBars.borderRadius"
                     />
                 </g>

src/components/vue-ui-scatter.vue

@@ -1919,6 +1919,7 @@
                 "marginalBars": {
                     "show": false,
                     "size": 40,
+                    "tranches": 20,
                     "opacity": 0.6,
                     "fill": "#2D353C",
                     "strokeWidth": 1,

src/default_configs.json

@@ -2000,6 +2000,7 @@ declare module 'vue-data-ui' {
                 marginalBars?: {
                     show?: boolean;
                     size?: number;
+                    tranches?: number;
                     opacity?: number;
                     fill?: string;
                     strokeWidth?: number;