mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 09:47:28 +03:00
Code Issues Projects Releases Packages Wiki Activity

Removed duplicated code from ShortUrlVisits

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-30 21:12:06 +02:00
parent 1b97877ecf
commit 13004f6d57
1 changed files with 23 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/short-urls/ShortUrlVisits.js
View file

@ -20,11 +20,27 @@ export class ShortUrlsVisits extends React.Component {
const { match: { params }, selectedServer, visitsParser, shortUrlVisits: { visits, loading, error } } = this.props; const { match: { params }, selectedServer, visitsParser, shortUrlVisits: { visits, loading, error } } = this.props;
const serverUrl = selectedServer ? selectedServer.url : ''; const serverUrl = selectedServer ? selectedServer.url : '';
const shortUrl = `${serverUrl}/${params.shortCode}`; const shortUrl = `${serverUrl}/${params.shortCode}`;
const generateGraphData = stats => ({ const generateGraphData = (stats, label, isBarChart) => ({
labels: Object.keys(stats), labels: Object.keys(stats),
data: Object.values(stats) datasets: [
{
label,
data: Object.values(stats),
backgroundColor: isBarChart ? 'rgba(200, 26, 80, 0.2)' : [],
borderColor: isBarChart ? 'rgba(200, 26, 80, 1)' : [],
}
]
}); });
const renderGraphCard = (title, stats, isBarChart = true) =>
<div className="col-md-6">
<Card className="mt-4">
<CardHeader>{title}</CardHeader>
<CardBody>
{!isBarChart && <Doughnut data={generateGraphData(stats, title, isBarChart)} />}
{isBarChart && <HorizontalBar data={generateGraphData(stats, title, isBarChart)} />}
</CardBody>
</Card>
</div>;
const renderContent = () => { const renderContent = () => {
if (loading) { if (loading) {
return ( return (
@ -48,38 +64,10 @@ export class ShortUrlsVisits extends React.Component {
return ( return (
<div className="row"> <div className="row">
<div className="col-md-6"> {renderGraphCard('Operating systems', visitsParser.processOsStats(visits), false)}
<Card className="mt-4"> {renderGraphCard('Browsers', visitsParser.processBrowserStats(visits), false)}
<CardHeader>Operating systems</CardHeader> {renderGraphCard('Countries', visitsParser.processCountriesStats(visits))}
<CardBody> {renderGraphCard('Referrers', visitsParser.processReferrersStats(visits))}
<Doughnut data={generateGraphData(visitsParser.processOsStats(visits))} />
</CardBody>
</Card>
</div>
<div className="col-md-6">
<Card className="mt-4">
<CardHeader>Browsers</CardHeader>
<CardBody>
<Doughnut data={generateGraphData(visitsParser.processBrowserStats(visits))} />
</CardBody>
</Card>
</div>
<div className="col-md-6">
<Card className="mt-4">
<CardHeader>Countries</CardHeader>
<CardBody>
<HorizontalBar data={generateGraphData(visitsParser.processCountriesStats(visits))} />
</CardBody>
</Card>
</div>
<div className="col-md-6">
<Card className="mt-4">
<CardHeader>Referrers</CardHeader>
<CardBody>
<HorizontalBar data={generateGraphData(visitsParser.processReferrersStats(visits))} />
</CardBody>
</Card>
</div>
</div> </div>
); );
}; };