Cleanup pie charts

caktus · Aug 4, 2023 · 826b14b · 826b14b
1 parent 70546ed
commit 826b14b
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 30 deletions.
diff --git a/frontend/src/Components/Charts/ChartSections/ChartsCommon.styled.js b/frontend/src/Components/Charts/ChartSections/ChartsCommon.styled.js
@@ -3,6 +3,7 @@ import { smallerThanDesktop, smallerThanTabletLandscape } from '../../../styles/
 import { H2 } from '../../../styles/StyledComponents/Typography';
 
 export const ChartSection = styled.div`
+  margin-top: ${(props) => (props.marginTop ? props.marginTop : '3')}em;
   margin-bottom: 2em;
 `;
 

diff --git a/frontend/src/Components/Charts/ChartSections/Legend/Legend.styled.js b/frontend/src/Components/Charts/ChartSections/Legend/Legend.styled.js
@@ -51,7 +51,6 @@ export const KeyLabel = styled.p`
 `;
 
 export const Addendum = styled.p`
-  margin-top: 1em;
   font-style: italic;
   color: ${(props) => props.theme.colors.textLight};
   font-size: 16px;

diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js
@@ -27,7 +27,7 @@ import {
 import useDataset, { STOPS_BY_REASON, STOPS, AGENCY_DETAILS } from '../../../Hooks/useDataset';
 
 // Elements
-import { P } from '../../../styles/StyledComponents/Typography';
+import { P, WEIGHTS } from '../../../styles/StyledComponents/Typography';
 
 // Hooks
 import useMetaTags from '../../../Hooks/useMetaTags';
@@ -152,16 +152,19 @@ function TrafficStops(props) {
   const [visibleStopsGroupedByPurpose, setVisibleStopsGroupedByPurpose] = useState([
     {
       key: 'safety',
+      title: 'Safety Violation',
       visible: true,
       order: 1,
     },
     {
       key: 'regulatory',
+      title: 'Regulatory/Equipment',
       visible: true,
       order: 2,
     },
     {
       key: 'other',
+      title: 'Other',
       visible: false,
       order: 3,
     },
@@ -554,7 +557,10 @@ function TrafficStops(props) {
     const otherGraphs = toggleState.filter((v) => v.key !== key);
 
     setVisibleStopsGroupedByPurpose(
-      [...otherGraphs, { key, visible: !toggleGraph.visible, order: toggleGraph.order }].sort(
+      [
+        ...otherGraphs,
+        { key, visible: !toggleGraph.visible, title: toggleGraph.title, order: toggleGraph.order },
+      ].sort(
         // eslint-disable-next-line no-nested-ternary
         (a, b) => (a.order < b.order ? (a.order === b.order ? 0 : -1) : 1)
       )
@@ -660,7 +666,7 @@ function TrafficStops(props) {
           </S.LegendBeside>
         </S.ChartSubsection>
       </S.ChartSection>
-      <S.ChartSection>
+      <S.ChartSection marginTop={5}>
         <ChartHeader
           chartTitle="Traffic Stops By Stop Purpose"
           handleViewData={showStopPurposeModal}
@@ -688,19 +694,13 @@ function TrafficStops(props) {
           </StopGroupsContainer>
         </LineWrapper>
       </S.ChartSection>
-      <S.ChartSection>
+      <S.ChartSection marginTop={5}>
         <ChartHeader
           chartTitle="Traffic Stops By Stop Purpose and Race Count"
           handleViewData={showGroupedStopPurposeModal}
         />
         <P>Shows the number of traffics stops broken down by purpose and race / ethnicity.</P>
-        <Legend
-          heading="Show on graph:"
-          keys={stopPurposeEthnicGroups}
-          onKeySelect={handleStopPurposeKeySelected}
-          showNonHispanic
-          row
-        />
+
         <NewModal
           tableHeader="Traffic Stops By Stop Purpose and Race Count"
           tableSubheader="Shows the number of traffics stops broken down by purpose and race / ethnicity"
@@ -728,23 +728,12 @@ function TrafficStops(props) {
             gap: '10px',
             marginTop: '10px',
             marginBottom: '10px',
+            alignItems: 'center',
           }}
         >
           <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 visible={visibleStopsGroupedByPurpose[0].visible}>
             <LineChart
@@ -812,6 +801,31 @@ function TrafficStops(props) {
             />
           </GroupedStopsContainer>
         </PieWrapper>
+
+        <Legend
+          heading="Show on graph:"
+          keys={stopPurposeEthnicGroups}
+          onKeySelect={handleStopPurposeKeySelected}
+          showNonHispanic
+          row
+        />
+
+        <div style={{ marginTop: '2em' }}>
+          <P weight={WEIGHTS[1]}>Toggle graphs:</P>
+          <div style={{ display: 'flex', gap: '10px', flexDirection: 'row' }}>
+            {visibleStopsGroupedByPurpose.map((vg, i) => (
+              <Checkbox
+                height={25}
+                width={25}
+                label={vg.title}
+                value={vg.key}
+                key={i}
+                checked={vg.visible}
+                onChange={toggleGroupedPurposeGraphs}
+              />
+            ))}
+          </div>
+        </div>
       </S.ChartSection>
     </TrafficStopsStyled>
   );

diff --git a/frontend/src/Components/Elements/Inputs/Checkbox.js b/frontend/src/Components/Elements/Inputs/Checkbox.js
@@ -4,11 +4,11 @@ import * as Styled from './Checkbox.styled';
 import CheckboxIcon from '../../../img/icons/CheckboxIcon';
 import { HelpText } from './Input.styled';
 
-function Checkbox({ value, checked, onChange, label, helpText }) {
+function Checkbox({ value, checked, onChange, label, helpText, ...props }) {
   return (
     <Styled.Wrapper>
       <Styled.CheckboxWrapper onClick={() => onChange(value)}>
-        <CheckboxIcon fill="black" checked={checked} />
+        <CheckboxIcon fill="black" checked={checked} {...props} />
         {label && <Styled.Label>{label}</Styled.Label>}
       </Styled.CheckboxWrapper>
       {helpText && <HelpText>{helpText}</HelpText>}

diff --git a/frontend/src/Components/Elements/Inputs/Checkbox.styled.js b/frontend/src/Components/Elements/Inputs/Checkbox.styled.js
@@ -1,14 +1,18 @@
 import styled from 'styled-components';
 
-export const Wrapper = styled.div``;
+export const Wrapper = styled.div`
+  cursor: pointer;
+`;
 
 export const CheckboxWrapper = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   margin: 0.5em 0;
+  cursor: pointer;
 `;
 
 export const Label = styled.label`
-  margin-left: 1em;
+  margin-left: 0.5em;
+  cursor: pointer;
 `;
diff --git a/frontend/src/img/icons/CheckboxIcon.js b/frontend/src/img/icons/CheckboxIcon.js
@@ -5,8 +5,9 @@ import Icon, { ICONS } from './Icon';
 function CheckboxIcon({ checked, fill, ...props }) {
   return (
     <Icon
-      height="18px"
-      width="18px"
+      height={`${props.height || 18}px`}
+      width={`${props.width || 18}px`}
+      marginRight={`${props.marginRight || 0}px`}
       icon={`${checked ? ICONS.checkboxFilled : ICONS.checkboxEmpty}`}
       // fill={checked ? fill : props.theme.colors.grey}
       fill={fill}