diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue index 45eadbf..24d18a2 100644 --- a/src/views/Discover/Performance/index.vue +++ b/src/views/Discover/Performance/index.vue @@ -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;