Add chart container that makes all graphs the same height (#291)

caktus · Apr 16, 2024 · 286749a · 286749a
1 parent 70519be
commit 286749a
Show file tree

Hide file tree

Showing 18 changed files with 358 additions and 409 deletions.
diff --git a/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js b/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js
@@ -7,15 +7,15 @@ import ChartHeader from '../../ChartSections/ChartHeader';
 import HorizontalBarChart from '../../../NewCharts/HorizontalBarChart';
 import axios from '../../../../Services/Axios';
 import useOfficerId from '../../../../Hooks/useOfficerId';
-import { ChartWrapper } from '../Arrests.styles';
 import NewModal from '../../../NewCharts/NewModal';
+import { ChartContainer } from '../../ChartSections/ChartsCommon.styled';
 import createTableData from '../../../../util/createTableData';
 import { RACE_TABLE_COLUMNS } from '../../chartUtils';
 
 const graphTitle = 'Traffic Stops Leading to Arrest by Count';
 
 function CountOfStopsAndArrests(props) {
-  const { agencyId, agencyName, showCompare, year } = props;
+  const { agencyId, agencyName, year } = props;
 
   const officerId = useOfficerId();
 
@@ -106,28 +106,26 @@ function CountOfStopsAndArrests(props) {
           closeModal={() => setArrestData((state) => ({ ...state, isOpen: false }))}
         />
       </S.ChartDescription>
-      <S.ChartSubsection showCompare={showCompare}>
-        <ChartWrapper>
-          <HorizontalBarChart
-            title={graphTitle}
-            data={arrestData}
-            pinMaxValue={false}
-            xStacked
-            yStacked
-            tickStyle={null}
-            stepSize={50000}
-            tooltipLabelCallback={formatTooltipValue}
-            modalConfig={{
-              tableHeader: graphTitle,
-              tableSubheader: getBarChartModalSubHeading(
-                'Shows count of stops and corresponding arrests for a given race/ethnic group'
-              ),
-              agencyName,
-              chartTitle: getBarChartModalSubHeading(graphTitle),
-            }}
-          />
-        </ChartWrapper>
-      </S.ChartSubsection>
+      <ChartContainer>
+        <HorizontalBarChart
+          title={graphTitle}
+          data={arrestData}
+          pinMaxValue={false}
+          xStacked
+          yStacked
+          tickStyle={null}
+          stepSize={50000}
+          tooltipLabelCallback={formatTooltipValue}
+          modalConfig={{
+            tableHeader: graphTitle,
+            tableSubheader: getBarChartModalSubHeading(
+              'Shows count of stops and corresponding arrests for a given race/ethnic group'
+            ),
+            agencyName,
+            chartTitle: getBarChartModalSubHeading(graphTitle),
+          }}
+        />
+      </ChartContainer>
     </S.ChartSection>
   );
 }

diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js
@@ -7,15 +7,15 @@ import ChartHeader from '../../ChartSections/ChartHeader';
 import HorizontalBarChart from '../../../NewCharts/HorizontalBarChart';
 import axios from '../../../../Services/Axios';
 import useOfficerId from '../../../../Hooks/useOfficerId';
-import { ChartWrapper } from '../Arrests.styles';
 import NewModal from '../../../NewCharts/NewModal';
+import { ChartContainer } from '../../ChartSections/ChartsCommon.styled';
 import createTableData from '../../../../util/createTableData';
 import { RACE_TABLE_COLUMNS } from '../../chartUtils';
 
 const graphTitle = 'Searches Leading to Arrest by Percentage ';
 
 function PercentageOfSearches(props) {
-  const { agencyId, agencyName, showCompare, year } = props;
+  const { agencyId, agencyName, year } = props;
 
   const officerId = useOfficerId();
 
@@ -104,24 +104,22 @@ function PercentageOfSearches(props) {
           closeModal={() => setArrestData((state) => ({ ...state, isOpen: false }))}
         />
       </S.ChartDescription>
-      <S.ChartSubsection showCompare={showCompare}>
-        <ChartWrapper>
-          <HorizontalBarChart
-            title={graphTitle}
-            data={arrestData}
-            displayLegend={false}
-            tooltipLabelCallback={formatTooltipValue}
-            modalConfig={{
-              tableHeader: graphTitle,
-              tableSubheader: getBarChartModalSubHeading(
-                'Shows what number of searches led to an arrest for a given race / ethnic group'
-              ),
-              agencyName,
-              chartTitle: getBarChartModalSubHeading(graphTitle),
-            }}
-          />
-        </ChartWrapper>
-      </S.ChartSubsection>
+      <ChartContainer>
+        <HorizontalBarChart
+          title={graphTitle}
+          data={arrestData}
+          displayLegend={false}
+          tooltipLabelCallback={formatTooltipValue}
+          modalConfig={{
+            tableHeader: graphTitle,
+            tableSubheader: getBarChartModalSubHeading(
+              'Shows what number of searches led to an arrest for a given race / ethnic group'
+            ),
+            agencyName,
+            chartTitle: getBarChartModalSubHeading(graphTitle),
+          }}
+        />
+      </ChartContainer>
     </S.ChartSection>
   );
 }

diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js
@@ -7,16 +7,16 @@ import ChartHeader from '../../ChartSections/ChartHeader';
 import HorizontalBarChart from '../../../NewCharts/HorizontalBarChart';
 import axios from '../../../../Services/Axios';
 import useOfficerId from '../../../../Hooks/useOfficerId';
-import { ChartWrapper } from '../Arrests.styles';
 import NewModal from '../../../NewCharts/NewModal';
+import { ChartContainer } from '../../ChartSections/ChartsCommon.styled';
 import createTableData from '../../../../util/createTableData';
 import DataSubsetPicker from '../../ChartSections/DataSubsetPicker/DataSubsetPicker';
 import { RACE_TABLE_COLUMNS, STOP_PURPOSE_GROUPS } from '../../chartUtils';
 
 const graphTitle = 'Percentage of Searches Leading to Arrest by Stop Purpose Group ';
 
 function PercentageOfSearchesForStopPurposeGroup(props) {
-  const { agencyId, agencyName, showCompare, year } = props;
+  const { agencyId, agencyName, year } = props;
 
   const officerId = useOfficerId();
 
@@ -135,24 +135,22 @@ function PercentageOfSearchesForStopPurposeGroup(props) {
           />
         </NewModal>
       </S.ChartDescription>
-      <S.ChartSubsection showCompare={showCompare}>
-        <ChartWrapper>
-          <HorizontalBarChart
-            title={graphTitle}
-            data={arrestData}
-            displayLegend={false}
-            tooltipLabelCallback={formatTooltipValue}
-            modalConfig={{
-              tableHeader: graphTitle,
-              tableSubheader: getBarChartModalSubHeading(
-                'Shows what percentage of searches led to an arrest for a given stop purpose group.'
-              ),
-              agencyName,
-              chartTitle: getBarChartModalSubHeading(graphTitle),
-            }}
-          />
-        </ChartWrapper>
-      </S.ChartSubsection>
+      <ChartContainer>
+        <HorizontalBarChart
+          title={graphTitle}
+          data={arrestData}
+          displayLegend={false}
+          tooltipLabelCallback={formatTooltipValue}
+          modalConfig={{
+            tableHeader: graphTitle,
+            tableSubheader: getBarChartModalSubHeading(
+              'Shows what percentage of searches led to an arrest for a given stop purpose group.'
+            ),
+            agencyName,
+            chartTitle: getBarChartModalSubHeading(graphTitle),
+          }}
+        />
+      </ChartContainer>
     </S.ChartSection>
   );
 }

diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesPerStopPurpose.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesPerStopPurpose.js
@@ -7,8 +7,8 @@ import ChartHeader from '../../ChartSections/ChartHeader';
 import HorizontalBarChart from '../../../NewCharts/HorizontalBarChart';
 import axios from '../../../../Services/Axios';
 import useOfficerId from '../../../../Hooks/useOfficerId';
-import { ChartWrapper } from '../Arrests.styles';
 import NewModal from '../../../NewCharts/NewModal';
+import { ChartContainer } from '../../ChartSections/ChartsCommon.styled';
 
 import createTableData from '../../../../util/createTableData';
 import DataSubsetPicker from '../../ChartSections/DataSubsetPicker/DataSubsetPicker';
@@ -17,7 +17,7 @@ import { RACE_TABLE_COLUMNS, STOP_PURPOSE_TYPES, STOP_TYPE_COLORS } from '../../
 const graphTitle = 'Percentage of Searches Leading to Arrest by Stop Purpose Type';
 
 function PercentageOfStopsForStopPurpose(props) {
-  const { agencyId, agencyName, showCompare, year } = props;
+  const { agencyId, agencyName, year } = props;
 
   const officerId = useOfficerId();
 
@@ -135,25 +135,23 @@ function PercentageOfStopsForStopPurpose(props) {
           />
         </NewModal>
       </S.ChartDescription>
-      <S.ChartSubsection showCompare={showCompare}>
-        <ChartWrapper>
-          <HorizontalBarChart
-            title={graphTitle}
-            data={arrestData}
-            displayLegend={false}
-            tooltipLabelCallback={formatTooltipValue}
-            pinMaxValue={false}
-            modalConfig={{
-              tableHeader: graphTitle,
-              tableSubheader: getBarChartModalSubHeading(
-                'Shows what percentage of searches led to an arrest for a given stop purpose.'
-              ),
-              agencyName,
-              chartTitle: getBarChartModalSubHeading(graphTitle),
-            }}
-          />
-        </ChartWrapper>
-      </S.ChartSubsection>
+      <ChartContainer>
+        <HorizontalBarChart
+          title={graphTitle}
+          data={arrestData}
+          displayLegend={false}
+          tooltipLabelCallback={formatTooltipValue}
+          pinMaxValue={false}
+          modalConfig={{
+            tableHeader: graphTitle,
+            tableSubheader: getBarChartModalSubHeading(
+              'Shows what percentage of searches led to an arrest for a given stop purpose.'
+            ),
+            agencyName,
+            chartTitle: getBarChartModalSubHeading(graphTitle),
+          }}
+        />
+      </ChartContainer>
     </S.ChartSection>
   );
 }

diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js
@@ -7,15 +7,15 @@ import ChartHeader from '../../ChartSections/ChartHeader';
 import HorizontalBarChart from '../../../NewCharts/HorizontalBarChart';
 import axios from '../../../../Services/Axios';
 import useOfficerId from '../../../../Hooks/useOfficerId';
-import { ChartWrapper } from '../Arrests.styles';
 import NewModal from '../../../NewCharts/NewModal';
+import { ChartContainer } from '../../ChartSections/ChartsCommon.styled';
 import createTableData from '../../../../util/createTableData';
 import { RACE_TABLE_COLUMNS } from '../../chartUtils';
 
 const graphTitle = 'Traffic Stops Leading to Arrest by Percentage';
 
 function PercentageOfStops(props) {
-  const { agencyId, agencyName, showCompare, year } = props;
+  const { agencyId, agencyName, year } = props;
 
   const officerId = useOfficerId();
 
@@ -104,24 +104,22 @@ function PercentageOfStops(props) {
           closeModal={() => setArrestData((state) => ({ ...state, isOpen: false }))}
         />
       </S.ChartDescription>
-      <S.ChartSubsection showCompare={showCompare}>
-        <ChartWrapper>
-          <HorizontalBarChart
-            title={graphTitle}
-            data={arrestData}
-            displayLegend={false}
-            tooltipLabelCallback={formatTooltipValue}
-            modalConfig={{
-              tableHeader: graphTitle,
-              tableSubheader: getBarChartModalSubHeading(
-                'Shows what percentage of stops led to an arrest for a given race / ethnic group'
-              ),
-              agencyName,
-              chartTitle: getBarChartModalSubHeading(graphTitle),
-            }}
-          />
-        </ChartWrapper>
-      </S.ChartSubsection>
+      <ChartContainer>
+        <HorizontalBarChart
+          title={graphTitle}
+          data={arrestData}
+          displayLegend={false}
+          tooltipLabelCallback={formatTooltipValue}
+          modalConfig={{
+            tableHeader: graphTitle,
+            tableSubheader: getBarChartModalSubHeading(
+              'Shows what percentage of stops led to an arrest for a given race / ethnic group'
+            ),
+            agencyName,
+            chartTitle: getBarChartModalSubHeading(graphTitle),
+          }}
+        />
+      </ChartContainer>
     </S.ChartSection>
   );
 }

diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsForPurposeGroup.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsForPurposeGroup.js
@@ -7,16 +7,16 @@ import ChartHeader from '../../ChartSections/ChartHeader';
 import HorizontalBarChart from '../../../NewCharts/HorizontalBarChart';
 import axios from '../../../../Services/Axios';
 import useOfficerId from '../../../../Hooks/useOfficerId';
-import { ChartWrapper } from '../Arrests.styles';
 import NewModal from '../../../NewCharts/NewModal';
+import { ChartContainer } from '../../ChartSections/ChartsCommon.styled';
 import DataSubsetPicker from '../../ChartSections/DataSubsetPicker/DataSubsetPicker';
 import createTableData from '../../../../util/createTableData';
 import { RACE_TABLE_COLUMNS, STOP_PURPOSE_GROUPS } from '../../chartUtils';
 
 const graphTitle = 'Percentage of Stops Leading to Arrest by Stop Purpose Group';
 
 function PercentageOfStopsForStopPurposeGroup(props) {
-  const { agencyId, agencyName, showCompare, year } = props;
+  const { agencyId, agencyName, year } = props;
 
   const officerId = useOfficerId();
 
@@ -134,24 +134,22 @@ function PercentageOfStopsForStopPurposeGroup(props) {
           />
         </NewModal>
       </S.ChartDescription>
-      <S.ChartSubsection showCompare={showCompare}>
-        <ChartWrapper>
-          <HorizontalBarChart
-            title={graphTitle}
-            data={arrestData}
-            displayLegend={false}
-            tooltipLabelCallback={formatTooltipValue}
-            modalConfig={{
-              tableHeader: graphTitle,
-              tableSubheader: getBarChartModalSubHeading(
-                'Shows what percentage of stops led to an arrest for a given stop purpose group.'
-              ),
-              agencyName,
-              chartTitle: getBarChartModalSubHeading(graphTitle),
-            }}
-          />
-        </ChartWrapper>
-      </S.ChartSubsection>
+      <ChartContainer>
+        <HorizontalBarChart
+          title={graphTitle}
+          data={arrestData}
+          displayLegend={false}
+          tooltipLabelCallback={formatTooltipValue}
+          modalConfig={{
+            tableHeader: graphTitle,
+            tableSubheader: getBarChartModalSubHeading(
+              'Shows what percentage of stops led to an arrest for a given stop purpose group.'
+            ),
+            agencyName,
+            chartTitle: getBarChartModalSubHeading(graphTitle),
+          }}
+        />
+      </ChartContainer>
     </S.ChartSection>
   );
 }