PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 1.6.0
Visualizer – Tables & Charts Manager with Built-in AI Generator v1.6.0
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 All 149 releases
← All changes | js/media/view.js +135 -37 3.10.111.6.0 View file →
@@ -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, format, formatter, axis, property;
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,19 +45,128 @@
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.settings.width = self.options.width;
59 - chart.settings.height = self.options.height;
60 - $('#' + 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');
61 53
62 - $('body').trigger('visualizer:render:specificchart:start', {id: self.id, chart: chart, v: {page_type: 'post'}} );
54 + settings.width = self.options.width;
55 + settings.height = self.options.height;
56 +
57 + table = new gv.DataTable({cols: series});
58 + chart = type == 'gauge' ? 'Gauge' : type.charAt(0).toUpperCase() + type.slice(1) + 'Chart';
59 + chart = new gv[chart](self.el);
60 +
61 + switch (type) {
62 + case 'pie':
63 + if (settings.slices) {
64 + for (i in settings.slices) {
65 + if (settings.slices[i]['color'] == '') {
66 + delete settings.slices[i]['color'];
67 + }
68 + }
69 + }
70 + break;
71 + case 'line':
72 + case 'bar':
73 + case 'column':
74 + case 'area':
75 + case 'scatter':
76 + case 'candlestick':
77 + if (settings.series) {
78 + for (i in settings.series) {
79 + if (settings.series[i]['color'] == '') {
80 + delete settings.series[i]['color'];
81 + }
82 + }
83 + }
84 + break;
85 + case 'geo':
86 + if (settings.region != undefined && settings.region.replace(/^\s+|\s+$/g, '') == '') {
87 + settings['region'] = 'world';
88 + }
89 + break;
90 + case 'gauge':
91 + break;
92 + default:
93 + return;
94 + }
95 +
96 + if (series[0] && (series[0].type == 'date' || series[0].type == 'datetime')) {
97 + axis = false;
98 + switch (type) {
99 + case 'line':
100 + case 'area':
101 + case 'scatter':
102 + case 'candlestick':
103 + case 'column':
104 + axis = settings.hAxis;
105 + break;
106 + case 'bar':
107 + axis = settings.vAxis;
108 + break;
109 + }
110 +
111 + if (axis) {
112 + for (property in axis.viewWindow) {
113 + date = new Date(axis.viewWindow[property]);
114 + if (Object.prototype.toString.call(date) === "[object Date]") {
115 + if (!isNaN(date.getTime())) {
116 + axis.viewWindow[property] = date;
117 + continue;
118 + }
119 + }
120 +
121 + delete axis.viewWindow[property];
122 + }
123 + }
124 + }
125 +
126 + for (i = 0; i < data.length; i++) {
127 + row = [];
128 + for (j = 0; j < series.length; j++) {
129 + if (series[j].type == 'date' || series[j].type == 'datetime') {
130 + date = new Date(data[i][j]);
131 + data[i][j] = null;
132 + if (Object.prototype.toString.call(date) === "[object Date]") {
133 + if (!isNaN(date.getTime())) {
134 + data[i][j] = date;
135 + }
136 + }
137 + }
138 + row.push(data[i][j]);
139 + }
140 + table.addRow(row);
141 + }
142 +
143 + if (settings.series) {
144 + for (i = 0; i < settings.series.length; i++) {
145 + format = settings.series[i].format;
146 + if (!format || format == '') {
147 + continue;
148 + }
149 +
150 + formatter = null;
151 + switch (series[i + 1].type) {
152 + case 'number':
153 + formatter = new gv.NumberFormat({pattern: format});
154 + break;
155 + case 'date':
156 + case 'datetime':
157 + case 'timeofday':
158 + formatter = new gv.DateFormat({pattern: format});
159 + break;
160 + }
161 +
162 + if (formatter) {
163 + formatter.format(table, i + 1);
164 + }
165 + }
166 + }
167 +
168 + chart.draw(table, settings);
63 169 }
64 170 });
65 171
66 172 /**
@@ -147,20 +253,8 @@
147 253 paginationView.render();
148 254 }
149 255
150 256 self.renderCollection();
151 - $('.visualizer-library-chart').css('position', 'relative')
152 - .append($(
153 - // jshint ignore:start
154 - '<div class="visualizer-chart-bg"></div>'
155 - + '<div class="visualizer-chart-insert-bg">'
156 - + '<button class="button button-primary visualizer-library-chart-insert">' + visualizer.i10n.insert + '</button>'
157 - + '</div>'
158 - // jshint ignore:end
159 - ))
160 - .on('mouseover', function(){
161 - $(this).addClass('hover');
162 - });
163 257 content.unlock();
164 258 }
165 259 }
166 260 });
@@ -259,9 +353,9 @@
259 353 createFilters: function() {
260 354 var self = this;
261 355
262 356 self.filters = {};
263 - _.each(l10n.library.types, function(type, i) {
357 + _.each(['all', 'pie', 'line', 'area', 'bar', 'column', 'geo', 'scatter', 'gauge', 'candlestick'], function(type, i) {
264 358 self.filters[type] = {
265 359 text: l10n.library.filters[type],
266 360 key: type,
267 361 priority: (i + 1) * 10
@@ -302,11 +396,15 @@
302 396
303 397 self.$el.html(_.chain(items).map(function(item) {
304 398 var content, className;
305 399
306 - 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);
400 + content = item == '...' || item == self.options.page
401 + ? self.make('span', { class: 'visualizer-library-pagination-page' }, item)
402 + : self.make('a', { class: 'visualizer-library-pagination-page', href: 'javascript:;', 'data-page': item }, item);
307 403
308 - className = item === self.options.page ? 'visualizer-library-pagination-item visualizer-library-pagination-active' : 'visualizer-library-pagination-item';
404 + className = item == self.options.page
405 + ? 'visualizer-library-pagination-item visualizer-library-pagination-active'
406 + : 'visualizer-library-pagination-item';
309 407
310 408 return self.make('li', { class: className }, content);
311 409 }).value());
312 410 },
@@ -320,9 +418,9 @@
320 418 }
321 419 } else {
322 420 tmp = current - Math.floor( max / 2 );
323 421
324 - if ( max % 2 === 0 ) {
422 + if ( max % 2 == 0 ) {
325 423 tmp++;
326 424 }
327 425
328 426 if ( tmp < 1 ) {
@@ -336,14 +434,14 @@
336 434 for ( i = 1; i <= max; i++ ) {
337 435 pagenation.push(tmp++);
338 436 }
339 437
340 - if ( pagenation[0] !== 1 ) {
438 + if ( pagenation[0] != 1 ) {
341 439 pagenation[0] = 1;
342 440 pagenation[1] = '...';
343 441 }
344 442
345 - if ( pagenation[max - 1] !== total ) {
443 + if ( pagenation[max - 1] != total ) {
346 444 pagenation[max - 1] = total;
347 445 pagenation[max - 2] = '...';
348 446 }
349 447 }
@@ -354,9 +452,9 @@
354 452 onPageChange: function(e) {
355 453 this.controller.trigger('visualizer:library:page', $(e.target).data('page'));
356 454 }
357 455 });
358 -})(jQuery, wp.media, visualizer);
456 +})(jQuery, wp.media);
359 457
360 458 (function($) {
361 459 $.fn.lock = function() {
362 460 $(this).each(function() {
@@ -388,9 +486,9 @@
388 486 $this.append(locker);
389 487 });
390 488
391 489 return $(this);
392 - };
490 + }
393 491
394 492 $.fn.unlock = function() {
395 493 $(this).each(function() {
396 494 var $this = $(this);
@@ -401,6 +499,6 @@
401 499 }).find('.locker').remove();
402 500 });
403 501
404 502 return $(this);
405 - };
503 + }
406 504 })(jQuery);