Merge branch 'accessibility-color-blind' of https://github.com/David-Brenn/anki into accessibility-color-blind

This commit is contained in:
Matthis 2025-08-14 13:22:29 +02:00
commit 03234de5de
2 changed files with 30 additions and 5 deletions

View file

@ -8,7 +8,7 @@
import type { GraphsResponse } from "@generated/anki/stats_pb";
import * as tr from "@generated/ftl";
import { dayLabel } from "@tslib/time";
import type { Bin } from "d3";
import { type Bin, interpolateViridis } from "d3";
import { bin, interpolateBlues, min, scaleLinear, scaleSequential, sum } from "d3";
import type { SearchDispatch, TableDatum } from "./graph-helpers";
@ -80,8 +80,18 @@ export function buildHistogram(
return [null, []];
}
const adjustedRange = scaleLinear().range([0.7, 0.3]);
const colourScale = scaleSequential((n) => interpolateBlues(adjustedRange(n)!)).domain([xMax!, xMin!]);
let adjustedRange;
let colourScale;
const isColourBlindMode = (window as any).colorBlindMode;
// Changing color based on mode
if(isColourBlindMode){
adjustedRange = scaleLinear().range([0.3, 0.7]);
colourScale = scaleSequential((n) => interpolateViridis(adjustedRange(n)!)).domain([xMax!, xMin!]);
} else {
adjustedRange = scaleLinear().range([0.7, 0.3]);
colourScale = scaleSequential((n) => interpolateBlues(adjustedRange(n)!)).domain([xMax!, xMin!]);
}
const totalInPeriod = sum(bins, accessor);
const periodDays = Math.abs(xMin!);

View file

@ -12,6 +12,7 @@ import {
axisBottom,
axisLeft,
interpolateRdYlGn,
interpolateViridis,
pointer,
scaleBand,
scaleLinear,
@ -20,7 +21,7 @@ import {
sum,
} from "d3";
import type { GraphBounds } from "./graph-helpers";
import { colorBlindColors, type GraphBounds } from "./graph-helpers";
import { GraphRange } from "./graph-helpers";
import { setDataAvailable } from "./graph-helpers";
import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
@ -162,7 +163,21 @@ export function renderButtons(
.paddingOuter(1)
.paddingInner(0.1);
const colour = scaleSequential(interpolateRdYlGn).domain([1, 4]);
const isColourBlindMode = (window as any).colorBlindMode;
let colour;
// Changing color based on mode
if(isColourBlindMode){
/*colour = [
colorBlindColors.mature, // darker red, again button
colorBlindColors.suspended, // lighter beige/yellow, hard button
colorBlindColors.new, // light blue, good button
colorBlindColors.relearn // green, easy button
]*/
colour = scaleSequential(interpolateViridis).domain([1, 4]);
} else {
colour = scaleSequential(interpolateRdYlGn).domain([1, 4]);
}
// y scale
const yTickFormat = (n: number): string => localizedNumber(n);