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