From c4db1aa5875e5d55432d0a8ecd56f3b3e776123f Mon Sep 17 00:00:00 2001
From: T__o <theo233@gmail.com>
Date: Thu, 23 Apr 2020 17:52:44 +0200
Subject: [PATCH] repack, data auto loading

---
 README.md                               |  23 +-
 brain.md                                |  29 ++
 doc.md                                  |  23 ++
 package.json                            |  10 +-
 public/index.html                       |   2 +
 src/App.vue                             | 225 ++++++++++--
 src/components/ChartConfig.vue          | 110 ++++++
 src/components/CountriesConfig.vue      | 156 +++++++++
 src/components/DataLoader.vue           |  96 ++++++
 src/components/HelloWorld.vue           |  58 ----
 src/components/MultiBarChartSingle.vue  |  99 ++++++
 src/components/d3/BarChartSingle.vue    | 156 +++++++++
 src/components/d3/MultiCountryChart.vue | 208 +++++++++++
 src/components/html/Counter.vue         |  93 +++++
 src/components/html/Palette.vue         |  71 ++++
 src/components/html/SelectO.vue         |  77 +++++
 src/libs/thpalette.js                   | 112 ++++++
 src/main.js                             |   4 +-
 src/plugins/vuetify.js                  |   7 +
 vue.config.js                           |   5 +
 yarn.lock                               | 437 +++++++++++++++++++++++-
 21 files changed, 1889 insertions(+), 112 deletions(-)
 create mode 100644 brain.md
 create mode 100644 doc.md
 create mode 100644 src/components/ChartConfig.vue
 create mode 100644 src/components/CountriesConfig.vue
 create mode 100644 src/components/DataLoader.vue
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/components/MultiBarChartSingle.vue
 create mode 100644 src/components/d3/BarChartSingle.vue
 create mode 100644 src/components/d3/MultiCountryChart.vue
 create mode 100644 src/components/html/Counter.vue
 create mode 100644 src/components/html/Palette.vue
 create mode 100644 src/components/html/SelectO.vue
 create mode 100644 src/libs/thpalette.js
 create mode 100644 src/plugins/vuetify.js
 create mode 100644 vue.config.js

diff --git a/README.md b/README.md
index bff48ad..41f931d 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,9 @@
 # covcharts
 
-## Project setup
-```
-yarn install
-```
+Charts on COVID 19
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
+Using vuejs and d3
 
-### Compiles and minifies for production
-```
-yarn build
-```
+Data source from : https://github.com/pomber/covid19
+ 
 
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/brain.md b/brain.md
new file mode 100644
index 0000000..fad8571
--- /dev/null
+++ b/brain.md
@@ -0,0 +1,29 @@
+
+# todo list 
+
+## First production : 
+
+load data source
+vuejs prod
+git clean
+hosting
+
+
+load data source
+local storage : 
+  save all data
+  save timeStamp
+  
+on load
+  if delay > 1hour : reload data
+  
+  
+
+Data source : 
+    https://github.com/pomber/covid19
+    
+curl -o data/timeseries0.json  https://pomber.github.io/covid19/timeseries.json   
+
+
+    
+
diff --git a/doc.md b/doc.md
new file mode 100644
index 0000000..7e0b3b9
--- /dev/null
+++ b/doc.md
@@ -0,0 +1,23 @@
+
+
+
+# Changelog 
+
+v0.01 repack, data auto loading
+
+
+### Project dataviz d3js vue 
+
+https://medialab.sciencespo.fr/actu/coronavirus-country-comparator/
+https://boogheta.github.io/coronavirus-countries/#deceased&places=China,France,Iran,Italy,Spain,USA,United%20Kingdom&alignTo=deceased
+https://github.com/boogheta/coronavirus-countries/blob/master/js/corona.js
+
+
+### vuejs d3
+
+Workshop : 
+Composing D3.js Visuals with Vue.js Workshop https://www.youtube.com/watch?v=CkFktv0p3pw
+Visualizing Hierarchies with Vue.js and D3.js  https://www.youtube.com/watch?v=GuecoTcqmVE
+
+Bar with animation : 
+https://codepen.io/callumacrae/pen/oyXXWR
\ No newline at end of file
diff --git a/package.json b/package.json
index e8b5288..0a3663b 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
-    "vue": "^2.6.11"
+    "d3": "^5.16.0",
+    "vue": "^2.6.11",
+    "vuetify": "^2.2.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.3.0",
@@ -18,7 +20,11 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-vuetify": "^2.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
   },
   "eslintConfig": {
     "root": true,
diff --git a/public/index.html b/public/index.html
index 4123528..bc51465 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 55df315..5eea070 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,215 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <v-app id="inspire">
+
+    <v-app-bar app clipped-left>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
+      <v-toolbar-title>{{title}}</v-toolbar-title>
+    </v-app-bar>
+
+    <v-navigation-drawer
+            v-model="drawer"
+            app
+            clipped
+            stateless
+    >
+
+      <ChartConfig
+              :configs="chartConfig"
+              :configLists="configLists"
+              v-model="chartConfig"
+      />
+
+      <CountriesConfig
+              :lists="countriesLists"
+              :configs="countriesConfig"
+      />
+
+      <DataLoader
+              v-model="allData"
+      ></DataLoader>
+
+    </v-navigation-drawer>
+
+    <v-content>
+      <v-container class="sfill-height" fluid>
+        <v-row align="center" justify="center" id="maincontent" ref="maincontent">
+          <v-col class="shrink">
+
+
+            <MultiCountryChart
+                    :countries="countriesData"
+                    :scaleType="chartConfig.scaleSelected"
+                    :dataType="chartConfig.typeSelected"
+                    :width="chartWidth"
+                    :height="chartWidth * (2/3)"
+            />
+
+            <MultiBarChartSingle
+                    :countriesData="countriesData"
+                    :scaleType="chartConfig.scaleSelected"
+                    :width="260"
+                    :height="100"
+            />
+
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-content>
+
+    <v-footer app>
+            <span>
+                Using <a href="https://vuejs.org/" target="_blank">Vuejs</a>
+                and <a href="https://d3js.org/" target="_blank">d3</a> -
+                <a href="https://github.com/pomber/covid19" target="_blank">Data source</a>
+               </span>
+    </v-footer>
+  </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
+  //import AllData from '../data/timeseries.json'
+  import ChartConfig from './components/ChartConfig'
+  import CountriesConfig from './components/CountriesConfig'
+  import MultiCountryChart from './components/d3/MultiCountryChart'
+  import MultiBarChartSingle from './components/MultiBarChartSingle'
+  import DataLoader from './components/DataLoader'
+
+
+  let limit = (value, min, max) => {
+    return value > max ? max : value < min ? min : value
   }
-}
-</script>
+  limit()
 
