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

package/src/components/brush/index.ts

@@ -0,0 +1,233 @@
+import { BrushBehavior, brushX, D3BrushEvent } from 'd3-brush'
+import { Selection } from 'd3-selection'
+
+// Core
+import { XYComponentCore } from 'core/xy-component'
+
+// Utils
+import { isNumber, clamp } from 'utils/data'
+import { smartTransition } from 'utils/d3'
+
+// Types
+import { Arrangement } from 'types/position'
+
+// Config
+import { BrushConfig, BrushConfigInterface } from './config'
+
+// Local Types
+import { BrushDirection, BrushHandleType } from './types'
+
+// Styles
+import * as s from './style'
+
+export class Brush<Datum> extends XYComponentCore<Datum, BrushConfig<Datum>, BrushConfigInterface<Datum>> {
+  static selectors = s
+  clippable = false // Don't apply clipping path to this component. See XYContainer
+  config: BrushConfig<Datum> = new BrushConfig()
+  brush: Selection<SVGGElement, unknown, SVGGElement, unknown>
+  unselectedRange: Selection<SVGRectElement, BrushHandleType, SVGGElement, unknown>
+  handleLines: Selection<SVGLineElement, BrushHandleType, SVGGElement, unknown>
+  brushBehaviour: BrushBehavior<unknown> = brushX()
+  events = {
+    [Brush.selectors.brush]: {},
+  }
+
+  private _selection: [number, number] | null = null
+  private _firstRender = true
+
+  constructor (config?: BrushConfigInterface<Datum>) {
+    super()
+    if (config) this.config.init(config)
+
+    this.brush = this.g
+      .append('g')
+      .attr('class', s.brush)
+
+    const directions: BrushHandleType[] = [{ type: BrushDirection.West }, { type: BrushDirection.East }]
+    this.unselectedRange = this.g
+      .selectAll(`.${s.unselected}`)
+      .data(directions)
+      .enter().append('rect')
+      .attr('class', s.unselected)
+
+    this.handleLines = this.g
+      .selectAll(`.${s.handleLine}`)
+      .data(directions)
+      .enter().append('line')
+      .attr('class', s.handleLine)
+  }
+
+  _render (customDuration?: number): void {
+    const { brushBehaviour, config } = this
+    const duration = isNumber(customDuration) ? customDuration : config.duration
+    const xScale = this.xScale
+
+    brushBehaviour
+      .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(brushBehaviour)
+      .classed('non-draggable', !config.draggable)
+
+    const yRange = [this._height, 0]
+    const h = yRange[0] - yRange[1]
+
+    this.g.selectAll('.handle')
+      .attr('y', yRange[1])
+      .attr('height', h)
+
+    this.unselectedRange
+      .attr('y', yRange[1])
+      .attr('height', h)
+
+    this.handleLines
+      .attr('y1', yRange[1] + 10)
+      .attr('y2', yRange[1] + h - 10)
+
+    // We save the X scale range and set it to the available horizontal space to calculate the selection range in pixels correctly
+    const xRange = [0, this._width]
+    const xScaleRange = xScale.range()
+    xScale.range(xRange)
+    const selectionMin = clamp(xScale((config.selection || this._selection)?.[0]) ?? 0, xRange[0], xRange[1])
+    const selectionMax = clamp(xScale((config.selection || this._selection)?.[1]) ?? 0, xRange[0], xRange[1])
+    xScale.range(xScaleRange) // Restore the X scale range
+
+    const selectionLength = selectionMax - selectionMin
+    const brushRange = (selectionLength ? [selectionMin, selectionMax] : xRange) as [number, number]
+    this._positionHandles(brushRange)
+
+    smartTransition(this.brush, duration)
+      .call(brushBehaviour.move, brushRange) // Sets up the brush and calls brush events
+      .on('end interrupt', () => { this._firstRender = false })
+      // We track the first render to not trigger user events on component initialization
+    if (!duration) this._firstRender = false
+  }
+
+  _updateSelection (s: [number, number]): void {
+    const xRange = [0, this._width]
+    this.unselectedRange
+      .attr('x', d => d.type === BrushDirection.West ? xRange[0] : s[1])
+      .attr('width', d => {
+        const length = d.type === BrushDirection.West ? s[0] - xRange[0] : xRange[1] - s[1]
+        const lengthClamped = clamp(length, 0, xRange[1] - xRange[0])
+        return lengthClamped
+      })
+
+    this._positionHandles(s)
+
+    // D3 sets brush handle height to be too long, so we need to update it
+    const yRange = [this._height, 0]
+    const h = yRange[0] - yRange[1]
+    this.g.selectAll('.handle')
+      .attr('y', yRange[1])
+      .attr('height', h)
+  }
+
+  private _positionHandles (s: [number, number]): void {
+    const { config } = this
+
+    this.brush.selectAll<SVGRectElement, BrushHandleType>('.handle')
+      .attr('width', config.handleWidth)
+      .attr('x', d => {
+        if (!s) return 0
+        const west = d.type === BrushDirection.West
+        const inside = config.handlePosition === Arrangement.Inside
+
+        if (west) return s[0] + (inside ? 0 : -config.handleWidth)
+        else return s[1] + (inside ? -config.handleWidth : 0)
+      })
+
+    this.handleLines
+      .attr('transform', d => {
+        if (!s) return null
+        const west = d.type === BrushDirection.West
+        const inside = config.handlePosition === Arrangement.Inside
+        return `translate(${west
+          ? s[0] - (-1) ** Number(inside) * config.handleWidth / 2
+          : s[1] + (-1) ** Number(inside) * config.handleWidth / 2},0)`
+      })
+  }
+
+  _onBrush (event: D3BrushEvent<Datum>): void {
+    const { config } = this
+    const xScale = this.xScale
+    const xRange = [0, this._width]
+    const s = (event?.selection || xRange) as [number, number]
+    const userDriven = !!event?.sourceEvent
+    // Handle edge cases:
+    // (event?.selection === null) happens when user clicks to reset the selection
+    // (s?.[0] === s?.[1]) happens when user drags the selection out of range
+    if (userDriven && (
+      (event?.selection === null) || // happens when user clicks to reset the selection
+      (s?.[0] === s?.[1]) || // happens when user drags the selection out of range
+      (s?.[0] < xRange[0]) || //
+      (s?.[0] > xRange[1]) || // happens when you drag the brush and the domain updates
+      (s?.[1] < xRange[0]) || // to a smaller one and brush goes out of range
+      (s?.[1] > xRange[1]) //
+    )) {
+      this.brush.call(this.brushBehaviour.move, xRange) // Will trigger the 'brush end' callback with `range`
+      return
+    }
+
+    // When you reset selection by clicking on a non-selected brush area, D3 triggers the brush event twice.
+    // The first call will have equal selection coordinates (e.g. [441, 441]), the second call will have the full range (e.g. [0, 700]).
+    // To avoid unnecessary render from the first call we skip it
+    if (s[0] !== s[1] && isNumber(s[0]) && isNumber(s[1])) {
+      // We save the X scale range and set it to the available horizontal space to invert the selection correctly
+      const xScaleRange = xScale.range()
+      xScale.range(xRange)
+      const selectedDomain = s.map(n => +xScale.invert(n)) as [number, number]
+
+      if (userDriven) {
+        // Constraint the selection if configured
+        const xDomain = xScale.domain() as [number, number]
+        const xDomainLength = Math.abs(xDomain[1] - xDomain[0])
+        const selectionLength = Math.abs(selectedDomain[1] - selectedDomain[0])
+
+        if (config.selectionMinLength >= xDomainLength) {
+          console.warn('Unovis | Brush: Configured `selectionMinLength` is bigger than the brush domain')
+        }
+
+        if ((selectionLength < config.selectionMinLength) && (config.selectionMinLength < xDomainLength)) {
+          const selection = config.selection ?? this._selection
+          const range = [xScale(selection[0]), xScale(selection[1])] as [number, number]
+          this.brush.call(this.brushBehaviour.move, range) // Will trigger the 'brush end' callback with `range`
+          // Restore the X scale range
+          xScale.range(xScaleRange)
+          return
+        } else {
+          this._selection = selectedDomain
+          // Restore the X scale range
+          xScale.range(xScaleRange)
+        }
+      }
+
+      this._updateSelection(s)
+      if (!this._firstRender) config.onBrush(selectedDomain, event, userDriven)
+    }
+  }
+
+  _onBrushStart (event: D3BrushEvent<Datum>): void {
+    const { config } = this
+
+    this._onBrush(event)
+    if (!this._firstRender) config.onBrushStart(this._selection, event, !!event?.sourceEvent)
+  }
+
+  _onBrushMove (event: D3BrushEvent<Datum>): void {
+    const { config } = this
+
+    this._onBrush(event)
+    if (!this._firstRender) config.onBrushMove(this._selection, event, !!event?.sourceEvent)
+  }
+
+  _onBrushEnd (event: D3BrushEvent<Datum>): void {
+    const { config } = this
+
+    this._onBrush(event)
+    if (!this._firstRender) config.onBrushEnd(this._selection, event, !!event?.sourceEvent)
+  }
+}

