diff --git a/package.json b/package.json index f49f993be..fc83e4206 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "axios": "^0.19.0", "babel-jest": "^24.9.0", + "bulma": "^0.8.0", "dataframe-js": "^1.4.3", "dotenv-webpack": "^1.7.0", "gh-pages": "^2.1.1", diff --git a/src/App.js b/src/App.js index 8ee95dc11..85853ab45 100644 --- a/src/App.js +++ b/src/App.js @@ -1,36 +1,14 @@ import React from 'react'; -import Header from './containers/Header/Header.jsx' -import MapContainer from './containers/Map/MapContainer.jsx' -import FrequencyContainer from './containers/Graphs/FrequencyContainer.jsx' -import TimeToCloseContainer from './containers/Graphs/TimeToCloseContainer.jsx' -// import TreeMapVis from './components/TreeMapVis/TreeMapVis.js'; -// import CandleStick from './components/CandleStick/CandleStick.js'; -// import PinMap from './components/PinMap/PinMap.jsx'; -// import HeatMap from './components/HeatMap/HeatMap.js'; -// import LoadingSpinner from './components/LoadingSpinner/LoadingSpinner.js'; +import Header from './components/main/header/Header'; +import Body from './components/main/body/Body'; +import Footer from './components/main/footer/Footer'; + + const App = () => ( +
+
+ +
+); - - class App extends React.Component{ - constructor(props){ - super(props); - this.state = { - loading:false - } - } - - handleLoadingChanged = (loadingState) => { - this.setState({loading:loadingState}); - } - - render(){ - return ( -
-
- - - -
- ); - } -} export default App; diff --git a/src/components/common/Tests/Legend.test.js b/src/Tests/Legend.test.js similarity index 67% rename from src/components/common/Tests/Legend.test.js rename to src/Tests/Legend.test.js index e11299fe0..e3268c17e 100644 --- a/src/components/common/Tests/Legend.test.js +++ b/src/Tests/Legend.test.js @@ -1,7 +1,6 @@ import React from 'react'; import Enzyme, {shallow, mount} from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -import Legend from '../Legend.jsx'; Enzyme.configure({adapter: new Adapter()}); @@ -10,8 +9,8 @@ describe('Tree map legend component test suite', () => { expect(true).toEqual(true); }); - test('renders', () => { - const wrapper = shallow(); - expect(wrapper.exists()).toBe(true); - }); + // test('renders', () => { + // const wrapper = shallow(); + // expect(wrapper.exists()).toBe(true); + // }); }); diff --git a/src/logo.svg b/src/assets/logo.svg similarity index 100% rename from src/logo.svg rename to src/assets/logo.svg diff --git a/src/components/PinMap/PinMap.js b/src/components/PinMap/PinMap.js deleted file mode 100644 index 3bc0bf109..000000000 --- a/src/components/PinMap/PinMap.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -const PinMap = () => { - return ( -
- PinMap -
- ); -} - -export default PinMap; diff --git a/src/components/PinMap/PinMap.jsx b/src/components/PinMap/PinMap.jsx index cc151e0b0..52418acd0 100644 --- a/src/components/PinMap/PinMap.jsx +++ b/src/components/PinMap/PinMap.jsx @@ -5,7 +5,6 @@ import Choropleth from 'react-leaflet-choropleth'; import constants from '../common/CONSTANTS.js'; import { getDataResources } from '../../Util/DataService.js'; -import DatePicker from '../common/dataPicker.jsx'; import neighborhoodOverlay from '../../data/la-county-neighborhoods-v6.json'; import municipalOverlay from '../../data/la-county-municipal-regions-current.json'; @@ -209,7 +208,11 @@ class PinMap extends Component { render() { return ( -
{this.renderMap()}
+
+
+ {this.renderMap()} +
+
) } } diff --git a/src/components/common/Dropdown.jsx b/src/components/common/Dropdown.jsx new file mode 100644 index 000000000..6cf8d50fc --- /dev/null +++ b/src/components/common/Dropdown.jsx @@ -0,0 +1,36 @@ +import React from 'react'; + +const Dropdown = () => ( +
+
+ +
+ +
+); + +export default Dropdown; diff --git a/src/components/common/Styles/Legend.scss b/src/components/common/Styles/Legend.scss deleted file mode 100644 index 698bdc8ee..000000000 --- a/src/components/common/Styles/Legend.scss +++ /dev/null @@ -1,6 +0,0 @@ -.Legend{ - width: 100%; - - float: left; - -} diff --git a/src/components/common/Styles/NCFilter.scss b/src/components/common/Styles/NCFilter.scss deleted file mode 100644 index 9522009ae..000000000 --- a/src/components/common/Styles/NCFilter.scss +++ /dev/null @@ -1,15 +0,0 @@ -.NCFilterPrimary{ - width: 50vw; - overflow:hidden; - white-space:nowrap; - text-overflow:ellipsis; - float: left; -} - -.NCFilterSecondary{ - width: 50vw; - overflow:hidden; - white-space:nowrap; - text-overflow:ellipsis; - float: right; -} diff --git a/src/components/main/body/Body.jsx b/src/components/main/body/Body.jsx new file mode 100644 index 000000000..53ddf2235 --- /dev/null +++ b/src/components/main/body/Body.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import PinMap from '../../PinMap/PinMap.jsx'; + +const Body = () => ( +
+
+ +
+
+); + +export default Body; diff --git a/src/components/main/footer/Footer.jsx b/src/components/main/footer/Footer.jsx new file mode 100644 index 000000000..dda6c9e33 --- /dev/null +++ b/src/components/main/footer/Footer.jsx @@ -0,0 +1,24 @@ +import React from 'react'; + +const Footer = () => ( + +); + +export default Footer; diff --git a/src/components/main/header/Header.jsx b/src/components/main/header/Header.jsx new file mode 100644 index 000000000..80e49cf00 --- /dev/null +++ b/src/components/main/header/Header.jsx @@ -0,0 +1,34 @@ +import React from 'react' +import NCFilter from './NCFilter.jsx' +import DataPicker from './dataPicker.jsx' +import Legend from './Legend.jsx' +import Dropdown from '../../common/Dropdown'; + +const Header = () => ( +
+
+
+

+ 311 Data +

+

+ Dashboard for NC +

+
+
+ {/* */} +
+
+ +
+
+ +
+
+ +
+
+
+); + +export default Header; diff --git a/src/components/common/Legend.jsx b/src/components/main/header/Legend.jsx similarity index 74% rename from src/components/common/Legend.jsx rename to src/components/main/header/Legend.jsx index f0cdb4599..49f1caa19 100644 --- a/src/components/common/Legend.jsx +++ b/src/components/main/header/Legend.jsx @@ -1,7 +1,6 @@ import React from 'react'; import {DiscreteColorLegend} from 'react-vis'; -import {getColorMap} from '../../Util/DataService.js'; -// import './Styles/Legend.scss' +import {getColorMap} from '../../../Util/DataService.js'; export default () => { @@ -11,7 +10,7 @@ export default () => {
) diff --git a/src/components/common/NCFilter.jsx b/src/components/main/header/NCFilter.jsx similarity index 83% rename from src/components/common/NCFilter.jsx rename to src/components/main/header/NCFilter.jsx index 83e835c76..e4be96075 100644 --- a/src/components/common/NCFilter.jsx +++ b/src/components/main/header/NCFilter.jsx @@ -1,6 +1,5 @@ import React from 'react' -import './Styles/NCFilter.scss' -import constants from '../common/CONSTANTS.js'; +import constants from '../../common/CONSTANTS.js'; export default ({ isPrimary, diff --git a/src/components/common/dataPicker.jsx b/src/components/main/header/dataPicker.jsx similarity index 97% rename from src/components/common/dataPicker.jsx rename to src/components/main/header/dataPicker.jsx index f8679ef4e..352558831 100644 --- a/src/components/common/dataPicker.jsx +++ b/src/components/main/header/dataPicker.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import constants from '../common/CONSTANTS.js'; +import constants from '../../common/CONSTANTS'; export default ({ showMarkerDropdown, diff --git a/src/containers/Header/Header.jsx b/src/containers/Header/Header.jsx deleted file mode 100644 index a83fbb671..000000000 --- a/src/containers/Header/Header.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import './Styles/Header.scss' -import NCFilter from '../../components/common/NCFilter.jsx' -import DataPicker from '../../components/common/dataPicker.jsx' -import Legend from '../../components/common/Legend.jsx' - -export default ({}) => { - return ( -
- - - - -
) -} diff --git a/src/containers/Header/Styles/Header.scss b/src/containers/Header/Styles/Header.scss deleted file mode 100644 index 8bddfbd89..000000000 --- a/src/containers/Header/Styles/Header.scss +++ /dev/null @@ -1,8 +0,0 @@ -.Header { - width: 100vw; - height: 20vh; - float: left; - outline-style: dotted; - outline-width: thin; - outline-color: blue; -} diff --git a/src/containers/Map/MapContainer.jsx b/src/containers/Map/MapContainer.jsx deleted file mode 100644 index 11f537cb7..000000000 --- a/src/containers/Map/MapContainer.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import './Styles/MapContainer.scss' -import PinMap from '../../components/PinMap/PinMap.jsx' - -export default ({}) => { - return ( -
- -
) -} diff --git a/src/containers/Map/Styles/MapContainer.scss b/src/containers/Map/Styles/MapContainer.scss deleted file mode 100644 index 44001cd7c..000000000 --- a/src/containers/Map/Styles/MapContainer.scss +++ /dev/null @@ -1,8 +0,0 @@ -.MapContainer{ - width: 60vw; - height: 60vh; - float: left; - outline-style: dotted; - outline-width: thin; - outline-color: red; -} diff --git a/src/index.js b/src/index.js index 149f74f2d..7c0838f74 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; // import './index.css'; +import 'bulma'; import App from './App'; ReactDOM.render(, document.getElementById('root')); diff --git a/src/_global_style.scss b/src/styles/_global_style.scss similarity index 100% rename from src/_global_style.scss rename to src/styles/_global_style.scss diff --git a/webpack.config.js b/webpack.config.js index fcf204e9e..67241499b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,20 +1,29 @@ const Dotenv = require('dotenv-webpack'); module.exports = { entry: './src/index.js', + output: { + path: __dirname + '/dist', + publicPath: '/', + filename: 'bundle.js' + }, + resolve: { + extensions: ['.js', '.jsx'] + }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, - use: ['babel-loader'] + use: { + loader: 'babel-loader', + }, }, { - test: /\.(css|scss)$/, + test: /\.(css|scss|sass)$/, use: [ 'style-loader', 'css-loader', 'sass-loader' - ], }, { @@ -28,14 +37,6 @@ module.exports = { plugins: [ new Dotenv() ], - resolve: { - extensions: ['*', '.js', '.jsx'] - }, - output: { - path: __dirname + '/dist', - publicPath: '/', - filename: 'bundle.js' - }, devServer: { open: true, contentBase: './public',