Merge pull request #99 from oslabs-beta/dev

v0.0.9 release

Author: hi2dmitri

package.json

@@ -1,7 +1,8 @@
 {
   "name": "@oslabs-beta/d3reactor",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "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",
   "types": "./dist/types/src/index.d.ts",
   "files": [

src/App.tsx

@@ -4,95 +4,83 @@ 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 GlobalStyle from './styles/globals';
-import { Container } from './styles/componentStyles';
-
-import skinny_fruit from '../data/skinny_fruit.json';
-
-//data taken from https://data.world/2918diy/coffee-chain
-import coffee_shop from '../data/coffee_shop.json';
 
-//data taken from https://fred.stlouisfed.org/
-import ny_unemployment from '../data/ny_unemployment.json';
+import portfolio from '../data/portfolio.json';
+import penguins from '../data/penguins.json';
+import fruit from '../data/fruit.json';
 
-//data taken from https://ourworldindata.org/grapher/life-expectancy-vs-gdp-per-capita
-import life_expectancy from '../data/life_expectancy.json';
-
-//data taken from https://www.ers.usda.gov/data-products/international-macroeconomic-data-set/
-import historical_gdp from '../data/historical_gdp.json';
+import { Container } from './styles/componentStyles';
 
 function App() {
   return (
     <Container className="app">
-      <GlobalStyle />
       <PieChart
-        data={coffee_shop}
-        label="product"
-        value="sales"
-        outerRadius={300}
-        innerRadius={200}
-        pieLabel={false}
-        legend="right"
-        legendLabel="Annual Sales 2021"
+        theme="dark"
+        data={fruit}
+        label="label"
+        value="value"
+        legend="top-left"
+        outerRadius={240}
+        pieLabel={true}
       />
-      <ScatterPlot
+      <BarChart
+        theme="dark"
         height="100%"
         width="100%"
-        data={life_expectancy}
-        xKey="GDP per capita"
-        xDataType="number"
-        xGrid={true}
+        data={portfolio.slice(5, 13)}
+        xKey="date"
+        yKey="value"
         xAxis="bottom"
-        xAxisLabel="GDP per capita"
-        yKey="Life expectancy"
+        yAxis="right"
         yGrid={true}
+        xAxisLabel="Date"
+        yAxisLabel="Value"
+        legend={'bottom'}
+        tooltipVisible={true}
+      />
+      <AreaChart
+        theme="dark"
+        height="100%"
+        width="100%"
+        data={portfolio.slice(30, 60)}
+        xKey="date"
+        yKey="value"
+        xAxis="bottom"
         yAxis="right"
-        yAxisLabel="Life Expectancy"
+        yGrid={true}
+        xAxisLabel="Date"
+        yAxisLabel="Value"
       />
       <LineChart
+        theme="dark"
         height={'100%'}
         width={'100%'}
-        data={ny_unemployment}
-        groupBy="county"
+        data={portfolio}
         xKey="date"
         xDataType="date"
-        yKey="unemployment rate"
+        yKey="value"
         xAxis="bottom"
         yAxis="left"
         yGrid={true}
         xAxisLabel="Date"
-        yAxisLabel="Unemployment Rate"
+        yAxisLabel="Value"
         legend={'right'}
-        legendLabel="Counties"
+        legendLabel="Markets"
       />
-      <BarChart
+      <ScatterPlot
+        theme="light"
         height="100%"
         width="100%"
-        data={historical_gdp}
-        xKey="year"
-        yKey="GDP"
-        groupBy="group"
+        data={penguins}
+        xKey="flipper_length_mm"
+        xDataType="number"
+        xGrid={true}
         xAxis="bottom"
-        yAxis="right"
+        xAxisLabel="Flipper Length"
+        yKey="body_mass_g"
         yGrid={true}
-        xAxisLabel="Date"
-        yAxisLabel="Value"
-        legend={'bottom'}
-      />
-      <AreaChart
-        height="100%"
-        width="100%"
-        data={skinny_fruit}
-        xKey="date"
-        yKey="value"
-        xAxis="bottom"
-        groupBy="fruit"
         yAxis="right"
-        yGrid={true}
-        xAxisLabel="Date"
-        yAxisLabel="Value"
-        legend="bottom"
-        legendLabel="Fruits"
+        yAxisLabel="Body Mass"
       />
     </Container>
   );