v0.04 Fix reset

This commit is contained in:
T__o 2020-04-30 19:04:06 +02:00
parent 2aa8293849
commit 458b5c45b7
6 changed files with 35 additions and 34 deletions

View File

@ -10,8 +10,9 @@ Data source from : https://github.com/pomber/covid19
## Features : ## Features :
- Maths functions : Exp, pow, Logistic
- sync X axis at a value - sync X axis at a value
- reset (broken, need reload page too) - reset
- set a limit for y axis - set a limit for y axis
- select first and last day - select first and last day
- select data source (confirmed, deaths, recovered) - select data source (confirmed, deaths, recovered)

View File

@ -3,14 +3,7 @@
## First production : ## First production :
OK load data source User Local Presets (N)
OK git clean
vuejs prod
hosting
Save user config to local
reset mode
Charts modes: Charts modes:
- Country day decal - Country day decal

2
doc.md
View File

@ -3,6 +3,8 @@
# Changelog # Changelog
v0.04 Fix reset
v0.03 maths functions
v0.02 sync x axis v0.02 sync x axis
v0.01 repack, data auto loading v0.01 repack, data auto loading

View File

@ -125,7 +125,7 @@
}, },
}, },
countriesConfig: { countriesConfig: {
selected: [{name: "France"}, {name: "Italy"}], selected: [{name: "France"}, {name: "Italy"},{name:"Spain"},{name:"United Kingdom"}],
basePalette: "tolRainbowColor" basePalette: "tolRainbowColor"
}, },
} }
@ -137,13 +137,13 @@
props: { props: {
source: String, source: String,
}, },
data: () => ({ data () { return {
drawer: true, drawer: true,
title: 'Cov Charts', title: 'Cov Charts',
allData: {}, allData: {},
chartWidth: 500, chartWidth: 500,
chartConfig: defaultUserConfig.chartConfig, chartConfig: Object.assign({},defaultUserConfig.chartConfig),
countriesConfig: defaultUserConfig.countriesConfig, countriesConfig:Object.assign({}, defaultUserConfig.countriesConfig),
configLists: { configLists: {
scaleList: ['log', 'linear'], scaleList: ['log', 'linear'],
typesList: ['confirmed', 'deaths', 'recovered'], typesList: ['confirmed', 'deaths', 'recovered'],
@ -154,7 +154,7 @@
//all: Object.keys(AllData).sort(), //all: Object.keys(AllData).sort(),
}, },
debug: false, debug: false,
}), }},
watch: { watch: {
drawer() { drawer() {
console.log('dd', this.drawer) console.log('dd', this.drawer)
@ -189,25 +189,21 @@
uc = JSON.parse(uc) uc = JSON.parse(uc)
this.countriesConfig = uc.countriesConfig this.countriesConfig = uc.countriesConfig
this.chartConfig = uc.chartConfig this.chartConfig = uc.chartConfig
this.ccc("loadConfig storage")
} else { } else {
this.countriesConfig = defaultUserConfig.countriesConfig this.countriesConfig = Object.assign({},defaultUserConfig.countriesConfig)
this.chartConfig = defaultUserConfig.chartConfig this.chartConfig = Object.assign({},defaultUserConfig.chartConfig)
this.ccc("loadConfig default")
} }
}, },
saveConfig() { saveConfig() {
this.ccc("saveConfig")
let userConfig = {countriesConfig: this.countriesConfig, chartConfig: this.chartConfig} let userConfig = {countriesConfig: this.countriesConfig, chartConfig: this.chartConfig}
localStorage.setItem('userConfig', JSON.stringify(userConfig)) localStorage.setItem('userConfig', JSON.stringify(userConfig))
}, },
resetConfig() { resetConfig() {
localStorage.setItem('userConfig', 'null') localStorage.setItem('userConfig', 'null')
this.ccc("resetConfig")
this.loadConfig() this.loadConfig()
}, },
ccc(a, b) { ccc(a, b) {
if (this.debug) console.log(a, b) if (this.debug) console.log(a, b?b:'')
}, },
addMathFunctions(cdata, ymax) { addMathFunctions(cdata, ymax) {
@ -388,6 +384,9 @@
padding: 2px 0; padding: 2px 0;
} }
.v-list-item__action{
margin: 8px 0;
}
.v-text-field.v-text-field--solo .v-input__control { .v-text-field.v-text-field--solo .v-input__control {
min-height: 20px; min-height: 20px;
} }

View File

@ -88,7 +88,7 @@
<v-list-item> <v-list-item>
<v-list-item-action> <v-list-item-action>
Maths <b>Maths Functions</b>
</v-list-item-action> </v-list-item-action>
</v-list-item> </v-list-item>

View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="'counter '+ classname"> <div :class="'counter '+ classname">
<button @click="click(-1)" class="bleft">-</button> <button @click="click(-1)" class="bleft">-</button>
<span>{{value}}</span> <span>{{input}}</span>
<button @click="click(1)" class="bright">+</button> <button @click="click(1)" class="bright">+</button>
</div> </div>
</template> </template>
@ -17,18 +17,16 @@
classname: {type: String, default: 'themeGreen'}, classname: {type: String, default: 'themeGreen'},
}, },
data() { data() {
return { return {}
value: this.input,
}
}, },
methods: { methods: {
click(dirfactor) { click(dirfactor) {
this.value = this.value + (dirfactor * this.inc) let input = this.input + (dirfactor * this.inc)
if (this.value > this.max) this.value = this.max if (input > this.max) input = this.max
if (this.value < this.min) this.value = this.min if (input < this.min) input = this.min
this.$emit('input', this.value) this.$emit('input', input)
}
} }
},
} }
</script> </script>
@ -51,9 +49,11 @@
border: 0px solid red; border: 0px solid red;
border-radius: 5px; border-radius: 5px;
} }
.bleft { .bleft {
margin-right: 3px; margin-right: 3px;
} }
.bright { .bright {
margin-left: 3px; margin-left: 3px;
} }
@ -61,14 +61,17 @@
.themeGreen.counter { .themeGreen.counter {
border: 1px solid #2c3e50; border: 1px solid #2c3e50;
background: #d3e3e0; background: #d3e3e0;
color:white; color: white;
} }
.themeGreen.counter button { .themeGreen.counter button {
background: #d3e3e0; background: #d3e3e0;
} }
.themeGreen .bleft { .themeGreen .bleft {
border-right: 1px solid #2c3e50; border-right: 1px solid #2c3e50;
} }
.themeGreen .bright { .themeGreen .bright {
border-left: 1px solid #2c3e50; border-left: 1px solid #2c3e50;
} }
@ -76,16 +79,19 @@
.themeGrey.counter { .themeGrey.counter {
border: 0px solid #8ecaf9; border: 0px solid #8ecaf9;
background: inherit; background: inherit;
color:white; color: white;
} }
.themeGrey.counter button { .themeGrey.counter button {
background: #767676; background: #767676;
width: 18px; width: 18px;
line-height: 18px; line-height: 18px;
} }
.themeGrey .bleft { .themeGrey .bleft {
border-right: 0px solid #8ecaf9; border-right: 0px solid #8ecaf9;
} }
.themeGrey .bright { .themeGrey .bright {
border-left: 0px solid #8ecaf9; border-left: 0px solid #8ecaf9;
} }