feat: Compare bar layout done.
This commit is contained in:
chiayin
643
src/views/Compare/Dashboard/index.vue
Normal file
643
src/views/Compare/Dashboard/index.vue
Normal file
@@ -0,0 +1,643 @@
|
||||
<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="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">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 overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
|
||||
<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 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">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">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>
|
||||
<Chart type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
<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>
|
||||
</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';
|
||||
import { compareDashboardData } from '@/views/Compare/Dashboard/data.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 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',
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
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'
|
||||
},
|
||||
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);
|
||||
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 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;
|
||||
|
||||
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)}`;
|
||||
},
|
||||
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: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
min: minX,
|
||||
max: maxX,
|
||||
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',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true, // scale 包含 0
|
||||
title: {
|
||||
display: true,
|
||||
text: content.y,
|
||||
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, // 隱藏左側多出來的線
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return [setData, setOption]
|
||||
},
|
||||
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',
|
||||
},
|
||||
|
||||
},
|
||||
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]
|
||||
},
|
||||
getHorizontalBarChart(chartData, content, isSingle) {
|
||||
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: {
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
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',
|
||||
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: content.y,
|
||||
color: '#334155',
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
},
|
||||
},
|
||||
ticks:{
|
||||
color: '#64748b',
|
||||
padding: 8,
|
||||
},
|
||||
grid: {
|
||||
display:false,
|
||||
color: '#64748b',
|
||||
},
|
||||
border: {
|
||||
display: false, // 隱藏左側多出來的線
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
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
|
||||
// log: 695977238 ; filter: 746150051
|
||||
// [{"log_id":695977238},{"filter_id":746150051}]
|
||||
// 要判斷資料有無 null,問貓貓是哪個階層 null?
|
||||
// Activity 會有 0, null 的組合嗎?
|
||||
|
||||
// const routeParams = this.$route.params;
|
||||
// console.log(routeParams);
|
||||
// let id = routeParams.fileId;
|
||||
// let type = routeParams.type;
|
||||
|
||||
// // 取得 Performance Data
|
||||
// await this.performanceStore.getPerformance(type, id);
|
||||
this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(compareDashboardData.time.avg_process_time_by_task);
|
||||
this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(compareDashboardData.time.avg_waiting_time_by_edge);
|
||||
this.casesByTaskHeight = await this.getHorizontalBarHeight(compareDashboardData.freq.cases_by_task);
|
||||
// create chart
|
||||
[this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
|
||||
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime);
|
||||
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true);
|
||||
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime);
|
||||
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false);
|
||||
[this.freqData, this.freqOptions] = this.getLineChart(compareDashboardData.freq.cases, this.contentData.freq);
|
||||
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true);
|
||||
// 停止 loading
|
||||
this.isLoading = false;
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.active {
|
||||
@apply text-primary
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user