@unovis/ts 1.1.1-beta.6 → 1.1.1-beta.7

package/{components/timeline/style.js → src/components/timeline/style.ts}

@@ -1,9 +1,10 @@
-import { css, injectGlobal } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const root = css `
+export const root = css`
   label: timeline-component;
-`;
-const globalStyles = injectGlobal `
+`
+
+export const globalStyles = injectGlobal`
   :root {
     --vis-timeline-row-even-fill-color: #FFFFFF;
     --vis-timeline-row-odd-fill-color: #F7FAFC;
@@ -35,14 +36,17 @@ const globalStyles = injectGlobal `
     --vis-timeline-scrollbar-color: var(--vis-dark-timeline-scrollbar-color);
     --vis-timeline-label-color: var(--vis-dark-timeline-label-color);
   }
-`;
-const background = css `
+`
+
+export const background = css`
   label: background;
-`;
-const lines = css `
+`
+
+export const lines = css`
   label: lines;
-`;
-const line = css `
+`
+
+export const line = css`
   label: line;
   fill: var(--vis-timeline-line-color);
   cursor: var(--vis-timeline-cursor);
@@ -53,41 +57,46 @@ const line = css `
   &.odd {
     stroke: var(--vis-timeline-line-stroke-color, var(--vis-timeline-row-odd-fill-color));
   }
-`;
-const rows = css `
+`
+
+export const rows = css`
   label: rows;
-`;
-const row = css `
+`
+
+export const row = css`
   label: row;
   fill: var(--vis-timeline-row-even-fill-color);
   opacity: var(--vis-timeline-row-background-opacity);
-`;
-const rowOdd = css `
+`
+
+export const rowOdd = css`
   label: row-odd;
   fill: var(--vis-timeline-row-odd-fill-color);
-`;
-const scrollbar = css `
+`
+
+export const scrollbar = css`
   label: scroll-bar;
-`;
-const scrollbarHandle = css `
+`
+
+export const scrollbarHandle = css`
   label: scroll-bar-handle;
   fill: var(--vis-timeline-scrollbar-color);
-`;
-const scrollbarBackground = css `
+`
+
+export const scrollbarBackground = css`
   label: scroll-bar-background;
   fill: var(--vis-timeline-scrollbar-background-color);
-`;
-const labels = css `
+`
+
+export const labels = css`
   label: labels;
-`;
-const label = css `
+`
+
+export const label = css`
   label: label;
   dominant-baseline: middle;
   font-size: var(--vis-timeline-label-font-size);
   fill: var(--vis-timeline-label-color);
   text-anchor: end;
   user-select: none;
-`;
-
-export { background, globalStyles, label, labels, line, lines, root, row, rowOdd, rows, scrollbar, scrollbarBackground, scrollbarHandle };
-//# sourceMappingURL=style.js.map
+`

package/src/components/tooltip/config.ts

@@ -0,0 +1,69 @@
+/* eslint-disable no-irregular-whitespace */
+import { Config } from 'core/config'
+import { ComponentCore } from 'core/component'
+
+// Types
+import { Position } from 'types/position'
+
+export interface TooltipConfigInterface {
+  /** An array of visualization components to interact with. Default: `[]` */
+  components?: ComponentCore<unknown>[];
+  /** Container to where the Tooltip component should be inserted. Default: `undefined` */
+  container?: HTMLElement;
+  /** Horizontal placement of the tooltip. Default: `Position.Auto` */
+  horizontalPlacement?: Position | string | undefined;
+  /** Horizontal shift of the tooltip in pixels. Default: `0` */
+  horizontalShift?: number;
+  /** Vertical placement of the tooltip. Default: `Position.Top` */
+  verticalPlacement?: Position | string | undefined;
+  /** Vertical shift of the tooltip in pixels. Default: `0` */
+  verticalShift?: number;
+  /** Defines the content of the tooltip and hovering over which elements should trigger it.
+   * An object containing properties in the following format:
+   *
+   * ```
+   * {
+   *   [selectorString]: (d: unknown) => string | HTMLElement
+   * }
+   * ```
+   * e.g.:
+   * ```
+   * {
+   *   [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>
+   * }
+   * ```
+   */
+  triggers?: {
+    [selector: string]: (data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null;
+  };
+  /** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance
+   * by using a CSS selector. Attributes configuration object has the following structure:
+   *
+   * ```
+   * {
+   *   [attributeName]: attribute value
+   * }
+   * ```
+   * e.g.:
+   * ```
+   * {
+   *   'type': 'area-tooltip',
+   *   'value': 42
+   * }
+   * ```
+   */
+  attributes?: { [attr: string]: string | number | boolean };
+}
+
+export class TooltipConfig extends Config implements TooltipConfigInterface {
+  components: ComponentCore<unknown>[] = []
+  container = undefined
+  horizontalPlacement = Position.Auto
+  horizontalShift = 0
+  verticalPlacement = Position.Top
+  verticalShift = 0
+  attributes: { [attr: string]: string | number | boolean } = {}
+  triggers: {
+    [selector: string]: (data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null;
+  } = {}
+}

package/src/components/tooltip/index.ts

@@ -0,0 +1,220 @@
+import { select, Selection, pointer } from 'd3-selection'
+
+// Core
+import { ComponentCore } from 'core/component'
+
+// Types
+import { Position } from 'types/position'
+
+// Utils
+import { throttle } from 'utils/data'
+
+// Config
+import { TooltipConfig, TooltipConfigInterface } from './config'
+
+// Style
+import * as s from './style'
+
+export class Tooltip {
+  element: HTMLElement
+  div: Selection<HTMLElement, unknown, null, undefined>
+  config: TooltipConfig
+  prevConfig: TooltipConfig
+  components: ComponentCore<unknown>[]
+  static selectors = s
+  private _setUpEventsThrottled = throttle(this._setUpEvents, 500)
+  private _setContainerPositionThrottled = throttle(this._setContainerPosition, 500)
+  private _isShown = false
+  private _container: HTMLElement
+
+  constructor (config: TooltipConfigInterface = {}) {
+    this.element = document.createElement('div')
+    this.div = select(this.element)
+      .attr('class', s.tooltip)
+
+    this.setConfig(config)
+    this.components = this.config.components
+  }
+
+  public setConfig (config: TooltipConfigInterface): void {
+    this.prevConfig = this.config
+    this.config = new TooltipConfig().init(config)
+
+    if (this.config.container && (this.config.container !== this.prevConfig?.container)) {
+      this.setContainer(this.config.container)
+    }
+
+    this._setUpAttributes()
+  }
+
+  public setContainer (container: HTMLElement): void {
+    this.element.parentNode?.removeChild(this.element)
+
+    this._container = container
+    this._container.appendChild(this.element)
+
+    this._setContainerPositionThrottled()
+  }
+
+  public getContainer (): HTMLElement {
+    return this._container
+  }
+
+  public hasContainer (): boolean {
+    return !!this._container && this._container.isConnected
+  }
+
+  public setComponents (components: ComponentCore<unknown>[]): void {
+    this.components = components
+  }
+
+  public update (): void {
+    if (!this._container) return
+
+    this._setUpEventsThrottled()
+  }
+
+  public show (html: string | HTMLElement, pos: { x: number; y: number }): void {
+    if (html instanceof HTMLElement) {
+      const node = this.div.select(':first-child').node()
+      if (node !== html) this.div.html('').append(() => html)
+    } else {
+      this.div.html(html)
+    }
+
+    this.div.classed(s.show, true)
+    this._isShown = true
+    this.place(pos)
+  }
+
+  public hide (): void {
+    this.div.classed(s.show, false)
+    this._isShown = false
+  }
+
+  public place (pos: { x: number; y: number }): void {
+    if (!this.hasContainer()) {
+      console.warn('Unovis | Tooltip: Container was not set or is not initialized yet')
+      return
+    }
+    const { config } = this
+    const isContainerBody = this.isContainerBody()
+    const width = this.element.offsetWidth
+    const height = this.element.offsetHeight
+    const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight
+    const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth
+
+    const horizontalPlacement = config.horizontalPlacement === Position.Auto
+      ? (pos.x > containerWidth / 2 ? Position.Left : Position.Right)
+      : config.horizontalPlacement
+
+    const verticalPlacement = config.verticalPlacement === Position.Auto
+      ? (pos.y > containerHeight / 2 ? Position.Top : Position.Bottom)
+      : config.verticalPlacement
+
+    // dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)
+    const margin = 5
+    const dx = horizontalPlacement === Position.Left ? -width - margin - config.horizontalShift
+      : horizontalPlacement === Position.Center ? -width / 2
+        : margin + config.horizontalShift
+    const dy = verticalPlacement === Position.Bottom ? height + margin + config.verticalShift
+      : verticalPlacement === Position.Center ? height / 2
+        : -margin - config.verticalShift
+
+    // Constraint to container
+    const paddingX = 10
+    const hitRight = pos.x > (containerWidth - width - dx - paddingX)
+    const hitLeft = pos.x < -dx + paddingX
+    const constraintX = hitRight ? (containerWidth - width - dx) - pos.x - paddingX
+      : hitLeft ? -dx - pos.x + paddingX : 0
+
+    const paddingY = 10
+    const hitBottom = pos.y > (containerHeight - dy - paddingY)
+    const hitTop = pos.y < (height - dy + paddingY)
+    const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY
+      : hitTop ? height - dy - pos.y + paddingY : 0
+
+    // Placing
+    // If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left
+    const x = containerWidth < width ? 0 : pos.x + constraintX + dx
+    const y = containerHeight < height ? height : pos.y + constraintY + dy
+
+    this.div
+      .classed(s.positionFixed, isContainerBody)
+      .style('top', isContainerBody ? `${y - height}px` : 'unset')
+      .style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')
+      .style('left', `${x}px`)
+  }
+
+  public isContainerBody (): boolean {
+    return this._container === document.body
+  }
+
+  private _setContainerPosition (): void {
+    // Tooltip position calculation relies on the parent position
+    // If it's not set (static), we set it to `relative` (not a good practice)
+    if (getComputedStyle(this._container)?.position === 'static') {
+      this._container.style.position = 'relative'
+    }
+  }
+
+  private _setUpEvents (): void {
+    const { config: { triggers } } = this
+    const isContainerBody = this.isContainerBody()
+
+    // We use the Event Delegation pattern to set up Tooltip events
+    // Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check
+    // the `path` of the event and trigger corresponding callbacks
+    this.components.forEach(component => {
+      const selection = select(component.element)
+      selection
+        .on('mousemove.tooltip', (e: MouseEvent) => {
+          const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container)
+          const path: (HTMLElement | SVGGElement)[] = (e.composedPath && e.composedPath()) || (e as any).path || [e.target]
+
+          // Go through all of the configured triggers
+          for (const className of Object.keys(triggers)) {
+            const template = triggers[className]
+            const els = selection.selectAll<HTMLElement | SVGGElement, unknown>(`.${className}`).nodes()
+
+            // Go through all of the elements in the event path (from the deepest element upwards)
+            for (const el of path) {
+              if (el === selection.node()) break // Break on the component's level (usually the `<g>` element)
+              if (el.classList.contains(className)) { // If there's a match, show the tooltip
+                const i = els.indexOf(el)
+                const d = select(el).datum()
+                const content = template(d, i, els)
+                if (content) this.show(content, { x, y })
+                else this.hide()
+
+                e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair
+                return // Stop looking for other matches
+              }
+            }
+          }
+
+          // Hide the tooltip if the event didn't pass through any of the configured triggers.
+          // We use the `this._isShown` condition as a little performance optimization tweak
+          // (we don't want the tooltip to update its class on every mouse movement, see `this.hide()`).
+          if (this._isShown) this.hide()
+        })
+        .on('mouseleave.tooltip', (e: MouseEvent) => {
+          e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair
+          this.hide()
+        })
+    })
+  }
+
+  private _setUpAttributes (): void {
+    const attributesMap = this.config.attributes
+    if (!attributesMap) return
+
+    Object.keys(attributesMap).forEach(attr => {
+      this.div.attr(attr, attributesMap[attr])
+    })
+  }
+
+  public destroy (): void {
+    this.div?.remove()
+  }
+}

package/{components → src/components}/tooltip/style.js

@@ -1,10 +1,10 @@
-import { css, injectGlobal } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const root = css`
+export const root = css`
   label: tooltip;
-`;
+`
 
-const variables = injectGlobal`
+export const variables = injectGlobal`
   :root {
     --vis-tooltip-background-color: rgba(255, 255, 255, 0.95);
     --vis-tooltip-border-color: #e5e9f7;
@@ -32,9 +32,9 @@ const variables = injectGlobal`
     --vis-tooltip-border-color: var(--vis-color-grey);
     --vis-tooltip-shadow-color: rgba(0,0,0, 0.95);
   }
-`;
+`
 
-const tooltip = css`
+export const tooltip = css`
   label: tooltip;
   display: inline-block;
   left: 0;
@@ -57,16 +57,13 @@ const tooltip = css`
   border: solid 1px var(--vis-tooltip-border-color);
   background-color: var(--vis-tooltip-background-color);
   backdrop-filter: var(--vis-tooltip-backdrop-filter);
-`;
+`
 
-const positionFixed = css`
+export const positionFixed = css`
   bottom: unset;
   position: fixed;
-`;
+`
 
-const show = css`
+export const show = css`
   opacity: 1;
-`;
-
-export { positionFixed, root, show, tooltip, variables };
-//# sourceMappingURL=style.js.map
+`

package/src/components/topojson-map/config.ts

@@ -0,0 +1,124 @@
+/* eslint-disable dot-notation */
+import { GeoProjection } from 'd3-geo'
+import { ComponentConfigInterface, ComponentConfig } from 'core/component/config'
+
+// Types
+import { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'
+
+// Local Types
+import { MapProjection, MapPointLabelPosition } from './types'
+
+export interface TopoJSONMapConfigInterface<
+  AreaDatum,
+  PointDatum = unknown,
+  LinkDatum = unknown,
+> extends ComponentConfigInterface {
+  // General
+  /** MapProjection (aka D3's GeoProjection) instance. Default: `MapProjection.Kavrayskiy7()` */
+  projection?: GeoProjection;
+  /** Map data in the TopoJSON topology format. Default: `undefined` */
+  topojson?: TopoJSON.Topology;
+  /** Name of the map features to be displayed, e.g. 'countries' or 'counties'. Default: `countries` */
+  mapFeatureName?: string;
+  /** Set initial map fit to points instead of topojson features. Default: `false` */
+  mapFitToPoints?: boolean;
+  /** Initial zoom level. Default: `undefined` */
+  zoomFactor?: number;
+  /** Disable pan / zoom interactions. Default: `false` */
+  disableZoom?: boolean;
+  /** Zoom extent. Default: `[0.5, 6]` */
+  zoomExtent?: number[];
+  /** Zoom animation duration. Default: `400` */
+  zoomDuration?: number;
+
+  /** Link width value or accessor function. Default: `d => d.width ?? 1` */
+  linkWidth?: NumericAccessor<LinkDatum>;
+  /** Link color value or accessor function. Default: `d => d.color ?? null` */
+  linkColor?: ColorAccessor<LinkDatum>;
+  /** Link cursor value or accessor function. Default: `null` */
+  linkCursor?: StringAccessor<AreaDatum>;
+  /** Link id accessor function. Default: `d => d.id` */
+  linkId?: StringAccessor<LinkDatum>;
+  /** Link source accessor function. Default: `d => d.source` */
+  linkSource?: ((l: LinkDatum) => number | string | PointDatum);
+  /** Link target accessor function. Default: `d => d.target` */
+  linkTarget?: ((l: LinkDatum) => number | string | PointDatum);
+
+  /** Area id accessor function corresponding to the feature id from TopoJSON. Default: `d => d.id ?? ''` */
+  areaId?: StringAccessor<AreaDatum>;
+  /** Area color value or accessor function. Default: `d => d.color ?? null` */
+  areaColor?: ColorAccessor<AreaDatum>;
+  /** Area cursor value or accessor function. Default: `null` */
+  areaCursor?: StringAccessor<AreaDatum>;
+
+  /** Point color accessor. Default: `d => d.color ?? null` */
+  pointColor?: ColorAccessor<PointDatum>;
+  /** Point radius accessor. Default: `d => d.radius ?? 8` */
+  pointRadius?: NumericAccessor<PointDatum>;
+  /** Point stroke width accessor. Default: `d => d.strokeWidth ?? null` */
+  pointStrokeWidth?: NumericAccessor<PointDatum>;
+  /** Point cursor constant value or accessor function. Default: `null` */
+  pointCursor?: StringAccessor<AreaDatum>;
+  /** Point longitude accessor function. Default: `d => d.longitude ?? null` */
+  longitude?: NumericAccessor<PointDatum>;
+  /** Point latitude accessor function. Default: `d => d.latitude ?? null` */
+  latitude?: NumericAccessor<PointDatum>;
+  /** Point label accessor function. Default: `undefined` */
+  pointLabel?: StringAccessor<PointDatum>;
+  /** Point label position. Default: `Position.Bottom` */
+  pointLabelPosition?: MapPointLabelPosition;
+  /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */
+  pointLabelTextBrightnessRatio?: number;
+  /** Point id accessor function. Default: `d => d.id` */
+  pointId?: ((d: PointDatum, i: number) => string);
+
+  /** Enables blur and blending between neighbouring points. Default: `false` */
+  heatmapMode?: boolean;
+  /** Heatmap blur filter stdDeviation value. Default: `10` */
+  heatmapModeBlurStdDeviation?: number;
+  /** Zoom level at which the heatmap mode will be disabled. Default: `2.5` */
+  heatmapModeZoomLevelThreshold?: number;
+}
+
+export class TopoJSONMapConfig<
+  AreaDatum,
+  PointDatum = unknown,
+  LinkDatum = unknown,
+> extends ComponentConfig implements TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum> {
+  projection = MapProjection.Kavrayskiy7()
+  duration = 1500
+  topojson = undefined
+  mapFeatureName = 'countries'
+  mapFitToPoints = false
+
+  zoomExtent = [0.5, 6]
+  zoomDuration = 400
+  disableZoom = false
+  zoomFactor = undefined
+
+  linkWidth = (d: LinkDatum): number => d['width'] ?? 1
+  linkColor = (d: LinkDatum): string => d['color'] ?? null
+  linkCursor = null
+  linkId = (d: LinkDatum, i: number | undefined): string => `${d['id'] ?? i}`
+  linkSource = (d: LinkDatum): (number | string | PointDatum) => d['source']
+  linkTarget = (d: LinkDatum): (number | string | PointDatum) => d['target']
+
+  areaId = (d: AreaDatum): string => d['id'] ?? ''
+  areaColor = (d: AreaDatum): string => d['color'] ?? null
+  areaCursor = null
+
+  longitude = (d: PointDatum): number => d['longitude']
+  latitude = (d: PointDatum): number => d['latitude']
+  pointColor = (d: PointDatum): string => d['color'] ?? null
+  pointRadius = (d: PointDatum): number => d['radius'] ?? 8
+  pointStrokeWidth = (d: PointDatum): number => d['strokeWidth'] ?? 0
+  pointCursor = null
+  pointLabel = undefined
+  pointLabelPosition = MapPointLabelPosition.Bottom
+  pointLabelTextBrightnessRatio = 0.65
+  pointId = (d: PointDatum): string => d['id']
+
+  heatmapMode = false
+  heatmapModeBlurStdDeviation = 8
+  heatmapModeZoomLevelThreshold = 2.5
+}