Skip to content
Snippets Groups Projects
Commit 7db41d62 authored by Omar Elkadi's avatar Omar Elkadi
Browse files

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

parent 42a3ec0d
No related branches found
No related tags found
No related merge requests found
This diff is collapsed.
......@@ -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",
......
{
"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
......@@ -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 }
......
......@@ -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
}
]
......
<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>
......@@ -160,6 +160,7 @@ import axios from 'axios'
import Swal from 'sweetalert2/dist/sweetalert2.js'
export default {
name: 'SickForm',
data () {
return {
EvidenceFile: '',
......
declare module "@j-t-mcc/vue3-chartjs"
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment