Merge pull request #27 from sgratzl/release/v3.7.0

Release v3.7.0

.eslintrc.js

@@ -4,11 +4,14 @@
 const pkg = require('./package.json');
 
 module.exports = {
-  plugins: ['@typescript-eslint', 'prettier'],
+  plugins: [
+    // '@typescript-eslint',
+    'prettier',
+  ],
   extends: [
-    'airbnb-typescript',
+    // 'airbnb-typescript',
     'react-app',
-    'plugin:@typescript-eslint/recommended',
+    // 'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'prettier',
   ],

.github/workflows/ci.yml

@@ -25,6 +25,7 @@ jobs:
       - run: yarn build
       - run: yarn lint
       - run: yarn test
+      - run: yarn samples
       - uses: actions/upload-artifact@v2
         if: failure()
         with:

.gitignore

@@ -21,4 +21,5 @@ npm-debug.log*
 /.vscode/extensions.json
 /docs
 *.tsbuildinfo
-__diff_output__
+__diff_output__
+/samples/type_test.js

.prettierignore

@@ -11,4 +11,5 @@
 /yarn.lock
 /.vscode
 *.png
-*.tsbuildinfo
+*.tsbuildinfo
+/samples/type_test.js

.yarnrc.yml

@@ -3,4 +3,4 @@ packageExtensions:
     dependencies:
       eslint-import-resolver-node: "*"
 
-yarnPath: .yarn/releases/yarn-3.1.0.cjs
+yarnPath: .yarn/releases/yarn-3.1.1.cjs

README.md

@@ -152,11 +152,11 @@ The ESM build of the library supports tree shaking thus having no side effects.
 Variant A:
 
 ```js
-import { Chart, LinearScale, Point } from 'chart.js';
+import { Chart, LinearScale, PointElement } from 'chart.js';
 import { ForceDirectedGraphController, EdgeLine } from 'chartjs-chart-graph';
 
 // register controller in chart.js and ensure the defaults are set
-Chart.register(ForceDirectedGraphController, EdgeLine, LinearScale, Point);
+Chart.register(ForceDirectedGraphController, EdgeLine, LinearScale, PointElement);
 ...
 
 new Chart(ctx, {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chartjs-chart-graph",
   "description": "Chart.js module for charting error bars",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "author": {
     "name": "Samuel Gratzl",
     "email": "sam@sgratzl.com",
@@ -35,7 +35,7 @@
     "src/**/*.ts"
   ],
   "peerDependencies": {
-    "chart.js": "^3.6.0"
+    "chart.js": "^3.7.0"
   },
   "browserslist": [
     "Firefox ESR",
@@ -50,42 +50,42 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-replace": "^3.0.1",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^27.4.0",
     "@types/jest-image-snapshot": "^4.3.1",
-    "@types/node": "^16.11.6",
+    "@types/node": "^17.0.16",
     "@types/seedrandom": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
     "@yarnpkg/sdks": "^2.5.0",
-    "canvas": "^2.8.0",
+    "canvas": "^2.9.0",
     "canvas-5-polyfill": "^0.1.5",
-    "chart.js": "^3.6.0",
-    "eslint": "^8.1.0",
-    "eslint-config-airbnb-typescript": "^14.0.1",
+    "chart.js": "^3.7.0",
+    "eslint": "^8.8.0",
+    "eslint-config-airbnb-typescript": "^16.1.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
+    "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^27.3.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "jest": "^27.5.1",
     "jest-image-snapshot": "^4.5.1",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.59.0",
+    "rollup": "^2.67.1",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-dts": "^4.0.0",
+    "rollup-plugin-dts": "^4.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "seedrandom": "^3.0.5",
-    "ts-jest": "^27.0.7",
+    "ts-jest": "^27.1.3",
     "tslib": "^2.3.1",
-    "typedoc": "^0.22.7",
-    "typescript": "^4.4.4"
+    "typedoc": "^0.22.11",
+    "typescript": "^4.5.5"
   },
   "scripts": {
     "clean": "rimraf build docs node_modules \"*.tgz\" \"*.tsbuildinfo\"",
@@ -97,6 +97,7 @@
     "test": "jest --passWithNoTests",
     "test:watch": "jest --passWithNoTests --watch",
     "test:coverage": "jest --passWithNoTests --coverage",
+    "samples": "yarn tsc samples/type_test.ts",
     "lint": "yarn run eslint && yarn run prettier",
     "fix": "yarn run eslint:fix && yarn run prettier:write",
     "prettier:write": "prettier \"*\" \"*/**\" --write",
@@ -106,5 +107,5 @@
     "docs": "typedoc src/index.ts",
     "prepare": "yarn run build"
   },
-  "packageManager": "yarn@3.1.0"
+  "packageManager": "yarn@3.1.1"
 }

samples/default_esm.html

@@ -11,8 +11,8 @@
     <script type="importmap-shim">
       {
         "imports": {
-          "chart.js": "https://unpkg.com/chart.js@3.6.0?module",
-          "chart.js/helpers": "https://unpkg.com/chart.js@3.6.0/helpers/helpers.esm.js?module",
+          "chart.js": "https://unpkg.com/chart.js@3.7.0?module",
+          "chart.js/helpers": "https://unpkg.com/chart.js@3.7.0/helpers/helpers.esm.js?module",
           "chartjs-chart-graph": "../build/index.js",
           "d3-force": "https://unpkg.com/d3-force?module",
           "d3-hierarchy": "https://unpkg.com/d3-hierarchy?module"

samples/directed.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.6.0/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.7.0/dist/chart.js"></script>
     <script src="../build/index.umd.js"></script>
   </head>
 

samples/forceDirectedGraph.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.6.0/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.7.0/dist/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
     <script src="https://unpkg.com/chartjs-plugin-zoom/dist/chartjs-plugin-zoom"></script>
     <script src="../build/index.umd.js"></script>

samples/graphChange.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.6.0/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.7.0/dist/chart.js"></script>
     <script src="../build/index.umd.js"></script>
   </head>
 

samples/multi.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.6.0/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.7.0/dist/chart.js"></script>
     <script src="../build/index.umd.js"></script>
     <style>
       body {

samples/radial.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.6.0/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.7.0/dist/chart.js"></script>
     <script src="../build/index.umd.js"></script>
   </head>
 

samples/radiallabel.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.6.0/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.7.0/dist/chart.js"></script>
     <script src="https://unpkg.com/chartjs-plugin-datalabels@next"></script>
     <!-- <script src="https://unpkg.com/chartjs-plugin-datalabels"></script> -->
     <script src="../build/index.umd.js"></script>

samples/tree.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.6.0/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.7.0/dist/chart.js"></script>
     <script src="../build/index.umd.js"></script>
   </head>
 

samples/treelabel.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.6.0/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.7.0/dist/chart.js"></script>
     <script src="https://unpkg.com/chartjs-plugin-datalabels@next"></script>
     <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
     <script src="https://unpkg.com/chartjs-plugin-zoom/dist/chartjs-plugin-zoom"></script>

samples/type_test.ts

@@ -0,0 +1,93 @@
+import { Chart, LinearScale, PointElement } from 'chart.js';
+import { ForceDirectedGraphController, EdgeLine } from '../build';
+
+// register controller in chart.js and ensure the defaults are set
+Chart.register(ForceDirectedGraphController, EdgeLine, LinearScale, PointElement);
+
+const ctx = document.querySelector('canvas').getContext('2d');
+
+const chart1 = new Chart(ctx, {
+  type: 'forceDirectedGraph',
+  data: {
+    labels: ['A', 'B', 'C'], // node labels
+    datasets: [
+      {
+        data: [
+          // nodes as objects
+          { x: 1, y: 2 }, // x, y will be set by the force directed graph and can be omitted
+          { x: 3, y: 1 },
+          { x: 5, y: 3 },
+        ],
+        edges: [
+          // edge list where source/target refers to the node index
+          { source: 0, target: 1 },
+          { source: 0, target: 2 },
+        ],
+      },
+    ],
+  },
+  options: {
+    elements: {
+      point: {
+        backgroundColor: 'red',
+      },
+      edgeLine: {
+        backgroundColor: 'red',
+      },
+    },
+  },
+});
+
+const chart2 = new Chart(ctx, {
+  type: 'tree',
+  data: {
+    labels: ['A', 'B', 'C'], // node labels
+    datasets: [
+      {
+        data: [
+          // nodes as objects
+          { x: 1, y: 2 }, // x, y will be set by the force directed graph and can be omitted
+          { x: 3, y: 1, parent: 0 },
+          { x: 5, y: 3, parent: 0 },
+        ],
+      },
+    ],
+  },
+  options: {
+    elements: {
+      point: {
+        backgroundColor: 'red',
+      },
+      edgeLine: {
+        backgroundColor: 'red',
+      },
+    },
+  },
+});
+
+const chart3 = new Chart(ctx, {
+  type: 'dendogram',
+  data: {
+    labels: ['A', 'B', 'C'], // node labels
+    datasets: [
+      {
+        data: [
+          // nodes as objects
+          { x: 1, y: 2 }, // x, y will be set by the force directed graph and can be omitted
+          { x: 3, y: 1, parent: 0 },
+          { x: 5, y: 3, parent: 0 },
+        ],
+      },
+    ],
+  },
+  options: {
+    elements: {
+      point: {
+        backgroundColor: 'red',
+      },
+      edgeLine: {
+        backgroundColor: 'red',
+      },
+    },
+  },
+});

src/elements/EdgeLine.ts

@@ -199,3 +199,9 @@ export class EdgeLine extends LineElement {
     _indexable: (name: keyof IEdgeLineOptions): boolean => name !== 'borderDash',
   };
 }
+
+declare module 'chart.js' {
+  export interface ElementOptionsByType<TType extends ChartType> {
+    edgeLine: ScriptableAndArrayOptions<IEdgeLineOptions, ScriptableContext<TType>>;
+  }
+}