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

package/src/components/graph/types.ts

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

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

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

package/{components/grouped-bar/style.js → src/components/grouped-bar/style.ts}

@@ -1,9 +1,10 @@
-import { css, injectGlobal } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const root = css `
+export const root = css`
   label: grouped-bar-component;
-`;
-const globalStyles = injectGlobal `
+`
+
+export const globalStyles = injectGlobal`
   :root {
     --vis-grouped-bar-cursor: default;
     --vis-grouped-bar-fill-color: var(--vis-color-main);
@@ -20,8 +21,9 @@ const globalStyles = injectGlobal `
   body.theme-dark ${`.${root}`} {
     --vis-grouped-bar-stroke-color: var(--vis-dark-grouped-bar-stroke-color);
   }
-`;
-const bar = css `
+`
+
+export const bar = css`
   label: bar;
   fill: var(--vis-grouped-bar-fill-color);
   stroke: var(--vis-grouped-bar-stroke-color);
@@ -32,13 +34,12 @@ const bar = css `
     stroke-width: var(--vis-grouped-bar-hover-stroke-width);
     stroke: var(--vis-grouped-bar-hover-stroke-color);
   }
-`;
-const barGroup = css `
+`
+
+export const barGroup = css`
   label: barGroup;
-`;
-const barGroupExit = css `
-  label: barGroupExit;
-`;
+`
 
-export { bar, barGroup, barGroupExit, globalStyles, root };
-//# sourceMappingURL=style.js.map
+export const barGroupExit = css`
+  label: barGroupExit;
+`

package/src/components/leaflet-flow-map/config.ts

@@ -0,0 +1,60 @@
+/* eslint-disable dot-notation */
+
+// Config
+import { LeafletMapConfig, LeafletMapConfigInterface } from 'components/leaflet-map/config'
+
+// Types
+import { ColorAccessor, NumericAccessor } from 'types/accessor'
+import { GenericDataRecord } from 'types/data'
+
+export interface LeafletFlowMapConfigInterface<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord> extends LeafletMapConfigInterface<PointDatum> {
+  /** Flow source point longitude accessor function or value. Default:.`f => f.sourceLongitude` */
+  sourceLongitude?: NumericAccessor<FlowDatum>;
+  /** Flow source point latitude accessor function or value. Default: `f => f.sourceLatitude` */
+  sourceLatitude?: NumericAccessor<FlowDatum>;
+  /** Flow target point longitude accessor function or value. Default: `f => f.targetLongitude` */
+  targetLongitude?: NumericAccessor<FlowDatum>;
+  /** Flow target point latitude accessor function or value. Default: `f => f.targetLatitude` */
+  targetLatitude?: NumericAccessor<FlowDatum>;
+  /** Flow source point radius accessor function or value. Default: `3` */
+  sourcePointRadius?: NumericAccessor<FlowDatum>;
+  /** Source point color accessor function or value. Default: `'#88919f'` */
+  sourcePointColor?: ColorAccessor<FlowDatum>;
+  /** Flow particle color accessor function or value. Default: `'#949dad'` */
+  flowParticleColor?: ColorAccessor<FlowDatum>;
+  /** Flow particle radius accessor function or value. Default: `1.1` */
+  flowParticleRadius?: NumericAccessor<FlowDatum>;
+  /** Flow particle speed accessor function or value. The unit is arbitrary, recommended range is 0 – 0.2. Default: `0.07` */
+  flowParticleSpeed?: NumericAccessor<FlowDatum>;
+  /** Flow particle density accessor function or value on the range of [0, 1]. Default: `0.6` */
+  flowParticleDensity?: NumericAccessor<FlowDatum>;
+
+  // Events
+  /** Flow source point click callback function. Default: `undefined` */
+  onSourcePointClick?: (f: FlowDatum, x: number, y: number, event: MouseEvent) => void;
+  /** Flow source point mouse over callback function. Default: `undefined` */
+  onSourcePointMouseEnter?: (f: FlowDatum, x: number, y: number, event: MouseEvent) => void;
+  /** Flow source point mouse leave callback function. Default: `undefined` */
+  onSourcePointMouseLeave?: (f: FlowDatum, event: MouseEvent) => void;
+}
+
+export class LeafletFlowMapConfig<
+  PointDatum extends GenericDataRecord = GenericDataRecord,
+  FlowDatum extends GenericDataRecord = GenericDataRecord,
+> extends LeafletMapConfig<PointDatum> implements LeafletFlowMapConfigInterface<PointDatum, FlowDatum> {
+  sourceLongitude = (f: FlowDatum): number => f['sourceLongitude'] as number
+  sourceLatitude = (f: FlowDatum): number => f['sourceLatitude'] as number
+  targetLongitude = (f: FlowDatum): number => f['targetLongitude'] as number
+  targetLatitude = (f: FlowDatum): number => f['targetLatitude'] as number
+  sourcePointRadius = 3
+  sourcePointColor = '#88919f'
+  flowParticleColor = '#949dad'
+  flowParticleRadius = 1.1
+  flowParticleSpeed = 0.07
+  flowParticleDensity = 0.6
+
+  // Events
+  onSourcePointClick = undefined
+  onSourcePointMouseEnter = undefined
+  onSourcePointMouseLeave = undefined
+}