cleanup view more button for pie chart modal

caktus · Aug 4, 2023 · acc81bc · acc81bc
1 parent 926e074
commit acc81bc
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 26 deletions.
diff --git a/frontend/src/Components/Charts/ChartSections/ChartsCommon.styled.js b/frontend/src/Components/Charts/ChartSections/ChartsCommon.styled.js
@@ -64,7 +64,7 @@ export const Spacing = styled.div`
 export const PieSection = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: ${(props) => (props.alignItems ? props.alignItems : 'center')};
   width: ${(props) => (props.zoomed ? '90%' : '33%')};
   margin: 0 auto;
   height: auto;
@@ -92,6 +92,11 @@ export const PieWrapper = styled.div`
   }
 `;
 
+export const PieActionsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const SectionWrapper = styled.div`
   margin: 1em 0;
 `;

diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js
@@ -647,7 +647,7 @@ function TrafficStops(props) {
             </S.PieSection>
           </ChartModal>
 
-          <S.PieSection>
+          <S.PieSection alignItems="start">
             <S.PieWrapper>
               <PieChart
                 data={byPercentagePieData}
@@ -656,13 +656,21 @@ function TrafficStops(props) {
                 maintainAspectRatio
               />
             </S.PieWrapper>
-            <Button onClick={() => setShowZoomedPieChart(true)}>Enlarge</Button>
-            <DataSubsetPicker
-              label="Year"
-              value={year}
-              onChange={handleYearSelect}
-              options={[YEARS_DEFAULT].concat(stopsChartState.yearRange)}
-            />
+            <S.PieActionsWrapper>
+              <DataSubsetPicker
+                label="Year"
+                value={year}
+                onChange={handleYearSelect}
+                options={[YEARS_DEFAULT].concat(stopsChartState.yearRange)}
+              />
+              <div
+                style={{
+                  marginTop: '1em',
+                }}
+              >
+                <Button onClick={() => setShowZoomedPieChart(true)}>View more</Button>
+              </div>
+            </S.PieActionsWrapper>
           </S.PieSection>
         </S.ChartSubsection>
       </S.ChartSection>
@@ -773,6 +781,22 @@ function TrafficStops(props) {
           <span>Switch to {checked ? 'line' : 'pie'} charts</span>
           <Switch onChange={handleChange} checked={checked} className="react-switch" />
         </SwitchContainer>
+        <div style={{ marginTop: '1em' }}>
+          <P weight={WEIGHTS[1]}>Toggle graphs:</P>
+          <div style={{ display: 'flex', gap: '10px', flexDirection: 'row', flexWrap: 'wrap' }}>
+            {visibleStopsGroupedByPurpose.map((vg, i) => (
+              <Checkbox
+                height={25}
+                width={25}
+                label={vg.title}
+                value={vg.key}
+                key={i}
+                checked={vg.visible}
+                onChange={toggleGroupedPurposeGraphs}
+              />
+            ))}
+          </div>
+        </div>
         <LineWrapper visible={checked === false}>
           <GroupedStopsContainer visible={visibleStopsGroupedByPurpose[0].visible}>
             <LineChart
@@ -848,23 +872,6 @@ function TrafficStops(props) {
           showNonHispanic
           row
         />
-
-        <div style={{ marginTop: '2em' }}>
-          <P weight={WEIGHTS[1]}>Toggle graphs:</P>
-          <div style={{ display: 'flex', gap: '10px', flexDirection: 'row', flexWrap: 'wrap' }}>
-            {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>
   );