puniko/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore(client): Design tweaks

Browse source
This commit is contained in:
syuilo 2020-08-10 12:15:58 +09:00
parent 7cde8cfbf2
commit 76389ad619
1 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/client/pages/instance/index.queue-chart.vue
View file

@ -59,35 +59,34 @@ export default Vue.extend({
Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg'); Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
this.chart = new Chart(this.$refs.chart, { this.chart = new Chart(this.$refs.chart, {
type: 'line', type: 'bar',
data: { data: {
labels: [], labels: [],
datasets: [{ datasets: [{
label: 'Process', label: 'Process',
pointRadius: 0, pointRadius: 0,
lineTension: 0, lineTension: 0,
borderWidth: 2, borderWidth: 0,
borderColor: '#00E396', backgroundColor: '#00E396',
backgroundColor: alpha('#00E396', 0.1),
data: [] data: []
}, { }, {
label: 'Active', label: 'Active',
pointRadius: 0, pointRadius: 0,
lineTension: 0, lineTension: 0,
borderWidth: 2, borderWidth: 0,
borderColor: '#00BCD4', backgroundColor: '#00BCD4',
backgroundColor: alpha('#00BCD4', 0.1),
data: [] data: []
}, { }, {
label: 'Waiting', label: 'Waiting',
pointRadius: 0, pointRadius: 0,
lineTension: 0, lineTension: 0,
borderWidth: 2, borderWidth: 0,
borderColor: '#FFB300', backgroundColor: '#FFB300',
backgroundColor: alpha('#FFB300', 0.1),
data: [] data: []
}, { }, {
label: 'Delayed', label: 'Delayed',
order: -1,
type: 'line',
pointRadius: 0, pointRadius: 0,
lineTension: 0, lineTension: 0,
borderWidth: 2, borderWidth: 2,
@ -115,6 +114,7 @@ export default Vue.extend({
}, },
scales: { scales: {
xAxes: [{ xAxes: [{
stacked: true,
gridLines: { gridLines: {
display: false, display: false,
color: gridColor, color: gridColor,
@ -125,6 +125,7 @@ export default Vue.extend({
} }
}], }],
yAxes: [{ yAxes: [{
stacked: true,
position: 'right', position: 'right',
gridLines: { gridLines: {
display: true, display: true,
@ -163,7 +164,7 @@ export default Vue.extend({
this.chart.data.datasets[1].data.push(stats[this.domain].active); this.chart.data.datasets[1].data.push(stats[this.domain].active);
this.chart.data.datasets[2].data.push(stats[this.domain].waiting); this.chart.data.datasets[2].data.push(stats[this.domain].waiting);
this.chart.data.datasets[3].data.push(stats[this.domain].delayed); this.chart.data.datasets[3].data.push(stats[this.domain].delayed);
if (this.chart.data.datasets[0].data.length > 200) { if (this.chart.data.datasets[0].data.length > 100) {
this.chart.data.labels.shift(); this.chart.data.labels.shift();
this.chart.data.datasets[0].data.shift(); this.chart.data.datasets[0].data.shift();
this.chart.data.datasets[1].data.shift(); this.chart.data.datasets[1].data.shift();