From 5d5a2be4988b74de70f553c2000cc4cfee6ca091 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 8 Sep 2018 20:34:04 +0200
Subject: [PATCH] Ensured bar charts start at 0

---
 src/visits/GraphCard.js       | 13 +++++++++++--
 test/visits/GraphCard.test.js | 12 ++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/visits/GraphCard.js b/src/visits/GraphCard.js
index 26acc8bc..e1a814da 100644
--- a/src/visits/GraphCard.js
+++ b/src/visits/GraphCard.js
@@ -33,9 +33,18 @@ export function GraphCard({ title, isBarChart, stats }) {
   });
   const renderGraph = () => {
     const Component = isBarChart ? HorizontalBar : Doughnut;
-    const legend = isBarChart ? { display: false } : { position: 'right' };
+    const options = {
+      legend: isBarChart ? { display: false } : { position: 'right' },
+      scales: isBarChart ? {
+        xAxes: [
+          {
+            ticks: { beginAtZero: true },
+          },
+        ],
+      } : null,
+    };
 
-    return <Component data={generateGraphData(stats)} options={{ legend }} />;
+    return <Component data={generateGraphData(stats)} options={options} />;
   };
 
   return (
diff --git a/test/visits/GraphCard.test.js b/test/visits/GraphCard.test.js
index fd03c0a9..50d2ae14 100644
--- a/test/visits/GraphCard.test.js
+++ b/test/visits/GraphCard.test.js
@@ -26,6 +26,7 @@ describe('<GraphCard />', () => {
     expect(horizontal).toHaveLength(0);
 
     const { labels, datasets: [{ title, data, backgroundColor, borderColor }] } = doughnut.prop('data');
+    const { legend, scales } = doughnut.prop('options');
 
     expect(title).toEqual('The chart');
     expect(labels).toEqual(keys(stats));
@@ -40,6 +41,8 @@ describe('<GraphCard />', () => {
       '#4D5360',
     ]);
     expect(borderColor).toEqual('white');
+    expect(legend).toEqual({ position: 'right' });
+    expect(scales).toBeNull();
   });
 
   it('renders HorizontalBar when is not a bar chart', () => {
@@ -51,8 +54,17 @@ describe('<GraphCard />', () => {
     expect(horizontal).toHaveLength(1);
 
     const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data');
+    const { legend, scales } = horizontal.prop('options');
 
     expect(backgroundColor).toEqual('rgba(70, 150, 229, 0.4)');
     expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
+    expect(legend).toEqual({ display: false });
+    expect(scales).toEqual({
+      xAxes: [
+        {
+          ticks: { beginAtZero: true },
+        },
+      ],
+    });
   });
 });