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

package/src/types/graph.ts

@@ -0,0 +1,40 @@
+export interface GraphInputNode {
+  id?: number | string;
+}
+
+export interface GraphInputLink {
+  id?: number | string;
+  source: number | string | GraphInputNode;
+  target: number | string | GraphInputNode;
+}
+
+export type GraphNodeCore<N extends GraphInputNode, L extends GraphInputLink> = N & {
+  // eslint-disable-next-line no-use-before-define
+  links: GraphLinkCore<N, L>[];
+  /** Unique id */
+  _id: string;
+  /** Index as in the original data array */
+  _index: number;
+  /** True when the node has links */
+  _isConnected: boolean;
+  /** Internal state for node rendering */
+  _state: Record<string, any>;
+}
+
+export type GraphLinkCore<N extends GraphInputNode, L extends GraphInputLink> = L & {
+  source: GraphNodeCore<N, L>;
+  target: GraphNodeCore<N, L>;
+
+  /** Unique id */
+  _id: string;
+  /** Index as in the original data array */
+  _indexGlobal: number;
+  /**  Local index, when there are multiple links between two nodes */
+  _index: number;
+  /** The number of neighbour links */
+  _neighbours: number;
+  /** Link direction */
+  _direction: -1 | 1;
+  /** Internal state for link rendering */
+  _state: Record<string, any>;
+}

package/src/types/map.ts

@@ -0,0 +1,5 @@
+export type MapLink<PointDatum, LinkDatum> = LinkDatum & {
+  source: PointDatum;
+  target: PointDatum;
+}
+

package/src/types/misc.ts

@@ -0,0 +1,10 @@
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+export type Rect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}

package/src/types/position.ts

@@ -0,0 +1,23 @@
+export enum Position {
+  Top = 'top',
+  Bottom = 'bottom',
+  Left = 'left',
+  Right = 'right',
+  Center = 'center',
+  Auto = 'auto',
+}
+
+export enum PositionStrategy {
+  Absolute = 'absolute',
+  Fixed = 'fixed',
+}
+
+export enum Arrangement {
+  Inside = 'inside',
+  Outside = 'outside',
+}
+
+export enum Orientation {
+  Horizontal = 'horizontal',
+  Vertical = 'vertical',
+}

package/src/types/scale.ts

@@ -0,0 +1,47 @@
+import {
+  scaleLinear,
+  scalePow,
+  scaleSqrt,
+  scaleLog,
+  scaleIdentity,
+  scaleTime,
+  scaleUtc,
+  scaleSequential,
+  scaleDiverging,
+  scaleQuantize,
+  scaleQuantile,
+  scaleThreshold,
+  scaleOrdinal,
+  scaleBand,
+  scalePoint,
+  ScaleLinear,
+  ScalePower,
+  ScaleLogarithmic,
+  ScaleTime,
+} from 'd3-scale'
+// Todo Ordinal Scales: ScaleOrdinal, ScaleBand, ScalePoint, ScaleThreshold, ScaleQuantile, ScaleQuantize, ScaleDiverging, ScaleSequential
+
+export type ContinuousScale = ScaleLinear<number, number> | ScalePower<number, number> | ScaleLogarithmic<number, number> | ScaleTime<number, number>
+
+export const Scale = {
+  scaleLinear,
+  scalePow,
+  scaleSqrt,
+  scaleLog,
+  scaleIdentity,
+  scaleTime,
+  scaleUtc,
+  scaleSequential,
+  scaleDiverging,
+  scaleQuantize,
+  scaleQuantile,
+  scaleThreshold,
+  scaleOrdinal,
+  scaleBand,
+  scalePoint,
+}
+
+export enum ScaleDimension {
+  X = 'x',
+  Y = 'y',
+}

package/src/types/shape.ts

@@ -0,0 +1,7 @@
+export enum Shape {
+  Square = 'square',
+  Circle = 'circle',
+  Hexagon = 'hexagon',
+  Triangle = 'triangle',
+  Cluster = 'cluster',
+}

package/src/types/spacing.ts

@@ -0,0 +1,6 @@
+export type Spacing = {
+  left?: number;
+  right?: number;
+  top?: number;
+  bottom?: number;
+}

