From 6592fd0da97f6063ad1c08cda731ac08d710bf4f Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Wed, 5 Aug 2020 14:54:46 +1000
Subject: [PATCH] add right axis to hour graph

---
 ts/src/stats/hours.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/ts/src/stats/hours.ts b/ts/src/stats/hours.ts
index c7e7cfe30..e56137f13 100644
--- a/ts/src/stats/hours.ts
+++ b/ts/src/stats/hours.ts
@@ -11,7 +11,7 @@ import { interpolateBlues } from "d3-scale-chromatic";
 import "d3-transition";
 import { select, mouse } from "d3-selection";
 import { scaleLinear, scaleBand, scaleSequential } from "d3-scale";
-import { axisBottom, axisLeft } from "d3-axis";
+import { axisBottom, axisLeft, axisRight } from "d3-axis";
 import { showTooltip, hideTooltip } from "./tooltip";
 import {
     GraphBounds,
@@ -97,7 +97,8 @@ export function renderHours(
 
     const y = scaleLinear()
         .range([bounds.height - bounds.marginBottom, bounds.marginTop])
-        .domain([0, yMax]);
+        .domain([0, yMax])
+        .nice();
     svg.select<SVGGElement>(".y-ticks")
         .transition(trans)
         .call(
@@ -140,6 +141,15 @@ export function renderHours(
                 )
         );
 
+    svg.select<SVGGElement>(".y2-ticks")
+        .transition(trans)
+        .call(
+            axisRight(yArea)
+                .ticks(bounds.height / 50)
+                .tickFormat((n: any) => `${Math.round(n * 100)}%`)
+                .tickSizeOuter(0)
+        );
+
     svg.select("path.area")
         .datum(data)
         .attr(