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