2019-10-31 23:45:13 +01:00
function getLabels ( scale ) {
return scale . ticks . map ( t => t . label ) ;
}
2017-07-15 10:19:16 +02:00
describe ( 'Core.scale' , function ( ) {
2018-10-20 11:38:48 +02:00
describe ( 'auto' , jasmine . fixture . specs ( 'core.scale' ) ) ;
2017-09-10 19:15:47 +02:00
it ( 'should provide default scale label options' , function ( ) {
expect ( Chart . defaults . scale . scaleLabel ) . toEqual ( {
2020-11-19 19:59:24 +01:00
color : Chart . defaults . color ,
2017-09-10 19:15:47 +02:00
display : false ,
labelString : '' ,
padding : {
top : 4 ,
bottom : 4
}
} ) ;
} ) ;
2018-11-02 08:44:10 +01:00
2018-12-09 18:56:51 +01:00
describe ( 'displaying xAxis ticks with autoSkip=true' , function ( ) {
function getChart ( data ) {
return window . acquireChart ( {
type : 'line' ,
data : data ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2018-12-09 18:56:51 +01:00
ticks : {
autoSkip : true
}
2019-11-22 00:46:49 +01:00
}
2018-12-09 18:56:51 +01:00
}
}
} ) ;
}
function lastTick ( chart ) {
2019-11-22 00:46:49 +01:00
var xAxis = chart . scales . x ;
2018-12-09 18:56:51 +01:00
var ticks = xAxis . getTicks ( ) ;
return ticks [ ticks . length - 1 ] ;
}
it ( 'should display the last tick if it fits evenly with other ticks' , function ( ) {
var chart = getChart ( {
labels : [
'January 2018' , 'February 2018' , 'March 2018' , 'April 2018' ,
'May 2018' , 'June 2018' , 'July 2018' , 'August 2018' ,
'September 2018'
] ,
datasets : [ {
data : [ 12 , 19 , 3 , 5 , 2 , 3 , 7 , 8 , 9 ]
} ]
} ) ;
expect ( lastTick ( chart ) . label ) . toEqual ( 'September 2018' ) ;
} ) ;
it ( 'should not display the last tick if it does not fit evenly' , function ( ) {
var chart = getChart ( {
labels : [
'January 2018' , 'February 2018' , 'March 2018' , 'April 2018' ,
'May 2018' , 'June 2018' , 'July 2018' , 'August 2018' ,
2018-12-21 07:56:53 +01:00
'September 2018' , 'October 2018' , 'November 2018' , 'December 2018' ,
'January 2019' , 'February 2019' , 'March 2019' , 'April 2019' ,
'May 2019' , 'June 2019' , 'July 2019' , 'August 2019' ,
'September 2019' , 'October 2019' , 'November 2019' , 'December 2019' ,
'January 2020' , 'February 2020'
2018-12-09 18:56:51 +01:00
] ,
datasets : [ {
2018-12-21 07:56:53 +01:00
data : [ 12 , 19 , 3 , 5 , 2 , 3 , 7 , 8 , 9 , 10 , 11 , 12 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 , 13 , 14 ]
2018-12-09 18:56:51 +01:00
} ]
} ) ;
2019-11-14 13:15:44 +01:00
expect ( lastTick ( chart ) . label ) . toEqual ( 'January 2020' ) ;
2018-12-09 18:56:51 +01:00
} ) ;
} ) ;
2018-11-02 08:44:10 +01:00
var gridLineTests = [ {
labels : [ 'tick1' , 'tick2' , 'tick3' , 'tick4' , 'tick5' ] ,
offsetGridLines : false ,
offset : false ,
expected : [ 0.5 , 128.5 , 256.5 , 384.5 , 512.5 ]
} , {
labels : [ 'tick1' , 'tick2' , 'tick3' , 'tick4' , 'tick5' ] ,
offsetGridLines : false ,
offset : true ,
2018-12-09 11:34:34 +01:00
expected : [ 51.5 , 153.5 , 256.5 , 358.5 , 460.5 ]
2018-11-02 08:44:10 +01:00
} , {
labels : [ 'tick1' , 'tick2' , 'tick3' , 'tick4' , 'tick5' ] ,
offsetGridLines : true ,
offset : false ,
2019-07-19 00:25:33 +02:00
expected : [ 64.5 , 192.5 , 320.5 , 448.5 ]
2018-11-02 08:44:10 +01:00
} , {
labels : [ 'tick1' , 'tick2' , 'tick3' , 'tick4' , 'tick5' ] ,
offsetGridLines : true ,
offset : true ,
2019-07-19 00:25:33 +02:00
expected : [ 0.5 , 102.5 , 204.5 , 307.5 , 409.5 , 512.5 ]
2018-11-02 08:44:10 +01:00
} , {
labels : [ 'tick1' ] ,
offsetGridLines : false ,
offset : false ,
expected : [ 0.5 ]
} , {
labels : [ 'tick1' ] ,
offsetGridLines : false ,
offset : true ,
expected : [ 256.5 ]
} , {
labels : [ 'tick1' ] ,
offsetGridLines : true ,
offset : false ,
2019-07-19 00:25:33 +02:00
expected : [ 512.5 ]
2018-11-02 08:44:10 +01:00
} , {
labels : [ 'tick1' ] ,
offsetGridLines : true ,
offset : true ,
2019-07-19 00:25:33 +02:00
expected : [ 0.5 , 512.5 ]
2018-11-02 08:44:10 +01:00
} ] ;
gridLineTests . forEach ( function ( test ) {
2019-07-19 00:25:33 +02:00
it ( 'should get the correct pixels for gridLine(s) for the horizontal scale when offsetGridLines is ' + test . offsetGridLines + ' and offset is ' + test . offset , function ( ) {
2018-11-02 08:44:10 +01:00
var chart = window . acquireChart ( {
type : 'line' ,
data : {
datasets : [ {
data : [ ]
} ] ,
labels : test . labels
} ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2018-11-02 08:44:10 +01:00
gridLines : {
offsetGridLines : test . offsetGridLines ,
drawTicks : false
} ,
ticks : {
display : false
} ,
offset : test . offset
2019-11-22 00:46:49 +01:00
} ,
y : {
2018-11-02 08:44:10 +01:00
display : false
2019-11-22 00:46:49 +01:00
}
2018-11-02 08:44:10 +01:00
} ,
legend : {
display : false
}
}
} ) ;
2019-11-22 00:46:49 +01:00
var xScale = chart . scales . x ;
2018-11-02 08:44:10 +01:00
xScale . ctx = window . createMockContext ( ) ;
chart . draw ( ) ;
expect ( xScale . ctx . getCalls ( ) . filter ( function ( x ) {
return x . name === 'moveTo' && x . args [ 1 ] === 0 ;
} ) . map ( function ( x ) {
return x . args [ 0 ] ;
} ) ) . toEqual ( test . expected ) ;
} ) ;
} ) ;
gridLineTests . forEach ( function ( test ) {
2019-07-19 00:25:33 +02:00
it ( 'should get the correct pixels for gridLine(s) for the vertical scale when offsetGridLines is ' + test . offsetGridLines + ' and offset is ' + test . offset , function ( ) {
2018-11-02 08:44:10 +01:00
var chart = window . acquireChart ( {
type : 'line' ,
data : {
datasets : [ {
data : [ ]
} ] ,
labels : test . labels
} ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2018-11-02 08:44:10 +01:00
display : false
2019-11-22 00:46:49 +01:00
} ,
y : {
2018-11-02 08:44:10 +01:00
type : 'category' ,
gridLines : {
offsetGridLines : test . offsetGridLines ,
drawTicks : false
} ,
ticks : {
display : false
} ,
offset : test . offset
2019-11-22 00:46:49 +01:00
}
2018-11-02 08:44:10 +01:00
} ,
legend : {
display : false
}
}
} ) ;
2019-11-22 00:46:49 +01:00
var yScale = chart . scales . y ;
2018-11-02 08:44:10 +01:00
yScale . ctx = window . createMockContext ( ) ;
chart . draw ( ) ;
expect ( yScale . ctx . getCalls ( ) . filter ( function ( x ) {
2018-12-09 11:34:34 +01:00
return x . name === 'moveTo' && x . args [ 0 ] === 1 ;
2018-11-02 08:44:10 +01:00
} ) . map ( function ( x ) {
return x . args [ 1 ] ;
} ) ) . toEqual ( test . expected ) ;
} ) ;
} ) ;
2018-12-18 09:33:03 +01:00
2019-04-30 08:55:04 +02:00
it ( 'should add the correct padding for long tick labels' , function ( ) {
var chart = window . acquireChart ( {
type : 'line' ,
data : {
labels : [
'This is a very long label' ,
'This is a very long label'
] ,
datasets : [ {
data : [ 0 , 1 ]
} ]
} ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
y : {
2019-04-30 08:55:04 +02:00
display : false
2019-11-22 00:46:49 +01:00
}
2019-04-30 08:55:04 +02:00
} ,
legend : {
display : false
}
}
} , {
canvas : {
height : 100 ,
width : 200
}
} ) ;
2019-11-22 00:46:49 +01:00
var scale = chart . scales . x ;
2019-04-30 08:55:04 +02:00
expect ( scale . left ) . toBeGreaterThan ( 100 ) ;
expect ( scale . right ) . toBeGreaterThan ( 190 ) ;
} ) ;
2018-12-18 09:33:03 +01:00
describe ( 'given the axes display option is set to auto' , function ( ) {
describe ( 'for the x axes' , function ( ) {
it ( 'should draw the axes if at least one associated dataset is visible' , function ( ) {
var chart = window . acquireChart ( {
type : 'line' ,
data : {
datasets : [ {
data : [ 100 , 200 , 100 , 50 ] ,
xAxisId : 'foo' ,
hidden : true ,
labels : [ 'Q1' , 'Q2' , 'Q3' , 'Q4' ]
} , {
data : [ 100 , 200 , 100 , 50 ] ,
xAxisId : 'foo' ,
labels : [ 'Q1' , 'Q2' , 'Q3' , 'Q4' ]
} ]
} ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2018-12-18 09:33:03 +01:00
display : 'auto'
2019-11-22 00:46:49 +01:00
} ,
y : {
2018-12-18 09:33:03 +01:00
type : 'category' ,
2019-11-22 00:46:49 +01:00
}
2018-12-18 09:33:03 +01:00
}
}
} ) ;
2019-11-22 00:46:49 +01:00
var scale = chart . scales . x ;
2018-12-18 09:33:03 +01:00
scale . ctx = window . createMockContext ( ) ;
chart . draw ( ) ;
expect ( scale . ctx . getCalls ( ) . length ) . toBeGreaterThan ( 0 ) ;
expect ( scale . height ) . toBeGreaterThan ( 0 ) ;
} ) ;
it ( 'should not draw the axes if no associated datasets are visible' , function ( ) {
var chart = window . acquireChart ( {
type : 'line' ,
data : {
datasets : [ {
data : [ 100 , 200 , 100 , 50 ] ,
xAxisId : 'foo' ,
hidden : true ,
labels : [ 'Q1' , 'Q2' , 'Q3' , 'Q4' ]
} ]
} ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2018-12-18 09:33:03 +01:00
display : 'auto'
2019-11-22 00:46:49 +01:00
}
2018-12-18 09:33:03 +01:00
}
}
} ) ;
2019-11-22 00:46:49 +01:00
var scale = chart . scales . x ;
2018-12-18 09:33:03 +01:00
scale . ctx = window . createMockContext ( ) ;
chart . draw ( ) ;
expect ( scale . ctx . getCalls ( ) . length ) . toBe ( 0 ) ;
expect ( scale . height ) . toBe ( 0 ) ;
} ) ;
} ) ;
describe ( 'for the y axes' , function ( ) {
it ( 'should draw the axes if at least one associated dataset is visible' , function ( ) {
var chart = window . acquireChart ( {
type : 'line' ,
data : {
datasets : [ {
data : [ 100 , 200 , 100 , 50 ] ,
yAxisId : 'foo' ,
hidden : true ,
labels : [ 'Q1' , 'Q2' , 'Q3' , 'Q4' ]
} , {
data : [ 100 , 200 , 100 , 50 ] ,
yAxisId : 'foo' ,
labels : [ 'Q1' , 'Q2' , 'Q3' , 'Q4' ]
} ]
} ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
y : {
2018-12-18 09:33:03 +01:00
display : 'auto'
2019-11-22 00:46:49 +01:00
}
2018-12-18 09:33:03 +01:00
}
}
} ) ;
2019-11-22 00:46:49 +01:00
var scale = chart . scales . y ;
2018-12-18 09:33:03 +01:00
scale . ctx = window . createMockContext ( ) ;
chart . draw ( ) ;
expect ( scale . ctx . getCalls ( ) . length ) . toBeGreaterThan ( 0 ) ;
expect ( scale . width ) . toBeGreaterThan ( 0 ) ;
} ) ;
it ( 'should not draw the axes if no associated datasets are visible' , function ( ) {
var chart = window . acquireChart ( {
type : 'line' ,
data : {
datasets : [ {
data : [ 100 , 200 , 100 , 50 ] ,
yAxisId : 'foo' ,
hidden : true ,
labels : [ 'Q1' , 'Q2' , 'Q3' , 'Q4' ]
} ]
} ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
y : {
2018-12-18 09:33:03 +01:00
display : 'auto'
2019-11-22 00:46:49 +01:00
}
2018-12-18 09:33:03 +01:00
}
}
} ) ;
2019-11-22 00:46:49 +01:00
var scale = chart . scales . y ;
2018-12-18 09:33:03 +01:00
scale . ctx = window . createMockContext ( ) ;
chart . draw ( ) ;
expect ( scale . ctx . getCalls ( ) . length ) . toBe ( 0 ) ;
expect ( scale . width ) . toBe ( 0 ) ;
} ) ;
} ) ;
} ) ;
2019-01-11 07:29:38 +01:00
describe ( 'afterBuildTicks' , function ( ) {
it ( 'should allow filtering of ticks' , function ( ) {
var labels = [ 'tick1' , 'tick2' , 'tick3' , 'tick4' , 'tick5' ] ;
var chart = window . acquireChart ( {
type : 'line' ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2019-01-11 07:29:38 +01:00
type : 'category' ,
labels : labels ,
2019-10-31 23:45:13 +01:00
afterBuildTicks : function ( scale ) {
scale . ticks = scale . ticks . slice ( 1 ) ;
2019-01-11 07:29:38 +01:00
}
2019-11-22 00:46:49 +01:00
}
2019-01-11 07:29:38 +01:00
}
}
} ) ;
var scale = chart . scales . x ;
2019-10-31 23:45:13 +01:00
expect ( getLabels ( scale ) ) . toEqual ( labels . slice ( 1 ) ) ;
2019-01-11 07:29:38 +01:00
} ) ;
it ( 'should allow no return value from callback' , function ( ) {
var labels = [ 'tick1' , 'tick2' , 'tick3' , 'tick4' , 'tick5' ] ;
var chart = window . acquireChart ( {
type : 'line' ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2019-01-11 07:29:38 +01:00
type : 'category' ,
labels : labels ,
afterBuildTicks : function ( ) { }
2019-11-22 00:46:49 +01:00
}
2019-01-11 07:29:38 +01:00
}
}
} ) ;
var scale = chart . scales . x ;
2019-10-31 23:45:13 +01:00
expect ( getLabels ( scale ) ) . toEqual ( labels ) ;
2019-01-11 07:29:38 +01:00
} ) ;
it ( 'should allow empty ticks' , function ( ) {
var labels = [ 'tick1' , 'tick2' , 'tick3' , 'tick4' , 'tick5' ] ;
var chart = window . acquireChart ( {
type : 'line' ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2019-01-11 07:29:38 +01:00
type : 'category' ,
labels : labels ,
2019-10-31 23:45:13 +01:00
afterBuildTicks : function ( scale ) {
scale . ticks = [ ] ;
2019-01-11 07:29:38 +01:00
}
2019-11-22 00:46:49 +01:00
}
2019-01-11 07:29:38 +01:00
}
}
} ) ;
var scale = chart . scales . x ;
expect ( scale . ticks . length ) . toBe ( 0 ) ;
} ) ;
} ) ;
2019-05-09 15:54:05 +02:00
describe ( '_layers' , function ( ) {
it ( 'should default to one layer' , function ( ) {
var chart = window . acquireChart ( {
type : 'line' ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2019-05-09 15:54:05 +02:00
type : 'linear' ,
2019-11-22 00:46:49 +01:00
}
2019-05-09 15:54:05 +02:00
}
}
} ) ;
var scale = chart . scales . x ;
expect ( scale . _layers ( ) . length ) . toEqual ( 1 ) ;
} ) ;
it ( 'should default to one layer for custom scales' , function ( ) {
2020-05-27 01:16:23 +02:00
class CustomScale extends Chart . Scale {
draw ( ) { }
convertTicksToLabels ( ) {
2019-05-09 15:54:05 +02:00
return [ 'tick' ] ;
}
2020-05-27 01:16:23 +02:00
}
CustomScale . id = 'customScale' ;
CustomScale . defaults = { } ;
2020-07-06 23:38:04 +02:00
Chart . register ( CustomScale ) ;
2019-05-09 15:54:05 +02:00
var chart = window . acquireChart ( {
type : 'line' ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2019-05-09 15:54:05 +02:00
type : 'customScale' ,
gridLines : {
z : 10
} ,
ticks : {
z : 20
}
2019-11-22 00:46:49 +01:00
}
2019-05-09 15:54:05 +02:00
}
}
} ) ;
var scale = chart . scales . x ;
expect ( scale . _layers ( ) . length ) . toEqual ( 1 ) ;
expect ( scale . _layers ( ) [ 0 ] . z ) . toEqual ( 20 ) ;
} ) ;
it ( 'should default to one layer when z is equal between ticks and grid' , function ( ) {
var chart = window . acquireChart ( {
type : 'line' ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2019-05-09 15:54:05 +02:00
type : 'linear' ,
ticks : {
z : 10
} ,
gridLines : {
z : 10
}
2019-11-22 00:46:49 +01:00
}
2019-05-09 15:54:05 +02:00
}
}
} ) ;
var scale = chart . scales . x ;
expect ( scale . _layers ( ) . length ) . toEqual ( 1 ) ;
} ) ;
it ( 'should return 2 layers when z is not equal between ticks and grid' , function ( ) {
var chart = window . acquireChart ( {
type : 'line' ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2019-05-09 15:54:05 +02:00
type : 'linear' ,
ticks : {
z : 10
}
2019-11-22 00:46:49 +01:00
}
2019-05-09 15:54:05 +02:00
}
}
} ) ;
expect ( chart . scales . x . _layers ( ) . length ) . toEqual ( 2 ) ;
chart = window . acquireChart ( {
type : 'line' ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2019-05-09 15:54:05 +02:00
type : 'linear' ,
gridLines : {
z : 11
}
2019-11-22 00:46:49 +01:00
}
2019-05-09 15:54:05 +02:00
}
}
} ) ;
expect ( chart . scales . x . _layers ( ) . length ) . toEqual ( 2 ) ;
chart = window . acquireChart ( {
type : 'line' ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2019-05-09 15:54:05 +02:00
type : 'linear' ,
ticks : {
z : 10
} ,
gridLines : {
z : 11
}
2019-11-22 00:46:49 +01:00
}
2019-05-09 15:54:05 +02:00
}
}
} ) ;
expect ( chart . scales . x . _layers ( ) . length ) . toEqual ( 2 ) ;
} ) ;
} ) ;
2019-11-13 01:24:07 +01:00
describe ( 'min and max' , function ( ) {
it ( 'should be limited to visible data' , function ( ) {
var chart = window . acquireChart ( {
type : 'scatter' ,
data : {
datasets : [ {
data : [ { x : 100 , y : 100 } , { x : - 100 , y : - 100 } ]
} , {
data : [ { x : 10 , y : 10 } , { x : - 10 , y : - 10 } ]
} ]
} ,
options : {
scales : {
2019-11-22 00:46:49 +01:00
x : {
2019-11-13 01:24:07 +01:00
id : 'x' ,
type : 'linear' ,
2019-11-15 18:11:13 +01:00
min : - 20 ,
max : 20
2019-11-22 00:46:49 +01:00
} ,
y : {
2019-11-13 01:24:07 +01:00
id : 'y' ,
type : 'linear'
2019-11-22 00:46:49 +01:00
}
2019-11-13 01:24:07 +01:00
}
}
} ) ;
expect ( chart . scales . x . min ) . toEqual ( - 20 ) ;
expect ( chart . scales . x . max ) . toEqual ( 20 ) ;
expect ( chart . scales . y . min ) . toEqual ( - 10 ) ;
expect ( chart . scales . y . max ) . toEqual ( 10 ) ;
} ) ;
} ) ;
2017-07-15 10:19:16 +02:00
} ) ;