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

package/src/components/donut/index.ts

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

@@ -0,0 +1,86 @@
+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/{components/donut/style.js → src/components/donut/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: donut-component;
-`;
-const variables = injectGlobal `
+`
+
+export const variables = injectGlobal`
   :root {
     --vis-donut-central-label-font-size: 16px;
     --vis-donut-central-label-text-color: #5b5f6d;
@@ -33,20 +34,23 @@ const variables = injectGlobal `
     --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);
     --vis-donut-background-color: var(--vis-dark-donut-background-color);
   }
-`;
-const background = css `
+`
+export const background = css`
   label: background;
   fill: var(--vis-donut-background-color);
-`;
-const segment = css `
+`
+
+export const segment = css`
   label: segment;
   stroke-width: var(--vis-donut-segment-stroke-width);
   stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));
-`;
-const segmentExit = css `
+`
+
+export const segmentExit = css`
   label: segment-exit;
-`;
-const centralLabel = css `
+`
+
+export const centralLabel = css`
   label: central-label;
   text-anchor: middle;
   dominant-baseline: middle;
@@ -54,8 +58,9 @@ const centralLabel = css `
   font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));
   font-weight: var(--vis-donut-central-label-font-weight);
   fill: var(--vis-donut-central-label-text-color);
-`;
-const centralSubLabel = css `
+`
+
+export const centralSubLabel = css`
   label: central-label;
   text-anchor: middle;
   dominant-baseline: middle;
@@ -63,7 +68,4 @@ const centralSubLabel = css `
   font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));
   font-weight: var(--vis-donut-central-sub-label-font-weight);
   fill: var(--vis-donut-central-sub-label-text-color);
-`;
-
-export { background, centralLabel, centralSubLabel, root, segment, segmentExit, variables };
-//# sourceMappingURL=style.js.map
+`

package/src/components/donut/types.ts

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

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

@@ -0,0 +1,103 @@
+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/{components/flow-legend/style.js → src/components/flow-legend/style.ts}

@@ -1,13 +1,14 @@
-import { css, injectGlobal } from '@emotion/css';
-import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from '../../styles/index.js';
+import { css, injectGlobal } from '@emotion/css'
+import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'
 
-const root = css `
+export const root = css`
   label: flow-legend-component;
 
   position: relative;
   user-select: none;
-`;
-const globalStyles = injectGlobal `
+`
+
+export const globalStyles = injectGlobal`
   :root {
     --vis-flow-legend-label-background: #ffffff;
     --vis-flow-legend-label-color: #71788a;
@@ -29,8 +30,9 @@ const globalStyles = injectGlobal `
     --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);
     --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);
   }
-`;
-const line = (lineColor) => css `
+`
+
+export const line = (lineColor: string): string => css`
   label: line;
 
   height: 2px;
@@ -38,8 +40,9 @@ const line = (lineColor) => css `
   background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};
   position: absolute;
   top: 50%;
-`;
-const labels = css `
+`
+
+export const labels = css`
   label: labels;
 
   position: relative;
@@ -47,23 +50,26 @@ const labels = css `
   display: flex;
   align-items: center;
   justify-content: space-between;
-`;
-const item = css `
+`
+
+export const item = css`
   label: item;
 
   position: relative;
   max-width: 50px;
 
   padding: 10px;
-`;
-const clickable = css `
+`
+
+export const clickable = css`
   cursor: pointer;
 
   &:hover {
     text-decoration: underline;
   }
-`;
-const label = (labelFontSize, labelColor) => css `
+`
+
+export const label = (labelFontSize: number, labelColor: string): string => css`
   label: label;
 
   transform: translate(-50%, 0%);
@@ -74,8 +80,9 @@ const label = (labelFontSize, labelColor) => css `
   color: ${labelColor || 'var(--vis-flow-legend-label-color)'};
   display: inline-table;
   text-align: center;
-`;
-const arrow = (arrowColor) => css `
+`
+
+export const arrow = (arrowColor: string): string => css`
   label: arrow;
 
   font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});
@@ -87,7 +94,4 @@ const arrow = (arrowColor) => css `
   transform: translate(-25%, 0%);
   display: inline-table;
   text-align: center;
-`;
-
-export { arrow, clickable, globalStyles, item, label, labels, line, root };
-//# sourceMappingURL=style.js.map
+`

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

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

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

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