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

package/src/components/sankey/modules/link.ts

@@ -0,0 +1,141 @@
+import { Selection } from 'd3-selection'
+import { Transition } from 'd3-transition'
+import { interpolateNumber } from 'd3-interpolate'
+
+// Utils
+import { getColor } from 'utils/color'
+import { getString } from 'utils/data'
+import { smartTransition } from 'utils/d3'
+
+// Local Types
+import { SankeyInputLink, SankeyInputNode, SankeyLink } from '../types'
+
+// Config
+import { SankeyConfig } from '../config'
+
+// Styles
+import * as s from '../style'
+
+export type LinkPathOptions = {
+  x0: number;
+  x1: number;
+  y0: number;
+  y1: number;
+  width: number;
+}
+
+export function linkPath ({ x0, x1, y0, y1, width }: LinkPathOptions): string {
+  const top0 = y0 - width / 2
+  const top1 = y1 - width / 2
+  const bottom0 = y0 + width / 2
+  const bottom1 = y1 + width / 2
+  const centerX = (x0 + x1) / 2
+
+  return `
+    M ${x0}, ${top0}
+
+    C ${centerX}, ${top0}
+      ${centerX}, ${top1}
+      ${x1}, ${top1}
+
+    L ${x1}, ${bottom1}
+
+    C ${centerX}, ${bottom1}
+      ${centerX}, ${bottom0}
+      ${x0}, ${bottom0}
+    z
+  `
+}
+
+export function createLinks<N extends SankeyInputNode, L extends SankeyInputLink> (
+  sel: Selection<SVGGElement, SankeyLink<N, L>, SVGGElement, unknown>
+): void {
+  sel.append('path').attr('class', s.linkPath)
+    .attr('d', (d: SankeyLink<N, L>, i, el) => {
+    // eslint-disable-next-line dot-notation
+      el[i]['_animState'] = {
+        x0: d.source.x1,
+        x1: d.target.x0,
+        y0: d.y0,
+        y1: d.y1,
+        width: Math.max(1, d.width),
+      }
+      // eslint-disable-next-line dot-notation
+      return linkPath(el[i]['_animState'])
+    })
+  sel.append('path').attr('class', s.linkSelectionHelper)
+  sel.style('opacity', 0)
+}
+
+export function updateLinks<N extends SankeyInputNode, L extends SankeyInputLink> (
+  sel: Selection<SVGGElement, SankeyLink<N, L>, SVGGElement, unknown>,
+  config: SankeyConfig<N, L>,
+  duration: number
+): void {
+  smartTransition(sel, duration)
+    .style('opacity', (d: SankeyLink<N, L>) => d._state.greyout ? 0.2 : 1)
+
+  const linkSelection = sel.select<SVGPathElement>(`.${s.linkPath}`)
+    .style('cursor', (d: SankeyLink<N, L>) => getString(d, config.linkCursor))
+
+  const selectionTransition = smartTransition(linkSelection, duration)
+    .style('fill', (link: SankeyLink<N, L>) => getColor(link, config.linkColor))
+
+  if (duration) {
+    (selectionTransition as Transition<SVGPathElement, SankeyLink<N, L>, SVGGElement, unknown>)
+      .attrTween('d', (d: SankeyLink<N, L>, i, el) => {
+      // eslint-disable-next-line dot-notation
+        const previous = el[i]['_animState']
+        const next = {
+          x0: d.source.x1,
+          x1: d.target.x0,
+          y0: d.y0,
+          y1: d.y1,
+          width: Math.max(1, d.width),
+        }
+        const interpolator = {
+          x0: interpolateNumber(previous.x0, next.x0),
+          x1: interpolateNumber(previous.x1, next.x1),
+          y0: interpolateNumber(previous.y0, next.y0),
+          y1: interpolateNumber(previous.y1, next.y1),
+          width: interpolateNumber(previous.width, next.width),
+        }
+        // eslint-disable-next-line dot-notation
+        el[i]['_animState'] = next
+
+        return function (t: number) {
+          return linkPath({
+            x0: interpolator.x0(t),
+            x1: interpolator.x1(t),
+            y0: interpolator.y0(t),
+            y1: interpolator.y1(t),
+            width: interpolator.width(t),
+          })
+        }
+      })
+  } else {
+    linkSelection.attr('d', (d: SankeyLink<N, L>) => linkPath({
+      x0: d.source.x1,
+      x1: d.target.x0,
+      y0: d.y0,
+      y1: d.y1,
+      width: Math.max(1, d.width),
+    }))
+  }
+
+  sel.select(`.${s.linkSelectionHelper}`)
+    .attr('d', (d: SankeyLink<N, L>) => linkPath({
+      x0: d.source.x1,
+      x1: d.target.x0,
+      y0: d.y0,
+      y1: d.y1,
+      width: Math.max(10, d.width),
+    }))
+    .style('cursor', d => getString(d, config.linkCursor))
+}
+
+export function removeLinks<N extends SankeyInputNode, L extends SankeyInputLink> (
+  sel: Selection<SVGGElement, SankeyLink<N, L>, SVGGElement, unknown>
+): void {
+  sel.remove()
+}

