Skip to content

Commit 18caea9

Browse files
graphierosgraphieros
committed
Improvement - VueUiTable - Add time labels and zoom in line & bar charts
1 parent 9081c73 commit 18caea9

File tree

3 files changed

+82
-13
lines changed

3 files changed

+82
-13
lines changed

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

Lines changed: 56 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -523,14 +523,20 @@
523523

524524
<!-- BAR | LINE CHARTS -->
525525
<template v-if="[constants.BAR, constants.LINE].includes(chart.type) && !showDonutOptions">
526+
<label v-if="chartTimeLabelOptions.length > 1">
527+
{{ FINAL_CONFIG.translations.xAxisLabels }}
528+
<select v-model="chartTimeLabelSourceModel">
529+
<option v-for="opt in chartTimeLabelOptions">{{ opt }}</option>
530+
</select>
531+
</label>
526532
<div style="width: 100%; margin-bottom: 12px">
527-
<VueUiXy :dataset="chartData.xyDatasetLine" :config="chartData.xyConfig" v-if="chart.type === constants.LINE"/>
528-
<VueUiXy :dataset="chartData.xyDatasetBar" :config="chartData.xyConfig" v-if="chart.type === constants.BAR"/>
533+
<VueUiXy :key="`chart_line_${chartStep}`" :dataset="chartData.xyDatasetLine" :config="chartData.xyConfig" v-if="chart.type === constants.LINE"/>
534+
<VueUiXy :key="`chart_bar_${chartStep}`" :dataset="chartData.xyDatasetBar" :config="chartData.xyConfig" v-if="chart.type === constants.BAR"/>
529535
</div>
530536
<div v-if="currentSelectionSpan.rows.length >= 2" class="chart-trend"
531537
:style="`color:${FINAL_CONFIG.style.chart.modal.color}`">
532538
<span>---</span> Trend: {{ dataLabel({
533-
v: chartData.progression.trend,
539+
v: chartData.progression.trend * 100,
534540
s: '%',
535541
r: 1
536542
}) }}
@@ -656,13 +662,15 @@ export default {
656662
showChart: false,
657663
showDonutOptions: false,
658664
sorts: {},
665+
chartStep: 0,
666+
chartTimeLabelSourceModel: '',
659667
tableBody: JSON.parse(JSON.stringify(this.dataset.body)).map((el, i) => {
660668
return {
661669
...el,
662670
absoluteIndex: i
663671
}
664672
}),
665-
tableHead: JSON.parse(JSON.stringify(this.dataset.header)).map(head => {
673+
tableHead: JSON.parse(JSON.stringify(this.dataset.header)).map((head, i) => {
666674
return {
667675
average: Object.hasOwn(head, 'average') ? head.average : false,
668676
decimals: Object.hasOwn(head, 'decimals') ? head.decimals : 0,
@@ -677,6 +685,7 @@ export default {
677685
suffix: Object.hasOwn(head, 'suffix') ? head.suffix : '',
678686
sum: Object.hasOwn(head, 'sum') ? head.sum : false,
679687
type: head.type, // this attribute is mandatory
688+
index: i
680689
}
681690
}),
682691
filename: '',
@@ -704,6 +713,7 @@ export default {
704713
}
705714
})
706715
this.filename = this.FINAL_CONFIG.style.exportMenu.filename;
716+
this.chartTimeLabelSourceModel = this.dateHeaders[0]?.name ?? ''
707717
},
708718
watch: {
709719
isExportRequest: function (bool) {
@@ -732,7 +742,7 @@ export default {
732742
...el,
733743
absoluteIndex: i
734744
}));
735-
this.tableHead = JSON.parse(JSON.stringify(newVal.header)).map(head => ({
745+
this.tableHead = JSON.parse(JSON.stringify(newVal.header)).map((head, i) => ({
736746
average: Object.hasOwn(head, 'average') ? head.average : false,
737747
decimals: Object.hasOwn(head, 'decimals') ? head.decimals : 0,
738748
isMultiselect: Object.hasOwn(head, 'isMultiselect') ? head.isMultiselect : false,
@@ -746,6 +756,7 @@ export default {
746756
suffix: Object.hasOwn(head, 'suffix') ? head.suffix : '',
747757
sum: Object.hasOwn(head, 'sum') ? head.sum : false,
748758
type: head.type,
759+
index: i
749760
}));
750761
751762
this.currentSelectionSpan = { col: undefined, rows: [] };
@@ -782,14 +793,28 @@ export default {
782793
}
783794
},
784795
computed: {
796+
dateHeaders() {
797+
return [...this.tableHead].filter(th => th.type === this.constants.DATE);
798+
},
799+
chartTimeLabelOptions() {
800+
return ['', ...this.dateHeaders.map(th => th.name)];
801+
},
802+
chartTimeLabelSourceIndex() {
803+
const src = this.dateHeaders.find(th => th.name === this.chartTimeLabelSourceModel);
804+
return src ? src.index : null;
805+
},
806+
chartTimeLabels() {
807+
if (this.chartTimeLabelSourceIndex == null) return []
808+
return this.visibleRows.map(r => r.td[this.chartTimeLabelSourceIndex]);
809+
},
785810
availableDonutCategories() {
786811
return Object.keys(this.multiselects).map(index => {
787812
return {
788813
index,
789814
name: this.dataset.header[index].name,
790815
options: this.multiselects[index],
791816
}
792-
})
817+
});
793818
},
794819
canChart() {
795820
return this.FINAL_CONFIG.useChart && this.currentSelectionSpan.rows.length > 1;
@@ -849,7 +874,14 @@ export default {
849874
stroke: lightenHexColor(textColor, 0.5),
850875
labels: {
851876
color: textColor,
852-
xAxisLabels: { show: false },
877+
xAxisLabels: {
878+
color: textColor,
879+
show: this.chartTimeLabels.length,
880+
values: this.chartTimeLabels,
881+
datetimeFormatter: this.FINAL_CONFIG.style.chart.layout.datetimeFormatter,
882+
showOnlyAtModulo: this.FINAL_CONFIG.style.chart.layout.timeLabels.showOnlyAtModulo,
883+
modulo: this.FINAL_CONFIG.style.chart.layout.timeLabels.modulo
884+
},
853885
}
854886
},
855887
highlighter: {
@@ -864,7 +896,7 @@ export default {
864896
fontSize: 18,
865897
},
866898
tooltip: {
867-
showTimeLabel: false,
899+
showTimeLabel: this.chartTimeLabels.length,
868900
backgroundOpacity: 30,
869901
color: textColor,
870902
backgroundColor: bg,
@@ -880,7 +912,13 @@ export default {
880912
annotator: false
881913
}
882914
},
883-
zoom: { show: false },
915+
zoom: {
916+
show: this.FINAL_CONFIG.style.chart.layout.zoom.show,
917+
focusOnDrag: true,
918+
minimap: {
919+
show: true
920+
}
921+
},
884922
},
885923
line: {
886924
labels: {
@@ -1870,7 +1908,7 @@ export default {
18701908
18711909
.vue-ui-table-main input {
18721910
padding: 0 6px;
1873-
font-family: "Satoshi"
1911+
font-family: inherit;
18741912
}
18751913
18761914
.vue-ui-table-main button,
@@ -2494,4 +2532,12 @@ input.vue-ui-table-dialog-input {
24942532
input {
24952533
font-family: inherit !important;
24962534
}
2535+
2536+
label {
2537+
display: flex;
2538+
flex-direction: row;
2539+
gap: 6px;
2540+
align-items:center;
2541+
font-size: 12px;
2542+
}
24972543
</style>

‎src/useConfig.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1466,11 +1466,12 @@ export function useConfig() {
14661466
inactiveColor: COLOR_GREY_LIGHT,
14671467
activeColor: COLOR_BLUE,
14681468
sizeRatio: 0.9,
1469-
quantity: 100, // min 100
1469+
quantity: 100, // min: 12, max: 200
14701470
strokeWidth: 5,
14711471
stroke: 'transparent',
14721472
spacingRatio3d: 1,
14731473
shadeColorRatio3d: 0.15,
1474+
depth3d: 0,
14741475
gradient: {
14751476
show: true,
14761477
shiftHueIntensity: 100
@@ -1492,7 +1493,7 @@ export function useConfig() {
14921493
offsetX: 0,
14931494
offsetY: 0,
14941495
stroke: 'transparent',
1495-
strokeWidth: 0
1496+
strokeWidth: 0,
14961497
}
14971498
},
14981499
title: TITLE
@@ -5416,6 +5417,17 @@ export function useConfig() {
54165417
strokeWidth: 2,
54175418
strokeDasharray: 4,
54185419
arrowSize: 7
5420+
},
5421+
timeLabels: {
5422+
showOnlyAtModulo: true,
5423+
modulo: 12,
5424+
},
5425+
datetimeFormatter: {
5426+
...AXIS_DATE_FORMATTER,
5427+
enable: true
5428+
},
5429+
zoom: {
5430+
show: true,
54195431
}
54205432
}
54215433
}
@@ -5439,7 +5451,8 @@ export function useConfig() {
54395451
to: 'To',
54405452
total: 'Total',
54415453
totalRows: 'Total rows',
5442-
filename: 'File name'
5454+
filename: 'File name',
5455+
xAxisLabels: 'X axis labels'
54435456
},
54445457
useChart: true
54455458
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1759,6 +1759,7 @@ declare module "vue-data-ui" {
17591759
stroke?: string;
17601760
spacingRatio3d?: number;
17611761
shadeColorRatio3d?: number;
1762+
depth3d?: number;
17621763
gradient?: {
17631764
show?: boolean;
17641765
shiftHueIntensity?: number;
@@ -5691,6 +5692,14 @@ declare module "vue-data-ui" {
56915692
strokeDasharray?: number;
56925693
arrowSize?: number;
56935694
};
5695+
timeLabels?: {
5696+
showOnlyAtModulo?: boolean;
5697+
modulo?: number;
5698+
};
5699+
zoom?: {
5700+
show?: boolean;
5701+
};
5702+
datetimeFormatter?: AxisDateFormatter;
56945703
};
56955704
};
56965705
};
@@ -5714,6 +5723,7 @@ declare module "vue-data-ui" {
57145723
total?: string;
57155724
totalRows?: string;
57165725
filename?: string;
5726+
xAxisLabels?: string;
57175727
};
57185728
useChart?: boolean;
57195729
};

0 commit comments

Comments
 (0)