@@ -156,20 +156,32 @@ async function makeRGBChart(canvas, data) {
156
156
}
157
157
158
158
async function makeHSLChart ( canvas , data ) {
159
- var datasets = [ ] ;
160
- var label_data , _data , val ;
159
+ const datasets = [ ] ;
160
+ var label_data , _data , val , lastval ;
161
161
162
- [ "hue " , "saturation " , "chroma " ] . forEach ( ( label ) => {
162
+ [ "saturation " , "chroma " , "hue " ] . forEach ( ( label ) => {
163
163
label_data = data [ label ] ;
164
164
_data = [ ] ;
165
165
for ( i = 0 ; i < data . x . length ; i ++ ) {
166
166
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 ;
171
178
}
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
+ } ) ;
173
185
} ) ;
174
186
175
187
new Chart ( canvas , {
@@ -178,7 +190,16 @@ async function makeHSLChart(canvas, data) {
178
190
options : {
179
191
...GLOBAL_OPTIONS ,
180
192
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
+ } ,
182
203
elements : {
183
204
line : { borderWidth : 4 } ,
184
205
point : { radius : 0 } ,
0 commit comments