imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Performance all chart done.

Browse Source
This commit is contained in:
chiayin
2024-02-05 15:50:33 +08:00
parent 5063d49794
commit c811baefa6
2 changed files with 149 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/views/Discover/Performance/index.vue
View File

@@ -1,7 +1,7 @@
<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">
<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">
@@ -20,7 +20,7 @@
</section>
</aside>
<!-- graph -->
<article class="w-full h-full">
<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>
@@ -28,35 +28,36 @@
<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">
<ul>
<li class="bg-neutral-10 mb-4">
<Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
</div>
<div class="card bg-neutral-10">
</li>
<li class="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>
</ul>
</li>
<li id="processingTime">
<span class="inline-block py-4">Processing Time</span>
<div class="">
<div class="card bg-neutral-10 ">
<ul>
<li class="bg-neutral-10 mb-4">
<Chart type="line" :data="avgProcessTimeData" :options="avgProcessTimeOptions" class="h-96" />
</li>
<li class="bg-neutral-10">
<Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" :height="horizontalBar"/>
</div>
</div>
</li>
</ul>
</li>
<li id="waitingTime">
<span class="inline-block py-4">Waiting Time</span>
<div class="">
</div>
<ul>
<li class="bg-neutral-10 mb-4">
<Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" />
</li>
<li class="bg-neutral-10">
<Chart type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :height="horizontalBar"/>
</li>
</ul>
</li>
</ul>
</section>
@@ -65,8 +66,14 @@
<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>
<ul>
<li class="bg-neutral-10 mb-4">
<Chart type="line" :data="freqData" :options="freqOptions" class="h-96" />
</li>
<li class="bg-neutral-10">
<Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions" :height="horizontalBar"/>
</li>
</ul>
</li>
</ul>
</section>
@@ -108,13 +115,33 @@ export default {
// {tagId: '#trace', label: 'Number of Trace'},
// {tagId: '#resource', label: 'Resource'},
],
contentData: {
avgCycleTime: {title: 'Average Cycle Time', x: 'Date', y: 'Cycle time'},
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: 'Count', 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
horizontalBar: 500,
data: {
@@ -143,24 +170,25 @@ export default {
}
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)
getLineChart(chartData, content) {
let datasets = setLineChartData(chartData.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 setData = {};
let setOption = {};
const getMoment = (time)=> {
return this.$moment(time).format('YYYY/M/D hh:mm:ss')
};
const getSimpleTimeLabel = simpleTimeLabel;
const getFollowTimeLabel = followTimeLabel;
this.avgCycleTimeData = {
setData = {
labels: xData,
datasets: [
{
label: 'Average Cycle Time',
label: content.title,
data: datasets,
fill: false,
tension: 0, // 貝茲曲線張力
@@ -168,7 +196,7 @@ export default {
}
]
};
this.avgCycleTimeOptions = {
setOption = {
responsive: true,
maintainAspectRatio: false,
layout: {
@@ -185,16 +213,16 @@ export default {
titleFont: {weight: 'normal'},
callbacks: {
title: function(context) {
return `Date: ${getMoment(context[0].parsed.x)}`;
return `${content.x}: ${getMoment(context[0].parsed.x)}`;
},
label: function(context) {
return `Cycle time: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
}
},
},
title: {
display: true,
text: 'Average Cycle Time',
text: content.title,
color: '#334155',
padding: {
bottom: 16
@@ -213,7 +241,7 @@ export default {
max: maxX,
title: {
display: true,
text: 'Date',
text: content.x,
color: '#334155',
font: {
size: 12,
@@ -239,7 +267,7 @@ export default {
beginAtZero: true, // scale 包含 0
title: {
display: true,
text: 'Cycle time',
text: content.y,
color: '#334155',
font: {
size: 12,
@@ -262,16 +290,19 @@ export default {
},
},
};
return [setData, setOption]
},
getAvgCycleEfficiency() {
const data = this.data.time.avg_cycle_efficiency;
const maxX = data.x_axis.max;
const minX = data.x_axis.min;
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 datasets = data.data;
let datasets = chartData.data;
let xData;
let yData;
let setData = {};
let setOption = {};
datasets = datasets.map(value => {
return {
@@ -282,17 +313,17 @@ export default {
xData = datasets.map(i => i.x);
yData = datasets.map(i => i.y)
this.avgCycleEfficiencyData = {
setData = {
labels: xData,
datasets: [
{
label: 'Cycle Efficiency',
label: content.title,
data: yData,
backgroundColor: '#0099FF'
}
]
};
this.avgCycleEfficiencyOptions = {
setOption = {
responsive: true,
maintainAspectRatio: false,
layout: {
@@ -309,16 +340,16 @@ export default {
titleFont: {weight: 'normal'},
callbacks: {
title: function(context) {
return `Date: ${context[0].label}`;
return `${content.x}: ${context[0].label}`;
},
label: function(context) {
return `Cycle efficiency(%): ${context.parsed.y.toFixed(2)}`;
return `${content.y}: ${context.parsed.y.toFixed(2)}`;
}
},
},
title: {
display: true,
text: 'Cycle Efficiency',
text: content.title,
color: '#334155',
padding: {
bottom: 16
@@ -334,7 +365,7 @@ export default {
x: {
title: {
display: true,
text: 'Date',
text: content.x,
color: '#334155',
font: {
size: 12,
@@ -358,7 +389,7 @@ export default {
beginAtZero: true, // scale 包含 0
title: {
display: true,
text: 'Cycle efficiency(%)',
text: content.y,
color: '#334155',
font: {
size: 12,
@@ -378,35 +409,35 @@ export default {
},
},
};
return [setData, setOption]
},
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;
getHorizontalBarChart(chartData, content, isSingle) {
const maxY = chartData.y_axis.max;
const getSimpleTimeLabel = simpleTimeLabel;
const getFollowTimeLabel = followTimeLabel;
let setData = {};
let setOption = {};
// 大到小排序
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;
chartData.data.sort((a, b) => b.y - a.y);
const xData = chartData.data.map(item => item.x);
const yData = chartData.data.map(item => item.y);
const totalBars = chartData.data.length;
if(totalBars > 10) this.horizontalBar = (totalBars - 10) * 20 + this.horizontalBarHeight;
this.avgProcessTimeByTaskData = {
setData = {
labels: xData,
datasets: [
{
label: 'Average Processing Time by Activity',
label: content.title,
data: yData,
backgroundColor: '#0099FF',
}
]
};
this.avgProcessTimeByTaskOptions = {
setOption = {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
@@ -423,19 +454,14 @@ export default {
displayColors: false,
titleFont: {weight: 'normal'},
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)}`;
return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
}
},
},
title: {
display: true,
text: 'Average Processing Time by Activity',
text: content.title,
color: '#334155',
padding: {
bottom: 16
@@ -451,7 +477,7 @@ export default {
x: {
title: {
display: true,
text: 'Processing time',
text: content.x,
color: '#334155',
font: {
size: 12,
@@ -478,7 +504,7 @@ export default {
type: 'category',
title: {
display: true,
text: 'Activity',
text: content.y,
color: '#334155',
font: {
size: 12,
@@ -488,18 +514,6 @@ export default {
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,
@@ -511,19 +525,50 @@ export default {
},
},
};
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;
// 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);
this.getAvgCycleTime();
this.getAvgCycleEfficiency();
this.getAvgProcessTimeByTask();
// 取得 Performance Data
await this.performanceStore.getPerformance(type, id);
console.log(this.performanceData);
[this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.performanceData.time.avg_cycle_time, this.contentData.avgCycleTime);
[this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.performanceData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.performanceData.time.avg_process_time, this.contentData.avgProcessTime);
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true);
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime);
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, true);
[this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq);
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task, this.contentData.casesByTask, true);
this.isLoading = false;
}