WIP | Refactoring: From Config classes to objects

packages/angular/src/components/area/area.component.ts

@@ -80,8 +80,8 @@ export class VisAreaComponent<Datum> implements AreaConfigInterface<Datum>, Afte
   /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
   @Input() id?: ((d: Datum, i: number, ...rest) => string)
 
-  /** Component color accessor function. Default: `d => d.color` */
-  @Input() color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>
+  /** Area color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */
+  @Input() color?: ColorAccessor<Datum[]>
 
   /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.
    * Only continuous scales are supported.
@@ -106,7 +106,7 @@ export class VisAreaComponent<Datum> implements AreaConfigInterface<Datum>, Afte
   @Input() baseline?: NumericAccessor<Datum>
 
   /** Opacity value or accessor function. Default: `1` */
-  @Input() opacity?: NumericAccessor<Datum>
+  @Input() opacity?: NumericAccessor<Datum[]>
 
   /** Optional area cursor. String or accessor function. Default: `null` */
   @Input() cursor?: StringAccessor<Datum[]>

packages/angular/src/components/axis/axis.component.ts

@@ -105,7 +105,7 @@ export class VisAxisComponent<Datum> implements AxisConfigInterface<Datum>, Afte
   @Input() minMaxTicksOnly?: boolean
 
   /** Tick label formatter function. Default: `undefined` */
-  @Input() tickFormat?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string)
+  @Input() tickFormat?: ((tick: number, i: number, ticks: number[] | Date[]) => string)
 
   /** Explicitly set tick values. Default: `undefined` */
   @Input() tickValues?: number[]

packages/angular/src/components/chord-diagram/chord-diagram.component.ts

