Improvement - VueUiXy added datapoint individual scaleMin & scaleMax attributes for individual scaling customization

Author: graphieros

package-lock.json

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

package.json

@@ -98,55 +98,30 @@ const dataset = ref([
 const dataset2 = ref([
     {
         name: "Series 1",
-        series: [ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55],
-        type: "bar",
-        color: "rgb(95,139,238)",
-        smooth: true,
-        scaleSteps: 20,
-        scaleLabel: "label test"
-    },
-    {
-        name: "Series 2",
-        series: [ 55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0, -1, -1, -2, -3, -5, -8, -13, -21, -34, -55],
+        series: [ 10, 20, 30, 20, 25, 12, 24, 21, 12, 22, 23, 24],
         type: "line",
         color: "rgb(66,211,146)",
-        useArea: true,
-        useProgression: true,
-        dataLabels: false,
-        shape: "hexagon",
-        scaleLabel: "label test"
-    },
-    {
-        name: "Series 3",
-        series: [ 3600, 2900, 4700, 2950, 3222, 4786, 3333, 2222, 4444, 5555, 3336, 2272, 1112, 3337, 2298],
-        type: "line",
-        color: "rgb(255,100,0)",
-        shape: "star",
+        scaleLabel: "label test",
         smooth: true,
-        useArea: true,
-        scaleLabel: "label test"
     },
     {
-        name: "Series 4",
-        series: [ 0, 1, -2, 3, -4, 5, -6, 7, -8, 9, -10, 11, -12, 13, -14, 15, -16, 17, -18, 19, -20],
+        name: "Series 2",
+        series: [ 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
         type: "line",
-        smooth: true,
-        useArea: false,
-        dataLabels: false,
-        color: "rgb(200,200,50)",
-        shape: "pentagon",
-        scaleLabel: "label test"
+        color: "rgb(255,100,0)",
+        scaleLabel: "label test",
+        scaleMin: 0,
+        scaleMax: 5,
+        scaleSteps: 3,
     },
     {
-        name: "Target",
-        series: [ -500, 500, -500, 500, -500, 500, -500, 500, -500, 500, -500, 500],
+        name: "Series 3",
+        series: [ 2, 3, 3, 3, 2, 2, 2, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3],
         type: "line",
-        color: "#404040",
-        dashed: true,
-        useTag: "start",
-        dataLabels: false,
-        scaleSteps: 20,
-        scaleLabel: "label test"
+        scaleLabel: "label test",
+        scaleMin: 0,
+        scaleMax: 5,
+        scaleSteps: 3
     },
 ]);
 

src/App.vue

@@ -1142,8 +1142,8 @@ export default {
         barSet() {
             return this.absoluteDataset.filter(s => s.type === 'bar').filter(s => !this.segregatedSeries.includes(s.id)).map((datapoint, i) => {
                 const individualExtremes = {
-                    max: Math.max(...datapoint.absoluteValues),
-                    min: Math.min(...datapoint.absoluteValues) > 0 ? 0 : Math.min(...datapoint.absoluteValues)
+                    max: datapoint.scaleMax || Math.max(...datapoint.absoluteValues),
+                    min: datapoint.scaleMin || Math.min(...datapoint.absoluteValues) > 0 ? 0 : Math.min(...datapoint.absoluteValues)
                 };
                 const scaleSteps = datapoint.scaleSteps || this.chartConfig.chart.grid.labels.yAxis.commonScaleSteps
                 const individualScale = this.calculateNiceScale(individualExtremes.min, individualExtremes.max, scaleSteps)
@@ -1172,14 +1172,14 @@ export default {
         lineSet() {
             return this.absoluteDataset.filter(s => s.type === 'line').filter(s => !this.segregatedSeries.includes(s.id)).map((datapoint) => {
                 const individualExtremes = {
-                    max: Math.max(...datapoint.absoluteValues),
-                    min: Math.min(...datapoint.absoluteValues) > 0 ? 0 : Math.min(...datapoint.absoluteValues)
+                    max: datapoint.scaleMax || Math.max(...datapoint.absoluteValues),
+                    min: datapoint.scaleMin || (Math.min(...datapoint.absoluteValues) > 0 ? 0 : Math.min(...datapoint.absoluteValues))
                 };
 
                 const scaleSteps = datapoint.scaleSteps || this.chartConfig.chart.grid.labels.yAxis.commonScaleSteps
                 const individualScale = this.calculateNiceScale(individualExtremes.min, individualExtremes.max, scaleSteps)
-                const individualZero = individualScale.min >= 0 ? 0 : Math.abs(individualScale.min);
-                const individualMax = individualScale.max + Math.abs(individualZero) 
+                const individualZero = (individualScale.min >= 0 ? 0 : Math.abs(individualScale.min))
+                const individualMax = individualScale.max + Math.abs(individualZero)
                 const zeroPosition = this.drawingArea.bottom - (this.drawingArea.height * individualZero / individualMax);
 
                 const plots = datapoint.series.map((plot, j) => {
@@ -1206,8 +1206,8 @@ export default {
         plotSet() {
             return this.absoluteDataset.filter(s => s.type === 'plot').filter(s => !this.segregatedSeries.includes(s.id)).map((datapoint) => {
                 const individualExtremes = {
-                    max: Math.max(...datapoint.absoluteValues),
-                    min: Math.min(...datapoint.absoluteValues) > 0 ? 0 : Math.min(...datapoint.absoluteValues)
+                    max: datapoint.scaleMax || Math.max(...datapoint.absoluteValues),
+                    min: datapoint.scaleMin || Math.min(...datapoint.absoluteValues) > 0 ? 0 : Math.min(...datapoint.absoluteValues)
                 };
 
                 const scaleSteps = datapoint.scaleSteps || this.chartConfig.chart.grid.labels.yAxis.commonScaleSteps

src/components/vue-ui-xy.vue

@@ -2484,6 +2484,8 @@ declare module 'vue-data-ui' {
         useProgression?: boolean;
         scaleSteps?: number;
         scaleLabel?: string;
+        scaleMax?: number;
+        scaleMin?: number;
     };
 
     export type VueUiXyDatasetBarItem = {