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

package/src/components/leaflet-map/types.ts

@@ -0,0 +1,75 @@
+import { LatLng } from 'leaflet'
+import Supercluster, { ClusterProperties } from 'supercluster'
+import { GenericDataRecord } from 'types/data'
+
+export enum LeafletMapRenderer {
+  Raster = 'raster',
+  MapLibre = 'maplibre',
+}
+
+export enum LeafletMapPointShape {
+  Square = 'square',
+  Circle = 'circle',
+  Triangle = 'triangle',
+  Ring = 'ring',
+}
+
+export type LeafletMapPieDatum = {
+  value: number;
+  name: string;
+  color: string;
+  className?: string;
+}
+
+export interface LeafletMapPointStyle {
+  color: string;
+  className?: string;
+}
+
+export type LeafletMapPointStyles<D> = { [key in keyof D]?: LeafletMapPointStyle }
+
+export type PointExpandedClusterProperties<D extends GenericDataRecord> = D & {
+  // Expanded cluster related data:
+  // eslint-disable-next-line no-use-before-define
+  expandedClusterPoint?: LeafletMapPoint<D>;
+  r?: number;
+  dx?: number;
+  dy?: number;
+}
+
+export type LeafletMapClusterDatum<D extends GenericDataRecord> = Partial<D> & ClusterProperties & {
+  clusterIndex?: Supercluster<D>;
+  clusterPoints?: D[];
+}
+
+export type LeafletMapPointDatum<D extends GenericDataRecord> = D & PointExpandedClusterProperties<D> & {
+  id: string | number;
+  shape: LeafletMapPointShape;
+};
+
+export type LeafletMapPoint<D extends GenericDataRecord> = {
+  geometry: GeoJSON.Point;
+  bbox: { x1: number; x2: number; y1: number; y2: number };
+  radius: number;
+  path: string;
+  color: string;
+  id: number | string;
+  properties: LeafletMapPointDatum<D> | LeafletMapClusterDatum<D>;
+  donutData: LeafletMapPieDatum[];
+  isCluster: boolean;
+  clusterIndex: Supercluster<D, Supercluster.AnyProps>;
+  clusterPoints?: D[];
+  _zIndex: number;
+}
+
+export type Bounds = {
+  northEast: { lat: number; lng: number };
+  southWest: { lat: number; lng: number };
+}
+
+export type MapZoomState = {
+  mapCenter: LatLng;
+  zoomLevel: number;
+  bounds: Bounds;
+  userDriven: boolean;
+}

package/src/components/line/config.ts

@@ -0,0 +1,34 @@
+import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
+
+// Types
+import { CurveType } from 'types/curve'
+import { GenericAccessor, StringAccessor } from 'types/accessor'
+
+export interface LineConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
+  /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */
+  curveType?: CurveType;
+  /** Line width in pixels. Default: `2` */
+  lineWidth?: number;
+  /** Line dash array, see SVG's stroke-dasharray. Default: `undefined` */
+  lineDashArray?: GenericAccessor<number[], Datum>;
+  /** When a data point has an `undefined`, `NaN`, or other no-data value, they'll be replaced with a value specified here.
+   * Setting this property to `undefined` will lead to having the line break when there's no data, and continue when
+   * the data appears again. If you set it to `null`, the values will be treated as numerical `0` values and the line
+   * won't break; however if the whole dataset consists of only `null`s, the line won't be displayed.
+   * Default: `undefined`
+  */
+  fallbackValue?: number | undefined | null;
+  /** Highlight line on hover. Default: `false` */
+  highlightOnHover?: boolean;
+  /** Optional link cursor. Default: `null` */
+  cursor?: StringAccessor<Datum[]>;
+}
+
+export class LineConfig<Datum> extends XYComponentConfig<Datum> implements LineConfigInterface<Datum> {
+  curveType = CurveType.MonotoneX
+  lineWidth = 2
+  lineDashArray = undefined
+  fallbackValue = undefined
+  highlightOnHover = false
+  cursor = null
+}

package/src/components/line/index.ts

