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

package/src/components/chord-diagram/modules/node.ts

@@ -0,0 +1,80 @@
+import { Selection } from 'd3-selection'
+import { Transition } from 'd3-transition'
+import { interpolate } from 'd3-interpolate'
+import { Arc } from 'd3-shape'
+
+// Utils
+import { getColor } from 'utils/color'
+import { smartTransition } from 'utils/d3'
+
+// Local Types
+import { ChordInputNode, ChordInputLink, ChordNode } from '../types'
+
+// Config
+import { ChordDiagramConfig } from '../config'
+
+type AnimState = { x0: number; x1: number; y0: number; y1: number }
+export interface ArcNode extends SVGElement {
+  _animState?: AnimState;
+}
+
+export function createNode<N extends ChordInputNode, L extends ChordInputLink> (
+  selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>
+): void {
+  selection
+    .style('opacity', 0)
+    .each((d, i, els) => {
+      const arcNode: ArcNode = els[i]
+      const angleCenter = (d.x0 + d.x1) / 2
+      const angleHalfWidth = (d.x1 - d.x0) / 2
+      arcNode._animState = {
+        x0: angleCenter - angleHalfWidth * 0.8,
+        x1: angleCenter + angleHalfWidth * 0.8,
+        y0: d.y0,
+        y1: d.y1,
+      }
+    })
+}
+
+export function updateNode<N extends ChordInputNode, L extends ChordInputLink> (
+  selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>,
+  config: ChordDiagramConfig<N, L>,
+  arcGen: Arc<unknown, AnimState>,
+  duration: number
+): void {
+  const nodeColor = (d: ChordNode<N>): string => getColor(d.data, config.nodeColor, d.height)
+
+  selection
+    .attr('id', d => d.uid)
+    .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
+    .style('fill', nodeColor)
+    .style('stroke', nodeColor)
+
+  if (duration) {
+    const transition = smartTransition(selection, duration)
+      .style('opacity', 1) as Transition<SVGPathElement, ChordNode<N>, SVGGElement, ChordNode<N>>
+
+    transition.attrTween('d', (d, i, els) => {
+      const arcNode: ArcNode = els[i]
+      const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }
+      const datum = interpolate(arcNode._animState, nextAnimState)
+
+      return (t: number): string => {
+        arcNode._animState = datum(t)
+        return arcGen(arcNode._animState)
+      }
+    })
+  } else {
+    selection.attr('d', d => arcGen(d))
+      .style('opacity', 1)
+  }
+}
+
+export function removeNode<N extends ChordInputNode> (
+  selection: Selection<SVGPathElement, unknown, SVGGElement, unknown>,
+  duration: number
+): void {
+  smartTransition(selection, duration)
+    .style('opacity', 0)
+    .remove()
+}