@@ -9,6 +9,7 @@ import {
   VisEventType,
   VisEventCallback,
   ColorAccessor,
+  ChordLinkDatum,
   NumericAccessor,
   ChordNodeDatum,
   StringAccessor,
@@ -81,10 +82,10 @@ export class VisChordDiagramComponent<N extends ChordInputNode, L extends ChordI
   @Input() highlightedLinkIds?: (number | string)[]
 
   /** Link color accessor function. Default: `var(--vis-chord-diagram-link-fill-color)` */
-  @Input() linkColor?: ColorAccessor<L>
+  @Input() linkColor?: ColorAccessor<ChordLinkDatum<N, L>>
 
   /** Link value accessor function. Default: `l => l.value` */
-  @Input() linkValue?: NumericAccessor<L>
+  @Input() linkValue?: NumericAccessor<ChordLinkDatum<N, L>>
 
   /** Array of node hierarchy levels. Data records are supposed to have corresponding properties, e.g. ['level1', 'level2']. Default: `[]` */
   @Input() nodeLevels?: string[]
@@ -105,10 +106,10 @@ export class VisChordDiagramComponent<N extends ChordInputNode, L extends ChordI
   @Input() nodeLabelAlignment?: GenericAccessor<ChordLabelAlignment | string, ChordNodeDatum<N>>
 
   /** Pad angle in radians. Constant value or accessor function. Default: `0.02` */
-  @Input() padAngle?: NumericAccessor<N>
+  @Input() padAngle?: NumericAccessor<ChordNodeDatum<N>>
 
   /** Corner radius constant value or accessor function. Default: `2` */
-  @Input() cornerRadius?: NumericAccessor<N>
+  @Input() cornerRadius?: NumericAccessor<ChordNodeDatum<N>>
 
   /** Angular range of the diagram. Default: `[0, 2 * Math.PI]` */
   @Input() angleRange?: [number, number]

packages/angular/src/components/crosshair/crosshair.component.ts

@@ -99,7 +99,7 @@ export class VisCrosshairComponent<Datum> implements CrosshairConfigInterface<Da
    * and the `yScale` instance to help you calculate the correct vertical position of the circles.
    * It has to return an array of the CrosshairCircle objects: `{ y: number; color: string; opacity?: number }[]`.
    * Default: `undefined` */
-  @Input() getCircles?: (x: number, data: Datum[], yScale: ContinuousScale) => CrosshairCircle[]
+  @Input() getCircles?: (x: number | Date | Date, data: Datum[], yScale: ContinuousScale) => CrosshairCircle[]
   @Input() data: Datum[]
 
   component: Crosshair<Datum> | undefined

packages/angular/src/components/graph/graph.component.ts

@@ -95,7 +95,7 @@ export class VisGraphComponent<N extends GraphInputNode, L extends GraphInputLin
   @Input() zoomThrottledUpdateNodeThreshold?: number
 
   /** Zoom event callback. Default: `undefined` */
-  @Input() onZoom?: (zoomScale: number, zoomScaleExtent: number) => void
+  @Input() onZoom?: (zoomScale: number, zoomScaleExtent: [number, number]) => void
 
   /** Type of the graph layout. Default: `GraphLayoutType.Force` */
   @Input() layoutType?: GraphLayoutType | string

packages/angular/src/components/grouped-bar/grouped-bar.component.ts

@@ -80,8 +80,8 @@ export class VisGroupedBarComponent<Datum> implements GroupedBarConfigInterface<
   /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
   @Input() id?: ((d: Datum, i: number, ...rest) => string)
 
-  /** Component color accessor function. Default: `d => d.color` */
-  @Input() color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>
+  /** Bar color accessor function. Default: `d => d.color` */
+  @Input() color?: ColorAccessor<Datum>
 
   /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.
    * Only continuous scales are supported.

packages/angular/src/components/line/line.component.ts

@@ -81,8 +81,8 @@ export class VisLineComponent<Datum> implements LineConfigInterface<Datum>, Afte
   /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
   @Input() id?: ((d: Datum, i: number, ...rest) => string)
 
-  /** Component color accessor function. Default: `d => d.color` */
-  @Input() color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>
+  /** Line color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */
+  @Input() color?: ColorAccessor<Datum[]>
 
   /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.
    * Only continuous scales are supported.
@@ -107,7 +107,7 @@ export class VisLineComponent<Datum> implements LineConfigInterface<Datum>, Afte
   @Input() lineWidth?: number
 
   /** Line dash array, see SVG's stroke-dasharray. Default: `undefined` */
-  @Input() lineDashArray?: GenericAccessor<number[], Datum>
+  @Input() 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

packages/angular/src/components/scatter/scatter.component.ts

@@ -82,8 +82,8 @@ export class VisScatterComponent<Datum> implements ScatterConfigInterface<Datum>
   /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
   @Input() id?: ((d: Datum, i: number, ...rest) => string)
 
-  /** Component color accessor function. Default: `d => d.color` */
-  @Input() color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>
+  /** Point color accessor function. Default: `d => d.color` */
+  @Input() color?: ColorAccessor<Datum>
 
   /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.
    * Only continuous scales are supported.

packages/angular/src/components/stacked-bar/stacked-bar.component.ts

@@ -80,8 +80,8 @@ export class VisStackedBarComponent<Datum> implements StackedBarConfigInterface<
   /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
   @Input() id?: ((d: Datum, i: number, ...rest) => string)
 
-  /** Component color accessor function. Default: `d => d.color` */
-  @Input() color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>
+  /** Bar color accessor function. Default: `d => d.color` */
+  @Input() color?: ColorAccessor<Datum>
 
   /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.
    * Only continuous scales are supported.

packages/angular/src/components/timeline/timeline.component.ts

@@ -76,8 +76,8 @@ export class VisTimelineComponent<Datum> implements TimelineConfigInterface<Datu
   /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
   @Input() id?: ((d: Datum, i: number, ...rest) => string)
 
-  /** Component color accessor function. Default: `d => d.color` */
-  @Input() color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>
+  /** Timeline item color accessor function. Default: `d => d.color` */
+  @Input() color?: ColorAccessor<Datum>
 
   /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.
    * Only continuous scales are supported.

packages/angular/src/components/topojson-map/topojson-map.component.ts

@@ -102,7 +102,7 @@ export class VisTopoJSONMapComponent<AreaDatum, PointDatum, LinkDatum> implement
   @Input() linkColor?: ColorAccessor<LinkDatum>
 
   /** Link cursor value or accessor function. Default: `null` */
-  @Input() linkCursor?: StringAccessor<AreaDatum>
+  @Input() linkCursor?: StringAccessor<LinkDatum>
 
   /** Link id accessor function. Default: `d => d.id` */
   @Input() linkId?: StringAccessor<LinkDatum>
@@ -132,7 +132,7 @@ export class VisTopoJSONMapComponent<AreaDatum, PointDatum, LinkDatum> implement
   @Input() pointStrokeWidth?: NumericAccessor<PointDatum>
 
   /** Point cursor constant value or accessor function. Default: `null` */
-  @Input() pointCursor?: StringAccessor<AreaDatum>
+  @Input() pointCursor?: StringAccessor<PointDatum>
 
   /** Point longitude accessor function. Default: `d => d.longitude ?? null` */
   @Input() longitude?: NumericAccessor<PointDatum>

packages/angular/src/components/xy-labels/xy-labels.component.ts

@@ -82,8 +82,8 @@ export class VisXYLabelsComponent<Datum> implements XYLabelsConfigInterface<Datu
   /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
   @Input() id?: ((d: Datum, i: number, ...rest) => string)
 
-  /** Component color accessor function. Default: `d => d.color` */
-  @Input() color?: ColorAccessor<Datum> | ColorAccessor<Datum[]>
+  /** Label color accessor function. Default: `d => d.color` */
+  @Input() color?: ColorAccessor<Datum>
 
   /** Scale for X dimension, e.g. Scale.scaleLinear(). If you set xScale you'll be responsible for setting it's `domain` and `range` as well.
    * Only continuous scales are supported.

packages/angular/src/html-components/leaflet-flow-map/leaflet-flow-map.component.ts

@@ -154,7 +154,7 @@ export class VisLeafletFlowMapComponent<
   @Input() pointShape?: StringAccessor<PointDatum>
 
   /** Point color accessor function or constant value. Default: `d => d.color` */
-  @Input() pointColor?: ColorAccessor<PointDatum>
+  @Input() pointColor?: ColorAccessor<LeafletMapPointDatum<PointDatum>>
 
   /** Point radius accessor function or constant value. Default: `undefined` */
   @Input() pointRadius?: NumericAccessor<LeafletMapPointDatum<PointDatum>>
@@ -179,7 +179,7 @@ export class VisLeafletFlowMapComponent<
   @Input() selectedPointId?: string
 
   /** Cluster color accessor function or constant value. Default: `undefined`  */
-  @Input() clusterColor?: ColorAccessor<PointDatum>
+  @Input() clusterColor?: ColorAccessor<LeafletMapClusterDatum<PointDatum>>
 
   /** Cluster radius accessor function or constant value. Default: `undefined`  */
   @Input() clusterRadius?: NumericAccessor<LeafletMapClusterDatum<PointDatum>>

packages/angular/src/html-components/leaflet-map/leaflet-map.component.ts

@@ -154,7 +154,7 @@ export class VisLeafletMapComponent<Datum extends GenericDataRecord> implements
   @Input() pointShape?: StringAccessor<Datum>
 
   /** Point color accessor function or constant value. Default: `d => d.color` */
-  @Input() pointColor?: ColorAccessor<Datum>
+  @Input() pointColor?: ColorAccessor<LeafletMapPointDatum<Datum>>
 
   /** Point radius accessor function or constant value. Default: `undefined` */
   @Input() pointRadius?: NumericAccessor<LeafletMapPointDatum<Datum>>
@@ -179,7 +179,7 @@ export class VisLeafletMapComponent<Datum extends GenericDataRecord> implements
   @Input() selectedPointId?: string
 
   /** Cluster color accessor function or constant value. Default: `undefined`  */
-  @Input() clusterColor?: ColorAccessor<Datum>
+  @Input() clusterColor?: ColorAccessor<LeafletMapClusterDatum<Datum>>
 
   /** Cluster radius accessor function or constant value. Default: `undefined`  */
   @Input() clusterRadius?: NumericAccessor<LeafletMapClusterDatum<Datum>>

packages/react/src/composites/time-series/index.tsx

@@ -24,7 +24,7 @@ export type VisTimeSeriesProps<Datum> = {
   x: (d: Datum, i: number) => number;
   y: (d: Datum, i: number) => number;
   id: (d: Datum, i: number) => string;
-  color: (d: Datum, i: number) => string;
+  color: (d: Datum[], i: number) => string | null;
   cursor: string | ((d: Datum, i: number) => string);
   formatXTicks?: (timestamp: number) => string;
   formatYTicks?: (timestamp: number) => string;
@@ -112,7 +112,7 @@ VisTimeSeries.defaultProps = {
   x: (d: VisTimeSeriesDatum) => d.timestamp,
   y: (d: VisTimeSeriesDatum) => d.value,
   id: (d: VisTimeSeriesDatum) => d.id,
-  color: (d: VisTimeSeriesDatum) => d.color,
+  color: (d: VisTimeSeriesDatum[]) => null,
 
   formatYTicks: (d: number) => d.toFixed(1),
 

packages/svelte/src/containers/xy-container/xy-container.svelte

@@ -30,7 +30,7 @@
   }))
   setContext('axis', (e: HTMLElement & { __type__?: 'x' | 'y'}) => ({
     update: (c: Axis<Datum>) => {
-      e.__type__ = c.config.type
+      e.__type__ = c.config.type as 'x' | 'y'
       config[`${e.__type__}Axis`] = c
     },
     destroy: () => { config[`${e.__type__}Axis`] = undefined },

packages/ts/src/components/area/config.ts

@@ -1,16 +1,18 @@
-import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
+import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'
 
 // Types
 import { CurveType } from 'types/curve'
-import { NumericAccessor, StringAccessor } from 'types/accessor'
+import { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'
 
 export interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
+  /** Area color accessor function. The whole data array will be passed as the first argument. Default: `undefined` */
+  color?: ColorAccessor<Datum[]>;
   /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */
   curveType?: CurveType;
   /** Baseline value or accessor function. Default: `undefined` */
   baseline?: NumericAccessor<Datum>;
   /** Opacity value or accessor function. Default: `1` */
-  opacity?: NumericAccessor<Datum>;
+  opacity?: NumericAccessor<Datum[]>;
   /** Optional area cursor. String or accessor function. Default: `null` */
   cursor?: StringAccessor<Datum[]>;
   /** If an area is smaller than 1px, extend it to have 1px height.
@@ -20,10 +22,12 @@ export interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<D
   minHeight1Px?: boolean;
 }
 
-export class AreaConfig<Datum> extends XYComponentConfig<Datum> implements AreaConfigInterface<Datum> {
-  curveType = CurveType.MonotoneX
-  baseline = (): number => 0
-  opacity = 1
-  cursor = null
-  minHeight1Px = false
+export const AreaDefaultConfig: AreaConfigInterface<unknown> = {
+  ...XYComponentDefaultConfig,
+  color: undefined,
+  curveType: CurveType.MonotoneX,
+  baseline: (): number => 0,
+  opacity: 1,
+  cursor: null,
+  minHeight1Px: false,
 }

packages/ts/src/components/area/index.ts

@@ -19,16 +19,17 @@ import { NumericAccessor } from 'types/accessor'
 import { AreaDatum } from './types'
 
 // Config
-import { AreaConfig, AreaConfigInterface } from './config'
+import { AreaDefaultConfig, AreaConfigInterface } from './config'
 
 // Styles
 import * as s from './style'
 
-export class Area<Datum> extends XYComponentCore<Datum, AreaConfig<Datum>, AreaConfigInterface<Datum>> {
+export class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {
   static selectors = s
-  stacked = true
-  config: AreaConfig<Datum> = new AreaConfig()
-  areaGen: AreaInterface<AreaDatum>
+  protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>
+  public config: AreaConfigInterface<Datum> = this._defaultConfig
+  public stacked = true
+  private _areaGen: AreaInterface<AreaDatum>
   private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0
 
   events = {
@@ -37,7 +38,7 @@ export class Area<Datum> extends XYComponentCore<Datum, AreaConfig<Datum>, AreaC
 
   constructor (config?: AreaConfigInterface<Datum>) {
     super()
-    if (config) this.config.init(config)
+    if (config) this.setConfig(config)
   }
 
   _render (customDuration?: number): void {
@@ -46,7 +47,7 @@ export class Area<Datum> extends XYComponentCore<Datum, AreaConfig<Datum>, AreaC
     const duration = isNumber(customDuration) ? customDuration : config.duration
 
     const curveGen = Curve[config.curveType]
-    this.areaGen = area<AreaDatum>()
+    this._areaGen = area<AreaDatum>()
       .x(d => d.x)
       .y0(d => d.y0)
       .y1(d => {
@@ -82,14 +83,14 @@ export class Area<Datum> extends XYComponentCore<Datum, AreaConfig<Datum>, AreaC
 
     const areasEnter = areas.enter().append('path')
       .attr('class', s.area)
-      .attr('d', d => this.areaGen(d) || this._emptyPath())
+      .attr('d', d => this._areaGen(d) || this._emptyPath())
       .style('opacity', 0)
       .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))
 
     const areasMerged = smartTransition(areasEnter.merge(areas), duration)
       .style('opacity', (d, i) => {
         const isDefined = d.some(p => (p.y0 - p.y1) !== 0)
-        return isDefined ? getNumber(d, config.opacity, areaMaxIdx - i) : 0
+        return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0
       })
       .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))
       .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))
@@ -98,11 +99,11 @@ export class Area<Datum> extends XYComponentCore<Datum, AreaConfig<Datum>, AreaC
       const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>
       transition.attrTween('d', (d, i, el) => {
         const previous = select(el[i]).attr('d')
-        const next = this.areaGen(d) || this._emptyPath()
+        const next = this._areaGen(d) || this._emptyPath()
         return interpolatePath(previous, next)
       })
     } else {
-      areasMerged.attr('d', d => this.areaGen(d) || this._emptyPath())
+      areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())
     }
 
     smartTransition(areas.exit(), duration)
@@ -125,7 +126,7 @@ export class Area<Datum> extends XYComponentCore<Datum, AreaConfig<Datum>, AreaC
     const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)
     const y1 = y0
 
-    return this.areaGen([
+    return this._areaGen([
       { y0, y1, x: xRange[0] },
       { y0, y1, x: xRange[1] },
     ])