From 7d307fb0f2666f351afbb1c172dc95987d0c47dc Mon Sep 17 00:00:00 2001 From: Jake Mensch Date: Wed, 8 Apr 2020 22:45:43 -0700 Subject: [PATCH] comparison set colors tied to set number instead of district type --- .../Comparison/FrequencyComparison.jsx | 40 +++++++++-------- .../Comparison/TimeToCloseComparison.jsx | 24 +++++----- .../Comparison/TotalRequestsComparison.jsx | 40 +++++++++-------- .../chartExtras/ComparisonCriteria.jsx | 39 +++++++++------- .../chartExtras/ComparisonLegend.jsx | 45 ++++++++++--------- src/components/common/CONSTANTS.js | 15 ++++++- 6 files changed, 115 insertions(+), 88 deletions(-) diff --git a/src/components/Comparison/FrequencyComparison.jsx b/src/components/Comparison/FrequencyComparison.jsx index cbc397e66..d7a4724aa 100644 --- a/src/components/Comparison/FrequencyComparison.jsx +++ b/src/components/Comparison/FrequencyComparison.jsx @@ -2,19 +2,18 @@ import React from 'react'; import PropTypes from 'proptypes'; import { connect } from 'react-redux'; import moment from 'moment'; -import { DISTRICT_TYPES } from '@components/common/CONSTANTS'; +import { DISTRICT_TYPES, COMPARISON_SETS } from '@components/common/CONSTANTS'; import Chart from '@components/Chart'; import ChartExportSelect from '@components/export/ChartExportSelect'; const FrequencyComparison = ({ bins, - set1, - set2, + sets, }) => { /* /// DATA /// */ - const getDataSet = set => { - const { district, counts } = set; + const getDataSet = setId => { + const { district, counts } = sets[setId]; const totals = Array.from({ length: bins.length - 1 }).map((_, idx) => ( Object.keys(counts).reduce((acc, name) => ( @@ -22,8 +21,9 @@ const FrequencyComparison = ({ ), 0) )); - const color = DISTRICT_TYPES.find(t => t.id === district)?.color; - const label = DISTRICT_TYPES.find(t => t.id === district)?.name; + const { color, name: setName } = COMPARISON_SETS[setId]; + const label = DISTRICT_TYPES.find(t => t.id === district)?.name + .replace(' District', ` (${setName})`); return { data: totals, @@ -38,8 +38,8 @@ const FrequencyComparison = ({ const chartData = { labels: bins.slice(0, -1).map(bin => moment(bin).format('MMM D')), datasets: [ - getDataSet(set1), - getDataSet(set2), + getDataSet('set1'), + getDataSet('set2'), ], }; @@ -108,20 +108,24 @@ const FrequencyComparison = ({ const mapStateToProps = state => ({ bins: state.comparisonData.frequency.bins, - set1: state.comparisonData.frequency.set1, - set2: state.comparisonData.frequency.set2, + sets: { + set1: state.comparisonData.frequency.set1, + set2: state.comparisonData.frequency.set2, + }, }); export default connect(mapStateToProps)(FrequencyComparison); FrequencyComparison.propTypes = { bins: PropTypes.arrayOf(PropTypes.string).isRequired, - set1: PropTypes.shape({ - district: PropTypes.string, - counts: PropTypes.shape({}).isRequired, - }).isRequired, - set2: PropTypes.shape({ - district: PropTypes.string, - counts: PropTypes.shape({}).isRequired, + sets: PropTypes.shape({ + set1: PropTypes.shape({ + district: PropTypes.string, + counts: PropTypes.shape({}), + }), + set2: PropTypes.shape({ + district: PropTypes.string, + counts: PropTypes.shape({}), + }), }).isRequired, }; diff --git a/src/components/Comparison/TimeToCloseComparison.jsx b/src/components/Comparison/TimeToCloseComparison.jsx index 907e62078..d1c02e8b5 100644 --- a/src/components/Comparison/TimeToCloseComparison.jsx +++ b/src/components/Comparison/TimeToCloseComparison.jsx @@ -2,37 +2,33 @@ import React from 'react'; import PropTypes from 'proptypes'; import { connect } from 'react-redux'; import Chart, { ChartTooltip as Tooltip } from '@components/Chart'; -import { DISTRICT_TYPES, COUNCILS } from '@components/common/CONSTANTS'; +import { COUNCILS, COMPARISON_SETS } from '@components/common/CONSTANTS'; import ChartExportSelect from '@components/export/ChartExportSelect'; const TimeToCloseComparison = ({ - timeToClose: { set1, set2 }, + timeToClose, }) => { /* /// DATA /// */ - const boxColors = { - nc: DISTRICT_TYPES.find(t => t.id === 'nc')?.color, - cc: DISTRICT_TYPES.find(t => t.id === 'cc')?.color, - }; - const boxLabels = { nc: id => COUNCILS.find(c => parseInt(id, 10) === c.id).name, cc: name => `District ${name}`, }; - const getBoxes = ({ district, data }) => ( - Object.keys(data) + const getBoxes = setId => { + const { district, data } = timeToClose[setId]; + return Object.keys(data) .filter(name => data[name].count !== 0) .map(name => ({ label: boxLabels[district](name), - color: boxColors[district], + color: COMPARISON_SETS[setId].color, stats: { ...data[name], outliers: [] }, - })) - ); + })); + }; const boxes = [ - ...getBoxes(set1), - ...getBoxes(set2), + ...getBoxes('set1'), + ...getBoxes('set2'), ]; const chartData = { diff --git a/src/components/Comparison/TotalRequestsComparison.jsx b/src/components/Comparison/TotalRequestsComparison.jsx index 0c9a2b03f..e0f31f69e 100644 --- a/src/components/Comparison/TotalRequestsComparison.jsx +++ b/src/components/Comparison/TotalRequestsComparison.jsx @@ -2,19 +2,18 @@ import React from 'react'; import PropTypes from 'proptypes'; import { connect } from 'react-redux'; import moment from 'moment'; -import { DISTRICT_TYPES } from '@components/common/CONSTANTS'; +import { DISTRICT_TYPES, COMPARISON_SETS } from '@components/common/CONSTANTS'; import Chart from '@components/Chart'; import ChartExportSelect from '@components/export/ChartExportSelect'; const TotalRequestsComparison = ({ bins, - set1, - set2, + sets, }) => { /* /// DATA /// */ - const getDataSet = set => { - const { district, counts } = set; + const getDataSet = setId => { + const { district, counts } = sets[setId]; const totals = Array.from({ length: bins.length - 1 }).map((_, idx) => ( Object.keys(counts).reduce((acc, name) => ( @@ -22,8 +21,9 @@ const TotalRequestsComparison = ({ ), 0) )); - const color = DISTRICT_TYPES.find(t => t.id === district)?.color; - const label = DISTRICT_TYPES.find(t => t.id === district)?.name; + const { color, name: setName } = COMPARISON_SETS[setId]; + const label = DISTRICT_TYPES.find(t => t.id === district)?.name + .replace(' District', ` (${setName})`); return { data: totals, @@ -38,8 +38,8 @@ const TotalRequestsComparison = ({ const chartData = { labels: bins.slice(0, -1).map(bin => moment(bin).format('MMM D')), datasets: [ - getDataSet(set1), - getDataSet(set2), + getDataSet('set1'), + getDataSet('set2'), ], }; @@ -108,20 +108,24 @@ const TotalRequestsComparison = ({ const mapStateToProps = state => ({ bins: state.comparisonData.frequency.bins, - set1: state.comparisonData.frequency.set1, - set2: state.comparisonData.frequency.set2, + sets: { + set1: state.comparisonData.frequency.set1, + set2: state.comparisonData.frequency.set2, + }, }); export default connect(mapStateToProps)(TotalRequestsComparison); TotalRequestsComparison.propTypes = { bins: PropTypes.arrayOf(PropTypes.string).isRequired, - set1: PropTypes.shape({ - district: PropTypes.string, - counts: PropTypes.shape({}).isRequired, - }).isRequired, - set2: PropTypes.shape({ - district: PropTypes.string, - counts: PropTypes.shape({}).isRequired, + sets: PropTypes.shape({ + set1: PropTypes.shape({ + district: PropTypes.string, + counts: PropTypes.shape({}), + }), + set2: PropTypes.shape({ + district: PropTypes.string, + counts: PropTypes.shape({}), + }), }).isRequired, }; diff --git a/src/components/chartExtras/ComparisonCriteria.jsx b/src/components/chartExtras/ComparisonCriteria.jsx index f21844603..8e62c4e89 100644 --- a/src/components/chartExtras/ComparisonCriteria.jsx +++ b/src/components/chartExtras/ComparisonCriteria.jsx @@ -1,14 +1,13 @@ import React from 'react'; import PropTypes from 'proptypes'; import { connect } from 'react-redux'; -import { DISTRICT_TYPES, REQUEST_TYPES } from '@components/common/CONSTANTS'; +import { DISTRICT_TYPES, REQUEST_TYPES, COMPARISON_SETS } from '@components/common/CONSTANTS'; import CollapsibleList from '@components/common/CollapsibleList'; const ComparisonCriteria = ({ startDate, endDate, - set1, - set2, + sets, requestTypes, }) => { // DATES // @@ -17,7 +16,9 @@ const ComparisonCriteria = ({ : 'No date range selected.'; // DISTRICTS // - const districtSelection = set => { + const districtSelection = setId => { + const set = sets[setId]; + if (!set.district) { return ( <> @@ -30,10 +31,14 @@ const ComparisonCriteria = ({ } const { name } = DISTRICT_TYPES.find(t => set.district === t.id); + const { name: setName } = COMPARISON_SETS[setId]; return ( <> { name } +  ( + { setName } + ) { dateText } - { districtSelection(set1) } - { districtSelection(set2) } + { districtSelection('set1') } + { districtSelection('set2') } Request Type Selection @@ -92,8 +97,10 @@ const ComparisonCriteria = ({ const mapStateToProps = state => ({ startDate: state.comparisonFilters.startDate, endDate: state.comparisonFilters.endDate, - set1: state.comparisonFilters.comparison.set1, - set2: state.comparisonFilters.comparison.set2, + sets: { + set1: state.comparisonFilters.comparison.set1, + set2: state.comparisonFilters.comparison.set2, + }, requestTypes: state.comparisonFilters.requestTypes, }); @@ -102,13 +109,15 @@ export default connect(mapStateToProps)(ComparisonCriteria); ComparisonCriteria.propTypes = { startDate: PropTypes.string, endDate: PropTypes.string, - set1: PropTypes.shape({ - district: PropTypes.string, - list: PropTypes.arrayOf(PropTypes.string), - }).isRequired, - set2: PropTypes.shape({ - district: PropTypes.string, - list: PropTypes.arrayOf(PropTypes.string), + sets: PropTypes.shape({ + set1: PropTypes.shape({ + district: PropTypes.string, + list: PropTypes.array, + }), + set2: PropTypes.shape({ + district: PropTypes.string, + list: PropTypes.array, + }), }).isRequired, requestTypes: PropTypes.shape({}).isRequired, }; diff --git a/src/components/chartExtras/ComparisonLegend.jsx b/src/components/chartExtras/ComparisonLegend.jsx index 63e281981..76c6d33dc 100644 --- a/src/components/chartExtras/ComparisonLegend.jsx +++ b/src/components/chartExtras/ComparisonLegend.jsx @@ -1,25 +1,26 @@ import React from 'react'; import PropTypes from 'proptypes'; import { connect } from 'react-redux'; -import { DISTRICT_TYPES } from '@components/common/CONSTANTS'; +import { DISTRICT_TYPES, COMPARISON_SETS } from '@components/common/CONSTANTS'; const ComparisonLegend = ({ - set1, - set2, - chart, + comparison, }) => { - if (!chart) return null; + if (!comparison.chart) return null; + + const legendItem = setId => { + const set = comparison[setId]; - const legendItem = set => { if (!set.district) return null; - const { color, name } = DISTRICT_TYPES.find(t => set.district === t.id); + const { name } = DISTRICT_TYPES.find(t => set.district === t.id); + const { color, name: setName } = COMPARISON_SETS[setId]; return (
- { name.replace(' District', '') } + { name.replace(' District', ` (${setName})`) }
); @@ -29,31 +30,33 @@ const ComparisonLegend = ({

Legend

- { legendItem(set1) } - { legendItem(set2) } + { legendItem('set1') } + { legendItem('set2') }
); }; const mapStateToProps = state => ({ - set1: state.comparisonFilters.comparison.set1, - set2: state.comparisonFilters.comparison.set2, - chart: state.comparisonFilters.comparison.chart, + comparison: state.comparisonFilters.comparison, }); export default connect(mapStateToProps)(ComparisonLegend); ComparisonLegend.propTypes = { - set1: PropTypes.shape({ - district: PropTypes.string, - }).isRequired, - set2: PropTypes.shape({ - district: PropTypes.string, - }).isRequired, - chart: PropTypes.string, + comparison: PropTypes.shape({ + set1: PropTypes.shape({ + district: PropTypes.string, + list: PropTypes.arrayOf(PropTypes.string), + }), + set2: PropTypes.shape({ + district: PropTypes.string, + list: PropTypes.arrayOf(PropTypes.string), + }).isRequired, + chart: PropTypes.string, + }), }; ComparisonLegend.defaultProps = { - chart: null, + comparison: {}, }; diff --git a/src/components/common/CONSTANTS.js b/src/components/common/CONSTANTS.js index eb2e8a6d0..fce15ecc7 100644 --- a/src/components/common/CONSTANTS.js +++ b/src/components/common/CONSTANTS.js @@ -92,12 +92,23 @@ export const REQUEST_SOURCES = [ ]; export const DISTRICT_TYPES = [ - { id: 'nc', name: 'Neighborhood Council District', color: '#DDEC9F' }, - { id: 'cc', name: 'City Council District', color: '#565656' }, + { id: 'nc', name: 'Neighborhood Council District' }, + { id: 'cc', name: 'City Council District' }, // { id: 'bid', name: 'Business Improvement District' }, // { id: 'sd', name: 'Supervisory District' }, ]; +export const COMPARISON_SETS = { + set1: { + color: '#DDEC9F', + name: 'Set 1', + }, + set2: { + color: '#565656', + name: 'Set 2', + }, +}; + export const MENU_TABS = { MAP: 'Map', VISUALIZATIONS: 'Data Visualization',