Merge pull request #18 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',
   ],

.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

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sgratzl/chartjs-chart-boxplot",
   "description": "Chart.js module for charting boxplots and violin charts",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "publishConfig": {
     "access": "public"
   },
@@ -50,52 +50,52 @@
     "src/**/*.tsx"
   ],
   "peerDependencies": {
-    "chart.js": "^3.6.0"
+    "chart.js": "^3.7.0"
   },
   "browserslist": [
     "Firefox ESR",
     "last 2 Chrome versions",
     "last 2 Firefox versions"
   ],
   "dependencies": {
-    "@sgratzl/boxplots": "^1.2.2"
+    "@sgratzl/boxplots": "^1.3.0"
   },
   "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",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
+    "@types/node": "^17.0.16",
+    "@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",
-    "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\"",
@@ -116,9 +116,9 @@
     "prepare": "yarn run build"
   },
   "dependenciesMeta": {
-    "chart.js@3.6.0": {
+    "chart.js@3.7.0": {
       "unplugged": true
     }
   },
-  "packageManager": "[email protected].0"
+  "packageManager": "[email protected].1"
 }

samples/animation.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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/datalimits.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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>
     <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
     <script src="./utils.js"></script>

samples/datastructures.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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>
     <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
     <script src="./utils.js"></script>

samples/default.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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>
     <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
     <script src="./utils.js"></script>

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",
           "@sgratzl/boxplots": "https://unpkg.com/@sgratzl/boxplots?module",
           "@sgratzl/chartjs-chart-boxplot": "../build/index.js"
         }

samples/empty.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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/fivenum.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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/horizontalBoxplot.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Horizontal Bar Chart</title>
-    <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>
     <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
     <script src="./utils.js"></script>

samples/horizontalViolin.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Violin Chart</title>
-    <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>
     <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
     <script src="./utils.js"></script>

samples/hybrid.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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>
     <script src="./utils.js"></script>
   </head>

samples/items.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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>
     <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
     <script src="./utils.js"></script>

samples/large_numbers.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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>
     <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
     <script src="./utils.js"></script>

samples/logarithm.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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>
     <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
     <script src="./utils.js"></script>

samples/mediancolor.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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/minmax.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Box Plot Chart</title>
-    <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>
     <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
     <script src="./utils.js"></script>

samples/utils.js

@@ -104,7 +104,7 @@ window.chartColors = {
       const count = (config || {}).count || 8;
       const data = [];
       for (let i = 0; i < count; ++i) {
-        data.push(this.numbers({ ...config, count: 50 }));
+        data.push(this.numbers({ ...config, count: config.points || 50 }));
       }
       return data;
     },

samples/violin.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Violin Chart</title>
-    <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>
     <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
     <script src="./utils.js"></script>
@@ -25,14 +25,14 @@
             backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
             borderColor: window.chartColors.red,
             borderWidth: 1,
-            data: samples.boxplotsArray({ count: 7, random: random }),
+            data: samples.boxplotsArray({ count: 7, random: random, points: 200 }),
           },
           {
             label: 'Dataset 2',
             backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
             borderColor: window.chartColors.blue,
             borderWidth: 1,
-            data: samples.boxplotsArray({ count: 7, random: random }),
+            data: samples.boxplotsArray({ count: 7, random: random, points: 1000 }),
           },
         ],
       };

src/controllers/StatsBase.ts

@@ -46,7 +46,7 @@ export /* #__PURE__ */ function baseDefaults(keys: string[]): Record<string, unk
 export function defaultOverrides(): Record<string, unknown> {
   return {
     plugins: {
-      tooltips: {
+      tooltip: {
         position: outlierPositioner.register().id,
         callbacks: {
           beforeLabel: patchInHoveredOutlier,

src/data.ts

@@ -8,7 +8,6 @@ import boxplots, {
   quantilesNearest,
   quantilesType7,
 } from '@sgratzl/boxplots';
-import kde from './kde';
 
 export {
   quantilesFivenum,
@@ -196,40 +195,40 @@ export function boxplotStats(arr: readonly number[] | Float32Array | Float64Arra
   };
 }
 
-export function violinStats(arr: readonly number[], options: IViolinOptions): IViolin | undefined {
-  // console.assert(Array.isArray(arr));
-  if (arr.length === 0) {
-    return undefined;
-  }
-  const items = arr.filter((v) => typeof v === 'number' && !Number.isNaN(v)).sort((a, b) => a - b);
-
-  const mean = items.reduce((acc, v) => acc + v, 0) / items.length;
-
-  const { quantiles } = determineStatsOptions(options);
-
-  const stats = quantiles(items);
-  const min = items[0];
-  const max = items[items.length - 1];
-
+function computeSamples(min: number, max: number, points: number) {
   // generate coordinates
   const range = max - min;
-  const samples = [];
-  const inc = range / options.points;
+  const samples: number[] = [];
+  const inc = range / points;
   for (let v = min; v <= max && inc > 0; v += inc) {
     samples.push(v);
   }
   if (samples[samples.length - 1] !== max) {
     samples.push(max);
   }
-  const coords = kde(items, samples, quantiles);
+  return samples;
+}
+
+export function violinStats(arr: readonly number[], options: IViolinOptions): IViolin | undefined {
+  // console.assert(Array.isArray(arr));
+  if (arr.length === 0) {
+    return undefined;
+  }
+  const stats = boxplots(arr, determineStatsOptions(options));
+
+  // generate coordinates
+  const samples = computeSamples(stats.min, stats.max, options.points);
+  const coords = samples.map((v) => ({ v, estimate: stats.kde(v) }));
   const maxEstimate = coords.reduce((a, d) => Math.max(a, d.estimate), Number.NEGATIVE_INFINITY);
 
   return {
-    ...stats,
-    min,
-    items,
-    mean,
-    max,
+    max: stats.max,
+    min: stats.min,
+    mean: stats.mean,
+    median: stats.median,
+    q1: stats.q1,
+    q3: stats.q3,
+    items: Array.from(stats.items),
     coords,
     outliers: [], // items.filter((d) => d < stats.q1 || d > stats.q3),
     maxEstimate,