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

drop axis labels + add subtitles

Browse source 
This leaves more room for the graphs and avoids issues with large values
overlapping the labels. We can improve the subtitle wording to make
things clearer in the future, and the hover tooltips should also
clarify what the axes represent.
This commit is contained in:
Damien Elmes 2020-06-28 17:44:51 +10:00
parent 7e0bdb990c
commit 93b8cebf1e
11 changed files with 40 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
rslib/ftl/statistics.ftl
View file

@ -95,6 +95,10 @@ statistics-answer-buttons-title = Answer Buttons
statistics-hours-title = Hourly Breakdown
statistics-added-title = Added
statistics-card-ease-title = Card Ease
statistics-axis-label-answer-count = Answers
statistics-axis-label-card-count = Cards
statistics-axis-label-review-time = Review Time
statistics-future-due-subtitle = The number of reviews due in the future.
statistics-added-subtitle = The number of new cards you have added.
statistics-reviews-count-subtitle = The number of questions you have answered.
statistics-reviews-time-subtitle = The time taken to answer the questions.
statistics-intervals-subtitle = Delays until reviews are shown again.
statistics-answer-buttons-subtitle = The number of times you have pressed each button.
statistics-hours-subtitle = Review success rate for each hour of the day.

6
ts/src/stats/AddedGraph.svelte
View file

@ -27,7 +27,7 @@
const month3 = timeSpan(i18n, 3 * MONTH);
const year = timeSpan(i18n, 1 * YEAR);
const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_TIME);
const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_CARD_COUNT);
const subtitle = i18n.tr(i18n.TR.STATISTICS_ADDED_SUBTITLE);
</script>
{#if histogramData}
@ -53,6 +53,8 @@
</label>
</div>
<HistogramGraph data={histogramData} xText="Days" {yText} {i18n} />
<div class="subtitle">{subtitle}</div>
<HistogramGraph data={histogramData} />
</div>
{/if}

6
ts/src/stats/ButtonsGraph.svelte
View file

@ -10,7 +10,6 @@
export let i18n: I18n;
const bounds = defaultGraphBounds();
const xText = "";
let svg = null as HTMLElement | SVGElement | null;
@ -19,16 +18,17 @@
}
const title = i18n.tr(i18n.TR.STATISTICS_ANSWER_BUTTONS_TITLE);
const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_ANSWER_COUNT);
const subtitle = i18n.tr(i18n.TR.STATISTICS_ANSWER_BUTTONS_SUBTITLE);
</script>
<div class="graph">
<h1>{title}</h1>
<div class="subtitle">{subtitle}</div>
<svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
<g class="bars" />
<g class="hoverzone" />
<AxisTicks {bounds} />
<AxisLabels {bounds} {xText} {yText} {i18n} />
</svg>
</div>

6
ts/src/stats/EaseGraph.svelte
View file

