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

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

Browse Source
This commit is contained in:
chiayin
2024-03-12 12:10:49 +08:00
parent 14cd3bd986
commit fa0376ec5f
1 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/Discover/Performance/index.vue
View File

@@ -436,8 +436,9 @@ export default {
* @param { object } chartData chart data * @param { object } chartData chart data
* @param { object } content titels * @param { object } content titels
* @param { boolean } isSingle 單個或雙數 activity * @param { boolean } isSingle 單個或雙數 activity
* @param { string } xUnit x 軸單位 date | count
*/ */
getHorizontalBarChart(chartData, content, isSingle, name) { getHorizontalBarChart(chartData, content, isSingle, xUnit) {
const maxY = chartData.y_axis.max; const maxY = chartData.y_axis.max;
const getSimpleTimeLabel = simpleTimeLabel; const getSimpleTimeLabel = simpleTimeLabel;
const getFollowTimeLabel = followTimeLabel; const getFollowTimeLabel = followTimeLabel;
@@ -477,7 +478,8 @@ export default {
titleFont: {weight: 'normal'}, titleFont: {weight: 'normal'},
callbacks: { callbacks: {
label: function(context) { label: function(context) {
return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`; // return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
return `${content.x}: ${context.parsed.x}`;
} }
}, },
}, },
@@ -500,9 +502,6 @@ export default {
display: true, display: true,
maxRotation: 0, // 不旋轉 lable 0~50 maxRotation: 0, // 不旋轉 lable 0~50
color: '#64748b', color: '#64748b',
callback: function (value, index, ticks) {
return getFollowTimeLabel(value, maxY, 1)
}
}, },
grid: { grid: {
color: '#64748b', color: '#64748b',
@@ -537,6 +536,25 @@ export default {
}, },
}, },
}; };
switch (xUnit) {
case 'date':
setOption.plugins.tooltip.callbacks = {
label: function(context) {
return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
}
};
setOption.scales.x.ticks.callback = function (value, index, ticks) {
return getFollowTimeLabel(value, maxY, 1)
};
break;
case 'count':
setOption.plugins.tooltip.callbacks = {
label: function(context) {
return `${content.x}: ${context.parsed.x}`;
}
};
break;
}
if(isSingle) { // 設定一個活動的 y label、提示框文字 if(isSingle) { // 設定一個活動的 y label、提示框文字
setOption.plugins.tooltip.callbacks.title = function(context) { setOption.plugins.tooltip.callbacks.title = function(context) {
return `${content.y}: ${context[0].label}`; return `${content.y}: ${context[0].label}`;
@@ -578,11 +596,11 @@ export default {
[this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.performanceData.time.avg_cycle_time, this.contentData.avgCycleTime); [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.performanceData.time.avg_cycle_time, this.contentData.avgCycleTime);
[this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.performanceData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency); [this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.performanceData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.performanceData.time.avg_process_time, this.contentData.avgProcessTime); [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.performanceData.time.avg_process_time, this.contentData.avgProcessTime);
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true); [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime); [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime);
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false); [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
[this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq); [this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq);
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task, this.contentData.casesByTask, true); [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
// 停止 loading // 停止 loading
this.isLoading = false; this.isLoading = false;
}, },