From 365e584db8c253a485eec0325494e8f49426065c Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Wed, 5 Aug 2020 18:58:31 +1000
Subject: [PATCH] hide odd hours in small screen

---
 ts/src/stats/graphs.scss |  3 +++
 ts/src/stats/hours.ts    | 10 +++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ts/src/stats/graphs.scss b/ts/src/stats/graphs.scss
index e4528df75..238f31a87 100644
--- a/ts/src/stats/graphs.scss
+++ b/ts/src/stats/graphs.scss
@@ -67,6 +67,9 @@ body {
 @media only screen and (max-width: 600px) {
     .tick text {
         font-size: 15px;
+
+    .tick-odd {
+        display: none;
     }
 }
 
diff --git a/ts/src/stats/hours.ts b/ts/src/stats/hours.ts
index 090367d35..ffee50329 100644
--- a/ts/src/stats/hours.ts
+++ b/ts/src/stats/hours.ts
@@ -85,7 +85,15 @@ export function renderHours(
         .paddingInner(0.1);
     svg.select<SVGGElement>(".x-ticks")
         .transition(trans)
-        .call(axisBottom(x).tickSizeOuter(0));
+        .call(axisBottom(x).tickSizeOuter(0))
+        .selectAll("text")
+        .attr("class", (n: any) => {
+            if (n % 2 != 0) {
+                return "tick-odd";
+            } else {
+                return "";
+            }
+        });
 
     const cappedRange = scaleLinear().range([0.1, 0.8]);
     const colour = scaleSequential((n) => interpolateBlues(cappedRange(n))).domain([