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

package/src/components/bullet-legend/config.ts

@@ -1,38 +0,0 @@
-import { Config } from 'core/config'
-
-// Local Types
-import { BulletLegendItemInterface } from './types'
-
-export interface BulletLegendConfigInterface {
-  /** Legend items. Array of `BulletLegendItemInterface`:
-   * ```
-   * {
-   *   name: string | number;
-   *   color?: string;
-   *   inactive?: boolean;
-   *   hidden?: boolean;
-   *   pointer?: boolean;
-   * }
-   * ```
-  * Default: `[]` */
-  items: BulletLegendItemInterface[];
-  /** Apply a specific class to the labels. Default: `''` */
-  labelClassName?: string;
-  /** Callback function for the legend item click. Default: `undefined` */
-  onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);
-  /** Label text (<span> element) font-size CSS. Default: `null` */
-  labelFontSize?: string | null;
-  /** Label text (<span> element) max-width CSS property. Default: `null` */
-  labelMaxWidth?: string | null;
-  /** Bullet circle size, mapped to the width and height CSS properties. Default: `null` */
-  bulletSize?: string | null;
-}
-
-export class BulletLegendConfig extends Config implements BulletLegendConfigInterface {
-  items: BulletLegendItemInterface[] = []
-  labelClassName = ''
-  onLegendItemClick = undefined
-  labelFontSize = null
-  labelMaxWidth = null
-  bulletSize = null
-}

package/src/components/bullet-legend/index.ts

