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

package/src/core/container/config.ts

@@ -1,56 +0,0 @@
-// Core
-import { Config } from 'core/config'
-
-// Types
-import { Sizing } from 'types/component'
-import { Spacing } from 'types/spacing'
-
-export interface ContainerConfigInterface {
-  /** Animation duration of all the components within the container. Default: `undefined` */
-  duration?: number;
-  /** Margins. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */
-  margin?: Spacing;
-  /** Padding. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */
-  padding?: Spacing;
-  /** Defines whether components should fit into the container or the container should expand to fit to the component's size. Default: `Sizing.Fit` */
-  sizing?: Sizing | string;
-  /** Width in pixels or in CSS units.
-   * Percentage units `"%"` are not supported here. If you want to set `width` as a percentage, do it via `style`
-   * of the corresponding DOM element.
-   * By default, Container automatically fits to the size of the parent element.
-   * Default: `undefined`
-  */
-  width?: number | string;
-  /** Height in pixels or in CSS units.
-   * Percentage units `"%"` are not supported here. If you want to set `height` as a percentage, do it via `style`
-   * of the corresponding DOM element.
-   * By default, Container automatically fits to the size of the parent element.
-   * Default: `undefined`
-  */
-  height?: number | string;
-  /** Custom SVG defs available to all the components within the container. Default: `undefined`. */
-  svgDefs?: string;
-}
-
-export class ContainerConfig extends Config implements ContainerConfigInterface {
-  duration = undefined
-  margin = {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  }
-
-  padding = {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  }
-
-  sizing = Sizing.Fit
-  width = undefined
-  height = undefined
-
-  svgDefs = undefined
-}

package/src/core/container/index.ts

@@ -1,136 +0,0 @@
-import { select, Selection } from 'd3-selection'
-import { ResizeObserver } from '@juggle/resize-observer'
-
-// Types
-import { Sizing } from 'types/component'
-
-// Utils
-import { isEqual, clamp } from 'utils/data'
-
-// Config
-import { ContainerConfig, ContainerConfigInterface } from './config'
-
-export class ContainerCore {
-  svg: Selection<SVGSVGElement, unknown, null, undefined>
-  element: SVGSVGElement
-  prevConfig: ContainerConfig
-  config: ContainerConfig
-
-  protected _container: HTMLElement
-  protected _requestedAnimationFrame: number
-  private _isFirstRender = true
-  private _containerSize: { width: number; height: number }
-  private _resizeObserver: ResizeObserver | undefined
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  static DEFAULT_CONTAINER_HEIGHT = 300
-
-  constructor (element: HTMLElement) {
-    this._requestedAnimationFrame = null
-    this._container = element
-
-    // Create SVG element for visualizations
-    this.svg = select(this._container).append('svg')
-      // We set `display` to `block` because inline elements have an invisible
-      //   inline space that adds 4px to the height of the container
-      .style('display', 'block')
-      .attr('xmlns', 'http://www.w3.org/2000/svg')
-      .attr('height', ContainerCore.DEFAULT_CONTAINER_HEIGHT)
-
-    this.element = this.svg.node()
-  }
-
-  updateContainer<T extends ContainerConfigInterface> (config: T): void {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const ConfigModel = (this.config.constructor as typeof ContainerConfig)
-    this.prevConfig = this.config
-    this.config = new ConfigModel().init(config)
-  }
-
-  _render (duration?: number): void {
-    if (this.config.svgDefs) {
-      this.svg.select('.svgDefs').remove()
-      this.svg.append('defs').attr('class', 'svgDefs').html(this.config.svgDefs)
-    }
-
-    this._isFirstRender = false
-  }
-
-  render (duration = this.config.duration): void {
-    const width = this.config.width || this.containerWidth
-    const height = this.config.height || this.containerHeight
-
-    // We set SVG size in `render()` instead of `_render()`, because the size values in pixels will become
-    // available only in the next animation when being accessed via `element.clientWidth` and `element.clientHeight`,
-    // and we rely on those values when setting width and size of the components.
-    this.svg
-      .attr('width', width)
-      .attr('height', height)
-
-    // Set up Resize Observer. We do it in `render()` to capture container size change if it happened
-    // in the next animation frame after the initial `render` was called.
-    if (!this._resizeObserver) this._setUpResizeObserver()
-
-    // Schedule the actual rendering in the next frame
-    cancelAnimationFrame(this._requestedAnimationFrame)
-    this._requestedAnimationFrame = requestAnimationFrame(() => {
-      this._render(duration)
-    })
-  }
-
-  get containerWidth (): number {
-    return this.config.width
-      ? this.element.clientWidth
-      : clamp(this._container.clientWidth || this._container.getBoundingClientRect().width, 0, Number.POSITIVE_INFINITY)
-  }
-
-  get containerHeight (): number {
-    return this.config.height
-      ? this.element.clientHeight
-      : clamp(this._container.clientHeight || this._container.getBoundingClientRect().height, 0, Number.POSITIVE_INFINITY)
-  }
-
-  get width (): number {
-    return clamp(this.containerWidth - this.config.margin.left - this.config.margin.right, 0, Number.POSITIVE_INFINITY)
-  }
-
-  get height (): number {
-    return clamp(this.containerHeight - this.config.margin.top - this.config.margin.bottom, 0, Number.POSITIVE_INFINITY)
-  }
-
-  removeAllChildren (): void {
-    while (this.element.firstChild) {
-      this.element.removeChild(this.element.firstChild)
-    }
-  }
-
-  _onResize (): void {
-    const { config } = this
-    const redrawOnResize = config.sizing === Sizing.Fit || config.sizing === Sizing.FitWidth
-    if (redrawOnResize) this.render(0)
-  }
-
-  _setUpResizeObserver (): void {
-    const containerRect = this._container.getBoundingClientRect()
-    this._containerSize = { width: containerRect.width, height: containerRect.height }
-
-    this._resizeObserver = new ResizeObserver((entries, observer) => {
-      const resizedContainerRect = this._container.getBoundingClientRect()
-      const resizedContainerSize = { width: resizedContainerRect.width, height: resizedContainerRect.height }
-      const hasSizeChanged = !isEqual(this._containerSize, resizedContainerSize)
-      // Do resize only if element is attached to the DOM
-      // will come in useful when some ancestor of container becomes detached
-      if (hasSizeChanged && resizedContainerSize.width && resizedContainerSize.height) {
-        this._containerSize = resizedContainerSize
-        this._onResize()
-      }
-    })
-    this._resizeObserver.observe(this._container)
-  }
-
-  destroy (): void {
-    cancelAnimationFrame(this._requestedAnimationFrame)
-    this._resizeObserver?.disconnect()
-    this.svg.remove()
-  }
-}

