| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609 |
- describe('Core.scale', function() {
- describe('auto', jasmine.fixture.specs('core.scale'));
- it('should provide default scale label options', function() {
- expect(Chart.defaults.scale.scaleLabel).toEqual({
- // display property
- display: false,
- // actual label
- labelString: '',
- // top/bottom padding
- padding: {
- top: 4,
- bottom: 4
- }
- });
- });
- describe('displaying xAxis ticks with autoSkip=true', function() {
- function getChart(data) {
- return window.acquireChart({
- type: 'line',
- data: data,
- options: {
- scales: {
- xAxes: [{
- ticks: {
- autoSkip: true
- }
- }]
- }
- }
- });
- }
- function lastTick(chart) {
- var xAxis = chart.scales['x-axis-0'];
- 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',
- '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'
- ],
- datasets: [{
- 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]
- }]
- });
- expect(lastTick(chart).label).toBeUndefined();
- });
- });
- 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,
- expected: [51.5, 153.5, 256.5, 358.5, 460.5]
- }, {
- labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
- offsetGridLines: true,
- offset: false,
- expected: [64.5, 192.5, 320.5, 448.5]
- }, {
- labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
- offsetGridLines: true,
- offset: true,
- expected: [0.5, 102.5, 204.5, 307.5, 409.5, 512.5]
- }, {
- labels: ['tick1'],
- offsetGridLines: false,
- offset: false,
- expected: [0.5]
- }, {
- labels: ['tick1'],
- offsetGridLines: false,
- offset: true,
- expected: [256.5]
- }, {
- labels: ['tick1'],
- offsetGridLines: true,
- offset: false,
- expected: [512.5]
- }, {
- labels: ['tick1'],
- offsetGridLines: true,
- offset: true,
- expected: [0.5, 512.5]
- }];
- gridLineTests.forEach(function(test) {
- it('should get the correct pixels for gridLine(s) for the horizontal scale when offsetGridLines is ' + test.offsetGridLines + ' and offset is ' + test.offset, function() {
- var chart = window.acquireChart({
- type: 'line',
- data: {
- datasets: [{
- data: []
- }],
- labels: test.labels
- },
- options: {
- scales: {
- xAxes: [{
- id: 'xScale0',
- gridLines: {
- offsetGridLines: test.offsetGridLines,
- drawTicks: false
- },
- ticks: {
- display: false
- },
- offset: test.offset
- }],
- yAxes: [{
- display: false
- }]
- },
- legend: {
- display: false
- }
- }
- });
- var xScale = chart.scales.xScale0;
- 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) {
- it('should get the correct pixels for gridLine(s) for the vertical scale when offsetGridLines is ' + test.offsetGridLines + ' and offset is ' + test.offset, function() {
- var chart = window.acquireChart({
- type: 'line',
- data: {
- datasets: [{
- data: []
- }],
- labels: test.labels
- },
- options: {
- scales: {
- xAxes: [{
- display: false
- }],
- yAxes: [{
- type: 'category',
- id: 'yScale0',
- gridLines: {
- offsetGridLines: test.offsetGridLines,
- drawTicks: false
- },
- ticks: {
- display: false
- },
- offset: test.offset
- }]
- },
- legend: {
- display: false
- }
- }
- });
- var yScale = chart.scales.yScale0;
- yScale.ctx = window.createMockContext();
- chart.draw();
- expect(yScale.ctx.getCalls().filter(function(x) {
- return x.name === 'moveTo' && x.args[0] === 1;
- }).map(function(x) {
- return x.args[1];
- })).toEqual(test.expected);
- });
- });
- 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: {
- xAxes: [{
- id: 'foo'
- }],
- yAxes: [{
- display: false
- }]
- },
- legend: {
- display: false
- }
- }
- }, {
- canvas: {
- height: 100,
- width: 200
- }
- });
- var scale = chart.scales.foo;
- expect(scale.left).toBeGreaterThan(100);
- expect(scale.right).toBeGreaterThan(190);
- });
- 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: {
- xAxes: [{
- id: 'foo',
- display: 'auto'
- }],
- yAxes: [{
- type: 'category',
- id: 'yScale0'
- }]
- }
- }
- });
- var scale = chart.scales.foo;
- 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: {
- xAxes: [{
- id: 'foo',
- display: 'auto'
- }]
- }
- }
- });
- var scale = chart.scales.foo;
- 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: {
- yAxes: [{
- id: 'foo',
- display: 'auto'
- }]
- }
- }
- });
- var scale = chart.scales.foo;
- 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: {
- yAxes: [{
- id: 'foo',
- display: 'auto'
- }]
- }
- }
- });
- var scale = chart.scales.foo;
- scale.ctx = window.createMockContext();
- chart.draw();
- expect(scale.ctx.getCalls().length).toBe(0);
- expect(scale.width).toBe(0);
- });
- });
- });
- 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: {
- xAxes: [{
- id: 'x',
- type: 'category',
- labels: labels,
- afterBuildTicks: function(axis, ticks) {
- return ticks.slice(1);
- }
- }]
- }
- }
- });
- var scale = chart.scales.x;
- expect(scale.ticks).toEqual(labels.slice(1));
- });
- it('should allow filtering of ticks (for new implementation of buildTicks)', function() {
- var chart = window.acquireChart({
- type: 'line',
- data: {
- labels: ['2016', '2017', '2018']
- },
- options: {
- scales: {
- xAxes: [{
- id: 'x',
- type: 'time',
- time: {
- parser: 'YYYY'
- },
- ticks: {
- source: 'labels'
- },
- afterBuildTicks: function(axis, ticks) {
- return ticks.slice(1);
- }
- }]
- }
- }
- });
- var scale = chart.scales.x;
- expect(scale.ticks.length).toEqual(2);
- });
- it('should allow no return value from callback', function() {
- var labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'];
- var chart = window.acquireChart({
- type: 'line',
- options: {
- scales: {
- xAxes: [{
- id: 'x',
- type: 'category',
- labels: labels,
- afterBuildTicks: function() { }
- }]
- }
- }
- });
- var scale = chart.scales.x;
- expect(scale.ticks).toEqual(labels);
- });
- it('should allow empty ticks', function() {
- var labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'];
- var chart = window.acquireChart({
- type: 'line',
- options: {
- scales: {
- xAxes: [{
- id: 'x',
- type: 'category',
- labels: labels,
- afterBuildTicks: function() {
- return [];
- }
- }]
- }
- }
- });
- var scale = chart.scales.x;
- expect(scale.ticks.length).toBe(0);
- });
- });
- describe('_layers', function() {
- it('should default to one layer', function() {
- var chart = window.acquireChart({
- type: 'line',
- options: {
- scales: {
- xAxes: [{
- id: 'x',
- type: 'linear',
- }]
- }
- }
- });
- var scale = chart.scales.x;
- expect(scale._layers().length).toEqual(1);
- });
- it('should default to one layer for custom scales', function() {
- var customScale = Chart.Scale.extend({
- draw: function() {},
- convertTicksToLabels: function() {
- return ['tick'];
- }
- });
- Chart.scaleService.registerScaleType('customScale', customScale, {});
- var chart = window.acquireChart({
- type: 'line',
- options: {
- scales: {
- xAxes: [{
- id: 'x',
- type: 'customScale',
- gridLines: {
- z: 10
- },
- ticks: {
- z: 20
- }
- }]
- }
- }
- });
- 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: {
- xAxes: [{
- id: 'x',
- type: 'linear',
- ticks: {
- z: 10
- },
- gridLines: {
- z: 10
- }
- }]
- }
- }
- });
- 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: {
- xAxes: [{
- id: 'x',
- type: 'linear',
- ticks: {
- z: 10
- }
- }]
- }
- }
- });
- expect(chart.scales.x._layers().length).toEqual(2);
- chart = window.acquireChart({
- type: 'line',
- options: {
- scales: {
- xAxes: [{
- id: 'x',
- type: 'linear',
- gridLines: {
- z: 11
- }
- }]
- }
- }
- });
- expect(chart.scales.x._layers().length).toEqual(2);
- chart = window.acquireChart({
- type: 'line',
- options: {
- scales: {
- xAxes: [{
- id: 'x',
- type: 'linear',
- ticks: {
- z: 10
- },
- gridLines: {
- z: 11
- }
- }]
- }
- }
- });
- expect(chart.scales.x._layers().length).toEqual(2);
- });
- });
- });
|