@unovis/ts 1.4.2-alpha.2 → 1.4.2-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/tooltip/config.d.ts +4 -0
- package/components/tooltip/config.js +2 -0
- package/components/tooltip/config.js.map +1 -1
- package/components/tooltip/index.d.ts +5 -0
- package/components/tooltip/index.js +61 -5
- package/components/tooltip/index.js.map +1 -1
- package/components/tooltip/style.js +6 -8
- package/components/tooltip/style.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,6 +5,10 @@ export interface TooltipConfigInterface {
|
|
|
5
5
|
components?: ComponentCore<unknown>[];
|
|
6
6
|
/** Container to where the Tooltip component should be inserted. Default: `undefined` */
|
|
7
7
|
container?: HTMLElement;
|
|
8
|
+
/** Follow the mouse cursor. Default: `true` */
|
|
9
|
+
followCursor?: boolean;
|
|
10
|
+
/** Allow the tooltip to hovered over and interacted with. Default: `true` */
|
|
11
|
+
allowHover?: boolean;
|
|
8
12
|
/** Horizontal placement of the tooltip. Default: `Position.Auto` */
|
|
9
13
|
horizontalPlacement?: Position | string | undefined;
|
|
10
14
|
/** Horizontal shift of the tooltip in pixels. Default: `0` */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/tooltip/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\nexport interface TooltipConfigInterface {\n /** An array of visualization components to interact with. Default: `[]` */\n components?: ComponentCore<unknown>[];\n /** Container to where the Tooltip component should be inserted. Default: `undefined` */\n container?: HTMLElement;\n /** Horizontal placement of the tooltip. Default: `Position.Auto` */\n horizontalPlacement?: Position | string | undefined;\n /** Horizontal shift of the tooltip in pixels. Default: `0` */\n horizontalShift?: number;\n /** Vertical placement of the tooltip. Default: `Position.Top` */\n verticalPlacement?: Position | string | undefined;\n /** Vertical shift of the tooltip in pixels. Default: `0` */\n verticalShift?: number;\n /** Defines the content of the tooltip and hovering over which elements should trigger it.\n * An object containing properties in the following format:\n *\n * ```\n * {\n * [selectorString]: (d: unknown) => string | HTMLElement\n * }\n * ```\n * e.g.:\n * ```\n * {\n * [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>\n * }\n * ```\n */\n triggers?: {\n [selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null) | undefined | null;\n };\n /** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance\n * by using a CSS selector. Attributes configuration object has the following structure:\n *\n * ```\n * {\n * [attributeName]: attribute value\n * }\n * ```\n * e.g.:\n * ```\n * {\n * 'type': 'area-tooltip',\n * 'value': 42\n * }\n * ```\n */\n attributes?: { [attr: string]: string | number | boolean };\n}\n\nexport const TooltipDefaultConfig: TooltipConfigInterface = {\n components: [],\n container: undefined,\n horizontalPlacement: Position.Auto,\n horizontalShift: 0,\n verticalPlacement: Position.Top,\n verticalShift: 0,\n attributes: {},\n triggers: {},\n}\n\n"],"names":[],"mappings":";;AAGA;
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/tooltip/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\nexport interface TooltipConfigInterface {\n /** An array of visualization components to interact with. Default: `[]` */\n components?: ComponentCore<unknown>[];\n /** Container to where the Tooltip component should be inserted. Default: `undefined` */\n container?: HTMLElement;\n /** Follow the mouse cursor. Default: `true` */\n followCursor?: boolean;\n /** Allow the tooltip to hovered over and interacted with. Default: `true` */\n allowHover?: boolean;\n /** Horizontal placement of the tooltip. Default: `Position.Auto` */\n horizontalPlacement?: Position | string | undefined;\n /** Horizontal shift of the tooltip in pixels. Default: `0` */\n horizontalShift?: number;\n /** Vertical placement of the tooltip. Default: `Position.Top` */\n verticalPlacement?: Position | string | undefined;\n /** Vertical shift of the tooltip in pixels. Default: `0` */\n verticalShift?: number;\n /** Defines the content of the tooltip and hovering over which elements should trigger it.\n * An object containing properties in the following format:\n *\n * ```\n * {\n * [selectorString]: (d: unknown) => string | HTMLElement\n * }\n * ```\n * e.g.:\n * ```\n * {\n * [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>\n * }\n * ```\n */\n triggers?: {\n [selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null) | undefined | null;\n };\n /** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance\n * by using a CSS selector. Attributes configuration object has the following structure:\n *\n * ```\n * {\n * [attributeName]: attribute value\n * }\n * ```\n * e.g.:\n * ```\n * {\n * 'type': 'area-tooltip',\n * 'value': 42\n * }\n * ```\n */\n attributes?: { [attr: string]: string | number | boolean };\n}\n\nexport const TooltipDefaultConfig: TooltipConfigInterface = {\n components: [],\n container: undefined,\n followCursor: true,\n allowHover: true,\n horizontalPlacement: Position.Auto,\n horizontalShift: 0,\n verticalPlacement: Position.Top,\n verticalShift: 0,\n attributes: {},\n triggers: {},\n}\n\n"],"names":[],"mappings":";;AAGA;AAyDa,MAAA,oBAAoB,GAA2B;AAC1D,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,SAAS,EAAE,SAAS;AACpB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,UAAU,EAAE,IAAI;IAChB,mBAAmB,EAAE,QAAQ,CAAC,IAAI;AAClC,IAAA,eAAe,EAAE,CAAC;IAClB,iBAAiB,EAAE,QAAQ,CAAC,GAAG;AAC/B,IAAA,aAAa,EAAE,CAAC;AAChB,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,QAAQ,EAAE,EAAE;;;;;"}
|
|
@@ -21,11 +21,15 @@ export declare class Tooltip {
|
|
|
21
21
|
hasContainer(): boolean;
|
|
22
22
|
setComponents(components: ComponentCore<unknown>[]): void;
|
|
23
23
|
update(): void;
|
|
24
|
+
/** Show the tooltip ny providing its content and position */
|
|
24
25
|
show(html: string | HTMLElement, pos: {
|
|
25
26
|
x: number;
|
|
26
27
|
y: number;
|
|
27
28
|
}): void;
|
|
29
|
+
/** Hide the tooltip */
|
|
28
30
|
hide(): void;
|
|
31
|
+
/** Simply displays the tooltip with its previous content on position */
|
|
32
|
+
display(): void;
|
|
29
33
|
place(pos: {
|
|
30
34
|
x: number;
|
|
31
35
|
y: number;
|
|
@@ -33,6 +37,7 @@ export declare class Tooltip {
|
|
|
33
37
|
isContainerBody(): boolean;
|
|
34
38
|
private _setContainerPosition;
|
|
35
39
|
private _setUpEvents;
|
|
40
|
+
private _getTooltipPosition;
|
|
36
41
|
private _setUpAttributes;
|
|
37
42
|
destroy(): void;
|
|
38
43
|
}
|
|
@@ -48,6 +48,7 @@ class Tooltip {
|
|
|
48
48
|
return;
|
|
49
49
|
this._setUpEventsThrottled();
|
|
50
50
|
}
|
|
51
|
+
/** Show the tooltip ny providing its content and position */
|
|
51
52
|
show(html, pos) {
|
|
52
53
|
if (html instanceof HTMLElement) {
|
|
53
54
|
const node = this.div.select(':first-child').node();
|
|
@@ -63,6 +64,7 @@ class Tooltip {
|
|
|
63
64
|
this._isShown = true;
|
|
64
65
|
this.place(pos);
|
|
65
66
|
}
|
|
67
|
+
/** Hide the tooltip */
|
|
66
68
|
hide() {
|
|
67
69
|
this.div.classed(show, false)
|
|
68
70
|
.on('transitionend', () => {
|
|
@@ -72,6 +74,13 @@ class Tooltip {
|
|
|
72
74
|
});
|
|
73
75
|
this._isShown = false;
|
|
74
76
|
}
|
|
77
|
+
/** Simply displays the tooltip with its previous content on position */
|
|
78
|
+
display() {
|
|
79
|
+
this.div
|
|
80
|
+
.classed(hidden, false)
|
|
81
|
+
.classed(show, true);
|
|
82
|
+
this._isShown = true;
|
|
83
|
+
}
|
|
75
84
|
place(pos) {
|
|
76
85
|
if (!this.hasContainer()) {
|
|
77
86
|
console.warn('Unovis | Tooltip: Container was not set or is not initialized yet');
|
|
@@ -130,8 +139,7 @@ class Tooltip {
|
|
|
130
139
|
}
|
|
131
140
|
}
|
|
132
141
|
_setUpEvents() {
|
|
133
|
-
const { config
|
|
134
|
-
const isContainerBody = this.isContainerBody();
|
|
142
|
+
const { config } = this;
|
|
135
143
|
// We use the Event Delegation pattern to set up Tooltip events
|
|
136
144
|
// Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check
|
|
137
145
|
// the `path` of the event and trigger corresponding callbacks
|
|
@@ -139,11 +147,10 @@ class Tooltip {
|
|
|
139
147
|
const selection = select(component.element);
|
|
140
148
|
selection
|
|
141
149
|
.on('mousemove.tooltip', (e) => {
|
|
142
|
-
const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container);
|
|
143
150
|
const path = (e.composedPath && e.composedPath()) || e.path || [e.target];
|
|
144
151
|
// Go through all of the configured triggers
|
|
145
|
-
for (const className of Object.keys(triggers)) {
|
|
146
|
-
const template = triggers[className];
|
|
152
|
+
for (const className of Object.keys(config.triggers)) {
|
|
153
|
+
const template = config.triggers[className];
|
|
147
154
|
if (!template)
|
|
148
155
|
continue; // Skip if the trigger is not configured
|
|
149
156
|
const els = selection.selectAll(`.${className}`).nodes();
|
|
@@ -154,6 +161,7 @@ class Tooltip {
|
|
|
154
161
|
if (el.classList.contains(className)) { // If there's a match, show the tooltip
|
|
155
162
|
const i = els.indexOf(el);
|
|
156
163
|
const d = select(el).datum();
|
|
164
|
+
const [x, y] = this._getTooltipPosition(e, el);
|
|
157
165
|
const content = template(d, i, els);
|
|
158
166
|
if (content)
|
|
159
167
|
this.show(content, { x, y });
|
|
@@ -175,6 +183,54 @@ class Tooltip {
|
|
|
175
183
|
this.hide();
|
|
176
184
|
});
|
|
177
185
|
});
|
|
186
|
+
// Set up Tooltip hover
|
|
187
|
+
if (config.allowHover) {
|
|
188
|
+
this.div
|
|
189
|
+
.on('mouseenter.tooltip', this.display.bind(this))
|
|
190
|
+
.on('mouseleave.tooltip', this.hide.bind(this));
|
|
191
|
+
}
|
|
192
|
+
else {
|
|
193
|
+
this.div
|
|
194
|
+
.on('mouseenter.tooltip', null)
|
|
195
|
+
.on('mouseleave.tooltip', null);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
_getTooltipPosition(e, hoveredElement) {
|
|
199
|
+
const { config } = this;
|
|
200
|
+
const isContainerBody = this.isContainerBody();
|
|
201
|
+
const clientRect = hoveredElement.getBoundingClientRect();
|
|
202
|
+
let tooltipPosition = [0, 0];
|
|
203
|
+
if (config.followCursor) {
|
|
204
|
+
tooltipPosition = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container);
|
|
205
|
+
}
|
|
206
|
+
else {
|
|
207
|
+
// We use D3's point transformation to get the correct position of the element by pretending it's a pointer event
|
|
208
|
+
// See more: https://github.com/d3/d3-selection/blob/main/src/pointer.js
|
|
209
|
+
const elementPos = pointer({ clientX: clientRect.x, clientY: clientRect.y, pageX: clientRect.x, pageY: clientRect.y }, this._container);
|
|
210
|
+
switch (config.horizontalPlacement) {
|
|
211
|
+
case Position.Left:
|
|
212
|
+
tooltipPosition[0] = elementPos[0];
|
|
213
|
+
break;
|
|
214
|
+
case Position.Right:
|
|
215
|
+
tooltipPosition[0] = elementPos[0] + clientRect.width;
|
|
216
|
+
break;
|
|
217
|
+
default:
|
|
218
|
+
tooltipPosition[0] = elementPos[0] + clientRect.width / 2;
|
|
219
|
+
break;
|
|
220
|
+
}
|
|
221
|
+
switch (config.verticalPlacement) {
|
|
222
|
+
case Position.Top:
|
|
223
|
+
tooltipPosition[1] = elementPos[1];
|
|
224
|
+
break;
|
|
225
|
+
case Position.Bottom:
|
|
226
|
+
tooltipPosition[1] = elementPos[1] + clientRect.height;
|
|
227
|
+
break;
|
|
228
|
+
default:
|
|
229
|
+
tooltipPosition[1] = elementPos[1] + clientRect.height / 2;
|
|
230
|
+
break;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
return tooltipPosition;
|
|
178
234
|
}
|
|
179
235
|
_setUpAttributes() {
|
|
180
236
|
const attributesMap = this.config.attributes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["import { select, Selection, pointer } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\n// Utils\nimport { merge, throttle } from 'utils/data'\n\n// Config\nimport { TooltipDefaultConfig, TooltipConfigInterface } from './config'\n\n// Style\nimport * as s from './style'\n\nexport class Tooltip {\n element: HTMLElement\n div: Selection<HTMLElement, unknown, null, undefined>\n protected _defaultConfig = TooltipDefaultConfig as TooltipConfigInterface\n public config: TooltipConfigInterface = this._defaultConfig\n prevConfig: TooltipConfigInterface\n components: ComponentCore<unknown>[]\n static selectors = s\n private _setUpEventsThrottled = throttle(this._setUpEvents, 500)\n private _setContainerPositionThrottled = throttle(this._setContainerPosition, 500)\n private _isShown = false\n private _container: HTMLElement\n\n constructor (config: TooltipConfigInterface = {}) {\n this.element = document.createElement('div')\n this.div = select(this.element)\n .attr('class', s.tooltip)\n\n this.setConfig(config)\n this.components = this.config.components\n }\n\n public setConfig (config: TooltipConfigInterface): void {\n this.prevConfig = this.config\n this.config = merge(this._defaultConfig, config)\n\n if (this.config.container && (this.config.container !== this.prevConfig?.container)) {\n this.setContainer(this.config.container)\n }\n\n this._setUpAttributes()\n }\n\n public setContainer (container: HTMLElement): void {\n this.element.parentNode?.removeChild(this.element)\n\n this._container = container\n this._container.appendChild(this.element)\n\n this._setContainerPositionThrottled()\n }\n\n public getContainer (): HTMLElement {\n return this._container\n }\n\n public hasContainer (): boolean {\n return !!this._container && this._container.isConnected\n }\n\n public setComponents (components: ComponentCore<unknown>[]): void {\n this.components = components\n }\n\n public update (): void {\n if (!this._container) return\n\n this._setUpEventsThrottled()\n }\n\n public show (html: string | HTMLElement, pos: { x: number; y: number }): void {\n if (html instanceof HTMLElement) {\n const node = this.div.select(':first-child').node()\n if (node !== html) this.div.html('').append(() => html)\n } else {\n this.div.html(html)\n }\n\n this.div\n .classed(s.hidden, false)\n .classed(s.show, true)\n\n this._isShown = true\n this.place(pos)\n }\n\n public hide (): void {\n this.div.classed(s.show, false)\n .on('transitionend', () => {\n // We hide the element once the transition completes\n // This ensures container overflow will not occur when the window is resized\n this.div.classed(s.hidden, !this._isShown)\n })\n\n this._isShown = false\n }\n\n public place (pos: { x: number; y: number }): void {\n if (!this.hasContainer()) {\n console.warn('Unovis | Tooltip: Container was not set or is not initialized yet')\n return\n }\n const { config } = this\n const isContainerBody = this.isContainerBody()\n const width = this.element.offsetWidth\n const height = this.element.offsetHeight\n const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight\n const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth\n\n const horizontalPlacement = config.horizontalPlacement === Position.Auto\n ? (pos.x > containerWidth / 2 ? Position.Left : Position.Right)\n : config.horizontalPlacement\n\n const verticalPlacement = config.verticalPlacement === Position.Auto\n ? (pos.y > containerHeight / 2 ? Position.Top : Position.Bottom)\n : config.verticalPlacement\n\n // dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)\n const margin = 5\n const dx = horizontalPlacement === Position.Left ? -width - margin - config.horizontalShift\n : horizontalPlacement === Position.Center ? -width / 2\n : margin + config.horizontalShift\n const dy = verticalPlacement === Position.Bottom ? height + margin + config.verticalShift\n : verticalPlacement === Position.Center ? height / 2\n : -margin - config.verticalShift\n\n // Constraint to container\n const paddingX = 10\n const hitRight = pos.x > (containerWidth - width - dx - paddingX)\n const hitLeft = pos.x < -dx + paddingX\n const constraintX = hitRight ? (containerWidth - width - dx) - pos.x - paddingX\n : hitLeft ? -dx - pos.x + paddingX : 0\n\n const paddingY = 10\n const hitBottom = pos.y > (containerHeight - dy - paddingY)\n const hitTop = pos.y < (height - dy + paddingY)\n const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY\n : hitTop ? height - dy - pos.y + paddingY : 0\n\n // Placing\n // If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left\n const x = containerWidth < width ? 0 : pos.x + constraintX + dx\n const y = containerHeight < height ? height : pos.y + constraintY + dy\n\n this.div\n .classed(s.positionFixed, isContainerBody)\n .style('top', isContainerBody ? `${y - height}px` : 'unset')\n .style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')\n .style('left', `${x}px`)\n }\n\n public isContainerBody (): boolean {\n return this._container === document.body\n }\n\n private _setContainerPosition (): void {\n // Tooltip position calculation relies on the parent position\n // If it's not set (static), we set it to `relative` (not a good practice)\n if (this._container !== document.body && getComputedStyle(this._container)?.position === 'static') {\n this._container.style.position = 'relative'\n }\n }\n\n private _setUpEvents (): void {\n const { config: { triggers } } = this\n const isContainerBody = this.isContainerBody()\n\n // We use the Event Delegation pattern to set up Tooltip events\n // Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check\n // the `path` of the event and trigger corresponding callbacks\n this.components.forEach(component => {\n const selection = select(component.element)\n selection\n .on('mousemove.tooltip', (e: MouseEvent) => {\n const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container)\n const path: (HTMLElement | SVGGElement)[] = (e.composedPath && e.composedPath()) || (e as any).path || [e.target]\n\n // Go through all of the configured triggers\n for (const className of Object.keys(triggers)) {\n const template = triggers[className]\n if (!template) continue // Skip if the trigger is not configured\n\n const els = selection.selectAll<HTMLElement | SVGGElement, unknown>(`.${className}`).nodes()\n\n // Go through all of the elements in the event path (from the deepest element upwards)\n for (const el of path) {\n if (el === selection.node()) break // Break on the component's level (usually the `<g>` element)\n if (el.classList.contains(className)) { // If there's a match, show the tooltip\n const i = els.indexOf(el)\n const d = select(el).datum()\n const content = template(d, i, els)\n if (content) this.show(content, { x, y })\n else this.hide()\n\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n return // Stop looking for other matches\n }\n }\n }\n\n // Hide the tooltip if the event didn't pass through any of the configured triggers.\n // We use the `this._isShown` condition as a little performance optimization tweak\n // (we don't want the tooltip to update its class on every mouse movement, see `this.hide()`).\n if (this._isShown) this.hide()\n })\n .on('mouseleave.tooltip', (e: MouseEvent) => {\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n this.hide()\n })\n })\n }\n\n private _setUpAttributes (): void {\n const attributesMap = this.config.attributes\n if (!attributesMap) return\n\n Object.keys(attributesMap).forEach(attr => {\n this.div.attr(attr, attributesMap[attr])\n })\n }\n\n public destroy (): void {\n this.div?.remove()\n }\n}\n"],"names":["s.tooltip","s.hidden","s.show","s.positionFixed","s"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["import { select, Selection, pointer } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\n// Utils\nimport { merge, throttle } from 'utils/data'\n\n// Config\nimport { TooltipDefaultConfig, TooltipConfigInterface } from './config'\n\n// Style\nimport * as s from './style'\n\nexport class Tooltip {\n element: HTMLElement\n div: Selection<HTMLElement, unknown, null, undefined>\n protected _defaultConfig = TooltipDefaultConfig as TooltipConfigInterface\n public config: TooltipConfigInterface = this._defaultConfig\n prevConfig: TooltipConfigInterface\n components: ComponentCore<unknown>[]\n static selectors = s\n private _setUpEventsThrottled = throttle(this._setUpEvents, 500)\n private _setContainerPositionThrottled = throttle(this._setContainerPosition, 500)\n private _isShown = false\n private _container: HTMLElement\n\n constructor (config: TooltipConfigInterface = {}) {\n this.element = document.createElement('div')\n this.div = select(this.element)\n .attr('class', s.tooltip)\n\n this.setConfig(config)\n this.components = this.config.components\n }\n\n public setConfig (config: TooltipConfigInterface): void {\n this.prevConfig = this.config\n this.config = merge(this._defaultConfig, config)\n\n if (this.config.container && (this.config.container !== this.prevConfig?.container)) {\n this.setContainer(this.config.container)\n }\n\n this._setUpAttributes()\n }\n\n public setContainer (container: HTMLElement): void {\n this.element.parentNode?.removeChild(this.element)\n\n this._container = container\n this._container.appendChild(this.element)\n\n this._setContainerPositionThrottled()\n }\n\n public getContainer (): HTMLElement {\n return this._container\n }\n\n public hasContainer (): boolean {\n return !!this._container && this._container.isConnected\n }\n\n public setComponents (components: ComponentCore<unknown>[]): void {\n this.components = components\n }\n\n public update (): void {\n if (!this._container) return\n\n this._setUpEventsThrottled()\n }\n\n /** Show the tooltip ny providing its content and position */\n public show (html: string | HTMLElement, pos: { x: number; y: number }): void {\n if (html instanceof HTMLElement) {\n const node = this.div.select(':first-child').node()\n if (node !== html) this.div.html('').append(() => html)\n } else {\n this.div.html(html)\n }\n\n this.div\n .classed(s.hidden, false)\n .classed(s.show, true)\n\n this._isShown = true\n this.place(pos)\n }\n\n /** Hide the tooltip */\n public hide (): void {\n this.div.classed(s.show, false)\n .on('transitionend', () => {\n // We hide the element once the transition completes\n // This ensures container overflow will not occur when the window is resized\n this.div.classed(s.hidden, !this._isShown)\n })\n\n this._isShown = false\n }\n\n /** Simply displays the tooltip with its previous content on position */\n public display (): void {\n this.div\n .classed(s.hidden, false)\n .classed(s.show, true)\n this._isShown = true\n }\n\n public place (pos: { x: number; y: number }): void {\n if (!this.hasContainer()) {\n console.warn('Unovis | Tooltip: Container was not set or is not initialized yet')\n return\n }\n const { config } = this\n const isContainerBody = this.isContainerBody()\n const width = this.element.offsetWidth\n const height = this.element.offsetHeight\n const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight\n const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth\n\n const horizontalPlacement = config.horizontalPlacement === Position.Auto\n ? (pos.x > containerWidth / 2 ? Position.Left : Position.Right)\n : config.horizontalPlacement\n\n const verticalPlacement = config.verticalPlacement === Position.Auto\n ? (pos.y > containerHeight / 2 ? Position.Top : Position.Bottom)\n : config.verticalPlacement\n\n // dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)\n const margin = 5\n const dx = horizontalPlacement === Position.Left ? -width - margin - config.horizontalShift\n : horizontalPlacement === Position.Center ? -width / 2\n : margin + config.horizontalShift\n const dy = verticalPlacement === Position.Bottom ? height + margin + config.verticalShift\n : verticalPlacement === Position.Center ? height / 2\n : -margin - config.verticalShift\n\n // Constraint to container\n const paddingX = 10\n const hitRight = pos.x > (containerWidth - width - dx - paddingX)\n const hitLeft = pos.x < -dx + paddingX\n const constraintX = hitRight ? (containerWidth - width - dx) - pos.x - paddingX\n : hitLeft ? -dx - pos.x + paddingX : 0\n\n const paddingY = 10\n const hitBottom = pos.y > (containerHeight - dy - paddingY)\n const hitTop = pos.y < (height - dy + paddingY)\n const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY\n : hitTop ? height - dy - pos.y + paddingY : 0\n\n // Placing\n // If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left\n const x = containerWidth < width ? 0 : pos.x + constraintX + dx\n const y = containerHeight < height ? height : pos.y + constraintY + dy\n\n this.div\n .classed(s.positionFixed, isContainerBody)\n .style('top', isContainerBody ? `${y - height}px` : 'unset')\n .style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')\n .style('left', `${x}px`)\n }\n\n public isContainerBody (): boolean {\n return this._container === document.body\n }\n\n private _setContainerPosition (): void {\n // Tooltip position calculation relies on the parent position\n // If it's not set (static), we set it to `relative` (not a good practice)\n if (this._container !== document.body && getComputedStyle(this._container)?.position === 'static') {\n this._container.style.position = 'relative'\n }\n }\n\n private _setUpEvents (): void {\n const { config } = this\n\n // We use the Event Delegation pattern to set up Tooltip events\n // Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check\n // the `path` of the event and trigger corresponding callbacks\n this.components.forEach(component => {\n const selection = select(component.element)\n selection\n .on('mousemove.tooltip', (e: MouseEvent) => {\n const path: (HTMLElement | SVGGElement)[] = (e.composedPath && e.composedPath()) || (e as any).path || [e.target]\n\n // Go through all of the configured triggers\n for (const className of Object.keys(config.triggers)) {\n const template = config.triggers[className]\n if (!template) continue // Skip if the trigger is not configured\n\n const els = selection.selectAll<HTMLElement | SVGGElement, unknown>(`.${className}`).nodes()\n\n // Go through all of the elements in the event path (from the deepest element upwards)\n for (const el of path) {\n if (el === selection.node()) break // Break on the component's level (usually the `<g>` element)\n if (el.classList.contains(className)) { // If there's a match, show the tooltip\n const i = els.indexOf(el)\n const d = select(el).datum()\n const [x, y] = this._getTooltipPosition(e, el)\n const content = template(d, i, els)\n\n if (content) this.show(content, { x, y })\n else this.hide()\n\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n return // Stop looking for other matches\n }\n }\n }\n\n // Hide the tooltip if the event didn't pass through any of the configured triggers.\n // We use the `this._isShown` condition as a little performance optimization tweak\n // (we don't want the tooltip to update its class on every mouse movement, see `this.hide()`).\n if (this._isShown) this.hide()\n })\n .on('mouseleave.tooltip', (e: MouseEvent) => {\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n this.hide()\n })\n })\n\n // Set up Tooltip hover\n if (config.allowHover) {\n this.div\n .on('mouseenter.tooltip', this.display.bind(this))\n .on('mouseleave.tooltip', this.hide.bind(this))\n } else {\n this.div\n .on('mouseenter.tooltip', null)\n .on('mouseleave.tooltip', null)\n }\n }\n\n private _getTooltipPosition (e: MouseEvent, hoveredElement: SVGGElement | HTMLElement): [number, number] {\n const { config } = this\n const isContainerBody = this.isContainerBody()\n\n const clientRect = hoveredElement.getBoundingClientRect()\n\n let tooltipPosition = [0, 0] as [number, number]\n if (config.followCursor) {\n tooltipPosition = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container)\n } else {\n // We use D3's point transformation to get the correct position of the element by pretending it's a pointer event\n // See more: https://github.com/d3/d3-selection/blob/main/src/pointer.js\n const elementPos = pointer({ clientX: clientRect.x, clientY: clientRect.y, pageX: clientRect.x, pageY: clientRect.y }, this._container)\n switch (config.horizontalPlacement) {\n case Position.Left:\n tooltipPosition[0] = elementPos[0]\n break\n case Position.Right:\n tooltipPosition[0] = elementPos[0] + clientRect.width\n break\n default:\n tooltipPosition[0] = elementPos[0] + clientRect.width / 2\n break\n }\n\n switch (config.verticalPlacement) {\n case Position.Top:\n tooltipPosition[1] = elementPos[1]\n break\n case Position.Bottom:\n tooltipPosition[1] = elementPos[1] + clientRect.height\n break\n default:\n tooltipPosition[1] = elementPos[1] + clientRect.height / 2\n break\n }\n }\n\n return tooltipPosition\n }\n\n private _setUpAttributes (): void {\n const attributesMap = this.config.attributes\n if (!attributesMap) return\n\n Object.keys(attributesMap).forEach(attr => {\n this.div.attr(attr, attributesMap[attr])\n })\n }\n\n public destroy (): void {\n this.div?.remove()\n }\n}\n"],"names":["s.tooltip","s.hidden","s.show","s.positionFixed","s"],"mappings":"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"}
|
|
@@ -11,6 +11,9 @@ const variables = injectGlobal `
|
|
|
11
11
|
--vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);
|
|
12
12
|
--vis-tooltip-backdrop-filter: none;
|
|
13
13
|
--vis-tooltip-padding: 10px 15px;
|
|
14
|
+
--vis-tooltip-border-radius: 5px;
|
|
15
|
+
--vis-tooltip-transition-duration: 300ms;
|
|
16
|
+
--vis-tooltip-box-shadow: none;
|
|
14
17
|
|
|
15
18
|
--vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);
|
|
16
19
|
--vis-dark-tooltip-text-color: #e5e9f7;
|
|
@@ -39,19 +42,14 @@ const tooltip = css `
|
|
|
39
42
|
bottom: 0;
|
|
40
43
|
min-width: max-content;
|
|
41
44
|
position: absolute;
|
|
42
|
-
pointer-events: none;
|
|
43
45
|
opacity: 0;
|
|
44
46
|
transition: opacity;
|
|
45
|
-
transition-duration:
|
|
46
|
-
user-select: none;
|
|
47
|
+
transition-duration: var(--vis-tooltip-transition-duration);
|
|
47
48
|
z-index: 999999;
|
|
48
49
|
padding: var(--vis-tooltip-padding);
|
|
49
|
-
transform: translate(0, -5px);
|
|
50
50
|
color: var(--vis-tooltip-text-color);
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
border-radius: 5px;
|
|
54
|
-
box-shadow: 0 13px 25px 0 var(--vis-tooltip-box-shadow);
|
|
51
|
+
border-radius: var(--vis-tooltip-border-radius);
|
|
52
|
+
box-shadow: var(--vis-tooltip-box-shadow);
|
|
55
53
|
border: solid 1px var(--vis-tooltip-border-color);
|
|
56
54
|
background-color: var(--vis-tooltip-background-color);
|
|
57
55
|
backdrop-filter: var(--vis-tooltip-backdrop-filter);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/tooltip/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: tooltip;\n`\n\nexport const variables = injectGlobal`\n :root {\n --vis-tooltip-background-color: rgba(255, 255, 255, 0.95);\n --vis-tooltip-border-color: #e5e9f7;\n --vis-tooltip-text-color: #000;\n --vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);\n --vis-tooltip-backdrop-filter: none;\n --vis-tooltip-padding: 10px 15px;\n\n --vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);\n --vis-dark-tooltip-text-color: #e5e9f7;\n --vis-dark-tooltip-border-color: var(--vis-color-grey);\n --vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-tooltip-background-color: var(--vis-dark-tooltip-background-color);\n --vis-tooltip-text-color: var(--vis-dark-tooltip-text-color);\n --vis-tooltip-border-color: var(--vis-dark-tooltip-border-color);\n --vis-tooltip-shadow-color: var(--vis-dark-tooltip-shadow-color);\n }\n\n body.theme-dark {\n --vis-tooltip-background-color: rgba(30,30,30, 0.95);\n --vis-tooltip-text-color: #e5e9f7;\n --vis-tooltip-border-color: var(--vis-color-grey);\n --vis-tooltip-shadow-color: rgba(0,0,0, 0.95);\n }\n`\n\nexport const tooltip = css`\n label: tooltip;\n display: inline-block;\n left: 0;\n bottom: 0;\n min-width: max-content;\n position: absolute;\n
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/tooltip/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: tooltip;\n`\n\nexport const variables = injectGlobal`\n :root {\n --vis-tooltip-background-color: rgba(255, 255, 255, 0.95);\n --vis-tooltip-border-color: #e5e9f7;\n --vis-tooltip-text-color: #000;\n --vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);\n --vis-tooltip-backdrop-filter: none;\n --vis-tooltip-padding: 10px 15px;\n --vis-tooltip-border-radius: 5px;\n --vis-tooltip-transition-duration: 300ms;\n --vis-tooltip-box-shadow: none;\n\n --vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);\n --vis-dark-tooltip-text-color: #e5e9f7;\n --vis-dark-tooltip-border-color: var(--vis-color-grey);\n --vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-tooltip-background-color: var(--vis-dark-tooltip-background-color);\n --vis-tooltip-text-color: var(--vis-dark-tooltip-text-color);\n --vis-tooltip-border-color: var(--vis-dark-tooltip-border-color);\n --vis-tooltip-shadow-color: var(--vis-dark-tooltip-shadow-color);\n }\n\n body.theme-dark {\n --vis-tooltip-background-color: rgba(30,30,30, 0.95);\n --vis-tooltip-text-color: #e5e9f7;\n --vis-tooltip-border-color: var(--vis-color-grey);\n --vis-tooltip-shadow-color: rgba(0,0,0, 0.95);\n }\n`\n\nexport const tooltip = css`\n label: tooltip;\n display: inline-block;\n left: 0;\n bottom: 0;\n min-width: max-content;\n position: absolute;\n opacity: 0;\n transition: opacity;\n transition-duration: var(--vis-tooltip-transition-duration);\n z-index: 999999;\n padding: var(--vis-tooltip-padding);\n color: var(--vis-tooltip-text-color);\n border-radius: var(--vis-tooltip-border-radius);\n box-shadow: var(--vis-tooltip-box-shadow);\n border: solid 1px var(--vis-tooltip-border-color);\n background-color: var(--vis-tooltip-background-color);\n backdrop-filter: var(--vis-tooltip-backdrop-filter);\n`\n\nexport const positionFixed = css`\n bottom: unset;\n position: fixed;\n`\n\nexport const show = css`\n opacity: 1;\n`\n\nexport const hidden = css`\n display: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;AAkBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;;;;;;EAa7B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;EAkBzB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;EAG/B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unovis/ts",
|
|
3
3
|
"description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
|
|
4
|
-
"version": "1.4.2-alpha.
|
|
4
|
+
"version": "1.4.2-alpha.3",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|