forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-20 21:46:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added cities stats graphic on short url visits page

Browse Source
This commit is contained in:
Alejandro Celaya
2019-01-07 11:53:14 +01:00
parent f9360683e9
commit dc9c1712ff
4 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/visits/ShortUrlVisits.js
View File

@@ -17,6 +17,7 @@ const ShortUrlVisits = ({
processOsStats,
processBrowserStats,
processCountriesStats,
processCitiesStats,
processReferrersStats,
}) => class ShortUrlVisits extends React.Component {
static propTypes = {
@@ -70,13 +71,23 @@ const ShortUrlVisits = ({
return (
<div className="row">
<div className="col-md-6">
<div className="col-xl-4 col-lg-6">
<GraphCard title="Operating systems" stats={processOsStats(visits)} />
</div>
<div className="col-md-6">
<div className="col-xl-4 col-lg-6">
<GraphCard title="Browsers" stats={processBrowserStats(visits)} />
</div>
<div className="col-md-6">
<div className="col-xl-4">
<SortableBarGraph
stats={processReferrersStats(visits)}
title="Referrers"
sortingItems={{
name: 'Referrer name',
amount: 'Visits amount',
}}
/>
</div>
<div className="col-lg-6">
<SortableBarGraph
stats={processCountriesStats(visits)}
title="Countries"
@@ -86,12 +97,12 @@ const ShortUrlVisits = ({
}}
/>
</div>
<div className="col-md-6">
<div className="col-lg-6">
<SortableBarGraph
stats={processReferrersStats(visits)}
title="Referrers"
stats={processCitiesStats(visits)}
title="Cities"
sortingItems={{
name: 'Referrer name',
name: 'City name',
amount: 'Visits amount',
}}
/>

12
src/visits/services/VisitsParser.js
View File

@@ -76,16 +76,20 @@ export const processReferrersStats = (visits) =>
visits,
);
export const processCountriesStats = (visits) =>
const processLocationStats = (propertyName) => (visits) =>
reduce(
(stats, { visitLocation }) => {
const notHasCountry = isNil(visitLocation)
|| isNil(visitLocation.countryName)
|| isEmpty(visitLocation.countryName);
const country = notHasCountry ? 'Unknown' : visitLocation.countryName;
|| isNil(visitLocation[propertyName])
|| isEmpty(visitLocation[propertyName]);
const country = notHasCountry ? 'Unknown' : visitLocation[propertyName];
return assoc(country, (stats[country] || 0) + 1, stats);
},
{},
visits,
);
export const processCountriesStats = processLocationStats('countryName');
export const processCitiesStats = processLocationStats('cityName');