Additional styling changes.

colebillys19 · May 28, 2022 · 8aa7fa8 · 8aa7fa8
1 parent 8cadb8c
commit 8aa7fa8
Show file tree

Hide file tree

Showing 36 changed files with 684 additions and 740 deletions.
diff --git a/src/App/helpers.js b/src/App/helpers.js
@@ -0,0 +1,8 @@
+export const getPaddingVal = (chartName) => {
+  const nameChars = chartName.slice(-4);
+  if (nameChars === 'asic') {
+    return '0';
+  }
+
+  return nameChars === 'late' ? '30px' : '20px';
+};
diff --git a/src/App/index.js b/src/App/index.js
@@ -2,7 +2,12 @@ import React, { useState } from 'react';
 
 import SelectMenu from './SelectMenu';
 import { chartDict } from './constants';
-import { AppContainer, AppSubcontainer } from './styledComponents';
+import { getPaddingVal } from './helpers';
+import {
+  AppContainer,
+  AppSubcontainer,
+  ChartContainer,
+} from './styledComponents';
 
 const App = () => {
   // string passed here determines which chart shows on page load (refer to chartDict constant)
@@ -12,7 +17,9 @@ const App = () => {
     <AppContainer className="App">
       <AppSubcontainer>
         <SelectMenu activeChart={activeChart} setActiveChart={setActiveChart} />
-        {chartDict[activeChart]}
+        <ChartContainer paddingVal={getPaddingVal(activeChart)}>
+          {chartDict[activeChart]}
+        </ChartContainer>
       </AppSubcontainer>
     </AppContainer>
   );

diff --git a/src/App/styledComponents.js b/src/App/styledComponents.js
@@ -14,6 +14,13 @@ export const AppSubcontainer = styled.div`
   flex-direction: column;
 `;
 
+export const ChartContainer = styled.div`
+  background-color: white;
+  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.5);
+  margin-top: 40px;
+  padding: ${({ paddingVal }) => paddingVal};
+`;
+
 export const SelectMenuContainer = styled.div`
   display: flex;
   height: 40px;

diff --git a/src/BasicCharts/AreaStack/index.js b/src/BasicCharts/AreaStack/index.js
@@ -9,7 +9,7 @@ import { ChartWrapper } from '../styledComponents';
 
 const AreaStack = () => (
   <ChartWrapper>
-    <VictoryChart>
+    <VictoryChart padding={{ bottom: 46, left: 54, right: 42, top: 46 }}>
       <VictoryStack>
         <VictoryArea data={dataA} style={{ data: { fill: '#333' } }} />
         <VictoryArea data={dataB} style={{ data: { fill: '#888' } }} />

diff --git a/src/BasicCharts/Bar/index.js b/src/BasicCharts/Bar/index.js
@@ -8,7 +8,10 @@ import { ChartWrapper } from '../styledComponents';
 
 const Bar = () => (
   <ChartWrapper>
-    <VictoryChart domainPadding={{ x: 25 }}>
+    <VictoryChart
+      domainPadding={{ x: 25 }}
+      padding={{ bottom: 46, left: 46, right: 36, top: 46 }}
+    >
       <VictoryBar data={data} />
       <VictoryAxis style={{ ticks: { size: 4, stroke: '#000' } }} />
       <VictoryAxis

diff --git a/src/BasicCharts/BarGrouped/index.js b/src/BasicCharts/BarGrouped/index.js
@@ -9,7 +9,10 @@ import { ChartWrapper } from '../styledComponents';
 
 const BarGrouped = () => (
   <ChartWrapper>
-    <VictoryChart domainPadding={{ x: 25 }}>
+    <VictoryChart
+      domainPadding={{ x: 25 }}
+      padding={{ bottom: 46, left: 50, right: 32, top: 46 }}
+    >
       <VictoryGroup offset={12}>
         <VictoryBar data={data.barA} />
         <VictoryBar data={data.barB} />

diff --git a/src/BasicCharts/BarGroupedStack/index.js b/src/BasicCharts/BarGroupedStack/index.js
@@ -10,7 +10,10 @@ import { ChartWrapper } from '../styledComponents';
 
 const BarGroupedStack = () => (
   <ChartWrapper>
-    <VictoryChart domainPadding={{ x: 25 }}>
+    <VictoryChart
+      domainPadding={{ x: 25 }}
+      padding={{ bottom: 46, left: 50, right: 32, top: 46 }}
+    >
       <VictoryGroup offset={12}>
         <VictoryStack>
           <VictoryBar data={data.stackA.barA} />

diff --git a/src/BasicCharts/BarHorizontal/index.js b/src/BasicCharts/BarHorizontal/index.js
@@ -8,7 +8,10 @@ import { ChartWrapper } from '../styledComponents';
 
 const BarHorizontal = () => (
   <ChartWrapper>
-    <VictoryChart domainPadding={{ x: 25 }}>
+    <VictoryChart
+      domainPadding={{ x: 25 }}
+      padding={{ bottom: 46, left: 54, right: 36, top: 30 }}
+    >
       <VictoryBar data={data} horizontal />
       <VictoryAxis style={{ ticks: { size: 4, stroke: '#000' } }} />
       <VictoryAxis

diff --git a/src/BasicCharts/BarHorizontalStack/index.js b/src/BasicCharts/BarHorizontalStack/index.js
@@ -9,7 +9,10 @@ import { ChartWrapper } from '../styledComponents';
 
 const BarHorizontalStack = () => (
   <ChartWrapper>
-    <VictoryChart domainPadding={{ x: 25 }}>
+    <VictoryChart
+      domainPadding={{ x: 25 }}
+      padding={{ bottom: 46, left: 54, right: 36, top: 30 }}
+    >
       <VictoryStack horizontal>
         <VictoryBar data={data.barA} />
         <VictoryBar data={data.barB} />

diff --git a/src/BasicCharts/BarHorizontalStackNegative/index.js b/src/BasicCharts/BarHorizontalStackNegative/index.js
@@ -9,7 +9,10 @@ import { ChartWrapper } from '../styledComponents';
 
 const BarHorizontalStackNegative = () => (
   <ChartWrapper>
-    <VictoryChart domainPadding={{ x: 25 }}>
+    <VictoryChart
+      domainPadding={{ x: 25 }}
+      padding={{ bottom: 44, left: 36, right: 36, top: 28 }}
+    >
       <VictoryStack horizontal>
         <VictoryBar data={data.barA} />
         <VictoryBar data={data.barB} />

diff --git a/src/BasicCharts/BarNegative/index.js b/src/BasicCharts/BarNegative/index.js
@@ -8,7 +8,10 @@ import { ChartWrapper } from '../styledComponents';
 
 const BarNegative = () => (
   <ChartWrapper>
-    <VictoryChart domainPadding={{ x: 25 }}>
+    <VictoryChart
+      domainPadding={{ x: 25 }}
+      padding={{ bottom: 40, left: 60, right: 40, top: 40 }}
+    >
       <VictoryBar data={data} standalone={false} />
       <VictoryAxis style={{ ticks: { size: 4, stroke: '#000' } }} />
       <VictoryAxis

diff --git a/src/BasicCharts/BarStack/index.js b/src/BasicCharts/BarStack/index.js
@@ -9,7 +9,10 @@ import { ChartWrapper } from '../styledComponents';
 
 const BarStack = () => (
   <ChartWrapper>
-    <VictoryChart domainPadding={{ x: 25 }}>
+    <VictoryChart
+      domainPadding={{ x: 25 }}
+      padding={{ bottom: 46, left: 60, right: 40, top: 40 }}
+    >
       <VictoryStack>
         <VictoryBar data={data.barA} />
         <VictoryBar data={data.barB} />

diff --git a/src/BasicCharts/MultiLine/index.js b/src/BasicCharts/MultiLine/index.js
@@ -8,7 +8,10 @@ import { ChartWrapper } from '../styledComponents';
 
 const MultiLine = () => (
   <ChartWrapper>
-    <VictoryChart domainPadding={{ x: 15 }}>
+    <VictoryChart
+      domainPadding={{ x: 15, y: 2 }}
+      padding={{ bottom: 40, left: 55, right: 25, top: 40 }}
+    >
       <VictoryLine
         data={dataC}
         labels={({ datum: { y } }) => y}

diff --git a/src/BasicCharts/styledComponents.js b/src/BasicCharts/styledComponents.js
@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
 export const ChartWrapper = styled.div`
-  background-color: white;
-  margin: 40px;
   width: 800px;
 `;
diff --git a/src/ChartTemplates/AreaStack/styledComponents.js b/src/ChartTemplates/AreaStack/styledComponents.js
@@ -1,10 +1,5 @@
 import styled from 'styled-components';
 
 export const ChartWrapper = styled.div`
-  background-color: white;
-  height: 324px;
-  margin-top: 40px;
   width: 1200px;
-  padding: 10px;
-  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.5);
 `;
diff --git a/src/ChartTemplates/Bar/styledComponents.js b/src/ChartTemplates/Bar/styledComponents.js
@@ -1,9 +1,5 @@
 import styled from 'styled-components';
 
 export const ChartWrapper = styled.div`
