local config with reset (buggy)
This commit is contained in:
parent
c4db1aa587
commit
429d0d59a9
21
brain.md
21
brain.md
@ -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
|
||||||
|
|
||||||
|
74
src/App.vue
74
src/App.vue
@ -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)) {
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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 []
|
||||||
|
@ -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() {
|
||||||
|
Loading…
Reference in New Issue
Block a user