GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Merge pull request #1110 from abdnh/graphs-rtl

Browse source 
Fix graph labels display in RTL layout
This commit is contained in:
Damien Elmes 2021-04-02 21:08:00 +10:00 committed by GitHub
commit ee2c77e742
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 99 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
ts/graphs/buttons.ts
View file

@ -153,28 +153,30 @@ export function renderButtons(
const xGroup = scaleBand() const xGroup = scaleBand()
.domain(["learning", "young", "mature"]) .domain(["learning", "young", "mature"])
.range([bounds.marginLeft, bounds.width - bounds.marginRight]); .range([bounds.marginLeft, bounds.width - bounds.marginRight]);
svg.select<SVGGElement>(".x-ticks").call((selection) => svg.select<SVGGElement>(".x-ticks")
selection.transition(trans).call( .call((selection) =>
axisBottom(xGroup) selection.transition(trans).call(
.tickFormat(((d: GroupKind) => { axisBottom(xGroup)
let kind: string; .tickFormat(((d: GroupKind) => {
switch (d) { let kind: string;
case "learning": switch (d) {
kind = tr.statisticsCountsLearningCards(); case "learning":
break; kind = tr.statisticsCountsLearningCards();
case "young": break;
kind = tr.statisticsCountsYoungCards(); case "young":
break; kind = tr.statisticsCountsYoungCards();
case "mature": break;
default: case "mature":
kind = tr.statisticsCountsMatureCards(); default:
break; kind = tr.statisticsCountsMatureCards();
} break;
return `${kind} \u200e(${totalCorrect(d).percent}%)`; }
}) as any) return `${kind} \u200e(${totalCorrect(d).percent}%)`;
.tickSizeOuter(0) }) as any)
.tickSizeOuter(0)
)
) )
); .attr("direction", "ltr");
const xButton = scaleBand() const xButton = scaleBand()
.domain(["1", "2", "3", "4"]) .domain(["1", "2", "3", "4"])
@ -189,13 +191,15 @@ export function renderButtons(
const y = scaleLinear() const y = scaleLinear()
.range([bounds.height - bounds.marginBottom, bounds.marginTop]) .range([bounds.height - bounds.marginBottom, bounds.marginTop])
.domain([0, yMax]); .domain([0, yMax]);
svg.select<SVGGElement>(".y-ticks").call((selection) => svg.select<SVGGElement>(".y-ticks")
selection.transition(trans).call( .call((selection) =>
axisLeft(y) selection.transition(trans).call(
.ticks(bounds.height / 50) axisLeft(y)
.tickSizeOuter(0) .ticks(bounds.height / 50)
.tickSizeOuter(0)
)
) )
); .attr("direction", "ltr");
// x bars // x bars

1
ts/graphs/calendar.ts
View file

@ -190,6 +190,7 @@ export function renderCalendar(
.attr("text-anchor", "end") .attr("text-anchor", "end")
.attr("font-size", "small") .attr("font-size", "small")
.attr("font-family", "monospace") .attr("font-family", "monospace")
.attr("direction", "ltr")
.style("user-select", "none") .style("user-select", "none")
.on("click", null) .on("click", null)
.filter((d: number) => .filter((d: number) =>

44
ts/graphs/histogram-graph.ts
View file

@ -58,14 +58,16 @@ export function histogramGraph(
const binValue = data.binValue ?? ((bin: any): number => bin.length as number); const binValue = data.binValue ?? ((bin: any): number => bin.length as number);
const x = data.scale.range([bounds.marginLeft, bounds.width - bounds.marginRight]); const x = data.scale.range([bounds.marginLeft, bounds.width - bounds.marginRight]);
svg.select<SVGGElement>(".x-ticks").call((selection) => svg.select<SVGGElement>(".x-ticks")
selection.transition(trans).call( .call((selection) =>
axisBottom(x) selection.transition(trans).call(
.ticks(7) axisBottom(x)
.tickSizeOuter(0) .ticks(7)
.tickFormat((data.xTickFormat ?? null) as any) .tickSizeOuter(0)
.tickFormat((data.xTickFormat ?? null) as any)
)
) )
); .attr("direction", "ltr");
// y scale // y scale
@ -74,13 +76,15 @@ export function histogramGraph(
.range([bounds.height - bounds.marginBottom, bounds.marginTop]) .range([bounds.height - bounds.marginBottom, bounds.marginTop])
.domain([0, yMax]) .domain([0, yMax])
.nice(); .nice();
svg.select<SVGGElement>(".y-ticks").call((selection) => svg.select<SVGGElement>(".y-ticks")
selection.transition(trans).call( .call((selection) =>
axisLeft(y) selection.transition(trans).call(
.ticks(bounds.height / 50) axisLeft(y)
.tickSizeOuter(0) .ticks(bounds.height / 50)
.tickSizeOuter(0)
)
) )
); .attr("direction", "ltr");
// x bars // x bars
@ -126,13 +130,15 @@ export function histogramGraph(
const yAreaScale = y.copy().domain([0, data.total]).nice(); const yAreaScale = y.copy().domain([0, data.total]).nice();
if (data.showArea && data.bins.length && areaData.slice(-1)[0]) { if (data.showArea && data.bins.length && areaData.slice(-1)[0]) {
svg.select<SVGGElement>(".y2-ticks").call((selection) => svg.select<SVGGElement>(".y2-ticks")
selection.transition(trans).call( .call((selection) =>
axisRight(yAreaScale) selection.transition(trans).call(
.ticks(bounds.height / 50) axisRight(yAreaScale)
.tickSizeOuter(0) .ticks(bounds.height / 50)
.tickSizeOuter(0)
)
) )
); .attr("direction", "ltr");
svg.select("path.area") svg.select("path.area")
.datum(areaData as any) .datum(areaData as any)

33
ts/graphs/hours.ts
View file

@ -101,7 +101,8 @@ export function renderHours(
) )
.selectAll(".tick") .selectAll(".tick")
.selectAll("text") .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 cappedRange = scaleLinear().range([0.1, 0.8]);
const colour = scaleSequential((n) => interpolateBlues(cappedRange(n)!)).domain([ const colour = scaleSequential((n) => interpolateBlues(cappedRange(n)!)).domain([
@ -115,13 +116,15 @@ export function renderHours(
.range([bounds.height - bounds.marginBottom, bounds.marginTop]) .range([bounds.height - bounds.marginBottom, bounds.marginTop])
.domain([0, yMax]) .domain([0, yMax])
.nice(); .nice();
svg.select<SVGGElement>(".y-ticks").call((selection) => svg.select<SVGGElement>(".y-ticks")
selection.transition(trans).call( .call((selection) =>
axisLeft(y) selection.transition(trans).call(
.ticks(bounds.height / 50) axisLeft(y)
.tickSizeOuter(0) .ticks(bounds.height / 50)
.tickSizeOuter(0)
)
) )
); .attr("direction", "ltr");
const yArea = y.copy().domain([0, 1]); const yArea = y.copy().domain([0, 1]);
@ -157,14 +160,16 @@ export function renderHours(
) )
); );
svg.select<SVGGElement>(".y2-ticks").call((selection) => svg.select<SVGGElement>(".y2-ticks")
selection.transition(trans).call( .call((selection) =>
axisRight(yArea) selection.transition(trans).call(
.ticks(bounds.height / 50) axisRight(yArea)
.tickFormat((n: any) => `${Math.round(n * 100)}%`) .ticks(bounds.height / 50)
.tickSizeOuter(0) .tickFormat((n: any) => `${Math.round(n * 100)}%`)
.tickSizeOuter(0)
)
) )
); .attr("direction", "ltr");
svg.select("path.cumulative-overlay") svg.select("path.cumulative-overlay")
.datum(data) .datum(data)

40
ts/graphs/reviews.ts
View file

@ -167,9 +167,11 @@ export function renderReviews(
} }
x.range([bounds.marginLeft, bounds.width - bounds.marginRight]); x.range([bounds.marginLeft, bounds.width - bounds.marginRight]);
svg.select<SVGGElement>(".x-ticks").call((selection) => svg.select<SVGGElement>(".x-ticks")
selection.transition(trans).call(axisBottom(x).ticks(7).tickSizeOuter(0)) .call((selection) =>
); selection.transition(trans).call(axisBottom(x).ticks(7).tickSizeOuter(0))
)
.attr("direction", "ltr");
// y scale // y scale
@ -190,14 +192,16 @@ export function renderReviews(
.range([bounds.height - bounds.marginBottom, bounds.marginTop]) .range([bounds.height - bounds.marginBottom, bounds.marginTop])
.domain([0, yMax]) .domain([0, yMax])
.nice(); .nice();
svg.select<SVGGElement>(".y-ticks").call((selection) => svg.select<SVGGElement>(".y-ticks")
selection.transition(trans).call( .call((selection) =>
axisLeft(y) selection.transition(trans).call(
.ticks(bounds.height / 50) axisLeft(y)
.tickSizeOuter(0) .ticks(bounds.height / 50)
.tickFormat(yTickFormat as any) .tickSizeOuter(0)
.tickFormat(yTickFormat as any)
)
) )
); .attr("direction", "ltr");
// x bars // x bars
@ -307,14 +311,16 @@ export function renderReviews(
const yAreaScale = y.copy().domain([0, yCumMax]).nice(); const yAreaScale = y.copy().domain([0, yCumMax]).nice();
if (yCumMax) { if (yCumMax) {
svg.select<SVGGElement>(".y2-ticks").call((selection) => svg.select<SVGGElement>(".y2-ticks")
selection.transition(trans).call( .call((selection) =>
axisRight(yAreaScale) selection.transition(trans).call(
.ticks(bounds.height / 50) axisRight(yAreaScale)
.tickFormat(yTickFormat as any) .ticks(bounds.height / 50)
.tickSizeOuter(0) .tickFormat(yTickFormat as any)
.tickSizeOuter(0)
)
) )
); .attr("direction", "ltr");
svg.select("path.cumulative-overlay") svg.select("path.cumulative-overlay")
.datum(areaData as any) .datum(areaData as any)