package/src/components/sankey/modules/node.ts

@@ -0,0 +1,221 @@
+import { select, Selection } from 'd3-selection'
+
+// Utils
+import { getColor } from 'utils/color'
+import { getString } from 'utils/data'
+import { smartTransition } from 'utils/d3'
+
+// Types
+import { Spacing } from 'types/spacing'
+
+// Local Types
+import { SankeyEnterTransitionType, SankeyExitTransitionType, SankeyInputLink, SankeyInputNode, SankeyNode, SankeyNodeAlign } from '../types'
+
+// Config
+import { SankeyConfig } from '../config'
+
+// Helpers
+import { renderLabel } from './label'
+
+// Styles
+import * as s from '../style'
+
+export function createNodes<N extends SankeyInputNode, L extends SankeyInputLink> (
+  sel: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, unknown>,
+  config: SankeyConfig<N, L>,
+  width: number,
+  bleed: Spacing
+): void {
+  const { enterTransitionType } = config
+
+  // Node
+  sel.append('rect')
+    .attr('class', s.node)
+    .attr('width', config.nodeWidth)
+    .attr('height', d => d.y1 - d.y0)
+    .style('fill', node => getColor(node, config.nodeColor))
+
+  // Labels
+  const labelGroup = sel.append('g').attr('class', s.labelGroup)
+  labelGroup.append('path').attr('class', s.labelBackground)
+  labelGroup.append('text').attr('class', s.label)
+  labelGroup.append('text').attr('class', s.sublabel)
+
+  // Node icon
+  sel.append('text').attr('class', s.nodeIcon)
+    .attr('text-anchor', 'middle')
+    .attr('dy', '0.5px')
+
+  sel
+    .attr('transform', d => {
+      const x = (enterTransitionType === SankeyEnterTransitionType.FromAncestor && d.targetLinks?.[0]) ? d.targetLinks[0].source.x0 : d.x0
+      return `translate(${sel.size() === 1 ? width * 0.5 - bleed.left : x}, ${d.y0})`
+    })
+    .style('opacity', 0)
+}
+
+function getNodeXPos<N extends SankeyInputNode, L extends SankeyInputLink> (
+  d: SankeyNode<N, L>,
+  config: SankeyConfig<N, L>,
+  width: number,
+  bleed: Spacing,
+  hasLinks: boolean
+): number {
+  if (hasLinks) return d.x0
+
+  switch (config.nodeAlign) {
+    case SankeyNodeAlign.Left: return d.x0
+    case SankeyNodeAlign.Right: return width - bleed.right
+    case SankeyNodeAlign.Center:
+    case SankeyNodeAlign.Justify:
+    default: return width * 0.5 - bleed.left
+  }
+}
+
+export function updateNodes<N extends SankeyInputNode, L extends SankeyInputLink> (
+  sel: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, unknown>,
+  config: SankeyConfig<N, L>,
+  width: number,
+  bleed: Spacing,
+  hasLinks: boolean,
+  duration: number
+): void {
+  smartTransition(sel, duration)
+    .attr('transform', d => `translate(${getNodeXPos(d, config, width, bleed, hasLinks)},${d.y0})`)
+    .style('opacity', d => d._state.greyout ? 0.2 : 1)
+
+  // Node
+  smartTransition(sel.select(`.${s.node}`), duration)
+    .attr('width', config.nodeWidth)
+    .attr('height', (d: SankeyNode<N, L>) => d.y1 - d.y0)
+    .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.nodeCursor))
+    .style('fill', (d: SankeyNode<N, L>) => getColor(d, config.nodeColor))
+
+  // Label Rendering
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  renderNodeLabels(sel, config, width, duration)
+
+  // Node Icon
+  const nodeIcon = sel.select(`.${s.nodeIcon}`)
+  if (config.nodeIcon) {
+    nodeIcon
+      .attr('visibility', null)
+      .attr('text-anchor', 'middle')
+      .attr('alignment-baseline', 'middle')
+      .style('stroke', (d: SankeyNode<N, L>) => getColor(d, config.nodeIconColor))
+      .style('fill', (d: SankeyNode<N, L>) => getColor(d, config.nodeIconColor))
+      .style('font-size', (d: SankeyNode<N, L>) => {
+        const nodeHeight = d.y1 - d.y0
+        return nodeHeight < s.SANKEY_ICON_SIZE ? `${nodeHeight * 0.65}px` : null
+      })
+      .html(config.nodeIcon)
+
+    smartTransition(nodeIcon, duration)
+      .attr('x', config.nodeWidth / 2)
+      .attr('y', (d: SankeyNode<N, L>) => (d.y1 - d.y0) / 2)
+  } else {
+    nodeIcon
+      .attr('visibility', 'hidden')
+  }
+}
+
+export function renderNodeLabels<N extends SankeyInputNode, L extends SankeyInputLink> (
+  sel: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, unknown>,
+  config: SankeyConfig<N, L>,
+  width: number,
+  duration: number,
+  enforceNodeVisibility?: SankeyNode<N, L>
+): void {
+  // Label Rendering
+  const labelGroupSelection: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, any> = sel.select(`.${s.labelGroup}`)
+  const labelGroupEls = labelGroupSelection.nodes() || []
+
+  // After rendering Label return a BBox so we can do intersection detection and hide some of tem
+  const labelGroupBBoxes = labelGroupEls.map(g => {
+    const gSelection: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, any> = select(g)
+    const datum = gSelection.datum()
+    return renderLabel(gSelection, datum, config, width, duration, enforceNodeVisibility === datum)
+  })
+
+  if (config.labelVisibility) {
+    for (const b of labelGroupBBoxes) {
+      const datum = b.selection.datum() as SankeyNode<N, L>
+      const box = { x: b.x, y: b.y, width: b.width, height: b.height }
+      b.hidden = !config.labelVisibility(datum, box, enforceNodeVisibility === datum)
+    }
+  } else {
+    // Detect intersecting labels
+    const maxLayer = Math.max(...labelGroupBBoxes.map(b => b.layer))
+    for (let layer = 0; layer <= maxLayer; layer += 1) {
+      const boxes = labelGroupBBoxes.filter(b => (b.layer === layer))
+      boxes.sort((a, b) => a.y - b.y)
+
+      let lastVisibleIdx = 0
+      for (let i = 1; i < boxes.length; i += 1) {
+        const b0 = boxes[lastVisibleIdx]
+        const b1 = boxes[i]
+
+        const shouldBeHidden = b1.y < (b0.y + b0.height)
+        if (shouldBeHidden) {
+          if (b1.selection.datum() === enforceNodeVisibility) b0.hidden = true // If the hovered node should be hidden, hide the previous one instead
+          else b1.hidden = true
+        }
+
+        if (!b1.hidden) lastVisibleIdx = i
+      }
+    }
+  }
+
+  // Hide intersecting labels
+  for (const b of labelGroupBBoxes) {
+    b.selection.classed(s.hidden, b.hidden)
+  }
+}
+
+export function removeNodes<N extends SankeyInputNode, L extends SankeyInputLink> (
+  selection: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, unknown>,
+  config: SankeyConfig<N, L>,
+  duration: number
+): void {
+  const { exitTransitionType } = config
+
+  selection.each((d, i, els) => {
+    const node = select(els[i])
+    const transition = smartTransition(node, duration)
+    if ((exitTransitionType === SankeyExitTransitionType.ToAncestor) && d.targetLinks?.[0]) {
+      transition.attr('transform', `translate(${d.targetLinks[0].source.x0},${d.y0})`)
+    }
+
+    transition
+      .style('opacity', 0)
+      .remove()
+  })
+}
+
+export function onNodeMouseOver<N extends SankeyInputNode, L extends SankeyInputLink> (
+  d: SankeyNode<N, L>,
+  nodeSelection: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, unknown>,
+  config: SankeyConfig<N, L>,
+  width: number
+): void {
+  const labelGroup = nodeSelection.raise()
+    .select<SVGGElement>(`.${s.labelGroup}`)
+
+  if ((config.labelExpandTrimmedOnHover && labelGroup.classed(s.labelTrimmed)) || labelGroup.classed(s.hidden)) {
+    renderLabel(labelGroup, d, config, width, 0, true)
+  }
+  labelGroup.classed(s.forceShow, true)
+}
+
+export function onNodeMouseOut<N extends SankeyInputNode, L extends SankeyInputLink> (
+  d: SankeyNode<N, L>,
+  nodeSelection: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, unknown>,
+  config: SankeyConfig<N, L>,
+  width: number
+): void {
+  const labelGroup = nodeSelection.select<SVGGElement>(`.${s.labelGroup}`)
+  if (config.labelExpandTrimmedOnHover || labelGroup.classed(s.hidden)) {
+    renderLabel(labelGroup, d, config, width, 0)
+  }
+  labelGroup.classed(s.forceShow, false)
+}

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

