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

Conformance: Have activity fix chart Date.

Browse Source
This commit is contained in:
chiayin
2023-07-26 11:41:07 +08:00
parent f2df01e855
commit 53038ab2c0
2 changed files with 61 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/Discover/Conformance/ConformanceResults.vue
View File

@@ -20,16 +20,22 @@
<!-- chart -->
<div class="flex gap-4">
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
<p class="h2 pl-2 flex justify-between items-center">
<span>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
<span class="text-2xl">{{ data.charts.rate.rate }}%</span>
<p class="p-2 flex justify-between items-center">
<div>
<span class="block text-sm font-bold mb-2">Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
<small class="text-neutral-700 font-normal block">{{ data.charts.rate.xMin }} ~ {{ data.charts.rate.xMax }}</small>
</div>
<span class="text-2xl font-bold">{{ data.charts.rate.rate }}%</span>
</p>
<Chart type="line" :data="rateChartData" :options="rateChartOptions" class=""/>
</div>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
<p class="h2 pl-2 flex justify-between items-center">
<span>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
<span class="text-2xl"><span class="text-cfm-primary">{{ data.charts.cases.conforming }}</span>&nbsp/&nbsp{{ data.charts.cases.total }}</span>
<p class="p-2 flex justify-between items-center">
<div>
<span class="block text-sm font-bold mb-2">Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
<small class="text-neutral-700 font-normal block">{{ data.charts.cases.xMin }} ~ {{ data.charts.cases.xMax }}</small>
</div>
<span class="text-2xl font-bold"><span class="text-cfm-primary">{{ data.charts.cases.conforming }}</span>&nbsp/&nbsp{{ data.charts.cases.total }}</span>
</p>
<Chart type="bar" :data="casesChartData" :options="casesChartOptions" class=""/>
</div>
@@ -255,6 +261,8 @@ export default {
rate: {
rate: rate,
data: setLineChartData(data.charts.rate.data, data.charts.rate.x_axis.max, data.charts.rate.x_axis.min),
xMax: getMoment(data.charts.rate.x_axis.max).format('YYYY/M/D'),
xMin: getMoment(data.charts.rate.x_axis.min).format('YYYY/M/D'),
},
cases: {
conforming: getNumberLabel(data.counts.conforming),
@@ -262,7 +270,9 @@ export default {
data: {
conforming: setBarChartData(data.charts.cases.data.filter(item => item.label === 'conforming').map(item => item.data)[0]),
not_conforming: setBarChartData(data.charts.cases.data.filter(item => item.label === 'not-conforming').map(item => item.data)[0]),
}
},
xMax: getMoment(data.charts.cases.x_axis.max).format('YYYY/M/D'),
xMin: getMoment(data.charts.cases.x_axis.min).format('YYYY/M/D'),
},
fitness: getNumberLabel(data.charts.fitness),
},
@@ -292,6 +302,10 @@ export default {
this.setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, data.charts.cases.x_axis.max, data.charts.cases.x_axis.min); // 建立圖表 Cases Chart.js
return result;
},
/**
* set Rate Chart Data
* @param {object} data new rate chart data
*/
setRateChartData(data){
this.rateChartData = {
labels:[],
@@ -313,6 +327,13 @@ export default {
responsive: true,
maintainAspectRatio: false,
aspectRatio: 0.6,
layout: {
padding: {
top: 16,
left: 8,
right: 8,
}
},
plugins: {
legend: false, // 圖例
tooltip: {
@@ -330,13 +351,14 @@ export default {
// }
// },
ticks: {
maxRotation: 0, // 不旋轉 lable 0~50
color: '#334155',
source: 'data',
align: 'inner', // label 在軸線的位置
callback: function(value, index, values) {
return (index === 0 || index === values.length - 1) ? getMoment(value).format('YYYY/M/D') : null;
},
display: false,
// maxRotation: 0, // 不旋轉 lable 0~50
// color: '#334155',
// source: 'data',
// align: 'inner', // label 在軸線的位置
// callback: function(value, index, values) {
// return (index === 0 || index === values.length - 1) ? getMoment(value).format('YYYY/M/D') : null;
// },
},
grid: {
display: false, // 隱藏 x 軸網格
@@ -368,6 +390,13 @@ export default {
},
};
},
/**
* set Cases Chart Data
* @param {object} data new cases chart conforming data
* @param {object} data new cases chart not conforming data
* @param {strin} data new cases chart xMax
* @param {string} data new cases chart xMin
*/
setCasesChartData(conformingData, notConformingData, xMax, xMin){
this.casesChartData = {
datasets: [
@@ -389,6 +418,13 @@ export default {
responsive: true,
maintainAspectRatio: false,
aspectRatio: 0.8,
layout: {
padding: {
top: 16,
left: 8,
right: 8,
}
},
plugins: {
tooltips: {
mode: 'index',
@@ -400,15 +436,16 @@ export default {
x: {
stacked: true,
ticks: {
autoSkip: false,
maxRotation: 0, // 不旋轉 lable 0~50
color: '#334155',
align: 'center', // label 在軸線的位置
callback: function(value, index, values) {
if(index === 0) return getMoment(xMin).format('yyyy/M/D');
else if(index === values.length - 1) return getMoment(xMax).format('yyyy/M/D');
else return null;
},
display: false,
// autoSkip: false,
// maxRotation: 0, // 不旋轉 lable 0~50
// color: '#334155',
// align: 'center', // label 在軸線的位置
// callback: function(value, index, values) {
// if(index === 0) return getMoment(xMin).format('yyyy/M/D');
// else if(index === values.length - 1) return getMoment(xMax).format('yyyy/M/D');
// else return null;
// },
},
grid: {
display: false, // 隱藏 x 軸網格