diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue index 390e783..a341991 100644 --- a/src/views/Discover/Performance/index.vue +++ b/src/views/Discover/Performance/index.vue @@ -436,8 +436,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, name) { + getHorizontalBarChart(chartData, content, isSingle, xUnit) { const maxY = chartData.y_axis.max; const getSimpleTimeLabel = simpleTimeLabel; const getFollowTimeLabel = followTimeLabel; @@ -477,7 +478,8 @@ export default { titleFont: {weight: 'normal'}, callbacks: { 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, maxRotation: 0, // 不旋轉 lable 0~50 color: '#64748b', - callback: function (value, index, ticks) { - return getFollowTimeLabel(value, maxY, 1) - } }, grid: { 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、提示框文字 setOption.plugins.tooltip.callbacks.title = function(context) { 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.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.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.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.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 this.isLoading = false; },