Merge pull request #44 from sgratzl/release/v4.2.2

Release v4.2.2

.github/dependabot.yml

@@ -0,0 +1,19 @@
+version: 2
+
+updates:
+ - package-ecosystem: 'github-actions'
+ directory: '/'
+ schedule:
+ interval: 'monthly'
+ target-branch: 'dev'
+ labels:
+ - 'dependencies'
+ - 'chore'
+ - package-ecosystem: 'npm'
+ directory: '/'
+ schedule:
+ interval: 'monthly'
+ target-branch: 'dev'
+ labels:
+ - 'dependencies'
+ - 'chore'

.yarnrc.yml

@@ -1,6 +1 @@
-packageExtensions:
- eslint-module-utils@*:
- dependencies:
- eslint-import-resolver-node: "*"
-
-yarnPath: .yarn/releases/yarn-4.2.2.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

eslint.config.mjs

@@ -0,0 +1,61 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import prettier from 'eslint-plugin-prettier';
+
+export default tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended, {
+ plugins: { prettier },
+ rules: {
+ '@typescript-eslint/no-explicit-any': 'off',
+ 'max-classes-per-file': 'off',
+ 'no-underscore-dangle': 'off',
+ 'import/extensions': 'off',
+ },
+});
+
+// import path from "node:path";
+// import { fileURLToPath } from "node:url";
+// import js from "@eslint/js";
+// import { FlatCompat } from "@eslint/eslintrc";
+
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname = path.dirname(__filename);
+// const compat = new FlatCompat({
+// baseDirectory: __dirname,
+// recommendedConfig: js.configs.recommended,
+// allConfig: js.configs.all
+// });
+
+// export default [...fixupConfigRules(compat.extends(
+// "airbnb-typescript",
+// "react-app",
+// "plugin:prettier/recommended",
+// "prettier",
+// )), {
+// plugins: {
+// prettier: fixupPluginRules(prettier),
+// },
+
+// languageOptions: {
+// ecmaVersion: 5,
+// sourceType: "script",
+
+// parserOptions: {
+// project: "./tsconfig.eslint.json",
+// },
+// },
+
+// settings: {
+// react: {
+// version: "99.99.99",
+// },
+// },
+
+// rules: {
+// "@typescript-eslint/no-explicit-any": "off",
+// "max-classes-per-file": "off",
+// "no-underscore-dangle": "off",
+// "import/extensions": "off",
+// },
+// }];

package.json

