imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Issues #256 fix Compare Horizontal Bar Chart X unit to 'Count' done.

Browse Source
This commit is contained in:
chiayin
2024-03-12 14:09:28 +08:00
parent fa0376ec5f
commit 2c6a45232d
2 changed files with 40 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/views/Compare/Dashboard/index.vue
View File

@@ -491,8 +491,9 @@ export default {
* @param { object } chartData chart data
* @param { object } content titels
* @param { boolean } isSingle 單個或雙數 activity
* @param { string } xUnit x 軸單位 date | count
*/
getHorizontalBarChart(chartData, content, isSingle) {
getHorizontalBarChart(chartData, content, isSingle, xUnit) {
const maxY = chartData.y_axis.max;
const getSimpleTimeLabel = simpleTimeLabel;
const getFollowTimeLabel = followTimeLabel;
@@ -552,19 +553,6 @@ export default {
// displayColors: false,
mode: 'index', // 可顯示全部的 data label
titleFont: {weight: 'normal'},
callbacks: {
label: function(context) {
let value = context.parsed.y;
value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
switch (context.datasetIndex) {
case 0: // Primary
return `${labelPrimary}: ${value}`;
case 1: // Secondary
return `${labelSecondary}: ${value}`;
}
}
},
},
title: {
display: false,
@@ -585,9 +573,6 @@ export default {
display: true,
maxRotation: 0, // 不旋轉 lable 0~50
color: '#64748b',
callback: function (value, index, ticks) {
return getFollowTimeLabel(value, maxY, 1)
}
},
grid: {
color: '#64748b',
@@ -623,6 +608,41 @@ export default {
},
},
};
switch (xUnit) {
case 'date':
setOption.plugins.tooltip.callbacks = {
label: function(context) {
let value = context.parsed.y;
value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
switch (context.datasetIndex) {
case 0: // Primary
return `${labelPrimary}: ${value}`;
case 1: // Secondary
return `${labelSecondary}: ${value}`;
}
}
};
setOption.scales.x.ticks.callback = function (value, index, ticks) {
return getFollowTimeLabel(value, maxY, 1)
};
break;
case 'count':
setOption.plugins.tooltip.callbacks = {
label: function(context) {
let value = context.parsed.y;
value = context.parsed.x === null ? "n/a" : context.parsed.x;
switch (context.datasetIndex) {
case 0: // Primary
return `${labelPrimary}: ${value}`;
case 1: // Secondary
return `${labelSecondary}: ${value}`;
}
}
};
break;
}
if(isSingle) { // 設定一個活動的 y label、提示框文字
setOption.plugins.tooltip.callbacks.title = function(context) {
return `${content.y}: ${context[0].label}`;
@@ -678,15 +698,15 @@ export default {
// create chart
[this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime);
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true);
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime);
if(this.compareDashboardData.time.avg_waiting_time_by_edge !== null) {
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false);
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
} else {
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
}
[this.freqData, this.freqOptions] = this.getLineChart(this.compareDashboardData.freq.cases, this.contentData.freq);
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true);
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
},
mounted() {
// 停止 loading