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
33 additions
and
30 deletions
This diff is collapsed. Click to expand it.
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
This diff is collapsed. Click to expand it.
-
Please register or login to post a comment