v0.03 maths functions

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
+                    // 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
                     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{
+    .v-text-field.v-text-field--solo .v-input__control {
-        min-height:20px;
+        min-height: 20px;
     }
 
 </style>

src/components/ChartConfig.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
 
-        <v-list dense >
+        <v-list dense>
 
             <v-list-item>
                 <v-list-item-action>Scale</v-list-item-action>
@@ -17,7 +17,6 @@
             </v-list-item>
 
 
-
             <v-list-item>
                 <v-list-item-action>Type</v-list-item-action>
                 <v-list-item-content>
@@ -57,7 +56,7 @@
             </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-text-field
                             class="numField"
@@ -73,7 +72,7 @@
 
 
             <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-text-field
                             class="numField"
@@ -87,6 +86,105 @@
             </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-action></v-list-item-action>
                 <v-list-item-content>
@@ -96,6 +194,8 @@
                     </v-btn>
                 </v-list-item-content>
             </v-list-item>
+
+
         </v-list>
     </div>
 </template>
@@ -109,12 +209,11 @@
         props: ['configs', 'configLists'],
         components: {Counter},
         data() {
-            return {
+            return {}
-            }
         },
-        watch:{
+        watch: {
-            'configs.syncSince': function(value){
+            'configs.syncSince': function (value) {
-                if ( ! (value > 0 ) ){
+                if (!(value > 0)) {
                     this.configs.syncSince = 0
                 }
             }
@@ -124,7 +223,7 @@
                 this.configs.resetConfig = true
             }
         },
-        computed: { }
+        computed: {}
     }
 </script>
 
@@ -139,5 +238,9 @@
         max-width: 50%;
     }
 
+    .numFieldsm {
+        max-width: 50px;
+    }
+
 
 </style>

src/components/MultiBarChartSingle.vue

@@ -18,7 +18,7 @@
             </div>
 
             <div v-for="(cinfo,id) in countriesData" :key="'ns'+id">
-                <div class="chartBlock">
+                <div class="chartBlock"  v-if="!cinfo.isMaths">
                     <BarChartSingle
                             :dataType="dtype"
                             :country="cinfo.name"