feat(charts): Assign colour dynamically

Relates #81
tech-for-better · Sep 1, 2020 · bac4fb6 · bac4fb6
1 parent 092ff1e
commit bac4fb6
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 14 deletions.
diff --git a/src/components/careerPath/charts/Charts.tsx b/src/components/careerPath/charts/Charts.tsx
@@ -5,14 +5,14 @@ import WorkingFuturesPrediction from './charts/WorkingFuturesPrediction';
 import WorkingFuturesReplacemendDemand from './charts/WorkingFuturesReplacementDemand';
 import Abilities from './charts/Abilities';
 
-const Charts: React.FC<MotherChart> = ({ soc, name }) => {
+const Charts: React.FC<MotherChart> = ({ soc, name, color }) => {
   const onetCode = `15-1133.00`;
   return (
     <div>
-      <WorkingFuturesPrediction soc={soc} name={name} />
-      <WorkingFuturesReplacemendDemand soc={soc} name={name} />
-      <EstimatedPay soc={soc} name={name} />
-      <Abilities onetCode={onetCode} name={name} />
+      <WorkingFuturesPrediction soc={soc} name={name} color={color} />
+      <WorkingFuturesReplacemendDemand soc={soc} name={name} color={color} />
+      <EstimatedPay soc={soc} name={name} color={color} />
+      <Abilities onetCode={onetCode} name={name} color={color} />
     </div>
   );
 };

diff --git a/src/components/careerPath/charts/charts/Abilities.tsx b/src/components/careerPath/charts/charts/Abilities.tsx
@@ -3,7 +3,7 @@ import { BarChart, XAxis, YAxis, CartesianGrid, Tooltip, Bar } from 'recharts';
 import useONET from '../hooks/useONET';
 import correctVowelGrammar from '../../../../utils/correctVowelGrammar';
 
-const Abilities: React.FC<ONETChart> = ({ onetCode, name }) => {
+const Abilities: React.FC<ONETChart> = ({ onetCode, name, color }) => {
   const [skills, setSkills] = useState(``);
   const [, setError] = useState(false);
   const data = skills?.data?.scales[0]?.abilities;
@@ -22,7 +22,7 @@ const Abilities: React.FC<ONETChart> = ({ onetCode, name }) => {
         <XAxis dataKey="name" hide />
         <YAxis domain={[0, upperBound]} />
         <Tooltip />
-        <Bar dataKey="value" fill="#8884d8" />
+        <Bar dataKey="value" fill={color} />
       </BarChart>
     </>
   );

diff --git a/src/components/careerPath/charts/charts/EstimatedPay.tsx b/src/components/careerPath/charts/charts/EstimatedPay.tsx
@@ -3,7 +3,7 @@ import { BarChart, XAxis, YAxis, CartesianGrid, Tooltip, Bar } from 'recharts';
 import useSOC from '../hooks/useSOC';
 import correctVowelGrammar from '../../../../utils/correctVowelGrammar';
 
-const EstimatedPay: React.FC<SOCChart> = ({ soc, name }) => {
+const EstimatedPay: React.FC<SOCChart> = ({ soc, name, color }) => {
   const [estimatedPay, setEstimatedPay] = useState(``);
   const [, setError] = useState(``);
 
@@ -18,7 +18,7 @@ const EstimatedPay: React.FC<SOCChart> = ({ soc, name }) => {
         <XAxis dataKey="year" />
         <YAxis dataKey="estpay" />
         <Tooltip />
-        <Bar dataKey="estpay" fill="#8884d8" />
+        <Bar dataKey="estpay" fill={color} />
       </BarChart>
     </>
   );

diff --git a/src/components/careerPath/charts/charts/WorkingFuturesPrediction.tsx b/src/components/careerPath/charts/charts/WorkingFuturesPrediction.tsx
@@ -3,7 +3,7 @@ import { AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area } from 'recharts'
 import useSOC from '../hooks/useSOC';
 import correctVowelGrammar from '../../../../utils/correctVowelGrammar';
 
-const WorkingFuturesPrediction: React.FC<SOCChart> = ({ soc, name }) => {
+const WorkingFuturesPrediction: React.FC<SOCChart> = ({ soc, name, color }) => {
   const [wfData, setWfData] = useState(``);
   const [, setError] = useState(false);
   useSOC({ soc, endpoint: `/wf/predict`, setter: setWfData, setError });
@@ -24,8 +24,7 @@ const WorkingFuturesPrediction: React.FC<SOCChart> = ({ soc, name }) => {
       >
         <defs>
           <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8} />
-            <stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
+            <stop stopColor={color} />
           </linearGradient>
         </defs>
         <XAxis dataKey="year" />

diff --git a/src/components/careerPath/charts/declarations.d.ts b/src/components/careerPath/charts/declarations.d.ts
@@ -1,11 +1,13 @@
 interface SOCChart {
   name: string;
   soc: string;
+  color: string;
 }
 
 interface ONETChart {
   name: string;
   onetCode: string;
+  color: string;
 }
 
-type GenericChart = SOCChart & ONETChart;
+type MotherChart = SOCChart & ONETChart;
diff --git a/src/templates/CareerPath.tsx b/src/templates/CareerPath.tsx
@@ -29,7 +29,7 @@ const CareerPath: React.FC<PageProps> = ({ data }) => {
         <h2 className="mb-4">Career Path Courses:</h2>
         <CoursesWrapper courseData={courses} />
       </div>
-      {lmiCode && <Charts soc={lmiCode} name={name} />}
+      {lmiCode && <Charts soc={lmiCode} name={name} color={color} />}
     </main>
   );
 };