| @@ -1,9 +1,5 @@ | ||
| 1 | -/*jshint scripturl:true*/ | |
| 2 | -/* global google */ | |
| 3 | -/* global visualizer */ | |
| 4 | -/* global showNotice */ | |
| 5 | -(function($, wpm, visualizer) { | |
| 1 | +(function($, wpm) { | |
| 6 | 2 | var libraryWidth, libraryHeight, wpmv, wpmV, wpmvv, wpmvvl, wpmvvb, l10n; |
| 7 | 3 | |
| 8 | 4 | wpmv = wpm.view; |
| 9 | 5 | wpmV = wpm.View; |
| @@ -38,11 +34,12 @@ | ||
| 38 | 34 | wpmV.apply(this, arguments); |
| 39 | 35 | }, |
| 40 | 36 | |
| 41 | 37 | render: function() { |
| 42 | - var self, model, chart; | |
| 38 | + var self, model, chart, gv, type, series, data, table, settings, i, j, row, date; | |
| 43 | 39 | |
| 44 | 40 | self = this; |
| 41 | + gv = google.visualization; | |
| 45 | 42 | model = self.model; |
| 46 | 43 | |
| 47 | 44 | self.$el |
| 48 | 45 | .width(self.options.width) |
| @@ -48,34 +45,70 @@ | ||
| 48 | 45 | .width(self.options.width) |
| 49 | 46 | .height(self.options.height) |
| 50 | 47 | .css('background-image', 'none'); |
| 51 | 48 | |
| 52 | - chart = {}; | |
| 53 | - chart.type = model.get('type'); | |
| 54 | - chart.series = model.get('series'); | |
| 55 | - chart.data = model.get('data'); | |
| 56 | - chart.library = model.get('library'); | |
| 57 | - chart.settings = model.get('settings'); | |
| 58 | - chart.code = model.get('code'); | |
| 59 | - chart.settings.width = self.options.width; | |
| 60 | - chart.settings.height = self.options.height; | |
| 61 | - $('#' + self.id).parent().append(model.get('css')); | |
| 49 | + type = model.get('type'); | |
| 50 | + series = model.get('series'); | |
| 51 | + data = model.get('data'); | |
| 52 | + settings = model.get('settings'); | |
| 62 | 53 | |
| 63 | - if ( chart.library && 'd3' === chart.library ) { | |
| 64 | - $('body').trigger('visualizer:render:chart:start', { | |
| 65 | - id: self.id, | |
| 66 | - charts: { | |
| 67 | - [self.id]: { | |
| 68 | - library: 'd3', | |
| 69 | - code: chart.code, | |
| 70 | - series: chart.series, | |
| 71 | - data: chart.data | |
| 54 | + table = new gv.DataTable({cols: series}); | |
| 55 | + chart = type == 'gauge' ? 'Gauge' : type.charAt(0).toUpperCase() + type.slice(1) + 'Chart'; | |
| 56 | + chart = new gv[chart](self.el); | |
| 57 | + | |
| 58 | + switch (type) { | |
| 59 | + case 'pie': | |
| 60 | + if (settings.slices) { | |
| 61 | + for (i in settings.slices) { | |
| 62 | + if (settings.slices[i]['color'] == '') { | |
| 63 | + delete settings.slices[i]['color']; | |
| 64 | + } | |
| 72 | 65 | } |
| 73 | 66 | } |
| 74 | - }); | |
| 75 | - } else { | |
| 76 | - $('body').trigger('visualizer:render:specificchart:start', {id: self.id, chart: chart, v: {page_type: 'post'}} ); | |
| 67 | + break; | |
| 68 | + case 'line': | |
| 69 | + case 'bar': | |
| 70 | + case 'column': | |
| 71 | + case 'area': | |
| 72 | + case 'scatter': | |
| 73 | + case 'candlestick': | |
| 74 | + if (settings.series) { | |
| 75 | + for (i in settings.series) { | |
| 76 | + if (settings.series[i]['color'] == '') { | |
| 77 | + delete settings.series[i]['color']; | |
| 78 | + } | |
| 79 | + } | |
| 80 | + } | |
| 81 | + break; | |
| 82 | + case 'geo': | |
| 83 | + if (settings.region != undefined && settings.region.replace(/^\s+|\s+$/g, '') == '') { | |
| 84 | + settings['region'] = 'world'; | |
| 85 | + } | |
| 86 | + break; | |
| 87 | + case 'gauge': | |
| 88 | + break; | |
| 89 | + default: | |
| 90 | + return; | |
| 77 | 91 | } |
| 92 | + | |
| 93 | + for (i = 0; i < data.length; i++) { | |
| 94 | + row = []; | |
| 95 | + for (j = 0; j < series.length; j++) { | |
| 96 | + if (series[j].type == 'date' || series[j].type == 'datetime') { | |
| 97 | + date = new Date(data[i][j]); | |
| 98 | + data[i][j] = null; | |
| 99 | + if (Object.prototype.toString.call(date) === "[object Date]") { | |
| 100 | + if (!isNaN(date.getTime())) { | |
| 101 | + data[i][j] = date; | |
| 102 | + } | |
| 103 | + } | |
| 104 | + } | |
| 105 | + row.push(data[i][j]); | |
| 106 | + } | |
| 107 | + table.addRow(row); | |
| 108 | + } | |
| 109 | + | |
| 110 | + chart.draw(table, settings); | |
| 78 | 111 | } |
| 79 | 112 | }); |
| 80 | 113 | |
| 81 | 114 | /** |
| @@ -162,22 +195,8 @@ | ||
| 162 | 195 | paginationView.render(); |
| 163 | 196 | } |
| 164 | 197 | |
| 165 | 198 | self.renderCollection(); |
| 166 | - if (self.collection.length > 0) { | |
| 167 | - $('.visualizer-library-chart').css('position', 'relative') | |
| 168 | - .append($( | |
| 169 | - // jshint ignore:start | |
| 170 | - '<div class="visualizer-chart-bg"></div>' | |
| 171 | - + '<div class="visualizer-chart-insert-bg">' | |
| 172 | - + '<button class="button button-primary visualizer-library-chart-insert">' + visualizer.i10n.insert + '</button>' | |
| 173 | - + '</div>' | |
| 174 | - // jshint ignore:end | |
| 175 | - )) | |
| 176 | - .on('mouseover', function(){ | |
| 177 | - $(this).addClass('hover'); | |
| 178 | - }); | |
| 179 | - } | |
| 180 | 199 | content.unlock(); |
| 181 | 200 | } |
| 182 | 201 | } |
| 183 | 202 | }); |
| @@ -276,9 +295,9 @@ | ||
| 276 | 295 | createFilters: function() { |
| 277 | 296 | var self = this; |
| 278 | 297 | |
| 279 | 298 | self.filters = {}; |
| 280 | - _.each(l10n.library.types, function(type, i) { | |
| 299 | + _.each(['all', 'pie', 'line', 'area', 'bar', 'column', 'geo', 'scatter', 'gauge', 'candlestick'], function(type, i) { | |
| 281 | 300 | self.filters[type] = { |
| 282 | 301 | text: l10n.library.filters[type], |
| 283 | 302 | key: type, |
| 284 | 303 | priority: (i + 1) * 10 |
| @@ -319,11 +338,15 @@ | ||
| 319 | 338 | |
| 320 | 339 | self.$el.html(_.chain(items).map(function(item) { |
| 321 | 340 | var content, className; |
| 322 | 341 | |
| 323 | - content = item === '...' || item === self.options.page ? self.make('span', { class: 'visualizer-library-pagination-page' }, item) : self.make('a', { class: 'visualizer-library-pagination-page', href: 'javascript:;', 'data-page': item }, item); | |
| 342 | + content = item == '...' || item == self.options.page | |
| 343 | + ? self.make('span', { class: 'visualizer-library-pagination-page' }, item) | |
| 344 | + : self.make('a', { class: 'visualizer-library-pagination-page', href: 'javascript:;', 'data-page': item }, item); | |
| 324 | 345 | |
| 325 | - className = item === self.options.page ? 'visualizer-library-pagination-item visualizer-library-pagination-active' : 'visualizer-library-pagination-item'; | |
| 346 | + className = item == self.options.page | |
| 347 | + ? 'visualizer-library-pagination-item visualizer-library-pagination-active' | |
| 348 | + : 'visualizer-library-pagination-item'; | |
| 326 | 349 | |
| 327 | 350 | return self.make('li', { class: className }, content); |
| 328 | 351 | }).value()); |
| 329 | 352 | }, |
| @@ -337,9 +360,9 @@ | ||
| 337 | 360 | } |
| 338 | 361 | } else { |
| 339 | 362 | tmp = current - Math.floor( max / 2 ); |
| 340 | 363 | |
| 341 | - if ( max % 2 === 0 ) { | |
| 364 | + if ( max % 2 == 0 ) { | |
| 342 | 365 | tmp++; |
| 343 | 366 | } |
| 344 | 367 | |
| 345 | 368 | if ( tmp < 1 ) { |
| @@ -353,14 +376,14 @@ | ||
| 353 | 376 | for ( i = 1; i <= max; i++ ) { |
| 354 | 377 | pagenation.push(tmp++); |
| 355 | 378 | } |
| 356 | 379 | |
| 357 | - if ( pagenation[0] !== 1 ) { | |
| 380 | + if ( pagenation[0] != 1 ) { | |
| 358 | 381 | pagenation[0] = 1; |
| 359 | 382 | pagenation[1] = '...'; |
| 360 | 383 | } |
| 361 | 384 | |
| 362 | - if ( pagenation[max - 1] !== total ) { | |
| 385 | + if ( pagenation[max - 1] != total ) { | |
| 363 | 386 | pagenation[max - 1] = total; |
| 364 | 387 | pagenation[max - 2] = '...'; |
| 365 | 388 | } |
| 366 | 389 | } |
| @@ -371,9 +394,9 @@ | ||
| 371 | 394 | onPageChange: function(e) { |
| 372 | 395 | this.controller.trigger('visualizer:library:page', $(e.target).data('page')); |
| 373 | 396 | } |
| 374 | 397 | }); |
| 375 | -})(jQuery, wp.media, visualizer); | |
| 398 | +})(jQuery, wp.media); | |
| 376 | 399 | |
| 377 | 400 | (function($) { |
| 378 | 401 | $.fn.lock = function() { |
| 379 | 402 | $(this).each(function() { |
| @@ -405,9 +428,9 @@ | ||
| 405 | 428 | $this.append(locker); |
| 406 | 429 | }); |
| 407 | 430 | |
| 408 | 431 | return $(this); |
| 409 | - }; | |
| 432 | + } | |
| 410 | 433 | |
| 411 | 434 | $.fn.unlock = function() { |
| 412 | 435 | $(this).each(function() { |
| 413 | 436 | var $this = $(this); |
| @@ -418,6 +441,6 @@ | ||
| 418 | 441 | }).find('.locker').remove(); |
| 419 | 442 | }); |
| 420 | 443 | |
| 421 | 444 | return $(this); |
| 422 | - }; | |
| 423 | -})(jQuery); | |
| 445 | + } | |
| 446 | +})(jQuery); | |