add tooltip + add toasts + add 4 and 1 month toggol

src/views/CoronaStat.vue

@@ -6,37 +6,74 @@
   <div class="container ">
     <!-- <button v-on:click="getlCases(CoronaHisDeg.data['09271'].history)">Get Corona Data</button> -->
     <div class="btn-group d-flex justify-content-around p-3 mx-5 mt-5">
-      <a type="button" class="tooltipx" @click="NewCasesHisBayern">
+      <a
+        type="button"
+        class="tooltipx border-primary"
+        @mouseover="isHovering1 = true"
+        @mouseout="isHovering1 = false"
+        :class="{'border-bottom': isHovering1}"
+        @click="NewCasesHisBayern"
+      >
         <span class="tooltiptextx">Bayern</span>
         <i class="material-icons" style="color:#e63c54">lens</i>
       </a>
-      <a type="button" class="tooltipx" @click="NewCasesHisDeggendorf"
+      <a
+        type="button"
+        class="tooltipx  border-primary"
+        @click="NewCasesHisDeggendorf"
+        @mouseover="isHovering2 = true"
+        @mouseout="isHovering2 = false"
+        :class="{ 'border-bottom': isHovering2 }"
         ><span class="tooltiptextx">Deggendorf</span
         ><i class="material-icons" style="color:#6f6f6e">lens</i>
       </a>
     </div>
     <div class="card border-success m-2">
       <!-- Card header -->
-        <div class="row">
-          <div class="col btn-group d-flex justify-content-around p-3 mx-5">
-            <a type="button" class="tooltipx" @click="fullView"
-              ><span class="tooltiptextx">Voller Ansicht</span
-              ><i class="material-icons">fullscreen</i></a
-            >
-          </div>
-          <div class="col btn-group d-flex justify-content-around p-3 mx-5">
-            <a type="button" class="tooltipx" @click="currentMonth"
-              ><span class="tooltiptextx">Dieser Monat</span
-              ><i class="material-icons">today</i></a
-            >
-            <a type="button" class="tooltipx" @click="monthAxisBack"
-              ><span class="tooltiptextx">Monat zurück</span
-              ><i class="material-icons">chevron_left</i></a
-            >
-            <a type="button" class="tooltipx" @click="monthAxisForward"
-              ><span class="tooltiptextx">Monat Weiter</span
-              ><i class="material-icons">chevron_right</i></a
-            >
+      <div class="row">
+        <div class="col btn-group d-flex justify-content-around p-3 mx-5">
+          <a
+            type="button"
+            class="tooltipx  border-primary"
+            @click="fullView"
+            @mouseover="isHovering3 = true"
+            @mouseout="isHovering3 = false"
+            :class="{ 'border-bottom': isHovering3 }"
+            ><span class="tooltiptextx">Voller Ansicht</span
+            ><i class="material-icons">fullscreen</i></a
+          >
+        </div>
+        <div class="col btn-group d-flex justify-content-around p-3 mx-5">
+          <a
+            type="button"
+            class="tooltipx  border-primary"
+            @click="currentMonth"
+            @mouseover="isHovering4 = true"
+            @mouseout="isHovering4 = false"
+            :class="{ 'border-bottom': isHovering4 }"
+            ><span class="tooltiptextx">Aktuell</span>
+            <i class="material-icons">today</i></a
+          >
+          <a
+            type="button"
+            class="tooltipx  border-primary"
+            @click="monthAxisBack"
+            @mouseover="isHovering5 = true"
+            @mouseout="isHovering5 = false"
+            :class="{ 'border-bottom': isHovering5 }"
+            ><span class="tooltiptextx">Zurück</span
+            ><i class="material-icons">chevron_left</i></a
+          >
+          <a
+            type="button"
+            class="tooltipx  border-primary"
+            @click="monthAxisForward"
+            @mouseover="isHovering6 = true"
+            @mouseout="isHovering6 = false"
+            :class="{ 'border-bottom': isHovering6 }"
+            ><span class="tooltiptextx">Weiter</span
+            ><i class="material-icons">chevron_right</i></a
+          >
         </div>
       </div>
       <!-- Card body -->
@@ -108,21 +145,20 @@ import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'
 import zoomPlugin from 'chartjs-plugin-zoom'
 import dataLabels from 'chartjs-plugin-datalabels'
 import { onBeforeMount, ref } from 'vue'
