Skip to content

Commit 5430675

Browse files
sgratzlsgratzl
committed
feat: upgrade examples
1 parent a487342 commit 5430675

19 files changed

+300
-573
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@ new BoxPlotChart(ctx, {
102102
npm i -g yarn
103103
yarn set version 2
104104
cat .yarnrc_patch.yml >> .yarnrc.yml
105-
yarn
106-
yarn pnpify --sdk
105+
yarn install
106+
yarn pnpify --sdk vscode
107107
```
108108

109109
### Common commands

‎samples/animation.html

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,6 @@
44
<title>Box Plot Chart</title>
55
<script src="https://unpkg.com/chart.js@3.0.0-rc/dist/chart.js"></script>
66
<script src="../build/index.umd.js"></script>
7-
<style>
8-
canvas {
9-
-moz-user-select: none;
10-
-webkit-user-select: none;
11-
-ms-user-select: none;
12-
}
13-
</style>
147
</head>
158

169
<body>
@@ -37,9 +30,9 @@
3730
],
3831
};
3932

40-
window.onload = function () {
41-
var ctx = document.getElementById('canvas').getContext('2d');
42-
window.myBar = new Chart(ctx, {
33+
window.onload = () => {
34+
const ctx = document.getElementById('canvas').getContext('2d');
35+
const myBar = new Chart(ctx, {
4336
type: 'boxplot',
4437
data: boxplotData,
4538
options: {
@@ -53,13 +46,12 @@
5346
},
5447
},
5548
});
49+
setTimeout(() => {
50+
const vs = boxplotData.datasets[0].data[0];
51+
boxplotData.datasets[0].data[0] = randomValues(100, 4, 19);
52+
myBar.update();
53+
}, 2000);
5654
};
57-
58-
setTimeout(function () {
59-
const vs = boxplotData.datasets[0].data[0];
60-
boxplotData.datasets[0].data[0] = randomValues(100, 4, 19);
61-
window.myBar.update();
62-
}, 2000);
6355
</script>
6456
</body>
6557
</html>

‎samples/datalimits.html

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,6 @@
66
<script src="../build/index.umd.js"></script>
77
<script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
88
<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>
169
</head>
1710

1811
<body>
@@ -23,10 +16,10 @@
2316
<button id="limitWhiskers">Limit to whiskers</button>
2417
<script>
2518
const samples = this.Samples.utils;
26-
var color = Chart.helpers.color;
27-
var b = d3.randomNormal();
28-
var random = (min, max) => () => b() * ((max || 1) - (min || 0)) + (min || 0);
29-
var boxplotData = {
19+
const color = Chart.helpers.color;
20+
const b = d3.randomNormal();
21+
const random = (min, max) => () => b() * ((max || 1) - (min || 0)) + (min || 0);
22+
const boxplotData = {
3023
labels: samples.months({ count: 7 }),
3124
datasets: [
3225
{
@@ -56,37 +49,33 @@
5649
display: true,
5750
text: 'Chart.js Box Plot Chart',
5851
},
59-
boxplot: {
60-
datasets: {
61-
minStats: 'min',
62-
maxStats: 'max',
63-
},
64-
},
52+
minStats: 'min',
53+
maxStats: 'max',
6554
};
6655

67-
window.onload = function () {
68-
var ctx = document.getElementById('canvas').getContext('2d');
69-
window.myBar = new Chart(ctx, {
56+
window.onload = () => {
57+
const ctx = document.getElementById('canvas').getContext('2d');
58+
let myBar = new Chart(ctx, {
7059
type: 'boxplot',
7160
data: boxplotData,
7261
options: options,
7362
});
7463

75-
document.getElementById('limitMinMax').onclick = function () {
64+
document.getElementById('limitMinMax').onclick = () => {
7665
options.boxplot.datasets.minStats = 'min';
7766
options.boxplot.datasets.maxStats = 'max';
78-
window.myBar.destroy();
79-
window.myBar = new Chart(ctx, {
67+
myBar.destroy();
68+
myBar = new Chart(ctx, {
8069
type: 'boxplot',
8170
data: boxplotData,
8271
options: options,
8372
});
8473
};
85-
document.getElementById('limitWhiskers').onclick = function () {
74+
document.getElementById('limitWhiskers').onclick = () => {
8675
options.boxplot.datasets.minStats = 'whiskerMin';
8776
options.boxplot.datasets.maxStats = 'whiskerMax';
88-
window.myBar.destroy();
89-
window.myBar = new Chart(ctx, {
77+
myBar.destroy();
78+
myBar = new Chart(ctx, {
9079
type: 'boxplot',
9180
data: boxplotData,
9281
options: options,

‎samples/datastructures.html

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,6 @@
66
<script src="../build/index.umd.js"></script>
77
<script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
88
<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>
169
</head>
1710

1811
<body>
@@ -64,9 +57,9 @@
6457
],
6558
};
6659

67-
window.onload = function () {
68-
var ctx = document.getElementById('canvas').getContext('2d');
69-
window.myBar = new Chart(ctx, {
60+
window.onload = () => {
61+
const ctx = document.getElementById('canvas').getContext('2d');
62+
const myBar = new Chart(ctx, {
7063
type: 'boxplot',
7164
data: boxplotData,
7265
options: {

‎samples/default.html

Lines changed: 48 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,6 @@
66
<script src="../build/index.umd.js"></script>
77
<script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
88
<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>
169
</head>
1710

1811
<body>
@@ -26,10 +19,10 @@
2619
<button id="removeData">Remove Data</button>
2720
<script>
2821
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 = {
22+
const color = Chart.helpers.color;
23+
const b = d3.randomNormal();
24+
const random = (min, max) => () => b() * ((max || 1) - (min || 0)) + (min || 0);
25+
const boxplotData = {
3326
labels: samples.months({ count: 7 }),
3427
datasets: [
3528
{
@@ -52,65 +45,65 @@
5245
],
5346
};
5447

55-
window.onload = function () {
56-
var ctx = document.getElementById('canvas').getContext('2d');
57-
window.myBar = new Chart(ctx, {
48+
window.onload = () => {
49+
const ctx = document.getElementById('canvas').getContext('2d');
50+
const myBar = new Chart(ctx, {
5851
type: 'boxplot',
5952
data: boxplotData,
6053
});
61-
};
6254

63-
document.getElementById('randomizeData').addEventListener('click', function () {
64-
boxplotData.datasets.forEach(function (dataset) {
65-
dataset.data = samples.boxplots({ count: 7 });
55+
document.getElementById('randomizeData').addEventListener('click', () => {
56+
boxplotData.datasets.forEach(function (dataset) {
57+
dataset.data = samples.boxplots({ count: 7 });
58+
});
59+
myBar.update();
6660
});
67-
window.myBar.update();
68-
});
6961

70-
var colorNames = Object.keys(window.chartColors);
71-
document.getElementById('addDataset').addEventListener('click', function () {
72-
var colorName = colorNames[boxplotData.datasets.length % colorNames.length];
73-
var dsColor = window.chartColors[colorName];
74-
var newDataset = {
75-
label: 'Dataset ' + boxplotData.datasets.length,
76-
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
77-
borderColor: dsColor,
78-
borderWidth: 1,
79-
data: samples.boxplots({ count: boxplotData.labels.length }),
80-
};
62+
const colorNames = Object.keys(window.chartColors);
63+
document.getElementById('addDataset').addEventListener('click', () => {
64+
const colorName = colorNames[boxplotData.datasets.length % colorNames.length];
65+
const dsColor = window.chartColors[colorName];
66+
const newDataset = {
67+
label: 'Dataset ' + boxplotData.datasets.length,
68+
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
69+
borderColor: dsColor,
70+
borderWidth: 1,
71+
data: samples.boxplots({ count: boxplotData.labels.length }),
72+
};
73+
74+
boxplotData.datasets.push(newDataset);
75+
myBar.update();
76+
});
8177

82-
boxplotData.datasets.push(newDataset);
83-
window.myBar.update();
84-
});
78+
document.getElementById('addData').addEventListener('click', () => {
79+
if (boxplotData.datasets.length > 0) {
80+
const month = samples.nextMonth(boxplotData.labels.length);
81+
boxplotData.labels.push(month);
8582

86-
document.getElementById('addData').addEventListener('click', function () {
87-
if (boxplotData.datasets.length > 0) {
88-
var month = samples.nextMonth(boxplotData.labels.length);
89-
boxplotData.labels.push(month);
83+
for (let index = 0; index < boxplotData.datasets.length; ++index) {
84+
//window.myBar.addData(randomBoxPlot(), index);
85+
boxplotData.datasets[index].data.push(samples.randomBoxPlot());
86+
}
9087

91-
for (var index = 0; index < boxplotData.datasets.length; ++index) {
92-
//window.myBar.addData(randomBoxPlot(), index);
93-
boxplotData.datasets[index].data.push(samples.randomBoxPlot());
88+
myBar.update();
9489
}
90+
});
9591

96-
window.myBar.update();
97-
}
98-
});
92+
document.getElementById('removeDataset').addEventListener('click', () => {
93+
boxplotData.datasets.splice(0, 1);
94+
myBar.update();
95+
});
9996

100-
document.getElementById('removeDataset').addEventListener('click', function () {
101-
boxplotData.datasets.splice(0, 1);
102-
window.myBar.update();
103-
});
97+
document.getElementById('removeData').addEventListener('click', () => {
98+
boxplotData.labels.splice(-1, 1); // remove the label first
10499

105-
document.getElementById('removeData').addEventListener('click', function () {
106-
boxplotData.labels.splice(-1, 1); // remove the label first
100+
boxplotData.datasets.forEach((dataset) => {
101+
dataset.data.pop();
102+
});
107103

108-
boxplotData.datasets.forEach(function (dataset, datasetIndex) {
109-
dataset.data.pop();
104+
myBar.update();
110105
});
111-
112-
window.myBar.update();
113-
});
106+
};
114107
</script>
115108
</body>
116109
</html>

‎samples/default_esm.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"chart.js": "https://unpkg.com/chart.js@3.0.0-rc?module",
1515
"chart.js/helpers": "https://unpkg.com/chart.js@3.0.0-rc/helpers/helpers.esm.js?module",
1616
"@sgratzl/boxplots": "https://unpkg.com/@sgratzl/boxplots?module",
17-
"@sgratzl/chartjs-chart-boxplot": "../build/index.esm.js"
17+
"@sgratzl/chartjs-chart-boxplot": "../build/index.js"
1818
}
1919
}
2020
</script>

‎samples/empty.html

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,6 @@
44
<title>Box Plot Chart</title>
55
<script src="https://unpkg.com/chart.js@3.0.0-rc/dist/chart.js"></script>
66
<script src="../build/index.umd.js"></script>
7-
<style>
8-
canvas {
9-
-moz-user-select: none;
10-
-webkit-user-select: none;
11-
-ms-user-select: none;
12-
}
13-
</style>
147
</head>
158

169
<body>
@@ -38,8 +31,8 @@
3831
};
3932

4033
window.onload = function () {
41-
var ctx = document.getElementById('canvas').getContext('2d');
42-
window.myBar = new Chart(ctx, {
34+
const ctx = document.getElementById('canvas').getContext('2d');
35+
const myBar = new Chart(ctx, {
4336
type: 'boxplot',
4437
data: boxplotData,
4538
options: {

0 commit comments

Comments
 (0)