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

package/src/components/graph/modules/shape.ts

@@ -1,108 +0,0 @@
-import { Selection, select } from 'd3-selection'
-
-// Types
-import { NumericAccessor, StringAccessor } from 'types/accessor'
-
-// Utils
-import { polygon } from 'utils/path'
-import { getString } from 'utils/data'
-
-// Types
-
-// Local Types
-import { GraphNodeShape } from '../types'
-
-// Helpers
-import { getNodeSize } from './node/helper'
-
-export function isCustomXml (shape: GraphNodeShape): boolean {
-  return /<[a-z][\s\S]*>/i.test(shape)
-}
-
-export function appendShape<T> (
-  selection: Selection<SVGGElement, T, SVGGElement, unknown>,
-  shapeAccessor: StringAccessor<T>,
-  shapeSelector: string,
-  customShapeSelector: string,
-  index?: number,
-  insertSelector = ':last-child'
-): void {
-  selection.each((d, i, elements) => {
-    const element = select(elements[i])
-    const shape = getString(d, shapeAccessor, index) as GraphNodeShape
-
-    let shapeElement
-    const isCustomXmlShape = isCustomXml(shape)
-    if (isCustomXmlShape) {
-      shapeElement = element.insert('g', insertSelector)
-        .html(shape)
-    } else {
-      switch (shape) {
-        case GraphNodeShape.Square:
-          shapeElement = element.insert('rect', insertSelector)
-            .attr('rx', 5)
-            .attr('ry', 5)
-          break
-        case GraphNodeShape.Hexagon:
-        case GraphNodeShape.Triangle:
-          shapeElement = element.insert('path', insertSelector)
-          break
-        case GraphNodeShape.Circle:
-        default:
-          shapeElement = element.insert('circle', insertSelector)
-      }
-    }
-
-    return shapeElement.attr('class', shapeSelector)
-      .classed(customShapeSelector, isCustomXmlShape)
-  })
-}
-
-export function updateShape<T> (
-  selection: Selection<SVGGElement, T, SVGGElement, unknown>,
-  shape: StringAccessor<T>,
-  size: NumericAccessor<T>,
-  index: number
-): void {
-  if (selection.size() === 0) return
-
-  const d: T = selection.datum()
-  const nodeSize = getNodeSize(d, size, index)
-  selection.filter('circle')
-    .attr('r', nodeSize / 2)
-
-  selection.filter('rect')
-    .attr('width', nodeSize)
-    .attr('height', nodeSize)
-    .attr('x', -nodeSize / 2)
-    .attr('y', -nodeSize / 2)
-
-  selection.filter('path')
-    .attr('d', () => {
-      let n: number
-      switch (getString(d, shape, index)) {
-        case GraphNodeShape.Square:
-          n = 4
-          break
-        case GraphNodeShape.Triangle:
-          n = 3
-          break
-        case GraphNodeShape.Hexagon:
-        default:
-          n = 6
-      }
-
-      return polygon(nodeSize, n)
-    })
-
-  selection.filter('g')
-    .filter(() => !isCustomXml(getString(d, shape, index) as GraphNodeShape))
-    .html(getString(d, shape, index))
-
-  selection.filter('g')
-    .each((d, i, elements) => {
-      const el = select(elements[i])
-      const bBox = el.node().getBBox()
-      el.attr('transform', `translate(${-bBox.width / 2},${-bBox.height / 2})`)
-    })
-}

package/src/components/graph/modules/zoom-levels.ts

@@ -1,6 +0,0 @@
-export enum ZoomLevel {
-  Level0 = 1.0,
-  Level1 = 0.6,
-  Level2 = 0.4,
-  Level3 = 0.2,
-}

package/src/components/graph/style.ts

