From: Evert Timberg Date: Tue, 16 Jun 2015 23:20:26 +0000 (-0400) Subject: Create interfaces similar to the old interfaces. Ensure that scales always have IDs... X-Git-Tag: 2.0.0-alpha4~83^2 X-Git-Url: http://git.ipfire.org/gitweb/?a=commitdiff_plain;h=refs%2Fpull%2F1220%2Fhead;p=thirdparty%2FChart.js.git Create interfaces similar to the old interfaces. Ensure that scales always have IDs before controllers are built. --- diff --git a/gulpfile.js b/gulpfile.js index 70d58c008..9ce3dc3f4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -32,7 +32,7 @@ gulp.task('build', function() { './src/controllers/**', './src/scales/**', './src/elements/**', - './src/charts/chart.bar.js', + './src/charts/**', './node_modules/color/dist/color.min.js' ], isCustom = !!(util.env.types), diff --git a/samples/bar-multi-axis.html b/samples/bar-multi-axis.html index ff5c360fa..b1ed3abf0 100644 --- a/samples/bar-multi-axis.html +++ b/samples/bar-multi-axis.html @@ -45,8 +45,7 @@ }; window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); - window.myBar = new Chart(ctx, { - type: 'bar', + window.myBar = Chart.Bar(ctx, { data: barChartData, options: { responsive: true, diff --git a/samples/line-multi-axis.html b/samples/line-multi-axis.html index 729cf3731..e2f0d873b 100644 --- a/samples/line-multi-axis.html +++ b/samples/line-multi-axis.html @@ -45,7 +45,7 @@ window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); - window.myLine = new Chart(ctx).Line({ + window.myLine = Chart.Line(ctx, { data: lineChartData, options: { responsive: true, diff --git a/samples/polar-area.html b/samples/polar-area.html index 4388a73ca..73d5c6049 100644 --- a/samples/polar-area.html +++ b/samples/polar-area.html @@ -21,7 +21,6 @@ }; var config = { - type: 'polarArea', data: { datasets: [{ data: [ @@ -54,7 +53,7 @@ window.onload = function() { var ctx = document.getElementById("chart-area"); - window.myPolarArea = new Chart(ctx, config); + window.myPolarArea = Chart.PolarArea(ctx, config); }; $('#randomizeData').click(function() { diff --git a/samples/scatter-multi-axis.html b/samples/scatter-multi-axis.html index ab08e0d26..a25c5f1b1 100644 --- a/samples/scatter-multi-axis.html +++ b/samples/scatter-multi-axis.html @@ -90,7 +90,7 @@ window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); - window.myScatter = new Chart(ctx).Scatter({ + window.myScatter = Chart.Scatter(ctx, { data: scatterChartData, options: { responsive: true, diff --git a/samples/scatter.html b/samples/scatter.html index b27743762..c4c96fbf8 100644 --- a/samples/scatter.html +++ b/samples/scatter.html @@ -86,15 +86,14 @@ window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); - window.myScatter = new Chart(ctx).Scatter({ + window.myScatter = Chart.Scatter(ctx, { data: scatterChartData, options: { - responsive: true, - hoverMode: 'single', // should always use single for a scatter chart scales: { xAxes: [{ + position: 'top', gridLines: { - zeroLineColor: "rgba(0,0,0,1)" + zeroLineColor: "rgba(0,255,0,1)" } }] } diff --git a/src/charts/Chart.Bar.js b/src/charts/Chart.Bar.js new file mode 100644 index 000000000..26db4ada0 --- /dev/null +++ b/src/charts/Chart.Bar.js @@ -0,0 +1,14 @@ +(function() { + "use strict"; + + var root = this; + var Chart = root.Chart; + var helpers = Chart.helpers; + + Chart.Bar = function(context, config) { + config.type = 'bar'; + + return new Chart(context, config); + } + +}).call(this); diff --git a/src/charts/Chart.Doughnut.js b/src/charts/Chart.Doughnut.js new file mode 100644 index 000000000..d01959d44 --- /dev/null +++ b/src/charts/Chart.Doughnut.js @@ -0,0 +1,14 @@ +(function() { + "use strict"; + + var root = this; + var Chart = root.Chart; + var helpers = Chart.helpers; + + Chart.Doughnut = function(context, config) { + config.type = 'doughnut'; + + return new Chart(context, config); + } + +}).call(this); diff --git a/src/charts/Chart.Line.js b/src/charts/Chart.Line.js new file mode 100644 index 000000000..d5e7cf76c --- /dev/null +++ b/src/charts/Chart.Line.js @@ -0,0 +1,14 @@ +(function() { + "use strict"; + + var root = this; + var Chart = root.Chart; + var helpers = Chart.helpers; + + Chart.Line = function(context, config) { + config.type = 'line'; + + return new Chart(context, config); + } + +}).call(this); diff --git a/src/charts/Chart.PolarArea.js b/src/charts/Chart.PolarArea.js new file mode 100644 index 000000000..e798f7464 --- /dev/null +++ b/src/charts/Chart.PolarArea.js @@ -0,0 +1,14 @@ +(function() { + "use strict"; + + var root = this; + var Chart = root.Chart; + var helpers = Chart.helpers; + + Chart.PolarArea = function(context, config) { + config.type = 'polarArea'; + + return new Chart(context, config); + } + +}).call(this); diff --git a/src/charts/Chart.Radar.js b/src/charts/Chart.Radar.js new file mode 100644 index 000000000..f5580783d --- /dev/null +++ b/src/charts/Chart.Radar.js @@ -0,0 +1,14 @@ +(function() { + "use strict"; + + var root = this; + var Chart = root.Chart; + var helpers = Chart.helpers; + + Chart.Radar = function(context, config) { + config.type = 'radar'; + + return new Chart(context, config); + } + +}).call(this); diff --git a/src/controllers/controller.scatter.js b/src/charts/Chart.Scatter.js similarity index 75% rename from src/controllers/controller.scatter.js rename to src/charts/Chart.Scatter.js index 7048897b9..3c784ff32 100644 --- a/src/controllers/controller.scatter.js +++ b/src/charts/Chart.Scatter.js @@ -1,11 +1,9 @@ (function() { "use strict"; - return; - - var root = this, - Chart = root.Chart, - helpers = Chart.helpers; + var root = this; + var Chart = root.Chart; + var helpers = Chart.helpers; var defaultConfig = { hover: { @@ -35,9 +33,10 @@ }; - - Chart.types.Line.extend({ - name: "Scatter", - defaults: defaultConfig, - }); -}).call(this); + Chart.Scatter = function(context, config) { + config.options = helpers.configMerge(defaultConfig, config.options); + config.type = 'line'; + return new Chart(context, config); + } + +}).call(this); \ No newline at end of file diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index 79bc1c782..19c9d6f53 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -14,9 +14,11 @@ scales: { xAxes: [{ type: "category", + id: 'x-axis-0' }], yAxes: [{ type: "linear", + id: 'y-axis-0' }], }, }; diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 77a08bbdf..ac081a748 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -51,6 +51,7 @@ // Make sure controllers are built first so that each dataset is bound to an axis before the scales // are built + this.ensureScalesHaveIDs(); this.buildControllers(); this.buildScales(); this.resetElements(); @@ -91,7 +92,25 @@ return this; }, + ensureScalesHaveIDs: function ensureScalesHaveIDs() { + var defaultXAxisID = 'x-axis-'; + var defaultYAxisID = 'y-axis-'; + if (this.options.scales) { + if (this.options.scales.xAxes && this.options.scales.xAxes.length) { + helpers.each(this.options.scales.xAxes, function(xAxisOptions, index) { + xAxisOptions.id = xAxisOptions.id || (defaultXAxisID + index); + }, this); + } + + if (this.options.scales.yAxes && this.options.scales.yAxes.length) { + // Build the y axes + helpers.each(this.options.scales.yAxes, function(yAxisOptions, index) { + yAxisOptions.id = yAxisOptions.id || (defaultYAxisID + index); + }, this); + } + } + }, buildScales: function buildScales() { // Map of scale ID to scale object so we can lookup later this.scales = {}; @@ -99,7 +118,7 @@ // Build the x axes if (this.options.scales) { if (this.options.scales.xAxes && this.options.scales.xAxes.length) { - helpers.each(this.options.scales.xAxes, function(xAxisOptions) { + helpers.each(this.options.scales.xAxes, function(xAxisOptions, index) { var ScaleClass = Chart.scaleService.getScaleConstructor(xAxisOptions.type); var scale = new ScaleClass({ ctx: this.chart.ctx, @@ -114,7 +133,7 @@ if (this.options.scales.yAxes && this.options.scales.yAxes.length) { // Build the y axes - helpers.each(this.options.scales.yAxes, function(yAxisOptions) { + helpers.each(this.options.scales.yAxes, function(yAxisOptions, index) { var ScaleClass = Chart.scaleService.getScaleConstructor(yAxisOptions.type); var scale = new ScaleClass({ ctx: this.chart.ctx, diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js index 357731578..ffac6fe21 100644 --- a/src/scales/scale.category.js +++ b/src/scales/scale.category.js @@ -9,7 +9,6 @@ var defaultConfig = { display: true, position: "bottom", - id: "x-axis-1", // need an ID so datasets can reference the scale // grid line settings gridLines: { diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js index 2f2c781fa..ce2fa8eb1 100644 --- a/src/scales/scale.linear.js +++ b/src/scales/scale.linear.js @@ -8,7 +8,6 @@ var defaultConfig = { display: true, position: "left", - id: "y-axis-1", // grid line settings gridLines: {