diff --git a/src/views/Compare/Dashboard/index.vue b/src/views/Compare/Dashboard/index.vue index 6ae25c0..a1530ad 100644 --- a/src/views/Compare/Dashboard/index.vue +++ b/src/views/Compare/Dashboard/index.vue @@ -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() { diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue index 24d18a2..3fc585e 100644 --- a/src/views/Discover/Performance/index.vue +++ b/src/views/Discover/Performance/index.vue @@ -206,7 +206,7 @@ export default { * @param { string } yUnit y 軸單位 date | count */ 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 datasets; let minX = chartData.x_axis.min; let maxX = chartData.x_axis.max; let maxY = chartData.y_axis.max;