@@ -1,72 +0,0 @@
-import { css, injectGlobal } from '@emotion/css'
-import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'
-
-// Nodes
-import * as nodeSelectors from './modules/node/style'
-
-// Links
-import * as linkSelectors from './modules/link/style'
-
-export const variables = injectGlobal`
-  :root {
-    --vis-graph-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};
-  }
-`
-
-// General
-export const root = css`
-  label: graph-component;
-`
-
-export const background = css`
-  label: background;
-`
-
-export const graphGroup = css`
-  label: graph-group;
-`
-
-export const zoomOutLevel1 = css`
-  label: zoom-out-level-1;
-
-  ${`.${nodeSelectors.label}`} {
-    rect {
-      stroke: none;
-    }
-  }
-`
-
-export const zoomOutLevel2 = css`
-  label: zoom-out-level-2;
-
-  ${`.${nodeSelectors.label}`} {
-    visibility: visible;
-  }
-
-  ${`.${nodeSelectors.nodeGauge}`} {
-    visibility: visible;
-  }
-
-  ${`.${nodeSelectors.node}`} {
-    stroke-width: 4px;
-  }
-
-  rect${`.${nodeSelectors.node}`} {
-    stroke-width: 2px;
-  }
-
-  ${`.${linkSelectors.gLink}`} {
-    animation: none;
-    stroke-dasharray: none;
-  }
-
-  ${`.${linkSelectors.flowCircle}`} {
-    display: none;
-  }
-
-  ${`.${nodeSelectors.nodeSelection}`} {
-    &${`.${nodeSelectors.nodeSelectionActive}`} {
-      transform: scale(1.15);
-    }
-  }
-`

package/src/components/graph/types.ts

@@ -1,152 +0,0 @@
-// Types
-import { Position } from 'types/position'
-import { GraphInputLink, GraphInputNode, GraphNodeCore, GraphLinkCore } from 'types/graph'
-import { Spacing } from 'types/spacing'
-
-export type GraphNode<
-  N extends GraphInputNode = GraphInputNode,
-  L extends GraphInputLink = GraphInputLink,
-> = GraphNodeCore<N, L> & {
-  x?: number;
-  y?: number;
-
-  _id?: number | string;
-  _index?: number;
-  _state?: {
-    isDragged?: boolean;
-    fx?: number;
-    fy?: number;
-    selected?: boolean;
-    greyout?: boolean;
-  };
-
-  _panels?: GraphPanel<N, L>[];
-  _isConnected?: boolean;
-}
-
-export type GraphLink<
-  N extends GraphInputNode = GraphInputNode,
-  L extends GraphInputLink = GraphInputLink,
-> = GraphLinkCore<N, L> & {
-  id?: number | string;
-  source: number | string | GraphNode<N>;
-  target: number | string | GraphNode<N>;
-
-  _id?: number | string;
-  _direction?: number;
-  _index?: number;
-  _neighbours?: number;
-
-  _state?: {
-    flowAnimTime?: number;
-    hovered?: boolean;
-    selected?: boolean;
-    greyout?: boolean;
-  };
-}
-
-export enum GraphLayoutType {
-  Circular = 'circular',
-  Concentric = 'concentric',
-  Parallel = 'parallel',
-  ParallelHorizontal = 'parallel horizontal',
-  Dagre = 'dagre',
-  Force = 'force',
-  Elk = 'elk',
-}
-
-export type GraphCircleLabel = {
-  text: string;
-  textColor?: string | null;
-  color?: string | null;
-  cursor?: string | null;
-  fontSize?: string | null;
-  radius?: number;
-}
-
-export enum GraphLinkStyle {
-  Dashed = 'dashed',
-  Solid = 'solid',
-}
-
-export enum GraphLinkArrowStyle {
-  Single = 'single',
-  Double = 'double',
-}
-
-export enum GraphNodeShape {
-  Circle = 'circle',
-  Square = 'square',
-  Hexagon = 'hexagon',
-  Triangle = 'triangle',
-}
-
-export type GraphPanelConfig = {
-  /** Panel nodes references by unique ids */
-  nodes: (string|number)[];
-  /** Panel label */
-  label?: string;
-  /** Position of the label */
-  labelPosition?: Position.Top | Position.Bottom | string;
-  /** Color of the panel's border */
-  borderColor?: string;
-  /** Border width of the panel in pixels */
-  borderWidth?: number;
-  /** Inner padding */
-  padding?: number | Spacing;
-  /** Dashed outline showing that the panel is selected */
-  dashedOutline?: boolean;
-  /** Side icon symbol */
-  sideIconSymbol?: string;
-  /** Size of the icon as a CSS string. e.g.: `12pt` or `12px` */
-  sideIconFontSize?: string;
-  /** Color of the icon */
-  sideIconSymbolColor?: string;
-  /** Shape of the icon's background */
-  sideIconShape?: GraphNodeShape | string;
-  /** Size of the icon's background shape */
-  sideIconShapeSize?: number;
-  /** Stroke color of the icon's background shape */
-  sideIconShapeStroke?: string;
-  /** Cursor, when hovering over the icon */
-  sideIconCursor?: string;
-}
-
-export type GraphPanel<
-  N extends GraphInputNode = GraphInputNode,
-  L extends GraphInputLink = GraphInputLink,
-> = GraphPanelConfig & {
-  _numNodes?: number;
-  _x?: number;
-  _y?: number;
-  _width?: number;
-  _height?: number;
-  _disabled?: boolean;
-  _padding?: Spacing;
-}
-
-export type GraphNodeAnimationState = {
-  endAngle: number;
-  nodeIndex: number;
-  nodeSize?: number;
-  borderWidth?: number;
-}
-
-export type GraphNodeAnimatedElement<T = SVGElement> = T & {
-  _animState: GraphNodeAnimationState;
-}
-
-export type GraphForceLayoutSettings = {
-  /** Preferred Link Distance. Default: `60` */
-  linkDistance?: number;
-  /** Link Strength [0:1]. Default: `0.45` */
-  linkStrength?: number;
-  /** Charge Force (<0 repulsion, >0 attraction). Default: `-500` */
-  charge?: number;
-  /** X-centring force. Default: `0.15` */
-  forceXStrength?: number;
-  /** Y-centring force. Default: `0.25` */
-  forceYStrength?: number;
-}
-
-export type GraphElkLayoutSettings = Record<string, string>

