Skip to content

Commit d40ed37

Browse files
graphierosgraphieros
authored
Merge pull request #31 from graphieros/improvements-xy
Improvements xy
2 parents 88f1004 + 1907287 commit d40ed37

File tree

6 files changed

+61
-41
lines changed

6 files changed

+61
-41
lines changed

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,42 +8,43 @@ import convertArrayToObject from "./convertModel";
88
const dataset = ref([
99
{
1010
name: "S0",
11-
series: [1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1],
12-
type: "line",
11+
series: [10, 20, 12, 13, 10, 20, 30, 20, 12, 16, 32, 64],
12+
type: "bar",
1313
smooth: false,
1414
useArea: true,
15-
dataLabels: false,
15+
dataLabels: true,
1616
scaleSteps: 2,
1717
},
18-
{
19-
name: "S1",
20-
series: [0,1,1,1,1,1,0,0, 1, 1, 1],
21-
type: "line",
22-
smooth: false,
23-
useArea: true,
24-
scaleSteps: 2,
25-
},
26-
{
27-
name: "S2",
28-
series: [0,0,0,1,1,0,0,1,1,1, 1],
29-
type: "line",
30-
smooth: false,
31-
useArea: true,
32-
scaleSteps: 2
33-
},
34-
{
35-
name: "S3",
36-
series: [23.12, 23.12, 23.05, 23.07, null, 23.69, 23.72, 23.25, 23.36, 23.41, 23.65],
37-
type: "line",
38-
smooth: false,
39-
useArea: true,
40-
scaleSteps: 5,
41-
autoScaling: false,
42-
stackRatio: 0.5
43-
},
18+
// {
19+
// name: "S1",
20+
// series: [8, 4, 8, 16, 12, 13, 16, 25, 12, 3, 7, 12, 6],
21+
// type: "bar",
22+
// smooth: false,
23+
// useArea: true,
24+
// scaleSteps: 2,
25+
// },
26+
// {
27+
// name: "S2",
28+
// series: [10,12,10,12, 25, 12, 4, 4, 3, 7, 8, 9, 12],
29+
// type: "bar",
30+
// smooth: false,
31+
// useArea: true,
32+
// scaleSteps: 2
33+
// },
34+
// {
35+
// name: "S3",
36+
// series: [23.12, 23.12, 23.05, 23.07, null, 23.69, 23.72, 23.25, 23.36, 23.41, 23.65],
37+
// type: "line",
38+
// smooth: false,
39+
// useArea: true,
40+
// scaleSteps: 5,
41+
// autoScaling: false,
42+
// stackRatio: 0.5
43+
// },
4444
])
4545
4646
const model = ref([
47+
{ key: 'useCanvas', def: false, type: 'checkbox'}, // DEPRECATED
4748
{ key: 'useCssAnimation', def: true, type: 'checkbox', label: 'useCssAnimation', category: 'general' },
4849
{ key: 'chart.fontFamily', def: 'inherit', type: 'text', label: 'fontFamily', category: 'general' },
4950
{ key: 'chart.backgroundColor', def: '#FFFFFF', type: 'color', label: 'backgroundColor', category: 'general' },
@@ -80,8 +81,8 @@ const model = ref([
8081
{ key: 'chart.highlightArea.caption.padding', def: 3, type: 'number', min: 0, max: 48, label: 'captionPadding', category: 'highlight' },
8182
{ key: 'chart.highlightArea.caption.textAlign', def: 'center', type: 'select', options: ['left', 'center', 'right'], label: 'textAlign', category: 'highlight' },
8283
83-
{ key: 'chart.grid.stroke', def: '#e1e5e8', type: 'color', label: 'lineColor', category: 'grid' },
84-
{ key: 'chart.grid.showVerticalLines', def: false, type: 'checkbox', label: 'verticalLines', category: 'grid' },
84+
{ key: 'chart.grid.stroke', def: '#FF0000', type: 'color', label: 'lineColor', category: 'grid' },
85+
{ key: 'chart.grid.showVerticalLines', def: true, type: 'checkbox', label: 'verticalLines', category: 'grid' },
8586
{ key: 'chart.grid.labels.show', def: true, type: 'checkbox', label: 'showLabels', category: 'grid' },
8687
{ key: 'chart.grid.labels.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'grid' },
8788
{ key: 'chart.grid.labels.fontSize', def: 12, type: 'number', min: 4, max: 30, label: 'fontSize', category: 'grid' },
@@ -96,13 +97,13 @@ const model = ref([
9697
{ key: 'chart.grid.labels.xAxisLabels.yOffset', def: 8, type: 'number', min: -100, max: 100, label: 'offsetYPeriodLabels', category: 'grid' },
9798
{ key: 'chart.grid.labels.xAxisLabels.rotation', def: 0, type: 'range', min: -360, max: 360, label: 'rotation', category: 'grid' },
9899
{ key: 'chart.grid.labels.yAxis.commonScaleSteps', def: 20, min: 0, max: 100, type: 'number' },
99-
{ key: 'chart.grid.labels.yAxis.useIndividualScale', def: true, type: "checkbox" },
100-
{ key: 'chart.grid.labels.yAxis.stacked', def: true, type: 'checkbox' },
100+
{ key: 'chart.grid.labels.yAxis.useIndividualScale', def: false, type: "checkbox" },
101+
{ key: 'chart.grid.labels.yAxis.stacked', def: false, type: 'checkbox' },
101102
{ key: 'chart.grid.labels.yAxis.gap', def: 12, min: 0, max: 200, type: 'number' },
102103
{ key: 'chart.grid.labels.yAxis.labelWidth', def: 40, min: 0, max: 100, type: 'number' },
103104
{ key: 'chart.grid.labels.xAxis.showBaseline', def: true, type: 'checkbox'},
104105
105-
{ key: 'chart.labels.fontSize', def: 10, type: 'number', min: 6, max: 30, label: 'fontSize', category: 'labels' },
106+
{ key: 'chart.labels.fontSize', def: 20, type: 'number', min: 6, max: 30, label: 'fontSize', category: 'labels' },
106107
{ key: 'chart.labels.prefix', def: '', type: 'text', label: 'prefix', category: 'labels' },
107108
{ key: 'chart.labels.suffix', def: '', type: 'text', label: 'suffix', category: 'labels' },
108109
@@ -145,6 +146,7 @@ const model = ref([
145146
{ key: 'bar.serieName.abbreviationSize', def: 3, type: 'number', min: 0, max: 12, label: ['serieName', 'abbreviation', 'is', 'size'], category: 'bar' },
146147
{ key: 'bar.serieName.useSerieColor', def: true, type: 'checkbox', label: ['serieName', 'textColor', 'is', 'series'], category: 'bar' },
147148
{ key: 'bar.serieName.color', def: '#1A1A1A', type: 'color', label: ['serieName', 'is', 'textColor'], category: 'bar' },
149+
{ key: 'bar.periodGap', def: 0.1, type: 'number', min: 0, max: 24},
148150
149151
{ key: 'line.radius', def: 6, type: 'number', min: 0, max: 20, label: 'radius', category: 'line' },
150152
{ key: 'line.useGradient', def: true, type: 'checkbox', label: 'useGradient', category: 'line' },

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
"sass": "^1.57.1",
8989
"vite": "^4.5.3",
9090
"vitest": "^0.34.1",
91-
"vue": "^3.3.4"
91+
"vue": "^3.3.4",
92+
"vue-data-ui": "file:../vue-data-ui"
9293
}
9394
}

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const components = ref([
8181
/*__*/"VueUiTableHeatmap" // 36
8282
]);
8383
84-
const selectedComponent = ref(components.value[26]);
84+
const selectedComponent = ref(components.value[0]);
8585
8686
</script>
8787

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

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@
182182
:x="calcRectX(plot)"
183183
:y="chartConfig.chart.grid.labels.yAxis.useIndividualScale ? calcIndividualRectY(plot) : calcRectY(plot)"
184184
:height="chartConfig.chart.grid.labels.yAxis.useIndividualScale ? calcIndividualHeight(plot) : calcRectHeight(plot)"
185-
:width="calcRectWidth()"
185+
:width="calcRectWidth() - (chartConfig.chart.grid.labels.yAxis.useIndividualScale && chartConfig.chart.grid.labels.yAxis.stacked ? 0 : barPeriodGap)"
186186
:rx="chartConfig.bar.borderRadius"
187187
:fill="chartConfig.bar.useGradient ? plot.value >= 0 ? `url(#rectGradient_pos_${i}_${uniqueId})`: `url(#rectGradient_neg_${i}_${uniqueId})` : serie.color"
188188
/>
@@ -409,7 +409,7 @@
409409
<text
410410
:data-cy="`xy-bar-label-x-${i}-${j}`"
411411
v-if="plot && (!Object.hasOwn(serie, 'dataLabels') || serie.dataLabels === true) && chartConfig.bar.labels.show"
412-
:x="chartConfig.chart.grid.labels.yAxis.useIndividualScale && chartConfig.chart.grid.labels.yAxis.stacked ? plot.x + slot.line / 2 : plot.x + calcRectWidth() * 1.1"
412+
:x="chartConfig.chart.grid.labels.yAxis.useIndividualScale && chartConfig.chart.grid.labels.yAxis.stacked ? plot.x + slot.line / 2 : calcRectX(plot) + calcRectWidth() / 2 - barPeriodGap / 2"
413413
:y="plot.y + (plot.value > 0 ? chartConfig.bar.labels.offsetY : - chartConfig.bar.labels.offsetY * 3)"
414414
text-anchor="middle"
415415
:font-size="chartConfig.chart.labels.fontSize"
@@ -1279,12 +1279,20 @@ export default {
12791279
const zeroPosition = this.drawingArea.bottom - yOffset - ((individualHeight) * individualZero / individualMax);
12801280
const autoScaleZeroPosition = this.drawingArea.bottom - yOffset - (individualHeight * autoScaleZero / autoScaleMax);
12811281
1282+
const barLen = this.absoluteDataset.filter(ds => ds.type === 'bar').filter(s => !this.segregatedSeries.includes(s.id)).length;
12821283
12831284
const plots = datapoint.series.map((plot, j) => {
12841285
const yRatio = this.chartConfig.chart.grid.labels.yAxis.useIndividualScale ? ((datapoint.absoluteValues[j] + individualZero) / individualMax) : this.ratioToMax(plot)
12851286
const x = this.chartConfig.chart.grid.labels.yAxis.useIndividualScale && this.chartConfig.chart.grid.labels.yAxis.stacked
12861287
? this.drawingArea.left + (this.drawingArea.width / this.maxSeries * j)
1287-
: (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);
1288+
// : (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);
1289+
: this.drawingArea.left
1290+
+ (this.slot.bar * i)
1291+
+ (this.slot.bar * j * barLen)
1292+
- (this.barSlot / 2)
1293+
- (i * this.barPeriodGap)
1294+
1295+
12881296
return {
12891297
yOffset,
12901298
individualHeight,
@@ -1580,6 +1588,13 @@ export default {
15801588
line: this.drawingArea.width / this.maxSeries,
15811589
}
15821590
},
1591+
barSlot() {
1592+
const len = this.safeDataset.filter(serie => serie.type === 'bar').filter(s => !this.segregatedSeries.includes(s.id)).length
1593+
return (this.drawingArea.width) / this.maxSeries / len - (this.barPeriodGap * len)
1594+
},
1595+
barPeriodGap() {
1596+
return this.slot.line * this.chartConfig.bar.periodGap;
1597+
},
15831598
maxSlot(){
15841599
return Math.max(...Object.values(this.slot).filter(e => e !== Infinity))
15851600
},
@@ -2524,13 +2539,13 @@ export default {
25242539
if(this.chartConfig.chart.grid.labels.yAxis.useIndividualScale && this.chartConfig.chart.grid.labels.yAxis.stacked) {
25252540
return this.slot.line - ((this.drawingArea.width / this.maxSeries) * 0.1);
25262541
}
2527-
return this.slot.bar * 0.9;
2542+
return this.slot.bar;
25282543
},
25292544
calcRectX(plot) {
25302545
if (this.chartConfig.chart.grid.labels.yAxis.useIndividualScale && this.chartConfig.chart.grid.labels.yAxis.stacked) {
25312546
return plot.x + ((this.drawingArea.width / this.maxSeries) * 0.05)
25322547
}
2533-
return plot.x + (this.slot.bar * 0.05) + (this.slot.bar / 2);
2548+
return plot.x + (this.slot.bar / 2);
25342549
},
25352550
calcRectY(plot) {
25362551
if(plot.value >= 0) return plot.y;

‎src/default_configs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,7 @@
305305
"bar": {
306306
"borderRadius": 2,
307307
"useGradient": true,
308+
"periodGap": 0.1,
308309
"labels": {
309310
"show": false,
310311
"offsetY": -6,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2465,6 +2465,7 @@ declare module 'vue-data-ui' {
24652465
bar?: {
24662466
borderRadius?: number;
24672467
useGradient?: boolean;
2468+
periodGap?: number;
24682469
labels?: {
24692470
show?: boolean;
24702471
offsetY?: number;

0 commit comments

Comments
 (0)