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

package/src/components/donut/config.ts

@@ -1,65 +0,0 @@
-// Core
-import { ComponentConfigInterface, ComponentConfig } from 'core/component/config'
-
-// Types
-import { ColorAccessor, NumericAccessor } from 'types/accessor'
-
-export interface DonutConfigInterface<Datum> extends ComponentConfigInterface {
-  /** 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) => string | number);
-  /** Value accessor function. Default: `undefined` */
-  value: NumericAccessor<Datum>;
-  /** Diagram angle range. Default: `[0, 2 * Math.PI]` */
-  angleRange?: [number, number];
-  /** Pad angle. Default: `0` */
-  padAngle?: number;
-  /** Custom sort function. Default: `undefined` */
-  sortFunction?: (a: Datum, b: Datum) => number;
-  /** Corner Radius. Default: `0` */
-  cornerRadius?: number;
-  /** Color accessor function. Default: `undefined` */
-  color?: ColorAccessor<Datum>;
-  /** Explicitly set the donut outer radius. Default: `undefined` */
-  radius?: number;
-  /** Arc width in pixels. Set to `0` if you want to have a pie chart. Default: `20` */
-  arcWidth?: number;
-  /** Central label accessor function or text. Default: `undefined` */
-  centralLabel?: string;
-  /** Central sub-label accessor function or text. Default: `undefined` */
-  centralSubLabel?: string;
-  /** Enables wrapping for the sub-label. Default: `true` */
-  centralSubLabelWrap?: boolean;
-  /** When true, the component will display empty segments (the ones that have `0` values) as tiny slices.
-   * Default: `false`
-  */
-  showEmptySegments?: boolean;
-  /** Angular size for empty segments in radians. Default: `0.5 * Math.PI / 180` */
-  emptySegmentAngle?: number;
-  /** Show donut background. The color is configurable via
-   * the `--vis-donut-background-color` and `--vis-dark-donut-background-color` CSS variables.
-   * Default: `true`
-  */
-  showBackground?: boolean;
-  /** Background angle range. When undefined, the value will be taken from `angleRange`. Default: `undefined` */
-  backgroundAngleRange?: [number, number];
-}
-
-export class DonutConfig<Datum> extends ComponentConfig implements DonutConfigInterface<Datum> {
-  // eslint-disable-next-line dot-notation
-  id = (d: Datum, i: number): string | number => d['id'] ?? i
-  value = undefined
-  angleRange: [number, number] = [0, 2 * Math.PI]
-  padAngle = 0
-  sortFunction = undefined
-  cornerRadius = 0
-  color = undefined
-  radius = undefined
-  arcWidth = 20
-  centralLabel = undefined
-  centralSubLabel = undefined
-  centralSubLabelWrap = true
-  showEmptySegments = false
-  emptySegmentAngle = 0.5 * Math.PI / 180
-  showBackground = true
-  backgroundAngleRange = undefined
-}

package/src/components/donut/index.ts

