|
55 | 55 | * Allows configuring chart js using the provider
|
56 | 56 | *
|
57 | 57 | * angular.module('myModule', ['chart.js']).config(function(ChartJsProvider) {
|
58 |
| - * ChartJsProvider.setOptions({ responsive: true }); |
59 |
| - * ChartJsProvider.setOptions('Line', { responsive: false }); |
| 58 | + * ChartJsProvider.setOptions({ responsive: false }); |
| 59 | + * ChartJsProvider.setOptions('Line', { responsive: true }); |
60 | 60 | * })))
|
61 | 61 | */
|
62 | 62 | function ChartJsProvider () {
|
63 |
| - var options = {}; |
| 63 | + var options = { responsive: true }; |
64 | 64 | var ChartJs = {
|
65 | 65 | Chart: Chart,
|
66 | 66 | getOptions: function (type) {
|
|
105 | 105 | chartDatasetOverride: '=?'
|
106 | 106 | },
|
107 | 107 | link: function (scope, elem/*, attrs */) {
|
108 |
| - var chart; |
109 |
| - |
110 | 108 | if (useExcanvas) window.G_vmlCanvasManager.initElement(elem[0]);
|
111 | 109 |
|
112 | 110 | // Order of setting "watch" matter
|
| 111 | + scope.$watch('chartData', watchData, true); |
| 112 | + scope.$watch('chartSeries', watchOther, true); |
| 113 | + scope.$watch('chartLabels', watchOther, true); |
| 114 | + scope.$watch('chartOptions', watchOther, true); |
| 115 | + scope.$watch('chartColors', watchOther, true); |
| 116 | + scope.$watch('chartDatasetOverride', watchOther, true); |
| 117 | + scope.$watch('chartType', watchType, false); |
| 118 | + |
| 119 | + scope.$on('$destroy', function () { |
| 120 | + destroyChart(scope); |
| 121 | + }); |
| 122 | + |
| 123 | + scope.$on('$resize', function () { |
| 124 | + if (scope.chart) scope.chart.resize(); |
| 125 | + }); |
113 | 126 |
|
114 |
| - scope.$watch('chartData', function (newVal, oldVal) { |
| 127 | + function watchData (newVal, oldVal) { |
115 | 128 | if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) {
|
116 |
| - destroyChart(chart, scope); |
| 129 | + destroyChart(scope); |
117 | 130 | return;
|
118 | 131 | }
|
119 | 132 | var chartType = type || scope.chartType;
|
120 | 133 | if (! chartType) return;
|
121 | 134 |
|
122 |
| - if (chart && canUpdateChart(newVal, oldVal)) |
123 |
| - return updateChart(chart, newVal, scope); |
124 |
| - |
125 |
| - createChart(chartType); |
126 |
| - }, true); |
| 135 | + if (scope.chart && canUpdateChart(newVal, oldVal)) |
| 136 | + return updateChart(newVal, scope); |
127 | 137 |
|
128 |
| - scope.$watch('chartSeries', resetChart, true); |
129 |
| - scope.$watch('chartLabels', resetChart, true); |
130 |
| - scope.$watch('chartOptions', resetChart, true); |
131 |
| - scope.$watch('chartColors', resetChart, true); |
132 |
| - scope.$watch('chartDatasetOverride', resetChart, true); |
133 |
| - |
134 |
| - scope.$watch('chartType', function (newVal, oldVal) { |
135 |
| - if (isEmpty(newVal)) return; |
136 |
| - if (angular.equals(newVal, oldVal)) return; |
137 |
| - createChart(newVal); |
138 |
| - }); |
139 |
| - |
140 |
| - scope.$on('$destroy', function () { |
141 |
| - destroyChart(chart, scope); |
142 |
| - }); |
143 |
| - |
144 |
| - scope.$on('$resize', function () { |
145 |
| - if (chart) chart.resize(); |
146 |
| - }); |
| 138 | + createChart(chartType, scope, elem); |
| 139 | + } |
147 | 140 |
|
148 |
| - function resetChart (newVal, oldVal) { |
| 141 | + function watchOther (newVal, oldVal) { |
149 | 142 | if (isEmpty(newVal)) return;
|
150 | 143 | if (angular.equals(newVal, oldVal)) return;
|
151 | 144 | var chartType = type || scope.chartType;
|
152 | 145 | if (! chartType) return;
|
153 | 146 |
|
154 | 147 | // chart.update() doesn't work for series and labels
|
155 | 148 | // so we have to re-create the chart entirely
|
156 |
| - createChart(chartType); |
| 149 | + createChart(chartType, scope, elem); |
157 | 150 | }
|
158 | 151 |
|
159 |
| - function createChart (type) { |
160 |
| - // TODO: check parent? |
161 |
| - if (isResponsive(type, scope) && elem[0].clientHeight === 0) { |
162 |
| - return $timeout(function () { |
163 |
| - createChart(type); |
164 |
| - }, 50, false); |
165 |
| - } |
166 |
| - if (! hasData(scope)) return; |
167 |
| - scope.chartGetColor = typeof scope.chartGetColor === 'function' ? scope.chartGetColor : getRandomColor; |
168 |
| - var colors = getColors(type, scope); |
169 |
| - var cvs = elem[0], ctx = cvs.getContext('2d'); |
170 |
| - var data = Array.isArray(scope.chartData[0]) ? |
171 |
| - getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) : |
172 |
| - getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride); |
173 |
| - |
174 |
| - var options = angular.extend({}, ChartJs.getOptions(type), scope.chartOptions); |
175 |
| - // Destroy old chart if it exists to avoid ghost charts issue |
176 |
| - // https://github.com/jtblin/angular-chart.js/issues/187 |
177 |
| - destroyChart(chart, scope); |
178 |
| - |
179 |
| - chart = new ChartJs.Chart(ctx, { |
180 |
| - type: type, |
181 |
| - data: data, |
182 |
| - options: options |
183 |
| - }); |
184 |
| - scope.$emit('chart-create', chart); |
185 |
| - |
186 |
| - // Bind events |
187 |
| - cvs.onclick = scope.chartClick ? getEventHandler(scope, chart, 'chartClick', false) : angular.noop; |
188 |
| - cvs.onmousemove = scope.chartHover ? getEventHandler(scope, chart, 'chartHover', true) : angular.noop; |
| 152 | + function watchType (newVal, oldVal) { |
| 153 | + if (isEmpty(newVal)) return; |
| 154 | + if (angular.equals(newVal, oldVal)) return; |
| 155 | + createChart(newVal, scope, elem); |
189 | 156 | }
|
190 | 157 | }
|
191 | 158 | };
|
192 | 159 | };
|
193 | 160 |
|
| 161 | + function createChart (type, scope, elem) { |
| 162 | + var options = getChartOptions(type, scope); |
| 163 | + if (! hasData(scope) || ! canDisplay(type, scope, elem, options)) return; |
| 164 | + |
| 165 | + var cvs = elem[0]; |
| 166 | + var ctx = cvs.getContext('2d'); |
| 167 | + |
| 168 | + scope.chartGetColor = getChartColorFn(scope); |
| 169 | + var data = getChartData(type, scope); |
| 170 | + |
| 171 | + // Destroy old chart if it exists to avoid ghost charts issue |
| 172 | + // https://github.com/jtblin/angular-chart.js/issues/187 |
| 173 | + destroyChart(scope); |
| 174 | + |
| 175 | + scope.chart = new ChartJs.Chart(ctx, { |
| 176 | + type: type, |
| 177 | + data: data, |
| 178 | + options: options |
| 179 | + }); |
| 180 | + scope.$emit('chart-create', scope.chart); |
| 181 | + bindEvents(cvs, scope); |
| 182 | + } |
| 183 | + |
194 | 184 | function canUpdateChart (newVal, oldVal) {
|
195 | 185 | if (newVal && oldVal && newVal.length && oldVal.length) {
|
196 | 186 | return Array.isArray(newVal[0]) ?
|
|
205 | 195 | return carry + val;
|
206 | 196 | }
|
207 | 197 |
|
208 |
| - function getEventHandler (scope, chart, action, triggerOnlyOnChange) { |
| 198 | + function getEventHandler (scope, action, triggerOnlyOnChange) { |
209 | 199 | var lastState = null;
|
210 | 200 | return function (evt) {
|
211 |
| - var atEvent = chart.getElementsAtEvent || chart.getPointsAtEvent; |
| 201 | + var atEvent = scope.chart.getElementsAtEvent || scope.chart.getPointsAtEvent; |
212 | 202 | if (atEvent) {
|
213 |
| - var activePoints = atEvent.call(chart, evt); |
| 203 | + var activePoints = atEvent.call(scope.chart, evt); |
214 | 204 | if (triggerOnlyOnChange === false || angular.equals(lastState, activePoints) === false) {
|
215 | 205 | lastState = activePoints;
|
216 | 206 | scope[action](activePoints, evt);
|
|
280 | 270 | scope.chartLabels && scope.chartLabels.length;
|
281 | 271 | }
|
282 | 272 |
|
| 273 | + function getChartColorFn (scope) { |
| 274 | + return typeof scope.chartGetColor === 'function' ? scope.chartGetColor : getRandomColor; |
| 275 | + } |
| 276 | + |
| 277 | + function getChartData (type, scope) { |
| 278 | + var colors = getColors(type, scope); |
| 279 | + return Array.isArray(scope.chartData[0]) ? |
| 280 | + getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) : |
| 281 | + getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride); |
| 282 | + } |
| 283 | + |
283 | 284 | function getDataSets (labels, data, series, colors, datasetOverride) {
|
284 | 285 | return {
|
285 | 286 | labels: labels,
|
|
315 | 316 | return dataset;
|
316 | 317 | }
|
317 | 318 |
|
318 |
| - function updateChart (chart, values, scope) { |
| 319 | + function getChartOptions (type, scope) { |
| 320 | + return angular.extend({}, ChartJs.getOptions(type), scope.chartOptions); |
| 321 | + } |
| 322 | + |
| 323 | + function bindEvents (cvs, scope) { |
| 324 | + cvs.onclick = scope.chartClick ? getEventHandler(scope, 'chartClick', false) : angular.noop; |
| 325 | + cvs.onmousemove = scope.chartHover ? getEventHandler(scope, 'chartHover', true) : angular.noop; |
| 326 | + } |
| 327 | + |
| 328 | + function updateChart (values, scope) { |
319 | 329 | if (Array.isArray(scope.chartData[0])) {
|
320 |
| - chart.data.datasets.forEach(function (dataset, i) { |
| 330 | + scope.chart.data.datasets.forEach(function (dataset, i) { |
321 | 331 | dataset.data = values[i];
|
322 | 332 | });
|
323 | 333 | } else {
|
324 |
| - chart.data.datasets[0].data = values; |
| 334 | + scope.chart.data.datasets[0].data = values; |
325 | 335 | }
|
326 | 336 |
|
327 |
| - chart.update(); |
328 |
| - scope.$emit('chart-update', chart); |
| 337 | + scope.chart.update(); |
| 338 | + scope.$emit('chart-update', scope.chart); |
329 | 339 | }
|
330 | 340 |
|
331 | 341 | function isEmpty (value) {
|
|
334 | 344 | (typeof value === 'object' && ! Object.keys(value).length);
|
335 | 345 | }
|
336 | 346 |
|
337 |
| - function isResponsive (type, scope) { |
338 |
| - var options = angular.extend({}, Chart.defaults.global, ChartJs.getOptions(type), scope.chartOptions); |
339 |
| - return options.responsive; |
| 347 | + function canDisplay (type, scope, elem, options) { |
| 348 | + // TODO: check parent? |
| 349 | + if (options.responsive && elem[0].clientHeight === 0) { |
| 350 | + $timeout(function () { |
| 351 | + createChart(type, scope, elem); |
| 352 | + }, 50, false); |
| 353 | + return false; |
| 354 | + } |
| 355 | + return true; |
340 | 356 | }
|
341 | 357 |
|
342 |
| - function destroyChart(chart, scope) { |
343 |
| - if(! chart) return; |
344 |
| - chart.destroy(); |
345 |
| - scope.$emit('chart-destroy', chart); |
| 358 | + function destroyChart(scope) { |
| 359 | + if(! scope.chart) return; |
| 360 | + scope.chart.destroy(); |
| 361 | + scope.$emit('chart-destroy', scope.chart); |
346 | 362 | }
|
347 | 363 | }
|
348 | 364 | }));
|
0 commit comments