@ -16,13 +16,15 @@
}
const title = i18n.tr(i18n.TR.STATISTICS_CARD_EASE_TITLE);
const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_CARD_COUNT);
const subtitle = "temp"; //i18n.tr(i18n.TR.STATISTICS_EASE_SUBTITLE);
</script>
{#if histogramData}
<div class="graph">
<h1>{title}</h1>
<HistogramGraph data={histogramData} xText="Ease (%)" {yText} {i18n} />
<div class="subtitle">{subtitle}</div>
<HistogramGraph data={histogramData} />
</div>
{/if}

10
ts/src/stats/FutureDue.svelte
View file

@ -35,7 +35,7 @@
const month3 = timeSpan(i18n, 3 * MONTH);
const year = timeSpan(i18n, 1 * YEAR);
const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_TIME);
const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_CARD_COUNT);
const subtitle = i18n.tr(i18n.TR.STATISTICS_FUTURE_DUE_SUBTITLE);
</script>
{#if histogramData}
@ -43,10 +43,6 @@
<div class="graph">
<h1>{title}</h1>
<div class="range-box-inner">
The number of cards studied each day, relative to today.
</div>
<div class="range-box-inner">
<label>
<input type="radio" bind:group={range} value={FutureDueRange.Month} />
@ -66,7 +62,9 @@
</label>
</div>
<HistogramGraph data={histogramData} xText="" {yText} {i18n} />
<div class="subtitle">{subtitle}</div>
<HistogramGraph data={histogramData} />
</div>
{/if}

5
ts/src/stats/HistogramGraph.svelte
View file

@ -3,12 +3,8 @@
import AxisLabels from "./AxisLabels.svelte";
import AxisTicks from "./AxisTicks.svelte";
import { defaultGraphBounds } from "./graphs";
import { I18n } from "../i18n";
export let data: HistogramData | null = null;
export let i18n: I18n;
export let xText: string;
export let yText: string;
let bounds = defaultGraphBounds();
let svg = null as HTMLElement | SVGElement | null;
@ -23,5 +19,4 @@
<g class="hoverzone" />
<path class="area" />
<AxisTicks {bounds} />
<AxisLabels {bounds} {xText} {yText} {i18n} />
</svg>

6
ts/src/stats/HourGraph.svelte
View file

@ -10,7 +10,6 @@
export let i18n: I18n;
const bounds = defaultGraphBounds();
const xText = "";
let svg = null as HTMLElement | SVGElement | null;
@ -19,17 +18,18 @@
}
const title = i18n.tr(i18n.TR.STATISTICS_HOURS_TITLE);
const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_ANSWER_COUNT);
const subtitle = i18n.tr(i18n.TR.STATISTICS_HOURS_SUBTITLE);
</script>
<div class="graph">
<h1>{title}</h1>
<div class="subtitle">{subtitle}</div>
<svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
<g class="bars" />
<path class="area" />
<g class="hoverzone" />
<AxisTicks {bounds} />
<AxisLabels {bounds} {xText} {yText} {i18n} />
</svg>
</div>

6
ts/src/stats/IntervalsGraph.svelte
View file

@ -31,7 +31,7 @@
const title = i18n.tr(i18n.TR.STATISTICS_INTERVALS_TITLE);
const month = timeSpan(i18n, 1 * MONTH);
const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_TIME);
const yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_CARD_COUNT);
const subtitle = i18n.tr(i18n.TR.STATISTICS_INTERVALS_SUBTITLE);
</script>
{#if histogramData}
@ -70,6 +70,8 @@
</label>
</div>
<HistogramGraph data={histogramData} xText="Interval (days)" {yText} {i18n} />
<div class="subtitle">{subtitle}</div>
<HistogramGraph data={histogramData} />
</div>
{/if}

11
ts/src/stats/ReviewsGraph.svelte
View file

@ -31,8 +31,6 @@
break;
}
const xText = "";
$: if (sourceData) {
graphData = gatherData(sourceData);
}
@ -47,11 +45,11 @@
const year = timeSpan(i18n, 1 * YEAR);
const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_TIME);
let yText: string;
let subtitle: string;
$: if (showTime) {
yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_REVIEW_TIME);
subtitle = i18n.tr(i18n.TR.STATISTICS_REVIEWS_TIME_SUBTITLE);
} else {
yText = i18n.tr(i18n.TR.STATISTICS_AXIS_LABEL_ANSWER_COUNT);
subtitle = i18n.tr(i18n.TR.STATISTICS_REVIEWS_COUNT_SUBTITLE);
}
</script>
@ -86,6 +84,8 @@
{/if}
</div>
<div class="subtitle">{subtitle}</div>
<svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
{#each [4, 3, 2, 1, 0] as i}
<g class="bars{i}" />
@ -93,7 +93,6 @@
<path class="area" />
<g class="hoverzone" />
<AxisTicks {bounds} />
<AxisLabels {bounds} {xText} {yText} {i18n} />
</svg>
</div>

4
ts/src/stats/graphs.css
View file

@ -121,3 +121,7 @@
.legend-outer {
text-align: center;
}
.subtitle {
text-align: center;
}

4
ts/src/stats/graphs.ts
View file

@ -53,8 +53,8 @@ export function defaultGraphBounds(): GraphBounds {
return {
width: 600,
height: 250,
marginLeft: 100,
marginRight: 20,
marginLeft: 70,
marginRight: 30,
marginTop: 20,
marginBottom: 40,
};