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

fix: Issues #256 fix Performance Line Chart Y unit to 'Count' done.

Browse Source
This commit is contained in:
chiayin
2024-03-12 15:47:15 +08:00
parent 2c6a45232d
commit 64ae986384
1 changed files with 40 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -203,13 +203,14 @@ export default {
* 建立折線圖
* @param { object } chartData chart data
* @param { object } content titels
* @param { string } yUnit y 軸單位 date | count
*/
getLineChart(chartData, content) {
getLineChart(chartData, content, yUnit) {
let datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
let minX = chartData.x_axis.min;
let maxX = chartData.x_axis.max;
let maxY = chartData.y_axis.max;
let xData = this.xLabelsData(chartData.x_axis)
let xData;
let setData = {};
let setOption = {};
const getMoment = (time)=> {
@@ -218,6 +219,16 @@ export default {
const getSimpleTimeLabel = simpleTimeLabel;
const getFollowTimeLabel = followTimeLabel;
switch (yUnit) {
case 'date':
datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
xData = this.xLabelsData(chartData.x_axis);
break;
case 'count': // 次數 10 個點
datasets = chartData.data;
xData = chartData.data.map(item => new Date(item.x).getTime());
break;
}
setData = {
labels: xData,
datasets: [
@@ -248,9 +259,6 @@ export default {
callbacks: {
title: function(context) {
return `${content.x}: ${getMoment(context[0].parsed.x)}`;
},
label: function(context) {
return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
}
},
},
@@ -261,8 +269,6 @@ export default {
scales: {
x: {
type: 'time',
min: minX,
max: maxX,
title: {
display: true,
text: content.x,
@@ -301,9 +307,6 @@ export default {
ticks:{
color: '#64748b',
padding: 8,
callback: function (value, index, ticks) {
return getFollowTimeLabel(value, maxY, 1)
}
},
grid: {
color: '#64748b',
@@ -314,6 +317,23 @@ export default {
},
},
};
switch (yUnit) {
case 'date':
setOption.plugins.tooltip.callbacks.label = function(context) {
return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
};
setOption.scales.x.min = minX;
setOption.scales.x.max = maxX;
setOption.scales.y.ticks.callback = function (value, index, ticks) {
return getFollowTimeLabel(value, maxY, 1)
};
break;
case 'count':
setOption.plugins.tooltip.callbacks.label = function(context) {
return `${content.y}: ${context.parsed.y}`;
};
break;
}
return [setData, setOption]
},
@@ -476,6 +496,7 @@ export default {
tooltip: {
displayColors: false,
titleFont: {weight: 'normal'},
callbacks: {}
},
title: {
display: false,
@@ -532,21 +553,17 @@ export default {
};
switch (xUnit) {
case 'date':
setOption.plugins.tooltip.callbacks = {
label: function(context) {
return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
}
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}`;
}
};
setOption.plugins.tooltip.callbacks.label = function(context) {
return `${content.x}: ${context.parsed.x}`;
}
break;
}
if(isSingle) { // 設定一個活動的 y label、提示框文字
@@ -587,13 +604,13 @@ export default {
this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_waiting_time_by_edge);
this.casesByTaskHeight = await this.getHorizontalBarHeight(this.performanceData.freq.cases_by_task);
// create chart
[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, 'date');
[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, 'date');
[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, 'date');
[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, 'count');
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
// 停止 loading
this.isLoading = false;