From 1abcb2e1d7c0abb0981f00248a865a0e15bac0f8 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Tue, 31 Jul 2018 20:36:27 +0200
Subject: [PATCH] Fixed visits graphs styles

---
 src/short-urls/ShortUrlVisits.js       | 32 ++++++++++++++++++++------
 src/short-urls/helpers/PreviewModal.js |  2 +-
 src/short-urls/helpers/QrCodeModal.js  |  2 +-
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/short-urls/ShortUrlVisits.js b/src/short-urls/ShortUrlVisits.js
index 1ea5a4cf..6508709e 100644
--- a/src/short-urls/ShortUrlVisits.js
+++ b/src/short-urls/ShortUrlVisits.js
@@ -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>
       );
     };
diff --git a/src/short-urls/helpers/PreviewModal.js b/src/short-urls/helpers/PreviewModal.js
index aa31755d..ee5393ca 100644
--- a/src/short-urls/helpers/PreviewModal.js
+++ b/src/short-urls/helpers/PreviewModal.js
@@ -9,7 +9,7 @@ export default function PreviewModal ({ url, toggle, isOpen }) {
       <ModalBody>
         <div className="text-center">
           <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>
       </ModalBody>
     </Modal>
diff --git a/src/short-urls/helpers/QrCodeModal.js b/src/short-urls/helpers/QrCodeModal.js
index 01662c8f..1cedabba 100644
--- a/src/short-urls/helpers/QrCodeModal.js
+++ b/src/short-urls/helpers/QrCodeModal.js
@@ -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>
       <ModalBody>
         <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>
       </ModalBody>
     </Modal>