create corona chart view ( get data from API+draw)

package.json

@@ -8,9 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@j-t-mcc/vue3-chartjs": "^1.1.2",
+    "@types/chart.js": "^2.9.32",
     "axios": "^0.21.1",
     "bootstrap": "^5.0.0-beta3",
     "bootstrap-scss": "^4.6.0",
+    "chart.js": "^3.3.2",
+    "chartjs-plugin-datalabels": "^2.0.0-rc.1",
+    "chartjs-plugin-zoom": "^1.0.1",
     "core-js": "^3.6.5",
     "jquery": "^3.6.0",
     "popper.js": "^1.16.1",

server/public/data.json

-{
-   "patientStudent":{
-      "ForeName":"Omar",
-      "LastName":"Elkadi",
-      "MatrikelNumber":"147",
-      "PhoneNumber":"+4917647696902",
-      "EMail":"elkadi.omar@outlook.de",
-      "Address":{
-         "Street":"graflinger str",
-         "HausNumber":"graflinger str",
-         "City":"Deggendorf",
-         "ZIPcode":"44952",
-         "selectedCountry":"Egypt"
-      }
-   },
-   "sickNote":{
-      "StartDate":"2021-05-20",
-      "EndDate":"2021-05-20"
-   }
-}
\ No newline at end of file

src/components/navbar.vue

@@ -38,7 +38,10 @@
           <li class="nav-item btn btn-outline-success mx-1 align-self-center">
             <router-link to="/about" class="nav-link">About</router-link>
           </li>
-          <li class="nav-item dropdown btn btn-outline-success mx-1">
+           <li class="btn btn-outline-success mx-1 align-self-center">
+            <router-link to="/CoronaStat" class="nav-link">Covid-19</router-link>
+          </li>
+          <!-- <li class="nav-item dropdown btn btn-outline-success mx-1">
             <a
               class="nav-link dropdown-toggle"
               href="#"
@@ -55,8 +58,8 @@
               <li><hr class="dropdown-divider" /></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
             </ul>
-          </li>
-          <li class="nav-item">
+          </li> -->
+          <!-- <li class="nav-item">
             <a
               class="nav-link disabled"
               href="#"
@@ -64,7 +67,7 @@
               aria-disabled="true"
               >Disabled</a
             >
-          </li>
+          </li> -->
         </ul>
         <form class="d-flex ml-auto">
           <input
@@ -112,7 +115,6 @@
 </style>
 <script>
 export default {
-  data () {}
   // methods: {
   //   isfixedtop: () => {
   //     if (window.innerWidth < 991) { return false } else { return true }

src/router.js

@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from 'vue-router'
 import Home from './views/Home.vue'
 import About from './views/About.vue'
 import SickForm from './views/SickForm.vue'
+import CoronaStat from './views/CoronaStat.vue'
 
 const routes = [
   {
@@ -18,6 +19,11 @@ const routes = [
     path: '/SickForm',
     name: 'SickForm',
     component: SickForm
+  },
+  {
+    path: '/CoronaStat',
+    name: 'CoronaStat',
+    component: CoronaStat
   }
 ]
 

src/views/CoronaStat.vue

+<template>
+<!-- <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">
+      <button type="button" class="btn btn-outline-secondary" @click="add4">2 Monaten weiter </button>
+      <button type="button" class="btn btn-outline-secondary" @click="minus4">2 Monten züruck</button>
+      <button type="button" class="btn btn-outline-secondary" @click="showLastMonth">Letzte Montat</button>
+      <button type="button" class="btn btn-outline-secondary" @click="fullview">Voller Ansicht</button>
+    </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>
+    </div>
+  </div>
+</div>
+</template>
+
+<script lang="ts">
+import axios from 'axios'
+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'
+
+// globally registered and available for all charts
+Vue3ChartJs.registerGlobalPlugins([zoomPlugin])
+
+export default {
+  name: 'App',
+  components: {
+    Vue3ChartJs
+  },
+  setup () {
+    const chartRef = ref(null) // ref(0)
+    const cases = []
+    const dates = []
+    let dateslength = 0
+    const CasesHistory = 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 lineChart = {
+      id: 'line',
+      type: 'bar',
+      // locally registered and available for this chart
+      plugins: [dataLabels],
+      data: {
+        labels: dates,
+        datasets: [
+          {
+            label: 'Neubefall',
+            data: cases,
+            borderColor: 'black',
+            backgroundColor: ['#bdc3c7']
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          zoom: {
+            zoom: {
+              wheel: {
+                enabled: true
+              },
+              pinch: {
+                enabled: true
+              },
+              mode: 'x'
+            },
+            pan: {
+              enabled: true,
+              mode: 'xy'
+            }
+          },
+          datalabels: {
+            backgroundColor: function (context) {
+              return context.dataset.backgroundColor
+            },
+            borderRadius: 4,
+            color: 'white',
+            font: {
+              weight: 'bold'
+            },
+            formatter: Math.round,
+            padding: 6
+          }
+        },
+        scales: {
+          x: {
+            min: 0,
+            max: 500
+          }
+        }
+      }
+    }
+
+    const showLastMonth = () => {
+      lineChart.options.scales.x.min = dateslength - 30
+      lineChart.options.scales.x.max = dateslength
+
+      console.log('here')
+      chartRef.value.update(250)
+    }
+    const add4 = () => {
+      if (lineChart.options.scales.x.max <= dateslength - 30) {
+        lineChart.options.scales.x.min += 30
+        lineChart.options.scales.x.max += 30
+      }
+      chartRef.value.update(250)
+    }
+    const minus4 = () => {
+      if (lineChart.options.scales.x.min >= 0) {
+        lineChart.options.scales.x.min -= 30
+        lineChart.options.scales.x.max -= 30
+      }
+      chartRef.value.update(250)
+    }
+    const fullview = () => {
+      lineChart.options.scales.x.min = 0
+      lineChart.options.scales.x.max = dateslength
+      chartRef.value.update(250)
+    }
+    return {
+      lineChart,
+      CasesHistory,
+      CoronaStatBY,
+      showLastMonth,
+      chartRef,
+      add4,
+      minus4,
+      fullview
+    }
+  },
+  data () {
+    // return {
+    //   cases: [Number]
+    // }
+  },
+  methods: {
+    async getCoronaStat () {
+      await axios
+        .get('https://api.corona-zahlen.org/germany')
+        .then(response => (this.CoronaStatBY = response.data))
+    }
+  }
+}
+</script>

src/views/SickForm.vue

@@ -160,6 +160,7 @@ import axios from 'axios'
 import Swal from 'sweetalert2/dist/sweetalert2.js'
 
 export default {
+  name: 'SickForm',
   data () {
     return {
       EvidenceFile: '',

src/vue3-chartjs.d.ts

+declare module "@j-t-mcc/vue3-chartjs"