Charts OK
This commit is contained in:
parent
4424760e35
commit
4ec375e26d
68
web/src/components/PrinterCounterChart.vue
Normal file
68
web/src/components/PrinterCounterChart.vue
Normal file
|
@ -0,0 +1,68 @@
|
||||||
|
<template>
|
||||||
|
<v-card>
|
||||||
|
<apexchart
|
||||||
|
type="line"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="chartSeries"
|
||||||
|
width="100%"
|
||||||
|
height="300px"
|
||||||
|
/>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
status: {
|
||||||
|
timestamp: Date
|
||||||
|
counter: number
|
||||||
|
}[]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const chartOptions = ref({
|
||||||
|
chart: {
|
||||||
|
animations: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
|
||||||
|
type: 'line',
|
||||||
|
|
||||||
|
toolbar: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
colors: ['#000000'],
|
||||||
|
|
||||||
|
stroke: {
|
||||||
|
curve: 'smooth',
|
||||||
|
width: 4
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
row: {
|
||||||
|
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
type: 'datetime'
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Contador'
|
||||||
|
},
|
||||||
|
tickAmount: 5
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const chartSeries = ref([
|
||||||
|
{
|
||||||
|
name: 'Contador',
|
||||||
|
data: props.status.map(s => ({
|
||||||
|
x: new Date(s.timestamp).getTime(),
|
||||||
|
y: s.counter
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
])
|
||||||
|
</script>
|
|
@ -20,7 +20,6 @@ const props = defineProps<{
|
||||||
tonerCyanLevel: number
|
tonerCyanLevel: number
|
||||||
tonerMagentaLevel: number
|
tonerMagentaLevel: number
|
||||||
tonerYellowLevel: number
|
tonerYellowLevel: number
|
||||||
counter: number
|
|
||||||
}[]
|
}[]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
@ -29,10 +28,8 @@ const chartOptions = ref({
|
||||||
animations: {
|
animations: {
|
||||||
enabled: false
|
enabled: false
|
||||||
},
|
},
|
||||||
// id: 'chart',
|
|
||||||
type: 'line',
|
|
||||||
|
|
||||||
title: 'Toner',
|
type: 'line',
|
||||||
|
|
||||||
toolbar: {
|
toolbar: {
|
||||||
show: true
|
show: true
|
||||||
|
@ -64,34 +61,55 @@ const chartOptions = ref({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const chartSeries = ref([
|
const tonerBlackLevelSeries = {
|
||||||
{
|
name: 'Preto',
|
||||||
name: 'Preto',
|
data: props.status.map(s => ({
|
||||||
data: props.status.map(s => ({
|
x: new Date(s.timestamp).getTime(),
|
||||||
x: new Date(s.timestamp).getTime(),
|
y: s.tonerBlackLevel
|
||||||
y: s.tonerBlackLevel
|
}))
|
||||||
}))
|
}
|
||||||
},
|
|
||||||
{
|
const tonerCyanLevelSeries = {
|
||||||
name: 'Ciano',
|
name: 'Ciano',
|
||||||
data: props.status.map(s => ({
|
data: props.status.map(s => ({
|
||||||
x: new Date(s.timestamp).getTime(),
|
x: new Date(s.timestamp).getTime(),
|
||||||
y: s.tonerCyanLevel
|
y: s.tonerCyanLevel
|
||||||
}))
|
}))
|
||||||
},
|
}
|
||||||
{
|
|
||||||
name: 'Magenta',
|
const tonerMagentaLevelSeries = {
|
||||||
data: props.status.map(s => ({
|
name: 'Magenta',
|
||||||
x: new Date(s.timestamp).getTime(),
|
data: props.status.map(s => ({
|
||||||
y: s.tonerMagentaLevel
|
x: new Date(s.timestamp).getTime(),
|
||||||
}))
|
y: s.tonerMagentaLevel
|
||||||
},
|
}))
|
||||||
{
|
}
|
||||||
name: 'Amarelo',
|
|
||||||
data: props.status.map(s => ({
|
const tonerYellowLevelSeries = {
|
||||||
x: new Date(s.timestamp).getTime(),
|
name: 'Amarelo',
|
||||||
y: s.tonerYellowLevel
|
data: props.status.map(s => ({
|
||||||
}))
|
x: new Date(s.timestamp).getTime(),
|
||||||
}
|
y: s.tonerYellowLevel
|
||||||
])
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const series = []
|
||||||
|
|
||||||
|
if (props.status[0].tonerBlackLevel) {
|
||||||
|
series.push(tonerBlackLevelSeries)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.status[0].tonerCyanLevel) {
|
||||||
|
series.push(tonerCyanLevelSeries)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.status[0].tonerMagentaLevel) {
|
||||||
|
series.push(tonerMagentaLevelSeries)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.status[0].tonerYellowLevel) {
|
||||||
|
series.push(tonerYellowLevelSeries)
|
||||||
|
}
|
||||||
|
|
||||||
|
const chartSeries = ref(series)
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,8 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container>
|
<v-container>
|
||||||
<printer-card class="mb-2" v-if="printer" :printer="printer" />
|
<v-row>
|
||||||
|
<v-col>
|
||||||
<printer-toner-chart v-if="printer" :status="printer?.status" />
|
<printer-card class="mb-2" v-if="printer" :printer="printer" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<printer-toner-chart v-if="printer" :status="printer?.status" />
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<printer-counter-chart v-if="printer" :status="printer?.status" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -12,6 +22,7 @@ import { useRoute } from 'vue-router'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import PrinterCard from '@/components/PrinterCard.vue'
|
import PrinterCard from '@/components/PrinterCard.vue'
|
||||||
import PrinterTonerChart from '@/components/PrinterTonerChart.vue'
|
import PrinterTonerChart from '@/components/PrinterTonerChart.vue'
|
||||||
|
import PrinterCounterChart from '@/components/PrinterCounterChart.vue'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user