From: Evert Timberg Date: Wed, 27 May 2015 01:16:18 +0000 (-0400) Subject: More nested config stuff. Not sure what all of the options in the line config do... X-Git-Tag: v2.0-alpha~4^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e3519f5bd4e7b5e356d7e085d28ab9cb9daf83d5;p=thirdparty%2FChart.js.git More nested config stuff. Not sure what all of the options in the line config do, but left them in. Ensured that tooltips work. --- diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js index 541528723..39482b640 100644 --- a/src/Chart.Bar.js +++ b/src/Chart.Bar.js @@ -84,7 +84,7 @@ //Number - Spacing between data sets within X values datasetSpacing: 1, - } + }, //String - A legend template legendTemplate: "" @@ -162,7 +162,7 @@ // Find Active Elements this.active = function() { - switch (this.options.hoverMode) { + switch (this.options.hover.mode) { case 'single': return this.getElementAtEvent(e); case 'label': @@ -181,7 +181,7 @@ // Remove styling for last active (even if it may still be active) if (this.lastActive.length) { - switch (this.options.hoverMode) { + switch (this.options.hover.mode) { case 'single': this.lastActive[0].backgroundColor = this.data.datasets[this.lastActive[0]._datasetIndex].backgroundColor; this.lastActive[0].borderColor = this.data.datasets[this.lastActive[0]._datasetIndex].borderColor; @@ -200,8 +200,8 @@ } // Built in hover styling - if (this.active.length && this.options.hoverMode) { - switch (this.options.hoverMode) { + if (this.active.length && this.options.hover.mode) { + switch (this.options.hover.mode) { case 'single': this.active[0].backgroundColor = this.data.datasets[this.active[0]._datasetIndex].hoverBackgroundColor || helpers.color(this.active[0].backgroundColor).saturate(0.8).darken(0.2).rgbString(); this.active[0].borderColor = this.data.datasets[this.active[0]._datasetIndex].hoverBorderColor || helpers.color(this.active[0].borderColor).saturate(0.8).darken(0.2).rgbString(); @@ -221,7 +221,7 @@ // Built in Tooltips - if (this.options.showTooltips) { + if (this.options.tooltips.enabled) { // The usual updates this.tooltip.initialize(); diff --git a/src/Chart.Core.js b/src/Chart.Core.js index 7fc57ac93..0d103e477 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -80,7 +80,7 @@ hover: { // String || boolean - mode: 'single', // 'label', 'dataset', 'false' + mode: 'label', // 'label', 'dataset', 'false' //Function(event, activeElements) - Custom hover handler onHover: null, @@ -1480,21 +1480,21 @@ var options = this._options; extend(this, { opacity: 0, - xPadding: options.tooltipXPadding, - yPadding: options.tooltipYPadding, - xOffset: options.tooltipXOffset, - backgroundColor: options.tooltipBackgroundColor, - textColor: options.tooltipFontColor, - _fontFamily: options.tooltipFontFamily, - _fontStyle: options.tooltipFontStyle, - fontSize: options.tooltipFontSize, - titleTextColor: options.tooltipTitleFontColor, - _titleFontFamily: options.tooltipTitleFontFamily, - _titleFontStyle: options.tooltipTitleFontStyle, - titleFontSize: options.tooltipTitleFontSize, - caretHeight: options.tooltipCaretSize, - cornerRadius: options.tooltipCornerRadius, - legendColorBackground: options.multiTooltipKeyBackground, + xPadding: options.tooltips.xPadding, + yPadding: options.tooltips.yPadding, + xOffset: options.tooltips.xOffset, + backgroundColor: options.tooltips.backgroundColor, + textColor: options.tooltips.fontColor, + _fontFamily: options.tooltips.fontFamily, + _fontStyle: options.tooltips.fontStyle, + fontSize: options.tooltips.fontSize, + titleTextColor: options.tooltips.titleFontColor, + _titleFontFamily: options.tooltips.titleFontFamily, + _titleFontStyle: options.tooltips.titleFontStyle, + titleFontSize: options.tooltips.titleFontSize, + caretHeight: options.tooltips.caretSize, + cornerRadius: options.tooltips.cornerRadius, + legendColorBackground: options.tooltips.multiKeyBackground, labels: [], colors: [], }); @@ -1503,10 +1503,10 @@ var ctx = this._chart.ctx; - switch (this._options.hoverMode) { + switch (this._options.hover.mode) { case 'single': helpers.extend(this, { - text: template(this._options.tooltipTemplate, this._active[0]), + text: template(this._options.tooltips.template, this._active[0]), }); var tooltipPosition = this._active[0].tooltipPosition(); helpers.extend(this, { @@ -1556,7 +1556,7 @@ yPositions.push(element._vm.y); //Include any colour information about the element - labels.push(helpers.template(this._options.multiTooltipTemplate, element)); + labels.push(helpers.template(this._options.tooltips.multiTemplate, element)); colors.push({ fill: element._vm.backgroundColor, stroke: element._vm.borderColor @@ -1583,7 +1583,7 @@ labels: labels, title: this._active.length ? this._active[0].label : '', legendColors: colors, - legendBackgroundColor: this._options.multiTooltipKeyBackground, + legendBackgroundColor: this._options.tooltips.multiKeyBackground, }); @@ -1624,7 +1624,7 @@ var ctx = this._chart.ctx; var vm = this._vm; - switch (this._options.hoverMode) { + switch (this._options.hover.mode) { case 'single': ctx.font = fontString(vm.fontSize, vm._fontStyle, vm._fontFamily); diff --git a/src/Chart.Doughnut.js b/src/Chart.Doughnut.js index fdc4f12e9..bb9faf036 100644 --- a/src/Chart.Doughnut.js +++ b/src/Chart.Doughnut.js @@ -55,7 +55,7 @@ }); //Set up tooltip events on the chart - if (this.options.showTooltips) { + if (this.options.tooltips.enabled) { helpers.bindEvents(this, this.options.events, this.onHover); } @@ -115,12 +115,12 @@ } // Built in hover styling - if (this.active.length && this.options.hoverMode) { + if (this.active.length && this.options.hover.mode) { this.active[0].backgroundColor = this.data.data[this.active[0]._index].hoverBackgroundColor || helpers.color(this.data.data[this.active[0]._index].backgroundColor).saturate(0.5).darken(0.35).rgbString(); } // Built in Tooltips - if (this.options.showTooltips) { + if (this.options.tooltips.enabled) { // The usual updates this.tooltip.initialize(); diff --git a/src/Chart.Line.js b/src/Chart.Line.js index ecc87e97f..e1b44abcb 100644 --- a/src/Chart.Line.js +++ b/src/Chart.Line.js @@ -78,22 +78,33 @@ //Boolean - Whether to stack the lines essentially creating a stacked area chart. stacked: false, - //Number - Tension of the bezier curve between points - tension: 0.4, - - //Number - Radius of each point dot in pixels - pointRadius: 3, - //Number - Pixel width of point dot border - pointBorderWidth: 1, - //Number - Pixel width of point on hover - pointHoverRadius: 5, - //Number - Pixel width of point dot border on hover - pointHoverBorderWidth: 2, - pointBackgroundColor: Chart.defaults.global.defaultColor, - pointBorderColor: Chart.defaults.global.defaultColor, - - //Number - amount extra to add to the radius to cater for hit detection outside the drawn point - pointHitRadius: 6, + points: { + // Number - Radius of each point dot in pixels + radius: 3, + + // Number - Pixel width of point dot border + borderWidth: 1, + + // Number - Pixel width of point on hover + hoverRadius: 5, + + // Number - Pixel width of point dot border on hover + hoverBorderWidth: 2, + + // Color + backgroundColor: Chart.defaults.global.defaultColor, + + // Color + borderColor: Chart.defaults.global.defaultColor, + + //Number - amount extra to add to the radius to cater for hit detection outside the drawn point + hitRadius: 6, + }, + + lines: { + //Number - Tension of the bezier curve between points. Use 0 to turn off bezier tension + tension: 0.4, + }, //Number - Pixel width of dataset border borderWidth: 2, @@ -206,7 +217,7 @@ scaleZero: yScale.getPixelForValue(0), // Appearance - tension: dataset.tension || this.options.tension, + tension: dataset.tension || this.options.lines.tension, backgroundColor: dataset.backgroundColor || this.options.backgroundColor, borderWidth: dataset.borderWidth || this.options.borderWidth, borderColor: dataset.borderColor || this.options.borderColor, @@ -237,12 +248,12 @@ tension: this.data.datasets[datasetIndex].metaDataset.tension, // Appearnce - radius: this.data.datasets[datasetIndex].pointRadius || this.options.pointRadius, - backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.pointBackgroundColor, - borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.pointBorderWidth, + radius: this.data.datasets[datasetIndex].pointRadius || this.options.points.radius, + backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.points.backgroundColor, + borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.pointsborderWidth, // Tooltip - hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.pointHitRadius, + hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.points.hitRadius, }); }, this); @@ -437,7 +448,7 @@ // Find Active Elements this.active = function() { - switch (this.options.hoverMode) { + switch (this.options.hover.mode) { case 'single': return this.getElementAtEvent(e); case 'label': @@ -463,7 +474,7 @@ var dataset; // Remove styling for last active (even if it may still be active) if (this.lastActive.length) { - switch (this.options.hoverMode) { + switch (this.options.hover.mode) { case 'single': dataset = this.data.datasets[this.lastActive[0]._datasetIndex]; @@ -490,8 +501,8 @@ } // Built in hover styling - if (this.active.length && this.options.hoverMode) { - switch (this.options.hoverMode) { + if (this.active.length && this.options.hover.mode) { + switch (this.options.hover.mode) { case 'single': dataset = this.data.datasets[this.active[0]._datasetIndex]; @@ -519,7 +530,7 @@ // Built in Tooltips - if (this.options.showTooltips) { + if (this.options.tooltips.enabled) { // The usual updates this.tooltip.initialize(); diff --git a/src/Chart.PolarArea.js b/src/Chart.PolarArea.js index 49fe2424e..bdb83b90d 100644 --- a/src/Chart.PolarArea.js +++ b/src/Chart.PolarArea.js @@ -133,7 +133,7 @@ },this); //Set up tooltip events on the chart - if (this.options.showTooltips){ + if (this.options.tooltips.enabled){ helpers.bindEvents(this, this.options.events, function(evt){ var activeSegments = (evt.type !== 'mouseout') ? this.getSegmentsAtEvent(evt) : []; helpers.each(this.segments,function(segment){ diff --git a/src/Chart.Scatter.js b/src/Chart.Scatter.js index 240160b7a..348e3defb 100644 --- a/src/Chart.Scatter.js +++ b/src/Chart.Scatter.js @@ -6,7 +6,10 @@ helpers = Chart.helpers; var defaultConfig = { - hoverMode: 'single', + hover: { + mode: 'single', + }, + scales: { xAxes: [{ scaleType: "linear", // scatter should not use a dataset axis @@ -92,8 +95,10 @@ //String - A legend template legendTemplate: "", - tooltipTemplate: "(<%= dataX %>, <%= dataY %>)", - multiTooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= dataX %>, <%= dataY %>)", + tooltips: { + template: "(<%= dataX %>, <%= dataY %>)", + multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= dataX %>, <%= dataY %>)", + }, }; @@ -196,7 +201,7 @@ // Find Active Elements this.active = function() { - switch (this.options.hoverMode) { + switch (this.options.hover.mode) { case 'single': return this.getElementAtEvent(e); case 'label': @@ -215,7 +220,7 @@ // Remove styling for last active (even if it may still be active) if (this.lastActive.length) { - switch (this.options.hoverMode) { + switch (this.options.hover.mode) { case 'single': this.lastActive[0].backgroundColor = this.data.datasets[this.lastActive[0]._datasetIndex].pointBackgroundColor; this.lastActive[0].borderColor = this.data.datasets[this.lastActive[0]._datasetIndex].pointBorderColor; @@ -236,8 +241,8 @@ } // Built in hover styling - if (this.active.length && this.options.hoverMode) { - switch (this.options.hoverMode) { + if (this.active.length && this.options.hover.mode) { + switch (this.options.hover.mode) { case 'single': this.active[0].backgroundColor = this.data.datasets[this.active[0]._datasetIndex].hoverBackgroundColor || helpers.color(this.active[0].backgroundColor).saturate(0.5).darken(0.35).rgbString(); this.active[0].borderColor = this.data.datasets[this.active[0]._datasetIndex].hoverBorderColor || helpers.color(this.active[0].borderColor).saturate(0.5).darken(0.35).rgbString(); @@ -258,7 +263,7 @@ } // Built in Tooltips - if (this.options.showTooltips) { + if (this.options.tooltips.enabled) { // The usual updates this.tooltip.initialize();