@@ -1,11 +1,13 @@
-import { css, injectGlobal } from '@emotion/css';
-import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from '../../styles/index.js';
+import { css, injectGlobal } from '@emotion/css'
+import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'
 
-const SANKEY_ICON_SIZE = 22;
-const root = css `
+export const SANKEY_ICON_SIZE = 22
+
+export const root = css`
   label: sankey-component;
-`;
-const variables = injectGlobal `
+`
+
+export const variables = injectGlobal`
   :root {
      /* Links */
     --vis-sankey-link-cursor: default;
@@ -57,14 +59,17 @@ const variables = injectGlobal `
     --vis-sankey-node-label-background-stroke-color: var(--vis-dark-sankey-label-background-stroke-color);
     --vis-sankey-icon-color: var(--vis-dark-sankey-icon-color);
   }
-`;
-const links = css `
+`
+
+export const links = css`
   label: links;
-`;
-const nodes = css `
+`
+
+export const nodes = css`
   label: nodes;
-`;
-const link = css `
+`
+
+export const link = css`
   label: link;
 
   path {
@@ -78,22 +83,27 @@ const link = css `
       fill-opacity: var(--vis-sankey-link-hover-opacity);
     }
   }
-`;
-const linkPath = css `
+`
+
+export const linkPath = css`
   label: visible;
