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,62 +146,60 @@ 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 (
|
||||
gradient === null ||
|
||||
width !== chartWidth ||
|
||||
height !== chartHeight
|
||||
) {
|
||||
// Create the gradient because this is either the first render
|
||||
// or the size of the chart has changed
|
||||
width = chartWidth
|
||||
height = chartHeight
|
||||
gradient = ctx.createLinearGradient(
|
||||
0,
|
||||
chartArea.bottom,
|
||||
0,
|
||||
chartArea.top
|
||||
)
|
||||
gradient.addColorStop(
|
||||
0,
|
||||
this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.success
|
||||
: this.$vuetify.theme.themes.light.success
|
||||
)
|
||||
|
||||
gradient.addColorStop(
|
||||
0.4,
|
||||
this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.success
|
||||
: this.$vuetify.theme.themes.light.success
|
||||
)
|
||||
const chartWidth = chartArea.right - chartArea.left
|
||||
const chartHeight = chartArea.bottom - chartArea.top
|
||||
if (
|
||||
gradient === null ||
|
||||
width !== chartWidth ||
|
||||
height !== chartHeight
|
||||
) {
|
||||
// Create the gradient because this is either the first render
|
||||
// or the size of the chart has changed
|
||||
width = chartWidth
|
||||
height = chartHeight
|
||||
gradient = ctx.createLinearGradient(
|
||||
0,
|
||||
chartArea.bottom,
|
||||
0,
|
||||
chartArea.top
|
||||
)
|
||||
gradient.addColorStop(
|
||||
0,
|
||||
this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.success
|
||||
: this.$vuetify.theme.themes.light.success
|
||||
)
|
||||
|
||||
gradient.addColorStop(
|
||||
0.7,
|
||||
this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.warning
|
||||
: this.$vuetify.theme.themes.light.warning
|
||||
)
|
||||
gradient.addColorStop(
|
||||
0.9,
|
||||
this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.error
|
||||
: this.$vuetify.theme.themes.light.error
|
||||
)
|
||||
}
|
||||
gradient.addColorStop(
|
||||
0.4,
|
||||
this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.success
|
||||
: this.$vuetify.theme.themes.light.success
|
||||
)
|
||||
|
||||
return gradient
|
||||
gradient.addColorStop(
|
||||
0.7,
|
||||
this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.warning
|
||||
: this.$vuetify.theme.themes.light.warning
|
||||
)
|
||||
gradient.addColorStop(
|
||||
0.9,
|
||||
this.$vuetify.theme.isDark
|
||||
? this.$vuetify.theme.themes.dark.error
|
||||
: this.$vuetify.theme.themes.light.error
|
||||
)
|
||||
}
|
||||
|
||||
return getGradient(ctx, chartArea)
|
||||
return gradient
|
||||
},
|
||||
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