Skip to content

Commit

Permalink
Merge pull request #519 from hackforla/FRONT-ComparisonColors
Browse files Browse the repository at this point in the history 
comparison set colors tied to set number instead of district type
  • Loading branch information
@adamkendis
adamkendis authored Apr 9, 2020
2 parents 86e360f + 7d307fb commit be0280d
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 88 deletions.
40 changes: 22 additions & 18 deletions src/components/Comparison/FrequencyComparison.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,28 @@ 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) => (
acc + counts[name][idx]
), 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,
Expand All @@ -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'),
],
};

Expand Down Expand Up @@ -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,
};
24 changes: 10 additions & 14 deletions src/components/Comparison/TimeToCloseComparison.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
40 changes: 22 additions & 18 deletions src/components/Comparison/TotalRequestsComparison.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,28 @@ 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) => (
acc + counts[name][idx]
), 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,
Expand All @@ -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'),
],
};

Expand Down Expand Up @@ -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,
};
39 changes: 24 additions & 15 deletions src/components/chartExtras/ComparisonCriteria.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 //
Expand All @@ -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 (
<>
Expand All @@ -30,10 +31,14 @@ const ComparisonCriteria = ({
}

const { name } = DISTRICT_TYPES.find(t => set.district === t.id);
const { name: setName } = COMPARISON_SETS[setId];
return (
<>
<span className="criteria-type">
{ name }
&nbsp;(
{ setName }
)
</span>
<CollapsibleList
items={set.list}
Expand Down Expand Up @@ -78,8 +83,8 @@ const ComparisonCriteria = ({
Date Range
</span>
{ dateText }
{ districtSelection(set1) }
{ districtSelection(set2) }
{ districtSelection('set1') }
{ districtSelection('set2') }
<span className="criteria-type">
Request Type Selection
</span>
Expand All @@ -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,
});

Expand All @@ -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,
};
Expand Down
45 changes: 24 additions & 21 deletions src/components/chartExtras/ComparisonLegend.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="legend-item">
<span className="color-swatch" style={{ backgroundColor: color }} />
<span className="district-name">
{ name.replace(' District', '') }
{ name.replace(' District', ` (${setName})`) }
</span>
</div>
);
Expand All @@ -29,31 +30,33 @@ const ComparisonLegend = ({
<div className="chart-extra comparison-legend">
<h1>Legend</h1>
<div className="outline">
{ legendItem(set1) }
{ legendItem(set2) }
{ legendItem('set1') }
{ legendItem('set2') }
</div>
</div>
);
};

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: {},
};
Loading

0 comments on commit be0280d

Please sign in to comment.