Add get Byern API + Add Tooltips + update colors

src/views/CoronaStat.vue

 <template>
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
-<!-- <div v-for="CityHistory in CasesHistory.data['09271'].history" :key="CityHistory.date" class="weather-data">
-<div class="cases">
-<div>
-<span>{{CityHistory.date}}</span>
-</div>
-<div>
-<span class="location">{{CityHistory.cases}}</span>
-</div>
-</div>
-</div> -->
-<div class="container h-">
-<!-- <button v-on:click="getlCases(CasesHistory.data['09271'].history)">Get Corona Data</button> -->
-<h5 class="h3 mb-0">Line chart</h5>
-  <div class="card">
-  <!-- Card header -->
-    <div class="d-flex justify-content-around p-3">
-      <a type="button" class="" @click="monthAxisBack"><i class="material-icons">chevron_left</i></a>
-      <a type="button" class="" @click="fullView"><i class="material-icons">fullscreen</i></a>
-      <a type="button" class="" @click="currentMonth"><i class="material-icons">today</i></a>
-      <a type="button" class="" @click="monthAxisForward"><i class="material-icons">chevron_right</i></a>
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
+  <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">
+        <span class="tooltiptextx">Bayern</span>
+        <i class="material-icons" style="color:#e63c54">lens</i>
+      </a>
+      <a type="button" class="tooltipx" @click="NewCasesHisDeggendorf"
+        ><span class="tooltiptextx">Deggendorf</span
+        ><i class="material-icons" style="color:#6f6f6e">lens</i>
+      </a>
     </div>
-  <!-- Card body -->
-    <div class="card-body ">
-      <div class="chart">
-        <vue3-chart-js
-        :id="lineChart.id"
-        :type="lineChart.type"
-        ref="chartRef"
-        :data="lineChart.data"
-        :options="lineChart.options"
-        />
+    <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>
+      </div>
+      <!-- Card body -->
+      <div class="card-body ">
+        <div class="chart">
+          <vue3-chart-js
+            :id="BarChart.id"
+            :type="BarChart.type"
+            ref="chartRef"
+            :data="BarChart.data"
+            :options="BarChart.options"
+          />
+        </div>
       </div>
     </div>
   </div>
-</div>
 </template>
 
 <style lang="scss">
+@import "../assets/app.scss";
+$big_icon: 36px !important;
+i {
+  color: $thddonaublue;
+  font-size: $big_icon;
+}
+.tooltipx {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltipx .tooltiptextx {
+  visibility: hidden;
+  width: 120px;
+  background-color: $thdblue;
+  color: $thdlightgrey;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 120%;
+  left: 50%;
+  margin-left: -60px;
+  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
+  opacity: 0;
+  transition: opacity 2s;
+}
+
+.tooltipx .tooltiptextx::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: $thdblue transparent transparent transparent;
+}
 
-  @import "../assets/app.scss";
-  $big_icon : 36px !important;
-  i {
-    color: $thddonaublue;
-    font-size: $big_icon;
-  };
+.tooltipx:hover .tooltiptextx {
+  visibility: visible;
+  opacity: 1;
+}
 </style>
 
 <script lang="ts">
