New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@sgratzl/chartjs-chart-boxplot

Package Overview
Dependencies
Maintainers
1
Versions
52
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sgratzl/chartjs-chart-boxplot - npm Package Compare versions

Comparing version 2.3.2 to 3.0.0-alpha.0

build/index.d.ts
build/index.d.ts.map
build/index.esm.js
build/index.esm.js.map
build/index.js
build/index.js.map
build/index.umd.js
build/index.umd.js.map
build/index.umd.min.js
build/index.umd.min.js.map
src/__tests__/createChart.ts
src/animation.ts
src/controllers/__tests__/utils.ts
src/controllers/base.ts
src/controllers/BoxPlotController.spec.ts
src/controllers/BoxPlotController.ts
src/controllers/index.ts
src/controllers/patchController.ts
src/controllers/ViolinController.spec.ts
src/controllers/ViolinController.ts
src/data.ts
src/elements/base.ts
src/elements/BoxAndWiskers.ts
src/elements/index.ts
src/elements/Violin.ts
src/index.ts
src/index.umd.ts
src/kde.ts
src/tooltip.ts

132

package.json
{
"name": "@sgratzl/chartjs-chart-boxplot",
"description": "Chart.js module for charting boxplots and violin charts",
"version": "2.3.2",
"version": "3.0.0-alpha.0",
"publishConfig": {

@@ -9,11 +9,11 @@ "access": "public"

"author": {
"name": "datavisyn",
"email": "contact@datavisyn.io",
"url": "https://www.datavisyn.io"
"name": "Samuel Gratzl",
"email": "sam@sgratzl.com",
"url": "https://www.sgratzl.com"
},
"contributors": [
{
"name": "Samuel Gratzl",
"email": "sam@sgratzl.com",
"url": "https://www.sgratzl.com"
"name": "datavisyn",
"email": "contact@datavisyn.io",
"url": "https://www.datavisyn.io"
},

@@ -27,2 +27,11 @@ {

"license": "MIT",
"homepage": "https://github.com/sgratzl/chartjs-chart-boxplot",
"bugs": {
"url": "https://github.com/sgratzl/chartjs-chart-boxplot/issues"
},
"keywords": [
"chart.js",
"boxplot",
"violin"
],
"repository": {

@@ -32,54 +41,81 @@ "type": "git",

},
"main": "build/Chart.BoxPlot.js",
"unpkg": "build/Chart.BoxPlot.min.js",
"module": "build/Chart.BoxPlot.esm.js",
"global": "ChartBoxPlot",
"module": "build/index.esm.js",
"main": "build/index.js",
"unpkg": "build/index.umd.min.js",
"jsdelivr": "build/index.umd.min.js",
"types": "build/index.d.ts",
"sideEffects": false,
"files": [
"build",
"src/**/*.js"
"src/**/*.ts"
],
"peerDependencies": {
"chart.js": "^3.0.0-beta"
},
"browserslist": [
"Firefox ESR",
"last 2 Chrome versions",
"last 2 Firefox versions"
],
"dependencies": {
"@sgratzl/science": "^2.0.0"
"@sgratzl/boxplots": "^1.2.1"
},
"peerDependencies": {
"chart.js": "^2.8.0"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^25.3.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-prettier": "^3.1.3",
"jest": "^25.3.0",
"prettier": "^2.0.4",
"release-it": "^13.5.2",
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"@rollup/plugin-replace": "^2.3.4",
"@rollup/plugin-typescript": "^6.1.0",
"@types/jest": "^26.0.15",
"@types/jest-image-snapshot": "^4.1.3",
"@types/node": "^14.14.7",
"@typescript-eslint/eslint-plugin": "^4.7.0",
"@typescript-eslint/parser": "^4.7.0",
"@yarnpkg/pnpify": "^2.3.3",
"canvas": "^2.6.1",
"chart.js": "^3.0.0-beta.6",
"eslint": "^7.13.0",
"eslint-config-prettier": "^6.15.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"jest": "^26.6.3",
"jest-image-snapshot": "^4.2.0",
"prettier": "^2.1.2",
"release-it": "^14.2.1",
"rimraf": "^3.0.2",
"rollup": "^2.6.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-watch": "^4.3.1",
"uglify-es": "^3.3.9"
"rollup": "^2.33.1",
"rollup-plugin-cleanup": "^3.2.1",
"rollup-plugin-dts": "^1.4.13",
"rollup-plugin-terser": "^7.0.2",
"ts-jest": "^26.4.4",
"tslib": "^2.0.3",
"typedoc": "^0.19.2",
"typescript": "^4.0.5"
},
"scripts": {
"clean": "rimraf build *.tgz",
"watch": "rollup -c -w -i src/index.js",
"lint": "eslint src",
"clean": "rimraf build node_modules \"*.tgz\"",
"compile": "tsc -p tsconfig.json --noEmit",
"start": "npm run watch",
"watch": "rollup -c -w",
"build": "rollup -c",
"test": "jest --passWithNoTests",
"test:watch": "jest --watch",
"posttest": "npm run lint",
"build:dev": "rollup -c -i src/index.js",
"build:prod": "npm run build:dev && uglifyjs build/Chart.BoxPlot.js -c -m -o build/Chart.BoxPlot.min.js",
"prebuild": "npm run clean && npm test",
"build": "npm run build:prod",
"format": "prettier --write samples src package.json *.js README.md",
"preversion": "npm run test",
"prepare": "npm run build:dev",
"prepublishOnly": "npm run build:prod",
"release:major": "release-it major",
"release:minor": "release-it minor",
"release:patch": "release-it patch",
"release:pre": "release-it --preRelease=alpha --npm.tag=next"
"test:watch": "jest --passWithNoTests --watch",
"test:coverage": "jest --passWithNoTests --coverage",
"lint": "npm run eslint && npm run prettier",
"fix": "npm run eslint:fix && npm run prettier:write",
"prettier:write": "prettier */** --write",
"prettier": "prettier */** --check",
"eslint": "eslint src --ext .ts,.tsx",
"eslint:fix": "npm run eslint -- --fix",
"docs": "typedoc",
"prepare": "npm run build",
"release": "release-it --disable-metrics --npm.skipChecks",
"release:pre": "release-it --disable-metrics --npm.skipChecks --preRelease=alpha --npm.tag=next",
"release:beta": "release-it --disable-metrics --npm.skipChecks --preRelease=beta --npm.tag=next"
}
}

330

README.md
# Chart.js Box and Violin Plot
[![datavisyn][datavisyn-image]][datavisyn-url] [![License: MIT][mit-image]][mit-url] [![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]
[![License: MIT][mit-image]][mit-url] [![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]
Chart.js module for charting box and violin plots.
Chart.js module for charting box and violin plots. This is a maintained fork of [@datavisyn/chartjs-chart-box-and-violin-plot](https://github.com/datavisyn/chartjs-chart-box-and-violin-plot), which I originally developed during my time at datavisyn.
**Works only with Chart.js >= 2.8.0**
**Works only with Chart.js >= 3.0.0**

@@ -15,3 +15,3 @@ ![Box Plot](https://user-images.githubusercontent.com/4129778/42724341-9a6ec554-8770-11e8-99b5-626e34dafdb3.png)

```bash
npm install --save chart.js @sgratzl/chartjs-chart-boxplot
npm install --save chart.js@next @sgratzl/chartjs-chart-boxplot@next
```

@@ -27,193 +27,41 @@

four new types: `boxplot`, `horizontalBoxplot`, `violin`, and `horizontalViolin`.
four new types: `boxplot` and `violin`.
## Config
```typescript
/**
* Limit decimal digits by an optional config option
**/
tooltipDecimals?: number;
```
The config can be done on a per dataset `.data.datasets[0].minStats` or for all datasets under the controllers name. e.g., `.options.boxplot.datasets.minStats`.
## Styling
see https://github.com/sgratzl/chartjs-chart-boxplot/blob/develop/src/data.ts#L100-L147
The boxplot element is called `boxandwhiskers`. The basic options are from the `rectangle` element. The violin element is called `violin` also based on the `rectangle` element.
## Data structure
```typescript
interface IBaseStyling {
/**
* @default see rectangle
* @scriptable
* @indexable
*/
backgroundColor: string;
Both types support that the data is given as an array of numbers `number[]`. The statistics will be automatically computed. In addition, specific summary data structures are supported:
/**
* @default see rectangle
* @scriptable
* @indexable
*/
borderColor: string;
see https://github.com/sgratzl/chartjs-chart-boxplot/blob/develop/src/data.ts#L24-L49
/**
* @default null takes the current borderColor
* @scriptable
* @indexable
*/
medianColor: string;
## Tooltips
/**
* @default 1
* @scriptable
* @indexable
*/
borderWidth: number;
In order to simplify the customization of the tooltips the tooltip item given to the tooltip callbacks was improved. The default `toString()` behavior should be fine in most cases. The tooltip item has the following structure:
/**
* radius used to render outliers
* @default 2
* @scriptable
* @indexable
*/
outlierRadius: number;
/**
* @default see rectangle.backgroundColor
* @scriptable
* @indexable
*/
outlierColor: string;
/**
* to fill color below the median line of the box
* @default see rectangle.lowerColor
* @scriptable
* @indexable
*/
lowerColor: string;
/**
* radius used to render items
* @default 0 so disabled
* @scriptable
* @indexable
*/
itemRadius: number;
/**
* item style used to render items
* @default circle
*/
itemStyle:
| 'circle'
| 'triangle'
| 'rect'
| 'rectRounded'
| 'rectRot'
| 'cross'
| 'crossRot'
| 'star'
| 'line'
| 'dash';
/**
* background color for items
* @default see rectangle backgroundColor
* @scriptable
* @indexable
*/
itemBackgroundColor: string;
/**
* border color for items
* @default see rectangle backgroundColor
* @scriptable
* @indexable
*/
itemBorderColor: string;
/**
* padding that is added around the bounding box when computing a mouse hit
* @default 1
* @scriptable
* @indexable
*/
hitPadding: number;
/**
* hit radius for hit test of outliers
* @default 4
* @scriptable
* @indexable
*/
outlierHitRadius: number;
}
interface IBoxPlotStyling extends IBaseStyling {
// no extra styling options
}
interface IViolinStyling extends IBaseStyling {
/**
* number of sample points of the underlying KDE for creating the violin plot
* @default 100
*/
points: number;
}
```
In addition, two new scales were created `arrayLinear` and `arrayLogarithmic`. They were needed to adapt to the required data structure.
## Scale Options
Both `arrayLinear` and `arrayLogarithmic` support the two additional options to their regular counterparts:
```typescript
interface IArrayLinearScale {
ticks: {
```ts
interface ITooltipItem {
label: string; // original
value: {
raw: IBoxPlotItem | IViolinItem;
/**
* statistic measure that should be used for computing the minimal data limit
* @default 'min'
* in case an outlier is hovered this will contains its index
* @default -1
*/
minStats: 'min' | 'q1' | 'whiskerMin';
hoveredOutlierRadius: number;
/**
* statistic measure that should be used for computing the maximal data limit
* @default 'max'
* toString function with a proper default implementation, which is used implicitly
*/
maxStats: 'max' | 'q3' | 'whiskerMax';
toString(): string;
/**
* from the R doc: this determines how far the plot ‘whiskers’ extend out from
* the box. If coef is positive, the whiskers extend to the most extreme data
* point which is no more than coef times the length of the box away from the
* box. A value of zero causes the whiskers to extend to the data extremes
* @default 1.5
*/
coef: number;
min: string;
median: string;
max: string;
items?: string[];
/**
* the method to compute the quantiles.
*
* 7, 'quantiles': the type-7 method as used by R 'quantiles' method.
* 'hinges' and 'fivenum': the method used by R 'boxplot.stats' method.
* 'linear': the interpolation method 'linear' as used by 'numpy.percentile' function
* 'lower': the interpolation method 'lower' as used by 'numpy.percentile' function
* 'higher': the interpolation method 'higher' as used by 'numpy.percentile' function
* 'nearest': the interpolation method 'nearest' as used by 'numpy.percentile' function
* 'midpoint': the interpolation method 'midpoint' as used by 'numpy.percentile' function
* @default 7
*/
quantiles:
| 7
| 'quantiles'
| 'hinges'
| 'fivenum'
| 'linear'
| 'lower'
| 'higher'
| 'nearest'
| 'midpoint'
| ((sortedArr: number[]) => { min: number; q1: number; median: number; q3: number; max: number });
//... the formatted version of different attributes IBoxPlotItem or ViolinItem
};

@@ -223,101 +71,59 @@ }

## Data structure
### ESM and Tree Shaking
Both types support that the data is given as an array of numbers `number[]`. The statistics will be automatically computed. In addition, specific summary data structures are supported:
The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.
```typescript
interface IBaseItem {
min: number;
median: number;
max: number;
/**
* values of the raw items used for rendering jittered background points
*/
items?: number[];
}
Variant A:
interface IBoxPlotItem extends IBaseItem {
q1: number;
q3: number;
whiskerMin?: number;
whiskerMax?: number;
/**
* list of box plot outlier values
*/
outliers?: number[];
}
```js
import Chart from 'chart.js';
import { BoxPlotController } from '@sgratzl/chartjs-chart-boxplot';
interface IKDESamplePoint {
/**
* sample value
*/
v: number;
/**
* sample estimation
*/
estimate: number;
}
// register controller in chart.js and ensure the defaults are set
BoxPlotController.register();
...
interface IViolinItem extends IBaseItem {
/**
* samples of the underlying KDE
*/
coords: IKDESamplePoint[];
}
new Chart(ctx, {
type: BoxPlotController.id,
data: [...],
});
```
**Note**: The statistics will be cached within the array. Thus, if you manipulate the array content without creating a new instance the changes won't be reflected in the stats. See also [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/JxQVaZ?editors=0010) for a comparison.
Variant B:
## Tooltips
```js
import { BoxPlotChart } from '@sgratzl/chartjs-chart-boxplot';
In order to simplify the customization of the tooltips, two additional tooltip callback methods are available. Internally the `label` callback will call the correspondig callback depending on the type.
new BoxPlotChart(ctx, {
data: [...],
});
```
```js
arr = {
options: {
tooltips: {
callbacks: {
/**
* custom callback for boxplot tooltips
* @param item see label callback
* @param data see label callback
* @param stats {IBoxPlotItem} the stats of the hovered element
* @param hoveredOutlierIndex {number} the hovered outlier index or -1 if none
* @return {string} see label callback
*/
boxplotLabel: function (item, data, stats, hoveredOutlierIndex) {
return 'Custom tooltip';
},
/**
* custom callback for violin tooltips
* @param item see label callback
* @param data see label callback
* @param stats {IViolinItem} the stats of the hovered element
* @return {string} see label callback
*/
violinLabel: function (item, data, stats) {
return 'Custom tooltip';
},
},
},
},
};
## Development Environment
```sh
npm i -g yarn
yarn set version 2
cat .yarnrc_patch.yml >> .yarnrc.yml
yarn
yarn pnpify --sdk
```
## Building
### Common commands
```sh
npm install
npm run build
yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
yarn release
yarn release:pre
```
---
## Credits
<div style="display:flex;align-items:center">
<a href="https://www.datavisyn.io"><img src="https://user-images.githubusercontent.com/1711080/37700685-bcbb18c6-2cec-11e8-9b6f-f49c9ef6c167.png" align="left" width="50px" hspace="10" vspace="6"></a>
Developed by&nbsp;<strong><a href="https://www.datavisyn.io">datavisyn</a></strong>.
</div>
Original credits belong to [@datavisyn](https://www.datavisyn.io).
[datavisyn-image]: https://img.shields.io/badge/datavisyn-io-black.svg
[datavisyn-url]: https://www.datavisyn.io
[mit-image]: https://img.shields.io/badge/License-MIT-yellow.svg

@@ -327,4 +133,4 @@ [mit-url]: https://opensource.org/licenses/MIT

[npm-url]: https://npmjs.org/package/@sgratzl/chartjs-chart-boxplot
[github-actions-image]: https://github.com/sgratzl/chartjs-chart-box-and-violin-plot/workflows/ci/badge.svg
[github-actions-url]: https://github.com/sgratzl/chartjs-chart-box-and-violin-plot/actions
[github-actions-image]: https://github.com/sgratzl/chartjs-chart-boxplot/workflows/ci/badge.svg
[github-actions-url]: https://github.com/sgratzl/chartjs-chart-boxplot/actions
[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen
build/Chart.BoxPlot.esm.js
build/Chart.BoxPlot.js
build/Chart.BoxPlot.min.js
src/controllers/base.js
src/controllers/boxplot.js
src/controllers/violin.js
src/data.js
src/data.spec.js
src/elements/base.js
src/elements/boxandwhiskers.js
src/elements/violin.js
src/index.js
src/scale/arrayLinear.js
src/scale/arrayLogarithmic.js
src/tooltip.js
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc