reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 22:19:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix after update

Browse Source
This commit is contained in:
Nathan Bierema 2022-12-28 14:46:32 -05:00
parent c7e833126a
commit 69a7446998
1 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/d3tooltip/src/index.ts
View File

@ -1,27 +1,42 @@
import d3Package, { Primitive, Selection } from 'd3';
import d3Package, {
BaseType,
ContainerElement,
Primitive,
Selection,
} from 'd3';
import { is } from 'ramda';
import utils from './utils';
const { prependClass, functor } = utils;
interface Options<Datum> {
interface Options<
GElement extends ContainerElement,
Datum,
PElement extends BaseType,
PDatum
> {
left: number | undefined;
top: number | undefined;
offset: {
left: number;
top: number;
};
root: Selection<Datum> | undefined;
root: Selection<GElement, Datum, PElement, PDatum> | undefined;
}
const defaultOptions: Options<unknown> = {
const defaultOptions: Options<ContainerElement, unknown, BaseType, unknown> = {
left: undefined, // mouseX
top: undefined, // mouseY
offset: { left: 0, top: 0 },
root: undefined,
};
interface Tip<Datum> {
(selection: Selection<Datum>): void;
interface Tip<
GElement extends ContainerElement,
Datum,
PElement extends BaseType,
PDatum
> {
(selection: Selection<GElement, Datum, PElement, PDatum>): void;
attr: (
this: this,
d:
@ -49,15 +64,20 @@ interface Tip<Datum> {
) => this;
}
export function tooltip<Datum>(
export function tooltip<
GElement extends ContainerElement,
Datum,
PElement extends BaseType,
PDatum
>(
d3: typeof d3Package,
className = 'tooltip',
options: Partial<Options<Datum>> = {}
): Tip<Datum> {
options: Partial<Options<GElement, Datum, PElement, PDatum>> = {}
): Tip<GElement, Datum, PElement, PDatum> {
const { left, top, offset, root } = {
...defaultOptions,
...options,
} as Options<Datum>;
} as Options<GElement, Datum, PElement, PDatum>;
let attrs = { class: className };
let text: (datum: Datum, index?: number, outerIndex?: number) => string = (
@ -65,11 +85,12 @@ export function tooltip<Datum>(
) => '';
let styles = {};
let el: Selection<Datum>;
const anchor = root || d3.select('body');
const rootNode = anchor.node();
let el: Selection<GElement, Datum, PElement, PDatum>;
const anchor: Selection<GElement, Datum, PElement, PDatum> =
root || d3.select('body');
const rootNode = anchor.node()!;
function tip(selection: Selection<Datum>) {
function tip(selection: Selection<GElement, Datum, PElement, PDatum>) {
selection.on('mouseover.tip', (node) => {
const [mouseX, mouseY] = d3.mouse(rootNode);
const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
@ -86,7 +107,7 @@ export function tooltip<Datum>(
top: `${y}px`,
...styles,
})
.html(() => text(node)) as Selection<Datum>;
.html(() => text(node)) as Selection<GElement, Datum, PElement, PDatum>;
});
selection.on('mousemove.tip', (node) => {