feat: use airbnb linting

Author: sgratzl

.eslintrc.js

@@ -23,8 +23,8 @@ module.exports = {
   rules: {
     // '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
-    'no-underscore-dangle': 'off',
-    'max-classes-per-file': 'off',
     // '@typescript-eslint/no-non-null-assertion': 'off',
+    'max-classes-per-file': 'off',
+    'no-underscore-dangle': 'off',
   },
 };

.prettierignore

@@ -11,4 +11,5 @@
 /yarn.lock
 /.vscode
 *.png
+*.tgz
 *.tsbuildinfo

.vscode/settings.json

@@ -26,4 +26,4 @@
     "**/.yarn": true,
     "**/.pnp.*": true
   },
-}
+}

src/__tests__/createChart.ts

@@ -12,6 +12,7 @@ function toBuffer(canvas: HTMLCanvasElement) {
     canvas.toBlob((b) => {
       const file = new FileReader();
       file.onload = () => resolve(Buffer.from(file.result as ArrayBuffer));
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       file.readAsArrayBuffer(b!);
     });
   });
@@ -22,19 +23,29 @@ export async function expectMatchSnapshot(canvas: HTMLCanvasElement): Promise<vo
   expect(image).toMatchImageSnapshot();
 }
 
+export interface ChartHelper<TYPE extends ChartType, DATA extends unknown[] = DefaultDataPoint<TYPE>, LABEL = string> {
+  chart: Chart<TYPE, DATA, LABEL>;
+  canvas: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D;
+  toMatchImageSnapshot(options?: MatchImageSnapshotOptions): Promise<void>;
+}
+
 export default function createChart<
   TYPE extends ChartType,
   DATA extends unknown[] = DefaultDataPoint<TYPE>,
   LABEL = string