package/src/core/xy-component/config.ts

@@ -1,46 +0,0 @@
-import { ContinuousScale } from 'types/scale'
-
-// Types
-import { ColorAccessor, NumericAccessor } from 'types/accessor'
-
-// Config
-import { ComponentConfig, ComponentConfigInterface } from '../component/config'
-
-export interface XYComponentConfigInterface<Datum> extends ComponentConfigInterface {
-  /** Accessor function for getting the values along the X axis. Default: `undefined` */
-  x: NumericAccessor<Datum>;
-  /** A single of multiple accessor functions for getting the values along the Y axis. Default: `undefined` */
-  y: NumericAccessor<Datum> | NumericAccessor<Datum>[];
-  /** 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: any[]) => string);
-  /** Component color accessor function. Default: `d => d.color` */
-  color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>;
-  /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.
-   * Only continuous scales are supported.
-   * Default: `undefined`
-  */
-  xScale?: ContinuousScale;
-  /** Scale for Y dimension, e.g. Scale.scaleLinear(). If you set yScale you'll be responsible for setting it's `domain` and `range` as well.
-   * Only continuous scales are supported.
-   * Default: `undefined`
-  */
-  yScale?: ContinuousScale;
-  /** Identifies whether the component should be excluded from overall X and Y domain calculations or not.
-   * This property can be useful when you want pass individual data to a component and you don't want it to affect
-   * the scales of the chart.
-   * Default: `false`
-  */
-  excludeFromDomainCalculation?: boolean;
-}
-
-export class XYComponentConfig<Datum> extends ComponentConfig implements XYComponentConfigInterface<Datum> {
-  x = undefined
-  y = undefined
-  // eslint-disable-next-line dot-notation
-  id = (d: Datum, i: number): string => d['id'] ?? `${i}`
-  // eslint-disable-next-line dot-notation
-  color = (d: Datum | Datum[]): string => d['color']
-  xScale = undefined
-  yScale = undefined
-  excludeFromDomainCalculation = false
-}

package/src/core/xy-component/index.ts