package/{components/chord-diagram/style.js → src/components/chord-diagram/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: chord-diagram-component;
-`;
-const variables = injectGlobal `
+`
+
+export const variables = injectGlobal`
   :root {
     --vis-chord-diagram-link-fill-color: #cad5f6;
     --vis-chord-diagram-link-stroke-color: #777777;
@@ -19,17 +20,21 @@ const variables = injectGlobal `
   body.theme-dark ${`.${root}`} {
     --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);
   }
-`;
-const nodes = css `
+`
+
+export const nodes = css`
   label: nodes;
-`;
-const links = css `
+`
+
+export const links = css`
   label: links;
-`;
-const labels = css `
+`
+
+export const labels = css`
   label: labels;
-`;
-const node = css `
+`
+
+export const node = css`
   label: node;
   stroke-width: 0;
   fill: var(--vis-color-main);
@@ -38,16 +43,19 @@ const node = css `
   &:hover {
     stroke-width: 2;
   }
-`;
-const hoveredNode = css `
+`
+
+export const hoveredNode = css`
   label: hovered;
   fill-opacity: 1;
   stroke-width: 1.5;
-`;
-const gLabel = css `
+`
+
+export const gLabel = css`
   label: group-label;
-`;
-const label = css `
+`
+
+export const label = css`
   label: label;
 
   dominant-baseline: middle;
@@ -57,11 +65,13 @@ const label = css `
   > textPath {
     dominant-baseline: central;
   }
-`;
-const labelExit = css `
+`
+
+export const labelExit = css`
   label: label-exit;
-`;
-const link = css `
+`
+
+export const link = css`
   label: link;
 
   fill: var(--vis-chord-diagram-link-fill-color);
@@ -72,18 +82,17 @@ const link = css `
   &:hover {
     fill-opacity: 1;
   }
-`;
-const hoveredLink = css `
+`
+
+export const hoveredLink = css`
   label: hovered;
   fill-opacity: 0.9;
-`;
-const transparent = css `
+`
+
+export const transparent = css`
   fill-opacity: 0.25;
 
   text {
     fill-opacity: 1;
   }
-`;
-
-export { gLabel, hoveredLink, hoveredNode, label, labelExit, labels, link, links, node, nodes, root, transparent, variables };
-//# sourceMappingURL=style.js.map
+`

package/src/components/chord-diagram/types.ts

@@ -0,0 +1,68 @@
+import { HierarchyRectangularNode } from 'd3-hierarchy'
+import { GraphLinkCore, GraphNodeCore } from 'types'
+
+// Node data flow in the component:
+// Input data (N extends ChordInputNode, L extends ChordInputLink)
+//   => GraphNodeCore<N>[] (we reference it only in a few places when it's needed, to make the code easier to read)
+//   => ChordHierarchyNode (nested object representing node hierarchy)
+//   => ChordNode[] and ChordLeafNode[] (HierarchyRectangularNode[] from D3 partition)
+
+export interface ChordInputNode {
+  id?: string;
+}
+
+export interface ChordInputLink {
+  id?: string;
+  source: number | string | ChordInputNode;
+  target: number | string | ChordInputNode;
+}
+
+export type ChordDiagramData<
+  N extends ChordInputNode,
+  L extends ChordInputLink,
+> = {
+  nodes: N[];
+  links?: L[];
+}
+
+export interface ChordHierarchyNode<N> {
+  key: string;
+  values: (ChordHierarchyNode<N> | N)[];
+  depth?: number;
+  height?: number;
+  value?: number;
+  ancestors?: string[];
+}
+
+export type ChordNodeState = {
+  _state: {
+    hovered?: boolean;
+    value?: number;
+  };
+  _prevX1?: number;
+}
+
+export type ChordNodeCore<N> = HierarchyRectangularNode<N> & ChordNodeState & {
+  data: N;
+  uid: string; // Unique id for textPath href
+}
+
+export type ChordNodeDatum<N> = ChordHierarchyNode<N> | N;
+export type ChordNode<N extends ChordInputNode> = ChordNodeCore<ChordNodeDatum<N>>
+export type ChordLeafNode<N extends ChordInputNode> = ChordNodeCore<GraphNodeCore<N, ChordInputLink>>
+
+export type ChordRibbonPoint = { x0: number; x1: number; y0: number; y1: number; a0: number; a1: number; r: number }
+export interface ChordRibbon<N extends ChordInputNode> {
+  source: ChordLeafNode<N>;
+  target: ChordLeafNode<N>;
+  points: ChordRibbonPoint[];
+  data: GraphLinkCore<N, ChordInputLink>;
+  _state: {
+    hovered?: boolean;
+  };
+}
+
+export enum ChordLabelAlignment {
+  Along = 'along',
+  Perpendicular = 'perpendicular',
+}

package/src/components/crosshair/config.ts

@@ -0,0 +1,48 @@
+import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
+import { Tooltip } from 'components/tooltip'
+
+// Types
+import { NumericAccessor } from 'types/accessor'
+import { ContinuousScale } from 'types/scale'
+import { CrosshairCircle } from './types'
+
+// We extend partial XY config interface because x and y properties are optional for Crosshair
+export interface CrosshairConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {
+  /** Separate array of accessors for stacked components (eg StackedBar, Area). Default: `undefined` */
+  yStacked?: NumericAccessor<Datum>[];
+  /** Baseline accessor function for stacked values, useful with stacked areas. Default: `null` */
+  baseline?: NumericAccessor<Datum>;
+  /** An instance of the Tooltip component to be used with Crosshair. Default: `undefined` */
+  tooltip?: Tooltip | undefined;
+  /** Tooltip template accessor. The function is supposed to return either a valid HTML string or an HTMLElement. Default: `d => ''` */
+  template?: (data: Datum, x: number | Date) => string | HTMLElement;
+  /** Hide Crosshair when the corresponding element is far from mouse pointer. Default: `true` */
+  hideWhenFarFromPointer?: boolean;
+  /** Distance in pixels to check in the hideWhenFarFromPointer condition. Default: `100` */
+  hideWhenFarFromPointerDistance?: number;
+  /** Snap to the nearest data point.
+   * If disabled, the tooltip template will receive only the horizontal position of the crosshair and you'll be responsible
+   * for getting the underlying data records and crosshair circles (see the `getCircles` configuration option).
+   * Default: `true`
+  */
+  snapToData?: boolean;
+  /** Custom function for setting up the crosshair circles, usually needed when `snapToData` is set to `false`.
+   * The function receives the horizontal position of the crosshair (in the data space, not in pixels), the data array
+   * and the `yScale` instance to help you calculate the correct vertical position of the circles.
+   * It has to return an array of the CrosshairCircle objects: `{ y: number; color: string; opacity?: number }[]`.
+   * Default: `undefined`
+  */
+  getCircles?: (x: number, data: Datum[], yScale: ContinuousScale) => CrosshairCircle[];
+}
+
+export class CrosshairConfig<Datum> extends XYComponentConfig<Datum> implements CrosshairConfigInterface<Datum> {
+  yStacked = undefined
+  baseline = null
+  duration = 100
+  tooltip: Tooltip = undefined
+  template: ((data: Datum, x: number | Date) => string | HTMLElement) = (d: Datum): string => ''
+  hideWhenFarFromPointer = true
+  hideWhenFarFromPointerDistance = 100
+  snapToData = true
+  getCircles = undefined
+}

package/src/components/crosshair/index.ts

@@ -0,0 +1,220 @@
+import { Selection, pointer } from 'd3-selection'
+import { easeLinear } from 'd3-ease'
+
+// Core
+import { XYComponentCore } from 'core/xy-component'
+import { Tooltip } from 'components/tooltip'
+
+// Utils
+import { isNumber, isArray, getNumber, clamp, getStackedValues, getNearest, isFunction } from 'utils/data'
+import { smartTransition } from 'utils/d3'
+import { getColor } from 'utils/color'
+
+// Local Types
+import { CrosshairAccessors, CrosshairCircle } from './types'
+
+// Config
+import { CrosshairConfig, CrosshairConfigInterface } from './config'
+
+// Styles
+import * as s from './style'
+
+export class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairConfig<Datum>, CrosshairConfigInterface<Datum>> {
+  static selectors = s
+  clippable = true // Don't apply clipping path to this component. See XYContainer
+  config: CrosshairConfig<Datum> = new CrosshairConfig()
+  container: Selection<SVGSVGElement, any, SVGSVGElement, any>
+  line: Selection<SVGLineElement, any, SVGElement, any>
+  x = 0
+  datum: Datum
+  datumIndex: number
+  show = false
+  private _animFrameId: number = null
+
+  /** Tooltip component to be used by Crosshair if not provided by the config.
+   * This property is supposed to be set externally by a container component like XYContainer. */
+  public tooltip: Tooltip
+
+  /** Accessors passed externally (e.g. from XYContainer) */
+  private _accessors: CrosshairAccessors<Datum> = {
+    x: undefined,
+    y: undefined,
+    yStacked: undefined,
+    baseline: undefined,
+  }
+
+  public set accessors (accessors: CrosshairAccessors<Datum>) { this._accessors = accessors }
+  public get accessors (): CrosshairAccessors<Datum> {
+    const { config } = this
+
+    const hasConfig = !!(config.x || config.y || config.yStacked)
+    const x = hasConfig ? config.x : this._accessors.x
+    const yAcc = hasConfig ? config.y : this._accessors.y
+    const y = yAcc ? (isArray(yAcc) ? yAcc : [yAcc]) : undefined
+    const yStacked = hasConfig ? config.yStacked : this._accessors.yStacked
+    const baseline = config.baseline ?? this._accessors.baseline
+
+    return { x, y, yStacked, baseline }
+  }
+
+  constructor (config?: CrosshairConfigInterface<Datum>) {
+    super()
+    if (config) this.config.init(config)
+
+    this.g.style('opacity', this.show ? 1 : 0)
+    this.line = this.g.append('line')
+      .attr('class', s.line)
+  }
+
+  setContainer (containerSvg: Selection<SVGSVGElement, unknown, SVGSVGElement, unknown>): void {
+    // Set up mousemove event for Crosshair
+    this.container = containerSvg
+    this.container.on('mousemove.crosshair', this._onMouseMove.bind(this))
+    this.container.on('mouseout.crosshair', this._onMouseOut.bind(this))
+  }
+
+  _render (customDuration?: number): void {
+    const { config } = this
+    if (config.snapToData && !this.datum) return
+    const duration = isNumber(customDuration) ? customDuration : config.duration
+
+    smartTransition(this.g, duration)
+      .style('opacity', this.show ? 1 : 0)
+
+    this.line
+      .attr('y1', 0)
+      .attr('y1', this._height)
+
+    smartTransition(this.line, duration, easeLinear)
+      .attr('x1', this.x)
+      .attr('x2', this.x)
+
+    const circleData = this.getCircleData()
+    const circles = this.g
+      .selectAll<SVGCircleElement, CrosshairCircle>('circle')
+      .data(circleData, (d, i) => d.id ?? i)
+
+    const circlesEnter = circles.enter()
+      .append('circle')
+      .attr('class', s.circle)
+      .attr('r', 0)
+      .attr('cx', this.x)
+      .attr('cy', d => d.y)
+      .style('fill', d => d.color)
+
+    smartTransition(circlesEnter.merge(circles), duration, easeLinear)
+      .attr('cx', this.x)
+      .attr('cy', d => d.y)
+      .attr('r', 4)
+      .style('opacity', d => d.opacity)
+      .style('fill', d => d.color)
+
+    circles.exit().remove()
+  }
+
+  hide (): void {
+    this._onMouseOut()
+  }
+
+  _onMouseMove (event: MouseEvent): void {
+    const { config, datamodel, element } = this
+    if (!this.accessors.x && datamodel.data?.length) {
+      console.warn('Unovis | Crosshair: X accessor function has not been configured. Please check if it\'s present in the configuration object')
+    }
+    const [x] = pointer(event, element)
+    const xRange = this.xScale.range()
+
+    if (config.snapToData) {
+      if (!this.accessors.y && !this.accessors.yStacked && datamodel.data?.length) {
+        console.warn('Unovis | Crosshair: Y accessors have not been configured. Please check if they\'re present in the configuration object')
+      }
+      const scaleX = this.xScale
+      const valueX = scaleX.invert(x) as number
+
+      this.datum = getNearest(datamodel.data, valueX, this.accessors.x)
+      this.datumIndex = datamodel.data.indexOf(this.datum)
+      if (!this.datum) return
+
+      this.x = clamp(Math.round(scaleX(getNumber(this.datum, this.accessors.x, this.datumIndex))), 0, this._width)
+
+      // Show the crosshair only if it's in the chart range and not far from mouse pointer (if configured)
+      this.show = (this.x >= 0) && (this.x <= this._width) && (!config.hideWhenFarFromPointer || (Math.abs(this.x - x) < config.hideWhenFarFromPointerDistance))
+    } else {
+      const tolerance = 2 // Show the crosshair when it is at least 2 pixels close to the chart area
+      this.x = clamp(x, xRange[0], xRange[1])
+      this.show = (x >= (xRange[0] - tolerance)) && (x <= (xRange[1] + tolerance))
+    }
+
+    window.cancelAnimationFrame(this._animFrameId)
+    this._animFrameId = window.requestAnimationFrame(() => {
+      this._render()
+    })
+
+    if (this.show) this._showTooltip(event)
+    else this._hideTooltip()
+  }
+
+  _onMouseOut (): void {
+    this.show = false
+
+    window.cancelAnimationFrame(this._animFrameId)
+    this._animFrameId = window.requestAnimationFrame(() => {
+      this._render()
+    })
+    this._hideTooltip()
+  }
+
+  _showTooltip (event: MouseEvent): void {
+    const { config } = this
+    const tooltip = config.tooltip ?? this.tooltip
+    if (!tooltip) return
+
+    const container = tooltip.getContainer() || this.container.node()
+    const [x, y] = tooltip.isContainerBody() ? [event.clientX, event.clientY] : pointer(event, container)
+    const content = config.template(this.datum, this.xScale.invert(this.x))
+    if (content) tooltip.show(content, { x, y })
+  }
+
+  _hideTooltip (): void {
+    const { config } = this
+    const tooltip = config.tooltip ?? this.tooltip
+    tooltip?.hide()
+  }
+
+  // We don't want Crosshair to be be taken in to account in domain calculations
+  getYDataExtent (): number[] {
+    return [undefined, undefined]
+  }
+
+  private getCircleData (): CrosshairCircle[] {
+    const { config, datamodel: { data } } = this
+
+    if (isFunction(config.getCircles)) return config.getCircles(this.xScale.invert(this.x), data, this.yScale)
+
+    if (config.snapToData && this.datum) {
+      const yAccessors = this.accessors.y ?? []
+      const yStackedAccessors = this.accessors.yStacked ?? []
+      const baselineValue = getNumber(this.datum, this.accessors.baseline, this.datumIndex) || 0
+      const stackedValues: CrosshairCircle[] = getStackedValues(this.datum, this.datumIndex, ...yStackedAccessors)
+        .map((value, index, arr) => ({
+          y: this.yScale(value + baselineValue),
+          opacity: getNumber(this.datum, yStackedAccessors[index]) ? 1 : 0,
+          color: getColor(this.datum, config.color, index),
+        }))
+
+      const regularValues: CrosshairCircle[] = yAccessors
+        .map((a, index) => {
+          const value = getNumber(this.datum, a)
+          return {
+            y: this.yScale(value),
+            opacity: value ? 1 : 0,
+            color: getColor(this.datum, config.color, stackedValues.length + index),
+          }
+        })
+
+      return stackedValues.concat(regularValues)
+    }
+
+    return []
+  }
+}

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

@@ -1,25 +1,25 @@
-import { injectGlobal, css } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const globalStyles = injectGlobal `
+export const globalStyles = injectGlobal`
   :root {
     --vis-crosshair-line-stroke-color: #888;
     --vis-crosshair-circle-stroke-color: #fff;
   }
-`;
-const root = css `
+`
+
+export const root = css`
   label: crosshair-component;
-`;
-const line = css `
+`
+
+export const line = css`
   stroke: var(--vis-crosshair-line-stroke-color);
   stroke-opacity: 1;
   pointer-events: none;
-`;
-const circle = css `
+`
+
+export const circle = css`
   stroke: var(--vis-crosshair-circle-stroke-color);
   stroke-width: 1;
   stroke-opacity: 0.75;
   pointer-events: none;
-`;
-
-export { circle, globalStyles, line, root };
-//# sourceMappingURL=style.js.map
+`

package/src/components/crosshair/types.ts

@@ -0,0 +1,15 @@
+import { NumericAccessor } from 'types/accessor'
+
+export type CrosshairCircle = {
+  y: number;
+  color: string;
+  opacity?: number;
+  id?: string;
+}
+
+export type CrosshairAccessors<Datum> = {
+  x: NumericAccessor<Datum> | undefined;
+  y: NumericAccessor<Datum>[] | undefined;
+  yStacked: NumericAccessor<Datum>[] | undefined;
+  baseline: NumericAccessor<Datum> | undefined;
+}

package/src/components/donut/config.ts

@@ -0,0 +1,65 @@
+// Core
+import { ComponentConfigInterface, ComponentConfig } from 'core/component/config'
+
+// Types
+import { ColorAccessor, NumericAccessor } from 'types/accessor'
+
+export interface DonutConfigInterface<Datum> extends ComponentConfigInterface {
+  /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
+  id?: ((d: Datum, i: number, ...any) => string | number);
+  /** Value accessor function. Default: `undefined` */
+  value: NumericAccessor<Datum>;
+  /** Diagram angle range. Default: `[0, 2 * Math.PI]` */
+  angleRange?: [number, number];
+  /** Pad angle. Default: `0` */
+  padAngle?: number;
+  /** Custom sort function. Default: `undefined` */
+  sortFunction?: (a: Datum, b: Datum) => number;
+  /** Corner Radius. Default: `0` */
+  cornerRadius?: number;
+  /** Color accessor function. Default: `undefined` */
+  color?: ColorAccessor<Datum>;
+  /** Explicitly set the donut outer radius. Default: `undefined` */
+  radius?: number;
+  /** Arc width in pixels. Set to `0` if you want to have a pie chart. Default: `20` */
+  arcWidth?: number;
+  /** Central label accessor function or text. Default: `undefined` */
+  centralLabel?: string;
+  /** Central sub-label accessor function or text. Default: `undefined` */
+  centralSubLabel?: string;
+  /** Enables wrapping for the sub-label. Default: `true` */
+  centralSubLabelWrap?: boolean;
+  /** When true, the component will display empty segments (the ones that have `0` values) as tiny slices.
+   * Default: `false`
+  */
+  showEmptySegments?: boolean;
+  /** Angular size for empty segments in radians. Default: `0.5 * Math.PI / 180` */
+  emptySegmentAngle?: number;
+  /** Show donut background. The color is configurable via
+   * the `--vis-donut-background-color` and `--vis-dark-donut-background-color` CSS variables.
+   * Default: `true`
+  */
+  showBackground?: boolean;
+  /** Background angle range. When undefined, the value will be taken from `angleRange`. Default: `undefined` */
+  backgroundAngleRange?: [number, number];
+}
+
+export class DonutConfig<Datum> extends ComponentConfig implements DonutConfigInterface<Datum> {
+  // eslint-disable-next-line dot-notation
+  id = (d: Datum, i: number): string | number => d['id'] ?? i
+  value = undefined
+  angleRange: [number, number] = [0, 2 * Math.PI]
+  padAngle = 0
+  sortFunction = undefined
+  cornerRadius = 0
+  color = undefined
+  radius = undefined
+  arcWidth = 20
+  centralLabel = undefined
+  centralSubLabel = undefined
+  centralSubLabelWrap = true
+  showEmptySegments = false
+  emptySegmentAngle = 0.5 * Math.PI / 180
+  showBackground = true
+  backgroundAngleRange = undefined
+}