Commit a2c03268 authored by Omar Elkadi's avatar Omar Elkadi
Browse files

add icons to corona stat view

parent eafcb005
<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>
......@@ -15,10 +17,10 @@
<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>
<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>
</div>
<!-- Card body -->
<div class="card-body ">
......@@ -36,6 +38,16 @@
</div>
</template>
<style lang="scss">
@import "../assets/app.scss";
$big_icon : 36px !important;
i {
color: $thddonaublue;
font-size: $big_icon;
};
</style>
<script lang="ts">
import axios from 'axios'
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'
......@@ -144,28 +156,28 @@ export default {
}
}
const showLastMonth = () => {
const currentMonth = () => {
lineChart.options.scales.x.min = dateslength - 30
lineChart.options.scales.x.max = dateslength
console.log('here')
chartRef.value.update(250)
}
const add4 = () => {
const monthAxisForward = () => {
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 = () => {
const monthAxisBack = () => {
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 = () => {
const fullView = () => {
lineChart.options.scales.x.min = 0
lineChart.options.scales.x.max = dateslength
chartRef.value.update(250)
......@@ -174,11 +186,11 @@ export default {
lineChart,
CasesHistory,
CoronaStatBY,
showLastMonth,
currentMonth,
chartRef,
add4,
minus4,
fullview
monthAxisForward,
monthAxisBack,
fullView
}
},
data () {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment