feat: add charts page

package.json

@@ -19,15 +19,19 @@
     "d3": "3.5.17",
     "expose-loader": "^0.7.5",
     "express": "^4.16.4",
+    "easy-pie-chart": "^2.1.7",
     "font-awesome": "4.7.0",
+    "flot": "^0.8.0-alpha",
     "glyphicons-halflings": "^1.9.1",
+    "govpredict-morris": "^0.5.1",
     "imports-loader": "^0.8.0",
     "jquery": "^3.3.1",
     "jquery-mapael": "^2.2.0",
     "jquery-sparkline": "2.4.0",
     "line-awesome": "icons8/line-awesome",
     "messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
     "node-sass": "^4.9.0",
+    "nvd3": "1.8.6",
     "sass-loader": "^7.0.1",
     "v-calendar": "^0.9.7",
     "vue": "^2.5.17",

src/Routes.js

@@ -7,6 +7,7 @@ import Tables from '@/pages/Tables/Tables';
 import Notifications from '@/pages/Notifications/Notifications';
 import Icons from '@/pages/Icons/Icons';
 import Maps from '@/pages/Maps/Maps';
+import Charts from '@/pages/Charts/Charts';
 import Dashboard from '@/pages/Dashboard/Dashboard';
 import Login from '@/pages/Login/Login';
 import ErrorPage from '@/pages/Error/Error';
@@ -61,6 +62,11 @@ export default new Router({
           name: 'Maps',
           component: Maps,
         },
+        {
+          path: 'components/charts',
+          name: 'Charts',
+          component: Charts,
+        },
       ],
     },
     {

src/pages/Charts/Charts.scss

@@ -0,0 +1,72 @@
+@import '../../styles/app';
+
+.charts-overview {
+  /*       NVD3      */
+  .nvtooltip {
+    padding: $padding-small-vertical $padding-small-horizontal;
+    font-family: $font-family-base;
+    font-size: $font-size-sm;
+    text-align: center;
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+
+    h3 {
+      background: none;
+      border-bottom: 0;
+    }
+  }
+
+  svg text {
+    font: $font-weight-base $font-size-sm $font-family-base;
+    fill: $text-color;
+  }
+
+  svg .title {
+    font: $font-weight-bold $font-size-base $font-family-base;
+  }
+
+  .nvd3.nv-noData {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-bold;
+  }
+
+  .nvd3 .nv-axis path.domain {
+    stroke-opacity: 0;
+  }
+
+  .nv-controlsWrap {
+    .nv-legend-symbol {
+      fill: #666 !important;
+      stroke: #666 !important;
+    }
+  }
+
+  /*         Flot        */
+  .chart-tooltip {
+    position: fixed;
+    padding: $padding-small-vertical $padding-small-horizontal;
+    border: 1px solid $gray-600;
+    font-size: $font-size-mini;
+    background-color: $white;
+  }
+
+  /*   Easy Pie Chart    */
+  .easy-pie-chart {
+    position: relative;
+    display: inline-block;
+    line-height: 120px;
+    height: 120px;
+    width: 120px;
+    text-align: center;
+    color: $gray-600;
+
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+}