diff --git a/README.md b/README.md index e053966..5987f8b 100644 --- a/README.md +++ b/README.md @@ -10,9 +10,8 @@ Data source from : https://github.com/pomber/covid19 ## Features : -- Maths functions : Exp, pow, Logistic - sync X axis at a value -- reset +- reset (broken, need reload page too) - set a limit for y axis - select first and last day - select data source (confirmed, deaths, recovered) diff --git a/brain.md b/brain.md index 51f8173..5f00766 100644 --- a/brain.md +++ b/brain.md @@ -3,7 +3,14 @@ ## First production : -User Local Presets (N) +OK load data source +OK git clean +vuejs prod +hosting + + +Save user config to local +reset mode Charts modes: - Country day decal diff --git a/doc.md b/doc.md index f7122a5..51cd3b1 100644 --- a/doc.md +++ b/doc.md @@ -3,8 +3,6 @@ # Changelog -v0.04 Fix reset -v0.03 maths functions v0.02 sync x axis v0.01 repack, data auto loading diff --git a/src/App.vue b/src/App.vue index ec9b7d7..446abcb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -106,26 +106,9 @@ ymax: 0, syncSince: 0, resetConfig: false, - math: { - exp: { - display: false, - factor: 6.5, - dayPrev: 26 - }, - pow: { - display: false, - factor: 3, - dayPrev: 5 - }, - logi: { - display: false, - factor:0.15, - dayPrev: 42 - }, - }, }, countriesConfig: { - selected: [{name: "France"}, {name: "Italy"},{name:"Spain"},{name:"United Kingdom"}], + selected: [{name: "France"}, {name: "Italy"}], basePalette: "tolRainbowColor" }, } @@ -137,13 +120,13 @@ props: { source: String, }, - data () { return { + data: () => ({ drawer: true, title: 'Cov Charts', allData: {}, chartWidth: 500, - chartConfig: Object.assign({},defaultUserConfig.chartConfig), - countriesConfig:Object.assign({}, defaultUserConfig.countriesConfig), + chartConfig: defaultUserConfig.chartConfig, + countriesConfig: defaultUserConfig.countriesConfig, configLists: { scaleList: ['log', 'linear'], typesList: ['confirmed', 'deaths', 'recovered'], @@ -154,7 +137,7 @@ //all: Object.keys(AllData).sort(), }, debug: false, - }}, + }), watch: { drawer() { console.log('dd', this.drawer) @@ -189,108 +172,26 @@ uc = JSON.parse(uc) this.countriesConfig = uc.countriesConfig this.chartConfig = uc.chartConfig + this.ccc("loadConfig storage") } else { - this.countriesConfig = Object.assign({},defaultUserConfig.countriesConfig) - this.chartConfig = Object.assign({},defaultUserConfig.chartConfig) + this.countriesConfig = defaultUserConfig.countriesConfig + this.chartConfig = defaultUserConfig.chartConfig + this.ccc("loadConfig default") } }, saveConfig() { + this.ccc("saveConfig") let userConfig = {countriesConfig: this.countriesConfig, chartConfig: this.chartConfig} localStorage.setItem('userConfig', JSON.stringify(userConfig)) }, resetConfig() { localStorage.setItem('userConfig', 'null') + this.ccc("resetConfig") this.loadConfig() }, ccc(a, b) { - if (this.debug) console.log(a, b?b:'') + if (this.debug) console.log(a, b) }, - - addMathFunctions(cdata, ymax) { - let cc = this.chartConfig.math - // Pow - if (cc.pow.display) { - cdata.push(this.calcFunction(cdata, - 'pow3', - '#ffc500', - i => limit(Math.pow(i - parseInt(cc.pow.dayPrev), parseFloat(cc.pow.factor)), 1, ymax) - )) - } - - // Exp - if (cc.exp.display) { - cdata.push(this.calcFunction(cdata, - 'exp', - '#fd1e00', - i => limit(Math.exp((i + parseInt(cc.exp.dayPrev)) / parseFloat(cc.exp.factor)), 1, ymax) - )) - } - - - if (cc.logi.display) { - // Logistic function - let L = ymax - let k = parseFloat(cc.logi.factor) - let xo = parseInt(cc.logi.dayPrev) - cdata.push(this.calcFunction(cdata, - 'logistic', - 'rgb(253,130,0)', - //i => limit(L / (1 + Math.exp(Math.E, -k*(i - xo))), 1, 60000) - i => limit(L / (1 + Math.exp(-k * (i - xo))), 0, ymax) - )) - } - - return cdata - - }, - calcFunction(cdata, name, color, callback) { - return { - country: name, - color: color, - isMaths: true, - list: cdata[0].list.map((day, id) => { - return { - confirmed: callback(id), - date: day.date - } - }) - } - - }, - calculateLog(cdata, ymax) { - - console.log(' calculateLog',) - let max = ymax - let dayDecal = 2 - - let pointsCount = cdata[0].list.length - let e = Math.log(max) - let step = e / pointsCount - - step , dayDecal; - let getY = i => { - i = i === 0 ? 0.5 : i - let value = Math.exp((i + dayDecal) * step) - //let value = Math.pow((i), 3) - - return value < max ? value : undefined - } - let pointList = cdata[0].list.map((d, i) => { - return { - confirmed: getY(i), - date: d.date - } - }) - let log = { - country: "log", - color: '#FFCC00', - list: pointList - } - cdata.push(log) - - return cdata - }, - }, computed: { syncSinceInt() { @@ -304,7 +205,6 @@ let formatedData = [] const addSomeDays = false - let ymax = 0 this.countriesConfig.selected.map((country) => { @@ -346,19 +246,14 @@ } } - // Get ymax - - filtered.map(d => { - ymax = d[this.chartConfig.typeSelected] > ymax ? d[this.chartConfig.typeSelected] : ymax - }) + // // Get ymax + // filtered.map(d => { + // ymax = d[this.dataSelected] > ymax ? d[this.dataSelected] : ymax + // }) country.list = filtered formatedData.push(country) }) - - - formatedData = this.addMathFunctions(formatedData, ymax) - return formatedData } } @@ -372,23 +267,9 @@ font-size: 12px; } - input, select, .v-input, .v-label { - font-size: 13px; + input, select, .v-input { + font-size: 12px; } - .v-list--dense .v-list-item { - min-height: 20px; - } - - .v-list--dense .v-list-item .v-list-item__content { - padding: 2px 0; - } - - .v-list-item__action{ - margin: 8px 0; - } - .v-text-field.v-text-field--solo .v-input__control { - min-height: 20px; - } diff --git a/src/components/ChartConfig.vue b/src/components/ChartConfig.vue index ba8f534..45922e3 100644 --- a/src/components/ChartConfig.vue +++ b/src/components/ChartConfig.vue @@ -1,7 +1,7 @@ @@ -209,11 +109,12 @@ props: ['configs', 'configLists'], components: {Counter}, data() { - return {} + return { + } }, - watch: { - 'configs.syncSince': function (value) { - if (!(value > 0)) { + watch:{ + 'configs.syncSince': function(value){ + if ( ! (value > 0 ) ){ this.configs.syncSince = 0 } } @@ -223,7 +124,7 @@ this.configs.resetConfig = true } }, - computed: {} + computed: { } } @@ -238,9 +139,4 @@ max-width: 50%; } - .numFieldsm { - max-width: 50px; - } - - \ No newline at end of file diff --git a/src/components/MultiBarChartSingle.vue b/src/components/MultiBarChartSingle.vue index 8998803..5c29cc9 100644 --- a/src/components/MultiBarChartSingle.vue +++ b/src/components/MultiBarChartSingle.vue @@ -18,7 +18,7 @@
-
+
- {{input}} + {{value}}
@@ -17,16 +17,18 @@ classname: {type: String, default: 'themeGreen'}, }, data() { - return {} + return { + value: this.input, + } }, methods: { click(dirfactor) { - let input = this.input + (dirfactor * this.inc) - if (input > this.max) input = this.max - if (input < this.min) input = this.min - this.$emit('input', input) + this.value = this.value + (dirfactor * this.inc) + if (this.value > this.max) this.value = this.max + if (this.value < this.min) this.value = this.min + this.$emit('input', this.value) } - }, + } } @@ -42,18 +44,16 @@ padding: 0; width: 15px; line-height: 15px; - /*/margin: 0 px 3 px 0 px 3 px;*/ + /*/margin: 0 px 3 px 0 px 3 px;*/ } .bleft, .bright { border: 0px solid red; border-radius: 5px; } - .bleft { margin-right: 3px; } - .bright { margin-left: 3px; } @@ -61,17 +61,14 @@ .themeGreen.counter { border: 1px solid #2c3e50; background: #d3e3e0; - color: white; + color:white; } - .themeGreen.counter button { background: #d3e3e0; } - .themeGreen .bleft { border-right: 1px solid #2c3e50; } - .themeGreen .bright { border-left: 1px solid #2c3e50; } @@ -79,19 +76,16 @@ .themeGrey.counter { border: 0px solid #8ecaf9; background: inherit; - color: white; + color:white; } - .themeGrey.counter button { background: #767676; width: 18px; line-height: 18px; } - .themeGrey .bleft { border-right: 0px solid #8ecaf9; } - .themeGrey .bright { border-left: 0px solid #8ecaf9; }