From faa43d51a952c111c90f5ea020f9647b216d927e Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 13 Jun 2015 13:25:41 -0400 Subject: [PATCH] Category scale now has defaults. Updated the bar & line charts to use this new default. --- src/charts/chart.bar.js | 25 ++----------------- src/charts/chart.line.js | 25 ------------------- src/core/core.js | 47 +++++++++++++++++++++++++++++++++++- src/core/core.scale.js | 9 +++++-- src/scales/scale.category.js | 31 +++++++++++++++++++++++- 5 files changed, 85 insertions(+), 52 deletions(-) diff --git a/src/charts/chart.bar.js b/src/charts/chart.bar.js index b77fe97fe..d83b25b44 100644 --- a/src/charts/chart.bar.js +++ b/src/charts/chart.bar.js @@ -12,38 +12,17 @@ scales: { xAxes: [{ - type: "category", // scatter should not use a dataset axis - display: true, - position: "bottom", - id: "x-axis-1", // need an ID so datasets can reference the scale - + type: "category", categorySpacing: 10, spacing: 1, // grid line settings gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - drawOnChartArea: true, - drawTicks: true, - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", offsetGridLines: true, }, - - // label settings - labels: { - show: true, - template: "<%=value%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - }, }], yAxes: [{ - type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance + type: "linear", display: true, position: "left", id: "y-axis-1", diff --git a/src/charts/chart.line.js b/src/charts/chart.line.js index 779f78e3f..97b3e1ef2 100644 --- a/src/charts/chart.line.js +++ b/src/charts/chart.line.js @@ -13,31 +13,6 @@ scales: { xAxes: [{ type: "category", // scatter should not use a dataset axis - display: true, - position: "bottom", - id: "x-axis-1", // need an ID so datasets can reference the scale - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - drawOnChartArea: true, - drawTicks: true, - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", - offsetGridLines: false, - }, - - // label settings - labels: { - show: true, - template: "<%=value%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - }, }], yAxes: [{ type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance diff --git a/src/core/core.js b/src/core/core.js index b4af0a10b..1cb6fafc7 100755 --- a/src/core/core.js +++ b/src/core/core.js @@ -141,21 +141,28 @@ helpers.each(Array.prototype.slice.call(arguments, 1), function(extension) { helpers.each(extension, function(value, key) { if (extension.hasOwnProperty(key)) { - if (base.hasOwnProperty(key) && helpers.isArray(base[key]) && helpers.isArray(value)) { + if (key === 'scales') { + // Scale config merging is complex. Add out own function here for that + base[key] = helpers.scaleMerge(base.hasOwnProperty(key) ? base[key] : {}, value); + + } else if (base.hasOwnProperty(key) && helpers.isArray(base[key]) && helpers.isArray(value)) { // In this case we have an array of objects replacing another array. Rather than doing a strict replace, // merge. This allows easy scale option merging var baseArray = base[key]; helpers.each(value, function(valueObj, index) { + if (index < baseArray.length) { baseArray[index] = helpers.configMerge(baseArray[index], valueObj); } else { baseArray.push(valueObj); // nothing to merge } }); + } else if (base.hasOwnProperty(key) && typeof base[key] == "object" && base[key] !== null && typeof value == "object") { // If we are overwriting an object with an object, do a merge of the properties. base[key] = helpers.configMerge(base[key], value); + } else { // can just overwrite the value in this case base[key] = value; @@ -166,6 +173,44 @@ return base; }, + scaleMerge = helpers.scaleMerge = function(_base, extension) { + var base = clone(_base); + + helpers.each(extension, function(value, key) { + if (extension.hasOwnProperty(key)) { + if (key === 'xAxes' || key === 'yAxes') { + // These properties are arrays of items + if (base.hasOwnProperty(key)) { + helpers.each(value, function(valueObj, index) { + if (index >= base[key].length || !base[key][index].type) { + base[key].push(helpers.configMerge(valueObj.type ? Chart.scaleService.getScaleDefaults(valueObj.type) : {}, valueObj)); + } else if (valueObj.type !== base[key][index].type) { + // Type changed. Bring in the new defaults before we bring in valueObj so that valueObj can override the correct scale defaults + base[key][index] = helpers.configMerge(base[key][index], valueObj.type ? Chart.scaleService.getScaleDefaults(valueObj.type) : {}, valueObj) + } else { + // Type is the same + base[key][index] = helpers.configMerge(base[key][index], valueObj); + } + }); + } else { + base[key] = []; + helpers.each(value, function(valueObj) { + base[key].push(helpers.configMerge(valueObj.type ? Chart.scaleService.getScaleDefaults(valueObj.type) : {}, valueObj)); + }); + } + } else if (base.hasOwnProperty(key) && typeof base[key] == "object" && base[key] !== null && typeof value == "object") { + // If we are overwriting an object with an object, do a merge of the properties. + base[key] = helpers.configMerge(base[key], value); + + } else { + // can just overwrite the value in this case + base[key] = value; + } + } + }); + + return base; + }, getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault = function(value, index, defaultValue) { if (!value) { return defaultValue; diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 7494d14c8..c738f1f58 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -14,13 +14,18 @@ constructors: {}, // Use a registration function so that we can move to an ES6 map when we no longer need to support // old browsers - registerScaleType: function(type, scaleConstructor) { + // Scale config defaults + defaults: {}, + registerScaleType: function(type, scaleConstructor, defaults) { this.constructors[type] = scaleConstructor; + this.defaults[type] = defaults; }, getScaleConstructor: function(type) { return this.constructors.hasOwnProperty(type) ? this.constructors[type] : undefined; }, - + getScaleDefaults: function(type) { + return this.defaults.hasOwnProperty(type) ? this.defaults[type] : {}; + }, // The interesting function fitScalesForChart: function(chartInstance, width, height) { var xPadding = width > 30 ? 5 : 2; diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js index 7ed54613e..357731578 100644 --- a/src/scales/scale.category.js +++ b/src/scales/scale.category.js @@ -5,6 +5,35 @@ Chart = root.Chart, helpers = Chart.helpers; + // Default config for a category scale + var defaultConfig = { + display: true, + position: "bottom", + id: "x-axis-1", // need an ID so datasets can reference the scale + + // grid line settings + gridLines: { + show: true, + color: "rgba(0, 0, 0, 0.1)", + lineWidth: 1, + drawOnChartArea: true, + drawTicks: true, + zeroLineWidth: 1, + zeroLineColor: "rgba(0,0,0,0.25)", + offsetGridLines: false, + }, + + // label settings + labels: { + show: true, + template: "<%=value%>", + fontSize: 12, + fontStyle: "normal", + fontColor: "#666", + fontFamily: "Helvetica Neue", + }, + }; + var DatasetScale = Chart.Element.extend({ isHorizontal: function() { return this.options.position == "top" || this.options.position == "bottom"; @@ -233,5 +262,5 @@ } } }); - Chart.scaleService.registerScaleType("category", DatasetScale); + Chart.scaleService.registerScaleType("category", DatasetScale, defaultConfig); }).call(this); -- 2.47.3