From ccec529b11efa0dbf02c2d016ab5f76d3c50c272 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 2 Jan 2023 11:09:04 -0500 Subject: [PATCH] Simplify d3tooltip API --- .../src/charts/tree/tree.ts | 8 +- .../src/charts/tree/utils.ts | 6 +- packages/d3tooltip/package.json | 4 +- packages/d3tooltip/src/index.ts | 96 +++++++------------ packages/d3tooltip/src/utils/functor.ts | 20 ---- pnpm-lock.yaml | 4 - 6 files changed, 39 insertions(+), 99 deletions(-) delete mode 100644 packages/d3tooltip/src/utils/functor.ts diff --git a/packages/d3-state-visualizer/src/charts/tree/tree.ts b/packages/d3-state-visualizer/src/charts/tree/tree.ts index 4fb96e53..1ed892f5 100644 --- a/packages/d3-state-visualizer/src/charts/tree/tree.ts +++ b/packages/d3-state-visualizer/src/charts/tree/tree.ts @@ -354,9 +354,11 @@ export default function (DOMNode: HTMLElement, options: Partial = {}) { unknown, null, undefined - >('tooltip', { ...tooltipOptions, root }) - .text((d, i) => getTooltipString(d.data, i, tooltipOptions)) - .styles(tooltipOptions.styles) + >('tooltip', { + ...tooltipOptions, + root, + text: (d) => getTooltipString(d.data, tooltipOptions), + }) ); } diff --git a/packages/d3-state-visualizer/src/charts/tree/utils.ts b/packages/d3-state-visualizer/src/charts/tree/utils.ts index d5c48187..a20873ca 100644 --- a/packages/d3-state-visualizer/src/charts/tree/utils.ts +++ b/packages/d3-state-visualizer/src/charts/tree/utils.ts @@ -73,11 +73,7 @@ export function getNodeGroupByDepthCount(rootNode: InternalNode) { return nodeGroupByDepthCount; } -export function getTooltipString( - node: InternalNode, - i: number | undefined, - { indentationSize = 4 } -) { +export function getTooltipString(node: InternalNode, { indentationSize = 4 }) { if (!is(Object, node)) return ''; const spacer = join('  '); diff --git a/packages/d3tooltip/package.json b/packages/d3tooltip/package.json index 3422a960..e5182e2f 100644 --- a/packages/d3tooltip/package.json +++ b/packages/d3tooltip/package.json @@ -36,8 +36,7 @@ "prepublish": "pnpm run type-check && pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.20.6", - "ramda": "^0.28.0" + "@babel/runtime": "^7.20.6" }, "devDependencies": { "@babel/cli": "^7.19.3", @@ -46,7 +45,6 @@ "@babel/preset-env": "^7.20.2", "@babel/preset-typescript": "^7.18.6", "@types/d3": "^4.13.12", - "@types/ramda": "^0.28.20", "@typescript-eslint/eslint-plugin": "^5.47.0", "@typescript-eslint/parser": "^5.47.0", "d3": "^4.13.0", diff --git a/packages/d3tooltip/src/index.ts b/packages/d3tooltip/src/index.ts index 8c3c5df0..998407e0 100644 --- a/packages/d3tooltip/src/index.ts +++ b/packages/d3tooltip/src/index.ts @@ -1,13 +1,14 @@ import * as d3 from 'd3'; import type { BaseType, ContainerElement, Selection } from 'd3'; -import { is } from 'ramda'; -import functor from './utils/functor'; + +export type StyleValue = string | number | boolean; interface Options< - GElement extends ContainerElement, Datum, - PElement extends BaseType, - PDatum + RootGElement extends ContainerElement, + RootDatum, + RootPElement extends BaseType, + RootPDatum > { left: number | undefined; top: number | undefined; @@ -15,37 +16,26 @@ interface Options< left: number; top: number; }; - root: Selection | undefined; + root: + | Selection + | undefined; + styles?: { [key: string]: StyleValue }; + text?: string | ((datum: Datum) => string); } -const defaultOptions: Options = { +const defaultOptions: Options< + unknown, + ContainerElement, + unknown, + BaseType, + unknown +> = { left: undefined, // mouseX top: undefined, // mouseY offset: { left: 0, top: 0 }, root: undefined, }; -export type StyleValue = string | number | boolean; - -interface Tip< - GElement extends BaseType, - Datum, - PElement extends BaseType, - PDatum -> { - (selection: Selection): void; - styles: ( - this: this, - value: { [key: string]: StyleValue } | undefined - ) => this; - text: ( - this: this, - value: - | string - | ((datum: Datum, index?: number, outerIndex?: number) => string) - ) => this; -} - export function tooltip< GElement extends BaseType, Datum, @@ -58,20 +48,20 @@ export function tooltip< >( className = 'tooltip', options: Partial< - Options + Options > = {} -): Tip { - const { left, top, offset, root } = { +) { + const { + left, + top, + offset, + root, + styles = {}, + text = '', + } = { ...defaultOptions, ...options, - } as Options; - - let text: ( - datum: Datum, - index?: number, - outerIndex?: number - ) => string = () => ''; - let styles: { [key: string]: StyleValue } = {}; + } as Options; let el: Selection; const anchor: Selection< @@ -82,7 +72,7 @@ export function tooltip< > = root || d3.select('body'); const rootNode = anchor.node()!; - function tip(selection: Selection) { + return function tip(selection: Selection) { selection.on('mouseover.tip', (node) => { const [mouseX, mouseY] = d3.mouse(rootNode); const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top]; @@ -96,7 +86,7 @@ export function tooltip< .style('z-index', 1001) .style('left', `${x}px`) .style('top', `${y}px`) - .html(() => text(node)); + .html(typeof text === 'function' ? () => text(node) : () => text); for (const [key, value] of Object.entries(styles)) { el.style(key, value); @@ -109,31 +99,9 @@ export function tooltip< el.style('left', `${x}px`) .style('top', `${y}px`) - .html(() => text(node)); + .html(typeof text === 'function' ? () => text(node) : () => text); }); selection.on('mouseout.tip', () => el.remove()); - } - - tip.styles = function setStyles( - this: typeof tip, - value: { [key: string]: StyleValue } | undefined - ) { - if (is(Object, value)) { - styles = { ...styles, ...value }; - } - return this; }; - - tip.text = function setText( - this: typeof tip, - value: - | string - | ((datum: Datum, index?: number, outerIndex?: number) => string) - ) { - text = functor(value); - return this; - }; - - return tip; } diff --git a/packages/d3tooltip/src/utils/functor.ts b/packages/d3tooltip/src/utils/functor.ts deleted file mode 100644 index 9ed7427b..00000000 --- a/packages/d3tooltip/src/utils/functor.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { is } from 'ramda'; -import { Primitive } from 'd3'; - -export default function functor( - v: string | ((datum: Datum, index?: number, outerIndex?: number) => string) -): (datum: Datum, index?: number, outerIndex?: number) => string; -export default function functor( - v: - | Primitive - | ((datum: Datum, index: number, outerIndex?: number) => Primitive) -): (datum: Datum, index?: number, outerIndex?: number) => Primitive; -export default function functor( - v: - | Primitive - | ((datum: Datum, index: number, outerIndex?: number) => Primitive) -): (datum: Datum, index: number, outerIndex?: number) => Primitive { - return is(Function, v) - ? (v as (datum: Datum, index: number, outerIndex?: number) => Primitive) - : () => v; -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 08f3e6e9..700836f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -265,18 +265,15 @@ importers: '@babel/preset-typescript': ^7.18.6 '@babel/runtime': ^7.20.6 '@types/d3': ^4.13.12 - '@types/ramda': ^0.28.20 '@typescript-eslint/eslint-plugin': ^5.47.0 '@typescript-eslint/parser': ^5.47.0 d3: ^4.13.0 eslint: ^8.30.0 eslint-config-prettier: ^8.5.0 - ramda: ^0.28.0 rimraf: ^3.0.2 typescript: ~4.9.4 dependencies: '@babel/runtime': 7.20.6 - ramda: 0.28.0 devDependencies: '@babel/cli': 7.19.3_@babel+core@7.20.5 '@babel/core': 7.20.5 @@ -284,7 +281,6 @@ importers: '@babel/preset-env': 7.20.2_@babel+core@7.20.5 '@babel/preset-typescript': 7.18.6_@babel+core@7.20.5 '@types/d3': 4.13.12 - '@types/ramda': 0.28.20 '@typescript-eslint/eslint-plugin': 5.47.0_ncmi6noazr3nzas7jxykisekym '@typescript-eslint/parser': 5.47.0_lzzuuodtsqwxnvqeq4g4likcqa d3: 4.13.0