534 lines
24 KiB
Vue
534 lines
24 KiB
Vue
<template>
|
|
<main class="h-screen-main relative">
|
|
<div class="h-full relative bg-neutral-50">
|
|
<div class="flex justify-start items-start p-4 h-full overflow-y-auto scroll-smooth">
|
|
<!-- tag -->
|
|
<aside class="border-r border-neutral-300 pr-4 mr-4 h-full sticky top-0 self-start">
|
|
<section class="px-2 space-y-2 w-56 h-full">
|
|
<div>
|
|
<p class="h2 text-base">Time Usage</p>
|
|
<ul class="list-disc list-inside text-sm leading-5 pl-3">
|
|
<li v-for="(item, index) in timeUsageData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<p class="h2 text-base">Time Usage</p>
|
|
<ul class="list-disc list-inside text-sm leading-5 pl-3">
|
|
<li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
<!-- graph -->
|
|
<article class="w-full h-full">
|
|
<section>
|
|
<p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">schedule</span>Time Usage</p>
|
|
</section>
|
|
<section>
|
|
<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>
|
|
<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="">
|
|
<div class="card bg-neutral-10 ">
|
|
<Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" :height="horizontalBar"/>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li id="waitingTime">
|
|
<span class="inline-block py-4">Waiting Time</span>
|
|
<div class="">
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
|
|
<ul class="list-disc list-inside px-4 pl-7">
|
|
<li id="cases">
|
|
<span class="inline-block py-4">Number of Cases</span>
|
|
<div class="">
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<!-- <StatusBar></StatusBar> -->
|
|
</main>
|
|
</template>
|
|
<script>
|
|
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, dateLabel } from '@/module/timeLabel.js';
|
|
|
|
export default {
|
|
setup() {
|
|
const loadingStore = LoadingStore();
|
|
const performanceStore = PerformanceStore();
|
|
const { isLoading } = storeToRefs(loadingStore);
|
|
const { performanceData } = storeToRefs(performanceStore);
|
|
|
|
return { isLoading, performanceStore, performanceData }
|
|
},
|
|
components: {
|
|
StatusBar,
|
|
},
|
|
data() {
|
|
return {
|
|
timeUsageData: [
|
|
{tagId: '#cycleTime', label: 'Cycle Time & Efficiency'},
|
|
{tagId: '#processingTime', label: 'Processing Time'},
|
|
{tagId: '#waitingTime', label: 'Waiting Time'},
|
|
],
|
|
frequencyData: [
|
|
{tagId: '#cases', label: 'Number of Cases'},
|
|
// {tagId: '#trace', label: 'Number of Trace'},
|
|
// {tagId: '#resource', label: 'Resource'},
|
|
],
|
|
isActive: null,
|
|
avgCycleTimeData: null,
|
|
avgCycleTimeOptions: null,
|
|
avgCycleEfficiencyData: null,
|
|
avgCycleEfficiencyOptions: null,
|
|
avgProcessTimeByTaskData: null,
|
|
avgProcessTimeByTaskOptions: null,
|
|
horizontalBarHeight: 500, // horizontal Bar default height
|
|
horizontalBar: 500,
|
|
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-04-22T08:13:51.550000", "y": 0.8516609459556336 }, { "x": "2022-04-23T13: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-10-06T18:15:15.450000", "y": 0.8469898402743924 }, { "x": "2023-02-01T23:06:53.150000", "y": 0.9505515680779113 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2023-02-10T01: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": "ime", "y": 132695.481328 }, { "x": " Time", "y": 124443.590361 }, { "x": "f", "y": 127175.068273 }, { "x": "g", "y": 127628.964427 }, { "x": "hProcessing TimeProcessing TimeProcessing TimeProcessing TimeProcessing Time", "y": 128165.104294 }, { "x": "i", "y": 125586.248649 }, { "x": "j", "y": 101297.681818 }, { "x": "k Processing Time", "y": 142538.479167 }, { "x": "l", "y": 138069.642857 }, { "x": "a", "y": 131148.320856 }, { "x": "b", "y": 136626.705882 }, { "x": "c", "y": 133260.041667 }, { "x": "ime", "y": 132695.481328 }, { "x": " Time", "y": 124443.590361 }, { "x": "f", "y": 127175.068273 }, { "x": "g", "y": 127628.964427 }, { "x": "hProcessing TimeProcessing TimeProcessing TimeProcessing TimeProcessing Time", "y": 128165.104294 }, { "x": "i", "y": 125586.248649 }, { "x": "j", "y": 101297.681818 }, { "x": "k Processing Time", "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": [ "a123456789123456789", "a123456789" ], "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 `Date: ${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
|
|
},
|
|
fullSize: false, // 並非在畫面的正中間，而是圖表正中間
|
|
},
|
|
},
|
|
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() {
|
|
const data = this.data.time.avg_cycle_efficiency;
|
|
const maxX = data.x_axis.max;
|
|
const minX = data.x_axis.min;
|
|
const getMoment = (time)=> this.$moment(time).format('YYYY/M/D hh:mm:ss');
|
|
const getDateLabel = dateLabel;
|
|
let datasets = data.data;
|
|
let xData;
|
|
let yData;
|
|
|
|
datasets = datasets.map(value => {
|
|
return {
|
|
x: getMoment(value.x),
|
|
y: value.y * 100
|
|
}
|
|
}); // 轉為百分比
|
|
xData = datasets.map(i => i.x);
|
|
yData = datasets.map(i => i.y)
|
|
|
|
this.avgCycleEfficiencyData = {
|
|
labels: xData,
|
|
datasets: [
|
|
{
|
|
label: 'Cycle Efficiency',
|
|
data: yData,
|
|
backgroundColor: '#0099FF'
|
|
}
|
|
]
|
|
};
|
|
this.avgCycleEfficiencyOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
layout: {
|
|
padding: {
|
|
top: 16,
|
|
left: 8,
|
|
right: 8,
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: false, // 圖例
|
|
tooltip: {
|
|
displayColors: false,
|
|
callbacks: {
|
|
title: function(context) {
|
|
return `Date: ${context[0].label}`;
|
|
},
|
|
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
|
|
},
|
|
fullSize: false, // 並非在畫面的正中間，而是圖表正中間
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Date',
|
|
color: '#334155',
|
|
font: {
|
|
size: 12,
|
|
lineHeight: 2
|
|
}
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#64748b',
|
|
callback: function(v, i, t) {
|
|
let label = xData[i]
|
|
return getDateLabel(label, maxX, minX)
|
|
},
|
|
},
|
|
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; // 一個
|
|
const data = this.data.time.avg_waiting_time_by_edge;
|
|
const maxY = data.y_axis.max;
|
|
const getSimpleTimeLabel = simpleTimeLabel;
|
|
const getFollowTimeLabel = followTimeLabel;
|
|
|
|
// 大到小排序
|
|
data.data.sort((a, b) => b.y - a.y);
|
|
// const xData = data.data.map(item => item.x); // 一個
|
|
// const xData = data.data.map(item => item.x.join(' - '));
|
|
const xData = data.data.map(item => item.x);
|
|
const yData = data.data.map(item => item.y);
|
|
const totalBars = data.data.length;
|
|
|
|
if(totalBars > 10) this.horizontalBar = (totalBars - 10) * 20 + this.horizontalBarHeight;
|
|
|
|
this.avgProcessTimeByTaskData = {
|
|
labels: xData,
|
|
datasets: [
|
|
{
|
|
label: 'Average Processing Time by Activity',
|
|
data: yData,
|
|
backgroundColor: '#0099FF',
|
|
}
|
|
]
|
|
};
|
|
this.avgProcessTimeByTaskOptions = {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
layout: {
|
|
padding: {
|
|
top: 16,
|
|
left: 8,
|
|
right: 8,
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: false, // 圖例
|
|
tooltip: {
|
|
displayColors: false,
|
|
callbacks: {
|
|
title: function(context) {
|
|
// return `Activity: ${context[0].label}`;
|
|
console.log(context[0].label);
|
|
return `Activity: ${context[0].label.replace(',', ' - ')}`
|
|
},
|
|
label: function(context) {
|
|
return `Processing time: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
|
|
}
|
|
},
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Average Processing Time by Activity',
|
|
color: '#334155',
|
|
padding: {
|
|
bottom: 16
|
|
},
|
|
font: {
|
|
size: 14,
|
|
lineHeight: 2
|
|
},
|
|
fullSize: false, // 並非在畫面的正中間，而是圖表正中間
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Processing time',
|
|
color: '#334155',
|
|
font: {
|
|
size: 12,
|
|
lineHeight: 2
|
|
}
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
maxRotation: 0, // 不旋轉 lable 0~50
|
|
color: '#64748b',
|
|
callback: function (value, index, ticks) {
|
|
return getFollowTimeLabel(value, maxY, 1)
|
|
}
|
|
},
|
|
grid: {
|
|
color: '#64748b',
|
|
},
|
|
border: {
|
|
display:false,
|
|
},
|
|
},
|
|
y: {
|
|
beginAtZero: true, // scale 包含 0
|
|
type: 'category',
|
|
title: {
|
|
display: true,
|
|
text: 'Activity',
|
|
color: '#334155',
|
|
font: {
|
|
size: 12,
|
|
lineHeight: 2
|
|
},
|
|
},
|
|
ticks:{
|
|
color: '#64748b',
|
|
padding: 8,
|
|
callback: function (value, index, ticks) {
|
|
// let label = xData[index];
|
|
// return label.length > 21 ? `${label.substring(0, 18)}...` : label
|
|
|
|
let label = xData[index];
|
|
let labelStart = label[0];
|
|
let labelEnd = label[1];
|
|
|
|
labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart
|
|
labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd
|
|
return labelStart + " - " + labelEnd
|
|
}
|
|
},
|
|
grid: {
|
|
display:false,
|
|
color: '#64748b',
|
|
},
|
|
border: {
|
|
display: false, // 隱藏左側多出來的線
|
|
},
|
|
},
|
|
},
|
|
};
|
|
},
|
|
},
|
|
async created() {
|
|
this.isLoading = true;
|
|
// const routeParams = this.$route.params;
|
|
// let id = routeParams.fileId;
|
|
// let type = routeParams.type;
|
|
|
|
// // 取得 Performance Data
|
|
// await this.performanceStore.getPerformance(type, id);
|
|
this.getAvgCycleTime();
|
|
this.getAvgCycleEfficiency();
|
|
this.getAvgProcessTimeByTask();
|
|
|
|
this.isLoading = false;
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.active {
|
|
@apply text-primary
|
|
}
|
|
</style>
|