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

package/src/components/free-brush/index.ts

@@ -1,207 +0,0 @@
-import { Selection } from 'd3-selection'
-import { brush, BrushBehavior, brushX, brushY, D3BrushEvent } from 'd3-brush'
-import { XYComponentCore } from 'core/xy-component'
-import { clamp, isNumber } from 'utils/data'
-import { smartTransition } from 'utils/d3'
-
-// Types
-import { ContinuousScale } from 'types/scale'
-import { FreeBrushMode, FreeBrushSelection, FreeBrushSelectionInPixels } from './types'
-
-// Config
-import { FreeBrushConfig, FreeBrushConfigInterface } from './config'
-
-// Styles
-import * as s from './style'
-
-export class FreeBrush<Datum> extends XYComponentCore<Datum, FreeBrushConfig<Datum>, FreeBrushConfigInterface<Datum>> {
-  static selectors = s
-  config: FreeBrushConfig<Datum> = new FreeBrushConfig()
-  private brush: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  private brushBehaviour: BrushBehavior<unknown>
-  private _firstRender = true
-
-  constructor (config: FreeBrushConfigInterface<Datum>) {
-    super()
-    if (config) this.config.init(config)
-
-    this.brush = this.g
-      .append('g')
-      .attr('class', s.brush)
-  }
-
-  _render (customDuration?: number): void {
-    const { config } = this
-    const xScale = this.xScale
-    const yScale = this.yScale
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-
-    if (this._firstRender) this.brush.classed(s.hide, this._firstRender && config.autoHide)
-
-    // Sometimes Brush stops emitting 'start' and 'end' events. Possible explanation:
-    // "... mouseup will only fire when performed within the browser, which can lead to losing track of the button state."
-    // https://stackoverflow.com/a/48970682
-    //
-    // D3 code related to the problem:
-    // https://github.com/d3/d3-brush/blob/ec2bce6f15074a9ead7f9a84c61335be51c123a3/src/brush.js#L301
-    //
-    // We're clearing brush's event emitter state to force it to get re-initialized
-    // Caveat of this solution: If you're doing a brush selection and a render happens
-    // (e.g. due to a data or config update), it'll reset the brush.
-    //
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (this.brush.node().__brush) this.brush.node().__brush.emitter = undefined
-
-    this.brushBehaviour = this._getBrushBehaviour(config.mode)
-
-    this.brushBehaviour
-      .handleSize(config.handleWidth)
-      .extent([[0, 0], [this._width, this._height]])
-      .on('start', this._onBrushStart.bind(this))
-      .on('brush', this._onBrushMove.bind(this))
-      .on('end', this._onBrushEnd.bind(this))
-
-    this.brush
-      .call(this.brushBehaviour)
-
-    // Calculate the brush range from configured selection and apply it
-    let brushRange: FreeBrushSelectionInPixels
-    switch (config.mode) {
-      case FreeBrushMode.XY: {
-        const xSelectionRange = this._dataRangeToPixelRange([config.selection?.[0][0], config.selection?.[0][1]], xScale)
-        const ySelectionRange = this._dataRangeToPixelRange([config.selection?.[1][0], config.selection?.[1][1]], yScale, true)
-        brushRange = (xSelectionRange && ySelectionRange) ? [[xSelectionRange[0], ySelectionRange[0]], [xSelectionRange[1], ySelectionRange[1]]] : null
-        break
-      }
-      case FreeBrushMode.X:
-      case FreeBrushMode.Y:
-      default: {
-        const scale = config.mode === FreeBrushMode.Y ? yScale : xScale
-        brushRange = this._dataRangeToPixelRange(config.selection as [number, number], scale, config.mode === FreeBrushMode.Y)
-      }
-    }
-
-    smartTransition(this.brush, duration)
-      .call(this.brushBehaviour.move, brushRange) // Sets up the brush and calls brush events
-      .on('end interrupt', () => { this._firstRender = false })
-
-    if (!duration) this._firstRender = false
-  }
-
-  private _onBrush (event: D3BrushEvent<unknown>): void {
-    const { config } = this
-    const userDriven = !!event?.sourceEvent
-
-    // Selection from the brush events is in Screen Space (pixels)
-    // In case of two dimensional brush is comes as [ [xMinPx, yMinPx], [xMaxPx, yMaxPx] ],
-    //   while in the config we'll be storing it as [ [xMin, xMax], [yMin, yMax] ]
-    const s = (event?.selection) as FreeBrushSelectionInPixels
-    if (!this._isSelectionValid(s)) {
-      config.selection = null
-      return
-    }
-
-    // Convert the raw brush selection from pixels to data units, store it in the config and trigger the onBrush callback
-    let selectedDomain: FreeBrushSelection
-    switch (config.mode) {
-      case FreeBrushMode.XY: {
-        const xSelection = this._pixelRangeToDataRange([s[0][0], s[1][0]], this.xScale, config.selectionMinLength?.[0] ?? config.selectionMinLength)
-        const ySelection = this._pixelRangeToDataRange([s[0][1], s[1][1]], this.yScale, config.selectionMinLength?.[1] ?? config.selectionMinLength, true)
-        selectedDomain = (xSelection && ySelection) ? [
-          [xSelection?.[0], xSelection?.[1]],
-          [ySelection?.[0], ySelection?.[1]],
-        ] : null
-        break
-      }
-      case FreeBrushMode.Y: {
-        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.yScale, config.selectionMinLength, true)
-        break
-      }
-      case FreeBrushMode.X:
-      default: {
-        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.xScale, config.selectionMinLength)
-        break
-      }
-    }
-
-    if (selectedDomain === null || selectedDomain[0] === null || selectedDomain[1] === null) {
-      this.brush.call(this.brushBehaviour.move, null)
-      return
-    }
-
-    config.selection = selectedDomain
-    if (!this._firstRender) config.onBrush(selectedDomain, event, userDriven)
-  }
-
-  private _pixelRangeToDataRange (selectionInPixels: [number, number], scale: ContinuousScale, constraint: number, reversed?: boolean): [number, number] | null {
-    const selectedDomain = selectionInPixels.map(n => scale.invert(n)) as [number, number]
-    if (reversed) selectedDomain.reverse()
-
-    const domain = scale.domain() as [number, number]
-    const domainLength = Math.abs(domain[1] - domain[0])
-    const selectionLength = Math.abs(selectedDomain[1] - selectedDomain[0])
-
-    if (constraint >= domainLength) {
-      console.warn('Unovis | FreeBrush: Configured domain constraint is bigger than the brush domain')
-    }
-
-    if ((selectionLength < constraint) && (constraint < domainLength)) return null
-    else return selectedDomain
-  }
-
-  private _dataRangeToPixelRange (selectionInDataUnits: [number, number], scale: ContinuousScale, reversed?: boolean): [number, number] | null {
-    if (!selectionInDataUnits) return null
-
-    const range = scale.range()
-    const s = [...selectionInDataUnits]
-    if (reversed) {
-      range.reverse()
-      s.reverse()
-    }
-    const selectionMin = clamp(scale(s[0]) ?? 0, range[0], range[1])
-    const selectionMax = clamp(scale(s[1]) ?? 0, range[0], range[1])
-    return (selectionMax - selectionMin) ? [selectionMin, selectionMax] : null
-  }
-
-  private _isSelectionValid (s: FreeBrushSelection | FreeBrushSelectionInPixels): boolean {
-    const { config } = this
-
-    if (config.mode === FreeBrushMode.XY) {
-      return s && Array.isArray(s[0]) && Array.isArray(s[1])
-    } else {
-      return s && isNumber(s[0]) && isNumber(s[1])
-    }
-  }
-
-  private _getBrushBehaviour (mode: FreeBrushMode): BrushBehavior<unknown> {
-    switch (mode) {
-      case FreeBrushMode.X: return brushX()
-      case FreeBrushMode.Y: return brushY()
-      default: return brush()
-    }
-  }
-
-  private _onBrushStart (event: D3BrushEvent<unknown>): void {
-    const { config } = this
-    const userDriven = !!event?.sourceEvent
-    this._onBrush(event)
-    if (config.autoHide && userDriven) this.brush.classed(s.hide, false)
-    if (!this._firstRender) config.onBrushStart?.(config.selection, event, userDriven)
-  }
-
-  private _onBrushMove (event: D3BrushEvent<unknown>): void {
-    const { config } = this
-
-    this._onBrush(event)
-    if (!this._firstRender) config.onBrushMove?.(config.selection, event, !!event?.sourceEvent)
-  }
-
-  private _onBrushEnd (event: D3BrushEvent<unknown>): void {
-    const { config } = this
-
-    this._onBrush(event)
-    if (config.autoHide) this.brush.classed(s.hide, true)
-    if (!this._firstRender) config.onBrushEnd?.(config.selection, event, !!event?.sourceEvent)
-  }
-}

