Skip to content
This repository was archived by the owner on Nov 25, 2021. It is now read-only.

Commit ab2991d

Browse files
dg-datavisyndg-datavisyn
authored
Merge pull request #49 from sgratzl/sgratzl/fivenum
Sgratzl/fivenum
2 parents 540adeb + 916fa8d commit ab2991d

File tree

11 files changed

+296
-56
lines changed

11 files changed

+296
-56
lines changed

‎.eslintrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ env:
44
es6: true
55
jquery: true
66
node: true
7+
jest: true
78

89
parserOptions:
910
ecmaVersion: 2018

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,21 @@ interface IArrayLinearScale {
151151
* @default 'max'
152152
*/
153153
maxStats: 'max'|'q3'|'whiskerMax';
154+
155+
/**
156+
* from the R doc: this determines how far the plot ‘whiskers’ extend out from
157+
* the box. If coef is positive, the whiskers extend to the most extreme data
158+
* point which is no more than coef times the length of the box away from the
159+
* box. A value of zero causes the whiskers to extend to the data extremes
160+
* @default 1.5
161+
*/
162+
coef: number;
163+
164+
/**
165+
* the method to compute the quantiles. 7 and 'quantiles' refers to the type-7 method as used by R 'quantiles' method. 'hinges' and 'fivenum' refers to the method used by R 'boxplot.stats' method.
166+
* @default 7
167+
*/
168+
quantiles: 7 | 'quantiles' | 'hinges' | 'fivenum' | ((sortedArr: number[]) => {min: number, q1: number, median: number, q3: number, max: number});
154169
};
155170
}
156171
```

‎.babelrc‎ renamed to ‎babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{
1+
module.exports = {
22
"presets": [
33
[
44
"@babel/preset-env",

‎jest.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
transformIgnorePatterns: []
3+
};

‎samples/fivenum.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Box Plot Chart</title>
6+
<script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
7+
<script src="../build/Chart.BoxPlot.js" type="text/javascript"></script>
8+
<style>
9+
canvas {
10+
-moz-user-select: none;
11+
-webkit-user-select: none;
12+
-ms-user-select: none;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div id="container" style="width: 75%;">
19+
<canvas id="canvas"></canvas>
20+
<canvas id="canvas2"></canvas>
21+
</div>
22+
<script>
23+
var boxplotData = {
24+
labels: ['A'],
25+
datasets: [{
26+
borderColor: 'black',
27+
data: [
28+
[18882.492, 7712.077, 5830.748, 7206.05]
29+
]
30+
}]
31+
32+
};
33+
34+
var boxplotData2 = {
35+
labels: ['A'],
36+
datasets: [{
37+
borderColor: 'black',
38+
data: [
39+
[18882.492, 7712.077, 5830.748, 7206.05]
40+
]
41+
}]
42+
43+
};
44+
45+
window.onload = function() {
46+
new Chart(document.getElementById("canvas").getContext("2d"), {
47+
type: 'boxplot',
48+
data: boxplotData,
49+
options: {
50+
responsive: true,
51+
legend: {
52+
position: 'top',
53+
},
54+
title: {
55+
display: true,
56+
text: 'Quantiles type 7'
57+
},
58+
scales: {
59+
yAxes: [{
60+
ticks: {
61+
quantiles: 'quantiles'
62+
}
63+
}]
64+
}
65+
}
66+
});
67+
68+
new Chart(document.getElementById("canvas2").getContext("2d"), {
69+
type: 'boxplot',
70+
data: boxplotData2,
71+
options: {
72+
responsive: true,
73+
legend: {
74+
position: 'top',
75+
},
76+
title: {
77+
display: true,
78+
text: 'Quantiles Fivenum'
79+
},
80+
scales: {
81+
yAxes: [{
82+
ticks: {
83+
quantiles: 'fivenum'
84+
}
85+
}]
86+
}
87+
}
88+
});
89+
};
90+
</script>
91+
</body>
92+
93+
</html>

‎src/controllers/boxplot.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ const defaults = {
1010
label(item, data) {
1111
const datasetLabel = data.datasets[item.datasetIndex].label || '';
1212
const value = data.datasets[item.datasetIndex].data[item.index];
13-
const b = asBoxPlotStats(value);
13+
const options = this._chart.getDatasetMeta(item.datasetIndex).controller._getValueScale().options.ticks;
14+
const b = asBoxPlotStats(value, options);
1415
let label = `${datasetLabel} ${typeof item.xLabel === 'string' ? item.xLabel : item.yLabel}`;
1516
if (!b) {
1617
return `${label} (NaN)`;
@@ -49,7 +50,7 @@ const boxplot = {
4950
if (!data) {
5051
return null;
5152
}
52-
const v = asBoxPlotStats(data);
53+
const v = asBoxPlotStats(data, scale.options.ticks);
5354

5455
const r = {};
5556
Object.keys(v).forEach((key) => {

‎src/controllers/violin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const controller = {
4444
_calculateViolinValuesPixels(datasetIndex, index, points) {
4545
const scale = this._getValueScale();
4646
const data = this.chart.data.datasets[datasetIndex].data[index];
47-
const violin = asViolinStats(data);
47+
const violin = asViolinStats(data, scale.options.ticks);
4848

4949
if ((!Array.isArray(data) && typeof data === 'number' && !Number.isNaN) || violin == null) {
5050
return {

0 commit comments

Comments
 (0)