@@ -1,148 +0,0 @@
-import { Selection } from 'd3-selection'
-import { pie, arc } from 'd3-shape'
-
-// Core
-import { ComponentCore } from 'core/component'
-import { SeriesDataModel } from 'data-models/series'
-
-// Utils
-import { smartTransition } from 'utils/d3'
-import { isNumber, clamp, getNumber } from 'utils/data'
-import { wrapSVGText } from 'utils/text'
-
-// Types
-import { Spacing } from 'types/spacing'
-
-// Local Types
-import { DonutArcDatum, DonutArcAnimState, DonutDatum } from './types'
-
-// Config
-import { DonutConfig, DonutConfigInterface } from './config'
-
-// Modules
-import { createArc, updateArc, removeArc } from './modules/arc'
-
-// Styles
-import * as s from './style'
-
-export class Donut<Datum> extends ComponentCore<Datum[], DonutConfig<Datum>, DonutConfigInterface<Datum>> {
-  static selectors = s
-  config: DonutConfig<Datum> = new DonutConfig()
-  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()
-
-  arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>
-  arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  centralLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>
-  centralSubLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>
-  arcGen = arc<DonutArcAnimState>()
-
-  events = {
-  }
-
-  constructor (config?: DonutConfigInterface<Datum>) {
-    super()
-    if (config) this.config.init(config)
-    this.arcBackground = this.g.append('path')
-    this.arcGroup = this.g.append('g')
-    this.centralLabel = this.g.append('text')
-      .attr('class', s.centralLabel)
-    this.centralSubLabel = this.g.append('text')
-      .attr('class', s.centralSubLabel)
-  }
-
-  get bleed (): Spacing {
-    return { top: 0, bottom: 0, left: 0, right: 0 }
-  }
-
-  _render (customDuration?: number): void {
-    const { config, datamodel, bleed } = this
-
-    // Wrap data to preserve original indices
-    const data: DonutDatum<Datum>[] = datamodel.data
-      .map((d, i) => ({
-        index: i,
-        datum: d,
-      }))
-      .filter(d => config.showEmptySegments || getNumber(d.datum, config.value, d.index))
-
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-    const outerRadius = config.radius || Math.min(this._width - bleed.left - bleed.right, this._height - bleed.top - bleed.bottom) / 2
-    const innerRadius = config.arcWidth === 0 ? 0 : clamp(outerRadius - config.arcWidth, 0, outerRadius - 1)
-
-    this.arcGen
-      .startAngle(d => d.startAngle)
-      .endAngle(d => d.endAngle)
-      .innerRadius(d => d.innerRadius)
-      .outerRadius(d => d.outerRadius)
-      .padAngle(d => d.padAngle)
-      .cornerRadius(config.cornerRadius)
-
-    const pieGen = pie<DonutDatum<Datum>>()
-      .startAngle(config.angleRange?.[0] ?? 0)
-      .endAngle(config.angleRange?.[1] ?? 2 * Math.PI)
-      .padAngle(config.padAngle)
-      .value(d => getNumber(d.datum, config.value, d.index) || 0)
-      .sort(config.sortFunction)
-
-    this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)
-
-    const arcData: DonutArcDatum<Datum>[] = pieGen(data).map(d => {
-      const arc = {
-        ...d,
-        data: d.data.datum,
-        index: d.data.index,
-        innerRadius,
-        outerRadius,
-      }
-
-      if (config.showEmptySegments && d.endAngle - d.startAngle - d.padAngle <= Number.EPSILON) {
-        arc.endAngle = d.startAngle + Math.max(config.emptySegmentAngle, config.padAngle)
-        arc.padAngle = d.padAngle / 2
-      }
-      return arc
-    })
-
-    // Arc segments
-    const arcsSelection = this.arcGroup
-      .selectAll<SVGPathElement, DonutArcDatum<Datum>>(`.${s.segment}`)
-      .data(arcData, (d: DonutArcDatum<Datum>) => config.id(d.data, d.index))
-
-    const arcsEnter = arcsSelection.enter().append('path')
-      .attr('class', s.segment)
-      .call(createArc, config)
-
-    const arcsMerged = arcsSelection.merge(arcsEnter)
-    arcsMerged.call(updateArc, config, this.arcGen, duration)
-    arcsMerged.sort((a, b) => b.value - a.value)
-
-    arcsSelection.exit<DonutArcDatum<Datum>>()
-      .attr('class', s.segmentExit)
-      .call(removeArc, duration)
-
-    // Label
-    this.centralLabel
-      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
-      .attr('dy', config.centralSubLabel ? '-0.55em' : null)
-      .text(config.centralLabel ?? null)
-
-    this.centralSubLabel
-      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
-      .attr('dy', config.centralLabel ? '0.55em' : null)
-      .text(config.centralSubLabel ?? null)
-
-    if (config.centralSubLabelWrap) wrapSVGText(this.centralSubLabel, innerRadius * 1.9)
-
-    // Background
-    this.arcBackground.attr('class', s.background)
-      .attr('visibility', config.showBackground ? null : 'hidden')
-      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
-
-    smartTransition(this.arcBackground, duration)
-      .attr('d', this.arcGen({
-        startAngle: config.backgroundAngleRange?.[0] ?? config.angleRange?.[0] ?? 0,
-        endAngle: config.backgroundAngleRange?.[1] ?? config.angleRange?.[1] ?? 2 * Math.PI,
-        innerRadius,
-        outerRadius,
-      }))
-  }
-}

