Misc: Enabling noImplicitAny checks in tsconfig

.eslintrc

@@ -69,7 +69,7 @@
       "@typescript-eslint/indent": ["error", 2],
       "@typescript-eslint/no-unused-expressions": ["error"],
       "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/explicit-module-boundary-types": ["warn"],
+      "@typescript-eslint/explicit-module-boundary-types": ["error"],
       "@typescript-eslint/explicit-member-accessibility": "off",
       "@typescript-eslint/type-annotation-spacing": ["error"],
       "@typescript-eslint/member-delimiter-style": ["error", {

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[] | Date[]) => string)
+  @Input() tickFormat?: ((tick: number | Date, i: number, ticks: number[] | Date[]) => string)
 
   /** Explicitly set tick values. Default: `undefined` */
   @Input() tickValues?: number[]

packages/ts/declaration.d.ts

@@ -1 +1,3 @@
 declare module '*.css';
+declare module 'd3-geo-projection'
+declare module 'd3-interpolate-path'

packages/ts/global.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable no-var */
+export {}
+
+declare global {
+  namespace globalThis {
+    var UNOVIS_COLORS: string[]
+    var UNOVIS_COLORS_DARK: string[]
+    var UNOVIS_ICON_FONT_FAMILY: string
+    var UNOVIS_FONT_W2H_RATIO_DEFAULT: number
+    var UNOVIS_TEXT_SEPARATOR_DEFAULT: string[]
+    var UNOVIS_TEXT_HYPHEN_CHARACTER_DEFAULT: string
+    var UNOVIS_TEXT_DEFAULT: {
+      text: string;
+      fontSize: number;
+      fontFamily: string;
+      lineHeight: number;
+      marginTop: number;
+      marginBottom: number;
+    }
+  }
+}

packages/ts/licences.txt

@@ -5,6 +5,7 @@ name                               license period  license type  installed versi
 @types/d3                          perpetual       MIT           7.4.0              n/a
 @types/d3-collection               perpetual       MIT           1.0.10             n/a
 @types/d3-sankey                   perpetual       MIT           0.11.2             n/a
+@types/dagre                       perpetual       MIT           0.7.50             n/a
 @types/geojson                     perpetual       MIT           7946.0.8           n/a
 @types/leaflet                     perpetual       MIT           1.7.6              n/a
 @types/supercluster                perpetual       MIT           5.0.2              n/a
@@ -32,6 +33,7 @@ to-px                              perpetual       MIT           1.1.0
 topojson-client                    perpetual       ISC           3.1.0              Mike Bostock https://bost.ocks.org/mike
 tslib                              perpetual       0BSD          2.4.1              Microsoft Corp.
 @rollup/plugin-json                perpetual       MIT           4.1.0              rollup
+@types/to-px                       perpetual       MIT           1.1.2              n/a
 @zerollup/ts-transform-paths       perpetual       MIT           1.7.18             Stefan Zerkalica zerkalica@gmail.com
 rimraf                             perpetual       ISC           3.0.2              Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/)
 rollup                             perpetual       MIT           2.75.5             Rich Harris

packages/ts/package.json

@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-json": "^4.1.0",
+    "@types/to-px": "^1.1.2",
     "@zerollup/ts-transform-paths": "^1.7.18",
     "rimraf": "^3.0.2",
     "rollup": "^2.61.1",
@@ -56,6 +57,7 @@
     "@types/d3": "^7.4.0",
     "@types/d3-collection": "^1.0.10",
     "@types/d3-sankey": "^0.11.2",
+    "@types/dagre": "^0.7.50",
     "@types/geojson": "^7946.0.8",
     "@types/leaflet": "1.7.6",
     "@types/supercluster": "^5.0.2",

packages/ts/src/components/axis/config.ts

@@ -30,7 +30,7 @@ export interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInt
   /** Draw the min and max axis ticks only. Default: `false` */
   minMaxTicksOnly?: boolean;
   /** Tick label formatter function. Default: `undefined` */
-  tickFormat?: ((tick: number, i: number, ticks: number[] | Date[]) => string);
+  tickFormat?: ((tick: number | Date, i: number, ticks: number[] | Date[]) => string);
   /** Explicitly set tick values. Default: `undefined` */
   tickValues?: number[];
   /** Set the approximate number of axis ticks (will be passed to D3's axis constructor). Default: `undefined` */

packages/ts/src/components/axis/index.ts

@@ -208,15 +208,15 @@ export class Axis<Datum> extends XYComponentCore<Datum, AxisConfigInterface<Datu
     // Selecting the <text> elements of the ticks to apply formatting. By default, this selection
     // will include exiting elements, so we're filtering them out.
     const tickText = selection.selectAll<SVGTextElement, number | Date>('g.tick > text')
