GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 14:32:22 -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-hours-title = Hourly Breakdown
statistics-added-title = Added statistics-added-title = Added
statistics-card-ease-title = Card Ease statistics-card-ease-title = Card Ease
statistics-axis-label-answer-count = Answers statistics-future-due-subtitle = The number of reviews due in the future.
statistics-axis-label-card-count = Cards statistics-added-subtitle = The number of new cards you have added.
statistics-axis-label-review-time = Review Time 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 month3 = timeSpan(i18n, 3 * MONTH);
const year = timeSpan(i18n, 1 * YEAR); const year = timeSpan(i18n, 1 * YEAR);
const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_TIME); 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> </script>
{#if histogramData} {#if histogramData}
@ -53,6 +53,8 @@
</label> </label>
</div> </div>
<HistogramGraph data={histogramData} xText="Days" {yText} {i18n} /> <div class="subtitle">{subtitle}</div>
<HistogramGraph data={histogramData} />
</div> </div>
{/if} {/if}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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