@@ -1,7 +1,7 @@
 {
  "name": "chartjs-chart-funnel",
  "description": "Chart.js module for charting funnel charts",
- "version": "4.2.1",
+ "version": "4.2.2",
  "author": {
  "name": "Samuel Gratzl",
  "email": "samu@sgratzl.com",
@@ -54,77 +54,65 @@
  ],
  "devDependencies": {
  "@chiogen/rollup-plugin-terser": "^7.1.3",
- "@rollup/plugin-commonjs": "^26.0.1",
- "@rollup/plugin-node-resolve": "^15.2.3",
- "@rollup/plugin-replace": "^5.0.7",
- "@rollup/plugin-typescript": "^11.1.6",
- "@types/jest": "^29.5.12",
+ "@eslint/js": "^9.11.1",
+ "@rollup/plugin-commonjs": "^28.0.0",
+ "@rollup/plugin-node-resolve": "^15.3.0",
+ "@rollup/plugin-replace": "^6.0.1",
+ "@rollup/plugin-typescript": "^12.1.0",
  "@types/jest-image-snapshot": "^6.4.0",
- "@types/node": "^20.14.2",
- "@typescript-eslint/eslint-plugin": "^7.12.0",
- "@typescript-eslint/parser": "^7.12.0",
- "@yarnpkg/sdks": "^3.1.2",
+ "@types/node": "^22.7.4",
+ "@yarnpkg/sdks": "^3.2.0",
  "canvas": "^2.11.2",
  "canvas-5-polyfill": "^0.1.5",
- "chart.js": "^4.4.3",
+ "chart.js": "^4.4.4",
  "chartjs-plugin-datalabels": "^2.2.0",
- "chartjs-plugin-hierarchical": "^4.4.0",
- "eslint": "^8.57.0",
- "eslint-config-airbnb-typescript": "^18.0.0",
- "eslint-config-prettier": "^9.1.0",
- "eslint-config-react-app": "^7.0.1",
- "eslint-plugin-flowtype": "^8.0.3",
- "eslint-plugin-import": "^2.29.1",
- "eslint-plugin-jsx-a11y": "^6.8.0",
- "eslint-plugin-prettier": "^5.1.3",
- "eslint-plugin-react": "^7.34.2",
- "eslint-plugin-react-hooks": "^4.6.2",
- "jest": "^29.7.0",
- "jest-environment-jsdom": "^29.7.0",
+ "chartjs-plugin-hierarchical": "^4.4.1",
+ "eslint": "^9.11.1",
+ "eslint-plugin-prettier": "^5.2.1",
  "jest-image-snapshot": "^6.4.0",
- "prettier": "^3.3.1",
- "rimraf": "^5.0.7",
- "rollup": "^4.18.0",
+ "jsdom": "^25.0.1",
+ "prettier": "^3.3.3",
+ "rimraf": "^6.0.1",
+ "rollup": "^4.22.5",
  "rollup-plugin-cleanup": "^3.2.1",
  "rollup-plugin-dts": "^6.1.1",
- "ts-jest": "^29.1.4",
- "tslib": "^2.6.3",
- "typedoc": "^0.25.13",
- "typedoc-plugin-markdown": "^4.0.3",
- "typedoc-vitepress-theme": "^1.0.0",
- "typescript": "^5.4.5",
- "vitepress": "^1.2.3",
- "vue": "^3.4.27",
+ "ts-jest": "^29.2.5",
+ "tslib": "^2.7.0",
+ "typedoc": "^0.26.7",
+ "typedoc-plugin-markdown": "^4.2.8",
+ "typedoc-vitepress-theme": "^1.0.1",
+ "typescript": "^5.6.2",
+ "typescript-eslint": "^8.7.0",
+ "vite": "^5.4.8",
+ "vitepress": "^1.3.4",
+ "vitest": "^2.1.1",
+ "vue": "^3.5.10",
  "vue-chartjs": "^5.3.1"
  },
- "resolutions": {
- "@typescript-eslint/eslint-plugin": "^7.2.0",
- "@typescript-eslint/parser": "^7.2.0"
- },
  "scripts": {
  "clean": "rimraf --glob build node_modules \"*.tgz\" \"*.tsbuildinfo\"",
  "compile": "tsc -b tsconfig.c.json",
  "start": "yarn run watch",
  "watch": "rollup -c -w",
  "build": "rollup -c",
- "test": "yarn node --experimental-vm-modules $(yarn bin jest) --passWithNoTests --detectOpenHandles --forceExit",
+ "test": "vitest --passWithNoTests",
  "test:watch": "yarn run test --watch",
  "test:coverage": "yarn run test --coverage",
  "lint": "yarn run eslint && yarn run prettier",
  "fix": "yarn run eslint:fix && yarn run prettier:write",
  "prettier:write": "prettier \"*\" \"*/**\" --write",
  "prettier": "prettier \"*\" \"*/**\" --check",
- "eslint": "eslint src --ext .ts,.tsx --cache",
+ "eslint": "eslint src --cache",
  "eslint:fix": "yarn run eslint --fix",
  "prepare": "yarn run build",
  "docs:api": "typedoc --options typedoc.json",
  "docs:dev": "vitepress dev docs",
  "docs:build": "yarn run docs:api && vitepress build docs",
  "docs:preview": "vitepress preview docs"
  },
- "packageManager": "yarn@4.2.2",
+ "packageManager": "yarn@4.5.0",
  "dependencies": {
  "@types/chroma-js": "^2.4.4",
- "chroma-js": "^2.4.2"
+ "chroma-js": "^3.1.1"
  }
 }

src/__tests__/createChart.ts

@@ -1,6 +1,6 @@
-/// <reference types="jest" />
 /// <reference types="node" />
 
+import { expect } from 'vitest';
 import { Chart, ChartConfiguration, defaults, ChartType, DefaultDataPoint } from 'chart.js';
 import { toMatchImageSnapshot, MatchImageSnapshotOptions } from 'jest-image-snapshot';
 import 'canvas-5-polyfill';
@@ -12,7 +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!);
  });
  });
@@ -34,13 +34,13 @@ export default function createChart<
  TYPE extends ChartType,
  DATA extends unknown[] = DefaultDataPoint<TYPE>,
  LABEL = string,