+  function formatDate(date) {
+    var d = new Date(date),
+            month = '' + (d.getMonth() + 1),
+            day = '' + d.getDate(),
+            year = d.getFullYear();
+
+    if (month.length < 2)
+      month = '0' + month;
+    if (day.length < 2)
+      day = '0' + day;
+
+    return [year, month, day].join('-');
+  }
+
+
+  export default {
+    name: 'AppVuetify',
+    components: {ChartConfig, CountriesConfig, MultiCountryChart, MultiBarChartSingle, DataLoader},
+    props: {
+      source: String,
+    },
+    data: () => ({
+      drawer: true,
+      title: 'Cov Charts',
+      allData: {},
+      chartConfig: {
+        typeSelected: 'confirmed',
+        scaleSelected: 'linear',
+        dayStart: 30,
+        dayEnd: 0,
+        ymax: 0,
+      },
+      chartWidth: 500,
+      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)
+      }
+    },
+    created() {
+      this.$vuetify.theme.dark = true
+    },
+    mounted() {
+      // Todo find a better way to get size
+      //this.chartWidth = this.$refs.maincontent.clientWidth * 2 / 3
+
+      this.chartWidth = 800
+    },
+    computed: {
+
+      countriesData() {
+
+        if (!('France' in this.allData)) {
+          return []
+        }
+
+        let formatedData = []
+        const addSomeDays = false
+
+        this.countriesConfig.selected.map((country) => {
+
+          let cdata = JSON.parse(JSON.stringify(this.allData[country.name]))
+          let itemsCount = cdata.length
+          let filtered = cdata.filter((e, i) =>
+                  i >= (this.chartConfig.dayStart - 1) &&
+                  i < (itemsCount - this.chartConfig.dayEnd))
+
+          if (addSomeDays) {
+            // Adding addDays data points
+            let datebase = new Date(filtered.slice(-1)[0].date)
+            for (let i = 0; i < this.chartConfig.addDays; i++) {
+              let dd = new Date(datebase.getFullYear(), datebase.getMonth(), datebase.getDate() + i);
+              filtered.push({
+                date: formatDate(dd),
+                deaths: undefined,
+                recovered: undefined,
+                confirmed: undefined,
+              })
+            }
+          }
+
+          if (this.chartConfig.ymax > 0) {
+            filtered = filtered.map((d) => {
+              this.configLists.typesList.map(e => {
+                d[e] = d[e] > this.chartConfig.ymax ? this.chartConfig.ymax : d[e]
+              })
+              return d
+            })
+          }
+          // // Get ymax
+          // filtered.map(d => {
+          //     ymax = d[this.dataSelected] > ymax ? d[this.dataSelected] : ymax
+          // })
+
+          country.list = filtered
+          formatedData.push(country)
+        })
+
+        return formatedData
+      }
+    }
+  }
+</script>
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+
+  html, body {
+    height: 100%;
+    margin: 0;
+    font-size: 12px;
+  }
+
+  input, select, .v-input {
+    font-size: 12px;
+  }
+
+
 </style>