-      .filter(tickValue => tickValues.some(t => isEqual(tickValue, t))) // We use isEqual to compare Dates
+      .filter(tickValue => tickValues.some((t: number | Date) => isEqual(tickValue, t))) // We use isEqual to compare Dates
       .classed(s.tickLabel, true)
       .style('fill', config.tickTextColor) as Selection<SVGTextElement, number, SVGGElement, unknown> | Selection<SVGTextElement, Date, SVGGElement, unknown>
 
 
     // We interrupt the transition on tick's <text> to make it 'wrappable'
     tickText.nodes().forEach(node => interrupt(node))
 
-    tickText.each((value, i, elements) => {
+    tickText.each((value: number | Date, i: number, elements: ArrayLike<SVGTextElement>) => {
       const text = config.tickFormat?.(value, i, tickValues) ?? `${value}`
       const textElement = elements[i] as SVGTextElement
       const textMaxWidth = config.tickTextWidth || (config.type === AxisType.X ? this._containerWidth / (ticks.size() + 1) : this._containerWidth / 5)

packages/ts/src/components/chord-diagram/config.ts

@@ -1,5 +1,3 @@
-/* eslint-disable dot-notation */
-
 // Core
 import { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'
 
@@ -46,11 +44,11 @@ export const ChordDiagramDefaultConfig: ChordDiagramConfigInterface<ChordInputNo
   highlightedNodeId: undefined,
   highlightedLinkIds: [],
   linkColor: undefined,
-  linkValue: <L>(d: L): number => d['value'],
+  linkValue: (d: ChordInputNode): number => (d as { value: number }).value,
   nodeLevels: [],
   nodeWidth: 15,
-  nodeColor: <N>(d: ChordNodeDatum<N>): string => d['color'],
-  nodeLabel: <N>(d: ChordNodeDatum<N>): string => d['label'] ?? d['key'],
+  nodeColor: (d: unknown): string => (d as { color: string }).color,
+  nodeLabel: (d: unknown): string => (d as { label: string }).label ?? (d as { key: string }).key,
   nodeLabelColor: undefined,
   nodeLabelAlignment: ChordLabelAlignment.Along,
   padAngle: 0.02,

packages/ts/src/components/chord-diagram/index.ts

@@ -235,7 +235,7 @@ export class ChordDiagram<
     // TODO: Replace with d3-group
     const nestGen = nest<N>()
     config.nodeLevels.forEach(levelAccessor => {
-      nestGen.key(d => d[levelAccessor])
+      nestGen.key((d) => (d as unknown as Record<string, string>)[levelAccessor])
     })
     const root = { key: 'root', values: nestGen.entries(nodes) }
     const hierarchyNodes = hierarchy(root, d => d.values)

packages/ts/src/components/donut/config.ts

@@ -6,7 +6,7 @@ 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);
+  id?: ((d: Datum, i: number, ...any: unknown[]) => string | number);
   /** Value accessor function. Default: `undefined` */
   value: NumericAccessor<Datum>;
   /** Diagram angle range. Default: `[0, 2 * Math.PI]` */
@@ -46,8 +46,7 @@ export interface DonutConfigInterface<Datum> extends ComponentConfigInterface {
 
 export const DonutDefaultConfig: DonutConfigInterface<unknown> = {
   ...ComponentDefaultConfig,
-  // eslint-disable-next-line dot-notation
-  id: <Datum>(d: Datum, i: number): string | number => d['id'] ?? i,
+  id: (d: unknown, i: number): string | number => (d as { id: string }).id ?? i,
   value: undefined,
   angleRange: [0, 2 * Math.PI],
   padAngle: 0,

packages/ts/src/components/free-brush/index.ts

@@ -1,7 +1,7 @@
 import { Selection } from 'd3-selection'
 import { brush, BrushBehavior, brushX, brushY, D3BrushEvent } from 'd3-brush'
 import { XYComponentCore } from 'core/xy-component'
-import { clamp, isNumber } from 'utils/data'
+import { clamp, isArray, isNumber } from 'utils/data'
 import { smartTransition } from 'utils/d3'
 
 // Types
@@ -71,8 +71,9 @@ export class FreeBrush<Datum> extends XYComponentCore<Datum, FreeBrushConfigInte
     let brushRange: FreeBrushSelectionInPixels
     switch (config.mode) {
       case FreeBrushMode.XY: {
-        const xSelectionRange = this._dataRangeToPixelRange([config.selection?.[0][0], config.selection?.[0][1]], xScale)
-        const ySelectionRange = this._dataRangeToPixelRange([config.selection?.[1][0], config.selection?.[1][1]], yScale, true)
+        const selection = config.selection as [[number, number], [number, number]] | undefined
+        const xSelectionRange = this._dataRangeToPixelRange([selection?.[0][0], selection?.[0][1]], xScale)
+        const ySelectionRange = this._dataRangeToPixelRange([selection?.[1][0], selection?.[1][1]], yScale, true)
         brushRange = (xSelectionRange && ySelectionRange) ? [[xSelectionRange[0], ySelectionRange[0]], [xSelectionRange[1], ySelectionRange[1]]] : null
         break
       }
@@ -108,21 +109,22 @@ export class FreeBrush<Datum> extends XYComponentCore<Datum, FreeBrushConfigInte
     let selectedDomain: FreeBrushSelection
     switch (config.mode) {
       case FreeBrushMode.XY: {
-        const xSelection = this._pixelRangeToDataRange([s[0][0], s[1][0]], this.xScale, config.selectionMinLength?.[0] ?? config.selectionMinLength)
-        const ySelection = this._pixelRangeToDataRange([s[0][1], s[1][1]], this.yScale, config.selectionMinLength?.[1] ?? config.selectionMinLength, true)
+        const selection = s as [[number, number], [number, number]]
+        const xSelection = this._pixelRangeToDataRange([selection[0][0], selection[1][0]], this.xScale, isArray(config.selectionMinLength) ? config.selectionMinLength[0] : config.selectionMinLength)
+        const ySelection = this._pixelRangeToDataRange([selection[0][1], selection[1][1]], this.yScale, isArray(config.selectionMinLength) ? config.selectionMinLength[1] : config.selectionMinLength, true)
         selectedDomain = (xSelection && ySelection) ? [
           [xSelection?.[0], xSelection?.[1]],
           [ySelection?.[0], ySelection?.[1]],
         ] : null
         break
       }
       case FreeBrushMode.Y: {
-        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.yScale, config.selectionMinLength[0], true)
+        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.yScale, isArray(config.selectionMinLength) ? config.selectionMinLength[1] : config.selectionMinLength, true)
         break
       }
       case FreeBrushMode.X:
       default: {
-        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.xScale, config.selectionMinLength[1])
+        selectedDomain = this._pixelRangeToDataRange(s as [number, number], this.xScale, isArray(config.selectionMinLength) ? config.selectionMinLength[0] : config.selectionMinLength)
         break
       }
     }

packages/ts/src/components/graph/config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable dot-notation */
 // Config
 import { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'
 
@@ -216,8 +215,8 @@ export const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInput
   layoutParallelNodesPerColumn: 6,
   layoutParallelGroupSpacing: undefined,
   layoutParallelSortConnectionsByGroup: undefined,
-  layoutNodeGroup: (n: GraphInputNode): string => n['group'],
-  layoutParallelNodeSubGroup: (n: GraphInputNode): string => n['subgroup'],
+  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,
+  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,
 
   forceLayoutSettings: {
     linkDistance: 60,
@@ -254,9 +253,9 @@ export const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInput
   nodeStrokeWidth: 3,
   nodeShape: GraphNodeShape.Circle,
   nodeGaugeValue: 0,
-  nodeIcon: (n: GraphInputNode): string => n['icon'],
+  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,
   nodeIconSize: undefined,
-  nodeLabel: (n: GraphInputNode): string => n['label'],
+  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,
   nodeLabelTrim: true,
   nodeLabelTrimLength: 15,
   nodeLabelTrimMode: TrimMode.Middle,
@@ -267,9 +266,9 @@ export const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInput
   nodeSideLabels: undefined,
   nodeBottomIcon: undefined,
   nodeDisabled: false,
-  nodeFill: (n: GraphInputNode): string => n['fill'],
+  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,
   nodeGaugeFill: undefined,
-  nodeStroke: (n: GraphInputNode): string => n['stroke'],
+  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,
   nodeEnterPosition: undefined,
   nodeEnterScale: 0.75,
   nodeExitPosition: undefined,

packages/ts/src/components/graph/index.ts

@@ -94,7 +94,7 @@ export class Graph<
   private _zoomBehavior: ZoomBehavior<SVGGElement, unknown>
   private _isAutoFitDisabled = false
   private _scale: number
-  private _initialTransform
+  private _initialTransform: ZoomTransform
   private _isDragging = false
 
   events = {
@@ -587,8 +587,9 @@ export class Graph<
     //   refit the layout after recalculation (e.g. on container resize)
     if (event?.sourceEvent) {
       const diff = Object.keys(transform).reduce((acc, prop) => {
-        const val = transform[prop]
-        const dVal = Math.abs(val - this._initialTransform[prop])
+        const propVal = transform[prop as keyof ZoomTransform] as number
+        const initialPropVal = this._initialTransform[prop as keyof ZoomTransform] as number
+        const dVal = Math.abs(propVal - initialPropVal)
         return prop === 'k' ? 2 * dVal : dVal / 50
       }, 0)