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

move axis ticks & labels into separate files

Browse source
This commit is contained in:
Damien Elmes 2020-06-23 15:38:54 +10:00
parent 1d1ed5b241
commit 6f69472133
5 changed files with 38 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ts/src/html/graphs.html
View file

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" id="viewport" content="width=device-width" />
</head> </head>
<body> <body>
<div id="main"></div> <div id="main"></div>

17
ts/src/stats/AxisLabels.svelte Normal file
View file

@ -0,0 +1,17 @@
<script lang="typescript">
import { GraphBounds } from "./graphs";
export let bounds: GraphBounds;
export let xText: string;
export let yText: string;
</script>
<text
class="axis-label"
transform={`translate(${bounds.width / 2}, ${bounds.height - 5})`}>
{xText}
</text>
<text
class="axis-label y-axis-label"
transform={`translate(${bounds.marginLeft / 3}, ${(bounds.height - bounds.marginBottom) / 2 + bounds.marginTop}) rotate(-180)`}>
{yText}
</text>

9
ts/src/stats/AxisTicks.svelte Normal file
View file

@ -0,0 +1,9 @@
<script lang="typescript">
import { GraphBounds } from "./graphs";
export let bounds: GraphBounds;
</script>
<g
class="x-ticks no-domain-line"
transform={`translate(0,${bounds.height - bounds.marginBottom})`} />
<g class="y-ticks no-domain-line" transform={`translate(${bounds.marginLeft}, 0)`} />

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

@ -1,15 +1,16 @@
<script lang="typescript"> <script lang="typescript">
import { defaultGraphBounds } from "./graphs"; import AxisLabels from "./AxisLabels.svelte";
import AxisTicks from "./AxisTicks.svelte";
import { defaultGraphBounds } from "./graphs";
import { gatherIntervalData, intervalGraph, IntervalRange } from "./intervals"; import { gatherIntervalData, intervalGraph, IntervalRange } from "./intervals";
import type { IntervalGraphData } from "./intervals"; import type { IntervalGraphData } from "./intervals";
import { onMount } from "svelte";
import pb from "../backend/proto"; import pb from "../backend/proto";
const bounds = defaultGraphBounds();
export let data: pb.BackendProto.GraphsOut | null = null; export let data: pb.BackendProto.GraphsOut | null = null;
const bounds = defaultGraphBounds();
let svg = null as HTMLElement | SVGElement | null; let svg = null as HTMLElement | SVGElement | null;
let range = IntervalRange.Percentile95; let range = IntervalRange.Percentile95;
@ -57,21 +58,7 @@
<g class="bars" /> <g class="bars" />
<g class="hoverzone" /> <g class="hoverzone" />
<path class="area" /> <path class="area" />
<g <AxisTicks {bounds} />
class="x-ticks no-domain-line" <AxisLabels {bounds} xText="Interval (days)" yText="Number of cards" />
transform={`translate(0,${bounds.height - bounds.marginBottom})`} />
<g
class="y-ticks no-domain-line"
transform={`translate(${bounds.marginLeft}, 0)`} />
<text
class="axis-label"
transform={`translate(${bounds.width / 2}, ${bounds.height - 5})`}>
Interval (days)
</text>
<text
class="axis-label y-axis-label"
transform={`translate(${bounds.marginLeft / 3}, ${(bounds.height - bounds.marginBottom) / 2 + bounds.marginTop}) rotate(-180)`}>
Number of cards
</text>
</svg> </svg>
</div> </div>

6
ts/src/stats/intervals.ts
View file

@ -134,8 +134,10 @@ export function intervalGraph(
// cumulative area // cumulative area
const areaData = cumsum(data.map((d) => d.length)); const areaCounts = data.map((d) => d.length);
const xAreaScale = x.copy().domain([0, areaData.length]); areaCounts.unshift(0);
const areaData = cumsum(areaCounts);
const xAreaScale = x.copy().domain([0, areaData.length - 1]);
const yAreaScale = y.copy().domain([0, allIntervals.length]); const yAreaScale = y.copy().domain([0, allIntervals.length]);
svg.select("path.area") svg.select("path.area")