@@ -1,90 +0,0 @@
-import { Selection } from 'd3-selection'
-
-// Core
-import { ComponentCore } from 'core/component'
-import { SeriesDataModel } from 'data-models/series'
-
-// Utils
-import { filterDataByRange, getExtent, isArray } from 'utils/data'
-
-// Types
-import { NumericAccessor } from 'types/accessor'
-import { ContinuousScale, Scale, ScaleDimension } from 'types/scale'
-
-// Config
-import { XYComponentConfig, XYComponentConfigInterface } from './config'
-
-export class XYComponentCore<
-  Datum,
-  ConfigClass extends XYComponentConfig<Datum> = XYComponentConfig<Datum>,
-  ConfigInterface extends Partial<XYComponentConfigInterface<Datum>> = Partial<XYComponentConfigInterface<Datum>>,
-> extends ComponentCore<Datum[], ConfigClass, ConfigInterface> {
-  element: SVGGraphicsElement
-  g: Selection<SVGGElement, unknown, null, undefined>
-  config: ConfigClass
-  prevConfig: ConfigClass
-  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()
-
-  /** Clippable components can be affected by a clipping path (set up in the container) */
-  clippable = true
-
-  /** Identifies whether the component displayed stacked data (eg StackedBar, Area) */
-  stacked = false
-
-  private _xScale: ContinuousScale = Scale.scaleLinear()
-  private _yScale: ContinuousScale = Scale.scaleLinear()
-
-  get xScale (): ContinuousScale {
-    return this.config.xScale || this._xScale
-  }
-
-  get yScale (): ContinuousScale {
-    return this.config.yScale || this._yScale
-  }
-
-  setConfig (config: ConfigInterface): void {
-    // We don't allow changing scales after the component has been initialized
-    if (this.config?.xScale) config.xScale = this.config.xScale
-    if (this.config?.yScale) config.yScale = this.config.yScale
-
-    super.setConfig(config)
-  }
-
-  setScaleDomain (dimension: ScaleDimension, domain: number[]): void {
-    if (dimension === ScaleDimension.X) this._xScale?.domain(domain)
-    if (dimension === ScaleDimension.Y) this._yScale?.domain(domain)
-  }
-
-  setScaleRange (dimension: ScaleDimension, range: number[]): void {
-    if (dimension === ScaleDimension.X) this._xScale?.range(range)
-    if (dimension === ScaleDimension.Y) this._yScale?.range(range)
-  }
-
-  setScale (dimension: ScaleDimension, scale: ContinuousScale): void {
-    if (scale && (dimension === ScaleDimension.X)) this._xScale = scale
-    if (scale && (dimension === ScaleDimension.Y)) this._yScale = scale
-  }
-
-  getDataExtent (dimension: ScaleDimension, scaleByVisibleData: boolean): number[] {
-    const { config, datamodel } = this
-
-    switch (dimension) {
-      case ScaleDimension.X: return this.getXDataExtent()
-      case ScaleDimension.Y: return this.getYDataExtent(scaleByVisibleData)
-      default: return getExtent(datamodel.data, config[dimension])
-    }
-  }
-
-  getXDataExtent (): number[] {
-    const { config, datamodel } = this
-    return getExtent(datamodel.data, config.x)
-  }
-
-  getYDataExtent (scaleByVisibleData: boolean): number[] {
-    const { config, datamodel } = this
-
-    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data
-    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]
-    return getExtent(data, ...yAccessors)
-  }
-}

package/src/data-models/core.ts

@@ -1,15 +0,0 @@
-export class CoreDataModel<T> {
-  protected _data: T | undefined
-
-  get data (): T {
-    return this._data
-  }
-
-  set data (value: T) {
-    this._data = value
-  }
-
-  constructor (data?: T) {
-    this.data = data
-  }
-}

package/src/data-models/graph.ts

