fix merge conflicts

caktus · Aug 4, 2023 · d44f582 · d44f582
2 parents 7cf7b4d + 93ce9d8
commit d44f582
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 86 deletions.
diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js
@@ -51,6 +51,7 @@ import NewModal from '../../NewCharts/NewModal';
 import displayDefinition from '../../../util/displayDefinition';
 import PieChart from '../../NewCharts/PieChart';
 import Switch from 'react-switch';
+import Checkbox from '../../Elements/Inputs/Checkbox';
 
 function TrafficStops(props) {
   const { agencyId } = props;
@@ -147,6 +148,23 @@ function TrafficStops(props) {
       ],
     },
   });
+  const [visibleStopsGroupedByPurpose, setVisibleStopsGroupedByPurpose] = useState([
+    {
+      key: 'safety',
+      visible: true,
+      order: 1,
+    },
+    {
+      key: 'regulatory',
+      visible: true,
+      order: 2,
+    },
+    {
+      key: 'other',
+      visible: false,
+      order: 3,
+    },
+  ]);
 
   const [stopPurposeModalData, setStopPurposeModalData] = useState({
     isOpen: false,
@@ -529,6 +547,19 @@ function TrafficStops(props) {
     });
   };
 
+  const toggleGroupedPurposeGraphs = (key) => {
+    const toggleState = visibleStopsGroupedByPurpose;
+    const toggleGraph = toggleState.find((v) => v.key === key);
+    const otherGraphs = toggleState.filter((v) => v.key !== key);
+
+    setVisibleStopsGroupedByPurpose(
+      [...otherGraphs, { key, visible: !toggleGraph.visible, order: toggleGraph.order }].sort(
+        // eslint-disable-next-line no-nested-ternary
+        (a, b) => (a.order < b.order ? (a.order === b.order ? 0 : -1) : 1)
+      )
+    );
+  };
+
   return (
     <TrafficStopsStyled>
       {/* Traffic Stops by Percentage */}
@@ -701,8 +732,19 @@ function TrafficStops(props) {
           <span>Switch to {checked ? 'line' : 'pie'} charts</span>
           <Switch onChange={handleChange} checked={checked} className="react-switch" />
         </div>
+        <div style={{ display: 'flex', gap: '10px', flexDirection: 'row' }}>
+          {visibleStopsGroupedByPurpose.map((vg, i) => (
+            <Checkbox
+              label={`Toggle ${vg.key}`}
+              value={vg.key}
+              key={i}
+              checked={vg.visible}
+              onChange={toggleGroupedPurposeGraphs}
+            />
+          ))}
+        </div>
         <LineWrapper visible={checked === false}>
-          <GroupedStopsContainer>
+          <GroupedStopsContainer visible={visibleStopsGroupedByPurpose[0].visible}>
             <LineChart
               data={stopsGroupedByPurposeData.safety}
               title="Safety Violation"
@@ -711,24 +753,26 @@ function TrafficStops(props) {
               yAxisMax={stopsGroupedByPurposeData.max_step_size}
             />
           </GroupedStopsContainer>
-          <GroupedStopsContainer>
+          <GroupedStopsContainer visible={visibleStopsGroupedByPurpose[1].visible}>
             <LineChart
               data={stopsGroupedByPurposeData.regulatory}
               title="Regulatory/Equipment"
               maintainAspectRatio={false}
               displayLegend={false}
               yAxisMax={stopsGroupedByPurposeData.max_step_size}
-              yAxisShowLabels={false}
+              yAxisShowLabels={!visibleStopsGroupedByPurpose[0].visible}
             />
           </GroupedStopsContainer>
-          <GroupedStopsContainer>
+          <GroupedStopsContainer visible={visibleStopsGroupedByPurpose[2].visible}>
             <LineChart
               data={stopsGroupedByPurposeData.other}
               title="Other"
               maintainAspectRatio={false}
               displayLegend={false}
               yAxisMax={stopsGroupedByPurposeData.max_step_size}
-              yAxisShowLabels={false}
+              yAxisShowLabels={
+                !visibleStopsGroupedByPurpose[0].visible && !visibleStopsGroupedByPurpose[1].visible
+              }
             />
           </GroupedStopsContainer>
         </LineWrapper>

diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.styled.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.styled.js
@@ -35,4 +35,5 @@ export const GroupedStopsContainer = styled.div`
   @media (${smallerThanTabletLandscape}) {
     width: 100%;
   }
+  display: ${(props) => (props.visible ? 'block' : 'none')};
 `;
diff --git a/frontend/src/Components/Elements/MonthRangePicker.js b/frontend/src/Components/Elements/MonthRangePicker.js
@@ -16,21 +16,8 @@ import {
 import { useTheme } from 'styled-components';
 import range from 'lodash.range';
 import DatePicker from 'react-datepicker';
+import { getRangeValues } from '../../util/range';
 
-function getRangeValues() {
-  const today = new Date();
-
-  return {
-    from: {
-      year: 2001,
-      month: 1,
-    },
-    to: {
-      year: today.getFullYear(),
-      month: today.getMonth() + 1,
-    },
-  };
-}
 const mapDataSetToEnum = {
   STOPS,
   SEARCHES,
@@ -84,12 +71,21 @@ export default function MonthRangePicker({
     }
   }, [forcePickerRerender]);
 
+  const showDatePicker = () => {
+    const rangeValues = getRangeValues();
+    setStartDate(new Date().setFullYear(rangeValues.from.year, 1));
+    setShowDateRangePicker(true);
+  };
+
   const closeRangePicker = async () => {
     setShowDateRangePicker(false);
-    setMinDate(null);
-    setStartDate(startYear);
+
+    const rangeValues = getRangeValues(true);
+    setStartDate(new Date().setFullYear(rangeValues.from.year, 1));
     setEndDate(new Date());
-    await updateDatePicker(getRangeValues());
+    setMinDate(null);
+
+    await updateDatePicker(rangeValues);
     onClosePicker();
   };
 
@@ -154,7 +150,7 @@ export default function MonthRangePicker({
   return (
     <div style={{ marginTop: '20px' }}>
       {!showDateRangePicker && (
-        <Button variant="positive" marginTop={10} onClick={() => setShowDateRangePicker(true)}>
+        <Button variant="positive" marginTop={10} onClick={showDatePicker}>
           Filter by date range
         </Button>
       )}