Updated line and pie colors.

Author: Robert Crocker

src/App.tsx

@@ -23,7 +23,7 @@ function App() {
         outerRadius={240}
         pieLabel={true}
       />
-      <BarChart
+      {/*<BarChart
         theme="dark"
         height="100%"
         width="100%"
@@ -50,9 +50,9 @@ function App() {
         yGrid={true}
         xAxisLabel="Date"
         yAxisLabel="Value"
-      />
+      /> */}
       <LineChart
-        theme="dark"
+        theme="light"
         height={'100%'}
         width={'100%'}
         data={portfolio}
@@ -67,7 +67,7 @@ function App() {
         legend={'right'}
         legendLabel="Markets"
       />
-      <ScatterPlot
+      {/* <ScatterPlot
         theme="light"
         height="100%"
         width="100%"
@@ -81,7 +81,7 @@ function App() {
         yGrid={true}
         yAxis="right"
         yAxisLabel="Body Mass"
-      />
+      /> */}
     </Container>
   );
 }

src/charts/LineChart/LineChart.tsx

@@ -158,10 +158,21 @@ export default function LineChart({
   // Define how the data will drive your design
   // ********************
 
+  const numberOfKeys = Array.from(keys).length;
+  // let discreteColors = 0;
+  // let computedScheme: string[];
+  // if (numberOfKeys > 3) {
+  //   discreteColors = Math.min(Array.from(keys).length, 9);
+  //   computedScheme = d3[`${colorScheme}`][discreteColors];
+  // } else {
+
+  // }
   const discreteColors =
-    Array.from(keys).length < 4 ? 3 : Math.min(Array.from(keys).length, 9);
-  const computedScheme = d3[`${colorScheme}`][discreteColors];
-  const colorScale = d3.scaleOrdinal(Array.from(computedScheme));
+    numberOfKeys < 4 ? 3 : Math.min(Array.from(keys).length, 9);
+  const computedScheme = Array.from(
+    d3[`${colorScheme}`][discreteColors]
+  ).reverse();
+  const colorScale = d3.scaleOrdinal(computedScheme);
   colorScale.domain(computedScheme);
 
   // ********************
@@ -201,6 +212,7 @@ export default function LineChart({
     );
   }, [data, xScale, yScale, xAccessor, yAccessor, cHeight, cWidth, margin]);
 
+  console.log('KEYS ', keys);
   return (
     <ThemeProvider theme={themes[theme]}>
       <div ref={anchor} style={{ width: width, height: height }}>

src/charts/PieChart/PieChart.tsx

@@ -145,16 +145,22 @@ export default function PieChart({
   // Define how the data will drive your design
   // ********************
 
-  const discreteColors = Math.min(keys.length, 9);
-  const computedScheme = d3[`${colorScheme}`][discreteColors];
-  const colorScale = d3.scaleOrdinal(Array.from(computedScheme).reverse());
+  const numberOfKeys = Array.from(keys).length;
+  const discreteColors =
+    numberOfKeys < 4 ? 3 : Math.min(Array.from(keys).length, 9);
+  const computedScheme = Array.from(
+    d3[`${colorScheme}`][discreteColors]
+  ).reverse();
+  const colorScale = d3.scaleOrdinal(computedScheme);
   colorScale.domain(keys);
 
   // ********************
   // STEP 5. Set up supportive elements
   // Render your axes, labels, legends, annotations, etc.
   // ********************
 
+  const colorLabels = [...keys].reverse();
+
   const textTranform = (d: any) => {
     const [x, y]: number[] = arcGenerator.centroid(d);
     return `translate(${x}, ${y})`;
@@ -287,7 +293,7 @@ export default function PieChart({
                 <ColorLegend
                   theme={theme}
                   legendLabel={legendLabel}
-                  labels={keys}
+                  labels={colorLabels}
                   circleRadius={5 /* Radius of each color swab in legend */}
                   colorScale={colorScale}
                   dataTestId="pie-chart-legend"

src/styles/componentStyles.ts

@@ -3,6 +3,6 @@ import styled from 'styled-components';
 export const Container = styled.div`
   height: 100vh;
   width: 100vw;
-  /* background-color: #ffffff; */
-  background-color: #1d1d1d;
+  background-color: #ffffff;
+  /* background-color: #1d1d1d; */
 `;