@@ -1,138 +0,0 @@
-import { isNumber, isUndefined, cloneDeep, isFunction, without, isString, isObject, isEqual } from 'utils/data'
-
-// Types
-import { GraphInputLink, GraphInputNode, GraphLinkCore, GraphNodeCore } from 'types/graph'
-
-// Core Data Model
-import { CoreDataModel } from './core'
-
-export type GraphData<N extends GraphInputNode, L extends GraphInputLink> = {
-  nodes: N[];
-  links?: L[];
-}
-
-export class GraphDataModel<
-  N extends GraphInputNode,
-  L extends GraphInputLink,
-  OutNode extends GraphNodeCore<N, L> = GraphNodeCore<N, L>,
-  OutLink extends GraphLinkCore<N, L> = GraphLinkCore<N, L>,
-> extends CoreDataModel<GraphData<N, L>> {
-  private _nonConnectedNodes: OutNode[]
-  private _connectedNodes: OutNode[]
-  private _nodes: OutNode[] = []
-  private _links: OutLink[] = []
-  private _inputNodesMap = new Map<OutNode, N>()
-
-  // Model configuration
-  public nodeId: ((n: N) => string | undefined) = n => (isString(n.id) || isFinite(n.id as number)) ? `${n.id}` : undefined
-  public linkId: ((n: L) => string | undefined) = l => (isString(l.id) || isFinite(l.id as number)) ? `${l.id}` : undefined
-  public nodeSort: ((a: N, b: N) => number)
-
-  get data (): GraphData<N, L> {
-    return this._data
-  }
-
-  set data (inputData: GraphData<N, L>) {
-    if (!inputData) return
-    this._data = inputData
-    const prevNodes = this.nodes
-    const prevLinks = this.links
-
-    this._inputNodesMap.clear()
-    const nodes = cloneDeep(inputData?.nodes ?? []) as OutNode[]
-    const links = cloneDeep(inputData?.links ?? []) as OutLink[]
-
-    // Every node or link can have a private state used for rendering needs
-    // On data update we transfer state between objects with same ids
-    this.transferState(nodes, prevNodes, this.nodeId)
-    this.transferState(links, prevLinks, this.linkId)
-
-    // Set node `_id` and `_index`
-    nodes.forEach((node, i) => {
-      node._index = i
-      node._id = this.nodeId(node) || `${i}`
-      this._inputNodesMap.set(node, inputData.nodes[i])
-    })
-
-    // Sort nodes
-    if (isFunction(this.nodeSort)) nodes.sort(this.nodeSort)
-
-    // Fill link source and target
-    links.forEach((link, i) => {
-      link._indexGlobal = i
-      link.source = this.findNode(nodes, link.source)
-      link.target = this.findNode(nodes, link.target)
-    })
-
-    // Set link index for multiple link rendering
-    links.forEach((link, i) => {
-      if (!isUndefined(link._index) && !isUndefined(link._neighbours)) return
-
-      const linksFiltered = links.filter(l =>
-        ((link.source === l.source) && (link.target === l.target)) ||
-        ((link.source === l.target) && (link.target === l.source))
-      )
-
-      linksFiltered.forEach((l, i) => {
-        l._index = i
-        l._id = this.linkId(l) || `${l.source?._id}-${l.target?._id}-${i}`
-        l._neighbours = linksFiltered.length
-        l._direction = ((link.source === l.source) && (link.target === l.target)) ? 1 : -1
-      })
-    })
-
-    nodes.forEach(d => {
-      // Determine if a node is connected or not and store it as a property
-      d.links = links.filter(l => (l.source === d) || (l.target === d))
-      d._isConnected = d.links.length !== 0
-    })
-
-    this._nonConnectedNodes = nodes.filter(d => !d._isConnected)
-    this._connectedNodes = without(nodes, ...this._nonConnectedNodes)
-
-    this._nodes = nodes
-    this._links = links.filter(l => l.source && l.target)
-  }
-
-  get nodes (): OutNode[] {
-    return this._nodes
-  }
-
-  get links (): OutLink[] {
-    return this._links
-  }
-
-  get connectedNodes (): OutNode[] {
-    return this._connectedNodes
-  }
-
-  get nonConnectedNodes (): OutNode[] {
-    return this._nonConnectedNodes
-  }
-
-  private findNode (nodes: OutNode[], nodeIdentifier: number | string | N): OutNode | undefined {
-    let foundNode: OutNode | undefined
-
-    if (isNumber(nodeIdentifier)) foundNode = nodes[nodeIdentifier as number]
-    else if (isString(nodeIdentifier)) foundNode = nodes.find(node => this.nodeId(node) === nodeIdentifier)
-    else if (isObject(nodeIdentifier)) foundNode = nodes.find(node => isEqual(this._inputNodesMap.get(node), nodeIdentifier))
-
-    if (!foundNode) {
-      console.warn(`Node ${nodeIdentifier} is missing from the nodes list`)
-    }
-
-    return foundNode
-  }
-
-  private transferState<T extends { _state: Record<string, any>}> (
-    items: T[],
-    itemsPrev: T[],
-    getId: (d: T) => string
-  ): void {
-    for (const item of items) {
-      const dPrev = itemsPrev.find((dp) => getId(dp) === getId(item))
-      if (dPrev) item._state = { ...dPrev._state }
-      else item._state = {}
-    }
-  }
-}