-`;
-const linkSelectionHelper = css `
+`
+
+export const linkSelectionHelper = css`
   label: transparent;
   opacity: 0;
-`;
-const labelGroup = css `
+`
+
+export const labelGroup = css`
   label: label-group;
   cursor: var(--vis-sankey-node-label-cursor);
-`;
-const labelTrimmed = css `
+`
+
+export const labelTrimmed = css`
   label: label-trimmed;
-`;
-const label = css `
+`
+
+export const label = css`
   label: label;
   dominant-baseline: hanging;
 
@@ -106,8 +116,9 @@ const label = css `
     font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));
     dominant-baseline: hanging;
   }
-`;
-const sublabel = css `
+`
+
+export const sublabel = css`
   label: sub-label;
   dominant-baseline: hanging;
 
@@ -119,25 +130,30 @@ const sublabel = css `
     font-weight: var(--vis-sankey-node-sublabel-font-weight);
     dominant-baseline: hanging;
   }
-`;
-const labelBackground = css `
+`
+
+export const labelBackground = css`
   label: label-background;
   stroke: var(--vis-sankey-node-label-background-stroke-color);
   fill: var(--vis-sankey-node-label-background-fill-color);
   opacity: var(--vis-sankey-node-label-background-opacity);
-`;
-const hidden = css `
+`
+
+export const hidden = css`
   label: hidden;
   visibility: hidden;
