Skip to content

Commit 7a91f8a

Browse files
graphierosgraphieros
committed
Improvement - VueUiXy - Added config option to stack series in individual scale mode
1 parent 4712bd6 commit 7a91f8a

File tree

6 files changed

+91
-32
lines changed

6 files changed

+91
-32
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "2.1.54",
4+
"version": "2.1.55",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
77
"keywords": [

‎src/App.vue‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -100,28 +100,34 @@ const dataset2 = ref([
100100
name: "Series 1",
101101
series: [ 10, 20, 30, 20, 25, 12, 24, 21, 12, 22, 23, 24],
102102
type: "line",
103-
color: "rgb(66,211,146)",
104103
scaleLabel: "label test",
105104
smooth: true,
105+
scaleSteps: 2
106106
},
107107
{
108108
name: "Series 2",
109109
series: [ 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
110110
type: "line",
111-
color: "rgb(255,100,0)",
112111
scaleLabel: "label test",
113-
scaleMin: 0,
114-
scaleMax: 5,
115-
scaleSteps: 3,
112+
scaleSteps: 2,
113+
dataLabels: false,
114+
useArea:true
116115
},
117116
{
118117
name: "Series 3",
119-
series: [ 2, 3, 3, 3, 2, 2, 2, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3],
118+
series: [ 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
119+
type: "line",
120+
dataLabels: false,
121+
scaleLabel: "label test",
122+
scaleSteps: 2,
123+
124+
},
125+
{
126+
name: "Series 3",
127+
series: [ 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
120128
type: "line",
121129
scaleLabel: "label test",
122-
scaleMin: 0,
123-
scaleMax: 5,
124-
scaleSteps: 3
130+
scaleSteps: 2
125131
},
126132
]);
127133
@@ -2663,13 +2669,16 @@ const donutConfig = ref({
26632669
const xyConfig = ref({
26642670
chart: {
26652671
grid: {
2672+
showHorizontalLines: true,
26662673
labels: {
26672674
axis: {
26682675
yLabel: 'Y LABEL TEST',
26692676
xLabel: 'X LABEL TEST'
26702677
},
26712678
yAxis: {
2672-
useIndividualScale: true
2679+
useIndividualScale: true,
2680+
stacked: true,
2681+
gap:50
26732682
},
26742683
xAxisLabels: {
26752684
rotation: 0,

‎src/components/vue-ui-xy.vue‎

Lines changed: 63 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
stroke-linecap="round"
7777
/>
7878
</template>
79-
<template v-else>
79+
<template v-else-if="chartConfig.chart.grid.showHorizontalLines">
8080
<g v-for="grid in allScales">
8181
<template v-if="grid.id === selectedScale">
8282
<line
@@ -90,6 +90,18 @@
9090
stroke-linecap="round"
9191
/>
9292
</template>
93+
<template v-else>
94+
<line
95+
v-for="l in grid.yLabels"
96+
:x1="drawingArea.left"
97+
:x2="drawingArea.right"
98+
:y1="l.y"
99+
:y2="l.y"
100+
:stroke="chartConfig.chart.grid.stroke"
101+
:stroke-width="0.5"
102+
stroke-linecap="round"
103+
/>
104+
</template>
93105
</g>
94106
</template>
95107
<g v-if="chartConfig.chart.grid.showVerticalLines" data-cy="xy-grid-vertical-lines">
@@ -529,8 +541,8 @@
529541
v-for="el in allScales"
530542
:x1="el.x"
531543
:x2="el.x"
532-
:y1="drawingArea.top"
533-
:y2="drawingArea.bottom"
544+
:y1="chartConfig.chart.grid.labels.yAxis.stacked ? (drawingArea.bottom - el.yOffset - el.individualHeight) : drawingArea.top"
545+
:y2="chartConfig.chart.grid.labels.yAxis.stacked ? (drawingArea.bottom - el.yOffset) : drawingArea.bottom"
534546
:stroke="el.color"
535547
:stroke-width="chartConfig.chart.grid.stroke"
536548
stroke-linecap="round"
@@ -541,7 +553,7 @@
541553
:fill="el.color"
542554
:font-size="chartConfig.chart.grid.labels.fontSize"
543555
text-anchor="middle"
544-
:transform="`translate(${el.x - chartConfig.chart.grid.labels.yAxis.labelWidth + 5}, ${drawingArea.top + drawingArea.height / 2}) rotate(-90)`"
556+
:transform="`translate(${el.x - chartConfig.chart.grid.labels.yAxis.labelWidth + 5}, ${chartConfig.chart.grid.labels.yAxis.stacked ? drawingArea.bottom - el.yOffset - (el.individualHeight / 2) : drawingArea.top + drawingArea.height / 2}) rotate(-90)`"
545557
>
546558
{{ el.name }} {{ el.scaleLabel ? `- ${el.scaleLabel}` : '' }}
547559
</text>
@@ -597,7 +609,7 @@
597609
</g>
598610

599611
<!-- Y LABELS MOUSE TRAPS -->
600-
<template v-if="chartConfig.chart.grid.labels.yAxis.useIndividualScale">
612+
<template v-if="chartConfig.chart.grid.labels.yAxis.useIndividualScale && !chartConfig.chart.grid.labels.yAxis.stacked">
601613
<rect
602614
v-for="trap in allScales"
603615
:x="trap.x - chartConfig.chart.grid.labels.yAxis.labelWidth"
@@ -989,7 +1001,9 @@ export default {
9891001
zero: l.zeroPosition,
9901002
max: l.individualMax,
9911003
scaleLabel: l.scaleLabel || "",
992-
id: l.id
1004+
id: l.id,
1005+
yOffset: l.yOffset || 0,
1006+
individualHeight: l.individualHeight || this.drawingArea.height
9931007
}
9941008
});
9951009
const bars = this.barSet.map(b => {
@@ -1000,7 +1014,9 @@ export default {
10001014
zero: b.zeroPosition,
10011015
max: b.individualMax,
10021016
scaleLabel: b.scaleLabel || "",
1003-
id: b.id
1017+
id: b.id,
1018+
yOffset: b.yOffset || 0,
1019+
individualHeight: b.individualHeight || this.drawingArea.height
10041020
}
10051021
});
10061022
const plots = this.plotSet.map(p => {
@@ -1011,7 +1027,9 @@ export default {
10111027
zero: p.zeroPosition,
10121028
max: p.individualMax,
10131029
scaleLabel: p.scaleLabel || "",
1014-
id: p.id
1030+
id: p.id,
1031+
yOffset: p.yOffset || 0,
1032+
individualHeight: p.individualHeight || this.drawingArea.height
10151033
}
10161034
});
10171035
const len = [...lines, ...bars, ...plots].flatMap(el => el).length;
@@ -1022,10 +1040,12 @@ export default {
10221040
name: el.name,
10231041
color: el.color,
10241042
scale: el.scale,
1025-
x: (this.drawingArea.left / len) * (i+1),
1043+
yOffset: el.yOffset,
1044+
individualHeight: el.individualHeight,
1045+
x: this.chartConfig.chart.grid.labels.yAxis.stacked ? this.drawingArea.left : (this.drawingArea.left / len) * (i+1),
10261046
yLabels: el.scale.ticks.map(t => {
10271047
return {
1028-
y: t >= 0 ? el.zero - (this.drawingArea.height * (t / el.max)) : el.zero + (this.drawingArea.height * Math.abs(t) / el.max),
1048+
y: t >= 0 ? el.zero - (el.individualHeight * (t / el.max)) : el.zero + (el.individualHeight * Math.abs(t) / el.max),
10291049
value: t
10301050
}
10311051
})
@@ -1131,6 +1151,7 @@ export default {
11311151
absoluteDataset() {
11321152
return this.safeDataset.map((datapoint, i) => {
11331153
return {
1154+
absoluteIndex: i,
11341155
...datapoint,
11351156
series: datapoint.series.map(plot => plot + this.relativeZero),
11361157
absoluteValues: datapoint.series,
@@ -1149,18 +1170,25 @@ export default {
11491170
const individualScale = this.calculateNiceScale(individualExtremes.min, individualExtremes.max, scaleSteps)
11501171
const individualZero = individualScale.min >= 0 ? 0 : Math.abs(individualScale.min);
11511172
const individualMax = individualScale.max + individualZero;
1152-
const zeroPosition = this.drawingArea.bottom - (this.drawingArea.height * individualZero / individualMax);
1173+
const yOffset = this.chartConfig.chart.grid.labels.yAxis.stacked ? (this.drawingArea.height / this.activeSeriesLength) * datapoint.absoluteIndex : 0;
1174+
1175+
const individualHeight = this.chartConfig.chart.grid.labels.yAxis.stacked ? (this.drawingArea.height / this.activeSeriesLength) - this.chartConfig.chart.grid.labels.yAxis.gap : this.drawingArea.height;
1176+
const zeroPosition = this.drawingArea.bottom - yOffset - ((individualHeight) * individualZero / individualMax);
11531177
return {
11541178
individualScale,
1179+
yOffset,
1180+
individualHeight,
11551181
zeroPosition,
11561182
individualMax,
11571183
...datapoint,
11581184
plots: datapoint.series.map((plot, j) => {
11591185
const yRatio = this.chartConfig.chart.grid.labels.yAxis.useIndividualScale ? ((datapoint.absoluteValues[j] + individualZero) / individualMax) : this.ratioToMax(plot)
11601186
11611187
return {
1188+
yOffset,
1189+
individualHeight,
11621190
x: (this.drawingArea.left - this.slot.bar/2 + this.slot.bar * i) + (this.slot.bar * j * this.absoluteDataset.filter(ds => ds.type === 'bar').filter(s => !this.segregatedSeries.includes(s.id)).length),
1163-
y: this.drawingArea.bottom - (this.drawingArea.height * yRatio),
1191+
y: this.drawingArea.bottom - yOffset - (individualHeight * yRatio),
11641192
value: datapoint.absoluteValues[j],
11651193
zeroPosition,
11661194
individualMax,
@@ -1169,6 +1197,9 @@ export default {
11691197
}
11701198
})
11711199
},
1200+
activeSeriesLength() {
1201+
return this.absoluteDataset.length
1202+
},
11721203
lineSet() {
11731204
return this.absoluteDataset.filter(s => s.type === 'line').filter(s => !this.segregatedSeries.includes(s.id)).map((datapoint) => {
11741205
const individualExtremes = {
@@ -1180,26 +1211,34 @@ export default {
11801211
const individualScale = this.calculateNiceScale(individualExtremes.min, individualExtremes.max, scaleSteps)
11811212
const individualZero = (individualScale.min >= 0 ? 0 : Math.abs(individualScale.min))
11821213
const individualMax = individualScale.max + Math.abs(individualZero)
1183-
const zeroPosition = this.drawingArea.bottom - (this.drawingArea.height * individualZero / individualMax);
1214+
1215+
const yOffset = this.chartConfig.chart.grid.labels.yAxis.stacked ? (this.drawingArea.height / this.activeSeriesLength) * datapoint.absoluteIndex : 0;
1216+
1217+
const individualHeight = this.chartConfig.chart.grid.labels.yAxis.stacked ? (this.drawingArea.height / this.activeSeriesLength) - this.chartConfig.chart.grid.labels.yAxis.gap : this.drawingArea.height;
1218+
const zeroPosition = this.drawingArea.bottom - yOffset - ((individualHeight) * individualZero / individualMax);
11841219
11851220
const plots = datapoint.series.map((plot, j) => {
1186-
const yRatio = this.chartConfig.chart.grid.labels.yAxis.useIndividualScale ? ((datapoint.absoluteValues[j] + Math.abs(individualZero)) / individualMax) : this.ratioToMax(plot)
1221+
const yRatio = this.chartConfig.chart.grid.labels.yAxis.useIndividualScale
1222+
? ((datapoint.absoluteValues[j] + Math.abs(individualZero)) / individualMax)
1223+
: this.ratioToMax(plot)
11871224
11881225
return {
11891226
x: (this.drawingArea.left + (this.slot.line/2)) + (this.slot.line * j),
1190-
y: this.drawingArea.bottom - (this.drawingArea.height * yRatio),
1227+
y: this.drawingArea.bottom - yOffset - (individualHeight * yRatio),
11911228
value: datapoint.absoluteValues[j],
11921229
}
11931230
});
11941231
const curve = this.createSmoothPath(plots);
11951232
return {
1233+
yOffset,
1234+
individualHeight,
11961235
individualScale,
11971236
individualMax,
11981237
zeroPosition,
11991238
...datapoint,
12001239
curve,
12011240
plots,
1202-
area: !datapoint.useArea ? '' : this.chartConfig.chart.grid.labels.yAxis.useIndividualScale ? this.createIndividualArea(plots, this.drawingArea.bottom) : this.createArea(plots)
1241+
area: !datapoint.useArea ? '' : this.chartConfig.chart.grid.labels.yAxis.useIndividualScale ? this.createIndividualArea(plots, zeroPosition) : this.createArea(plots)
12031242
}
12041243
})
12051244
},
@@ -1215,9 +1254,14 @@ export default {
12151254
const individualZero = individualScale.min >= 0 ? 0 : Math.abs(individualScale.min);
12161255
const individualMax = individualScale.max + individualZero;
12171256
1218-
const zeroPosition = this.drawingArea.bottom - (this.drawingArea.height * individualZero / individualMax);
1257+
const yOffset = this.chartConfig.chart.grid.labels.yAxis.stacked ? (this.drawingArea.height / this.activeSeriesLength) * datapoint.absoluteIndex : 0;
1258+
1259+
const individualHeight = this.chartConfig.chart.grid.labels.yAxis.stacked ? (this.drawingArea.height / this.activeSeriesLength) - this.chartConfig.chart.grid.labels.yAxis.gap : this.drawingArea.height;
1260+
const zeroPosition = this.drawingArea.bottom - yOffset - ((individualHeight) * individualZero / individualMax);
12191261
12201262
return {
1263+
individualHeight,
1264+
yOffset,
12211265
...datapoint,
12221266
zeroPosition,
12231267
individualMax,
@@ -1226,15 +1270,15 @@ export default {
12261270
const yRatio = this.chartConfig.chart.grid.labels.yAxis.useIndividualScale ? ((datapoint.absoluteValues[j] + Math.abs(individualZero)) / individualMax) : this.ratioToMax(plot)
12271271
return {
12281272
x: (this.drawingArea.left + (this.slot.plot / 2)) + (this.slot.plot * j),
1229-
y: this.drawingArea.bottom - (this.drawingArea.height * yRatio),
1273+
y: this.drawingArea.bottom - yOffset - (individualHeight * yRatio),
12301274
value: datapoint.absoluteValues[j],
12311275
}
12321276
})
12331277
}
12341278
})
12351279
},
12361280
drawingArea() {
1237-
const individualScalesPadding = this.chartConfig.chart.grid.labels.yAxis.useIndividualScale && this.chartConfig.chart.grid.labels.show ? this.absoluteDataset.filter(s => !this.segregatedSeries.includes(s.id)).length * this.chartConfig.chart.grid.labels.yAxis.labelWidth : 0;
1281+
const individualScalesPadding = this.chartConfig.chart.grid.labels.yAxis.useIndividualScale && this.chartConfig.chart.grid.labels.show ? this.absoluteDataset.filter(s => !this.segregatedSeries.includes(s.id)).length * (this.chartConfig.chart.grid.labels.yAxis.stacked ? 0 : this.chartConfig.chart.grid.labels.yAxis.labelWidth) : 0;
12381282
return {
12391283
top: this.chartConfig.chart.padding.top,
12401284
right: this.chartConfig.chart.width - this.chartConfig.chart.padding.right,

‎src/default_configs.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,7 @@
206206
"grid": {
207207
"stroke": "#e1e5e8",
208208
"showVerticalLines": false,
209+
"showHorizontalLines": false,
209210
"labels": {
210211
"color": "#2D353C",
211212
"show": true,
@@ -220,6 +221,8 @@
220221
"yAxis": {
221222
"commonScaleSteps": 10,
222223
"useIndividualScale": false,
224+
"stacked": false,
225+
"gap": 64,
223226
"labelWidth": 40
224227
},
225228
"xAxisLabels": {

‎types/vue-data-ui.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2331,6 +2331,7 @@ declare module 'vue-data-ui' {
23312331
};
23322332
grid?: {
23332333
stroke?: string;
2334+
showHorizontalLines?: boolean;
23342335
showVerticalLines?: boolean;
23352336
labels?: {
23362337
color?: string;
@@ -2346,6 +2347,8 @@ declare module 'vue-data-ui' {
23462347
yAxis?: {
23472348
commonScaleSteps?: number;
23482349
useIndividualScale?: boolean;
2350+
stacked?: boolean;
2351+
gap?: number;
23492352
labelWidth?: number;
23502353
};
23512354
xAxisLabels?: {

0 commit comments

Comments
 (0)