From d6c11887cdfe59e1b15b20f78bc8d61eba7e60d5 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Tue, 13 Apr 2021 11:20:24 -0400
Subject: [PATCH 01/31] fix: lab mode in TS

---
 src/modes/index.ts                            | 10 +--
 src/modes/lab/Lab.svelte                      | 88 +++++++++----------
 .../lab/components/RegionHexGridCell.svelte   |  3 +-
 .../lab/components/SensorHexGridCell.svelte   |  2 +-
 webpack.config.js                             | 10 +--
 5 files changed, 56 insertions(+), 57 deletions(-)

diff --git a/src/modes/index.ts b/src/modes/index.ts
index cab8ec2e6..29876cc03 100644
--- a/src/modes/index.ts
+++ b/src/modes/index.ts
@@ -63,11 +63,11 @@ const modes: Mode[] = [
     label: 'Export Data',
     component: () => import(/* webpackChunkName: 'm-export' */ './exportdata/ExportData.svelte').then((r) => r.default),
   },
-  // {
-  //   id: 'lab',
-  //   label: 'Lab',
-  //   component: () => import(/* webpackChunkName: 'mode-lab' */ './lab/Lab.svelte').then((r) => r.default),
-  // },
+  {
+    id: 'lab',
+    label: 'Lab',
+    component: () => import(/* webpackChunkName: 'mode-lab' */ './lab/Lab.svelte').then((r) => r.default),
+  },
   {
     id: 'indicator-status',
     label: 'Indicator Status Overview',
diff --git a/src/modes/lab/Lab.svelte b/src/modes/lab/Lab.svelte
index ef5f4f698..15d57e53e 100644
--- a/src/modes/lab/Lab.svelte
+++ b/src/modes/lab/Lab.svelte
@@ -1,49 +1,49 @@
 <script>
   const experiments = [
-    {
-      name: 'LineAndMap',
-      component: () => import('./LineAndMap.svelte').then((r) => r.default),
-    },
-    {
-      name: 'State Map',
-      component: () => import('./StateMap.svelte').then((r) => r.default),
-    },
-    {
-      name: 'VegaMap',
-      component: () => import('./VegaMap.svelte').then((r) => r.default),
-    },
-    {
-      name: 'County Related',
-      component: () => import('./CountyRelated.svelte').then((r) => r.default),
-    },
-    {
-      name: 'State Distribution',
-      component: () => import('./StateDistribution.svelte').then((r) => r.default),
-    },
-    {
-      name: 'LineAndTileMap',
-      component: () => import('./LineAndTileMap.svelte').then((r) => r.default),
-    },
-    {
-      name: 'LineAndGapMinder',
-      component: () => import('./LineAndGapMinder.svelte').then((r) => r.default),
-    },
-    {
-      name: 'LineAndThermalPlot',
-      component: () => import('./LineAndThermalPlot.svelte').then((r) => r.default),
-    },
-    {
-      name: 'StateMatrix',
-      component: () => import('./StateMatrix.svelte').then((r) => r.default),
-    },
-    {
-      name: 'StateHTMLMatrix',
-      component: () => import('./StateHTMLMatrix.svelte').then((r) => r.default),
-    },
-    {
-      name: 'Parallel Coodinates Plot',
-      component: () => import('./PCP.svelte').then((r) => r.default),
-    },
+    // {
+    //   name: 'LineAndMap',
+    //   component: () => import('./LineAndMap.svelte').then((r) => r.default),
+    // },
+    // {
+    //   name: 'State Map',
+    //   component: () => import('./StateMap.svelte').then((r) => r.default),
+    // },
+    // {
+    //   name: 'VegaMap',
+    //   component: () => import('./VegaMap.svelte').then((r) => r.default),
+    // },
+    // {
+    //   name: 'County Related',
+    //   component: () => import('./CountyRelated.svelte').then((r) => r.default),
+    // },
+    // {
+    //   name: 'State Distribution',
+    //   component: () => import('./StateDistribution.svelte').then((r) => r.default),
+    // },
+    // {
+    //   name: 'LineAndTileMap',
+    //   component: () => import('./LineAndTileMap.svelte').then((r) => r.default),
+    // },
+    // {
+    //   name: 'LineAndGapMinder',
+    //   component: () => import('./LineAndGapMinder.svelte').then((r) => r.default),
+    // },
+    // {
+    //   name: 'LineAndThermalPlot',
+    //   component: () => import('./LineAndThermalPlot.svelte').then((r) => r.default),
+    // },
+    // {
+    //   name: 'StateMatrix',
+    //   component: () => import('./StateMatrix.svelte').then((r) => r.default),
+    // },
+    // {
+    //   name: 'StateHTMLMatrix',
+    //   component: () => import('./StateHTMLMatrix.svelte').then((r) => r.default),
+    // },
+    // {
+    //   name: 'Parallel Coodinates Plot',
+    //   component: () => import('./PCP.svelte').then((r) => r.default),
+    // },
   ];
 
   let selected = Number.parseInt(new URL(window.location.href).searchParams.get('lab') || '0', 10);
diff --git a/src/modes/lab/components/RegionHexGridCell.svelte b/src/modes/lab/components/RegionHexGridCell.svelte
index 7c2b6418f..6678b0cec 100644
--- a/src/modes/lab/components/RegionHexGridCell.svelte
+++ b/src/modes/lab/components/RegionHexGridCell.svelte
@@ -2,8 +2,7 @@
   import { formatDateShort, formatPopulation } from '../../../formats';
   import childIcon from '!raw-loader!@fortawesome/fontawesome-free/svgs/solid/child.svg';
   import calendarIcon from '!raw-loader!@fortawesome/fontawesome-free/svgs/solid/calendar.svg';
-
-  import HexGridCell from './HexGridCell.svelte';
+  import HexGridCell from '../../mobile/components/HexGridCell.svelte';
   /**
    * @type {import('../mobile/utils').Params}
    */
diff --git a/src/modes/lab/components/SensorHexGridCell.svelte b/src/modes/lab/components/SensorHexGridCell.svelte
index 976eb7c12..eec678622 100644
--- a/src/modes/lab/components/SensorHexGridCell.svelte
+++ b/src/modes/lab/components/SensorHexGridCell.svelte
@@ -2,7 +2,7 @@
   import Vega from '../../../components/Vega.svelte';
   import { addMissing, fetchTimeSlice } from '../../../data';
   import { generateLineChartSpec } from '../../../specs/lineSpec';
-  import HexGridCell from './HexGridCell.svelte';
+  import HexGridCell from '../../mobile/components/HexGridCell.svelte';
 
   /**
    * @type {import("../../../stores/constants").SensorEntry}
diff --git a/webpack.config.js b/webpack.config.js
index 152681d0c..6f7a77ce1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -252,11 +252,11 @@ module.exports = () => {
         template: './src/index.html',
         filename: 'data-anomalies/index.html',
       }),
-      // new HtmlWebpackPlugin({
-      //   title: 'COVIDcast Lab',
-      //   template: './src/index.html',
-      //   filename: 'lab/index.html',
-      // }),
+      new HtmlWebpackPlugin({
+        title: 'COVIDcast Lab',
+        template: './src/index.html',
+        filename: 'lab/index.html',
+      }),
       !devMode &&
         new MiniCssExtractPlugin({
           filename: '[name].[contenthash].css',

From c356f6835a5186ca01598634754c37197c0c55cd Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Tue, 13 Apr 2021 15:39:27 -0400
Subject: [PATCH 02/31] feat: simple backfil vis

---
 src/data/indicatorInfo.ts                     |  37 ++++++
 .../indicator-status/BackfillProfile.svelte   | 118 ++++++++++++++++++
 .../indicator-status/IndicatorStatus.svelte   |  23 ++--
 src/specs/commonSpec.ts                       |   3 +-
 4 files changed, 173 insertions(+), 8 deletions(-)
 create mode 100644 src/modes/indicator-status/BackfillProfile.svelte

diff --git a/src/data/indicatorInfo.ts b/src/data/indicatorInfo.ts
index 159b31956..dfca70e0d 100644
--- a/src/data/indicatorInfo.ts
+++ b/src/data/indicatorInfo.ts
@@ -6,6 +6,9 @@ import { EpiDataRow, fetchData } from './fetchData';
 import { addNameInfos } from '.';
 import { countyInfo } from '../maps/infos';
 import type { RegionInfo } from '../maps/interfaces';
+import type { TimeFrame } from '../stores/params';
+import data from './__test__/backfill/chng_sample_ny.json';
+import { timeDay } from 'd3-time';
 
 export interface Coverage {
   date: Date;
@@ -63,3 +66,37 @@ export function getAvailableCounties(indicator: IndicatorStatus, date: Date): Pr
     },
   ).then((rows) => addNameInfos(rows).filter((d) => d.level === 'county'));
 }
+
+export interface ProfileEntry {
+  time_value: number;
+  date_value: Date;
+  issue_date: Date;
+  lag: number;
+  /**
+   * [0..1]
+   */
+  confidence: number;
+  value: number;
+}
+
+export function loadBackFillProfile(indicator: IndicatorStatus, window: TimeFrame): Promise<ProfileEntry[]> {
+  if (indicator.name !== 'Change' || window.min < new Date(2020, 0, 1)) {
+    return Promise.resolve([]);
+  }
+  let latest = data[0];
+  const rows: ProfileEntry[] = data.map((d) => {
+    if (d.time_value !== latest.time_value) {
+      latest = d; // sorted like that the lag desc = max
+    }
+    const date = parseFakeISO(d.time_value);
+    return {
+      date_value: date,
+      time_value: d.time_value,
+      lag: d.lag,
+      issue_date: timeDay.offset(date, d.lag),
+      confidence: d.sample_size / latest.sample_size,
+      value: d.value,
+    };
+  });
+  return Promise.resolve(rows);
+}
diff --git a/src/modes/indicator-status/BackfillProfile.svelte b/src/modes/indicator-status/BackfillProfile.svelte
new file mode 100644
index 000000000..811d7addd
--- /dev/null
+++ b/src/modes/indicator-status/BackfillProfile.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+  import type { TopLevelSpec } from 'vega-lite';
+  import type { NormalizedSpec } from 'vega-lite/build/src/spec';
+  import Vega from '../../components/Vega.svelte';
+  import { IndicatorStatus, loadBackFillProfile } from '../../data/indicatorInfo';
+  import { commonConfig } from '../../specs/commonSpec';
+  import { DateParam } from '../../stores/params';
+  import DownloadMenu from '../mobile/components/DownloadMenu.svelte';
+
+  export let indicator: IndicatorStatus;
+  export let date: Date;
+
+  $: window = new DateParam(date).windowTimeFrame;
+
+  $: data = loadBackFillProfile(indicator, window);
+
+  function generateLayer(field: string, title: string, i: number): NormalizedSpec {
+    return {
+      width: 'container',
+      height: 300,
+      mark: {
+        type: 'rect',
+        stroke: null,
+        width: {
+          expr: `width / customCountDays(domain('concat_${i}_x')[0], domain('concat_${i}_x')[1])`,
+        },
+        height: {
+          expr: `height / (domain('concat_${i}_y')[1] - domain('concat_${i}_y')[0])`,
+        },
+        tooltip: {
+          content: 'data',
+        },
+      },
+      encoding: {
+        x: {
+          field: field,
+          type: 'temporal',
+          axis: {
+            format: '%m/%d',
+            formatType: 'cachedTime',
+            labelOverlap: true,
+            grid: true,
+            gridDash: [4, 4],
+            tickCount: 'week',
+            title: title,
+          },
+        },
+        y: {
+          field: 'lag',
+          type: 'quantitative',
+          scale: {
+            zero: true,
+          },
+          axis: {
+            title: 'Lag',
+          },
+        },
+        color: {
+          field: 'confidence',
+          type: 'quantitative',
+          scale: {
+            type: 'pow',
+            exponent: 0.1,
+            scheme: 'viridis',
+          },
+          legend: {
+            gradientLength: 500,
+          },
+        },
+      },
+    };
+  }
+  function generateSpec(indicator: IndicatorStatus): TopLevelSpec {
+    return {
+      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+      autosize: {
+        type: 'none',
+        contains: 'padding',
+        resize: true,
+      },
+      width: 100,
+      height: 100,
+      data: { name: 'values' },
+      config: commonConfig,
+      title: {
+        text: `${indicator.name} Backfill Profile`,
+      },
+      padding: {
+        left: 50,
+        top: 50,
+        right: 100,
+        bottom: 50,
+      },
+      // resolve: {
+      //   axis: {
+      //     x: 'shared',
+      //     y: 'shared'
+      //   }
+      // },
+      vconcat: [generateLayer('date_value', 'Reference Date', 0), generateLayer('issue_date', 'Issue Date', 1)],
+    };
+  }
+
+  $: spec = generateSpec(indicator);
+
+  let vegaRef: Vega | undefined = undefined;
+</script>
+
+<div class="chart-300">
+  <Vega bind:this={vegaRef} {spec} {data} className="charekt-breakout" />
+  <DownloadMenu {vegaRef} absolutePos fileName="{indicator.name}_Backfill_profile" advanced={false} />
+</div>
+
+<style>
+  .chart-300 > :global(.vega-embed) {
+    height: 800px;
+  }
+</style>
diff --git a/src/modes/indicator-status/IndicatorStatus.svelte b/src/modes/indicator-status/IndicatorStatus.svelte
index 31f1d0026..cf7291d8a 100644
--- a/src/modes/indicator-status/IndicatorStatus.svelte
+++ b/src/modes/indicator-status/IndicatorStatus.svelte
@@ -1,11 +1,12 @@
 <script>
   import { formatDateISO } from '../../formats';
   import KPI from '../survey/KPI.svelte';
-  import IndicatorCountyMap from './IndicatorCountyMap.svelte';
+  // import IndicatorCountyMap from './IndicatorCountyMap.svelte';
   import FancyHeader from '../mobile/FancyHeader.svelte';
-  import { getAvailableCounties } from '../../data/indicatorInfo';
+  // import { getAvailableCounties } from '../../data/indicatorInfo';
   import SurveyValue from '../survey/SurveyValue.svelte';
-  import IndicatorCoverageChart from './IndicatorCoverageChart.svelte';
+  // import IndicatorCoverageChart from './IndicatorCoverageChart.svelte';
+  import BackfillProfile from './BackfillProfile.svelte';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
@@ -17,9 +18,11 @@
    */
   export let domain;
 
+  console.log(domain);
+
   $: pickedDate = signal.latest_time_value;
 
-  $: data = getAvailableCounties(signal, pickedDate);
+  // $: data = getAvailableCounties(signal, pickedDate);
 </script>
 
 <div class="grid-3-11 uk-margin-top">
@@ -52,7 +55,7 @@
 
   <hr />
   <FancyHeader invert sub="County Coverage">{signal ? signal.name : '?'}</FancyHeader>
-  <IndicatorCoverageChart
+  <!-- <IndicatorCoverageChart
     {signal}
     {domain}
     on:highlight={(e) => {
@@ -61,11 +64,17 @@
         pickedDate = nextDate;
       }
     }}
-  />
+  /> -->
 
   <hr />
   <FancyHeader invert sub="Map ({formatDateISO(pickedDate)})">{signal ? signal.name : '?'}</FancyHeader>
 </div>
-<div class="grid-2-12">
+<!-- <div class="grid-2-12">
   <IndicatorCountyMap {signal} date={pickedDate} {data} />
+</div> -->
+<div class="grid-3-11">
+  <FancyHeader invert sub="Backfill Profile">{signal ? signal.name : '?'}</FancyHeader>
+</div>
+<div class="grid-2-12">
+  <BackfillProfile indicator={signal} date={pickedDate} />
 </div>
diff --git a/src/specs/commonSpec.ts b/src/specs/commonSpec.ts
index 538214c74..dc68a6feb 100644
--- a/src/specs/commonSpec.ts
+++ b/src/specs/commonSpec.ts
@@ -1,4 +1,5 @@
 import type { Config, TopLevelSpec } from 'vega-lite';
+import type { DataMixins } from 'vega-lite/build/src/spec/base';
 
 export const commonConfig: Config = {
   customFormatTypes: true,
@@ -20,7 +21,7 @@ export const commonConfig: Config = {
 
 export const CREDIT = 'Delphi Group, delphi.cmu.edu/covidcast';
 
-export const BASE_SPEC: Partial<TopLevelSpec> = {
+export const BASE_SPEC: Partial<TopLevelSpec> & DataMixins = {
   $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
   autosize: {
     type: 'none',

From 428225567854d1785a945ee56ffb8876e43d75cc Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Wed, 14 Apr 2021 12:11:40 -0400
Subject: [PATCH 03/31] build(deps): update

---
 package-lock.json | 2653 ++++++++++-----------------------------------
 package.json      |   44 +-
 2 files changed, 593 insertions(+), 2104 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index abf05902f..f4dbc8cb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,15 +14,15 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.12.tgz",
-      "integrity": "sha512-3eJJ841uKxeV8dcN/2yGEUy+RfgQspPEgQat85umsE1rotuquQ2AbIub4S6j7c50a2d+4myc+zSlnXeIHrOnhQ==",
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.15.tgz",
+      "integrity": "sha512-ltnibHKR1VnrU4ymHyQ/CXtNXI6yZC0oJThyW78Hft8XndANwi+9H+UIklBDraIjFEJzw8wmcM427oDd9KS5wA==",
       "dev": true
     },
     "@babel/core": {
-      "version": "7.13.14",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.14.tgz",
-      "integrity": "sha512-wZso/vyF4ki0l0znlgM4inxbdrUvCb+cVz8grxDq+6C9k6qbqoIJteQOKicaKjCipU3ISV+XedCqpL2RJJVehA==",
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.15.tgz",
+      "integrity": "sha512-6GXmNYeNjS2Uz+uls5jalOemgIhnTMeaXo+yBUA72kC2uX/8VW6XyhVIo2L8/q0goKQA3EVKx0KOQpVKSeWadQ==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.13",
@@ -30,9 +30,9 @@
         "@babel/helper-compilation-targets": "^7.13.13",
         "@babel/helper-module-transforms": "^7.13.14",
         "@babel/helpers": "^7.13.10",
-        "@babel/parser": "^7.13.13",
+        "@babel/parser": "^7.13.15",
         "@babel/template": "^7.12.13",
-        "@babel/traverse": "^7.13.13",
+        "@babel/traverse": "^7.13.15",
         "@babel/types": "^7.13.14",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
@@ -43,23 +43,23 @@
       },
       "dependencies": {
         "@babel/parser": {
-          "version": "7.13.13",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.13.tgz",
-          "integrity": "sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==",
+          "version": "7.13.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.15.tgz",
+          "integrity": "sha512-b9COtcAlVEQljy/9fbcMHpG+UIW9ReF+gpaxDHTlZd0c6/UU9ng8zdySAW9sRTzpvcdCHn6bUcbuYUgGzLAWVQ==",
           "dev": true
         },
         "@babel/traverse": {
-          "version": "7.13.13",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.13.tgz",
-          "integrity": "sha512-CblEcwmXKR6eP43oQGG++0QMTtCjAsa3frUuzHoiIJWpaIIi8dwMyEFUJoXRLxagGqCK+jALRwIO+o3R9p/uUg==",
+          "version": "7.13.15",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.15.tgz",
+          "integrity": "sha512-/mpZMNvj6bce59Qzl09fHEs8Bt8NnpEDQYleHUPZQ3wXUMvXi+HJPLars68oAbmp839fGoOkv2pSL2z9ajCIaQ==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.12.13",
             "@babel/generator": "^7.13.9",
             "@babel/helper-function-name": "^7.12.13",
             "@babel/helper-split-export-declaration": "^7.12.13",
-            "@babel/parser": "^7.13.13",
-            "@babel/types": "^7.13.13",
+            "@babel/parser": "^7.13.15",
+            "@babel/types": "^7.13.14",
             "debug": "^4.1.0",
             "globals": "^11.1.0"
           }
@@ -143,9 +143,9 @@
       }
     },
     "@babel/helper-define-polyfill-provider": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.5.tgz",
-      "integrity": "sha512-nXuzCSwlJ/WKr8qxzW816gwyT6VZgiJG17zR40fou70yfAcqjoNyTLl/DQ+FExw5Hx5KNqshmN8Ldl/r2N7cTg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.0.tgz",
+      "integrity": "sha512-JT8tHuFjKBo8NnaUbblz7mIu1nnvUDiHVjXXkulZULyidvo/7P6TY7+YqpV37IfF+KUFxmlK04elKtGKXaiVgw==",
       "dev": true,
       "requires": {
         "@babel/helper-compilation-targets": "^7.13.0",
@@ -258,23 +258,23 @@
       },
       "dependencies": {
         "@babel/parser": {
-          "version": "7.13.13",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.13.tgz",
-          "integrity": "sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==",
+          "version": "7.13.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.15.tgz",
+          "integrity": "sha512-b9COtcAlVEQljy/9fbcMHpG+UIW9ReF+gpaxDHTlZd0c6/UU9ng8zdySAW9sRTzpvcdCHn6bUcbuYUgGzLAWVQ==",
           "dev": true
         },
         "@babel/traverse": {
-          "version": "7.13.13",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.13.tgz",
-          "integrity": "sha512-CblEcwmXKR6eP43oQGG++0QMTtCjAsa3frUuzHoiIJWpaIIi8dwMyEFUJoXRLxagGqCK+jALRwIO+o3R9p/uUg==",
+          "version": "7.13.15",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.15.tgz",
+          "integrity": "sha512-/mpZMNvj6bce59Qzl09fHEs8Bt8NnpEDQYleHUPZQ3wXUMvXi+HJPLars68oAbmp839fGoOkv2pSL2z9ajCIaQ==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.12.13",
             "@babel/generator": "^7.13.9",
             "@babel/helper-function-name": "^7.12.13",
             "@babel/helper-split-export-declaration": "^7.12.13",
-            "@babel/parser": "^7.13.13",
-            "@babel/types": "^7.13.13",
+            "@babel/parser": "^7.13.15",
+            "@babel/types": "^7.13.14",
             "debug": "^4.1.0",
             "globals": "^11.1.0"
           }
@@ -447,9 +447,9 @@
       }
     },
     "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.13.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.13.8.tgz",
-      "integrity": "sha512-rPBnhj+WgoSmgq+4gQUtXx/vOcU+UYtjy1AA/aeD61Hwj410fwYyqfUcRP3lR8ucgliVJL/G7sXcNUecC75IXA==",
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.13.15.tgz",
+      "integrity": "sha512-VapibkWzFeoa6ubXy/NgV5U2U4MVnUlvnx6wo1XhlsaTrLYWE0UFpDQsVrmn22q5CzeloqJ8gEMHSKxuee6ZdA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.13.0",
@@ -937,9 +937,9 @@
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.13.tgz",
-      "integrity": "sha512-lxb2ZAvSLyJ2PEe47hoGWPmW22v7CtSl9jW8mingV4H2sEX/JOcrAj2nPuGWi56ERUm2bUpjKzONAuT6HCn2EA==",
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.13.15.tgz",
+      "integrity": "sha512-Bk9cOLSz8DiurcMETZ8E2YtIVJbFCPGW28DJWUakmyVWtQSm6Wsf0p4B4BfEr/eL2Nkhe/CICiUiMOCi1TPhuQ==",
       "dev": true,
       "requires": {
         "regenerator-transform": "^0.14.2"
@@ -1020,17 +1020,17 @@
       }
     },
     "@babel/preset-env": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.13.12.tgz",
-      "integrity": "sha512-JzElc6jk3Ko6zuZgBtjOd01pf9yYDEIH8BcqVuYIuOkzOwDesoa/Nz4gIo4lBG6K861KTV9TvIgmFuT6ytOaAA==",
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.13.15.tgz",
+      "integrity": "sha512-D4JAPMXcxk69PKe81jRJ21/fP/uYdcTZ3hJDF5QX2HSI9bBxxYw/dumdR6dGumhjxlprHPE4XWoPaqzZUVy2MA==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.13.12",
-        "@babel/helper-compilation-targets": "^7.13.10",
+        "@babel/compat-data": "^7.13.15",
+        "@babel/helper-compilation-targets": "^7.13.13",
         "@babel/helper-plugin-utils": "^7.13.0",
         "@babel/helper-validator-option": "^7.12.17",
         "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.13.12",
-        "@babel/plugin-proposal-async-generator-functions": "^7.13.8",
+        "@babel/plugin-proposal-async-generator-functions": "^7.13.15",
         "@babel/plugin-proposal-class-properties": "^7.13.0",
         "@babel/plugin-proposal-dynamic-import": "^7.13.8",
         "@babel/plugin-proposal-export-namespace-from": "^7.12.13",
@@ -1078,7 +1078,7 @@
         "@babel/plugin-transform-object-super": "^7.12.13",
         "@babel/plugin-transform-parameters": "^7.13.0",
         "@babel/plugin-transform-property-literals": "^7.12.13",
-        "@babel/plugin-transform-regenerator": "^7.12.13",
+        "@babel/plugin-transform-regenerator": "^7.13.15",
         "@babel/plugin-transform-reserved-words": "^7.12.13",
         "@babel/plugin-transform-shorthand-properties": "^7.12.13",
         "@babel/plugin-transform-spread": "^7.13.0",
@@ -1088,10 +1088,10 @@
         "@babel/plugin-transform-unicode-escapes": "^7.12.13",
         "@babel/plugin-transform-unicode-regex": "^7.12.13",
         "@babel/preset-modules": "^0.1.4",
-        "@babel/types": "^7.13.12",
-        "babel-plugin-polyfill-corejs2": "^0.1.4",
-        "babel-plugin-polyfill-corejs3": "^0.1.3",
-        "babel-plugin-polyfill-regenerator": "^0.1.2",
+        "@babel/types": "^7.13.14",
+        "babel-plugin-polyfill-corejs2": "^0.2.0",
+        "babel-plugin-polyfill-corejs3": "^0.2.0",
+        "babel-plugin-polyfill-regenerator": "^0.2.0",
         "core-js-compat": "^3.9.0",
         "semver": "^6.3.0"
       },
@@ -1999,33 +1999,6 @@
         "fastq": "^1.6.0"
       }
     },
-    "@npmcli/move-file": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
-      "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
-      "dev": true,
-      "requires": {
-        "mkdirp": "^1.0.4",
-        "rimraf": "^3.0.2"
-      },
-      "dependencies": {
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
     "@octokit/endpoint": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.11.tgz",
@@ -2038,24 +2011,22 @@
       }
     },
     "@octokit/openapi-types": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-5.3.2.tgz",
-      "integrity": "sha512-NxF1yfYOUO92rCx3dwvA2onF30Vdlg7YUkMVXkeptqpzA3tRLplThhFleV/UKWFgh7rpKu1yYRbvNDUtzSopKA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-6.0.0.tgz",
+      "integrity": "sha512-CnDdK7ivHkBtJYzWzZm7gEkanA7gKH6a09Eguz7flHw//GacPJLmkHA3f3N++MJmlxD1Fl+mB7B32EEpSCwztQ==",
       "dev": true
     },
     "@octokit/request": {
-      "version": "5.4.14",
-      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.4.14.tgz",
-      "integrity": "sha512-VkmtacOIQp9daSnBmDI92xNIeLuSRDOIuplp/CJomkvzt7M18NXgG044Cx/LFKLgjKt9T2tZR6AtJayba9GTSA==",
+      "version": "5.4.15",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.4.15.tgz",
+      "integrity": "sha512-6UnZfZzLwNhdLRreOtTkT9n57ZwulCve8q3IT/Z477vThu6snfdkBuhxnChpOKNGxcQ71ow561Qoa6uqLdPtag==",
       "dev": true,
       "requires": {
         "@octokit/endpoint": "^6.0.1",
         "@octokit/request-error": "^2.0.0",
         "@octokit/types": "^6.7.1",
-        "deprecation": "^2.0.0",
         "is-plain-object": "^5.0.0",
         "node-fetch": "^2.6.1",
-        "once": "^1.4.0",
         "universal-user-agent": "^6.0.0"
       }
     },
@@ -2071,12 +2042,12 @@
       }
     },
     "@octokit/types": {
-      "version": "6.12.2",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.12.2.tgz",
-      "integrity": "sha512-kCkiN8scbCmSq+gwdJV0iLgHc0O/GTPY1/cffo9kECu1MvatLPh9E+qFhfRIktKfHEA6ZYvv6S1B4Wnv3bi3pA==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.13.0.tgz",
+      "integrity": "sha512-W2J9qlVIU11jMwKHUp5/rbVUeErqelCsO5vW5PKNb7wAXQVUz87Rc+imjlEvpvbH8yUb+KHmv8NEjVZdsdpyxA==",
       "dev": true,
       "requires": {
-        "@octokit/openapi-types": "^5.3.2"
+        "@octokit/openapi-types": "^6.0.0"
       }
     },
     "@popperjs/core": {
@@ -2265,6 +2236,12 @@
         "@testing-library/dom": "^7.0.3"
       }
     },
+    "@trysound/sax": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
+      "integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
+      "dev": true
+    },
     "@tsconfig/svelte": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-1.0.10.tgz",
@@ -2653,9 +2630,9 @@
       "dev": true
     },
     "@types/eslint": {
-      "version": "7.2.8",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.8.tgz",
-      "integrity": "sha512-RTKvBsfz0T8CKOGZMfuluDNyMFHnu5lvNr4hWEsQeHXH6FcmIDIozOyWMh36nLGMwVd5UFNXC2xztA8lln22MQ==",
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz",
+      "integrity": "sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==",
       "dev": true,
       "requires": {
         "@types/estree": "*",
@@ -2806,12 +2783,6 @@
       "integrity": "sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=",
       "dev": true
     },
-    "@types/q": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
-      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
-      "dev": true
-    },
     "@types/regression": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/regression/-/regression-2.0.0.tgz",
@@ -2940,13 +2911,13 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.21.0.tgz",
-      "integrity": "sha512-FPUyCPKZbVGexmbCFI3EQHzCZdy2/5f+jv6k2EDljGdXSRc0cKvbndd2nHZkSLqCNOPk0jB6lGzwIkglXcYVsQ==",
+      "version": "4.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.22.0.tgz",
+      "integrity": "sha512-U8SP9VOs275iDXaL08Ln1Fa/wLXfj5aTr/1c0t0j6CdbOnxh+TruXu1p4I0NAvdPBQgoPjHsgKn28mOi0FzfoA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "4.21.0",
-        "@typescript-eslint/scope-manager": "4.21.0",
+        "@typescript-eslint/experimental-utils": "4.22.0",
+        "@typescript-eslint/scope-manager": "4.22.0",
         "debug": "^4.1.1",
         "functional-red-black-tree": "^1.0.1",
         "lodash": "^4.17.15",
@@ -2967,55 +2938,55 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.21.0.tgz",
-      "integrity": "sha512-cEbgosW/tUFvKmkg3cU7LBoZhvUs+ZPVM9alb25XvR0dal4qHL3SiUqHNrzoWSxaXA9gsifrYrS1xdDV6w/gIA==",
+      "version": "4.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.22.0.tgz",
+      "integrity": "sha512-xJXHHl6TuAxB5AWiVrGhvbGL8/hbiCQ8FiWwObO3r0fnvBdrbWEDy1hlvGQOAWc6qsCWuWMKdVWlLAEMpxnddg==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/scope-manager": "4.21.0",
-        "@typescript-eslint/types": "4.21.0",
-        "@typescript-eslint/typescript-estree": "4.21.0",
+        "@typescript-eslint/scope-manager": "4.22.0",
+        "@typescript-eslint/types": "4.22.0",
+        "@typescript-eslint/typescript-estree": "4.22.0",
         "eslint-scope": "^5.0.0",
         "eslint-utils": "^2.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.21.0.tgz",
-      "integrity": "sha512-eyNf7QmE5O/l1smaQgN0Lj2M/1jOuNg2NrBm1dqqQN0sVngTLyw8tdCbih96ixlhbF1oINoN8fDCyEH9SjLeIA==",
+      "version": "4.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.22.0.tgz",
+      "integrity": "sha512-z/bGdBJJZJN76nvAY9DkJANYgK3nlRstRRi74WHm3jjgf2I8AglrSY+6l7ogxOmn55YJ6oKZCLLy+6PW70z15Q==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "4.21.0",
-        "@typescript-eslint/types": "4.21.0",
-        "@typescript-eslint/typescript-estree": "4.21.0",
+        "@typescript-eslint/scope-manager": "4.22.0",
+        "@typescript-eslint/types": "4.22.0",
+        "@typescript-eslint/typescript-estree": "4.22.0",
         "debug": "^4.1.1"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.21.0.tgz",
-      "integrity": "sha512-kfOjF0w1Ix7+a5T1knOw00f7uAP9Gx44+OEsNQi0PvvTPLYeXJlsCJ4tYnDj5PQEYfpcgOH5yBlw7K+UEI9Agw==",
+      "version": "4.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.22.0.tgz",
+      "integrity": "sha512-OcCO7LTdk6ukawUM40wo61WdeoA7NM/zaoq1/2cs13M7GyiF+T4rxuA4xM+6LeHWjWbss7hkGXjFDRcKD4O04Q==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.21.0",
-        "@typescript-eslint/visitor-keys": "4.21.0"
+        "@typescript-eslint/types": "4.22.0",
+        "@typescript-eslint/visitor-keys": "4.22.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.21.0.tgz",
-      "integrity": "sha512-+OQaupjGVVc8iXbt6M1oZMwyKQNehAfLYJJ3SdvnofK2qcjfor9pEM62rVjBknhowTkh+2HF+/KdRAc/wGBN2w==",
+      "version": "4.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.22.0.tgz",
+      "integrity": "sha512-sW/BiXmmyMqDPO2kpOhSy2Py5w6KvRRsKZnV0c4+0nr4GIcedJwXAq+RHNK4lLVEZAJYFltnnk1tJSlbeS9lYA==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.21.0.tgz",
-      "integrity": "sha512-ZD3M7yLaVGVYLw4nkkoGKumb7Rog7QID9YOWobFDMQKNl+vPxqVIW/uDk+MDeGc+OHcoG2nJ2HphwiPNajKw3w==",
+      "version": "4.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.22.0.tgz",
+      "integrity": "sha512-TkIFeu5JEeSs5ze/4NID+PIcVjgoU3cUQUIZnH3Sb1cEn1lBo7StSV5bwPuJQuoxKXlzAObjYTilOEKRuhR5yg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.21.0",
-        "@typescript-eslint/visitor-keys": "4.21.0",
+        "@typescript-eslint/types": "4.22.0",
+        "@typescript-eslint/visitor-keys": "4.22.0",
         "debug": "^4.1.1",
         "globby": "^11.0.1",
         "is-glob": "^4.0.1",
@@ -3055,12 +3026,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.21.0.tgz",
-      "integrity": "sha512-dH22dROWGi5Z6p+Igc8bLVLmwy7vEe8r+8c+raPQU0LxgogPUrRAtRGtvBWmlr9waTu3n+QLt/qrS/hWzk1x5w==",
+      "version": "4.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.22.0.tgz",
+      "integrity": "sha512-nnMu4F+s4o0sll6cBSsTeVsT4cwxB7zECK3dFxzEjPBii9xLpq4yqqsy/FU5zMfan6G60DKZSCXAa3sHJZrcYw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.21.0",
+        "@typescript-eslint/types": "4.22.0",
         "eslint-visitor-keys": "^2.0.0"
       }
     },
@@ -3680,33 +3651,33 @@
       }
     },
     "babel-plugin-polyfill-corejs2": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.1.10.tgz",
-      "integrity": "sha512-DO95wD4g0A8KRaHKi0D51NdGXzvpqVLnLu5BTvDlpqUEpTmeEtypgC1xqesORaWmiUOQI14UHKlzNd9iZ2G3ZA==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.0.tgz",
+      "integrity": "sha512-9bNwiR0dS881c5SHnzCmmGlMkJLl0OUZvxrxHo9w/iNoRuqaPjqlvBf4HrovXtQs/au5yKkpcdgfT1cC5PAZwg==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.13.0",
-        "@babel/helper-define-polyfill-provider": "^0.1.5",
+        "@babel/compat-data": "^7.13.11",
+        "@babel/helper-define-polyfill-provider": "^0.2.0",
         "semver": "^6.1.1"
       }
     },
     "babel-plugin-polyfill-corejs3": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.7.tgz",