package/src/types/svg.ts

@@ -0,0 +1,32 @@
+import { TextAlign } from 'types/text'
+
+export type TransformValues = {
+  translate: {
+    x: number;
+    y: number;
+  };
+  scale: {
+    x: number;
+    y: number;
+  };
+}
+
+/**
+ * Converts a TextAlign value into an SVG text-anchor attribute value.
+ *
+ * @param {TextAlign | string} textAlign - The TextAlign value to convert.
+ * @returns {'start' | 'middle' | 'end'} The corresponding text-anchor attribute value. Defaults to 'start' if an invalid TextAlign value is provided.
+ */
+export function getTextAnchorFromTextAlign (textAlign: TextAlign | string): 'start' | 'middle' | 'end' {
+  switch (textAlign) {
+    case TextAlign.Center:
+      return 'middle'
+    case TextAlign.Right:
+      return 'end'
+    case TextAlign.Left:
+    default:
+      return 'start'
+  }
+}
+
+

package/src/types/symbol.ts

@@ -0,0 +1,21 @@
+import { symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye } from 'd3-shape'
+
+export enum SymbolType {
+  Circle = 'circle',
+  Cross = 'cross',
+  Diamond = 'diamond',
+  Square = 'square',
+  Star = 'star',
+  Triangle = 'triangle',
+  Wye = 'wye',
+}
+
+export const Symbol = {
+  [SymbolType.Circle]: symbolCircle,
+  [SymbolType.Cross]: symbolCross,
+  [SymbolType.Diamond]: symbolDiamond,
+  [SymbolType.Square]: symbolSquare,
+  [SymbolType.Star]: symbolStar,
+  [SymbolType.Triangle]: symbolTriangle,
+  [SymbolType.Wye]: symbolWye,
+}

package/src/types/text.ts

@@ -0,0 +1,71 @@
+export enum TrimMode {
+  Start = 'start',
+  Middle = 'middle',
+  End = 'end',
+}
+
+export enum VerticalAlign {
+  Top = 'top',
+  Middle = 'middle',
+  Bottom = 'bottom',
+}
+
+export enum FitMode {
+  Wrap = 'wrap',
+  Trim = 'trim',
+}
+
+export enum TextAlign {
+  Left = 'left',
+  Center = 'center',
+  Right = 'right',
+}
+
+export type UnovisText = {
+  // The text content to be displayed.
+  text: string;
+  // The font size of the text in pixels.
+  fontSize: number;
+  // The font family of the text (optional). Default: `'var(--vis-font-family)'`.
+  fontFamily?: string;
+  // The color of the text (optional).
+  color?: string;
+  // The line height scaling factor for the text (optional).
+  lineHeight?: number;
+  // The top margin of the text block in pixels (optional).
+  marginTop?: number;
+  // The bottom margin of the text block in pixels (optional).
+  marginBottom?: number;
+  // The font width-to-height ratio (optional).
+  fontWidthToHeightRatio?: number;
+}
+
+export type UnovisWrappedText = UnovisText & {
+  // An array of text lines, where each element represents a single line of text.
+  _lines: string[];
+  // Estimated height of this text block
+  _estimatedHeight: number;
+}
+
+export type UnovisTextOptions = {
+  // The maximum width of the text in pixels.
+  width?: number;
+  // The word separator(s) used to split the text into words.
+  separator?: string | string[];
+  // The vertical alignment of the text ('top', 'middle', or 'bottom').
+  verticalAlign?: VerticalAlign | string;
+  // The horizontal text alignment ('left', 'center', or 'right').
+  textAlign?: TextAlign | string;
+  // Whether to use a fast estimation method or a more accurate one for text calculations.
+  fastMode?: boolean;
+  // Force word break if they don't fit into the width
+  wordBreak?: boolean;
+}
+
+export type UnovisTextFrameOptions = UnovisTextOptions & {
+  width: number;
+  height?: number;
+  x?: number;
+  y?: number;
+}
+

package/src/types.ts

