diff --git a/ts/graphs/buttons.ts b/ts/graphs/buttons.ts index f791fed9d..01be021d6 100644 --- a/ts/graphs/buttons.ts +++ b/ts/graphs/buttons.ts @@ -153,28 +153,30 @@ export function renderButtons( const xGroup = scaleBand() .domain(["learning", "young", "mature"]) .range([bounds.marginLeft, bounds.width - bounds.marginRight]); - svg.select(".x-ticks").call((selection) => - selection.transition(trans).call( - axisBottom(xGroup) - .tickFormat(((d: GroupKind) => { - let kind: string; - switch (d) { - case "learning": - kind = tr.statisticsCountsLearningCards(); - break; - case "young": - kind = tr.statisticsCountsYoungCards(); - break; - case "mature": - default: - kind = tr.statisticsCountsMatureCards(); - break; - } - return `${kind} \u200e(${totalCorrect(d).percent}%)`; - }) as any) - .tickSizeOuter(0) + svg.select(".x-ticks") + .call((selection) => + selection.transition(trans).call( + axisBottom(xGroup) + .tickFormat(((d: GroupKind) => { + let kind: string; + switch (d) { + case "learning": + kind = tr.statisticsCountsLearningCards(); + break; + case "young": + kind = tr.statisticsCountsYoungCards(); + break; + case "mature": + default: + kind = tr.statisticsCountsMatureCards(); + break; + } + return `${kind} \u200e(${totalCorrect(d).percent}%)`; + }) as any) + .tickSizeOuter(0) + ) ) - ); + .attr("direction", "ltr"); const xButton = scaleBand() .domain(["1", "2", "3", "4"]) @@ -189,13 +191,15 @@ export function renderButtons( const y = scaleLinear() .range([bounds.height - bounds.marginBottom, bounds.marginTop]) .domain([0, yMax]); - svg.select(".y-ticks").call((selection) => - selection.transition(trans).call( - axisLeft(y) - .ticks(bounds.height / 50) - .tickSizeOuter(0) + svg.select(".y-ticks") + .call((selection) => + selection.transition(trans).call( + axisLeft(y) + .ticks(bounds.height / 50) + .tickSizeOuter(0) + ) ) - ); + .attr("direction", "ltr"); // x bars diff --git a/ts/graphs/calendar.ts b/ts/graphs/calendar.ts index a62dcce82..616bbe6b6 100644 --- a/ts/graphs/calendar.ts +++ b/ts/graphs/calendar.ts @@ -190,6 +190,7 @@ export function renderCalendar( .attr("text-anchor", "end") .attr("font-size", "small") .attr("font-family", "monospace") + .attr("direction", "ltr") .style("user-select", "none") .on("click", null) .filter((d: number) => diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts index ab81fb2a5..cb11698a9 100644 --- a/ts/graphs/histogram-graph.ts +++ b/ts/graphs/histogram-graph.ts @@ -58,14 +58,16 @@ export function histogramGraph( const binValue = data.binValue ?? ((bin: any): number => bin.length as number); const x = data.scale.range([bounds.marginLeft, bounds.width - bounds.marginRight]); - svg.select(".x-ticks").call((selection) => - selection.transition(trans).call( - axisBottom(x) - .ticks(7) - .tickSizeOuter(0) - .tickFormat((data.xTickFormat ?? null) as any) + svg.select(".x-ticks") + .call((selection) => + selection.transition(trans).call( + axisBottom(x) + .ticks(7) + .tickSizeOuter(0) + .tickFormat((data.xTickFormat ?? null) as any) + ) ) - ); + .attr("direction", "ltr"); // y scale @@ -74,13 +76,15 @@ export function histogramGraph( .range([bounds.height - bounds.marginBottom, bounds.marginTop]) .domain([0, yMax]) .nice(); - svg.select(".y-ticks").call((selection) => - selection.transition(trans).call( - axisLeft(y) - .ticks(bounds.height / 50) - .tickSizeOuter(0) + svg.select(".y-ticks") + .call((selection) => + selection.transition(trans).call( + axisLeft(y) + .ticks(bounds.height / 50) + .tickSizeOuter(0) + ) ) - ); + .attr("direction", "ltr"); // x bars @@ -126,13 +130,15 @@ export function histogramGraph( const yAreaScale = y.copy().domain([0, data.total]).nice(); if (data.showArea && data.bins.length && areaData.slice(-1)[0]) { - svg.select(".y2-ticks").call((selection) => - selection.transition(trans).call( - axisRight(yAreaScale) - .ticks(bounds.height / 50) - .tickSizeOuter(0) + svg.select(".y2-ticks") + .call((selection) => + selection.transition(trans).call( + axisRight(yAreaScale) + .ticks(bounds.height / 50) + .tickSizeOuter(0) + ) ) - ); + .attr("direction", "ltr"); svg.select("path.area") .datum(areaData as any) diff --git a/ts/graphs/hours.ts b/ts/graphs/hours.ts index d4e178533..6a9eee147 100644 --- a/ts/graphs/hours.ts +++ b/ts/graphs/hours.ts @@ -101,7 +101,8 @@ export function renderHours( ) .selectAll(".tick") .selectAll("text") - .classed(oddTickClass, (d: any): boolean => d % 2 != 0); + .classed(oddTickClass, (d: any): boolean => d % 2 != 0) + .attr("direction", "ltr"); const cappedRange = scaleLinear().range([0.1, 0.8]); const colour = scaleSequential((n) => interpolateBlues(cappedRange(n)!)).domain([ @@ -115,13 +116,15 @@ export function renderHours( .range([bounds.height - bounds.marginBottom, bounds.marginTop]) .domain([0, yMax]) .nice(); - svg.select(".y-ticks").call((selection) => - selection.transition(trans).call( - axisLeft(y) - .ticks(bounds.height / 50) - .tickSizeOuter(0) + svg.select(".y-ticks") + .call((selection) => + selection.transition(trans).call( + axisLeft(y) + .ticks(bounds.height / 50) + .tickSizeOuter(0) + ) ) - ); + .attr("direction", "ltr"); const yArea = y.copy().domain([0, 1]); @@ -157,14 +160,16 @@ export function renderHours( ) ); - svg.select(".y2-ticks").call((selection) => - selection.transition(trans).call( - axisRight(yArea) - .ticks(bounds.height / 50) - .tickFormat((n: any) => `${Math.round(n * 100)}%`) - .tickSizeOuter(0) + svg.select(".y2-ticks") + .call((selection) => + selection.transition(trans).call( + axisRight(yArea) + .ticks(bounds.height / 50) + .tickFormat((n: any) => `${Math.round(n * 100)}%`) + .tickSizeOuter(0) + ) ) - ); + .attr("direction", "ltr"); svg.select("path.cumulative-overlay") .datum(data) diff --git a/ts/graphs/reviews.ts b/ts/graphs/reviews.ts index 4942a6b7a..1a4435d75 100644 --- a/ts/graphs/reviews.ts +++ b/ts/graphs/reviews.ts @@ -167,9 +167,11 @@ export function renderReviews( } x.range([bounds.marginLeft, bounds.width - bounds.marginRight]); - svg.select(".x-ticks").call((selection) => - selection.transition(trans).call(axisBottom(x).ticks(7).tickSizeOuter(0)) - ); + svg.select(".x-ticks") + .call((selection) => + selection.transition(trans).call(axisBottom(x).ticks(7).tickSizeOuter(0)) + ) + .attr("direction", "ltr"); // y scale @@ -190,14 +192,16 @@ export function renderReviews( .range([bounds.height - bounds.marginBottom, bounds.marginTop]) .domain([0, yMax]) .nice(); - svg.select(".y-ticks").call((selection) => - selection.transition(trans).call( - axisLeft(y) - .ticks(bounds.height / 50) - .tickSizeOuter(0) - .tickFormat(yTickFormat as any) + svg.select(".y-ticks") + .call((selection) => + selection.transition(trans).call( + axisLeft(y) + .ticks(bounds.height / 50) + .tickSizeOuter(0) + .tickFormat(yTickFormat as any) + ) ) - ); + .attr("direction", "ltr"); // x bars @@ -307,14 +311,16 @@ export function renderReviews( const yAreaScale = y.copy().domain([0, yCumMax]).nice(); if (yCumMax) { - svg.select(".y2-ticks").call((selection) => - selection.transition(trans).call( - axisRight(yAreaScale) - .ticks(bounds.height / 50) - .tickFormat(yTickFormat as any) - .tickSizeOuter(0) + svg.select(".y2-ticks") + .call((selection) => + selection.transition(trans).call( + axisRight(yAreaScale) + .ticks(bounds.height / 50) + .tickFormat(yTickFormat as any) + .tickSizeOuter(0) + ) ) - ); + .attr("direction", "ltr"); svg.select("path.cumulative-overlay") .datum(areaData as any)