Merge pull request #34 from sgratzl/release/v3.8.0

Release v3.8.0
sgratzl · Jun 11, 2022 · ae1b61c · ae1b61c
2 parents df94c46 + 3142440
commit ae1b61c
Show file tree

Hide file tree

Showing 31 changed files with 2,356 additions and 2,253 deletions.
diff --git a/.yarn/releases/yarn-3.2.0.cjs b/.yarn/releases/yarn-3.2.0.cjs
diff --git a/.yarn/releases/yarn-3.2.1.cjs b/.yarn/releases/yarn-3.2.1.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -3,4 +3,4 @@ packageExtensions:
     dependencies:
       eslint-import-resolver-node: "*"
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.1.cjs
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]
 
-Chart.js module for charting graphs. Adding new chart types: `graph`, `forceDirectedGraph`, `dendogram`, and `tree`.
+Chart.js module for charting graphs. Adding new chart types: `graph`, `forceDirectedGraph`, `dendrogram`, and `tree`.
 
 ![force](https://user-images.githubusercontent.com/4129778/65398353-9bc03f80-dd84-11e9-8f14-339635c1ba4e.png)
 
@@ -101,25 +101,25 @@ Computes the x,y position of nodes based on a force simulation. It is based on h
 
 ### Options
 
-## Dendogram, Tree
+## Dendrogram, Tree
 
-chart types: `dendogram`, `tree`
+chart types: `dendrogram`, `tree`
 
-The tree and dendograms layouts are based on https://github.com/d3/d3-hierarchy.
+The tree and dendrograms layouts are based on https://github.com/d3/d3-hierarchy.
 
-**Dendogram Horizontal**
+**Dendrogram Horizontal**
 
 ![dend_h](https://user-images.githubusercontent.com/4129778/65398352-9bc03f80-dd84-11e9-9197-ecb66a872736.png)
 
 [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/jObedwg)
 
-**Dendogram Vertical**
+**Dendrogram Vertical**
 
 ![dend_v](https://user-images.githubusercontent.com/4129778/65398355-9bc03f80-dd84-11e9-9ea3-9501a79491fb.png)
 
 [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/jObedwg)
 
-**Dendogram Radial**
+**Dendrogram Radial**
 
 ![radial](https://user-images.githubusercontent.com/4129778/65398460-581a0580-dd85-11e9-93b6-b70946f1155f.png)
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "chartjs-chart-graph",
   "description": "Chart.js module for charting error bars",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "author": {
     "name": "Samuel Gratzl",
     "email": "sam@sgratzl.com",
@@ -35,7 +35,7 @@
     "src/**/*.ts"
   ],
   "peerDependencies": {
-    "chart.js": "^3.7.1"
+    "chart.js": "^3.8.0"
   },
   "browserslist": [
     "Firefox ESR",
@@ -51,42 +51,42 @@
   "devDependencies": {
     "@chiogen/rollup-plugin-terser": "^7.0.2",
     "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/plugin-typescript": "^8.3.2",
-    "@types/jest": "^27.4.1",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@types/jest": "^28.1.1",
     "@types/jest-image-snapshot": "^4.3.1",
-    "@types/node": "^17.0.31",
+    "@types/node": "^17.0.42",
     "@types/seedrandom": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.21.0",
-    "@yarnpkg/sdks": "^2.6.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
+    "@yarnpkg/sdks": "^2.6.2",
     "canvas": "^2.9.1",
     "canvas-5-polyfill": "^0.1.5",
-    "chart.js": "^3.7.1",
-    "eslint": "^8.14.0",
+    "chart.js": "^3.8.0",
+    "eslint": "^8.17.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "jest": "^27.5.1",
-    "jest-environment-jsdom": "^27.5.1",
-    "jest-image-snapshot": "^4.5.1",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
+    "jest-image-snapshot": "^5.1.0",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.71.1",
+    "rollup": "~2.75.6",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-dts": "^4.2.1",
+    "rollup-plugin-dts": "^4.2.2",
     "seedrandom": "^3.0.5",
-    "ts-jest": "^27.1.4",
+    "ts-jest": "^28.0.4",
     "tslib": "^2.4.0",
-    "typedoc": "^0.22.15",
-    "typescript": "^4.6.4"
+    "typedoc": "^0.22.17",
+    "typescript": "^4.7.3"
   },
   "scripts": {
     "clean": "rimraf build docs node_modules \"*.tgz\" \"*.tsbuildinfo\"",
@@ -108,5 +108,5 @@
     "docs": "typedoc src/index.ts",
     "prepare": "yarn run build"
   },
-  "packageManager": "yarn@3.2.0"
+  "packageManager": "yarn@3.2.1"
 }
diff --git a/samples/default_esm.html b/samples/default_esm.html
@@ -11,8 +11,8 @@
     <script type="importmap-shim">
       {
         "imports": {
-          "chart.js": "https://unpkg.com/chart.js@3.7.1?module",
-          "chart.js/helpers": "https://unpkg.com/chart.js@3.7.1/helpers/helpers.esm.js?module",
+          "chart.js": "https://unpkg.com/chart.js@3.8.0?module",
+          "chart.js/helpers": "https://unpkg.com/chart.js@3.8.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"

diff --git a/samples/directed.html b/samples/directed.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.7.1/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.8.0/dist/chart.js"></script>
     <script src="../build/index.umd.js"></script>
   </head>
 
   <body>
     <div style="width: 75%">
       <canvas id="canvas"></canvas>
-      <select id="mode" value="dendogram">
-        <option>dendogram</option>
+      <select id="mode" value="dendrogram">
+        <option>dendrogram</option>
         <option>tree</option>
       </select>
       <select id="orientation" value="horizontal">
@@ -23,7 +23,7 @@
         .then((r) => r.json())
         .then((nodes) => {
           const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
-            type: 'dendogram',
+            type: 'dendrogram',
             data: {
               labels: nodes.map((d) => d.name),
               datasets: [

diff --git a/samples/forceDirectedGraph.html b/samples/forceDirectedGraph.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.7.1/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.8.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>

diff --git a/samples/graphChange.html b/samples/graphChange.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.7.1/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.8.0/dist/chart.js"></script>
     <script src="../build/index.umd.js"></script>
   </head>
 

diff --git a/samples/multi.html b/samples/multi.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.7.1/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.8.0/dist/chart.js"></script>
     <script src="../build/index.umd.js"></script>
     <style>
       body {
@@ -54,8 +54,8 @@
         .then((r) => r.json())
         .then((nodes) => {
           createChart(nodes, 'dh', 'tree', 'horizontal');
-          createChart(nodes, 'dv', 'dendogram', 'vertical');
-          createChart(nodes, 'dr', 'dendogram', 'radial');
+          createChart(nodes, 'dv', 'dendrogram', 'vertical');
+          createChart(nodes, 'dr', 'dendrogram', 'radial');
           createChart(nodes, 'th', 'tree', 'horizontal');
           createChart(nodes, 'tv', 'tree', 'vertical');
           createChart(nodes, 'tr', 'tree', 'radial');

diff --git a/samples/radial.html b/samples/radial.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.7.1/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.8.0/dist/chart.js"></script>
     <script src="../build/index.umd.js"></script>
   </head>
 
@@ -14,7 +14,7 @@
         .then((r) => r.json())
         .then((nodes) => {
           const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
-            type: 'dendogram',
+            type: 'dendrogram',
             data: {
               labels: nodes.map((d) => d.name),
               datasets: [

diff --git a/samples/radiallabel.html b/samples/radiallabel.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.7.1/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.8.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>
@@ -17,7 +17,7 @@
         .then((r) => r.json())
         .then((nodes) => {
           const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
-            type: 'dendogram',
+            type: 'dendrogram',
             data: {
               labels: nodes.map((d) => d.name),
               datasets: [

diff --git a/samples/tree.html b/samples/tree.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.7.1/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.8.0/dist/chart.js"></script>
     <script src="../build/index.umd.js"></script>
   </head>
 
   <body>
     <div style="width: 75%">
       <canvas id="canvas"></canvas>
-      <select id="mode" value="dendogram">
-        <option>dendogram</option>
+      <select id="mode" value="dendrogram">
+        <option>dendrogram</option>
         <option>tree</option>
       </select>
       <select id="orientation" value="horizontal">
@@ -23,7 +23,7 @@
         .then((r) => r.json())
         .then((nodes) => {
           const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
-            type: 'dendogram',
+            type: 'dendrogram',
             data: {
               labels: nodes.map((d) => d.name),
               datasets: [

diff --git a/samples/treelabel.html b/samples/treelabel.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/chart.js@3.7.1/dist/chart.js"></script>
+    <script src="https://unpkg.com/chart.js@3.8.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>
@@ -11,8 +11,8 @@
   <body>
     <div style="width: 75%">
       <canvas id="canvas"></canvas>
-      <select id="mode" value="dendogram">
-        <option>dendogram</option>
+      <select id="mode" value="dendrogram">
+        <option>dendrogram</option>
         <option>tree</option>
       </select>
       <select id="orientation" value="horizontal">

diff --git a/samples/type_test.ts b/samples/type_test.ts
@@ -66,7 +66,7 @@ const chart2 = new Chart(ctx, {
 });
 
 const chart3 = new Chart(ctx, {
-  type: 'dendogram',
+  type: 'dendrogram',
   data: {
     labels: ['A', 'B', 'C'], // node labels
     datasets: [

diff --git a/src/controllers/DendogramController.spec.ts → src/controllers/DendrogramController.spec.ts b/src/controllers/DendogramController.spec.ts → src/controllers/DendrogramController.spec.ts
@@ -1,18 +1,18 @@
 import { registry, PointElement, LinearScale } from 'chart.js';
 import createChart from '../__tests__/createChart';
-import { DendogramController } from './DendogramController';
+import { DendrogramController } from './DendrogramController';
 import nodes from './__tests__/tree';
 import { EdgeLine } from '../elements';
 
-describe('dendogram', () => {
+describe('dendrogram', () => {
   beforeAll(() => {
-    registry.addControllers(DendogramController);
+    registry.addControllers(DendrogramController);
     registry.addElements(EdgeLine, PointElement);
     registry.addScales(LinearScale);
   });
   test('default', () => {
     return createChart({
-      type: DendogramController.id as 'dendogram',
+      type: DendrogramController.id as 'dendrogram',
       data: {
         labels: nodes.map((d) => d.name),
         datasets: [
@@ -28,7 +28,7 @@ describe('dendogram', () => {
   });
   test('vertical', () => {
     return createChart({
-      type: DendogramController.id as 'dendogram',
+      type: DendrogramController.id as 'dendrogram',
       data: {
         labels: nodes.map((d) => d.name),
         datasets: [
@@ -47,7 +47,7 @@ describe('dendogram', () => {
   });
   test('radial', () => {
     return createChart({
-      type: DendogramController.id as 'dendogram',
+      type: DendrogramController.id as 'dendrogram',
       data: {
         labels: nodes.map((d) => d.name),
         datasets: [
@@ -67,7 +67,7 @@ describe('dendogram', () => {
 
   test('default tree', () => {
     return createChart({
-      type: DendogramController.id as 'dendogram',
+      type: DendrogramController.id as 'dendrogram',
       data: {
         labels: nodes.map((d) => d.name),
         datasets: [
@@ -86,7 +86,7 @@ describe('dendogram', () => {
   });
   test('vertical tree', () => {
     return createChart({
-      type: DendogramController.id as 'dendogram',
+      type: DendrogramController.id as 'dendrogram',
       data: {
         labels: nodes.map((d) => d.name),
         datasets: [
@@ -106,7 +106,7 @@ describe('dendogram', () => {
   });
   test('radial tree', () => {
     return createChart({
-      type: DendogramController.id as 'dendogram',
+      type: DendrogramController.id as 'dendrogram',
       data: {
         labels: nodes.map((d) => d.name),
         datasets: [
@@ -126,7 +126,7 @@ describe('dendogram', () => {
   });
   test('directed', () => {
     return createChart({
-      type: DendogramController.id as 'dendogram',
+      type: DendrogramController.id as 'dendrogram',
       data: {
         labels: nodes.map((d) => d.name),
         datasets: [