-`;
-const forceShow = css `
+`
+
+export const forceShow = css`
   label: forceShow;
   visibility: visible;
-`;
-const nodeGroup = css `
+`
+
+export const nodeGroup = css`
   label: node-group;
-`;
-const node = css `
+`
+
+export const node = css`
   label: node;
 
   cursor: var(--vis-sankey-node-cursor);
@@ -147,8 +163,9 @@ const node = css `
   &:hover {
     opacity: var(--vis-sankey-node-hover-opacity);
   }
-`;
-const nodeIcon = css `
+`
+
+export const nodeIcon = css`
   label: icon;
 
   font-family: var(--vis-sankey-icon-font-family);
@@ -159,13 +176,12 @@ const nodeIcon = css `
   stroke-opacity: var(--vis-sankey-icon-stroke-opacity);
   user-select: none;
   pointer-events: none;
-`;
-const nodeExit = css `
+`
+
+export const nodeExit = css`
   label: node-exit;
-`;
-const background = css `
-  label: background;
-`;
+`
 
-export { SANKEY_ICON_SIZE, background, forceShow, hidden, label, labelBackground, labelGroup, labelTrimmed, link, linkPath, linkSelectionHelper, links, node, nodeExit, nodeGroup, nodeIcon, nodes, root, sublabel, variables };
-//# sourceMappingURL=style.js.map
+export const background = css`
+  label: background;
+`

package/src/components/sankey/types.ts

@@ -0,0 +1,95 @@
+/* eslint-disable no-use-before-define */
+import { sankeyLeft, sankeyRight, sankeyCenter, sankeyJustify } from 'd3-sankey'
+import { GraphInputLink, GraphLinkCore, GraphNodeCore } from 'types/graph'
+import { GraphInputNode } from '../../types'
+
+export type SankeyInputNode = GraphInputNode
+
+export type SankeyInputLink = GraphInputLink
+
+export type SankeyNode<N extends SankeyInputNode, L extends SankeyInputLink> = GraphNodeCore<N, L> & {
+  id: string;
+  /** the node’s value; this is the sum of link.value for the node’s incoming links, or node.fixedValue if defined */
+  value: number;
+  /** */
+  fixedValue?: number;
+  /** the node’s zero-based column index, corresponding to its horizontal position */
+  layer: number;
+  /** */
+  isConnected: boolean;
+  /** the array of incoming links which have this node as their source */
+  sourceLinks?: SankeyLink<N, L>[];
+  /** the array of outgoing links which have this node as their target */
+  targetLinks: SankeyLink<N, L>[];
+  /** the node’s zero-based index within the array of nodes */
+  index: number;
+  /** the node’s zero-based graph depth, derived from the graph topology */
+  depth: number;
+  /** node.height - the node’s zero-based graph height, derived from the graph topology */
+  height: number;
+  /** the node’s minimum horizontal position, derived from node.depth */
+  x0: number;
+  /** the node’s maximum horizontal position (node.x0 + sankey.nodeWidth) */
+  x1: number;
+  /** the node’s minimum vertical position */
+  y0: number;
+  /** the node’s maximum vertical position (node.y1 - node.y0 is proportional to node.value) */
+  y1: number;
+  /** calculated node width */
+  width: number;
+  /** internal ui state */
+  _state?: {
+    greyout?: boolean;
+    /* Pre-calculated node height value in pixels that will be used to manually generate the layout when data has no links */
+    precalculatedHeight?: number;
+  };
+}
+
+export type SankeyLink<N extends SankeyInputNode, L extends SankeyInputLink> = GraphLinkCore<N, L> & {
+  value: number;
+  /** the link’s source node */
+  source: SankeyNode<N, L>;
+  /** the link’s target node */
+  target: SankeyNode<N, L>;
+  /** the link’s vertical starting position (at source node) */
+  y0: number;
+  /** the link’s vertical end position (at target node) */
+  y1: number;
+  /** the link’s width (proportional to link.value) */
+  width: number;
+  /** the zero-based index of link within the array of links */
+  index: number;
+  /** internal ui state */
+  _state?: {
+    greyout?: boolean;
+  };
+}
+
+export enum SankeySubLabelPlacement {
+  Inline = 'inline',
+  Below = 'below',
+}
+
+export enum SankeyNodeAlign {
+  Left = 'left',
+  Right = 'right',
+  Center = 'center',
+  Justify = 'justify',
+}
+
+export const SankeyLayout = {
+  [SankeyNodeAlign.Left]: sankeyLeft,
+  [SankeyNodeAlign.Right]: sankeyRight,
+  [SankeyNodeAlign.Center]: sankeyCenter,
+  [SankeyNodeAlign.Justify]: sankeyJustify,
+}
+
+export enum SankeyExitTransitionType {
+  Default = 'default',
+  ToAncestor = 'to ancestor',
+}
+
+export enum SankeyEnterTransitionType {
+  Default = 'default',
+  FromAncestor = 'from ancestor',
+}

