mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Handled toggling between highlighted chart bars

Browse source
This commit is contained in:
Alejandro Celaya 2020-04-10 12:53:54 +02:00
parent c67a23c988
commit 73256dcf5b
3 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -8,10 +8,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
#### Added #### 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. 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. * [#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. * [#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. * [#226](https://github.com/shlinkio/shlink-web-client/issues/226) Created servers can now be edited.

1
src/utils/DateInput.scss
View file

@ -8,6 +8,7 @@
.date-input-container__input { .date-input-container__input {
padding-right: 35px !important; padding-right: 35px !important;
} }
.date-input-container__input:not(:disabled) { .date-input-container__input:not(:disabled) {
background-color: #fff !important; background-color: #fff !important;
} }

20
src/visits/ShortUrlVisits.js
View file

@ -41,6 +41,7 @@ const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.
return acc; return acc;
}, {}); }, {});
const format = formatDate(); const format = formatDate();
let selectedBar;
const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBtn) => { const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBtn) => {
const ShortUrlVisitsComp = ({ const ShortUrlVisitsComp = ({
@ -60,9 +61,17 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
const [ highlightedVisits, setHighlightedVisits ] = useState([]); const [ highlightedVisits, setHighlightedVisits ] = useState([]);
const [ isMobileDevice, setIsMobileDevice ] = useState(false); const [ isMobileDevice, setIsMobileDevice ] = useState(false);
const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches); const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches);
const highlightVisitsForProp = (prop) => (value) => setHighlightedVisits( const highlightVisitsForProp = (prop) => (value) => {
highlightedVisits.length === 0 ? normalizedVisits.filter(propEq(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 { params } = match;
const { shortCode } = params; const { shortCode } = params;
@ -203,7 +212,10 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
<VisitsTable <VisitsTable
visits={normalizedVisits} visits={normalizedVisits}
selectedVisits={highlightedVisits} selectedVisits={highlightedVisits}
setSelectedVisits={setHighlightedVisits} setSelectedVisits={(selectedVisits) => {
selectedBar = undefined;
setHighlightedVisits(selectedVisits);
}}
isSticky={tableIsSticky} isSticky={tableIsSticky}
/> />
</Collapse> </Collapse>