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

Commit e443b9b

Browse files
author
Holger Stitz
authored
Merge pull request #38 from datavisyn/sluger/37_tooltips_decimals
Sluger/37 tooltips decimals
2 parents a87b25f + 2f97ddf commit e443b9b

File tree

9 files changed

+195
-20
lines changed

9 files changed

+195
-20
lines changed

‎README.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,15 @@ and [CodePen](https://codepen.io/sgratzl/pen/QxoLoY)
2222

2323
four new types: `boxplot`, `horizontalBoxplot`, `violin`, and `horizontalViolin`.
2424

25+
## Config
26+
27+
```typescript
28+
/**
29+
* Limit decimal digits by an optional config option
30+
**/
31+
tooltipDecimals?: number;
32+
```
33+
2534
## Styling
2635
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.
2736

@@ -101,7 +110,7 @@ interface IBaseStyling {
101110
itemBorderColor: string;
102111

103112
/**
104-
* padding thst is added around the bounding box when computing a mouse hit
113+
* padding that is added around the bounding box when computing a mouse hit
105114
* @default 1
106115
* @scriptable
107116
* @indexable

‎package-lock.json‎

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

‎samples/horizontal.html‎ renamed to ‎samples/horizontalBoxplot.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@
5959
title: {
6060
display: true,
6161
text: 'Chart.js Box Plot Chart'
62-
}
62+
},
63+
tooltipDecimals: 4
6364
}
6465
});
6566

‎samples/horizontalViolin.html‎

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

‎samples/violin.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@
6161
title: {
6262
display: true,
6363
text: 'Chart.js Violin Chart'
64-
}
64+
},
65+
tooltipDecimals: 3
6566
}
6667
});
6768

‎src/controllers/base.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ export const horizontalDefaults = {
1717
}
1818
};
1919

20+
export function toFixed(value) {
21+
const decimals = this._chart.config.options.tooltipDecimals; // inject number of decimals from config
22+
if (decimals == null || typeof decimals !== 'number' || decimals < 0) {
23+
return value;
24+
}
25+
return Number.parseFloat(value).toFixed(decimals);
26+
}
27+
2028
const array = {
2129
_elementOptions() {
2230
return {};

‎src/controllers/boxplot.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import {asBoxPlotStats} from '../data';
44
import * as Chart from 'chart.js';
5-
import base, {verticalDefaults, horizontalDefaults} from './base';
5+
import base, {verticalDefaults, horizontalDefaults, toFixed} from './base';
66

77
const defaults = {
88
tooltips: {
@@ -13,9 +13,9 @@ const defaults = {
1313
const b = asBoxPlotStats(value);
1414
let label = `${datasetLabel} ${typeof item.xLabel === 'string' ? item.xLabel : item.yLabel}`;
1515
if (!b) {
16-
return label + 'NaN';
16+
return `${label} (NaN)`;
1717
}
18-
return `${label} (min: ${b.min}, q1: ${b.q1}, median: ${b.median}, q3: ${b.q3}, max: ${b.max})`;
18+
return `${label} (min: ${toFixed.call(this, b.min)}, q1: ${toFixed.call(this, b.q1)}, median: ${toFixed.call(this, b.median)}, q3: ${toFixed.call(this, b.q3)}, max: ${toFixed.call(this, b.max)})`;
1919
}
2020
}
2121
}

‎src/controllers/violin.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,20 @@
22

33
import {asViolinStats} from '../data';
44
import * as Chart from 'chart.js';
5-
import base, {verticalDefaults, horizontalDefaults} from './base';
5+
import base, {verticalDefaults, horizontalDefaults, toFixed} from './base';
66

7-
const defaults = {};
7+
const defaults = {
8+
tooltips: {
9+
callbacks: {
10+
label(item, data) {
11+
const datasetLabel = data.datasets[item.datasetIndex].label || '';
12+
const value = item.value;
13+
const label = `${datasetLabel} ${typeof item.xLabel === 'string' ? item.xLabel : item.yLabel}`;
14+
return `${label} (${toFixed.call(this, value)})`;
15+
}
16+
}
17+
}
18+
};
819

920
Chart.defaults.violin = Chart.helpers.merge({}, [Chart.defaults.bar, verticalDefaults, defaults]);
1021
Chart.defaults.horizontalViolin = Chart.helpers.merge({}, [Chart.defaults.horizontalBar, horizontalDefaults, defaults]);

0 commit comments

Comments
 (0)