package/src/components/donut/modules/arc.ts

@@ -1,86 +0,0 @@
-import { Selection } from 'd3-selection'
-import { Transition } from 'd3-transition'
-import { interpolate } from 'd3-interpolate'
-import { Arc } from 'd3-shape'
-
-// Utils
-import { getColor } from 'utils/color'
-import { smartTransition } from 'utils/d3'
-
-// Local Types
-import { DonutArcDatum, DonutArcAnimState } from '../types'
-
-// Config
-import { DonutConfig } from '../config'
-
-export interface ArcNode extends SVGElement {
-  _animState?: DonutArcAnimState;
-}
-
-export function createArc<Datum> (
-  selection: Selection<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>,
-  config: DonutConfig<Datum>
-): void {
-  selection
-    .style('fill', d => getColor(d.data, config.color, d.index))
-    .style('opacity', 0)
-    .each((d, i, els) => {
-      const arcNode: ArcNode = els[i]
-      const angleCenter = (d.startAngle + d.endAngle) / 2
-      const angleHalfWidth = (d.endAngle - d.startAngle) / 2
-      arcNode._animState = {
-        startAngle: angleCenter - angleHalfWidth,
-        endAngle: angleCenter + angleHalfWidth,
-        innerRadius: d.innerRadius,
-        outerRadius: d.outerRadius,
-        padAngle: d.padAngle,
-      }
-    })
-}
-
-export function updateArc<Datum> (
-  selection: Selection<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>,
-  config: DonutConfig<Datum>,
-  arcGen: Arc<any, DonutArcAnimState>,
-  duration: number
-): void {
-  selection
-    .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
-    .style('fill', d => getColor(d.data, config.color, d.index))
-
-  const setOpacity = (d: DonutArcDatum<Datum>): number => (config.showEmptySegments || d.value) ? 1 : 0
-  if (duration) {
-    const transition = smartTransition(selection, duration)
-      .style('opacity', setOpacity) as Transition<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>
-
-    transition.attrTween('d', (d, i, els) => {
-      const arcNode: ArcNode = els[i]
-      const nextAnimState: DonutArcAnimState = {
-        startAngle: d.startAngle,
-        endAngle: d.endAngle,
-        innerRadius: d.innerRadius,
-        outerRadius: d.outerRadius,
-        padAngle: d.padAngle,
-      }
-      const datum = interpolate(arcNode._animState, nextAnimState)
-
-      return (t: number): string => {
-        arcNode._animState = datum(t)
-        return arcGen(arcNode._animState as DonutArcDatum<Datum>)
-      }
-    })
-  } else {
-    selection
-      .attr('d', arcGen)
-      .style('opacity', setOpacity)
-  }
-}
-
-export function removeArc<Datum> (
-  selection: Selection<SVGPathElement, DonutArcDatum<Datum>, SVGGElement, unknown>,
-  duration: number
-): void {
-  smartTransition(selection, duration)
-    .style('opacity', 0)
-    .remove()
-}

package/src/components/donut/types.ts