-      "integrity": "sha512-u+gbS9bbPhZWEeyy1oR/YaaSpod/KDT07arZHb80aTpl8H5ZBq+uN1nN9/xtX7jQyfLdPfoqI4Rue/MQSWJquw==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.0.tgz",
+      "integrity": "sha512-zZyi7p3BCUyzNxLx8KV61zTINkkV65zVkDAFNZmrTCRVhjo1jAS+YLvDJ9Jgd/w2tsAviCwFHReYfxO3Iql8Yg==",
       "dev": true,
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.1.5",
-        "core-js-compat": "^3.8.1"
+        "@babel/helper-define-polyfill-provider": "^0.2.0",
+        "core-js-compat": "^3.9.1"
       }
     },
     "babel-plugin-polyfill-regenerator": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.1.6.tgz",
-      "integrity": "sha512-OUrYG9iKPKz8NxswXbRAdSwF0GhRdIEMTloQATJi4bDuFqrXaXcCUT/VGNrr8pBcjMh1RxZ7Xt9cytVJTJfvMg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.0.tgz",
+      "integrity": "sha512-J7vKbCuD2Xi/eEHxquHN14bXAW9CXtecwuLrOIDJtcZzTaPzV1VdEfoUf9AzcRBMolKUQKM9/GVojeh0hFiqMg==",
       "dev": true,
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.1.5"
+        "@babel/helper-define-polyfill-provider": "^0.2.0"
       }
     },
     "babel-preset-current-node-syntax": {
@@ -3944,16 +3915,16 @@
       "dev": true
     },
     "browserslist": {
-      "version": "4.16.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz",
-      "integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==",
+      "version": "4.16.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.4.tgz",
+      "integrity": "sha512-d7rCxYV8I9kj41RH8UKYnvDYCRENUlHRgyXy/Rhr/1BaeLGfiCptEdFE8MIrvGfWbBFNjVYx76SQWvNX1j+/cQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001181",
-        "colorette": "^1.2.1",
-        "electron-to-chromium": "^1.3.649",
+        "caniuse-lite": "^1.0.30001208",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.712",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.70"
+        "node-releases": "^1.1.71"
       }
     },
     "bs-logger": {
@@ -4065,57 +4036,6 @@
       "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
       "dev": true
     },
-    "cacache": {
-      "version": "15.0.5",
-      "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.0.5.tgz",
-      "integrity": "sha512-lloiL22n7sOjEEXdL8NAjTgv9a1u43xICE9/203qonkZUCj5X1UEWIdf2/Y0d6QcCtMzbKQyhrcDbdvlZTs/+A==",
-      "dev": true,
-      "requires": {
-        "@npmcli/move-file": "^1.0.1",
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "glob": "^7.1.4",
-        "infer-owner": "^1.0.4",
-        "lru-cache": "^6.0.0",
-        "minipass": "^3.1.1",
-        "minipass-collect": "^1.0.2",
-        "minipass-flush": "^1.0.5",
-        "minipass-pipeline": "^1.2.2",
-        "mkdirp": "^1.0.3",
-        "p-map": "^4.0.0",
-        "promise-inflight": "^1.0.1",
-        "rimraf": "^3.0.2",
-        "ssri": "^8.0.0",
-        "tar": "^6.0.2",
-        "unique-filename": "^1.1.1"
-      },
-      "dependencies": {
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        },
-        "p-map": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-          "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
-          "dev": true,
-          "requires": {
-            "aggregate-error": "^3.0.0"
-          }
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
     "cache-base": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
@@ -4149,32 +4069,6 @@
         "get-intrinsic": "^1.0.2"
       }
     },
-    "caller-callsite": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
-      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
-      "dev": true,
-      "requires": {
-        "callsites": "^2.0.0"
-      },
-      "dependencies": {
-        "callsites": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
-          "dev": true
-        }
-      }
-    },
-    "caller-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
-      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
-      "dev": true,
-      "requires": {
-        "caller-callsite": "^2.0.0"
-      }
-    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -4218,9 +4112,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001202",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001202.tgz",
-      "integrity": "sha512-ZcijQNqrcF8JNLjzvEiXqX4JUYxoZa7Pvcsd9UD8Kz4TvhTonOSNRsK+qtvpVL4l6+T1Rh4LFtLfnNWg6BGWCQ==",
+      "version": "1.0.30001208",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001208.tgz",
+      "integrity": "sha512-OE5UE4+nBOro8Dyvv0lfx+SRtfVIOM9uhKqFmJeUbGriqhhStgp1A0OyBpgy3OUF8AhYCT+PVwPC1gMl2ZcQMA==",
       "dev": true
     },
     "capture-exit": {
@@ -4277,28 +4171,11 @@
         "readdirp": "~3.5.0"
       }
     },
-    "chownr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "dev": true
-    },
     "chrome-trace-event": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz",
-      "integrity": "sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        }
-      }
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "dev": true
     },
     "ci-info": {
       "version": "2.0.0",
@@ -4508,17 +4385,6 @@
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
       "dev": true
     },
-    "coa": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
-      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
-      "dev": true,
-      "requires": {
-        "@types/q": "^1.5.1",
-        "chalk": "^2.4.1",
-        "q": "^1.1.2"
-      }
-    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -4598,9 +4464,9 @@
       }
     },
     "commander": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
-      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
       "dev": true
     },
     "common-tags": {
@@ -4736,14 +4602,14 @@
       }
     },
     "concurrently": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.1.tgz",
-      "integrity": "sha512-YCF/Wf31a910hXu7eGN9/SyHKD/usw3Shw4IPYuqIsxxC39v92engYlIlOs/zXnBJtX/6aVuhgzfhZeGJkhU4w==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.2.tgz",
+      "integrity": "sha512-u+1Q0dJG5BidgUTpz9CU16yoHTt/oApFDQ3mbvHwSDgMjU7aGqy0q8ZQyaZyaNxdwRKTD872Ux3Twc6//sWA+Q==",
       "dev": true,
       "requires": {
         "chalk": "^4.1.0",
         "date-fns": "^2.16.1",
-        "lodash": "^4.17.20",
+        "lodash": "^4.17.21",
         "read-pkg": "^5.2.0",
         "rxjs": "^6.6.3",
         "spawn-command": "^0.0.2-1",
@@ -4867,9 +4733,9 @@
           }
         },
         "y18n": {
-          "version": "5.0.6",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.6.tgz",
-          "integrity": "sha512-PlVX4Y0lDTN6E2V4ES2tEdyvXkeKzxa8c/vo0pxPr/TqbztddTP0yn7zZylIyiAuxerqj0Q5GhpJ1YJCP8LaZQ==",
+          "version": "5.0.8",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+          "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
           "dev": true
         },
         "yargs": {
@@ -5001,15 +4867,15 @@
       }
     },
     "core-js": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.10.0.tgz",
-      "integrity": "sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ==",
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.10.1.tgz",
+      "integrity": "sha512-pwCxEXnj27XG47mu7SXAwhLP3L5CrlvCB91ANUkIz40P27kUcvNfSdvyZJ9CLHiVoKSp+TTChMQMSKQEH/IQxA==",
       "dev": true
     },
     "core-js-compat": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.9.1.tgz",
-      "integrity": "sha512-jXAirMQxrkbiiLsCx9bQPJFA6llDadKMpYrBJQJ3/c4/vsPP/fAf29h24tviRlvwUL6AmY5CHLu2GvjuYviQqA==",
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.10.1.tgz",
+      "integrity": "sha512-ZHQTdTPkqvw2CeHiZC970NNJcnwzT6YIueDMASKt+p3WbZsLXOcoD392SkcWhkC0wBBHhlfhqGKKsNCQUozYtg==",
       "dev": true,
       "requires": {
         "browserslist": "^4.16.3",
@@ -5148,53 +5014,24 @@
       }
     },
     "css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz",
+      "integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==",
       "dev": true
     },
     "css-declaration-sorter": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz",
-      "integrity": "sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.0.0.tgz",
+      "integrity": "sha512-S0TE4E0ha5+tBHdLWPc5n+S8E4dFBS5xScPvgHkLNZwWvX4ISoFGhGeerLC9uS1cKA/sC+K2wHq6qEbcagT/fg==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.1",
         "timsort": "^0.3.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "css-loader": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.0.tgz",
-      "integrity": "sha512-MfRo2MjEeLXMlUkeUwN71Vx5oc6EJnx5UQ4Yi9iUtYQvrPtwLUucYptz0hc6n++kdNcyF5olYBS4vPjJDAcLkw==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.1.tgz",
+      "integrity": "sha512-YCyRzlt/jgG1xanXZDG/DHqAueOtXFHeusP9TS478oP1J++JSKOyEgGW1GHVoCj/rkS+GWOlBwqQJBr9yajQ9w==",
       "dev": true,
       "requires": {
         "camelcase": "^6.2.0",
@@ -5251,20 +5088,18 @@
       }
     },
     "css-minimizer-webpack-plugin": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-1.3.0.tgz",
-      "integrity": "sha512-jFa0Siplmfef4ndKglpVaduY47oHQwioAOEGK0f0vAX0s+vc+SmP6cCMoc+8Adau5600RnOEld5VVdC8CQau7w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-2.0.0.tgz",
+      "integrity": "sha512-cG/uc94727tx5pBNtb1Sd7gvUPzwmcQi1lkpfqTpdkuNq75hJCw7bIVsCNijLm4dhDcr1atvuysl2rZqOG8Txw==",
       "dev": true,
       "requires": {
-        "cacache": "^15.0.5",
-        "cssnano": "^4.1.10",
-        "find-cache-dir": "^3.3.1",
+        "cssnano": "^5.0.0",
         "jest-worker": "^26.3.0",
         "p-limit": "^3.0.2",
+        "postcss": "^8.2.9",
         "schema-utils": "^3.0.0",
         "serialize-javascript": "^5.0.1",
-        "source-map": "^0.6.1",
-        "webpack-sources": "^1.4.3"
+        "source-map": "^0.6.1"
       },
       "dependencies": {
         "p-limit": {
@@ -5307,19 +5142,13 @@
         "nth-check": "^1.0.2"
       }
     },
-    "css-select-base-adapter": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
-      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
-      "dev": true
-    },
     "css-tree": {
-      "version": "1.0.0-alpha.37",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
-      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
       "dev": true,
       "requires": {
-        "mdn-data": "2.0.4",
+        "mdn-data": "2.0.14",
         "source-map": "^0.6.1"
       },
       "dependencies": {
@@ -5356,245 +5185,66 @@
       "dev": true
     },
     "cssnano": {
-      "version": "4.1.10",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
-      "integrity": "sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.1.tgz",
+      "integrity": "sha512-5WubEmKcK2cqw43DUAayRBiIlTdX7iX3ZowrWDVxSVcW3hyohVnbJ4K4mbnWtJp5rfJnUwHg5H4mDAGzmuCM3g==",
       "dev": true,
       "requires": {
-        "cosmiconfig": "^5.0.0",
-        "cssnano-preset-default": "^4.0.7",
-        "is-resolvable": "^1.0.0",
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
-          "dev": true,
-          "requires": {
-            "import-fresh": "^2.0.0",
-            "is-directory": "^0.3.1",
-            "js-yaml": "^3.13.1",
-            "parse-json": "^4.0.0"
-          }
-        },
-        "import-fresh": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
-          "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
-          "dev": true,
-          "requires": {
-            "caller-path": "^2.0.0",
-            "resolve-from": "^3.0.0"
-          }
-        },
-        "js-yaml": {
-          "version": "3.14.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-          "dev": true,
-          "requires": {
-            "argparse": "^1.0.7",
-            "esprima": "^4.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1"
-          }
-        },
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "resolve-from": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "cosmiconfig": "^7.0.0",
+        "cssnano-preset-default": "^5.0.0",
+        "is-resolvable": "^1.1.0"
       }
     },
     "cssnano-preset-default": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz",
-      "integrity": "sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==",
-      "dev": true,
-      "requires": {
-        "css-declaration-sorter": "^4.0.1",
-        "cssnano-util-raw-cache": "^4.0.1",
-        "postcss": "^7.0.0",
-        "postcss-calc": "^7.0.1",
-        "postcss-colormin": "^4.0.3",
-        "postcss-convert-values": "^4.0.1",
-        "postcss-discard-comments": "^4.0.2",
-        "postcss-discard-duplicates": "^4.0.2",
-        "postcss-discard-empty": "^4.0.1",
-        "postcss-discard-overridden": "^4.0.1",
-        "postcss-merge-longhand": "^4.0.11",
-        "postcss-merge-rules": "^4.0.3",
-        "postcss-minify-font-values": "^4.0.2",
-        "postcss-minify-gradients": "^4.0.2",
-        "postcss-minify-params": "^4.0.2",
-        "postcss-minify-selectors": "^4.0.2",
-        "postcss-normalize-charset": "^4.0.1",
-        "postcss-normalize-display-values": "^4.0.2",
-        "postcss-normalize-positions": "^4.0.2",
-        "postcss-normalize-repeat-style": "^4.0.2",
-        "postcss-normalize-string": "^4.0.2",
-        "postcss-normalize-timing-functions": "^4.0.2",
-        "postcss-normalize-unicode": "^4.0.1",
-        "postcss-normalize-url": "^4.0.1",
-        "postcss-normalize-whitespace": "^4.0.2",
-        "postcss-ordered-values": "^4.1.2",
-        "postcss-reduce-initial": "^4.0.3",
-        "postcss-reduce-transforms": "^4.0.2",
-        "postcss-svgo": "^4.0.2",
-        "postcss-unique-selectors": "^4.0.1"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "cssnano-util-get-arguments": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz",
-      "integrity": "sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=",
-      "dev": true
-    },
-    "cssnano-util-get-match": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz",
-      "integrity": "sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.0.0.tgz",
+      "integrity": "sha512-zsLppqF7PxY6Tk+ghVx8djf4o1jIOu2GNufqy9lMxldt7gGpSy3FQ6jn7FCd5DZWCaBa7A/1/HVh8CK3BdFSJg==",
+      "dev": true,
+      "requires": {
+        "css-declaration-sorter": "6.0.0",
+        "cssnano-utils": "^2.0.0",
+        "postcss-calc": "^8.0.0",
+        "postcss-colormin": "^5.0.0",
+        "postcss-convert-values": "^5.0.0",
+        "postcss-discard-comments": "^5.0.0",
+        "postcss-discard-duplicates": "^5.0.0",
+        "postcss-discard-empty": "^5.0.0",
+        "postcss-discard-overridden": "^5.0.0",
+        "postcss-merge-longhand": "^5.0.0",
+        "postcss-merge-rules": "^5.0.0",
+        "postcss-minify-font-values": "^5.0.0",
+        "postcss-minify-gradients": "^5.0.0",
+        "postcss-minify-params": "^5.0.0",
+        "postcss-minify-selectors": "^5.0.0",
+        "postcss-normalize-charset": "^5.0.0",
+        "postcss-normalize-display-values": "^5.0.0",
+        "postcss-normalize-positions": "^5.0.0",
+        "postcss-normalize-repeat-style": "^5.0.0",
+        "postcss-normalize-string": "^5.0.0",
+        "postcss-normalize-timing-functions": "^5.0.0",
+        "postcss-normalize-unicode": "^5.0.0",
+        "postcss-normalize-url": "^5.0.0",
+        "postcss-normalize-whitespace": "^5.0.0",
+        "postcss-ordered-values": "^5.0.0",
+        "postcss-reduce-initial": "^5.0.0",
+        "postcss-reduce-transforms": "^5.0.0",
+        "postcss-svgo": "^5.0.0",
+        "postcss-unique-selectors": "^5.0.0"
+      }
+    },
+    "cssnano-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.0.tgz",
+      "integrity": "sha512-xvxmTszdrvSyTACdPe8VU5J6p4sm3egpgw54dILvNqt5eBUv6TFjACLhSxtRuEsxYrgy8uDy269YjScO5aKbGA==",
       "dev": true
     },
-    "cssnano-util-raw-cache": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz",
-      "integrity": "sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "cssnano-util-same-parent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz",
-      "integrity": "sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==",
-      "dev": true
-    },
-    "csso": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
       "dev": true,
       "requires": {
         "css-tree": "^1.1.2"
-      },
-      "dependencies": {
-        "css-tree": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
-          "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
-          "dev": true,
-          "requires": {
-            "mdn-data": "2.0.14",
-            "source-map": "^0.6.1"
-          }
-        },
-        "mdn-data": {
-          "version": "2.0.14",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
       }
     },
     "cssom": {
@@ -5621,9 +5271,9 @@
       }
     },
     "cypress": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-7.0.0.tgz",
-      "integrity": "sha512-gri53gIGQPf/RoUknwvNS3alUjZwdmtp9BcKzLgyrwA/gBxJcpDLZ1t+MTvXy57ifRWEMxmEWzQe+iszCzJZqA==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-7.1.0.tgz",
+      "integrity": "sha512-AptQP9fVtN/FfOv8rJ9hTGJE2XQFc8saLHT38r/EeyWhzp0q/+P/DYRTDtjGZHeLTCNznAUrT4lal8jm+ouS7Q==",
       "dev": true,
       "requires": {
         "@cypress/listr-verbose-renderer": "^0.4.1",
@@ -5718,6 +5368,12 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "commander": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+          "dev": true
+        },
         "cross-spawn": {
           "version": "7.0.3",
           "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6103,10 +5759,13 @@
       }
     },
     "d3-time": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.0.0.tgz",
-      "integrity": "sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q==",
-      "dev": true
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "dev": true,
+      "requires": {
+        "d3-array": "2"
+      }
     },
     "d3-time-format": {
       "version": "3.0.0",
@@ -6144,9 +5803,9 @@
       }
     },
     "date-fns": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.19.0.tgz",
-      "integrity": "sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg==",
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.0.tgz",
+      "integrity": "sha512-lbAFpaKz7QuVxm6m1rmioh4BB2gmLx1r1JMYXU2A/ufT5ly4zEG7HYH4fvS/QfbdyC5rkYyiS30mYz4Q7XCO+w==",
       "dev": true
     },
     "dayjs": {
@@ -6546,9 +6205,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.691",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.691.tgz",
-      "integrity": "sha512-ZqiO69KImmOGCyoH0icQPU3SndJiW93juEvf63gQngyhODO6SpQIPMTOHldtCs5DS5GMKvAkquk230E2zt2vpw==",
+      "version": "1.3.717",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz",
+      "integrity": "sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==",
       "dev": true
     },
     "elegant-spinner": {
@@ -6639,47 +6298,12 @@
         "is-arrayish": "^0.2.1"
       }
     },
-    "es-abstract": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
-      "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.2",
-        "is-callable": "^1.2.3",
-        "is-negative-zero": "^2.0.1",
-        "is-regex": "^1.1.2",
-        "is-string": "^1.0.5",
-        "object-inspect": "^1.9.0",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.0"
-      }
-    },
     "es-module-lexer": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",
       "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==",
       "dev": true
     },
-    "es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dev": true,
-      "requires": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
-      }
-    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -6766,9 +6390,9 @@
       }
     },
     "eslint": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.23.0.tgz",
-      "integrity": "sha512-kqvNVbdkjzpFy0XOszNwjkKzZ+6TcwCQ/h+ozlcIWwaimBBuhlQ4nN6kbiM2L+OjDcznkTJxzYfRFH92sx4a0Q==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.24.0.tgz",
+      "integrity": "sha512-k9gaHeHiFmGCDQ2rEfvULlSLruz6tgfA8DEn+rY9/oYPFFTlz55mM/Q/Rij1b2Y42jwZiK3lXvNTw6w6TXzcKQ==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "7.12.11",
@@ -6865,9 +6489,9 @@
           }
         },
         "globals": {
-          "version": "13.7.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.7.0.tgz",
-          "integrity": "sha512-Aipsz6ZKRxa/xQkZhNg0qIWXT6x6rD46f6x/PCnBomlttdIyAPak4YD9jTmKpZ72uROSMU87qJtcgpgHaVchiA==",
+          "version": "13.8.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.8.0.tgz",
+          "integrity": "sha512-rHtdA6+PDBIjeEvA91rpqzEvk/k3/i7EeNQiryiWuJH0Hw9cpyJMAt2jtbAwUaRdhD+573X4vWw6IcjKPasi9Q==",
           "dev": true,
           "requires": {
             "type-fest": "^0.20.2"
@@ -7751,15 +7375,6 @@
         "universalify": "^2.0.0"
       }
     },
-    "fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -8058,12 +7673,6 @@
         }
       }
     },
-    "has-bigints": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
-      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
-      "dev": true
-    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -8187,12 +7796,6 @@
       "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
       "dev": true
     },
-    "html-comment-regex": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
-      "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==",
-      "dev": true
-    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -8562,12 +8165,6 @@
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
       "dev": true
     },
-    "infer-owner": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
-      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
-      "dev": true
-    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -8631,9 +8228,9 @@
       "dev": true
     },
     "is-absolute-url": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
-      "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
+      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
       "dev": true
     },
     "is-accessor-descriptor": {
@@ -8671,12 +8268,6 @@
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
       "dev": true
     },
-    "is-bigint": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.1.tgz",
-      "integrity": "sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==",
-      "dev": true
-    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -8701,12 +8292,6 @@
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "dev": true
     },
-    "is-callable": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-      "dev": true
-    },
     "is-ci": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
@@ -8728,6 +8313,14 @@
         "hsla-regex": "^1.0.0",
         "rgb-regex": "^1.0.1",
         "rgba-regex": "^1.0.0"
+      },
+      "dependencies": {
+        "css-color-names": {
+          "version": "0.0.4",
+          "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+          "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
+          "dev": true
+        }
       }
     },
     "is-core-module": {
@@ -8784,12 +8377,6 @@
         }
       }
     },
-    "is-directory": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
-      "dev": true
-    },
     "is-docker": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.1.1.tgz",
@@ -8848,12 +8435,6 @@
         }
       }
     },
-    "is-negative-zero": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
-      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==",
-      "dev": true
-    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -8957,24 +8538,6 @@
       "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==",
       "dev": true
     },
-    "is-svg": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz",
-      "integrity": "sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==",
-      "dev": true,
-      "requires": {
-        "html-comment-regex": "^1.1.0"
-      }
-    },
-    "is-symbol": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-      "dev": true,
-      "requires": {
-        "has-symbols": "^1.0.1"
-      }
-    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -11837,15 +11400,15 @@
       }
     },
     "marked": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.1.tgz",
-      "integrity": "sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.3.tgz",
+      "integrity": "sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA==",
       "dev": true
     },
     "mdn-data": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
-      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
       "dev": true
     },
     "media-typer": {
@@ -11949,9 +11512,9 @@
       "dev": true
     },
     "mini-css-extract-plugin": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.4.0.tgz",
-      "integrity": "sha512-DyQr5DhXXARKZoc4kwvCvD95kh69dUupfuKOmBUqZ4kBTmRaRZcU32lYu3cLd6nEGXhQ1l7LzZ3F/CjItaY6VQ==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.4.1.tgz",
+      "integrity": "sha512-COAGbpAsU0ioFzj+/RRfO5Qv177L1Z/XAx2EmCF33b8GDDqKygMffBTws2lit8iaPdrbKEY5P+zsseBUCREZWQ==",
       "dev": true,
       "requires": {
         "loader-utils": "^2.0.0",
@@ -12004,52 +11567,6 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
-    "minipass": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
-      "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
-      "dev": true,
-      "requires": {
-        "yallist": "^4.0.0"
-      }
-    },
-    "minipass-collect": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
-      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
-    "minipass-flush": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
-      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
-    "minipass-pipeline": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
-      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
-    "minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
-      }
-    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -12285,15 +11802,15 @@
       "dev": true
     },
     "normalize-url": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
-      "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
+      "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
       "dev": true
     },
     "nouislider": {
-      "version": "14.6.4",
-      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-14.6.4.tgz",
-      "integrity": "sha512-PVCGYl+aC7/nVEbW61ypJWfuW3UCpvctz/luxpt4byxxli1FFyjBX9NIiy4Yak9AaO6a5BkPGfFYMCW4eg3eeQ==",
+      "version": "14.7.0",
+      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-14.7.0.tgz",
+      "integrity": "sha512-4RtQ1+LHJKesDCNJrXkQcwXAWCrC2aggdLYMstS/G5fEWL+fXZbUA9pwVNHFghMGuFGRATlDLNInRaPeRKzpFQ==",
       "dev": true
     },
     "npm-run-path": {
@@ -12369,12 +11886,6 @@
         }
       }
     },
-    "object-inspect": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
-      "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
-      "dev": true
-    },
     "object-is": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
@@ -12412,17 +11923,6 @@
         "object-keys": "^1.1.1"
       }
     },
-    "object.getownpropertydescriptors": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz",
-      "integrity": "sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2"
-      }
-    },
     "object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
@@ -12432,18 +11932,6 @@
         "isobject": "^3.0.1"
       }
     },
-    "object.values": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.3.tgz",
-      "integrity": "sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "has": "^1.0.3"
-      }
-    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -12806,14 +12294,14 @@
       }
     },
     "plist": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/plist/-/plist-3.0.1.tgz",
-      "integrity": "sha512-GpgvHHocGRyQm74b6FWEZZVRroHKE1I0/BTjAmySaohK+cUn+hZpbqXkc3KWgW3gQYkqcQej35FohcT0FRlkRQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/plist/-/plist-3.0.2.tgz",
+      "integrity": "sha512-MSrkwZBdQ6YapHy87/8hDU8MnIcyxBKjeF+McXnr5A9MtffPewTs7G3hlpodT5TacyfIyFTaJEhh3GGcmasTgQ==",
       "dev": true,
       "requires": {
-        "base64-js": "^1.2.3",
+        "base64-js": "^1.5.1",
         "xmlbuilder": "^9.0.7",
-        "xmldom": "0.1.x"
+        "xmldom": "^0.5.0"
       }
     },
     "pngjs": {
@@ -12875,13 +12363,13 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.2.8",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz",
-      "integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==",
+      "version": "8.2.10",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.10.tgz",
+      "integrity": "sha512-b/h7CPV7QEdrqIxtAf2j31U5ef05uBDuvoXv6L51Q4rcS1jdlXAVKJv+atCFdUXYl9dyTHGyoMzIepwowRJjFw==",
       "dev": true,
       "requires": {
         "colorette": "^1.2.2",
-        "nanoid": "^3.1.20",
+        "nanoid": "^3.1.22",
         "source-map": "^0.6.1"
       },
       "dependencies": {
@@ -12894,543 +12382,126 @@
       }
     },
     "postcss-calc": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.5.tgz",
-      "integrity": "sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.0.0.tgz",
+      "integrity": "sha512-5NglwDrcbiy8XXfPM11F3HeC6hoT9W7GUH/Zi5U/p7u3Irv4rHhdDcIZwG0llHXV4ftsBjpfWMXAnXNl4lnt8g==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.27",
         "postcss-selector-parser": "^6.0.2",
         "postcss-value-parser": "^4.0.2"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "postcss-colormin": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
-      "integrity": "sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.0.0.tgz",
+      "integrity": "sha512-Yt84+5V6CgS/AhK7d7MA58vG8dSZ7+ytlRtWLaQhag3HXOncTfmYpuUOX4cDoXjvLfw1sHRCHMiBjYhc35CymQ==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.0.0",
-        "color": "^3.0.0",
-        "has": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "browserslist": "^4.16.0",
+        "color": "^3.1.1",
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-convert-values": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz",
-      "integrity": "sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.0.tgz",
+      "integrity": "sha512-V5kmYm4xoBAjNs+eHY/6XzXJkkGeg4kwNf2ocfqhLb1WBPEa4oaSmoi1fnVO7Dkblqvus9h+AenDvhCKUCK7uQ==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-discard-comments": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
-      "integrity": "sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.0.tgz",
+      "integrity": "sha512-Umig6Gxs8m20RihiXY6QkePd6mp4FxkA1Dg+f/Kd6uw0gEMfKRjDeQOyFkLibexbJJGHpE3lrN/Q0R9SMrUMbQ==",
+      "dev": true
     },
     "postcss-discard-duplicates": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz",
-      "integrity": "sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.0.tgz",
+      "integrity": "sha512-vEJJ+Y3pFUnO1FyCBA6PSisGjHtnphL3V6GsNvkASq/VkP3OX5/No5RYXXLxHa2QegStNzg6HYrYdo71uR4caQ==",
+      "dev": true
     },
     "postcss-discard-empty": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz",
-      "integrity": "sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.0.tgz",
+      "integrity": "sha512-+wigy099Y1xZxG36WG5L1f2zeH1oicntkJEW4TDIqKKDO2g9XVB3OhoiHTu08rDEjLnbcab4rw0BAccwi2VjiQ==",
+      "dev": true
     },
     "postcss-discard-overridden": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz",
-      "integrity": "sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.0.tgz",
+      "integrity": "sha512-hybnScTaZM2iEA6kzVQ6Spozy7kVdLw+lGw8hftLlBEzt93uzXoltkYp9u0tI8xbfhxDLTOOzHsHQCkYdmzRUg==",
+      "dev": true
     },
     "postcss-merge-longhand": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz",
-      "integrity": "sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.0.tgz",
+      "integrity": "sha512-VZNFA40K8BYHzJNA6jHPdg1Nofsz/nK5Dkszrcb5IgWcLroSBZOD6I/iNQzpejSU/3XwpOiZNaYAdBV4KcvxWA==",
       "dev": true,
       "requires": {
-        "css-color-names": "0.0.4",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0",
-        "stylehacks": "^4.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "css-color-names": "^1.0.1",
+        "postcss-value-parser": "^4.1.0",
+        "stylehacks": "^5.0.0"
       }
     },
     "postcss-merge-rules": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz",
-      "integrity": "sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.0.tgz",
+      "integrity": "sha512-TfsXbKjNYCGfUPEXGIGPySnMiJbdS+3gcVeV8gwmJP4RajyKZHW8E0FYDL1WmggTj3hi+m+WUCAvqRpX2ut4Kg==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.0.0",
+        "browserslist": "^4.16.0",
         "caniuse-api": "^3.0.0",
-        "cssnano-util-same-parent": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-selector-parser": "^3.0.0",
-        "vendors": "^1.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-selector-parser": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
-          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
-          "dev": true,
-          "requires": {
-            "dot-prop": "^5.2.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "cssnano-utils": "^2.0.0",
+        "postcss-selector-parser": "^6.0.4",
+        "vendors": "^1.0.3"
       }
     },
     "postcss-minify-font-values": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz",
-      "integrity": "sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.0.tgz",
+      "integrity": "sha512-zi2JhFaMOcIaNxhndX5uhsqSY1rexKDp23wV8EOmC9XERqzLbHsoRye3aYF716Zm+hkcR4loqKDt8LZlmihwAg==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-minify-gradients": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz",
-      "integrity": "sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.0.tgz",
+      "integrity": "sha512-/jPtNgs6JySMwgsE5dPOq8a2xEopWTW3RyqoB9fLqxgR+mDUNLSi7joKd+N1z7FXWgVkc4l/dEBMXHgNAaUbvg==",
       "dev": true,
       "requires": {
-        "cssnano-util-get-arguments": "^4.0.0",
-        "is-color-stop": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "cssnano-utils": "^2.0.0",
+        "is-color-stop": "^1.1.0",
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-minify-params": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz",
-      "integrity": "sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.0.tgz",
+      "integrity": "sha512-KvZYIxTPBVKjdd+XgObq9A+Sfv8lMkXTpbZTsjhr42XbfWIeLaTItMlygsDWfjArEc3muUfDaUFgNSeDiJ5jug==",
       "dev": true,
       "requires": {
-        "alphanum-sort": "^1.0.0",
-        "browserslist": "^4.0.0",
-        "cssnano-util-get-arguments": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0",
+        "alphanum-sort": "^1.0.2",
+        "browserslist": "^4.16.0",
+        "cssnano-utils": "^2.0.0",
+        "postcss-value-parser": "^4.1.0",
         "uniqs": "^2.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "postcss-minify-selectors": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz",
-      "integrity": "sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.0.0.tgz",
+      "integrity": "sha512-cEM0O0eWwFIvmo6nfB0lH0vO/XFwgqIvymODbfPXZ1gTA3i76FKnb7TGUrEpiTxaXH6tgYQ6DcTHwRiRS+YQLQ==",
       "dev": true,
       "requires": {
-        "alphanum-sort": "^1.0.0",
-        "has": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-selector-parser": "^3.0.0"
+        "alphanum-sort": "^1.0.2",
+        "postcss-selector-parser": "^3.1.2"
       },
       "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
         "postcss-selector-parser": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
@@ -13441,21 +12512,6 @@
             "indexes-of": "^1.0.1",
             "uniq": "^1.0.1"
           }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
         }
       }
     },
@@ -13495,630 +12551,150 @@
       }
     },
     "postcss-normalize-charset": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
-      "integrity": "sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.0.tgz",
+      "integrity": "sha512-pqsCkgo9KmQP0ew6DqSA+uP9YN6EfsW20pQ3JU5JoQge09Z6Too4qU0TNDsTNWuEaP8SWsMp+19l15210MsDZQ==",
+      "dev": true
     },
     "postcss-normalize-display-values": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz",
