Merge pull request #40 from brown-ccv/feat-charts

Port Dashboard and Charting components from Buoy Viewer

.eslintrc.js

@@ -1,25 +1,25 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: 'babel-eslint',
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },
   overrides: [
     {
       files: [
         '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+        '**/tests/unit/**/*.spec.{j,t}s?(x)',
       ],
       env: {
-        jest: true
-      }
-    }
-  ]
+        jest: true,
+      },
+    },
+  ],
 };

.prettierrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   singleQuote: true,
-  semi: true
+  semi: true,
 };

jest.config.js

@@ -8,4 +8,5 @@ module.exports = {
   ],
   coverageReporters: ['html', 'text-summary'],
   coverageDirectory: 'coverage',
+  setupFiles: ['jest-canvas-mock'],
 };

package.json

@@ -33,11 +33,15 @@
     "deploy": "firebase deploy"
   },
   "dependencies": {
-    "@brown-ccv/disco-styles": "2.2.2",
+    "@brown-ccv/disco-styles": "2.3.0",
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/vue-fontawesome": "2",
     "bulma": "^0.9.0",
     "bulma-helpers": "^0.3.12",
+    "lodash": "^4.17.20",
+    "vega": "^5.17.0",
+    "vega-embed": "^6.12.2",
+    "vega-lite": "^4.17.0",
     "vue-bulma": "0.0.35",
     "vue-svg-loader": "^0.16.0"
   },
@@ -76,7 +80,7 @@
     "@vue/test-utils": "1.0.4",
     "babel-eslint": "^10.1.0",
     "babel-preset-vue": "^2.0.2",
-    "chromedriver": "^84.0.1",
+    "chromedriver": "^86.0.0",
     "cross-env": "^7.0.2",
     "cz-conventional-changelog": "^3.1.0",
     "eslint": "^7.7.0",
@@ -85,6 +89,7 @@
     "firebase-tools": "^8.8.1",
     "geckodriver": "^1.20.0",
     "git-cz": "^4.7.0",
+    "jest-canvas-mock": "^2.3.0",
     "lint-staged": "^10.2.11",
     "minimist": "^1.2.5",
     "nightwatch-accessibility": "^1.8.0",

src/components/d-banner.vue

@@ -8,6 +8,7 @@
     <button
       @click="dismiss()"
       class="d-button-delete is-pulled-right"
+      aria-label="dismiss"
       data-testid="dismiss"
     ></button>
     <div

src/components/d-base-dashboard.vue

@@ -0,0 +1,13 @@
+<template>
+  <main>
+    <nav class="dashboard-nav">
+      <slot name="nav"></slot>
+    </nav>
+    <header class="dashboard-header">
+      <slot name="header"></slot>
+    </header>
+    <section class="dashboard-section">
+      <slot name="section"></slot>
+    </section>
+  </main>
+</template>

src/components/d-chart-container.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="chart-container" :class="['is-' + width]">
+    <header class="chart-header">
+      <h2 class="title"><slot name="title"></slot></h2>
+      <h3 class="description"><slot name="description"></slot></h3>
+    </header>
+    <section class="chart">
+      <slot name="chart"></slot>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    width: {
+      type: String,
+      default: 'full',
+      validator: function (value) {
+        return (
+          ['full', 'one-third', 'half', 'two-thirds'].indexOf(value) !== -1
+        );
+      },
+    },
+  },
+};
+</script>

src/components/d-chart-heatmap.vue

@@ -0,0 +1,107 @@
+<script>
+import vegaBaseMixin from '@/mixins/vega-base-mixin.js';
+
+export default {
+  mixins: [vegaBaseMixin],
+  props: {
+    variable: {
+      type: String,
+      required: true,
+    },
+    x: {
+      type: String,
+      required: true,
+    },
+    xLabel: {
+      type: String,
+      required: true,
+    },
+    y: {
+      type: String,
+      required: true,
+    },
+    yLabel: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    baseSpec() {
+      return {
+        $schema: 'https://vega.github.io/schema/vega/v5.json',
+        height: this.height,
+        data: {
+          name: 'data',
+          values: this.dataset,
+        },
+        scales: [
+          {
+            name: 'x',
+            type: 'band',
+            domain: { data: 'data', field: this.x },
+            range: 'width',
+          },
+          {
+            name: 'y',
+            type: 'band',
+            domain: { data: 'data', field: this.y },
+            range: 'height',
+          },
+          {
+            name: 'color',
+            type: 'linear',
+            range: { scheme: 'tealblues' },
+            domain: { data: 'data', field: this.variable },
+            reverse: false,
+            zero: false,
+            nice: true,
+          },
+        ],
+        axes: [
+          {
+            orient: 'bottom',
+            scale: 'x',
+            domain: false,
+            title: this.xLabel,
+            labelOverlap: 'parity',
+          },
+          {
+            orient: 'left',
+            scale: 'y',
+            domain: false,
+            title: this.yLabel,
+          },
+        ],
+        legends: [
+          {
+            title: this.variable,
+            fill: 'color',
+            type: 'gradient',
+            gradientLength: { signal: 'height' },
+          },
+        ],
+        marks: [
+          {
+            type: 'rect',
+            from: { data: 'data' },
+            encode: {
+              enter: {
+                x: { scale: 'x', field: this.x },
+                y: { scale: 'y', field: this.y },
+                width: { scale: 'x', band: 1 },
+                height: { scale: 'y', band: 1 },
+                tooltip: {
+                  signal: `{'${this.xLabel}': datum.${this.x}, '${this.yLabel}': datum.${this.y}, 'Count': datum.${this.variable}}`,
+                },
+              },
+              update: {
+                fill: { scale: 'color', field: this.variable },
+              },
+            },
+          },
+        ],
+      };
+    },
+  },
+};
+</script>