package/{components/brush/style.js → src/components/brush/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: brush-component;
-`;
-const variables = injectGlobal `
+`
+
+export const variables = injectGlobal`
   :root {
     --vis-brush-selection-fill-color: #0b1640;
     --vis-brush-selection-stroke-color: #acb2b9;
@@ -22,8 +23,9 @@ const variables = injectGlobal `
     --vis-brush-handle-fill-color: var(--vis-dark-brush-handle-fill-color);
     --vis-brush-handle-stroke-color: var(--vis-dark-brush-handle-stroke-color);
   }
-`;
-const brush = css `
+`
+
+export const brush = css`
   label: brush;
   fill: none;
   stroke: none;
@@ -44,20 +46,19 @@ const brush = css `
       pointer-events: none;
     }
   }
-`;
-const unselected = css `
+`
+
+export const unselected = css`
   label: unselected;
   fill: var(--vis-brush-selection-fill-color);
   opacity: 0.4;
   pointer-events: none;
-`;
-const handleLine = css `
+`
+
+export const handleLine = css`
   label: handle-line;
   stroke: var(--vis-brush-handle-stroke-color);
   stroke-width: 1;
   fill: none;
   pointer-events: none;
-`;
-
-export { brush, handleLine, root, unselected, variables };
-//# sourceMappingURL=style.js.map
+`

