From: Evert Timberg Date: Sun, 14 Jun 2015 17:00:09 +0000 (-0400) Subject: Fix the broken scatter chart. Introduced the concept of a canvas controller that... X-Git-Tag: 2.0.0-alpha3~10^2~20 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=68ae02263b0fa5886335072eec15d1496ae3d615;p=thirdparty%2FChart.js.git Fix the broken scatter chart. Introduced the concept of a canvas controller that goes along with the element controller. --- diff --git a/src/charts/chart.line.js b/src/charts/chart.line.js index 3f5407a9a..f1d71eb50 100644 --- a/src/charts/chart.line.js +++ b/src/charts/chart.line.js @@ -26,14 +26,15 @@ defaults: defaultConfig, initialize: function() { - this.controller = new Chart.RectangularElementController(this); + this.elementController = new Chart.RectangularElementController(this); + this.canvasController = new Chart.RectangularCanvasController(this, this.elementController); // Create a new line and its points for each dataset and piece of data helpers.each(this.data.datasets, function(dataset, datasetIndex) { - this.controller.addLine(dataset, datasetIndex); + this.elementController.addLine(dataset, datasetIndex); helpers.each(dataset.data, function(dataPoint, index) { - this.controller.addPoint(dataset, datasetIndex, index); + this.elementController.addPoint(dataset, datasetIndex, index); }, this); // The line chart onlty supports a single x axis because the x axis is always a dataset axis @@ -46,7 +47,7 @@ } }, this); - this.__super__.initialize.call(this); + this.canvasController.initialize(); }, draw: function(ease) { diff --git a/src/charts/chart.rectangularbase.js b/src/charts/chart.rectangularbase.js index eda983e7d..76d03f5e3 100644 --- a/src/charts/chart.rectangularbase.js +++ b/src/charts/chart.rectangularbase.js @@ -13,68 +13,10 @@ Chart.Type.extend({ name: "RectangularBase", defaults: defaultConfig, - initialize: function() { - // Events - helpers.bindEvents(this, this.options.events, this.events); - - // Build and fit the scale. Needs to happen after the axis IDs have been set - this.buildScales(); - - // Create tooltip instance exclusively for this chart with some defaults. - this.tooltip = new Chart.Tooltip({ - _chart: this.chart, - _data: this.data, - _options: this.options, - }, this); - - // Need to fit scales before we reset elements. - Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height); - - // Reset so that we animation from the baseline - this.resetElements(); - - // Update that shiz - this.update(); - }, - resetElements: function() { - this.controller.resetElements(); - }, update: function(animationDuration) { - - Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height); - this.controller.updateElements(); + this.canvasController.update(); this.render(animationDuration); }, - buildScales: function() { - // Map of scale ID to scale object so we can lookup later - this.scales = {}; - - // Build the x axes - helpers.each(this.options.scales.xAxes, function(xAxisOptions) { - var ScaleClass = Chart.scaleService.getScaleConstructor(xAxisOptions.type); - var scale = new ScaleClass({ - ctx: this.chart.ctx, - options: xAxisOptions, - data: this.data, - id: xAxisOptions.id, - }); - - this.scales[scale.id] = scale; - }, this); - - // Build the y axes - helpers.each(this.options.scales.yAxes, function(yAxisOptions) { - var ScaleClass = Chart.scaleService.getScaleConstructor(yAxisOptions.type); - var scale = new ScaleClass({ - ctx: this.chart.ctx, - options: yAxisOptions, - data: this.data, - id: yAxisOptions.id, - }); - - this.scales[scale.id] = scale; - }, this); - }, draw: helpers.noop, events: function(e) { diff --git a/src/controllers/controller.canvas.rectangular.js b/src/controllers/controller.canvas.rectangular.js new file mode 100644 index 000000000..b57cfabe7 --- /dev/null +++ b/src/controllers/controller.canvas.rectangular.js @@ -0,0 +1,73 @@ +(function() { + "use strict"; + + var root = this, + Chart = root.Chart, + helpers = Chart.helpers; + + Chart.RectangularCanvasController = function(chart, elementController) { + this.chart = chart; + this.elementController = elementController; + }; + + Chart.RectangularCanvasController.prototype.initialize = function() { + this.bindEvents(); + this.buildScales(); + + // Need to fit scales before we reset elements. + Chart.scaleService.fitScalesForChart(this.chart, this.chart.chart.width, this.chart.chart.height); + this.elementController.resetElements(); + + this.initToolTip(); + + this.chart.update(); + }; + + Chart.RectangularCanvasController.prototype.bindEvents = function() { + helpers.bindEvents(this.chart, this.chart.options.events, this.chart.events); + }; + + Chart.RectangularCanvasController.prototype.initToolTip = function() { + this.chart.tooltip = new Chart.Tooltip({ + _chart: this.chart.chart, + _data: this.chart.data, + _options: this.chart.options, + }, this); + }; + + Chart.RectangularCanvasController.prototype.buildScales = function() { + // Map of scale ID to scale object so we can lookup later + this.chart.scales = {}; + + // Build the x axes + helpers.each(this.chart.options.scales.xAxes, function(xAxisOptions) { + var ScaleClass = Chart.scaleService.getScaleConstructor(xAxisOptions.type); + var scale = new ScaleClass({ + ctx: this.chart.chart.ctx, + options: xAxisOptions, + data: this.chart.data, + id: xAxisOptions.id, + }); + + this.chart.scales[scale.id] = scale; + }, this); + + // Build the y axes + helpers.each(this.chart.options.scales.yAxes, function(yAxisOptions) { + var ScaleClass = Chart.scaleService.getScaleConstructor(yAxisOptions.type); + var scale = new ScaleClass({ + ctx: this.chart.chart.ctx, + options: yAxisOptions, + data: this.chart.data, + id: yAxisOptions.id, + }); + + this.chart.scales[scale.id] = scale; + }, this); + }; + + Chart.RectangularCanvasController.prototype.update = function() { + Chart.scaleService.fitScalesForChart(this.chart, this.chart.chart.width, this.chart.chart.height); + this.elementController.updateElements(); + }; +}).call(this); diff --git a/src/core/core.js b/src/core/core.js index 9ed29d43e..6328edd82 100755 --- a/src/core/core.js +++ b/src/core/core.js @@ -285,7 +285,9 @@ ChartElement.extend = inherits; - if (extensions) extend(ChartElement.prototype, extensions); + if (extensions) { + extend(ChartElement.prototype, extensions); + } ChartElement.__super__ = parent.prototype; @@ -1102,12 +1104,9 @@ //Copy the prototype object of the this class ChartType.prototype = clone(parent.prototype); - ChartType.prototype.__super__ = clone(parent.prototype); - + //Now overwrite some of the properties in the base class with the new extensions extend(ChartType.prototype, extensions); - - ChartType.extend = Chart.Type.extend; if (extensions.name || parent.prototype.name) {