local config with reset (buggy)

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

View File

@ -3,22 +3,27 @@
## 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
on load Charts modes:
if delay > 1hour : reload data - Country day decal
- sync on first day at xxx
- divide by country population
### Data source
Data source : Data source :
https://github.com/pomber/covid19 https://github.com/pomber/covid19

View File

@ -16,7 +16,6 @@
<ChartConfig <ChartConfig
:configs="chartConfig" :configs="chartConfig"
:configLists="configLists" :configLists="configLists"
v-model="chartConfig"
/> />
<CountriesConfig <CountriesConfig
@ -96,6 +95,22 @@
} }
const defaultUserConfig = {
chartConfig: {
typeSelected: 'confirmed',
scaleSelected: 'linear',
dayStart: 30,
dayEnd: 0,
ymax: 0,
resetConfig: false,
},
countriesConfig: {
selected: [{name: "France"}, {name: "Italy"}],
basePalette: "tolRainbowColor"
},
}
defaultUserConfig
export default { export default {
name: 'AppVuetify', name: 'AppVuetify',
components: {ChartConfig, CountriesConfig, MultiCountryChart, MultiBarChartSingle, DataLoader}, components: {ChartConfig, CountriesConfig, MultiCountryChart, MultiBarChartSingle, DataLoader},
@ -106,34 +121,35 @@
drawer: true, drawer: true,
title: 'Cov Charts', title: 'Cov Charts',
allData: {}, allData: {},
chartConfig: {
typeSelected: 'confirmed',
scaleSelected: 'linear',
dayStart: 30,
dayEnd: 0,
ymax: 0,
},
chartWidth: 500, chartWidth: 500,
chartConfig: defaultUserConfig.chartConfig,
countriesConfig: defaultUserConfig.countriesConfig,
configLists: { configLists: {
scaleList: ['log', 'linear'], scaleList: ['log', 'linear'],
typesList: ['confirmed', 'deaths', 'recovered'], typesList: ['confirmed', 'deaths', 'recovered'],
}, },
countriesConfig: {
selected: [{name: "France"}, {name: "Italy"}],
basePalette: "tolRainbowColor"
},
countriesLists: { countriesLists: {
top: ['Belgium', 'Sweden', 'France', 'Japan', 'Korea, South', 'Russia', 'Germany', 'Spain', 'Italy', 'China', 'United Kingdom', 'US'], top: ['Belgium', 'Sweden', 'France', 'Japan', 'Korea, South', 'Russia', 'Germany', 'Spain', 'Italy', 'China', 'United Kingdom', 'US'],
// Todo list of all countries using localstorage // Todo list of all countries using localstorage
//all: Object.keys(AllData).sort(), //all: Object.keys(AllData).sort(),
} },
}), }),
watch: { watch: {
drawer() { drawer() {
console.log('dd', this.drawer) console.log('dd', this.drawer)
} },
countriesConfig: {
handler: function () {
this.saveConfig()
},
deep: true
},
chartConfig: {
handler: function (val) {
val.resetConfig ? this.resetConfig() : this.saveConfig()
},
deep: true
},
}, },
created() { created() {
this.$vuetify.theme.dark = true this.$vuetify.theme.dark = true
@ -141,11 +157,33 @@
mounted() { mounted() {
// Todo find a better way to get size // Todo find a better way to get size
//this.chartWidth = this.$refs.maincontent.clientWidth * 2 / 3 //this.chartWidth = this.$refs.maincontent.clientWidth * 2 / 3
this.chartWidth = 800 this.chartWidth = 800
this.loadConfig()
},
methods: {
loadConfig() {
let uc = localStorage.getItem('userConfig')
if (uc && uc !== 'null') {
uc = JSON.parse(uc)
this.countriesConfig = uc.countriesConfig
this.chartConfig = uc.chartConfig
} else {
this.countriesConfig = defaultUserConfig.countriesConfig
this.chartConfig = defaultUserConfig.chartConfig
}
},
saveConfig() {
let userConfig = {countriesConfig: this.countriesConfig, chartConfig: this.chartConfig}
localStorage.setItem('userConfig', JSON.stringify(userConfig))
},
resetConfig() {
localStorage.setItem('userConfig', 'null')
this.loadConfig()
},
}, },
computed: { computed: {
countriesData() { countriesData() {
if (!('France' in this.allData)) { if (!('France' in this.allData)) {

View File

@ -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>

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 []

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() {