package/src/components/brush/types.ts

@@ -0,0 +1,8 @@
+export type BrushHandleType = {
+  type: BrushDirection;
+}
+
+export enum BrushDirection {
+  West = 'w', // D3 defines brush directions as 'w', 'e', ...
+  East = 'e',
+}

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

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

@@ -0,0 +1,104 @@
+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/{components/bullet-legend/style.js → src/components/bullet-legend/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: bullet-legend-component;
-`;
-const variables = injectGlobal `
+`
+
+export const variables = injectGlobal`
   :root {
     // Undefined by default to allow proper fallback to var(--vis-font-family)
     /* --vis-legend-font-family: */
@@ -24,8 +25,9 @@ const variables = injectGlobal `
     --vis-legend-label-color: var(--vis-dark-legend-label-color);
     --vis-legend-bullet-inactive-color: var(--vis-dark-legend-bullet-inactive-color);
   }
-`;
-const item = css `
+`
+
+export const item = css`
   label: legendItem;
   display: inline;
   font-family: var(--vis-legend-font-family, var(--vis-font-family));
@@ -33,11 +35,13 @@ const item = css `
   white-space: nowrap;
   cursor: default;
   user-select: none;
-`;
-const clickable = css `
+`
+
+export const clickable = css`
   cursor: pointer;
-`;
-const label = css `
+`
+
+export const label = css`
   label: legendItemLabel;
   font-size: var(--vis-legend-label-font-size);
   display: inline-block;
@@ -47,8 +51,9 @@ const label = css `
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-`;
-const bullet = css `
+`
+
+export const bullet = css`
   label: legendItemBullet;
   border-radius: 100%;
   background-color: var(--vis-legend-bullet-inactive-color);
@@ -62,7 +67,4 @@ const bullet = css `
   .inactive {
 
   }
-`;
-
-export { bullet, clickable, item, label, root, variables };
-//# sourceMappingURL=style.js.map
+`

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

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

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

@@ -0,0 +1,53 @@
+/* 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
+}