fix: Issues #256 fix Compare Line Chart Y unit to 'Count' done.
This commit is contained in:
chiayin
@@ -200,14 +200,16 @@ export default {
|
||||
* 建立折線圖
|
||||
* @param { object } chartData chart data
|
||||
* @param { object } content titels
|
||||
* @param { string } yUnit y 軸單位 date | count
|
||||
*/
|
||||
getLineChart(chartData, content) {
|
||||
let datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
|
||||
let datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
|
||||
getLineChart(chartData, content, yUnit) {
|
||||
console.log('chartData:', chartData);
|
||||
let datasetsPrimary;
|
||||
let datasetsSecondary;
|
||||
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 labelPrimary = chartData.data[0].label;
|
||||
let labelSecondary = chartData.data[1].label;
|
||||
let setData = {};
|
||||
@@ -218,6 +220,18 @@ export default {
|
||||
const getSimpleTimeLabel = simpleTimeLabel;
|
||||
const getFollowTimeLabel = followTimeLabel;
|
||||
|
||||
switch (yUnit) {
|
||||
case 'date':
|
||||
datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
|
||||
datasetsSecondary = setLineChartData(chartData.data[1].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 個點
|
||||
datasetsPrimary = chartData.data[0].data;
|
||||
datasetsSecondary = chartData.data[1].data;
|
||||
xData = chartData.data[0].data.map(item => new Date(item.x).getTime());
|
||||
break;
|
||||
}
|
||||
setData = {
|
||||
labels: xData,
|
||||
datasets: [
|
||||
@@ -259,16 +273,6 @@ export default {
|
||||
title: function(context) {
|
||||
return `${content.x}: ${getMoment(context[0].parsed.x)}`;
|
||||
},
|
||||
label: function(context) {
|
||||
let value = getSimpleTimeLabel(context.parsed.y, 2);
|
||||
|
||||
switch (context.datasetIndex) {
|
||||
case 0: // Primary
|
||||
return `${labelPrimary}: ${value}`;
|
||||
case 1: // Secondary
|
||||
return `${labelSecondary}: ${value}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
@@ -278,8 +282,6 @@ export default {
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
min: minX,
|
||||
max: maxX,
|
||||
title: {
|
||||
display: true,
|
||||
text: content.x,
|
||||
@@ -321,9 +323,6 @@ export default {
|
||||
ticks:{
|
||||
color: '#64748b',
|
||||
padding: 8,
|
||||
callback: function (value, index, ticks) {
|
||||
return getFollowTimeLabel(value, maxY, 1)
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
color: '#64748b',
|
||||
@@ -334,6 +333,37 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
switch (yUnit) {
|
||||
case 'date':
|
||||
setOption.plugins.tooltip.callbacks.label = function(context) {
|
||||
let value = getSimpleTimeLabel(context.parsed.y, 2);
|
||||
|
||||
switch (context.datasetIndex) {
|
||||
case 0: // Primary
|
||||
return `${labelPrimary}: ${value}`;
|
||||
case 1: // Secondary
|
||||
return `${labelSecondary}: ${value}`;
|
||||
}
|
||||
};
|
||||
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) {
|
||||
let value = context.parsed.y;
|
||||
|
||||
switch (context.datasetIndex) {
|
||||
case 0: // Primary
|
||||
return `${labelPrimary}: ${value}`;
|
||||
case 1: // Secondary
|
||||
return `${labelSecondary}: ${value}`;
|
||||
}
|
||||
};
|
||||
break;
|
||||
}
|
||||
|
||||
return [setData, setOption]
|
||||
},
|
||||
@@ -553,6 +583,7 @@ export default {
|
||||
// displayColors: false,
|
||||
mode: 'index', // 可顯示全部的 data label
|
||||
titleFont: {weight: 'normal'},
|
||||
callbacks: {}
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
@@ -610,36 +641,32 @@ export default {
|
||||
};
|
||||
switch (xUnit) {
|
||||
case 'date':
|
||||
setOption.plugins.tooltip.callbacks = {
|
||||
label: function(context) {
|
||||
let value = context.parsed.y;
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
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;
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
@@ -697,15 +724,15 @@ export default {
|
||||
this.casesByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.freq.cases_by_task);
|
||||
// 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.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime, 'date');
|
||||
[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);
|
||||
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
|
||||
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, 'date');
|
||||
} else {
|
||||
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
|
||||
}
|
||||
[this.freqData, this.freqOptions] = this.getLineChart(this.compareDashboardData.freq.cases, this.contentData.freq);
|
||||
[this.freqData, this.freqOptions] = this.getLineChart(this.compareDashboardData.freq.cases, this.contentData.freq, 'count');
|
||||
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
|
||||
},
|
||||
mounted() {
|
||||
|
||||
Reference in New Issue
Block a user