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

Commit 1468051

Browse files
dg-datavisyndg-datavisyn
authored
Merge pull request #45 from sgratzl/sgratzl/items
Sgratzl/items
2 parents ab2991d + 4bb5b14 commit 1468051

File tree

8 files changed

+893
-278
lines changed

8 files changed

+893
-278
lines changed

‎package-lock.json‎

Lines changed: 710 additions & 266 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@
33
"description": "Chart.js module for charting boxplots",
44
"version": "2.1.0",
55
"author": {
6-
"name": "Samuel Gratzl",
7-
"email": "samuel.gratzl@datavisyn.io",
8-
"url": "http://datavisyn.io"
6+
"name": "datavisyn",
7+
"email": "contact@datavisyn.io",
8+
"url": "https://www.datavisyn.io"
99
},
1010
"contributors": [
11+
{
12+
"name": "Samuel Gratzl",
13+
"email": "[email protected]",
14+
"url": "https://www.sgratzl.com"
15+
},
1116
{
1217
"name": "Stefan Luger",
1318
"email": "[email protected]",

‎rollup.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default [{
2020
]
2121
}, {
2222
output: {
23-
file: 'build/Chart.BoxPlot.ems.js',
23+
file: 'build/Chart.BoxPlot.esm.js',
2424
name: 'ChartBoxPlot',
2525
format: 'esm',
2626
globals: {

‎samples/datastructures.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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+
<script src="https://unpkg.com/d3-random@latest/dist/d3-random.js"></script>
9+
<script src="./utils.js"></script>
10+
<style>
11+
canvas {
12+
-moz-user-select: none;
13+
-webkit-user-select: none;
14+
-ms-user-select: none;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<div id="container" style="width: 75%;">
21+
<canvas id="canvas"></canvas>
22+
</div>
23+
<script>
24+
25+
const boxplotData = {
26+
// define label tree
27+
labels: ['array', '{boxplot values}', 'with items', 'as outliers'],
28+
datasets: [{
29+
label: 'Dataset 1',
30+
backgroundColor: 'rgba(255,0,0,0.2)',
31+
borderColor: 'red',
32+
borderWidth: 1,
33+
outlierColor: '#999999',
34+
padding: 10,
35+
itemRadius: 2,
36+
itemStyle: 'circle',
37+
itemBackgroundColor: '#000',
38+
outlierColor: '#000',
39+
data: [
40+
[1, 2, 3, 4, 5], {
41+
min: 1,
42+
q1: 2,
43+
median: 3,
44+
q3: 4,
45+
max: 5
46+
}, {
47+
min: 1,
48+
q1: 2,
49+
median: 3,
50+
q3: 4,
51+
max: 5,
52+
items: [1, 2, 3, 4, 5]
53+
},
54+
{
55+
min: 1,
56+
q1: 2,
57+
median: 3,
58+
q3: 4,
59+
max: 5,
60+
outliers: [1, 2, 3, 4, 5]
61+
},
62+
]
63+
}]
64+
};
65+
66+
window.onload = function() {
67+
var ctx = document.getElementById("canvas").getContext("2d");
68+
window.myBar = new Chart(ctx, {
69+
type: 'boxplot',
70+
data: boxplotData,
71+
options: {
72+
responsive: true,
73+
title: {
74+
display: true,
75+
text: 'Chart.js Box Plot Chart'
76+
}
77+
}
78+
});
79+
80+
};
81+
</script>
82+
</body>
83+
84+
</html>

‎samples/hybrid.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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+
<script src="./utils.js"></script>
9+
<style>
10+
canvas {
11+
-moz-user-select: none;
12+
-webkit-user-select: none;
13+
-ms-user-select: none;
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<div id="container" style="width: 75%;">
20+
<canvas id="canvas"></canvas>
21+
</div>
22+
<script>
23+
const samples = this.Samples.utils;
24+
var data = {
25+
labels: samples.months({count: 7}),
26+
datasets: [{
27+
label: 'Box',
28+
type: 'boxplot',
29+
backgroundColor: 'steelblue',
30+
data: samples.boxplots({count: 7})
31+
}, {
32+
label: 'Bar',
33+
type: 'bar',
34+
backgroundColor: 'red',
35+
data: samples.numbers({count: 7, max: 150})
36+
}, {
37+
label: 'Line',
38+
type: 'line',
39+
data: samples.numbers({count: 7, max: 150}).map((d) => ({y: d}))
40+
}]
41+
};
42+
43+
window.onload = function() {
44+
var ctx = document.getElementById("canvas").getContext("2d");
45+
window.myBar = new Chart(ctx, {
46+
type: 'boxplot',
47+
data: data,
48+
options: {
49+
responsive: true,
50+
legend: {
51+
position: 'top',
52+
},
53+
title: {
54+
display: true,
55+
text: 'Chart.js Box Plot and Line Chart'
56+
},
57+
scales: {
58+
yAxes: [{
59+
type: 'arrayLinear'
60+
}]
61+
}
62+
}
63+
});
64+
};
65+
</script>
66+
</body>
67+
68+
</html>

‎src/controllers/base.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ const array = {
5757

5858
if (Array.isArray(data)) {
5959
r.items = data.map((d) => scale.getPixelForValue(Number(d)));
60+
} else if (container.items) {
61+
r.items = container.items.map((d) => scale.getPixelForValue(Number(d)));
6062
}
6163
}
6264
};

‎src/controllers/boxplot.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const boxplot = {
5454

5555
const r = {};
5656
Object.keys(v).forEach((key) => {
57-
if (key !== 'outliers') {
57+
if (key !== 'outliers' && key !== 'items') {
5858
r[key] = scale.getPixelForValue(Number(v[key]));
5959
}
6060
});

‎src/data.js‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -234,20 +234,32 @@ export function commonDataLimits(extraCallback) {
234234
return;
235235
}
236236
d.data.forEach((value, j) => {
237-
if (!value || meta.data[j].hidden) {
237+
if (value == null || meta.data[j].hidden) {
238238
return;
239239
}
240+
240241
const stats = asValueStats(value, minStats, maxStats, this.options.ticks);
241-
if (!stats) {
242-
return;
242+
let minValue;
243+
let maxValue;
244+
245+
if (stats) {
246+
minValue = stats[minStats];
247+
maxValue = stats[maxStats];
248+
} else {
249+
// if stats are not available use the plain value
250+
const parsed = +this.getRightValue(value);
251+
if (isNaN(parsed)) {
252+
return;
253+
}
254+
minValue = maxValue = parsed;
243255
}
244256

245-
if (this.min === null || stats[minStats] < this.min) {
246-
this.min = stats[minStats];
257+
if (this.min === null || minValue < this.min) {
258+
this.min = minValue;
247259
}
248260

249-
if (this.max === null || stats[maxStats] > this.max) {
250-
this.max = stats[maxStats];
261+
if (this.max === null || maxValue > this.max) {
262+
this.max = maxValue;
251263
}
252264

253265
if (extraCallback) {

0 commit comments

Comments
 (0)