From 3d206fbdb0d3b6053ccc63a020383abb18233b6a Mon Sep 17 00:00:00 2001 From: Andrey Bakhvalov Date: Mon, 22 Oct 2018 17:47:43 +0300 Subject: [PATCH] clean up --- .eslintrc | 17 +-- docker-entrypoint-initdb/01.sql | 2 +- .../Filters/CaptionElement/CaptionElement.js | 13 +++ .../Map/Filters/CaptionElement/index.js | 1 + src/Components/Map/Filters/Description.js | 4 +- src/Components/Map/Filters/Filters.js | 41 +++---- src/Components/Map/Filters/Separator.js | 8 ++ src/Components/Map/Map.js | 109 +++++++++++------- src/config/constants.js | 4 + src/utils/dateConverter.js | 5 + 10 files changed, 124 insertions(+), 80 deletions(-) create mode 100644 src/Components/Map/Filters/CaptionElement/CaptionElement.js create mode 100644 src/Components/Map/Filters/CaptionElement/index.js create mode 100644 src/Components/Map/Filters/Separator.js create mode 100644 src/config/constants.js create mode 100644 src/utils/dateConverter.js diff --git a/.eslintrc b/.eslintrc index b7e19d1b..078fab50 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,12 +1,5 @@ { - "parser": "babel-eslint", - "extends": ["airbnb"], - "plugins": ["import", "react"], - "env": { - "browser": true, - "node": true, - "jest": true - }, + "extends": ["react-app", "airbnb"], "rules": { "arrow-parens": [ "warn", @@ -16,7 +9,6 @@ } ], "comma-dangle": ["error", "never"], - "function-paren-newline": ["error", "consistent"], "jsx-quotes": ["error", "prefer-single"], "max-len": [ "error", @@ -27,13 +19,6 @@ } ], "no-return-assign": "warn", - "no-underscore-dangle": [ - "error", - { - "allowAfterThis": true, - "allow": ["_id"] - } - ], "quotes": ["error", "single"], "react/button-has-type": "off", "react/destructuring-assignment": "off", diff --git a/docker-entrypoint-initdb/01.sql b/docker-entrypoint-initdb/01.sql index 8bc1bd43..12bd2ea1 100644 --- a/docker-entrypoint-initdb/01.sql +++ b/docker-entrypoint-initdb/01.sql @@ -78,7 +78,7 @@ BEGIN sel_zones.locationid = trips_by_hour.pulocationid AND cast(trips_by_hour.pickup_datetime AS DATE) >= date_from AND cast(trips_by_hour.pickup_datetime AS DATE) <= date_to - AND ((extract (HOUR FROM trips_by_hour.pickup_datetime) = in_hour) OR (in_hour IS NULL)) + AND ((extract (HOUR FROM trips_by_hour.pickup_datetime) = in_hour) OR (in_hour = -1)) ) GROUP BY sel_zones.locationid diff --git a/src/Components/Map/Filters/CaptionElement/CaptionElement.js b/src/Components/Map/Filters/CaptionElement/CaptionElement.js new file mode 100644 index 00000000..637b0a5d --- /dev/null +++ b/src/Components/Map/Filters/CaptionElement/CaptionElement.js @@ -0,0 +1,13 @@ +import React from 'react'; + +const CaptionElement = ({ date, localeUtils, locale }) => { + const months = localeUtils.getMonths(locale); + + return ( +
+ {months[date.getMonth()]} +
+ ); +}; + +export default CaptionElement; diff --git a/src/Components/Map/Filters/CaptionElement/index.js b/src/Components/Map/Filters/CaptionElement/index.js new file mode 100644 index 00000000..2289c653 --- /dev/null +++ b/src/Components/Map/Filters/CaptionElement/index.js @@ -0,0 +1 @@ +export { default } from './CaptionElement'; diff --git a/src/Components/Map/Filters/Description.js b/src/Components/Map/Filters/Description.js index 4fa7ef40..4780d031 100644 --- a/src/Components/Map/Filters/Description.js +++ b/src/Components/Map/Filters/Description.js @@ -1,9 +1,9 @@ import styled from 'styled-components'; export default styled.div` - margin-bottom: 14px; + margin-bottom: 30px; font-size: 16px; line-height: 1.44; - color: #dadfee; + color: rgba(218,223,238,0.9); `; diff --git a/src/Components/Map/Filters/Filters.js b/src/Components/Map/Filters/Filters.js index 3f19b9bb..8a2be2d5 100644 --- a/src/Components/Map/Filters/Filters.js +++ b/src/Components/Map/Filters/Filters.js @@ -3,11 +3,16 @@ import DayPicker, { DateUtils } from 'react-day-picker'; import { debounce } from 'debounce'; import 'react-day-picker/lib/style.css'; +import { JAN, DEC } from '../../../config/constants'; +import dateConverter from '../../../utils/dateConverter'; + import Container from './Container'; import Title from './Title'; import Description from './Description'; +import Separator from './Separator'; import Range from './Range'; import DayPickerContainer from './DayPicker'; +import CaptionElement from './CaptionElement'; import TimePicker from './TimePicker'; import AvgTime from './AvgTime'; import Input from './Input'; @@ -27,7 +32,9 @@ class Filters extends PureComponent { debounce(this.props.changeFilter('hour', e.target.value), 300); }; - dateConverter = date => date && `${date.getDate()}.${date.getMonth() + 1}`; + setAverageTime = () => { + this.props.changeFilter('hour', -1); + }; toggleDayPicker = () => { this.setState( @@ -36,9 +43,11 @@ class Filters extends PureComponent { }; render() { - const { range, hour } = this.props; - const { from, to } = range; + const { range: { from, to }, hour } = this.props; const modifiers = { start: from, end: to }; + const isAvgHour = hour === -1; + const dateFrom = dateConverter(from); + const dateTo = dateConverter(to); return ( @@ -48,8 +57,9 @@ class Filters extends PureComponent { Conducted from an area + - {`${this.dateConverter(from)} – ${this.dateConverter(to)}`} + {`${dateFrom} – ${dateTo}`} {this.state.isDayPickerEnabled && ( @@ -58,26 +68,17 @@ class Filters extends PureComponent { selectedDays={[from, { from, to }]} modifiers={modifiers} onDayClick={this.handleDayClick} - captionElement={({ date, localeUtils, locale }) => { - const months = localeUtils.getMonths(locale); - - return ( -
- {months[date.getMonth()]} -
- ); - }} - - initialMonth={new Date(2017, 0)} - fromMonth={new Date(2017, 0)} - toMonth={new Date(2017, 11)} + captionElement={CaptionElement} + initialMonth={JAN} + fromMonth={JAN} + toMonth={DEC} /> )} this.props.changeFilter('hour', -1)} + isEnabled={isAvgHour} + onClick={this.setAverageTime} > AVG @@ -89,7 +90,7 @@ class Filters extends PureComponent { step='1' onChange={this.changeTime} /> - {hour !== -1 && ( + {!isAvgHour && (
{`${hour}:00`}
diff --git a/src/Components/Map/Filters/Separator.js b/src/Components/Map/Filters/Separator.js new file mode 100644 index 00000000..58ecc6cd --- /dev/null +++ b/src/Components/Map/Filters/Separator.js @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +export default styled.div` + height: 9px; + border-top: solid 1px rgba(87,94,119,0.9); + border-bottom: solid 1px rgba(87,94,119,0.9); + margin-bottom: 30px; +`; diff --git a/src/Components/Map/Map.js b/src/Components/Map/Map.js index f3c3201f..b38f39aa 100644 --- a/src/Components/Map/Map.js +++ b/src/Components/Map/Map.js @@ -1,6 +1,10 @@ import React, { PureComponent } from 'react'; import mapboxgl from 'mapbox-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; + +import { MAPBOX_STYLE, MAPBOX_TOKEN } from '../../config/constants'; +import dateConverter from '../../utils/dateConverter'; + import Container from './Container'; import Filters from './Filters'; @@ -19,37 +23,33 @@ class Map extends PureComponent { }; componentDidMount() { - mapboxgl.accessToken = 'pk.eyJ1IjoibWFydGlucHJvamVjdDEiLCJhIjoiY2ptdW93MXZrMDNjMTNrcGhmNTJ1ZGljdCJ9.9fC5LXUepNAYTKu8O162OA'; + mapboxgl.accessToken = MAPBOX_TOKEN; this.map = new mapboxgl.Map({ container: 'map', - style: 'mapbox://styles/martinproject1/cjnfxj6053wz32rq8r9sija4o' + style: MAPBOX_STYLE }); this.nav = new mapboxgl.NavigationControl(); + this.map.scrollZoom.disable(); this.map.addControl(this.nav, 'top-right'); this.map.on('load', this.mapOnLoad); } componentDidUpdate() { - const { range, hour } = this.state; - const { from, to } = range; - if (!from || !to) return; - - const dateFrom = this.dateConverter(from); - const dateTo = this.dateConverter(to); - const queryParams = encodeURI( - `date_from=${dateFrom}&date_to=${dateTo}&hour=${hour}` - ); - + const queryParams = this.getQueryParams(); + const newStyleUrl = `/tiles/rpc/public.get_trips.json?${queryParams}`; const newStyle = this.map.getStyle(); - newStyle.sources['public.get_trips'].url = `/tiles/rpc/public.get_trips.json?${queryParams}`; + + newStyle.sources['public.get_trips'].url = newStyleUrl; this.map.setStyle(newStyle); } mapOnLoad = () => { + const queryParams = this.getQueryParams(); + this.map.addSource('public.get_trips', { type: 'vector', - url: '/tiles/rpc/public.get_trips.json?date_from=01.01.2017&date_to=02.01.2017&hour=9' + url: `/tiles/rpc/public.get_trips.json?${queryParams}` }); this.map.addLayer({ id: 'trips', @@ -59,39 +59,65 @@ class Map extends PureComponent { paint: { 'fill-extrusion-height': [ 'interpolate', - ['exponential', 1.3], + ['linear'], ['get', 'trips'], - 17, + 0, 10, - 1204, - 100, - 2526, - 200, - 4738, + 3, + 30, + 70, + 70, + 90, + 150, + 300, + 300, + 2500, 400, - 6249, - 600 + 8000, + 600, + 12000, + 800, + 20000, + 1100, + 30000, + 1600, + 55000, + 2000, + 76000, + 3000 ], 'fill-extrusion-color': [ 'interpolate', - ['exponential', 1.3], + ['linear'], ['get', 'trips'], 0, - '#f2a8ff', - 2, - '#f2a8ff', - 15, - '#dc70ff', - 26, - '#bc39fe', - 540, - '#9202fd', - 900, - '#6002c5' + '#fff0f0', + 3, + '#ffdade', + 70, + '#ffc4d1', + 90, + '#ffaec9', + 300, + '#ff98c5', + 2500, + '#f982c5', + 8000, + '#ee6cc8', + 12000, + '#de58ce', + 20000, + '#c847d7', + 30000, + '#ab3ae1', + 55000, + '#8233ed', + 76000, + '#3434f9' ], 'fill-extrusion-opacity': 0.75 } - }); + }, 'place-town'); }; changeFilter = (filter, value) => { @@ -101,12 +127,13 @@ class Map extends PureComponent { })); }; - dateConverter = (date) => { - const year = date.getFullYear(); - const month = date.getMonth() + 1; - const day = date.getDate(); + getQueryParams = () => { + const { range: { from, to }, hour } = this.state; - return `${month}.${day}.${year}`; + const dateFrom = `${dateConverter(from)}.2017`; + const dateTo = `${dateConverter(to)}.2017`; + + return encodeURI(`date_from=${dateFrom}&date_to=${dateTo}&hour=${hour}`); }; render() { diff --git a/src/config/constants.js b/src/config/constants.js new file mode 100644 index 00000000..bc74a4fc --- /dev/null +++ b/src/config/constants.js @@ -0,0 +1,4 @@ +export const MAPBOX_TOKEN = 'pk.eyJ1IjoibWFydGlucHJvamVjdDEiLCJhIjoiY2ptdW93MXZrMDNjMTNrcGhmNTJ1ZGljdCJ9.9fC5LXUepNAYTKu8O162OA'; +export const MAPBOX_STYLE = 'mapbox://styles/martinproject1/cjnfxj6053wz32rq8r9sija4o'; +export const JAN = new Date(2017, 0); +export const DEC = new Date(2017, 11); diff --git a/src/utils/dateConverter.js b/src/utils/dateConverter.js new file mode 100644 index 00000000..674f1517 --- /dev/null +++ b/src/utils/dateConverter.js @@ -0,0 +1,5 @@ +export default (date) => { + if (!date) return ''; + + return `${date.getDate()}.${date.getMonth() + 1}`; +};