From a66d3155d011ef50f5ef449efb84d8014af0f4bc Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 10 Sep 2020 21:35:17 -0700
Subject: [PATCH] Localize chart tooltip.

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

diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index 2291d5bb..ccbd23af 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -64,8 +64,14 @@ export default function BarChart({
     } else {
       const [label, value] = body[0].lines[0].split(':');
 
+      console.log(
+        +title[0],
+        new Date(+title[0]),
+        dateFormat(new Date(+title[0]), 'EEE MMMM d yyyy', locale),
+      );
+
       setTooltip({
-        title: title[0],
+        title: dateFormat(new Date(+title[0]), 'EEE MMMM d yyyy', locale),
         value,
         label,
         labelColor: labelColors[0].backgroundColor,
@@ -95,7 +101,7 @@ export default function BarChart({
             distribution: 'series',
             time: {
               unit,
-              tooltipFormat: 'ddd MMMM DD YYYY',
+              tooltipFormat: 'x',
             },
             ticks: {
               callback: renderXLabel,
@@ -138,6 +144,7 @@ export default function BarChart({
     options.scales.xAxes[0].time.unit = unit;
     options.scales.xAxes[0].ticks.callback = renderXLabel;
     options.animation.duration = animationDuration;
+    options.tooltips.custom = renderTooltip;
 
     onUpdate(chart.current);
   }
diff --git a/components/metrics/MetricCard.module.css b/components/metrics/MetricCard.module.css
index b75ad4ba..ed868f99 100644
--- a/components/metrics/MetricCard.module.css
+++ b/components/metrics/MetricCard.module.css
@@ -2,7 +2,8 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-width: 140px;
+  min-width: 120px;
+  margin-right: 20px;
 }
 
 .value {
@@ -15,5 +16,4 @@
 
 .label {
   font-size: var(--font-size-normal);
-  padding-right: 20px;
 }