From 2aa82938495134733be78f78a054b76e8d85389e Mon Sep 17 00:00:00 2001 From: T__o Date: Thu, 30 Apr 2020 17:57:21 +0200 Subject: [PATCH] v0.03 maths functions --- src/App.vue | 130 +++++++++++++++++++++++-- src/components/ChartConfig.vue | 123 +++++++++++++++++++++-- src/components/MultiBarChartSingle.vue | 2 +- 3 files changed, 234 insertions(+), 21 deletions(-) diff --git a/src/App.vue b/src/App.vue index 063162a..02f4c7e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -106,6 +106,23 @@ 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"}], @@ -192,6 +209,92 @@ ccc(a, 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() { @@ -205,6 +308,7 @@ let formatedData = [] const addSomeDays = false + let ymax = 0 this.countriesConfig.selected.map((country) => { @@ -246,14 +350,19 @@ } } - // // Get ymax - // filtered.map(d => { - // ymax = d[this.dataSelected] > ymax ? d[this.dataSelected] : ymax - // }) + // Get ymax + + filtered.map(d => { + ymax = d[this.chartConfig.typeSelected] > ymax ? d[this.chartConfig.typeSelected] : ymax + }) country.list = filtered formatedData.push(country) }) + + + formatedData = this.addMathFunctions(formatedData, ymax) + return formatedData } } @@ -267,19 +376,20 @@ font-size: 12px; } - input, select, .v-input , .v-label{ + input, select, .v-input, .v-label { font-size: 13px; } - .v-list--dense .v-list-item{ + .v-list--dense .v-list-item { min-height: 20px; } - .v-list--dense .v-list-item .v-list-item__content{ - padding:2px 0; + + .v-list--dense .v-list-item .v-list-item__content { + padding: 2px 0; } - .v-text-field.v-text-field--solo .v-input__control{ - min-height:20px; + .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 70cd74c..9feb22a 100644 --- a/src/components/ChartConfig.vue +++ b/src/components/ChartConfig.vue @@ -1,7 +1,7 @@ @@ -109,12 +209,11 @@ 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 } } @@ -124,7 +223,7 @@ this.configs.resetConfig = true } }, - computed: { } + computed: {} } @@ -139,5 +238,9 @@ 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 5c29cc9..8998803 100644 --- a/src/components/MultiBarChartSingle.vue +++ b/src/components/MultiBarChartSingle.vue @@ -18,7 +18,7 @@
-
+