Skip to content

Commit 8b18240

Browse files
authored
docs: break hue discontinuity in docs (#13)
* docs: break hue discontinuity in docs * docs: fix tooltips
1 parent 239a122 commit 8b18240

File tree

1 file changed

+30
-9
lines changed

1 file changed

+30
-9
lines changed

docs/javascripts/cmap_charts.js

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -156,20 +156,32 @@ async function makeRGBChart(canvas, data) {
156156
}
157157

158158
async function makeHSLChart(canvas, data) {
159-
var datasets = [];
160-
var label_data, _data, val;
159+
const datasets = [];
160+
var label_data, _data, val, lastval;
161161

162-
["hue", "saturation", "chroma"].forEach((label) => {
162+
["saturation", "chroma", "hue"].forEach((label) => {
163163
label_data = data[label];
164164
_data = [];
165165
for (i = 0; i < data.x.length; i++) {
166166
val = label_data[i];
167-
_data.push({
168-
x: data.x[i],
169-
y: label == "hue" ? (val * 10) / 36 : val,
170-
});
167+
// If the hue is jumping by more than 90 degrees, insert a null
168+
// value to break the line
169+
if (label == "hue" && Math.abs(val - lastval) > 95) {
170+
// we just fully skip this point, which does mean a data point is missed
171+
// but if we insert a null value, the chartjs hover tooltip will be offset
172+
// for all later points
173+
_data.push({ x: data.x[i], y: null });
174+
} else {
175+
_data.push({ x: data.x[i], y: val });
176+
}
177+
lastval = val;
171178
}
172-
datasets.push({ label: label, showLine: true, data: _data });
179+
datasets.push({
180+
label: label,
181+
showLine: true,
182+
data: _data,
183+
yAxisID: label == "hue" ? "y2" : "y",
184+
});
173185
});
174186

175187
new Chart(canvas, {
@@ -178,7 +190,16 @@ async function makeHSLChart(canvas, data) {
178190
options: {
179191
...GLOBAL_OPTIONS,
180192
plugins: { legend: { display: true, labels: { boxHeight: 1 } } },
181-
scales: {},
193+
scales: {
194+
y: { max: 100, min: 0, title: { text: "Saturation/Chroma %", display: true } },
195+
y2: {
196+
max: 360,
197+
min: 0,
198+
ticks: { stepSize: 36 },
199+
title: { text: "Hue degree", display: true },
200+
position: "right",
201+
},
202+
},
182203
elements: {
183204
line: { borderWidth: 4 },
184205
point: { radius: 0 },

0 commit comments

Comments
 (0)