diff --git a/cfgov/unprocessed/css/on-demand/simple-chart.less b/cfgov/unprocessed/css/on-demand/simple-chart.less index fc715361c86..f062e6940f5 100644 --- a/cfgov/unprocessed/css/on-demand/simple-chart.less +++ b/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 * { diff --git a/cfgov/unprocessed/js/routes/on-demand/simple-chart/chart-hooks.js b/cfgov/unprocessed/js/routes/on-demand/simple-chart/chart-hooks.js index 8372606bf66..bb30c130caf 100644 --- a/cfgov/unprocessed/js/routes/on-demand/simple-chart/chart-hooks.js +++ b/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', diff --git a/cfgov/unprocessed/js/routes/on-demand/simple-chart/data-filters.js b/cfgov/unprocessed/js/routes/on-demand/simple-chart/data-filters.js index 0f2e6c572e8..b42e7876e30 100644 --- a/cfgov/unprocessed/js/routes/on-demand/simple-chart/data-filters.js +++ b/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 }; diff --git a/cfgov/unprocessed/js/routes/on-demand/simple-chart/simple-chart.js b/cfgov/unprocessed/js/routes/on-demand/simple-chart/simple-chart.js index ab56559aed7..e094e7bcc97 100644 --- a/cfgov/unprocessed/js/routes/on-demand/simple-chart/simple-chart.js +++ b/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(); diff --git a/cfgov/unprocessed/js/routes/on-demand/simple-chart/tilemap-chart.js b/cfgov/unprocessed/js/routes/on-demand/simple-chart/tilemap-chart.js index 7e1ae359406..b4e5be434f2 100644 --- a/cfgov/unprocessed/js/routes/on-demand/simple-chart/tilemap-chart.js +++ b/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 */ diff --git a/cfgov/unprocessed/js/routes/on-demand/simple-chart/utils.js b/cfgov/unprocessed/js/routes/on-demand/simple-chart/utils.js index 602563316ff..1102c38f04e 100644 --- a/cfgov/unprocessed/js/routes/on-demand/simple-chart/utils.js +++ b/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') { diff --git a/cfgov/v1/jinja2/v1/includes/organisms/simple-chart.html b/cfgov/v1/jinja2/v1/includes/organisms/simple-chart.html index 99117ddb4ce..6ff59ffe3ee 100644 --- a/cfgov/v1/jinja2/v1/includes/organisms/simple-chart.html +++ b/cfgov/v1/jinja2/v1/includes/organisms/simple-chart.html @@ -30,7 +30,7 @@