Skip to content

Commit

Permalink
Merge pull request #278 from caktus/develop
Browse files Browse the repository at this point in the history 
Production release v1.19.0
  • Loading branch information
@Afani97
Afani97 authored Feb 28, 2024
2 parents 8802e97 + 3766793 commit c085750
Show file tree
Hide file tree
Showing 11 changed files with 309 additions and 139 deletions.
10 changes: 7 additions & 3 deletions frontend/src/Components/Charts/ChartSections/ShareList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,23 @@ import * as S from './ShareList.styled';
import TwitterLogo from '../../../img/x-logo-black.png';
import FacebookLogo from '../../../img/meta_logo_primary.svg';

function ShareList({ shareUrl, twitterTitle, onPressHandler }) {
function ShareList({ shareUrl, twitterTitle, onPressHandler, graphAnchor = null }) {
let shareURL = shareUrl;
if (graphAnchor) {
shareURL = `${shareURL}%23${graphAnchor}`;
}
return (
<S.ShareList>
<S.ShareItem
href={`http://www.twitter.com/intent/tweet?url=${shareUrl}&text=${twitterTitle}`}
href={`http://www.twitter.com/intent/tweet?url=${shareURL}&text=${twitterTitle}`}
target="_blank"
rel="noreferrer noopener"
onClick={onPressHandler}
>
<S.TWLogo src={TwitterLogo} />
</S.ShareItem>
<S.ShareItem
href={`http://www.facebook.com/sharer.php?u=${shareUrl}`}
href={`http://www.facebook.com/sharer.php?u=${shareURL}`}
target="_blank"
rel="noreferrer noopener"
onClick={onPressHandler}
Expand Down
156 changes: 66 additions & 90 deletions frontend/src/Components/Charts/Contraband/Contraband.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,34 +37,45 @@ function Contraband(props) {
const officerId = useOfficerId();
const [chartState] = useDataset(agencyId, CONTRABAND_HIT_RATE);

useEffect(() => {
if (window.location.hash) {
document.querySelector(`${window.location.hash}`).scrollIntoView();
}
}, []);

const [year, setYear] = useState(YEARS_DEFAULT);

const renderMetaTags = useMetaTags();
const [renderTableModal] = useTableModal();
const [contrabandData, setContrabandData] = useState({

const initContrabandData = {
labels: [],
datasets: [],
isModalOpen: false,
tableData: [],
csvData: [],
loading: true,
});
const [contrabandYear, setContrabandYear] = useState(YEARS_DEFAULT);
const [contrabandTypesData, setContrabandTypesData] = useState({
};
const [contrabandData, setContrabandData] = useState(initContrabandData);

const initContrabandTypesData = {
labels: [],
datasets: [],
isModalOpen: false,
tableData: [],
csvData: [],
loading: true,
});
};
const [contrabandTypesData, setContrabandTypesData] = useState(initContrabandTypesData);

const [contrabandTypesYear, setContrabandTypesYear] = useState(YEARS_DEFAULT);
const [contrabandStopPurposeData, setContrabandStopPurposeData] = useState({
const initContrabandStopPurposeData = {
labels: [],
datasets: [],
loading: true,
});
};
const [contrabandStopPurposeData, setContrabandStopPurposeData] = useState(
initContrabandStopPurposeData
);
const [contrabandStopPurposeModalData, setContrabandStopPurposeModalData] = useState({
modalData: {},
isOpen: false,
Expand All @@ -83,9 +94,7 @@ function Contraband(props) {
loading: true,
});

const [contrabandStopPurposeYear, setContrabandStopPurposeYear] = useState(YEARS_DEFAULT);

const initialContrabandGroupedData = [
const initContrabandGroupedStopPurposeData = [
{
labels: [],
datasets: [],
Expand All @@ -103,7 +112,7 @@ function Contraband(props) {
},
];
const [contrabandGroupedStopPurposeData, setContrabandGroupedStopPurposeData] = useState(
initialContrabandGroupedData
initContrabandGroupedStopPurposeData
);
const [shouldRedrawContrabandGraphs, setShouldReDrawContrabandGraphs] = useState(true);
const [contrabandTypes, setContrabandTypes] = useState(() =>
Expand Down Expand Up @@ -143,29 +152,18 @@ function Contraband(props) {
const handleYearSelect = (y) => {
if (y === year) return;
setYear(y);
setContrabandGroupedStopPurposeData(initialContrabandGroupedData);
setContrabandData(initContrabandData);
setContrabandTypesData(initContrabandTypesData);
setContrabandStopPurposeData(initContrabandStopPurposeData);
setContrabandGroupedStopPurposeData(initContrabandGroupedStopPurposeData);
fetchHitRateByStopPurpose(y);
};

const handleContrabandYearSelect = (y) => {
if (y === contrabandYear) return;
setContrabandYear(y);
};
const handleContrabandTypesYearSelect = (y) => {
if (y === contrabandTypesYear) return;
setContrabandTypesYear(y);
};

const handleGroupedContrabandYearSelect = (y) => {
if (y === contrabandStopPurposeYear) return;
setContrabandStopPurposeYear(y);
};

// Build New Contraband Data
useEffect(() => {
const params = [];
if (contrabandYear && contrabandYear !== 'All') {
params.push({ param: 'year', val: contrabandYear });
if (year && year !== 'All') {
params.push({ param: 'year', val: year });
}
if (officerId) {
params.push({ param: 'officer', val: officerId });
Expand Down Expand Up @@ -217,12 +215,12 @@ function Contraband(props) {
setContrabandData(data);
})
.catch((err) => console.log(err));
}, [contrabandYear]);
}, [year]);

useEffect(() => {
const params = [];
if (contrabandTypesYear && contrabandTypesYear !== 'All') {
params.push({ param: 'year', val: contrabandTypesYear });
if (year && year !== 'All') {
params.push({ param: 'year', val: year });
}
if (officerId) {
params.push({ param: 'officer', val: officerId });
Expand Down Expand Up @@ -273,12 +271,12 @@ function Contraband(props) {
setContrabandTypesData(data);
})
.catch((err) => console.log(err));
}, [contrabandTypesYear]);
}, [year]);

useEffect(() => {
const params = [];
if (contrabandStopPurposeYear && contrabandStopPurposeYear !== 'All') {
params.push({ param: 'year', val: contrabandStopPurposeYear });
if (year && year !== 'All') {
params.push({ param: 'year', val: year });
}
if (officerId) {
params.push({ param: 'officer', val: officerId });
Expand Down Expand Up @@ -314,7 +312,7 @@ function Contraband(props) {
});
})
.catch((err) => console.log(err));
}, [contrabandStopPurposeYear]);
}, [year]);

useEffect(() => {
fetchHitRateByStopPurpose('All');
Expand Down Expand Up @@ -511,14 +509,14 @@ function Contraband(props) {

const getBarChartModalSubHeading = (title) => `${title} ${subjectObserving()}.`;

const getBarChartModalHeading = (title, yearSelected) => {
const getBarChartModalHeading = (title) => {
let subject = chartState.data[AGENCY_DETAILS].name;
if (officerId) {
subject = `Officer ${officerId}`;
}
let fromYear = ` since ${chartState.yearRange[chartState.yearRange.length - 1]}`;
if (yearSelected && yearSelected !== 'All') {
fromYear = ` in ${yearSelected}`;
if (year && year !== 'All') {
fromYear = ` in ${year}`;
}
return `${title} by ${subject}${fromYear}`;
};
Expand Down Expand Up @@ -557,6 +555,15 @@ function Contraband(props) {
a tiny fraction of the illegal substance
</span>
</details>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<DataSubsetPicker
label="Year"
value={year}
onChange={handleYearSelect}
options={[YEARS_DEFAULT].concat(chartState.yearRange)}
dropDown
/>
</div>
<S.ChartSection>
<ChartHeader
chartTitle='Contraband "Hit Rate"'
Expand All @@ -569,7 +576,7 @@ function Contraband(props) {
</P>
<NewModal
tableHeader='Contraband "Hit Rate"'
tableSubheader="Shows what percentage of searches led to the discovery of illegal items by race/ethnicity."
tableSubheader="Shows what number of searches led to the discovery of illegal items by race/ethnicity."
agencyName={chartState.data[AGENCY_DETAILS].name}
tableData={contrabandData.tableData}
csvData={contrabandData.csvData}
Expand All @@ -592,25 +599,19 @@ function Contraband(props) {
'Shows what percentage of searches led to the discovery of illegal items by race/ethnicity'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
chartTitle: getBarChartModalHeading('Contraband "Hit Rate"', contrabandYear),
chartTitle: getBarChartModalHeading('Contraband "Hit Rate"'),
}}
/>
</ChartWrapper>
<S.LegendSection>
<DataSubsetPicker
label="Year"
value={contrabandYear}
onChange={handleContrabandYearSelect}
options={[YEARS_DEFAULT].concat(chartState.yearRange)}
dropUp={!!showCompare}
/>
</S.LegendSection>
</S.ChartSubsection>
</S.ChartSection>
<S.ChartSection>
<S.ChartSection id="hit_rate_by_stop_purpose">
<ChartHeader
chartTitle='Contraband "Hit Rate" Grouped By Stop Purpose'
handleViewData={showGroupedContrabandModal}
shareProps={{
graphAnchor: 'hit_rate_by_stop_purpose',
}}
/>
<S.ChartDescription>
<P>
Expand Down Expand Up @@ -653,27 +654,20 @@ function Contraband(props) {
),
agencyName: chartState.data[AGENCY_DETAILS].name,
chartTitle: getBarChartModalHeading(
'Contraband "Hit Rate" Grouped By Stop Purpose',
contrabandStopPurposeYear
'Contraband "Hit Rate" Grouped By Stop Purpose'
),
}}
/>
</ChartWrapper>
<S.LegendSection>
<DataSubsetPicker
label="Year"
value={contrabandStopPurposeYear}
onChange={handleGroupedContrabandYearSelect}
options={[YEARS_DEFAULT].concat(chartState.yearRange)}
dropUp={!!showCompare}
/>
</S.LegendSection>
</S.ChartSubsection>
</S.ChartSection>
<S.ChartSection>
<S.ChartSection id="hit_rate_by_type">
<ChartHeader
chartTitle='Contraband "Hit Rate" by type'
handleViewData={() => setContrabandTypesData((state) => ({ ...state, isOpen: true }))}
shareProps={{
graphAnchor: 'hit_rate_by_type',
}}
/>
<S.ChartDescription>
<P>Shows what percentage of searches discovered specific types of illegal items.</P>
Expand Down Expand Up @@ -702,30 +696,22 @@ function Contraband(props) {
'Shows what number of searches discovered specific types of illegal items'
),
agencyName: chartState.data[AGENCY_DETAILS].name,
chartTitle: getBarChartModalHeading(
'Contraband "Hit Rate" by type',
contrabandTypesYear
),
chartTitle: getBarChartModalHeading('Contraband "Hit Rate" by type'),
}}
/>
</ChartWrapper>
<S.LegendSection>
<DataSubsetPicker
label="Year"
value={contrabandTypesYear}
onChange={handleContrabandTypesYearSelect}
options={[YEARS_DEFAULT].concat(chartState.yearRange)}
dropUp={!!showCompare}
/>
</S.LegendSection>
<S.LegendSection />
</S.ChartSubsection>
</S.ChartSection>
<S.ChartSection marginTop={5}>
<S.ChartSection marginTop={5} id="hit_rate_by_type_and_stop_purpose">
<ChartHeader
chartTitle='Contraband "Hit Rate" by Type grouped by Stop Purpose'
handleViewData={() =>
setGroupedContrabandStopPurposeModalData((state) => ({ ...state, isOpen: true }))
}
shareProps={{
graphAnchor: 'hit_rate_by_type_and_stop_purpose',
}}
/>
<S.ChartDescription>
<P>
Expand Down Expand Up @@ -777,13 +763,6 @@ function Contraband(props) {
))}
</div>
</div>
<DataSubsetPicker
label="Year"
value={year}
onChange={handleYearSelect}
options={[YEARS_DEFAULT].concat(chartState.yearRange)}
dropUp={!!showCompare}
/>
<HorizontalBarWrapper>
<BarContainer visible={visibleContrabandTypes[0].visible}>
<HorizontalBarChart
Expand All @@ -803,8 +782,7 @@ function Contraband(props) {
),
agencyName: chartState.data[AGENCY_DETAILS].name,
chartTitle: getBarChartModalHeading(
'Contraband "Hit Rate" by Type grouped by Safety Violation',
year
'Contraband "Hit Rate" by Type grouped by Safety Violation'
),
}}
/>
Expand All @@ -828,8 +806,7 @@ function Contraband(props) {
),
agencyName: chartState.data[AGENCY_DETAILS].name,
chartTitle: getBarChartModalHeading(
'Contraband "Hit Rate" by Type grouped by Regulatory/Equipment',
year
'Contraband "Hit Rate" by Type grouped by Regulatory/Equipment'
),
}}
/>
Expand All @@ -855,8 +832,7 @@ function Contraband(props) {
),
agencyName: chartState.data[AGENCY_DETAILS].name,
chartTitle: getBarChartModalHeading(
'Contraband "Hit Rate" by Type grouped by Other',
year
'Contraband "Hit Rate" by Type grouped by Other'
),
}}
/>
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/Components/Charts/Overview/Overview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,14 @@ import useOfficerId from '../../../Hooks/useOfficerId';
import DataSubsetPicker from '../ChartSections/DataSubsetPicker/DataSubsetPicker';
import PieChart from '../../NewCharts/PieChart';
import { pieChartConfig, pieChartLabels } from '../../../util/setChartColors';
import useYearSet from '../../../Hooks/useYearSet';

function Overview(props) {
const { agencyId } = props;
const history = useHistory();
const match = useRouteMatch();
const officerId = useOfficerId();
const [yearRange] = useYearSet();

useDataset(agencyId, STOPS);
useDataset(agencyId, SEARCHES);
Expand Down Expand Up @@ -203,7 +205,7 @@ function Overview(props) {
label="Year"
value={year}
onChange={handleYearSelect}
options={[YEARS_DEFAULT].concat(chartState.yearRange)}
options={[YEARS_DEFAULT].concat(yearRange)}
dropDown
/>
</div>
Expand Down
Loading

0 comments on commit c085750

Please sign in to comment.