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
Showing
6 changed files
with
62 additions
and
53 deletions
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 | - activeBar.fillColor = activeBar.highlightFill; | 2336 | + if (activeBar) { |
2337 | - activeBar.strokeColor = activeBar.highlightStroke; | 2337 | + activeBar.fillColor = activeBar.highlightFill; |
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.
web/gui/src/main/webapp/tp/angular-chart.css
100644 → 100755
... | @@ -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; | ... | ... |
web/gui/src/main/webapp/tp/angular-chart.js
100644 → 100755
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 | })); | ... | ... |
web/gui/src/main/webapp/tp/angular-chart.min.css
100644 → 100755
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 */ | ... | ... |
web/gui/src/main/webapp/tp/angular-chart.min.js
100644 → 100755
1 | -!function(t){"use strict";"object"==typeof exports?module.exports=t("undefined"!=typeof angular?angular:require("angular"),"undefined"!=typeof Chart?Chart:require("chart.js")):"function"==typeof define&&define.amd?define(["angular","chart"],t):t(angular,Chart)}(function(t,e){"use strict";function n(){var n={},r={Chart:e,getOptions:function(e){var r=e&&n[e]||{};return t.extend({},n,r)}};this.setOptions=function(e,r){return r?void(n[e]=t.extend(n[e]||{},r)):(r=e,void(n=t.extend(n,r)))},this.$get=function(){return r}}function r(n,r){function o(t,e){return t&&e&&t.length&&e.length?Array.isArray(t[0])?t.length===e.length&&t.every(function(t,n){return t.length===e[n].length}):e.reduce(i,0)>0?t.length===e.length:!1:!1}function i(t,e){return t+e}function c(e,n,r,a){var o=null;return function(i){var c=n.getPointsAtEvent||n.getBarsAtEvent||n.getSegmentsAtEvent;if(c){var l=c.call(n,i);(a===!1||t.equals(o,l)===!1)&&(o=l,e[r](l,i),e.$apply())}}}function l(r,a){for(var o=t.copy(a.colours||n.getOptions(r).colours||e.defaults.global.colours);o.length<a.data.length;)o.push(a.getColour());return o.map(u)}function u(t){return"object"==typeof t&&null!==t?t:"string"==typeof t&&"#"===t[0]?f(g(t.substr(1))):s()}function s(){var t=[h(0,255),h(0,255),h(0,255)];return f(t)}function f(t){return{fillColor:d(t,.2),strokeColor:d(t,1),pointColor:d(t,1),pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:d(t,.8)}}function h(t,e){return Math.floor(Math.random()*(e-t+1))+t}function d(t,e){return a?"rgb("+t.join(",")+")":"rgba("+t.concat(e).join(",")+")"}function g(t){var e=parseInt(t,16),n=e>>16&255,r=e>>8&255,a=255&e;return[n,r,a]}function p(e,n,r,a){return{labels:e,datasets:n.map(function(e,n){return t.extend({},a[n],{label:r[n],data:e})})}}function v(e,n,r){return e.map(function(e,a){return t.extend({},r[a],{label:e,value:n[a],color:r[a].strokeColor,highlight:r[a].pointHighlightStroke})})}function y(t,e){var n=t.parent(),r=n.find("chart-legend"),a="<chart-legend>"+e.generateLegend()+"</chart-legend>";r.length?r.replaceWith(a):n.append(a)}function C(t,e,n,r){Array.isArray(n.data[0])?t.datasets.forEach(function(t,n){(t.points||t.bars).forEach(function(t,r){t.value=e[n][r]})}):t.segments.forEach(function(t,n){t.value=e[n]}),t.update(),n.$emit("update",t),n.legend&&"false"!==n.legend&&y(r,t)}function b(t){return!t||Array.isArray(t)&&!t.length||"object"==typeof t&&!Object.keys(t).length}function m(r,a){var o=t.extend({},e.defaults.global,n.getOptions(r),a.options);return o.responsive}return function(e){return{restrict:"CA",scope:{data:"=?",labels:"=?",options:"=?",series:"=?",colours:"=?",getColour:"=?",chartType:"=",legend:"@",click:"=?",hover:"=?",chartData:"=?",chartLabels:"=?",chartOptions:"=?",chartSeries:"=?",chartColours:"=?",chartLegend:"@",chartClick:"=?",chartHover:"=?"},link:function(i,u){function f(t,e){i.$watch(t,function(t){"undefined"!=typeof t&&(i[e]=t)})}function h(n,r){if(!b(n)&&!t.equals(n,r)){var a=e||i.chartType;a&&(w&&w.destroy(),d(a))}}function d(e){if(m(e,i)&&0===u[0].clientHeight&&0===A.clientHeight)return r(function(){d(e)},50,!1);if(i.data&&i.data.length){i.getColour="function"==typeof i.getColour?i.getColour:s,i.colours=l(e,i);var a=u[0],o=a.getContext("2d"),f=Array.isArray(i.data[0])?p(i.labels,i.data,i.series||[],i.colours):v(i.labels,i.data,i.colours),h=t.extend({},n.getOptions(e),i.options);w=new n.Chart(o)[e](f,h),i.$emit("create",w),a.onclick=i.click?c(i,w,"click",!1):t.noop,a.onmousemove=i.hover?c(i,w,"hover",!0):t.noop,i.legend&&"false"!==i.legend&&y(u,w)}}function g(t){if("undefined"!=typeof console&&"test"!==n.getOptions().env){var e="function"==typeof console.warn?console.warn:console.log;i[t]&&e.call(console,'"%s" is deprecated and will be removed in a future version. Please use "chart-%s" instead.',t,t)}}var w,A=document.createElement("div");A.className="chart-container",u.replaceWith(A),A.appendChild(u[0]),a&&window.G_vmlCanvasManager.initElement(u[0]),["data","labels","options","series","colours","legend","click","hover"].forEach(g),f("chartData","data"),f("chartLabels","labels"),f("chartOptions","options"),f("chartSeries","series"),f("chartColours","colours"),f("chartLegend","legend"),f("chartClick","click"),f("chartHover","hover"),i.$watch("data",function(t,n){if(t&&t.length&&(!Array.isArray(t[0])||t[0].length)){var r=e||i.chartType;if(r){if(w){if(o(t,n))return C(w,t,i,u);w.destroy()}d(r)}}},!0),i.$watch("series",h,!0),i.$watch("labels",h,!0),i.$watch("options",h,!0),i.$watch("colours",h,!0),i.$watch("chartType",function(e,n){b(e)||t.equals(e,n)||(w&&w.destroy(),d(e))}),i.$on("$destroy",function(){w&&w.destroy()})}}}}e.defaults.global.responsive=!0,e.defaults.global.multiTooltipTemplate="<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>",e.defaults.global.colours=["#97BBCD","#DCDCDC","#F7464A","#46BFBD","#FDB45C","#949FB1","#4D5360"];var a="object"==typeof window.G_vmlCanvasManager&&null!==window.G_vmlCanvasManager&&"function"==typeof window.G_vmlCanvasManager.initElement;return a&&(e.defaults.global.animation=!1),t.module("chart.js",[]).provider("ChartJs",n).factory("ChartJsFactory",["ChartJs","$timeout",r]).directive("chartBase",["ChartJsFactory",function(t){return new t}]).directive("chartLine",["ChartJsFactory",function(t){return new t("Line")}]).directive("chartBar",["ChartJsFactory",function(t){return new t("Bar")}]).directive("chartRadar",["ChartJsFactory",function(t){return new t("Radar")}]).directive("chartDoughnut",["ChartJsFactory",function(t){return new t("Doughnut")}]).directive("chartPie",["ChartJsFactory",function(t){return new t("Pie")}]).directive("chartPolarArea",["ChartJsFactory",function(t){return new t("PolarArea")}])}); | 1 | +!function(t){"use strict";"object"==typeof exports?module.exports=t("undefined"!=typeof angular?angular:require("angular"),"undefined"!=typeof Chart?Chart:require("chart.js")):"function"==typeof define&&define.amd?define(["angular","chart"],t):t(angular,Chart)}(function(t,e){"use strict";function n(){var n={},r={Chart:e,getOptions:function(e){var r=e&&n[e]||{};return t.extend({},n,r)}};this.setOptions=function(e,r){return r?void(n[e]=t.extend(n[e]||{},r)):(r=e,void(n=t.extend(n,r)))},this.$get=function(){return r}}function r(n,r){function o(t,e){return t&&e&&t.length&&e.length?Array.isArray(t[0])?t.length===e.length&&t.every(function(t,n){return t.length===e[n].length}):e.reduce(i,0)>0?t.length===e.length:!1:!1}function i(t,e){return t+e}function c(e,n,r,a){var o=null;return function(i){var c=n.getPointsAtEvent||n.getBarsAtEvent||n.getSegmentsAtEvent;if(c){var l=c.call(n,i);a!==!1&&t.equals(o,l)!==!1||(o=l,e[r](l,i),e.$apply())}}}function l(r,a){for(var o=!1,i=t.copy(a.colours||n.getOptions(r).colours||e.defaults.global.colours);i.length<a.data.length;)i.push(a.getColour()),o=!0;return o&&(a.colours=i),i.map(u)}function u(t){return"object"==typeof t&&null!==t?t:"string"==typeof t&&"#"===t[0]?f(g(t.substr(1))):s()}function s(){var t=[h(0,255),h(0,255),h(0,255)];return f(t)}function f(t){return{fillColor:d(t,.2),strokeColor:d(t,1),pointColor:d(t,1),pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:d(t,.8)}}function h(t,e){return Math.floor(Math.random()*(e-t+1))+t}function d(t,e){return a?"rgb("+t.join(",")+")":"rgba("+t.concat(e).join(",")+")"}function g(t){var e=parseInt(t,16),n=e>>16&255,r=e>>8&255,a=255&e;return[n,r,a]}function p(e,n,r,a){return{labels:e,datasets:n.map(function(e,n){return t.extend({},a[n],{label:r[n],data:e})})}}function v(e,n,r){return e.map(function(e,a){return t.extend({},r[a],{label:e,value:n[a],color:r[a].strokeColor,highlight:r[a].pointHighlightStroke})})}function y(t,e){var n=t.parent(),r=n.find("chart-legend"),a="<chart-legend>"+e.generateLegend()+"</chart-legend>";r.length?r.replaceWith(a):n.append(a)}function C(t,e,n,r){Array.isArray(n.data[0])?t.datasets.forEach(function(t,n){(t.points||t.bars).forEach(function(t,r){t.value=e[n][r]})}):t.segments.forEach(function(t,n){t.value=e[n]}),t.update(),n.$emit("update",t),n.legend&&"false"!==n.legend&&y(r,t)}function b(t){return!t||Array.isArray(t)&&!t.length||"object"==typeof t&&!Object.keys(t).length}function m(r,a){var o=t.extend({},e.defaults.global,n.getOptions(r),a.options);return o.responsive}function w(t,e){t&&(t.destroy(),e.$emit("destroy",t))}return function(e){return{restrict:"CA",scope:{data:"=?",labels:"=?",options:"=?",series:"=?",colours:"=?",getColour:"=?",chartType:"=",legend:"@",click:"=?",hover:"=?",chartData:"=?",chartLabels:"=?",chartOptions:"=?",chartSeries:"=?",chartColours:"=?",chartLegend:"@",chartClick:"=?",chartHover:"=?"},link:function(i,u){function f(t,e){i.$watch(t,function(t){"undefined"!=typeof t&&(i[e]=t)})}function h(n,r){if(!b(n)&&!t.equals(n,r)){var a=e||i.chartType;a&&d(a)}}function d(e){if(m(e,i)&&0===u[0].clientHeight&&0===k.clientHeight)return r(function(){d(e)},50,!1);if(i.data&&i.data.length){i.getColour="function"==typeof i.getColour?i.getColour:s;var a=l(e,i),o=u[0],f=o.getContext("2d"),h=Array.isArray(i.data[0])?p(i.labels,i.data,i.series||[],a):v(i.labels,i.data,a),g=t.extend({},n.getOptions(e),i.options);w(A,i),A=new n.Chart(f)[e](h,g),i.$emit("create",A),o.onclick=i.click?c(i,A,"click",!1):t.noop,o.onmousemove=i.hover?c(i,A,"hover",!0):t.noop,i.legend&&"false"!==i.legend&&y(u,A)}}function g(t){if("undefined"!=typeof console&&"test"!==n.getOptions().env){var e="function"==typeof console.warn?console.warn:console.log;i[t]&&e.call(console,'"%s" is deprecated and will be removed in a future version. Please use "chart-%s" instead.',t,t)}}var A,k=document.createElement("div");k.className="chart-container",u.replaceWith(k),k.appendChild(u[0]),a&&window.G_vmlCanvasManager.initElement(u[0]),["data","labels","options","series","colours","legend","click","hover"].forEach(g),f("chartData","data"),f("chartLabels","labels"),f("chartOptions","options"),f("chartSeries","series"),f("chartColours","colours"),f("chartLegend","legend"),f("chartClick","click"),f("chartHover","hover"),i.$watch("data",function(t,n){if(!t||!t.length||Array.isArray(t[0])&&!t[0].length)return void w(A,i);var r=e||i.chartType;if(r)return A&&o(t,n)?C(A,t,i,u):void d(r)},!0),i.$watch("series",h,!0),i.$watch("labels",h,!0),i.$watch("options",h,!0),i.$watch("colours",h,!0),i.$watch("chartType",function(e,n){b(e)||t.equals(e,n)||d(e)}),i.$on("$destroy",function(){w(A,i)})}}}}e.defaults.global.responsive=!0,e.defaults.global.multiTooltipTemplate="<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>",e.defaults.global.colours=["#97BBCD","#DCDCDC","#F7464A","#46BFBD","#FDB45C","#949FB1","#4D5360"];var a="object"==typeof window.G_vmlCanvasManager&&null!==window.G_vmlCanvasManager&&"function"==typeof window.G_vmlCanvasManager.initElement;return a&&(e.defaults.global.animation=!1),t.module("chart.js",[]).provider("ChartJs",n).factory("ChartJsFactory",["ChartJs","$timeout",r]).directive("chartBase",["ChartJsFactory",function(t){return new t}]).directive("chartLine",["ChartJsFactory",function(t){return new t("Line")}]).directive("chartBar",["ChartJsFactory",function(t){return new t("Bar")}]).directive("chartRadar",["ChartJsFactory",function(t){return new t("Radar")}]).directive("chartDoughnut",["ChartJsFactory",function(t){return new t("Doughnut")}]).directive("chartPie",["ChartJsFactory",function(t){return new t("Pie")}]).directive("chartPolarArea",["ChartJsFactory",function(t){return new t("PolarArea")}])}); |
2 | //# sourceMappingURL=angular-chart.min.js.map | 2 | //# sourceMappingURL=angular-chart.min.js.map | ... | ... |
-
Please register or login to post a comment