From 9a5dd2d7867bad965f9c7cdc425dedc44551b9a2 Mon Sep 17 00:00:00 2001 From: Cindy Chang Date: Mon, 3 Jun 2024 12:04:35 +0800 Subject: [PATCH] refine only layout of code --- src/module/setChartData.js | 22 ++++-- src/views/Compare/Dashboard/index.vue | 106 +++++++++++++++++++------- 2 files changed, 97 insertions(+), 31 deletions(-) diff --git a/src/module/setChartData.js b/src/module/setChartData.js index e868508..b047ec6 100644 --- a/src/module/setChartData.js +++ b/src/module/setChartData.js @@ -26,8 +26,12 @@ export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) { let e = 2; let f = baseData[1].y; b = (e*d - a*d - f*a - f*c) / (e - c - a) - if(isPercent) b = b >= 1 ? 1 : b <= 0 ? 0 : b; - else b = b >= yMax ? yMax : b <= yMin ? yMin : b; + if(isPercent) { + b = b >= 1 ? 1 : b <= 0 ? 0 : b; + } + else { + b = b >= yMax ? yMax : b <= yMin ? yMin : b; + } // y 軸最大值 let ma = 9; @@ -37,10 +41,16 @@ export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) { let me = 11; let mf; mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc); - if(isPercent) mf = mf >= 1 ? 1 : mf <= 0 ? 0 : mf; - else mf = mf >= yMax ? yMax : mf <= yMin ? yMin : mf; + if(isPercent) { + mf = mf >= 1 ? 1 : mf <= 0 ? 0 : mf; + } + else { + mf = mf >= yMax ? yMax : mf <= yMin ? yMin : mf; + } // 添加最小值 + // The unshift() method of Array instances adds the specified elements to + // the beginning of an array and returns the new length of the array. data.unshift({ x: xMin, y: b, @@ -177,7 +187,9 @@ export function formatTime(seconds) { result += `${remainingSeconds}s`; return result.trim(); // 去除最后一个空格 - } else return null; + } else { + return null; + } } /** * 只顯示最大的兩個單位 diff --git a/src/views/Compare/Dashboard/index.vue b/src/views/Compare/Dashboard/index.vue index cadc537..1e04c22 100644 --- a/src/views/Compare/Dashboard/index.vue +++ b/src/views/Compare/Dashboard/index.vue @@ -8,13 +8,20 @@

Time Usage

Frequency

@@ -22,17 +29,28 @@
-

scheduleTime Usage

+

+ schedule + + Time Usage +

  • Cycle Efficiency
    • - {{ contentData.avgCycleTime.title }} + + {{ contentData.avgCycleTime.title }} +
    • - {{ contentData.avgCycleEfficiency.title }}info + + {{ contentData.avgCycleEfficiency.title }} + + info +
    @@ -41,12 +59,17 @@ Processing Time
    • - {{ contentData.avgProcessTime.title }} + + {{ contentData.avgProcessTime.title }} +
    • - {{ contentData.avgProcessTimeByTask.title }} - + + {{ contentData.avgProcessTimeByTask.title }} + +
    • @@ -54,13 +77,22 @@ Waiting Time
    • - {{ contentData.avgWaitingTime.title }}info + + {{ contentData.avgWaitingTime.title }} + + info +
    • - {{ contentData.avgWaitingTimeByEdge.title }}info + + {{ contentData.avgWaitingTimeByEdge.title }} + info
      - +

      No waiting time.

      @@ -71,7 +103,11 @@
-

movingFrequency

+

+ moving + + Frequency +

  • Number of Cases @@ -81,8 +117,11 @@
  • - {{ contentData.casesByTask.title }} - + + {{ contentData.casesByTask.title }} + +
@@ -92,8 +131,11 @@
    -
  • - +
  • + info
    • @@ -243,8 +285,10 @@ export default { 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); + 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 個點 @@ -750,18 +794,28 @@ export default { }; this.casesByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.freq.cases_by_task); // create chart - [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_cycle_time, this.contentData.avgCycleTime, 'date'); - [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, '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, 'date'); + [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart( + this.compareDashboardData.time.avg_cycle_time, this.contentData.avgCycleTime, 'date'); + [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, '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, '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'); + [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, 'count'); - [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true, 'count'); + [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() { // 停止 loading