-      "integrity": "sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.0.0.tgz",
+      "integrity": "sha512-t4f2d//gH1f7Ns0Jq3eNdnWuPT7TeLuISZ6RQx4j8gpl5XrhkdshdNcOnlrEK48YU6Tcb6jqK7dorME3N4oOGA==",
       "dev": true,
       "requires": {
-        "cssnano-util-get-match": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "cssnano-utils": "^2.0.0",
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-normalize-positions": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz",
-      "integrity": "sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.0.tgz",
+      "integrity": "sha512-0o6/qU5ky74X/eWYj/tv4iiKCm3YqJnrhmVADpIMNXxzFZywsSQxl8F7cKs8jQEtF3VrJBgcDHTexZy1zgDoYg==",
       "dev": true,
       "requires": {
-        "cssnano-util-get-arguments": "^4.0.0",
-        "has": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-normalize-repeat-style": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz",
-      "integrity": "sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.0.tgz",
+      "integrity": "sha512-KRT14JbrXKcFMYuc4q7lh8lvv8u22wLyMrq+UpHKLtbx2H/LOjvWXYdoDxmNrrrJzomAWL+ViEXr48/IhSUJnQ==",
       "dev": true,
       "requires": {
-        "cssnano-util-get-arguments": "^4.0.0",
-        "cssnano-util-get-match": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "cssnano-utils": "^2.0.0",
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-normalize-string": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz",
-      "integrity": "sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.0.tgz",
+      "integrity": "sha512-wSO4pf7GNcDZpmelREWYADF1+XZWrAcbFLQCOqoE92ZwYgaP/RLumkUTaamEzdT2YKRZAH8eLLKGWotU/7FNPw==",
       "dev": true,
       "requires": {
-        "has": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-normalize-timing-functions": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz",
-      "integrity": "sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.0.0.tgz",
+      "integrity": "sha512-TwPaDX+wl9wO3MUm23lzGmOzGCGKnpk+rSDgzB2INpakD5dgWR3L6bJq1P1LQYzBAvz8fRIj2NWdnZdV4EV98Q==",
       "dev": true,
       "requires": {
-        "cssnano-util-get-match": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "cssnano-utils": "^2.0.0",
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-normalize-unicode": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz",
-      "integrity": "sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.0.tgz",
+      "integrity": "sha512-2CpVoz/67rXU5s9tsPZDxG1YGS9OFHwoY9gsLAzrURrCxTAb0H7Vp87/62LvVPgRWTa5ZmvgmqTp2rL8tlm72A==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "browserslist": "^4.16.0",
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-normalize-url": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz",
-      "integrity": "sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.0.tgz",
+      "integrity": "sha512-ICDaGFBqLgA3dlrCIRuhblLl80D13YtgEV9NJPTYJtgR72vu61KgxAHv+z/lKMs1EbwfSQa3ALjOFLSmXiE34A==",
       "dev": true,
       "requires": {
-        "is-absolute-url": "^2.0.0",
-        "normalize-url": "^3.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "is-absolute-url": "^3.0.3",
+        "normalize-url": "^4.5.0",
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-normalize-whitespace": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz",
-      "integrity": "sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.0.tgz",
+      "integrity": "sha512-KRnxQvQAVkJfaeXSz7JlnD9nBN9sFZF9lrk9452Q2uRoqrRSkinqifF8Iex7wZGei2DZVG/qpmDFDmRvbNAOGA==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-ordered-values": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz",
-      "integrity": "sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.0.tgz",
+      "integrity": "sha512-dPr+SRObiHueCIc4IUaG0aOGQmYkuNu50wQvdXTGKy+rzi2mjmPsbeDsheLk5WPb9Zyf2tp8E+I+h40cnivm6g==",
       "dev": true,
       "requires": {
-        "cssnano-util-get-arguments": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "cssnano-utils": "^2.0.0",
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-reduce-initial": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
-      "integrity": "sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.0.tgz",
+      "integrity": "sha512-wR6pXUaFbSMG1oCKx8pKVA+rnSXCHlca5jMrlmkmif+uig0HNUTV9oGN5kjKsM3mATQAldv2PF9Tbl2vqLFjnA==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.0.0",
-        "caniuse-api": "^3.0.0",
-        "has": "^1.0.0",
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "browserslist": "^4.16.0",
+        "caniuse-api": "^3.0.0"
       }
     },
     "postcss-reduce-transforms": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz",
-      "integrity": "sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.0.tgz",
+      "integrity": "sha512-iHdGODW4YzM3WjVecBhPQt6fpJC4lGQZxJKjkBNHpp2b8dzmvj0ogKThqya+IRodQEFzjfXgYeESkf172FH5Lw==",
       "dev": true,
       "requires": {
-        "cssnano-util-get-match": "^4.0.0",
-        "has": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "cssnano-utils": "^2.0.0",
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-selector-parser": {
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
       "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
-      "dev": true,
-      "requires": {
-        "cssesc": "^3.0.0",
-        "indexes-of": "^1.0.1",
-        "uniq": "^1.0.1",
-        "util-deprecate": "^1.0.2"
-      }
-    },
-    "postcss-svgo": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.2.tgz",
-      "integrity": "sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==",
-      "dev": true,
-      "requires": {
-        "is-svg": "^3.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0",
-        "svgo": "^1.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-svgo": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.0.tgz",
+      "integrity": "sha512-M3/VS4sFI1Yp9g0bPL+xzzCNz5iLdRUztoFaugMit5a8sMfkVzzhwqbsOlD8IFFymCdJDmXmh31waYHWw1K4BA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.1.0",
+        "svgo": "^2.3.0"
       }
     },
     "postcss-unique-selectors": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz",
-      "integrity": "sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.0.tgz",
+      "integrity": "sha512-o9l4pF8SRn7aCMTmzb/kNv/kjV7wPZpZ8Nlb1Gq8v/Qvw969K1wanz1RVA0ehHzWe9+wHXaC2DvZlak/gdMJ5w==",
       "dev": true,
       "requires": {
-        "alphanum-sort": "^1.0.0",
-        "postcss": "^7.0.0",
+        "alphanum-sort": "^1.0.2",
+        "postcss-selector-parser": "^6.0.2",
         "uniqs": "^2.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "postcss-value-parser": {
@@ -14217,12 +12793,6 @@
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
       "dev": true
     },
-    "promise-inflight": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
-      "dev": true
-    },
     "prompts": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz",
@@ -14277,12 +12847,6 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
-    "q": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
-      "dev": true
-    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
@@ -15027,12 +13591,6 @@
         "neo-async": "^2.6.2"
       }
     },
-    "sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
-    },
     "saxes": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@@ -15657,15 +14215,6 @@
       "integrity": "sha512-Aj6Jl2z6oDmgYFFbQqK7fght19bXdOxY7Tj03nF+03M9gCBAjeIiO8/PlEGMfKDwYpw4q6iBqVq2YuREorGg/g==",
       "dev": true
     },
-    "ssri": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
-      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.1.1"
-      }
-    },
     "stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -15760,26 +14309,6 @@
         "strip-ansi": "^5.1.0"
       }
     },
-    "string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -15885,53 +14414,13 @@
       }
     },
     "stylehacks": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
-      "integrity": "sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.0.tgz",
+      "integrity": "sha512-QOWm6XivDLb+fqffTZP8jrmPmPITVChl2KCY2R05nsCWwLi3VGhCdVc3IVGNwd1zzTt1jPd67zIKjpQfxzQZeA==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-selector-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "postcss-selector-parser": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
-          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
-          "dev": true,
-          "requires": {
-            "dot-prop": "^5.2.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "browserslist": "^4.16.0",
+        "postcss-selector-parser": "^6.0.4"
       }
     },
     "supercluster": {
@@ -15986,9 +14475,9 @@
       "dev": true
     },
     "svelte-check": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-1.3.0.tgz",
-      "integrity": "sha512-FMLZr/wv9S0MzCALo9BlHYyu1wlgXRdHWSjXDiknhraL9Igm0EVb00/tR6CMJ7j4q2kphRIEYcSRQJ7AtXHk+g==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-1.4.0.tgz",
+      "integrity": "sha512-fcACzU7EJEQBxbbUub8o/3tm5gp0txdGXin9fzHHvtHfgyS9RHSfA5poTWlteeVigu2MSqrTpvMPGT/DazyK0g==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
@@ -16077,33 +14566,18 @@
       "dev": true
     },
     "svelte-jester": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/svelte-jester/-/svelte-jester-1.3.2.tgz",
-      "integrity": "sha512-u8EWl5phmZjE2UgjJEDCQ4crcEm7k8ICj1Vs2PlZNjvAem3X3+veBER2SEJ8xJtFSRICYsYCRezW76w5QqOIqQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/svelte-jester/-/svelte-jester-1.4.0.tgz",
+      "integrity": "sha512-lRNJZb+vxwOv4jhPzi+VFCaX0PMnHO8b9hcEVwjWURrwobXzdwGhJdb3NJy8WjLt1nHd4NWeS7Ei8mpvA7mNRg==",
       "dev": true,
       "requires": {
-        "cosmiconfig": "^6.0.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-          "dev": true,
-          "requires": {
-            "@types/parse-json": "^4.0.0",
-            "import-fresh": "^3.1.0",
-            "parse-json": "^5.0.0",
-            "path-type": "^4.0.0",
-            "yaml": "^1.7.2"
-          }
-        }
+        "cosmiconfig": "^7.0.0"
       }
     },
     "svelte-loader": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/svelte-loader/-/svelte-loader-3.1.0.tgz",
-      "integrity": "sha512-KOst7tLtYPDXl3q7W1d3kezPapDyNZ/WJZypgKfqplTYS1ia/zdsgJBMnWrOQfec+8W9pInOngsJ8CUF9ejDDA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/svelte-loader/-/svelte-loader-3.1.1.tgz",
+      "integrity": "sha512-JU7qo1yBdDeJ3Aw23WoGKXrVaSn3KeWkM9KMl43HuMVFrsPNHIzZHTsf1ARJX/Abm3jeqNjigaO35RVbixhmWg==",
       "dev": true,
       "requires": {
         "loader-utils": "^2.0.0",
@@ -16137,34 +14611,132 @@
       }
     },
     "svgo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
-      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.3.0.tgz",
+      "integrity": "sha512-fz4IKjNO6HDPgIQxu4IxwtubtbSfGEAJUq/IXyTPIkGhWck/faiiwfkvsB8LnBkKLvSoyNNIY6d13lZprJMc9Q==",
       "dev": true,
       "requires": {
-        "chalk": "^2.4.1",
-        "coa": "^2.0.2",
-        "css-select": "^2.0.0",
-        "css-select-base-adapter": "^0.1.1",
-        "css-tree": "1.0.0-alpha.37",
-        "csso": "^4.0.2",
-        "js-yaml": "^3.13.1",
-        "mkdirp": "~0.5.1",
-        "object.values": "^1.1.0",
-        "sax": "~1.2.4",
-        "stable": "^0.1.8",
-        "unquote": "~1.1.1",
-        "util.promisify": "~1.0.0"
+        "@trysound/sax": "0.1.1",
+        "chalk": "^4.1.0",
+        "commander": "^7.1.0",
+        "css-select": "^3.1.2",
+        "css-tree": "^1.1.2",
+        "csso": "^4.2.0",
+        "stable": "^0.1.8"
       },
       "dependencies": {
-        "js-yaml": {
-          "version": "3.14.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
-            "argparse": "^1.0.7",
-            "esprima": "^4.0.0"
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "css-select": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz",
+          "integrity": "sha512-qmss1EihSuBNWNNhHjxzxSfJoFBM/lERB/Q4EnsJQQC62R2evJDW481091oAdOr9uh46/0n4nrg0It5cAnj1RA==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^4.0.0",
+            "domhandler": "^4.0.0",
+            "domutils": "^2.4.3",
+            "nth-check": "^2.0.0"
+          }
+        },
+        "css-what": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz",
+          "integrity": "sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A==",
+          "dev": true
+        },
+        "dom-serializer": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.1.tgz",
+          "integrity": "sha512-Pv2ZluG5ife96udGgEDovOOOA5UELkltfJpnIExPrAk1LTvecolUGn6lIaoLh86d83GiB86CjzciMd9BuRB71Q==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "dev": true
+        },
+        "domhandler": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.1.0.tgz",
+          "integrity": "sha512-/6/kmsGlMY4Tup/nGVutdrK9yQi4YjWVcVeoQmixpzjOUK1U7pQkvAPHBJeUxOgxF0J8f8lwCJSlCfD0V4CMGQ==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.2.0"
+          }
+        },
+        "domutils": {
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.5.2.tgz",
+          "integrity": "sha512-MHTthCb1zj8f1GVfRpeZUbohQf/HdBos0oX5gZcQFepOZPLLRyj6Wn7XS7EMnY7CVpwv8863u2vyE83Hfu28HQ==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.2.0",
+            "domhandler": "^4.1.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "nth-check": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+          "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
           }
         }
       }
@@ -16182,9 +14754,9 @@
       "dev": true
     },
     "table": {
-      "version": "6.0.8",
-      "resolved": "https://registry.npmjs.org/table/-/table-6.0.8.tgz",
-      "integrity": "sha512-OBAdezyozae8IvjHGXBDHByVkLCcsmffXUSj8LXkNb0SluRd4ug3GFCjk6JynZONIPhOkyr0Nnvbq1rlIspXyQ==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.1.0.tgz",
+      "integrity": "sha512-T4G5KMmqIk6X87gLKWyU5exPpTjLjY5KyrFWaIjv3SvgaIUGXV7UEzGEnZJdTA38/yUS6f9PlKezQ0bYXG3iIQ==",
       "dev": true,
       "requires": {
         "ajv": "^8.0.1",
@@ -16199,9 +14771,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.0.1",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.0.1.tgz",
-          "integrity": "sha512-46ZA4TalFcLLqX1dEU3dhdY38wAtDydJ4e7QQTVekLUTzXkb1LfqU6VOBXC/a9wiv4T094WURqJH6ZitF92Kqw==",
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.1.0.tgz",
+          "integrity": "sha512-B/Sk2Ix7A36fs/ZkuGLIR86EdjbgR6fsAcbx9lOP/QBSXujDNbVmIS/U4Itz5k8fPFDeVZl/zQ/gJW4Jrq6XjQ==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
@@ -16291,28 +14863,6 @@
       "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
       "dev": true
     },
-    "tar": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
-      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
-      "dev": true,
-      "requires": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^3.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
-      },
-      "dependencies": {
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        }
-      }
-    },
     "term-img": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/term-img/-/term-img-4.1.0.tgz",
@@ -16929,27 +15479,15 @@
       }
     },
     "typescript": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz",
-      "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==",
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
+      "integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==",
       "dev": true
     },
     "uikit": {
-      "version": "3.6.18",
-      "resolved": "https://registry.npmjs.org/uikit/-/uikit-3.6.18.tgz",
-      "integrity": "sha512-q5Dlpu1KQ5Jo3cW9TCMypvG0KL6rVLcCat9JPHJ1HBzmSKnMh+oChhWWSq4OEGuopsIftKyiXuhdS8a50uIJbw=="
-    },
-    "unbox-primitive": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.0.tgz",
-      "integrity": "sha512-P/51NX+JXyxK/aigg1/ZgyccdAxm5K1+n8+tvqSntjOivPt19gvm1VC49RWYetsiub8WViUchdxl/KWHHB0kzA==",
-      "dev": true,
-      "requires": {
-        "function-bind": "^1.1.1",
-        "has-bigints": "^1.0.0",
-        "has-symbols": "^1.0.0",
-        "which-boxed-primitive": "^1.0.1"
-      }
+      "version": "3.6.19",
+      "resolved": "https://registry.npmjs.org/uikit/-/uikit-3.6.19.tgz",
+      "integrity": "sha512-Lw+1/3KNiYcZlWCVhva1/kN/GtjRzMt4vt8Cj73uZ66qDK7l68/ppFScArooPARnieVJG3CDbkq2UMV0YnXhnQ=="
     },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
@@ -17012,24 +15550,6 @@
       "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
       "dev": true
     },
-    "unique-filename": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
-      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
-      "dev": true,
-      "requires": {
-        "unique-slug": "^2.0.0"
-      }
-    },
-    "unique-slug": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
-      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
-      "dev": true,
-      "requires": {
-        "imurmurhash": "^0.1.4"
-      }
-    },
     "universal-user-agent": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
@@ -17048,12 +15568,6 @@
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
       "dev": true
     },
-    "unquote": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
-      "dev": true
-    },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@@ -17202,18 +15716,6 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
-    "util.promisify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
-      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.2",
-        "has-symbols": "^1.0.1",
-        "object.getownpropertydescriptors": "^2.1.0"
-      }
-    },
     "utila": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
@@ -17978,9 +16480,9 @@
       "dev": true
     },
     "webpack": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.30.0.tgz",
-      "integrity": "sha512-Zr9NIri5yzpfmaMea2lSMV1UygbW0zQsSlGLMgKUm63ACXg6alhd1u4v5UBSBjzYKXJN6BNMGVM7w165e7NxYA==",
+      "version": "5.32.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.32.0.tgz",
+      "integrity": "sha512-jB9PrNMFnPRiZGnm/j3qfNqJmP3ViRzkuQMIf8za0dgOYvSLi/cgA+UEEGvik9EQHX1KYyGng5PgBTTzGrH9xg==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.0",
@@ -18009,9 +16511,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.0.tgz",
-          "integrity": "sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==",
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.1.tgz",
+          "integrity": "sha512-xYiIVjNuqtKXMxlRMDc6mZUhXehod4a3gbZ1qRlM7icK4EbxUFNLhWoPblCvFtB2Y9CIqHP3CF/rdxLItaQv8g==",
           "dev": true
         },
         "schema-utils": {
@@ -18660,19 +17162,6 @@
         "isexe": "^2.0.0"
       }
     },
