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

Add get Byern API + Add Tooltips + update colors

parent eca5f192
No related branches found
No related tags found
No related merge requests found
<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
}
}
}
......
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