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

Cleanup Agency Name prop #293

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Cleanup Agency Name prop #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3c1b35
Pass agency name value from props instead of chart state
Afani97 Apr 11, 2024
8c1d947
Fix merge conflicts
Afani97 Apr 17, 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
28 changes: 12 additions & 16 deletions frontend/src/Components/Charts/Contraband/Contraband.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@ import {
import useMetaTags from '../../../Hooks/useMetaTags';
import useTableModal from '../../../Hooks/useTableModal';

// State
import useDataset, { AGENCY_DETAILS, CONTRABAND_HIT_RATE } from '../../../Hooks/useDataset';

// Children
import { P, WEIGHTS } from '../../../styles/StyledComponents/Typography';
import ChartHeader from '../ChartSections/ChartHeader';
Expand All @@ -34,10 +31,9 @@ import { ChartContainer } from '../ChartSections/ChartsCommon.styled';
const STOP_PURPOSE_TYPES = ['Safety Violation', 'Regulatory and Equipment', 'Other'];

function Contraband(props) {
const { agencyId, yearRange, year } = props;
const { agencyId, agencyName, yearRange, year } = props;

const officerId = useOfficerId();
const [chartState] = useDataset(agencyId, CONTRABAND_HIT_RATE);

useEffect(() => {
if (window.location.hash) {
Expand Down Expand Up @@ -508,7 +504,7 @@ function Contraband(props) {
const getBarChartModalSubHeading = (title) => `${title} ${subjectObserving()}.`;

const getBarChartModalHeading = (title) => {
let subject = chartState.data[AGENCY_DETAILS].name;
let subject = agencyName;
if (officerId) {
subject = `Officer ${officerId}`;
}
Expand Down Expand Up @@ -566,7 +562,7 @@ function Contraband(props) {
<NewModal
tableHeader='Contraband "Hit Rate"'
tableSubheader="Shows what number of searches led to the discovery of illegal items by race/ethnicity."
agencyName={chartState.data[AGENCY_DETAILS].name}
agencyName={agencyName}
tableData={contrabandData.tableData}
csvData={contrabandData.csvData}
columns={RACE_TABLE_COLUMNS}
Expand All @@ -586,7 +582,7 @@ function Contraband(props) {
tableSubheader: getBarChartModalSubHeading(
'Shows what percentage of searches led to the discovery of illegal items by race/ethnicity'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: getBarChartModalHeading('Contraband "Hit Rate"'),
}}
/>
Expand All @@ -609,7 +605,7 @@ function Contraband(props) {
<NewModal
tableHeader='Contraband "Hit Rate" Grouped By Stop Purpose'
tableSubheader="Shows what number of searches led to the discovery of illegal items by race/ethnicity and original stop purpose."
agencyName={chartState.data[AGENCY_DETAILS].name}
agencyName={agencyName}
tableData={contrabandStopPurposeModalData.tableData}
csvData={contrabandStopPurposeModalData.csvData}
columns={RACE_TABLE_COLUMNS}
Expand Down Expand Up @@ -638,7 +634,7 @@ function Contraband(props) {
tableSubheader: getBarChartModalSubHeading(
'Shows what number of searches led to the discovery of illegal items by race/ethnicity and original stop purpose'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: getBarChartModalHeading('Contraband "Hit Rate" Grouped By Stop Purpose'),
}}
/>
Expand All @@ -657,7 +653,7 @@ function Contraband(props) {
<NewModal
tableHeader='Contraband "Hit Rate" by type'
tableSubheader="Shows what number of searches discovered specific types of illegal items."
agencyName={chartState.data[AGENCY_DETAILS].name}
agencyName={agencyName}
tableData={contrabandTypesData.tableData}
csvData={contrabandTypesData.csvData}
columns={CONTRABAND_TYPES_TABLE_COLUMNS}
Expand All @@ -677,7 +673,7 @@ function Contraband(props) {
tableSubheader: getBarChartModalSubHeading(
'Shows what number of searches discovered specific types of illegal items'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: getBarChartModalHeading('Contraband "Hit Rate" by type'),
}}
/>
Expand All @@ -702,7 +698,7 @@ function Contraband(props) {
<NewModal
tableHeader='Contraband "Hit Rate" by Type grouped by Stop Purpose'
tableSubheader="Shows the specific types of illegal items discovered in searches by race and initial stop type."
agencyName={chartState.data[AGENCY_DETAILS].name}
agencyName={agencyName}
tableData={groupedContrabandStopPurposeModalData.tableData}
csvData={groupedContrabandStopPurposeModalData.csvData}
columns={RACE_TABLE_COLUMNS}
Expand Down Expand Up @@ -760,7 +756,7 @@ function Contraband(props) {
tableSubheader: getBarChartModalSubHeading(
'Shows the specific types of illegal items discovered in searches by race and initial stop type'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: getBarChartModalHeading(
'Contraband "Hit Rate" by Type grouped by Safety Violation'
),
Expand All @@ -784,7 +780,7 @@ function Contraband(props) {
tableSubheader: getBarChartModalSubHeading(
'Shows the specific types of illegal items discovered in searches by race and initial stop type'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: getBarChartModalHeading(
'Contraband "Hit Rate" by Type grouped by Regulatory/Equipment'
),
Expand All @@ -810,7 +806,7 @@ function Contraband(props) {
tableSubheader: getBarChartModalSubHeading(
'Shows the specific types of illegal items discovered in searches by race and initial stop type'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: getBarChartModalHeading(
'Contraband "Hit Rate" by Type grouped by Other'
),
Expand Down
18 changes: 7 additions & 11 deletions frontend/src/Components/Charts/Overview/Overview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ import PieChart from '../../NewCharts/PieChart';
import { pieChartConfig, pieChartLabels } from '../../../util/setChartColors';

function Overview(props) {
const { agencyId, yearRange, year } = props;

const { agencyId, agencyName, yearRange, year } = props;
const history = useHistory();
const match = useRouteMatch();
const officerId = useOfficerId();
Expand Down Expand Up @@ -127,7 +126,7 @@ function Overview(props) {
}

const pieChartTitle = (chartTitle) => {
let subject = chartState.data[AGENCY_DETAILS].name;
let subject = agencyName;
if (officerId) {
subject = `Officer ${officerId}`;
}
Expand Down Expand Up @@ -161,10 +160,7 @@ function Overview(props) {
}
}, [chartState.data[USE_OF_FORCE], year]);

const getPageTitleForShare = () => {
const agencyName = chartState.data[AGENCY_DETAILS].name;
return `Traffic Stop statistics for ${agencyName}`;
};
const getPageTitleForShare = () => `Traffic Stop statistics for ${agencyName}`;

const useOfForcePieChartCopy = () => {
if (officerId) {
Expand Down Expand Up @@ -204,7 +200,7 @@ function Overview(props) {
tableSubheader: `This data reflects the race/ethnic composition based on the most recent census data.
While it can be used for general comparative purposes, the actual driving population may
vary significantly from these figures.`,
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: pieChartTitle('Census Demographics'),
}}
/>
Expand All @@ -229,7 +225,7 @@ function Overview(props) {
tableSubheader: getChartModalSubHeading(
'Shows the race/ethnic composition of drivers stopped'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: pieChartTitle('Traffic Stops'),
}}
/>
Expand All @@ -256,7 +252,7 @@ function Overview(props) {
tableSubheader: getChartModalSubHeading(
'Shows the race/ethnic composition of drivers searched'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: pieChartTitle('Searches'),
}}
/>
Expand All @@ -277,7 +273,7 @@ function Overview(props) {
modalConfig={{
tableHeader: 'Use of Force',
tableSubheader: getOverviewSubheader(),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: pieChartTitle('Use of Force'),
}}
/>
Expand Down
11 changes: 4 additions & 7 deletions frontend/src/Components/Charts/SearchRate/SearchRate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import SearchRateStyled from './SearchRate.styled';
import * as S from '../ChartSections/ChartsCommon.styled';

// Data
import useDataset, { AGENCY_DETAILS, LIKELIHOOD_OF_SEARCH } from '../../../Hooks/useDataset';
import { LIKELIHOOD_OF_SEARCH } from '../../../Hooks/useDataset';

// Hooks
import useOfficerId from '../../../Hooks/useOfficerId';
Expand All @@ -21,11 +21,9 @@ import HorizontalBarChart from '../../NewCharts/HorizontalBarChart';
import { ChartContainer } from '../ChartSections/ChartsCommon.styled';

function SearchRate(props) {
const { agencyId, yearRange, year } = props;
const { agencyId, agencyName, yearRange, year } = props;
const officerId = useOfficerId();

const [chartState] = useDataset(agencyId, LIKELIHOOD_OF_SEARCH);

const initData = { labels: [], datasets: [], loading: true };
const [searchRateData, setSearchRateData] = useState(initData);

Expand Down Expand Up @@ -76,7 +74,7 @@ function SearchRate(props) {
purposes ${subjectObserving()}.`;

const getBarChartModalHeading = (title) => {
let subject = chartState.data[AGENCY_DETAILS].name;
let subject = agencyName;
if (officerId) {
subject = `Officer ${officerId}`;
}
Expand Down Expand Up @@ -105,7 +103,6 @@ function SearchRate(props) {
incidents. Use “View Data” to see the numbers underlying the calculations.
</P>
</S.ChartDescription>

<ChartContainer override={{ height: '200vh' }}>
<HorizontalBarChart
title="Likelihood of Search"
Expand All @@ -118,7 +115,7 @@ function SearchRate(props) {
modalConfig={{
tableHeader: 'Likelihood of Search',
tableSubheader: getBarChartModalSubHeading(),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: getBarChartModalHeading('Likelihood of Search'),
}}
/>
Expand Down
16 changes: 5 additions & 11 deletions frontend/src/Components/Charts/Searches/Searches.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,7 @@ import * as S from '../ChartSections/ChartsCommon.styled';
import { RACE_TABLE_COLUMNS, SEARCH_TYPE_DEFAULT, SEARCH_TYPES } from '../chartUtils';

// State
import useDataset, {
AGENCY_DETAILS,
SEARCHES,
SEARCHES_BY_TYPE,
STOPS,
} from '../../../Hooks/useDataset';
import useDataset, { SEARCHES, SEARCHES_BY_TYPE, STOPS } from '../../../Hooks/useDataset';

// Hooks
import useMetaTags from '../../../Hooks/useMetaTags';
Expand All @@ -30,13 +25,12 @@ import axios from '../../../Services/Axios';
import { ChartContainer } from '../ChartSections/ChartsCommon.styled';

function Searches(props) {
const { agencyId } = props;
const { agencyId, agencyName } = props;

const officerId = useOfficerId();

useDataset(agencyId, STOPS);
useDataset(agencyId, SEARCHES);
const [chartState] = useDataset(agencyId, SEARCHES_BY_TYPE);

useEffect(() => {
if (window.location.hash) {
Expand Down Expand Up @@ -140,7 +134,7 @@ function Searches(props) {
};

const getLineChartModalHeading = (title, showStopPurpose = false) => {
let subject = chartState.data[AGENCY_DETAILS].name;
let subject = agencyName;
if (officerId) {
subject = `Officer ${officerId}`;
}
Expand Down Expand Up @@ -192,7 +186,7 @@ function Searches(props) {
tableSubheader: getLineChartModalSubHeading(
'Shows the percent of stops that led to searches, broken down by race/ethnicity'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: getLineChartModalHeading('Searches By Percentage', false),
}}
/>
Expand Down Expand Up @@ -237,7 +231,7 @@ function Searches(props) {
tableSubheader: getLineChartModalSubHeading(
`Shows the number of searches performed ${subjectObserving()}, broken down by search type and race / ethnicity`
),
agencyName: chartState.data[AGENCY_DETAILS].name,
agencyName,
chartTitle: getLineChartModalHeading('Searches By Count', true),
}}
/>
Expand Down
Loading
Loading