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

Add graph loaders when changing year/stop purpose using dropdowns #277

Merged
merged 2 commits into from
Feb 26, 2024
Merged

Add graph loaders when changing year/stop purpose using dropdowns #277

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
bdd5ae2
Refactor init data for graphs that should reload when user chooses ye…
Afani97 Feb 26, 2024
0cf01e8
Merge branch 'develop' of github.com:caktus/Traffic-Stops into add-lo…
Afani97 Feb 26, 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: 19 additions & 9 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 @@ -47,28 +47,35 @@ function Contraband(props) {

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

const initContrabandData = {
labels: [],
datasets: [],
isModalOpen: false,
tableData: [],
csvData: [],
loading: true,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This loading flag will show a Loading data component while data is being fetched.

});
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 [contrabandStopPurposeData, setContrabandStopPurposeData] = useState({
const initContrabandStopPurposeData = {
labels: [],
datasets: [],
loading: true,
});
};
const [contrabandStopPurposeData, setContrabandStopPurposeData] = useState(
initContrabandStopPurposeData
);
const [contrabandStopPurposeModalData, setContrabandStopPurposeModalData] = useState({
modalData: {},
isOpen: false,
Expand All @@ -87,7 +94,7 @@ function Contraband(props) {
loading: true,
});

const initialContrabandGroupedData = [
const initContrabandGroupedStopPurposeData = [
{
labels: [],
datasets: [],
Expand All @@ -105,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 @@ -145,7 +152,10 @@ function Contraband(props) {
const handleYearSelect = (y) => {
if (y === year) return;
setYear(y);
setContrabandGroupedStopPurposeData(initialContrabandGroupedData);
setContrabandData(initContrabandData);
setContrabandTypesData(initContrabandTypesData);
setContrabandStopPurposeData(initContrabandStopPurposeData);
setContrabandGroupedStopPurposeData(initContrabandGroupedStopPurposeData);
fetchHitRateByStopPurpose(y);
};

Expand Down
5 changes: 4 additions & 1 deletion frontend/src/Components/Charts/SearchRate/SearchRate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,15 @@ function SearchRate(props) {
const [chartState] = useDataset(agencyId, LIKELIHOOD_OF_SEARCH);

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

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

const renderMetaTags = useMetaTags();
const [renderTableModal, { openModal }] = useTableModal();

useEffect(() => {
setSearchRateData(initData);
const params = [];
if (year && year !== 'All') {
params.push({ param: 'year', val: year });
Expand Down
6 changes: 4 additions & 2 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 @@ -52,11 +52,12 @@ function Searches(props) {
loading: true,
});

const [searchCountData, setSearchCountData] = useState({
const initCountData = {
labels: [],
datasets: [],
loading: true,
});
};
const [searchCountData, setSearchCountData] = useState(initCountData);
const [searchCountType, setSearchCountType] = useState(0);
const renderMetaTags = useMetaTags();
const [renderTableModal, { openModal }] = useTableModal();
Expand All @@ -81,6 +82,7 @@ function Searches(props) {

// Build Searches By Count
useEffect(() => {
setSearchCountData(initCountData);
const params = [];
if (searchType !== 0) {
params.push({ param: 'search_type', val: searchCountType });
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/Components/Charts/TrafficStops/TrafficStops.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,17 +223,19 @@ function TrafficStops(props) {
null,
null,
]);
const [trafficStopsByCount, setTrafficStopsByCount] = useState({
const initStopsByCount = {
labels: [],
datasets: [],
loading: true,
});
};
const [trafficStopsByCount, setTrafficStopsByCount] = useState(initStopsByCount);

const createDateForRange = (yr) =>
Number.isInteger(yr) ? new Date(`${yr}-01-01`) : new Date(yr);

// Build Stops By Count
useEffect(() => {
setTrafficStopsByCount(initStopsByCount);
const params = [];
if (trafficStopsByCountRange !== null) {
const _from = `${trafficStopsByCountRange.from.year}-${trafficStopsByCountRange.from.month
Expand Down
Loading