forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-05-30 17:16:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Defined how to parse visit stats and how to render them

Browse Source
This commit is contained in:
Alejandro Celaya
2018-07-30 20:31:48 +02:00
parent a75c7309f7
commit d97cbdde5d
7 changed files with 196 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/short-urls/ShortUrlVisits.js
View File

@@ -1,25 +1,68 @@
import React from 'react';
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import { connect } from 'react-redux';
import { pick } from 'ramda';
import { Card, CardBody, CardHeader } from 'reactstrap';
import { getShortUrlVisits } from './reducers/shortUrlVisits';
import VisitsParser from '../visits/services/VisitsParser';
export class ShortUrlsVisits extends React.Component {
state = { startDate: '', endDate: '' };
componentDidMount() {
const { match: { params } } = this.props;
this.props.getShortUrlVisits(params.shortCode);
this.props.getShortUrlVisits(params.shortCode, this.state);
}
render() {
const { match: { params }, selectedServer } = this.props;
const { match: { params }, selectedServer, visitsParser, shortUrlVisits } = this.props;
const serverUrl = selectedServer ? selectedServer.url : '';
const shortUrl = `${serverUrl}/${params.shortCode}`;
const generateGraphData = stats => ({
labels: Object.keys(stats),
datasets: Object.values(stats)
});
return (
<div className="short-urls-container">
<div className="card bg-light">
<div className="card-body">
<Card className="bg-light">
<CardBody>
<h2>Visit stats for <a target="_blank" href={shortUrl}>{shortUrl}</a></h2>
{/* TODO Once Shlink's API allows it, add total visits counter, long URL and creation time */}
</CardBody>
</Card>
<div className="row">
<div className="col-md-6">
<Card className="mt-4">
<CardHeader>Operating systems</CardHeader>
<CardBody>
<Doughnut data={generateGraphData(visitsParser.processOsStats(shortUrlVisits))} />
</CardBody>
</Card>
</div>
<div className="col-md-6">
<Card className="mt-4">
<CardHeader>Browsers</CardHeader>
<CardBody>
<Doughnut data={generateGraphData(visitsParser.processBrowserStats(shortUrlVisits))} />
</CardBody>
</Card>
</div>
<div className="col-md-6">
<Card className="mt-4">
<CardHeader>Countries</CardHeader>
<CardBody>
<HorizontalBar data={generateGraphData(visitsParser.processCountriesStats(shortUrlVisits))} />
</CardBody>
</Card>
</div>
<div className="col-md-6">
<Card className="mt-4">
<CardHeader>Referrers</CardHeader>
<CardBody>
<HorizontalBar data={generateGraphData(visitsParser.processReferrersStats(shortUrlVisits))} />
</CardBody>
</Card>
</div>
</div>
</div>
@@ -27,6 +70,10 @@ export class ShortUrlsVisits extends React.Component {
}
}
export default connect(pick(['selectedServer']), {
ShortUrlsVisits.defaultProps = {
visitsParser: VisitsParser
};
export default connect(pick(['selectedServer', 'shortUrlVisits']), {
getShortUrlVisits
})(ShortUrlsVisits);

4
src/short-urls/reducers/shortUrlVisits.js
View File

@@ -34,11 +34,11 @@ export default function dispatch (state = initialState, action) {
}
}
export const getShortUrlVisits = shortCode => async dispatch => {
export const getShortUrlVisits = (shortCode, dates) => async dispatch => {
dispatch({ type: GET_SHORT_URL_VISITS_START });
try {
const visits = await ShlinkApiClient.getShortUrlVisits(shortCode);
const visits = await ShlinkApiClient.getShortUrlVisits(shortCode, dates);
dispatch({ visits, type: GET_SHORT_URL_VISITS });
} catch (e) {
dispatch({ type: GET_SHORT_URL_VISITS_ERROR });