local config with reset (buggy)

brain.md

@@ -3,22 +3,27 @@
 
 ## First production : 
 
-load data source
+OK  load data source
+OK git clean
 vuejs prod
-git clean
 hosting
 
 
-load data source
-local storage : 
-  save all data
-  save timeStamp
+Save user config to local
+reset mode 
 
-on load
-  if delay > 1hour : reload data
+Charts modes:
+- Country day decal
+- sync on first day at xxx
+- divide by country population 
  
 
 
+
+
+
+### Data source  
+
 Data source : 
     https://github.com/pomber/covid19
     

src/App.vue

@@ -16,7 +16,6 @@
             <ChartConfig
                     :configs="chartConfig"
                     :configLists="configLists"
-              v-model="chartConfig"
             />
 
             <CountriesConfig
@@ -96,6 +95,22 @@
     }
 
 
+    const defaultUserConfig = {
+        chartConfig: {
+            typeSelected: 'confirmed',
+            scaleSelected: 'linear',
+            dayStart: 30,
+            dayEnd: 0,
+            ymax: 0,
+            resetConfig: false,
+        },
+        countriesConfig: {
+            selected: [{name: "France"}, {name: "Italy"}],
+            basePalette: "tolRainbowColor"
+        },
+    }
+    defaultUserConfig
+
     export default {
         name: 'AppVuetify',
         components: {ChartConfig, CountriesConfig, MultiCountryChart, MultiBarChartSingle, DataLoader},
@@ -106,34 +121,35 @@
             drawer: true,
             title: 'Cov Charts',
             allData: {},
-      chartConfig: {
-        typeSelected: 'confirmed',
-        scaleSelected: 'linear',
-        dayStart: 30,
-        dayEnd: 0,
-        ymax: 0,
-      },
             chartWidth: 500,
+            chartConfig: defaultUserConfig.chartConfig,
+            countriesConfig: defaultUserConfig.countriesConfig,
             configLists: {
                 scaleList: ['log', 'linear'],
                 typesList: ['confirmed', 'deaths', 'recovered'],
             },
-      countriesConfig: {
-        selected: [{name: "France"}, {name: "Italy"}],
-        basePalette: "tolRainbowColor"
-
-      },
             countriesLists: {
                 top: ['Belgium', 'Sweden', 'France', 'Japan', 'Korea, South', 'Russia', 'Germany', 'Spain', 'Italy', 'China', 'United Kingdom', 'US'],
                 // Todo list of all countries using localstorage
                 //all: Object.keys(AllData).sort(),
-      }
-
+            },
         }),
         watch: {
             drawer() {
                 console.log('dd', this.drawer)
-      }
+            },
+            countriesConfig: {
+                handler: function () {
+                    this.saveConfig()
+                },
+                deep: true
+            },
+            chartConfig: {
+                handler: function (val) {
+                    val.resetConfig ? this.resetConfig() : this.saveConfig()
+                },
+                deep: true
+            },
         },
         created() {
             this.$vuetify.theme.dark = true
@@ -141,11 +157,33 @@
         mounted() {
             // Todo find a better way to get size
             //this.chartWidth = this.$refs.maincontent.clientWidth * 2 / 3
-
             this.chartWidth = 800
+            this.loadConfig()
+
+        },
+        methods: {
+            loadConfig() {
+
+                let uc = localStorage.getItem('userConfig')
+                if (uc && uc !== 'null') {
+                    uc = JSON.parse(uc)
+                    this.countriesConfig = uc.countriesConfig
+                    this.chartConfig = uc.chartConfig
+                } else {
+                    this.countriesConfig = defaultUserConfig.countriesConfig
+                    this.chartConfig = defaultUserConfig.chartConfig
+                }
+            },
+            saveConfig() {
+                let userConfig = {countriesConfig: this.countriesConfig, chartConfig: this.chartConfig}
+                localStorage.setItem('userConfig', JSON.stringify(userConfig))
+            },
+            resetConfig() {
+                localStorage.setItem('userConfig', 'null')
+                this.loadConfig()
+            },
         },
         computed: {
-
             countriesData() {
 
                 if (!('France' in this.allData)) {

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>
@@ -70,6 +70,15 @@
                 </v-list-item-content>
             </v-list-item>
 
+            <v-list-item>
+                <v-list-item-action></v-list-item-action>
+                <v-list-item-content>
+                    <v-btn @click="resetConfig()"
+                           x-small
+                    >Reset
+                    </v-btn>
+                </v-list-item-content>
+            </v-list-item>
         </v-list>
     </div>
 </template>
@@ -83,16 +92,15 @@
         props: ['configs', 'configLists'],
         components: {Counter},
         data() {
-            return {}
-        },
-        watch: {
-            config(prev,neww){
-                if (prev.ymax !== neww.ymax){
-                    console.log('new y',neww.ymax)
-                }
+            return {
             }
         },
-        methods: {},
+        methods: {
+            resetConfig() {
+                this.configs.resetConfig = true
+            }
+        },
+        computed: { }
     }
 </script>
 
@@ -103,8 +111,8 @@
         margin: 0px;
     }
 
-    .ymax{
-        max-width:50%;
+    .ymax {
+        max-width: 50%;
     }
 
 </style>

src/components/CountriesConfig.vue

@@ -17,8 +17,7 @@
                     </v-list-item-content>
                 </v-list-item>
 
-
-                <v-list-item v-for="(cinfo,id) in configs.selected" :key="id" class="countryLine">
+                <v-list-item v-for="(cinfo,id) in getSelected" :key="id" class="countryLine">
                     <v-list-item-action>
                         <v-btn fab dark x-small
                                @click="removeCountry(cinfo.name)">
@@ -60,15 +59,11 @@
                 // TODO : change the base list used for countries
             }
         },
-        created() {
-            this.setColors();
-        },
         watch: {
             selected() {
                 if (this.selected === '') return   // prevent the reset in this function
                 if (this.configs.selected.map(d => d.name).indexOf(this.selected) === -1) {
                     this.configs.selected.push({name: this.selected})
-                    this.setColors()
                 }
                 this.addCountry = !this.addCountry
                 this.selected = ''
@@ -90,6 +85,11 @@
             },
         },
         computed: {
+            // Add colors with selected
+            getSelected(){
+                this.setColors()
+                return this.configs.selected
+            },
             getActiveCountries() {
                 // TODO filter out selected countries
                 return []

src/components/d3/MultiCountryChart.vue

@@ -91,11 +91,9 @@
         },
         mounted() {
             this.drawAxis()
-            console.log('dataType', this.dataType)
         },
         watch: {
-            scaleType(neww) {
-                console.log('', neww)
+            scaleType() {
                 this.drawAxis()
             },
             countries() {