-import 'bootstrap/dist/js/bootstrap.bundle'
-import { bootstrap } from 'bootstrap/dist/js/bootstrap'
+import Swal from 'sweetalert2'
 
 // globally registered and available for all charts
 Vue3ChartJs.registerGlobalPlugins([zoomPlugin])
 
 export default {
-  name: 'CoronaStat',
+  name: 'Covid',
   components: {
     Vue3ChartJs
   },
   setup () {
     const chartRef = ref(null) // ref(0)
     let dateslength = 0
-    var tooltipList
+    let x = 0
     const CoronaHisDeg = ref({
       data: {
         '09271': {
@@ -188,13 +224,17 @@ export default {
         },
         scales: {
           x: {
-            min: 0,
-            max: 500
+            min: 350,
+            max: 1000
           }
         }
       }
     }
-    async function NewCasesHisDeggendorf () {
+    onBeforeMount(async () => {
+      await NewCasesHisDeggendorf()
+      last4Months()
+    })
+    const NewCasesHisDeggendorf = async () => {
       await axios
         .get('https://api.corona-zahlen.org/districts/09271/history/cases')
         .then(response => (CoronaHisDeg.value = response.data))
@@ -211,14 +251,13 @@ export default {
       BarChart.data.datasets[0].backgroundColor = 'rgba(111,111,110,1)'
       BarChart.data.labels = dates
       BarChart.data.datasets[0].label = 'Deggendorf Covid-19 Neubefälleverlauf'
-      dateslength = cases.length
+      dateslength = dates.length
       chartRef.value.update(1)
     }
     const NewCasesHisBayern = async () => {
       await axios
         .get('https://api.corona-zahlen.org/states/BY/history/cases')
         .then(response => (CoronaHisBY.value = response.data))
-
       const his = CoronaHisBY.value.data.BY.history
       console.log(his)
       var cases = []
@@ -233,21 +272,22 @@ export default {
       BarChart.data.labels = dates
       BarChart.data.datasets[0].backgroundColor = 'rgba(231,61,85,1)'
       BarChart.data.datasets[0].label = 'Bayer Covid-19 Neubefälleverlauf'
-      dateslength = cases.length
+      dateslength = dates.length
       chartRef.value.update()
     }
+    const last4Months = () => {
+      x = 120
+      BarChart.options.scales.x.min = dateslength - x
+      BarChart.options.scales.x.max = dateslength
 
-    onBeforeMount(async () => {
-      await NewCasesHisDeggendorf()
-      var tooltipTriggerList = [].slice.call(
-        document.querySelectorAll('[data-bs-toggle="tooltip"]')
-      )
-      tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-        return new bootstrap.Tooltip(tooltipTriggerEl)
-      })
-    })
-
+      console.log('here')
+      chartRef.value.update(0)
+    }
     const currentMonth = () => {
+      if (x === 30) {
+        return last4Months()
+      }
+      x = 30
       BarChart.options.scales.x.min = dateslength - 30
       BarChart.options.scales.x.max = dateslength
 
@@ -255,16 +295,37 @@ export default {
       chartRef.value.update(0)
     }
     const monthAxisForward = () => {
-      if (BarChart.options.scales.x.max <= dateslength - 30) {
-        BarChart.options.scales.x.min += 30
-        BarChart.options.scales.x.max += 30
+      if (BarChart.options.scales.x.max < dateslength - 30) {
+        BarChart.options.scales.x.min += x
+        BarChart.options.scales.x.max += x
+      } else {
+        Swal.fire({
+          text: 'Er ist ein API ! Kein Magier!',
+          toast: true,
+          position: 'bottom-end',
+          timer: 9000,
+          timerProgressBar: true,
+          showConfirmButton: false,
+          icon: 'warning'
+        })
       }
       chartRef.value.update(0)
     }
     const monthAxisBack = () => {
-      if (BarChart.options.scales.x.min >= 0) {
-        BarChart.options.scales.x.min -= 30
-        BarChart.options.scales.x.max -= 30
+      if (BarChart.options.scales.x.min > 0) {
+        BarChart.options.scales.x.min -= x
+        BarChart.options.scales.x.max -= x
+      } else {
+        Swal.fire({
+          text: 'Es gab kein Covid-19 davor!',
+          toast: true,
+          position: 'bottom-end',
+          timer: 9000,
+          timerProgressBar: true,
+          confirmButtonColor: '#1a4273',
+          showConfirmButton: false,
+          icon: 'warning'
+        })
       }
       chartRef.value.update(0)
     }
@@ -281,8 +342,17 @@ export default {
       currentMonth,
       fullView,
       NewCasesHisBayern,
-      NewCasesHisDeggendorf,
-      tooltipList
+      NewCasesHisDeggendorf
+    }
+  },
+  data () {
+    return {
+      isHovering1: false,
+      isHovering2: false,
+      isHovering3: false,
+      isHovering4: false,
+      isHovering5: false,
+      isHovering6: false
     }
   }
 }