From 3d1e1b1605e2a3ea267f5d14aa5c6fdf2ef46ffa Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Fri, 25 Sep 2015 21:04:45 -0400 Subject: [PATCH] Updated core.scale draw code with minor improvements and features that broke during integration (such as mirror option for labels). Updated linear and logarithmic tests. Update config merge to use scaleMerge since it prevents overriding the default entirely. --- src/core/core.scale.js | 77 +- src/core/core.scaleService.js | 2 +- src/scales/scale.linear.js | 4 +- src/scales/scale.logarithmic.js | 30 +- test/scale.linear.tests.js | 2360 ++++++++++++++++--------------- test/scale.logarithmic.tests.js | 1364 +----------------- 6 files changed, 1348 insertions(+), 2489 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index b2d5823b2..6835effac 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -36,14 +36,18 @@ // label settings ticks: { - show: true, - minRotation: 20, - maxRotation: 90, - template: "<%=value%>", + beginAtZero: false, fontSize: 12, fontStyle: "normal", fontColor: "#666", fontFamily: "Helvetica Neue", + maxRotation: 90, + minRotation: 20, + mirror: false, + padding: 10, + reverse: false, + show: true, + template: "<%=value%>", }, }; @@ -103,6 +107,12 @@ } else { this.height = this.maxHeight; } + + // Reset padding + this.paddingLeft = 0; + this.paddingTop = 0; + this.paddingRight = 0; + this.paddingBottom = 0; }, afterSetDimensions: helpers.noop, @@ -233,11 +243,6 @@ } } - this.paddingLeft = 0; - this.paddingRight = 0; - this.paddingTop = 0; - this.paddingBottom = 0; - if (this.options.ticks.show && this.options.display) { // Don't bother fitting the ticks if we are not showing them var labelFont = helpers.fontString(this.options.ticks.fontSize, @@ -258,8 +263,9 @@ var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width; // Ensure that our ticks are always inside the canvas - this.paddingLeft = firstLabelWidth / 2; - this.paddingRight = lastLabelWidth / 2; + var cosRotation = Math.cos(helpers.toRadians(this.labelRotation)); + this.paddingLeft = (cosRotation * firstLabelWidth) / 2 + 3; // add 3 px to move away from canvas edges + this.paddingRight = (cosRotation * lastLabelWidth) / 2 + 3; } else { // A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first var maxLabelWidth = this.maxWidth - this.minSize.width; @@ -296,11 +302,6 @@ }, afterFit: helpers.noop, - - - - - // Shared Methods isHorizontal: function() { return this.options.position == "top" || this.options.position == "bottom"; @@ -344,7 +345,7 @@ if (this.options.display) { var setContextLineSettings; - var isRotated; + var isRotated = this.labelRotation !== 0; var skipRatio; var scaleLabelX; var scaleLabelY; @@ -356,7 +357,6 @@ setContextLineSettings = true; var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 10; var yTickEnd = this.options.position == "bottom" ? this.top + 10 : this.bottom; - isRotated = this.labelRotation !== 0; skipRatio = false; if ((this.options.ticks.fontSize + 4) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) { @@ -429,23 +429,11 @@ } else { setContextLineSettings = true; - var xTickStart = this.options.position == "left" ? this.right : this.left - 10; - var xTickEnd = this.options.position == "left" ? this.right + 10 : this.left; - isRotated = this.labelRotation !== 0; - //skipRatio = false; - - // if ((this.options.ticks.fontSize + 4) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) { - // skipRatio = 1 + Math.floor(((this.options.ticks.fontSize + 4) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight))); - // } + var xTickStart = this.options.position == "right" ? this.left : this.right - 5; + var xTickEnd = this.options.position == "right" ? this.left + 5 : this.right; helpers.each(this.ticks, function(label, index) { - // Blank ticks - // if ((skipRatio > 1 && index % skipRatio > 0) || (label === undefined || label === null)) { - // return; - // } var yLineValue = this.getPixelForTick(index); // xvalues for grid lines - var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option) - var xLabelValue = this.left + (this.width / 2); if (this.options.gridLines.show) { if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) { @@ -480,11 +468,34 @@ } if (this.options.ticks.show) { + var xLabelValue; + var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option) + this.ctx.save(); + + if (this.options.position == "left") { + if (this.options.ticks.mirror) { + xLabelValue = this.right + this.options.ticks.padding; + this.ctx.textAlign = "left"; + } else { + xLabelValue = this.right - this.options.ticks.padding; + this.ctx.textAlign = "right"; + } + } else { + // right side + if (this.options.ticks.mirror) { + xLabelValue = this.left - this.options.ticks.padding; + this.ctx.textAlign = "right"; + } else { + xLabelValue = this.left + this.options.ticks.padding; + this.ctx.textAlign = "left"; + } + } + + this.ctx.translate(xLabelValue, yLabelValue); this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); this.ctx.font = this.font; - this.ctx.textAlign = 'center'; this.ctx.textBaseline = "middle"; this.ctx.fillText(label, 0, 0); this.ctx.restore(); diff --git a/src/core/core.scaleService.js b/src/core/core.scaleService.js index 4b8c74483..bd100fed2 100644 --- a/src/core/core.scaleService.js +++ b/src/core/core.scaleService.js @@ -19,7 +19,7 @@ defaults: {}, registerScaleType: function(type, scaleConstructor, defaults) { this.constructors[type] = scaleConstructor; - this.defaults[type] = helpers.extendDeep({}, Chart.defaults.scale, defaults); + this.defaults[type] = helpers.scaleMerge(Chart.defaults.scale, defaults); }, getScaleConstructor: function(type) { return this.constructors.hasOwnProperty(type) ? this.constructors[type] : undefined; diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js index 2c9ecd4f0..d522ae91c 100644 --- a/src/scales/scale.linear.js +++ b/src/scales/scale.linear.js @@ -101,7 +101,7 @@ // If we are forcing it to begin at 0, but 0 will already be rendered on the chart, // do nothing since that would make the chart weird. If the user really wants a weird chart // axis, they can manually override it - if (this.options.beginAtZero) { + if (this.options.ticks.beginAtZero) { var minSign = helpers.sign(this.min); var maxSign = helpers.sign(this.max); @@ -134,7 +134,7 @@ this.max = helpers.max(this.ticks); this.min = helpers.min(this.ticks); - if (this.options.reverse) { + if (this.options.ticks.reverse) { this.ticks.reverse(); this.start = this.max; diff --git a/src/scales/scale.logarithmic.js b/src/scales/scale.logarithmic.js index 3bc3d02d4..2db11bf28 100644 --- a/src/scales/scale.logarithmic.js +++ b/src/scales/scale.logarithmic.js @@ -8,16 +8,8 @@ var defaultConfig = { position: "left", - // scale label - scaleLabel: { - // actual label - labelString: '', - // display property - show: false, - }, - // label settings - labels: { + ticks: { template: "<%var remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));if (remain === 1 || remain === 2 || remain === 5) {%><%=value.toExponential()%><%} else {%><%= null %><%}%>", } }; @@ -117,7 +109,7 @@ this.max = helpers.max(this.tickValues); this.min = helpers.min(this.tickValues); - if (this.options.reverse) { + if (this.options.ticks.reverse) { this.tickValues.reverse(); this.start = this.max; @@ -127,23 +119,7 @@ this.end = this.max; } - this.ticks = []; - - helpers.each(this.tickValues, function(tick, index, ticks) { - var label; - - if (this.options.labels.userCallback) { - // If the user provided a callback for label generation, use that as first priority - label = this.options.labels.userCallback(tick, index, ticks); - } else if (this.options.labels.template) { - // else fall back to the template string - label = helpers.template(this.options.labels.template, { - value: tick - }); - } - - this.ticks.push(label); // empty string will not render so we're good - }, this); + this.ticks = this.tickValues.slice(); }, // Get the correct value. If the value type is object get the x or y based on whether we are horizontal or not getRightValue: function(rawValue) { diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index 15c78e71f..52a49ef4e 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -1,1225 +1,1323 @@ describe('Linear Scale', function() { - it('Should register the constructor with the scale service', function() { - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - expect(Constructor).not.toBe(undefined); - expect(typeof Constructor).toBe('function'); + it('Should register the constructor with the scale service', function() { + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + expect(Constructor).not.toBe(undefined); + expect(typeof Constructor).toBe('function'); + }); + + it('Should have the correct default config', function() { + var defaultConfig = Chart.scaleService.getScaleDefaults('linear'); + expect(defaultConfig).toEqual({ + display: true, + + gridLines: { + color: "rgba(0, 0, 0, 0.1)", + drawOnChartArea: true, + drawTicks: true, // draw ticks extending towards the label + lineWidth: 1, + offsetGridLines: false, + show: true, + zeroLineColor: "rgba(0,0,0,0.25)", + zeroLineWidth: 1, + }, + position: "left", + scaleLabel: { + fontColor: '#666', + fontFamily: 'Helvetica Neue', + fontSize: 12, + fontStyle: 'normal', + labelString: '', + show: false, + }, + ticks: { + beginAtZero: false, + fontColor: "#666", + fontFamily: "Helvetica Neue", + fontSize: 12, + fontStyle: "normal", + maxRotation: 90, + minRotation: 20, + mirror: false, + padding: 10, + reverse: false, + show: true, + template: "<%=value%>" + } + }); + }); + + it('Should correctly determine the max & min data values', function() { + var scaleID = 'myScale'; + + var mockData = { + datasets: [{ + yAxisID: scaleID, + data: [10, 5, 0, -5, 78, -100] + }, { + yAxisID: 'second scale', + data: [-1000, 1000], + }, { + yAxisID: scaleID, + data: [150] + }] + }; + + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var scale = new Constructor({ + ctx: {}, + options: Chart.scaleService.getScaleDefaults('linear'), // use default config for scale + data: mockData, + id: scaleID }); - it('Should have the correct default config', function() { - var defaultConfig = Chart.scaleService.getScaleDefaults('linear'); - expect(defaultConfig).toEqual({ - display: true, - - gridLines: { - color: "rgba(0, 0, 0, 0.1)", - drawOnChartArea: true, - drawTicks: true, // draw ticks extending towards the label - lineWidth: 1, - offsetGridLines: false, - show: true, - zeroLineColor: "rgba(0,0,0,0.25)", - zeroLineWidth: 1, - }, - position: "left", - scaleLabel: { - fontColor: '#666', - fontFamily: 'Helvetica Neue', - fontSize: 12, - fontStyle: 'normal', - labelString: '', - show: false, - }, - ticks: { - fontColor: "#666", - fontFamily: "Helvetica Neue", - fontSize: 12, - fontStyle: "normal", - maxRotation: 90, - minRotation: 20, - show: true, - template: "<%=value%>" - } - }); - }); + expect(scale).not.toEqual(undefined); // must construct + expect(scale.min).toBe(undefined); // not yet set + expect(scale.max).toBe(undefined); - it('Should correctly determine the max & min data values', function() { - var scaleID = 'myScale'; + // Set arbitrary width and height for now + scale.width = 50; + scale.height = 400; - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, -5, 78, -100] + scale.buildTicks(); + expect(scale.min).toBe(-100); + expect(scale.max).toBe(150); + }); + + it('Should correctly determine the max & min for scatter data', function() { + var scaleID = 'myScale'; + + var mockData = { + datasets: [{ + xAxisID: scaleID, // for the horizontal scale + yAxisID: scaleID, + data: [{ + x: 10, + y: 100 }, { - yAxisID: 'second scale', - data: [-1000, 1000], + x: -10, + y: 0 }, { - yAxisID: scaleID, - data: [150] + x: 0, + y: 0 + }, { + x: 99, + y: 7 }] - }; + }] + }; - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: Chart.scaleService.getScaleDefaults('linear'), // use default config for scale - data: mockData, - id: scaleID - }); - - expect(scale).not.toEqual(undefined); // must construct - expect(scale.min).toBe(undefined); // not yet set - expect(scale.max).toBe(undefined); - - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.buildTicks(); - expect(scale.min).toBe(-100); - expect(scale.max).toBe(150); + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var verticalScale = new Constructor({ + ctx: {}, + options: config, + data: mockData, + id: scaleID }); - it('Should correctly determine the max & min for scatter data', function() { - var scaleID = 'myScale'; + // Set arbitrary width and height for now + verticalScale.width = 50; + verticalScale.height = 400; - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [{ - x: 10, - y: 100 - }, { - x: -10, - y: 0 - }, { - x: 0, - y: 0 - }, { - x: 99, - y: 7 - }] - }] - }; + verticalScale.buildTicks(); + expect(verticalScale.min).toBe(0); + expect(verticalScale.max).toBe(100); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScale = new Constructor({ - ctx: {}, - options: config, - data: mockData, - id: scaleID - }); - - // Set arbitrary width and height for now - verticalScale.width = 50; - verticalScale.height = 400; - - verticalScale.buildTicks(); - expect(verticalScale.min).toBe(0); - expect(verticalScale.max).toBe(100); - - var horizontalConfig = Chart.helpers.clone(config); - horizontalConfig.position = 'bottom'; - var horizontalScale = new Constructor({ - ctx: {}, - options: horizontalConfig, - data: mockData, - id: scaleID, - }); - - // Set arbitrary width and height for now - horizontalScale.width = 400; - horizontalScale.height = 50; - - horizontalScale.buildTicks(); - expect(horizontalScale.min).toBe(-20); - expect(horizontalScale.max).toBe(100); + var horizontalConfig = Chart.helpers.clone(config); + horizontalConfig.position = 'bottom'; + var horizontalScale = new Constructor({ + ctx: {}, + options: horizontalConfig, + data: mockData, + id: scaleID, }); - it('Should correctly determine the min and max data values when stacked mode is turned on', function() { - var scaleID = 'myScale'; + // Set arbitrary width and height for now + horizontalScale.width = 400; + horizontalScale.height = 50; - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, -5, 78, -100] - }, { - yAxisID: 'second scale', - data: [-1000, 1000], - }, { - yAxisID: scaleID, - data: [150, 0, 0, -100, -10, 9] - }] - }; + horizontalScale.buildTicks(); + expect(horizontalScale.min).toBe(-20); + expect(horizontalScale.max).toBe(100); + }); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.stacked = true; // enable scale stacked mode + it('Should correctly determine the min and max data values when stacked mode is turned on', function() { + var scaleID = 'myScale'; - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - data: mockData, - id: scaleID - }); + var mockData = { + datasets: [{ + yAxisID: scaleID, + data: [10, 5, 0, -5, 78, -100] + }, { + yAxisID: 'second scale', + data: [-1000, 1000], + }, { + yAxisID: scaleID, + data: [150, 0, 0, -100, -10, 9] + }] + }; - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + config.stacked = true; // enable scale stacked mode - scale.buildTicks(); - expect(scale.min).toBe(-150); - expect(scale.max).toBe(200); + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var scale = new Constructor({ + ctx: {}, + options: config, + data: mockData, + id: scaleID }); - it('Should ensure that the scale has a max and min that are not equal', function() { - var scaleID = 'myScale'; + // Set arbitrary width and height for now + scale.width = 50; + scale.height = 400; - var mockData = { - datasets: [] - }; + scale.buildTicks(); + expect(scale.min).toBe(-150); + expect(scale.max).toBe(200); + }); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - data: mockData, - id: scaleID - }); + it('Should ensure that the scale has a max and min that are not equal', function() { + var scaleID = 'myScale'; - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; + var mockData = { + datasets: [] + }; - scale.buildTicks(); - expect(scale.min).toBe(-1); - expect(scale.max).toBe(1); + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var scale = new Constructor({ + ctx: {}, + options: config, + data: mockData, + id: scaleID }); - it('should forcibly include 0 in the range if the beginAtZero option is used', function() { - var scaleID = 'myScale'; + // Set arbitrary width and height for now + scale.width = 50; + scale.height = 400; - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [20, 30, 40, 50] - }] - }; + scale.buildTicks(); + expect(scale.min).toBe(-1); + expect(scale.max).toBe(1); + }); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + it('should forcibly include 0 in the range if the beginAtZero option is used', function() { + var scaleID = 'myScale'; + + var mockData = { + datasets: [{ + yAxisID: scaleID, + data: [20, 30, 40, 50] + }] + }; + + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - data: mockData, - id: scaleID - }); - - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; - - scale.buildTicks(); - expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20]); - - config.beginAtZero = true; - scale.buildTicks(); - expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20, 15, 10, 5, 0]); - - mockData.datasets[0].data = [-20, -30, -40, -50]; - scale.buildTicks(); - expect(scale.ticks).toEqual([0, -5, -10, -15, -20, -25, -30, -35, -40, -45, -50]); - - config.beginAtZero = false; - scale.buildTicks(); - expect(scale.ticks).toEqual([-20, -25, -30, -35, -40, -45, -50]); + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var scale = new Constructor({ + ctx: {}, + options: config, + data: mockData, + id: scaleID }); - it('Should generate tick marks', function() { - var scaleID = 'myScale'; + // Set arbitrary width and height for now + scale.width = 50; + scale.height = 400; - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, 25, 78] - }, ] - }; + scale.buildTicks(); + expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20]); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - data: mockData, - id: scaleID - }); + config.ticks.beginAtZero = true; + scale.buildTicks(); + expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20, 15, 10, 5, 0]); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; + mockData.datasets[0].data = [-20, -30, -40, -50]; + scale.buildTicks(); + expect(scale.ticks).toEqual([0, -5, -10, -15, -20, -25, -30, -35, -40, -45, -50]); - scale.buildTicks(); + config.ticks.beginAtZero = false; + scale.buildTicks(); + expect(scale.ticks).toEqual([-20, -25, -30, -35, -40, -45, -50]); + }); - // Counts down because the lines are drawn top to bottom - expect(scale.ticks).toEqual([80, 70, 60, 50, 40, 30, 20, 10, 0]); - expect(scale.start).toBe(0); - expect(scale.end).toBe(80); + it('Should generate tick marks', function() { + var scaleID = 'myScale'; + + var mockData = { + datasets: [{ + yAxisID: scaleID, + data: [10, 5, 0, 25, 78] + }, ] + }; + + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var scale = new Constructor({ + ctx: {}, + options: config, + data: mockData, + id: scaleID }); - it('Should generate tick marks in the correct order in reversed mode', function() { - var scaleID = 'myScale'; + // Set arbitrary width and height for now + scale.width = 50; + scale.height = 400; - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, 25, 78] - }, ] - }; + scale.buildTicks(); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.reverse = true; - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: {}, - options: config, - data: mockData, - id: scaleID - }); + // Counts down because the lines are drawn top to bottom + expect(scale.ticks).toEqual([80, 70, 60, 50, 40, 30, 20, 10, 0]); + expect(scale.start).toBe(0); + expect(scale.end).toBe(80); + }); - // Set arbitrary width and height for now - scale.width = 50; - scale.height = 400; + it('Should generate tick marks in the correct order in reversed mode', function() { + var scaleID = 'myScale'; - scale.buildTicks(); + var mockData = { + datasets: [{ + yAxisID: scaleID, + data: [10, 5, 0, 25, 78] + }, ] + }; - // Reverse mode makes this count up - expect(scale.ticks).toEqual([0, 10, 20, 30, 40, 50, 60, 70, 80]); - expect(scale.start).toBe(80); - expect(scale.end).toBe(0); + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + config.ticks.reverse = true; + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var scale = new Constructor({ + ctx: {}, + options: config, + data: mockData, + id: scaleID }); - it('Should build labels using the default template', function() { - var scaleID = 'myScale'; + // Set arbitrary width and height for now + scale.width = 50; + scale.height = 400; - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, 25, 78] - }, ] - }; + scale.buildTicks(); - var mockContext = window.createMockContext(); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); + // Reverse mode makes this count up + expect(scale.ticks).toEqual([0, 10, 20, 30, 40, 50, 60, 70, 80]); + expect(scale.start).toBe(80); + expect(scale.end).toBe(0); + }); - // Set arbitrary width and height for now - scale.update(50, 400); - expect(scale.ticks).toEqual(['80', '70', '60', '50', '40', '30', '20', '10', '0']); + it('Should build labels using the default template', function() { + var scaleID = 'myScale'; + + var mockData = { + datasets: [{ + yAxisID: scaleID, + data: [10, 5, 0, 25, 78] + }, ] + }; + + var mockContext = window.createMockContext(); + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var scale = new Constructor({ + ctx: mockContext, + options: config, + data: mockData, + id: scaleID }); - it('Should build labels using the user supplied callback', function() { - var scaleID = 'myScale'; + // Set arbitrary width and height for now + scale.update(50, 400); + expect(scale.ticks).toEqual(['80', '70', '60', '50', '40', '30', '20', '10', '0']); + }); - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, 25, 78] - }, ] - }; + it('Should build labels using the user supplied callback', function() { + var scaleID = 'myScale'; - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.ticks.userCallback = function(value, index) { - return index.toString(); - }; + var mockData = { + datasets: [{ + yAxisID: scaleID, + data: [10, 5, 0, 25, 78] + }, ] + }; - var mockContext = window.createMockContext(); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var scale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + config.ticks.userCallback = function(value, index) { + return index.toString(); + }; - scale.update(400, 400); - - // Just the index - expect(scale.ticks).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8']); + var mockContext = window.createMockContext(); + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var scale = new Constructor({ + ctx: mockContext, + options: config, + data: mockData, + id: scaleID }); - it('Should get the correct pixel value for a point', function() { - var scaleID = 'myScale'; + scale.update(400, 400); - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [] - }] - }; + // Just the index + expect(scale.ticks).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8']); + }); - var mockContext = window.createMockContext(); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); + it('Should get the correct pixel value for a point', function() { + var scaleID = 'myScale'; - // Update - verticalScale.update(50, 100); + var mockData = { + datasets: [{ + xAxisID: scaleID, // for the horizontal scale + yAxisID: scaleID, + data: [] + }] + }; - // Fake out positioning of the scale service - verticalScale.left = 0; - verticalScale.top = 0; - verticalScale.right = 50; - verticalScale.bottom = 110; - verticalScale.paddingTop = 5; - verticalScale.paddingBottom = 5; - verticalScale.width = 50; - verticalScale.height = 110; - - expect(verticalScale.getPixelForValue(1, 0, 0)).toBe(5); // top + paddingTop - expect(verticalScale.getPixelForValue(-1, 0, 0)).toBe(105); // bottom - paddingBottom - expect(verticalScale.getPixelForValue(0, 0, 0)).toBe(55); // halfway - - var horizontalConfig = Chart.helpers.clone(config); - horizontalConfig.position = 'bottom'; - var horizontalScale = new Constructor({ - ctx: mockContext, - options: horizontalConfig, - data: mockData, - id: scaleID, - }); - - horizontalScale.update(100, 50); - - // Fake out positioning of the scale service - horizontalScale.left = 0; - horizontalScale.top = 0; - horizontalScale.right = 110; - horizontalScale.bottom = 50; - horizontalScale.paddingLeft = 5; - horizontalScale.paddingRight = 5; - horizontalScale.width = 110; - horizontalScale.height = 50; - - // Range expands to [-2, 2] due to nicenum algorithm - expect(horizontalScale.getPixelForValue(2, 0, 0)).toBe(105); // right - paddingRight - expect(horizontalScale.getPixelForValue(-2, 0, 0)).toBe(5); // left + paddingLeft - expect(horizontalScale.getPixelForValue(0, 0, 0)).toBe(55); // halfway + var mockContext = window.createMockContext(); + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var verticalScale = new Constructor({ + ctx: mockContext, + options: config, + data: mockData, + id: scaleID }); - it('should fit correctly', function() { - var scaleID = 'myScale'; + // Update + verticalScale.update(50, 100); - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [-5, 0, 2, -3, 5] - }] - }; - var mockContext = window.createMockContext(); + // Fake out positioning of the scale service + verticalScale.left = 0; + verticalScale.top = 0; + verticalScale.right = 50; + verticalScale.bottom = 110; + verticalScale.paddingTop = 5; + verticalScale.paddingBottom = 5; + verticalScale.width = 50; + verticalScale.height = 110; - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); + expect(verticalScale.getPixelForValue(1, 0, 0)).toBe(5); // top + paddingTop + expect(verticalScale.getPixelForValue(-1, 0, 0)).toBe(105); // bottom - paddingBottom + expect(verticalScale.getPixelForValue(0, 0, 0)).toBe(55); // halfway - var minSize = verticalScale.update(100, 300); - expect(minSize).toEqual({ - width: 33, - height: 300, - }); - expect(verticalScale.width).toBe(33); - expect(verticalScale.height).toBe(300); - expect(verticalScale.paddingTop).toBe(6); - expect(verticalScale.paddingBottom).toBe(6); - expect(verticalScale.paddingLeft).toBe(0); - expect(verticalScale.paddingRight).toBe(0); - - // Refit with margins to see the padding go away - minSize = verticalScale.update(33, 300, { - left: 0, - right: 0, - top: 15, - bottom: 3 - }); - expect(minSize).toEqual({ - width: 33, - height: 300, - }); - expect(verticalScale.paddingTop).toBe(0); - expect(verticalScale.paddingBottom).toBe(3); - expect(verticalScale.paddingLeft).toBe(0); - expect(verticalScale.paddingRight).toBe(0); - - // Extra size when scale label showing - config.scaleLabel.show = true; - minSize = verticalScale.update(100, 300); - expect(minSize).toEqual({ - width: 51, - height: 300, - }); + var horizontalConfig = Chart.helpers.clone(config); + horizontalConfig.position = 'bottom'; + var horizontalScale = new Constructor({ + ctx: mockContext, + options: horizontalConfig, + data: mockData, + id: scaleID, }); - it('should fit correctly when horizontal', function() { - var scaleID = 'myScale'; + horizontalScale.update(100, 50); - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [-5, 0, 2, -3, 5] - }] - }; - var mockContext = window.createMockContext(); + // Fake out positioning of the scale service + horizontalScale.left = 0; + horizontalScale.top = 0; + horizontalScale.right = 110; + horizontalScale.bottom = 50; + horizontalScale.paddingLeft = 5; + horizontalScale.paddingRight = 5; + horizontalScale.width = 110; + horizontalScale.height = 50; - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.position = "bottom"; - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); + // Range expands to [-2, 2] due to nicenum algorithm + expect(horizontalScale.getPixelForValue(2, 0, 0)).toBe(105); // right - paddingRight + expect(horizontalScale.getPixelForValue(-2, 0, 0)).toBe(5); // left + paddingLeft + expect(horizontalScale.getPixelForValue(0, 0, 0)).toBe(55); // halfway + }); - var minSize = verticalScale.update(100, 300); - expect(minSize).toEqual({ - width: 100, - height: 28, - }); - expect(verticalScale.width).toBe(100); - expect(verticalScale.height).toBe(28); - expect(verticalScale.paddingTop).toBe(0); - expect(verticalScale.paddingBottom).toBe(0); - expect(verticalScale.paddingLeft).toBe(15); - expect(verticalScale.paddingRight).toBe(10); + it('should fit correctly', function() { + var scaleID = 'myScale'; - // Refit with margins to see the padding go away - minSize = verticalScale.update(100, 28, { - left: 10, - right: 6, - top: 15, - bottom: 3 - }); - expect(minSize).toEqual({ - width: 100, - height: 28, - }); - expect(verticalScale.paddingTop).toBe(0); - expect(verticalScale.paddingBottom).toBe(0); - expect(verticalScale.paddingLeft).toBe(5); - expect(verticalScale.paddingRight).toBe(4); + var mockData = { + datasets: [{ + xAxisID: scaleID, // for the horizontal scale + yAxisID: scaleID, + data: [-5, 0, 2, -3, 5] + }] + }; + var mockContext = window.createMockContext(); - // Extra size when scale label showing - config.scaleLabel.show = true; - minSize = verticalScale.update(100, 300); - expect(minSize).toEqual({ - width: 100, - height: 46, - }); + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var verticalScale = new Constructor({ + ctx: mockContext, + options: config, + data: mockData, + id: scaleID }); - it('should draw correctly horizontally', function() { - var scaleID = 'myScale'; + var minSize = verticalScale.update(100, 300); + expect(minSize).toEqual({ + width: 30, + height: 300, + }); + expect(verticalScale.width).toBe(30); + expect(verticalScale.height).toBe(300); + expect(verticalScale.paddingTop).toBe(6); + expect(verticalScale.paddingBottom).toBe(6); + expect(verticalScale.paddingLeft).toBe(0); + expect(verticalScale.paddingRight).toBe(0); - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [-5, 0, 2, -3, 5] - }] - }; - var mockContext = window.createMockContext(); + // Refit with margins to see the padding go away + minSize = verticalScale.update(30, 300, { + left: 0, + right: 0, + top: 15, + bottom: 3 + }); + expect(minSize).toEqual({ + width: 30, + height: 300, + }); + expect(verticalScale.paddingTop).toBe(0); + expect(verticalScale.paddingBottom).toBe(3); + expect(verticalScale.paddingLeft).toBe(0); + expect(verticalScale.paddingRight).toBe(0); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - config.position = "bottom"; - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var horizontalScale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); + // Extra size when scale label showing + config.scaleLabel.show = true; + minSize = verticalScale.update(100, 300); + expect(minSize).toEqual({ + width: 48, + height: 300, + }); + }); - var minSize = horizontalScale.fit(100, 300); - minSize = horizontalScale.fit(100, 28, { - left: 10, - right: 6, - top: 15, - bottom: 3 - }); + it('should fit correctly when horizontal', function() { + var scaleID = 'myScale'; - horizontalScale.left = 0; - horizontalScale.right = minSize.width; - horizontalScale.top = 0; - horizontalScale.bottom = minSize.height; + var mockData = { + datasets: [{ + xAxisID: scaleID, // for the horizontal scale + yAxisID: scaleID, + data: [-5, 0, 2, -3, 5] + }] + }; + var mockContext = window.createMockContext(); - var chartArea = { - top: 100, - bottom: 0, - left: 0, - right: minSize.width - }; - horizontalScale.draw(chartArea); - - expect(mockContext.getCalls()).toEqual([{ - "name": "measureText", - "args": ["-10"] - }, { - "name": "measureText", - "args": ["10"] - }, { - "name": "measureText", - "args": ["-10"] - }, { - "name": "measureText", - "args": ["10"] - }, { - "name": "setFillStyle", - "args": ["#666"] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [5.5, 0] - }, { - "name": "lineTo", - "args": [5.5, 5] - }, { - "name": "moveTo", - "args": [5.5, 100] - }, { - "name": "lineTo", - "args": [5.5, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.25)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [51, 0] - }, { - "name": "lineTo", - "args": [51, 5] - }, { - "name": "moveTo", - "args": [51, 100] - }, { - "name": "lineTo", - "args": [51, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [96.5, 0] - }, { - "name": "lineTo", - "args": [96.5, 5] - }, { - "name": "moveTo", - "args": [96.5, 100] - }, { - "name": "lineTo", - "args": [96.5, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "fillText", - "args": ["-10", 5, 10] - }, { - "name": "fillText", - "args": ["0", 50.5, 10] - }, { - "name": "fillText", - "args": ["10", 96, 10] - }]); - - // Turn off some drawing - config.gridLines.drawTicks = false; - config.gridLines.drawOnChartArea = false; - config.labels.show = false; - config.scaleLabel.show = true; - config.scaleLabel.labelString = 'myLabel' - - mockContext.resetCalls(); - - horizontalScale.draw(); - expect(mockContext.getCalls()).toEqual([{ - "name": "setFillStyle", - "args": ["#666"] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.25)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "fillText", - "args": ["myLabel", 50, 22] - }]); - - // Turn off display - - mockContext.resetCalls(); - config.display = false; - horizontalScale.draw(); - expect(mockContext.getCalls()).toEqual([]); + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + config.position = "bottom"; + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var verticalScale = new Constructor({ + ctx: mockContext, + options: config, + data: mockData, + id: scaleID }); - it('should draw correctly vertically', function() { - var scaleID = 'myScale'; + var minSize = verticalScale.update(100, 300); + expect(minSize).toEqual({ + width: 100, + height: 28, + }); + expect(verticalScale.width).toBe(100); + expect(verticalScale.height).toBe(28); + expect(verticalScale.paddingTop).toBe(0); + expect(verticalScale.paddingBottom).toBe(0); + expect(verticalScale.paddingLeft).toBe(18); + expect(verticalScale.paddingRight).toBe(13); - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [-5, 0, 2, -3, 5] - }] - }; - var mockContext = window.createMockContext(); + // Refit with margins to see the padding go away + minSize = verticalScale.update(100, 28, { + left: 10, + right: 6, + top: 15, + bottom: 3 + }); + expect(minSize).toEqual({ + width: 100, + height: 28, + }); + expect(verticalScale.paddingTop).toBe(0); + expect(verticalScale.paddingBottom).toBe(0); + expect(verticalScale.paddingLeft).toBe(8); + expect(verticalScale.paddingRight).toBe(7); - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - var Constructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); + // Extra size when scale label showing + config.scaleLabel.show = true; + minSize = verticalScale.update(100, 300); + expect(minSize).toEqual({ + width: 100, + height: 46, + }); + }); - var minSize = verticalScale.fit(100, 300); - minSize = verticalScale.fit(33, 300, { - left: 0, - right: 0, - top: 15, - bottom: 3 - }); - expect(minSize).toEqual({ - width: 33, - height: 300, - }); + it('should draw correctly horizontally', function() { + var scaleID = 'myScale'; - verticalScale.left = 0; - verticalScale.right = minSize.width; - verticalScale.top = 0; - verticalScale.bottom = minSize.height; + var mockData = { + datasets: [{ + xAxisID: scaleID, // for the horizontal scale + yAxisID: scaleID, + data: [-5, 0, 2, -3, 5] + }] + }; + var mockContext = window.createMockContext(); - var chartArea = { - top: 0, - bottom: minSize.height, - left: minSize.width, - right: minSize.width + 100 - }; - verticalScale.draw(chartArea); + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + config.position = "bottom"; + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var horizontalScale = new Constructor({ + ctx: mockContext, + options: config, + data: mockData, + id: scaleID + }); - expect(mockContext.getCalls()).toEqual([{ - "name": "measureText", - "args": ["5"] - }, { - "name": "measureText", - "args": ["4"] - }, { - "name": "measureText", - "args": ["3"] - }, { - "name": "measureText", - "args": ["2"] - }, { - "name": "measureText", - "args": ["1"] - }, { - "name": "measureText", - "args": ["0"] - }, { - "name": "measureText", - "args": ["-1"] - }, { - "name": "measureText", - "args": ["-2"] - }, { - "name": "measureText", - "args": ["-3"] - }, { - "name": "measureText", - "args": ["-4"] - }, { - "name": "measureText", - "args": ["-5"] - }, { - "name": "measureText", - "args": ["5"] - }, { - "name": "measureText", - "args": ["4"] - }, { - "name": "measureText", - "args": ["3"] - }, { - "name": "measureText", - "args": ["2"] - }, { - "name": "measureText", - "args": ["1"] - }, { - "name": "measureText", - "args": ["0"] - }, { - "name": "measureText", - "args": ["-1"] - }, { - "name": "measureText", - "args": ["-2"] - }, { - "name": "measureText", - "args": ["-3"] - }, { - "name": "measureText", - "args": ["-4"] - }, { - "name": "measureText", - "args": ["-5"] - }, { - "name": "setFillStyle", - "args": ["#666"] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 0.5] - }, { - "name": "lineTo", - "args": [33, 0.5] - }, { - "name": "moveTo", - "args": [33, 0.5] - }, { - "name": "lineTo", - "args": [133, 0.5] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 30.19999999999999] - }, { - "name": "lineTo", - "args": [33, 30.19999999999999] - }, { - "name": "moveTo", - "args": [33, 30.19999999999999] - }, { - "name": "lineTo", - "args": [133, 30.19999999999999] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 59.900000000000006] - }, { - "name": "lineTo", - "args": [33, 59.900000000000006] - }, { - "name": "moveTo", - "args": [33, 59.900000000000006] - }, { - "name": "lineTo", - "args": [133, 59.900000000000006] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 89.6] - }, { - "name": "lineTo", - "args": [33, 89.6] - }, { - "name": "moveTo", - "args": [33, 89.6] - }, { - "name": "lineTo", - "args": [133, 89.6] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 119.30000000000001] - }, { - "name": "lineTo", - "args": [33, 119.30000000000001] - }, { - "name": "moveTo", - "args": [33, 119.30000000000001] - }, { - "name": "lineTo", - "args": [133, 119.30000000000001] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.25)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 149] - }, { - "name": "lineTo", - "args": [33, 149] - }, { - "name": "moveTo", - "args": [33, 149] - }, { - "name": "lineTo", - "args": [133, 149] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 178.7] - }, { - "name": "lineTo", - "args": [33, 178.7] - }, { - "name": "moveTo", - "args": [33, 178.7] - }, { - "name": "lineTo", - "args": [133, 178.7] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 208.4] - }, { - "name": "lineTo", - "args": [33, 208.4] - }, { - "name": "moveTo", - "args": [33, 208.4] - }, { - "name": "lineTo", - "args": [133, 208.4] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 238.1] - }, { - "name": "lineTo", - "args": [33, 238.1] - }, { - "name": "moveTo", - "args": [33, 238.1] - }, { - "name": "lineTo", - "args": [133, 238.1] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 267.8] - }, { - "name": "lineTo", - "args": [33, 267.8] - }, { - "name": "moveTo", - "args": [33, 267.8] - }, { - "name": "lineTo", - "args": [133, 267.8] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 297.5] - }, { - "name": "lineTo", - "args": [33, 297.5] - }, { - "name": "moveTo", - "args": [33, 297.5] - }, { - "name": "lineTo", - "args": [133, 297.5] - }, { - "name": "stroke", - "args": [] - }, { - "name": "fillText", - "args": ["5", 23, 0] - }, { - "name": "fillText", - "args": ["4", 23, 29.69999999999999] - }, { - "name": "fillText", - "args": ["3", 23, 59.400000000000006] - }, { - "name": "fillText", - "args": ["2", 23, 89.1] - }, { - "name": "fillText", - "args": ["1", 23, 118.80000000000001] - }, { - "name": "fillText", - "args": ["0", 23, 148.5] - }, { - "name": "fillText", - "args": ["-1", 23, 178.2] - }, { - "name": "fillText", - "args": ["-2", 23, 207.9] - }, { - "name": "fillText", - "args": ["-3", 23, 237.6] - }, { - "name": "fillText", - "args": ["-4", 23, 267.3] - }, { - "name": "fillText", - "args": ["-5", 23, 297] - }]); + var minSize = horizontalScale.update(100, 300); + minSize = horizontalScale.update(100, 28, { + left: 10, + right: 6, + top: 15, + bottom: 3 + }); - // Turn off some drawing - config.gridLines.drawTicks = false; - config.gridLines.drawOnChartArea = false; - config.labels.show = false; - config.scaleLabel.show = true; + horizontalScale.left = 0; + horizontalScale.right = minSize.width; + horizontalScale.top = 0; + horizontalScale.bottom = minSize.height; - mockContext.resetCalls(); + var chartArea = { + top: 100, + bottom: 0, + left: 0, + right: minSize.width + }; + mockContext.resetCalls(); + horizontalScale.draw(chartArea); - verticalScale.draw(); - expect(mockContext.getCalls()).toEqual([{ - "name": "setFillStyle", - "args": ["#666"] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.25)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "save", - "args": [] - }, { - "name": "translate", - "args": [6, 150] - }, { - "name": "rotate", - "args": [-1.5707963267948966] - }, { - "name": "fillText", - "args": ["", 0, 0] - }, { - "name": "restore", - "args": [] - }]); - }); - }); \ No newline at end of file + var expected = [{ + "name": "setFillStyle", + "args": ["#666"] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [8.5, 0] + }, { + "name": "lineTo", + "args": [8.5, 10] + }, { + "name": "moveTo", + "args": [8.5, 100] + }, { + "name": "lineTo", + "args": [8.5, 0] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [8, 8] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["-10", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0,0,0,0.25)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [51.5, 0] + }, { + "name": "lineTo", + "args": [51.5, 10] + }, { + "name": "moveTo", + "args": [51.5, 100] + }, { + "name": "lineTo", + "args": [51.5, 0] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [51, 8] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["0", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [93.5, 0] + }, { + "name": "lineTo", + "args": [93.5, 10] + }, { + "name": "moveTo", + "args": [93.5, 100] + }, { + "name": "lineTo", + "args": [93.5, 0] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [93, 8] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["10", 0, 0] + }, { + "name": "restore", + "args": [] + }]; + expect(mockContext.getCalls()).toEqual(expected); + + // Turn off some drawing + config.gridLines.drawTicks = false; + config.gridLines.drawOnChartArea = false; + config.ticks.show = false; + config.scaleLabel.show = true; + config.scaleLabel.labelString = 'myLabel' + + mockContext.resetCalls(); + + horizontalScale.draw(); + expect(mockContext.getCalls()).toEqual([{ + "name": "setFillStyle", + "args": ["#666"] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0,0,0,0.25)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "fillText", + "args": ["myLabel", 50, 22] + }]); + + // Turn off display + + mockContext.resetCalls(); + config.display = false; + horizontalScale.draw(); + expect(mockContext.getCalls()).toEqual([]); + }); + + it('should draw correctly vertically', function() { + var scaleID = 'myScale'; + + var mockData = { + datasets: [{ + xAxisID: scaleID, // for the horizontal scale + yAxisID: scaleID, + data: [-5, 0, 2, -3, 5] + }] + }; + var mockContext = window.createMockContext(); + + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); + var Constructor = Chart.scaleService.getScaleConstructor('linear'); + var verticalScale = new Constructor({ + ctx: mockContext, + options: config, + data: mockData, + id: scaleID + }); + + var minSize = verticalScale.update(100, 300); + minSize = verticalScale.update(30, 300, { + left: 0, + right: 0, + top: 15, + bottom: 3 + }); + expect(minSize).toEqual({ + width: 30, + height: 300, + }); + + verticalScale.left = 0; + verticalScale.right = minSize.width; + verticalScale.top = 0; + verticalScale.bottom = minSize.height; + + var chartArea = { + top: 0, + bottom: minSize.height, + left: minSize.width, + right: minSize.width + 100 + }; + + mockContext.resetCalls(); + verticalScale.draw(chartArea); + + expect(mockContext.getCalls()).toEqual([{ + "name": "setFillStyle", + "args": ["#666"] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 0.5] + }, { + "name": "lineTo", + "args": [30, 0.5] + }, { + "name": "moveTo", + "args": [30, 0.5] + }, { + "name": "lineTo", + "args": [130, 0.5] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 0] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["5", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 30.2] + }, { + "name": "lineTo", + "args": [30, 30.2] + }, { + "name": "moveTo", + "args": [30, 30.2] + }, { + "name": "lineTo", + "args": [130, 30.2] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 29.7] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["4", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 59.9] + }, { + "name": "lineTo", + "args": [30, 59.9] + }, { + "name": "moveTo", + "args": [30, 59.9] + }, { + "name": "lineTo", + "args": [130, 59.9] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 59.4] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["3", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 89.6] + }, { + "name": "lineTo", + "args": [30, 89.6] + }, { + "name": "moveTo", + "args": [30, 89.6] + }, { + "name": "lineTo", + "args": [130, 89.6] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 89.1] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["2", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 119.3] + }, { + "name": "lineTo", + "args": [30, 119.3] + }, { + "name": "moveTo", + "args": [30, 119.3] + }, { + "name": "lineTo", + "args": [130, 119.3] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 118.8] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["1", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0,0,0,0.25)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 149] + }, { + "name": "lineTo", + "args": [30, 149] + }, { + "name": "moveTo", + "args": [30, 149] + }, { + "name": "lineTo", + "args": [130, 149] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 148.5] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["0", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 178.7] + }, { + "name": "lineTo", + "args": [30, 178.7] + }, { + "name": "moveTo", + "args": [30, 178.7] + }, { + "name": "lineTo", + "args": [130, 178.7] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 178.2] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["-1", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 208.4] + }, { + "name": "lineTo", + "args": [30, 208.4] + }, { + "name": "moveTo", + "args": [30, 208.4] + }, { + "name": "lineTo", + "args": [130, 208.4] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 207.9] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["-2", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 238.1] + }, { + "name": "lineTo", + "args": [30, 238.1] + }, { + "name": "moveTo", + "args": [30, 238.1] + }, { + "name": "lineTo", + "args": [130, 238.1] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 237.6] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["-3", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 267.8] + }, { + "name": "lineTo", + "args": [30, 267.8] + }, { + "name": "moveTo", + "args": [30, 267.8] + }, { + "name": "lineTo", + "args": [130, 267.8] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 267.3] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["-4", 0, 0] + }, { + "name": "restore", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "moveTo", + "args": [25, 297.5] + }, { + "name": "lineTo", + "args": [30, 297.5] + }, { + "name": "moveTo", + "args": [30, 297.5] + }, { + "name": "lineTo", + "args": [130, 297.5] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [20, 297] + }, { + "name": "rotate", + "args": [-0] + }, { + "name": "fillText", + "args": ["-5", 0, 0] + }, { + "name": "restore", + "args": [] + }]); + + // Turn off some drawing + config.gridLines.drawTicks = false; + config.gridLines.drawOnChartArea = false; + config.ticks.show = false; + config.scaleLabel.show = true; + + mockContext.resetCalls(); + + verticalScale.draw(); + expect(mockContext.getCalls()).toEqual([{ + "name": "setFillStyle", + "args": ["#666"] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0,0,0,0.25)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "setLineWidth", + "args": [1] + }, { + "name": "setStrokeStyle", + "args": ["rgba(0, 0, 0, 0.1)"] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "beginPath", + "args": [] + }, { + "name": "stroke", + "args": [] + }, { + "name": "save", + "args": [] + }, { + "name": "translate", + "args": [6, 150] + }, { + "name": "rotate", + "args": [-1.5707963267948966] + }, { + "name": "fillText", + "args": ["", 0, 0] + }, { + "name": "restore", + "args": [] + }]); + }); +}); \ No newline at end of file diff --git a/test/scale.logarithmic.tests.js b/test/scale.logarithmic.tests.js index 34cb88ae6..30cc240d9 100644 --- a/test/scale.logarithmic.tests.js +++ b/test/scale.logarithmic.tests.js @@ -10,16 +10,17 @@ describe('Logarithmic Scale tests', function() { var defaultConfig = Chart.scaleService.getScaleDefaults('logarithmic'); expect(defaultConfig).toEqual({ display: true, - position: "left", gridLines: { - show: true, color: "rgba(0, 0, 0, 0.1)", - lineWidth: 1, drawOnChartArea: true, drawTicks: true, - zeroLineWidth: 1, + lineWidth: 1, + offsetGridLines: false, + show: true, zeroLineColor: "rgba(0,0,0,0.25)", + zeroLineWidth: 1, }, + position: "left", scaleLabel: { fontColor: '#666', fontFamily: 'Helvetica Neue', @@ -28,18 +29,20 @@ describe('Logarithmic Scale tests', function() { labelString: '', show: false, }, - reverse: false, - override: null, - labels: { - show: true, - mirror: false, - padding: 10, - template: "<%var remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));if (remain === 1 || remain === 2 || remain === 5) {%><%=value.toExponential()%><%} else {%><%= null %><%}%>", + ticks: { + beginAtZero: false, + fontColor: "#666", + fontFamily: "Helvetica Neue", fontSize: 12, fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue" - } + maxRotation: 90, + minRotation: 20, + mirror: false, + padding: 10, + reverse: false, + show: true, + template: "<%var remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));if (remain === 1 || remain === 2 || remain === 5) {%><%=value.toExponential()%><%} else {%><%= null %><%}%>", + }, }); }); @@ -59,9 +62,10 @@ describe('Logarithmic Scale tests', function() { }] }; + var mockContext = window.createMockContext(); var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); var scale = new Constructor({ - ctx: {}, + ctx: mockContext, options: Chart.scaleService.getScaleDefaults('logarithmic'), // use default config for scale data: mockData, id: scaleID @@ -71,9 +75,9 @@ describe('Logarithmic Scale tests', function() { expect(scale.min).toBe(undefined); // not yet set expect(scale.max).toBe(undefined); - scale.calculateRange(); - expect(scale.min).toBe(5); - expect(scale.max).toBe(5000); + scale.update(400, 400); + expect(scale.min).toBe(1); + expect(scale.max).toBe(10000); }); it('Should correctly determine the max & min for scatter data', function() { @@ -99,31 +103,32 @@ describe('Logarithmic Scale tests', function() { }] }; + var mockContext = window.createMockContext(); var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); var verticalScale = new Constructor({ - ctx: {}, + ctx: mockContext, options: config, data: mockData, id: scaleID }); - verticalScale.calculateRange(); - expect(verticalScale.min).toBe(6); - expect(verticalScale.max).toBe(121); + verticalScale.update(400, 400); + expect(verticalScale.min).toBe(1); + expect(verticalScale.max).toBe(1000); var horizontalConfig = Chart.helpers.clone(config); horizontalConfig.position = 'bottom'; var horizontalScale = new Constructor({ - ctx: {}, + ctx: mockContext, options: horizontalConfig, data: mockData, id: scaleID, }); - horizontalScale.calculateRange(); - expect(horizontalScale.min).toBe(2); - expect(horizontalScale.max).toBe(99); + horizontalScale.update(400, 400); + expect(horizontalScale.min).toBe(1); + expect(horizontalScale.max).toBe(100); }); it('Should correctly determine the min and max data values when stacked mode is turned on', function() { @@ -145,17 +150,18 @@ describe('Logarithmic Scale tests', function() { var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); config.stacked = true; // enable scale stacked mode + var mockContext = window.createMockContext(); var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); var scale = new Constructor({ - ctx: {}, + ctx: mockContext, options: config, data: mockData, id: scaleID }); - scale.calculateRange(); - expect(scale.min).toBe(11); - expect(scale.max).toBe(160); + scale.update(400, 400); + expect(scale.min).toBe(10); + expect(scale.max).toBe(1000); }); it('Should ensure that the scale has a max and min that are not equal', function() { @@ -165,16 +171,17 @@ describe('Logarithmic Scale tests', function() { datasets: [] }; + var mockContext = window.createMockContext(); var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); var scale = new Constructor({ - ctx: {}, + ctx: mockContext, options: config, data: mockData, id: scaleID }); - scale.calculateRange(); + scale.update(400, 00); expect(scale.min).toBe(1); expect(scale.max).toBe(10); @@ -183,7 +190,7 @@ describe('Logarithmic Scale tests', function() { data: [0.15, 0.15] }]; - scale.calculateRange(); + scale.update(400, 400); expect(scale.min).toBe(0.01); expect(scale.max).toBe(1); }); @@ -207,13 +214,11 @@ describe('Logarithmic Scale tests', function() { id: scaleID }); - scale.calculateRange(); - expect(scale.ticks).toBe(undefined); // not set + // Set arbitrary width and height for now + scale.width = 50; + scale.height = 400; - // Large enough to be unimportant - var maxWidth = 400; - var maxHeight = 400; - scale.generateTicks(maxWidth, maxHeight); + scale.buildTicks(); // Counts down because the lines are drawn top to bottom expect(scale.ticks).toEqual([100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]); @@ -232,7 +237,7 @@ describe('Logarithmic Scale tests', function() { }; var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); - config.reverse = true; + config.ticks.reverse = true; var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); var scale = new Constructor({ @@ -242,13 +247,11 @@ describe('Logarithmic Scale tests', function() { id: scaleID }); - scale.calculateRange(); - expect(scale.ticks).toBe(undefined); // not set + // Set arbitrary width and height for now + scale.width = 50; + scale.height = 400; - // Large enough to be unimportant - var maxWidth = 400; - var maxHeight = 400; - scale.generateTicks(maxWidth, maxHeight); + scale.buildTicks(); // Counts down because the lines are drawn top to bottom expect(scale.ticks).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]); @@ -256,43 +259,6 @@ describe('Logarithmic Scale tests', function() { expect(scale.end).toBe(1); }); - it('Should generate tick marks using the user supplied options', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - yAxisID: scaleID, - data: [10, 5, 0, 25, 78] - }, ] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); - config.override = { - steps: 9, - start: 1, - stepWidth: 1 - }; - - var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); - var scale = new Constructor({ - ctx: {}, - options: config, - data: mockData, - id: scaleID - }); - - scale.calculateRange(); - - // Large enough to be unimportant - var maxWidth = 400; - var maxHeight = 400; - scale.generateTicks(maxWidth, maxHeight); - - expect(scale.ticks).toEqual([10, 9, 8, 7, 6, 5, 4, 3, 2, 1]); - expect(scale.start).toBe(1); - expect(scale.end).toBe(10); - }); - it('Should build labels using the default template', function() { var scaleID = 'myScale'; @@ -303,26 +269,19 @@ describe('Logarithmic Scale tests', function() { }, ] }; + var mockContext = window.createMockContext(); var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); var scale = new Constructor({ - ctx: {}, + ctx: mockContext, options: config, data: mockData, id: scaleID }); - scale.calculateRange(); + scale.update(400, 400); - // Large enough to be unimportant - var maxWidth = 400; - var maxHeight = 400; - scale.generateTicks(maxWidth, maxHeight); - - // Generate labels - scale.buildLabels(); - - expect(scale.labels).toEqual(['1e+2', '', '', '', '', '5e+1', '', '', '2e+1', '1e+1', '', '', '', '', '5e+0', '', '', '2e+0', '1e+0']); + expect(scale.ticks).toEqual(['1e+2', '', '', '', '', '5e+1', '', '', '2e+1', '1e+1', '', '', '', '', '5e+0', '', '', '2e+0', '1e+0']); }); it('Should build labels using the user supplied callback', function() { @@ -336,30 +295,23 @@ describe('Logarithmic Scale tests', function() { }; var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); - config.labels.userCallback = function(value, index) { + config.ticks.userCallback = function(value, index) { return index.toString(); }; + var mockContext = window.createMockContext(); var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); var scale = new Constructor({ - ctx: {}, + ctx: mockContext, options: config, data: mockData, id: scaleID }); - scale.calculateRange(); - - // Large enough to be unimportant - var maxWidth = 400; - var maxHeight = 400; - scale.generateTicks(maxWidth, maxHeight); - - // Generate labels - scale.buildLabels(); + scale.update(400, 400); // Just the index - expect(scale.labels).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18']); + expect(scale.ticks).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18']); }); it('Should get the correct pixel value for a point', function() { @@ -373,17 +325,17 @@ describe('Logarithmic Scale tests', function() { }] }; + var mockContext = window.createMockContext(); var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); var verticalScale = new Constructor({ - ctx: {}, + ctx: mockContext, options: config, data: mockData, id: scaleID }); - verticalScale.calculateRange(); - verticalScale.generateTicks(50, 100); + verticalScale.update(50, 100); // Fake out positioning of the scale service verticalScale.left = 0; @@ -395,21 +347,20 @@ describe('Logarithmic Scale tests', function() { verticalScale.width = 50; verticalScale.height = 110; - expect(verticalScale.getPointPixelForValue(100, 0, 0)).toBe(5); // top + paddingTop - expect(verticalScale.getPointPixelForValue(1, 0, 0)).toBe(105); // bottom - paddingBottom - expect(verticalScale.getPointPixelForValue(10, 0, 0)).toBe(55); // halfway + expect(verticalScale.getPixelForValue(100, 0, 0)).toBe(5); // top + paddingTop + expect(verticalScale.getPixelForValue(1, 0, 0)).toBe(105); // bottom - paddingBottom + expect(verticalScale.getPixelForValue(10, 0, 0)).toBe(55); // halfway var horizontalConfig = Chart.helpers.clone(config); horizontalConfig.position = 'bottom'; var horizontalScale = new Constructor({ - ctx: {}, + ctx: mockContext, options: horizontalConfig, data: mockData, id: scaleID, }); - horizontalScale.calculateRange(); - horizontalScale.generateTicks(100, 50); + horizontalScale.update(100, 50); // Fake out positioning of the scale service horizontalScale.left = 0; @@ -421,1185 +372,8 @@ describe('Logarithmic Scale tests', function() { horizontalScale.width = 110; horizontalScale.height = 50; - // Range expands to [-2, 2] due to nicenum algorithm - expect(horizontalScale.getPointPixelForValue(100, 0, 0)).toBe(105); // right - paddingRight - expect(horizontalScale.getPointPixelForValue(1, 0, 0)).toBe(5); // left + paddingLeft - expect(horizontalScale.getPointPixelForValue(10, 0, 0)).toBe(55); // halfway - }); - - it('should get the correct pixel value for a bar', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [10, 5, 1, 25, 78] - }] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); - var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); - var verticalScale = new Constructor({ - ctx: {}, - options: config, - data: mockData, - id: scaleID - }); - - verticalScale.calculateRange(); - verticalScale.generateTicks(50, 100); - - // Fake out positioning of the scale service - verticalScale.left = 0; - verticalScale.top = 0; - verticalScale.right = 50; - verticalScale.bottom = 110; - verticalScale.paddingTop = 5; - verticalScale.paddingBottom = 5; - verticalScale.width = 50; - verticalScale.height = 110; - - expect(verticalScale.calculateBarBase()).toBe(105); // bottom - expect(verticalScale.calculateBarY(0, 3)).toBe(35.10299956639811); // bottom - }); - - it('should fit correctly', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [10, 5, 1, 25, 78] - }] - }; - var mockContext = window.createMockContext(); - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); - var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); - - var minSize = verticalScale.fit(100, 300); - expect(minSize).toEqual({ - width: 53, - height: 300, - }); - expect(verticalScale.width).toBe(53); - expect(verticalScale.height).toBe(300); - expect(verticalScale.paddingTop).toBe(6); - expect(verticalScale.paddingBottom).toBe(6); - expect(verticalScale.paddingLeft).toBe(0); - expect(verticalScale.paddingRight).toBe(0); - - // Refit with margins to see the padding go away - minSize = verticalScale.fit(53, 300, { - left: 0, - right: 0, - top: 15, - bottom: 3 - }); - expect(minSize).toEqual({ - width: 53, - height: 300, - }); - expect(verticalScale.paddingTop).toBe(0); - expect(verticalScale.paddingBottom).toBe(3); - expect(verticalScale.paddingLeft).toBe(0); - expect(verticalScale.paddingRight).toBe(0); - - config.scaleLabel.show = true; - minSize = verticalScale.fit(100, 300); - expect(minSize).toEqual({ - width: 71, - height: 300, - }); - }); - - it('should fit correctly when horizontal', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [10, 5, 1, 25, 78] - }] - }; - var mockContext = window.createMockContext(); - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); - config.position = "bottom"; - var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); - - var minSize = verticalScale.fit(100, 300); - expect(minSize).toEqual({ - width: 100, - height: 28, - }); - expect(verticalScale.width).toBe(100); - expect(verticalScale.height).toBe(28); - expect(verticalScale.paddingTop).toBe(0); - expect(verticalScale.paddingBottom).toBe(0); - expect(verticalScale.paddingLeft).toBe(20); - expect(verticalScale.paddingRight).toBe(20); - - // Refit with margins to see the padding go away - minSize = verticalScale.fit(100, 28, { - left: 10, - right: 6, - top: 15, - bottom: 3 - }); - expect(minSize).toEqual({ - width: 100, - height: 28, - }); - expect(verticalScale.paddingTop).toBe(0); - expect(verticalScale.paddingBottom).toBe(0); - expect(verticalScale.paddingLeft).toBe(10); - expect(verticalScale.paddingRight).toBe(14); - - config.scaleLabel.show = true; - minSize = verticalScale.fit(100, 300); - expect(minSize).toEqual({ - width: 100, - height: 46, - }); - }); - - it('should draw correctly horizontally', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [10, 5, 1, 25, 78] - }] - }; - var mockContext = window.createMockContext(); - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); - config.position = "bottom"; - var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); - var horizontalScale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); - - var minSize = horizontalScale.fit(100, 300); - minSize = horizontalScale.fit(100, 28, { - left: 10, - right: 6, - top: 15, - bottom: 3 - }); - - horizontalScale.left = 0; - horizontalScale.right = minSize.width; - horizontalScale.top = 0; - horizontalScale.bottom = minSize.height; - - var chartArea = { - top: 100, - bottom: 0, - left: 0, - right: minSize.width - }; - horizontalScale.draw(chartArea); - - expect(mockContext.getCalls()).toEqual([{ - "name": "measureText", - "args": ["1e+0"] - }, { - "name": "measureText", - "args": ["1e+2"] - }, { - "name": "measureText", - "args": ["1e+0"] - }, { - "name": "measureText", - "args": ["1e+2"] - }, { - "name": "setFillStyle", - "args": ["#666"] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.25)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [10.5, 0] - }, { - "name": "lineTo", - "args": [10.5, 5] - }, { - "name": "moveTo", - "args": [10.5, 100] - }, { - "name": "lineTo", - "args": [10.5, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [21.939139835231288, 0] - }, { - "name": "lineTo", - "args": [21.939139835231288, 5] - }, { - "name": "moveTo", - "args": [21.939139835231288, 100] - }, { - "name": "lineTo", - "args": [21.939139835231288, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28.63060767934717, 0] - }, { - "name": "lineTo", - "args": [28.63060767934717, 5] - }, { - "name": "moveTo", - "args": [28.63060767934717, 100] - }, { - "name": "lineTo", - "args": [28.63060767934717, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [33.378279670462575, 0] - }, { - "name": "lineTo", - "args": [33.378279670462575, 5] - }, { - "name": "moveTo", - "args": [33.378279670462575, 100] - }, { - "name": "lineTo", - "args": [33.378279670462575, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [37.06086016476871, 0] - }, { - "name": "lineTo", - "args": [37.06086016476871, 5] - }, { - "name": "moveTo", - "args": [37.06086016476871, 100] - }, { - "name": "lineTo", - "args": [37.06086016476871, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [40.06974751457846, 0] - }, { - "name": "lineTo", - "args": [40.06974751457846, 5] - }, { - "name": "moveTo", - "args": [40.06974751457846, 100] - }, { - "name": "lineTo", - "args": [40.06974751457846, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [42.613725520541756, 0] - }, { - "name": "lineTo", - "args": [42.613725520541756, 5] - }, { - "name": "moveTo", - "args": [42.613725520541756, 100] - }, { - "name": "lineTo", - "args": [42.613725520541756, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [44.817419505693856, 0] - }, { - "name": "lineTo", - "args": [44.817419505693856, 5] - }, { - "name": "moveTo", - "args": [44.817419505693856, 100] - }, { - "name": "lineTo", - "args": [44.817419505693856, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [46.76121535869434, 0] - }, { - "name": "lineTo", - "args": [46.76121535869434, 5] - }, { - "name": "moveTo", - "args": [46.76121535869434, 100] - }, { - "name": "lineTo", - "args": [46.76121535869434, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [48.5, 0] - }, { - "name": "lineTo", - "args": [48.5, 5] - }, { - "name": "moveTo", - "args": [48.5, 100] - }, { - "name": "lineTo", - "args": [48.5, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [59.93913983523129, 0] - }, { - "name": "lineTo", - "args": [59.93913983523129, 5] - }, { - "name": "moveTo", - "args": [59.93913983523129, 100] - }, { - "name": "lineTo", - "args": [59.93913983523129, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [66.63060767934718, 0] - }, { - "name": "lineTo", - "args": [66.63060767934718, 5] - }, { - "name": "moveTo", - "args": [66.63060767934718, 100] - }, { - "name": "lineTo", - "args": [66.63060767934718, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [71.37827967046258, 0] - }, { - "name": "lineTo", - "args": [71.37827967046258, 5] - }, { - "name": "moveTo", - "args": [71.37827967046258, 100] - }, { - "name": "lineTo", - "args": [71.37827967046258, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [75.06086016476871, 0] - }, { - "name": "lineTo", - "args": [75.06086016476871, 5] - }, { - "name": "moveTo", - "args": [75.06086016476871, 100] - }, { - "name": "lineTo", - "args": [75.06086016476871, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [78.06974751457845, 0] - }, { - "name": "lineTo", - "args": [78.06974751457845, 5] - }, { - "name": "moveTo", - "args": [78.06974751457845, 100] - }, { - "name": "lineTo", - "args": [78.06974751457845, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [80.61372552054176, 0] - }, { - "name": "lineTo", - "args": [80.61372552054176, 5] - }, { - "name": "moveTo", - "args": [80.61372552054176, 100] - }, { - "name": "lineTo", - "args": [80.61372552054176, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [82.81741950569385, 0] - }, { - "name": "lineTo", - "args": [82.81741950569385, 5] - }, { - "name": "moveTo", - "args": [82.81741950569385, 100] - }, { - "name": "lineTo", - "args": [82.81741950569385, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [84.76121535869434, 0] - }, { - "name": "lineTo", - "args": [84.76121535869434, 5] - }, { - "name": "moveTo", - "args": [84.76121535869434, 100] - }, { - "name": "lineTo", - "args": [84.76121535869434, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [86.5, 0] - }, { - "name": "lineTo", - "args": [86.5, 5] - }, { - "name": "moveTo", - "args": [86.5, 100] - }, { - "name": "lineTo", - "args": [86.5, 0] - }, { - "name": "stroke", - "args": [] - }, { - "name": "fillText", - "args": ["1e+0", 10, 10] - }, { - "name": "fillText", - "args": ["2e+0", 21.439139835231288, 10] - }, { - "name": "fillText", - "args": ["5e+0", 36.56086016476871, 10] - }, { - "name": "fillText", - "args": ["1e+1", 48, 10] - }, { - "name": "fillText", - "args": ["2e+1", 59.43913983523129, 10] - }, { - "name": "fillText", - "args": ["5e+1", 74.56086016476871, 10] - }, { - "name": "fillText", - "args": ["1e+2", 86, 10] - }]); - - // Turn off some drawing - config.gridLines.drawTicks = false; - config.gridLines.drawOnChartArea = false; - config.labels.show = false; - config.scaleLabel.show = true; - config.scaleLabel.labelString = 'my label'; - - mockContext.resetCalls(); - - horizontalScale.draw(); - expect(mockContext.getCalls()).toEqual([{ - "name": "setFillStyle", - "args": ["#666"] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.25)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "fillText", - "args": ["my label", 50, 22] - }]); - - // Turn off display - - mockContext.resetCalls(); - config.display = false; - horizontalScale.draw(); - expect(mockContext.getCalls()).toEqual([]); - }); - - it('should draw correctly vertically', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, // for the horizontal scale - yAxisID: scaleID, - data: [10, 5, 1, 2.5, 7.8] - }] - }; - var mockContext = window.createMockContext(); - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic')); - var Constructor = Chart.scaleService.getScaleConstructor('logarithmic'); - var verticalScale = new Constructor({ - ctx: mockContext, - options: config, - data: mockData, - id: scaleID - }); - - var minSize = verticalScale.fit(100, 300); - minSize = verticalScale.fit(33, 300, { - left: 0, - right: 0, - top: 15, - bottom: 3 - }); - expect(minSize).toEqual({ - width: 33, - height: 300, - }); - - verticalScale.left = 0; - verticalScale.right = minSize.width; - verticalScale.top = 0; - verticalScale.bottom = minSize.height; - - var chartArea = { - top: 0, - bottom: minSize.height, - left: minSize.width, - right: minSize.width + 100 - }; - verticalScale.draw(chartArea); - - var expected = [{ - "name": "measureText", - "args": ["1e+1"] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": ["5e+0"] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": ["2e+0"] - }, { - "name": "measureText", - "args": ["1e+0"] - }, { - "name": "measureText", - "args": ["1e+1"] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": ["5e+0"] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": [""] - }, { - "name": "measureText", - "args": ["2e+0"] - }, { - "name": "measureText", - "args": ["1e+0"] - }, { - "name": "setFillStyle", - "args": ["#666"] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.25)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 0.5] - }, { - "name": "lineTo", - "args": [33, 0.5] - }, { - "name": "moveTo", - "args": [33, 0.5] - }, { - "name": "lineTo", - "args": [133, 0.5] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 14.089974696520528] - }, { - "name": "lineTo", - "args": [33, 14.089974696520528] - }, { - "name": "moveTo", - "args": [33, 14.089974696520528] - }, { - "name": "lineTo", - "args": [133, 14.089974696520528] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 29.28227386339279] - }, { - "name": "lineTo", - "args": [33, 29.28227386339279] - }, { - "name": "moveTo", - "args": [33, 29.28227386339279] - }, { - "name": "lineTo", - "args": [133, 29.28227386339279] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 46.50588211576573] - }, { - "name": "lineTo", - "args": [33, 46.50588211576573] - }, { - "name": "moveTo", - "args": [33, 46.50588211576573] - }, { - "name": "lineTo", - "args": [133, 46.50588211576573] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 66.38907863605783] - }, { - "name": "lineTo", - "args": [33, 66.38907863605783] - }, { - "name": "moveTo", - "args": [33, 66.38907863605783] - }, { - "name": "lineTo", - "args": [133, 66.38907863605783] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 89.9059087122024] - }, { - "name": "lineTo", - "args": [33, 89.9059087122024] - }, { - "name": "moveTo", - "args": [33, 89.9059087122024] - }, { - "name": "lineTo", - "args": [133, 89.9059087122024] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 118.68818257559516] - }, { - "name": "lineTo", - "args": [33, 118.68818257559516] - }, { - "name": "moveTo", - "args": [33, 118.68818257559516] - }, { - "name": "lineTo", - "args": [133, 118.68818257559516] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 155.79498734826026] - }, { - "name": "lineTo", - "args": [33, 155.79498734826026] - }, { - "name": "moveTo", - "args": [33, 155.79498734826026] - }, { - "name": "lineTo", - "args": [133, 155.79498734826026] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 208.0940912877976] - }, { - "name": "lineTo", - "args": [33, 208.0940912877976] - }, { - "name": "moveTo", - "args": [33, 208.0940912877976] - }, { - "name": "lineTo", - "args": [133, 208.0940912877976] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "moveTo", - "args": [28, 297.5] - }, { - "name": "lineTo", - "args": [33, 297.5] - }, { - "name": "moveTo", - "args": [33, 297.5] - }, { - "name": "lineTo", - "args": [133, 297.5] - }, { - "name": "stroke", - "args": [] - }, { - "name": "fillText", - "args": ["1e+1", 23, 0] - }, { - "name": "fillText", - "args": ["", 23, 13.589974696520528] - }, { - "name": "fillText", - "args": ["", 23, 28.78227386339279] - }, { - "name": "fillText", - "args": ["", 23, 46.00588211576573] - }, { - "name": "fillText", - "args": ["", 23, 65.88907863605783] - }, { - "name": "fillText", - "args": ["5e+0", 23, 89.4059087122024] - }, { - "name": "fillText", - "args": ["", 23, 118.18818257559516] - }, { - "name": "fillText", - "args": ["", 23, 155.29498734826026] - }, { - "name": "fillText", - "args": ["2e+0", 23, 207.5940912877976] - }, { - "name": "fillText", - "args": ["1e+0", 23, 297] - }]; - expect(mockContext.getCalls()).toEqual(expected); - - // Turn off some drawing - config.gridLines.drawTicks = false; - config.gridLines.drawOnChartArea = false; - config.labels.show = false; - config.scaleLabel.show = true; - config.scaleLabel.labelString = 'my label'; - - mockContext.resetCalls(); - - verticalScale.draw(); - expect(mockContext.getCalls()).toEqual([{ - "name": "setFillStyle", - "args": ["#666"] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0,0,0,0.25)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "setLineWidth", - "args": [1] - }, { - "name": "setStrokeStyle", - "args": ["rgba(0, 0, 0, 0.1)"] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "beginPath", - "args": [] - }, { - "name": "stroke", - "args": [] - }, { - "name": "save", - "args": [] - }, { - "name": "translate", - "args": [6, 150] - }, { - "name": "rotate", - "args": [-1.5707963267948966] - }, { - "name": "fillText", - "args": ["my label", 0, 0] - }, { - "name": "restore", - "args": [] - }]); + expect(horizontalScale.getPixelForValue(100, 0, 0)).toBe(105); // right - paddingRight + expect(horizontalScale.getPixelForValue(1, 0, 0)).toBe(5); // left + paddingLeft + expect(horizontalScale.getPixelForValue(10, 0, 0)).toBe(55); // halfway }); }); \ No newline at end of file