Skip to content

Commit c8ce80d

Browse files
sgratzlsgratzl
committed
fix item rendering
1 parent 01ec4e2 commit c8ce80d

File tree

3 files changed

+133
-2
lines changed

3 files changed

+133
-2
lines changed

‎samples/items.html

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Box Plot Chart</title>
5+
<script src="https://unpkg.com/chart.js@3.0.0-alpha/dist/Chart.js"></script>
6+
<script src="../build/Chart.BoxPlot.js" type="text/javascript"></script>
7+
<script src="https://unpkg.com/d3-random@latest/dist/d3-random.js"></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+
<button id="randomizeData">Randomize Data</button>
23+
<button id="addDataset">Add Dataset</button>
24+
<button id="removeDataset">Remove Dataset</button>
25+
<button id="addData">Add Data</button>
26+
<button id="removeData">Remove Data</button>
27+
<script>
28+
const samples = this.Samples.utils;
29+
var color = Chart.helpers.color;
30+
var b = d3.randomNormal();
31+
var random = (min, max) => () => b() * ((max || 1) - (min || 0)) + (min || 0);
32+
var boxplotData = {
33+
labels: samples.months({ count: 7 }),
34+
datasets: [
35+
{
36+
label: 'Dataset 1',
37+
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
38+
borderColor: window.chartColors.red,
39+
borderWidth: 1,
40+
itemRadius: 2,
41+
data: samples.boxplots({ count: 7, random: random }),
42+
outlierColor: '#999999',
43+
},
44+
{
45+
label: 'Dataset 2',
46+
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
47+
borderColor: window.chartColors.blue,
48+
borderWidth: 1,
49+
itemRadius: 2,
50+
data: samples.boxplotsArray({ count: 7, random: random }),
51+
outlierColor: '#999999',
52+
lowerColor: '#461e7d',
53+
},
54+
],
55+
};
56+
57+
window.onload = function () {
58+
var ctx = document.getElementById('canvas').getContext('2d');
59+
window.myBar = new Chart(ctx, {
60+
type: 'boxplot',
61+
data: boxplotData,
62+
options: {
63+
responsive: true,
64+
legend: {
65+
position: 'top',
66+
},
67+
title: {
68+
display: true,
69+
text: 'Chart.js Box Plot Chart',
70+
},
71+
},
72+
});
73+
};
74+
75+
document.getElementById('randomizeData').addEventListener('click', function () {
76+
boxplotData.datasets.forEach(function (dataset) {
77+
dataset.data = samples.boxplots({ count: 7 });
78+
});
79+
window.myBar.update();
80+
});
81+
82+
var colorNames = Object.keys(window.chartColors);
83+
document.getElementById('addDataset').addEventListener('click', function () {
84+
var colorName = colorNames[boxplotData.datasets.length % colorNames.length];
85+
var dsColor = window.chartColors[colorName];
86+
var newDataset = {
87+
label: 'Dataset ' + boxplotData.datasets.length,
88+
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
89+
borderColor: dsColor,
90+
borderWidth: 1,
91+
data: samples.boxplots({ count: boxplotData.labels.length }),
92+
};
93+
94+
boxplotData.datasets.push(newDataset);
95+
window.myBar.update();
96+
});
97+
98+
document.getElementById('addData').addEventListener('click', function () {
99+
if (boxplotData.datasets.length > 0) {
100+
var month = samples.nextMonth(boxplotData.labels.length);
101+
boxplotData.labels.push(month);
102+
103+
for (var index = 0; index < boxplotData.datasets.length; ++index) {
104+
//window.myBar.addData(randomBoxPlot(), index);
105+
boxplotData.datasets[index].data.push(samples.randomBoxPlot());
106+
}
107+
108+
window.myBar.update();
109+
}
110+
});
111+
112+
document.getElementById('removeDataset').addEventListener('click', function () {
113+
boxplotData.datasets.splice(0, 1);
114+
window.myBar.update();
115+
});
116+
117+
document.getElementById('removeData').addEventListener('click', function () {
118+
boxplotData.labels.splice(-1, 1); // remove the label first
119+
120+
boxplotData.datasets.forEach(function (dataset, datasetIndex) {
121+
dataset.data.pop();
122+
});
123+
124+
window.myBar.update();
125+
});
126+
</script>
127+
</body>
128+
</html>

‎src/controllers/base.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ export class StatsBase extends controllers.bar {
127127
const parsed = this.getParsed(index);
128128
const base = scale.getBasePixel();
129129
properties._datasetIndex = this.index;
130+
properties._index = index;
130131
this._transformStats(properties, parsed, (v) => (reset ? base : scale.getPixelForValue(v)), mode);
131132
super.updateElement(rectangle, index, properties, mode);
132133
}

‎src/data.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ export function boxplotStats(arr, options) {
179179
};
180180
}
181181

182-
arr = arr.filter((v) => typeof v === 'number' && !isNaN(v));
182+
arr = arr.filter((v) => typeof v === 'number' && !Number.isNaN(v));
183183
arr.sort((a, b) => a - b);
184184

185185
const { quantiles, coef } = determineStatsOptions(options);
@@ -189,6 +189,7 @@ export function boxplotStats(arr, options) {
189189
stats.outliers = arr.filter((v) => v < whiskerMin || v > whiskerMax);
190190
stats.whiskerMin = whiskerMin;
191191
stats.whiskerMax = whiskerMax;
192+
stats.items = arr;
192193
return stats;
193194
}
194195

@@ -197,7 +198,7 @@ export function violinStats(arr, options) {
197198
if (arr.length === 0) {
198199
return {};
199200
}
200-
arr = arr.filter((v) => typeof v === 'number' && !isNaN(v));
201+
arr = arr.filter((v) => typeof v === 'number' && !Number.isNaN(v));
201202
arr.sort((a, b) => a - b);
202203

203204
const { quantiles } = determineStatsOptions(options);
@@ -214,6 +215,7 @@ export function violinStats(arr, options) {
214215
if (samples[samples.length - 1] !== stats.max) {
215216
samples.push(stats.max);
216217
}
218+
stats.items = arr;
217219
stats.coords = kdeGen(samples).map((v) => ({ v: v[0], estimate: v[1] }));
218220
stats.maxEstimate = stats.coords.reduce((a, d) => Math.max(a, d.estimate), Number.NEGATIVE_INFINITY);
219221

0 commit comments

Comments
 (0)