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

refine only layout of code

Browse Source
This commit is contained in:
Cindy Chang
2024-06-03 12:04:35 +08:00
parent cc3fa5df8d
commit 9a5dd2d786
2 changed files with 97 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/module/setChartData.js
View File

@@ -26,8 +26,12 @@ export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) {
let e = 2; let e = 2;
let f = baseData[1].y; let f = baseData[1].y;
b = (e*d - a*d - f*a - f*c) / (e - c - a) b = (e*d - a*d - f*a - f*c) / (e - c - a)
if(isPercent) b = b >= 1 ? 1 : b <= 0 ? 0 : b; if(isPercent) {
else b = b >= yMax ? yMax : b <= yMin ? yMin : b; b = b >= 1 ? 1 : b <= 0 ? 0 : b;
}
else {
b = b >= yMax ? yMax : b <= yMin ? yMin : b;
}
// y 軸最大值 // y 軸最大值
let ma = 9; let ma = 9;
@@ -37,10 +41,16 @@ export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) {
let me = 11; let me = 11;
let mf; let mf;
mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc); mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc);
if(isPercent) mf = mf >= 1 ? 1 : mf <= 0 ? 0 : mf; if(isPercent) {
else mf = mf >= yMax ? yMax : mf <= yMin ? yMin : mf; mf = mf >= 1 ? 1 : mf <= 0 ? 0 : mf;
}
else {
mf = mf >= yMax ? yMax : mf <= yMin ? yMin : mf;
}
// 添加最小值 // 添加最小值
// The unshift() method of Array instances adds the specified elements to
// the beginning of an array and returns the new length of the array.
data.unshift({ data.unshift({
x: xMin, x: xMin,
y: b, y: b,
@@ -177,7 +187,9 @@ export function formatTime(seconds) {
result += `${remainingSeconds}s`; result += `${remainingSeconds}s`;
return result.trim(); // 去除最后一个空格 return result.trim(); // 去除最后一个空格
} else return null; } else {
return null;
}
} }
/** /**
* 只顯示最大的兩個單位 * 只顯示最大的兩個單位

106
src/views/Compare/Dashboard/index.vue
View File

@@ -8,13 +8,20 @@
<div> <div>
<p class="h1">Time Usage</p> <p class="h1">Time Usage</p>
<ul class="list-disc list-inside text-sm leading-5 pl-3"> <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> <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> </ul>
</div> </div>
<div> <div>
<p class="h1">Frequency</p> <p class="h1">Frequency</p>
<ul class="list-disc list-inside text-sm leading-5 pl-3"> <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> <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> </ul>
</div> </div>
</section> </section>
@@ -22,17 +29,28 @@
<!-- graph --> <!-- graph -->
<article class="w-full h-full pr-2 mr-2 overflow-x-hidden overflow-y-auto scrollbar scroll-smooth"> <article class="w-full h-full pr-2 mr-2 overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
<section> <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> <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"> <ul class="list-disc list-inside px-4 pl-7 text-sm">
<li id="cycleTime" class="scroll-smooth"> <li id="cycleTime" class="scroll-smooth">
<span class="inline-block py-4">Cycle Efficiency</span> <span class="inline-block py-4">Cycle Efficiency</span>
<ul> <ul>
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"> <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.avgCycleTime.title }}</span> <span class="block font-bold text-sm leading-loose text-center my-2">
{{ contentData.avgCycleTime.title }}
</span>
<Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" /> <Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
</li> </li>
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded"> <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 class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgCycleEfficiency">info</span></span> <span class="block font-bold text-sm leading-loose text-center my-2">
{{ contentData.avgCycleEfficiency.title }}
<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
v-tooltip.bottom="tooltip.avgCycleEfficiency">
info
</span></span>
<Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" /> <Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
</li> </li>
</ul> </ul>
@@ -41,12 +59,17 @@
<span class="inline-block py-4 text-sm">Processing Time</span> <span class="inline-block py-4 text-sm">Processing Time</span>
<ul> <ul>
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"> <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> <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" /> <Chart type="line" :data="avgProcessTimeData" :options="avgProcessTimeOptions" class="h-96" />
</li> </li>
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded"> <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> <span class="block font-bold text-sm leading-loose text-center my-2">
<Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-[500px]" :style="{ height: avgProcessTimeByTaskHeight }"/> {{ contentData.avgProcessTimeByTask.title }}
</span>
<Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-[500px]"
:style="{ height: avgProcessTimeByTaskHeight }"/>
</li> </li>
</ul> </ul>
</li> </li>
@@ -54,13 +77,22 @@
<span class="inline-block py-4 text-sm">Waiting Time</span> <span class="inline-block py-4 text-sm">Waiting Time</span>
<ul> <ul>
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded"> <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 class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgWaitingTime">info</span></span> <span class="block font-bold text-sm leading-loose text-center my-2">
{{ contentData.avgWaitingTime.title }}
<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
v-tooltip.bottom="tooltip.avgWaitingTime">
info
</span></span>
<Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" /> <Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" />
</li> </li>
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded"> <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 class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">info</span></span> <span class="block font-bold text-sm leading-loose text-center my-2">
{{ contentData.avgWaitingTimeByEdge.title }}
<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">info</span></span>
<div> <div>
<Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" /> <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"> <div v-else class="h-96 bg-neutral-100 m-4 flex">
<p class="h2 text-danger m-auto">No waiting time.</p> <p class="h2 text-danger m-auto">No waiting time.</p>
</div> </div>
@@ -71,7 +103,11 @@
</ul> </ul>
</section> </section>
<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> <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"> <ul class="list-disc list-inside px-4 pl-7 text-sm">
<li id="cases"> <li id="cases">
<span class="inline-block py-4">Number of Cases</span> <span class="inline-block py-4">Number of Cases</span>
@@ -81,8 +117,11 @@
<Chart type="line" :data="freqData" :options="freqOptions" class="h-96" /> <Chart type="line" :data="freqData" :options="freqOptions" class="h-96" />
</li> </li>
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded"> <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> <span class="block font-bold text-sm leading-loose text-center my-2">
<Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions" :style="{ height: casesByTaskHeight }" class="h-[500px]"/> {{ contentData.casesByTask.title }}
</span>
<Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions" :style="{ height: casesByTaskHeight }"
class="h-[500px]"/>
</li> </li>
</ul> </ul>
</li> </li>
@@ -92,8 +131,11 @@
<!-- Sidebar: State --> <!-- Sidebar: State -->
<div class="bg-transparent z-10"> <div class="bg-transparent z-10">
<ul class="flex flex-col justify-center items-center"> <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"> <li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9
<span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']"> 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 info
</span> </span>
</li> </li>
@@ -243,8 +285,10 @@ export default {
switch (yUnit) { switch (yUnit) {
case 'date': 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); datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false,
datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min); 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); xData = this.xLabelsData(chartData.x_axis);
break; break;
case 'count': // 次數 10 個點 case 'count': // 次數 10 個點
@@ -750,18 +794,28 @@ export default {
}; };
this.casesByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.freq.cases_by_task); this.casesByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.freq.cases_by_task);
// create chart // create chart
[this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_cycle_time, this.contentData.avgCycleTime, 'date'); [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(
[this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency); this.compareDashboardData.time.avg_cycle_time, this.contentData.avgCycleTime, 'date');
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime, 'date'); [this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date'); this.compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date'); [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) { 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'); [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(
this.compareDashboardData.time.avg_waiting_time_by_edge,
this.contentData.avgWaitingTimeByEdge, false, 'date');
} else { } else {
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null] [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
} }
[this.freqData, this.freqOptions] = this.getLineChart(this.compareDashboardData.freq.cases, this.contentData.freq, 'count'); [this.freqData, this.freqOptions] = this.getLineChart(
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true, 'count'); 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() { mounted() {
// 停止 loading // 停止 loading