thio/covcharts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

local config with reset (buggy)

Browse Source
This commit is contained in:
T__o 2020-04-24 18:18:27 +02:00
parent c4db1aa587
commit 429d0d59a9
5 changed files with 261 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
brain.md
View File

@ -3,21 +3,26 @@
## First production : ## First production :
load data source OK load data source
OK git clean
vuejs prod vuejs prod
git clean
hosting hosting
load data source Save user config to local
local storage : reset mode
save all data
save timeStamp Charts modes:
- Country day decal
on load - sync on first day at xxx
if delay > 1hour : reload data - divide by country population
### Data source
Data source : Data source :
https://github.com/pomber/covid19 https://github.com/pomber/covid19

400
src/App.vue
View File

@ -1,215 +1,253 @@
<template> <template>
<v-app id="inspire"> <v-app id="inspire">
<v-app-bar app clipped-left> <v-app-bar app clipped-left>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"/> <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
<v-toolbar-title>{{title}}</v-toolbar-title> <v-toolbar-title>{{title}}</v-toolbar-title>
</v-app-bar> </v-app-bar>
<v-navigation-drawer <v-navigation-drawer
v-model="drawer" v-model="drawer"
app app
clipped clipped
stateless stateless
> >
<ChartConfig <ChartConfig
:configs="chartConfig" :configs="chartConfig"
:configLists="configLists" :configLists="configLists"
v-model="chartConfig"
/>
<CountriesConfig
:lists="countriesLists"
:configs="countriesConfig"
/>
<DataLoader
v-model="allData"
></DataLoader>
</v-navigation-drawer>
<v-content>
<v-container class="sfill-height" fluid>
<v-row align="center" justify="center" id="maincontent" ref="maincontent">
<v-col class="shrink">
<MultiCountryChart
:countries="countriesData"
:scaleType="chartConfig.scaleSelected"
:dataType="chartConfig.typeSelected"
:width="chartWidth"
:height="chartWidth * (2/3)"
/> />
<MultiBarChartSingle <CountriesConfig
:countriesData="countriesData" :lists="countriesLists"
:scaleType="chartConfig.scaleSelected" :configs="countriesConfig"
:width="260"
:height="100"
/> />
</v-col> <DataLoader
</v-row> v-model="allData"
</v-container> ></DataLoader>
</v-content>
<v-footer app> </v-navigation-drawer>
<v-content>
<v-container class="sfill-height" fluid>
<v-row align="center" justify="center" id="maincontent" ref="maincontent">
<v-col class="shrink">
<MultiCountryChart
:countries="countriesData"
:scaleType="chartConfig.scaleSelected"
:dataType="chartConfig.typeSelected"
:width="chartWidth"
:height="chartWidth * (2/3)"
/>
<MultiBarChartSingle
:countriesData="countriesData"
:scaleType="chartConfig.scaleSelected"
:width="260"
:height="100"
/>
</v-col>
</v-row>
</v-container>
</v-content>
<v-footer app>
<span> <span>
Using <a href="https://vuejs.org/" target="_blank">Vuejs</a> Using <a href="https://vuejs.org/" target="_blank">Vuejs</a>
and <a href="https://d3js.org/" target="_blank">d3</a> - and <a href="https://d3js.org/" target="_blank">d3</a> -
<a href="https://github.com/pomber/covid19" target="_blank">Data source</a> <a href="https://github.com/pomber/covid19" target="_blank">Data source</a>
</span> </span>
</v-footer> </v-footer>
</v-app> </v-app>
</template> </template>
<script> <script>
//import AllData from '../data/timeseries.json' //import AllData from '../data/timeseries.json'
import ChartConfig from './components/ChartConfig' import ChartConfig from './components/ChartConfig'
import CountriesConfig from './components/CountriesConfig' import CountriesConfig from './components/CountriesConfig'
import MultiCountryChart from './components/d3/MultiCountryChart' import MultiCountryChart from './components/d3/MultiCountryChart'
import MultiBarChartSingle from './components/MultiBarChartSingle' import MultiBarChartSingle from './components/MultiBarChartSingle'
import DataLoader from './components/DataLoader' import DataLoader from './components/DataLoader'
let limit = (value, min, max) => { let limit = (value, min, max) => {
return value > max ? max : value < min ? min : value return value > max ? max : value < min ? min : value
} }
limit() limit()
function formatDate(date) { function formatDate(date) {
var d = new Date(date), var d = new Date(date),
month = '' + (d.getMonth() + 1), month = '' + (d.getMonth() + 1),
day = '' + d.getDate(), day = '' + d.getDate(),
year = d.getFullYear(); year = d.getFullYear();
if (month.length < 2) if (month.length < 2)
month = '0' + month; month = '0' + month;
if (day.length < 2) if (day.length < 2)
day = '0' + day; day = '0' + day;
return [year, month, day].join('-'); return [year, month, day].join('-');
} }
export default { const defaultUserConfig = {
name: 'AppVuetify', chartConfig: {
components: {ChartConfig, CountriesConfig, MultiCountryChart, MultiBarChartSingle, DataLoader}, typeSelected: 'confirmed',
props: { scaleSelected: 'linear',
source: String, dayStart: 30,
}, dayEnd: 0,
data: () => ({ ymax: 0,
drawer: true, resetConfig: false,
title: 'Cov Charts', },
allData: {}, countriesConfig: {
chartConfig: { selected: [{name: "France"}, {name: "Italy"}],
typeSelected: 'confirmed', basePalette: "tolRainbowColor"
scaleSelected: 'linear', },
dayStart: 30, }
dayEnd: 0, defaultUserConfig
ymax: 0,
}, export default {
chartWidth: 500, name: 'AppVuetify',
configLists: { components: {ChartConfig, CountriesConfig, MultiCountryChart, MultiBarChartSingle, DataLoader},
scaleList: ['log', 'linear'], props: {
typesList: ['confirmed', 'deaths', 'recovered'], source: String,
}, },
countriesConfig: { data: () => ({
selected: [{name: "France"}, {name: "Italy"}], drawer: true,
basePalette: "tolRainbowColor" title: 'Cov Charts',
allData: {},
}, chartWidth: 500,
countriesLists: { chartConfig: defaultUserConfig.chartConfig,
top: ['Belgium', 'Sweden', 'France', 'Japan', 'Korea, South', 'Russia', 'Germany', 'Spain', 'Italy', 'China', 'United Kingdom', 'US'], countriesConfig: defaultUserConfig.countriesConfig,
// Todo list of all countries using localstorage configLists: {
//all: Object.keys(AllData).sort(), scaleList: ['log', 'linear'],
} typesList: ['confirmed', 'deaths', 'recovered'],
},
}), countriesLists: {
watch: { top: ['Belgium', 'Sweden', 'France', 'Japan', 'Korea, South', 'Russia', 'Germany', 'Spain', 'Italy', 'China', 'United Kingdom', 'US'],
drawer() { // Todo list of all countries using localstorage
console.log('dd', this.drawer) //all: Object.keys(AllData).sort(),
} },
}, }),
created() { watch: {
this.$vuetify.theme.dark = true drawer() {
}, console.log('dd', this.drawer)
mounted() { },
// Todo find a better way to get size countriesConfig: {
//this.chartWidth = this.$refs.maincontent.clientWidth * 2 / 3 handler: function () {
this.saveConfig()
this.chartWidth = 800 },
}, deep: true
computed: { },
chartConfig: {
countriesData() { handler: function (val) {
val.resetConfig ? this.resetConfig() : this.saveConfig()
if (!('France' in this.allData)) { },
return [] deep: true
} },
},
let formatedData = [] created() {
const addSomeDays = false this.$vuetify.theme.dark = true
},
this.countriesConfig.selected.map((country) => { mounted() {
// Todo find a better way to get size
let cdata = JSON.parse(JSON.stringify(this.allData[country.name])) //this.chartWidth = this.$refs.maincontent.clientWidth * 2 / 3
let itemsCount = cdata.length this.chartWidth = 800
let filtered = cdata.filter((e, i) => this.loadConfig()
i >= (this.chartConfig.dayStart - 1) &&
i < (itemsCount - this.chartConfig.dayEnd)) },
methods: {
if (addSomeDays) { loadConfig() {
// Adding addDays data points
let datebase = new Date(filtered.slice(-1)[0].date) let uc = localStorage.getItem('userConfig')
for (let i = 0; i < this.chartConfig.addDays; i++) { if (uc && uc !== 'null') {
let dd = new Date(datebase.getFullYear(), datebase.getMonth(), datebase.getDate() + i); uc = JSON.parse(uc)
filtered.push({ this.countriesConfig = uc.countriesConfig
date: formatDate(dd), this.chartConfig = uc.chartConfig
deaths: undefined, } else {
recovered: undefined, this.countriesConfig = defaultUserConfig.countriesConfig
confirmed: undefined, this.chartConfig = defaultUserConfig.chartConfig
}) }
} },
} saveConfig() {
let userConfig = {countriesConfig: this.countriesConfig, chartConfig: this.chartConfig}
if (this.chartConfig.ymax > 0) { localStorage.setItem('userConfig', JSON.stringify(userConfig))
filtered = filtered.map((d) => { },
this.configLists.typesList.map(e => { resetConfig() {
d[e] = d[e] > this.chartConfig.ymax ? this.chartConfig.ymax : d[e] localStorage.setItem('userConfig', 'null')
}) this.loadConfig()
return d },
}) },
} computed: {
// // Get ymax countriesData() {
// filtered.map(d => {
// ymax = d[this.dataSelected] > ymax ? d[this.dataSelected] : ymax if (!('France' in this.allData)) {
// }) return []
}
country.list = filtered
formatedData.push(country) let formatedData = []
}) const addSomeDays = false
return formatedData this.countriesConfig.selected.map((country) => {
}
let cdata = JSON.parse(JSON.stringify(this.allData[country.name]))
let itemsCount = cdata.length
let filtered = cdata.filter((e, i) =>
i >= (this.chartConfig.dayStart - 1) &&
i < (itemsCount - this.chartConfig.dayEnd))
if (addSomeDays) {
// Adding addDays data points
let datebase = new Date(filtered.slice(-1)[0].date)
for (let i = 0; i < this.chartConfig.addDays; i++) {
let dd = new Date(datebase.getFullYear(), datebase.getMonth(), datebase.getDate() + i);
filtered.push({
date: formatDate(dd),
deaths: undefined,
recovered: undefined,
confirmed: undefined,
})
}
}
if (this.chartConfig.ymax > 0) {
filtered = filtered.map((d) => {
this.configLists.typesList.map(e => {
d[e] = d[e] > this.chartConfig.ymax ? this.chartConfig.ymax : d[e]
})
return d
})
}
// // Get ymax
// filtered.map(d => {
// ymax = d[this.dataSelected] > ymax ? d[this.dataSelected] : ymax
// })
country.list = filtered
formatedData.push(country)
})
return formatedData
}
}
} }
}
</script> </script>
<style> <style>
html, body { html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
font-size: 12px; font-size: 12px;
} }
input, select, .v-input { input, select, .v-input {
font-size: 12px; font-size: 12px;
} }
</style> </style>

