From 372c9181fc290a1294ebe924a5d0f2a8dd599e71 Mon Sep 17 00:00:00 2001
From: Nancy Butler <nancybutler.rancher@Nancys-MBP.tempe.rancherlabs.com>
Date: Tue, 17 Sep 2019 16:24:18 -0700
Subject: [PATCH] sparkline in app table

---
 components/DiscreteProgressBar.vue   |  61 ++++++
 components/Random.vue                |  21 ++-
 components/TableSparkLine.vue        | 108 +++++++++++
 components/formatters/BadgeState.vue |   4 +-
 package.json                         |   2 +
 pages/rio/apps/index.vue             |  40 +++-
 utils/table-headers.js               |   6 +-
 yarn.lock                            | 270 ++++++++++++++++++++++++++-
 8 files changed, 491 insertions(+), 21 deletions(-)
 create mode 100644 components/DiscreteProgressBar.vue
 create mode 100644 components/TableSparkLine.vue

diff --git a/components/DiscreteProgressBar.vue b/components/DiscreteProgressBar.vue
new file mode 100644
index 0000000000..0ef9e23a26
--- /dev/null
+++ b/components/DiscreteProgressBar.vue
@@ -0,0 +1,61 @@
+<script>
+import { TweenLite } from 'gsap/umd/TweenMax';
+
+export default {
+  props:    {
+    bars: {
+      type:    Number,
+      default: 10
+    },
+    progress: {
+      type:    Number,
+      default: 20
+    },
+    interval: {
+      type:    Number,
+      default: 1000
+    }
+  },
+  data() {
+    return { animatedProgress: this.progress };
+  },
+  watch: {
+    progress(newProgress, oldProgress) {
+      TweenLite.to(this.$data, this.interval / 2000, { animatedProgress: newProgress } );
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="bar-container">
+    <div
+      v-for="n in bars"
+      :key="n"
+      class="progress-bar"
+      :class="{ filled: n / bars <= animatedProgress / 100 }"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bar-container{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  /* justify-content: space-between; */
+}
+.progress-bar {
+  height: 100%;
+  border-radius: 5%;
+  background-color: #6c6c76;
+  transition: background-color 0.2s;
+  margin-left: 3px;
+  width: 3px;
+}
+
+.filled {
+  background-color: #3d98d3;
+  transition: background-color 0.2s;
+}
+</style>
diff --git a/components/Random.vue b/components/Random.vue
index c3405e1f16..6795a7b722 100644
--- a/components/Random.vue
+++ b/components/Random.vue
@@ -4,7 +4,7 @@ export default {
   props: {
     tagName: {
       type:    String,
-      default: 'span',
+      default: 'div',
     },
 
     min: {
@@ -40,7 +40,7 @@ export default {
   },
 
   data() {
-    return { label: this.update() };
+    return { label: this.update(), value: 0 };
   },
 
   beforeDestroy() {
@@ -57,6 +57,7 @@ export default {
 
       if ( this.label !== label ) {
         this.label = label;
+        this.value = value;
       }
 
       this.timer = setTimeout(() => {
@@ -70,7 +71,21 @@ export default {
 </script>
 
 <template>
-  <component :is="tagName" v-bind="$attrs">
+  <component :is="tagName" v-bind="$attrs" class="container">
     {{ label }}
+    <slot :data="value" :min="min" :max="max" :interval="interval">
+    </slot>
   </component>
 </template>
+
+<style lang="scss" scoped>
+.container{
+  display: flex;
+  padding: 5px;
+  height: 80%;
+  align-items: center
+}
+  span {
+    display:block;
+  }
+</style>
diff --git a/components/TableSparkLine.vue b/components/TableSparkLine.vue
new file mode 100644
index 0000000000..229a58c134
--- /dev/null
+++ b/components/TableSparkLine.vue
@@ -0,0 +1,108 @@
+<script>
+import * as d3 from 'd3';
+
+export default {
+  props: {
+    width: {
+      type:    Number,
+      default: 100
+    },
+    height: {
+      type:    Number,
+      default: 20
+    },
+    inputDatum:  {
+      type:    Number,
+      default: 0
+    },
+    min: {
+      type:    Number,
+      default: 0
+    },
+    max: {
+      type:    Number,
+      default: 500
+    }
+  },
+
+  data() {
+    return { dataSet: [this.inputDatum], isMounted: false };
+  },
+
+  computed: {
+    graphWidth() {
+      if (!this.isMounted) return 0;
+
+      const divWidth = d3.select('.graphContainer').node().getBoundingClientRect().width;
+
+      return Math.max(this.width, divWidth);
+    },
+    graphHeight() {
+      if (!this.isMounted) return 0;
+
+      const divHeight = d3.select('.graphContainer').node().getBoundingClientRect().height;
+
+      return Math.max(this.height, divHeight);
+    },
+    scaleX() {
+      return d3.scaleLinear().domain([0, 10]).range([0, this.graphWidth])
+      ;
+    },
+    scaleY() {
+      return d3.scaleLinear().domain([this.min, this.max]).range([this.graphHeight, 0]);
+    },
+
+    line() {
+      const vm = this;
+
+      const path = d3.line()
+        .x((d, i) => vm.scaleX(i))
+        .y(d => vm.scaleY(d));
+
+      return path(this.dataSet);
+    }
+  },
+  watch: {
+    inputDatum(newProp) {
+      this.dataSet.push(newProp);
+      if (this.dataSet.length > 10) {
+        this.dataSet.shift();
+      }
+      //   this.drawLine();
+    }
+  },
+  // track when component is mounted to use d3 DOM reference
+  mounted() {
+    this.isMounted = true;
+  },
+  methods: {
+    drawLine() {
+      d3.select('#something')
+        .datum(this.dataSet)
+        .attr('d', this.line);
+    }
+  },
+
+};
+</script>
+
+<template>
+  <div class="graphContainer">
+    <svg :width="graphWidth" :height="graphHeight">
+      <path :d="line" />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+    .graphContainer {
+        overflow: hidden;
+        height: 100%;
+    }
+    path {
+        fill: none;
+        stroke: #6e3daa;
+        stroke-width: 1.5px
+    }
+
+</style>
diff --git a/components/formatters/BadgeState.vue b/components/formatters/BadgeState.vue
index f022300554..66d5a7b1bd 100644
--- a/components/formatters/BadgeState.vue
+++ b/components/formatters/BadgeState.vue
@@ -4,7 +4,7 @@ export default {
   props: {
     value: {
       type:     String,
-      required: true
+      default: ''
     },
     row: {
       type:     Object,
@@ -12,7 +12,7 @@ export default {
     },
     col: {
       type:     Object,
-      required: true
+      default: () => {}
     },
   },
 };
diff --git a/package.json b/package.json
index 2fd7cf71a4..a055a96daa 100644
--- a/package.json
+++ b/package.json
@@ -24,11 +24,13 @@
     "cookie": "^0.4.0",
     "cookie-universal-nuxt": "^2.0.17",
     "cross-env": "^5.2.0",
+    "d3": "^5.12.0",
     "dayjs": "^1.8.16",
     "diff2html": "^2.11.2",
     "dotenv": "^8.0.0",
     "express": "^4.17.1",
     "file-saver": "^2.0.2",
+    "gsap": "^2.1.3",
     "jquery": "^3.4.1",
     "js-cookie": "^2.2.0",
     "js-yaml": "^3.13.1",
diff --git a/pages/rio/apps/index.vue b/pages/rio/apps/index.vue
index b0b0b3f8ae..2a0e73e453 100644
--- a/pages/rio/apps/index.vue
+++ b/pages/rio/apps/index.vue
@@ -2,6 +2,8 @@
 import ResourceTable from '@/components/ResourceTable';
 import BadgeState from '@/components/formatters/BadgeState';
 import Random from '@/components/Random';
+import DiscreteProgressBar from '@/components/DiscreteProgressBar';
+import TableSparkLine from '@/components/TableSparkLine';
 import { allHash } from '@/utils/promise';
 import { get } from '@/utils/object';
 
@@ -14,7 +16,7 @@ const RESOURCE = RIO.APP;
 
 export default {
   components: {
-    ResourceTable, BadgeState, Random
+    ResourceTable, BadgeState, Random, DiscreteProgressBar, TableSparkLine
   },
 
   computed: {
@@ -75,13 +77,25 @@ export default {
         {{ scope.row.totalScale || '?' }}
       </template>
       <template #cell:success>
-        <Random :min="10" :max="100" suffix="%" />
+        <Random :min="10" :max="100" :suffix="`%`">
+          <template v-slot:default="graph">
+            <DiscreteProgressBar :progress="graph.data" :interval="graph.interval" />
+          </template>
+        </Random>
       </template>
       <template #cell:req-rate>
-        <Random :min="1" :max="20" :decimals="1" suffix="/s" />
+        <Random :min="1" :max="20" :decimals="1" :suffix="`/s`">
+          <template v-slot:default="graph">
+            <TableSparkLine :input-datum="graph.data" :max="graph.max" />
+          </template>
+        </Random>
       </template>
       <template #cell:p95>
-        <Random :min="50" :max="500" suffix="ms" />
+        <Random :min="50" :max="500" :suffix="`ms`">
+          <template v-slot="graph">
+            <TableSparkLine :input-datum="graph.data" />
+          </template>
+        </Random>
       </template>
       <template #sub-row="scope">
         <tr v-for="version in scope.row.spec.revisions" :key="version.serviceName">
@@ -98,13 +112,25 @@ export default {
             </div>
           </td>
           <td align="right">
-            <Random :min="10" :max="100" suffix="%" />
+            <Random :min="10" :max="100" :interval="3000" :suffix="`%`">
+              <template v-slot:default="graph">
+                <DiscreteProgressBar :progress="graph.data" :interval="graph.interval" />
+              </template>
+            </Random>
           </td>
           <td align="right">
-            <Random :min="1" :max="20" :decimals="1" suffix="/s" />
+            <Random :min="1" :max="20" :decimals="1" :suffix="`/s`">
+              <template v-slot:default="graph">
+                <TableSparkLine :input-datum="graph.data" :max="graph.max" />
+              </template>
+            </random>
           </td>
           <td align="right">
-            <Random :min="50" :max="500" suffix="ms" />
+            <Random :min="50" :max="500" :interval="1000" :suffix="`ms`">
+              <template v-slot="graph">
+                <TableSparkLine :input-datum="graph.data" />
+              </template>
+            </Random>
           </td>
           <td align="right">
             ?
diff --git a/utils/table-headers.js b/utils/table-headers.js
index 7e9e6eb9ab..0a7b37ca91 100644
--- a/utils/table-headers.js
+++ b/utils/table-headers.js
@@ -72,7 +72,7 @@ export const SUCCESS = {
   name:  'success',
   label: 'Success',
   value: 'success',
-  width: 60,
+  width: 120,
   align: 'right',
 };
 
@@ -80,7 +80,7 @@ export const REQ_RATE = {
   name:  'req-rate',
   label: 'Req Rate',
   value: 'rps',
-  width: 60,
+  width: 120,
   align: 'right',
 };
 
@@ -88,7 +88,7 @@ export const P95 = {
   name:  'p95',
   label: '95%tile',
   value: 'p95',
-  width: 60,
+  width: 120,
   align: 'right',
 };
 
diff --git a/yarn.lock b/yarn.lock
index 43c3a789bb..3a50b7cfca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3032,16 +3032,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.19.0, commander@^2.20.0, commander@~2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
+  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
+
 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.19.0, commander@^2.20.0, commander@~2.20.0:
-  version "2.20.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
-  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
-
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -3647,6 +3647,254 @@ cyclist@~0.2.2:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
   integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
 
+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.3"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.1.3.tgz#a04900a71fa5390f7f7afe1504b02a382709f380"
+  integrity sha512-v8bbYyCFKjyCzFk/tdWqXwDykY8YWqhXYjcYxfILIit085VZOpj4XJKOMccTsvWxgzSLMJQg5SiqHjslsipEDg==
+  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.3.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.3.0.tgz#675818359074215b020dc1d41d518136dcb18fa9"
+  integrity sha512-NHODMBlj59xPAwl2BDiO2Mog6V+PrGRtBfWKqKRrs9MCqlSkIEb0Z/SfY7jW29ReHTDC/j+vwXhnZcXI3+3fbg==
+
+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.5"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.5.tgz#e25c10a186517cd6c82dd19ea018f07e01e39015"
+  integrity sha512-vwKx+lAqB1UuCeklr6Jh1bvC4SZgbSqbkGBLClItFBIYH4vqDJCA7qfoy14lXmJdnBOdxndAMxjCbImJYW7e6g==
+
+d3-drag@1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.4.tgz#ba9331d68158ad14cf0b4b28a8afa9e78c7d99ad"
+  integrity sha512-ICPurDETFAelF1CTHdIyiUM4PsyZLaM+7oIBhmyP+cuVjze5vDZ8V//LdOFjg0jGnFIZD/Sfmk0r95PSiu78rw==
+  dependencies:
+    d3-dispatch "1"
+    d3-selection "1"
+
+d3-dsv@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.1.1.tgz#aaa830ecb76c4b5015572c647cc6441e3c7bb701"
+  integrity sha512-1EH1oRGSkeDUlDRbhsFytAXU6cAmXFzc52YUe6MRlPClmWb85MP1J5x+YJRzya4ynZWnbELdSAvATFW/MbxaXw==
+  dependencies:
+    commander "2"
+    iconv-lite "0.4"
+    rw "1"
+
+d3-ease@1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.5.tgz#8ce59276d81241b1b72042d6af2d40e76d936ffb"
+  integrity sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ==
+
+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.1"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.1.tgz#c45f74b17c5a290c072a4ba7039dd19662cd5ce6"
+  integrity sha512-TUswGe6hfguUX1CtKxyG2nymO+1lyThbkS1ifLX0Sr+dOQtAD5gkrffpHnx+yHNKUZ0Bmg5T4AjUQwugPDrm0g==
+
+d3-geo@1:
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.11.6.tgz#134f2ef035ff75a448075fafdea92702a2e0e0cf"
+  integrity sha512-z0J8InXR9e9wcgNtmVnPTj0TU8nhYT6lD/ak9may2PdKqXIeHUr8UbFLoCtrPYNsjv6YaLvSDQVl578k6nm7GA==
+  dependencies:
+    d3-array "1"
+
+d3-hierarchy@1:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz#7a6317bd3ed24e324641b6f1e76e978836b008cc"
+  integrity sha512-L+GHMSZNwTpiq4rt9GEsNcpLa4M96lXMR8M/nMG9p5hBE0jy6C+3hWtyZMenPQdwla249iJy7Nx0uKt3n+u9+w==
+
+d3-interpolate@1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.3.2.tgz#417d3ebdeb4bc4efcc8fd4361c55e4040211fd68"
+  integrity sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==
+  dependencies:
+    d3-color "1"
+
+d3-path@1:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.8.tgz#4a0606a794d104513ec4a8af43525f374b278719"
+  integrity sha512-J6EfUNwcMQ+aM5YPOB8ZbgAZu6wc82f/0WFxrxwV6Ll8wBwLaHLKCqQ5Imub02JriCVVdPjgI+6P3a4EWJCxAg==
+
+d3-polygon@1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.5.tgz#9a645a0a64ff6cbf9efda96ee0b4a6909184c363"
+  integrity sha512-RHhh1ZUJZfhgoqzWWuRhzQJvO7LavchhitSTHGu9oj6uuLFzYZVeBzaWTQ2qSO6bz2w55RMoOCf0MsLCDB6e0w==
+
+d3-quadtree@1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.6.tgz#d1ab2a95a7f27bbde88582c94166f6ae35f32056"
+  integrity sha512-NUgeo9G+ENQCQ1LsRr2qJg3MQ4DJvxcDNCiohdJGHt5gRhBW6orIB5m5FJ9kK3HNL8g9F4ERVoBzcEwQBfXWVA==
+
+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.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.0.tgz#ab9ac1e664cf967ebf1b479cc07e28ce9908c474"
+  integrity sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg==
+
+d3-shape@1:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.5.tgz#e81aea5940f59f0a79cfccac012232a8987c6033"
+  integrity sha512-VKazVR3phgD+MUCldapHD7P9kcrvPcexeX/PkMJmkUov4JM8IxsSg1DvbYoYich9AtdTsa5nNk2++ImPiDiSxg==
+  dependencies:
+    d3-path "1"
+
+d3-time-format@2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.3.tgz#ae06f8e0126a9d60d6364eac5b1533ae1bac826b"
+  integrity sha512-6k0a2rZryzGm5Ihx+aFMuO1GgelgIz+7HhB4PH4OEndD5q2zGn1mDfRdNrulspOfR6JXkb2sThhDK41CSK85QA==
+  dependencies:
+    d3-time "1"
+
+d3-time@1:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.11.tgz#1d831a3e25cd189eb256c17770a666368762bbce"
+  integrity sha512-Z3wpvhPLW4vEScGeIMUckDW7+3hWKOQfAWg/U7PlWBnQmeKQ00gCUsTtWSYulrKNA7ta8hJ+xXc6MHrMuITwEw==
+
+d3-timer@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.9.tgz#f7bb8c0d597d792ff7131e1c24a36dd471a471ba"
+  integrity sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg==
+
+d3-transition@1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.2.0.tgz#f538c0e21b2aa1f05f3e965f8567e81284b3b2b8"
+  integrity sha512-VJ7cmX/FPIPJYuaL2r1o1EMHLttvoIuZhhuAlRoOxDzogV8iQS6jYulDm3xEU3TqL80IZIhI551/ebmCMrkvhw==
+  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.12.0:
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-5.12.0.tgz#0ddeac879c28c882317cd439b495290acd59ab61"
+  integrity sha512-flYVMoVuhPFHd9zVCe2BxIszUWqBcd5fvQGMNRmSiBrgdnh6Vlruh60RJQTouAK9xPbOB0plxMvBm4MoyODXNg==
+  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"
@@ -5233,6 +5481,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.0.tgz#8d8fdc73977cb04104721cb53666c1ca64cd328b"
   integrity sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==
 
+gsap@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/gsap/-/gsap-2.1.3.tgz#c63ee3a50f0b7dc3b46ed0845bb0f09049feb944"
+  integrity sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ==
+
 gzip-size@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -5575,7 +5828,7 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -9535,6 +9788,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.4.0:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.2.tgz#2e35ce815cd46d84d02a209fb4e5921e051dbec7"