Merge pull request #104 from oslabs-beta/dev

HotFix

README.md

@@ -42,8 +42,18 @@ import {AreaChart, BarChart, PieChart, ScatterPlot, LineChart} from "d3reactor"
 
 And you're good to go!
 
+<img width="1100" alt="Stacked Bar Chart" src="https://user-images.githubusercontent.com/83976244/152201874-6b5e51a7-92a0-473d-abc7-9f06b45bc525.png">
 
-<img width="1100" alt="Stacked Bar Chart" src="https://user-images.githubusercontent.com/83976244/152202135-2f15b0e9-62da-47c5-aa61-9db4a2a7b80c.png">
 
+# Documentation
+
+For detailed information, please follow the links below: 
+
+* [d3reactor](https://www.d3reactor.com/)
+* [Area Chart](https://www.docs.d3reactor.com/docs/Charts/area-chart)
+* [Bar Chart](https://www.docs.d3reactor.com/docs/Charts/bar-chart)
+* [Line Chart](https://www.docs.d3reactor.com/docs/Charts/line-chart)
+* [Pie Chart](https://www.docs.d3reactor.com/docs/Charts/pie-chart)
+* [Scatter Plot](https://www.docs.d3reactor.com/docs/Charts/scatter-plot)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslabs-beta/d3reactor",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Open-source charting library for creating performant, responsive data visualizations in React",
   "keywords": ["d3", "react", "chart", "graph", "svg", "visualization", "data visualization"],
   "main": "./dist/index.js",

src/App.tsx

@@ -1,23 +1,38 @@
-import React from 'react';
+import React, {useState, useEffect } from 'react';
+
 import BarChart from './charts/BarChart/BarChart';
 import AreaChart from './charts/AreaChart/AreaChart';
 import LineChart from './charts/LineChart/LineChart';
 import ScatterPlot from './charts/ScatterPlot/ScatterPlot';
 import PieChart from './charts/PieChart/PieChart';
+import { Container } from './styles/componentStyles';
 
 import portfolio from '../data/portfolio.json';
 import penguins from '../data/penguins.json';
 import fruit from '../data/fruit.json';
+import unemployment from '../data/unemployment.json'
 import skinny_fruit from '../data/skinny_fruit.json';
 
-import { Container } from './styles/componentStyles';
 
 function App() {
+  const [pie, setPie] = useState(fruit.sort((a, b) => a.value - b.value).slice(2))
+  const [bar, setBar] = useState(skinny_fruit.reverse().slice(2))
+  const [area, setArea] = useState(portfolio.slice(30, 60))
+  const [line, setLine] = useState(unemployment.slice(0, 60))
+  const [scatter, setScatter] = useState(penguins.slice(30, 60))
+
+  useEffect(() => {
+    setTimeout(() => {setPie(fruit.sort((a, b) => a.value - b.value))}, 1000);
+    setTimeout(() => {setBar(skinny_fruit.reverse())}, 2000);
+    setTimeout(() => {setArea(portfolio.slice(0, 60))}, 4000);
+    setTimeout(() => {setLine(unemployment)}, 6000);
+    setTimeout(() => {setScatter(penguins)}, 8000);
+  }, [])
   return (
     <Container className="app">
       <PieChart
         theme="dark"
-        data={fruit.sort((a, b) => a.value - b.value)}
+        data={pie}
         label="label"
         value="value"
         outerRadius={400}
@@ -27,7 +42,7 @@ function App() {
         theme="light"
         height="100%"
         width="100%"
-        data={skinny_fruit.reverse()}
+        data={bar}
         xKey="date"
         yKey="value"
         groupBy="fruit"
@@ -43,7 +58,7 @@ function App() {
         theme="dark"
         height="100%"
         width="100%"
-        data={portfolio.slice(30, 60)}
+        data={area}
         xKey="date"
         yKey="value"
         xAxis="bottom"
@@ -56,10 +71,11 @@ function App() {
         theme="light"
         height={'100%'}
         width={'100%'}
-        data={portfolio}
+        data={line}
         xKey="date"
         xDataType="date"
-        yKey="value"
+        groupBy='division'
+        yKey="unemployment"
         xAxis="bottom"
         yAxis="left"
         yGrid={true}
@@ -72,7 +88,8 @@ function App() {
         theme="light"
         height="100%"
         width="100%"
-        data={penguins}
+        data={scatter}
+        groupBy={'species'}
         xKey="flipper_length_mm"
         xDataType="number"
         xGrid={true}
@@ -82,6 +99,8 @@ function App() {
         yGrid={true}
         yAxis="right"
         yAxisLabel="Body Mass"
+        legend={'right'}
+
       />
     </Container>
   );

src/charts/AreaChart/AreaChart.tsx

@@ -28,8 +28,6 @@ import {
 } from '../../utils';
 import styled, { ThemeProvider } from 'styled-components';
 
-const { light, dark } = themes;
-
 const Area = styled.path`
   fill-opacity: 0.7;
 `;
@@ -88,7 +86,7 @@ export default function AreaChart({
     const groupAccessor = (d: Data) => d[groupBy ?? ''];
     const groups = d3.group(data, groupAccessor);
     return groupBy ? Array.from(groups).map((group) => group[0]) : [yKey];
-  }, [groupBy, yKey]);
+  }, [groupBy, yKey, data]);
 
   const transData = useMemo(() => {
     return groupBy

src/charts/BarChart/BarChart.tsx

@@ -24,9 +24,8 @@ import {
 } from '../../utils';
 import { yScaleDef } from '../../functionality/yScale';
 import { Label } from '../../components/Label';
-import styled, { ThemeProvider } from 'styled-components';
+import{ ThemeProvider } from 'styled-components';
 
-const { light, dark } = themes;
 
 export default function BarChart({
   theme = 'light',
@@ -75,7 +74,7 @@ export default function BarChart({
     const groupAccessor = (d: Data) => d[groupBy ?? ''];
     const groups = d3.group(data, groupAccessor);
     return groupBy ? Array.from(groups).map((group) => group[0]) : [yKey];
-  }, [groupBy, yKey]);
+  }, [groupBy, yKey, data]);
 
   const transData = useMemo(() => {
     return groupBy

src/charts/LineChart/LineChart.tsx

@@ -23,9 +23,8 @@ import { d3Voronoi } from '../../functionality/voronoi';
 import { Label } from '../../components/Label';
 import Tooltip from '../../components/Tooltip';
 
-import styled, { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from 'styled-components';
 
-const { light, dark } = themes;
 
 export default function LineChart({
   theme = 'light',
@@ -203,8 +202,6 @@ export default function LineChart({
       margin
     );
   }, [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

@@ -25,8 +25,6 @@ const PieLabel = styled.text`
   pointer-events: none;
 `;
 
-const { light, dark } = themes;
-
 export default function PieChart({
   theme = 'light',
   data,
@@ -60,7 +58,7 @@ export default function PieChart({
     const groupAccessor = (d: Data) => d[label ?? ''];
     const groups: d3.InternMap<any, any[]> = d3.group(data, groupAccessor);
     return Array.from(groups).map((group) => group[0]);
-  }, [label]);
+  }, [label, data]);
 
   // ********************
   // STEP 2. Determine chart dimensions

src/charts/ScatterPlot/ScatterPlot.tsx

@@ -30,8 +30,6 @@ import { Label } from '../../components/Label';
 
 import { ThemeProvider } from 'styled-components';
 
-const { light, dark } = themes;
-
 export default function ScatterPlot({
   theme = 'light',
   data,
@@ -74,7 +72,7 @@ export default function ScatterPlot({
     const groupAccessor = (d: Data) => d[groupBy ?? ''];
     const groups = d3.group(data, groupAccessor);
     return groupBy ? Array.from(groups).map((group) => group[0]) : [yKey];
-  }, [groupBy, yKey]);
+  }, [groupBy, yKey, data]);
 
   const xAccessor: xAccessorFunc = useMemo(() => {
     return xType === 'number' ? (d) => d[xKey] : (d) => new Date(d[xKey]);

src/components/ColorLegend.tsx

@@ -151,7 +151,7 @@ export const ColorLegend = ({
     return (
       <g
         className="tick"
-        key={domainValue}
+        key={i}
         transform={`translate(
           ${EXTRA_LEGEND_MARGIN + circleRadius},
           ${

src/components/ContinuousAxis.tsx

@@ -156,21 +156,21 @@ function Axi({
         />
       )}
       {(type === 'top' || type === 'bottom') &&
-        horizontalTicks.map((tick) => (
+        horizontalTicks.map((tick, i) => (
           <TickText
             data-testid="d3reactor-ticktext"
-            key={JSON.stringify(tick)}
+            key={i}
             style={getTickStyle(type)}
             transform={getTickTranslation(type, tick)}
           >
             {getFormattedTick(tick)}
           </TickText>
         ))}
       {(type === 'right' || type === 'left') &&
-        verticalTicks.map((tick) => (
+        verticalTicks.map((tick, i) => (
           <TickText
             data-testid="d3reactor-ticktext"
-            key={JSON.stringify(tick)}
+            key={i}
             style={getTickStyle(type)}
             transform={getTickTranslation(type, tick)}
           >

src/components/DiscreteAxis.tsx

@@ -129,7 +129,7 @@ export const DiscreteAxis = React.memo(
             {ticks.map((tick: any, i: number) => (
               <TickText
                 data-testid="d3reactor-ticktext"
-                key={JSON.stringify(tick)}
+                key={i}
                 style={getTickStyle(type, tick)}
                 transform={getTickTranslation(type, tick, i)}
               >
@@ -143,7 +143,7 @@ export const DiscreteAxis = React.memo(
             {ticks.map((tick: any, i: number) => (
               <TickText
                 data-testid="d3reactor-ticktext"
-                key={JSON.stringify(tick.slice(0, 10))}
+                key={i}
                 style={getTickStyle(type, tick.slice(0, 10))}
                 transform={getTickTranslation(type, tick.slice(0, 10), i)}
               >

src/components/VoronoiWrapper.tsx

@@ -18,7 +18,7 @@ export const VoronoiWrapper = React.memo(
       <g className="voronoi-wrapper">
         {data.map((element: Data, i: number) => (
           <VoronoiCell
-            key={JSON.stringify(element)}
+            key={i}
             fill="none"
             stroke="none"
             opacity={0.5}