package/src/components/grouped-bar/config.ts

@@ -1,40 +0,0 @@
-import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
-
-// Types
-import { StringAccessor } from 'types/accessor'
-import { Orientation } from 'types/position'
-
-export interface GroupedBarConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
-  /** Force set the group width in pixels. Default: `undefined` */
-  groupWidth?: number;
-  /** Maximum group width for dynamic sizing. Limits the groupWidth property from the top. Default: `undefined` */
-  groupMaxWidth?: number;
-  /** Expected step between the bar groups in the X axis units.
-   * Needed to correctly calculate the width of the bar groups when there are gaps in the data.
-   * Default: `undefined` */
-  dataStep?: number;
-  /** Fractional padding between the groups in the range of [0,1). Default: `0.05` */
-  groupPadding?: number;
-  /** Fractional padding between the bars in the range of [0,1). Default: `0` */
-  barPadding?: number;
-  /** Rounded bar corners. Boolean or number (to set the radius in pixels explicitly). Default: `2` */
-  roundedCorners?: number | boolean;
-  /** Sets the minimum bar height for better visibility of small values. Default: `1` */
-  barMinHeight?: number;
-  /** Configurable bar cursor when hovering over. Default: `null` */
-  cursor?: StringAccessor<Datum>;
-  /** Chart orientation: `Orientation.Vertical` or `Orientation.Horizontal`. Default `Orientation.Vertical` */
-  orientation?: Orientation | string;
-}
-
-export class GroupedBarConfig<Datum> extends XYComponentConfig<Datum> implements GroupedBarConfigInterface<Datum> {
-  groupMaxWidth = undefined
-  groupWidth = undefined
-  dataStep = undefined
-  groupPadding = 0.05
-  barPadding = 0.0
-  roundedCorners = 2
-  barMinHeight = 2
-  cursor = null
-  orientation = Orientation.Vertical
-}

package/src/components/grouped-bar/index.ts

