Merge pull request #7991 from cfpb/cct-on-sc

Trim and tweak simple-chart code to work with cct

cfgov/unprocessed/css/on-demand/simple-chart.less

@@ -260,6 +260,16 @@
     margin-top: unit(45 / @size-vi, em);
     padding-top: unit(15 / @size-vi, em);
   }
+
+  .cct {
+    .highcharts-series-0 .highcharts-graph {
+      stroke-width: 3px;
+    }
+
+    .highcharts-series-1 .highcharts-graph {
+      stroke-width: 1px;
+    }
+  }
 }
 
 .highcharts-legend-item-hidden * {

cfgov/unprocessed/js/routes/on-demand/simple-chart/chart-hooks.js

@@ -24,6 +24,16 @@ const hooks = {
     }));
   },
 
+  cct_yoy_transform(d) {
+    return d['Number of Loans'].map((v, i) => {
+      return {
+        x: v[0],
+        loans: v[1] * 100,
+        volume: d['Dollar Volume'][i][1] * 100,
+      };
+    });
+  },
+
   getDateString(x) {
     return new Date(x).toLocaleDateString('en-US', {
       month: 'short',

cfgov/unprocessed/js/routes/on-demand/simple-chart/data-filters.js

@@ -280,4 +280,4 @@ function attachFilters(selectors, chart, dataAttributes, data) {
   });
 }
 
-export { initFilters, makeSelectFilterDOM };
+export { initFilters };

cfgov/unprocessed/js/routes/on-demand/simple-chart/simple-chart.js

@@ -299,7 +299,6 @@ function buildChart(chartNode) {
 
       initFilters(dataAttributes, chartNode, chart, data);
     }
-
     // Make sure chart is displayed properly on print
     window.matchMedia('print').addListener(function () {
       chart.reflow();

cfgov/unprocessed/js/routes/on-demand/simple-chart/tilemap-chart.js

@@ -1,10 +1,8 @@
 import Highmaps from 'highcharts/highmaps';
 import tilemap from 'highcharts/modules/tilemap';
 import cloneDeep from 'lodash.clonedeep';
-import chartHooks from './chart-hooks.js';
 import defaultTilemap from './tilemap-styles.js';
 import usLayout from './us-layout.js';
-import { makeSelectFilterDOM } from './data-filters.js';
 import { alignMargin, formatSeries, overrideStyles } from './utils.js';
 
 tilemap(Highmaps);
@@ -54,58 +52,6 @@ function makeTilemapOptions(data, dataAttributes) {
   return defaultObj;
 }
 
-/**
- * Builds the tilemap filter DOM
- * @param {object} chartNode - The node where the chart lives
- * @param {object} chart - The chart object
- * @param {object} data - The data object
- * @param {object} transform - Whether data has been transformed
- */
-function makeTilemapSelect(chartNode, chart, data, transform) {
-  let d;
-  if (transform) d = data.transformed;
-  else d = data.raw;
-
-  const options = getTilemapDates(d);
-  const selectNode = makeSelectFilterDOM(options, chartNode, {
-    key: 'tilemap',
-    label: 'Select date',
-  }).nodes[0];
-
-  attachTilemapFilter(selectNode, chart, data);
-}
-
-/**
- * Extracts all dates from an object/csv formatted for tilemap display
- * @param {object} data - The data object
- * @returns {Array} Extracted dates
- */
-function getTilemapDates(data) {
-  return Object.keys(data[0])
-    .filter((k) => !isNaN(new Date(k)))
-    .sort((a, b) => new Date(b) - new Date(a));
-}
-
-/**
- * Wires up the tilemap filter
- * @param {object} select - The select node
- * @param {object} chart - The chart object
- * @param {object} data - The data object
- */
-function attachTilemapFilter(select, chart, data) {
-  select.addEventListener('change', (evt) => {
-    const formatted = formatSeries(data);
-    const updated = getMapConfig(formatted, evt.target.value);
-    chart.update(updated);
-    const updatedTitleObj = chart.options.yAxis[0].title;
-    updateTilemapLegend(
-      chart.renderTo,
-      updated,
-      updatedTitleObj ? updatedTitleObj.text : '',
-    );
-  });
-}
-
 /**
  * Makes a legend for the tilemap
  * @param {object} node - The chart node
@@ -141,40 +87,21 @@ function updateTilemapLegend(node, data, legendTitle) {
 }
 
 /**
- * Intuits the correct object key for state short codes
- * @param {object} data - A row of data as an object with headers as keys
- * @returns {string} The intuited shortcode
- */
-function getShortCode(data) {
-  const keys = Object.keys(data);
-  for (let i = 0; i < keys.length; i++) {
-    if (usLayout[data[keys[i]]]) return keys[i];
-  }
-  /* eslint-disable-next-line no-console */
-  return console.error(
-    'Unable to determine state shortcode. Data is misformatted for simple-chart.',
-  );
-}
-
-/**
- * Adds generates a config object to be added to the chart config
+ * Generates a config object to be added to the chart config
  * @param {Array} series - The formatted series data
- * @param {string} date - The date to use
  * @returns {Array} series data with a geographic component added
  */
-function getMapConfig(series, date) {
+function getMapConfig(series) {
   let min = Infinity;
   let max = -Infinity;
   const data = series[0].data;
-  const shortCode = getShortCode(data[0]);
-  if (!date) date = getTilemapDates(data)[0];
   const added = data.map((v) => {
-    const val = Math.round(Number(v[date]) * 100) / 100;
+    const val = Math.round(Number(v.value) * 100) / 100;
     if (val <= min) min = val;
     if (val >= max) max = val;
     return {
-      ...usLayout[v[shortCode]],
-      state: v[shortCode],
+      ...usLayout[v.name],
+      state: v.name,
       value: val,
     };
   });
@@ -229,7 +156,7 @@ function getMapConfig(series, date) {
  * @returns {object} The initialized chart object
  */
 function init(chartNode, target, data, dataAttributes) {
-  const { transform, yAxisLabel } = dataAttributes;
+  const { yAxisLabel } = dataAttributes;
   const tilemapOptions = makeTilemapOptions(data, dataAttributes);
   const chart = Highmaps.mapChart(target, tilemapOptions);
 
@@ -239,8 +166,6 @@ function init(chartNode, target, data, dataAttributes) {
   legend.style.display = 'block';
   updateTilemapLegend(target, tilemapOptions, yAxisLabel);
 
-  makeTilemapSelect(chartNode, chart, data, transform && chartHooks[transform]);
-
   /**
    * Fixes tilemap clipping
    */

cfgov/unprocessed/js/routes/on-demand/simple-chart/utils.js

@@ -141,7 +141,6 @@ function extractSeries(rawData, { series, xAxisSource, chartType }) {
         name,
         data: currArr,
       };
-
       rawData.forEach((obj) => {
         let d = Number(obj[key]);
         if (chartType === 'datetime') {

cfgov/v1/jinja2/v1/includes/organisms/simple-chart.html

@@ -30,7 +30,7 @@ <h5>Figure {{ value.figure_number }}</h5>
     {% endif %}
 
     {% if value.title %}
-    <a class="chart-anchor" id="chart-{{value.title}}" href="#chart-{{ value.title}}"><h2 class="o-simple-chart_title">{{ value.title }}</h2></a>
+    <a class="chart-anchor" id="chart-{{value.title}}" href="#chart-{{ value.title}}"><h3 class="o-simple-chart_title">{{ value.title }}</h3></a>
     {% endif %}
 
     {% if value.subtitle %}