]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
More nested config stuff. Not sure what all of the options in the line config do...
authorEvert Timberg <evert.timberg@gmail.com>
Wed, 27 May 2015 01:16:18 +0000 (21:16 -0400)
committerEvert Timberg <evert.timberg@gmail.com>
Wed, 27 May 2015 01:16:18 +0000 (21:16 -0400)
src/Chart.Bar.js
src/Chart.Core.js
src/Chart.Doughnut.js
src/Chart.Line.js
src/Chart.PolarArea.js
src/Chart.Scatter.js

index 5415287232a59869052ef6c63861831e778b63bb..39482b640f2ebc2e6bba5679dc46f07be0d5eb29 100644 (file)
@@ -84,7 +84,7 @@
 
             //Number - Spacing between data sets within X values
             datasetSpacing: 1,
-        }
+        },
 
         //String - A legend template
         legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].backgroundColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
 
             // Find Active Elements
             this.active = function() {
-                switch (this.options.hoverMode) {
+                switch (this.options.hover.mode) {
                     case 'single':
                         return this.getElementAtEvent(e);
                     case 'label':
 
             // 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;
             }
 
             // 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();
 
 
             // Built in Tooltips
-            if (this.options.showTooltips) {
+            if (this.options.tooltips.enabled) {
 
                 // The usual updates
                 this.tooltip.initialize();
index 7fc57ac932493f4c4ef315e0b56d81e1aaf63880..0d103e477561eac272a8f231218b9876fb3b0784 100755 (executable)
@@ -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,
             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: [],
             });
 
             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, {
                             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
                         labels: labels,
                         title: this._active.length ? this._active[0].label : '',
                         legendColors: colors,
-                        legendBackgroundColor: this._options.multiTooltipKeyBackground,
+                        legendBackgroundColor: this._options.tooltips.multiKeyBackground,
                     });
 
 
             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);
index fdc4f12e950f0c5062d0ee95cf446ef3e10b6a0b..bb9faf0363db2d895c72df2a53b5484c737536fe 100644 (file)
@@ -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);
             }
 
             }
 
             // 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();
index ecc87e97f30b3e1230ba9da9c60ef3a1213c5f58..e1b44abcb56a9a004ed4c03ff9daa8fbc519cced 100644 (file)
         //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,
                     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,
                     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);
 
 
             // Find Active Elements
             this.active = function() {
-                switch (this.options.hoverMode) {
+                switch (this.options.hover.mode) {
                     case 'single':
                         return this.getElementAtEvent(e);
                     case 'label':
             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];
 
             }
 
             // 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];
 
 
 
             // Built in Tooltips
-            if (this.options.showTooltips) {
+            if (this.options.tooltips.enabled) {
 
                 // The usual updates
                 this.tooltip.initialize();
index 49fe2424e16617eb1015b1177c10e2a36a11a0eb..bdb83b90d2b19590be77c8a61c3384476ab5a993 100644 (file)
                        },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){
index 240160b7ae7bc36c50eca919b504247fac512163..348e3defba4db36de0421e2f2c473760ae46ac4e 100644 (file)
@@ -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
         //String - A legend template
         legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].borderColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
 
-        tooltipTemplate: "(<%= dataX %>, <%= dataY %>)",
-        multiTooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= dataX %>, <%= dataY %>)",
+        tooltips: {
+            template: "(<%= dataX %>, <%= dataY %>)",
+            multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= dataX %>, <%= dataY %>)",
+        },
 
     };
 
 
             // Find Active Elements
             this.active = function() {
-                switch (this.options.hoverMode) {
+                switch (this.options.hover.mode) {
                     case 'single':
                         return this.getElementAtEvent(e);
                     case 'label':
 
             // 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;
             }
 
             // 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();
             }
 
             // Built in Tooltips
-            if (this.options.showTooltips) {
+            if (this.options.tooltips.enabled) {
 
                 // The usual updates
                 this.tooltip.initialize();