package/src/components/free-brush/types.ts

@@ -1,8 +0,0 @@
-export type FreeBrushSelection = [number, number] | [[number, number], [number, number]];
-export type FreeBrushSelectionInPixels = FreeBrushSelection
-
-export enum FreeBrushMode {
-  X = 'x',
-  Y = 'y',
-  XY = 'xy',
-}

package/src/components/graph/config.ts

@@ -1,280 +0,0 @@
-/* eslint-disable dot-notation */
-// Config
-import { ComponentConfigInterface, ComponentConfig } from 'core/component/config'
-
-// Types
-import { TrimMode } from 'types/text'
-import { GraphInputLink, GraphInputNode } from 'types/graph'
-import { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'
-
-// Local Types
-import {
-  GraphLayoutType,
-  GraphCircleLabel,
-  GraphLinkStyle,
-  GraphLinkArrowStyle,
-  GraphPanelConfig,
-  GraphForceLayoutSettings,
-  GraphElkLayoutSettings,
-  GraphNodeShape,
-} from './types'
-
-export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {
-  // Zoom and drag
-  /** Zoom level constraints. Default: [0.35, 1.25] */
-  zoomScaleExtent?: [number, number];
-  /** Disable zooming. Default: `false` */
-  disableZoom?: boolean;
-  /** Disable node dragging. Default: `false` */
-  disableDrag?: boolean;
-  /** Interval to re-render the graph when zooming. Default: `100` */
-  zoomThrottledUpdateNodeThreshold?: number;
-  /** Zoom event callback. Default: `undefined` */
-  onZoom?: (zoomScale: number, zoomScaleExtent: number) => void;
-
-  // Layout general settings
-  /** Type of the graph layout. Default: `GraphLayoutType.Force` */
-  layoutType?: GraphLayoutType | string;
-  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */
-  layoutAutofit?: boolean;
-  /** Tolerance constant defining whether the graph should be fitted to container
-   * (on data or config update, or container resize) after a zoom / pan interaction or not.
-   * `0` — Stop fitting after any pan or zoom
-   * `Number.POSITIVE_INFINITY` — Always fit
-   * Default: `8.0` */
-  layoutAutofitTolerance?: number;
-  /** Place non-connected nodes at the bottom of the graph. Default: `false` */
-  layoutNonConnectedAside?: boolean;
-
-  // Settings for Parallel and Concentric layouts
-  /** Node group accessor function.
-   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.
-   * Default: `node => node.group` */
-  layoutNodeGroup?: StringAccessor<N>;
-  /** Order of the layout groups.
-   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.
-   * Default: `[]` */
-  layoutGroupOrder?: string[];
-
-  // Setting for Parallel layouts only
-  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is
-   * `GraphLayoutType.ParallelHorizontal`).
-   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
-   * Default: `6` */
-  layoutParallelNodesPerColumn?: number;
-  /** Node sub-group accessor function.
-   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
-   * Default: `node => node.subgroup` */
-  layoutParallelNodeSubGroup?: StringAccessor<N>;
-  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.
-   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
-   * Default: `1` */
-  layoutParallelSubGroupsPerRow?: number;
-  /** Spacing between groups.
-   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
-   * Default: `undefined` */
-  layoutParallelGroupSpacing?: number;
-  /** Set a group by name to have priority in sorting the graph links.
-   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
-   * Default: `undefined` */
-  layoutParallelSortConnectionsByGroup?: string;
-
-  // Force layout
-  /** Force Layout settings, see the `d3-force` package for more details */
-  forceLayoutSettings?: GraphForceLayoutSettings;
-
-  // Dagre layout
-  /** Darge Layout settings, see the `dagrejs` package
-   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout
-  */
-  dagreLayoutSettings?: {
-    /** Direction for rank node. `TB`, `BT`, `LR`, or `RL`. Default: `BT` */
-    rankdir: string;
-    /** Type of algorithm to assigns a rank to each node in the input graph.
-     * `network-simplex`, `tight-tree` or `longest-path`.
-     * Default: `longest-path` */
-    ranker: string;
-    /** Other configurable Dagre settings. https://github.com/dagrejs/dagre/wiki */
-    [key: string]: any;
-  };
-
-  // ELK layout
-  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.
-   * If you want to specify custom layout option for each node group, you can provide an accessor function that
-   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing
-   * layout options. Default: `undefined`
-  */
-  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;
-  /** Array of accessor functions to define nested node groups for the ELK Layered layout.
-   * E.g.: `[n => n.group, n => n.subGroup]`.
-   * Default: `undefined` */
-  layoutElkNodeGroups?: StringAccessor<N>[];
-
-  // Links
-  /** Link width accessor function ot constant value. Default: `1` */
-  linkWidth?: NumericAccessor<L>;
-  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */
-  linkStyle?: GenericAccessor<GraphLinkStyle, L>;
-  /** Link band width accessor function or constant value. Default: `0` */
-  linkBandWidth?: NumericAccessor<L>;
-  /** Link arrow accessor function or constant value. Default: `undefined` */
-  linkArrow?: GenericAccessor<GraphLinkArrowStyle, L> | undefined;
-  /** Link stroke color accessor function or constant value. Default: `undefined` */
-  linkStroke?: ColorAccessor<L>;
-  /** Link disabled state accessor function or constant value. Default: `false` */
-  linkDisabled?: BooleanAccessor<L>;
-  /** Link flow animation accessor function or constant value. Default: `false` */
-  linkFlow?: BooleanAccessor<L>;
-  /** Animation duration of the flow (traffic) circles. Default: `20000` */
-  linkFlowAnimDuration?: number;
-  /** Size of the moving particles that represent traffic flow. Default: `2` */
-  linkFlowParticleSize?: number;
-  /** Link label accessor function or constant value. Default: `undefined` */
-  linkLabel?: GenericAccessor<GraphCircleLabel, L> | undefined;
-  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */
-  linkLabelShiftFromCenter?: BooleanAccessor<L>;
-  /** Spacing between neighboring links. Default: `8` */
-  linkNeighborSpacing?: number;
-  /** Set selected link by its unique id. Default: `undefined` */
-  selectedLinkId?: number | string;
-
-  // Nodes
-  /** Node size accessor function or constant value. Default: `30` */
-  nodeSize?: NumericAccessor<N>;
-  /** Node stroke width accessor function or constant value. Default: `3` */
-  nodeStrokeWidth?: NumericAccessor<N>;
-  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */
-  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;
-  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */
-  nodeGaugeValue?: NumericAccessor<N>;
-  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */
-  nodeGaugeFill?: ColorAccessor<N>;
-  /** Animation duration of the node gauge outline. Default: `1500` */
-  nodeGaugeAnimDuration?: number;
-  /** Node central icon accessor function or constant value. Default: `node => node.icon` */
-  nodeIcon?: StringAccessor<N>;
-  /** Node central icon size accessor function or constant value. Default: `undefined` */
-  nodeIconSize?: NumericAccessor<N>;
-  /** Node label accessor function or constant value. Default: `node => node.label` */
-  nodeLabel?: StringAccessor<N>;
-  /** Defines whether to trim the node labels or not. Default: `true` */
-  nodeLabelTrim?: BooleanAccessor<N>;
-  /** Node label trimming mode. Default: `TrimMode.Middle` */
-  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;
-  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */
-  nodeLabelTrimLength?: NumericAccessor<N>;
-  /** Node sub-label accessor function or constant value: Default: `''` */
-  nodeSubLabel?: StringAccessor<N>;
-  /** Defines whether to trim the node sub-labels or not. Default: `true` */
-  nodeSubLabelTrim?: BooleanAccessor<N>;
-  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */
-  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;
-  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */
-  nodeSubLabelTrimLength?: NumericAccessor<N>;
-  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */
-  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;
-  /** Node bottom icon accessor function. Default: `undefined` */
-  nodeBottomIcon?: StringAccessor<N>;
-  /** Node disabled state accessor function or constant value. Default: `false` */
-  nodeDisabled?: BooleanAccessor<N>;
-  /** Node fill color accessor function or constant value. Default: `node => node.fill` */
-  nodeFill?: ColorAccessor<N>;
-  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */
-  nodeStroke?: ColorAccessor<N>;
-  /** Sorting function to determine node placement. Default: `undefined` */
-  nodeSort?: ((a: N, b: N) => number);
-  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */
-  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;
-  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */
-  nodeEnterScale?: NumericAccessor<N> | undefined;
-  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */
-  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;
-  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */
-  nodeExitScale?: NumericAccessor<N> | undefined;
-  /** Set selected node by unique id. Default: `undefined` */
-  selectedNodeId?: number | string;
-
-  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */
-  panels?: GraphPanelConfig[] | undefined;
-}
-
-export class GraphConfig<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfig implements GraphConfigInterface<N, L> {
-  duration = 1000
-  zoomScaleExtent: [number, number] = [0.35, 1.25]
-  disableZoom = false
-  disableDrag = false
-  zoomThrottledUpdateNodeThreshold = 100
-  onZoom = undefined
-  layoutType = GraphLayoutType.Force
-  layoutAutofit = true
-  layoutAutofitTolerance = 8.0
-  layoutNonConnectedAside = false
-
-  layoutGroupOrder = []
-  layoutParallelSubGroupsPerRow = 1
-  layoutParallelNodesPerColumn = 6
-  layoutParallelGroupSpacing = undefined
-  layoutParallelSortConnectionsByGroup = undefined
-  layoutNodeGroup = (n: N): string => n['group']
-  layoutParallelNodeSubGroup = (n: N): string => n['subgroup']
-
-  forceLayoutSettings = {
-    linkDistance: 60,
-    linkStrength: 0.45,
-    charge: -500,
-    forceXStrength: 0.15,
-    forceYStrength: 0.25,
-  }
-
-  dagreLayoutSettings = {
-    rankdir: 'BT',
-    ranker: 'longest-path',
-  }
-
-  layoutElkSettings: GenericAccessor<GraphElkLayoutSettings, string> | undefined = undefined
-  layoutElkNodeGroups: StringAccessor<N>[] | undefined = undefined
-
-  linkFlowAnimDuration = 20000
-  linkFlowParticleSize = 2
-  linkWidth = 1
-  linkStyle = GraphLinkStyle.Solid
-  linkBandWidth = 0
-  linkArrow = undefined
-  linkStroke = undefined
-  linkFlow = false
-  linkLabel = undefined
-  linkLabelShiftFromCenter = true
-  linkNeighborSpacing = 8
-  linkDisabled = false
-  selectedLinkId = undefined
-  nodeGaugeAnimDuration = 1500
-
-  nodeSize = 30
-  nodeStrokeWidth = 3
-  nodeShape = GraphNodeShape.Circle
-  nodeGaugeValue = 0
-  nodeIcon = (n: N): string => n['icon']
-  nodeIconSize = undefined
-  nodeLabel = (n: N): string => n['label']
-  nodeLabelTrim = true
-  nodeLabelTrimLength = 15
-  nodeLabelTrimMode = TrimMode.Middle
-  nodeSubLabel = ''
-  nodeSubLabelTrim = true
-  nodeSubLabelTrimLength = 15
-  nodeSubLabelTrimMode = TrimMode.Middle
-  nodeSideLabels = undefined
-  nodeBottomIcon = undefined
-  nodeDisabled = false
-  nodeFill = (n: N): string => n['fill']
-  nodeGaugeFill = undefined
-  nodeStroke = (n: N): string => n['stroke']
-  nodeEnterPosition = undefined
-  nodeEnterScale = 0.75
-  nodeExitPosition = undefined
-  nodeExitScale = 0.75
-  nodeSort = undefined
-
-  selectedNodeId = undefined
-  panels: GraphPanelConfig[] | undefined = undefined
-}