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

Merge pull request #1036 from hgiesel/graphsaslib

Browse source 
Source graphs.js as library in the HTML head
This commit is contained in:
Damien Elmes 2021-02-23 17:35:07 +10:00 committed by GitHub
commit e99deedbd8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
ts/graphs/graphs.html
View file

@ -4,30 +4,31 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" id="viewport" content="width=device-width" /> <meta name="viewport" id="viewport" content="width=device-width" />
<link href="graphs.css" rel="stylesheet" /> <link href="graphs.css" rel="stylesheet" />
<script src="../js/vendor/protobuf.min.js"></script>
<script src="graphs.js"></script>
</head> </head>
<body> <body>
<div id="main"></div> <div id="main"></div>
<script>
anki.graphs(
document.getElementById("main"),
[
anki.TodayStats,
anki.FutureDue,
anki.CalendarGraph,
anki.ReviewsGraph,
anki.CardCounts,
anki.IntervalsGraph,
anki.EaseGraph,
anki.HourGraph,
anki.ButtonsGraph,
anki.AddedGraph,
],
{
controller: anki.RangeBox,
}
);
</script>
</body> </body>
<script src="../js/vendor/protobuf.min.js"></script>
<script src="graphs.js"></script>
<script>
anki.graphs(
document.getElementById("main"),
[
anki.TodayStats,
anki.FutureDue,
anki.CalendarGraph,
anki.ReviewsGraph,
anki.CardCounts,
anki.IntervalsGraph,
anki.EaseGraph,
anki.HourGraph,
anki.ButtonsGraph,
anki.AddedGraph,
],
{
controller: anki.RangeBox,
}
);
</script>
</html> </html>

21
ts/graphs/tooltip.ts
View file

@ -3,11 +3,24 @@
import throttle from "lodash.throttle"; import throttle from "lodash.throttle";
const tooltipDiv: HTMLDivElement = document.createElement("div"); function getOrCreateTooltipDiv(): HTMLDivElement {
tooltipDiv.className = "graph-tooltip"; const existingTooltip = document.getElementById("graphTooltip") as HTMLDivElement;
document.body.appendChild(tooltipDiv);
if (existingTooltip) {
return existingTooltip;
}
const tooltipDiv: HTMLDivElement = document.createElement("div");
tooltipDiv.id = "graphTooltip";
tooltipDiv.className = "graph-tooltip";
document.body.appendChild(tooltipDiv);
return tooltipDiv;
}
function showTooltipInner(msg: string, x: number, y: number): void { function showTooltipInner(msg: string, x: number, y: number): void {
const tooltipDiv = getOrCreateTooltipDiv();
tooltipDiv.innerHTML = msg; tooltipDiv.innerHTML = msg;
// move tooltip away from edge as user approaches right side // move tooltip away from edge as user approaches right side
@ -26,6 +39,8 @@ function showTooltipInner(msg: string, x: number, y: number): void {
export const showTooltip = throttle(showTooltipInner, 16); export const showTooltip = throttle(showTooltipInner, 16);
export function hideTooltip(): void { export function hideTooltip(): void {
const tooltipDiv = getOrCreateTooltipDiv();
showTooltip.cancel(); showTooltip.cancel();
tooltipDiv.style.opacity = "0"; tooltipDiv.style.opacity = "0";
} }