Created component to show a map on a modal window

This commit is contained in:
Alejandro Celaya
2019-01-07 13:35:14 +01:00
parent 95220b913a
commit 6abc0e7d02
6 changed files with 111 additions and 14 deletions

View File

@@ -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 (
<GraphCard stats={sortStats()} isBarChart>
{title}
<div className="float-right">
<button className="btn btn-link btn-sm" onClick={toggleMap}>Show in map</button>
<MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={title} />
<SortingDropdown
isButton={false}
right