@@ -54,65 +108,50 @@ 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'
 
 // globally registered and available for all charts
 Vue3ChartJs.registerGlobalPlugins([zoomPlugin])
 
 export default {
-  name: 'App',
+  name: 'CoronaStat',
   components: {
     Vue3ChartJs
   },
   setup () {
     const chartRef = ref(null) // ref(0)
-    const cases = []
-    const dates = []
     let dateslength = 0
-    const CasesHistory = ref({
+    var tooltipList
+    const CoronaHisDeg = ref({
       data: {
         '09271': {
           history: []
         }
       }
     })
-    var CoronaStatBY = {
-      data: {}
-    }
-    // const cases = async () => {
-    //   return await getlCases(CasesHistory.value.data['09271'].history)
-    // }
-    async function getCoronaStat () {
-      await axios
-        .get('https://api.corona-zahlen.org/districts/09271/history/cases')
-        .then(response => (CasesHistory.value = response.data))
-    }
-
-    onBeforeMount(async () => {
-      await getCoronaStat()
-      const his = CasesHistory.value.data['09271'].history
-
-      his.forEach(element => {
-        // lineChart.data.labels.push(element.date.substr(0, 10))
-        // lineChart.data.datasets[0].data.push(element.cases)
-        cases.push(element.cases)
-        dates.push(element.date.substr(0, 10))
-      })
-      dateslength = cases.length
-      chartRef.value.update(1)
+    const CoronaHisBY = ref({
+      data: {
+        BY: {
+          history: []
+        }
+      }
     })
-    const lineChart = {
-      id: 'line',
+    const BarChart = {
+      id: 'bar',
       type: 'bar',
       // locally registered and available for this chart
       plugins: [dataLabels],
       data: {
-        labels: dates,
+        labels: [],
         datasets: [
           {
-            label: 'Neubefall',
-            data: cases,
-            borderColor: 'black',
-            backgroundColor: ['#bdc3c7']
+            label: '',
+            data: [],
+            borderColor: ['Black'],
+            backgroundColor: '',
+            borderWidth: 0.5,
+            borderRadius: 2
           }
         ]
       },
@@ -131,7 +170,7 @@ export default {
             },
             pan: {
               enabled: true,
-              mode: 'xy'
+              mode: 'x'
             }
           },
           datalabels: {
@@ -155,54 +194,95 @@ export default {
         }
       }
     }
+    async function NewCasesHisDeggendorf () {
+      await axios
+        .get('https://api.corona-zahlen.org/districts/09271/history/cases')
+        .then(response => (CoronaHisDeg.value = response.data))
+      const his = CoronaHisDeg.value.data['09271'].history
+      var cases = []
+      var dates = []
+      his.forEach(element => {
+        // BarChart.data.labels.push(element.date.substr(0, 10))
+        // BarChart.data.datasets[0].data.push(element.cases)
+        cases.push(element.cases)
+        dates.push(element.date.substr(0, 10))
+      })
+      BarChart.data.datasets[0].data = cases
+      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
+      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 = []
+      var dates = []
+      his.forEach(element => {
+        // lineChart.data.labels.push(element.date.substr(0, 10))
+        // lineChart.data.datasets[0].data.push(element.cases)
+        cases.push(element.cases)
+        dates.push(element.date.substr(0, 10))
+      })
+      BarChart.data.datasets[0].data = cases
+      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
+      chartRef.value.update()
+    }
+
+    onBeforeMount(async () => {
+      await NewCasesHisDeggendorf()
+      var tooltipTriggerList = [].slice.call(
+        document.querySelectorAll('[data-bs-toggle="tooltip"]')
+      )
+      tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl)
+      })
+    })
 
     const currentMonth = () => {
-      lineChart.options.scales.x.min = dateslength - 30
-      lineChart.options.scales.x.max = dateslength
+      BarChart.options.scales.x.min = dateslength - 30
+      BarChart.options.scales.x.max = dateslength
 
       console.log('here')
-      chartRef.value.update(250)
+      chartRef.value.update(0)
     }
     const monthAxisForward = () => {
-      if (lineChart.options.scales.x.max <= dateslength - 30) {
-        lineChart.options.scales.x.min += 30
-        lineChart.options.scales.x.max += 30
+      if (BarChart.options.scales.x.max <= dateslength - 30) {
+        BarChart.options.scales.x.min += 30
+        BarChart.options.scales.x.max += 30
       }
-      chartRef.value.update(250)
+      chartRef.value.update(0)
     }
     const monthAxisBack = () => {
-      if (lineChart.options.scales.x.min >= 0) {
-        lineChart.options.scales.x.min -= 30
-        lineChart.options.scales.x.max -= 30
+      if (BarChart.options.scales.x.min >= 0) {
+        BarChart.options.scales.x.min -= 30
+        BarChart.options.scales.x.max -= 30
       }
-      chartRef.value.update(250)
+      chartRef.value.update(0)
     }
     const fullView = () => {
-      lineChart.options.scales.x.min = 0
-      lineChart.options.scales.x.max = dateslength
-      chartRef.value.update(250)
+      BarChart.options.scales.x.min = 0
+      BarChart.options.scales.x.max = dateslength
+      chartRef.value.update(0)
     }
     return {
-      lineChart,
-      CasesHistory,
-      CoronaStatBY,
-      currentMonth,
+      BarChart,
       chartRef,
       monthAxisForward,
       monthAxisBack,
-      fullView
-    }
-  },
-  data () {
-    // return {
-    //   cases: [Number]
-    // }
-  },
-  methods: {
-    async getCoronaStat () {
-      await axios
-        .get('https://api.corona-zahlen.org/germany')
-        .then(response => (this.CoronaStatBY = response.data))
+      currentMonth,
+      fullView,
+      NewCasesHisBayern,
+      NewCasesHisDeggendorf,
+      tooltipList
     }
   }
 }