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

WIP same as the previoius commit. Tried to extract out an independent vue component to prevent shared primevue option.

Browse Source 
X axis is with bug now.
This commit is contained in:
Cindy Chang
2024-06-13 13:35:58 +08:00
parent 310c416fd7
commit f6989c4759
6 changed files with 330 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -162,163 +162,13 @@ import { simpleTimeLabel, followTimeLabel, dateLabel,
getYTicksByIndex,
} from '@/module/timeLabel.js';
import i18next from '@/i18n/i18n';
import {
knownLayoutChartOption,
knownScaleLineChartOptions,
knownScaleHorizontalChartOptions,
knownScaleBarChartOptions,
} from "@/constants/constants.js";
const knownLayoutChartOption = {
padding: {
top: 16,
left: 8,
right: 8,
}
};
const knownScaleLineChartOptions = {
x: {
type: 'time',
title: {
display: true,
color: '#334155',
font: {
size: 12,
lineHeight: 2
}
},
time: {
displayFormats: {
second: 'h:mm:ss', // ex: 1:11:11
minute: 'M/d h:mm', // ex: 1/1 1:11
hour: 'M/d h:mm', // ex: 1/1 1:11
day: 'M/d h', // ex: 1/1 1
month: 'y/M/d', // ex: 1911/1/1
},
},
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,
color: '#334155',
font: {
size: 12,
lineHeight: 2
},
},
ticks:{
color: '#64748b',
padding: 8,
},
grid: {
color: '#64748b',
},
border: {
display: false, // 隱藏左側多出來的線
},
},
};
const knownScaleHorizontalChartOptions = {
x: {
title: {
display: true,
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,
color: '#334155',
font: {
size: 12,
lineHeight: 2
},
},
ticks:{
color: '#64748b',
padding: 8,
},
grid: {
display:false,
color: '#64748b',
},
border: {
display: false, // 隱藏左側多出來的線
},
},
};
const knownScaleBarChartOptions = {
x: {
title: {
display: true,
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,
color: '#334155',
font: {
size: 12,
lineHeight: 2
},
},
ticks:{
color: '#64748b',
padding: 8,
},
grid: {
display:false,
color: '#64748b',
},
border: {
display: false, // 隱藏左側多出來的線
},
},
};
export default {
setup() {