Charts OK

web/src/components/PrinterCounterChart.vue

@@ -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>

web/src/components/PrinterTonerChart.vue

@@ -20,7 +20,6 @@ const props = defineProps<{
     tonerCyanLevel: number
     tonerMagentaLevel: number
     tonerYellowLevel: number
-    counter: number
   }[]
 }>()
 
@@ -29,10 +28,8 @@ const chartOptions = ref({
     animations: {
       enabled: false
     },
-    // id: 'chart',
-    type: 'line',
 
-    title: 'Toner',
+    type: 'line',
 
     toolbar: {
       show: true
@@ -64,34 +61,55 @@ const chartOptions = ref({
   }
 })
 
-const chartSeries = ref([
-  {
+const tonerBlackLevelSeries = {
   name: 'Preto',
   data: props.status.map(s => ({
     x: new Date(s.timestamp).getTime(),
     y: s.tonerBlackLevel
   }))
-  },
-  {
+}
+
+const tonerCyanLevelSeries = {
   name: 'Ciano',
   data: props.status.map(s => ({
     x: new Date(s.timestamp).getTime(),
     y: s.tonerCyanLevel
   }))
-  },
-  {
+}
+
+const tonerMagentaLevelSeries = {
   name: 'Magenta',
   data: props.status.map(s => ({
     x: new Date(s.timestamp).getTime(),
     y: s.tonerMagentaLevel
   }))
-  },
-  {
+}
+
+const tonerYellowLevelSeries = {
   name: 'Amarelo',
   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>

web/src/views/Printer.vue

@@ -1,8 +1,18 @@
 <template>
   <v-container>
+    <v-row>
+      <v-col>
         <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>
 </template>
 <script lang="ts" setup>
@@ -12,6 +22,7 @@ import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import PrinterCard from '@/components/PrinterCard.vue'
 import PrinterTonerChart from '@/components/PrinterTonerChart.vue'
+import PrinterCounterChart from '@/components/PrinterCounterChart.vue'
 
 const route = useRoute()