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