748 lines
27 KiB
Vue
748 lines
27 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">
|
|
<!-- 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="h1">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="h1">Frequency</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 pr-2 mr-2 overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
|
|
<section>
|
|
<p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">schedule</span>Time Usage</p>
|
|
<ul class="list-disc list-inside px-4 pl-7 text-sm">
|
|
<li id="cycleTime" class="scroll-smooth">
|
|
<span class="inline-block py-4">Cycle Efficiency</span>
|
|
<ul>
|
|
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
|
|
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgCycleEfficiency.title }}</span>
|
|
<Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li id="processingTime">
|
|
<span class="inline-block py-4 text-sm">Processing Time</span>
|
|
<ul>
|
|
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
|
|
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgProcessTime.title }}</span>
|
|
<Chart type="line" :data="avgProcessTimeData" :options="avgProcessTimeOptions" class="h-96" />
|
|
</li>
|
|
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
|
|
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgProcessTimeByTask.title }}</span>
|
|
<Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-[500px]" :style="{ height: avgProcessTimeByTaskHeight }"/>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li id="waitingTime">
|
|
<span class="inline-block py-4 text-sm">Waiting Time</span>
|
|
<ul>
|
|
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
|
|
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTime.title }}</span>
|
|
<Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" />
|
|
</li>
|
|
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
|
|
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}</span>
|
|
<div>
|
|
<Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
|
|
<div v-else class="h-96 bg-neutral-100 m-4 flex">
|
|
<p class="h2 text-danger m-auto">No waiting time.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<p class="h1 px-4 border-b border-neutral-900 mt-2"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
|
|
<ul class="list-disc list-inside px-4 pl-7 text-sm">
|
|
<li id="cases">
|
|
<span class="inline-block py-4">Number of Cases</span>
|
|
<ul>
|
|
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
|
|
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.freq.title }}</span>
|
|
<Chart type="line" :data="freqData" :options="freqOptions" class="h-96" />
|
|
</li>
|
|
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
|
|
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.casesByTask.title }}</span>
|
|
<Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions" :style="{ height: casesByTaskHeight }" class="h-[500px]"/>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</article>
|
|
<!-- Sidebar: State -->
|
|
<div class="bg-transparent z-10">
|
|
<ul class="flex flex-col justify-center items-center">
|
|
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="compareState">
|
|
<span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
|
|
info
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<SidebarStates v-model:visible="sidebarState"></SidebarStates>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
<script>
|
|
import { storeToRefs } from 'pinia';
|
|
import LoadingStore from '@/stores/loading.js';
|
|
import CompareStore from '@/stores/compare.js';
|
|
import SidebarStates from '@/components/Compare/SidebarStates.vue';
|
|
import { setLineChartData } from '@/module/setChartData.js';
|
|
import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
|
|
|
|
export default {
|
|
setup() {
|
|
const loadingStore = LoadingStore();
|
|
const compareStore = CompareStore();
|
|
const { isLoading } = storeToRefs(loadingStore);
|
|
const { compareDashboardData } = storeToRefs(compareStore);
|
|
|
|
return { isLoading, compareStore, compareDashboardData }
|
|
},
|
|
components: {
|
|
SidebarStates,
|
|
},
|
|
data() {
|
|
return {
|
|
timeUsageData: [
|
|
{tagId: '#cycleTime', label: 'Cycle 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'},
|
|
],
|
|
contentData: {
|
|
avgCycleEfficiency: {title: 'Cycle Efficiency', x: 'Date', y: 'Cycle efficiency (%)'},
|
|
avgProcessTime: {title: 'Average Processing Time', x: 'Date', y: 'Processing time'},
|
|
avgProcessTimeByTask: {title: 'Average Processing Time by Activity', x: 'Processing time', y: 'Activity'},
|
|
avgWaitingTime: {title: 'Average Waiting Time', x: 'Date', y: 'Waiting time'},
|
|
avgWaitingTimeByEdge: {title: 'Average Waiting Time by Activity', x: 'Waiting time', y: 'Activity'},
|
|
freq: {title: 'New Cases', x: 'Date', y: 'Count'},
|
|
casesByTask: {title: 'Number of Cases by Activity', x: 'Times', y: 'Activity'},
|
|
},
|
|
isActive: null,
|
|
avgCycleTimeData: null,
|
|
avgCycleTimeOptions: null,
|
|
avgCycleEfficiencyData: null,
|
|
avgCycleEfficiencyOptions: null,
|
|
avgProcessTimeData: null,
|
|
avgProcessTimeOptions: null,
|
|
avgProcessTimeByTaskData: null,
|
|
avgProcessTimeByTaskOptions: null,
|
|
avgWaitingTimeData: null,
|
|
avgWaitingTimeOptions: null,
|
|
avgWaitingTimeByEdgeData: null,
|
|
avgWaitingTimeByEdgeOptions: null,
|
|
freqData: null,
|
|
freqOptions: null,
|
|
casesByTaskData: null,
|
|
casesByTaskOptions: null,
|
|
horizontalBarHeight: 500, // horizontal Bar default height
|
|
avgProcessTimeByTaskHeight: 500,
|
|
avgWaitingTimeByEdgeHeight: 500,
|
|
casesByTaskHeight: 500,
|
|
colorPrimary: '#0099FF',
|
|
colorSecondary: '#FFAA44',
|
|
sidebarState: false, // SideBar: Summary
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 手刻折線圖 x label 時間刻度
|
|
* @param { object } valueData {min: '2022-02-20T19:54:12', max: '2023-11-27T07:21:53'}
|
|
*/
|
|
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;
|
|
},
|
|
/**
|
|
* 讓長條圖依 data 數量增加高度
|
|
* @param { object } chartData chart data
|
|
*/
|
|
getHorizontalBarHeight(chartData) {
|
|
const totalBars = chartData.x_axis.labels.length;
|
|
let horizontalBar = this.horizontalBarHeight;
|
|
|
|
if(totalBars > 10) horizontalBar = (totalBars - 10) * 16 * 2 + this.horizontalBarHeight;
|
|
|
|
return horizontalBar + 'px'
|
|
},
|
|
/**
|
|
* 建立折線圖
|
|
* @param { object } chartData chart data
|
|
* @param { object } content titels
|
|
* @param { string } yUnit y 軸單位 date | count
|
|
*/
|
|
getLineChart(chartData, content, yUnit) {
|
|
let datasetsPrimary;
|
|
let datasetsSecondary;
|
|
let minX = chartData.x_axis.min;
|
|
let maxX = chartData.x_axis.max;
|
|
let maxY = chartData.y_axis.max;
|
|
let xData;
|
|
let labelPrimary = chartData.data[0].label;
|
|
let labelSecondary = chartData.data[1].label;
|
|
let setData = {};
|
|
let setOption = {};
|
|
const getMoment = (time)=> {
|
|
return this.$moment(time).format('YYYY/M/D hh:mm:ss')
|
|
};
|
|
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: [
|
|
{
|
|
label: labelPrimary,
|
|
data: datasetsPrimary,
|
|
fill: false,
|
|
tension: 0, // 貝茲曲線張力
|
|
borderColor: this.colorPrimary,
|
|
pointBackgroundColor: this.colorPrimary,
|
|
},
|
|
{
|
|
label: labelSecondary,
|
|
data: datasetsSecondary,
|
|
fill: false,
|
|
tension: 0, // 貝茲曲線張力
|
|
borderColor: this.colorSecondary,
|
|
pointBackgroundColor: this.colorSecondary,
|
|
}
|
|
]
|
|
};
|
|
setOption = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
layout: {
|
|
padding: {
|
|
top: 16,
|
|
left: 8,
|
|
right: 8,
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: false, // 圖例
|
|
tooltip: {
|
|
// displayColors: false,
|
|
mode: 'index',
|
|
titleFont: {weight: 'normal'},
|
|
callbacks: {
|
|
title: function(context) {
|
|
return `${content.x}: ${getMoment(context[0].parsed.x)}`;
|
|
},
|
|
},
|
|
},
|
|
title: {
|
|
display: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
type: 'time',
|
|
title: {
|
|
display: true,
|
|
text: content.x,
|
|
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',
|
|
},
|
|
grid: {
|
|
tickLength: 0, // 網格是否超過邊線
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true, // scale 包含 0
|
|
title: {
|
|
display: true,
|
|
text: content.y,
|
|
color: '#334155',
|
|
font: {
|
|
size: 12,
|
|
lineHeight: 2
|
|
},
|
|
},
|
|
ticks:{
|
|
color: '#64748b',
|
|
padding: 8,
|
|
},
|
|
grid: {
|
|
color: '#64748b',
|
|
},
|
|
border: {
|
|
display: false, // 隱藏左側多出來的線
|
|
},
|
|
},
|
|
},
|
|
};
|
|
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]
|
|
},
|
|
/**
|
|
* 建立長條圖
|
|
* @param { object } chartData chart data
|
|
* @param { object } content titels
|
|
*/
|
|
getBarChart(chartData, content) {
|
|
const maxX = chartData.x_axis.max;
|
|
const minX = chartData.x_axis.min;
|
|
const getMoment = (time)=> this.$moment(time).format('YYYY/M/D hh:mm:ss');
|
|
const getDateLabel = dateLabel;
|
|
let datasetsPrimary = chartData.data[0].data;
|
|
let xDataPrimary;
|
|
let yDataPrimary;
|
|
let labelPrimary = chartData.data[0].label;
|
|
let datasetsSecondary = chartData.data[1].data;
|
|
let xDataSecondary;
|
|
let yDataSecondary;
|
|
let labelSecondary = chartData.data[1].label;
|
|
let setData = {};
|
|
let setOption = {};
|
|
|
|
// 轉為百分比
|
|
datasetsPrimary = datasetsPrimary.map(value => {
|
|
return {
|
|
x: getMoment(value.x),
|
|
y: value.y === null ? null : value.y * 100
|
|
}
|
|
});
|
|
xDataPrimary = datasetsPrimary.map(i => i.x);
|
|
yDataPrimary = datasetsPrimary.map(i => i.y);
|
|
datasetsSecondary = datasetsSecondary.map(value => {
|
|
return {
|
|
x: getMoment(value.x),
|
|
y: value.y === null ? null : value.y * 100
|
|
}
|
|
});
|
|
xDataSecondary = datasetsSecondary.map(i => i.x);
|
|
yDataSecondary = datasetsSecondary.map(i => i.y);
|
|
|
|
setData = {
|
|
labels: xDataPrimary,
|
|
datasets: [
|
|
{
|
|
label: labelPrimary,
|
|
data: yDataPrimary,
|
|
backgroundColor: this.colorPrimary,
|
|
},
|
|
{
|
|
label: labelSecondary,
|
|
data: yDataSecondary,
|
|
backgroundColor: this.colorSecondary,
|
|
},
|
|
]
|
|
};
|
|
setOption = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
layout: {
|
|
padding: {
|
|
top: 16,
|
|
left: 8,
|
|
right: 8,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index', // 可顯示全部的 data label
|
|
},
|
|
plugins: {
|
|
legend: false, // 圖例
|
|
tooltip: {
|
|
// displayColors: false,
|
|
titleFont: {weight: 'normal'},
|
|
callbacks: {
|
|
title: function(context) {
|
|
return `${content.x}: ${context[0].label}`;
|
|
},
|
|
label: function(context) {
|
|
let value = context.parsed.y;
|
|
|
|
value = context.parsed.y === 0 ? 0 :
|
|
context.parsed.y === null ? "n/a" :
|
|
context.parsed.y.toFixed(2);
|
|
switch (context.datasetIndex) {
|
|
case 0: // Primary
|
|
return `${labelPrimary}: ${value}`;
|
|
case 1: // Secondary
|
|
return `${labelSecondary}: ${value}`;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
title: {
|
|
display: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: content.x,
|
|
color: '#334155',
|
|
font: {
|
|
size: 12,
|
|
lineHeight: 2
|
|
}
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#64748b',
|
|
callback: function(v, i, t) {
|
|
let label = xDataPrimary[i]
|
|
return getDateLabel(label, maxX, minX)
|
|
},
|
|
},
|
|
border: {
|
|
color: '#64748b',
|
|
},
|
|
grid: {
|
|
tickLength: 0, // 網格是否超過邊線
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true, // scale 包含 0
|
|
title: {
|
|
display: true,
|
|
text: content.y,
|
|
color: '#334155',
|
|
font: {
|
|
size: 12,
|
|
lineHeight: 2
|
|
},
|
|
},
|
|
ticks:{
|
|
color: '#64748b',
|
|
padding: 8,
|
|
},
|
|
grid: {
|
|
color: '#64748b',
|
|
},
|
|
border: {
|
|
display: false, // 隱藏左側多出來的線
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
return [setData, setOption]
|
|
},
|
|
/**
|
|
* 建立水平長條圖
|
|
* @param { object } chartData chart data
|
|
* @param { object } content titels
|
|
* @param { boolean } isSingle 單個或雙數 activity
|
|
* @param { string } xUnit x 軸單位 date | count
|
|
*/
|
|
getHorizontalBarChart(chartData, content, isSingle, xUnit) {
|
|
const maxY = chartData.y_axis.max;
|
|
const getSimpleTimeLabel = simpleTimeLabel;
|
|
const getFollowTimeLabel = followTimeLabel;
|
|
const labelPrimary = chartData.data[0].label;
|
|
const labelSecondary = chartData.data[1].label;
|
|
let setData = {};
|
|
let setOption = {};
|
|
|
|
// 大到小排序: Primary 為主
|
|
const datasetsPrimary = chartData.data[0].data;
|
|
const datasetsSecondary = chartData.data[1].data;
|
|
datasetsPrimary.sort((a, b) => b.y - a.y);
|
|
datasetsSecondary.sort((a, b) => {
|
|
// Find the index of a.x in data1
|
|
let indexA = datasetsPrimary.findIndex(item => item.x === a.x);
|
|
// Find the index of b.x in data1
|
|
let indexB = datasetsPrimary.findIndex(item => item.x === b.x);
|
|
|
|
// Compare the indexes
|
|
return indexA - indexB;
|
|
});
|
|
|
|
// 找出排序後，分別拉出 x, y Data
|
|
const xData = datasetsPrimary.map(item => item.x);
|
|
const yDataPrimary = datasetsPrimary.map(item => item.y);
|
|
const yDataSecondary = datasetsSecondary.map(item => item.y);
|
|
|
|
setData = {
|
|
labels: xData,
|
|
datasets: [
|
|
{
|
|
label: labelPrimary,
|
|
data: yDataPrimary,
|
|
backgroundColor: this.colorPrimary,
|
|
},
|
|
{
|
|
label: labelSecondary,
|
|
data: yDataSecondary,
|
|
backgroundColor: this.colorSecondary,
|
|
},
|
|
]
|
|
};
|
|
setOption = {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
layout: {
|
|
padding: {
|
|
top: 16,
|
|
left: 8,
|
|
right: 8,
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: false, // 圖例
|
|
tooltip: {
|
|
// displayColors: false,
|
|
mode: 'index', // 可顯示全部的 data label
|
|
titleFont: {weight: 'normal'},
|
|
callbacks: {}
|
|
},
|
|
title: {
|
|
display: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: content.x,
|
|
color: '#334155',
|
|
font: {
|
|
size: 12,
|
|
lineHeight: 2
|
|
}
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
maxRotation: 0, // 不旋轉 lable 0~50
|
|
color: '#64748b',
|
|
},
|
|
grid: {
|
|
color: '#64748b',
|
|
tickLength: 0, // 網格是否超過邊線
|
|
},
|
|
border: {
|
|
display:false,
|
|
},
|
|
},
|
|
y: {
|
|
beginAtZero: true, // scale 包含 0
|
|
type: 'category',
|
|
title: {
|
|
display: true,
|
|
text: content.y,
|
|
color: '#334155',
|
|
font: {
|
|
size: 12,
|
|
lineHeight: 2
|
|
},
|
|
},
|
|
ticks:{
|
|
color: '#64748b',
|
|
padding: 8,
|
|
},
|
|
grid: {
|
|
display:false,
|
|
color: '#64748b',
|
|
},
|
|
border: {
|
|
display: false, // 隱藏左側多出來的線
|
|
},
|
|
},
|
|
},
|
|
};
|
|
switch (xUnit) {
|
|
case 'date':
|
|
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}`;
|
|
}
|
|
};
|
|
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;
|
|
|
|
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;
|
|
}
|
|
if(isSingle) { // 設定一個活動的 y label、提示框文字
|
|
setOption.plugins.tooltip.callbacks.title = function(context) {
|
|
return `${content.y}: ${context[0].label}`;
|
|
};
|
|
setOption.scales.y.ticks.callback = function (value, index, ticks) {
|
|
let label = xData[index];
|
|
return label.length > 21 ? `${label.substring(0, 18)}...` : label
|
|
};
|
|
}else { // 設定「活動」到「活動」的 y label、提示框文字
|
|
setOption.plugins.tooltip.callbacks.title = function(context) {
|
|
return `${content.y}: ${context[0].label.replace(',', ' - ')}`
|
|
};
|
|
setOption.scales.y.ticks.callback = function (value, index, ticks) {
|
|
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
|
|
};
|
|
}
|
|
|
|
return [setData, setOption]
|
|
},
|
|
},
|
|
async created() {
|
|
this.isLoading = true; // moubeted 才停止 loading
|
|
|
|
const routeParams = this.$route.params;
|
|
const primaryType = routeParams.primaryType;
|
|
const secondaryType = routeParams.secondaryType;
|
|
const primaryId = routeParams.primaryId;
|
|
const secondaryId = routeParams.secondaryId;
|
|
const typeMap = {
|
|
'log': 'log_id',
|
|
'filter': 'filter_id'
|
|
};
|
|
const primaryTypeParam = typeMap[primaryType];
|
|
const secondaryTypeParam = typeMap[secondaryType];
|
|
const queryParams = [
|
|
{ [primaryTypeParam]: primaryId },
|
|
{ [secondaryTypeParam]: secondaryId }
|
|
];
|
|
|
|
// 取得 Compare Data
|
|
await this.compareStore.getCompare(queryParams);
|
|
this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.time.avg_process_time_by_task);
|
|
if(this.compareDashboardData.time.avg_waiting_time_by_edge !== null) {
|
|
this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.compareDashboardData.time.avg_waiting_time_by_edge);
|
|
};
|
|
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, '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');
|
|
} 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');
|
|
},
|
|
mounted() {
|
|
// 停止 loading
|
|
this.isLoading = false;
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.active {
|
|
@apply text-primary
|
|
}
|
|
</style>
|