@@ -0,0 +1,188 @@
+import { select } from 'd3-selection'
+import { Transition } from 'd3-transition'
+import { CurveFactoryLineOnly, Line as LineGenInterface, line } from 'd3-shape'
+import { interpolatePath } from 'd3-interpolate-path'
+
+// Core
+import { XYComponentCore } from 'core/xy-component'
+
+// Utils
+import { getNumber, getString, getValue, isArray, isNumber } from 'utils/data'
+import { smartTransition } from 'utils/d3'
+import { getColor } from 'utils/color'
+
+// Types
+import { NumericAccessor } from 'types/accessor'
+import { Spacing } from 'types/spacing'
+import { Curve, CurveType } from 'types/curve'
+import { Direction } from 'types/direction'
+
+// Local Types
+import { LineData, LineDatum } from './types'
+
+// Config
+import { LineConfig, LineConfigInterface } from './config'
+
+// Styles
+import * as s from './style'
+
+export class Line<Datum> extends XYComponentCore<Datum, LineConfig<Datum>, LineConfigInterface<Datum>> {
+  static selectors = s
+  config: LineConfig<Datum> = new LineConfig()
+  lineGen: LineGenInterface<{ x: number; y: number; defined: boolean }>
+  curve: CurveFactoryLineOnly = Curve[CurveType.MonotoneX]
+  events = {
+    [Line.selectors.line]: {
+      mouseover: this._highlight.bind(this),
+      mouseleave: this._resetHighlight.bind(this),
+    },
+  }
+
+  constructor (config?: LineConfigInterface<Datum>) {
+    super()
+    if (config) this.config.init(config)
+  }
+
+  get bleed (): Spacing {
+    const { config: { lineWidth } } = this
+    const yDomain = this.yScale.domain() as [number, number]
+    const yDirection = this.yScale.range()[0] > this.yScale.range()[1]
+      ? Direction.North
+      : Direction.South
+    const isYDirectionSouth = yDirection === Direction.South
+
+    const isLineThick = lineWidth > 3
+    const isLineVeryThick = lineWidth >= 10
+    return {
+      top: !isLineVeryThick && (
+        (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))
+      ) ? 0 : lineWidth / 2,
+      bottom: !isLineVeryThick && (
+        (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))
+      ) ? 0 : lineWidth / 2,
+      left: isLineThick ? lineWidth / 2 : 0,
+      right: isLineThick ? lineWidth / 2 : 0,
+    }
+  }
+
+  _render (customDuration?: number): void {
+    super._render(customDuration)
+    const { config, datamodel: { data } } = this
+    const duration = isNumber(customDuration) ? customDuration : config.duration
+
+    this.curve = Curve[config.curveType]
+    this.lineGen = line<{ x: number; y: number; defined: boolean }>()
+      .x(d => d.x)
+      .y(d => d.y)
+      .defined(d => d.defined)
+      .curve(this.curve)
+
+    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]
+    const lineDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))
+    const lineData: LineData[] = yAccessors.map(a => {
+      const ld: LineDatum[] = data.map((d, i) => {
+        const rawValue = getNumber(d, a, i)
+        // If `rawValue` is not numerical or if it's not finite (`NaN`, `undefined`, ...), we replace it with `config.fallbackValue`
+        const value = (isNumber(rawValue) || (rawValue === null)) && isFinite(rawValue) ? rawValue : config.fallbackValue
+        return {
+          x: lineDataX[i],
+          y: this.yScale(value ?? 0),
+          defined: isFinite(value),
+          value,
+        }
+      })
+
+      const defined = ld.reduce((def, d) => (d.defined || def), false)
+      // If the line consists only of `null` values, we'll still render it but it'll be invisible.
+      // Such trick allows us to have better animated transitions.
+      const visible = defined && ld.some(d => d.value !== null)
+      return {
+        values: ld,
+        defined,
+        visible,
+      }
+    })
+
+    const lines = this.g
+      .selectAll<SVGGElement, LineData>(`.${s.line}`)
+      .data(lineData)
+
+    const linesEnter = lines.enter().append('g')
+      .attr('class', s.line)
+
+    linesEnter
+      .append('path')
+      .attr('class', s.linePath)
+      .attr('d', this._emptyPath())
+      .attr('stroke', (d, i) => getColor(data, config.color, i))
+      .attr('stroke-opacity', 0)
+      .attr('stroke-width', config.lineWidth)
+
+    linesEnter
+      .append('path')
+      .attr('class', s.lineSelectionHelper)
+      .attr('d', this._emptyPath())
+
+    const linesMerged = linesEnter.merge(lines)
+    linesMerged.style('cursor', (d, i) => getString(data, config.cursor, i))
+    linesMerged.each((d, i, elements) => {
+      const group = select(elements[i])
+      const linePath = group.select<SVGPathElement>(`.${s.linePath}`)
+      const lineSelectionHelper = group.select(`.${s.lineSelectionHelper}`)
+
+      const isLineVisible = d.visible
+      const dashArray = getValue<LineData, number[]>(d, config.lineDashArray, i)
+      const transition = smartTransition(linePath, duration)
+        .attr('stroke', getColor(data, config.color, i))
+        .attr('stroke-width', config.lineWidth)
+        .attr('stroke-opacity', isLineVisible ? 1 : 0)
+        .style('stroke-dasharray', dashArray?.join(' ') ?? null) // We use `.style` because there's also a default CSS-variable for stroke-dasharray
+
+      const hasUndefinedSegments = d.values.some(d => !d.defined)
+      const svgPathD = this.lineGen(d.values)
+
+      if (duration && !hasUndefinedSegments) {
+        const previous = linePath.attr('d') || this._emptyPath()
+        const next = svgPathD || this._emptyPath()
+        const t = transition as Transition<SVGPathElement, LineData, SVGGElement, LineData>
+        t.attrTween('d', () => interpolatePath(previous, next))
+      } else if (d.visible) {
+        transition.attr('d', svgPathD)
+      }
+
+      lineSelectionHelper
+        .attr('d', svgPathD)
+        .attr('visibility', isLineVisible ? null : 'hidden')
+    })
+
+    smartTransition(lines.exit(), duration)
+      .style('opacity', 0)
+      .remove()
+  }
+
+  private _emptyPath (): string {
+    const xRange = this.xScale.range()
+    const yRange = this.yScale.range()
+    return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`
+  }
+
+  private _highlight (datum, i, els): void {
+    const { config } = this
+
+    if (config.highlightOnHover) {
+      this.g
+        .selectAll(`.${s.line}`)
+        .classed(s.dim, d => d !== datum)
+    }
+  }
+
+  private _resetHighlight (d, i, els): void {
+    const { config } = this
+
+    if (config.highlightOnHover) {
+      this.g
+        .selectAll(`.${s.line}`)
+        .classed(s.dim, false)
+    }
+  }
+}

package/{components/line/style.js → src/components/line/style.ts}

@@ -1,35 +1,37 @@
-import { injectGlobal, css } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const globalStyles = injectGlobal `
+export const globalStyles = injectGlobal`
   :root {
     --vis-line-cursor: default;
     --vis-line-stroke-dasharray: none;
     --vis-line-stroke-dashoffset: 0;
   }
-`;
-const root = css `
+`
+
+export const root = css`
   label: line-component;
-`;
-const line = css `
+`
+
+export const line = css`
   label: line;
   transition: opacity 200ms;
   cursor: var(--vis-line-cursor);
-`;
-const linePath = css `
+`
+
+export const linePath = css`
   label: linePath;
   fill: none;
   stroke-dasharray: var(--vis-line-stroke-dasharray);
   stroke-dashoffset: var(--vis-line-stroke-dashoffset);
-`;
-const lineSelectionHelper = css `
+`
+
+export const lineSelectionHelper = css`
   label: lineSelectionHelper;
   fill: none;
   stroke: rgba(0, 0, 0, 0);
   stroke-width: 8px;
-`;
-const dim = css `
-  opacity: 0.2;
-`;
+`
 
-export { dim, globalStyles, line, linePath, lineSelectionHelper, root };
-//# sourceMappingURL=style.js.map
+export const dim = css`
+  opacity: 0.2;
+`

package/src/components/line/types.ts

@@ -0,0 +1,3 @@
+/** Data type for Line Generator: [x, y, defined] */
+export type LineDatum = { x: number; y: number; value: number | null | undefined; defined: boolean }
+export type LineData = { values: LineDatum[]; defined: boolean; visible: boolean }

package/src/components/nested-donut/config.ts

@@ -0,0 +1,75 @@
+// Core
+import { ComponentConfigInterface, ComponentConfig } from 'core/component/config'
+
+// Types
+import { ColorAccessor, GenericAccessor, StringAccessor } from 'types/accessor'
+import { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment } from './types'
+
+
+export interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterface {
+  /** Diagram angle range. Default: `[0, 2 * Math.PI]` */
+  angleRange?: [number, number];
+  /** Direction of hierarchy flow from root to leaf.
+   * `NestedDonutDirection.INWARDS` starts from the outer most radius and works towards center
+   * `NestedDonutDirection.OUTWARDS` starts from the inner most radius the consecutive layers outward.
+   *  Default: `NestedDonutDirection.INWARDS`
+  */
+  direction?: NestedDonutDirection | string;
+
+  /** Central label 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;
+  /**
+   * Show donut background. The color is configurable via
+   * the `--vis-nested-donut-background-color` and `--vis-dark-nested-donut-background-color` CSS variables.
+   * Default: `true`
+  */
+  showBackground?: boolean;
+
+  // Layers
+  /** Array of accessor functions to defined the nested groups  */
+  layers: StringAccessor<Datum>[];
+  /* Layer settings */
+  layerConfig?: GenericAccessor<NestedDonutLayerSettings, string>;
+  /* Space between layers */
+  layerPadding?: number;
+
+  // Segments
+  /** Color accessor function. Default: `undefined` */
+  color?: ColorAccessor<NestedDonutSegment<Datum>>;
+  /** Corner Radius. Default: `0` */
+  cornerRadius?: number;
+  /** Label accessor function. */
+  label?: StringAccessor<NestedDonutSegment<Datum>>;
+  /**
+   * 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;
+}
+
+export class NestedDonutConfig<Datum> extends ComponentConfig implements NestedDonutConfigInterface<Datum> {
+  centralLabel?: string
+  centralSubLabel?: string
+  centralSubLabelWrap?: boolean
+  showEmptySegments?: boolean
+  emptySegmentAngle?: number
+
+  color?: ColorAccessor<NestedDonutSegment<Datum>>
+  label?: StringAccessor<NestedDonutSegment<Datum>>
+  direction = NestedDonutDirection.INWARDS
+  layers: StringAccessor<Datum>[]
+  layerSettings = undefined
+  layerPadding = 0
+  angleRange = [0, 2 * Math.PI] as [number, number]
+  padAngle = 0
+  cornerRadius = 0
+  showBackground = true
+}
+
+

package/src/components/nested-donut/index.ts

@@ -0,0 +1,176 @@
+import { Selection } from 'd3-selection'
+import { arc } from 'd3-shape'
+import { hierarchy, partition } from 'd3-hierarchy'
+import { scaleLinear, ScaleLinear } from 'd3-scale'
+import { group, max, min, sum } from 'd3-array'
+
+// Core
+import { ComponentCore } from 'core/component'
+import { SeriesDataModel } from 'data-models/series'
+
+// Types
+import { VerticalAlign } from 'types/text'
+
+// Utils
+import { getColor, getHexValue } from 'utils/color'
+import { getString, getValue, isNumber } from 'utils/data'
+import { smartTransition } from 'utils/d3'
+import { wrapSVGText } from 'utils/text'
+
+// Local Types
+import { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment, defaultLayerSettings } from './types'
+
+// Config
+import { NestedDonutConfig, NestedDonutConfigInterface } from './config'
+
+// Modules
+import { createArc, updateArc, removeArc } from './modules/arc'
+import { createLabel, updateLabel, removeLabel } from './modules/label'
+
+// Styles
+import * as s from './style'
+
+export class NestedDonut<Datum> extends ComponentCore<
+Datum[],
+NestedDonutConfig<Datum>,
+NestedDonutConfigInterface<Datum>
+> {
+  static selectors = s
+  static cssVariables = s.variables
+  config: NestedDonutConfig<Datum> = new NestedDonutConfig()
+  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<Partial<NestedDonutSegment<Datum>>>()
+  radiusScale: ScaleLinear<number, number> = scaleLinear()
+  colorScale: ScaleLinear<string, string> = scaleLinear()
+
+  events = { }
+
+  constructor (config?: NestedDonutConfigInterface<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)
+  }
+
+  private getHierarchyData (): NestedDonutSegment<Datum>[] {
+    const { config, datamodel } = this
+
+    const layerAccessors = config.layers?.map(layerAccessor => (d: Datum, i: number) => getString(d, layerAccessor, i))
+    const nestedData = group(datamodel.data, ...layerAccessors as [(d: Datum) => string])
+    const rootNode = hierarchy(nestedData).count()
+    const partitionData = partition().size([config.angleRange[1], 1])(rootNode) as NestedDonutSegment<Datum>
+
+    partitionData.eachBefore((node, index) => {
+      const scale = this.colorScale.domain([-1, node.children?.length])
+      node._id = this.uid + index
+      node._layer = node.depth - 1
+
+      node.data = { key: node.data[0], root: node.parent?.data.root ?? node.data[0] }
+      node.children?.forEach((child, i) => {
+        child._index = i
+        child._state = {
+          fill:
+            getColor(child, config.color, i, child.depth !== 1) ??
+            scale.range(['#fff', getHexValue(node._state.fill, this.element)])(i),
+        }
+      })
+    })
+    const segments = partitionData.descendants().filter(d => d.parent && d.children && d.data.key)
+    return segments
+  }
+
+  _render (customDuration?: number): void {
+    const { config } = this
+    const duration = isNumber(customDuration) ? customDuration : config.duration
+
+    const layers: NestedDonutLayerSettings[] = config.layers?.map((_, i) => getValue(i, config.layerSettings) ?? defaultLayerSettings)
+    const data = this.getHierarchyData()
+
+    const outerRadius = Math.min(this._width, this._height) / 2
+    const innerRadius = Math.max(0, outerRadius - sum(layers, d => d.width + config.layerPadding))
+
+    const yMin = min(data, d => d.y0)
+    const yMax = max(data, d => d.y1)
+
+    this.radiusScale
+      .domain(config.direction === NestedDonutDirection.OUTWARDS ? [yMin, yMax] : [yMax, yMin])
+      .range([innerRadius, outerRadius])
+
+    this.arcGen
+      .startAngle(d => d.x0)
+      .endAngle(d => d.x1)
+      .innerRadius(d => this.radiusScale(d.y0))
+      .outerRadius(d => this.radiusScale(d.y1))
+      .padAngle(config.padAngle)
+      .cornerRadius(config.cornerRadius)
+
+    this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)
+
+    // Arcs
+    const arcs = this.arcGroup
+      .selectAll<SVGPathElement, NestedDonutSegment<Datum>>(`.${s.segment}`)
+      .data(data, d => d._id)
+
+    const arcsEnter = arcs.enter().append('path')
+      .attr('class', s.segment)
+      .call(createArc, config)
+
+    arcs.merge(arcsEnter)
+      .call(updateArc, config, this.arcGen, duration)
+
+    arcs.exit<NestedDonutSegment<Datum>>()
+      .attr('class', s.segmentExit)
+      .call(removeArc, duration)
+
+    // Segment labels
+    const arcLabels = this.arcGroup
+      .selectAll<SVGTextElement, NestedDonutSegment<Datum>>(`.${s.segmentLabel}`)
+      .data(data, d => d._id)
+
+    const arcLabelsEnter = arcLabels.enter().append('text')
+      .attr('class', s.segmentLabel)
+      .call(createLabel, config)
+
+    arcLabels.merge(arcLabelsEnter)
+      .call(updateLabel, config, this.arcGen, duration)
+
+    arcLabels.exit<NestedDonutSegment<Datum>>()
+      .call(removeLabel, duration)
+
+    // Chart labels
+    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, VerticalAlign.Top)
+
+    // 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', arc()({
+        startAngle: config.angleRange?.[0] ?? config.angleRange?.[0] ?? 0,
+        endAngle: config.angleRange?.[1] ?? config.angleRange?.[1] ?? 2 * Math.PI,
+        innerRadius,
+        outerRadius,
+      }))
+  }
+}

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

@@ -0,0 +1,78 @@
+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 { NestedDonutSegment } from '../types'
+
+// Config
+import { NestedDonutConfig } from '../config'
+
+type AnimState = { x0: number; x1: number; y0: number; y1: number }
+export interface ArcNode extends SVGElement {
+  _animState?: AnimState;
+}
+
+export function createArc<Datum> (
+  selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
+  config: NestedDonutConfig<Datum>
+): void {
+  selection
+    .style('fill', d => getColor(d, config.color) ?? d._state.fill)
+    .style('opacity', 0)
+    .each((d, i, els) => {
+      const arcNode: ArcNode = els[i]
+      const angleCenter = (d.x0 + d.x1) / 2
+      const angleHalfWidth = (d.x1 - d.x0) / 2
+      arcNode._animState = {
+        x0: angleCenter - angleHalfWidth,
+        x1: angleCenter + angleHalfWidth,
+        y0: d.y0,
+        y1: d.y1,
+      }
+    })
+}
+
+export function updateArc<Datum> (
+  selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
+  config: NestedDonutConfig<Datum>,
+  arcGen: Arc<any, AnimState>,
+  duration: number
+): void {
+  selection
+    .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
+    .style('fill', d => getColor(d, config.color) ?? d._state.fill)
+
+  if (duration) {
+    const transition = smartTransition(selection, duration)
+      .style('opacity', 1) as Transition<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, ArcNode>
+
+    transition.attrTween('d', (d, i, els) => {
+      const arcNode: ArcNode = els[i]
+      const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }
+      const datum = interpolate(arcNode._animState, nextAnimState)
+
+      return (t: number): string => {
+        arcNode._animState = datum(t)
+        return arcGen(arcNode._animState)
+      }
+    })
+  } else {
+    selection.attr('d', arcGen)
+      .style('opacity', 1)
+  }
+}
+
+export function removeArc<Datum> (
+  selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
+  duration: number
+): void {
+  smartTransition(selection, duration)
+    .style('opacity', 0)
+    .remove()
+}