@@ -0,0 +1,31 @@
+/* eslint-disable max-len */
+// Global Types
+export * from 'types/accessor'
+export * from 'types/curve'
+export * from 'types/symbol'
+export * from 'types/scale'
+export * from 'types/position'
+export * from 'types/shape'
+export * from 'types/component'
+export * from 'types/text'
+export * from 'types/map'
+export * from 'types/spacing'
+export * from 'types/graph'
+export * from 'types/data'
+export * from 'types/direction'
+
+// Component Types
+export * from 'core/component/types'
+export * from 'components/crosshair/types'
+export * from 'components/axis/types'
+export * from 'components/chord-diagram/types'
+export * from 'components/topojson-map/types'
+export * from 'components/leaflet-map/types'
+export * from 'components/leaflet-map/renderer/map-style'
+export * from 'components/graph/types'
+export * from 'components/sankey/types'
+export * from 'components/vis-controls/types'
+export * from 'components/free-brush/types'
+export * from 'components/bullet-legend/types'
+export * from 'components/xy-labels/types'
+export * from 'components/nested-donut/types'

package/src/utils/color.ts

@@ -0,0 +1,41 @@
+import { color } from 'd3-color'
+
+// Core
+import { getCSSColorVariable } from 'styles/colors'
+
+// Utils
+import { ColorAccessor, StringAccessor } from 'types/accessor'
+import { getString, isNumber } from 'utils/data'
+import { isStringCSSVariable, getCSSVariableValue } from 'utils/misc'
+
+/** Retrieves color from the data if provided, fallbacks to CSS variables if the index was passed */
+export function getColor<T> (
+  d: T,
+  accessor: ColorAccessor<T>,
+  index?: number,
+  dontFallbackToCssVar?: boolean
+): string | null {
+  if (Array.isArray(accessor) && isFinite(index)) return accessor[index % accessor.length]
+
+  const value = getString(d, accessor as StringAccessor<T>, index)
+  return (value || ((isNumber(index) && !dontFallbackToCssVar) ? `var(${getCSSColorVariable(index)})` : null))
+}
+
+export function hexToRgb (hex: string): { r: number; g: number; b: number } {
+  const parsed = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return parsed ? {
+    r: parseInt(parsed[1], 16),
+    g: parseInt(parsed[2], 16),
+    b: parseInt(parsed[3], 16),
+  } : { r: 0, g: 0, b: 0 }
+}
+
+export function hexToBrightness (hex: string): number {
+  const rgb = hexToRgb(hex)
+  return (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255
+}
+
+export function getHexValue (s: string, context: HTMLElement | SVGElement): string {
+  const hex = isStringCSSVariable(s) ? getCSSVariableValue(s, context) : s
+  return color(hex)?.formatHex()
+}

package/src/utils/d3.ts

@@ -0,0 +1,15 @@
+import { interrupt, Transition } from 'd3-transition'
+import { BaseType, Selection } from 'd3-selection'
+
+export function smartTransition<Element extends BaseType, Datum, ParentElement extends BaseType, ParentDatum> (
+  selection: Selection<Element, Datum, ParentElement, ParentDatum>,
+  duration?: number,
+  easing?: (normalizedTime: number) => number
+): Selection<Element, Datum, ParentElement, ParentDatum> | Transition<Element, Datum, ParentElement, ParentDatum> {
+  selection.nodes().forEach(node => interrupt(node)) // Interrupt active transitions if any
+  if (duration) {
+    const transition = selection.transition().duration(duration)
+    if (easing) transition.ease(easing)
+    return transition
+  } else return selection
+}

package/src/utils/data.ts

@@ -0,0 +1,328 @@
+import { max, min, mean, bisector } from 'd3-array'
+import { throttle as _throttle } from 'throttle-debounce'
+
+// Types
+import { NumericAccessor, StringAccessor, BooleanAccessor, ColorAccessor, GenericAccessor } from 'types/accessor'
+import { StackValuesRecord } from 'types/data'
+
+export const isNumber = <T>(a: T): boolean => typeof a === 'number'
+export const isFunction = <T>(a: T): boolean => typeof a === 'function'
+export const isUndefined = <T>(a: T): boolean => a === undefined
+export const isNil = <T>(a: T): boolean => a == null
+export const isString = <T>(a: T): boolean => typeof a === 'string'
+export const isArray = <T>(a: T): boolean => Array.isArray(a)
+export const isObject = <T>(a: T): boolean => (a instanceof Object)
+export const isAClassInstance = <T>(a: T): boolean => a.constructor.name !== 'Function' && a.constructor.name !== 'Object'
+export const isPlainObject = <T>(a: T): boolean => isObject(a) && !isArray(a) && !isFunction(a) && !isAClassInstance(a)
+
+export const isEmpty = <T>(obj: T): boolean => {
+  return [Object, Array].includes((obj || {}).constructor as ArrayConstructor | ObjectConstructor) &&
+    !Object.entries((obj || {})).length
+}
+
+// Based on https://github.com/maplibre/maplibre-gl-js/blob/e78ad7944ef768e67416daa4af86b0464bd0f617/src/style-spec/util/deep_equal.ts, 3-Clause BSD license
+export const isEqual = (a?: unknown | null, b?: unknown | null, visited: Set<any> = new Set()): boolean => {
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false
+
+    if (visited.has(a)) return true
+    else visited.add(a)
+
+    for (let i = 0; i < a.length; i++) {
+      if (!isEqual(a[i], b[i], visited)) return false
+    }
+
+    return true
+  }
+
+  if (typeof a === 'object' && a !== null && b !== null) {
+    if (!(typeof b === 'object')) return false
+    if (a === b) return true
+
+    const keys = Object.keys(a)
+    if (keys.length !== Object.keys(b).length) return false
+
+    if (visited.has(a)) return true
+    else visited.add(a)
+
+    for (const key in a) {
+      if (!isEqual(a[key], b[key], visited)) return false
+    }
+
+    return true
+  }
+
+  return a === b
+}
+
+export const without = <T>(arr: Array<T>, ...args: T[]): Array<T> => arr.filter(item => !args.includes(item))
+export const flatten = <T>(arr: Array<T | T[]>): Array<T> => arr.flat() as T[]
+export const cloneDeep = <T>(obj: T, stack: Map<any, any> = new Map()): T => {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj
+  }
+
+  if (obj instanceof Date) {
+    return new Date(obj.getTime()) as unknown as T
+  }
+
+  if (obj instanceof Array) {
+    const clone: unknown[] = []
+    stack.set(obj, clone)
+    for (const item of obj) {
+      clone.push(stack.has(item) ? stack.get(item) : cloneDeep(item, stack))
+    }
+    return clone as unknown as T
+  }
+
+  // Class instances will be copied without cloning
+  if (isAClassInstance(obj)) {
+    const clone = obj
+    return clone
+  }
+
+  if (obj instanceof Object) {
+    const clone = {} as T
+    stack.set(obj, clone)
+    const objAsRecord = obj as Record<string | number, unknown>
+    Object.keys(obj)
+      .reduce((newObj: typeof objAsRecord, key: string | number): typeof objAsRecord => {
+        newObj[key] = stack.has(objAsRecord[key]) ? stack.get(objAsRecord[key]) : cloneDeep(objAsRecord[key], stack)
+        return newObj
+      }, clone as typeof objAsRecord)
+
+    return clone
+  }
+
+  return obj
+}
+
+
+export const merge = <T, K>(obj1: T, obj2: K, visited: Map<any, any> = new Map()): T & K => {
+  type Rec = Record<string | number, unknown>
+
+  if (!obj1 || !obj2) return obj1 as T & K
+  if ((obj1 as unknown) === (obj2 as unknown)) return obj1 as T & K
+
+  const newObj = (isAClassInstance(obj1 as Rec) ? obj1 : cloneDeep(obj1)) as T & K
+
+  // Taking care of recursive structures
+  if (visited.has(obj2)) return visited.get(obj2)
+  else visited.set(obj2, newObj)
+
+  Object.keys(obj2 as Rec).forEach(key => {
+    if (isPlainObject((obj1 as Rec)[key]) && isPlainObject((obj2 as Rec)[key])) {
+      (newObj as Rec)[key] = merge((obj1 as Rec)[key], (obj2 as Rec)[key], visited)
+    } else if (isAClassInstance(obj2 as Rec)) {
+      (newObj as Rec)[key] = obj2
+    } else {
+      (newObj as Rec)[key] = cloneDeep((obj2 as Rec)[key])
+    }
+  })
+
+  return newObj
+}
+
+export const omit = <T extends Record<string | number | symbol, unknown>>(obj: T, props: Array<keyof T>): Partial<T> => {
+  obj = { ...obj }
+  props.forEach(prop => delete obj[prop])
+  return obj
+}
+
+export const groupBy = <T extends Record<string | number, any>> (arr: T[], accessor: (a: T) => string | number): Record<string | number, T[]> => {
+  return arr.reduce(
+    (grouped, v, i, a, k = accessor(v)) => (((grouped[k] || (grouped[k] = [])).push(v), grouped)),
+    {} as Record<string | number, T[]>
+  )
+}
+
+export const sortBy = <T>(arr: Array<T>, accessor: (a: T) => string | number): Array<T> => {
+  return arr.concat() // The native sort method modifies the array in place. We use `.concat()` to copy the array first
+    .sort((a, b): number => {
+      return (accessor(a) > accessor(b)) ? 1 : ((accessor(b) > accessor(a)) ? -1 : 0)
+    })
+}
+
+export const throttle = <T extends (...args: any[]) => any>(
+  f: T,
+  delay: number,
+  options?: {
+    noTrailing?: boolean;
+    noLeading?: boolean;
+    debounceMode?: boolean;
+  }
+): _throttle<T> => _throttle(delay, f, options)
+
+export function getValue<T, ReturnType> (
+  d: T,
+  accessor: NumericAccessor<T> | StringAccessor<T> | BooleanAccessor<T> | ColorAccessor<T> | GenericAccessor<ReturnType, T>,
+  index?: number
+): ReturnType {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  if (isFunction(accessor)) return (accessor as Function)(d, index) as (ReturnType | null | undefined)
+  else return accessor as unknown as (ReturnType | null | undefined)
+}
+
+export function getString<T> (d: T, accessor: StringAccessor<T>, i?: number): string | null | undefined {
+  return getValue<T, string>(d, accessor, i)
+}
+
+export function getNumber<T> (d: T, accessor: NumericAccessor<T>, i?: number): number | null | undefined {
+  return getValue<T, number>(d, accessor, i)
+}
+
+export function getBoolean<T> (d: T, accessor: BooleanAccessor<T>, i?: number): boolean | null | undefined {
+  return getValue<T, boolean>(d, accessor, i)
+}
+
+export function clean<T> (data: T[]): T[] {
+  return data.filter(d => d && !isNumber(d))
+}
+
+export function clamp (d: number, min: number, max: number): number {
+  return Math.min(Math.max(d, min), max)
+}
+
+export function unique<T> (array: T[]): T[] {
+  return Array.from(new Set(array))
+}
+
+export function countUnique<T> (array: T[], accessor = d => d): number {
+  return new Set(array.map(d => accessor(d))).size
+}
+
+export function arrayOfIndices (n: number): number[] {
+  return [...Array(n).keys()]
+}
+
+export function shallowDiff (o1: Record<string, unknown> = {}, o2: Record<string, unknown> = {}): Record<string, unknown> {
+  return Object.keys(o2).reduce((diff, key) => {
+    if (o1[key] === o2[key]) return diff
+    return {
+      ...diff,
+      [key]: o2[key],
+    }
+  }, {})
+}
+
+export function getStackedExtent<Datum> (data: Datum[], ...acs: NumericAccessor<Datum>[]): (number | undefined)[] {
+  if (!data) return [undefined, undefined]
+  if (isArray(acs)) {
+    let minValue = 0
+    let maxValue = 0
+    data.forEach((d, i) => {
+      let positiveStack = 0
+      let negativeStack = 0
+      for (const a of acs as NumericAccessor<Datum>[]) {
+        const value = getNumber(d, a, i) || 0
+        if (value >= 0) positiveStack += value
+        else negativeStack += value
+      }
+
+      if (positiveStack > maxValue) maxValue = positiveStack
+      if (negativeStack < minValue) minValue = negativeStack
+    })
+    return [minValue, maxValue]
+  }
+}
+
+export function getStackedValues<Datum> (d: Datum, index: number, ...acs: NumericAccessor<Datum>[]): (number | undefined)[] {
+  const values = []
+
+  let positiveStack = 0
+  let negativeStack = 0
+  for (const a of acs as NumericAccessor<Datum>[]) {
+    const value = getNumber(d, a, index) || 0
+    if (value >= 0) {
+      values.push(positiveStack += value)
+    } else {
+      values.push(negativeStack += value)
+    }
+  }
+
+  return values
+}
+
+export function getStackedData<Datum> (
+  data: Datum[],
+  baseline: NumericAccessor<Datum>,
+  acs: NumericAccessor<Datum>[],
+  prevNegative?: boolean[] // to help guessing the stack direction (positive/negative) when the values are 0 or null
+): StackValuesRecord[] {
+  const baselineValues = data.map((d, i) => getNumber(d, baseline, i) || 0)
+  const isNegativeStack = acs.map((a, j) => {
+    const average = mean(data, (d, i) => getNumber(d, a, i) || 0)
+    return (average === 0 && Array.isArray(prevNegative)) ? prevNegative[j] : average < 0
+  })
+
+  const stackedData: StackValuesRecord[] = acs.map(() => [])
+  data.forEach((d, i) => {
+    let positiveStack = baselineValues[i]
+    let negativeStack = baselineValues[i]
+    acs.forEach((a, j) => {
+      const value = getNumber(d, a, i) || 0
+      if (!isNegativeStack[j]) {
+        stackedData[j].push([positiveStack, positiveStack += value])
+      } else {
+        stackedData[j].push([negativeStack, negativeStack += value])
+      }
+    })
+  })
+
+  // Fill in additional stack information
+  stackedData.forEach((stack, i) => {
+    stack.negative = isNegativeStack[i]
+  })
+
+  stackedData.filter(s => s.negative)
+    .forEach((s, i, arr) => {
+      s.ending = i === arr.length - 1
+    })
+
+  stackedData.filter(s => !s.negative)
+    .forEach((s, i, arr) => {
+      s.ending = i === arr.length - 1
+    })
+
+  return stackedData
+}
+
+export function getMin<Datum> (data: Datum[], ...acs: NumericAccessor<Datum>[]): number | undefined {
+  if (!data) return undefined
+  const minValue = min(data, (d, i) => min(acs as NumericAccessor<Datum>[], a => getNumber(d, a, i)))
+  return minValue
+}
+
+export function getMax<Datum> (data: Datum[], ...acs: NumericAccessor<Datum>[]): number | undefined {
+  if (!data) return undefined
+  const maxValue = max(data, (d, i) => max(acs as NumericAccessor<Datum>[], a => getNumber(d, a, i)))
+  return maxValue
+}
+
+export function getExtent<Datum> (data: Datum[], ...acs: NumericAccessor<Datum>[]): (number | undefined)[] {
+  return [getMin(data, ...acs), getMax(data, ...acs)]
+}
+
+export function getNearest<Datum> (data: Datum[], value: number, accessor: NumericAccessor<Datum>): Datum {
+  if (data.length <= 1) return data[0]
+
+  const values = data.map((d, i) => getNumber(d, accessor, i))
+  values.sort((a, b) => a - b)
+
+  const xBisector = bisector(d => d).left
+  const index = xBisector(values, value, 1, data.length - 1)
+  return value - values[index - 1] > values[index] - value ? data[index] : data[index - 1]
+}
+
+export function filterDataByRange<Datum> (data: Datum[], range: [number, number], accessor: NumericAccessor<Datum>): Datum[] {
+  const filteredData = data.filter((d, i) => {
+    const value = getNumber(d, accessor, i)
+    return (value >= range[0]) && (value < range[1])
+  })
+
+  return filteredData
+}
+
+export function isNumberWithinRange (value: number, range: [number, number]): boolean {
+  return (value >= range[0]) && (value <= range[1])
+}