-  background-color: white;
-  height: 373px;
-  margin-top: 40px;
-  padding: 10px;
   width: 1200px;
 `;
diff --git a/src/ChartTemplates/BarGrouped/styledComponents.js b/src/ChartTemplates/BarGrouped/styledComponents.js
@@ -1,9 +1,5 @@
 import styled from 'styled-components';
 
 export const ChartWrapper = styled.div`
-  background-color: white;
-  height: 373px;
-  margin-top: 40px;
-  padding: 10px;
   width: 1200px;
 `;
diff --git a/src/ChartTemplates/BarGroupedStack/styledComponents.js b/src/ChartTemplates/BarGroupedStack/styledComponents.js
@@ -1,9 +1,5 @@
 import styled from 'styled-components';
 
 export const ChartWrapper = styled.div`
-  background-color: white;
-  height: 373px;
-  margin-top: 40px;
-  padding: 10px;
   width: 1200px;
 `;
diff --git a/src/ChartTemplates/BarHorizontal/styledComponents.js b/src/ChartTemplates/BarHorizontal/styledComponents.js
@@ -1,9 +1,5 @@
 import styled from 'styled-components';
 
 export const ChartWrapper = styled.div`
-  background-color: white;
-  height: 304px;
-  margin-top: 40px;
-  padding: 10px;
-  width: 1100px;
+  width: 1200px;
 `;