-    "which-boxed-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-      "dev": true,
-      "requires": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
-      }
-    },
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
@@ -18745,9 +17234,9 @@
       "dev": true
     },
     "xmldom": {
-      "version": "0.1.31",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
-      "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.5.0.tgz",
+      "integrity": "sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA==",
       "dev": true
     },
     "xtend": {
diff --git a/package.json b/package.json
index f24b22d52..7f4a3c2b4 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "gen:local": "npm run gen -- --localOnly",
     "gen:fallback": "npm run gen -- --fallback",
     "process-geo": "node ./src/maps/process.js",
-    "start": "npm run gen:fallback && cross-env NODE_ENV=development webpack serve --mode development --hot --devtool eval-cheap-module-source-map",
+    "start": "npm run gen:fallback && node --max-old-space-size=4192 node_modules/webpack-cli/bin/cli.js serve --mode development --hot --devtool eval-cheap-module-source-map",
     "prebuild": "npm run clean",
     "build": "npm run gen:fallback && cross-env NODE_ENV=production webpack --mode production",
     "watch": "cross-env NODE_ENV=development webpack --mode development -w",
@@ -42,10 +42,10 @@
     "prepack": "npm run build"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.14",
-    "@babel/preset-env": "^7.13.12",
+    "@babel/core": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
     "@fortawesome/fontawesome-free": "^5.15.3",
-    "@octokit/request": "^5.4.14",
+    "@octokit/request": "^5.4.15",
     "@popperjs/core": "^2.9.2",
     "@testing-library/cypress": "^7.0.5",
     "@testing-library/jest-dom": "^5.11.10",
@@ -70,19 +70,19 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^14.14.37",
     "@types/regression": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.21.0",
-    "@typescript-eslint/parser": "^4.21.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "compute-logspace": "^1.0.0",
-    "concurrently": "^6.0.1",
+    "concurrently": "^6.0.2",
     "copy-webpack-plugin": "^8.1.1",
-    "core-js": "^3.10.0",
+    "core-js": "^3.10.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.0",
-    "css-minimizer-webpack-plugin": "^1.3.0",
-    "cypress": "^7.0.0",
+    "css-loader": "^5.2.1",
+    "css-minimizer-webpack-plugin": "^2.0.0",
+    "cypress": "^7.1.0",
     "cypress-image-snapshot": "^4.0.1",
     "d3-color": "^2.0.0",
     "d3-dsv": "^2.0.0",
@@ -90,10 +90,10 @@
     "d3-random": "^2.2.2",
     "d3-scale": "^3.2.4",
     "d3-scale-chromatic": "^2.0.0",
-    "d3-time": "^2.0.0",
+    "d3-time": "^2.1.1",
     "d3-time-format": "^3.0.0",
     "dirty-reprojectors": "0.0.2",
-    "eslint": "^7.23.0",
+    "eslint": "^7.24.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-svelte3": "^3.1.2",
     "file-loader": "^6.2.0",
@@ -109,10 +109,10 @@
     "lint-staged": "^10.5.4",
     "lodash-es": "^4.17.21",
     "mapbox-gl": "^1.13.0",
-    "marked": "^2.0.1",
-    "mini-css-extract-plugin": "^1.4.0",
+    "marked": "^2.0.3",
+    "mini-css-extract-plugin": "^1.4.1",
     "node-fetch": "^2.6.1",
-    "nouislider": "^14.6.4",
+    "nouislider": "^14.7.0",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^2.2.0",
     "raw-loader": "^4.0.2",
@@ -124,27 +124,27 @@
     "seedrandom": "^3.0.5",
     "style-loader": "^2.0.0",
     "svelte": "^3.37.0",
-    "svelte-check": "^1.3.0",
+    "svelte-check": "^1.4.0",
     "svelte-icons": "^2.1.0",
-    "svelte-jester": "^1.3.2",
-    "svelte-loader": "^3.1.0",
+    "svelte-jester": "^1.4.0",
+    "svelte-loader": "^3.1.1",
     "svelte-preprocess": "^4.7.0",
     "topojson-client": "^3.1.0",
     "topojson-server": "^3.0.1",
     "ts-jest": "^26.5.4",
     "ts-loader": "^8.1.0",
     "tslib": "^2.2.0",
-    "typescript": "^4.2.3",
+    "typescript": "^4.2.4",
     "url-loader": "^4.1.1",
     "vega": "^5.20.2",
     "vega-embed": "^6.17.0",
     "vega-lite": "^5.0.0",
-    "webpack": "^5.30.0",
+    "webpack": "^5.32.0",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
-    "uikit": "^3.6.18"
+    "uikit": "^3.6.19"
   },
   "lint-staged": {
     "*.{ts,js,svelte}": "eslint --cache --fix",

From a9eb3178b922fa06cc520b4228f6e4a4196784d4 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Wed, 14 Apr 2021 12:11:55 -0400
Subject: [PATCH 04/31] refactor: Vega typings

---
 src/components/Vega.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Vega.svelte b/src/components/Vega.svelte
index 052099aa2..1c3f6a7ac 100644
--- a/src/components/Vega.svelte
+++ b/src/components/Vega.svelte
@@ -3,6 +3,9 @@
   import { observeResize, unobserveResize } from '../util';
   import { createVegaTooltipAdapter } from './tooltipUtils';
 
+  /**
+   * @type {Promise<any[]>}
+   */
   export let data = Promise.resolve([]);
 
   const dispatch = createEventDispatcher();
@@ -73,6 +76,9 @@
    * // svelte component
    */
   export let tooltip = undefined;
+  /**
+   * @type {Record<string, unknown>}
+   */
   export let tooltipProps = {};
 
   $: tooltipHandler = createVegaTooltipAdapter(tooltip);

From bf63430980581fbf4a99f665039dc857c15a10b4 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Wed, 14 Apr 2021 13:26:08 -0400
Subject: [PATCH 05/31] feat: more backfill prototypes

---
 svelte.config.js  | 4 ++--
 webpack.config.js | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/svelte.config.js b/svelte.config.js
index 76127e37c..c7f2013ed 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,5 +1,5 @@
-const autoPreprocess = require('svelte-preprocess');
+// const autoPreprocess = require('svelte-preprocess');
 
 module.exports = {
-  preprocess: autoPreprocess(),
+  // preprocess: autoPreprocess(),
 };
diff --git a/webpack.config.js b/webpack.config.js
index 6f7a77ce1..7325f07d3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,7 +7,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { EnvironmentPlugin, DefinePlugin } = require('webpack');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const pkg = require('./package.json');
-const { preprocess } = require('./svelte.config');
+// const { preprocess } = require('./svelte.config');
 
 const devMode = process.env.NODE_ENV !== 'production';
 const hmr = devMode;
@@ -104,12 +104,12 @@ module.exports = () => {
             {
               loader: 'svelte-loader',
               options: {
-                preprocess,
+                // preprocess,
                 compilerOptions: {
                   dev: devMode,
                 },
                 hotReload: hmr,
-                emitCss: true, // !devMode,
+                emitCss: !devMode,
               },
             },
           ].slice(devMode ? 1 : 0),

From 2ec1d390a1dd6acd2d3458e628cad41663511787 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Wed, 14 Apr 2021 13:26:55 -0400
Subject: [PATCH 06/31] feat: more backfil protoypes

---
 .../indicator-status/BackfillProfile.svelte   | 252 +++++++++++++++---
 1 file changed, 216 insertions(+), 36 deletions(-)

diff --git a/src/modes/indicator-status/BackfillProfile.svelte b/src/modes/indicator-status/BackfillProfile.svelte
index 811d7addd..014b4a3cd 100644
--- a/src/modes/indicator-status/BackfillProfile.svelte
+++ b/src/modes/indicator-status/BackfillProfile.svelte
@@ -1,36 +1,66 @@
-<script lang="ts">
-  import type { TopLevelSpec } from 'vega-lite';
-  import type { NormalizedSpec } from 'vega-lite/build/src/spec';
+<script>
+  // import type { TopLevelSpec } from 'vega-lite';
+  // import type { NonNormalizedSpec, NormalizedSpec } from 'vega-lite/build/src/spec';
   import Vega from '../../components/Vega.svelte';
-  import { IndicatorStatus, loadBackFillProfile } from '../../data/indicatorInfo';
+  import { loadBackFillProfile } from '../../data/indicatorInfo';
+  // import type { IndicatorStatus } from ;
   import { commonConfig } from '../../specs/commonSpec';
   import { DateParam } from '../../stores/params';
   import DownloadMenu from '../mobile/components/DownloadMenu.svelte';
 
-  export let indicator: IndicatorStatus;
-  export let date: Date;
+  /**
+   * @type {import('../../data/indicatorInfo').IndicatorStatus}
+   */
+  export let indicator;
+  /**
+   * @type {Date}
+   */
+  export let date;
 
   $: window = new DateParam(date).windowTimeFrame;
 
   $: data = loadBackFillProfile(indicator, window);
 
-  function generateLayer(field: string, title: string, i: number): NormalizedSpec {
-    return {
+  function generateLayer(field, title, i, maxConfidence) {
+    /**
+     * @type {import('vega-lite/build/src/spec').NonNormalizedSpec}
+     */
+    const spec = {
       width: 'container',
       height: 300,
-      mark: {
-        type: 'rect',
-        stroke: null,
-        width: {
-          expr: `width / customCountDays(domain('concat_${i}_x')[0], domain('concat_${i}_x')[1])`,
-        },
-        height: {
-          expr: `height / (domain('concat_${i}_y')[1] - domain('concat_${i}_y')[0])`,
-        },
-        tooltip: {
-          content: 'data',
+      layer: [
+        {
+          mark: {
+            type: 'rect',
+            stroke: null,
+            width: {
+              expr: `width / customCountDays(domain('concat_${i}_x')[0], domain('concat_${i}_x')[1])`,
+            },
+            height: {
+              expr: `childHeight / (domain('concat_${i}_y')[1] - domain('concat_${i}_y')[0])`,
+            },
+            tooltip: {
+              content: 'data',
+            },
+          },
+          encoding: {
+            color: {
+              field: 'confidence',
+              type: 'quantitative',
+              scale: {
+                // type: 'pow',
+                // exponent: 0.1,
+                domainMax: maxConfidence,
+                nice: false,
+                scheme: 'viridis',
+              },
+              legend: {
+                // gradientLength: 00,
+              },
+            },
+          },
         },
-      },
+      ],
       encoding: {
         x: {
           field: field,
@@ -39,9 +69,14 @@
             format: '%m/%d',
             formatType: 'cachedTime',
             labelOverlap: true,
+            labelExpr: `datum.label + ((week(datum.value) === 1 || datum.index === 0) ? '/' + year(datum.value) : '')`,
             grid: true,
             gridDash: [4, 4],
             tickCount: 'week',
+            // tickWidth: {
+            //   condition: { test: { field: 'value', timeUnit: 'month', equal: 1 }, value: 3 },
+            //   value: 1,
+            // },
             title: title,
           },
         },
@@ -55,23 +90,135 @@
             title: 'Lag',
           },
         },
-        color: {
-          field: 'confidence',
-          type: 'quantitative',
-          scale: {
-            type: 'pow',
-            exponent: 0.1,
-            scheme: 'viridis',
+      },
+    };
+    return spec;
+  }
+
+  function generateStreamLayer(field, title) {
+    const cont = (v) => `(datum.confidence >= 0.${v} && datum.prevConfidence < 0.${v}) ? 'p${v}'`;
+    const confidenceClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
+    /**
+     * @type {import('vega-lite/build/src/spec').NonNormalizedSpec}
+     */
+    const spec = {
+      width: 'container',
+      height: 300,
+      transform: [
+        {
+          calculate: confidenceClassifier,
+          as: 'completed',
+        },
+        {
+          filter: 'datum.completed != null',
+        },
+        {
+          impute: 'lag',
+          key: 'completed',
+          groupby: ['time_value', 'date_value'],
+          method: 'value',
+          value: null,
+        },
+        {
+          pivot: 'completed',
+          groupby: ['time_value', 'date_value'],
+          value: 'lag',
+        },
+      ],
+      layer: [
+        {
+          transform: [
+            {
+              calculate: `['p25-p50', 'p50-p75', 'p75-p90']`,
+              as: 'range',
+            },
+            {
+              calculate: `[datum.p25, datum.p50, datum.p75]`,
+              as: 'start',
+            },
+            {
+              calculate: `[datum.p50, datum.p75, datum.p90]`,
+              as: 'end',
+            },
+            {
+              flatten: ['range', 'start', 'end'],
+            },
+          ],
+          mark: {
+            type: 'area',
+            opacity: 0.5,
+            tooltip: {
+              content: 'data',
+            },
+          },
+          encoding: {
+            color: {
+              field: 'range',
+              type: 'nominal',
+              scale: {
+                scheme: 'blues',
+              },
+              legend: {
+                labelExpr: `{'p25-p50': '25% - 50%', 'p50-p75': '50% - 75%', 'p75-p90': '75% - 90%'}[datum.label]`,
+              },
+            },
+            y: {
+              field: 'end',
+              type: 'quantitative',
+              scale: {
+                zero: true,
+              },
+              axis: {
+                title: 'Lag',
+              },
+            },
+            y2: { field: 'start' },
+          },
+        },
+        {
+          mark: {
+            type: 'line',
+            tooltip: {
+              content: 'data',
+            },
           },
-          legend: {
-            gradientLength: 500,
+          encoding: {
+            y: {
+              field: 'p50',
+              type: 'quantitative',
+            },
+          },
+        },
+      ],
+      encoding: {
+        x: {
+          field: field,
+          type: 'temporal',
+          axis: {
+            format: '%m/%d',
+            formatType: 'cachedTime',
+            labelOverlap: true,
+            labelExpr: `datum.label + ((week(datum.value) === 1 || datum.index === 0) ? '/' + year(datum.value) : '')`,
+            grid: true,
+            gridDash: [4, 4],
+            tickCount: 'week',
+            // tickWidth: {
+            //   condition: { test: { field: 'value', timeUnit: 'month', equal: 1 }, value: 3 },
+            //   value: 1,
+            // },
+            title: title,
           },
         },
       },
     };
+    return spec;
   }
-  function generateSpec(indicator: IndicatorStatus): TopLevelSpec {
-    return {
+
+  function generateSpec(indicator, maxConfidence = 0.95) {
+    /**
+     * @type {import('vega-lite').TopLevelSpec}
+     */
+    const spec = {
       $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
       autosize: {
         type: 'none',
@@ -84,35 +231,68 @@
       config: commonConfig,
       title: {
         text: `${indicator.name} Backfill Profile`,
+        subtitle: `clamped to <= ${maxConfidence} confidence`,
       },
       padding: {
         left: 50,
-        top: 50,
+        top: 65,
         right: 100,
         bottom: 50,
       },
+      transform: [
+        {
+          window: [
+            {
+              op: 'lag',
+              field: 'confidence',
+              param: 1,
+              as: 'prevConfidence',
+            },
+          ],
+          groupby: ['time_value'],
+          sort: [
+            {
+              field: 'lag',
+              order: 'ascending',
+            },
+          ],
+        },
+        {
+          calculate: 'datum.prevConfidence != null ? datum.prevConfidence : 0',
+          as: 'prevConfidence',
+        },
+        {
+          // keep all < 0.95 and remove all besides the first one over 0.95
+          filter: `datum.confidence < ${maxConfidence} || datum.prevConfidence < ${maxConfidence}`,
+        },
+      ],
       // resolve: {
       //   axis: {
       //     x: 'shared',
       //     y: 'shared'
       //   }
       // },
-      vconcat: [generateLayer('date_value', 'Reference Date', 0), generateLayer('issue_date', 'Issue Date', 1)],
+      vconcat: [
+        generateLayer('date_value', 'Reference Date', 0, maxConfidence),
+        generateStreamLayer('date_value', 'Reference Date'),
+        generateLayer('issue_date', 'Issue Date', 2, maxConfidence),
+      ],
     };
+    return spec;
   }
 
   $: spec = generateSpec(indicator);
 
-  let vegaRef: Vega | undefined = undefined;
+  let vegaRef = undefined;
 </script>
 
 <div class="chart-300">
-  <Vega bind:this={vegaRef} {spec} {data} className="charekt-breakout" />
+  <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
   <DownloadMenu {vegaRef} absolutePos fileName="{indicator.name}_Backfill_profile" advanced={false} />
 </div>
 
 <style>
   .chart-300 > :global(.vega-embed) {
-    height: 800px;
+    height: 1200px;
   }
 </style>

From 570e94cb1635af2bb88f68b853ce4a2500dc24fa Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Mon, 19 Apr 2021 12:17:19 -0400
Subject: [PATCH 07/31] feat: backfil profile by weekday

---
 .../indicator-status/BackfillProfile.svelte   | 129 ++++++++++++++++--
 1 file changed, 121 insertions(+), 8 deletions(-)

diff --git a/src/modes/indicator-status/BackfillProfile.svelte b/src/modes/indicator-status/BackfillProfile.svelte
index 014b4a3cd..7d6baac7d 100644
--- a/src/modes/indicator-status/BackfillProfile.svelte
+++ b/src/modes/indicator-status/BackfillProfile.svelte
@@ -96,8 +96,6 @@
   }
 
   function generateStreamLayer(field, title) {
-    const cont = (v) => `(datum.confidence >= 0.${v} && datum.prevConfidence < 0.${v}) ? 'p${v}'`;
-    const confidenceClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
     /**
      * @type {import('vega-lite/build/src/spec').NonNormalizedSpec}
      */
@@ -105,10 +103,6 @@
       width: 'container',
       height: 300,
       transform: [
-        {
-          calculate: confidenceClassifier,
-          as: 'completed',
-        },
         {
           filter: 'datum.completed != null',
         },
@@ -214,7 +208,120 @@
     return spec;
   }
 
+  function generateBoxPlotDayOfMonthLayer(field) {
+    /**
+     * @type {import('vega-lite/build/src/spec').NonNormalizedSpec}
+     */
+    const spec = {
+      width: 1000,
+      height: 200,
+      transform: [
+        {
+          filter: 'datum.completed != null',
+        },
+      ],
+      mark: {
+        type: 'boxplot',
+      },
+      encoding: {
+        row: {
+          field: 'completed',
+          type: 'nominal',
+          title: {
+            signal: `{'p25': '25%', 'p50': '50%', 'p75': '75%', 'p90': '90%'}[datum.label]`,
+          },
+          axis: {
+            title: 'Confidence Reached',
+          },
+        },
+        color: {
+          field: 'completed',
+          type: 'nominal',
+          legend: {
+            labelAngle: 0,
+            labelExpr: `{'p25': '25%', 'p50': '50%', 'p75': '75%', 'p90': '90%'}[datum.label]`,
+          },
+        },
+        x: {
+          field: field,
+          type: 'ordinal',
+          timeUnit: 'date',
+          axis: {
+            title: 'Reference Day of Month',
+            format: '%d',
+            labelAngle: 0,
+          },
+          spacing: 10,
+        },
+        y: {
+          // aggregate: 'max',
+          field: 'lag',
+          type: 'quantitative',
+        },
+      },
+    };
+    return spec;
+  }
+
+  function generateBoxPlotWeekdayLayer(field) {
+    /**
+     * @type {import('vega-lite/build/src/spec').NonNormalizedSpec}
+     */
+    const spec = {
+      width: 220,
+      height: 200,
+      transform: [
+        {
+          filter: 'datum.completed != null',
+        },
+      ],
+      mark: {
+        type: 'boxplot',
+      },
+      encoding: {
+        column: {
+          field: 'completed',
+          type: 'nominal',
+          title: {
+            signal: `{'p25': '25%', 'p50': '50%', 'p75': '75%', 'p90': '90%'}[datum.label]`,
+          },
+          axis: {
+            title: 'Confidence Reached',
+          },
+        },
+        color: {
+          field: 'completed',
+          type: 'nominal',
+          legend: {
+            labelAngle: 0,
+            labelExpr: `{'p25': '25%', 'p50': '50%', 'p75': '75%', 'p90': '90%'}[datum.label]`,
+          },
+        },
+        x: {
+          field: field,
+          type: 'ordinal',
+          timeUnit: 'day',
+          axis: {
+            title: 'Reference Weekday',
+            format: '%a',
+            labelAngle: 0,
+          },
+          spacing: 10,
+        },
+        y: {
+          // aggregate: 'max',
+          field: 'lag',
+          type: 'quantitative',
+        },
+      },
+    };
+    return spec;
+  }
+
   function generateSpec(indicator, maxConfidence = 0.95) {
+    const cont = (v) => `(datum.confidence >= 0.${v} && datum.prevConfidence < 0.${v}) ? 'p${v}'`;
+    const confidenceClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
+
     /**
      * @type {import('vega-lite').TopLevelSpec}
      */
@@ -235,9 +342,9 @@
       },
       padding: {
         left: 50,
-        top: 65,
+        top: 100,
         right: 100,
-        bottom: 50,
+        bottom: 70,
       },
       transform: [
         {
@@ -265,6 +372,10 @@
           // keep all < 0.95 and remove all besides the first one over 0.95
           filter: `datum.confidence < ${maxConfidence} || datum.prevConfidence < ${maxConfidence}`,
         },
+        {
+          calculate: confidenceClassifier,
+          as: 'completed',
+        },
       ],
       // resolve: {
       //   axis: {
@@ -276,6 +387,8 @@
         generateLayer('date_value', 'Reference Date', 0, maxConfidence),
         generateStreamLayer('date_value', 'Reference Date'),
         generateLayer('issue_date', 'Issue Date', 2, maxConfidence),
+        generateBoxPlotDayOfMonthLayer('date_value'),
+        generateBoxPlotWeekdayLayer('date_value'),
       ],
     };
     return spec;

From 2afa83194fb357ed1182ff8c7b59ba734c9bffd2 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Tue, 20 Apr 2021 13:43:52 -0400
Subject: [PATCH 08/31] feat: prepare for backfill time series

---
 src/data/indicatorInfo.ts                     |  37 ++---
 src/data/regions.ts                           |  12 +-
 .../indicator-status/BackfillProfile.svelte   |   4 +-
 .../BackfillTimeProfile.svelte                | 156 ++++++++++++++++++
 .../indicator-status/IndicatorStatus.svelte   |   5 +-
 .../indicator-status/{data.js => data.ts}     |  30 ++--
 6 files changed, 191 insertions(+), 53 deletions(-)
 create mode 100644 src/modes/indicator-status/BackfillTimeProfile.svelte
 rename src/modes/indicator-status/{data.js => data.ts} (66%)

diff --git a/src/data/indicatorInfo.ts b/src/data/indicatorInfo.ts
index 09f6dcb0b..98fe17d66 100644
--- a/src/data/indicatorInfo.ts
+++ b/src/data/indicatorInfo.ts
@@ -7,8 +7,6 @@ import { addNameInfos } from './fetchData';
 import { countyInfo } from './regions';
 import type { RegionInfo } from './regions';
 import type { TimeFrame } from '../stores/params';
-import data from './__test__/backfill/chng_sample_ny.json';
-import { timeDay } from 'd3-time';
 
 export interface Coverage {
   date: Date;
@@ -72,31 +70,22 @@ export interface ProfileEntry {
   date_value: Date;
   issue_date: Date;
   lag: number;
+
+  /**
+   * completeness value to the given reference anchor lag
+   */
+  completeness: number;
   /**
-   * [0..1]
+   * relative change to the previous issue
    */
-  confidence: number;
+  relative_change: number;
   value: number;
 }
 
-export function loadBackFillProfile(indicator: IndicatorStatus, window: TimeFrame): Promise<ProfileEntry[]> {
-  if (indicator.name !== 'Change' || window.min < new Date(2020, 0, 1)) {
-    return Promise.resolve([]);
-  }
-  let latest = data[0];
-  const rows: ProfileEntry[] = data.map((d) => {
-    if (d.time_value !== latest.time_value) {
-      latest = d; // sorted like that the lag desc = max
-    }
-    const date = parseFakeISO(d.time_value);
-    return {
-      date_value: date,
-      time_value: d.time_value,
-      lag: d.lag,
-      issue_date: timeDay.offset(date, d.lag),
-      confidence: d.sample_size / latest.sample_size,
-      value: d.value,
-    };
-  });
-  return Promise.resolve(rows);
+export function loadBackFillProfile(
+  indicator: IndicatorStatus,
+  region: RegionInfo,
+  window: TimeFrame,
+): Promise<ProfileEntry[]> {
+  return Promise.resolve([]);
 }
diff --git a/src/data/regions.ts b/src/data/regions.ts
index baa927bfd..774e4b4a9 100644
--- a/src/data/regions.ts
+++ b/src/data/regions.ts
@@ -8,7 +8,7 @@ import hhsRaw from './processed/hhs.csv.js';
 export type RegionLevel = 'state' | 'county' | 'msa' | 'hrr' | 'nation' | 'mega-county' | 'hhs';
 export type RegionArea = 'West' | 'Midwest' | 'Northeast' | 'South';
 
-export interface RegionInfo {
+export interface Region {
   readonly name: string;
   readonly displayName: string;
   readonly id: string;
@@ -17,21 +17,23 @@ export interface RegionInfo {
   readonly level: RegionLevel;
 }
 
-export interface StateInfo extends RegionInfo {
+export type RegionInfo = Region;
+
+export interface StateInfo extends Region {
   region: RegionArea;
   postal: string;
 }
 
-export interface CountyInfo extends RegionInfo {
+export interface CountyInfo extends Region {
   region: RegionArea;
   state: string;
 }
 
-export interface HRRInfo extends RegionInfo {
+export interface HRRInfo extends Region {
   state: string;
 }
 
-export interface HHSInfo extends RegionInfo {
+export interface HHSInfo extends Region {
   states: string[];
 }
 
diff --git a/src/modes/indicator-status/BackfillProfile.svelte b/src/modes/indicator-status/BackfillProfile.svelte
index 7d6baac7d..177186962 100644
--- a/src/modes/indicator-status/BackfillProfile.svelte
+++ b/src/modes/indicator-status/BackfillProfile.svelte
@@ -1,12 +1,12 @@
 <script>
   // import type { TopLevelSpec } from 'vega-lite';
   // import type { NonNormalizedSpec, NormalizedSpec } from 'vega-lite/build/src/spec';
-  import Vega from '../../components/Vega.svelte';
+  import Vega from '../../components/vega/Vega.svelte';
   import { loadBackFillProfile } from '../../data/indicatorInfo';
   // import type { IndicatorStatus } from ;
   import { commonConfig } from '../../specs/commonSpec';
   import { DateParam } from '../../stores/params';
-  import DownloadMenu from '../mobile/components/DownloadMenu.svelte';
+  import DownloadMenu from '../../components/DownloadMenu.svelte';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
diff --git a/src/modes/indicator-status/BackfillTimeProfile.svelte b/src/modes/indicator-status/BackfillTimeProfile.svelte
new file mode 100644
index 000000000..28bedcdc6
--- /dev/null
+++ b/src/modes/indicator-status/BackfillTimeProfile.svelte
@@ -0,0 +1,156 @@
+<script>
+  import Vega from '../../components/vega/Vega.svelte';
+  import { loadBackFillProfile } from '../../data/indicatorInfo';
+  import { commonConfig } from '../../specs/commonSpec';
+  import { DateParam } from '../../stores/params';
+  import DownloadMenu from '../../components/DownloadMenu.svelte';
+
+  /**
+   * @type {import('../../data/indicatorInfo').IndicatorStatus}
+   */
+  export let indicator;
+
+  /**
+   * @type {import('../../data/regions').Region}
+   */
+  export let region;
+
+  /**
+   * @type {Date}
+   */
+  export let date;
+
+  export let referenceAnchorLag = 60;
+
+  $: window = new DateParam(date).windowTimeFrame;
+
+  $: data = loadBackFillProfile(indicator, region, window, referenceAnchorLag);
+
+  function generateSpec(indicator) {
+    const cont = (v) => `(datum.completeness >= 0.${v} && datum.prevCompleteness < 0.${v}) ? 'p${v}'`;
+    const completenessClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
+
+    /**
+     * @type {import('vega-lite').TopLevelSpec}
+     */
+    const spec = {
+      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+      autosize: {
+        type: 'none',
+        contains: 'padding',
+        resize: true,
+      },
+      width: 100,
+      height: 100,
+      data: { name: 'values' },
+      config: commonConfig,
+      title: {
+        text: `${indicator.name} Backfill Profile`,
+      },
+      padding: {
+        left: 50,
+        top: 100,
+        right: 100,
+        bottom: 70,
+      },
+      transform: [
+        {
+          window: [
+            {
+              op: 'lag',
+              field: 'completeness',
+              param: 1,
+              as: 'prevCompleteness',
+            },
+          ],
+          groupby: ['time_value'],
+          sort: [
+            {
+              field: 'lag',
+              order: 'ascending',
+            },
+          ],
+        },
+        {
+          calculate: 'datum.prevCompleteness != null ? datum.prevCompleteness : 0',
+          as: 'prevCompleteness',
+        },
+        {
+          calculate: completenessClassifier,
+          as: 'completed',
+        },
+      ],
+
+      layer: [
+        {
+          mark: {
+            type: 'rect',
+            stroke: null,
+            width: {
+              expr: `width / customCountDays(domain('x')[0], domain('x')[1])`,
+            },
+            height: {
+              expr: `height / (domain('y')[1] - domain('y')[0])`,
+            },
+            tooltip: {
+              content: 'data',
+            },
+          },
+          encoding: {
+            color: {
+              field: 'completeness',
+              type: 'quantitative',
+              scale: {
+                nice: false,
+                scheme: 'viridis',
+              },
+              legend: {
+                // gradientLength: 00,
+              },
+            },
+          },
+        },
+      ],
+      encoding: {
+        x: {
+          field: 'date_value',
+          type: 'temporal',
+          axis: {
+            format: '%m/%d',
+            formatType: 'cachedTime',
+            labelOverlap: true,
+            labelExpr: `datum.label + ((week(datum.value) === 1 || datum.index === 0) ? '/' + year(datum.value) : '')`,
+            grid: true,
+            gridDash: [4, 4],
+            tickCount: 'week',
+            // tickWidth: {
+            //   condition: { test: { field: 'value', timeUnit: 'month', equal: 1 }, value: 3 },
+            //   value: 1,
+            // },
+            title: 'Reported Date',
+          },
+        },
+        y: {
+          field: 'lag',
+          type: 'quantitative',
+          scale: {
+            zero: true,
+          },
+          axis: {
+            title: 'Lag',
+          },
+        },
+      },
+    };
+    return spec;
+  }
+
+  $: spec = generateSpec(indicator);
+
+  let vegaRef = undefined;
+</script>
+
+<div class="chart-300">
+  <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
+  <DownloadMenu {vegaRef} absolutePos fileName="{indicator.name}_Backfill_profile" advanced={false} />
+</div>
diff --git a/src/modes/indicator-status/IndicatorStatus.svelte b/src/modes/indicator-status/IndicatorStatus.svelte
index 24fee1d2a..958c59868 100644
--- a/src/modes/indicator-status/IndicatorStatus.svelte
+++ b/src/modes/indicator-status/IndicatorStatus.svelte
@@ -6,7 +6,8 @@
   // import { getAvailableCounties } from '../../data/indicatorInfo';
   import KPIValue from '../../components/KPIValue.svelte';
   // import IndicatorCoverageChart from './IndicatorCoverageChart.svelte';
-  import BackfillProfile from './BackfillProfile.svelte';
+  import BackfillTimeProfile from './BackfillTimeProfile.svelte';
+  import { nationInfo } from '../../data/regions';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
@@ -76,5 +77,5 @@
   <FancyHeader invert sub="Backfill Profile">{signal ? signal.name : '?'}</FancyHeader>
 </div>
 <div class="grid-2-12">
-  <BackfillProfile indicator={signal} date={pickedDate} />
+  <BackfillTimeProfile indicator={signal} date={pickedDate} region={nationInfo} referenceAnchorLag={60} />
 </div>
diff --git a/src/modes/indicator-status/data.js b/src/modes/indicator-status/data.ts
similarity index 66%
rename from src/modes/indicator-status/data.js
rename to src/modes/indicator-status/data.ts
index bc0006ea6..747198a00 100644
--- a/src/modes/indicator-status/data.js
+++ b/src/modes/indicator-status/data.ts
@@ -1,20 +1,14 @@
 import { timeDay } from 'd3-time';
-import { getIndicatorStatuses } from '../../data/indicatorInfo';
+import { Coverage, getIndicatorStatuses, IndicatorStatus } from '../../data/indicatorInfo';
 import { countyInfo } from '../../data/regions';
 import { TimeFrame } from '../../stores/params';
 
-/**
- * @typedef {import('../../data/indicatorInfo').IndicatorStatus} ExtendedStatus
- * @property {number} latest_lag
- * @property {number} latest_coverage
- */
+export interface ExtendedStatus extends IndicatorStatus {
+  latest_lag: number;
+  latest_coverage: number;
+}
 
-/**
- *
- * @param {Date} latest
- * @param {import('../../data/indicatorInfo').Coverage[]} coverages
- */
-function findLatestCoverage(latest, coverages) {
+function findLatestCoverage(latest: Date, coverages: Coverage[]) {
   if (!coverages) {
     return null;
   }
@@ -25,22 +19,18 @@ function findLatestCoverage(latest, coverages) {
   }
   return latestEntry.count / countyInfo.length;
 }
-/**
- *
- * @param {Date}date
- * @returns {Promise<ExtendedStatus[]>}
- */
-export function loadData(date) {
+
+export function loadData(date: Date): Promise<ExtendedStatus[]> {
   return getIndicatorStatuses().then((rows) =>
     rows.map((r) => ({
       ...r,
       latest_lag: timeDay.count(r.latest_time_value, date),
-      latest_coverage: findLatestCoverage(r.latest_time_value, r.coverage.county),
+      latest_coverage: findLatestCoverage(r.latest_time_value, r.coverage.county)!,
     })),
   );
 }
 
-export function determineDomain(data) {
+export function determineDomain(data: IndicatorStatus[]): TimeFrame {
   let min = Number.POSITIVE_INFINITY;
   let max = Number.NEGATIVE_INFINITY;
   if (data.length === 0) {

From 62b6f2d577c6f81363dd32608fac99ba8ca92cff Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Tue, 20 Apr 2021 15:09:12 -0400
Subject: [PATCH 09/31] feat: prepare specific loading example

---
 src/data/indicatorInfo.ts | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/data/indicatorInfo.ts b/src/data/indicatorInfo.ts
index 98fe17d66..fcd882828 100644
--- a/src/data/indicatorInfo.ts
+++ b/src/data/indicatorInfo.ts
@@ -82,10 +82,39 @@ export interface ProfileEntry {
   value: number;
 }
 
+function toCountProfileEntries(rows: EpiDataRow[], referenceAnchorLag: number): ProfileEntry[] {
+  // assume sorted by date asc
+  return [];
+}
+
+function loadJHUProfile(region: RegionInfo, window: TimeFrame, referenceAnchorLag = 60): Promise<ProfileEntry[]> {
+  // currently only supported one
+  return fetchData(
+    {
+      id: 'jhu-csse',
+      signal: 'confirmed_incidence_num',
+    },
+    region.level,
+    region.propertyId,
+    window.range,
+    {
+      geo_type: region.level,
+      geo_value: region.propertyId,
+      signal: 'confirmed_incidence_num',
+    },
+  ).then((rows) => {
+    return toCountProfileEntries(rows, referenceAnchorLag);
+  });
+}
+
 export function loadBackFillProfile(
   indicator: IndicatorStatus,
   region: RegionInfo,
   window: TimeFrame,
+  referenceAnchorLag = 60,
 ): Promise<ProfileEntry[]> {
+  if (indicator.source === 'jhu-csse') {
+    return loadJHUProfile(region, window, referenceAnchorLag);
+  }
   return Promise.resolve([]);
 }

From 7b585a7c19e5999b69662d5f025d45fe99f44642 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Thu, 6 May 2021 17:24:39 -0400
Subject: [PATCH 10/31] feat: first backfil profile viz

---
 src/data/indicatorInfo.ts                     | 56 +++++++++++--------
 .../BackfillTimeProfile.svelte                | 11 +++-
 .../indicator-status/IndicatorStatus.svelte   | 23 +++++++-
 3 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/src/data/indicatorInfo.ts b/src/data/indicatorInfo.ts
index 8d0bc1684..f1e1dc4ce 100644
--- a/src/data/indicatorInfo.ts
+++ b/src/data/indicatorInfo.ts
@@ -1,12 +1,15 @@
 // Indicator Info: aka The Signal Dashboard API
 
 import { parseAPITime } from './utils';
-import { callSignalDashboardStatusAPI } from './api';
+import { callBackfillAPI, callSignalDashboardStatusAPI, EpiDataBackfillRow } from './api';
 import type { EpiDataRow } from './fetchData';
 import { addNameInfos } from './fetchData';
 import { countyInfo } from './regions';
 import type { RegionInfo } from './regions';
 import fetchTriple from './fetchTriple';
+import type { TimeFrame } from './TimeFrame';
+import { GeoPair, SourceSignalPair, TimePair } from './apimodel';
+import { timeDay } from 'd3-time';
 
 export interface Coverage {
   date: Date;
@@ -61,31 +64,36 @@ export function getAvailableCounties(indicator: IndicatorStatus, date: Date): Pr
   ).then((rows) => addNameInfos(rows).filter((d) => d.level === 'county')); // no mega-counties
 }
 
-export interface ProfileEntry {
-  time_value: number;
+export interface ProfileEntry extends EpiDataBackfillRow {
   date_value: Date;
   issue_date: Date;
   lag: number;
-
-  /**
-   * completeness value to the given reference anchor lag
-   */
-  completeness: number;
-  /**
-   * relative change to the previous issue
-   */
-  relative_change: number;
-  value: number;
 }
 
-// export function loadBackFillProfile(
-//   indicator: IndicatorStatus,
-//   region: RegionInfo,
-//   window: TimeFrame,
-//   referenceAnchorLag = 60,
-// ): Promise<ProfileEntry[]> {
-//   if (indicator.source === 'jhu-csse') {
-//     return loadJHUProfile(region, window, referenceAnchorLag);
-//   }
-//   return Promise.resolve([]);
-// }
+export function loadBackFillProfile(
+  indicator: IndicatorStatus,
+  region: RegionInfo,
+  window: TimeFrame,
+  referenceAnchorLag = 60,
+): Promise<ProfileEntry[]> {
+  return callBackfillAPI(
+    SourceSignalPair.from({
+      id: indicator.source,
+      signal: indicator.covidcast_signal,
+    }),
+    new TimePair('day', window),
+    GeoPair.from(region),
+    referenceAnchorLag,
+  ).then((rows) => {
+    return rows.map((row) => {
+      const date = parseAPITime(row.time_value);
+      const issue = parseAPITime(row.issue);
+      return {
+        ...row,
+        date_value: date,
+        issue_date: issue,
+        lag: timeDay.count(date, issue),
+      };
+    });
+  });
+}
diff --git a/src/modes/indicator-status/BackfillTimeProfile.svelte b/src/modes/indicator-status/BackfillTimeProfile.svelte
index 28bedcdc6..80060a66a 100644
--- a/src/modes/indicator-status/BackfillTimeProfile.svelte
+++ b/src/modes/indicator-status/BackfillTimeProfile.svelte
@@ -27,7 +27,7 @@
   $: data = loadBackFillProfile(indicator, region, window, referenceAnchorLag);
 
   function generateSpec(indicator) {
-    const cont = (v) => `(datum.completeness >= 0.${v} && datum.prevCompleteness < 0.${v}) ? 'p${v}'`;
+    const cont = (v) => `(datum.value_completeness >= 0.${v} && datum.prevCompleteness < 0.${v}) ? 'p${v}'`;
     const completenessClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
 
     /**
@@ -58,7 +58,7 @@
           window: [
             {
               op: 'lag',
-              field: 'completeness',
+              field: 'value_completeness',
               param: 1,
               as: 'prevCompleteness',
             },
@@ -98,13 +98,18 @@
           },
           encoding: {
             color: {
-              field: 'completeness',
+              field: 'value_completeness',
               type: 'quantitative',
               scale: {
+                domain: [0, 1],
+                clamp: true,
                 nice: false,
                 scheme: 'viridis',
               },
               legend: {
+                title: 'Completness',
+                titleAlign: 'left',
+                titleOrient: 'left',
                 // gradientLength: 00,
               },
             },
diff --git a/src/modes/indicator-status/IndicatorStatus.svelte b/src/modes/indicator-status/IndicatorStatus.svelte
index 958c59868..03cc8f7dd 100644
--- a/src/modes/indicator-status/IndicatorStatus.svelte
+++ b/src/modes/indicator-status/IndicatorStatus.svelte
@@ -7,7 +7,9 @@
   import KPIValue from '../../components/KPIValue.svelte';
   // import IndicatorCoverageChart from './IndicatorCoverageChart.svelte';
   import BackfillTimeProfile from './BackfillTimeProfile.svelte';
-  import { nationInfo } from '../../data/regions';
+  import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
+  import { currentRegionInfo, selectByInfo } from '../../stores';
+  import Search from '../../components/Search.svelte';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
@@ -74,8 +76,25 @@
   <IndicatorCountyMap {signal} date={pickedDate} {data} />
 </div> -->
 <div class="grid-3-11">
+  <hr />
   <FancyHeader invert sub="Backfill Profile">{signal ? signal.name : '?'}</FancyHeader>
+  <Search
+    modern
+    placeholder="Select a region"
+    items={[nationInfo, ...stateInfo, ...countyInfo]}
+    title="Region"
+    icon="location"
+    selectedItem={$currentRegionInfo || nationInfo}
+    labelFieldName="displayName"
+    maxItemsToShowInList="5"
+    on:change={(e) => selectByInfo(e.detail && e.detail.level === 'nation' ? null : e.detail)}
+  />
 </div>
 <div class="grid-2-12">
-  <BackfillTimeProfile indicator={signal} date={pickedDate} region={nationInfo} referenceAnchorLag={60} />
+  <BackfillTimeProfile
+    indicator={signal}
+    date={pickedDate}
+    region={$currentRegionInfo || nationInfo}
+    referenceAnchorLag={60}
+  />
 </div>

From 0c465358be40adc50994566cc2896bc481d4bca4 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Thu, 6 May 2021 17:45:45 -0400
Subject: [PATCH 11/31] feat: add issue based backfill visz

---
 .../BackfillTimeProfile.svelte                | 115 ++++++++++++------
 1 file changed, 75 insertions(+), 40 deletions(-)

diff --git a/src/modes/indicator-status/BackfillTimeProfile.svelte b/src/modes/indicator-status/BackfillTimeProfile.svelte
index 80060a66a..885bd106c 100644
--- a/src/modes/indicator-status/BackfillTimeProfile.svelte
+++ b/src/modes/indicator-status/BackfillTimeProfile.svelte
@@ -26,10 +26,7 @@
 
   $: data = loadBackFillProfile(indicator, region, window, referenceAnchorLag);
 
-  function generateSpec(indicator) {
-    const cont = (v) => `(datum.value_completeness >= 0.${v} && datum.prevCompleteness < 0.${v}) ? 'p${v}'`;
-    const completenessClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
-
+  function generateIssueSpec(indicator) {
     /**
      * @type {import('vega-lite').TopLevelSpec}
      */
@@ -45,42 +42,14 @@
       data: { name: 'values' },
       config: commonConfig,
       title: {
-        text: `${indicator.name} Backfill Profile`,
+        text: `${indicator.name} Backfill Issue Profile`,
       },
       padding: {
         left: 50,
-        top: 100,
+        top: 30,
         right: 100,
-        bottom: 70,
+        bottom: 40,
       },
-      transform: [
-        {
-          window: [
-            {
-              op: 'lag',
-              field: 'value_completeness',
-              param: 1,
-              as: 'prevCompleteness',
-            },
-          ],
-          groupby: ['time_value'],
-          sort: [
-            {
-              field: 'lag',
-              order: 'ascending',
-            },
-          ],
-        },
-        {
-          calculate: 'datum.prevCompleteness != null ? datum.prevCompleteness : 0',
-          as: 'prevCompleteness',
-        },
-        {
-          calculate: completenessClassifier,
-          as: 'completed',
-        },
-      ],
-
       layer: [
         {
           mark: {
@@ -95,6 +64,7 @@
             tooltip: {
               content: 'data',
             },
+            opacity: 0.5,
           },
           encoding: {
             color: {
@@ -107,7 +77,7 @@
                 scheme: 'viridis',
               },
               legend: {
-                title: 'Completness',
+                title: 'Completeness',
                 titleAlign: 'left',
                 titleOrient: 'left',
                 // gradientLength: 00,
@@ -118,7 +88,7 @@
       ],
       encoding: {
         x: {
-          field: 'date_value',
+          field: 'issue_date',
           type: 'temporal',
           axis: {
             format: '%m/%d',
@@ -132,7 +102,7 @@
             //   condition: { test: { field: 'value', timeUnit: 'month', equal: 1 }, value: 3 },
             //   value: 1,
             // },
-            title: 'Reported Date',
+            title: 'Issue Date',
           },
         },
         y: {
@@ -150,12 +120,77 @@
     return spec;
   }
 
-  $: spec = generateSpec(indicator);
+  function generateReporteDateSpec(indicator) {
+    const spec = generateIssueSpec(indicator);
+    spec.title.text = `${indicator.name} Backfill Profile`;
+    const cont = (v) => `(datum.value_completeness >= 0.${v} && datum.prevCompleteness < 0.${v}) ? 'p${v}'`;
+    const completenessClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
+
+    spec.transform = [
+      {
+        window: [
+          {
+            op: 'lag',
+            field: 'value_completeness',
+            param: 1,
+            as: 'prevCompleteness',
+          },
+        ],
+        groupby: ['time_value'],
+        sort: [
+          {
+            field: 'lag',
+            order: 'ascending',
+          },
+        ],
+      },
+      {
+        calculate: 'datum.prevCompleteness != null ? datum.prevCompleteness : 0',
+        as: 'prevCompleteness',
+      },
+      {
+        calculate: completenessClassifier,
+        as: 'completed',
+      },
+    ];
+
+    spec.layer.push({
+      transform: [
+        {
+          filter: `datum.completed == 'p90'`,
+        },
+      ],
+      mark: {
+        type: 'line',
+        stroke: 'red',
+      },
+    });
+
+    spec.encoding.x.field = 'date_value';
+    spec.encoding.x.axis.title = 'Reported Date';
+
+    return spec;
+  }
+
+  $: spec = generateReporteDateSpec(indicator);
+  $: spec2 = generateIssueSpec(indicator);
 
   let vegaRef = undefined;
+  let vegaRef2 = undefined;
 </script>
 
 <div class="chart-300">
   <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
-  <DownloadMenu {vegaRef} absolutePos fileName="{indicator.name}_Backfill_profile" advanced={false} />
+  <DownloadMenu {vegaRef} {data} absolutePos fileName="{indicator.name}_Backfill_profile" advanced={false} />
+</div>
+
+<div class="chart-300">
+  <Vega bind:this={vegaRef2} spec={spec2} {data} className="chart-breakout" />
+  <DownloadMenu
+    vegaRef={vegaRef2}
+    {data}
+    absolutePos
+    fileName="{indicator.name}_Backfill_date_profile"
+    advanced={false}
+  />
 </div>

From 6e3cc0075136437235747875077ad07cf0cf1e64 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Fri, 7 May 2021 12:14:45 -0400
Subject: [PATCH 12/31] feat: add anchor hint

---
 .../BackfillTimeProfile.svelte                | 73 +++++++++++++++----
 1 file changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/modes/indicator-status/BackfillTimeProfile.svelte b/src/modes/indicator-status/BackfillTimeProfile.svelte
index 885bd106c..943a462d8 100644
--- a/src/modes/indicator-status/BackfillTimeProfile.svelte
+++ b/src/modes/indicator-status/BackfillTimeProfile.svelte
@@ -26,7 +26,7 @@
 
   $: data = loadBackFillProfile(indicator, region, window, referenceAnchorLag);
 
-  function generateIssueSpec(indicator) {
+  function generateHeatMapSpec(indicator) {
     /**
      * @type {import('vega-lite').TopLevelSpec}
      */
@@ -85,6 +85,29 @@
             },
           },
         },
+        {
+          transform: [
+            {
+              filter: `datum.is_anchor`,
+            },
+          ],
+          mark: {
+            type: 'line',
+          },
+          encoding: {
+            color: {
+              field: 'is_anchor',
+              type: 'ordinal',
+              scale: {
+                range: ['blue'],
+              },
+              legend: {
+                title: false,
+                labelExpr: `'anchor'`,
+              },
+            },
+          },
+        },
       ],
       encoding: {
         x: {
@@ -120,8 +143,26 @@
     return spec;
   }
 
-  function generateReporteDateSpec(indicator) {
-    const spec = generateIssueSpec(indicator);
+  function generateIssueDateSpec(indicator) {
+    const spec = generateHeatMapSpec(indicator);
+
+    spec.layer.push({
+      transform: [
+        {
+          filter: `datum.is_anchor`,
+        },
+      ],
+      mark: {
+        type: 'line',
+        stroke: 'blue',
+      },
+    });
+
+    return spec;
+  }
+
+  function generateReportedDateSpec(indicator) {
+    const spec = generateHeatMapSpec(indicator);
     spec.title.text = `${indicator.name} Backfill Profile`;
     const cont = (v) => `(datum.value_completeness >= 0.${v} && datum.prevCompleteness < 0.${v}) ? 'p${v}'`;
     const completenessClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
@@ -154,17 +195,17 @@
       },
     ];
 
-    spec.layer.push({
-      transform: [
-        {
-          filter: `datum.completed == 'p90'`,
-        },
-      ],
-      mark: {
-        type: 'line',
-        stroke: 'red',
-      },
-    });
+    // spec.layer.push({
+    //   transform: [
+    //     {
+    //       filter: `datum.completed == 'p90'`,
+    //     },
+    //   ],
+    //   mark: {
+    //     type: 'line',
+    //     stroke: 'red',
+    //   },
+    // });
 
     spec.encoding.x.field = 'date_value';
     spec.encoding.x.axis.title = 'Reported Date';
@@ -172,8 +213,8 @@
     return spec;
   }
 
-  $: spec = generateReporteDateSpec(indicator);
-  $: spec2 = generateIssueSpec(indicator);
+  $: spec = generateReportedDateSpec(indicator);
+  $: spec2 = generateIssueDateSpec(indicator);
 
   let vegaRef = undefined;
   let vegaRef2 = undefined;

From effc4270ccd9f32e409c1935bce6a101a50c6895 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Fri, 7 May 2021 13:15:49 -0400
Subject: [PATCH 13/31] feat: generalized backfill viz

---
 src/components/OptionPicker.svelte            |   2 +-
 .../BackfillTimeProfile.svelte                | 264 ++++--------------
 .../indicator-status/IndicatorStatus.svelte   |  28 +-
 src/modes/indicator-status/backfillSpec.ts    | 211 ++++++++++++++
 4 files changed, 268 insertions(+), 237 deletions(-)
 create mode 100644 src/modes/indicator-status/backfillSpec.ts

diff --git a/src/components/OptionPicker.svelte b/src/components/OptionPicker.svelte
index c56330322..0a5a041d0 100644
--- a/src/components/OptionPicker.svelte
+++ b/src/components/OptionPicker.svelte
@@ -7,7 +7,7 @@
   export let value = null;
   export let label = 'Options';
   /**
-   * @type {}
+   * @type {{label: string, value: string}[]}
    */
   export let options = [];
 
diff --git a/src/modes/indicator-status/BackfillTimeProfile.svelte b/src/modes/indicator-status/BackfillTimeProfile.svelte
index 943a462d8..94c4eef3e 100644
--- a/src/modes/indicator-status/BackfillTimeProfile.svelte
+++ b/src/modes/indicator-status/BackfillTimeProfile.svelte
@@ -1,20 +1,20 @@
 <script>
   import Vega from '../../components/vega/Vega.svelte';
   import { loadBackFillProfile } from '../../data/indicatorInfo';
-  import { commonConfig } from '../../specs/commonSpec';
   import { DateParam } from '../../stores/params';
+  import { currentRegionInfo, selectByInfo } from '../../stores';
   import DownloadMenu from '../../components/DownloadMenu.svelte';
+  import { generateHeatMapSpec } from './backfillSpec';
+  import FancyHeader from '../../components/FancyHeader.svelte';
+  import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
+  import Search from '../../components/Search.svelte';
+  import OptionPicker from '../../components/OptionPicker.svelte';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
    */
   export let indicator;
 
-  /**
-   * @type {import('../../data/regions').Region}
-   */
-  export let region;
-
   /**
    * @type {Date}
    */
@@ -22,216 +22,60 @@
 
   export let referenceAnchorLag = 60;
 
+  $: region = $currentRegionInfo || nationInfo;
+
   $: window = new DateParam(date).windowTimeFrame;
 
   $: data = loadBackFillProfile(indicator, region, window, referenceAnchorLag);
 
-  function generateHeatMapSpec(indicator) {
-    /**
-     * @type {import('vega-lite').TopLevelSpec}
-     */
-    const spec = {
-      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-      autosize: {
-        type: 'none',
-        contains: 'padding',
-        resize: true,
-      },
-      width: 100,
-      height: 100,
-      data: { name: 'values' },
-      config: commonConfig,
-      title: {
-        text: `${indicator.name} Backfill Issue Profile`,
-      },
-      padding: {
-        left: 50,
-        top: 30,
-        right: 100,
-        bottom: 40,
-      },
-      layer: [
-        {
-          mark: {
-            type: 'rect',
-            stroke: null,
-            width: {
-              expr: `width / customCountDays(domain('x')[0], domain('x')[1])`,
-            },
-            height: {
-              expr: `height / (domain('y')[1] - domain('y')[0])`,
-            },
-            tooltip: {
-              content: 'data',
-            },
-            opacity: 0.5,
-          },
-          encoding: {
-            color: {
-              field: 'value_completeness',
-              type: 'quantitative',
-              scale: {
-                domain: [0, 1],
-                clamp: true,
-                nice: false,
-                scheme: 'viridis',
-              },
-              legend: {
-                title: 'Completeness',
-                titleAlign: 'left',
-                titleOrient: 'left',
-                // gradientLength: 00,
-              },
-            },
-          },
-        },
-        {
-          transform: [
-            {
-              filter: `datum.is_anchor`,
-            },
-          ],
-          mark: {
-            type: 'line',
-          },
-          encoding: {
-            color: {
-              field: 'is_anchor',
-              type: 'ordinal',
-              scale: {
-                range: ['blue'],
-              },
-              legend: {
-                title: false,
-                labelExpr: `'anchor'`,
-              },
-            },
-          },
-        },
-      ],
-      encoding: {
-        x: {
-          field: 'issue_date',
-          type: 'temporal',
-          axis: {
-            format: '%m/%d',
-            formatType: 'cachedTime',
-            labelOverlap: true,
-            labelExpr: `datum.label + ((week(datum.value) === 1 || datum.index === 0) ? '/' + year(datum.value) : '')`,
-            grid: true,
-            gridDash: [4, 4],
-            tickCount: 'week',
-            // tickWidth: {
-            //   condition: { test: { field: 'value', timeUnit: 'month', equal: 1 }, value: 3 },
-            //   value: 1,
-            // },
-            title: 'Issue Date',
-          },
-        },
-        y: {
-          field: 'lag',
-          type: 'quantitative',
-          scale: {
-            zero: true,
-          },
-          axis: {
-            title: 'Lag',
-          },
-        },
-      },
-    };
-    return spec;
-  }
-
-  function generateIssueDateSpec(indicator) {
-    const spec = generateHeatMapSpec(indicator);
-
-    spec.layer.push({
-      transform: [
-        {
-          filter: `datum.is_anchor`,
-        },
-      ],
-      mark: {
-        type: 'line',
-        stroke: 'blue',
-      },
-    });
-
-    return spec;
-  }
-
-  function generateReportedDateSpec(indicator) {
-    const spec = generateHeatMapSpec(indicator);
-    spec.title.text = `${indicator.name} Backfill Profile`;
-    const cont = (v) => `(datum.value_completeness >= 0.${v} && datum.prevCompleteness < 0.${v}) ? 'p${v}'`;
-    const completenessClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
-
-    spec.transform = [
-      {
-        window: [
-          {
-            op: 'lag',
-            field: 'value_completeness',
-            param: 1,
-            as: 'prevCompleteness',
-          },
-        ],
-        groupby: ['time_value'],
-        sort: [
-          {
-            field: 'lag',
-            order: 'ascending',
-          },
-        ],
-      },
-      {
-        calculate: 'datum.prevCompleteness != null ? datum.prevCompleteness : 0',
-        as: 'prevCompleteness',
-      },
-      {
-        calculate: completenessClassifier,
-        as: 'completed',
-      },
-    ];
-
-    // spec.layer.push({
-    //   transform: [
-    //     {
-    //       filter: `datum.completed == 'p90'`,
-    //     },
-    //   ],
-    //   mark: {
-    //     type: 'line',
-    //     stroke: 'red',
-    //   },
-    // });
-
-    spec.encoding.x.field = 'date_value';
-    spec.encoding.x.axis.title = 'Reported Date';
-
-    return spec;
-  }
-
-  $: spec = generateReportedDateSpec(indicator);
-  $: spec2 = generateIssueDateSpec(indicator);
-
   let vegaRef = undefined;
-  let vegaRef2 = undefined;
+
+  const dateOptions = [
+    { label: 'Reported Date', value: 'date_value' },
+    { label: 'Issue Date', value: 'issue_date' },
+  ];
+  let dateField = 'date_value';
+
+  const valueOptions = [
+    { label: 'Value Completeness', value: 'value_completeness' },
+    { label: 'Relative Value Change', value: 'value_rel_change' },
+    { label: 'Sample Size Completeness', value: 'sample_size_completeness' },
+    { label: 'Relative Sample Size Change', value: 'sample_size_rel_change' },
+  ];
+  let valueField = 'value_completeness';
+
+  $: title = `${indicator.name} Backfill Profile`;
+  $: spec = generateHeatMapSpec(indicator, {
+    title,
+    valueField,
+    valueLabel: valueOptions.find((d) => d.value == valueField).label,
+    dateField,
+    dateLabel: dateOptions.find((d) => d.value == dateField).label,
+  });
 </script>
 
-<div class="chart-300">
-  <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
-  <DownloadMenu {vegaRef} {data} absolutePos fileName="{indicator.name}_Backfill_profile" advanced={false} />
+<div class="grid-3-11">
+  <hr />
+  <FancyHeader invert sub="Backfill Profile">{indicator ? indicator.name : '?'}</FancyHeader>
 </div>
-
-<div class="chart-300">
-  <Vega bind:this={vegaRef2} spec={spec2} {data} className="chart-breakout" />
-  <DownloadMenu
-    vegaRef={vegaRef2}
-    {data}
-    absolutePos
-    fileName="{indicator.name}_Backfill_date_profile"
-    advanced={false}
-  />
+<Search
+  modern
+  className="grid-3-8"
+  placeholder="Select a region"
+  items={[nationInfo, ...stateInfo, ...countyInfo]}
+  title="Region"
+  icon="location"
+  selectedItem={region}
+  labelFieldName="displayName"
+  maxItemsToShowInList="5"
+  on:change={(e) => selectByInfo(e.detail && e.detail.level === 'nation' ? null : e.detail)}
+/>
+<OptionPicker className="8-11" label="Color" bind:value={valueField} options={valueOptions} />
+<OptionPicker className="8-11" label="Date" bind:value={dateField} options={dateOptions} />
+
+<div class="grid-3-11">
+  <div class="chart-300">
+    <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
+    <DownloadMenu {vegaRef} {data} absolutePos fileName={title.replace(/\s+/gm, '_')} advanced={false} />
+  </div>
 </div>
diff --git a/src/modes/indicator-status/IndicatorStatus.svelte b/src/modes/indicator-status/IndicatorStatus.svelte
index 03cc8f7dd..01427e210 100644
--- a/src/modes/indicator-status/IndicatorStatus.svelte
+++ b/src/modes/indicator-status/IndicatorStatus.svelte
@@ -7,9 +7,6 @@
   import KPIValue from '../../components/KPIValue.svelte';
   // import IndicatorCoverageChart from './IndicatorCoverageChart.svelte';
   import BackfillTimeProfile from './BackfillTimeProfile.svelte';
-  import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
-  import { currentRegionInfo, selectByInfo } from '../../stores';
-  import Search from '../../components/Search.svelte';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
@@ -75,26 +72,5 @@
 <!-- <div class="grid-2-12">
   <IndicatorCountyMap {signal} date={pickedDate} {data} />
 </div> -->
-<div class="grid-3-11">
-  <hr />
-  <FancyHeader invert sub="Backfill Profile">{signal ? signal.name : '?'}</FancyHeader>
-  <Search
-    modern
-    placeholder="Select a region"
-    items={[nationInfo, ...stateInfo, ...countyInfo]}
-    title="Region"
-    icon="location"
-    selectedItem={$currentRegionInfo || nationInfo}
-    labelFieldName="displayName"
-    maxItemsToShowInList="5"
-    on:change={(e) => selectByInfo(e.detail && e.detail.level === 'nation' ? null : e.detail)}
-  />
-</div>
-<div class="grid-2-12">
-  <BackfillTimeProfile
-    indicator={signal}
-    date={pickedDate}
-    region={$currentRegionInfo || nationInfo}
-    referenceAnchorLag={60}
-  />
-</div>
+
+<BackfillTimeProfile indicator={signal} date={pickedDate} referenceAnchorLag={60} />
diff --git a/src/modes/indicator-status/backfillSpec.ts b/src/modes/indicator-status/backfillSpec.ts
new file mode 100644
index 000000000..6ec046e83
--- /dev/null
+++ b/src/modes/indicator-status/backfillSpec.ts
@@ -0,0 +1,211 @@
+import type { TopLevelSpec } from 'vega-lite';
+import type { IndicatorStatus, ProfileEntry } from '../../data/indicatorInfo';
+import { BASE_SPEC } from '../../specs/commonSpec';
+
+export function generateHeatMapSpec(
+  indicator: IndicatorStatus,
+  {
+    valueField = 'value_completeness',
+    valueLabel = 'Completeness',
+    dateField = 'issue_date',
+    dateLabel = 'Issue Date',
+    title = `${indicator.name} Backfill Issue Profile`,
+  }: {
+    valueField?: keyof Pick<
+      ProfileEntry,
+      'sample_size_completeness' | 'sample_size_rel_change' | 'value_completeness' | 'value_rel_change'
+    >;
+    valueLabel?: string;
+    dateField?: keyof Pick<ProfileEntry, 'issue_date' | 'date_value'>;
+    dateLabel?: string;
+    title?: string;
+  },
+): TopLevelSpec {
+  const spec: TopLevelSpec = {
+    ...BASE_SPEC,
+    title: {
+      text: title,
+    },
+    padding: {
+      left: 50,
+      top: 30,
+      right: 100,
+      bottom: 40,
+    },
+    layer: [
+      {
+        mark: {
+          type: 'rect',
+          stroke: null,
+          strokeWidth: 0,
+          strokeOpacity: 0,
+          width: {
+            expr: `width / customCountDays(domain('x')[0], domain('x')[1])`,
+          },
+          height: {
+            expr: `height / (domain('y')[1] - domain('y')[0])`,
+          },
+          tooltip: {
+            content: 'data',
+          },
+          // opacity: 0.5,
+        },
+        encoding: {
+          color: {
+            field: valueField,
+            type: 'quantitative',
+            scale: valueField.endsWith('rel_change')
+              ? {
+                  domainMid: 0,
+                  nice: false,
+                  // scheme: valueField.endsWith('rel_change') ?  'viridis',
+                }
+              : {
+                  domain: [0, 1],
+                  clamp: true,
+                  nice: false,
+                },
+            legend: {
+              title: valueLabel,
+              titleAlign: 'left',
+              titleOrient: 'left',
+              // gradientLength: 00,
+            },
+          },
+        },
+      },
+      {
+        transform: [
+          {
+            filter: `datum.is_anchor`,
+          },
+        ],
+        mark: {
+          type: 'line',
+        },
+        encoding: {
+          color: {
+            field: 'is_anchor',
+            type: 'ordinal',
+            scale: {
+              range: ['blue'],
+            },
+            legend: {
+              title: null,
+              labelExpr: `'anchor'`,
+            },
+          },
+        },
+      },
+    ],
+    encoding: {
+      x: {
+        field: dateField,
+        type: 'temporal',
+        axis: {
+          format: '%m/%d',
+          formatType: 'cachedTime',
+          labelOverlap: true,
+          labelExpr: `datum.label + ((week(datum.value) === 1 || datum.index === 0) ? '/' + year(datum.value) : '')`,
+          grid: true,
+          gridDash: [4, 4],
+          tickCount: 'week',
+          // tickWidth: {
+          //   condition: { test: { field: 'value', timeUnit: 'month', equal: 1 }, value: 3 },
+          //   value: 1,
+          // },
+          title: dateLabel,
+        },
+      },
+      y: {
+        field: 'lag',
+        type: 'quantitative',
+        scale: {
+          zero: true,
+        },
+        axis: {
+          title: 'Lag',
+        },
+      },
+    },
+  };
+  return spec;
+}
+
+// export function generateIssueDateSpec(indicator: IndicatorStatus): TopLevelSpec {
+//   const spec = generateHeatMapSpec(indicator, {});
+//   return spec;
+// }
+
+// export function generateIssueDateDeltaSpec(indicator: IndicatorStatus): TopLevelSpec {
+//   const spec = generateHeatMapSpec(indicator, {
+//     valueField: 'value_rel_change',
+//     valueLabel: 'Relative Change',
+//     title: `${indicator.name} Backfill Relative Change Profile`,
+//   });
+//   return spec;
+// }
+
+export function injectClassification(spec: TopLevelSpec): void {
+  const cont = (v: number) => `(datum.value_completeness >= 0.${v} && datum.prevCompleteness < 0.${v}) ? 'p${v}'`;
+  const completenessClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
+
+  spec.transform = [
+    {
+      window: [
+        {
+          op: 'lag',
+          field: 'value_completeness',
+          param: 1,
+          as: 'prevCompleteness',
+        },
+      ],
+      groupby: ['time_value'],
+      sort: [
+        {
+          field: 'lag',
+          order: 'ascending',
+        },
+      ],
+    },
+    {
+      calculate: 'datum.prevCompleteness != null ? datum.prevCompleteness : 0',
+      as: 'prevCompleteness',
+    },
+    {
+      calculate: completenessClassifier,
+      as: 'completed',
+    },
+  ];
+}
+
+// export function generateReportedDateSpec(indicator: IndicatorStatus): TopLevelSpec {
+//   const spec = generateHeatMapSpec(indicator, {
+//     xField: 'date_value',
+//     xLabel: 'Reported Date',
+//     title: `${indicator.name} Backfill Profile`,
+//   });
+//   // spec.layer.push({
+//   //   transform: [
+//   //     {
+//   //       filter: `datum.completed == 'p90'`,
+//   //     },
+//   //   ],
+//   //   mark: {
+//   //     type: 'line',
+//   //     stroke: 'red',
+//   //   },
+//   // });
+//   return spec;
+// }
+
+// export function generateReportedDateDeltaSpec(indicator: IndicatorStatus): TopLevelSpec {
+//   const spec = generateHeatMapSpec(indicator, {
+//     valueField: 'value_rel_change',
+//     valueLabel: 'Relative Change',
+//     xField: 'date_value',
+//     xLabel: 'Reported Date',
+//     title: `${indicator.name} Backfill Relative Change Profile`,
+//   });
+//   return spec;
+// }

From 6b602632d71d37596808187f1658c73fc1b76971 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Fri, 7 May 2021 14:40:23 -0400
Subject: [PATCH 14/31] feat: weekday profile

---
 src/components/OptionPicker.svelte            |  10 +-
 src/global.css                                |   7 +
 .../BackfillTimeProfile.svelte                |  63 ++++--
 .../indicator-status/IndicatorStatus.svelte   |   4 +-
 src/modes/indicator-status/backfillSpec.ts    | 186 +++++++++++++++---
 5 files changed, 229 insertions(+), 41 deletions(-)

diff --git a/src/components/OptionPicker.svelte b/src/components/OptionPicker.svelte
index 0a5a041d0..569e1c0ee 100644
--- a/src/components/OptionPicker.svelte
+++ b/src/components/OptionPicker.svelte
@@ -13,11 +13,13 @@
 
   export let className = '';
   export let style = undefined;
+
+  export let modern = false;
 </script>
 
 <div class="option-picker {className}" {style}>
   <span class="option-picker-label">{label}</span>
-  <select {name} class="option-picker-input" bind:value on:blur {required}>
+  <select {name} class="option-picker-input" class:modern bind:value on:blur {required}>
     <slot>
       {#each options as option}
         <option value={option.value}>{option.label}</option>
@@ -44,6 +46,12 @@
     color: inherit;
   }
 
+  .option-picker-input.modern {
+    padding: 10px 0 10px 6px;
+    font-size: 0.75rem;
+    height: 50px;
+  }
+
   .option-picker-input > :global(option) {
     color: inherit;
     font-size: inherit;
diff --git a/src/global.css b/src/global.css
index 48fca19a9..9143f00b3 100644
--- a/src/global.css
+++ b/src/global.css
@@ -60,3 +60,10 @@
 .grid-9-13 {
   grid-column: 9 / 13;
 }
+
+.grid-1-7 {
+  grid-column: 1 / 7;
+}
+.grid-7-13 {
+  grid-column: 7 / 13;
+}
diff --git a/src/modes/indicator-status/BackfillTimeProfile.svelte b/src/modes/indicator-status/BackfillTimeProfile.svelte
index 94c4eef3e..460fca707 100644
--- a/src/modes/indicator-status/BackfillTimeProfile.svelte
+++ b/src/modes/indicator-status/BackfillTimeProfile.svelte
@@ -4,7 +4,7 @@
   import { DateParam } from '../../stores/params';
   import { currentRegionInfo, selectByInfo } from '../../stores';
   import DownloadMenu from '../../components/DownloadMenu.svelte';
-  import { generateHeatMapSpec } from './backfillSpec';
+  import { backFillWeekdayDistribution, generateHeatMapSpec } from './backfillSpec';
   import FancyHeader from '../../components/FancyHeader.svelte';
   import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
   import Search from '../../components/Search.svelte';
@@ -20,21 +20,16 @@
    */
   export let date;
 
-  export let referenceAnchorLag = 60;
-
   $: region = $currentRegionInfo || nationInfo;
 
   $: window = new DateParam(date).windowTimeFrame;
 
-  $: data = loadBackFillProfile(indicator, region, window, referenceAnchorLag);
-
-  let vegaRef = undefined;
-
   const dateOptions = [
     { label: 'Reported Date', value: 'date_value' },
     { label: 'Issue Date', value: 'issue_date' },
   ];
   let dateField = 'date_value';
+  $: dateLabel = dateOptions.find((d) => d.value == dateField).label;
 
   const valueOptions = [
     { label: 'Value Completeness', value: 'value_completeness' },
@@ -43,24 +38,46 @@
     { label: 'Relative Sample Size Change', value: 'sample_size_rel_change' },
   ];
   let valueField = 'value_completeness';
+  $: valueLabel = valueOptions.find((d) => d.value == valueField).label;
+
+  let anchorLagStr = '60';
+  const anchorLagOptions = [
+    { label: '60 days', value: '60' },
+    { label: '30 days', value: '30' },
+    { label: '7 days', value: '7' },
+  ];
+  $: anchorLag = Number.parseInt(anchorLagStr, 10);
 
   $: title = `${indicator.name} Backfill Profile`;
-  $: spec = generateHeatMapSpec(indicator, {
-    title,
+
+  let vegaRef = undefined;
+  $: spec = generateHeatMapSpec({
+    title: `${indicator.name} ${valueLabel} Profile`,
+    valueField,
+    valueLabel,
+    dateField,
+    dateLabel,
+  });
+  $: data = loadBackFillProfile(indicator, region, window, anchorLag);
+
+  $: weekdaySpec = backFillWeekdayDistribution({
+    title: `${indicator.name} ${valueLabel} per Lag by weekday`,
     valueField,
-    valueLabel: valueOptions.find((d) => d.value == valueField).label,
+    valueLabel,
     dateField,
-    dateLabel: dateOptions.find((d) => d.value == dateField).label,
+    dateLabel,
+    anchorLag,
   });
+  let vegaRefWeekday = undefined;
 </script>
 
 <div class="grid-3-11">
   <hr />
-  <FancyHeader invert sub="Backfill Profile">{indicator ? indicator.name : '?'}</FancyHeader>
+  <FancyHeader invert sub="Backfill Profile">{indicator.name}</FancyHeader>
 </div>
 <Search
   modern
-  className="grid-3-8"
+  className="grid-1-7"
   placeholder="Select a region"
   items={[nationInfo, ...stateInfo, ...countyInfo]}
   title="Region"
@@ -70,8 +87,11 @@
   maxItemsToShowInList="5"
   on:change={(e) => selectByInfo(e.detail && e.detail.level === 'nation' ? null : e.detail)}
 />
-<OptionPicker className="8-11" label="Color" bind:value={valueField} options={valueOptions} />
-<OptionPicker className="8-11" label="Date" bind:value={dateField} options={dateOptions} />
+<div class="grid-7-13">
+  <OptionPicker label="Color" bind:value={valueField} options={valueOptions} modern />
+  <OptionPicker label="Date" bind:value={dateField} options={dateOptions} modern />
+  <OptionPicker label="Anchor Lag" bind:value={anchorLagStr} options={anchorLagOptions} modern />
+</div>
 
 <div class="grid-3-11">
   <div class="chart-300">
@@ -79,3 +99,16 @@
     <DownloadMenu {vegaRef} {data} absolutePos fileName={title.replace(/\s+/gm, '_')} advanced={false} />
   </div>
 </div>
+
+<div class="grid-1-7">
+  <div class="chart-300">
+    <Vega bind:this={vegaRefWeekday} spec={weekdaySpec} {data} />
+    <DownloadMenu vegaRef={vegaRefWeekday} {data} absolutePos fileName={title.replace(/\s+/gm, '_')} advanced={false} />
+  </div>
+</div>
+<div class="grid-7-13">
+  <div class="chart-300">
+    <!-- <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
+    <DownloadMenu {vegaRef} {data} absolutePos fileName={title.replace(/\s+/gm, '_')} advanced={false} /> -->
+  </div>
+</div>
diff --git a/src/modes/indicator-status/IndicatorStatus.svelte b/src/modes/indicator-status/IndicatorStatus.svelte
index 01427e210..0a4f34686 100644
--- a/src/modes/indicator-status/IndicatorStatus.svelte
+++ b/src/modes/indicator-status/IndicatorStatus.svelte
@@ -73,4 +73,6 @@
   <IndicatorCountyMap {signal} date={pickedDate} {data} />
 </div> -->
 
-<BackfillTimeProfile indicator={signal} date={pickedDate} referenceAnchorLag={60} />
+{#if signal}
+  <BackfillTimeProfile indicator={signal} date={pickedDate} />
+{/if}
diff --git a/src/modes/indicator-status/backfillSpec.ts b/src/modes/indicator-status/backfillSpec.ts
index 6ec046e83..daef050de 100644
--- a/src/modes/indicator-status/backfillSpec.ts
+++ b/src/modes/indicator-status/backfillSpec.ts
@@ -1,31 +1,28 @@
 import type { TopLevelSpec } from 'vega-lite';
-import type { IndicatorStatus, ProfileEntry } from '../../data/indicatorInfo';
+import type { ProfileEntry } from '../../data/indicatorInfo';
 import { BASE_SPEC } from '../../specs/commonSpec';
 
-export function generateHeatMapSpec(
-  indicator: IndicatorStatus,
-  {
-    valueField = 'value_completeness',
-    valueLabel = 'Completeness',
-    dateField = 'issue_date',
-    dateLabel = 'Issue Date',
-    title = `${indicator.name} Backfill Issue Profile`,
-  }: {
-    valueField?: keyof Pick<
-      ProfileEntry,
-      'sample_size_completeness' | 'sample_size_rel_change' | 'value_completeness' | 'value_rel_change'
-    >;
-    valueLabel?: string;
-    dateField?: keyof Pick<ProfileEntry, 'issue_date' | 'date_value'>;
-    dateLabel?: string;
-    title?: string;
-  },
-): TopLevelSpec {
+export interface BackfillOptions {
+  valueField: keyof Pick<
+    ProfileEntry,
+    'sample_size_completeness' | 'sample_size_rel_change' | 'value_completeness' | 'value_rel_change'
+  >;
+  valueLabel: string;
+  dateField: keyof Pick<ProfileEntry, 'issue_date' | 'date_value'>;
+  dateLabel: string;
+  title: string;
+}
+
+export function generateHeatMapSpec({
+  valueField,
+  valueLabel,
+  dateField,
+  dateLabel,
+  title,
+}: BackfillOptions): TopLevelSpec {
   const spec: TopLevelSpec = {
     ...BASE_SPEC,
-    title: {
-      text: title,
-    },
+    title,
     padding: {
       left: 50,
       top: 30,
@@ -67,7 +64,6 @@ export function generateHeatMapSpec(
                 },
             legend: {
               title: valueLabel,
-              titleAlign: 'left',
               titleOrient: 'left',
               // gradientLength: 00,
             },
@@ -209,3 +205,145 @@ export function injectClassification(spec: TopLevelSpec): void {
 //   });
 //   return spec;
 // }
+
+export function backFillWeekdayDistribution({
+  dateField,
+  dateLabel,
+  title,
+  valueField,
+  valueLabel,
+  anchorLag,
+}: BackfillOptions & { anchorLag: number }): TopLevelSpec {
+  const isRelative = valueField.endsWith('rel_change');
+  const spec: TopLevelSpec = {
+    ...BASE_SPEC,
+    title,
+    padding: {
+      left: 80,
+      top: 30,
+      right: 110,
+      bottom: 40,
+    },
+    transform: [
+      {
+        calculate: `['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][day(datum.${dateField})]`,
+        as: 'weekday',
+      },
+      {
+        groupby: ['lag', 'weekday'],
+        aggregate: [
+          {
+            op: 'median',
+            field: valueField,
+            as: valueField,
+          },
+          {
+            op: 'ci0',
+            field: valueField,
+            as: `ci0`,
+          },
+          {
+            op: 'ci1',
+            field: valueField,
+            as: `ci1`,
+          },
+        ],
+      },
+    ],
+
+    layer: [
+      {
+        encoding: {
+          x: {
+            field: 'lag',
+            type: 'quantitative',
+            scale: {
+              zero: true,
+            },
+            axis: {
+              title: 'Lag',
+            },
+          },
+          y: {
+            field: valueField,
+            type: 'quantitative',
+            scale: isRelative
+              ? {
+                  domainMid: 0,
+                  nice: false,
+                  // scheme: valueField.endsWith('rel_change') ?  'viridis',
+                }
+              : {
+                  // domain: [0, 1],
+                  // clamp: true,
+                  nice: false,
+                  zero: false,
+                },
+            axis: {
+              title: valueLabel,
+            },
+          },
+          color: {
+            field: 'weekday',
+            type: 'nominal',
+            scale: {
+              domain: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+            },
+            legend: {
+              title: dateLabel,
+              // titleOrient: 'left',
+              // titleAnchor: 'middle',
+            },
+          },
+        },
+        layer: [
+          // {
+          //   mark: 'errorband',
+          //   encoding: {
+          //     y: {
+          //       field: 'ci1',
+          //       type: 'quantitative',
+          //     },
+          //     y2: { field: 'ci0' },
+          //   },
+          // },
+          {
+            mark: {
+              type: 'line',
+            },
+          },
+        ],
+      },
+      {
+        data: {
+          values: [{}],
+        },
+        layer: [
+          // {
+          //   mark: {
+          //     type: 'rule',
+          //     color: 'red',
+          //   },
+          //   encoding: {
+          //     y: {
+          //       datum: isRelative ? 0 : 0.9,
+          //     },
+          //   },
+          // },
+          {
+            mark: {
+              type: 'rule',
+              color: 'blue',
+            },
+            encoding: {
+              x: {
+                datum: anchorLag,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  };
+  return spec;
+}

From 8d1c29f1f7a4b5c805ab8e8a896805ff7abf393a Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Fri, 7 May 2021 14:42:42 -0400
Subject: [PATCH 15/31] feat: delete old component

---
 .../indicator-status/BackfillProfile.svelte   | 411 ------------------
 .../indicator-status/IndicatorStatus.svelte   |  16 +-
 2 files changed, 8 insertions(+), 419 deletions(-)
 delete mode 100644 src/modes/indicator-status/BackfillProfile.svelte

diff --git a/src/modes/indicator-status/BackfillProfile.svelte b/src/modes/indicator-status/BackfillProfile.svelte
deleted file mode 100644
index 177186962..000000000
--- a/src/modes/indicator-status/BackfillProfile.svelte
+++ /dev/null
@@ -1,411 +0,0 @@
-<script>
-  // import type { TopLevelSpec } from 'vega-lite';
-  // import type { NonNormalizedSpec, NormalizedSpec } from 'vega-lite/build/src/spec';
-  import Vega from '../../components/vega/Vega.svelte';
-  import { loadBackFillProfile } from '../../data/indicatorInfo';
-  // import type { IndicatorStatus } from ;
-  import { commonConfig } from '../../specs/commonSpec';
-  import { DateParam } from '../../stores/params';
-  import DownloadMenu from '../../components/DownloadMenu.svelte';
-
-  /**
-   * @type {import('../../data/indicatorInfo').IndicatorStatus}
-   */
-  export let indicator;
-  /**
-   * @type {Date}
-   */
-  export let date;
-
-  $: window = new DateParam(date).windowTimeFrame;
-
-  $: data = loadBackFillProfile(indicator, window);
-
-  function generateLayer(field, title, i, maxConfidence) {
-    /**
-     * @type {import('vega-lite/build/src/spec').NonNormalizedSpec}
-     */
-    const spec = {
-      width: 'container',
-      height: 300,
-      layer: [
-        {
-          mark: {
-            type: 'rect',
-            stroke: null,
-            width: {
-              expr: `width / customCountDays(domain('concat_${i}_x')[0], domain('concat_${i}_x')[1])`,
-            },
-            height: {
-              expr: `childHeight / (domain('concat_${i}_y')[1] - domain('concat_${i}_y')[0])`,
-            },
-            tooltip: {
-              content: 'data',
-            },
-          },
-          encoding: {
-            color: {
-              field: 'confidence',
-              type: 'quantitative',
-              scale: {
-                // type: 'pow',
-                // exponent: 0.1,
-                domainMax: maxConfidence,
-                nice: false,
-                scheme: 'viridis',
-              },
-              legend: {
-                // gradientLength: 00,
-              },
-            },
-          },
-        },
-      ],
-      encoding: {
-        x: {
-          field: field,
-          type: 'temporal',
-          axis: {
-            format: '%m/%d',
-            formatType: 'cachedTime',
-            labelOverlap: true,
-            labelExpr: `datum.label + ((week(datum.value) === 1 || datum.index === 0) ? '/' + year(datum.value) : '')`,
-            grid: true,
-            gridDash: [4, 4],
-            tickCount: 'week',
-            // tickWidth: {
-            //   condition: { test: { field: 'value', timeUnit: 'month', equal: 1 }, value: 3 },
-            //   value: 1,
-            // },
-            title: title,
-          },
-        },
-        y: {
-          field: 'lag',
-          type: 'quantitative',
-          scale: {
-            zero: true,
-          },
-          axis: {
-            title: 'Lag',
-          },
-        },
-      },
-    };
-    return spec;
-  }
-
-  function generateStreamLayer(field, title) {
-    /**
-     * @type {import('vega-lite/build/src/spec').NonNormalizedSpec}
-     */
-    const spec = {
-      width: 'container',
-      height: 300,
-      transform: [
-        {
-          filter: 'datum.completed != null',
-        },
-        {
-          impute: 'lag',
-          key: 'completed',
-          groupby: ['time_value', 'date_value'],
-          method: 'value',
-          value: null,
-        },
-        {
-          pivot: 'completed',
-          groupby: ['time_value', 'date_value'],
-          value: 'lag',
-        },
-      ],
-      layer: [
-        {
-          transform: [
-            {
-              calculate: `['p25-p50', 'p50-p75', 'p75-p90']`,
-              as: 'range',
-            },
-            {
-              calculate: `[datum.p25, datum.p50, datum.p75]`,
-              as: 'start',
-            },
-            {
-              calculate: `[datum.p50, datum.p75, datum.p90]`,
-              as: 'end',
-            },
-            {
-              flatten: ['range', 'start', 'end'],
-            },
-          ],
-          mark: {
-            type: 'area',
-            opacity: 0.5,
-            tooltip: {
-              content: 'data',
-            },
-          },
-          encoding: {
-            color: {
-              field: 'range',
-              type: 'nominal',
-              scale: {
-                scheme: 'blues',
-              },
-              legend: {
-                labelExpr: `{'p25-p50': '25% - 50%', 'p50-p75': '50% - 75%', 'p75-p90': '75% - 90%'}[datum.label]`,
-              },
-            },
-            y: {
-              field: 'end',
-              type: 'quantitative',
-              scale: {
-                zero: true,
-              },
-              axis: {
-                title: 'Lag',
-              },
-            },
-            y2: { field: 'start' },
-          },
-        },
-        {
-          mark: {
-            type: 'line',
-            tooltip: {
-              content: 'data',
-            },
-          },
-          encoding: {
-            y: {
-              field: 'p50',
-              type: 'quantitative',
-            },
-          },
-        },
-      ],
-      encoding: {
-        x: {
-          field: field,
-          type: 'temporal',
-          axis: {
-            format: '%m/%d',
-            formatType: 'cachedTime',
-            labelOverlap: true,
-            labelExpr: `datum.label + ((week(datum.value) === 1 || datum.index === 0) ? '/' + year(datum.value) : '')`,
-            grid: true,
-            gridDash: [4, 4],
-            tickCount: 'week',
-            // tickWidth: {
-            //   condition: { test: { field: 'value', timeUnit: 'month', equal: 1 }, value: 3 },
-            //   value: 1,
-            // },
-            title: title,
-          },
-        },
-      },
-    };
-    return spec;
-  }
-
-  function generateBoxPlotDayOfMonthLayer(field) {
-    /**
-     * @type {import('vega-lite/build/src/spec').NonNormalizedSpec}
-     */
-    const spec = {
-      width: 1000,
-      height: 200,
-      transform: [
-        {
-          filter: 'datum.completed != null',
-        },
-      ],
-      mark: {
-        type: 'boxplot',
-      },
-      encoding: {
-        row: {
-          field: 'completed',
-          type: 'nominal',
-          title: {
-            signal: `{'p25': '25%', 'p50': '50%', 'p75': '75%', 'p90': '90%'}[datum.label]`,
-          },
-          axis: {
-            title: 'Confidence Reached',
-          },
-        },
-        color: {
-          field: 'completed',
-          type: 'nominal',
-          legend: {
-            labelAngle: 0,
-            labelExpr: `{'p25': '25%', 'p50': '50%', 'p75': '75%', 'p90': '90%'}[datum.label]`,
-          },
-        },
-        x: {
-          field: field,
-          type: 'ordinal',
-          timeUnit: 'date',
-          axis: {
-            title: 'Reference Day of Month',
-            format: '%d',
-            labelAngle: 0,
-          },
-          spacing: 10,
-        },
-        y: {
-          // aggregate: 'max',
-          field: 'lag',
-          type: 'quantitative',
-        },
-      },
-    };
-    return spec;
-  }
-
-  function generateBoxPlotWeekdayLayer(field) {
-    /**
-     * @type {import('vega-lite/build/src/spec').NonNormalizedSpec}
-     */
-    const spec = {
-      width: 220,
-      height: 200,
-      transform: [
-        {
-          filter: 'datum.completed != null',
-        },
-      ],
-      mark: {
-        type: 'boxplot',
-      },
-      encoding: {
-        column: {
-          field: 'completed',
-          type: 'nominal',
-          title: {
-            signal: `{'p25': '25%', 'p50': '50%', 'p75': '75%', 'p90': '90%'}[datum.label]`,
-          },
-          axis: {
-            title: 'Confidence Reached',
-          },
-        },
-        color: {
-          field: 'completed',
-          type: 'nominal',
-          legend: {
-            labelAngle: 0,
-            labelExpr: `{'p25': '25%', 'p50': '50%', 'p75': '75%', 'p90': '90%'}[datum.label]`,
-          },
-        },
-        x: {
-          field: field,
-          type: 'ordinal',
-          timeUnit: 'day',
-          axis: {
-            title: 'Reference Weekday',
-            format: '%a',
-            labelAngle: 0,
-          },
-          spacing: 10,
-        },
-        y: {
-          // aggregate: 'max',
-          field: 'lag',
-          type: 'quantitative',
-        },
-      },
-    };
-    return spec;
-  }
-
-  function generateSpec(indicator, maxConfidence = 0.95) {
-    const cont = (v) => `(datum.confidence >= 0.${v} && datum.prevConfidence < 0.${v}) ? 'p${v}'`;
-    const confidenceClassifier = `${cont(90)} : (${cont(75)} : (${cont(50)} : (${cont(25)} : null)))`;
-
-    /**
-     * @type {import('vega-lite').TopLevelSpec}
-     */
-    const spec = {
-      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-      autosize: {
-        type: 'none',
-        contains: 'padding',
-        resize: true,
-      },
-      width: 100,
-      height: 100,
-      data: { name: 'values' },
-      config: commonConfig,
-      title: {
-        text: `${indicator.name} Backfill Profile`,
-        subtitle: `clamped to <= ${maxConfidence} confidence`,
-      },
-      padding: {
-        left: 50,
-        top: 100,
-        right: 100,
-        bottom: 70,
-      },
-      transform: [
-        {
-          window: [
-            {
-              op: 'lag',
-              field: 'confidence',
-              param: 1,
-              as: 'prevConfidence',
-            },
-          ],
-          groupby: ['time_value'],
-          sort: [
-            {
-              field: 'lag',
-              order: 'ascending',
-            },
-          ],
-        },
-        {
-          calculate: 'datum.prevConfidence != null ? datum.prevConfidence : 0',
-          as: 'prevConfidence',
-        },
-        {
-          // keep all < 0.95 and remove all besides the first one over 0.95
-          filter: `datum.confidence < ${maxConfidence} || datum.prevConfidence < ${maxConfidence}`,
-        },
-        {
-          calculate: confidenceClassifier,
-          as: 'completed',
-        },
-      ],
-      // resolve: {
-      //   axis: {
-      //     x: 'shared',
-      //     y: 'shared'
-      //   }
-      // },
-      vconcat: [
-        generateLayer('date_value', 'Reference Date', 0, maxConfidence),
-        generateStreamLayer('date_value', 'Reference Date'),
-        generateLayer('issue_date', 'Issue Date', 2, maxConfidence),
-        generateBoxPlotDayOfMonthLayer('date_value'),
-        generateBoxPlotWeekdayLayer('date_value'),
-      ],
-    };
-    return spec;
-  }
-
-  $: spec = generateSpec(indicator);
-
-  let vegaRef = undefined;
-</script>
-
-<div class="chart-300">
-  <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
-  <DownloadMenu {vegaRef} absolutePos fileName="{indicator.name}_Backfill_profile" advanced={false} />
-</div>
-
-<style>
-  .chart-300 > :global(.vega-embed) {
-    height: 1200px;
-  }
-</style>
diff --git a/src/modes/indicator-status/IndicatorStatus.svelte b/src/modes/indicator-status/IndicatorStatus.svelte
index 0a4f34686..4faacfe57 100644
--- a/src/modes/indicator-status/IndicatorStatus.svelte
+++ b/src/modes/indicator-status/IndicatorStatus.svelte
@@ -1,11 +1,11 @@
 <script>
   import { formatDateISO } from '../../formats';
   import KPI from '../../components/KPI.svelte';
-  // import IndicatorCountyMap from './IndicatorCountyMap.svelte';
+  import IndicatorCountyMap from './IndicatorCountyMap.svelte';
   import FancyHeader from '../../components/FancyHeader.svelte';
-  // import { getAvailableCounties } from '../../data/indicatorInfo';
+  import { getAvailableCounties } from '../../data/indicatorInfo';
   import KPIValue from '../../components/KPIValue.svelte';
-  // import IndicatorCoverageChart from './IndicatorCoverageChart.svelte';
+  import IndicatorCoverageChart from './IndicatorCoverageChart.svelte';
   import BackfillTimeProfile from './BackfillTimeProfile.svelte';
 
   /**
@@ -22,7 +22,7 @@
 
   $: pickedDate = signal.latest_time_value;
 
-  // $: data = getAvailableCounties(signal, pickedDate);
+  $: data = getAvailableCounties(signal, pickedDate);
 </script>
 
 <div class="grid-3-11 uk-margin-top">
@@ -55,7 +55,7 @@
 
   <hr />
   <FancyHeader invert sub="County Coverage">{signal ? signal.name : '?'}</FancyHeader>
-  <!-- <IndicatorCoverageChart
+  <IndicatorCoverageChart
     {signal}
     {domain}
     on:highlight={(e) => {
@@ -64,14 +64,14 @@
         pickedDate = nextDate;
       }
     }}
-  /> -->
+  />
 
   <hr />
   <FancyHeader invert sub="Map ({formatDateISO(pickedDate)})">{signal ? signal.name : '?'}</FancyHeader>
 </div>
-<!-- <div class="grid-2-12">
+<div class="grid-2-12">
   <IndicatorCountyMap {signal} date={pickedDate} {data} />
-</div> -->
+</div>
 
 {#if signal}
   <BackfillTimeProfile indicator={signal} date={pickedDate} />

From 505b84e36f0223c7622a510d7383ff308cb09023 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Fri, 7 May 2021 14:47:26 -0400
Subject: [PATCH 16/31] style: show more indicators in dropdown

---
 src/modes/indicator-status/IndicatorStatusOverview.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modes/indicator-status/IndicatorStatusOverview.svelte b/src/modes/indicator-status/IndicatorStatusOverview.svelte
index d26f89f53..5253c4220 100644
--- a/src/modes/indicator-status/IndicatorStatusOverview.svelte
+++ b/src/modes/indicator-status/IndicatorStatusOverview.svelte
@@ -76,7 +76,7 @@
         icon="search"
         selectedItem={selected}
         labelFieldName="name"
-        maxItemsToShowInList="5"
+        maxItemsToShowInList="15"
         clear={false}
         on:change={(e) => {
           const newIndicator = e.detail ? loadedData.find((d) => d.name === e.detail.name) : null;

From d005e84b62bbb985a29ffc6f56f6447447d1c838 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Mon, 10 May 2021 11:00:10 -0400
Subject: [PATCH 17/31] refactor: move backfill to own tab

---
 src/global.css                                | 67 +++++++++++++++++++
 ...rofile.svelte => IndicatorBackfill.svelte} | 41 ++++++------
 .../indicator-status/IndicatorStatus.svelte   |  7 --
 .../IndicatorStatusOverview.svelte            | 61 +++++++++++++----
 4 files changed, 133 insertions(+), 43 deletions(-)
 rename src/modes/indicator-status/{BackfillTimeProfile.svelte => IndicatorBackfill.svelte} (81%)

diff --git a/src/global.css b/src/global.css
index 9143f00b3..c5000d3f8 100644
--- a/src/global.css
+++ b/src/global.css
@@ -67,3 +67,70 @@
 .grid-7-13 {
   grid-column: 7 / 13;
 }
+
+.grid-1 {
+  grid-column-start: 1;
+}
+.grid-2 {
+  grid-column-start: 2;
+}
+.grid-3 {
+  grid-column-start: 3;
+}
+.grid-4 {
+  grid-column-start: 4;
+}
+.grid-5 {
+  grid-column-start: 5;
+}
+.grid-6 {
+  grid-column-start: 6;
+}
+.grid-7 {
+  grid-column-start: 7;
+}
+.grid-8 {
+  grid-column-start: 8;
+}
+.grid-9 {
+  grid-column-start: 9;
+}
+.grid-10 {
+  grid-column-start: 10;
+}
+.grid-11 {
+  grid-column-start: 11;
+}
+.grid-12 {
+  grid-column-start: 12;
+}
+.grid-13 {
+  grid-column-start: 13;
+}
+.grid-span-1 {
+  grid-column-end: span 1;
+}
+.grid-span-2 {
+  grid-column-end: span 2;
+}
+.grid-span-3 {
+  grid-column-end: span 3;
+}
+.grid-span-4 {
+  grid-column-end: span 4;
+}
+.grid-span-5 {
+  grid-column-end: span 5;
+}
+.grid-span-6 {
+  grid-column-end: span 6;
+}
+.grid-span-7 {
+  grid-column-end: span 7;
+}
+.grid-span-8 {
+  grid-column-end: span 8;
+}
+.grid-span-9 {
+  grid-column-end: span 9;
+}
diff --git a/src/modes/indicator-status/BackfillTimeProfile.svelte b/src/modes/indicator-status/IndicatorBackfill.svelte
similarity index 81%
rename from src/modes/indicator-status/BackfillTimeProfile.svelte
rename to src/modes/indicator-status/IndicatorBackfill.svelte
index 460fca707..a99062607 100644
--- a/src/modes/indicator-status/BackfillTimeProfile.svelte
+++ b/src/modes/indicator-status/IndicatorBackfill.svelte
@@ -1,28 +1,25 @@
 <script>
+  import FancyHeader from '../../components/FancyHeader.svelte';
   import Vega from '../../components/vega/Vega.svelte';
   import { loadBackFillProfile } from '../../data/indicatorInfo';
-  import { DateParam } from '../../stores/params';
+  import { TimeFrame, WINDOW_SIZE } from '../../stores/params';
   import { currentRegionInfo, selectByInfo } from '../../stores';
   import DownloadMenu from '../../components/DownloadMenu.svelte';
   import { backFillWeekdayDistribution, generateHeatMapSpec } from './backfillSpec';
-  import FancyHeader from '../../components/FancyHeader.svelte';
   import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
   import Search from '../../components/Search.svelte';
   import OptionPicker from '../../components/OptionPicker.svelte';
+  import { timeMonth } from 'd3-time';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
    */
   export let indicator;
 
-  /**
-   * @type {Date}
-   */
-  export let date;
-
   $: region = $currentRegionInfo || nationInfo;
 
-  $: window = new DateParam(date).windowTimeFrame;
+  $: date = indicator ? indicator.latest_time_value : new Date();
+  $: window = new TimeFrame(timeMonth.offset(date, WINDOW_SIZE), date);
 
   const dateOptions = [
     { label: 'Reported Date', value: 'date_value' },
@@ -71,13 +68,9 @@
   let vegaRefWeekday = undefined;
 </script>
 
-<div class="grid-3-11">
-  <hr />
-  <FancyHeader invert sub="Backfill Profile">{indicator.name}</FancyHeader>
-</div>
 <Search
   modern
-  className="grid-1-7"
+  className="grid-3 grid-span-8"
   placeholder="Select a region"
   items={[nationInfo, ...stateInfo, ...countyInfo]}
   title="Region"
@@ -87,26 +80,30 @@
   maxItemsToShowInList="5"
   on:change={(e) => selectByInfo(e.detail && e.detail.level === 'nation' ? null : e.detail)}
 />
-<div class="grid-7-13">
-  <OptionPicker label="Color" bind:value={valueField} options={valueOptions} modern />
-  <OptionPicker label="Date" bind:value={dateField} options={dateOptions} modern />
-  <OptionPicker label="Anchor Lag" bind:value={anchorLagStr} options={anchorLagOptions} modern />
-</div>
+<OptionPicker className="grid-3 grid-span-4" label="Color" bind:value={valueField} options={valueOptions} modern />
+<OptionPicker className="grid-7 grid-span-2" label="Date" bind:value={dateField} options={dateOptions} modern />
+<OptionPicker
+  className="grid-9 grid-span-2"
+  label="Anchor Lag"
+  bind:value={anchorLagStr}
+  options={anchorLagOptions}
+  modern
+/>
 
-<div class="grid-3-11">
+<div class="grid-3 grid-span-8">
+  <FancyHeader invert sub="Backfill Profile">{indicator.name}</FancyHeader>
   <div class="chart-300">
     <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
     <DownloadMenu {vegaRef} {data} absolutePos fileName={title.replace(/\s+/gm, '_')} advanced={false} />
   </div>
 </div>
-
-<div class="grid-1-7">
+<div class="grid-3 grid-span-4">
   <div class="chart-300">
     <Vega bind:this={vegaRefWeekday} spec={weekdaySpec} {data} />
     <DownloadMenu vegaRef={vegaRefWeekday} {data} absolutePos fileName={title.replace(/\s+/gm, '_')} advanced={false} />
   </div>
 </div>
-<div class="grid-7-13">
+<div class="grid-7 grid-span-4">
   <div class="chart-300">
     <!-- <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
     <DownloadMenu {vegaRef} {data} absolutePos fileName={title.replace(/\s+/gm, '_')} advanced={false} /> -->
diff --git a/src/modes/indicator-status/IndicatorStatus.svelte b/src/modes/indicator-status/IndicatorStatus.svelte
index 4faacfe57..75a5d5f5f 100644
--- a/src/modes/indicator-status/IndicatorStatus.svelte
+++ b/src/modes/indicator-status/IndicatorStatus.svelte
@@ -6,7 +6,6 @@
   import { getAvailableCounties } from '../../data/indicatorInfo';
   import KPIValue from '../../components/KPIValue.svelte';
   import IndicatorCoverageChart from './IndicatorCoverageChart.svelte';
-  import BackfillTimeProfile from './BackfillTimeProfile.svelte';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
@@ -18,8 +17,6 @@
    */
   export let domain;
 
-  console.log(domain);
-
   $: pickedDate = signal.latest_time_value;
 
   $: data = getAvailableCounties(signal, pickedDate);
@@ -72,7 +69,3 @@
 <div class="grid-2-12">
   <IndicatorCountyMap {signal} date={pickedDate} {data} />
 </div>
-
-{#if signal}
-  <BackfillTimeProfile indicator={signal} date={pickedDate} />
-{/if}
diff --git a/src/modes/indicator-status/IndicatorStatusOverview.svelte b/src/modes/indicator-status/IndicatorStatusOverview.svelte
index 5253c4220..b8e196735 100644
--- a/src/modes/indicator-status/IndicatorStatusOverview.svelte
+++ b/src/modes/indicator-status/IndicatorStatusOverview.svelte
@@ -4,6 +4,7 @@
   import { loadData, determineDomain } from './data';
   import Search from '../../components/Search.svelte';
   import { updateHash } from '../../stores/urlHandler';
+  import IndicatorBackfill from './IndicatorBackfill.svelte';
 
   const date = new Date();
 
@@ -19,8 +20,11 @@
   let loadedData = [];
 
   function resolveDefaultStatus(rows) {
-    const id = window.location.hash.slice(1); // remove #
-    return id ? rows.find((d) => d.id === id) : null;
+    const fullId = window.location.hash.slice(1); // remove #
+    const targetMode = fullId.endsWith('_b') ? 'backfill' : 'coverage';
+    const id = fullId.endsWith('_b') ? fullId.slice(0, -2) : fullId;
+    const found = rows.find((d) => d.id === id);
+    return { selected: found, mode: found ? targetMode : 'overview' };
   }
 
   /**
@@ -28,11 +32,18 @@
    */
   let selected = null;
 
+  /**
+   * @type {'overview' | 'coverage' | 'backfill'}
+   */
+  let mode = 'overview';
+
   $: {
     loadedData = [];
     domain = determineDomain([]);
     data.then((rows) => {
-      selected = resolveDefaultStatus(rows);
+      const r = resolveDefaultStatus(rows);
+      selected = r.selected;
+      mode = r.mode;
       loadedData = rows;
       domain = determineDomain(rows);
     });
@@ -40,11 +51,17 @@
 
   function switchToDetails(e) {
     selected = e.detail;
+    mode = 'coverage';
+  }
+
+  function switchMode(m, s) {
+    mode = m;
+    selected = s;
   }
 
   $: {
     if (loadedData.length > 0) {
-      updateHash(selected ? selected.id : '');
+      updateHash(selected ? `${selected.id}${mode == 'backfill' ? '_b' : ''}` : '');
     }
   }
 </script>
@@ -58,15 +75,28 @@
   <div class="uk-container content-grid">
     <div class="grid-3-11">
       <ul class="uk-tab uk-child-width-expand">
-        <li class:uk-active={selected == null}>
-          <a href="#overview" on:click|preventDefault={() => (selected = null)}>Overview</a>
+        <li class:uk-active={mode === 'overview'}>
+          <a href="#overview" on:click|preventDefault={() => switchMode('overview', null)}>Overview</a>
+        </li>
+        <li class:uk-active={mode === 'coverage'}>
+          <a
+            href="#{(loadedData[0] || { id: 'details' }).id}"
+            on:click|preventDefault={() => switchMode('coverage', loadedData[0])}>Coverage Details</a
+          >
         </li>
-        <li class:uk-active={selected != null}>
-          <a href="#details" on:click|preventDefault={() => (selected = loadedData[0])}>Single Indicator</a>
+        <li class:uk-active={mode === 'backfill'}>
+          <a
+            href="#{(loadedData[0] || { id: 'details' }).id}_b"
+            on:click|preventDefault={() => switchMode('backfill', loadedData[0])}>Backfill Profile</a
+          >
         </li>
       </ul>
     </div>
-    {#if selected}
+    {#if mode === 'overview'}
+      <div class="grid-3-11">
+        <IndicatorStatusTable {data} {date} on:select={switchToDetails} {domain} />
+      </div>
+    {:else}
       <Search
         className="grid-3-11"
         modern
@@ -82,14 +112,17 @@
           const newIndicator = e.detail ? loadedData.find((d) => d.name === e.detail.name) : null;
           if (newIndicator !== selected) {
             selected = newIndicator;
+            if (!selected) {
+              mode = 'overview';
+            }
           }
         }}
       />
-      <IndicatorStatus {domain} signal={selected} />
-    {:else}
-      <div class="grid-3-11">
-        <IndicatorStatusTable {data} {date} on:select={switchToDetails} {domain} />
-      </div>
+      {#if mode === 'coverage'}
+        <IndicatorStatus {domain} signal={selected} />
+      {:else}
+        <IndicatorBackfill {domain} indicator={selected} />
+      {/if}
     {/if}
   </div>
 </div>

From 126b6037fe3f485aae419262df27cbbe78b0c2c8 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Mon, 10 May 2021 11:59:31 -0400
Subject: [PATCH 18/31] feat: add boxplot chart + cleanup ui

---
 src/components/OptionPicker.svelte            |  58 ++++++-
 src/global.css                                |   9 +
 .../indicator-status/IndicatorBackfill.svelte |  94 +++++++---
 .../IndicatorStatusOverview.svelte            |   2 +-
 src/modes/indicator-status/backfillSpec.ts    | 160 +++++++++++++-----
 src/specs/commonSpec.ts                       |   3 +
 6 files changed, 252 insertions(+), 74 deletions(-)

diff --git a/src/components/OptionPicker.svelte b/src/components/OptionPicker.svelte
index 569e1c0ee..0ac02a367 100644
--- a/src/components/OptionPicker.svelte
+++ b/src/components/OptionPicker.svelte
@@ -11,21 +11,63 @@
    */
   export let options = [];
 
+  /**
+   * @type {'select' | 'text' | 'number' | 'date'}
+   */
+  export let type = 'select';
+
   export let className = '';
   export let style = undefined;
 
   export let modern = false;
+
+  export let step = undefined;
+  export let min = undefined;
+  export let max = undefined;
+  export let placeholder = undefined;
 </script>
 
 <div class="option-picker {className}" {style}>
   <span class="option-picker-label">{label}</span>
-  <select {name} class="option-picker-input" class:modern bind:value on:blur {required}>
-    <slot>
-      {#each options as option}
-        <option value={option.value}>{option.label}</option>
-      {/each}
-    </slot>
-  </select>
+  {#if type === 'select'}
+    <select {name} class="option-picker-input" class:modern bind:value on:blur {required}>
+      <slot>
+        {#each options as option}
+          <option value={option.value}>{option.label}</option>
+        {/each}
+      </slot>
+    </select>
+  {:else if type === 'text'}
+    <input {name} class="option-picker-input" class:modern bind:value on:change {required} {placeholder} />
+  {:else if type === 'number'}
+    <input
+      type="number"
+      {name}
+      class="option-picker-input"
+      class:modern
+      bind:value
+      on:change
+      {required}
+      {step}
+      {min}
+      {max}
+      {placeholder}
+    />
+  {:else if type === 'date'}
+    <input
+      type="date"
+      {name}
+      class="option-picker-input"
+      class:modern
+      bind:value
+      on:change
+      {required}
+      {step}
+      {min}
+      {max}
+      {placeholder}
+    />
+  {/if}
 </div>
 
 <style>
@@ -37,6 +79,7 @@
 
   .option-picker-input {
     display: block;
+    width: 100%;
     padding: 8px 0px 8px 6px;
     border: 1px solid #d3d4d8;
     background: white;
@@ -44,6 +87,7 @@
     line-height: 1rem;
     border-radius: 4px;
     color: inherit;
+    box-sizing: border-box;
   }
 
   .option-picker-input.modern {
diff --git a/src/global.css b/src/global.css
index c5000d3f8..67f2ac022 100644
--- a/src/global.css
+++ b/src/global.css
@@ -134,3 +134,12 @@
 .grid-span-9 {
   grid-column-end: span 9;
 }
+.grid-span-10 {
+  grid-column-end: span 10;
+}
+.grid-span-11 {
+  grid-column-end: span 11;
+}
+.grid-span-12 {
+  grid-column-end: span 12;
+}
diff --git a/src/modes/indicator-status/IndicatorBackfill.svelte b/src/modes/indicator-status/IndicatorBackfill.svelte
index a99062607..36bd20cd3 100644
--- a/src/modes/indicator-status/IndicatorBackfill.svelte
+++ b/src/modes/indicator-status/IndicatorBackfill.svelte
@@ -5,7 +5,7 @@
   import { TimeFrame, WINDOW_SIZE } from '../../stores/params';
   import { currentRegionInfo, selectByInfo } from '../../stores';
   import DownloadMenu from '../../components/DownloadMenu.svelte';
-  import { backFillWeekdayDistribution, generateHeatMapSpec } from './backfillSpec';
+  import { backFillWeekdayDistribution, generateHeatMapSpec, backFillWeekdayFrequency } from './backfillSpec';
   import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
   import Search from '../../components/Search.svelte';
   import OptionPicker from '../../components/OptionPicker.svelte';
@@ -19,7 +19,7 @@
   $: region = $currentRegionInfo || nationInfo;
 
   $: date = indicator ? indicator.latest_time_value : new Date();
-  $: window = new TimeFrame(timeMonth.offset(date, WINDOW_SIZE), date);
+  $: window = new TimeFrame(timeMonth.offset(date, -WINDOW_SIZE), date);
 
   const dateOptions = [
     { label: 'Reported Date', value: 'date_value' },
@@ -38,18 +38,13 @@
   $: valueLabel = valueOptions.find((d) => d.value == valueField).label;
 
   let anchorLagStr = '60';
-  const anchorLagOptions = [
-    { label: '60 days', value: '60' },
-    { label: '30 days', value: '30' },
-    { label: '7 days', value: '7' },
-  ];
   $: anchorLag = Number.parseInt(anchorLagStr, 10);
 
   $: title = `${indicator.name} Backfill Profile`;
 
   let vegaRef = undefined;
   $: spec = generateHeatMapSpec({
-    title: `${indicator.name} ${valueLabel} Profile`,
+    title: `${indicator.name}: ${valueLabel} Profile`,
     valueField,
     valueLabel,
     dateField,
@@ -57,8 +52,10 @@
   });
   $: data = loadBackFillProfile(indicator, region, window, anchorLag);
 
+  $: isRelative = valueField.endsWith('_rel_change');
+
   $: weekdaySpec = backFillWeekdayDistribution({
-    title: `${indicator.name} ${valueLabel} per Lag by weekday`,
+    title: `${indicator.name}: ${valueLabel}`,
     valueField,
     valueLabel,
     dateField,
@@ -66,11 +63,21 @@
     anchorLag,
   });
   let vegaRefWeekday = undefined;
+
+  $: weekdayBoxplotSpec = backFillWeekdayFrequency({
+    title: `${indicator.name}: ${valueLabel}`,
+    valueField,
+    dateField,
+    dateLabel,
+    anchorLag,
+    completeness: 0.9,
+  });
+  let vegaRefBoxplot = undefined;
 </script>
 
 <Search
   modern
-  className="grid-3 grid-span-8"
+  className="grid-3 grid-span-8 uk-margin-top"
   placeholder="Select a region"
   items={[nationInfo, ...stateInfo, ...countyInfo]}
   title="Region"
@@ -80,32 +87,67 @@
   maxItemsToShowInList="5"
   on:change={(e) => selectByInfo(e.detail && e.detail.level === 'nation' ? null : e.detail)}
 />
-<OptionPicker className="grid-3 grid-span-4" label="Color" bind:value={valueField} options={valueOptions} modern />
-<OptionPicker className="grid-7 grid-span-2" label="Date" bind:value={dateField} options={dateOptions} modern />
 <OptionPicker
-  className="grid-9 grid-span-2"
-  label="Anchor Lag"
-  bind:value={anchorLagStr}
-  options={anchorLagOptions}
+  className="grid-3 grid-span-4 uk-margin-top"
+  label="Color"
+  bind:value={valueField}
+  options={valueOptions}
+  modern
+/>
+<OptionPicker
+  className="grid-7 grid-span-2 uk-margin-top"
+  label="Date"
+  bind:value={dateField}
+  options={dateOptions}
+  modern
+/>
+<OptionPicker
+  className="grid-9 grid-span-2 uk-margin-top"
+  type="number"
+  label="Anchor Lag (days)"
+  bind:value={anchorLag}
+  min={1}
+  max={60}
+  step={10}
   modern
 />
 
-<div class="grid-3 grid-span-8">
+<div class="grid-1 grid-span-12">
   <FancyHeader invert sub="Backfill Profile">{indicator.name}</FancyHeader>
   <div class="chart-300">
-    <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
-    <DownloadMenu {vegaRef} {data} absolutePos fileName={title.replace(/\s+/gm, '_')} advanced={false} />
+    <Vega bind:this={vegaRef} {spec} {data} />
+    <DownloadMenu
+      {vegaRef}
+      {data}
+      absolutePos="bottom: -20px"
+      fileName={title.replace(/\s+/gm, '_')}
+      advanced={false}
+    />
   </div>
 </div>
-<div class="grid-3 grid-span-4">
+<div class="grid-1 {isRelative ? 'grid-span-12' : 'grid-span-6'} uk-margin-top">
   <div class="chart-300">
     <Vega bind:this={vegaRefWeekday} spec={weekdaySpec} {data} />
-    <DownloadMenu vegaRef={vegaRefWeekday} {data} absolutePos fileName={title.replace(/\s+/gm, '_')} advanced={false} />
+    <DownloadMenu
+      vegaRef={vegaRefWeekday}
+      {data}
+      absolutePos="bottom: -20px"
+      fileName={title.replace(/\s+/gm, '_')}
+      advanced={false}
+    />
   </div>
 </div>
-<div class="grid-7 grid-span-4">
-  <div class="chart-300">
-    <!-- <Vega bind:this={vegaRef} {spec} {data} className="chart-breakout" />
-    <DownloadMenu {vegaRef} {data} absolutePos fileName={title.replace(/\s+/gm, '_')} advanced={false} /> -->
+{#if !isRelative}
+  <div class="grid-7 grid-span-6 uk-margin-top">
+    <div class="chart-300">
+      <Vega bind:this={vegaRefBoxplot} spec={weekdayBoxplotSpec} {data} />
+      <DownloadMenu
+        vegaRef={vegaRefBoxplot}
+        {data}
+        absolutePos="bottom: -20px"
+        fileName={title.replace(/\s+/gm, '_')}
+        advanced={false}
+      />
+    </div>
   </div>
-</div>
+{/if}
diff --git a/src/modes/indicator-status/IndicatorStatusOverview.svelte b/src/modes/indicator-status/IndicatorStatusOverview.svelte
index b8e196735..88043e576 100644
--- a/src/modes/indicator-status/IndicatorStatusOverview.svelte
+++ b/src/modes/indicator-status/IndicatorStatusOverview.svelte
@@ -120,7 +120,7 @@
       />
       {#if mode === 'coverage'}
         <IndicatorStatus {domain} signal={selected} />
-      {:else}
+      {:else if selected}
         <IndicatorBackfill {domain} indicator={selected} />
       {/if}
     {/if}
diff --git a/src/modes/indicator-status/backfillSpec.ts b/src/modes/indicator-status/backfillSpec.ts
index daef050de..ff621c18b 100644
--- a/src/modes/indicator-status/backfillSpec.ts
+++ b/src/modes/indicator-status/backfillSpec.ts
@@ -1,5 +1,6 @@
 import type { TopLevelSpec } from 'vega-lite';
 import type { ProfileEntry } from '../../data/indicatorInfo';
+import { formatFraction } from '../../formats';
 import { BASE_SPEC } from '../../specs/commonSpec';
 
 export interface BackfillOptions {
@@ -22,11 +23,14 @@ export function generateHeatMapSpec({
 }: BackfillOptions): TopLevelSpec {
   const spec: TopLevelSpec = {
     ...BASE_SPEC,
-    title,
+    title: {
+      text: title,
+      subtitle: `${valueLabel} per Lag and ${dateLabel}`,
+    },
     padding: {
-      left: 50,
-      top: 30,
-      right: 100,
+      left: 65,
+      top: 50,
+      right: 80,
       bottom: 40,
     },
     layer: [
@@ -175,52 +179,23 @@ export function injectClassification(spec: TopLevelSpec): void {
   ];
 }
 
-// export function generateReportedDateSpec(indicator: IndicatorStatus): TopLevelSpec {
-//   const spec = generateHeatMapSpec(indicator, {
-//     xField: 'date_value',
-//     xLabel: 'Reported Date',
-//     title: `${indicator.name} Backfill Profile`,
-//   });
-//   // spec.layer.push({
-//   //   transform: [
-//   //     {
-//   //       filter: `datum.completed == 'p90'`,
-//   //     },
-//   //   ],
-//   //   mark: {
-//   //     type: 'line',
-//   //     stroke: 'red',
-//   //   },
-//   // });
-//   return spec;
-// }
-
-// export function generateReportedDateDeltaSpec(indicator: IndicatorStatus): TopLevelSpec {
-//   const spec = generateHeatMapSpec(indicator, {
-//     valueField: 'value_rel_change',
-//     valueLabel: 'Relative Change',
-//     xField: 'date_value',
-//     xLabel: 'Reported Date',
-//     title: `${indicator.name} Backfill Relative Change Profile`,
-//   });
-//   return spec;
-// }
-
 export function backFillWeekdayDistribution({
   dateField,
   dateLabel,
   title,
   valueField,
-  valueLabel,
   anchorLag,
 }: BackfillOptions & { anchorLag: number }): TopLevelSpec {
   const isRelative = valueField.endsWith('rel_change');
   const spec: TopLevelSpec = {
     ...BASE_SPEC,
-    title,
+    title: {
+      text: title,
+      subtitle: `per Lag per weekday`,
+    },
     padding: {
-      left: 80,
-      top: 30,
+      left: 65,
+      top: 45,
       right: 110,
       bottom: 40,
     },
@@ -280,7 +255,7 @@ export function backFillWeekdayDistribution({
                   zero: false,
                 },
             axis: {
-              title: valueLabel,
+              title: null,
             },
           },
           color: {
@@ -347,3 +322,108 @@ export function backFillWeekdayDistribution({
   };
   return spec;
 }
+
+export function backFillWeekdayFrequency({
+  dateField,
+  dateLabel,
+  title,
+  valueField,
+  anchorLag,
+  completeness,
+}: BackfillOptions & { anchorLag: number; completeness: number }): TopLevelSpec {
+  const spec: TopLevelSpec = {
+    ...BASE_SPEC,
+    title: {
+      text: title,
+      subtitle: `Lag to reach ${formatFraction(completeness)} completeness`,
+    },
+    padding: {
+      left: 40,
+      top: 45,
+      right: 10,
+      bottom: 40,
+    },
+    transform: [
+      {
+        window: [
+          {
+            op: 'lag',
+            field: valueField,
+            param: 1,
+            as: 'prevCompleteness',
+          },
+        ],
+        groupby: ['time_value'],
+        sort: [
+          {
+            field: 'lag',
+            order: 'ascending',
+          },
+        ],
+      },
+      {
+        calculate: 'datum.prevCompleteness != null ? datum.prevCompleteness : 0',
+        as: 'prevCompleteness',
+      },
+      {
+        calculate: `(datum.${valueField} >= ${completeness} && (datum.prevCompleteness == null || datum.prevCompleteness < ${completeness}))`,
+        as: 'completed',
+      },
+      {
+        filter: 'datum.completed',
+      },
+      {
+        calculate: `['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][day(datum.${dateField})]`,
+        as: 'weekday',
+      },
+    ],
+
+    layer: [
+      {
+        encoding: {
+          x: {
+            field: 'weekday',
+            type: 'nominal',
+            scale: {
+              type: 'band',
+              domain: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+            },
+            axis: {
+              title: dateLabel,
+              labelAngle: 0,
+            },
+          },
+          y: {
+            field: 'lag',
+            type: 'quantitative',
+            axis: {
+              title: null,
+            },
+          },
+        },
+        mark: {
+          type: 'boxplot',
+        },
+      },
+      {
+        data: {
+          values: [{}],
+        },
+        layer: [
+          {
+            mark: {
+              type: 'rule',
+              color: 'blue',
+            },
+            encoding: {
+              y: {
+                datum: anchorLag,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  };
+  return spec;
+}
diff --git a/src/specs/commonSpec.ts b/src/specs/commonSpec.ts
index dc68a6feb..d523a6919 100644
--- a/src/specs/commonSpec.ts
+++ b/src/specs/commonSpec.ts
@@ -14,6 +14,9 @@ export const commonConfig: Config = {
     labelFontSize: 14,
     titleFontWeight: 'normal',
   },
+  legend: {
+    titleFontWeight: 'normal',
+  },
   view: {
     stroke: null,
   },

From 22772a572b0627a5e0df4468972ecc594d6a4a3d Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Mon, 10 May 2021 14:44:45 -0400
Subject: [PATCH 19/31] style: small style changes

---
 src/components/OptionPicker.svelte                     | 10 +++++++---
 .../indicator-status/IndicatorStatusOverview.svelte    |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/OptionPicker.svelte b/src/components/OptionPicker.svelte
index 0ac02a367..59538067d 100644
--- a/src/components/OptionPicker.svelte
+++ b/src/components/OptionPicker.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <div class="option-picker {className}" {style}>
-  <span class="option-picker-label">{label}</span>
+  <span class="option-picker-label" class:modern>{label}</span>
   {#if type === 'select'}
     <select {name} class="option-picker-input" class:modern bind:value on:blur {required}>
       <slot>
@@ -86,12 +86,13 @@
     font-size: 0.875rem;
     line-height: 1rem;
     border-radius: 4px;
-    color: inherit;
     box-sizing: border-box;
+    font-weight: 400;
+    color: #666;
   }
 
   .option-picker-input.modern {
-    padding: 10px 0 10px 6px;
+    padding: 10px 6px;
     font-size: 0.75rem;
     height: 50px;
   }
@@ -109,4 +110,7 @@
     background: white;
     line-height: 1;
   }
+  .option-picker-label.modern {
+    left: 24px;
+  }
 </style>
diff --git a/src/modes/indicator-status/IndicatorStatusOverview.svelte b/src/modes/indicator-status/IndicatorStatusOverview.svelte
index 88043e576..0a87032c9 100644
--- a/src/modes/indicator-status/IndicatorStatusOverview.svelte
+++ b/src/modes/indicator-status/IndicatorStatusOverview.svelte
@@ -121,7 +121,7 @@
       {#if mode === 'coverage'}
         <IndicatorStatus {domain} signal={selected} />
       {:else if selected}
-        <IndicatorBackfill {domain} indicator={selected} />
+        <IndicatorBackfill indicator={selected} />
       {/if}
     {/if}
   </div>

From 7d99d3072c75ff9f4fbc3195ce6b69908f98fa47 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Mon, 17 May 2021 08:25:35 -0400
Subject: [PATCH 20/31] refactor: move to store for persistence

---
 .../indicator-status/IndicatorBackfill.svelte | 84 ++++++++-----------
 src/modes/indicator-status/store.ts           | 27 ++++++
 2 files changed, 61 insertions(+), 50 deletions(-)
 create mode 100644 src/modes/indicator-status/store.ts

diff --git a/src/modes/indicator-status/IndicatorBackfill.svelte b/src/modes/indicator-status/IndicatorBackfill.svelte
index 36bd20cd3..a47adbe8f 100644
--- a/src/modes/indicator-status/IndicatorBackfill.svelte
+++ b/src/modes/indicator-status/IndicatorBackfill.svelte
@@ -3,7 +3,18 @@
   import Vega from '../../components/vega/Vega.svelte';
   import { loadBackFillProfile } from '../../data/indicatorInfo';
   import { TimeFrame, WINDOW_SIZE } from '../../stores/params';
-  import { currentRegionInfo, selectByInfo } from '../../stores';
+  import {
+    currentRegionInfo,
+    selectByInfo,
+    valueField,
+    dateField,
+    dateOptions,
+    valueOptions,
+    anchorLag,
+    valueLabel,
+    dateLabel,
+    isRelative,
+  } from './store';
   import DownloadMenu from '../../components/DownloadMenu.svelte';
   import { backFillWeekdayDistribution, generateHeatMapSpec, backFillWeekdayFrequency } from './backfillSpec';
   import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
@@ -15,61 +26,34 @@
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
    */
   export let indicator;
-
-  $: region = $currentRegionInfo || nationInfo;
-
   $: date = indicator ? indicator.latest_time_value : new Date();
   $: window = new TimeFrame(timeMonth.offset(date, -WINDOW_SIZE), date);
-
-  const dateOptions = [
-    { label: 'Reported Date', value: 'date_value' },
-    { label: 'Issue Date', value: 'issue_date' },
-  ];
-  let dateField = 'date_value';
-  $: dateLabel = dateOptions.find((d) => d.value == dateField).label;
-
-  const valueOptions = [
-    { label: 'Value Completeness', value: 'value_completeness' },
-    { label: 'Relative Value Change', value: 'value_rel_change' },
-    { label: 'Sample Size Completeness', value: 'sample_size_completeness' },
-    { label: 'Relative Sample Size Change', value: 'sample_size_rel_change' },
-  ];
-  let valueField = 'value_completeness';
-  $: valueLabel = valueOptions.find((d) => d.value == valueField).label;
-
-  let anchorLagStr = '60';
-  $: anchorLag = Number.parseInt(anchorLagStr, 10);
-
   $: title = `${indicator.name} Backfill Profile`;
 
+  $: options = {
+    valueField: $valueField,
+    valueLabel: $valueLabel,
+    dateField: $dateField,
+    dateLabel: $dateLabel,
+    anchorLag: $anchorLag,
+  };
+
   let vegaRef = undefined;
   $: spec = generateHeatMapSpec({
-    title: `${indicator.name}: ${valueLabel} Profile`,
-    valueField,
-    valueLabel,
-    dateField,
-    dateLabel,
+    title: `${indicator.name}: ${$valueLabel} Profile`,
+    ...options,
   });
-  $: data = loadBackFillProfile(indicator, region, window, anchorLag);
-
-  $: isRelative = valueField.endsWith('_rel_change');
+  $: data = loadBackFillProfile(indicator, $currentRegionInfo || nationInfo, window, $anchorLag);
 
   $: weekdaySpec = backFillWeekdayDistribution({
-    title: `${indicator.name}: ${valueLabel}`,
-    valueField,
-    valueLabel,
-    dateField,
-    dateLabel,
-    anchorLag,
+    title: `${indicator.name}: ${$valueLabel}`,
+    ...options,
   });
   let vegaRefWeekday = undefined;
 
   $: weekdayBoxplotSpec = backFillWeekdayFrequency({
-    title: `${indicator.name}: ${valueLabel}`,
-    valueField,
-    dateField,
-    dateLabel,
-    anchorLag,
+    title: `${indicator.name}: ${$valueLabel}`,
+    ...options,
     completeness: 0.9,
   });
   let vegaRefBoxplot = undefined;
@@ -78,11 +62,11 @@
 <Search
   modern
   className="grid-3 grid-span-8 uk-margin-top"
-  placeholder="Select a region"
+  placeholder="Search for state or country"
   items={[nationInfo, ...stateInfo, ...countyInfo]}
   title="Region"
   icon="location"
-  selectedItem={region}
+  selectedItem={$currentRegionInfo}
   labelFieldName="displayName"
   maxItemsToShowInList="5"
   on:change={(e) => selectByInfo(e.detail && e.detail.level === 'nation' ? null : e.detail)}
@@ -90,14 +74,14 @@
 <OptionPicker
   className="grid-3 grid-span-4 uk-margin-top"
   label="Color"
-  bind:value={valueField}
+  bind:value={$valueField}
   options={valueOptions}
   modern
 />
 <OptionPicker
   className="grid-7 grid-span-2 uk-margin-top"
   label="Date"
-  bind:value={dateField}
+  bind:value={$dateField}
   options={dateOptions}
   modern
 />
@@ -105,7 +89,7 @@
   className="grid-9 grid-span-2 uk-margin-top"
   type="number"
   label="Anchor Lag (days)"
-  bind:value={anchorLag}
+  bind:value={$anchorLag}
   min={1}
   max={60}
   step={10}
@@ -125,7 +109,7 @@
     />
   </div>
 </div>
-<div class="grid-1 {isRelative ? 'grid-span-12' : 'grid-span-6'} uk-margin-top">
+<div class="grid-1 {$isRelative ? 'grid-span-12' : 'grid-span-6'} uk-margin-top">
   <div class="chart-300">
     <Vega bind:this={vegaRefWeekday} spec={weekdaySpec} {data} />
     <DownloadMenu
@@ -137,7 +121,7 @@
     />
   </div>
 </div>
-{#if !isRelative}
+{#if !$isRelative}
   <div class="grid-7 grid-span-6 uk-margin-top">
     <div class="chart-300">
       <Vega bind:this={vegaRefBoxplot} spec={weekdayBoxplotSpec} {data} />
diff --git a/src/modes/indicator-status/store.ts b/src/modes/indicator-status/store.ts
new file mode 100644
index 000000000..356c3ddaf
--- /dev/null
+++ b/src/modes/indicator-status/store.ts
@@ -0,0 +1,27 @@
+import { writable, derived } from 'svelte/store';
+
+export { currentRegionInfo, selectByInfo } from '../../stores';
+
+export const dateOptions: { label: string; value: 'issue_date' | 'date_value' }[] = [
+  { label: 'Reported Date', value: 'date_value' },
+  { label: 'Issue Date', value: 'issue_date' },
+];
+
+export const dateField = writable<'date_value' | 'issue_date'>('date_value');
+
+export const dateLabel = derived([dateField], ([value]) => dateOptions.find((d) => d.value == value)!.label);
+
+export const valueOptions = [
+  { label: 'Value Completeness', value: 'value_completeness' },
+  { label: 'Relative Value Change', value: 'value_rel_change' },
+  { label: 'Sample Size Completeness', value: 'sample_size_completeness' },
+  { label: 'Relative Sample Size Change', value: 'sample_size_rel_change' },
+];
+export const valueField = writable<
+  'value_completeness' | 'value_rel_change' | 'sample_size_completeness' | 'sample_size_rel_change'
+>('value_completeness');
+export const valueLabel = derived([valueField], ([value]) => valueOptions.find((d) => d.value == value)!.label);
+
+export const anchorLag = writable(60);
+
+export const isRelative = derived([valueField], ([v]) => v.endsWith('_rel_change'));

From 6973c7b646efb1020dda4c1ad1410e3526983825 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Mon, 17 May 2021 08:45:18 -0400
Subject: [PATCH 21/31] fix: change texts and labels

---
 .../indicator-status/IndicatorBackfill.svelte | 37 +++++++----
 src/modes/indicator-status/backfillSpec.ts    | 64 ++++++++++---------
 src/modes/indicator-status/store.ts           | 25 ++++----
 3 files changed, 72 insertions(+), 54 deletions(-)

diff --git a/src/modes/indicator-status/IndicatorBackfill.svelte b/src/modes/indicator-status/IndicatorBackfill.svelte
index a47adbe8f..3e135be0d 100644
--- a/src/modes/indicator-status/IndicatorBackfill.svelte
+++ b/src/modes/indicator-status/IndicatorBackfill.svelte
@@ -21,6 +21,7 @@
   import Search from '../../components/Search.svelte';
   import OptionPicker from '../../components/OptionPicker.svelte';
   import { timeMonth } from 'd3-time';
+import AboutSection from '../../components/AboutSection.svelte';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
@@ -36,6 +37,7 @@
     dateField: $dateField,
     dateLabel: $dateLabel,
     anchorLag: $anchorLag,
+    isRelative: $isRelative,
   };
 
   let vegaRef = undefined;
@@ -47,12 +49,14 @@
 
   $: weekdaySpec = backFillWeekdayDistribution({
     title: `${indicator.name}: ${$valueLabel}`,
+    subTitle: `per Lag (Reporting Date - Reference Date) per weekday`,
     ...options,
   });
   let vegaRefWeekday = undefined;
 
   $: weekdayBoxplotSpec = backFillWeekdayFrequency({
     title: `${indicator.name}: ${$valueLabel}`,
+    subTitle: `Lag Distribution to reach 90%`,
     ...options,
     completeness: 0.9,
   });
@@ -71,33 +75,37 @@
   maxItemsToShowInList="5"
   on:change={(e) => selectByInfo(e.detail && e.detail.level === 'nation' ? null : e.detail)}
 />
+
 <OptionPicker
-  className="grid-3 grid-span-4 uk-margin-top"
-  label="Color"
-  bind:value={$valueField}
-  options={valueOptions}
+  className="grid-3 grid-span-2 uk-margin-top"
+  type="number"
+  label="Anchor Lag (days)"
+  bind:value={$anchorLag}
+  min={1}
+  max={60}
+  step={10}
   modern
 />
 <OptionPicker
-  className="grid-7 grid-span-2 uk-margin-top"
-  label="Date"
-  bind:value={$dateField}
-  options={dateOptions}
+  className="grid-5 grid-span-4 uk-margin-top"
+  label="Tracked Value"
+  bind:value={$valueField}
+  options={$valueOptions}
   modern
 />
 <OptionPicker
   className="grid-9 grid-span-2 uk-margin-top"
-  type="number"
-  label="Anchor Lag (days)"
-  bind:value={$anchorLag}
-  min={1}
-  max={60}
-  step={10}
+  label="Show By"
+  bind:value={$dateField}
+  options={dateOptions}
   modern
 />
 
 <div class="grid-1 grid-span-12">
   <FancyHeader invert sub="Backfill Profile">{indicator.name}</FancyHeader>
+  <AboutSection>
+
+  </AboutSection>
   <div class="chart-300">
     <Vega bind:this={vegaRef} {spec} {data} />
     <DownloadMenu
@@ -135,3 +143,4 @@
     </div>
   </div>
 {/if}
+;
diff --git a/src/modes/indicator-status/backfillSpec.ts b/src/modes/indicator-status/backfillSpec.ts
index ff621c18b..5918487b6 100644
--- a/src/modes/indicator-status/backfillSpec.ts
+++ b/src/modes/indicator-status/backfillSpec.ts
@@ -11,11 +11,13 @@ export interface BackfillOptions {
   valueLabel: string;
   dateField: keyof Pick<ProfileEntry, 'issue_date' | 'date_value'>;
   dateLabel: string;
+  isRelative: boolean;
   title: string;
 }
 
 export function generateHeatMapSpec({
   valueField,
+  isRelative,
   valueLabel,
   dateField,
   dateLabel,
@@ -74,29 +76,6 @@ export function generateHeatMapSpec({
           },
         },
       },
-      {
-        transform: [
-          {
-            filter: `datum.is_anchor`,
-          },
-        ],
-        mark: {
-          type: 'line',
-        },
-        encoding: {
-          color: {
-            field: 'is_anchor',
-            type: 'ordinal',
-            scale: {
-              range: ['blue'],
-            },
-            legend: {
-              title: null,
-              labelExpr: `'anchor'`,
-            },
-          },
-        },
-      },
     ],
     encoding: {
       x: {
@@ -124,11 +103,36 @@ export function generateHeatMapSpec({
           zero: true,
         },
         axis: {
-          title: 'Lag',
+          title: 'Lag (Report Date - Reference Date)',
         },
       },
     },
   };
+  if (!isRelative) {
+    spec.layer.push({
+      transform: [
+        {
+          filter: `datum.is_anchor`,
+        },
+      ],
+      mark: {
+        type: 'line',
+      },
+      encoding: {
+        color: {
+          field: 'is_anchor',
+          type: 'ordinal',
+          scale: {
+            range: ['blue'],
+          },
+          legend: {
+            title: null,
+            labelExpr: `'anchor'`,
+          },
+        },
+      },
+    });
+  }
   return spec;
 }
 
@@ -185,13 +189,14 @@ export function backFillWeekdayDistribution({
   title,
   valueField,
   anchorLag,
-}: BackfillOptions & { anchorLag: number }): TopLevelSpec {
+  subTitle,
+}: BackfillOptions & { anchorLag: number; subTitle: string }): TopLevelSpec {
   const isRelative = valueField.endsWith('rel_change');
   const spec: TopLevelSpec = {
     ...BASE_SPEC,
     title: {
       text: title,
-      subtitle: `per Lag per weekday`,
+      subtitle: subTitle,
     },
     padding: {
       left: 65,
@@ -236,7 +241,7 @@ export function backFillWeekdayDistribution({
               zero: true,
             },
             axis: {
-              title: 'Lag',
+              title: 'Lag (Reporting Date - Reference Date)',
             },
           },
           y: {
@@ -330,12 +335,13 @@ export function backFillWeekdayFrequency({
   valueField,
   anchorLag,
   completeness,
-}: BackfillOptions & { anchorLag: number; completeness: number }): TopLevelSpec {
+  subTitle,
+}: BackfillOptions & { anchorLag: number; completeness: number; subTitle: string }): TopLevelSpec {
   const spec: TopLevelSpec = {
     ...BASE_SPEC,
     title: {
       text: title,
-      subtitle: `Lag to reach ${formatFraction(completeness)} completeness`,
+      subtitle: subTitle,
     },
     padding: {
       left: 40,
diff --git a/src/modes/indicator-status/store.ts b/src/modes/indicator-status/store.ts
index 356c3ddaf..991e8d6b0 100644
--- a/src/modes/indicator-status/store.ts
+++ b/src/modes/indicator-status/store.ts
@@ -3,25 +3,28 @@ import { writable, derived } from 'svelte/store';
 export { currentRegionInfo, selectByInfo } from '../../stores';
 
 export const dateOptions: { label: string; value: 'issue_date' | 'date_value' }[] = [
-  { label: 'Reported Date', value: 'date_value' },
-  { label: 'Issue Date', value: 'issue_date' },
+  { label: 'Reference Date', value: 'date_value' },
+  { label: 'Reporting Date', value: 'issue_date' },
 ];
 
 export const dateField = writable<'date_value' | 'issue_date'>('date_value');
 
 export const dateLabel = derived([dateField], ([value]) => dateOptions.find((d) => d.value == value)!.label);
 
-export const valueOptions = [
-  { label: 'Value Completeness', value: 'value_completeness' },
-  { label: 'Relative Value Change', value: 'value_rel_change' },
-  { label: 'Sample Size Completeness', value: 'sample_size_completeness' },
-  { label: 'Relative Sample Size Change', value: 'sample_size_rel_change' },
-];
+export const anchorLag = writable(60);
+
 export const valueField = writable<
   'value_completeness' | 'value_rel_change' | 'sample_size_completeness' | 'sample_size_rel_change'
 >('value_completeness');
-export const valueLabel = derived([valueField], ([value]) => valueOptions.find((d) => d.value == value)!.label);
-
-export const anchorLag = writable(60);
 
+export const valueOptions = derived([anchorLag], ([lag]) => [
+  { label: `As fraction of value at lag ${lag}`, value: 'value_completeness' },
+  { label: 'Day-to-day relative change', value: 'value_rel_change' },
+  { label: `As fraction of sample size at lag ${lag}`, value: 'sample_size_completeness' },
+  { label: 'Relative Sample Size Change', value: 'sample_size_rel_change' },
+]);
+export const valueLabel = derived(
+  [valueField, valueOptions],
+  ([value, options]) => options.find((d) => d.value == value)!.label,
+);
 export const isRelative = derived([valueField], ([v]) => v.endsWith('_rel_change'));

From 8e9b66794e642b640b40ef6b759a6cbf0386cdfd Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Mon, 17 May 2021 09:09:46 -0400
Subject: [PATCH 22/31] fix: small text changes

---
 src/modes/indicator-status/IndicatorBackfill.svelte | 4 ----
 src/modes/indicator-status/store.ts                 | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/modes/indicator-status/IndicatorBackfill.svelte b/src/modes/indicator-status/IndicatorBackfill.svelte
index 3e135be0d..201847dc8 100644
--- a/src/modes/indicator-status/IndicatorBackfill.svelte
+++ b/src/modes/indicator-status/IndicatorBackfill.svelte
@@ -21,7 +21,6 @@
   import Search from '../../components/Search.svelte';
   import OptionPicker from '../../components/OptionPicker.svelte';
   import { timeMonth } from 'd3-time';
-import AboutSection from '../../components/AboutSection.svelte';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
@@ -103,9 +102,6 @@ import AboutSection from '../../components/AboutSection.svelte';
 
 <div class="grid-1 grid-span-12">
   <FancyHeader invert sub="Backfill Profile">{indicator.name}</FancyHeader>
-  <AboutSection>
-
-  </AboutSection>
   <div class="chart-300">
     <Vega bind:this={vegaRef} {spec} {data} />
     <DownloadMenu
diff --git a/src/modes/indicator-status/store.ts b/src/modes/indicator-status/store.ts
index 991e8d6b0..ff34d1760 100644
--- a/src/modes/indicator-status/store.ts
+++ b/src/modes/indicator-status/store.ts
@@ -21,7 +21,7 @@ export const valueOptions = derived([anchorLag], ([lag]) => [
   { label: `As fraction of value at lag ${lag}`, value: 'value_completeness' },
   { label: 'Day-to-day relative change', value: 'value_rel_change' },
   { label: `As fraction of sample size at lag ${lag}`, value: 'sample_size_completeness' },
-  { label: 'Relative Sample Size Change', value: 'sample_size_rel_change' },
+  { label: 'Day-to-day relative sample size change', value: 'sample_size_rel_change' },
 ]);
 export const valueLabel = derived(
   [valueField, valueOptions],

From 49b5f3c83ca45f6421787b9c5dba4b7737386d6a Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Mon, 17 May 2021 09:31:03 -0400
Subject: [PATCH 23/31] fix: remove import

---
 src/modes/indicator-status/backfillSpec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modes/indicator-status/backfillSpec.ts b/src/modes/indicator-status/backfillSpec.ts
index 5918487b6..56b468e65 100644
--- a/src/modes/indicator-status/backfillSpec.ts
+++ b/src/modes/indicator-status/backfillSpec.ts
@@ -1,6 +1,5 @@
 import type { TopLevelSpec } from 'vega-lite';
 import type { ProfileEntry } from '../../data/indicatorInfo';
-import { formatFraction } from '../../formats';
 import { BASE_SPEC } from '../../specs/commonSpec';
 
 export interface BackfillOptions {

From c1d79a9b99e32523381ad335af06d86882f36ce7 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Wed, 19 May 2021 08:19:15 -0400
Subject: [PATCH 24/31] fix: keep indicator when switching tabs

---
 src/modes/indicator-status/IndicatorStatusOverview.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modes/indicator-status/IndicatorStatusOverview.svelte b/src/modes/indicator-status/IndicatorStatusOverview.svelte
index 006f85414..74c614b54 100644
--- a/src/modes/indicator-status/IndicatorStatusOverview.svelte
+++ b/src/modes/indicator-status/IndicatorStatusOverview.svelte
@@ -81,13 +81,13 @@
         <li class:uk-active={mode === 'coverage'}>
           <a
             href="#{(loadedData[0] || { id: 'details' }).id}"
-            on:click|preventDefault={() => switchMode('coverage', loadedData[0])}>Coverage Details</a
+            on:click|preventDefault={() => switchMode('coverage', selected || loadedData[0])}>Coverage Details</a
           >
         </li>
         <li class:uk-active={mode === 'backfill'}>
           <a
             href="#{(loadedData[0] || { id: 'details' }).id}_b"
-            on:click|preventDefault={() => switchMode('backfill', loadedData[0])}>Backfill Profile</a
+            on:click|preventDefault={() => switchMode('backfill', selected || loadedData[0])}>Backfill Profile</a
           >
         </li>
       </ul>

From 2f0b3f5ca1f0454e8cef2c16a3e3c6beb60ca28d Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Wed, 19 May 2021 12:53:29 -0400
Subject: [PATCH 25/31] feat: add tooltip for backfill

---
 .../indicator-status/BackfillTooltip.svelte   |  52 ++++++++
 .../indicator-status/IndicatorBackfill.svelte |  25 ++--
 src/modes/indicator-status/backfillSpec.ts    | 113 +++++++++++-------
 3 files changed, 138 insertions(+), 52 deletions(-)
 create mode 100644 src/modes/indicator-status/BackfillTooltip.svelte

diff --git a/src/modes/indicator-status/BackfillTooltip.svelte b/src/modes/indicator-status/BackfillTooltip.svelte
new file mode 100644
index 000000000..ca1647326
--- /dev/null
+++ b/src/modes/indicator-status/BackfillTooltip.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { formatDateISO, formatFraction, formatRawValue, formatValue } from '../../formats';
+
+  export let hidden = false;
+  /**
+   * @type {import('../../data/indicatorInfo').ProfileEntry}
+   */
+  export let item;
+  /**
+   * @type {{date_field: string, date_label: string, value_field: string, value_label: string}}
+   */
+  export let options;
+</script>
+
+<div aria-label="tooltip" class="tooltip" class:hidden>
+  <h5>Lag {item.lag} / {formatDateISO(item[options.dateField])}</h5>
+  <table>
+    <tr>
+      <th>Value</th>
+      <td>{formatRawValue(item.value)}</td>
+    </tr>
+    {#if options.isRelative}
+      <tr>
+        <th>{options.valueLabel}</th>
+        <td>{formatFraction(item[options.valueField])}</td>
+      </tr>
+    {:else}
+      <tr>
+        <th>{options.valueLabel}</th>
+        <td>{formatValue(item[options.valueField])}</td>
+      </tr>
+    {/if}
+  </table>
+</div>
+
+<style>
+  .hidden {
+    display: none;
+  }
+
+  h5 {
+    margin: 0;
+    padding: 0;
+  }
+
+  th {
+    text-align: left;
+  }
+  td {
+    text-align: right;
+  }
+</style>
diff --git a/src/modes/indicator-status/IndicatorBackfill.svelte b/src/modes/indicator-status/IndicatorBackfill.svelte
index 201847dc8..329828a20 100644
--- a/src/modes/indicator-status/IndicatorBackfill.svelte
+++ b/src/modes/indicator-status/IndicatorBackfill.svelte
@@ -16,11 +16,17 @@
     isRelative,
   } from './store';
   import DownloadMenu from '../../components/DownloadMenu.svelte';
-  import { backFillWeekdayDistribution, generateHeatMapSpec, backFillWeekdayFrequency } from './backfillSpec';
+  import {
+    backFillWeekdayDistribution,
+    generateChangeHeatMapSpec,
+    generateValueHeatMapSpec,
+    backFillWeekdayFrequency,
+  } from './backfillSpec';
   import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
   import Search from '../../components/Search.svelte';
   import OptionPicker from '../../components/OptionPicker.svelte';
   import { timeMonth } from 'd3-time';
+  import BackfillTooltip from './BackfillTooltip.svelte';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
@@ -40,10 +46,15 @@
   };
 
   let vegaRef = undefined;
-  $: spec = generateHeatMapSpec({
-    title: `${indicator.name}: ${$valueLabel} Profile`,
-    ...options,
-  });
+  $: spec = $isRelative
+    ? generateChangeHeatMapSpec({
+        title: `${indicator.name}: ${$valueLabel}`,
+        ...options,
+      })
+    : generateValueHeatMapSpec({
+        title: `${indicator.name}: ${$valueLabel}`,
+        ...options,
+      });
   $: data = loadBackFillProfile(indicator, $currentRegionInfo || nationInfo, window, $anchorLag);
 
   $: weekdaySpec = backFillWeekdayDistribution({
@@ -71,7 +82,7 @@
   icon="location"
   selectedItem={$currentRegionInfo}
   labelFieldName="displayName"
-  maxItemsToShowInList="5"
+  maxItemsToShowInList={15}
   on:change={(e) => selectByInfo(e.detail && e.detail.level === 'nation' ? null : e.detail)}
 />
 
@@ -103,7 +114,7 @@
 <div class="grid-1 grid-span-12">
   <FancyHeader invert sub="Backfill Profile">{indicator.name}</FancyHeader>
   <div class="chart-300">
-    <Vega bind:this={vegaRef} {spec} {data} />
+    <Vega bind:this={vegaRef} {spec} {data} tooltip={BackfillTooltip} tooltipProps={{ options }} />
     <DownloadMenu
       {vegaRef}
       {data}
diff --git a/src/modes/indicator-status/backfillSpec.ts b/src/modes/indicator-status/backfillSpec.ts
index 56b468e65..d8f31b28f 100644
--- a/src/modes/indicator-status/backfillSpec.ts
+++ b/src/modes/indicator-status/backfillSpec.ts
@@ -1,4 +1,7 @@
 import type { TopLevelSpec } from 'vega-lite';
+import type { Field } from 'vega-lite/build/src/channeldef';
+import type { LayerSpec } from 'vega-lite/build/src/spec';
+import type { Scale } from 'vega-lite/build/src/scale';
 import type { ProfileEntry } from '../../data/indicatorInfo';
 import { BASE_SPEC } from '../../specs/commonSpec';
 
@@ -14,15 +17,11 @@ export interface BackfillOptions {
   title: string;
 }
 
-export function generateHeatMapSpec({
-  valueField,
-  isRelative,
-  valueLabel,
-  dateField,
-  dateLabel,
-  title,
-}: BackfillOptions): TopLevelSpec {
-  const spec: TopLevelSpec = {
+function commonHeatMapSpec(
+  { valueField, valueLabel, dateField, dateLabel, title }: BackfillOptions,
+  scale: Scale,
+): TopLevelSpec & LayerSpec<Field> {
+  return {
     ...BASE_SPEC,
     title: {
       text: title,
@@ -36,11 +35,19 @@ export function generateHeatMapSpec({
     },
     layer: [
       {
+        params: [
+          {
+            name: 'highlight',
+            select: {
+              type: 'point',
+              on: 'mousemove',
+              fields: ['lag', dateField],
+            },
+          },
+        ],
         mark: {
           type: 'rect',
-          stroke: null,
-          strokeWidth: 0,
-          strokeOpacity: 0,
+          strokeWidth: 2,
           width: {
             expr: `width / customCountDays(domain('x')[0], domain('x')[1])`,
           },
@@ -56,23 +63,21 @@ export function generateHeatMapSpec({
           color: {
             field: valueField,
             type: 'quantitative',
-            scale: valueField.endsWith('rel_change')
-              ? {
-                  domainMid: 0,
-                  nice: false,
-                  // scheme: valueField.endsWith('rel_change') ?  'viridis',
-                }
-              : {
-                  domain: [0, 1],
-                  clamp: true,
-                  nice: false,
-                },
+            scale,
             legend: {
               title: valueLabel,
               titleOrient: 'left',
               // gradientLength: 00,
             },
           },
+          stroke: {
+            condition: {
+              param: 'highlight',
+              empty: false,
+              value: 'orange',
+            },
+            value: null,
+          },
         },
       },
     ],
@@ -107,31 +112,49 @@ export function generateHeatMapSpec({
       },
     },
   };
-  if (!isRelative) {
-    spec.layer.push({
-      transform: [
-        {
-          filter: `datum.is_anchor`,
-        },
-      ],
-      mark: {
-        type: 'line',
+}
+
+export function generateValueHeatMapSpec(options: BackfillOptions): TopLevelSpec {
+  const spec = commonHeatMapSpec(options, {
+    domain: [0, 1],
+    clamp: true,
+    nice: false,
+  });
+  spec.layer.push({
+    transform: [
+      {
+        filter: `datum.is_anchor`,
       },
-      encoding: {
-        color: {
-          field: 'is_anchor',
-          type: 'ordinal',
-          scale: {
-            range: ['blue'],
-          },
-          legend: {
-            title: null,
-            labelExpr: `'anchor'`,
-          },
+    ],
+    mark: {
+      type: 'line',
+    },
+    encoding: {
+      color: {
+        field: 'is_anchor',
+        type: 'ordinal',
+        scale: {
+          range: ['blue'],
+        },
+        legend: {
+          title: null,
+          labelExpr: `'anchor'`,
         },
       },
-    });
-  }
+    },
+  });
+  return spec;
+}
+
+export function generateChangeHeatMapSpec(options: BackfillOptions): TopLevelSpec {
+  const spec = commonHeatMapSpec(options, {
+    domainMid: 0,
+    domainMax: 3,
+    domainMin: -0.3,
+    nice: false,
+    clamp: true,
+    // scheme: valueField.endsWith('rel_change') ?  'viridis',
+  });
   return spec;
 }
 

From 898d5c7fa048947505482ced4725f3c12f60ed02 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Wed, 19 May 2021 13:09:48 -0400
Subject: [PATCH 26/31] feat: tune day-to-day change legend

---
 src/modes/indicator-status/backfillSpec.ts | 26 +++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/modes/indicator-status/backfillSpec.ts b/src/modes/indicator-status/backfillSpec.ts
index d8f31b28f..5b267b721 100644
--- a/src/modes/indicator-status/backfillSpec.ts
+++ b/src/modes/indicator-status/backfillSpec.ts
@@ -20,6 +20,7 @@ export interface BackfillOptions {
 function commonHeatMapSpec(
   { valueField, valueLabel, dateField, dateLabel, title }: BackfillOptions,
   scale: Scale,
+  legend = {},
 ): TopLevelSpec & LayerSpec<Field> {
   return {
     ...BASE_SPEC,
@@ -67,6 +68,7 @@ function commonHeatMapSpec(
             legend: {
               title: valueLabel,
               titleOrient: 'left',
+              ...legend,
               // gradientLength: 00,
             },
           },
@@ -147,14 +149,22 @@ export function generateValueHeatMapSpec(options: BackfillOptions): TopLevelSpec
 }
 
 export function generateChangeHeatMapSpec(options: BackfillOptions): TopLevelSpec {
-  const spec = commonHeatMapSpec(options, {
-    domainMid: 0,
-    domainMax: 3,
-    domainMin: -0.3,
-    nice: false,
-    clamp: true,
-    // scheme: valueField.endsWith('rel_change') ?  'viridis',
-  });
+  const spec = commonHeatMapSpec(
+    options,
+    {
+      type: 'symlog',
+      domainMid: 0,
+      domainMax: 3,
+      domainMin: -0.66,
+      nice: false,
+      clamp: true,
+      // scheme: valueField.endsWith('rel_change') ?  'viridis',
+    },
+    {
+      labelExpr: `['*1/3','*1/2','-30%','-20%','-10%',' NC','+10%','+20%','+30%','*2', '*3'][indexof([-0.66, -0.5, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 2, 3], datum.value)]`,
+      values: [-0.66, -0.5, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 2, 3],
+    },
+  );
   return spec;
 }
 

From cd2f86fb5db8a46653842293deed45f6aed9b8ab Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Thu, 20 May 2021 07:58:58 -0400
Subject: [PATCH 27/31] feat: tune color scale

---
 src/modes/indicator-status/backfillSpec.ts | 54 +++++++++++++---------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/modes/indicator-status/backfillSpec.ts b/src/modes/indicator-status/backfillSpec.ts
index 5b267b721..36add8736 100644
--- a/src/modes/indicator-status/backfillSpec.ts
+++ b/src/modes/indicator-status/backfillSpec.ts
@@ -1,7 +1,6 @@
 import type { TopLevelSpec } from 'vega-lite';
-import type { Field } from 'vega-lite/build/src/channeldef';
+import type { ColorDef, Field } from 'vega-lite/build/src/channeldef';
 import type { LayerSpec } from 'vega-lite/build/src/spec';
-import type { Scale } from 'vega-lite/build/src/scale';
 import type { ProfileEntry } from '../../data/indicatorInfo';
 import { BASE_SPEC } from '../../specs/commonSpec';
 
@@ -19,8 +18,7 @@ export interface BackfillOptions {
 
 function commonHeatMapSpec(
   { valueField, valueLabel, dateField, dateLabel, title }: BackfillOptions,
-  scale: Scale,
-  legend = {},
+  color: ColorDef<Field>,
 ): TopLevelSpec & LayerSpec<Field> {
   return {
     ...BASE_SPEC,
@@ -61,17 +59,18 @@ function commonHeatMapSpec(
           // opacity: 0.5,
         },
         encoding: {
-          color: {
-            field: valueField,
-            type: 'quantitative',
-            scale,
-            legend: {
-              title: valueLabel,
-              titleOrient: 'left',
-              ...legend,
-              // gradientLength: 00,
+          color: Object.assign(
+            {
+              field: valueField,
+              type: 'quantitative',
+              legend: {
+                title: valueLabel,
+                titleOrient: 'left',
+                // gradientLength: 00,
+              },
             },
-          },
+            color,
+          ),
           stroke: {
             condition: {
               param: 'highlight',
@@ -118,9 +117,11 @@ function commonHeatMapSpec(
 
 export function generateValueHeatMapSpec(options: BackfillOptions): TopLevelSpec {
   const spec = commonHeatMapSpec(options, {
-    domain: [0, 1],
-    clamp: true,
-    nice: false,
+    scale: {
+      domain: [0, 1],
+      clamp: true,
+      nice: false,
+    },
   });
   spec.layer.push({
     transform: [
@@ -149,22 +150,29 @@ export function generateValueHeatMapSpec(options: BackfillOptions): TopLevelSpec
 }
 
 export function generateChangeHeatMapSpec(options: BackfillOptions): TopLevelSpec {
-  const spec = commonHeatMapSpec(
-    options,
-    {
+  const spec = commonHeatMapSpec(options, {
+    condition: {
+      test: `datum.${options.valueField} == 0`,
+      value: 'white',
+    },
+    scale: {
       type: 'symlog',
       domainMid: 0,
       domainMax: 3,
       domainMin: -0.66,
       nice: false,
       clamp: true,
+      // https://github.com/d3/d3-scale-chromatic#interpolateRdBu
+      scheme: 'redblue',
       // scheme: valueField.endsWith('rel_change') ?  'viridis',
     },
-    {
-      labelExpr: `['*1/3','*1/2','-30%','-20%','-10%',' NC','+10%','+20%','+30%','*2', '*3'][indexof([-0.66, -0.5, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 2, 3], datum.value)]`,
+    legend: {
+      title: options.valueLabel,
+      titleOrient: 'left',
+      labelExpr: `['≤ *⅓','*½','-30%','-20%','-10%',' NC','+10%','+20%','+30%','*2', '≥ *3'][indexof([-0.66, -0.5, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 2, 3], datum.value)]`,
       values: [-0.66, -0.5, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 2, 3],
     },
-  );
+  });
   return spec;
 }
 

From ef0bb8e1463e34e3d16b7325aa6cbde18c795d58 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Fri, 21 May 2021 08:36:40 -0400
Subject: [PATCH 28/31] feat: use divergent value color scale

---
 src/modes/indicator-status/backfillSpec.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/modes/indicator-status/backfillSpec.ts b/src/modes/indicator-status/backfillSpec.ts
index 36add8736..debd6a653 100644
--- a/src/modes/indicator-status/backfillSpec.ts
+++ b/src/modes/indicator-status/backfillSpec.ts
@@ -118,9 +118,14 @@ function commonHeatMapSpec(
 export function generateValueHeatMapSpec(options: BackfillOptions): TopLevelSpec {
   const spec = commonHeatMapSpec(options, {
     scale: {
-      domain: [0, 1],
+      domain: [0, 1.25],
+      domainMid: 1,
       clamp: true,
       nice: false,
+      scheme: 'purpleorange',
+      // scheme: {
+      //   expr: ``
+      // }
     },
   });
   spec.layer.push({

From 21f184eb02cee5dddb9366032a1670ead7a51a17 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Fri, 21 May 2021 08:50:32 -0400
Subject: [PATCH 29/31] feat: add description texts

---
 src/components/AboutSection.svelte            |  3 +-
 .../indicator-status/IndicatorBackfill.svelte | 64 ++++++++++++++++++-
 src/modes/indicator-status/store.ts           |  7 +-
 3 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/src/components/AboutSection.svelte b/src/components/AboutSection.svelte
index 1a2d45a3c..5fd384b91 100644
--- a/src/components/AboutSection.svelte
+++ b/src/components/AboutSection.svelte
@@ -1,8 +1,9 @@
 <script>
   export let details = '';
+  export let className = '';
 </script>
 
-<div class="grid-3-11 mobile-invert">
+<div class="grid-3-11 mobile-invert {className}">
   {#if details}
     <details>
       <summary>
diff --git a/src/modes/indicator-status/IndicatorBackfill.svelte b/src/modes/indicator-status/IndicatorBackfill.svelte
index 329828a20..9fa649117 100644
--- a/src/modes/indicator-status/IndicatorBackfill.svelte
+++ b/src/modes/indicator-status/IndicatorBackfill.svelte
@@ -27,6 +27,7 @@
   import OptionPicker from '../../components/OptionPicker.svelte';
   import { timeMonth } from 'd3-time';
   import BackfillTooltip from './BackfillTooltip.svelte';
+  import AboutSection from '../../components/AboutSection.svelte';
 
   /**
    * @type {import('../../data/indicatorInfo').IndicatorStatus}
@@ -73,6 +74,27 @@
   let vegaRefBoxplot = undefined;
 </script>
 
+<AboutSection className="uk-margin-medium-top uk-margin-small-bottom">
+  <h3 class="mobile-h3">About Backfill Profiling</h3>
+
+  <div class="desc">
+    The backfill profile illustrates the data collection patterns of the selected indicator. The <strong
+      >Reference Date</strong
+    >
+    is the date of the activity being measured (e.g., "Date of Service" for doctor visits, or "specimen collection date"
+    for lab test results). The <strong>Reporting Date</strong> is the date on which the specific value was reported to
+    Delphi. There can be multiple reporting dates for the same reference date due to backfill. For example, additional
+    doctor visits for a specific reference date has been updated after the initial number of doctor visits has been
+    reported to Delphi. Thus, Delphi issues another reporting date with the new value.
+    <strong>Anchor Lag</strong> is the number of days after the reference date in which it is assumed for this backfill profiling
+    that the value is not going to change much anymore.
+  </div>
+</AboutSection>
+
+<div class="grid-3-11">
+  <FancyHeader invert sub="Backfill Profile">{indicator.name}</FancyHeader>
+</div>
+
 <Search
   modern
   className="grid-3 grid-span-8 uk-margin-top"
@@ -111,8 +133,33 @@
   modern
 />
 
+{#if $isRelative}
+  <AboutSection details className="uk-margin-small-top uk-margin-small-bottom">
+    <h3 slot="header" class="mobile-h3">Day-to-day Backfill Heatmap</h3>
+    <div class="desc">
+      The Backfill heatmap illustrates the day-to-day value change per date per lag. The horizontal time axis shows
+      either the reporting or reference date based on the selection of the user. The vertical lag axis illustrates the
+      number of days when the value has been reported relative to the horizontal time value. The cell at the crossing
+      point is colored according to the relative value change illustrating how newly reported values changes move per
+      reference date over time.
+    </div>
+  </AboutSection>
+{:else}
+  <AboutSection details className="uk-margin-small-top uk-margin-small-bottom">
+    <h3 slot="header" class="mobile-h3">Fraction Backfill Heatmap</h3>
+    <div class="desc">
+      The Backfill heatmap is using the selected anchor lag to illustrate the fraction of value per date per lag. The
+      horizontal time axis shows either the reporting or reference date based on the selection of the user. The vertical
+      lag axis illustrates the number of days when the value has been reported relative to the horizontal time value.
+      The cell at the crossing point is colored according to the fraction of how the reported value is relative to the
+      reported value at the selected anchor lag. The anchor lag that is used as the basis of the specific date value is
+      shown as a blue line. This heatmap gives insights on what number of lags are needed for this indicator to reach a
+      certain fraction close to the assumed final value.
+    </div>
+  </AboutSection>
+{/if}
+
 <div class="grid-1 grid-span-12">
-  <FancyHeader invert sub="Backfill Profile">{indicator.name}</FancyHeader>
   <div class="chart-300">
     <Vega bind:this={vegaRef} {spec} {data} tooltip={BackfillTooltip} tooltipProps={{ options }} />
     <DownloadMenu
@@ -124,6 +171,21 @@
     />
   </div>
 </div>
+<AboutSection details className="uk-margin-small-top uk-margin-small-bottom">
+  <h3 slot="header" class="mobile-h3">Weekday Distributions</h3>
+  <div class="desc">
+    In order to highlight weekday changes within reported values of the selected indicator the following charts are
+    stratified by weekday. The horizontal axis shows the lag while the vertical axis shows the fraction of value or the
+    day-to-day change based on the selection of the. Both values are described before. The line chart shows the median
+    fraction of value at the selected anchor lag. The vertical blue axis is showing the selected anchor date. This chart
+    gives insights on whether there are interesting weekday differences in the indicator.
+    {#if !$isRelative}
+      The second chart shows a similar view to highlight on the weekday distribution but focuses on the distribution per
+      weekday when the first reported lag reached 90% of the fraction of the target anchor lag value. This illustrates
+      whether the anchor lag is a fitting choice when the box-plots are clearly below the anchor lag line in blue.
+    {/if}
+  </div>
+</AboutSection>
 <div class="grid-1 {$isRelative ? 'grid-span-12' : 'grid-span-6'} uk-margin-top">
   <div class="chart-300">
     <Vega bind:this={vegaRefWeekday} spec={weekdaySpec} {data} />
diff --git a/src/modes/indicator-status/store.ts b/src/modes/indicator-status/store.ts
index ff34d1760..9055f6301 100644
--- a/src/modes/indicator-status/store.ts
+++ b/src/modes/indicator-status/store.ts
@@ -13,9 +13,10 @@ export const dateLabel = derived([dateField], ([value]) => dateOptions.find((d)
 
 export const anchorLag = writable(60);
 
-export const valueField = writable<
-  'value_completeness' | 'value_rel_change' | 'sample_size_completeness' | 'sample_size_rel_change'
->('value_completeness');
+export const valueField =
+  writable<'value_completeness' | 'value_rel_change' | 'sample_size_completeness' | 'sample_size_rel_change'>(
+    'value_completeness',
+  );
 
 export const valueOptions = derived([anchorLag], ([lag]) => [
   { label: `As fraction of value at lag ${lag}`, value: 'value_completeness' },

From f0e467c0d054b72cc5610298cd0b9cb5ee60e117 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Tue, 25 May 2021 09:50:16 -0400
Subject: [PATCH 30/31] refactor: change to day-of-week

---
 src/blocks/HistoryLineTooltip.svelte          |  4 +-
 src/blocks/IndicatorWarning.svelte            |  4 +-
 src/blocks/MaxDateHint.svelte                 |  6 +--
 src/blocks/RegionMapTooltip.svelte            |  4 +-
 src/components/SensorDatePicker2.svelte       | 12 +++---
 src/components/SparkLineTooltip.svelte        |  4 +-
 src/components/TrendTextSummary.svelte        | 30 +++++++--------
 src/formats.ts                                | 16 ++++----
 .../correlation/CorrelationTooltip.svelte     |  6 +--
 .../dashboard/widgets/LineChartWidget.svelte  |  4 +-
 .../dashboard/widgets/MapChartWidget.svelte   |  7 +++-
 src/modes/dashboard/widgets/WidgetCard.svelte |  4 +-
 .../indicator-status/IndicatorBackfill.svelte | 37 ++++++++++---------
 src/modes/indicator-status/backfillSpec.ts    | 14 +++----
 src/modes/indicator/Indicator.svelte          |  4 +-
 src/modes/summary/AllIndicatorOverview.svelte |  4 +-
 src/modes/summary/CasesOverview.svelte        |  4 +-
 src/modes/summary/HighlightIndicators.svelte  |  4 +-
 .../survey-results/SurveyQuestion.svelte      |  6 +--
 19 files changed, 89 insertions(+), 85 deletions(-)

diff --git a/src/blocks/HistoryLineTooltip.svelte b/src/blocks/HistoryLineTooltip.svelte
index a28365348..87fb4b40a 100644
--- a/src/blocks/HistoryLineTooltip.svelte
+++ b/src/blocks/HistoryLineTooltip.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { formatDateShortWeekdayAbbr } from '../formats';
+  import { formatDateShortDayOfWeekAbbr } from '../formats';
   import SensorValue from '../components/SensorValue.svelte';
 
   export let hidden = false;
@@ -22,7 +22,7 @@
 </script>
 
 <div aria-label="tooltip" class="tooltip" class:hidden>
-  <h5>{formatDateShortWeekdayAbbr(item.date_value)}</h5>
+  <h5>{formatDateShortDayOfWeekAbbr(item.date_value)}</h5>
   <table>
     {#each items as i}
       <tr>
diff --git a/src/blocks/IndicatorWarning.svelte b/src/blocks/IndicatorWarning.svelte
index 2c12bfcbe..9721c62b8 100644
--- a/src/blocks/IndicatorWarning.svelte
+++ b/src/blocks/IndicatorWarning.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { formatDateYearWeekdayAbbr } from '../formats';
+  import { formatDateYearDayOfWeekAbbr } from '../formats';
   import { getLevelInfo } from '../stores';
 
   /**
@@ -22,6 +22,6 @@
   </div>
 {:else if date.sensorTimeFrame.max < date.value}
   <div data-uk-alert class="uk-alert-warning">
-    The indicator "{sensor.name}" is not available for {formatDateYearWeekdayAbbr(date.value)}, yet.
+    The indicator "{sensor.name}" is not available for {formatDateYearDayOfWeekAbbr(date.value)}, yet.
   </div>
 {/if}
diff --git a/src/blocks/MaxDateHint.svelte b/src/blocks/MaxDateHint.svelte
index 86f6aef04..ba01e89dc 100644
--- a/src/blocks/MaxDateHint.svelte
+++ b/src/blocks/MaxDateHint.svelte
@@ -1,6 +1,6 @@
 <script>
   import UIKitHint from '../components/UIKitHint.svelte';
-  import { formatDateYearWeekdayAbbr } from '../formats';
+  import { formatDateYearDayOfWeekAbbr } from '../formats';
   import { stats } from '../stores';
   import { determineStatsInfo } from '../stores/stats';
   /**
@@ -20,9 +20,9 @@
 
 {#if info}
   <UIKitHint
-    title="Most recent available date:<br>&nbsp;{formatDateYearWeekdayAbbr(
+    title="Most recent available date:<br>&nbsp;{formatDateYearDayOfWeekAbbr(
       info.maxTime,
-    )}<br>Last update on:<br>&nbsp;{formatDateYearWeekdayAbbr(info.maxIssue)}"
+    )}<br>Last update on:<br>&nbsp;{formatDateYearDayOfWeekAbbr(info.maxIssue)}"
     noMargin={suffix.length > 0}
     inline={suffix.length === 0}
   />
diff --git a/src/blocks/RegionMapTooltip.svelte b/src/blocks/RegionMapTooltip.svelte
index 7a995f881..05d52dcf2 100644
--- a/src/blocks/RegionMapTooltip.svelte
+++ b/src/blocks/RegionMapTooltip.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { formatDateShortWeekdayAbbr } from '../formats';
+  import { formatDateShortDayOfWeekAbbr } from '../formats';
   import { levelMegaCounty } from '../stores/constants';
   import { getStateOfCounty } from '../data/regions';
   import SensorValue from '../components/SensorValue.svelte';
@@ -61,7 +61,7 @@
       </tr>
     {/if}
     <tr>
-      <th>{formatDateShortWeekdayAbbr(item.date_value)}</th>
+      <th>{formatDateShortDayOfWeekAbbr(item.date_value)}</th>
       <td>
         <SensorValue {sensor} value={item.value} medium />
       </td>
diff --git a/src/components/SensorDatePicker2.svelte b/src/components/SensorDatePicker2.svelte
index 9adfc0f64..28f359c74 100644
--- a/src/components/SensorDatePicker2.svelte
+++ b/src/components/SensorDatePicker2.svelte
@@ -5,7 +5,7 @@
   import calendarIcon from '!raw-loader!@fortawesome/fontawesome-free/svgs/solid/calendar.svg';
   import { parseAPITime } from '../data';
   import { times, stats } from '../stores';
-  import { formatDateShortWeekdayAbbr, formatDateYearWeekdayAbbr } from '../formats';
+  import { formatDateShortDayOfWeekAbbr, formatDateYearDayOfWeekAbbr } from '../formats';
   import { timeDay } from 'd3-time';
   import { determineStatsInfo } from '../stores/stats';
 
@@ -54,7 +54,7 @@
       bind:selected={value}
       start={startEndDates[0]}
       end={startEndDates[1]}
-      formattedSelected={formatDateShortWeekdayAbbr(value)}
+      formattedSelected={formatDateShortDayOfWeekAbbr(value)}
     >
       <button
         aria-label="selected date"
@@ -65,7 +65,7 @@
         <span class="selected-date-icon">
           {@html calendarIcon}
         </span>
-        <span>{formatDateShortWeekdayAbbr(value)}</span>
+        <span>{formatDateShortDayOfWeekAbbr(value)}</span>
       </button>
       <svelte:fragment slot="footer">
         {#if info}
@@ -75,9 +75,9 @@
               on:click={() => (value = startEndDates[1])}
               class="uk-link-muted"
             >
-              {formatDateYearWeekdayAbbr(info.maxTime)}
+              {formatDateYearDayOfWeekAbbr(info.maxTime)}
             </button>
-            updated on <span class="uk-text-nowrap">{formatDateYearWeekdayAbbr(info.maxIssue)}</span>.
+            updated on <span class="uk-text-nowrap">{formatDateYearDayOfWeekAbbr(info.maxIssue)}</span>.
           </p>
         {/if}
       </svelte:fragment>
@@ -87,7 +87,7 @@
       <span class="inline-svg-icon">
         {@html calendarIcon}
       </span>
-      <span>{formatDateShortWeekdayAbbr(value)}</span>
+      <span>{formatDateShortDayOfWeekAbbr(value)}</span>
     </button>
   {/if}
   <button
diff --git a/src/components/SparkLineTooltip.svelte b/src/components/SparkLineTooltip.svelte
index 1318f01d1..40e8350f6 100644
--- a/src/components/SparkLineTooltip.svelte
+++ b/src/components/SparkLineTooltip.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { formatDateShortWeekdayAbbr } from '../formats';
+  import { formatDateShortDayOfWeekAbbr } from '../formats';
   import SensorValue from './SensorValue.svelte';
 
   export let hidden = false;
@@ -15,7 +15,7 @@
 </script>
 
 <div aria-label="tooltip" class="tooltip" class:hidden>
-  <h5>{formatDateShortWeekdayAbbr(item.date_value)}</h5>
+  <h5>{formatDateShortDayOfWeekAbbr(item.date_value)}</h5>
   <table>
     <tr>
       <th>{item.displayName}</th>
diff --git a/src/components/TrendTextSummary.svelte b/src/components/TrendTextSummary.svelte
index f6575ad8a..dbed5e2f6 100644
--- a/src/components/TrendTextSummary.svelte
+++ b/src/components/TrendTextSummary.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { formatDateWeekday, formatDateYearWeekdayAbbr } from '../formats';
+  import { formatDateDayOfWeek, formatDateYearDayOfWeekAbbr } from '../formats';
   import { WINDOW_SIZE } from '../stores/params';
   import SensorValue from './SensorValue.svelte';
   import TrendText from './TrendText.svelte';
@@ -33,15 +33,15 @@
   <slot />
   {#await trend}
     We don't have data on the historical context for this indicator on
-    {formatDateWeekday(date.value, true)}.
+    {formatDateDayOfWeek(date.value, true)}.
   {:then d}
     {#if d.isUnknown}
       We don't have data on the historical context for this indicator on
-      {formatDateWeekday(date.value, true)}.
+      {formatDateDayOfWeek(date.value, true)}.
     {:else if d.highValuesAre === 'neutral'}
       {#if d.isNeutral}
         On
-        {formatDateWeekday(date.value, true)}
+        {formatDateDayOfWeek(date.value, true)}
         <strong>{sensor.value.name}</strong>
         has
         <strong>
@@ -54,10 +54,10 @@
           <SensorValue {sensor} value={d.min ? d.min.refValue : null} medium /></strong
         >
         on
-        <strong>{formatDateYearWeekdayAbbr(d.minDate, true)}</strong>.
+        <strong>{formatDateYearDayOfWeekAbbr(d.minDate, true)}</strong>.
       {:else if +date.value === +d.minDate}
         On
-        {formatDateWeekday(date.value, true)}
+        {formatDateDayOfWeek(date.value, true)}
         <strong>{sensor.value.name}</strong>
         has
         <strong>
@@ -70,10 +70,10 @@
           <SensorValue {sensor} value={d.max ? d.max.refValue : null} medium /></strong
         >
         on
-        <strong>{formatDateYearWeekdayAbbr(d.maxDate, true)}</strong>.
+        <strong>{formatDateYearDayOfWeekAbbr(d.maxDate, true)}</strong>.
       {:else if +date.value === +d.maxDate}
         On
-        {formatDateWeekday(date.value, true)}
+        {formatDateDayOfWeek(date.value, true)}
         <strong>{sensor.value.name}</strong>
         has
         <strong>
@@ -86,10 +86,10 @@
           <SensorValue {sensor} value={d.min ? d.min.refValue : null} medium /></strong
         >
         on
-        <strong>{formatDateYearWeekdayAbbr(d.minDate, true)}</strong>.
+        <strong>{formatDateYearDayOfWeekAbbr(d.minDate, true)}</strong>.
       {:else}
         On
-        {formatDateWeekday(date.value, true)}
+        {formatDateDayOfWeek(date.value, true)}
         <strong>{sensor.value.name}</strong>
         has
         <strong>
@@ -102,11 +102,11 @@
           <SensorValue {sensor} value={d.min ? d.min.refValue : null} medium /></strong
         >
         on
-        <strong>{formatDateYearWeekdayAbbr(d.minDate, true)}</strong>.
+        <strong>{formatDateYearDayOfWeekAbbr(d.minDate, true)}</strong>.
       {/if}
     {:else if +date.value === +d.worstDate}
       On
-      {formatDateWeekday(date.value, true)}
+      {formatDateDayOfWeek(date.value, true)}
       <strong>{sensor.value.name}</strong>
       was the
       {WINDOW_SIZE}
@@ -118,10 +118,10 @@
         <SensorValue {sensor} value={d.best ? d.best.refValue : null} medium /></strong
       >
       on
-      <strong>{formatDateYearWeekdayAbbr(d.bestDate, true)}</strong>.
+      <strong>{formatDateYearDayOfWeekAbbr(d.bestDate, true)}</strong>.
     {:else}
       On
-      {formatDateWeekday(date.value, true)}
+      {formatDateDayOfWeek(date.value, true)}
       <strong>{sensor.value.name}</strong>
       was
       <strong>
@@ -134,7 +134,7 @@
         <SensorValue {sensor} value={d.worst ? d.worst.refValue : null} medium /></strong
       >
       on
-      <strong>{formatDateYearWeekdayAbbr(d.worstDate, true)}</strong>.
+      <strong>{formatDateYearDayOfWeekAbbr(d.worstDate, true)}</strong>.
     {/if}
   {/await}
 </p>
diff --git a/src/formats.ts b/src/formats.ts
index 53dc77002..1d9a56463 100644
--- a/src/formats.ts
+++ b/src/formats.ts
@@ -7,8 +7,8 @@ const shortNumbers = timeFormat('%-m/%d');
 const iso = timeFormat('%Y-%m-%d');
 const local = timeFormat('%m/%d/%Y');
 const shortAbbrNth = timeFormat('%b %-d');
-const shortWeekdayAbbr = timeFormat('%a, %b %-d');
-const weekday = timeFormat('%A, %B %-d');
+const shortDayOfWeekAbbr = timeFormat('%a, %b %-d');
+const dayOfWeek = timeFormat('%A, %B %-d');
 
 export function formatDateShortNumbers(date?: Date): string {
   return !date ? '?' : shortNumbers(date);
@@ -22,16 +22,16 @@ export function formatDateShortAbbr(date?: Date): string {
   return !date ? '?' : shortAbbr(date);
 }
 
-export function formatDateShortWeekdayAbbr(date?: Date, nthSuffix = false): string {
-  return !date ? '?' : shortWeekdayAbbr(date) + (nthSuffix ? nth(date.getDate()) : '');
+export function formatDateShortDayOfWeekAbbr(date?: Date, nthSuffix = false): string {
+  return !date ? '?' : shortDayOfWeekAbbr(date) + (nthSuffix ? nth(date.getDate()) : '');
 }
 
-export function formatDateWeekday(date?: Date, nthSuffix = false): string {
-  return !date ? '?' : weekday(date) + (nthSuffix ? nth(date.getDate()) : '');
+export function formatDateDayOfWeek(date?: Date, nthSuffix = false): string {
+  return !date ? '?' : dayOfWeek(date) + (nthSuffix ? nth(date.getDate()) : '');
 }
 
-export function formatDateYearWeekdayAbbr(date?: Date, nthSuffix = false): string {
-  return !date ? '?' : formatDateShortWeekdayAbbr(date, nthSuffix) + ` ${date.getFullYear()}`;
+export function formatDateYearDayOfWeekAbbr(date?: Date, nthSuffix = false): string {
+  return !date ? '?' : formatDateShortDayOfWeekAbbr(date, nthSuffix) + ` ${date.getFullYear()}`;
 }
 
 function nth(d: number) {
diff --git a/src/modes/correlation/CorrelationTooltip.svelte b/src/modes/correlation/CorrelationTooltip.svelte
index 4dcd01340..2200cbd57 100644
--- a/src/modes/correlation/CorrelationTooltip.svelte
+++ b/src/modes/correlation/CorrelationTooltip.svelte
@@ -1,7 +1,7 @@
 <script>
   import { lagToOffset } from '../../data/correlation';
 
-  import { formatDateShortWeekdayAbbr } from '../../formats';
+  import { formatDateShortDayOfWeekAbbr } from '../../formats';
   import SensorValue from '../../components/SensorValue.svelte';
 
   export let hidden = false;
@@ -32,7 +32,7 @@
       </th>
     </tr>
     <tr>
-      <th>{formatDateShortWeekdayAbbr(item.x_date)}</th>
+      <th>{formatDateShortDayOfWeekAbbr(item.x_date)}</th>
       <td>
         <SensorValue sensor={primary} value={item.x} medium />
       </td>
@@ -47,7 +47,7 @@
     </tr>
     <tr>
       <th>
-        {formatDateShortWeekdayAbbr(item.y_date)}
+        {formatDateShortDayOfWeekAbbr(item.y_date)}
       </th>
       <td>
         <SensorValue sensor={secondary} value={item.y} medium />
diff --git a/src/modes/dashboard/widgets/LineChartWidget.svelte b/src/modes/dashboard/widgets/LineChartWidget.svelte
index 8af072c69..b0f5f3d28 100644
--- a/src/modes/dashboard/widgets/LineChartWidget.svelte
+++ b/src/modes/dashboard/widgets/LineChartWidget.svelte
@@ -23,7 +23,7 @@
   } from '../../../specs/lineSpec';
   import { annotationManager } from '../../../stores';
   import { combineSignals } from '../../../data/utils';
-  import { formatDateISO, formatDateShortWeekdayAbbr, formatDateYearWeekdayAbbr } from '../../../formats';
+  import { formatDateISO, formatDateShortDayOfWeekAbbr, formatDateYearDayOfWeekAbbr } from '../../../formats';
   import { WidgetHighlight } from '../highlight';
   import isEqual from 'lodash-es/isEqual';
   import { createEventDispatcher } from 'svelte';
@@ -99,7 +99,7 @@
       xTitle: sensor.xAxis,
       title: [
         `${sensor.name} in ${region.displayName}`,
-        `between ${formatDateYearWeekdayAbbr(timeFrame.min)} and ${formatDateShortWeekdayAbbr(timeFrame.max)}`,
+        `between ${formatDateYearDayOfWeekAbbr(timeFrame.min)} and ${formatDateShortDayOfWeekAbbr(timeFrame.max)}`,
       ],
       subTitle: sensor.unit,
       highlightRegion: false,
diff --git a/src/modes/dashboard/widgets/MapChartWidget.svelte b/src/modes/dashboard/widgets/MapChartWidget.svelte
index 54a6a3133..da5de6d42 100644
--- a/src/modes/dashboard/widgets/MapChartWidget.svelte
+++ b/src/modes/dashboard/widgets/MapChartWidget.svelte
@@ -4,7 +4,7 @@
   import { getContext } from 'svelte';
   import DownloadMenu from '../../../components/DownloadMenu.svelte';
   import { getLevelInfo, stats } from '../../../stores';
-  import { formatDateISO, formatDateYearWeekdayAbbr } from '../../../formats';
+  import { formatDateISO, formatDateYearDayOfWeekAbbr } from '../../../formats';
   import RegionMapTooltip from '../../../blocks/RegionMapTooltip.svelte';
   import {
     generateStateSpec,
@@ -73,7 +73,10 @@
     const options = {
       domain: sensor.domain($stats, level),
       scheme: sensor.value.vegaColorScale,
-      title: [`${sensor.name} in US ${getLevelInfo(level).labelPlural}`, `on ${formatDateYearWeekdayAbbr(date.value)}`],
+      title: [
+        `${sensor.name} in US ${getLevelInfo(level).labelPlural}`,
+        `on ${formatDateYearDayOfWeekAbbr(date.value)}`,
+      ],
       subTitle: sensor.unit,
       initialRegion: highlightToRegionsImpl(level, highlight),
       paddingTop: 60,
diff --git a/src/modes/dashboard/widgets/WidgetCard.svelte b/src/modes/dashboard/widgets/WidgetCard.svelte
index 09436673f..c932e2ff3 100644
--- a/src/modes/dashboard/widgets/WidgetCard.svelte
+++ b/src/modes/dashboard/widgets/WidgetCard.svelte
@@ -19,7 +19,7 @@
       ? date
       : date instanceof TimeFrame
       ? `between ${formatDateLocal(date.min)} and ${formatDateLocal(date.max)}`
-      : `on ${formatDateYearWeekdayAbbr(date.value)}`;
+      : `on ${formatDateYearDayOfWeekAbbr(date.value)}`;
   }
 
   function gridToStyle(grid) {
@@ -51,7 +51,7 @@
   import cogIcon from '!raw-loader!@fortawesome/fontawesome-free/svgs/solid/cog.svg';
   import expandAltIcon from '!raw-loader!@fortawesome/fontawesome-free/svgs/solid/expand-alt.svg';
   import compressAltIcon from '!raw-loader!@fortawesome/fontawesome-free/svgs/solid/compress-alt.svg';
-  import { formatDateLocal, formatDateYearWeekdayAbbr } from '../../../formats';
+  import { formatDateLocal, formatDateYearDayOfWeekAbbr } from '../../../formats';
   import { TimeFrame } from '../../../stores/params';
   import { createEventDispatcher } from 'svelte';
 
diff --git a/src/modes/indicator-status/IndicatorBackfill.svelte b/src/modes/indicator-status/IndicatorBackfill.svelte
index 9fa649117..65923d641 100644
--- a/src/modes/indicator-status/IndicatorBackfill.svelte
+++ b/src/modes/indicator-status/IndicatorBackfill.svelte
@@ -17,10 +17,10 @@
   } from './store';
   import DownloadMenu from '../../components/DownloadMenu.svelte';
   import {
-    backFillWeekdayDistribution,
+    backFillDayOfWeekDistribution,
     generateChangeHeatMapSpec,
     generateValueHeatMapSpec,
-    backFillWeekdayFrequency,
+    backFillDayOfWeekFrequency,
   } from './backfillSpec';
   import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
   import Search from '../../components/Search.svelte';
@@ -58,14 +58,14 @@
       });
   $: data = loadBackFillProfile(indicator, $currentRegionInfo || nationInfo, window, $anchorLag);
 
-  $: weekdaySpec = backFillWeekdayDistribution({
+  $: dayOfWeekSpec = backFillDayOfWeekDistribution({
     title: `${indicator.name}: ${$valueLabel}`,
-    subTitle: `per Lag (Reporting Date - Reference Date) per weekday`,
+    subTitle: `per Lag (Reporting Date - Reference Date) per day of week`,
     ...options,
   });
-  let vegaRefWeekday = undefined;
+  let vegaRefDayOfWeek = undefined;
 
-  $: weekdayBoxplotSpec = backFillWeekdayFrequency({
+  $: dayOfWeekBoxplotSpec = backFillDayOfWeekFrequency({
     title: `${indicator.name}: ${$valueLabel}`,
     subTitle: `Lag Distribution to reach 90%`,
     ...options,
@@ -172,25 +172,26 @@
   </div>
 </div>
 <AboutSection details className="uk-margin-small-top uk-margin-small-bottom">
-  <h3 slot="header" class="mobile-h3">Weekday Distributions</h3>
+  <h3 slot="header" class="mobile-h3">DayOfWeek Distributions</h3>
   <div class="desc">
-    In order to highlight weekday changes within reported values of the selected indicator the following charts are
-    stratified by weekday. The horizontal axis shows the lag while the vertical axis shows the fraction of value or the
-    day-to-day change based on the selection of the. Both values are described before. The line chart shows the median
-    fraction of value at the selected anchor lag. The vertical blue axis is showing the selected anchor date. This chart
-    gives insights on whether there are interesting weekday differences in the indicator.
+    In order to highlight day of week changes within reported values of the selected indicator the following charts are
+    stratified by day of week. The horizontal axis shows the lag while the vertical axis shows the fraction of value or
+    the day-to-day change based on the selection of the. Both values are described before. The line chart shows the
+    median fraction of value at the selected anchor lag. The vertical blue axis is showing the selected anchor date.
+    This chart gives insights on whether there are interesting day of week differences in the indicator.
     {#if !$isRelative}
-      The second chart shows a similar view to highlight on the weekday distribution but focuses on the distribution per
-      weekday when the first reported lag reached 90% of the fraction of the target anchor lag value. This illustrates
-      whether the anchor lag is a fitting choice when the box-plots are clearly below the anchor lag line in blue.
+      The second chart shows a similar view to highlight on the day of week distribution but focuses on the distribution
+      per day of week when the first reported lag reached 90% of the fraction of the target anchor lag value. This
+      illustrates whether the anchor lag is a fitting choice when the box-plots are clearly below the anchor lag line in
+      blue.
     {/if}
   </div>
 </AboutSection>
 <div class="grid-1 {$isRelative ? 'grid-span-12' : 'grid-span-6'} uk-margin-top">
   <div class="chart-300">
-    <Vega bind:this={vegaRefWeekday} spec={weekdaySpec} {data} />
+    <Vega bind:this={vegaRefDayOfWeek} spec={dayOfWeekSpec} {data} />
     <DownloadMenu
-      vegaRef={vegaRefWeekday}
+      vegaRef={vegaRefDayOfWeek}
       {data}
       absolutePos="bottom: -20px"
       fileName={title.replace(/\s+/gm, '_')}
@@ -201,7 +202,7 @@
 {#if !$isRelative}
   <div class="grid-7 grid-span-6 uk-margin-top">
     <div class="chart-300">
-      <Vega bind:this={vegaRefBoxplot} spec={weekdayBoxplotSpec} {data} />
+      <Vega bind:this={vegaRefBoxplot} spec={dayOfWeekBoxplotSpec} {data} />
       <DownloadMenu
         vegaRef={vegaRefBoxplot}
         {data}
diff --git a/src/modes/indicator-status/backfillSpec.ts b/src/modes/indicator-status/backfillSpec.ts
index debd6a653..7422014ab 100644
--- a/src/modes/indicator-status/backfillSpec.ts
+++ b/src/modes/indicator-status/backfillSpec.ts
@@ -228,7 +228,7 @@ export function injectClassification(spec: TopLevelSpec): void {
   ];
 }
 
-export function backFillWeekdayDistribution({
+export function backFillDayOfWeekDistribution({
   dateField,
   dateLabel,
   title,
@@ -252,10 +252,10 @@ export function backFillWeekdayDistribution({
     transform: [
       {
         calculate: `['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][day(datum.${dateField})]`,
-        as: 'weekday',
+        as: 'dayOfWeek',
       },
       {
-        groupby: ['lag', 'weekday'],
+        groupby: ['lag', 'dayOfWeek'],
         aggregate: [
           {
             op: 'median',
@@ -309,7 +309,7 @@ export function backFillWeekdayDistribution({
             },
           },
           color: {
-            field: 'weekday',
+            field: 'dayOfWeek',
             type: 'nominal',
             scale: {
               domain: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
@@ -373,7 +373,7 @@ export function backFillWeekdayDistribution({
   return spec;
 }
 
-export function backFillWeekdayFrequency({
+export function backFillDayOfWeekFrequency({
   dateField,
   dateLabel,
   title,
@@ -425,7 +425,7 @@ export function backFillWeekdayFrequency({
       },
       {
         calculate: `['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][day(datum.${dateField})]`,
-        as: 'weekday',
+        as: 'dayOfWeek',
       },
     ],
 
@@ -433,7 +433,7 @@ export function backFillWeekdayFrequency({
       {
         encoding: {
           x: {
-            field: 'weekday',
+            field: 'dayOfWeek',
             type: 'nominal',
             scale: {
               type: 'band',
diff --git a/src/modes/indicator/Indicator.svelte b/src/modes/indicator/Indicator.svelte
index 76e02e74f..80eb04f9e 100644
--- a/src/modes/indicator/Indicator.svelte
+++ b/src/modes/indicator/Indicator.svelte
@@ -14,7 +14,7 @@
   import RegionDatePicker from '../../components/RegionDatePicker.svelte';
   import { currentRegionInfo, currentSensorEntry, currentDateObject, times } from '../../stores';
   import { SensorParam, DateParam, RegionParam, DataFetcher } from '../../stores/params';
-  import { formatDateWeekday } from '../../formats';
+  import { formatDateDayOfWeek } from '../../formats';
   import { afterUpdate } from 'svelte';
   import { scrollIntoView } from '../../util';
   import IndicatorWarning from '../../blocks/IndicatorWarning.svelte';
@@ -65,7 +65,7 @@
       <IndicatorWarning {sensor} {date} {region} />
 
       <p>
-        On {formatDateWeekday(date.value)}
+        On {formatDateDayOfWeek(date.value)}
         <MaxDateHint sensor={sensor.value} level={region.level} suffix="," />
         the {sensor.valueUnit} was:
       </p>
diff --git a/src/modes/summary/AllIndicatorOverview.svelte b/src/modes/summary/AllIndicatorOverview.svelte
index 34d833a30..042f8d1d8 100644
--- a/src/modes/summary/AllIndicatorOverview.svelte
+++ b/src/modes/summary/AllIndicatorOverview.svelte
@@ -1,7 +1,7 @@
 <script>
   import FancyHeader from '../../components/FancyHeader.svelte';
   import { sensorList } from '../../stores';
-  import { formatDateYearWeekdayAbbr } from '../../formats';
+  import { formatDateYearDayOfWeekAbbr } from '../../formats';
   import AllIndicatorsText from './AllIndicatorsText.svelte';
 
   /**
@@ -64,7 +64,7 @@
       are
       <strong>have changed</strong> or are <strong>not available</strong>
       for
-      {formatDateYearWeekdayAbbr(date.value)}.
+      {formatDateYearDayOfWeekAbbr(date.value)}.
     {/if}
   {/await}
 </p>
diff --git a/src/modes/summary/CasesOverview.svelte b/src/modes/summary/CasesOverview.svelte
index bcbca6ff8..e00abc96c 100644
--- a/src/modes/summary/CasesOverview.svelte
+++ b/src/modes/summary/CasesOverview.svelte
@@ -2,7 +2,7 @@
   import KPIValue from '../../components/KPIValue.svelte';
   import TrendIndicator from '../../components/TrendIndicator.svelte';
   import { CASES, DEATHS } from '../../stores/params';
-  import { formatDateWeekday } from '../../formats';
+  import { formatDateDayOfWeek } from '../../formats';
   import SensorUnit from '../../components/SensorUnit.svelte';
   import IndicatorAnnotations from '../../components/IndicatorAnnotations.svelte';
   import MaxDateHint from '../../blocks/MaxDateHint.svelte';
@@ -30,7 +30,7 @@
 <IndicatorAnnotations {date} {region} sensor={CASES} range="sparkLine" />
 
 <p>
-  On {formatDateWeekday(date.value)}
+  On {formatDateDayOfWeek(date.value)}
   <MaxDateHint sensor={CASES.value} level={region.level} suffix="," />
   the {CASES.valueUnit}s were:
 </p>
diff --git a/src/modes/summary/HighlightIndicators.svelte b/src/modes/summary/HighlightIndicators.svelte
index adf75dba9..67fb14d05 100644
--- a/src/modes/summary/HighlightIndicators.svelte
+++ b/src/modes/summary/HighlightIndicators.svelte
@@ -4,7 +4,7 @@
   import FancyHeader from '../../components/FancyHeader.svelte';
   import TrendIndicator from '../../components/TrendIndicator.svelte';
   import { SensorParam } from '../../stores/params';
-  import { formatDateWeekday } from '../../formats';
+  import { formatDateDayOfWeek } from '../../formats';
   import SensorUnit from '../../components/SensorUnit.svelte';
   import MaxDateHint from '../../blocks/MaxDateHint.svelte';
 
@@ -36,7 +36,7 @@
 <FancyHeader sub="Indicators">Key</FancyHeader>
 
 <p>
-  On {formatDateWeekday(date.value)}
+  On {formatDateDayOfWeek(date.value)}
   {#if highlightSensors.length > 0}
     <MaxDateHint sensor={highlightSensors[0].sensor.value} level={region.level} suffix="," />
   {:else}
diff --git a/src/modes/survey-results/SurveyQuestion.svelte b/src/modes/survey-results/SurveyQuestion.svelte
index f09dac647..490e742ae 100644
--- a/src/modes/survey-results/SurveyQuestion.svelte
+++ b/src/modes/survey-results/SurveyQuestion.svelte
@@ -4,7 +4,7 @@
   import linkIcon from '!raw-loader!@fortawesome/fontawesome-free/svgs/solid/link.svg';
   import HistoryLineChart from '../../blocks/HistoryLineChart.svelte';
   import IndicatorOverview from '../../blocks/IndicatorOverview.svelte';
-  import { formatDateYearWeekdayAbbr } from '../../formats';
+  import { formatDateYearDayOfWeekAbbr } from '../../formats';
   import IndicatorStatsLine from '../../blocks/IndicatorStatsLine.svelte';
   import IndicatorRevisions from './IndicatorRevisions.svelte';
   import WarningBanner from '../../components/WarningBanner.svelte';
@@ -92,7 +92,7 @@
 
     <p>
       On
-      {formatDateYearWeekdayAbbr(date.value, true)}
+      {formatDateYearDayOfWeekAbbr(date.value, true)}
       <MaxDateHint sensor={refSensor} level={region.level} />
       the 7 day average of
       <strong>{sensor.name}</strong>
@@ -102,7 +102,7 @@
     <IndicatorOverview {sensor} {date} {region} {fetcher}>
       The indicator <strong>{sensor.name}</strong> was added in
       <a href={question.addedInWave.link}>{question.addedInWave.name}</a>
-      of the Delphi survey published on {formatDateYearWeekdayAbbr(question.addedInWave.published, true)}.
+      of the Delphi survey published on {formatDateYearDayOfWeekAbbr(question.addedInWave.published, true)}.
     </IndicatorOverview>
 
     <hr />

From ee9f0a2fb6c1663d8e72da8d4c3f69118f684962 Mon Sep 17 00:00:00 2001
From: Samuel Gratzl <sam@sgratzl.com>
Date: Tue, 25 May 2021 09:55:35 -0400
Subject: [PATCH 31/31] docs: fix typo

---
 src/modes/indicator-status/IndicatorBackfill.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modes/indicator-status/IndicatorBackfill.svelte b/src/modes/indicator-status/IndicatorBackfill.svelte
index 65923d641..8f2b9e7e3 100644
--- a/src/modes/indicator-status/IndicatorBackfill.svelte
+++ b/src/modes/indicator-status/IndicatorBackfill.svelte
@@ -172,7 +172,7 @@
   </div>
 </div>
 <AboutSection details className="uk-margin-small-top uk-margin-small-bottom">
-  <h3 slot="header" class="mobile-h3">DayOfWeek Distributions</h3>
+  <h3 slot="header" class="mobile-h3">Day of Week Distributions</h3>
   <div class="desc">
     In order to highlight day of week changes within reported values of the selected indicator the following charts are
     stratified by day of week. The horizontal axis shows the lag while the vertical axis shows the fraction of value or