@@ -1,325 +0,0 @@
-import { scaleBand } from 'd3-scale'
-import { min, max, range } from 'd3-array'
-import { select } from 'd3'
-
-// Core
-import { XYComponentCore } from 'core/xy-component'
-
-// Utils
-import { clamp, getExtent, getMax, getMin, getNumber, getString, isArray, isEmpty, isNumber } from 'utils/data'
-import { roundedRectPath } from 'utils/path'
-import { smartTransition } from 'utils/d3'
-import { getColor } from 'utils/color'
-
-// Types
-import { NumericAccessor } from 'types/accessor'
-import { Spacing } from 'types/spacing'
-import { Direction } from 'types/direction'
-import { Orientation } from 'types/position'
-import { ContinuousScale } from 'types/scale'
-
-// Config
-import { GroupedBarConfig, GroupedBarConfigInterface } from './config'
-
-// Styles
-import * as s from './style'
-
-export class GroupedBar<Datum> extends XYComponentCore<Datum, GroupedBarConfig<Datum>, GroupedBarConfigInterface<Datum>> {
-  static selectors = s
-  config: GroupedBarConfig<Datum> = new GroupedBarConfig()
-  getAccessors = (): NumericAccessor<Datum>[] =>
-    isArray(this.config.y) ? this.config.y : [this.config.y]
-
-  events = {
-    [GroupedBar.selectors.barGroup]: {
-      mouseover: this._raiseSelection,
-    },
-    [GroupedBar.selectors.bar]: {
-      mouseover: this._raiseSelection,
-    },
-  }
-
-  private _barData: Datum[] = []
-
-  constructor (config?: GroupedBarConfigInterface<Datum>) {
-    super()
-    if (config) this.config.init(config)
-  }
-
-  get bleed (): Spacing {
-    this._barData = this._getVisibleData()
-    if (this._barData.length === 0) return { top: 0, bottom: 0, left: 0, right: 0 }
-
-    // By default, horizontal orientation is "flipped", i.e. the `yDirection` of `XYContainer` is set to `Direction.North`
-    const isHorizontalAndFlipped = !this.isVertical() && (this.dataScale.range()[0] > this.dataScale.range()[1])
-    const dataDomain = this.dataScale.domain()
-    const halfGroupWidth = this._getGroupWidth() / 2
-
-    const dataScaleValues = this._barData.map((d, i) => getNumber(d, this.config.x, i))
-    const firstDataValue = min(dataScaleValues)
-    const lastDataValue = max(dataScaleValues)
-    const firstValuePx = this.dataScale(firstDataValue)
-    const lastValuePx = this.dataScale(lastDataValue)
-
-    const dataDomainRequiredStart = this.dataScale.invert(firstValuePx + (isHorizontalAndFlipped ? halfGroupWidth : -halfGroupWidth))
-    const dataDomainRequiredEnd = this.dataScale.invert(lastValuePx + (isHorizontalAndFlipped ? -halfGroupWidth : halfGroupWidth))
-    const bleedPxStart = dataDomainRequiredStart <= dataDomain[0] ? this.dataScale(dataDomain[0]) - this.dataScale(dataDomainRequiredStart) : 0
-    const bleedPxEnd = dataDomainRequiredEnd > dataDomain[1] ? this.dataScale(dataDomainRequiredEnd) - this.dataScale(dataDomain[1]) : 0
-
-    return {
-      top: this.isVertical() ? 0 : (isHorizontalAndFlipped ? -bleedPxEnd : bleedPxStart),
-      bottom: this.isVertical() ? 0 : (isHorizontalAndFlipped ? -bleedPxStart : bleedPxEnd),
-      left: this.isVertical() ? bleedPxStart : 0,
-      right: this.isVertical() ? bleedPxEnd : 0,
-    }
-  }
-
-  private get dataScale (): ContinuousScale {
-    return this.isVertical() ? this.xScale : this.yScale
-  }
-
-  private get valueScale (): ContinuousScale {
-    return this.isVertical() ? this.yScale : this.xScale
-  }
-
-  private isVertical (): boolean {
-    return this.config.orientation === Orientation.Vertical
-  }
-
-  _render (customDuration?: number): void {
-    const { config } = this
-    const duration = isNumber(customDuration)
-      ? customDuration
-      : config.duration
-    const groupWidth = this._getGroupWidth()
-
-    const yAccessors = this.getAccessors()
-    const innerBandScaleRange = [-groupWidth / 2, groupWidth / 2] as [
-      number,
-      number,
-    ]
-    const innerBandScale = scaleBand<number>()
-      .domain(range(yAccessors.length))
-      .range(innerBandScaleRange)
-      .paddingInner(config.barPadding)
-      .paddingOuter(config.barPadding)
-
-    const barGroups = this.g
-      .selectAll<SVGGElement, Datum>(`.${s.barGroup}`)
-      .data(this._barData, (d, i) => `${getString(d, config.id, i) ?? i}`)
-
-    const getBarGroupsTransform = (d: Datum, i: number): string => {
-      const v = this.dataScale(getNumber(d, config.x, i))
-      const x = this.isVertical() ? v : 0
-      const y = this.isVertical() ? 0 : v
-      return `translate(${x},${y})`
-    }
-
-    const barGroupsEnter = barGroups
-      .enter()
-      .append('g')
-      .attr('class', s.barGroup)
-      .attr('transform', getBarGroupsTransform)
-      .style('opacity', 1)
-
-    const barGroupsMerged = barGroupsEnter.merge(barGroups)
-    smartTransition(barGroupsMerged, duration)
-      .attr('transform', getBarGroupsTransform)
-      .style('opacity', 1)
-
-    const barGroupExit = barGroups.exit().attr('class', s.barGroupExit)
-    smartTransition(barGroupExit, duration).style('opacity', 0).remove()
-
-    // Animate exiting bars going down
-    smartTransition(barGroupExit.selectAll<SVGPathElement, Datum>(`.${s.bar}`), duration)
-      .attr('transform', (d, i, e) => {
-        return this.isVertical()
-          ? `translate(0,${this.yScale(0)}) scale(1,0)`
-          : `translate(${this.xScale(0)},0) scale(0,1)`
-      })
-
-    const barWidth = innerBandScale.bandwidth()
-    const bars = barGroupsMerged
-      .selectAll<SVGPathElement, Datum>(`.${s.bar}`)
-      .data((d) => yAccessors.map(() => d))
-
-    const valueAxisDirection = this._getValueAxisDirection()
-    const barsEnter = bars
-      .enter()
-      .append('path')
-      .attr('class', s.bar)
-      .attr('d', (d, i) => {
-        const x = innerBandScale(i)
-        const y = this.valueScale(0)
-        const width = barWidth
-        const height = 0
-        return this._getBarPath(x, y, width, height, false, valueAxisDirection)
-      })
-      .style('fill', (d, i) => getColor(d, config.color, i))
-
-    const barsMerged = barsEnter.merge(bars)
-    smartTransition(barsMerged, duration)
-      .attr('d', (d, j) => {
-        const x = innerBandScale(j)
-        const width = barWidth
-
-        // Todo: Find a way to pass the datum index to `getNumber` below
-        const value = getNumber(d, yAccessors[j])
-        const isNegative = value < 0
-        let y = isNegative ? this.valueScale(0) : this.valueScale(value || 0)
-        let height = Math.abs(this.valueScale(0) - this.valueScale(value)) || 0
-
-        // Optionally set minimum bar height
-        if (height < config.barMinHeight) {
-          const dir = valueAxisDirection === Direction.North ? -1 : 1
-          y = this.valueScale(0) + dir * config.barMinHeight
-          height = config.barMinHeight
-        }
-        return this._getBarPath(x, y, width, height, isNegative, valueAxisDirection)
-      })
-      .style('fill', (d, i) => getColor(d, config.color, i))
-      .style('cursor', (d, i) => getString(d, config.cursor, i))
-
-    smartTransition(bars.exit(), duration).remove()
-  }
-
-  _getValueAxisDirection (): Direction.North | Direction.South {
-    return this.valueScale.range()[0] > this.valueScale.range()[1]
-      ? Direction.North
-      : Direction.South
-  }
-
-  _getVisibleData (): Datum[] {
-    const {
-      config,
-      datamodel: { data },
-    } = this
-    const groupWidth = this._getGroupWidth()
-    const halfGroupWidth = data.length < 2 ? 0 : groupWidth / 2
-
-    const dataScale = this.dataScale
-    const xHalfGroupWidth = Math.abs(
-      (dataScale.invert(halfGroupWidth) as number) -
-        (dataScale.invert(0) as number)
-    )
-    const filtered = data?.filter((d, i) => {
-      const v = getNumber(d, config.x, i)
-      const domain: number[] | Date[] = dataScale.domain()
-      const domainMin = +domain[0]
-      const domainMax = +domain[1]
-      return (
-        v >= domainMin - xHalfGroupWidth && v <= domainMax + xHalfGroupWidth
-      )
-    })
-
-    return filtered
-  }
-
-  _getBarPath (
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    isNegative: boolean,
-    direction: Direction.North | Direction.South
-  ): string {
-    const { config } = this
-
-    const cornerRadius = config.roundedCorners
-      ? isNumber(config.roundedCorners)
-        ? +config.roundedCorners
-        : width / 2
-      : 0
-    const cornerRadiusClamped = clamp(
-      cornerRadius,
-      0,
-      Math.min(height, width) / 2
-    )
-
-    const isNorthDirected = direction === Direction.North
-    const roundedTop = this.isVertical() && isNegative !== isNorthDirected
-    const roundedBottom = this.isVertical() && isNegative === isNorthDirected
-    const roundedLeft = !this.isVertical() && isNegative
-    const roundedRight = !this.isVertical() && !isNegative
-
-    return roundedRectPath({
-      x: this.isVertical() ? x : y + (isNorthDirected ? 0 : -height),
-      y: this.isVertical() ? y + (isNorthDirected ? 0 : -height) : x,
-      w: this.isVertical() ? width : height,
-      h: this.isVertical() ? height : width,
-      tl: roundedTop || roundedLeft,
-      tr: roundedTop || roundedRight,
-      bl: roundedBottom || roundedLeft,
-      br: roundedBottom || roundedRight,
-      r: cornerRadiusClamped,
-    })
-  }
-
-  _getGroupWidth (): number {
-    const {
-      config,
-      datamodel: { data },
-    } = this
-    if (isEmpty(data)) return 0
-    if (config.groupWidth) { return min([config.groupWidth, config.groupMaxWidth]) }
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const isOrdinal = this.dataScale.bandwidth
-    const domain = (
-      this.dataScale.domain ? this.dataScale.domain() : []
-    ) as number[]
-    const domainLength = isOrdinal ? domain.length : domain[1] - domain[0]
-
-    // If the dataStep property is provided the amount of data elements is calculates as domainLength / dataStep
-    //   otherwise we get the number of data elements within the domain range
-    // Or if the scale is ordinal we use data.length
-    let dataSize =
-      1 + domainLength / config.dataStep ||
-      (!isOrdinal &&
-        data.filter((d, i) => {
-          const value = getNumber(d, config.x, i)
-          return value >= domain[0] && value <= domain[1]
-        }).length) ||
-      data.length
-
-    // We increase the dataSize by 1 to take into account possible additional domain space
-    if (!isOrdinal && dataSize >= 2) dataSize += 1
-
-    const c = dataSize < 2 ? 1 : 1 - config.groupPadding
-    const groupWidth =
-      (c * (this.isVertical() ? this._width : this._height)) / dataSize
-    return min([groupWidth, config.groupMaxWidth])
-  }
-
-  getValueScaleExtent (scaleByVisibleData: boolean): number[] {
-    const { datamodel } = this
-    const yAccessors = this.getAccessors()
-
-    const data = scaleByVisibleData ? this._getVisibleData() : datamodel.data
-    const min = getMin(data, ...yAccessors)
-    const max = getMax(data, ...yAccessors)
-    return [min > 0 ? 0 : min, max < 0 ? 0 : max]
-  }
-
-  _raiseSelection (d, i, els): void {
-    select(els[i]).raise()
-  }
-
-  getDataScaleExtent (): number[] {
-    const { config, datamodel } = this
-    return getExtent(datamodel.data, config.x)
-  }
-
-  getYDataExtent (scaleByVisibleData: boolean): number[] {
-    return this.isVertical()
-      ? this.getValueScaleExtent(scaleByVisibleData)
-      : this.getDataScaleExtent()
-  }
-
-  getXDataExtent (): number[] {
-    return this.isVertical()
-      ? this.getDataScaleExtent()
-      : this.getValueScaleExtent(false)
-  }
-}