From 4ec375e26d8bf35bee948d48db3ecc443aaeb033 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Wed, 5 Jul 2023 11:10:41 -0400
Subject: [PATCH] Charts OK

---
 web/src/components/PrinterCounterChart.vue | 68 +++++++++++++++++
 web/src/components/PrinterTonerChart.vue   | 86 +++++++++++++---------
 web/src/views/Printer.vue                  | 17 ++++-
 3 files changed, 134 insertions(+), 37 deletions(-)
 create mode 100644 web/src/components/PrinterCounterChart.vue

diff --git a/web/src/components/PrinterCounterChart.vue b/web/src/components/PrinterCounterChart.vue
new file mode 100644
index 0000000..bc4f340
--- /dev/null
+++ b/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>
diff --git a/web/src/components/PrinterTonerChart.vue b/web/src/components/PrinterTonerChart.vue
index e9ce7f0..48480bd 100644
--- a/web/src/components/PrinterTonerChart.vue
+++ b/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([
-  {
-    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
-    }))
-  }
-])
+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>
diff --git a/web/src/views/Printer.vue b/web/src/views/Printer.vue
index 6e8443f..5118ec1 100644
--- a/web/src/views/Printer.vue
+++ b/web/src/views/Printer.vue
@@ -1,8 +1,18 @@
 <template>
   <v-container>
-    <printer-card class="mb-2" v-if="printer" :printer="printer" />
-
-    <printer-toner-chart v-if="printer" :status="printer?.status" />
+    <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()