v0.03 maths functions
This commit is contained in:
parent
53dc1ca367
commit
2aa8293849
130
src/App.vue
130
src/App.vue
@ -106,6 +106,23 @@
|
|||||||
ymax: 0,
|
ymax: 0,
|
||||||
syncSince: 0,
|
syncSince: 0,
|
||||||
resetConfig: false,
|
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: {
|
countriesConfig: {
|
||||||
selected: [{name: "France"}, {name: "Italy"}],
|
selected: [{name: "France"}, {name: "Italy"}],
|
||||||
@ -192,6 +209,92 @@
|
|||||||
ccc(a, b) {
|
ccc(a, b) {
|
||||||
if (this.debug) console.log(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: {
|
computed: {
|
||||||
syncSinceInt() {
|
syncSinceInt() {
|
||||||
@ -205,6 +308,7 @@
|
|||||||
|
|
||||||
let formatedData = []
|
let formatedData = []
|
||||||
const addSomeDays = false
|
const addSomeDays = false
|
||||||
|
let ymax = 0
|
||||||
|
|
||||||
this.countriesConfig.selected.map((country) => {
|
this.countriesConfig.selected.map((country) => {
|
||||||
|
|
||||||
@ -246,14 +350,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// // Get ymax
|
// Get ymax
|
||||||
// filtered.map(d => {
|
|
||||||
// ymax = d[this.dataSelected] > ymax ? d[this.dataSelected] : ymax
|
filtered.map(d => {
|
||||||
// })
|
ymax = d[this.chartConfig.typeSelected] > ymax ? d[this.chartConfig.typeSelected] : ymax
|
||||||
|
})
|
||||||
|
|
||||||
country.list = filtered
|
country.list = filtered
|
||||||
formatedData.push(country)
|
formatedData.push(country)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
formatedData = this.addMathFunctions(formatedData, ymax)
|
||||||
|
|
||||||
return formatedData
|
return formatedData
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -267,19 +376,20 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, select, .v-input , .v-label{
|
input, select, .v-input, .v-label {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-list--dense .v-list-item{
|
.v-list--dense .v-list-item {
|
||||||
min-height: 20px;
|
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{
|
.v-text-field.v-text-field--solo .v-input__control {
|
||||||
min-height:20px;
|
min-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<v-list dense >
|
<v-list dense>
|
||||||
|
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action>Scale</v-list-item-action>
|
<v-list-item-action>Scale</v-list-item-action>
|
||||||
@ -17,7 +17,6 @@
|
|||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action>Type</v-list-item-action>
|
<v-list-item-action>Type</v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
@ -57,7 +56,7 @@
|
|||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action>Sync X </v-list-item-action>
|
<v-list-item-action>Sync X</v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
class="numField"
|
class="numField"
|
||||||
@ -73,7 +72,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action>Limit Y </v-list-item-action>
|
<v-list-item-action>Limit Y</v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
class="numField"
|
class="numField"
|
||||||
@ -87,6 +86,105 @@
|
|||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
|
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-action>
|
||||||
|
Maths
|
||||||
|
</v-list-item-action>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<v-list-item>
|
||||||
|
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-switch
|
||||||
|
label=" Exp"
|
||||||
|
v-model="configs.math.exp.display"
|
||||||
|
color="blue-grey darken-1"
|
||||||
|
></v-switch>
|
||||||
|
</v-list-item-action>
|
||||||
|
|
||||||
|
<v-list-item-content v-if="configs.math.exp.display">
|
||||||
|
F:
|
||||||
|
<v-text-field
|
||||||
|
class="numFieldsm"
|
||||||
|
v-model="configs.math.exp.factor"
|
||||||
|
label="Factor"
|
||||||
|
solo
|
||||||
|
hide-details
|
||||||
|
single-line
|
||||||
|
/>
|
||||||
|
D:
|
||||||
|
<v-text-field
|
||||||
|
class="numFieldsm"
|
||||||
|
v-model="configs.math.exp.dayPrev"
|
||||||
|
label="Days"
|
||||||
|
solo
|
||||||
|
hide-details
|
||||||
|
single-line
|
||||||
|
/>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<v-list-item>
|
||||||
|
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-switch
|
||||||
|
label=" Pow"
|
||||||
|
v-model="configs.math.pow.display"
|
||||||
|
color="blue-grey darken-1"
|
||||||
|
></v-switch>
|
||||||
|
</v-list-item-action>
|
||||||
|
|
||||||
|
<v-list-item-content v-if="configs.math.pow.display">
|
||||||
|
F:
|
||||||
|
<v-text-field
|
||||||
|
class="numFieldsm"
|
||||||
|
v-model="configs.math.pow.factor"
|
||||||
|
solo
|
||||||
|
hide-details
|
||||||
|
single-line
|
||||||
|
/>
|
||||||
|
D:
|
||||||
|
<v-text-field
|
||||||
|
class="numFieldsm"
|
||||||
|
v-model="configs.math.pow.dayPrev"
|
||||||
|
solo
|
||||||
|
hide-details
|
||||||
|
single-line
|
||||||
|
/>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
|
||||||
|
<v-list-item>
|
||||||
|
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-switch
|
||||||
|
label=" Logi"
|
||||||
|
v-model="configs.math.logi.display"
|
||||||
|
color="blue-grey darken-1"
|
||||||
|
></v-switch>
|
||||||
|
</v-list-item-action>
|
||||||
|
|
||||||
|
<v-list-item-content v-if="configs.math.logi.display">
|
||||||
|
F:
|
||||||
|
<v-text-field
|
||||||
|
class="numFieldsm"
|
||||||
|
v-model="configs.math.logi.factor"
|
||||||
|
solo
|
||||||
|
hide-details
|
||||||
|
single-line
|
||||||
|
/>
|
||||||
|
D:
|
||||||
|
<v-text-field
|
||||||
|
class="numFieldsm"
|
||||||
|
v-model="configs.math.logi.dayPrev"
|
||||||
|
solo
|
||||||
|
hide-details
|
||||||
|
single-line
|
||||||
|
/>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-action></v-list-item-action>
|
<v-list-item-action></v-list-item-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
@ -96,6 +194,8 @@
|
|||||||
</v-btn>
|
</v-btn>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
|
|
||||||
</v-list>
|
</v-list>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -109,12 +209,11 @@
|
|||||||
props: ['configs', 'configLists'],
|
props: ['configs', 'configLists'],
|
||||||
components: {Counter},
|
components: {Counter},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {}
|
||||||
}
|
|
||||||
},
|
},
|
||||||
watch:{
|
watch: {
|
||||||
'configs.syncSince': function(value){
|
'configs.syncSince': function (value) {
|
||||||
if ( ! (value > 0 ) ){
|
if (!(value > 0)) {
|
||||||
this.configs.syncSince = 0
|
this.configs.syncSince = 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -124,7 +223,7 @@
|
|||||||
this.configs.resetConfig = true
|
this.configs.resetConfig = true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: { }
|
computed: {}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -139,5 +238,9 @@
|
|||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.numFieldsm {
|
||||||
|
max-width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -18,7 +18,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-for="(cinfo,id) in countriesData" :key="'ns'+id">
|
<div v-for="(cinfo,id) in countriesData" :key="'ns'+id">
|
||||||
<div class="chartBlock">
|
<div class="chartBlock" v-if="!cinfo.isMaths">
|
||||||
<BarChartSingle
|
<BarChartSingle
|
||||||
:dataType="dtype"
|
:dataType="dtype"
|
||||||
:country="cinfo.name"
|
:country="cinfo.name"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user