nashvillefcc · rollinglex · Jun 27, 2020 · Jun 28, 2020 · Jun 29, 2020 · Jun 29, 2020
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 ## Table of Contents
 
-* [About the Project](#about-the-project)
-  * [Built With](#built-with)
-* [Getting Started](#getting-started)
-* [Roadmap](#roadmap)
-* [Contributing](#contributing)
-* [Contact](#contact)
-
+- [About the Project](#about-the-project)
+  - [Built With](#built-with)
+  - [Styling](#styling)
+- [Getting Started](#getting-started)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [Contact](#contact)
 
 ## About The Project
 
@@ -15,10 +15,17 @@ graphing libraries. It will also serve as a data vizualization toolkit for
 members of FCC Nashville in future endeavors.
 
 ### Built With
+
 This project was bootstrapped with:
-* [Create React App](https://github.com/facebook/create-react-app)
-* [Semantic UI React](https://react.semantic-ui.com)
 
+- [Create React App](https://github.com/facebook/create-react-app)
+- [Semantic UI React](https://react.semantic-ui.com)
+
+### Styling
+
+Use [styled-components](https://styled-components.com/) to modify components [Semantic UI React](https://react.semantic-ui.com) as needed.
+
+This [article](https://medium.com/serverlessguru/customizing-the-semantic-ui-react-library-with-styled-components-41cdab34be29) and existing components can be used as a reference.
 
 ## Getting Started
 
@@ -45,11 +52,16 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.<br />
 Your app is ready to be deployed!
 
-
 ## Roadmap
 
 See the [task board](https://github.com/nashvillefcc/data-viz/projects/1) for a list of proposed features and known issues.
 
+## State management
+
+State is managed using React hooks
+selectedLibrary and selectedChartType in /Layout/index.js are currently the most shared state
+
+Prop drilling is used to pass state down. This is a good opportunity to use another type of state management such and React.Context
 
 ## Contributing
 
@@ -59,7 +71,6 @@ contacted via discord or issue.
 
 See the [CONTRIBUTING](https://github.com/nashvillefcc/data-viz/blob/master/CONTRIBUTING.md) page for more details.
 
-
 ## Contact
 
 Pete - [email protected]
diff --git a/package.json b/package.json
@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "d3": "^5.16.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "semantic-ui-react": "^0.88.2",
+    "styled-components": "^5.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,12 @@
 import React from 'react'
+import DisplayedChart from './Components/DisplayedChart'
 
 function App () {
-  return <div className='App'>Hello World!</div>
+  return (
+    <div className='App'>
+      <DisplayedChart />
+    </div>
+  )
 }
 
 export default App
diff --git a/src/Components/ChartTypeDropdown/index.js b/src/Components/ChartTypeDropdown/index.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Dropdown } from 'semantic-ui-react'
+
+const types = [
+  { key: 'bar', text: 'bar', value: 'bar' },
+  { key: 'radial', text: 'radial', value: 'radial' },
+  { key: 'tree', text: 'tree', value: 'tree' },
+  { key: 'scatterplot', text: 'scatterplot', value: 'scatterplot' },
+  { key: 'pie', text: 'pie', value: 'pie' }
+]
+
+const ChartTypeDropdown = ({ selectedChartType, setSelectedChartType }) => {
+  const onChangeHandler = (e, { value }) => setSelectedChartType(value)
+  return (
+    <Dropdown
+      value={selectedChartType}
+      placeholder='Type'
+      fluid
+      selection
+      options={types}
+      onChange={onChangeHandler}
+    />
+  )
+}
+
+export default ChartTypeDropdown
diff --git a/src/Components/D3/D3BarChart.js b/src/Components/D3/D3BarChart.js
@@ -0,0 +1,146 @@
+import React, { useRef, useEffect, useState } from 'react'
+import * as d3 from 'd3'
+import tempOneMonth from '../../mockData/tempOneMonth.json'
+import { axisBottom, axisRight } from 'd3'
+import { Wrapper, XAxis, YAxis } from './D3Styled'
+
+const margin = { top: 20, right: 35, bottom: 20, left: 35 }
+
+const data = tempOneMonth
+const width = 700
+const height = 500
+
+const barChartData = () => {
+  let dateExtent = d3.extent(data, d => new Date(d.date))
+  let min = d3.min(data, data => data.low)
+  let max = d3.max(data, data => data.high)
+  let xScale = d3
+
+    .scaleTime()
+    .domain(dateExtent)
+    .range([0, width])
+
+  let yScale = d3
+    .scaleLinear()
+    .domain([min, max])
+    .range([height, 0])
+
+  let colorScale = d3
+    .scaleSequential()
+    .domain([max, min])
+    .interpolator(d3.interpolateRdYlBu)
+
+  const yAxis = d3.axisLeft().scale(yScale)
+
+  return data.map(({ date, high, low }) => {
+    return {
+      x: xScale(new Date(date)),
+      y: yScale(high),
+      height: yScale(low) - yScale(high),
+      fill: colorScale((Number(high) + Number(low)) / 2)
+    }
+  })
+}
+
+///////////////////////////////
+
+let dateExtent = d3.extent(data, d => new Date(d.date))
+let min = d3.min(data, data => data.low)
+let max = d3.max(data, data => data.high)
+let xScale = d3
+  .scaleTime()
+  .domain(dateExtent)
+  .range([0, width])
+
+let yScale = d3
+  .scaleLinear()
+  .domain([min, max])
+  .range([height, 0])
+
+let colorScale = d3
+  .scaleSequential()
+  .domain([max, min])
+  .interpolator(d3.interpolateRdYlBu)
+const yAxis = d3.axisLeft().scale(yScale)
+const xAxis = d3.axisLeft().scale(xScale)
+const D3BarChart = () => {
+  const [data, setData] = useState(tempOneMonth)
+  const [barsData, setBarsData] = useState([])
+  const yAxisRef = useRef()
+  const xAxisRef = useRef()
+  const brushRef = useRef()
+  useEffect(() => {
+    // d3.select(axisRef.current).call(yAxis)
+    // Scales
+    console.log('data', data)
+    let dateExtent = d3.extent(data, d => new Date(d.date))
+    let min = d3.min(data, data => data.low)
+    let max = d3.max(data, data => data.high)
+    let xScale = d3
+      .scaleTime()
+      .domain(dateExtent)
+      .range([margin.left, width - margin.right])
+
+    let yScale = d3
+      .scaleLinear()
+      .domain([min, max])
+      .range([height - margin.bottom, margin.top])
+
+    let colorScale = d3
+      .scaleSequential()
+      .domain([max, min])
+      .interpolator(d3.interpolateRdYlBu)
+    // Axis
+    const yAxis = axisRight(yScale)
+    d3.select(yAxisRef.current).call(yAxis)
+    const xAxis = axisBottom(xScale)
+    xAxis.ticks(d3.timeDay.every())
+    xAxis.tickFormat(d3.timeFormat('%m/%d'))
+    d3.select(xAxisRef.current).call(xAxis)
+    //Brush
+    const brush = d3
+      .brushX()
+      .extent([
+        [margin.left, margin.top],
+        [width, height - margin.top]
+      ])
+      .on('end', () => {
+        if (d3.event.selection) {
+          const [minX, maxX] = d3.event.selection
+          console.log('xScale(minX', xScale.invert(minX))
+          console.log('xScale(minX', xScale.invert(maxX))
+        }
+      })
+    console.log('brush', brush)
+    d3.select(brushRef.current).call(brush)
+
+    // Data for chart
+    const bars = data.map(({ date, high, low }) => {
+      return {
+        x: xScale(new Date(date)),
+        y: yScale(high),
+        height: yScale(low) - yScale(high),
+        fill: colorScale((Number(high) + Number(low)) / 2)
+      }
+    })
+    setBarsData(bars)
+  }, [data])
+
+  ////////////////////
+
+  return (
+    <Wrapper>
+      <svg width={width} height={height}>
+        {barsData &&
+          barsData.map(({ x, y, height, fill }, i) => (
+            <rect key={i} x={x} y={y} width={12} height={height} fill={fill} />
+          ))}
+        <YAxis ref={yAxisRef} margin={margin} />
+        <XAxis id='x-axis' ref={xAxisRef} height={height} margin={margin} />
+        <g ref={brushRef} />
+      </svg>
+    </Wrapper>
+  )
+}
+
+export default D3BarChart
diff --git a/src/Components/D3/D3Styled.js b/src/Components/D3/D3Styled.js
@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  svg {
+    margin: 0rem;
+  }
+`
+
+export const XAxis = styled.g`
+  transform: ${({ height, margin }) =>
+    `translateY(${height - margin.bottom}px)`};
+`
+
+export const YAxis = styled.g`
+  transform: ${({ margin }) => `translateX(${0}px)`};
+`
diff --git a/src/Components/D3/index.js b/src/Components/D3/index.js
@@ -0,0 +1,4 @@
+import React from 'react'
+import BarChart from './D3BarChart'
+
+export default { bar: <BarChart /> }
diff --git a/src/Components/DisplayedChart/DisplayedChartStyled.js b/src/Components/DisplayedChart/DisplayedChartStyled.js
@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+import { Container, Divider, Button } from 'semantic-ui-react'
+
+export const DisplayedChartStyled = styled(Container)`
+  display: flex !important;
+  height: 100vh;
+  width: 100vw !important;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 2rem;
+  background-color: #b8e8ff;
+`
+
+export const TitleWrapper = styled.div`
+  cursor: pointer;
+  font-size: 2rem;
+  z-index: 10;
+  .libraryOptions {
+    text-decoration: underline;
+  }
+  .chartOptions {
+    text-decoration: underline;
+  }
+`
+
+export const DropdownWrapper = styled.div`
+  width: 15%;
+  position: relative;
+  top: 0.5rem;
+  min-width: 10rem;
+`
+
+export const ChartWrapper = styled.div`
+  background-color: white;
+  align-self: center;
+`