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

Fixed visits graphs styles

Browse Source
This commit is contained in:
Alejandro Celaya
2018-07-31 20:36:27 +02:00
parent 0f34d473b9
commit 1abcb2e1d7
3 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,6 +24,15 @@ export class ShortUrlsVisits extends React.Component {
visitsParser,
shortUrlVisits: { visits, loading, error, shortUrl }
} = this.props;
const colors = [
'#97BBCD',
'#DCDCDC',
'#F7464A',
'#46BFBD',
'#FDB45C',
'#949FB1',
'#4D5360'
];
const serverUrl = selectedServer ? selectedServer.url : '';
const shortLink = `${serverUrl}/${params.shortCode}`;
const generateGraphData = (stats, label, isBarChart) => ({
@@ -32,18 +41,27 @@ export class ShortUrlsVisits extends React.Component {
{
label,
data: Object.values(stats),
backgroundColor: isBarChart ? 'rgba(200, 26, 80, 0.2)' : [],
borderColor: isBarChart ? 'rgba(200, 26, 80, 1)' : [],
backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : colors,
borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
borderWidth: 2
}
]
});
const renderGraphCard = (title, stats, isBarChart = true) =>
const renderGraphCard = (title, stats, isBarChart, label) =>
<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)} />}
{!isBarChart && <Doughnut data={generateGraphData(stats, label || title, isBarChart)} options={{
legend: {
position: 'right'
}
}} />}
{isBarChart && <HorizontalBar data={generateGraphData(stats, label || title, isBarChart)} options={{
legend: {
display: false
}
}} />}
</CardBody>
</Card>
</div>;
@@ -72,8 +90,8 @@ export class ShortUrlsVisits extends React.Component {
<div className="row">
{renderGraphCard('Operating systems', visitsParser.processOsStats(visits), false)}
{renderGraphCard('Browsers', visitsParser.processBrowserStats(visits), false)}
{renderGraphCard('Countries', visitsParser.processCountriesStats(visits))}
{renderGraphCard('Referrers', visitsParser.processReferrersStats(visits))}
{renderGraphCard('Countries', visitsParser.processCountriesStats(visits), true, 'Visits')}
{renderGraphCard('Referrers', visitsParser.processReferrersStats(visits), true, 'Visits')}
</div>
);
};