Toner chart ok

web/src/components/PrinterCard.vue

@@ -20,7 +20,7 @@
         />
         <printer-img class="pa-2" :model="printer.model" />
       </v-col>
-      <v-col cols="8" sm="4">
+      <v-col cols="8" sm="4" align-self="center">
         <v-list density="compact">
           <v-list-item>
             <v-list-item-title v-if="printer.friendlyName">

web/src/components/PrinterChart.vue

@@ -1,53 +0,0 @@
-<template>
-  <apexchart
-    type="line"
-    :options="chartOptions"
-    :series="chartSeries"
-    width="100%"
-    height="100%"
-  />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const chartOptions = ref({
-  chart: {
-    // id: 'chart',
-    type: 'line',
-
-    toolbar: {
-      show: false
-    }
-  },
-  dataLabels: {
-    enabled: false
-  },
-  stroke: {
-    curve: 'smooth'
-  },
-  grid: {
-    row: {
-      colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
-      opacity: 0.5
-    }
-  }
-})
-
-const chartSeries = ref([
-  {
-    name: 'A',
-    data: [
-      { x: 'test1', y: 32 },
-      { x: 'test2', y: 35 }
-    ]
-  },
-  {
-    name: 'B',
-    data: [
-      { x: 'test1', y: 11 },
-      { x: 'test2', y: 15 }
-    ]
-  }
-])
-</script>

web/src/components/PrinterTonerChart.vue

@@ -0,0 +1,97 @@
+<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
+    tonerBlackLevel: number
+    tonerCyanLevel: number
+    tonerMagentaLevel: number
+    tonerYellowLevel: number
+    counter: number
+  }[]
+}>()
+
+const chartOptions = ref({
+  chart: {
+    animations: {
+      enabled: false
+    },
+    // id: 'chart',
+    type: 'line',
+
+    title: 'Toner',
+
+    toolbar: {
+      show: true
+    }
+  },
+
+  colors: ['#000000', '#00BCD4', '#E91E63', '#FDD835'],
+
+  stroke: {
+    curve: 'stepline',
+    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: 'Nível de toner'
+    },
+    min: 0,
+    max: 100,
+    tickAmount: 4
+  }
+})
+
+const chartSeries = ref([
+  {
+    name: 'Preto',
+    data: props.status.map(s => ({
+      x: new Date(s.timestamp).getTime(),
+      y: s.tonerBlackLevel
+    }))
+  },
+  {
+    name: 'Ciano',
+    data: props.status.map(s => ({
+      x: new Date(s.timestamp).getTime(),
+      y: s.tonerCyanLevel
+    }))
+  },
+  {
+    name: 'Magenta',
+    data: props.status.map(s => ({
+      x: new Date(s.timestamp).getTime(),
+      y: s.tonerMagentaLevel
+    }))
+  },
+  {
+    name: 'Amarelo',
+    data: props.status.map(s => ({
+      x: new Date(s.timestamp).getTime(),
+      y: s.tonerYellowLevel
+    }))
+  }
+])
+</script>

web/src/views/Printer.vue

@@ -2,7 +2,7 @@
   <v-container>
     <printer-card class="mb-2" v-if="printer" :printer="printer" />
 
-    {{ printer }}
+    <printer-toner-chart v-if="printer" :status="printer?.status" />
   </v-container>
 </template>
 <script lang="ts" setup>
@@ -11,10 +11,11 @@ import { Printer } from '@prisma/client'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import PrinterCard from '@/components/PrinterCard.vue'
+import PrinterTonerChart from '@/components/PrinterTonerChart.vue'
 
 const route = useRoute()
 
-const printer = ref<Printer>()
+const printer = ref()
 
 const serialNumber = route.params.serialNumber as string