package/src/components/scatter/config.ts

@@ -0,0 +1,49 @@
+import { ScalePower } from 'd3-scale'
+// Core
+import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
+
+// Types
+import { Scale, ContinuousScale } from 'types/scale'
+import { SymbolType } from 'types/symbol'
+import { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'
+import { Position } from 'types/position'
+
+export interface ScatterConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
+  /**
+   * Size of the scatter plot marker (e.g. diameter if `SymbolType.Circle` is used for `shape`) in pixels.
+   * Can be a constant value or an accessor function. But if `sizeRange` is set, then the values will be treated
+   * as an input to `sizeScale`, and the resulting size will be different.
+   * Default: `10`
+  */
+  size?: NumericAccessor<Datum>;
+  /** Size scale to be used if the `sizeRange` was set. Default: `Scale.scaleSqrt()` */
+  sizeScale?: ContinuousScale;
+  /** Size range in the format of `[number, number]` to rescale the input values. Default: `undefined` */
+  sizeRange?: [number, number];
+  /** Shape of the scatter point. Accessor function or constant value: `SymbolType.Circle`, `SymbolType.Cross`, `SymbolType.Diamond`, `SymbolType.Square`,
+   * `SymbolType.Star`, `SymbolType.Triangle` or `SymbolType.Wye`.
+   * Default: `SymbolType.Circle` */
+  shape?: ((d: Datum, i?: number, ...any) => (SymbolType | string)) | SymbolType | string;
+  /** Label accessor function or string. Default: `undefined` */
+  label?: StringAccessor<Datum>;
+  /** Label color. Default: `undefined` */
+  labelColor?: ColorAccessor<Datum>;
+  /** Optional point cursor. Default: `null` */
+  cursor?: StringAccessor<Datum>;
+  /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */
+  labelTextBrightnessRatio?: number;
+  /** Label position. Default: `Position.Bottom` */
+  labelPosition?: GenericAccessor<Position | string, Datum>;
+}
+
+export class ScatterConfig<Datum> extends XYComponentConfig<Datum> implements ScatterConfigInterface<Datum> {
+  size = 10
+  sizeScale: ScalePower<number, number> = Scale.scaleSqrt()
+  sizeRange = undefined
+  shape = SymbolType.Circle
+  label = undefined
+  labelColor = undefined
+  labelPosition = Position.Bottom
+  cursor = null
+  labelTextBrightnessRatio = 0.65
+}