feat: Performance timeLabel done.
This commit is contained in:
chiayin
@@ -28,26 +28,34 @@
|
||||
<ul class="list-disc list-inside px-4 pl-7">
|
||||
<li id="cycleTime" class="scroll-smooth">
|
||||
<span class="inline-block py-4">Cycle Time & Efficiency</span>
|
||||
<div class="">
|
||||
圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
<div>
|
||||
<div class="card bg-neutral-10 mb-4">
|
||||
<Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
|
||||
</div>
|
||||
<div class="card bg-neutral-10">
|
||||
<Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
|
||||
</div>
|
||||
<!-- <div class="flex justify-start items-center">
|
||||
<div class="card">
|
||||
<Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
|
||||
</div>
|
||||
<div class="card">
|
||||
<Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</li>
|
||||
<li id="processingTime">
|
||||
<span class="inline-block py-4">Processing Time</span>
|
||||
<div class="">
|
||||
圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
<div class="card bg-neutral-10">
|
||||
<Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-96" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="waitingTime">
|
||||
<span class="inline-block py-4">Waiting Time</span>
|
||||
<div class="">
|
||||
圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -58,9 +66,6 @@
|
||||
<li id="cases">
|
||||
<span class="inline-block py-4">Number of Cases</span>
|
||||
<div class="">
|
||||
圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -76,6 +81,8 @@ import { storeToRefs } from 'pinia';
|
||||
import LoadingStore from '@/stores/loading.js';
|
||||
import PerformanceStore from '@/stores/performance.js';
|
||||
import StatusBar from '@/components/Discover/StatusBar.vue';
|
||||
import { setLineChartData } from '@/module/setChartData.js';
|
||||
import { simpleTimeLabel, followTimeLabel } from '@/module/timeLabel.js';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@@ -101,17 +108,369 @@ export default {
|
||||
// {tagId: '#trace', label: 'Number of Trace'},
|
||||
// {tagId: '#resource', label: 'Resource'},
|
||||
],
|
||||
isActive: null
|
||||
isActive: null,
|
||||
avgCycleTimeData: null,
|
||||
avgCycleTimeOptions: null,
|
||||
avgCycleEfficiencyData: null,
|
||||
avgCycleEfficiencyOptions: null,
|
||||
avgProcessTimeByTaskData: null,
|
||||
avgProcessTimeByTaskOptions: null,
|
||||
data: {
|
||||
"time": {
|
||||
"avg_cycle_time": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 980217.631579 }, { "x": "2022-02-26T08:13:51.550000", "y": 1000370.354839 }, { "x": "2022-04-03T13:05:29.250000", "y": 91198.291667 }, { "x": "2022-05-09T17:57:06.950000", "y": 10418.814815 }, { "x": "2022-06-14T22:48:44.650000", "y": 85414.78125 }, { "x": "2022-07-21T03:40:22.350000", "y": 938087.73913 }, { "x": "2022-08-26T08:32:00.050000", "y": 174683.238095 }, { "x": "2022-10-01T13:23:37.750000", "y": 61845.913043 }, { "x": "2022-11-06T18:15:15.450000", "y": 970119.423077 }, { "x": "2022-12-12T23:06:53.150000", "y": 60694.769231 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2022-12-31T01:32:42" }, "y_axis": { "min": 0, "max": 1074683.238095 } },
|
||||
"avg_cycle_efficiency": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 0.952810727062303 }, { "x": "2022-02-26T08:13:51.550000", "y": 0.8516609459556336 }, { "x": "2022-04-03T13:05:29.250000", "y": 0.04 }, { "x": "2022-05-09T17:57:06.950000", "y": 0.653723238628633 }, { "x": "2022-06-14T22:48:44.650000", "y": 0.5529137699582065 }, { "x": "2022-07-21T03:40:22.350000", "y": 0.4489519596406311 }, { "x": "2022-08-26T08:32:00.050000", "y": 0.6538608171463852 }, { "x": "2022-10-01T13:23:37.750000", "y": 0.7548918755379221 }, { "x": "2022-11-06T18:15:15.450000", "y": 0.8469898402743924 }, { "x": "2022-12-12T23:06:53.150000", "y": 0.9505515680779113 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2022-12-31T01:32:42" }, "y_axis": { "min": 0, "max": 1 } },
|
||||
"avg_process_time": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 937071.842105 }, { "x": "2022-02-26T08:13:51.550000", "y": 953769.903226 }, { "x": "2022-04-03T13:05:29.250000", "y": 865759.25 }, { "x": "2022-05-09T17:57:06.950000", "y": 994603.814815 }, { "x": "2022-06-14T22:48:44.650000", "y": 939812.375 }, { "x": "2022-07-21T03:40:22.350000", "y": 890924.565217 }, { "x": "2022-08-26T08:32:00.050000", "y": 1026333.285714 }, { "x": "2022-10-01T13:23:37.750000", "y": 1016383.608696 }, { "x": "2022-11-06T18:15:15.450000", "y": 923610.730769 }, { "x": "2022-12-12T23:06:53.150000", "y": 1011539.653846 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2022-12-31T01:32:42" }, "y_axis": { "min": 0, "max": 1026333.285714 } },
|
||||
"avg_process_time_by_task": { "data": [ { "x": "a", "y": 131148.320856 }, { "x": "b", "y": 136626.705882 }, { "x": "c", "y": 133260.041667 }, { "x": "d", "y": 132695.481328 }, { "x": "e", "y": 124443.590361 }, { "x": "f", "y": 127175.068273 }, { "x": "g", "y": 127628.964427 }, { "x": "h", "y": 128165.104294 }, { "x": "i", "y": 125586.248649 }, { "x": "j", "y": 101297.681818 }, { "x": "k", "y": 142538.479167 }, { "x": "l", "y": 138069.642857 } ], "x_axis": { "labels": [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l" ] }, "y_axis": { "min": 0, "max": 142538.479167 } },
|
||||
"avg_waiting_time": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 43145.789474 }, { "x": "2022-02-26T08:13:51.550000", "y": 46600.451613 }, { "x": "2022-04-03T13:05:29.250000", "y": 46227.041667 }, { "x": "2022-05-09T17:57:06.950000", "y": 47262 }, { "x": "2022-06-14T22:48:44.650000", "y": 45602.40625 }, { "x": "2022-07-21T03:40:22.350000", "y": 47163.173913 }, { "x": "2022-08-26T08:32:00.050000", "y": 48349.952381 }, { "x": "2022-10-01T13:23:37.750000", "y": 45462.304348 }, { "x": "2022-11-06T18:15:15.450000", "y": 46508.692308 }, { "x": "2022-12-12T23:06:53.150000", "y": 49155.115385 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2022-12-31T01:32:42" }, "y_axis": { "min": 0, "max": 49155.115385 } },
|
||||
"avg_waiting_time_by_edge": { "data": [ { "x": [ "a", "a" ], "y": 6446 }, { "x": [ "a", "d" ], "y": 7507.8 }, { "x": [ "a", "f" ], "y": 5966.8 }, { "x": [ "a", "g" ], "y": 5175.375 }, { "x": [ "a", "i" ], "y": 6291.333333 }, { "x": [ "b", "a" ], "y": 6802 }, { "x": [ "b", "b" ], "y": 3509 }, { "x": [ "b", "g" ], "y": 7283.727273 }, { "x": [ "b", "i" ], "y": 6278.2 }, { "x": [ "c", "g" ], "y": 11503 }, { "x": [ "c", "h" ], "y": 6819.978261 }, { "x": [ "c", "k" ], "y": 13494 }, { "x": [ "d", "c" ], "y": 11750 }, { "x": [ "d", "e" ], "y": 7165.741525 }, { "x": [ "d", "g" ], "y": 8087.666667 }, { "x": [ "d", "i" ], "y": 3619 }, { "x": [ "e", "a" ], "y": 7262.875 }, { "x": [ "e", "d" ], "y": 6765.5 }, { "x": [ "e", "f" ], "y": 7288.326271 }, { "x": [ "e", "g" ], "y": 14073 }, { "x": [ "e", "k" ], "y": 13620 }, { "x": [ "e", "l" ], "y": 3795 }, { "x": [ "f", "d" ], "y": 10125 }, { "x": [ "f", "e" ], "y": 3936 }, { "x": [ "f", "g" ], "y": 6984.864486 }, { "x": [ "f", "j" ], "y": 8172.772727 }, { "x": [ "f", "l" ], "y": 6675.375 }, { "x": [ "g", "c" ], "y": 2392 }, { "x": [ "g", "e" ], "y": 11883 }, { "x": [ "g", "f" ], "y": 5305.75 }, { "x": [ "g", "g" ], "y": 11411 }, { "x": [ "g", "h" ], "y": 7590.358974 }, { "x": [ "g", "i" ], "y": 7135.5 }, { "x": [ "g", "k" ], "y": 8113.822222 }, { "x": [ "g", "l" ], "y": 7452.894737 }, { "x": [ "h", "i" ], "y": 7289.611111 }, { "x": [ "h", "l" ], "y": 6945 }, { "x": [ "i", "a" ], "y": 8895 }, { "x": [ "i", "b" ], "y": 5872 }, { "x": [ "i", "c" ], "y": 5462 }, { "x": [ "i", "d" ], "y": 7711.462687 }, { "x": [ "i", "e" ], "y": 9128.666667 }, { "x": [ "i", "g" ], "y": 8648.333333 }, { "x": [ "i", "i" ], "y": 6343.4 }, { "x": [ "i", "k" ], "y": 3218 }, { "x": [ "i", "l" ], "y": 7190.90625 } ], "x_axis": { "labels": [ [ "a", "a" ], [ "a", "d" ], [ "a", "f" ], [ "a", "g" ], [ "a", "i" ], [ "b", "a" ], [ "b", "b" ], [ "b", "g" ], [ "b", "i" ], [ "c", "g" ], [ "c", "h" ], [ "c", "k" ], [ "d", "c" ], [ "d", "e" ], [ "d", "g" ], [ "d", "i" ], [ "e", "a" ], [ "e", "d" ], [ "e", "f" ], [ "e", "g" ], [ "e", "k" ], [ "e", "l" ], [ "f", "d" ], [ "f", "e" ], [ "f", "g" ], [ "f", "j" ], [ "f", "l" ], [ "g", "c" ], [ "g", "e" ], [ "g", "f" ], [ "g", "g" ], [ "g", "h" ], [ "g", "i" ], [ "g", "k" ], [ "g", "l" ], [ "h", "i" ], [ "h", "l" ], [ "i", "a" ], [ "i", "b" ], [ "i", "c" ], [ "i", "d" ], [ "i", "e" ], [ "i", "g" ], [ "i", "i" ], [ "i", "k" ], [ "i", "l" ] ] }, "y_axis": { "min": 0, "max": 14073 } } },
|
||||
"freq": { "cases": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 30 }, { "x": "2022-02-26T08:13:51.550000", "y": 25 }, { "x": "2022-04-03T13:05:29.250000", "y": 30 }, { "x": "2022-05-09T17:57:06.950000", "y": 26 }, { "x": "2022-06-14T22:48:44.650000", "y": 28 }, { "x": "2022-07-21T03:40:22.350000", "y": 27 }, { "x": "2022-08-26T08:32:00.050000", "y": 17 }, { "x": "2022-10-01T13:23:37.750000", "y": 24 }, { "x": "2022-11-06T18:15:15.450000", "y": 28 }, { "x": "2022-12-12T23:06:53.150000", "y": 17 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2022-12-31T01:32:42" }, "y_axis": { "min": 0, "max": 30 } },
|
||||
"cases_by_task": { "data": [ { "x": "a", "y": 184 }, { "x": "b", "y": 32 }, { "x": "c", "y": 48 }, { "x": "d", "y": 241 }, { "x": "e", "y": 249 }, { "x": "f", "y": 249 }, { "x": "g", "y": 250 }, { "x": "h", "y": 163 }, { "x": "i", "y": 175 }, { "x": "j", "y": 22 }, { "x": "k", "y": 48 }, { "x": "l", "y": 182 } ], "x_axis": { "labels": [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l" ] }, "y_axis": { "min": 0, "max": 250 } } }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
xLabelsData(valueData) {
|
||||
let min = new Date(valueData.min).getTime();
|
||||
let max = new Date(valueData.max).getTime();
|
||||
let numPoints = 12;
|
||||
let step = (max - min) / (numPoints - 1);
|
||||
let data = [];
|
||||
for(let i = 0; i< numPoints; i++) {
|
||||
const x = min + i * step;
|
||||
data.push(x);
|
||||
}
|
||||
return data;
|
||||
},
|
||||
getAvgCycleTime() {
|
||||
let data = this.data.time.avg_cycle_time;
|
||||
let datasets = setLineChartData(data.data, data.x_axis.max, data.x_axis.min, false, data.y_axis.max, data.y_axis.min);
|
||||
let minX = data.x_axis.min;
|
||||
let maxX = data.x_axis.max;
|
||||
let maxY = data.y_axis.max;
|
||||
let xData = this.xLabelsData(data.x_axis)
|
||||
const getMoment = (time)=> {
|
||||
return this.$moment(time).format('YYYY/M/D hh:mm:ss')
|
||||
};
|
||||
const getSimpleTimeLabel = simpleTimeLabel;
|
||||
const getFollowTimeLabel = followTimeLabel;
|
||||
|
||||
this.avgCycleTimeData = {
|
||||
labels: xData,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Average Cycle Time',
|
||||
data: datasets,
|
||||
fill: false,
|
||||
tension: 0, // 貝茲曲線張力
|
||||
borderColor: '#0099FF',
|
||||
}
|
||||
]
|
||||
};
|
||||
this.avgCycleTimeOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
layout: {
|
||||
padding: {
|
||||
top: 16,
|
||||
left: 8,
|
||||
right: 8,
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: false, // 圖例
|
||||
tooltip: {
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
title: function(context) {
|
||||
return getMoment(context[0].parsed.x);
|
||||
},
|
||||
label: function(context) {
|
||||
return `Cycle time: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Average Cycle Time',
|
||||
color: '#334155',
|
||||
padding: {
|
||||
bottom: 16
|
||||
},
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 2
|
||||
}
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
min: minX,
|
||||
max: maxX,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Date',
|
||||
color: '#334155',
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
}
|
||||
},
|
||||
time: {
|
||||
displayFormats: {
|
||||
day: 'yyyy/M/d'
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
maxRotation: 0, // 不旋轉 lable 0~50
|
||||
color: '#64748b',
|
||||
source: 'labels', // 依比例彈性顯示 label 數量
|
||||
},
|
||||
border: {
|
||||
color: '#64748b',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true, // scale 包含 0
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Cycle time',
|
||||
color: '#334155',
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
},
|
||||
},
|
||||
ticks:{
|
||||
color: '#64748b',
|
||||
padding: 8,
|
||||
callback: function (value, index, ticks) {
|
||||
return getFollowTimeLabel(value, maxY, 1)
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
color: '#64748b',
|
||||
},
|
||||
border: {
|
||||
display: false, // 隱藏左側多出來的線
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
getAvgCycleEfficiency() {
|
||||
let data = this.data.time.avg_cycle_efficiency;
|
||||
let datasets = data.data;
|
||||
const getMoment = (time)=> {
|
||||
return this.$moment(time).format('YYYY/M/D hh:mm:ss')
|
||||
};
|
||||
|
||||
datasets = datasets.map(value => {
|
||||
return {
|
||||
x: getMoment(value.x),
|
||||
y: value.y * 100
|
||||
}
|
||||
}); // 轉為百分比
|
||||
|
||||
this.avgCycleEfficiencyData = {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Cycle Efficiency',
|
||||
data: datasets,
|
||||
backgroundColor: '#0099FF'
|
||||
}
|
||||
]
|
||||
};
|
||||
this.avgCycleEfficiencyOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
layout: {
|
||||
padding: {
|
||||
top: 16,
|
||||
left: 8,
|
||||
right: 8,
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: false, // 圖例
|
||||
tooltip: {
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return `Cycle efficiency(%): ${context.parsed.y.toFixed(2)}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Cycle Efficiency',
|
||||
color: '#334155',
|
||||
padding: {
|
||||
bottom: 16
|
||||
},
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 2
|
||||
}
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Date',
|
||||
color: '#334155',
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#64748b',
|
||||
},
|
||||
border: {
|
||||
color: '#64748b',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true, // scale 包含 0
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Cycle efficiency(%)',
|
||||
color: '#334155',
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
},
|
||||
},
|
||||
ticks:{
|
||||
color: '#64748b',
|
||||
padding: 8,
|
||||
},
|
||||
grid: {
|
||||
color: '#64748b',
|
||||
},
|
||||
border: {
|
||||
display: false, // 隱藏左側多出來的線
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
getAvgProcessTimeByTask() {
|
||||
const data = this.data.time.avg_process_time_by_task;
|
||||
let datasets = data.data;
|
||||
const maxY = data.y_axis.max;
|
||||
const xData = data.x_axis.labels;
|
||||
const getSimpleTimeLabel = simpleTimeLabel;
|
||||
const getFollowTimeLabel = followTimeLabel;
|
||||
|
||||
this.avgProcessTimeByTaskData = {
|
||||
labels: xData,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Average Processing Time by Activity',
|
||||
data: datasets,
|
||||
backgroundColor: '#0099FF',
|
||||
}
|
||||
]
|
||||
};
|
||||
this.avgProcessTimeByTaskOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
layout: {
|
||||
padding: {
|
||||
top: 16,
|
||||
left: 8,
|
||||
right: 8,
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: false, // 圖例
|
||||
tooltip: {
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return `Processing time: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Average Processing Time by Activity',
|
||||
color: '#334155',
|
||||
padding: {
|
||||
bottom: 16
|
||||
},
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 2
|
||||
}
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Activity',
|
||||
color: '#334155',
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
// maxRotation: 0, // 不旋轉 lable 0~50
|
||||
color: '#64748b',
|
||||
},
|
||||
border: {
|
||||
color: '#64748b',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
// beginAtZero: true, // scale 包含 0
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Processing time',
|
||||
color: '#334155',
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
},
|
||||
},
|
||||
ticks:{
|
||||
color: '#64748b',
|
||||
padding: 8,
|
||||
callback: function (value, index, ticks) {
|
||||
return getFollowTimeLabel(value, maxY, 1)
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
color: '#64748b',
|
||||
},
|
||||
border: {
|
||||
display: false, // 隱藏左側多出來的線
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
},
|
||||
async created() {
|
||||
this.isLoading = true;
|
||||
const routeParams = this.$route.params;
|
||||
let id = routeParams.fileId;
|
||||
let type = routeParams.type;
|
||||
// const routeParams = this.$route.params;
|
||||
// let id = routeParams.fileId;
|
||||
// let type = routeParams.type;
|
||||
|
||||
// 取得 Performance Data
|
||||
await this.performanceStore.getPerformance(type, id);
|
||||
// // 取得 Performance Data
|
||||
// await this.performanceStore.getPerformance(type, id);
|
||||
this.getAvgCycleTime();
|
||||
this.getAvgCycleEfficiency();
|
||||
this.getAvgProcessTimeByTask();
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user