package/src/data-models/map-graph.ts

@@ -1,72 +0,0 @@
-// Utils
-import { cloneDeep, isNumber, isObject, isString } from 'utils/data'
-
-// Core Data Model
-import { CoreDataModel } from 'data-models/core'
-
-// Types
-import { MapLink } from 'types/map'
-
-export type MapGraphData<AreaDatum, PointDatum, LinkDatum> = {
-  areas?: AreaDatum[];
-  points?: PointDatum[];
-  links?: LinkDatum[];
-}
-
-export class MapGraphDataModel<AreaDatum, PointDatum, LinkDatum> extends CoreDataModel<MapGraphData<AreaDatum, PointDatum, LinkDatum>> {
-  private _areas: AreaDatum[] = []
-  private _points: PointDatum[] = []
-  private _links: MapLink<PointDatum, LinkDatum>[] = []
-
-  // Model configuration
-  /* eslint-disable-next-line dot-notation */
-  public pointId: ((n: PointDatum) => string) = n => n['id']
-  /* eslint-disable-next-line dot-notation */
-  public linkSource: ((l: LinkDatum) => number | string | PointDatum) = l => l['source']
-  /* eslint-disable-next-line dot-notation */
-  public linkTarget: ((l: LinkDatum) => number | string | PointDatum) = l => l['target']
-
-  get data (): MapGraphData<AreaDatum, PointDatum, LinkDatum> {
-    return this._data
-  }
-
-  set data (data: MapGraphData<AreaDatum, PointDatum, LinkDatum>) {
-    if (!data) return
-    this._data = data
-
-    this._areas = cloneDeep(data?.areas ?? [])
-    this._points = cloneDeep(data?.points ?? [])
-
-    this._links = cloneDeep(data?.links ?? []).reduce((arr, link) => {
-      const source = this.findPoint(this.points, this.linkSource(link))
-      const target = this.findPoint(this.points, this.linkTarget(link))
-      if (source && target) arr.push({ source, target })
-      return arr
-    }, [])
-  }
-
-  get areas (): AreaDatum[] {
-    return this._areas
-  }
-
-  get points (): PointDatum[] {
-    return this._points
-  }
-
-  get links (): MapLink<PointDatum, LinkDatum>[] {
-    return this._links
-  }
-
-  private findPoint (points: PointDatum[], pointIdentifier: number | string | PointDatum): PointDatum | undefined {
-    let foundPoint: PointDatum | undefined
-    if (isNumber(pointIdentifier)) foundPoint = points[pointIdentifier as number]
-    else if (isString(pointIdentifier)) foundPoint = points.find(node => this.pointId(node) === pointIdentifier)
-    else if (isObject(pointIdentifier)) foundPoint = points.find(node => node === pointIdentifier)
-
-    if (!foundPoint) {
-      console.warn(`Point ${pointIdentifier} is missing from the points list`)
-    }
-
-    return foundPoint
-  }
-}

package/src/data-models/map.ts

@@ -1,18 +0,0 @@
-// Core
-import { CoreDataModel } from 'data-models/core'
-
-// Types
-import { NumericAccessor } from 'types/accessor'
-
-// Utils
-import { getDataLatLngBounds } from 'utils/map'
-
-export class MapDataModel<PointDatum> extends CoreDataModel<PointDatum[]> {
-  getDataLatLngBounds (
-    pointLatitude: NumericAccessor<PointDatum>,
-    pointLongitude: NumericAccessor<PointDatum>,
-    paddingDegrees = 1
-  ): [[number, number], [number, number]] {
-    return getDataLatLngBounds(this.data, pointLatitude, pointLongitude, paddingDegrees)
-  }
-}

package/src/data-models/series.ts

@@ -1,16 +0,0 @@
-// Core
-import { CoreDataModel } from './core'
-
-export class SeriesDataModel<Datum> extends CoreDataModel<Datum[]> {
-  constructor (data?: Datum[]) {
-    super(data)
-  }
-
-  get data (): Datum[] {
-    return this._data ?? []
-  }
-
-  set data (data: Datum[]) {
-    if (Array.isArray(data)) this._data = data
-  }
-}

package/src/index.ts

@@ -1,7 +0,0 @@
-export * from './containers'
-export * from './components'
-export * from './types'
-export * from './styles/colors'
-export * from './styles/sizes'
-export * from './utils/data'
-export * from './utils/text'