->(config: ChartConfiguration<TYPE, DATA, LABEL>, width = 800, height = 600) {
+>(config: ChartConfiguration<TYPE, DATA, LABEL>, width = 300, height = 300): ChartHelper<TYPE, DATA, LABEL> {
   const canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;
   defaults.font.family = 'Courier New';
-  defaults.color = 'transparent';
+  // defaults.color = 'transparent';
+  // eslint-disable-next-line no-param-reassign
   config.options = {
     responsive: false,
-    animation: false,
+    animation: {
+      duration: 1,
+    },
     plugins: {
       legend: {
         display: false,
@@ -45,6 +56,7 @@ export default function createChart<
     },
     ...(config.options || {}),
   } as any;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const ctx = canvas.getContext('2d')!;
 
   const t = new Chart<TYPE, DATA, LABEL>(ctx, config);

src/controllers/BoxPlotController.spec.ts

@@ -272,7 +272,7 @@ describe('boxplot', () => {
     return chart.toMatchImageSnapshot();
   });
 
-  test('datastructures', () => {
+  test('data structures', () => {
     const chart = createChart({
       type: BoxPlotController.id,
       data: {

src/controllers/BoxPlotController.ts

@@ -18,13 +18,16 @@ import patchController from './patchController';
 import { boxOptionsKeys } from '../elements/BoxAndWiskers';
 
 export class BoxPlotController extends StatsBase<IBoxPlot, Required<IBoxplotOptions>> {
+  // eslint-disable-next-line class-methods-use-this
   protected _parseStats(value: unknown, config: IBoxplotOptions): IBoxPlot | undefined {
     return asBoxPlotStats(value, config);
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   protected _transformStats<T>(target: any, source: IBoxPlot, mapper: (v: number) => T): void {
     super._transformStats(target, source, mapper);
     for (const key of ['whiskerMin', 'whiskerMax']) {
+      // eslint-disable-next-line no-param-reassign
       target[key] = mapper(source[key as 'whiskerMin' | 'whiskerMax']);
     }
   }

src/controllers/ViolinController.ts

@@ -19,14 +19,18 @@ import { interpolateKdeCoords } from '../animation';
 import patchController from './patchController';
 
 export class ViolinController extends StatsBase<IViolin, Required<IViolinOptions>> {
-  protected _parseStats(value: any, config: IViolinOptions) {
+  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/explicit-module-boundary-types
+  protected _parseStats(value: any, config: IViolinOptions): IViolin | undefined {
     return asViolinStats(value, config);
   }
 
-  protected _transformStats<T>(target: any, source: IViolin, mapper: (v: number) => T) {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  protected _transformStats<T>(target: any, source: IViolin, mapper: (v: number) => T): void {
     super._transformStats(target, source, mapper);
+    // eslint-disable-next-line no-param-reassign
     target.maxEstimate = source.maxEstimate;
     if (Array.isArray(source.coords)) {
+      // eslint-disable-next-line no-param-reassign
       target.coords = source.coords.map((c) => ({ ...c, v: mapper(c.v) }));
     }
   }

src/controllers/__tests__/utils.ts

@@ -1,4 +1,4 @@
-import type { IBoxPlot } from '@sgratzl/boxplots';
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type { BoxPlotDataPoint } from '../BoxPlotController';
 
 const Months = [
@@ -46,6 +46,7 @@ export class Samples {
     return this.randF(min, max)();
   }
 
+  // eslint-disable-next-line class-methods-use-this
   months({ count = 12, section }: { count?: number; section?: number }): string[] {
     const values: string[] = [];
 
@@ -118,6 +119,7 @@ export class Samples {
       .map(() => this.numbers({ ...config, count: 50 }) as number[]);
   }
 
+  // eslint-disable-next-line class-methods-use-this
   labels({
     min = 0,
     max = 100,

src/controllers/base.ts

@@ -3,7 +3,7 @@ import { interpolateNumberArray } from '../animation';
 import { outlierPositioner, patchInHoveredOutlier } from '../tooltip';
 import { defaultStatsOptions, IBaseOptions, IBaseStats } from '../data';
 
-export /* #__PURE__ */ function baseDefaults(keys: string[]) {
+export /* #__PURE__ */ function baseDefaults(keys: string[]): Record<string, unknown> {
   const colorKeys = ['borderColor', 'backgroundColor'].concat(keys.filter((c) => c.endsWith('Color')));
   return {
     animations: {
@@ -42,7 +42,7 @@ export /* #__PURE__ */ function baseDefaults(keys: string[]) {
   };
 }
 
-export function defaultOverrides() {
+export function defaultOverrides(): Record<string, unknown> {
   return {
     plugins: {
       tooltips: {
@@ -58,15 +58,18 @@ export function defaultOverrides() {
 export abstract class StatsBase<S extends IBaseStats, C extends Required<IBaseOptions>> extends BarController {
   declare options: C;
 
+  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/explicit-module-boundary-types
   protected _transformStats<T>(target: any, source: S, mapper: (v: number) => T): void {
     for (const key of ['min', 'max', 'median', 'q3', 'q1', 'mean'] as const) {
       const v = source[key];
       if (typeof v === 'number') {
+        // eslint-disable-next-line no-param-reassign
         target[key] = mapper(v);
       }
     }
     for (const key of ['outliers', 'items'] as const) {
       if (Array.isArray(source[key])) {
+        // eslint-disable-next-line no-param-reassign
         target[key] = source[key].map(mapper);
       }
     }
@@ -75,20 +78,25 @@ export abstract class StatsBase<S extends IBaseStats, C extends Required<IBaseOp
   getMinMax(scale: Scale, canStack?: boolean | undefined): { min: number; max: number } {
     const bak = scale.axis;
     const config = this.options;
+    // eslint-disable-next-line no-param-reassign
     scale.axis = config.minStats;
     const { min } = super.getMinMax(scale, canStack);
+    // eslint-disable-next-line no-param-reassign
     scale.axis = config.maxStats;
     const { max } = super.getMinMax(scale, canStack);
+    // eslint-disable-next-line no-param-reassign
     scale.axis = bak;
     return { min, max };
   }
 
-  parsePrimitiveData(meta: ChartMeta, data: any[], start: number, count: number) {
+  parsePrimitiveData(meta: ChartMeta, data: any[], start: number, count: number): Record<string, unknown>[] {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const vScale = meta.vScale!;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const iScale = meta.iScale!;
     const labels = iScale.getLabels();
     const r = [];
-    for (let i = 0; i < count; i++) {
+    for (let i = 0; i < count; i += 1) {
       const index = i + start;
       const parsed: any = {};
       parsed[iScale.axis] = iScale.parse(labels[index], index);
@@ -102,17 +110,18 @@ export abstract class StatsBase<S extends IBaseStats, C extends Required<IBaseOp
     return r;
   }
 
-  parseArrayData(meta: ChartMeta, data: any[], start: number, count: number) {
+  parseArrayData(meta: ChartMeta, data: any[], start: number, count: number): Record<string, unknown>[] {
     return this.parsePrimitiveData(meta, data, start, count);
   }
 
-  parseObjectData(meta: ChartMeta, data: any[], start: number, count: number) {
+  parseObjectData(meta: ChartMeta, data: any[], start: number, count: number): Record<string, unknown>[] {
     return this.parsePrimitiveData(meta, data, start, count);
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   protected abstract _parseStats(value: any, options: C): S | undefined;
 
-  getLabelAndValue(index: number) {
+  getLabelAndValue(index: number): { label: string; value: string & { raw: S; hoveredOutlierIndex: number } & S } {
     const r = super.getLabelAndValue(index) as any;
     const { vScale } = this._cachedMeta;
     const parsed = (this.getParsed(index) as unknown) as S;
@@ -125,7 +134,7 @@ export abstract class StatsBase<S extends IBaseStats, C extends Required<IBaseOp
     };
     this._transformStats(r.value, parsed, (v) => vScale.getLabelForValue(v));
     const s = this._toStringStats(r.value);
-    r.value.toString = function () {
+    r.value.toString = function toString() {
       // custom to string function for the 'value'
       if (this.hoveredOutlierIndex >= 0) {
         // TODO formatter
@@ -136,20 +145,24 @@ export abstract class StatsBase<S extends IBaseStats, C extends Required<IBaseOp
     return r;
   }
 
-  protected _toStringStats(b: S) {
+  // eslint-disable-next-line class-methods-use-this
+  protected _toStringStats(b: S): string {
     // TODO formatter
     const f = (v: number) => (v == null ? 'NaN' : v.toLocaleString());
     return `(min: ${f(b.min)}, 25% quantile: ${f(b.q1)}, median: ${f(b.median)}, mean: ${f(b.mean)}, 75% quantile: ${f(
       b.q3
     )}, max: ${f(b.max)})`;
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   updateElement(rectangle: Element, index: number, properties: any, mode: UpdateMode): void {
     const reset = mode === 'reset';
     const scale = this._cachedMeta.vScale as LinearScale;
     const parsed = (this.getParsed(index) as unknown) as S;
     const base = scale.getBasePixel();
+    // eslint-disable-next-line no-param-reassign
     properties._datasetIndex = this.index;
+    // eslint-disable-next-line no-param-reassign
     properties._index = index;
     this._transformStats(properties, parsed, (v) => (reset ? base : scale.getPixelForValue(v, index)));
     super.updateElement(rectangle, index, properties, mode);

src/data.ts

@@ -236,6 +236,7 @@ export function violinStats(arr: readonly number[], options: IViolinOptions): IV
   };
 }
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function asBoxPlotStats(value: any, options: IBoxplotOptions): IBoxPlot | undefined {
   if (!value) {
     return undefined;
@@ -249,7 +250,9 @@ export function asBoxPlotStats(value: any, options: IBoxplotOptions): IBoxPlot |
         Array.isArray(value.items) ? (value.items as number[]).slice().sort((a, b) => a - b) : null,
         coef
       );
+      // eslint-disable-next-line no-param-reassign
       value.whiskerMin = whiskerMin;
+      // eslint-disable-next-line no-param-reassign
       value.whiskerMax = whiskerMax;
     }
     return value;
@@ -260,6 +263,7 @@ export function asBoxPlotStats(value: any, options: IBoxplotOptions): IBoxPlot |
   return boxplotStats(value, options);
 }
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function asViolinStats(value: any, options: IViolinOptions): IViolin | undefined {
   if (!value) {
     return undefined;
@@ -273,7 +277,7 @@ export function asViolinStats(value: any, options: IViolinOptions): IViolin | un
   return violinStats(value, options);
 }
 
-export function rnd(seed = Date.now()) {
+export function rnd(seed = Date.now()): () => number {
   // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
   let s = seed;
   return () => {