diff --git a/src/components/ChartConfig.vue b/src/components/ChartConfig.vue
new file mode 100644
index 0000000..9aca65b
--- /dev/null
+++ b/src/components/ChartConfig.vue
@@ -0,0 +1,110 @@
+<template>
+    <div>
+
+        <v-list dense>
+
+            <v-list-item>
+                <v-list-item-action> Scale</v-list-item-action>
+                <v-list-item-content>
+                    <v-select
+                            class="vselect"
+                            :items="configLists.scaleList"
+                            v-model="configs.scaleSelected"
+                            single-line
+                            hide-details
+                    ></v-select>
+                </v-list-item-content>
+            </v-list-item>
+
+
+            <v-list-item>
+                <v-list-item-action> Type</v-list-item-action>
+                <v-list-item-content>
+                    <v-select
+                            class="vselect"
+                            :items="configLists.typesList"
+                            v-model="configs.typeSelected"
+                            single-line
+                            hide-details
+                    ></v-select>
+                </v-list-item-content>
+            </v-list-item>
+
+
+            <v-list-item>
+                <v-list-item-action> DayStart</v-list-item-action>
+                <v-list-item-content>
+                    <Counter
+                            v-model="configs.dayStart"
+                            :input="configs.dayStart"
+                            classname="themeGrey"
+                            :max="100"
+                    ></Counter>
+                </v-list-item-content>
+            </v-list-item>
+
+            <v-list-item>
+                <v-list-item-action> DayEnd</v-list-item-action>
+                <v-list-item-content>
+                    <Counter
+                            v-model="configs.dayEnd"
+                            :input="configs.dayEnd"
+                            classname="themeGrey"
+                            :max="100"
+                    ></Counter>
+                </v-list-item-content>
+            </v-list-item>
+
+            <v-list-item>
+                <v-list-item-action> y Max</v-list-item-action>
+                <v-list-item-content>
+                    <v-text-field
+                            class="ymax"
+                            v-model="configs.ymax"
+                            label="ymaxx"
+                            solo
+                            hide-details
+                            single-line
+
+                    />
+                </v-list-item-content>
+            </v-list-item>
+
+        </v-list>
+    </div>
+</template>
+
+<script>
+
+    import Counter from './html/Counter'
+
+    export default {
+        name: "ChartConfig",
+        props: ['configs', 'configLists'],
+        components: {Counter},
+        data() {
+            return {}
+        },
+        watch: {
+            config(prev,neww){
+                if (prev.ymax !== neww.ymax){
+                    console.log('new y',neww.ymax)
+                }
+            }
+        },
+        methods: {},
+    }
+</script>
+
+<style scoped>
+
+    .vselect {
+        padding: 0px;
+        margin: 0px;
+    }
+
+    .ymax{
+        max-width:50%;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/CountriesConfig.vue b/src/components/CountriesConfig.vue
new file mode 100644
index 0000000..be348a1
--- /dev/null
+++ b/src/components/CountriesConfig.vue
@@ -0,0 +1,156 @@
+<template>
+    <div>
+        <div>
+            <v-list dense shaped subheader>
+
+                <v-list-item>
+                    <v-list-item-content>
+                        <v-autocomplete
+                                class="vselect"
+                                :items="lists.top"
+                                v-model="selected"
+                                label="Countries"
+                                outlined
+                                dense
+                                hide-details
+                        ></v-autocomplete>
+                    </v-list-item-content>
+                </v-list-item>
+
+
+                <v-list-item v-for="(cinfo,id) in configs.selected" :key="id" class="countryLine">
+                    <v-list-item-action>
+                        <v-btn fab dark x-small
+                               @click="removeCountry(cinfo.name)">
+                            <v-icon dark>mdi-close</v-icon>
+                        </v-btn>
+                    </v-list-item-action>
+
+                    <v-list-item-content>
+                        <v-list-item-title>
+                            <v-chip :style="{background:cinfo.color}"><span> &nbsp; </span></v-chip>
+                            {{cinfo.name}}
+                        </v-list-item-title>
+                    </v-list-item-content>
+                </v-list-item>
+
+            </v-list>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+    import Palette from './html/Palette'
+    import {getPalette} from '../libs/thpalette'
+    import SelectO from './html/SelectO'
+
+    Palette, SelectO
+
+    export default {
+        name: "CountriesConfig",
+        props: ['lists', 'configs'],
+        components: {},
+        data() {
+            return {
+                addCountry: false,
+                selected: '',
+                // 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 = ''
+            }
+        },
+        methods: {
+            setColors() {
+                let colors = getPalette(this.configs.basePalette, this.configs.selected.length)
+                this.configs.selected = this.configs.selected.map((d, i) => {
+                    d.color = colors[i]
+                    return d
+                })
+            },
+            addCountryClick() {
+                this.addCountry = !this.addCountry
+            },
+            removeCountry(country) {
+                this.configs.selected = this.configs.selected.filter(d => d.name !== country)
+            },
+        },
+        computed: {
+            getActiveCountries() {
+                // TODO filter out selected countries
+                return []
+            }
+        },
+
+    }
+</script>
+
+<style scoped>
+
+    .countryLine {
+        display: flex;
+    }
+
+    .countryItem {
+        display: inline-block;
+        width: 70px;
+        padding-left: 3px;
+    }
+
+    .countryBtn {
+        line-height: 15px;
+        width: 20px;
+        text-align: center;
+        padding: 0px;
+    }
+
+    .countryColor {
+        display: inline-block;
+        border: 1px solid #2c3e50;
+        border-radius: 10px;
+        width: 15px;
+        height: 15px;
+        margin: 2px 7px 0px 2px;
+    }
+
+    .countryLine .v-list-item__action {
+        margin: 2px;
+    }
+
+    .countryLine .v-list-item__content {
+        padding: 2px;
+    }
+
+    .countryLine .v-btn {
+        width: 20px;
+        height: 20px;
+        font-size: 8px;
+    }
+
+    .countryLine .v-chip {
+        height: 20px;
+        font-size: 8px;
+    }
+
+    .countryLine.v-list-item {
+        min-height: 24px;
+        font-size: 8px;
+    }
+
+
+</style>
+
diff --git a/src/components/DataLoader.vue b/src/components/DataLoader.vue
new file mode 100644
index 0000000..ff3fef5
--- /dev/null
+++ b/src/components/DataLoader.vue
@@ -0,0 +1,96 @@
+<template>
+
+    <v-list dense>
+
+        <v-list-item>
+            <v-list-item-action> Data </v-list-item-action>
+            <v-list-item-content>
+                {{localDate}} {{checkData}}
+            </v-list-item-content>
+        </v-list-item>
+        <v-list-item v-if="errorMessage">
+            <v-list-item-action> Error:</v-list-item-action>
+            <v-list-item-content>
+                {{errorMessage}}
+            </v-list-item-content>
+        </v-list-item>
+
+    </v-list>
+</template>
+
+<script>
+
+    const APIURL = "https://pomber.github.io/covid19/timeseries.json"
+
+    export default {
+        name: "DataLoader",
+        props: [''],
+        components: {},
+        data() {
+            return {
+                localTimestamp: 0,
+                localData: {},
+                refetchDelay: 1000 * 3600,
+                errorMessage: ""
+            }
+        },
+        created() {
+            this.readLocal()
+        },
+        watch: {
+            localData() {
+                this.$emit('input', this.localData)
+            }
+        },
+        methods: {
+            readLocal() {
+                let ls = localStorage.getItem('localTimestamp')
+                if (ls) {
+                    this.localTimestamp = parseInt(ls);
+                    this.localData = JSON.parse(localStorage.getItem('localData'));
+                }
+
+                if ((this.localTimestamp + this.refetchDelay) < new Date().getTime()) {
+                    this.fetch()
+                }
+            },
+            fetch() {
+                fetch(APIURL)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.saveData(data)
+                    }).catch(() => {
+                    this.errorMessage = "Network Error"
+                });
+            },
+            saveData(data) {
+                if ('France' in data) {
+                    // todo control data
+                    this.localData = data
+                    this.localTimestamp = new Date().getTime()
+                    localStorage.setItem('localData', JSON.stringify(this.localData))
+                    localStorage.setItem('localTimestamp', this.localTimestamp)
+                } else {
+                    this.errorMessage = "Wrong data"
+                }
+            }
+        },
+        computed: {
+            checkData() {
+                if ('France' in this.localData) {
+                    let last = this.localData['France'].slice(-1)[0]
+                    if ('date' in last && 'recovered' in last) return 'OK'
+                }
+                return "No data"
+            },
+            localDate() {
+                return new Date(this.localTimestamp).toLocaleString()
+            }
+        },
+    }
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/MultiBarChartSingle.vue b/src/components/MultiBarChartSingle.vue
new file mode 100644
index 0000000..5c29cc9
--- /dev/null
+++ b/src/components/MultiBarChartSingle.vue
@@ -0,0 +1,99 @@
+<template>
+    <div class="rowC">
+
+        <div class="row countrytitle">
+            <div> _</div>
+            <div v-for="(cinfo,id) in countriesData"
+                 :key="'ns'+id"
+                 class="rodw"
+                 :style="{height:(height+7)+'px'}">
+                {{cinfo.name}}
+
+            </div>
+        </div>
+        <div v-for="dtype in dataType" :key="'mcs'+dtype">
+
+            <div >
+                {{dtype}}
+            </div>
+
+            <div v-for="(cinfo,id) in countriesData" :key="'ns'+id">
+                <div class="chartBlock">
+                    <BarChartSingle
+                            :dataType="dtype"
+                            :country="cinfo.name"
+                            :dataChart="dataProcess(cinfo.list,dtype)"
+                            :scaleType="scaleType"
+                            :width="width"
+                            :height="height"
+                    />
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+
+    import BarChartSingle from './d3/BarChartSingle'
+
+    export default {
+        name: 'MultiBarChartSingle',
+        props: {
+            countriesData: Array,
+            scaleType: String,
+            width: Number,
+            height: Number,
+
+        },
+        components: {
+            BarChartSingle: BarChartSingle
+        },
+        data() {
+            return {
+                dataType: ['confirmed', 'deaths', 'recovered']
+            }
+        },
+        computed: {},
+        methods: {
+            dataProcessOne(list, datatype) {
+                return list.map(d => {
+                    return {date: d.date, value: d[datatype]}
+                })
+            },
+            dataProcess(list, datatype) {
+                let prevDayTotal = 0
+                let dailyList = list.map((d) => {
+                    let current = d[datatype] - prevDayTotal
+                    prevDayTotal = d[datatype]
+                    return {
+                        date: d.date,
+                        value: current
+                    }
+                })
+                return dailyList
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .rowC {
+        display: flex;
+    }
+
+    .row {
+        display: inline-block;
+    }
+
+    .chartBlock {
+        /*background: #efffe3;*/
+        margin: 0px 5px 5px 0px;
+    }
+
+    .countrytitle {
+        width: 70px;
+        flex: none;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/d3/BarChartSingle.vue b/src/components/d3/BarChartSingle.vue
new file mode 100644
index 0000000..bf36ecc
--- /dev/null
+++ b/src/components/d3/BarChartSingle.vue
@@ -0,0 +1,156 @@
+<template>
+    <svg :class="svgClass +' svgg'" :width="width" :height="height">
+        <g>
+            <rect v-for="(day ,id) in dataChart"
+                  :alt="id"
+                  :key="'bcs'+id"
+                  :x="scales.x(new Date(day.date))"
+                  :y="scales.y(day.value)"
+                  :width="colsize"
+                  :height="height-scales.y(day.value)"
+                  class="barChartRect"
+            ></rect>
+            <!--            <path-->
+            <!--                  :d="calculatePath(dataChart)"-->
+            <!--            />-->
+            <!--            :style="{stroke:cinfo.color}"-->
+        </g>
+        <g class="axisg"></g>
+
+    </svg>
+</template>
+
+<script>
+
+    import {scaleLinear, scaleLog, scalePow, scaleTime} from 'd3';
+    import {axisLeft, axisBottom,timeDay} from 'd3';
+    import {axisRight, axisTop} from 'd3';
+
+    import {select, line} from 'd3';
+
+    select, scaleLinear, scaleLog, scalePow, scaleTime,
+        axisLeft, axisRight, axisTop, axisBottom, line
+
+    export default {
+        name: 'BarChartSingle',
+        props: {
+            dataChart: Array,   // [{date,value}]
+            scaleType: String,
+            dataType: String,
+            width: Number,
+            height: Number,
+            country: String,
+        },
+        data() {
+            return {
+                margin: {
+                    x: 5,
+                    y: 0,
+                },
+                svgClass: "svg" + Math.random().toString(36).substring(7),
+                overpoint: {
+                    x: 0,
+                    y: 0,
+                    text: "",
+                    country: ""
+                }
+            }
+        },
+        mounted() {
+            this.drawAxis()
+            //console.log('',this.country,this.dataType, this.dataChart.slice(-1)[0])
+        },
+        watch: {
+            scaleType() {
+                this.drawAxis()
+            },
+            dataChart() {
+                this.drawAxis()
+            },
+        },
+        computed: {
+            colsize() {
+                return this.scales.x(new Date(this.dataChart[1].date)) - 1
+            },
+            minmax() {
+
+                let first = this.dataChart[0]
+                let max = {x: new Date(first.date), y: first.value}
+                let min = {x: new Date(first.date), y: first.value}
+
+                this.dataChart.forEach(item => {
+
+                    let value = item.value
+                    let dayvalue = new Date(item.date)
+                    max.x = max.x < dayvalue ? dayvalue : max.x
+                    max.y = max.y < value ? value : max.y
+
+                    min.x = min.x > dayvalue ? dayvalue : min.x
+                    if (typeof min.y === "undefined") min.y = value
+                    min.y = min.y > value ? value : min.y
+                    if (min.y <= 0) min.y = 1   // for log scale
+                })
+
+                //console.log(' dd',this.dataChart)
+                //console.log(' {min: min, max: max} ', min.y, max, this.scaleType)
+                return {min: min, max: max}
+            },
+
+            scales() {
+
+                let scales = {}
+                scales.x = scaleTime()
+                    .domain([this.minmax.min.x, this.minmax.max.x])
+                    .range([0, this.width - 2 * this.margin.x])
+
+                // !!scaleLog need to start at 1 not 0!!
+                scales.y = this.scaleType === 'linear' ? scaleLinear() : scaleLog()
+                scales.y = scales.y
+                    .domain([this.minmax.min.y, this.minmax.max.y])
+                    .range([this.height - 2 * this.margin.y, 1])
+
+                return scales
+            },
+        },
+        methods: {
+            calculatePath(data) {
+
+                //console.log('datata',data)
+                const path = line()
+                    .x((d) => this.scales.x(new Date(d.date)))
+                    .y(d => this.scales.y(d.value === 0 ? 1 : d.value))
+
+                return path(data)
+            },
+            drawAxis() {
+
+                let axis = select("." + this.svgClass + "  .axisg")
+
+                axis.selectAll("*").remove()
+
+
+                axis.append("g")
+                    .attr("class", "axis ")  // axis--y
+                    //.attr("transform", "translate(" + 0 + ", 0)")
+                    .call(axisRight(this.scales.y).ticks(3));
+
+                axis.append("g")
+                    .attr("class", "axis") // axis--x
+                    .attr("transform", "translate( 0," + (this.height - 1) + ")")
+                    .call(axisTop(this.scales.x).ticks(timeDay.every(10))
+            );
+
+            },
+
+        },
+
+
+    }
+</script>
+
+<style scoped>
+
+    .barChartRect {
+        fill: #87a2a8;
+    }
+</style>
diff --git a/src/components/d3/MultiCountryChart.vue b/src/components/d3/MultiCountryChart.vue
new file mode 100644
index 0000000..b99511b
--- /dev/null
+++ b/src/components/d3/MultiCountryChart.vue
@@ -0,0 +1,208 @@
+<template>
+    <div>
+
+        <svg :class="svgClass" :width="width" :height="height">
+
+            <g style="transform: translate(2px, 2px)">
+
+
+                <g v-for="cinfo in countries"
+                   :key="cinfo.country"
+                   @mouseleave="overPoint('reset')"
+                >
+                    <path :style="{stroke:cinfo.color}"
+                          :d="calculatePath(cinfo.list)"
+                    />
+
+                    <circle v-for="(point,i) in (cinfo.list)"
+                            :key="'c'+i"
+                            :style="{fill:cinfo.color}"
+                            :cx="scales.x(new Date(point.date))"
+                            :cy="scales.y(point[dataType])"
+                            r="2"
+                    />
+
+                    <circle v-for="(point,i) in (cinfo.list)"
+                            opacity="0"
+                            :key="'cinv'+i"
+                            :cx="scales.x(new Date(point.date))"
+                            :cy="scales.y(point[dataType])"
+                            r="7"
+                            @mouseover="overPoint(point,cinfo.color)"
+                    />
+
+                    <rect :x="overpoint.x"
+                          :y="overpoint.y-10"
+                          :width=" (6+overpoint.text.toString().length) * 4"
+                          :height="18"
+                    />
+
+                    <text :x="overpoint.x+4"
+                          :y="overpoint.y+4"
+                          class="overpoint"
+                          :style="{fill:overpoint.color}"
+                    >
+                        {{overpoint.text}}
+                    </text>
+
+                </g>
+
+                <g class="axisg"></g>
+            </g>
+        </svg>
+
+    </div>
+</template>
+
+<script>
+
+    import {scaleLinear, scaleLog, scalePow, scaleTime} from 'd3';
+    import {axisLeft, axisBottom} from 'd3';
+    import {axisRight, axisTop} from 'd3';
+
+    import {select, line} from 'd3';
+
+    select, scaleLinear, scaleLog, scalePow, scaleTime,
+        axisLeft, axisRight, axisTop, axisBottom
+
+    export default {
+        name: 'MultiCountryChart',
+        props: {
+            countries: Array,
+            scaleType: String,
+            dataType: String,
+            width: Number,
+            height: Number,
+        },
+        data() {
+            return {
+                margin: {
+                    x: 5,
+                    y: 5,
+                },
+                svgClass: "svg" + Math.random().toString(36).substring(7),
+                overpoint: {
+                    x: 0,
+                    y: 0,
+                    text: "",
+                    country: ""
+                }
+            }
+        },
+        mounted() {
+            this.drawAxis()
+            console.log('dataType', this.dataType)
+        },
+        watch: {
+            scaleType(neww) {
+                console.log('', neww)
+                this.drawAxis()
+            },
+            countries() {
+                this.drawAxis()
+            },
+        },
+        computed: {
+            minmax() {
+
+                let max = {x: 0, y: 0}
+                let min = {x: new Date(), y: undefined}
+
+                this.countries.forEach(country => {
+                    country.list.forEach((item) => {
+
+                        let value = item[this.dataType]
+                        let dayvalue = new Date(item.date)
+                        max.x = max.x < dayvalue ? dayvalue : max.x
+                        max.y = max.y < value ? value : max.y
+
+                        min.x = min.x > dayvalue ? dayvalue : min.x
+                        if (typeof min.y === "undefined") min.y = value
+                        min.y = min.y > value ? value : min.y
+                        if (min.y <= 1) min.y = 1   // for log scale
+                    })
+                })
+
+                //console.log(' {min: min, max: max} ',  min.y, max, this.scaleType)
+                return {min: min, max: max}
+            },
+
+            scales() {
+
+                let scales = {}
+                scales.x = scaleTime()
+                    .domain([this.minmax.min.x, this.minmax.max.x])
+                    .range([0, this.width - 2 * this.margin.x])
+
+                // !!scaleLog need to start at 1 not 0!!
+                scales.y = this.scaleType === 'linear' ? scaleLinear() : scaleLog()
+                scales.y = scales.y
+                    .domain([this.minmax.min.y, this.minmax.max.y])
+                    .range([this.height - 2 * this.margin.y, 1])
+
+                return scales
+            },
+
+        },
+        methods: {
+            overPoint(point, color) {
+
+                if (point === 'reset') {
+                    this.overpoint = {
+                        x: 0, y: 0, text: ""
+                    }
+                    return
+                }
+
+                this.overpoint = {
+                    x: this.scales.x(new Date(point.date)),
+                    y: this.scales.y(point [this.dataType]),
+                    text: point.date.slice(5,10)+": "+point [this.dataType],
+                    color: color,
+                }
+            },
+            calculatePath(data) {
+
+                //console.log('datata',data)
+                const path = line()
+                    .x((d) => this.scales.x(new Date(d.date)))
+                    .y(d => this.scales.y(d[this.dataType] === 0 ? 1 : d[this.dataType]))
+
+                return path(data)
+            },
+            drawAxis() {
+
+                let axis = select("." + this.svgClass + "  .axisg")
+
+                axis.selectAll("*").remove()
+
+                axis.append("g")
+                    .attr("class", "axis axis--y")
+                    .attr("transform", "translate(" + 0 + ", 0)")
+                    .call(axisRight(this.scales.y));
+
+                axis.append("g")
+                    .attr("class", "axis axis--x")
+                    .attr("transform", "translate( 0," + (this.height - this.margin.y/2) + ")")
+                    .call(axisTop(this.scales.x));
+
+            },
+        }
+    }
+</script>
+
+
+<style lang="sass" scoped>
+
+    path
+        fill: none
+        stroke: #bf674d
+        stroke-width: 1px
+
+</style>
+
+<style>
+    .overpoint {
+        font-size: 11px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/html/Counter.vue b/src/components/html/Counter.vue
new file mode 100644
index 0000000..c73830d
--- /dev/null
+++ b/src/components/html/Counter.vue
@@ -0,0 +1,93 @@
+<template>
+    <div :class="'counter '+ classname">
+        <button @click="click(-1)" class="bleft">-</button>
+        <span>{{value}}</span>
+        <button @click="click(1)" class="bright">+</button>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Counter',
+        props: {
+            min: {type: Number, default: 0},
+            max: {type: Number, default: 10},
+            inc: {type: Number, default: 1},
+            input: {type: Number, default: 1},
+            classname: {type: String, default: 'themeGreen'},
+        },
+        data() {
+            return {
+                value: this.input,
+            }
+        },
+        methods: {
+            click(dirfactor) {
+                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)
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+    .counter {
+        display: inline-block;
+        border-radius: 5px;
+        padding: 0;
+    }
+
+    .counter button {
+        padding: 0;
+        width: 15px;
+        line-height: 15px;
+    /*/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;
+    }
+
+    .themeGreen.counter {
+        border: 1px solid #2c3e50;
+        background: #d3e3e0;
+        color:white;
+    }
+    .themeGreen.counter button {
+        background: #d3e3e0;
+    }
+    .themeGreen .bleft {
+        border-right: 1px solid #2c3e50;
+    }
+    .themeGreen .bright {
+        border-left: 1px solid #2c3e50;
+    }
+
+    .themeGrey.counter {
+        border: 0px solid #8ecaf9;
+        background: inherit;
+        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;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/html/Palette.vue b/src/components/html/Palette.vue
new file mode 100644
index 0000000..a3c3f5d
--- /dev/null
+++ b/src/components/html/Palette.vue
@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <h2>Palettes</h2>
+
+        <SelectO
+                name="Scale"
+                :list="palettesList"
+                :selectedItem="paletteSelected"
+                v-model="paletteSelected"
+                @change="onChange(paletteSelected)"
+
+        ></SelectO>
+        <div>
+            <input type="text" v-model="count" size="1"/>
+            {{paletteSelected}}
+        </div>
+
+        <div v-for="color in palettes" :key="color">
+            <div :style="{backgroundColor: color}">
+                {{color}}
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+    import SelectO from './SelectO'
+
+    import {getPalette, palettesList} from '../../libs/thpalette'
+
+    export default {
+        name: "Palette",
+        components: {
+            SelectO,
+        },
+        data() {
+            return {
+                count: 10,
+                palettesList: palettesList,
+                paletteSelected: palettesList[0]
+            }
+        },
+        watch:{
+            paletteSelected: function (neww){
+                console.log(' nn',neww)
+//                this.$emit('input', neww)
+
+                this.onChange(neww)
+            }
+        },
+        computed: {
+            palettes() {
+                return getPalette(this.paletteSelected, this.count)
+            }
+        },
+        methods: {
+            onChange(selectedItem) {
+                //if (selectedItem === this.paletteSelected) return
+                console.log('select onChange', selectedItem)
+                this.$emit('input', selectedItem)
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/html/SelectO.vue b/src/components/html/SelectO.vue
new file mode 100644
index 0000000..4d65bae
--- /dev/null
+++ b/src/components/html/SelectO.vue
@@ -0,0 +1,77 @@
+<template>
+
+    <div class="selectBox">
+        <div class="title">{{name}}</div>
+        <select
+                :class="classNam"
+                @change="onChange($event.target.value)"
+        >
+            <option v-if="selectedItem.length === 0" :value='phValue'>
+                {{placeholder}}
+            </option>
+            <option v-for="(item, id) in list"
+                    :value="item"
+                    :key="id"
+                    :selected="selectedItem == item"
+            >
+                {{item}}
+            </option>
+        </select>
+    </div>
+
+</template>
+
+<script>
+    export default {
+        name: 'SelectO',
+        props: {
+            list: Array,
+            selectedItem: String,
+            classNam: {type: String, default: () => "sone"},
+            name: String,
+        },
+        data() {
+            return {
+                placeholder: '--',
+                phValue:'pvalue'
+            }
+        },
+        methods: {
+            onChange(selectedItem) {
+                if (selectedItem === this.phValue) return
+                //console.log('select onChange', selectedItem)
+                this.$emit('input', selectedItem)
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+    div.selectBox {
+        display: inline-block;
+        margin: 2px;
+        padding: 0px;
+        border: 1px solid rgba(155, 191, 208, 0.83);
+
+    }
+
+    select.sone {
+        width: 100px;
+        background: rgba(169, 175, 180, 0.35);
+        border: 1px solid aliceblue;
+        line-height: 20px;
+        margin: 0px;
+
+    }
+
+    .title {
+        margin: 0px;
+
+        width: 60px;
+        line-height: 20px;
+        display: inline-block;
+        background: rgba(155, 191, 208, 0.56);
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/libs/thpalette.js b/src/libs/thpalette.js
new file mode 100644
index 0000000..7472333
--- /dev/null
+++ b/src/libs/thpalette.js
@@ -0,0 +1,112 @@
+/*
+*
+*  Hacked from : http://google.github.io/palette.js/
+*
+*
+* */
+let clamp = (v) => {
+    return v > 0 ? (v < 1 ? v : 1) : 0;
+}
+
+let rgb = (r, g, b) => {
+    return [r, g, b].map(function (v) {
+        v = Number(Math.round(clamp(v) * 255)).toString(16);
+        return v.length == 1 ? '0' + v : v;
+    }).join('');
+}
+
+let poly = function (x, varargs) {
+    varargs
+    var i = arguments.length - 1, n = arguments[i];
+    while (i > 1) {
+        n = n * x + arguments[--i];
+    }
+    return n;
+}
+
+let erf = function (x) {
+    // https://en.wikipedia.org/wiki/Error_function#Approximation_with_elementary_functions
+    // This produces a maximum error of 0.0005 which is more then we need.  In
+    // the worst case, that error is multiplied by four and then divided by two
+    // before being multiplied by 255, so in the end, the error is multiplied by
+    // 510 which produces 0.255 which is less than a single colour step.
+    var y = poly(Math.abs(x), 1, 0.278393, 0.230389, 0.000972, 0.078108);
+    y *= y; // y^2
+    y *= y; // y^4
+    y = 1 - 1 / y;
+    return x < 0 ? -y : y;
+};
+let rgbColor = function (r, g, b) {
+    return [r, g, b].map(function (v) {
+        v = Number(Math.round(clamp(v) * 255)).toString(16);
+        return v.length == 1 ? '0' + v : v;
+    }).join('');
+};
+
+let hsvColor = function (h, opt_s, opt_v) {
+    h *= 6;
+    var s = opt_s === void (0) ? 1 : clamp(opt_s);
+    var v = opt_v === void (0) ? 1 : clamp(opt_v);
+    var x = v * (1 - s * Math.abs(h % 2 - 1));
+    var m = v * (1 - s);
+    switch (Math.floor(h) % 6) {
+        case 0:
+            return rgbColor(v, x, m);
+        case 1:
+            return rgbColor(x, v, m);
+        case 2:
+            return rgbColor(m, v, x);
+        case 3:
+            return rgbColor(m, x, v);
+        case 4:
+            return rgbColor(x, m, v);
+        default:
+            return rgbColor(v, m, x);
+    }
+};
+
+
+let palettes = {
+    tolRainbowColor: (x) => {
+        return rgb(poly(x, 0.472, -0.567, 4.05) / poly(x, 1, 8.72, -19.17, 14.1),
+            poly(x, 0.108932, -1.22635, 27.284, -98.577, 163.3, -131.395,
+                40.634),
+            1 / poly(x, 1.97, 3.54, -68.5, 243, -297, 125));
+    },
+    tolDivergingColor: (x) => {
+        var g = poly(x, 0.572, 1.524, -1.811) / poly(x, 1, -0.291, 0.1574);
+        return rgb(poly(x, 0.235, -2.13, 26.92, -65.5, 63.5, -22.36),
+            g * g,
+            1 / poly(x, 1.579, -4.03, 12.92, -31.4, 48.6, -23.36));
+    },
+    tolSequentialColor: function (x) {
+        return rgb(1 - 0.392 * (1 + erf((x - 0.869) / 0.255)),
+            1.021 - 0.456 * (1 + erf((x - 0.527) / 0.376)),
+            1 - 0.493 * (1 + erf((x - 0.272) / 0.309)));
+    },
+    hsv: x => hsvColor(x, 1, 1),
+    hsvLight: x => hsvColor(x, .5, 1),
+    hsvDark: x => hsvColor(x, 1, .5)
+
+
+}
+
+let getPalette = (type, count) => {
+    let palette = []
+    let factor = 1 / count
+
+    for (let i = 0; i < count; i++) {
+        let id = i * factor
+        palette.push('#' + palettes[type](id))
+    }
+    return palette
+}
+
+let palettesList = ['tolRainbowColor',
+    'tolDivergingColor',
+    'tolSequentialColor',
+    'hsv',
+    'hsvLight',
+    'hsvDark',]
+
+export  {getPalette, palettesList}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 63eb05f..a21e528 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+  vuetify,
+  render: h => h(App)
 }).$mount('#app')
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 0000000..ec46adb
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+});
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..ef6e86b
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  "transpileDependencies": [
+    "vuetify"
+  ]
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 3b519d6..7f069b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1423,6 +1423,14 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -1661,6 +1669,11 @@ binary-extensions@^1.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
   integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
 
+binary-extensions@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
+  integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==
+
 bindings@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
@@ -1735,6 +1748,13 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
 brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
@@ -2030,6 +2050,21 @@ check-types@^8.0.3:
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
   integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
 
+"chokidar@>=2.0.0 <4.0.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
+  integrity sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.3.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -2159,6 +2194,15 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
@@ -2233,16 +2277,16 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@2, commander@^2.18.0, commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@2.17.x:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.18.0, commander@^2.20.0:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -2652,6 +2696,254 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
+  integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
+
+d3-axis@1:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.12.tgz#cdf20ba210cfbb43795af33756886fb3638daac9"
+  integrity sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==
+
+d3-brush@1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.1.5.tgz#066b8e84d17b192986030446c97c0fba7e1bacdc"
+  integrity sha512-rEaJ5gHlgLxXugWjIkolTA0OyMvw8UWU1imYXy1v642XyyswmI1ybKOv05Ft+ewq+TFmdliD3VuK0pRp1VT/5A==
+  dependencies:
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-transition "1"
+
+d3-chord@1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.6.tgz#309157e3f2db2c752f0280fedd35f2067ccbb15f"
+  integrity sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==
+  dependencies:
+    d3-array "1"
+    d3-path "1"
+
+d3-collection@1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e"
+  integrity sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==
+
+d3-color@1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a"
+  integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
+
+d3-contour@1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-1.3.2.tgz#652aacd500d2264cb3423cee10db69f6f59bead3"
+  integrity sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==
+  dependencies:
+    d3-array "^1.1.1"
+
+d3-dispatch@1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz#00d37bcee4dd8cd97729dd893a0ac29caaba5d58"
+  integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==
+
+d3-drag@1:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.5.tgz#2537f451acd39d31406677b7dc77c82f7d988f70"
+  integrity sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==
+  dependencies:
+    d3-dispatch "1"
+    d3-selection "1"
+
+d3-dsv@1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.2.0.tgz#9d5f75c3a5f8abd611f74d3f5847b0d4338b885c"
+  integrity sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==
+  dependencies:
+    commander "2"
+    iconv-lite "0.4"
+    rw "1"
+
+d3-ease@1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.6.tgz#ebdb6da22dfac0a22222f2d4da06f66c416a0ec0"
+  integrity sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ==
+
+d3-fetch@1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-1.1.2.tgz#957c8fbc6d4480599ba191b1b2518bf86b3e1be2"
+  integrity sha512-S2loaQCV/ZeyTyIF2oP8D1K9Z4QizUzW7cWeAOAS4U88qOt3Ucf6GsmgthuYSdyB2HyEm4CeGvkQxWsmInsIVA==
+  dependencies:
+    d3-dsv "1"
+
+d3-force@1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.2.1.tgz#fd29a5d1ff181c9e7f0669e4bd72bdb0e914ec0b"
+  integrity sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==
+  dependencies:
+    d3-collection "1"
+    d3-dispatch "1"
+    d3-quadtree "1"
+    d3-timer "1"
+
+d3-format@1:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.4.tgz#356925f28d0fd7c7983bfad593726fce46844030"
+  integrity sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw==
+
+d3-geo@1:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.12.0.tgz#58ddbdf4d9db5f199db69d1b7c93dca6454a6f24"
+  integrity sha512-NalZVW+6/SpbKcnl+BCO67m8gX+nGeJdo6oGL9H6BRUGUL1e+AtPcP4vE4TwCQ/gl8y5KE7QvBzrLn+HsKIl+w==
+  dependencies:
+    d3-array "1"
+
+d3-hierarchy@1:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz#2f6bee24caaea43f8dc37545fa01628559647a83"
+  integrity sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==
+
+d3-interpolate@1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987"
+  integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==
+  dependencies:
+    d3-color "1"
+
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
+d3-polygon@1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.6.tgz#0bf8cb8180a6dc107f518ddf7975e12abbfbd38e"
+  integrity sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==
+
+d3-quadtree@1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.7.tgz#ca8b84df7bb53763fe3c2f24bd435137f4e53135"
+  integrity sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==
+
+d3-random@1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.2.tgz#2833be7c124360bf9e2d3fd4f33847cfe6cab291"
+  integrity sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==
+
+d3-scale-chromatic@1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz#54e333fc78212f439b14641fb55801dd81135a98"
+  integrity sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==
+  dependencies:
+    d3-color "1"
+    d3-interpolate "1"
+
+d3-scale@2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-2.2.2.tgz#4e880e0b2745acaaddd3ede26a9e908a9e17b81f"
+  integrity sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==
+  dependencies:
+    d3-array "^1.2.0"
+    d3-collection "1"
+    d3-format "1"
+    d3-interpolate "1"
+    d3-time "1"
+    d3-time-format "2"
+
+d3-selection@1, d3-selection@^1.1.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.1.tgz#98eedbbe085fbda5bafa2f9e3f3a2f4d7d622a98"
+  integrity sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA==
+
+d3-shape@1:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+d3-time-format@2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.2.3.tgz#0c9a12ee28342b2037e5ea1cf0b9eb4dd75f29cb"
+  integrity sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==
+  dependencies:
+    d3-time "1"
+
+d3-time@1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
+  integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
+
+d3-timer@1:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.10.tgz#dfe76b8a91748831b13b6d9c793ffbd508dd9de5"
+  integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
+
+d3-transition@1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.3.2.tgz#a98ef2151be8d8600543434c1ca80140ae23b398"
+  integrity sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==
+  dependencies:
+    d3-color "1"
+    d3-dispatch "1"
+    d3-ease "1"
+    d3-interpolate "1"
+    d3-selection "^1.1.0"
+    d3-timer "1"
+
+d3-voronoi@1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
+  integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==
+
+d3-zoom@1:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.8.3.tgz#b6a3dbe738c7763121cd05b8a7795ffe17f4fc0a"
+  integrity sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==
+  dependencies:
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-transition "1"
+
+d3@^5.16.0:
+  version "5.16.0"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-5.16.0.tgz#9c5e8d3b56403c79d4ed42fbd62f6113f199c877"
+  integrity sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==
+  dependencies:
+    d3-array "1"
+    d3-axis "1"
+    d3-brush "1"
+    d3-chord "1"
+    d3-collection "1"
+    d3-color "1"
+    d3-contour "1"
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-dsv "1"
+    d3-ease "1"
+    d3-fetch "1"
+    d3-force "1"
+    d3-format "1"
+    d3-geo "1"
+    d3-hierarchy "1"
+    d3-interpolate "1"
+    d3-path "1"
+    d3-polygon "1"
+    d3-quadtree "1"
+    d3-random "1"
+    d3-scale "2"
+    d3-scale-chromatic "1"
+    d3-selection "1"
+    d3-shape "1"
+    d3-time "1"
+    d3-time-format "2"
+    d3-timer "1"
+    d3-transition "1"
+    d3-voronoi "1"
+    d3-zoom "1"
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -3487,6 +3779,13 @@ fill-range@^4.0.0:
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -3669,6 +3968,11 @@ fsevents@^1.2.7:
     bindings "^1.5.0"
     nan "^2.12.1"
 
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -3733,7 +4037,7 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-parent@^5.0.0:
+glob-parent@^5.0.0, glob-parent@~5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
   integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
@@ -3745,7 +4049,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -4110,7 +4414,7 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24:
+iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -4252,6 +4556,11 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
+interpret@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
+  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
+
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -4325,6 +4634,13 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -4437,7 +4753,7 @@ is-glob@^3.1.0:
   dependencies:
     is-extglob "^2.1.0"
 
-is-glob@^4.0.0, is-glob@^4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
   integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
@@ -4451,6 +4767,11 @@ is-number@^3.0.0:
   dependencies:
     kind-of "^3.0.2"
 
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-obj@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
@@ -4793,7 +5114,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -5337,7 +5658,7 @@ normalize-path@^2.1.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
-normalize-path@^3.0.0:
+normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -5828,6 +6149,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picomatch@^2.0.4, picomatch@^2.0.7:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -6471,6 +6797,20 @@ readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
+readdirp@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
+  integrity sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==
+  dependencies:
+    picomatch "^2.0.7"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
+  dependencies:
+    resolve "^1.1.6"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -6656,7 +6996,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.8.1:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -6735,6 +7075,11 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=
+
 rxjs@^6.5.3:
   version "6.5.5"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.5.tgz#c5c884e3094c8cfee31bf27eb87e54ccfc87f9ec"
@@ -6764,6 +7109,24 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-loader@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
+  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
+  dependencies:
+    clone-deep "^4.0.1"
+    loader-utils "^1.2.3"
+    neo-async "^2.6.1"
+    schema-utils "^2.6.1"
+    semver "^6.3.0"
+
+sass@^1.19.0:
+  version "1.26.3"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.3.tgz#412df54486143b76b5a65cdf7569e86f44659f46"
+  integrity sha512-5NMHI1+YFYw4sN3yfKjpLuV9B5l7MqQ6FlkTcC4FT+oHbBRUZoSjHrrt/mE0nFXJyY2kQtU9ou9HxvFVjLFuuw==
+  dependencies:
+    chokidar ">=2.0.0 <4.0.0"
+
 sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -6778,7 +7141,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.4, schema-utils@^2.6.5:
+schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.1, schema-utils@^2.6.4, schema-utils@^2.6.5:
   version "2.6.6"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.6.tgz#299fe6bd4a3365dc23d99fd446caff8f1d6c330c"
   integrity sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==
@@ -6813,6 +7176,11 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.1.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -6898,6 +7266,13 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -6927,6 +7302,15 @@ shell-quote@^1.6.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
+shelljs@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.3.tgz#a7f3319520ebf09ee81275b2368adb286659b097"
+  integrity sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7544,6 +7928,13 @@ to-regex-range@^2.1.0:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 to-regex@^3.0.1, to-regex@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
@@ -7868,6 +8259,14 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-cli-plugin-vuetify@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.5.tgz#09ba78928653fc7e3801ea37e5120f957413dda4"
+  integrity sha512-jtxcidjLT5f1H9QLYKLFjo/ZG42ud4pI9bK3WNO5DXyhiMDMTwSZ7b3NcJVRH7tKYbv5/ty0VPdDGlf4w22AMA==
+  dependencies:
+    semver "^7.1.2"
+    shelljs "^0.8.3"
+
 vue-eslint-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz#a4ed2669f87179dedd06afdd8736acbb3a3864d6"
@@ -7922,6 +8321,18 @@ vue@^2.6.11:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
+vuetify-loader@^1.3.0:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/vuetify-loader/-/vuetify-loader-1.4.3.tgz#df1323c558be09890877e5fbe817b3a71a6c538d"
+  integrity sha512-fS0wRil682Ebsj2as+eruBoMPKaQYDhu/fDAndnTItzSY4RK4LOEIsssVL4vD6QY8dvUgoGL84SUQ6vGr777CA==
+  dependencies:
+    loader-utils "^1.2.0"
+
+vuetify@^2.2.11:
+  version "2.2.23"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.2.23.tgz#9529094425e710d7534e95e41302c7d7d6ea5d8e"
+  integrity sha512-VZ0kBLXH7KsVj8dKLz0X1MFvbyf1kOPwh0jXa6M/gKqKkWsEAnwNXpM/H5EMOKDp2H6fjwI1yGAZO0GTpQHoXg==
+
 watchpack@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"