From 73256dcf5b165e644f6ab76879d970099542a63c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 10 Apr 2020 12:53:54 +0200
Subject: [PATCH] Handled toggling between highlighted chart bars

---
 CHANGELOG.md                 |  6 +++++-
 src/utils/DateInput.scss     |  1 +
 src/visits/ShortUrlVisits.js | 20 ++++++++++++++++----
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 654cbc4d..b110552c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,10 +8,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Added
 
-* [#199](https://github.com/shlinkio/shlink-web-client/issues/199) Added table to visits page which displays the information in a pagintaed, sortable and filterable list.
+* [#199](https://github.com/shlinkio/shlink-web-client/issues/199) Added table to visits page which displays the information in a paginated, sortable and filterable list.
 
     It also supports selecting multiple visits in the table which makes the corresponding data to be highlighted in the visits charts.
 
+* [#241](https://github.com/shlinkio/shlink-web-client/issues/241) Added support to select charts bars in order to highlight related stats in other charts.
+
+    It also selects the visits in the new table, and you can even combine a selection in the chart and in the table.
+
 * [#213](https://github.com/shlinkio/shlink-web-client/issues/213) The versions of both shlink-web-client and currently consumed Shlink server are now displayed in the footer.
 * [#221](https://github.com/shlinkio/shlink-web-client/issues/221) Improved how servers are handled, displaying meaningful errors when a not-found or a not-reachable server is tried to be loaded.
 * [#226](https://github.com/shlinkio/shlink-web-client/issues/226) Created servers can now be edited.
diff --git a/src/utils/DateInput.scss b/src/utils/DateInput.scss
index cbcbe996..616e74ab 100644
--- a/src/utils/DateInput.scss
+++ b/src/utils/DateInput.scss
@@ -8,6 +8,7 @@
 .date-input-container__input {
   padding-right: 35px !important;
 }
+
 .date-input-container__input:not(:disabled) {
   background-color: #fff !important;
 }
diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index 9415cf77..97787234 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -41,6 +41,7 @@ const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.
   return acc;
 }, {});
 const format = formatDate();
+let selectedBar;
 
 const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBtn) => {
   const ShortUrlVisitsComp = ({
@@ -60,9 +61,17 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
     const [ highlightedVisits, setHighlightedVisits ] = useState([]);
     const [ isMobileDevice, setIsMobileDevice ] = useState(false);
     const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches);
-    const highlightVisitsForProp = (prop) => (value) => setHighlightedVisits(
-      highlightedVisits.length === 0 ? normalizedVisits.filter(propEq(prop, value)) : []
-    );
+    const highlightVisitsForProp = (prop) => (value) => {
+      const newSelectedBar = `${prop}_${value}`;
+
+      if (selectedBar === newSelectedBar) {
+        setHighlightedVisits([]);
+        selectedBar = undefined;
+      } else {
+        setHighlightedVisits(normalizedVisits.filter(propEq(prop, value)));
+        selectedBar = newSelectedBar;
+      }
+    };
 
     const { params } = match;
     const { shortCode } = params;
@@ -203,7 +212,10 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
             <VisitsTable
               visits={normalizedVisits}
               selectedVisits={highlightedVisits}
-              setSelectedVisits={setHighlightedVisits}
+              setSelectedVisits={(selectedVisits) => {
+                selectedBar = undefined;
+                setHighlightedVisits(selectedVisits);
+              }}
               isSticky={tableIsSticky}
             />
           </Collapse>