->(config: ChartConfiguration<TYPE, DATA, LABEL>, width = 300, height = 300): ChartHelper<TYPE, DATA, LABEL> {
+>(config: ChartConfiguration<TYPE, DATA, LABEL>, width = 800, height = 600): ChartHelper<TYPE, DATA, LABEL> {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  Object.assign(defaults.font, { family: 'Courier New' });
  // defaults.color = 'transparent';
- // eslint-disable-next-line no-param-reassign
+
  config.options = {
  responsive: false,
  animation: {
@@ -56,7 +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/FunnelController.spec.ts

@@ -2,14 +2,14 @@ import { CategoryScale, LinearScale, registry } from 'chart.js';
 import createChart from '../__tests__/createChart';
 import { FunnelController } from './FunnelController';
 import { TrapezoidElement } from '../elements';
-
+import { describe, beforeAll, test } from 'vitest';
 describe('funnel', () => {
  beforeAll(() => {
  registry.addControllers(FunnelController);
  registry.addElements(TrapezoidElement);
  registry.addScales(LinearScale, CategoryScale);
  });
- it('default', () => {
+ test('default', () => {
  const chart = createChart(
  {
  type: 'funnel',
@@ -30,7 +30,7 @@ describe('funnel', () => {
  );
  return chart.toMatchImageSnapshot();
  });
- it('horizontal', () => {
+ test('horizontal', () => {
  const chart = createChart(
  {
  type: 'funnel',
@@ -51,7 +51,7 @@ describe('funnel', () => {
  );
  return chart.toMatchImageSnapshot();
  });
- it('numbers', () => {
+ test('numbers', () => {
  const chart = createChart(
  {
  type: 'funnel',
@@ -72,7 +72,7 @@ describe('funnel', () => {
  );
  return chart.toMatchImageSnapshot();
  });
- it.each(['top', 'bottom', 'none', 'middle'])('shrink-%s', (shrinkAnchor: string) => {
+ test.each(['top', 'bottom', 'none', 'middle'])('shrink-%s', (shrinkAnchor: string) => {
  const chart = createChart(
  {
  type: 'funnel',
@@ -94,7 +94,7 @@ describe('funnel', () => {
  );
  return chart.toMatchImageSnapshot();
  });
- it.each(['top', 'bottom', 'none', 'middle'])('hor-shrink-%s', (shrinkAnchor: string) => {
+ test.each(['top', 'bottom', 'none', 'middle'])('hor-shrink-%s', (shrinkAnchor: string) => {
  const chart = createChart(
  {
  type: 'funnel',
@@ -116,7 +116,7 @@ describe('funnel', () => {
  );
  return chart.toMatchImageSnapshot();
  });
- it.each(['0', '0.25', '0.5', '0.75', '1'])('shrink-fraction-%s', (shrinkFraction: string) => {
+ test.each(['0', '0.25', '0.5', '0.75', '1'])('shrink-fraction-%s', (shrinkFraction: string) => {
  const chart = createChart(
  {
  type: 'funnel',
@@ -138,7 +138,7 @@ describe('funnel', () => {
  );
  return chart.toMatchImageSnapshot();
  });
- it.each(['0', '0.25', '0.5', '0.75', '1'])('hor-shrink-fraction-%s', (shrinkFraction: string) => {
+ test.each(['0', '0.25', '0.5', '0.75', '1'])('hor-shrink-fraction-%s', (shrinkFraction: string) => {
  const chart = createChart(
  {
  type: 'funnel',
@@ -161,7 +161,7 @@ describe('funnel', () => {
  return chart.toMatchImageSnapshot();
  });
 
- it.each(['left', 'right', 'center'])('align-%s', (align: string) => {
+ test.each(['left', 'right', 'center'])('align-%s', (align: string) => {
  const chart = createChart(
  {
  type: 'funnel',
@@ -183,7 +183,7 @@ describe('funnel', () => {
  );
  return chart.toMatchImageSnapshot();
  });
- it.each(['left', 'right', 'center'])('hor-align-%s', (align: string) => {
+ test.each(['left', 'right', 'center'])('hor-align-%s', (align: string) => {
  const chart = createChart(
  {
  type: 'funnel',

src/controllers/FunnelController.ts

@@ -19,7 +19,6 @@ import { pickForegroundColorToBackgroundColor, blues } from '../color';
 import { TrapezoidElement, TrapezoidElementOptions } from '../elements';
 import patchController from './patchController';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface FunnelChartOptions {
  /**
  * alignment of the elements one of center, left, right