From cf99b2f45735f78c1cb090a5dab4f11a6309b370 Mon Sep 17 00:00:00 2001 From: Russell Date: Wed, 6 Nov 2019 09:23:29 -0800 Subject: [PATCH] Added bare components for devving Added header components Fixed legend test Fixed tests --- public/frequency.svg | 2 + public/timetoclose.svg | 1 + src/App.js | 39 +++---- src/_global_style.scss | 0 src/components/Frequency/Frequency.jsx | 10 ++ .../Frequency/Styles/Frequency.scss | 10 ++ src/components/PinMap/PinMap.jsx | 11 +- .../TimeToClose/Styles/TimeToClose.scss | 10 ++ src/components/TimeToClose/TimeToClose.jsx | 10 ++ src/components/common/CONSTANTS.js | 105 ++++++++++++++++++ .../Legend.js => common/Legend.jsx} | 9 +- src/components/common/NCFilter.jsx | 19 ++++ .../{TreeMapVis => common}/Styles/Legend.scss | 3 + src/components/common/Styles/NCFilter.scss | 15 +++ .../Tests/Legend.test.js | 2 +- src/containers/Graphs/FrequencyContainer.jsx | 10 ++ .../Graphs/Styles/FrequencyContainer.scss | 8 ++ .../Graphs/Styles/TimeToCloseContainer.scss | 8 ++ .../Graphs/TimeToCloseContainer.jsx | 10 ++ src/containers/Header/Header.jsx | 15 +++ src/containers/Header/Styles/Header.scss | 8 ++ src/containers/Map/MapContainer.jsx | 10 ++ src/containers/Map/Styles/MapContainer.scss | 8 ++ 23 files changed, 282 insertions(+), 41 deletions(-) create mode 100644 public/frequency.svg create mode 100644 public/timetoclose.svg create mode 100644 src/_global_style.scss create mode 100644 src/components/Frequency/Frequency.jsx create mode 100644 src/components/Frequency/Styles/Frequency.scss create mode 100644 src/components/TimeToClose/Styles/TimeToClose.scss create mode 100644 src/components/TimeToClose/TimeToClose.jsx rename src/components/{TreeMapVis/Legend.js => common/Legend.jsx} (86%) create mode 100644 src/components/common/NCFilter.jsx rename src/components/{TreeMapVis => common}/Styles/Legend.scss (57%) create mode 100644 src/components/common/Styles/NCFilter.scss rename src/components/{TreeMapVis => common}/Tests/Legend.test.js (92%) create mode 100644 src/containers/Graphs/FrequencyContainer.jsx create mode 100644 src/containers/Graphs/Styles/FrequencyContainer.scss create mode 100644 src/containers/Graphs/Styles/TimeToCloseContainer.scss create mode 100644 src/containers/Graphs/TimeToCloseContainer.jsx create mode 100644 src/containers/Header/Header.jsx create mode 100644 src/containers/Header/Styles/Header.scss create mode 100644 src/containers/Map/MapContainer.jsx create mode 100644 src/containers/Map/Styles/MapContainer.scss diff --git a/public/frequency.svg b/public/frequency.svg new file mode 100644 index 000000000..1a19dd7f7 --- /dev/null +++ b/public/frequency.svg @@ -0,0 +1,2 @@ + +2017-01Date01-2103-2005-1707-1409-0911-060%2000%4000%6000%8000%10000%12000%2017-01LeLcSeScMeMc \ No newline at end of file diff --git a/public/timetoclose.svg b/public/timetoclose.svg new file mode 100644 index 000000000..62b8b2ee9 --- /dev/null +++ b/public/timetoclose.svg @@ -0,0 +1 @@ +series-1series-22001200220032004200520062007606050504040303020201010004455416422432153323352134432 \ No newline at end of file diff --git a/src/App.js b/src/App.js index b7eb0e851..5873bb7a2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,50 +1,37 @@ import React from 'react'; import './App.css'; -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 './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'; class App extends React.Component{ constructor(props){ super(props); this.state = { - selectedId: "TreeMapVis", loading:false } } - handleMockSelected = (e) => { - this.setState({selectedId: e.target.value}); - } - handleLoadingChanged = (loadingState) => { this.setState({loading:loadingState}); } render(){ - const prototypeMap = { - TreeMapVis: , - CandleStick: , - PinMap: , - HeatMap: - } - return (
- {Object.keys(prototypeMap).map( proto => -
- {proto}
-
- )} - { prototypeMap[this.state.selectedId] } - { this.state.loading && - } +
+ + +
); } } - export default App; diff --git a/src/_global_style.scss b/src/_global_style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Frequency/Frequency.jsx b/src/components/Frequency/Frequency.jsx new file mode 100644 index 000000000..11c79d7bc --- /dev/null +++ b/src/components/Frequency/Frequency.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import './Styles/Frequency.scss' + +export default ({}) => { + return ( +
+ frequency +
+ ) +} diff --git a/src/components/Frequency/Styles/Frequency.scss b/src/components/Frequency/Styles/Frequency.scss new file mode 100644 index 000000000..dec1177c0 --- /dev/null +++ b/src/components/Frequency/Styles/Frequency.scss @@ -0,0 +1,10 @@ +.Frequency{ + width: 100vw; + height: 20vh; +} + +.FrequencyImg{ + width: 100%; + height: 100%; + object-fit: scale-down; +} diff --git a/src/components/PinMap/PinMap.jsx b/src/components/PinMap/PinMap.jsx index 8b39f3359..cc151e0b0 100644 --- a/src/components/PinMap/PinMap.jsx +++ b/src/components/PinMap/PinMap.jsx @@ -193,7 +193,7 @@ class PinMap extends Component { center={position} zoom={zoom} bounds={bounds} - style={{ height: '70vh' }}> + style={{ height: '60vh' }}> - + ) } diff --git a/src/components/TimeToClose/Styles/TimeToClose.scss b/src/components/TimeToClose/Styles/TimeToClose.scss new file mode 100644 index 000000000..8ae234f9b --- /dev/null +++ b/src/components/TimeToClose/Styles/TimeToClose.scss @@ -0,0 +1,10 @@ +.TimeToClose{ + width: auto; + height: 60vh; +} + +.TimeToCloseImg{ + width: 80%; + height: 80%; + object-fit: scale-down; +} diff --git a/src/components/TimeToClose/TimeToClose.jsx b/src/components/TimeToClose/TimeToClose.jsx new file mode 100644 index 000000000..65728b99f --- /dev/null +++ b/src/components/TimeToClose/TimeToClose.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import './Styles/TimeToClose.scss' + +export default ({}) => { + return ( +
+ timetoclose +
+ ) +} diff --git a/src/components/common/CONSTANTS.js b/src/components/common/CONSTANTS.js index a147b8f39..f2f357d92 100644 --- a/src/components/common/CONSTANTS.js +++ b/src/components/common/CONSTANTS.js @@ -33,4 +33,109 @@ export default { 'Report Water Waste', 'Other', ], + COUNCILS: [ + 'ARLETA NC', + 'ARROYO SECO NC', + 'ATWATER VILLAGE NC', + 'BEL AIR-BEVERLY CREST NC', + 'BOYLE HEIGHTS NC', + 'BRENTWOOD CC', + 'CANOGA PARK NC', + 'CENTRAL ALAMEDA NC', + 'CENTRAL HOLLYWOOD NC', + 'CENTRAL SAN PEDRO NC', + 'CHATSWORTH NC', + 'COASTAL SAN PEDRO NC', + 'COMMUNITY AND NEIGHBORS FOR NINTH DISTRICT UNITY (CANNDU)', + 'DEL REY NC', + 'DOWNTOWN LOS ANGELES', + 'EAGLE ROCK NC', + 'EAST HOLLYWOOD NC', + 'ECHO PARK NC', + 'ELYSIAN VALLEY RIVERSIDE NC', + 'EMPOWERMENT CONGRESS CENTRAL AREA NDC', + 'EMPOWERMENT CONGRESS NORTH AREA NDC', + 'EMPOWERMENT CONGRESS SOUTHEAST AREA NDC', + 'EMPOWERMENT CONGRESS SOUTHWEST AREA NDC', + 'EMPOWERMENT CONGRESS WEST AREA NDC', + 'ENCINO NC', + 'FOOTHILL TRAILS DISTRICT NC', + 'GLASSELL PARK NC', + 'GRANADA HILLS NORTH NC', + 'GRANADA HILLS SOUTH NC', + 'GREATER CYPRESS PARK NC', + 'GREATER ECHO PARK ELYSIAN NC', + 'GREATER TOLUCA LAKE NC', + 'GREATER VALLEY GLEN COUNCIL', + 'GREATER WILSHIRE NC', + 'HARBOR CITY NC', + 'HARBOR GATEWAY NORTH NC', + 'HARBOR GATEWAY SOUTH NC', + 'HERMON NC', + 'HISTORIC CULTURAL NC', + 'HISTORIC CULTURAL NORTH NC', + 'HISTORIC HIGHLAND PARK NC', + 'HOLLYWOOD HILLS WEST NC', + 'HOLLYWOOD STUDIO DISTRICT NC', + 'HOLLYWOOD UNITED NC', + 'LA-32 NC', + 'LAKE BALBOA NC', + 'LINCOLN HEIGHTS NC', + 'LOS FELIZ NC', + 'MACARTHUR PARK NC', + 'MAR VISTA CC', + 'MID CITY NC', + 'MID CITY WEST CC', + 'MID-TOWN NORTH HOLLYWOOD NC', + 'MISSION HILLS NC', + 'NC VALLEY VILLAGE', + 'NC WESTCHESTER/PLAYA', + 'NOHO NC', + 'NOHO WEST NC', + 'NORTH HILLS EAST', + 'NORTH HILLS WEST NC', + 'NORTH HOLLYWOOD NORTHEAST NC', + 'NORTH WESTWOOD NC', + 'NORTHRIDGE EAST', + 'NORTHRIDGE SOUTH NC', + 'NORTHRIDGE WEST', + 'NORTHWEST SAN PEDRO NC', + 'OLYMPIC PARK NC', + 'P.I.C.O. NC', + 'PACIFIC PALISADES NC', + 'PACOIMA NC', + 'PALMS NC', + 'PANORAMA CITY NC', + 'PARK MESA HEIGHTS CC', + 'PICO UNION NC', + 'PORTER RANCH NC', + 'RAMPART VILLAGE NC', + 'RESEDA NC', + 'SHERMAN OAKS NC', + 'SILVER LAKE NC', + 'SOUTH CENTRAL NC', + 'SOUTH ROBERTSON NC', + 'STUDIO CITY NC', + 'SUN VALLEY AREA NC', + 'SUNLAND-TUJUNGA NC', + 'SYLMAR NC', + 'TARZANA NC', + 'UNITED NEIGHBORHOODS OF THE HISTORIC ARLINGTON HEIGHTS, WEST ADAMS, AND JEFFERSON PARK COMMUNITY', + 'VAN NUYS NC', + 'VENICE NC', + 'VOICES OF 90037', + 'WATTS NC', + 'WEST ADAMS NC', + 'WEST HILLS NC', + 'WEST LOS ANGELES NC', + 'WESTLAKE NORTH NC', + 'WESTLAKE SOUTH NC', + 'WESTSIDE NC', + 'WESTWOOD NC', + 'WILMINGTON NC', + 'WILSHIRE CENTER - KOREATOWN NC', + 'WINNETKA NC', + 'WOODLAND HILLS-WARNER CENTER NC', + 'ZAPATA KING NC' + ], }; diff --git a/src/components/TreeMapVis/Legend.js b/src/components/common/Legend.jsx similarity index 86% rename from src/components/TreeMapVis/Legend.js rename to src/components/common/Legend.jsx index 0864c971a..a1d4d0f4f 100644 --- a/src/components/TreeMapVis/Legend.js +++ b/src/components/common/Legend.jsx @@ -4,16 +4,15 @@ import {getColorMap} from '../../Util/DataService.js'; import './Styles/Legend.scss' -const Legend = () => { +export default () => { const colorData = getColorMap(true); return (
- ); -}; - -export default Legend; + ) +} diff --git a/src/components/common/NCFilter.jsx b/src/components/common/NCFilter.jsx new file mode 100644 index 000000000..83e835c76 --- /dev/null +++ b/src/components/common/NCFilter.jsx @@ -0,0 +1,19 @@ +import React from 'react' +import './Styles/NCFilter.scss' +import constants from '../common/CONSTANTS.js'; + +export default ({ + isPrimary, + selectedNC, + onChange + }) => { + + const style = isPrimary === true ? 'NCFilterPrimary' : 'NCFilterSecondary' + return ( +
+ +
+ ) +} diff --git a/src/components/TreeMapVis/Styles/Legend.scss b/src/components/common/Styles/Legend.scss similarity index 57% rename from src/components/TreeMapVis/Styles/Legend.scss rename to src/components/common/Styles/Legend.scss index 90eedd491..698bdc8ee 100644 --- a/src/components/TreeMapVis/Styles/Legend.scss +++ b/src/components/common/Styles/Legend.scss @@ -1,3 +1,6 @@ .Legend{ + width: 100%; + float: left; + } diff --git a/src/components/common/Styles/NCFilter.scss b/src/components/common/Styles/NCFilter.scss new file mode 100644 index 000000000..9522009ae --- /dev/null +++ b/src/components/common/Styles/NCFilter.scss @@ -0,0 +1,15 @@ +.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/TreeMapVis/Tests/Legend.test.js b/src/components/common/Tests/Legend.test.js similarity index 92% rename from src/components/TreeMapVis/Tests/Legend.test.js rename to src/components/common/Tests/Legend.test.js index da80ac5c7..e11299fe0 100644 --- a/src/components/TreeMapVis/Tests/Legend.test.js +++ b/src/components/common/Tests/Legend.test.js @@ -1,7 +1,7 @@ import React from 'react'; import Enzyme, {shallow, mount} from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -import Legend from '../Legend.js'; +import Legend from '../Legend.jsx'; Enzyme.configure({adapter: new Adapter()}); diff --git a/src/containers/Graphs/FrequencyContainer.jsx b/src/containers/Graphs/FrequencyContainer.jsx new file mode 100644 index 000000000..d0fcbcd2b --- /dev/null +++ b/src/containers/Graphs/FrequencyContainer.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import './Styles/FrequencyContainer.scss' +import Frequency from '../../components/Frequency/Frequency.jsx' + +export default ({}) => { + return ( +
+ +
) +} diff --git a/src/containers/Graphs/Styles/FrequencyContainer.scss b/src/containers/Graphs/Styles/FrequencyContainer.scss new file mode 100644 index 000000000..bcfa777d5 --- /dev/null +++ b/src/containers/Graphs/Styles/FrequencyContainer.scss @@ -0,0 +1,8 @@ +.FrequencyContainer{ + width: 100vw; + height: 20vh; + float: left; + outline-style: dotted; + outline-width: thin; + outline-color: green; +} diff --git a/src/containers/Graphs/Styles/TimeToCloseContainer.scss b/src/containers/Graphs/Styles/TimeToCloseContainer.scss new file mode 100644 index 000000000..8ad7f9b08 --- /dev/null +++ b/src/containers/Graphs/Styles/TimeToCloseContainer.scss @@ -0,0 +1,8 @@ +.TimeToCloseContainer{ + width: 40vw; + height: 60vh; + float: left; + outline-style: dotted; + outline-width: thin; + outline-color: yellow; +} diff --git a/src/containers/Graphs/TimeToCloseContainer.jsx b/src/containers/Graphs/TimeToCloseContainer.jsx new file mode 100644 index 000000000..3cb1165e7 --- /dev/null +++ b/src/containers/Graphs/TimeToCloseContainer.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import './Styles/TimeToCloseContainer.scss' +import TimeToClose from '../../components/TimeToClose/TimeToClose.jsx' + +export default ({}) => { + return ( +
+ +
) +} diff --git a/src/containers/Header/Header.jsx b/src/containers/Header/Header.jsx new file mode 100644 index 000000000..a83fbb671 --- /dev/null +++ b/src/containers/Header/Header.jsx @@ -0,0 +1,15 @@ +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 new file mode 100644 index 000000000..8bddfbd89 --- /dev/null +++ b/src/containers/Header/Styles/Header.scss @@ -0,0 +1,8 @@ +.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 new file mode 100644 index 000000000..11f537cb7 --- /dev/null +++ b/src/containers/Map/MapContainer.jsx @@ -0,0 +1,10 @@ +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 new file mode 100644 index 000000000..44001cd7c --- /dev/null +++ b/src/containers/Map/Styles/MapContainer.scss @@ -0,0 +1,8 @@ +.MapContainer{ + width: 60vw; + height: 60vh; + float: left; + outline-style: dotted; + outline-width: thin; + outline-color: red; +}