Tweak charts
This commit is contained in:
parent
1d678e216e
commit
209235adec
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-card>
|
||||
<LineChart
|
||||
:chart-options="chartOptions"
|
||||
:chart-data="chartData"
|
||||
|
@ -11,7 +11,7 @@
|
|||
:width="width"
|
||||
:height="height"
|
||||
/>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -113,34 +113,31 @@ export default {
|
|||
datasets: [
|
||||
{
|
||||
label: 'Uso de banda',
|
||||
|
||||
data: this.stats.map(
|
||||
stat => (stat.avgUsage * stat.clients) / 1024 / 1024
|
||||
),
|
||||
|
||||
borderColor: this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.error
|
||||
: this.$vuetify.theme.themes.light.error,
|
||||
? this.$vuetify.theme.themes.dark.info
|
||||
: this.$vuetify.theme.themes.light.info,
|
||||
|
||||
backgroundColor: this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.error
|
||||
: this.$vuetify.theme.themes.light.error,
|
||||
backgroundColor: undefined,
|
||||
borderWidth,
|
||||
pointRadius,
|
||||
|
||||
cubicInterpolationMode: 'default',
|
||||
tension,
|
||||
yAxisID: 'y1'
|
||||
yAxisID: 'y1',
|
||||
fill: true
|
||||
},
|
||||
|
||||
{
|
||||
label: 'Clientes conectados',
|
||||
|
||||
data: this.stats.map(stat => stat.clients),
|
||||
|
||||
borderColor: this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.success
|
||||
: this.$vuetify.theme.themes.light.success,
|
||||
|
||||
backgroundColor: context => {
|
||||
borderColor: context => {
|
||||
const chart = context.chart
|
||||
const { ctx, chartArea } = chart
|
||||
|
||||
|
@ -149,7 +146,7 @@ export default {
|
|||
return null
|
||||
}
|
||||
let width, height, gradient
|
||||
const getGradient = (ctx, chartArea) => {
|
||||
|
||||
const chartWidth = chartArea.right - chartArea.left
|
||||
const chartHeight = chartArea.bottom - chartArea.top
|
||||
if (
|
||||
|
@ -196,15 +193,13 @@ export default {
|
|||
}
|
||||
|
||||
return gradient
|
||||
}
|
||||
|
||||
return getGradient(ctx, chartArea)
|
||||
},
|
||||
borderWidth: 0,
|
||||
borderWidth: 3,
|
||||
pointRadius,
|
||||
|
||||
cubicInterpolationMode: 'default',
|
||||
tension,
|
||||
|
||||
fill: true
|
||||
}
|
||||
]
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-card>
|
||||
<LineChart
|
||||
:chart-options="chartOptions"
|
||||
:chart-data="chartData"
|
||||
|
@ -11,7 +11,7 @@
|
|||
:width="width"
|
||||
:height="height"
|
||||
/>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -263,7 +263,7 @@ export default {
|
|||
return Math.floor(uptime / 3600)
|
||||
},
|
||||
load(connectedClients) {
|
||||
const MAX_LOAD = 60
|
||||
const MAX_LOAD = 80
|
||||
const load = Math.floor((connectedClients / MAX_LOAD) * 100)
|
||||
return load < 100 ? load : 100
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue
Block a user