add right axis to hour graph

This commit is contained in:
Damien Elmes 2020-08-05 14:54:46 +10:00
parent 43d8e5c9f0
commit 6592fd0da9

View file

@ -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(