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

Fix graph tooltips

Browse source
This commit is contained in:
Abdo 2024-08-14 15:34:24 +03:00
parent add1248cd8
commit 887aa1c8b7
6 changed files with 28 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/routes/graphs/buttons.ts
View file

@ -23,7 +23,7 @@ import {
import type { GraphBounds } from "./graph-helpers"; import type { GraphBounds } from "./graph-helpers";
import { GraphRange } from "./graph-helpers"; import { GraphRange } from "./graph-helpers";
import { setDataAvailable } from "./graph-helpers"; import { setDataAvailable } from "./graph-helpers";
import { hideTooltip, showTooltip } from "./tooltip"; import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
/** 4 element array */ /** 4 element array */
type ButtonCounts = number[]; type ButtonCounts = number[];

2
ts/routes/graphs/calendar.ts
View file

@ -25,7 +25,7 @@ import {
import type { GraphBounds, SearchDispatch } from "./graph-helpers"; import type { GraphBounds, SearchDispatch } from "./graph-helpers";
import { RevlogRange, setDataAvailable } from "./graph-helpers"; import { RevlogRange, setDataAvailable } from "./graph-helpers";
import { clickableClass } from "./graph-styles"; import { clickableClass } from "./graph-styles";
import { hideTooltip, showTooltip } from "./tooltip"; import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
export interface GraphData { export interface GraphData {
// indexed by day, where day is relative to today // indexed by day, where day is relative to today

2
ts/routes/graphs/histogram-graph.ts
View file

@ -12,7 +12,7 @@ import { area, axisBottom, axisLeft, axisRight, cumsum, curveBasis, max, pointer
import type { GraphBounds } from "./graph-helpers"; import type { GraphBounds } from "./graph-helpers";
import { setDataAvailable } from "./graph-helpers"; import { setDataAvailable } from "./graph-helpers";
import { clickableClass } from "./graph-styles"; import { clickableClass } from "./graph-styles";
import { hideTooltip, showTooltip } from "./tooltip"; import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
export interface HistogramData { export interface HistogramData {
scale: ScaleLinear<number, number>; scale: ScaleLinear<number, number>;

2
ts/routes/graphs/hours.ts
View file

@ -26,7 +26,7 @@ import {
import type { GraphBounds } from "./graph-helpers"; import type { GraphBounds } from "./graph-helpers";
import { GraphRange, setDataAvailable } from "./graph-helpers"; import { GraphRange, setDataAvailable } from "./graph-helpers";
import { oddTickClass } from "./graph-styles"; import { oddTickClass } from "./graph-styles";
import { hideTooltip, showTooltip } from "./tooltip"; import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
interface Hour { interface Hour {
hour: number; hour: number;

2
ts/routes/graphs/reviews.ts
View file

@ -33,7 +33,7 @@ import {
import type { GraphBounds, TableDatum } from "./graph-helpers"; import type { GraphBounds, TableDatum } from "./graph-helpers";
import { GraphRange, numericMap, setDataAvailable } from "./graph-helpers"; import { GraphRange, numericMap, setDataAvailable } from "./graph-helpers";
import { hideTooltip, showTooltip } from "./tooltip"; import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
interface Reviews { interface Reviews {
learn: number; learn: number;

33
ts/routes/graphs/tooltip.ts → ts/routes/graphs/tooltip-utils.svelte.ts
View file

@ -3,33 +3,46 @@
import type { DebouncedFunc } from "lodash-es"; import type { DebouncedFunc } from "lodash-es";
import { throttle } from "lodash-es"; import { throttle } from "lodash-es";
import { mount } from "svelte";
import Tooltip from "./Tooltip.svelte"; import Tooltip from "./Tooltip.svelte";
let tooltip: Tooltip | null = null; type TooltipProps = {
html: string;
x: number;
y: number;
show: boolean;
};
let tooltip: Record<string, any> | null = null;
let props: TooltipProps = { html: "", x: 0, y: 0, show: false };
function getOrCreateTooltip(): Tooltip { function getOrCreateTooltip(): TooltipProps {
if (tooltip) { if (tooltip) {
return tooltip; return props;
} }
const target = document.createElement("div"); const target = document.createElement("div");
tooltip = new Tooltip({ target }); const p = $state(props);
props = p;
tooltip = mount(Tooltip, { target, props });
document.body.appendChild(target); document.body.appendChild(target);
return tooltip; return props;
} }
function showTooltipInner(msg: string, x: number, y: number): void { function showTooltipInner(msg: string, x: number, y: number): void {
const tooltip = getOrCreateTooltip(); const props = getOrCreateTooltip();
props.html = msg;
tooltip.$set({ html: msg, x, y, show: true }); props.x = x;
props.y = y;
props.show = true;
} }
export const showTooltip: DebouncedFunc<(msg: string, x: number, y: number) => void> = throttle(showTooltipInner, 16); export const showTooltip: DebouncedFunc<(msg: string, x: number, y: number) => void> = throttle(showTooltipInner, 16);
export function hideTooltip(): void { export function hideTooltip(): void {
const tooltip = getOrCreateTooltip(); const props = getOrCreateTooltip();
showTooltip.cancel(); showTooltip.cancel();
tooltip.$set({ show: false }); props.show = false;
} }