30
src/components/ChartConfig.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<v-list dense> <v-list dense >
<v-list-item> <v-list-item>
<v-list-item-action> Scale</v-list-item-action> <v-list-item-action> Scale</v-list-item-action>
@ -70,6 +70,15 @@
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
<v-list-item>
<v-list-item-action></v-list-item-action>
<v-list-item-content>
<v-btn @click="resetConfig()"
x-small
>Reset
</v-btn>
</v-list-item-content>
</v-list-item>
</v-list> </v-list>
</div> </div>
</template> </template>
@ -83,16 +92,15 @@
props: ['configs', 'configLists'], props: ['configs', 'configLists'],
components: {Counter}, components: {Counter},
data() { data() {
return {} return {
},
watch: {
config(prev,neww){
if (prev.ymax !== neww.ymax){
console.log('new y',neww.ymax)
}
} }
}, },
methods: {}, methods: {
resetConfig() {
this.configs.resetConfig = true
}
},
computed: { }
} }
</script> </script>
@ -103,8 +111,8 @@
margin: 0px; margin: 0px;
} }
.ymax{ .ymax {
max-width:50%; max-width: 50%;
} }
</style> </style>

12
src/components/CountriesConfig.vue
View File

@ -17,8 +17,7 @@
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
<v-list-item v-for="(cinfo,id) in getSelected" :key="id" class="countryLine">
<v-list-item v-for="(cinfo,id) in configs.selected" :key="id" class="countryLine">
<v-list-item-action> <v-list-item-action>
<v-btn fab dark x-small <v-btn fab dark x-small
@click="removeCountry(cinfo.name)"> @click="removeCountry(cinfo.name)">
@ -60,15 +59,11 @@
// TODO : change the base list used for countries // TODO : change the base list used for countries
} }
}, },
created() {
this.setColors();
},
watch: { watch: {
selected() { selected() {
if (this.selected === '') return // prevent the reset in this function if (this.selected === '') return // prevent the reset in this function
if (this.configs.selected.map(d => d.name).indexOf(this.selected) === -1) { if (this.configs.selected.map(d => d.name).indexOf(this.selected) === -1) {
this.configs.selected.push({name: this.selected}) this.configs.selected.push({name: this.selected})
this.setColors()
} }
this.addCountry = !this.addCountry this.addCountry = !this.addCountry
this.selected = '' this.selected = ''
@ -90,6 +85,11 @@
}, },
}, },
computed: { computed: {
// Add colors with selected
getSelected(){
this.setColors()
return this.configs.selected
},
getActiveCountries() { getActiveCountries() {
// TODO filter out selected countries // TODO filter out selected countries
return [] return []

4
src/components/d3/MultiCountryChart.vue
View File

@ -91,11 +91,9 @@
}, },
mounted() { mounted() {
this.drawAxis() this.drawAxis()
console.log('dataType', this.dataType)
}, },
watch: { watch: {
scaleType(neww) { scaleType() {
console.log('', neww)
this.drawAxis() this.drawAxis()
}, },
countries() { countries() {