mirror of https://github.com/Lissy93/dashy.git
✨ Adds Covid status widget
This commit is contained in:
Alicia Sykes
parent
710b3ea7ad
commit
f5c11b3dc6
|
|
@ -23,6 +23,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
|
||||||
- [TFL Status](#tfl-status)
|
- [TFL Status](#tfl-status)
|
||||||
- [Stock Price History](#stock-price-history)
|
- [Stock Price History](#stock-price-history)
|
||||||
- [ETH Gas Prices](#eth-gas-prices)
|
- [ETH Gas Prices](#eth-gas-prices)
|
||||||
|
- [Covid-19 Status](#covid-19-status)
|
||||||
- [Joke of the Day](#joke)
|
- [Joke of the Day](#joke)
|
||||||
- [XKCD Comics](#xkcd-comics)
|
- [XKCD Comics](#xkcd-comics)
|
||||||
- [News Headlines](#news-headlines)
|
- [News Headlines](#news-headlines)
|
||||||
|
|
@ -586,6 +587,53 @@ _No config options._
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
### Covid-19 Status
|
||||||
|
|
||||||
|
Keep track of the current COVID-19 status. Optionally also show cases by country, and a time-series chart. Uses live data from various sources, computed by [disease.sh](https://disease.sh/)
|
||||||
|
|
||||||
|
<p align="center"><img width="400" src="https://i.ibb.co/7XjbyRg/covid-19-status.png?" /></p>
|
||||||
|
|
||||||
|
##### Options
|
||||||
|
|
||||||
|
**Field** | **Type** | **Required** | **Description**
|
||||||
|
--- | --- | --- | ---
|
||||||
|
**`showChart`** | `boolean` | _Optional_ | Also display a time-series chart showing number of recent cases
|
||||||
|
**`showCountries`** | `boolean` | _Optional_ |
|
||||||
|
**`numDays`** | `number` | _Optional_ | Specify number of days worth of history to render on the chart
|
||||||
|
**`countries`** | `string[]` | _Optional_ | An array of countries to display, specified by their [ISO-3 codes](https://www.iso.org/obp/ui). Leave blank to show all, sorted by most cases
|
||||||
|
**`limit`** | `number` | _Optional_ | If showing all countries, set a limit for number of results to return. Defaults to `10`, no maximum
|
||||||
|
|
||||||
|
|
||||||
|
##### Example
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- type: covid-stats
|
||||||
|
```
|
||||||
|
|
||||||
|
Or
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
- type: covid-stats
|
||||||
|
options:
|
||||||
|
showChart: true
|
||||||
|
showCountries: true
|
||||||
|
countries:
|
||||||
|
- GBR
|
||||||
|
- USA
|
||||||
|
- IND
|
||||||
|
- RUS
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Info
|
||||||
|
- **CORS**: 🟢 Enabled
|
||||||
|
- **Auth**: 🟢 Not Required
|
||||||
|
- **Price**: 🟢 Free
|
||||||
|
- **Host**: Managed Instance or Self-Hosted (see [disease-sh/api](https://github.com/disease-sh/api))
|
||||||
|
- **Privacy**: ⚫ No Policy Available
|
||||||
|
- **Conditions**: [Terms of Use](https://github.com/disease-sh/api/blob/master/TERMS.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### Joke
|
### Joke
|
||||||
|
|
||||||
Renders a programming or generic joke. Data is fetched from the [JokesAPI](https://github.com/Sv443/JokeAPI) by @Sv443. All fields are optional.
|
Renders a programming or generic joke. Data is fetched from the [JokesAPI](https://github.com/Sv443/JokeAPI) by @Sv443. All fields are optional.
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
<template>
|
||||||
|
<div class="covid-stats-wrapper">
|
||||||
|
<div class="basic-stats" v-if="basicStats">
|
||||||
|
<div class="active-cases stat-wrap">
|
||||||
|
<span class="lbl">Active Cases</span>
|
||||||
|
<span class="val">{{ basicStats.active | numberFormat }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="more-stats">
|
||||||
|
<div class="stat-wrap">
|
||||||
|
<span class="lbl">Total Confirmed</span>
|
||||||
|
<span class="val total">{{ basicStats.cases | numberFormat }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-wrap">
|
||||||
|
<span class="lbl">Total Recovered</span>
|
||||||
|
<span class="val recovered">{{ basicStats.deaths | numberFormat }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-wrap">
|
||||||
|
<span class="lbl">Total Deaths</span>
|
||||||
|
<span class="val deaths">{{ basicStats.recovered | numberFormat }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chart -->
|
||||||
|
<div class="case-history-chart" :id="chartId" v-if="showChart"></div>
|
||||||
|
<!-- Country Data -->
|
||||||
|
<div class="country-data" v-if="countryData">
|
||||||
|
<div class="country-row" v-for="country in countryData" :key="country.name">
|
||||||
|
<p class="name">
|
||||||
|
<img :src="country.flag" alt="Flag" class="flag" />
|
||||||
|
{{ country.name }}
|
||||||
|
</p>
|
||||||
|
<div class="country-case-wrap">
|
||||||
|
<div class="stat-wrap">
|
||||||
|
<span class="lbl">Confirmed</span>
|
||||||
|
<span class="val total">{{ country.cases | showInK }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-wrap">
|
||||||
|
<span class="lbl">Recovered</span>
|
||||||
|
<span class="val recovered">{{ country.recovered | showInK }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-wrap">
|
||||||
|
<span class="lbl">Deaths</span>
|
||||||
|
<span class="val deaths">{{ country.deaths | showInK }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||||
|
import ChartingMixin from '@/mixins/ChartingMixin';
|
||||||
|
import { putCommasInBigNum, showNumAsThousand, timestampToDate } from '@/utils/MiscHelpers';
|
||||||
|
import { widgetApiEndpoints } from '@/utils/defaults';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [WidgetMixin, ChartingMixin],
|
||||||
|
computed: {
|
||||||
|
showChart() {
|
||||||
|
return this.options.showChart || false;
|
||||||
|
},
|
||||||
|
showCountries() {
|
||||||
|
if (this.options.countries) return true;
|
||||||
|
return this.options.showCountries;
|
||||||
|
},
|
||||||
|
numDays() {
|
||||||
|
return this.options.numDays || 120;
|
||||||
|
},
|
||||||
|
countries() {
|
||||||
|
return this.options.countries;
|
||||||
|
},
|
||||||
|
limit() {
|
||||||
|
return this.options.limit || 15;
|
||||||
|
},
|
||||||
|
basicStatsEndpoint() {
|
||||||
|
return `${widgetApiEndpoints.covidStats}/all`;
|
||||||
|
},
|
||||||
|
timeSeriesEndpoint() {
|
||||||
|
return `${widgetApiEndpoints.covidStats}/historical/all?lastdays=${this.numDays}`;
|
||||||
|
},
|
||||||
|
countryInfoEndpoint() {
|
||||||
|
return 'https://covidapi.yubrajpoudel.com.np/stat';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
basicStats: null,
|
||||||
|
countryData: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
numberFormat(caseNumber) {
|
||||||
|
return putCommasInBigNum(caseNumber);
|
||||||
|
},
|
||||||
|
showInK(caseNumber) {
|
||||||
|
return showNumAsThousand(caseNumber);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchData() {
|
||||||
|
this.makeRequest(this.basicStatsEndpoint).then(this.processBasicStats);
|
||||||
|
if (this.showChart) {
|
||||||
|
this.makeRequest(this.timeSeriesEndpoint).then(this.processTimeSeries);
|
||||||
|
}
|
||||||
|
if (this.showCountries) {
|
||||||
|
this.makeRequest(this.countryInfoEndpoint).then(this.processCountryInfo);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
processBasicStats(data) {
|
||||||
|
this.basicStats = data;
|
||||||
|
},
|
||||||
|
processCountryInfo(data) {
|
||||||
|
const countryData = [];
|
||||||
|
data.forEach((country) => {
|
||||||
|
const iso = country.countryInfo.iso3;
|
||||||
|
if (!this.countries || this.countries.includes(iso)) {
|
||||||
|
countryData.push({
|
||||||
|
name: country.country,
|
||||||
|
flag: country.countryInfo.flag,
|
||||||
|
cases: country.cases,
|
||||||
|
deaths: country.deaths,
|
||||||
|
recovered: country.recovered,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.countryData = countryData.slice(0, this.limit);
|
||||||
|
},
|
||||||
|
processTimeSeries(data) {
|
||||||
|
const timeLabels = Object.keys(data.cases);
|
||||||
|
const totalCases = [];
|
||||||
|
const totalDeaths = [];
|
||||||
|
const totalRecovered = [];
|
||||||
|
timeLabels.forEach((date) => {
|
||||||
|
totalCases.push(data.cases[date]);
|
||||||
|
totalDeaths.push(data.deaths[date]);
|
||||||
|
totalRecovered.push(data.recovered[date]);
|
||||||
|
});
|
||||||
|
const chartData = {
|
||||||
|
labels: timeLabels,
|
||||||
|
datasets: [
|
||||||
|
{ name: 'Cases', type: 'bar', values: totalCases },
|
||||||
|
{ name: 'Recovered', type: 'bar', values: totalRecovered },
|
||||||
|
{ name: 'Deaths', type: 'bar', values: totalDeaths },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
return new this.Chart(`#${this.chartId}`, {
|
||||||
|
title: 'Cases, Recoveries and Deaths',
|
||||||
|
data: chartData,
|
||||||
|
type: 'axis-mixed',
|
||||||
|
height: this.chartHeight,
|
||||||
|
colors: ['#f6f000', '#20e253', '#f80363'],
|
||||||
|
truncateLegends: true,
|
||||||
|
lineOptions: {
|
||||||
|
hideDots: 1,
|
||||||
|
},
|
||||||
|
axisOptions: {
|
||||||
|
xIsSeries: true,
|
||||||
|
xAxisMode: 'tick',
|
||||||
|
},
|
||||||
|
tooltipOptions: {
|
||||||
|
formatTooltipY: d => putCommasInBigNum(d),
|
||||||
|
formatTooltipX: d => timestampToDate(d),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.covid-stats-wrapper {
|
||||||
|
.basic-stats {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
background: var(--widget-accent-color);
|
||||||
|
border-radius: var(--curve-factor);
|
||||||
|
}
|
||||||
|
.country-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
p.name {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
color: var(--widget-text-color);
|
||||||
|
img.flag {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
border-radius: var(--curve-factor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.country-case-wrap {
|
||||||
|
min-width: 60%;
|
||||||
|
}
|
||||||
|
&:not(:last-child) { border-bottom: 1px dashed var(--widget-text-color); }
|
||||||
|
}
|
||||||
|
.stat-wrap {
|
||||||
|
color: var(--widget-text-color);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 33%;
|
||||||
|
margin: 0.25rem auto;
|
||||||
|
text-align: center;
|
||||||
|
cursor: default;
|
||||||
|
span.lbl {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
opacity: var(--dimming-factor);
|
||||||
|
}
|
||||||
|
span.val {
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0.1rem 0;
|
||||||
|
font-family: var(--font-monospace);
|
||||||
|
&.total { color: var(--warning); }
|
||||||
|
&.recovered { color: var(--success); }
|
||||||
|
&.deaths { color: var(--danger); }
|
||||||
|
}
|
||||||
|
&.active-cases {
|
||||||
|
span.lbl { font-size: 1.1rem; }
|
||||||
|
span.val { font-size: 1.3rem; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.more-stats, .country-case-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -60,6 +60,13 @@
|
||||||
@error="handleError"
|
@error="handleError"
|
||||||
:ref="widgetRef"
|
:ref="widgetRef"
|
||||||
/>
|
/>
|
||||||
|
<CovidStats
|
||||||
|
v-else-if="widgetType === 'covid-stats'"
|
||||||
|
:options="widgetOptions"
|
||||||
|
@loading="setLoaderState"
|
||||||
|
@error="handleError"
|
||||||
|
:ref="widgetRef"
|
||||||
|
/>
|
||||||
<EmbedWidget
|
<EmbedWidget
|
||||||
v-else-if="widgetType === 'embed'"
|
v-else-if="widgetType === 'embed'"
|
||||||
:options="widgetOptions"
|
:options="widgetOptions"
|
||||||
|
|
@ -282,6 +289,7 @@ export default {
|
||||||
Apod: () => import('@/components/Widgets/Apod.vue'),
|
Apod: () => import('@/components/Widgets/Apod.vue'),
|
||||||
Clock: () => import('@/components/Widgets/Clock.vue'),
|
Clock: () => import('@/components/Widgets/Clock.vue'),
|
||||||
CodeStats: () => import('@/components/Widgets/CodeStats.vue'),
|
CodeStats: () => import('@/components/Widgets/CodeStats.vue'),
|
||||||
|
CovidStats: () => import('@/components/Widgets/CovidStats.vue'),
|
||||||
CryptoPriceChart: () => import('@/components/Widgets/CryptoPriceChart.vue'),
|
CryptoPriceChart: () => import('@/components/Widgets/CryptoPriceChart.vue'),
|
||||||
CryptoWatchList: () => import('@/components/Widgets/CryptoWatchList.vue'),
|
CryptoWatchList: () => import('@/components/Widgets/CryptoWatchList.vue'),
|
||||||
CveVulnerabilities: () => import('@/components/Widgets/CveVulnerabilities.vue'),
|
CveVulnerabilities: () => import('@/components/Widgets/CveVulnerabilities.vue'),
|
||||||
|
|
|
||||||
|
|
@ -210,6 +210,7 @@ module.exports = {
|
||||||
widgetApiEndpoints: {
|
widgetApiEndpoints: {
|
||||||
astronomyPictureOfTheDay: 'https://apodapi.herokuapp.com/api',
|
astronomyPictureOfTheDay: 'https://apodapi.herokuapp.com/api',
|
||||||
codeStats: 'https://codestats.net/',
|
codeStats: 'https://codestats.net/',
|
||||||
|
covidStats: 'https://disease.sh/v3/covid-19',
|
||||||
cryptoPrices: 'https://api.coingecko.com/api/v3/coins/',
|
cryptoPrices: 'https://api.coingecko.com/api/v3/coins/',
|
||||||
cryptoWatchList: 'https://api.coingecko.com/api/v3/coins/markets/',
|
cryptoWatchList: 'https://api.coingecko.com/api/v3/coins/markets/',
|
||||||
cveVulnerabilities: 'https://www.cvedetails.com/json-feed.php',
|
cveVulnerabilities: 'https://www.cvedetails.com/json-feed.php',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue