right axis for reviews graph

This commit is contained in:
Damien Elmes 2020-08-05 15:01:51 +10:00
parent 6592fd0da9
commit 32612fc84c

View file

@ -16,7 +16,7 @@ import {
import "d3-transition"; import "d3-transition";
import { select, mouse } from "d3-selection"; import { select, mouse } from "d3-selection";
import { scaleLinear, scaleSequential } from "d3-scale"; import { scaleLinear, scaleSequential } from "d3-scale";
import { axisBottom, axisLeft } from "d3-axis"; import { axisBottom, axisLeft, axisRight } from "d3-axis";
import { showTooltip, hideTooltip } from "./tooltip"; import { showTooltip, hideTooltip } from "./tooltip";
import { GraphBounds, setDataAvailable, GraphRange, TableDatum } from "./graphs"; import { GraphBounds, setDataAvailable, GraphRange, TableDatum } from "./graphs";
import { area, curveBasis } from "d3-shape"; import { area, curveBasis } from "d3-shape";
@ -158,17 +158,7 @@ export function renderReviews(
// y scale // y scale
const yMax = max(bins, (b: Bin<any, any>) => cumulativeBinValue(b, 4))!; const yTickFormat = (n: number): string => {
const y = scaleLinear()
.range([bounds.height - bounds.marginBottom, bounds.marginTop])
.domain([0, yMax]);
svg.select<SVGGElement>(".y-ticks")
.transition(trans)
.call(
axisLeft(y)
.ticks(bounds.height / 50)
.tickSizeOuter(0)
.tickFormat(((n: number): string => {
if (showTime) { if (showTime) {
return timeSpan(i18n, n / 1000, true); return timeSpan(i18n, n / 1000, true);
} else { } else {
@ -178,7 +168,20 @@ export function renderReviews(
return n.toString(); return n.toString();
} }
} }
}) as any) };
const yMax = max(bins, (b: Bin<any, any>) => cumulativeBinValue(b, 4))!;
const y = scaleLinear()
.range([bounds.height - bounds.marginBottom, bounds.marginTop])
.domain([0, yMax])
.nice();
svg.select<SVGGElement>(".y-ticks")
.transition(trans)
.call(
axisLeft(y)
.ticks(bounds.height / 50)
.tickSizeOuter(0)
.tickFormat(yTickFormat as any)
); );
// x bars // x bars
@ -306,9 +309,18 @@ export function renderReviews(
areaCounts.unshift(0); areaCounts.unshift(0);
const areaData = cumsum(areaCounts); const areaData = cumsum(areaCounts);
const yCumMax = areaData.slice(-1)[0]; const yCumMax = areaData.slice(-1)[0];
const yAreaScale = y.copy().domain([0, yCumMax]); const yAreaScale = y.copy().domain([0, yCumMax]).nice();
if (yCumMax) { if (yCumMax) {
svg.select<SVGGElement>(".y2-ticks")
.transition(trans)
.call(
axisRight(yAreaScale)
.ticks(bounds.height / 50)
.tickFormat(yTickFormat as any)
.tickSizeOuter(0)
);
svg.select("path.area") svg.select("path.area")
.datum(areaData as any) .datum(areaData as any)
.attr( .attr(