Skip to content

Commit 9a600e1

Browse files
graphierosgraphieros
committed
Modification - VueUiXyCanvas - Move timeLabels configuration to x instead of y (non-breaking)
1 parent f71d905 commit 9a600e1

File tree

3 files changed

+78
-46
lines changed

3 files changed

+78
-46
lines changed

‎TestingArena/ArenaVueUiXyCanvas.vue‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -159,13 +159,25 @@ const model = ref([
159159
{ key: 'style.chart.grid.y.verticalLines.hideUnderXLength', def: 0, type: 'number', min: 5, max: 40 },
160160
{ key: 'style.chart.grid.y.verticalLines.position', def: 'middle', type: 'select', options: ['start', 'middle']},
161161
162-
{ key: 'style.chart.grid.y.timeLabels.show', def: true, type: 'checkbox' },
163-
{ key: 'style.chart.grid.y.timeLabels.fontSizeRatio', def: 0.8, type: 'number', min: 0.1, max: 2, step: 0.1 },
164-
{ key: 'style.chart.grid.y.timeLabels.rotation', def: 0, type: 'number', min: -360, max: 360 },
165-
{ key: 'style.chart.grid.y.timeLabels.offsetY', def: 30, type: 'number', min: -100, max: 100 },
166-
{ key: 'style.chart.grid.y.timeLabels.color', def: '#1A1A1A', type: 'color' },
167-
{ key: 'style.chart.grid.y.timeLabels.modulo', def: 8, type: 'number', min: 1, max: 100},
168-
{ key: 'style.chart.grid.y.timeLabels.bold', def: true, type: 'checkbox'},
162+
// { key: 'style.chart.grid.y.timeLabels.show', def: true, type: 'checkbox' },
163+
// { key: 'style.chart.grid.y.timeLabels.fontSizeRatio', def: 0.8, type: 'number', min: 0.1, max: 2, step: 0.1 },
164+
// { key: 'style.chart.grid.y.timeLabels.rotation', def: 0, type: 'number', min: -360, max: 360 },
165+
// { key: 'style.chart.grid.y.timeLabels.offsetY', def: 30, type: 'number', min: -100, max: 100 },
166+
// { key: 'style.chart.grid.y.timeLabels.color', def: '#1A1A1A', type: 'color' },
167+
// { key: 'style.chart.grid.y.timeLabels.modulo', def: 8, type: 'number', min: 1, max: 100},
168+
// { key: 'style.chart.grid.y.timeLabels.bold', def: true, type: 'checkbox'},
169+
170+
{ key: 'style.chart.grid.x.timeLabels.show', def: true, type: 'checkbox' },
171+
{ key: 'style.chart.grid.x.timeLabels.fontSizeRatio', def: 0.8, type: 'number', min: 0.1, max: 2, step: 0.1 },
172+
{ key: 'style.chart.grid.x.timeLabels.rotation', def: 0, type: 'number', min: -360, max: 360 },
173+
{ key: 'style.chart.grid.x.timeLabels.offsetY', def: 30, type: 'number', min: -100, max: 100 },
174+
{ key: 'style.chart.grid.x.timeLabels.color', def: '#1A1A1A', type: 'color' },
175+
{ key: 'style.chart.grid.x.timeLabels.modulo', def: 8, type: 'number', min: 1, max: 100},
176+
{ key: 'style.chart.grid.x.timeLabels.bold', def: true, type: 'checkbox'},
177+
178+
179+
180+
169181
{ key: 'style.chart.grid.x.showAxis', def: true, type: 'checkbox' },
170182
{ key: 'style.chart.grid.x.axisName', def: 'X AXIS', type: 'text' },
171183
{ key: 'style.chart.grid.x.axisColor', def: '#1A1A1A', type: 'color' },
@@ -259,15 +271,24 @@ const config = computed(() => {
259271
// },
260272
grid: {
261273
...c.style.chart.grid,
262-
y: {
263-
...c.style.chart.grid.y,
274+
x: {
275+
...c.style.chart.grid.x,
264276
timeLabels: {
265-
...c.style.chart.grid.y.timeLabels,
277+
...c.style.chart.grid.x.timeLabels,
266278
values: monthValues.value,
267279
datetimeFormatter: {
268280
enable: true,
269281
}
270282
}
283+
},
284+
y: {
285+
...c.style.chart.grid.y,
286+
// Testing deprecated timeLabels on Y which was a mishap and was moved to x.
287+
// Using them on Y still works, as it gets applied on X anyway; so to be backwards compatible.
288+
// Any timeLabel config content placed in Y overrides the default config in X
289+
timeLabels: {
290+
color: '#FF0000'
291+
}
271292
}
272293
}
273294
}

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

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,18 @@ function prepareConfig() {
182182
finalConfig.style.chart.zoom.endIndex = null;
183183
}
184184
185-
// ----------------------------------------------------------------------------
185+
// -------------------------- TIME LABELS CONFIG FIX --------------------------
186+
// Time labels were wrongly placed under the Y axis. This fix ensures back compatibility by
187+
// merging existing time labels placed under Y into X.
188+
189+
if (props.config && hasDeepProperty(props.config, 'style.chart.grid.y.timeLabels')) {
190+
console.warn('VueUiXyCanvas: you are using the deprecated config.style.chart.grid.y.timeLabels. It is recommended to move this configuration to config.style.chart.grid.x.timeLabels.');
191+
192+
finalConfig.style.chart.grid.x.timeLabels = useNestedProp({
193+
defaultConfig: finalConfig.style.chart.grid.x.timeLabels,
194+
userConfig: props.config.style.chart.grid.y.timeLabels
195+
});
196+
}
186197
187198
return finalConfig;
188199
}
@@ -552,7 +563,7 @@ function setupChart() {
552563
} else if(FINAL_CONFIG.value.style.chart.grid.y.verticalLines.show && (slicer.value.end - slicer.value.start) >= FINAL_CONFIG.value.style.chart.grid.y.verticalLines.hideUnderXLength) {
553564
for (let i = slicer.value.start; i < slicer.value.end; i += 1) {
554565
555-
if(i % Math.floor((slicer.value.end - slicer.value.start) / FINAL_CONFIG.value.style.chart.grid.y.timeLabels.modulo) === 0) {
566+
if(i % Math.floor((slicer.value.end - slicer.value.start) / FINAL_CONFIG.value.style.chart.grid.x.timeLabels.modulo) === 0) {
556567
line(
557568
ctx.value,
558569
[
@@ -677,7 +688,7 @@ function setupChart() {
677688
678689
for (let k = slicer.value.start; k < slicer.value.end; k += 1) {
679690
680-
if(k % Math.floor((slicer.value.end - slicer.value.start) / FINAL_CONFIG.value.style.chart.grid.y.timeLabels.modulo) === 0) {
691+
if(k % Math.floor((slicer.value.end - slicer.value.start) / FINAL_CONFIG.value.style.chart.grid.x.timeLabels.modulo) === 0) {
681692
line(
682693
ctx.value,
683694
[
@@ -964,31 +975,31 @@ function drawDataLabels(ds) {
964975
965976
const timeLabels = computed(() => {
966977
return useTimeLabels({
967-
values: FINAL_CONFIG.value.style.chart.grid.y.timeLabels.values,
978+
values: FINAL_CONFIG.value.style.chart.grid.x.timeLabels.values,
968979
maxDatapoints: maxSeries.value,
969-
formatter: FINAL_CONFIG.value.style.chart.grid.y.timeLabels.datetimeFormatter,
980+
formatter: FINAL_CONFIG.value.style.chart.grid.x.timeLabels.datetimeFormatter,
970981
start: 0,
971-
end: FINAL_CONFIG.value.style.chart.grid.y.timeLabels.values.length
982+
end: FINAL_CONFIG.value.style.chart.grid.x.timeLabels.values.length
972983
});
973984
});
974985
975986
function drawTimeLabels() {
976987
for (let i = slicer.value.start; i < slicer.value.end; i += 1) {
977988
if (
978-
(slicer.value.end - slicer.value.start) < FINAL_CONFIG.value.style.chart.grid.y.timeLabels.modulo ||
979-
((slicer.value.end - slicer.value.start) >= FINAL_CONFIG.value.style.chart.grid.y.timeLabels.modulo && (i % Math.floor((slicer.value.end - slicer.value.start) / FINAL_CONFIG.value.style.chart.grid.y.timeLabels.modulo) === 0 ||
980-
(i === (tooltipIndex.value + slicer.value.start)) && FINAL_CONFIG.value.style.chart.grid.y.timeLabels.showMarker )))
989+
(slicer.value.end - slicer.value.start) < FINAL_CONFIG.value.style.chart.grid.x.timeLabels.modulo ||
990+
((slicer.value.end - slicer.value.start) >= FINAL_CONFIG.value.style.chart.grid.x.timeLabels.modulo && (i % Math.floor((slicer.value.end - slicer.value.start) / FINAL_CONFIG.value.style.chart.grid.x.timeLabels.modulo) === 0 ||
991+
(i === (tooltipIndex.value + slicer.value.start)) && FINAL_CONFIG.value.style.chart.grid.x.timeLabels.showMarker )))
981992
{
982993
text(
983994
ctx.value,
984995
timeLabels.value[i] ? timeLabels.value[i].text : i + 1,
985996
drawingArea.value.left + (drawingArea.value.slot * (i - slicer.value.start)) + (drawingArea.value.slot / 2),
986-
drawingArea.value.bottom + (w.value / FINAL_CONFIG.value.style.chart.grid.y.timeLabels.offsetY),
997+
drawingArea.value.bottom + (w.value / FINAL_CONFIG.value.style.chart.grid.x.timeLabels.offsetY),
987998
{
988-
align: FINAL_CONFIG.value.style.chart.grid.y.timeLabels.rotation === 0 ? 'center' : FINAL_CONFIG.value.style.chart.grid.y.timeLabels.rotation > 0 ? 'left' : 'right',
989-
font: `${FINAL_CONFIG.value.style.chart.grid.y.timeLabels.bold ? 'bold ' : ''}${Math.round(w.value / 40 * FINAL_CONFIG.value.style.chart.grid.y.timeLabels.fontSizeRatio)}px ${FINAL_CONFIG.value.style.fontFamily}`,
990-
color: FINAL_CONFIG.value.style.chart.grid.y.timeLabels.showMarker ? setOpacity(FINAL_CONFIG.value.style.chart.grid.y.timeLabels.color, tooltipIndex.value !== null ? (tooltipIndex.value + slicer.value.start) === i ? 100 : 20 : 100) : FINAL_CONFIG.value.style.chart.grid.y.timeLabels.color,
991-
rotation: FINAL_CONFIG.value.style.chart.grid.y.timeLabels.rotation,
999+
align: FINAL_CONFIG.value.style.chart.grid.x.timeLabels.rotation === 0 ? 'center' : FINAL_CONFIG.value.style.chart.grid.x.timeLabels.rotation > 0 ? 'left' : 'right',
1000+
font: `${FINAL_CONFIG.value.style.chart.grid.x.timeLabels.bold ? 'bold ' : ''}${Math.round(w.value / 40 * FINAL_CONFIG.value.style.chart.grid.x.timeLabels.fontSizeRatio)}px ${FINAL_CONFIG.value.style.fontFamily}`,
1001+
color: FINAL_CONFIG.value.style.chart.grid.x.timeLabels.showMarker ? setOpacity(FINAL_CONFIG.value.style.chart.grid.x.timeLabels.color, tooltipIndex.value !== null ? (tooltipIndex.value + slicer.value.start) === i ? 100 : 20 : 100) : FINAL_CONFIG.value.style.chart.grid.x.timeLabels.color,
1002+
rotation: FINAL_CONFIG.value.style.chart.grid.x.timeLabels.rotation,
9921003
}
9931004
);
9941005
}
@@ -1229,7 +1240,7 @@ function draw() {
12291240
}
12301241
12311242
// TIME LABELS
1232-
FINAL_CONFIG.value.style.chart.grid.y.timeLabels.show && drawTimeLabels();
1243+
FINAL_CONFIG.value.style.chart.grid.x.timeLabels.show && drawTimeLabels();
12331244
FINAL_CONFIG.value.style.chart.selector.show && FINAL_CONFIG.value.style.chart.selector.showHorizontalSelector && drawHorizontalSelector();
12341245
12351246
drawYAxisScaleLabels();
@@ -1306,7 +1317,7 @@ function handleMousemove(e) {
13061317
config: FINAL_CONFIG.value
13071318
})
13081319
} else {
1309-
if (FINAL_CONFIG.value.style.chart.grid.y.timeLabels.values.slice(slicer.value.start, slicer.value.end)[tooltipIndex.value]) {
1320+
if (FINAL_CONFIG.value.style.chart.grid.x.timeLabels.values.slice(slicer.value.start, slicer.value.end)[tooltipIndex.value]) {
13101321
html += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${FINAL_CONFIG.value.style.chart.tooltip.borderColor}; width:100%">${timeLabels.value.slice(slicer.value.start, slicer.value.end)[tooltipIndex.value].text}</div>`;
13111322
}
13121323
html += tootlipDataset.value.join('')
@@ -1480,7 +1491,7 @@ const dataTable = computed(() => {
14801491
return ds.series[i] ?? 0
14811492
}).reduce((a,b ) => a + b, 0);
14821493
1483-
body.push([FINAL_CONFIG.value.style.chart.grid.y.timeLabels.values.slice(slicer.value.start, slicer.value.end)[i] ? timeLabels.value.slice(slicer.value.start, slicer.value.end)[i].text : i+1].concat(formattedDataset.value.map(ds => (ds.series[i] ?? 0).toFixed(FINAL_CONFIG.value.table.rounding))).concat((sum ?? 0).toFixed(FINAL_CONFIG.value.table.rounding)));
1494+
body.push([FINAL_CONFIG.value.style.chart.grid.x.timeLabels.values.slice(slicer.value.start, slicer.value.end)[i] ? timeLabels.value.slice(slicer.value.start, slicer.value.end)[i].text : i+1].concat(formattedDataset.value.map(ds => (ds.series[i] ?? 0).toFixed(FINAL_CONFIG.value.table.rounding))).concat((sum ?? 0).toFixed(FINAL_CONFIG.value.table.rounding)));
14841495
}
14851496
14861497
const config = {
@@ -1516,7 +1527,7 @@ const tableCsv = computed(() => {
15161527
const body = [];
15171528
15181529
for (let i = slicer.value.start; i < slicer.value.end; i += 1) {
1519-
const row = [FINAL_CONFIG.value.style.chart.grid.y.timeLabels.values[i] ? timeLabels.value[i].text : i + 1];
1530+
const row = [FINAL_CONFIG.value.style.chart.grid.x.timeLabels.values[i] ? timeLabels.value[i].text : i + 1];
15201531
formattedDataset.value.forEach(s => {
15211532
row.push(Number((s.series[i] || 0).toFixed(FINAL_CONFIG.value.table.rounding)));
15221533
});
@@ -1808,8 +1819,8 @@ defineExpose({
18081819
:borderColor="FINAL_CONFIG.style.chart.backgroundColor"
18091820
:fontSize="FINAL_CONFIG.style.chart.zoom.fontSize"
18101821
:useResetSlot="FINAL_CONFIG.style.chart.zoom.useResetSlot"
1811-
:labelLeft="FINAL_CONFIG.style.chart.grid.y.timeLabels.values[slicer.start] ? timeLabels[slicer.start].text : ''"
1812-
:labelRight="FINAL_CONFIG.style.chart.grid.y.timeLabels.values[slicer.end-1] ? timeLabels[slicer.end-1].text : ''"
1822+
:labelLeft="FINAL_CONFIG.style.chart.grid.x.timeLabels.values[slicer.start] ? timeLabels[slicer.start].text : ''"
1823+
:labelRight="FINAL_CONFIG.style.chart.grid.x.timeLabels.values[slicer.end-1] ? timeLabels[slicer.end-1].text : ''"
18131824
:textColor="FINAL_CONFIG.style.chart.color"
18141825
:inputColor="FINAL_CONFIG.style.chart.zoom.color"
18151826
:selectColor="FINAL_CONFIG.style.chart.zoom.highlightColor"

‎src/themes.json‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8929,15 +8929,15 @@
89298929
},
89308930
"verticalLines": {
89318931
"show": false
8932-
},
8933-
"timeLabels": {
8934-
"color": "#424242"
89358932
}
89368933
},
89378934
"x": {
89388935
"axisColor": "#5D4037",
89398936
"horizontalLines": {
89408937
"color": "#9A9A9A"
8938+
},
8939+
"timeLabels": {
8940+
"color": "#424242"
89418941
}
89428942
},
89438943
"zeroLine": {
@@ -8996,15 +8996,15 @@
89968996
},
89978997
"verticalLines": {
89988998
"show": false
8999-
},
9000-
"timeLabels": {
9001-
"color": "#BDBDBD"
90028999
}
90039000
},
90049001
"x": {
90059002
"axisColor": "#5D4037",
90069003
"horizontalLines": {
90079004
"color": "#3A3A3A"
9005+
},
9006+
"timeLabels": {
9007+
"color": "#BDBDBD"
90089008
}
90099009
},
90109010
"zeroLine": {
@@ -9063,15 +9063,15 @@
90639063
},
90649064
"verticalLines": {
90659065
"show": false
9066-
},
9067-
"timeLabels": {
9068-
"color": "#99AA99"
90699066
}
90709067
},
90719068
"x": {
90729069
"axisColor": "#5F6A5F",
90739070
"horizontalLines": {
90749071
"color": "#3A3A3A"
9072+
},
9073+
"timeLabels": {
9074+
"color": "#99AA99"
90759075
}
90769076
},
90779077
"zeroLine": {
@@ -9128,16 +9128,16 @@
91289128
},
91299129
"verticalLines": {
91309130
"show": false
9131-
},
9132-
"timeLabels": {
9133-
"color": "#8F837A"
91349131
}
91359132
},
91369133
"x": {
91379134
"axisColor": "#8F837A",
91389135
"horizontalLines": {
91399136
"show": false,
91409137
"alternate": false
9138+
},
9139+
"timeLabels": {
9140+
"color": "#8F837A"
91419141
}
91429142
},
91439143
"zeroLine": {
@@ -9194,13 +9194,13 @@
91949194
},
91959195
"verticalLines": {
91969196
"show": false
9197-
},
9198-
"timeLabels": {
9199-
"color": "#50606C"
92009197
}
92019198
},
92029199
"x": {
9203-
"axisColor": "#829C98"
9200+
"axisColor": "#829C98",
9201+
"timeLabels": {
9202+
"color": "#50606C"
9203+
}
92049204
},
92059205
"zeroLine": {
92069206
"color": "#444444"

0 commit comments

Comments
 (0)