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

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

@@ -1,141 +0,0 @@
-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

@@ -1,221 +0,0 @@
-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/src/components/sankey/types.ts

@@ -1,95 +0,0 @@
-/* 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

@@ -1,49 +0,0 @@
-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
-}