@@ -1,17 +0,0 @@
-import { PieArcDatum } from 'd3-shape'
-
-export type DonutDatum<Datum> = {
-  datum: Datum;
-  /** Original datum index as in unfiltered data */
-  index: number;
-}
-
-/** Data type for Donut Arc Generator */
-export interface DonutArcDatum<Datum> extends PieArcDatum<Datum> {
-  /** Original datum index as in unfiltered data */
-  index: number;
-  innerRadius: number;
-  outerRadius: number;
-}
-
-export type DonutArcAnimState = { startAngle: number; endAngle: number; innerRadius: number; outerRadius: number; padAngle?: number }

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

@@ -1,31 +0,0 @@
-import { Config } from 'core/config'
-
-export interface FlowLegendConfigInterface {
-  /** Custom width of the component.  Default: `undefined` */
-  customWidth?: number;
-  /** Legend items array as string[]. Default: `[]` */
-  items?: string[];
-  /** Color of the flow line. Default: `undefined` */
-  lineColor?: string;
-  /** Color of the flow label. Default: `undefined` */
-  labelColor?: string;
-  /** Font size of flow labels in pixels. Default: `12` */
-  labelFontSize?: number;
-  /** Arrow symbol. Default: `'▶'` */
-  arrowSymbol?: string;
-  /** Color of the arrow. Default: `undefined` */
-  arrowColor?: string;
-  /** Callback function for the legend item click. Default: `undefined` */
-  onLegendItemClick?: ((label?: string, i?: number) => void);
-}
-
-export class FlowLegendConfig extends Config implements FlowLegendConfigInterface {
-  customWidth = undefined
-  items = []
-  labelFontSize = 12
-  lineColor = undefined
-  labelColor = undefined
-  arrowSymbol = '▶'
-  arrowColor = undefined
-  onLegendItemClick = undefined
-}

package/src/components/flow-legend/index.ts

@@ -1,103 +0,0 @@
-import { select, Selection } from 'd3-selection'
-
-// Utils
-import { smartTransition } from 'utils/d3'
-
-// Config
-import { FlowLegendConfig, FlowLegendConfigInterface } from './config'
-
-// Local Types
-import { FlowLegendItem, FlowLegendItemType } from './types'
-
-// Styles
-import * as s from './style'
-
-export class FlowLegend {
-  div: Selection<HTMLDivElement, unknown, null, undefined>
-  element: HTMLElement
-  line: Selection<HTMLDivElement, unknown, null, undefined>
-  labels: Selection<HTMLDivElement, unknown, null, undefined>
-  prevConfig: FlowLegendConfig
-  config: FlowLegendConfig
-  protected _container: HTMLElement
-
-  constructor (element: HTMLElement, config?: FlowLegendConfigInterface) {
-    this._container = element
-
-    this.div = select(this._container).append('div').attr('class', s.root)
-    this.element = this.div.node()
-
-    this.line = this.div.append('div')
-    this.labels = this.div.append('div').attr('class', s.labels)
-
-    if (config) this.update(config)
-  }
-
-  update (config: FlowLegendConfigInterface): void {
-    this.prevConfig = this.config
-    this.config = new FlowLegendConfig().init(config)
-    this.render()
-  }
-
-  render (): void {
-    const { config } = this
-    if (!config.items.length) return
-
-    if (config.customWidth) this.div.style('width', `${config.customWidth}px`)
-
-    // Prepare Data
-    const legendData: FlowLegendItem[] = config.items.reduce((acc, label, i) => {
-      acc.push({
-        text: label,
-        index: i,
-        type: FlowLegendItemType.Label,
-      })
-
-      if (config.arrowSymbol && (acc.length !== config.items.length * 2 - 1)) {
-        acc.push({
-          text: config.arrowSymbol,
-          index: i,
-          type: FlowLegendItemType.Symbol,
-        })
-      }
-      return acc
-    }, [])
-
-    // Draw
-    const legendItems = this.labels.selectAll<HTMLDivElement, FlowLegendItem>(`.${s.item}`)
-      .data(legendData)
-
-    const legendItemsEnter = legendItems.enter()
-      .append('div')
-      .attr('class', s.item)
-      .attr('opacity', 0)
-
-    legendItemsEnter.filter(d => d.type === FlowLegendItemType.Label)
-      .on('click', this._onItemClick.bind(this))
-
-    legendItemsEnter.append('span')
-      .attr('class',
-        d => d.type === FlowLegendItemType.Symbol
-          ? s.arrow(config.arrowColor)
-          : s.label(config.labelFontSize, config.labelColor)
-      )
-      .classed(s.clickable, d => d.type === FlowLegendItemType.Label && !!config.onLegendItemClick)
-
-    const legendItemsMerged = legendItemsEnter.merge(legendItems)
-    smartTransition(legendItemsMerged, 500)
-      .attr('opacity', 1)
-    legendItemsMerged.select('span').html(d => d.text)
-
-    legendItems.exit().remove()
-
-    this.line
-      .attr('class', s.line(config.lineColor))
-      .style('opacity', config.items.length > 1 ? 1 : 0)
-  }
-
-  _onItemClick (event: MouseEvent, d: FlowLegendItem): void {
-    const { config } = this
-
-    if (config.onLegendItemClick) config.onLegendItemClick(d.text, d.index)
-  }
-}

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

