i18n graph titles

This commit is contained in:
Damien Elmes 2020-06-28 14:21:31 +10:00
parent b78f578cd5
commit 595c509546
10 changed files with 37 additions and 13 deletions

View file

@ -88,3 +88,10 @@ statistics-range-all-time = deck life
statistics-range-deck = deck
statistics-range-collection = collection
statistics-range-search = Search
statistics-future-due-title = Future Due
statistics-reviews-title = Reviews
statistics-intervals-title = Review Intervals
statistics-answer-buttons-title = Answer Buttons
statistics-hours-title = Hourly Breakdown
statistics-added-title = Added
statistics-card-ease-title = Card Ease

View file

@ -24,6 +24,7 @@
histogramData = buildHistogram(addedData, range);
}
const title = i18n.tr(i18n.TR.STATISTICS_ADDED_TITLE);
const month = timeSpan(i18n, 1 * MONTH);
const month3 = timeSpan(i18n, 3 * MONTH);
const year = timeSpan(i18n, 1 * YEAR);
@ -32,7 +33,7 @@
{#if histogramData}
<div class="graph">
<h1>Added</h1>
<h1>{title}</h1>
<div class="range-box-inner">
<label>

View file

@ -4,8 +4,10 @@
import AxisLabels from "./AxisLabels.svelte";
import { gatherData, GraphData, renderButtons } from "./buttons";
import pb from "../backend/proto";
import { I18n } from "../i18n";
export let sourceData: pb.BackendProto.GraphsOut | null = null;
export let i18n: I18n;
const bounds = defaultGraphBounds();
const xText = "";
@ -17,10 +19,12 @@
console.log("gathering data");
renderButtons(svg as SVGElement, bounds, gatherData(sourceData));
}
const title = i18n.tr(i18n.TR.STATISTICS_ANSWER_BUTTONS_TITLE);
</script>
<div class="graph">
<h1>Answer Buttons</h1>
<h1>{title}</h1>
<svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
<g class="bars" />

View file

@ -3,8 +3,10 @@
import { gatherData, prepareData, GraphData } from "./ease";
import pb from "../backend/proto";
import HistogramGraph from "./HistogramGraph.svelte";
import { I18n } from "../i18n";
export let sourceData: pb.BackendProto.GraphsOut | null = null;
export let i18n: I18n;
let svg = null as HTMLElement | SVGElement | null;
let histogramData = null as HistogramData | null;
@ -13,11 +15,13 @@
console.log("gathering data");
histogramData = prepareData(gatherData(sourceData));
}
const title = i18n.tr(i18n.TR.STATISTICS_CARD_EASE_TITLE);
</script>
{#if histogramData}
<div class="graph">
<h1>Card Ease</h1>
<h1>{title}</h1>
<HistogramGraph data={histogramData} xText="Ease (%)" yText="Number of cards" />
</div>

View file

@ -32,6 +32,7 @@
histogramData = buildHistogram(graphData, range);
}
const title = i18n.tr(i18n.TR.STATISTICS_FUTURE_DUE_TITLE);
const month = timeSpan(i18n, 1 * MONTH);
const month3 = timeSpan(i18n, 3 * MONTH);
const year = timeSpan(i18n, 1 * YEAR);
@ -41,7 +42,7 @@
{#if histogramData}
<div class="graph">
<h1>Future Due</h1>
<h1>{title}</h1>
<div class="range-box-inner">
<label>

View file

@ -139,7 +139,7 @@
<FutureDue {sourceData} {i18n} />
<ReviewsGraph {sourceData} {revlogRange} {i18n} />
<IntervalsGraph {sourceData} {i18n} />
<EaseGraph {sourceData} />
<ButtonsGraph {sourceData} />
<HourGraph {sourceData} />
<EaseGraph {sourceData} {i18n} />
<ButtonsGraph {sourceData} {i18n} />
<HourGraph {sourceData} {i18n} />
<AddedGraph {sourceData} {i18n} />

View file

@ -4,8 +4,10 @@
import AxisLabels from "./AxisLabels.svelte";
import { gatherData, GraphData, renderHours } from "./hours";
import pb from "../backend/proto";
import { I18n } from "../i18n";
export let sourceData: pb.BackendProto.GraphsOut | null = null;
export let i18n: I18n;
const bounds = defaultGraphBounds();
const xText = "";
@ -17,10 +19,12 @@
console.log("gathering data");
renderHours(svg as SVGElement, bounds, gatherData(sourceData));
}
const title = i18n.tr(i18n.TR.STATISTICS_HOURS_TITLE);
</script>
<div class="graph">
<h1>Hours</h1>
<h1>{title}</h1>
<svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
<g class="bars" />

View file

@ -30,13 +30,14 @@
histogramData = prepareIntervalData(intervalData, range);
}
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);
</script>
{#if histogramData}
<div class="graph intervals">
<h1>Review Intervals</h1>
<h1>{title}</h1>
<div class="range-box-inner">
<label>

View file

@ -43,13 +43,14 @@
renderReviews(svg as SVGElement, bounds, graphData, range, showTime);
}
const title = i18n.tr(i18n.TR.STATISTICS_REVIEWS_TITLE);
const month = timeSpan(i18n, 1 * MONTH);
const month3 = timeSpan(i18n, 3 * MONTH);
const year = timeSpan(i18n, 1 * YEAR);
</script>
<div class="graph">
<h1>Reviews</h1>
<h1>{title}</h1>
<div class="range-box-inner">
<label>

View file

@ -96,9 +96,10 @@ export function buildHistogram(
.domain(x.domain() as any)
.thresholds(x.ticks(desiredBars))(data.entries() as any);
// start slightly darker
const shiftedMin = xMin! - Math.round((xMax - xMin!) / 10);
const colourScale = scaleSequential(interpolateGreens).domain([shiftedMin, xMax]);
const adjustedRange = scaleLinear().range([0.8, 0.3]);
const colourScale = scaleSequential((n) =>
interpolateGreens(adjustedRange(n))
).domain([xMin!, xMax]);
const total = sum(bins as any, binValue);