diff --git a/package.json b/package.json index 723df2fa..a5a03091 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "chart.js": "^2.7.2", "classnames": "^2.2.6", "csvjson": "^5.1.0", + "leaflet": "^1.4.0", "moment": "^2.22.2", "promise": "^8.0.1", "prop-types": "^15.6.2", @@ -41,6 +42,7 @@ "react-copy-to-clipboard": "^5.0.1", "react-datepicker": "~1.5.0", "react-dom": "^16.7.0", + "react-leaflet": "^2.1.4", "react-moment": "^0.7.6", "react-redux": "^5.0.7", "react-router-dom": "^4.2.2", diff --git a/src/index.js b/src/index.js index 8f30306f..a0604e47 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import registerServiceWorker from './registerServiceWorker'; import container from './container'; import store from './container/store'; import '../node_modules/react-datepicker/dist/react-datepicker.css'; +import '../node_modules/leaflet/dist/leaflet.css'; import './common/react-tagsinput.scss'; import './index.scss'; diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js index 9b75d7da..f1637487 100644 --- a/src/visits/SortableBarGraph.js +++ b/src/visits/SortableBarGraph.js @@ -3,6 +3,9 @@ import PropTypes from 'prop-types'; import { fromPairs, head, identity, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda'; import SortingDropdown from '../utils/SortingDropdown'; import GraphCard from './GraphCard'; +import MapModal from './helpers/MapModal'; + +const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value); export default class SortableBarGraph extends React.Component { static propTypes = { @@ -14,6 +17,7 @@ export default class SortableBarGraph extends React.Component { state = { orderField: undefined, orderDir: undefined, + mapIsOpened: false, }; render() { @@ -23,7 +27,6 @@ export default class SortableBarGraph extends React.Component { return stats; } - const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value); const sortedPairs = sortBy( pipe( prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1), @@ -35,10 +38,14 @@ export default class SortableBarGraph extends React.Component { return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs)); }; + const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened })); + return ( {title}
+ + ( + + {title} + + + + + + A pretty CSS3 popup.
Easily customizable. +
+
+
+
+
+); + +MapModal.propTypes = propTypes; + +export default MapModal; diff --git a/src/visits/helpers/MapModal.scss b/src/visits/helpers/MapModal.scss new file mode 100644 index 00000000..642bf797 --- /dev/null +++ b/src/visits/helpers/MapModal.scss @@ -0,0 +1,38 @@ +@import '../../utils/base'; + +.map-modal__modal { + @media (min-width: $mdMin) { + $margin: 20px; + $offset: $margin * 2; + + width: calc(100% - #{$offset}); + max-width: calc(100% - #{$offset}); + height: calc(100% - #{$offset}); + margin: $margin; + } + + @media (max-width: $smMax) { + $margin: 10px; + $offset: $margin * 2; + + width: calc(100% - #{$offset}); + max-width: calc(100% - #{$offset}); + height: calc(100% - #{$offset}); + margin: $margin; + } +} + +.map-modal__modal .modal-content { + height: 100%; +} + +.map-modal__modal .modal-body { + padding: 0; + display: flex; + overflow: hidden; +} + +.map-modal__modal .leaflet-container { + flex: 1 1 auto; + border-radius: 0 0 .3rem .3rem; +} diff --git a/yarn.lock b/yarn.lock index 34d65aae..dd1250a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -736,7 +736,7 @@ dependencies: regenerator-runtime "^0.12.0" -"@babel/runtime@^7.1.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f" dependencies: @@ -4356,7 +4356,7 @@ hoist-non-react-statics@^2.5.0: version "2.5.5" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" -hoist-non-react-statics@^3.1.0: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz#c09c0555c84b38a7ede6912b61efddafd6e75e1e" dependencies: @@ -5720,6 +5720,11 @@ lcid@^2.0.0: dependencies: invert-kv "^2.0.0" +leaflet@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.4.0.tgz#d5f56eeb2aa32787c24011e8be4c77e362ae171b" + integrity sha512-x9j9tGY1+PDLN9pcWTx9/y6C5nezoTMB8BLK5jTakx+H7bPlnbCHfi9Hjg+Qt36sgDz/cb9lrSpNQXmk45Tvhw== + left-pad@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e" @@ -5804,6 +5809,11 @@ locate-path@^3.0.0: p-locate "^3.0.0" path-exists "^3.0.0" +lodash-es@^4.0.0: + version "4.17.11" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0" + integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q== + lodash._reinterpolate@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" @@ -7589,11 +7599,6 @@ postcss-reduce-initial@^4.0.2: postcss-reduce-transforms@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.1.tgz#8600d5553bdd3ad640f43bff81eb52f8760d4561" - dependencies: - cssnano-util-get-match "^4.0.0" - has "^1.0.0" - postcss "^7.0.0" - postcss-value-parser "^3.0.0" postcss-replace-overflow-wrap@^3.0.0: version "3.0.0" @@ -8062,6 +8067,17 @@ react-is@^16.3.2, react-is@^16.6.0, react-is@^16.6.1, react-is@^16.7.0: version "16.7.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa" +react-leaflet@^2.1.4: + version "2.1.4" + resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-2.1.4.tgz#44192a972892c690d4148e48dacd613168fd8cc4" + integrity sha512-OJvLq13ID5X6H/AM7woPmuqK7qEjT7RE81kysYU3X4HACsumAmvRuWffffxQ8Fl+m2cxkqF78eRmsWj5w9r1xw== + dependencies: + "@babel/runtime" "^7.2.0" + hoist-non-react-statics "^3.2.1" + lodash "^4.0.0" + lodash-es "^4.0.0" + warning "^4.0.0" + react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -8897,11 +8913,6 @@ shebang-regex@^1.0.0: shell-quote@1.6.1: version "1.6.1" resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767" - dependencies: - array-filter "~0.0.0" - array-map "~0.0.0" - array-reduce "~0.0.0" - jsonify "~0.0.0" shellwords@^0.1.1: version "0.1.1" @@ -10109,7 +10120,7 @@ warning@^3.0.0: dependencies: loose-envify "^1.0.0" -warning@^4.0.1: +warning@^4.0.0, warning@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.2.tgz#aa6876480872116fa3e11d434b0d0d8d91e44607" dependencies: