update chart styles to match midd-frontend styles

closes #184
middlebury · Nov 20, 2019 · 2cf2c84 · 2cf2c84
1 parent 26428b0
commit 2cf2c84
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 22 deletions.
diff --git a/src/js/chart-loader.js b/src/js/chart-loader.js
@@ -1,35 +1,79 @@
 const chartColors = [
-  '#0D395F',
-  '#97BBD5',
-  '#3D617F',
-  '#ACC9DD',
-  '#6E889F',
-  '#C1D6E6',
-  '#9EB0BF',
-  '#D5E4EE',
-  '#CFD7DF',
-  '#EAF1F7'
+  '#0d395f',
+  '#1f9f8b',
+  '#c26533',
+  '#8f9a17',
+  '#f4b824',
+  '#763649',
+  '#D3B885',
+  '#907036'
 ];
 
-function makeChart(elem, {type = 'pie', data, label, labels}) {
+function addLegend(el, chart) {
+  // add html legend
+  const legend = chart.generateLegend();
+  const legendtag = document.createElement('div');
+  legendtag.classList.add('chart-legend');
+  legendtag.innerHTML = legend;
+
+  // Append to the 'chart' class.
+  // Ideally we should use Element.closest() here but it's not polyfilled.
+  // we don't append to `chart__container` since it's for maintaining the aspect ratio.
+  el.parentElement.parentElement.appendChild(legendtag);
+}
+
+function makeChart(elem, { type = 'pie', data, label, labels }) {
+  const ChartJS = window.Chart;
+  const isCircleChart = type === 'pie' || type === 'doughnut';
+
+  const getItemColor = i => (isCircleChart ? chartColors : chartColors[i]);
+
+  const datasets = [{ data, labels }];
+
+  ChartJS.defaults.global.defaultFontColor = '#222';
+  ChartJS.defaults.global.defaultFontFamily =
+    'whitney ssm a, whitney ssm b, arial, verdana, sans-serif';
+  ChartJS.defaults.global.defaultFontSize = 14;
+  ChartJS.defaults.doughnut.cutoutPercentage = 80;
+
   const defaultOptions = {
     maintainAspectRatio: false,
     legend: {
-      position: 'bottom'
+      display: false // remove legend so we can have finer control over its styles
+    },
+    tooltips: {
+      displayColors: false,
+      backgroundColor: '#fff',
+      titleFontColor: '#222',
+      titleFontSize: 16,
+      bodyFontColor: '#222',
+      bodyFontSize: 14,
+      yPadding: 8,
+      xPadding: 8,
+      caretSize: 0,
+      cornerRadius: 0,
+      borderWidth: 1,
+      borderColor: '#ccc'
     }
   };
 
   if (type === 'bar' || type === 'horizontalBar') {
     defaultOptions.scales = {
       xAxes: [
         {
+          scaleLabel: {
+            display: !!label,
+            labelString: label
+          },
+          maxBarThickness: 32,
           ticks: {
             beginAtZero: true
           }
         }
       ],
       yAxes: [
         {
+          maxBarThickness: 32,
           ticks: {
             beginAtZero: true
           }
@@ -38,21 +82,24 @@ function makeChart(elem, {type = 'pie', data, label, labels}) {
     };
   }
 
-  new window.Chart(elem, {
+  const chart = new ChartJS(elem, {
     type,
     options: defaultOptions,
     data: {
-      datasets: [
-        {
-          data,
-          label,
-          // colors need to be set based on length of data then repeat if data exceeds the amount of colors
-          backgroundColor: chartColors
-        }
-      ],
+      datasets: datasets.map((d, i) => {
+        const color = getItemColor(i);
+        return Object.assign({}, d, {
+          borderColor: 'white',
+          backgroundColor: color
+        });
+      }),
       labels
     }
   });
+
+  if (isCircleChart) {
+    addLegend(elem, chart);
+  }
 }
 
 function loadChart(selector, chartConfig) {
@@ -63,7 +110,7 @@ function loadChart(selector, chartConfig) {
   io.observe(elem);
 
   function handleIntersection(entries) {
-    entries.forEach(function (entry) {
+    entries.forEach(function(entry) {
       if (entry.intersectionRatio > 0) {
         makeChart(elem, chartConfig);
         io.unobserve(entry.target);

diff --git a/src/scss/components/_chart.scss b/src/scss/components/_chart.scss
@@ -50,3 +50,49 @@
     @include make-col(4);
   }
 }
+
+// chart legend
+
+.chart-legend {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  justify-content: center;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    font-size: 14px;
+    margin-bottom: 4px;
+  }
+
+  span {
+    display: inline-block;
+    background: $gray-light;
+    width: 16px;
+    height: 8px;
+    margin-right: 8px;
+  }
+}
+
+.chart-legend--inline {
+  ul {
+    @include media(md) {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+
+  li {
+    flex: 0 0 auto;
+    @include media(md) {
+      &:not(:last-child) {
+        margin-right: 1rem;
+      }
+    }
+  }
+}