Localize chart tooltip.

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);
   }

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;
 }