@@ -1,10 +0,0 @@
-export enum FlowLegendItemType {
-  Label = 'label',
-  Symbol = 'symbol',
-}
-
-export interface FlowLegendItem {
-  text: string;
-  type: FlowLegendItemType;
-  index: number;
-}

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

@@ -1,54 +0,0 @@
-import { D3BrushEvent } from 'd3-brush'
-import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
-
-// Types
-import { FreeBrushMode, FreeBrushSelection } from './types'
-
-// We extend partial XY config interface because x and y properties are optional for FreeBrush
-export interface FreeBrushConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {
-  /** Brush selection mode. X - horizontal, Y - vertical, XY - both. Default: `FreeBrushMode.X` */
-  mode?: FreeBrushMode;
-  /** Callback function to be called on any Brush event.
-   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`
-  */
-  onBrush?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);
-  /** Callback function to be called on the Brush start event.
-   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean): void => {}`
-  */
-  onBrushStart?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);
-  /** Callback function to be called on the Brush move event.
-   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean): void => {}`
-  */
-  onBrushMove?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);
-  /** Callback function to be called on the Brush end event.
-   * Default: `(selection: FreeBrushSelection, event: D3BrushEvent<unknown>, userDriven: boolean)L void => {}`
-  */
-  onBrushEnd?: ((selection: FreeBrushSelection | undefined, event: D3BrushEvent<unknown>, userDriven: boolean) => void);
-  /** Width of the Brush handle. Default: `1` */
-  handleWidth?: number;
-  /** Brush selection in data space, can be used to force set the selection from outside.
-   * In case of two dimensional mode, the selection has the following format: `[[xMin, xMax], [yMin, yMax]]`.
-   * This config property gets updated on internal brush events. Default: `undefined`
-  */
-  selection?: FreeBrushSelection | null | undefined;
-  /** Constraint Brush selection to a minimal length in data units. Default: `undefined` */
-  selectionMinLength?: number | [number, number];
-  /** Automatically hide the brush after selection. Default: `true` */
-  autoHide?: boolean;
-}
-
-export class FreeBrushConfig<Datum> extends XYComponentConfig<Datum> implements FreeBrushConfigInterface<Datum> {
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-  onBrush = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-  onBrushStart = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-  onBrushMove = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-  onBrushEnd = (s: FreeBrushSelection | undefined, e: D3BrushEvent<unknown>, userDriven: boolean): void => {}
-  handleWidth = 1
-  selection: FreeBrushSelection | null | undefined = undefined
-  selectionMinLength = undefined
-  mode: FreeBrushMode = FreeBrushMode.X
-  autoHide = true
-}