From 38ec91c48eabebc83a7c5310188b276a42292898 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sun, 13 Sep 2020 20:09:18 -0700
Subject: [PATCH] Update chart tooltip.

---
 components/metrics/BarChart.js           | 15 ++++++++++++---
 components/metrics/MetricCard.module.css |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index 96eeaf37..1c66504d 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -44,9 +44,9 @@ export default function BarChart({
         return dateFormat(d, 'EEE M/d', locale);
       case 'month':
         if (w <= 660) {
-          return dateFormat(d, 'MMM', locale);
+          return index % 2 === 0 ? dateFormat(d, 'MMM', locale) : '';
         }
-        return dateFormat(d, 'MMMM', locale);
+        return dateFormat(d, 'MMM', locale);
       default:
         return label;
     }
@@ -65,7 +65,7 @@ export default function BarChart({
       const [label, value] = body[0].lines[0].split(':');
 
       setTooltip({
-        title: dateFormat(new Date(+title[0]), 'EEE MMMM d yyyy', locale),
+        title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
         value,
         label,
         labelColor: labelColors[0].backgroundColor,
@@ -73,6 +73,15 @@ export default function BarChart({
     }
   }
 
+  function getTooltipFormat(unit) {
+    switch (unit) {
+      case 'hour':
+        return 'EEE ha — MMM d yyyy';
+      default:
+        return 'EEE MMMM d yyyy';
+    }
+  }
+
   function createChart() {
     const options = {
       animation: {
diff --git a/components/metrics/MetricCard.module.css b/components/metrics/MetricCard.module.css
index 9c0d9e46..3f3405ee 100644
--- a/components/metrics/MetricCard.module.css
+++ b/components/metrics/MetricCard.module.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-width: 120px;
+  min-width: 140px;
   padding-right: 20px;
 }