langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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()
.domain(["learning", "young", "mature"])
.range([bounds.marginLeft, bounds.width - bounds.marginRight]);
svg.select<SVGGElement>(".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<SVGGElement>(".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<SVGGElement>(".y-ticks").call((selection) =>
selection.transition(trans).call(
axisLeft(y)
.ticks(bounds.height / 50)
.tickSizeOuter(0)
svg.select<SVGGElement>(".y-ticks")
.call((selection) =>
selection.transition(trans).call(
axisLeft(y)
.ticks(bounds.height / 50)
.tickSizeOuter(0)
)
)
);
.attr("direction", "ltr");
// x bars

1
ts/graphs/calendar.ts
View File

@ -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) =>

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 x = data.scale.range([bounds.marginLeft, bounds.width - bounds.marginRight]);
svg.select<SVGGElement>(".x-ticks").call((selection) =>
selection.transition(trans).call(
axisBottom(x)
.ticks(7)
.tickSizeOuter(0)
.tickFormat((data.xTickFormat ?? null) as any)
svg.select<SVGGElement>(".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<SVGGElement>(".y-ticks").call((selection) =>
selection.transition(trans).call(
axisLeft(y)
.ticks(bounds.height / 50)
.tickSizeOuter(0)
svg.select<SVGGElement>(".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<SVGGElement>(".y2-ticks").call((selection) =>
selection.transition(trans).call(
axisRight(yAreaScale)
.ticks(bounds.height / 50)
.tickSizeOuter(0)
svg.select<SVGGElement>(".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)

33
ts/graphs/hours.ts
View File

@ -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<SVGGElement>(".y-ticks").call((selection) =>
selection.transition(trans).call(
axisLeft(y)
.ticks(bounds.height / 50)
.tickSizeOuter(0)
svg.select<SVGGElement>(".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<SVGGElement>(".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<SVGGElement>(".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)

40
ts/graphs/reviews.ts
View File

@ -167,9 +167,11 @@ export function renderReviews(
}
x.range([bounds.marginLeft, bounds.width - bounds.marginRight]);
svg.select<SVGGElement>(".x-ticks").call((selection) =>
selection.transition(trans).call(axisBottom(x).ticks(7).tickSizeOuter(0))
);
svg.select<SVGGElement>(".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<SVGGElement>(".y-ticks").call((selection) =>
selection.transition(trans).call(
axisLeft(y)
.ticks(bounds.height / 50)
.tickSizeOuter(0)
.tickFormat(yTickFormat as any)
svg.select<SVGGElement>(".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<SVGGElement>(".y2-ticks").call((selection) =>
selection.transition(trans).call(
axisRight(yAreaScale)
.ticks(bounds.height / 50)
.tickFormat(yTickFormat as any)
.tickSizeOuter(0)
svg.select<SVGGElement>(".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)