Updated cities chart so that map shows locations from current page when result set is paginated

src/visits/ShortUrlVisits.js

@@ -116,9 +116,15 @@ const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits exte
             <SortableBarGraph
               stats={cities}
               title="Cities"
-              extraHeaderContent={(
+              extraHeaderContent={(filterLocations) =>
-                mapLocations.length > 0 && <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} />
+                mapLocations.length > 0 && (
-              )}
+                  <OpenMapModalBtn
+                    modalTitle="Cities"
+                    locations={mapLocations}
+                    filterLocations={filterLocations}
+                  />
+                )
+              }
               sortingItems={{
                 name: 'City name',
                 amount: 'Visits amount',

src/visits/SortableBarGraph.js

@@ -16,7 +16,7 @@ export default class SortableBarGraph extends React.Component {
     stats: PropTypes.object.isRequired,
     title: PropTypes.string.isRequired,
     sortingItems: PropTypes.object.isRequired,
-    extraHeaderContent: PropTypes.node,
+    extraHeaderContent: PropTypes.func,
     withPagination: PropTypes.bool,
   };
 
@@ -96,6 +96,11 @@ export default class SortableBarGraph extends React.Component {
   render() {
     const { stats, sortingItems, title, extraHeaderContent, withPagination = true } = this.props;
     const { currentPageStats, pagination, max } = this.determineStats(stats, sortingItems);
+    const filterLocations = (locations) => {
+      const validCities = keys(currentPageStats);
+
+      return locations.filter(({ cityName }) => validCities.includes(cityName));
+    };
     const computedTitle = (
       <React.Fragment>
         {title}
@@ -122,7 +127,11 @@ export default class SortableBarGraph extends React.Component {
             />
           </div>
         )}
-        {extraHeaderContent && <div className="float-right">{extraHeaderContent}</div>}
+        {extraHeaderContent && (
+          <div className="float-right">
+            {extraHeaderContent(pagination ? filterLocations : undefined)}
+          </div>
+        )}
       </React.Fragment>
     );
 

src/visits/helpers/OpenMapModalBtn.js

@@ -10,22 +10,24 @@ export default class OpenMapModalBtn extends React.Component {
   static propTypes = {
     modalTitle: PropTypes.string.isRequired,
     locations: PropTypes.arrayOf(PropTypes.object),
+    filterLocations: PropTypes.func,
   };
 
   state = { mapIsOpened: false };
 
   render() {
-    const { modalTitle, locations = [] } = this.props;
+    const { modalTitle, locations = [], filterLocations } = this.props;
     const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened }));
     const buttonRef = React.createRef();
+    const filteredLocations = filterLocations ? filterLocations(locations) : locations;
 
     return (
       <React.Fragment>
         <button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef} onClick={toggleMap}>
           <FontAwesomeIcon icon={mapIcon} />
         </button>
-        <UncontrolledTooltip placement="bottom" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
+        <UncontrolledTooltip placement="left" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
-        <MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={modalTitle} locations={locations} />
+        <MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={modalTitle} locations={filteredLocations} />
       </React.Fragment>
     );
   }