Jian Li
Committed by Gerrit Code Review

Bump up Chart.js to 1.1.1 and angular-chart to 0.10.2

This will be the last update on Chart.js 1.x and angular-chart 0.10.x
This commit resolves legend overlapping issue.

Change-Id: I3709f86ec397688b25947e4b30bec926ac9c9dd1
1 /*! 1 /*!
2 * Chart.js 2 * Chart.js
3 * http://chartjs.org/ 3 * http://chartjs.org/
4 - * Version: 1.0.2 4 + * Version: 1.1.1
5 * 5 *
6 * Copyright 2015 Nick Downie 6 * Copyright 2015 Nick Downie
7 * Released under the MIT license 7 * Released under the MIT license
...@@ -40,8 +40,6 @@ ...@@ -40,8 +40,6 @@
40 var width = this.width = computeDimension(context.canvas,'Width') || context.canvas.width; 40 var width = this.width = computeDimension(context.canvas,'Width') || context.canvas.width;
41 var height = this.height = computeDimension(context.canvas,'Height') || context.canvas.height; 41 var height = this.height = computeDimension(context.canvas,'Height') || context.canvas.height;
42 42
43 - width = this.width = context.canvas.width;
44 - height = this.height = context.canvas.height;
45 this.aspectRatio = this.width / this.height; 43 this.aspectRatio = this.width / this.height;
46 //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale. 44 //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
47 helpers.retinaScale(this); 45 helpers.retinaScale(this);
...@@ -168,7 +166,7 @@ ...@@ -168,7 +166,7 @@
168 tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>", 166 tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
169 167
170 // String - Template string for single tooltips 168 // String - Template string for single tooltips
171 - multiTooltipTemplate: "<%= value %>", 169 + multiTooltipTemplate: "<%= datasetLabel %>: <%= value %>",
172 170
173 // String - Colour behind the legend colour block 171 // String - Colour behind the legend colour block
174 multiTooltipKeyBackground: '#fff', 172 multiTooltipKeyBackground: '#fff',
...@@ -839,13 +837,13 @@ ...@@ -839,13 +837,13 @@
839 var container = domNode.parentNode, 837 var container = domNode.parentNode,
840 padding = parseInt(getStyle(container, 'padding-left')) + parseInt(getStyle(container, 'padding-right')); 838 padding = parseInt(getStyle(container, 'padding-left')) + parseInt(getStyle(container, 'padding-right'));
841 // TODO = check cross browser stuff with this. 839 // TODO = check cross browser stuff with this.
842 - return container.clientWidth - padding; 840 + return container ? container.clientWidth - padding : 0;
843 }, 841 },
844 getMaximumHeight = helpers.getMaximumHeight = function(domNode){ 842 getMaximumHeight = helpers.getMaximumHeight = function(domNode){
845 var container = domNode.parentNode, 843 var container = domNode.parentNode,
846 padding = parseInt(getStyle(container, 'padding-bottom')) + parseInt(getStyle(container, 'padding-top')); 844 padding = parseInt(getStyle(container, 'padding-bottom')) + parseInt(getStyle(container, 'padding-top'));
847 // TODO = check cross browser stuff with this. 845 // TODO = check cross browser stuff with this.
848 - return container.clientHeight - padding; 846 + return container ? container.clientHeight - padding : 0;
849 }, 847 },
850 getStyle = helpers.getStyle = function (el, property) { 848 getStyle = helpers.getStyle = function (el, property) {
851 return el.currentStyle ? 849 return el.currentStyle ?
...@@ -977,9 +975,10 @@ ...@@ -977,9 +975,10 @@
977 return this; 975 return this;
978 }, 976 },
979 generateLegend : function(){ 977 generateLegend : function(){
980 - return template(this.options.legendTemplate,this); 978 + return helpers.template(this.options.legendTemplate, this);
981 }, 979 },
982 destroy : function(){ 980 destroy : function(){
981 + this.stop();
983 this.clear(); 982 this.clear();
984 unbindEvents(this, this.events); 983 unbindEvents(this, this.events);
985 var canvas = this.chart.canvas; 984 var canvas = this.chart.canvas;
...@@ -2058,7 +2057,7 @@ ...@@ -2058,7 +2057,7 @@
2058 for (var i = this.valuesCount - 1; i >= 0; i--) { 2057 for (var i = this.valuesCount - 1; i >= 0; i--) {
2059 var centerOffset = null, outerPosition = null; 2058 var centerOffset = null, outerPosition = null;
2060 2059
2061 - if (this.angleLineWidth > 0){ 2060 + if (this.angleLineWidth > 0 && (i % this.angleLineInterval === 0)){
2062 centerOffset = this.calculateCenterOffset(this.max); 2061 centerOffset = this.calculateCenterOffset(this.max);
2063 outerPosition = this.getPointPosition(i, centerOffset); 2062 outerPosition = this.getPointPosition(i, centerOffset);
2064 ctx.beginPath(); 2063 ctx.beginPath();
...@@ -2233,7 +2232,7 @@ ...@@ -2233,7 +2232,7 @@
2233 2232
2234 2233
2235 if (amd) { 2234 if (amd) {
2236 - define(function(){ 2235 + define('Chart', [], function(){
2237 return Chart; 2236 return Chart;
2238 }); 2237 });
2239 } else if (typeof module === 'object' && module.exports) { 2238 } else if (typeof module === 'object' && module.exports) {
...@@ -2289,7 +2288,8 @@ ...@@ -2289,7 +2288,8 @@
2289 barDatasetSpacing : 1, 2288 barDatasetSpacing : 1,
2290 2289
2291 //String - A legend template 2290 //String - A legend template
2292 - legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 2291 + legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
2292 +
2293 }; 2293 };
2294 2294
2295 2295
...@@ -2333,8 +2333,10 @@ ...@@ -2333,8 +2333,10 @@
2333 bar.restore(['fillColor', 'strokeColor']); 2333 bar.restore(['fillColor', 'strokeColor']);
2334 }); 2334 });
2335 helpers.each(activeBars, function(activeBar){ 2335 helpers.each(activeBars, function(activeBar){
2336 + if (activeBar) {
2336 activeBar.fillColor = activeBar.highlightFill; 2337 activeBar.fillColor = activeBar.highlightFill;
2337 activeBar.strokeColor = activeBar.highlightStroke; 2338 activeBar.strokeColor = activeBar.highlightStroke;
2339 + }
2338 }); 2340 });
2339 this.showTooltip(activeBars); 2341 this.showTooltip(activeBars);
2340 }); 2342 });
...@@ -2365,10 +2367,10 @@ ...@@ -2365,10 +2367,10 @@
2365 value : dataPoint, 2367 value : dataPoint,
2366 label : data.labels[index], 2368 label : data.labels[index],
2367 datasetLabel: dataset.label, 2369 datasetLabel: dataset.label,
2368 - strokeColor : dataset.strokeColor, 2370 + strokeColor : (typeof dataset.strokeColor == 'object') ? dataset.strokeColor[index] : dataset.strokeColor,
2369 - fillColor : dataset.fillColor, 2371 + fillColor : (typeof dataset.fillColor == 'object') ? dataset.fillColor[index] : dataset.fillColor,
2370 - highlightFill : dataset.highlightFill || dataset.fillColor, 2372 + highlightFill : (dataset.highlightFill) ? (typeof dataset.highlightFill == 'object') ? dataset.highlightFill[index] : dataset.highlightFill : (typeof dataset.fillColor == 'object') ? dataset.fillColor[index] : dataset.fillColor,
2371 - highlightStroke : dataset.highlightStroke || dataset.strokeColor 2373 + highlightStroke : (dataset.highlightStroke) ? (typeof dataset.highlightStroke == 'object') ? dataset.highlightStroke[index] : dataset.highlightStroke : (typeof dataset.strokeColor == 'object') ? dataset.strokeColor[index] : dataset.strokeColor
2372 })); 2374 }));
2373 },this); 2375 },this);
2374 2376
...@@ -2586,14 +2588,14 @@ ...@@ -2586,14 +2588,14 @@
2586 animateScale : false, 2588 animateScale : false,
2587 2589
2588 //String - A legend template 2590 //String - A legend template
2589 - legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 2591 + legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=segments[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
2590 2592
2591 }; 2593 };
2592 2594
2593 Chart.Type.extend({ 2595 Chart.Type.extend({
2594 //Passing in a name registers this chart in the Chart namespace 2596 //Passing in a name registers this chart in the Chart namespace
2595 name: "Doughnut", 2597 name: "Doughnut",
2596 - //Providing a defaults will also register the deafults in the chart namespace 2598 + //Providing a defaults will also register the defaults in the chart namespace
2597 defaults : defaultConfig, 2599 defaults : defaultConfig,
2598 //Initialize is fired when the chart is initialized - Data is passed in as a parameter 2600 //Initialize is fired when the chart is initialized - Data is passed in as a parameter
2599 //Config is automatically merged by the core of Chart.js, and is available at this.options 2601 //Config is automatically merged by the core of Chart.js, and is available at this.options
...@@ -2799,7 +2801,7 @@ ...@@ -2799,7 +2801,7 @@
2799 datasetFill : true, 2801 datasetFill : true,
2800 2802
2801 //String - A legend template 2803 //String - A legend template
2802 - legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>", 2804 + legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].strokeColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>",
2803 2805
2804 //Boolean - Whether to horizontally center the label and point dot inside the grid 2806 //Boolean - Whether to horizontally center the label and point dot inside the grid
2805 offsetGridLines : false 2807 offsetGridLines : false
...@@ -3180,14 +3182,14 @@ ...@@ -3180,14 +3182,14 @@
3180 animateScale : false, 3182 animateScale : false,
3181 3183
3182 //String - A legend template 3184 //String - A legend template
3183 - legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 3185 + legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=segments[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
3184 }; 3186 };
3185 3187
3186 3188
3187 Chart.Type.extend({ 3189 Chart.Type.extend({
3188 //Passing in a name registers this chart in the Chart namespace 3190 //Passing in a name registers this chart in the Chart namespace
3189 name: "PolarArea", 3191 name: "PolarArea",
3190 - //Providing a defaults will also register the deafults in the chart namespace 3192 + //Providing a defaults will also register the defaults in the chart namespace
3191 defaults : defaultConfig, 3193 defaults : defaultConfig,
3192 //Initialize is fired when the chart is initialized - Data is passed in as a parameter 3194 //Initialize is fired when the chart is initialized - Data is passed in as a parameter
3193 //Config is automatically merged by the core of Chart.js, and is available at this.options 3195 //Config is automatically merged by the core of Chart.js, and is available at this.options
...@@ -3412,6 +3414,9 @@ ...@@ -3412,6 +3414,9 @@
3412 //Number - Pixel width of the angle line 3414 //Number - Pixel width of the angle line
3413 angleLineWidth : 1, 3415 angleLineWidth : 1,
3414 3416
3417 + //Number - Interval at which to draw angle lines ("every Nth point")
3418 + angleLineInterval: 1,
3419 +
3415 //String - Point label font declaration 3420 //String - Point label font declaration
3416 pointLabelFontFamily : "'Arial'", 3421 pointLabelFontFamily : "'Arial'",
3417 3422
...@@ -3446,7 +3451,7 @@ ...@@ -3446,7 +3451,7 @@
3446 datasetFill : true, 3451 datasetFill : true,
3447 3452
3448 //String - A legend template 3453 //String - A legend template
3449 - legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 3454 + legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].strokeColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
3450 3455
3451 }, 3456 },
3452 3457
...@@ -3565,6 +3570,7 @@ ...@@ -3565,6 +3570,7 @@
3565 lineColor: this.options.scaleLineColor, 3570 lineColor: this.options.scaleLineColor,
3566 angleLineColor : this.options.angleLineColor, 3571 angleLineColor : this.options.angleLineColor,
3567 angleLineWidth : (this.options.angleShowLineOut) ? this.options.angleLineWidth : 0, 3572 angleLineWidth : (this.options.angleShowLineOut) ? this.options.angleLineWidth : 0,
3573 + angleLineInterval: (this.options.angleLineInterval) ? this.options.angleLineInterval : 1,
3568 // Point labels at the edge of each line 3574 // Point labels at the edge of each line
3569 pointLabelFontColor : this.options.pointLabelFontColor, 3575 pointLabelFontColor : this.options.pointLabelFontColor,
3570 pointLabelFontSize : this.options.pointLabelFontSize, 3576 pointLabelFontSize : this.options.pointLabelFontSize,
......
This diff could not be displayed because it is too large.
...@@ -32,13 +32,13 @@ ...@@ -32,13 +32,13 @@
32 font-size: smaller; 32 font-size: smaller;
33 cursor: default; 33 cursor: default;
34 } 34 }
35 -.chart-legend li span, 35 +.chart-legend-icon,
36 -.bar-legend li span, 36 +.bar-legend-icon,
37 -.line-legend li span, 37 +.line-legend-icon,
38 -.pie-legend li span, 38 +.pie-legend-icon,
39 -.radar-legend li span, 39 +.radar-legend-icon,
40 -.polararea-legend li span, 40 +.polararea-legend-icon,
41 -.doughnut-legend li span { 41 +.doughnut-legend-icon {
42 display: block; 42 display: block;
43 position: absolute; 43 position: absolute;
44 left: 0; 44 left: 0;
......
1 -/*!
2 - * angular-chart.js
3 - * http://jtblin.github.io/angular-chart.js/
4 - * Version: 0.8.8
5 - *
6 - * Copyright 2015 Jerome Touffe-Blin
7 - * Released under the BSD license
8 - * https://github.com/jtblin/angular-chart.js/blob/master/LICENSE
9 - */
10 -
11 (function (factory) { 1 (function (factory) {
12 'use strict'; 2 'use strict';
13 if (typeof exports === 'object') { 3 if (typeof exports === 'object') {
...@@ -147,14 +137,15 @@ ...@@ -147,14 +137,15 @@
147 // Order of setting "watch" matter 137 // Order of setting "watch" matter
148 138
149 scope.$watch('data', function (newVal, oldVal) { 139 scope.$watch('data', function (newVal, oldVal) {
150 - if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) return; 140 + if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) {
141 + destroyChart(chart, scope);
142 + return;
143 + }
151 var chartType = type || scope.chartType; 144 var chartType = type || scope.chartType;
152 if (! chartType) return; 145 if (! chartType) return;
153 146
154 - if (chart) { 147 + if (chart && canUpdateChart(newVal, oldVal))
155 - if (canUpdateChart(newVal, oldVal)) return updateChart(chart, newVal, scope, elem); 148 + return updateChart(chart, newVal, scope, elem);
156 - chart.destroy();
157 - }
158 149
159 createChart(chartType); 150 createChart(chartType);
160 }, true); 151 }, true);
...@@ -167,12 +158,11 @@ ...@@ -167,12 +158,11 @@
167 scope.$watch('chartType', function (newVal, oldVal) { 158 scope.$watch('chartType', function (newVal, oldVal) {
168 if (isEmpty(newVal)) return; 159 if (isEmpty(newVal)) return;
169 if (angular.equals(newVal, oldVal)) return; 160 if (angular.equals(newVal, oldVal)) return;
170 - if (chart) chart.destroy();
171 createChart(newVal); 161 createChart(newVal);
172 }); 162 });
173 163
174 scope.$on('$destroy', function () { 164 scope.$on('$destroy', function () {
175 - if (chart) chart.destroy(); 165 + destroyChart(chart, scope);
176 }); 166 });
177 167
178 function resetChart (newVal, oldVal) { 168 function resetChart (newVal, oldVal) {
...@@ -183,8 +173,6 @@ ...@@ -183,8 +173,6 @@
183 173
184 // chart.update() doesn't work for series and labels 174 // chart.update() doesn't work for series and labels
185 // so we have to re-create the chart entirely 175 // so we have to re-create the chart entirely
186 - if (chart) chart.destroy();
187 -
188 createChart(chartType); 176 createChart(chartType);
189 } 177 }
190 178
...@@ -196,12 +184,16 @@ ...@@ -196,12 +184,16 @@
196 } 184 }
197 if (! scope.data || ! scope.data.length) return; 185 if (! scope.data || ! scope.data.length) return;
198 scope.getColour = typeof scope.getColour === 'function' ? scope.getColour : getRandomColour; 186 scope.getColour = typeof scope.getColour === 'function' ? scope.getColour : getRandomColour;
199 - scope.colours = getColours(type, scope); 187 + var colours = getColours(type, scope);
200 var cvs = elem[0], ctx = cvs.getContext('2d'); 188 var cvs = elem[0], ctx = cvs.getContext('2d');
201 var data = Array.isArray(scope.data[0]) ? 189 var data = Array.isArray(scope.data[0]) ?
202 - getDataSets(scope.labels, scope.data, scope.series || [], scope.colours) : 190 + getDataSets(scope.labels, scope.data, scope.series || [], colours) :
203 - getData(scope.labels, scope.data, scope.colours); 191 + getData(scope.labels, scope.data, colours);
204 var options = angular.extend({}, ChartJs.getOptions(type), scope.options); 192 var options = angular.extend({}, ChartJs.getOptions(type), scope.options);
193 +
194 + // Destroy old chart if it exists to avoid ghost charts issue
195 + // https://github.com/jtblin/angular-chart.js/issues/187
196 + destroyChart(chart, scope);
205 chart = new ChartJs.Chart(ctx)[type](data, options); 197 chart = new ChartJs.Chart(ctx)[type](data, options);
206 scope.$emit('create', chart); 198 scope.$emit('create', chart);
207 199
...@@ -255,13 +247,18 @@ ...@@ -255,13 +247,18 @@
255 } 247 }
256 248
257 function getColours (type, scope) { 249 function getColours (type, scope) {
250 + var notEnoughColours = false;
258 var colours = angular.copy(scope.colours || 251 var colours = angular.copy(scope.colours ||
259 ChartJs.getOptions(type).colours || 252 ChartJs.getOptions(type).colours ||
260 Chart.defaults.global.colours 253 Chart.defaults.global.colours
261 ); 254 );
262 while (colours.length < scope.data.length) { 255 while (colours.length < scope.data.length) {
263 colours.push(scope.getColour()); 256 colours.push(scope.getColour());
257 + notEnoughColours = true;
264 } 258 }
259 + // mutate colours in this case as we don't want
260 + // the colours to change on each refresh
261 + if (notEnoughColours) scope.colours = colours;
265 return colours.map(convertColour); 262 return colours.map(convertColour);
266 } 263 }
267 264
...@@ -368,5 +365,11 @@ ...@@ -368,5 +365,11 @@
368 var options = angular.extend({}, Chart.defaults.global, ChartJs.getOptions(type), scope.options); 365 var options = angular.extend({}, Chart.defaults.global, ChartJs.getOptions(type), scope.options);
369 return options.responsive; 366 return options.responsive;
370 } 367 }
368 +
369 + function destroyChart(chart, scope) {
370 + if(! chart) return;
371 + chart.destroy();
372 + scope.$emit('destroy', chart);
373 + }
371 } 374 }
372 })); 375 }));
......
1 -.chart-legend,.bar-legend,.line-legend,.pie-legend,.radar-legend,.polararea-legend,.doughnut-legend{list-style-type:none;margin-top:5px;text-align:center;-webkit-padding-start:0;-moz-padding-start:0;padding-left:0}.chart-legend li,.bar-legend li,.line-legend li,.pie-legend li,.radar-legend li,.polararea-legend li,.doughnut-legend li{display:inline-block;white-space:nowrap;position:relative;margin-bottom:4px;border-radius:5px;padding:2px 8px 2px 28px;font-size:smaller;cursor:default}.chart-legend li span,.bar-legend li span,.line-legend li span,.pie-legend li span,.radar-legend li span,.polararea-legend li span,.doughnut-legend li span{display:block;position:absolute;left:0;top:0;width:20px;height:20px;border-radius:5px} 1 +.bar-legend,.chart-legend,.doughnut-legend,.line-legend,.pie-legend,.polararea-legend,.radar-legend{list-style-type:none;margin-top:5px;text-align:center;-webkit-padding-start:0;-moz-padding-start:0;padding-left:0}.bar-legend li,.chart-legend li,.doughnut-legend li,.line-legend li,.pie-legend li,.polararea-legend li,.radar-legend li{display:inline-block;white-space:nowrap;position:relative;margin-bottom:4px;border-radius:5px;padding:2px 8px 2px 28px;font-size:smaller;cursor:default}.bar-legend-icon,.chart-legend-icon,.doughnut-legend-icon,.line-legend-icon,.pie-legend-icon,.polararea-legend-icon,.radar-legend-icon{display:block;position:absolute;left:0;top:0;width:20px;height:20px;border-radius:5px}
2 /*# sourceMappingURL=angular-chart.min.css.map */ 2 /*# sourceMappingURL=angular-chart.min.css.map */
......
This diff is collapsed. Click to expand it.