@@ -1,104 +0,0 @@
-import { select, Selection } from 'd3-selection'
-import { color } from 'd3-color'
-
-// Utils
-import { getColor } from 'utils/color'
-
-// Config
-import { BulletLegendConfig, BulletLegendConfigInterface } from './config'
-
-// Local Types
-import { BulletLegendItemInterface } from './types'
-
-// Styles
-import * as s from './style'
-
-export class BulletLegend {
-  static selectors = s
-  div: Selection<HTMLDivElement, unknown, null, undefined>
-  element: HTMLElement
-  prevConfig: BulletLegendConfig
-  config: BulletLegendConfig
-  protected _container: HTMLElement
-
-  private _colorAccessor = (d: BulletLegendItemInterface): string => d.color
-
-  constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {
-    this._container = element
-
-    // Create SVG element for visualizations
-    this.div = select(this._container)
-      .append('div')
-      .attr('class', s.root)
-
-    this.element = this.div.node()
-
-    if (config) this.update(config)
-  }
-
-  update (config: BulletLegendConfigInterface): void {
-    this.prevConfig = this.config
-    this.config = new BulletLegendConfig().init(config)
-    this.render()
-  }
-
-  render (): void {
-    const { config } = this
-    const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`)
-      .data(config.items)
-
-    const legendItemsEnter = legendItems.enter()
-      .append('div')
-      .attr('class', s.item)
-      .on('click', this._onItemClick.bind(this))
-
-    legendItemsEnter.append('span')
-      .attr('class', s.bullet)
-      .style('width', config.bulletSize)
-      .style('height', config.bulletSize)
-
-    legendItemsEnter.append('span')
-      .attr('class', s.label)
-      .classed(config.labelClassName, true)
-      .style('max-width', config.labelMaxWidth)
-      .style('font-size', config.labelFontSize)
-
-    const legendItemsMerged = legendItemsEnter.merge(legendItems)
-    legendItemsMerged
-      .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))
-      .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)
-    const legendBulletsToUpdate = legendItemsMerged.select(`.${s.bullet}`)
-    legendBulletsToUpdate.style('background-color', (d: BulletLegendItemInterface, i) => getColor(d, this._colorAccessor, i))
-      .style('border-color', (d: BulletLegendItemInterface, i) => getColor(d, this._colorAccessor, i))
-    legendBulletsToUpdate.each((d, i, elements) => {
-      if (d.inactive) {
-        const bulletColor = window.getComputedStyle(elements[i] as Element).getPropertyValue('background-color')
-        const transparentColor = color(bulletColor)
-        transparentColor.opacity = 0.4
-        select(elements[i])
-          .style('background-color', transparentColor.toString())
-      }
-    })
-
-    legendItemsMerged.select(`.${s.label}`)
-      .text((d: BulletLegendItemInterface) => d.name)
-
-    legendItems.exit().remove()
-  }
-
-  _isItemClickable (item: BulletLegendItemInterface): boolean {
-    return item.pointer === undefined ? true : item.pointer
-  }
-
-  _onItemClick (event: MouseEvent, d: BulletLegendItemInterface): void {
-    const { config: { onLegendItemClick } } = this
-
-    const legendItems = this.div.selectAll(`.${s.item}`).nodes() as HTMLElement[]
-    const index = legendItems.indexOf(event.currentTarget as HTMLElement)
-    if (onLegendItemClick) onLegendItemClick(d, index)
-  }
-
-  public destroy (): void {
-    this.div.remove()
-  }
-}

package/src/components/bullet-legend/types.ts

@@ -1,7 +0,0 @@
-export interface BulletLegendItemInterface {
-  name: string | number;
-  color?: string;
-  inactive?: boolean;
-  hidden?: boolean;
-  pointer?: boolean;
-}

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

@@ -1,53 +0,0 @@
-/* eslint-disable dot-notation */
-
-// Core
-import { ComponentConfigInterface, ComponentConfig } from 'core/component/config'
-
-// Types
-import { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'
-
-// Local Types
-import { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNodeDatum } from './types'
-
-export interface ChordDiagramConfigInterface<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfigInterface {
-  /** Link color accessor function. Default: `var(--vis-chord-diagram-link-fill-color)` */
-  linkColor?: ColorAccessor<L>;
-  /** Link value accessor function. Default: `l => l.value` */
-  linkValue?: NumericAccessor<L>;
-  /** Array of node hierarchy levels. Data records are supposed to have corresponding properties, e.g. ['level1', 'level2']. Default: `[]` */
-  nodeLevels?: string[];
-  /** Node width in pixels. Default: `15` */
-  nodeWidth?: number;
-  /** Node color accessor function ot constant value. Default: `d => d.color` */
-  nodeColor?: ColorAccessor<ChordNodeDatum<N>>;
-  /** Node label accessor function. Default: `d => d.label ?? d.key` */
-  nodeLabel?: StringAccessor<ChordNodeDatum<N>>;
-  /** Node label color accessor function. Default: `undefined` */
-  nodeLabelColor?: StringAccessor<ChordNodeDatum<N>>;
-  /** Node label alignment. Default: `ChordLabelAlignment.Along` */
-  nodeLabelAlignment?: GenericAccessor<ChordLabelAlignment | string, ChordNodeDatum<N>>;
-  /** Pad angle in radians. Constant value or accessor function. Default: `0.02` */
-  padAngle?: NumericAccessor<N>;
-  /** Corner radius constant value or accessor function. Default: `2` */
-  cornerRadius?: NumericAccessor<N>;
-  /** Angular range of the diagram. Default: `[0, 2 * Math.PI]` */
-  angleRange?: [number, number];
-  /** The exponent property of the radius scale. Default: `2` */
-  radiusScaleExponent?: number;
-}
-
-export class ChordDiagramConfig<N extends ChordInputNode, L extends ChordInputLink> extends ComponentConfig implements ChordDiagramConfigInterface<N, L> {
-  duration = 800
-  linkColor = undefined
-  linkValue = (d: L): number => d['value']
-  nodeLevels = []
-  nodeWidth = 15
-  nodeColor = (d: ChordNodeDatum<N>): string => d['color']
-  nodeLabel = (d: ChordNodeDatum<N>): string => d['label'] ?? d['key']
-  nodeLabelColor = undefined
-  nodeLabelAlignment = ChordLabelAlignment.Along
-  padAngle = 0.02
-  cornerRadius = 2
-  angleRange: [number, number] = [0, 2 * Math.PI]
-  radiusScaleExponent = 2
-}

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

@@ -1,401 +0,0 @@
-import { Selection } from 'd3-selection'
-import { nest } from 'd3-collection'
-import { HierarchyNode, hierarchy, partition } from 'd3-hierarchy'
-import { arc, line } from 'd3-shape'
-import { scalePow, ScalePower } from 'd3-scale'
-import { max } from 'd3-array'
-
-// Core
-import { ComponentCore } from 'core/component'
-import { GraphDataModel } from 'data-models/graph'
-
-// Utils
-import { getNumber, isNumber, groupBy, getString, getValue } from 'utils/data'
-import { estimateStringPixelLength } from 'utils/text'
-
-// Types
-import { GraphNodeCore } from 'types/graph'
-import { Spacing } from 'types/spacing'
-import { Curve } from 'types/curve'
-
-// Local Types
-import {
-  ChordInputNode,
-  ChordInputLink,
-  ChordDiagramData,
-  ChordHierarchyNode,
-  ChordNode,
-  ChordRibbon,
-  ChordLabelAlignment,
-  ChordLeafNode,
-  ChordRibbonPoint,
-  ChordNodeDatum,
-} from './types'
-
-// Config
-import { ChordDiagramConfig, ChordDiagramConfigInterface } from './config'
-
-// Modules
-import { createNode, updateNode, removeNode } from './modules/node'
-import { createLabel, updateLabel, removeLabel, LABEL_PADDING } from './modules/label'
-import { createLink, updateLink, removeLink } from './modules/link'
-
-// Styles
-import * as s from './style'
-
-export class ChordDiagram<
-  N extends ChordInputNode,
-  L extends ChordInputLink,
-> extends ComponentCore<
-  ChordDiagramData<N, L>,
-  ChordDiagramConfig<N, L>,
-  ChordDiagramConfigInterface<N, L>
-  > {
-  static selectors = s
-  config: ChordDiagramConfig<N, L> = new ChordDiagramConfig()
-  datamodel: GraphDataModel<N, L> = new GraphDataModel()
-
-  nodeGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  linkGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  labelGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  arcGen = arc<ChordNode<N>>()
-  radiusScale: ScalePower<number, number> = scalePow()
-  private _nodes: ChordNode<N>[] = []
-  private _links: ChordRibbon<N>[] = []
-  private _rootNode: ChordNode<N>
-
-  events = {
-    [ChordDiagram.selectors.node]: {
-      mouseover: this._onNodeMouseOver.bind(this),
-      mouseout: this._onNodeMouseOut.bind(this),
-    },
-    [ChordDiagram.selectors.link]: {
-      mouseover: this._onLinkMouseOver.bind(this),
-      mouseout: this._onLinkMouseOut.bind(this),
-    },
-  }
-
-  constructor (config?: ChordDiagramConfigInterface<N, L>) {
-    super()
-    if (config) this.config.init(config)
-    this.linkGroup = this.g.append('g').attr('class', s.links)
-    this.nodeGroup = this.g.append('g').attr('class', s.nodes)
-    this.labelGroup = this.g.append('g').attr('class', s.labels)
-  }
-
-  get bleed (): Spacing {
-    const { config } = this
-    let top = 0; let bottom = 0; let right = 0; let left = 0
-    const padding = 4 + LABEL_PADDING * 2
-    this._nodes.forEach(n => {
-      const nodeLabelAlignment = getValue(n.data, config.nodeLabelAlignment)
-      if (n.height === 0 && nodeLabelAlignment === ChordLabelAlignment.Perpendicular) {
-        const labelWidth = estimateStringPixelLength(getString(n.data as N, config.nodeLabel) ?? '', 16)
-        const [x, y] = this.arcGen.centroid(n)
-
-        if (x < 0) left = Math.max(left, labelWidth)
-        else right = Math.max(right, labelWidth)
-
-        if (y < 0) top = Math.max(top, labelWidth)
-        else bottom = Math.max(bottom, labelWidth)
-      }
-    })
-    left += padding
-    right += padding
-    bottom += padding
-    top += padding
-    return { top, bottom, left, right }
-  }
-
-  _render (customDuration?: number): void {
-    super._render(customDuration)
-    const { config, config: { radiusScaleExponent }, radiusScale } = this
-    const nodes = this._getHierarchyNodes()
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-
-    this.arcGen
-      .startAngle(d => d.x0)
-      .endAngle(d => d.x1)
-      .cornerRadius(d => getNumber(d, config.cornerRadius))
-      .innerRadius(d => this.radiusScale(d.y1) - getNumber(d, config.nodeWidth))
-      .outerRadius(d => this.radiusScale(d.y1))
-
-    const linkLineGen = line().curve(Curve.catmullRom.alpha(0.25))
-
-    const hierarchyData = nodes
-
-    const partitionData = partition<N | ChordHierarchyNode<N>>().size([config.angleRange[1], 1])(hierarchyData) as ChordNode<N>
-    this._calculateRadialPosition(partitionData)
-
-    const size = Math.min(this._width, this._height)
-    const radius = size / 2 - max([this.bleed.top, this.bleed.bottom, this.bleed.left, this.bleed.right])
-    const labelWidth = size - radius - config.nodeWidth
-
-    radiusScale
-      .exponent(radiusScaleExponent)
-      .range([0, radius])
-
-    const partitionDataWithRoot = partitionData.descendants()
-    this._rootNode = partitionDataWithRoot.find(d => d.depth === 0)
-    this._nodes = partitionDataWithRoot.filter(d => d.depth !== 0) // Filter out the root node
-    this._links = this._getRibbons(partitionData)
-
-    // Create Node and Link state objects
-    this._nodes.forEach((node, i) => {
-      // Add hierarchy data for non leaf nodes
-      if (node.children) {
-        node.data = Object.assign(node.data, {
-          depth: node.depth,
-          height: node.height,
-          value: node.value,
-          ancestors: node.ancestors().map(d => (d.data as ChordHierarchyNode<N>).key),
-        })
-      }
-      node.x0 = Number.isNaN(node.x0) ? 0 : node.x0
-      node.x1 = Number.isNaN(node.x1) ? 0 : node.x1
-      node.uid = `${this.uid}-n${i}`
-      node._state = {}
-    })
-    this._links.forEach(link => { link._state = {} })
-
-    // Center the view
-    this.g.attr('transform', `translate(${this._width / 2},${this._height / 2})`)
-
-    // Links
-    const linksSelection = this.linkGroup
-      .selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)
-      .data(this._links, d => String(d.data._id))
-
-    const linksEnter = linksSelection.enter().append('path')
-      .attr('class', s.link)
-      .call(createLink, linkLineGen)
-
-    const linksMerged = linksSelection.merge(linksEnter)
-    linksMerged.call(updateLink, config, linkLineGen, duration)
-
-    linksSelection.exit()
-      .call(removeLink, duration)
-
-    // Nodes
-    const nodesSelection = this.nodeGroup
-      .selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)
-      .data(this._nodes, d => String(d.uid))
-
-    const nodesEnter = nodesSelection.enter().append('path')
-      .attr('class', s.node)
-      .call(createNode, config)
-
-    const nodesMerged = nodesSelection.merge(nodesEnter)
-    nodesMerged.call(updateNode, config, this.arcGen, duration)
-
-    nodesSelection.exit()
-      .call(removeNode, duration)
-
-    // Labels
-    const labels = this.labelGroup
-      .selectAll<SVGGElement, ChordNode<N>>(`.${s.gLabel}`)
-      .data(this._nodes, d => String(d.uid))
-
-    const labelEnter = labels.enter().append('g')
-      .attr('class', s.gLabel)
-      .call(createLabel, config, radiusScale)
-
-    const labelsMerged = labels.merge(labelEnter)
-    labelsMerged.call(updateLabel, config, labelWidth, radiusScale, duration)
-
-    labels.exit()
-      .attr('class', s.labelExit)
-      .call(removeLabel, duration)
-  }
-
-  private _getHierarchyNodes (): HierarchyNode<ChordNodeDatum<N>> {
-    const { config, datamodel: { nodes, links } } = this
-    nodes.forEach(n => { delete n._state.value })
-    links.forEach(l => {
-      delete l._state.points
-      l.source._state.value = (l.source._state.value || 0) + getNumber(l, config.linkValue)
-      l.target._state.value = (l.target._state.value || 0) + getNumber(l, config.linkValue)
-    })
-
-    // TODO: Replace with d3-group
-    const nestGen = nest<N>()
-    config.nodeLevels.forEach(levelAccessor => {
-      nestGen.key(d => d[levelAccessor])
-    })
-    const root = { key: 'root', values: nestGen.entries(nodes) }
-    const hierarchyNodes = hierarchy(root, d => d.values)
-      .sum((d) => (d as unknown as GraphNodeCore<N, L>)._state?.value)
-
-    return hierarchyNodes
-  }
-
-  private _getRibbons (partitionData: ChordNode<N>): ChordRibbon<N>[] {
-    const { config, datamodel: { links } } = this
-    const findNode = (
-      nodes: ChordLeafNode<N>[],
-      id: string
-    ): ChordLeafNode<N> => nodes.find(n => n.data._id === id)
-    const leafNodes = partitionData.leaves() as ChordLeafNode<N>[]
-
-    type LinksArrayType = typeof links
-    const groupedBySource: Record<string, LinksArrayType> = groupBy(links, d => d.source._id)
-    const groupedByTarget: Record<string, LinksArrayType> = groupBy(links, d => d.target._id)
-
-    const getNodesInRibbon = (
-      source: ChordLeafNode<N>,
-      target: ChordLeafNode<N>,
-      partitionHeight: number,
-      nodes: ChordLeafNode<N>[] = []
-    ): ChordNode<N>[] => {
-      nodes[source.height] = source
-      nodes[partitionHeight * 2 - target.height] = target
-      if (source.parent && target.parent) getNodesInRibbon(source.parent, target.parent, partitionHeight, nodes)
-      return nodes
-    }
-
-    const calculatePoints = (
-      links: LinksArrayType,
-      type: 'in' | 'out',
-      depth: number
-    ): void => {
-      links.forEach(link => {
-        if (!link._state.points) link._state.points = []
-        const sourceLeaf = findNode(leafNodes, link.source._id)
-        const targetLeaf = findNode(leafNodes, link.target._id)
-        const nodesInRibbon = getNodesInRibbon(
-          type === 'out' ? sourceLeaf : targetLeaf,
-          type === 'out' ? targetLeaf : sourceLeaf,
-          partitionData.height)
-        const currNode = nodesInRibbon[depth]
-        const len = currNode.x1 - currNode.x0
-        const x0 = currNode._prevX1 ?? currNode.x0
-        const x1 = x0 + len * getNumber(link, config.linkValue) / currNode.value
-        currNode._prevX1 = x1
-
-        const pointIdx = type === 'out' ? depth : partitionData.height * 2 - 1 - depth
-        link._state.points[pointIdx] = this._convertRadialToCartesian(
-          Math.min(x0, x1),
-          Math.max(x0, x1),
-          currNode.y1,
-          config.nodeWidth
-        )
-      })
-    }
-
-    leafNodes.forEach(leafNode => {
-      const outLinks = groupedBySource[leafNode.data._id] || []
-      const inLinks = groupedByTarget[leafNode.data._id] || []
-      for (let depth = 0; depth < partitionData.height; depth += 1) {
-        calculatePoints(outLinks, 'out', depth)
-        calculatePoints(inLinks, 'in', depth)
-      }
-    })
-
-    const ribbons = links.map(l => {
-      const sourceNode = findNode(leafNodes, l.source._id)
-      const targetNode = findNode(leafNodes, l.target._id)
-
-      return {
-        source: sourceNode,
-        target: targetNode,
-        data: l,
-        points: l._state.points,
-        _state: {},
-      }
-    })
-
-    return ribbons
-  }
-
-  private _convertRadialToCartesian (x0: number, x1: number, y: number, nodeWidth: number): ChordRibbonPoint {
-    const r = Math.max(this.radiusScale(y) - nodeWidth, 0)
-    const a0 = x0 - Math.PI / 2
-    const a1 = x1 - Math.PI / 2
-
-    return {
-      a0,
-      a1,
-      r,
-      x0: r * Math.cos(a0),
-      x1: r * Math.cos(a1),
-      y0: r * Math.sin(a0),
-      y1: r * Math.sin(a1),
-    }
-  }
-
-  private _calculateRadialPosition (
-    hierarchyNode: ChordNode<N>,
-    scalingCoeff = 0.95,
-    nodePadding = 0.02
-  ): void {
-    if (!hierarchyNode.children) return
-
-    // Calculate x0 and x1
-    const nodeLength = (hierarchyNode.x1 - hierarchyNode.x0)
-    const scaledNodeLength = nodeLength * scalingCoeff
-    const delta = nodeLength - scaledNodeLength
-    let x0 = hierarchyNode.x0 + delta / 2
-    for (const node of hierarchyNode.children) {
-      const childX0 = x0
-      const childX1 = x0 + (node.value / hierarchyNode.value) * scaledNodeLength - nodePadding / 2
-      const childNodeLength = childX1 - childX0
-      const scaledChildNodeLength = childNodeLength * scalingCoeff
-      const childDelta = childNodeLength - scaledChildNodeLength
-      node.x0 = childX0 + childDelta / 2
-      node.x1 = node.x0 + scaledChildNodeLength
-      x0 = childX1 + nodePadding / 2 + childDelta / 2
-    }
-    // Go deeper in the hierarchy
-    for (const node of hierarchyNode.children) {
-      this._calculateRadialPosition(node, scalingCoeff, nodePadding)
-    }
-  }
-
-  private _onNodeMouseOver (d: ChordNode<N>): void {
-    let ribbons: ChordRibbon<N>[]
-    if (d.children) {
-      const leaves = d.leaves() as ChordLeafNode<N>[]
-      ribbons = this._links.filter(l =>
-        leaves.find(leaf => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)
-      )
-    } else {
-      const leaf = d as ChordLeafNode<N>
-      ribbons = this._links.filter(l => l.source.data.id === leaf.data.id || l.target.data.id === leaf.data.id)
-    }
-    this._highlightOnHover(ribbons)
-  }
-
-  private _onNodeMouseOut (): void {
-    this._highlightOnHover()
-  }
-
-  private _onLinkMouseOver (d: ChordRibbon<N>): void {
-    this._highlightOnHover([d])
-  }
-
-  private _onLinkMouseOut (): void {
-    this._highlightOnHover()
-  }
-
-  private _highlightOnHover (links?: ChordRibbon<N>[]): void {
-    if (links) {
-      links.forEach(l => {
-        l._state.hovered = true
-        const sourcePath = (l.source as ChordNode<N>).path(this._rootNode)
-        const targetPath = (l.target as ChordNode<N>).path(this._rootNode)
-        sourcePath.forEach(n => { if (n.depth) n._state.hovered = true })
-        targetPath.forEach(n => { if (n.depth) n._state.hovered = true })
-      })
-    } else {
-      this._nodes.forEach(n => { delete n._state.hovered })
-      this._links.forEach(l => { delete l._state.hovered })
-    }
-
-    this.nodeGroup.selectAll<SVGPathElement, ChordNode<N>>(`.${s.node}`)
-      .classed(s.hoveredNode, d => d._state.hovered)
-    this.linkGroup.selectAll<SVGPathElement, ChordRibbon<N>>(`.${s.link}`)
-      .classed(s.hoveredLink, d => d._state.hovered)
-
-    this.g.classed(s.transparent, !!links)
-  }
-}