mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages 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
Show stats 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, visitsParser,
shortUrlVisits: { visits, loading, error, shortUrl } shortUrlVisits: { visits, loading, error, shortUrl }
} = this.props; } = this.props;
const colors = [
'#97BBCD',
'#DCDCDC',
'#F7464A',
'#46BFBD',
'#FDB45C',
'#949FB1',
'#4D5360'
];
const serverUrl = selectedServer ? selectedServer.url : ''; const serverUrl = selectedServer ? selectedServer.url : '';
const shortLink = `${serverUrl}/${params.shortCode}`; const shortLink = `${serverUrl}/${params.shortCode}`;
const generateGraphData = (stats, label, isBarChart) => ({ const generateGraphData = (stats, label, isBarChart) => ({
@ -32,18 +41,27 @@ export class ShortUrlsVisits extends React.Component {
{ {
label, label,
data: Object.values(stats), data: Object.values(stats),
backgroundColor: isBarChart ? 'rgba(200, 26, 80, 0.2)' : [], backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : colors,
borderColor: isBarChart ? 'rgba(200, 26, 80, 1)' : [], 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"> <div className="col-md-6">
<Card className="mt-4"> <Card className="mt-4">
<CardHeader>{title}</CardHeader> <CardHeader>{title}</CardHeader>
<CardBody> <CardBody>
{!isBarChart && <Doughnut data={generateGraphData(stats, title, isBarChart)} />} {!isBarChart && <Doughnut data={generateGraphData(stats, label || title, isBarChart)} options={{
{isBarChart && <HorizontalBar data={generateGraphData(stats, title, isBarChart)} />} legend: {
position: 'right'
}
}} />}
{isBarChart && <HorizontalBar data={generateGraphData(stats, label || title, isBarChart)} options={{
legend: {
display: false
}
}} />}
</CardBody> </CardBody>
</Card> </Card>
</div>; </div>;
@ -72,8 +90,8 @@ export class ShortUrlsVisits extends React.Component {
<div className="row"> <div className="row">
{renderGraphCard('Operating systems', visitsParser.processOsStats(visits), false)} {renderGraphCard('Operating systems', visitsParser.processOsStats(visits), false)}
{renderGraphCard('Browsers', visitsParser.processBrowserStats(visits), false)} {renderGraphCard('Browsers', visitsParser.processBrowserStats(visits), false)}
{renderGraphCard('Countries', visitsParser.processCountriesStats(visits))} {renderGraphCard('Countries', visitsParser.processCountriesStats(visits), true, 'Visits')}
{renderGraphCard('Referrers', visitsParser.processReferrersStats(visits))} {renderGraphCard('Referrers', visitsParser.processReferrersStats(visits), true, 'Visits')}
</div> </div>
); );
}; };

2
src/short-urls/helpers/PreviewModal.js
View file

@ -9,7 +9,7 @@ export default function PreviewModal ({ url, toggle, isOpen }) {
<ModalBody> <ModalBody>
<div className="text-center"> <div className="text-center">
<p className="preview-modal__loader">Loading...</p> <p className="preview-modal__loader">Loading...</p>
<img src={`${url}/preview`} className="preview-modal__img" /> <img src={`${url}/preview`} className="preview-modal__img" alt="Preview" />
</div> </div>
</ModalBody> </ModalBody>
</Modal> </Modal>

2
src/short-urls/helpers/QrCodeModal.js
View file

@ -8,7 +8,7 @@ export default function QrCodeModal ({ url, toggle, isOpen }) {
<ModalHeader toggle={toggle}>QR code for <a target="_blank" href={url}>{url}</a></ModalHeader> <ModalHeader toggle={toggle}>QR code for <a target="_blank" href={url}>{url}</a></ModalHeader>
<ModalBody> <ModalBody>
<div className="text-center"> <div className="text-center">
<img src={`${url}/qr-code`} className="qr-code-modal__img" /> <img src={`${url}/qr-code`} className="qr-code-modal__img" alt="QR code" />
</div> </div>
</ModalBody> </ModalBody>
</Modal> </Modal>