Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update arrest graph titles and colors #289

Merged
merged 3 commits into from
Apr 16, 2024
Merged

Update arrest graph titles and colors #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c62193
update graph titles and add missing colors to graphs per stop types
Afani97 Mar 27, 2024
90fcf92
Update arrest stop type colors
Afani97 Apr 3, 2024
888387e
fix merge conflicts
Afani97 Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 38 additions & 26 deletions frontend/src/Components/Charts/Arrest/Arrests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,32 @@ function Arrests(props) {
}
}, []);

const stopGraphToggle = () => (
<SwitchContainer>
<span>
Switch to view {togglePercentageOfStops ? 'all stop purposes' : 'grouped stop purposes '}
</span>
<Switch
onChange={() => setTogglePercentageOfStops(!togglePercentageOfStops)}
checked={togglePercentageOfStops}
className="react-switch"
/>
</SwitchContainer>
);

const searchGraphToggle = () => (
<SwitchContainer>
<span>
Switch to view {togglePercentageOfSearches ? 'all stop purposes' : 'grouped stop purposes '}
</span>
<Switch
onChange={() => setTogglePercentageOfSearches(!togglePercentageOfSearches)}
checked={togglePercentageOfSearches}
className="react-switch"
/>
</SwitchContainer>
);

return (
<ArrestsStyled>
{renderMetaTags()}
Expand All @@ -39,38 +65,24 @@ function Arrests(props) {
<PercentageOfSearches {...props} year={year} />
<CountOfStopsAndArrests {...props} year={year} />

<SwitchContainer>
<span>
Switch to view {togglePercentageOfStops ? 'all stop purposes' : 'grouped stop purposes '}
</span>
<Switch
onChange={() => setTogglePercentageOfStops(!togglePercentageOfStops)}
checked={togglePercentageOfStops}
className="react-switch"
/>
</SwitchContainer>
{togglePercentageOfStops ? (
<PercentageOfStopsForStopPurposeGroup {...props} year={year} />
<PercentageOfStopsForStopPurposeGroup {...props} year={year}>
{stopGraphToggle()}
</PercentageOfStopsForStopPurposeGroup>
) : (
<PercentageOfStopsForStopPurpose {...props} year={year} />
<PercentageOfStopsForStopPurpose {...props} year={year}>
{stopGraphToggle()}
</PercentageOfStopsForStopPurpose>
)}

<SwitchContainer>
<span>
Switch to view{' '}
{togglePercentageOfSearches ? 'all stop purposes' : 'grouped stop purposes '}
</span>
<Switch
onChange={() => setTogglePercentageOfSearches(!togglePercentageOfSearches)}
checked={togglePercentageOfSearches}
className="react-switch"
/>
</SwitchContainer>

{togglePercentageOfSearches ? (
<PercentageOfSearchesForStopPurposeGroup {...props} year={year} />
<PercentageOfSearchesForStopPurposeGroup {...props} year={year}>
{searchGraphToggle()}
</PercentageOfSearchesForStopPurposeGroup>
) : (
<PercentageOfSearchesPerStopPurpose {...props} year={year} />
<PercentageOfSearchesPerStopPurpose {...props} year={year}>
{searchGraphToggle()}
</PercentageOfSearchesPerStopPurpose>
)}

<PercentageOfStopsPerContrabandType {...props} year={year} />
Expand Down
20 changes: 11 additions & 9 deletions frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import NewModal from '../../../NewCharts/NewModal';
import createTableData from '../../../../util/createTableData';
import { RACE_TABLE_COLUMNS } from '../../chartUtils';

const graphTitle = 'Traffic Stops Leading to Arrest by Count';

function CountOfStopsAndArrests(props) {
const { agencyId, agencyName, showCompare, year } = props;

Expand Down Expand Up @@ -87,27 +89,27 @@ function CountOfStopsAndArrests(props) {
return (
<S.ChartSection>
<ChartHeader
chartTitle="Stop Counts With/Without Arrests"
chartTitle={graphTitle}
handleViewData={() => setArrestData((state) => ({ ...state, isOpen: true }))}
/>
<S.ChartDescription>
<P>Percentage of stops that led to an arrest for a given race / ethnic group.</P>
<P>Count of stops and corresponding arrests for a given race/ethnic group.</P>
<NewModal
tableHeader="Stop Counts With/Without Arrests"
tableSubheader="Shows what numbers of stops led to an arrest for a given race / ethnic group."
tableHeader={graphTitle}
tableSubheader="Shows count of stops and corresponding arrests for a given race/ethnic group."
agencyName={agencyName}
tableData={arrestData.tableData}
csvData={arrestData.csvData}
columns={RACE_TABLE_COLUMNS}
tableDownloadName="Arrests_By_Percentage"
tableDownloadName={graphTitle}
isOpen={arrestData.isOpen}
closeModal={() => setArrestData((state) => ({ ...state, isOpen: false }))}
/>
</S.ChartDescription>
<S.ChartSubsection showCompare={showCompare}>
<ChartWrapper>
<HorizontalBarChart
title="Stop Counts With/Without Arrests"
title={graphTitle}
data={arrestData}
pinMaxValue={false}
xStacked
Expand All @@ -116,12 +118,12 @@ function CountOfStopsAndArrests(props) {
stepSize={50000}
tooltipLabelCallback={formatTooltipValue}
modalConfig={{
tableHeader: 'Stop Counts With/Without Arrests',
tableHeader: graphTitle,
tableSubheader: getBarChartModalSubHeading(
'Shows what number of stops led to an arrest for a given race / ethnic group'
'Shows count of stops and corresponding arrests for a given race/ethnic group'
),
agencyName,
chartTitle: getBarChartModalSubHeading('Stop Counts With/Without Arrests'),
chartTitle: getBarChartModalSubHeading(graphTitle),
}}
/>
</ChartWrapper>
Expand Down
14 changes: 8 additions & 6 deletions frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import NewModal from '../../../NewCharts/NewModal';
import createTableData from '../../../../util/createTableData';
import { RACE_TABLE_COLUMNS } from '../../chartUtils';

const graphTitle = 'Searches Leading to Arrest by Percentage ';

function PercentageOfSearches(props) {
const { agencyId, agencyName, showCompare, year } = props;

Expand Down Expand Up @@ -85,37 +87,37 @@ function PercentageOfSearches(props) {
return (
<S.ChartSection>
<ChartHeader
chartTitle="Arrests By Percentage"
chartTitle={graphTitle}
handleViewData={() => setArrestData((state) => ({ ...state, isOpen: true }))}
/>
<S.ChartDescription>
<P>Percentage of searches that led to an arrest for a given race / ethnic group.</P>
<NewModal
tableHeader="Arrests By Percentage of Searches"
tableHeader={graphTitle}
tableSubheader="Shows what number of searches led to an arrest for a given race / ethnic group."
agencyName={agencyName}
tableData={arrestData.tableData}
csvData={arrestData.csvData}
columns={RACE_TABLE_COLUMNS}
tableDownloadName="Arrests_Percentage_Of_Searches"
tableDownloadName={graphTitle}
isOpen={arrestData.isOpen}
closeModal={() => setArrestData((state) => ({ ...state, isOpen: false }))}
/>
</S.ChartDescription>
<S.ChartSubsection showCompare={showCompare}>
<ChartWrapper>
<HorizontalBarChart
title="Arrests By Percentage of Searches"
title={graphTitle}
data={arrestData}
displayLegend={false}
tooltipLabelCallback={formatTooltipValue}
modalConfig={{
tableHeader: 'Arrests By Percentage of Searches',
tableHeader: graphTitle,
tableSubheader: getBarChartModalSubHeading(
'Shows what number of searches led to an arrest for a given race / ethnic group'
),
agencyName,
chartTitle: getBarChartModalSubHeading('Arrests By Percentage of Searches'),
chartTitle: getBarChartModalSubHeading(graphTitle),
}}
/>
</ChartWrapper>
Expand Down
19 changes: 10 additions & 9 deletions frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import createTableData from '../../../../util/createTableData';
import DataSubsetPicker from '../../ChartSections/DataSubsetPicker/DataSubsetPicker';
import { RACE_TABLE_COLUMNS, STOP_PURPOSE_GROUPS } from '../../chartUtils';

const graphTitle = 'Percentage of Searches Leading to Arrest by Stop Purpose Group ';

function PercentageOfSearchesForStopPurposeGroup(props) {
const { agencyId, agencyName, showCompare, year } = props;

Expand Down Expand Up @@ -108,19 +110,20 @@ function PercentageOfSearchesForStopPurposeGroup(props) {
return (
<S.ChartSection>
<ChartHeader
chartTitle="Percentage of Searches With Arrests For Stop Purpose Group"
chartTitle={graphTitle}
handleViewData={() => setArrestTableData((state) => ({ ...state, isOpen: true }))}
/>
{props.children}
<S.ChartDescription>
<P>Percentage of stops that led to an arrest for a given stop purpose group.</P>
<P>Percentage of searches that led to an arrest for a given stop purpose group.</P>
<NewModal
tableHeader="Percentage of Searches With Arrests Per Stop Purpose Group"
tableHeader={graphTitle}
tableSubheader="Shows what percentage of searches led to an arrest for a given stop purpose group."
agencyName={agencyName}
tableData={arrestTableData.tableData}
csvData={arrestTableData.csvData}
columns={RACE_TABLE_COLUMNS}
tableDownloadName="Arrests_By_Percentage"
tableDownloadName={graphTitle}
isOpen={arrestTableData.isOpen}
closeModal={() => setArrestTableData((state) => ({ ...state, isOpen: false }))}
>
Expand All @@ -135,19 +138,17 @@ function PercentageOfSearchesForStopPurposeGroup(props) {
<S.ChartSubsection showCompare={showCompare}>
<ChartWrapper>
<HorizontalBarChart
title="Percentage of Searches With Arrests Per Stop Purpose Group"
title={graphTitle}
data={arrestData}
displayLegend={false}
tooltipLabelCallback={formatTooltipValue}
modalConfig={{
tableHeader: 'Percentage of Searches With Arrests Per Stop Purpose Group',
tableHeader: graphTitle,
tableSubheader: getBarChartModalSubHeading(
'Shows what percentage of searches led to an arrest for a given stop purpose group.'
),
agencyName,
chartTitle: getBarChartModalSubHeading(
'Percentage of Searches With Arrests Per Stop Purpose Group'
),
chartTitle: getBarChartModalSubHeading(graphTitle),
}}
/>
</ChartWrapper>
Expand Down
26 changes: 14 additions & 12 deletions frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesPerStopPurpose.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,12 @@ import axios from '../../../../Services/Axios';
import useOfficerId from '../../../../Hooks/useOfficerId';
import { ChartWrapper } from '../Arrests.styles';
import NewModal from '../../../NewCharts/NewModal';

import createTableData from '../../../../util/createTableData';
import DataSubsetPicker from '../../ChartSections/DataSubsetPicker/DataSubsetPicker';
import { RACE_TABLE_COLUMNS, STOP_PURPOSE_TYPES } from '../../chartUtils';
import { RACE_TABLE_COLUMNS, STOP_PURPOSE_TYPES, STOP_TYPE_COLORS } from '../../chartUtils';

const graphTitle = 'Percentage of Searches Leading to Arrest by Stop Purpose Type';

function PercentageOfStopsForStopPurpose(props) {
const { agencyId, agencyName, showCompare, year } = props;
Expand Down Expand Up @@ -58,9 +61,9 @@ function PercentageOfStopsForStopPurpose(props) {
label: 'All',
data: res.data.arrest_percentages.map((d) => d.data),
fill: false,
// backgroundColor: Object.values(colors),
// borderColor: Object.values(colors),
// hoverBackgroundColor: Object.values(colors),
backgroundColor: STOP_TYPE_COLORS,
borderColor: STOP_TYPE_COLORS,
hoverBackgroundColor: STOP_TYPE_COLORS,
borderWidth: 1,
},
],
Expand Down Expand Up @@ -107,19 +110,20 @@ function PercentageOfStopsForStopPurpose(props) {
return (
<S.ChartSection>
<ChartHeader
chartTitle="Percentage of Searches With Arrests Per Stop Purpose"
chartTitle={graphTitle}
handleViewData={() => setArrestTableData((state) => ({ ...state, isOpen: true }))}
/>
{props.children}
<S.ChartDescription>
<P>Percentage of searches that led to an arrest for a given stop purpose.</P>
<NewModal
tableHeader="Percentage of Searches With Arrests Per Stop Purpose"
tableHeader={graphTitle}
tableSubheader="Shows what percentage of searches led to an arrest for a given stop purpose."
agencyName={agencyName}
tableData={arrestTableData.tableData}
csvData={arrestTableData.csvData}
columns={RACE_TABLE_COLUMNS}
tableDownloadName="Arrests_By_Percentage"
tableDownloadName={graphTitle}
isOpen={arrestTableData.isOpen}
closeModal={() => setArrestTableData((state) => ({ ...state, isOpen: false }))}
>
Expand All @@ -134,20 +138,18 @@ function PercentageOfStopsForStopPurpose(props) {
<S.ChartSubsection showCompare={showCompare}>
<ChartWrapper>
<HorizontalBarChart
title="Percentage of Searches With Arrests Per Stop Purpose"
title={graphTitle}
data={arrestData}
displayLegend={false}
tooltipLabelCallback={formatTooltipValue}
pinMaxValue={false}
modalConfig={{
tableHeader: 'Percentage of Searches With Arrests Per Stop Purpose',
tableHeader: graphTitle,
tableSubheader: getBarChartModalSubHeading(
'Shows what percentage of searches led to an arrest for a given stop purpose.'
),
agencyName,
chartTitle: getBarChartModalSubHeading(
'Percentage of Searches With Arrests Per Stop Purpose'
),
chartTitle: getBarChartModalSubHeading(graphTitle),
}}
/>
</ChartWrapper>
Expand Down
16 changes: 9 additions & 7 deletions frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import NewModal from '../../../NewCharts/NewModal';
import createTableData from '../../../../util/createTableData';
import { RACE_TABLE_COLUMNS } from '../../chartUtils';

const graphTitle = 'Traffic Stops Leading to Arrest by Percentage';

function PercentageOfStops(props) {
const { agencyId, agencyName, showCompare, year } = props;

Expand Down Expand Up @@ -85,37 +87,37 @@ function PercentageOfStops(props) {
return (
<S.ChartSection>
<ChartHeader
chartTitle="Arrests By Percentage"
chartTitle={graphTitle}
handleViewData={() => setArrestData((state) => ({ ...state, isOpen: true }))}
/>
<S.ChartDescription>
<P>Percentage of stops that led to an arrest for a given race / ethnic group.</P>
<NewModal
tableHeader="Arrests By Percentage"
tableSubheader="Shows what percentage of stops led to an arrest for a given race / ethnic group."
tableHeader={graphTitle}
tableSubheader="Shows what number of stops led to an arrest for a given race / ethnic group."
agencyName={agencyName}
tableData={arrestData.tableData}
csvData={arrestData.csvData}
columns={RACE_TABLE_COLUMNS}
tableDownloadName="Arrests_By_Percentage"
tableDownloadName={graphTitle}
isOpen={arrestData.isOpen}
closeModal={() => setArrestData((state) => ({ ...state, isOpen: false }))}
/>
</S.ChartDescription>
<S.ChartSubsection showCompare={showCompare}>
<ChartWrapper>
<HorizontalBarChart
title="Arrests By Percentage"
title={graphTitle}
data={arrestData}
displayLegend={false}
tooltipLabelCallback={formatTooltipValue}
modalConfig={{
tableHeader: 'Arrests By Percentage',
tableHeader: graphTitle,
tableSubheader: getBarChartModalSubHeading(
'Shows what percentage of stops led to an arrest for a given race / ethnic group'
),
agencyName,
chartTitle: getBarChartModalSubHeading('Arrests By Percentage'),
chartTitle: getBarChartModalSubHeading(graphTitle),
}}
/>
</ChartWrapper>
Expand Down
Loading
Loading