PluginProbe
Chartify – WordPress Chart Plugin / 3.0.3
Chartify – WordPress Chart Plugin v3.0.3
3.8.0 3.7.9 3.7.8 3.7.7 3.7.6 3.7.5 trunk 1.0.0 3.0.0 3.0.1 3.0.2 3.0.3 3.0.4 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.1.4 3.1.5 3.1.6 All 83 releases
chart-builder / admin / js / chart-builder-admin-chartjs.js

chart-builder-admin-chartjs.js in Chartify – WordPress Chart Plugin 3.0.3, at admin/js/chart-builder-admin-chartjs.js

922 lines 33.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 (function($) {
2 'use strict';
3 function ChartBuilderChartsJs(element, options){
4 this.el = element;
5 this.$el = $(element);
6 this.ajaxAction = 'ays_chart_admin_ajax';
7 this.htmlClassPrefix = 'ays-chart-';
8 this.htmlNamePrefix = 'ays_';
9 this.dbOptions = undefined;
10 this.chartSourceData = undefined;
11 this.chartObj = undefined;
12 this.chartOptions = null;
13 this.chartData = null;
14 this.chartTempData = null;
15 this.chartType = 'pie_chart';
16 this.chartSourceType = 'chart-js';
17 this.chartObject = null;
18
19 this.chartSources = {
20 'pie_chart' : 'Pie Chart',
21 'bar_chart' : 'Bar Chart',
22 'line_chart' : 'Line Chart',
23 }
24
25 this.init();
26
27 return this;
28 }
29
30 ChartBuilderChartsJs.prototype.init = function() {
31 var _this = this;
32 _this.chartSourceData = window.ChartBuilderSourceData;
33 _this.setEvents();
34 _this.initLibraries();
35 _this.setAccordionEvents();
36 };
37
38 // Set events
39 ChartBuilderChartsJs.prototype.setEvents = function(e){
40 var _this = this;
41
42 _this.chartType = _this.chartSourceData.chartType;
43 _this.chartSourceType = _this.chartSourceData.chartSourceType;
44 _this.chartData = _this.chartSourceData.source;
45 _this.loadChartBySource();
46 _this.configureOptions();
47 _this.resizeChart();
48
49 /* == Tabulation == */
50 _this.$el.on('click', '.nav-tab-wrapper a.nav-tab' , _this.changeTabs);
51 /* */
52
53 /* == Notifications dismiss button == */
54 _this.$el.on('click', '.notice-dismiss', function (e) {
55 _this.changeCurrentUrl('status');
56 });
57
58 _this.$el.on('click', '.toggle_ddmenu' , _this.toggleDDmenu);
59 /* */
60
61 /* Add Manual data */
62 _this.$el.on("click" , '.'+_this.htmlClassPrefix+'add-new-row-box', function(){
63 _this.addChartDataRow();
64 });
65
66 _this.$el.on("click" , '.'+_this.htmlClassPrefix+'add-new-column-box', function(){
67 _this.addChartDataColumn();
68 });
69
70 _this.$el.on('click', '.'+_this.htmlClassPrefix+'show-on-chart-bttn', function(e){
71 e.preventDefault();
72 _this.showOnChart();
73 });
74
75 /* */
76
77 /* Delete data */
78 _this.$el.on("click" , '.'+_this.htmlClassPrefix+'chart-source-data-remove-row', function(){
79 _this.deleteChartDataRow($(this));
80 _this.detectManualChange();
81 });
82 _this.$el.on("click" , '.'+_this.htmlClassPrefix+'chart-source-data-remove-col', function(){
83 _this.deleteChartDataColumn($(this));
84 _this.detectManualChange();
85 });
86 _this.$el.on('mouseenter', '.'+_this.htmlClassPrefix+'chart-source-data-remove-block', function() {
87 $(this).find('path').css('fill', '#ff0000');
88 });
89 _this.$el.on('mouseleave', '.'+_this.htmlClassPrefix+'chart-source-data-remove-block', function() {
90 $(this).find('path').css('fill', '#b8b8b8');
91 });
92 /* */
93
94 /* Save with Ctrl + S */
95 _this.$el.on('keydown', $(document), _this.quickSaveHotKeys);
96 /* */
97
98 // Submit buttons disabling
99 _this.$el.on('click', '.'+_this.htmlClassPrefix+'loader-banner', _this.submitOnce);
100 /* */
101
102 // Disabling submit when press enter button on inputing
103 $(document).on("keypress", '.ays-text-input', _this.keyBoardConfig.bind(_this));
104 /* */
105
106 // Modal close
107 $(document).on('click', '.ays-close', function () {
108 $(this).parents('.ays-modal').aysModal('hide');
109 });
110
111 // Changing source type to manual
112 _this.$el.on('input', '.'+_this.htmlClassPrefix+'chart-source-data-content input', function () {
113 _this.detectManualChange();
114 });
115
116 // Shortcode text for editor tooltip
117 $(document).find('strong.ays-chart-shortcode-box').on('mouseleave', function(){
118 var _this = $(this);
119
120 _this.attr('data-original-title', aysChartBuilderAdmin.clickForCopy);
121 _this.attr("data-bs-original-title", aysChartBuilderAdmin.clickForCopy);
122 _this.attr("title", aysChartBuilderAdmin.clickForCopy);
123 });
124
125 _this.$el.find('.'+_this.htmlClassPrefix+'toggle-hidden-option').on('change', function () {
126 // var animationOptions = _this.$el.find('.'+_this.htmlClassPrefix+'hidden-options-section');
127 var currentSettings = $(this).parents('.' + _this.htmlClassPrefix + 'settings-data-main-wrap')
128 var hiddenSection = currentSettings.find('.' + _this.htmlClassPrefix + 'hidden-options-section');
129 var notHiddenSection = currentSettings.find('.' + _this.htmlClassPrefix + 'not-hidden-options-section');
130
131 if ($(this).is(':checked')) {
132 hiddenSection.removeClass('display_none');
133 notHiddenSection.addClass('display_none');
134 } else {
135 hiddenSection.addClass('display_none');
136 notHiddenSection.removeClass('display_none');
137 }
138 });
139
140 _this.$el.on("click", '.'+_this.htmlClassPrefix+'chart-source-data-sort', function(){
141 _this.sortDataByColumn($(this));
142 _this.detectManualChange();
143 });
144
145 // Live preview
146 _this.liveSettingsPreview();
147 }
148
149 ChartBuilderChartsJs.prototype.liveSettingsPreview = function () {
150 var _this = this;
151
152 _this.$el.find('#'+_this.htmlClassPrefix+'option-outer-radius').on('input', function () {
153 _this.chartSourceData.settings.outer_radius = $(this).val();
154 _this.chartObject.options.radius = _this.chartSourceData.settings.outer_radius;
155 _this.chartObject.update();
156 });
157
158 _this.$el.find('#'+_this.htmlClassPrefix+'option-slice-spacing').on('input', function () {
159 _this.chartSourceData.settings.slice_spacing = $(this).val();
160 _this.chartObject.options.spacing = _this.chartSourceData.settings.slice_spacing;
161 _this.chartObject.update();
162 });
163
164 _this.$el.find('#'+_this.htmlClassPrefix+'option-circumference').on('input', function () {
165 _this.chartSourceData.settings.circumference = $(this).val();
166 _this.chartObject.options.circumference = _this.chartSourceData.settings.circumference;
167 _this.chartObject.update();
168 });
169
170 _this.$el.find('#'+_this.htmlClassPrefix+'option-start-angle').on('input', function () {
171 _this.chartSourceData.settings.start_angle = $(this).val();
172 _this.chartObject.options.rotation = _this.chartSourceData.settings.start_angle;
173 _this.chartObject.update();
174 });
175 }
176
177 ChartBuilderChartsJs.prototype.detectManualChange = function (e) {
178 var input = $(document).find('input[name="ays_source_type"]');
179 if (input.val() !== 'manual') input.val('manual');
180 }
181
182 ChartBuilderChartsJs.prototype.keyBoardConfig = function(e) {
183 if (e.which == 13) {
184 if ($(document).find("#ays-charts-form-chart-js").length !== 0 || $(document).find("#ays-settings-form").length !== 0) {
185 var parent = $(e.target).parents('.ays-chart-chart-source-data-edit-block');
186 var index = $(e.target).parents('.ays-chart-chart-source-data-input-box').index();
187 index = parent.index() == 0 ? index - 1 : index - 2;
188
189 if (e.shiftKey) {
190 var prevRow;
191 if (parent.prev('.ays-chart-chart-source-data-edit-block').length === 0) {
192 return false;
193 }
194 prevRow = parent.prev('.ays-chart-chart-source-data-edit-block');
195
196 prevRow.children('.ays-chart-chart-source-data-input-box').eq(index).find('.ays-text-input').focus();
197 } else {
198 var nextRow;
199 if (parent.next('.ays-chart-chart-source-data-edit-block').length === 0) {
200 this.addChartDataRow();
201 }
202 nextRow = parent.next('.ays-chart-chart-source-data-edit-block');
203
204 nextRow.children('.ays-chart-chart-source-data-input-box').eq(index).find('.ays-text-input').focus();
205 }
206
207 return false;
208 }
209 }
210 }
211
212 // Change tabs (tabulation)
213 ChartBuilderChartsJs.prototype.changeTabs = function(e){
214 if(! $(this).hasClass('no-js')){
215 var elemenetID = $(this).attr('href');
216 var active_tab = $(this).attr('data-tab');
217 $(document).find('.nav-tab-wrapper a.nav-tab').each(function () {
218 if ($(this).hasClass('nav-tab-active')) {
219 $(this).removeClass('nav-tab-active');
220 }
221 });
222 $(this).addClass('nav-tab-active');
223 $(document).find('.ays-tab-content').each(function () {
224 $(this).removeClass('ays-tab-content-active');
225 });
226 $(document).find("[name='ays_chart_tab']").val(active_tab);
227 $('.ays-tab-content' + elemenetID).addClass('ays-tab-content-active');
228 e.preventDefault();
229 }
230 }
231
232 ChartBuilderChartsJs.prototype.changeCurrentUrl = function(key){
233 var linkModified = location.href.split('?')[1].split('&');
234 for(var i = 0; i < linkModified.length; i++){
235 if(linkModified[i].split("=")[0] == key){
236 linkModified.splice(i, 1);
237 }
238 }
239 linkModified = linkModified.join('&');
240 window.history.replaceState({}, document.title, '?'+linkModified);
241 }
242
243 ChartBuilderChartsJs.prototype.toggleDDmenu = function(e){
244 var ddmenu = $(this).next();
245 var state = ddmenu.attr('data-expanded');
246 switch (state) {
247 case 'true':
248 $(this).find('.ays_fa').css({
249 transform: 'rotate(0deg)'
250 });
251 ddmenu.attr('data-expanded', 'false');
252 break;
253 case 'false':
254 $(this).find('.ays_fa').css({
255 transform: 'rotate(90deg)'
256 });
257 ddmenu.attr('data-expanded', 'true');
258 break;
259 }
260 }
261
262 ChartBuilderChartsJs.prototype.submitOnce = function(el) {
263 setTimeout(function() {
264 $(document).find('.ays-chart-loader-banner').attr('disabled', true);
265 }, 50);
266
267 setTimeout(function() {
268 $(document).find('.ays-chart-loader-banner').attr('disabled', false);
269 }, 5000);
270 }
271
272 // Load charts by given type main function
273 ChartBuilderChartsJs.prototype.initLibraries = function (){
274 var _this = this;
275
276 _this.$el.find('#ays-chart-option-create-author').select2({
277 placeholder: aysChartBuilderAdmin.selectUser,
278 minimumInputLength: 1,
279 allowClear: true,
280 language: {
281 searching: function() {
282 return aysChartBuilderAdmin.searching;
283 },
284 inputTooShort: function () {
285 return aysChartBuilderAdmin.pleaseEnterMore;
286 }
287 },
288 ajax: {
289 url: ajaxurl,
290 dataType: 'json',
291 data: function (response) {
292 var checkedUsers = _this.$el.find('#ays-chart-option-create-author').val();
293 return {
294 action: _this.ajaxAction,
295 function: window.aysChartBuilderChartSettings.ajax['actions']['author_user_search'],
296 security: window.aysChartBuilderChartSettings.ajax['nonces']['author_user_search'],
297 params: {
298 search: response.term,
299 val: checkedUsers
300 }
301 };
302 }
303 }
304 });
305
306 _this.$el.find('.' + _this.htmlClassPrefix + 'chart-source-data-content').sortable({
307 items: "> div." + _this.htmlClassPrefix + "chart-source-data-edit-block:not(:first)",
308 handle: "." + _this.htmlClassPrefix + "chart-source-data-move-row",
309 update: function (event, ui) {
310 _this.$el.find('div.' + _this.htmlClassPrefix + 'chart-source-data-edit-block:not(:first)').each(function (index) {
311 $(this).attr('data-source-id', index + 1);
312 $(this).find("input.ays-text-input").attr('name', 'ays_chart_source_data[' + (index + 1) + '][]')
313 });
314 }
315 });
316 }
317
318 // Load charts by given type main function
319 ChartBuilderChartsJs.prototype.loadChartBySource = function(isChangedType = false){
320 var _this = this;
321
322 if( ! _this.chartType ){
323 _this.chartType = _this.chartSourceData.chartType;
324 }
325
326 if(typeof _this.chartType !== undefined && _this.chartType){
327 switch (_this.chartType) {
328 case 'pie_chart':
329 _this.pieChartView(isChangedType);
330 break;
331 case 'bar_chart':
332 _this.barChartView(isChangedType);
333 break;
334 case 'line_chart':
335 _this.lineChartView(isChangedType);
336 break;
337 default:
338 _this.pieChartView(isChangedType);
339 break;
340 }
341 }
342 }
343
344 // Load chart by pie chart
345 ChartBuilderChartsJs.prototype.pieChartView = function(isChangedType){
346 var _this = this;
347 var getChartSource = _this.chartSourceData.source;
348
349 var dataTypes = _this.chartConvertData( getChartSource );
350
351 var settings = _this.chartSourceData.settings;
352 var nSettings = _this.configOptionsForCharts(settings);
353
354 var ctx = document.getElementById(_this.htmlClassPrefix + '-canvas');
355
356 _this.chartObject = new Chart(ctx, {
357 type: 'pie',
358 data: {
359 labels: dataTypes?.labels,
360 datasets: dataTypes?.dataSets,
361 },
362 options: {
363 radius: nSettings.outerRadius,
364 spacing: nSettings.sliceSpacing,
365 circumference: nSettings.circumference,
366 rotation: nSettings.startAngle,
367 }
368 });
369
370 _this.resizeChart();
371 }
372
373 // Load chart by bar chart
374 ChartBuilderChartsJs.prototype.barChartView = function(isChangedType){
375 var _this = this;
376 var getChartSource = _this.chartSourceData.source;
377
378 var dataTypes = _this.chartConvertData( getChartSource );
379
380 var settings = _this.chartSourceData.settings;
381 var nSettings = _this.configOptionsForCharts(settings);
382
383 var ctx = document.getElementById(_this.htmlClassPrefix + '-canvas');
384
385 _this.chartObject = new Chart(ctx, {
386 type: 'bar',
387 data: {
388 labels: dataTypes?.labels,
389 datasets: dataTypes?.dataSets,
390 },
391 options: {
392 // indexAxis: nSettings.indexAxis,
393 }
394 });
395
396 _this.resizeChart();
397 }
398
399 // Load chart by line chart
400 ChartBuilderChartsJs.prototype.lineChartView = function(isChangedType){
401 var _this = this;
402 var getChartSource = _this.chartSourceData.source;
403
404 var dataTypes = _this.chartConvertData( getChartSource );
405
406 var settings = _this.chartSourceData.settings;
407 var nSettings = _this.configOptionsForCharts(settings);
408
409 var ctx = document.getElementById(_this.htmlClassPrefix + '-canvas');
410
411 _this.chartObject = new Chart(ctx, {
412 type: 'line',
413 data: {
414 labels: dataTypes?.labels,
415 datasets: dataTypes?.dataSets,
416 },
417 options: {
418 // indexAxis: nSettings.indexAxis,
419 }
420 });
421
422 _this.resizeChart();
423 }
424
425 /*
426 Configure all settings for all chart types
427 Getting settings for each chart type in respective function
428 */
429 ChartBuilderChartsJs.prototype.configOptionsForCharts = function (settings) {
430 var newSettings = {};
431
432 // newSettings.indexAxis = (settings['index_axis'] == 'checked') ? 'y' : 'x';
433 newSettings.outerRadius = settings['outer_radius'];
434 newSettings.sliceSpacing = settings['slice_spacing'];
435 newSettings.circumference = settings['circumference'];
436 newSettings.startAngle = settings['start_angle'];
437
438 return newSettings;
439 }
440
441 // Detect window resize moment to draw charts responsively
442 ChartBuilderChartsJs.prototype.resizeChart = function(){
443 var _this = this;
444
445 //create trigger to resizeEnd event
446 $(window).resize(function() {
447 if(this.resizeTO) clearTimeout(this.resizeTO);
448 this.resizeTO = setTimeout(function() {
449 $(this).trigger('resizeEnd');
450 }, 100);
451 });
452
453 //redraw graph when window resize is completed
454 $(window).on('resizeEnd', function() {
455 _this.chartObject.resize();
456 });
457
458 }
459
460 ChartBuilderChartsJs.prototype.chartConvertData = function( data ){
461 var _this = this;
462 var dataTypes = [];
463
464 var dataTypes = Array.from({ length: data[0].length }, () => []);
465 for (var i = 0; i < data.length; i++) {
466 for (var j = 0; j < data[i].length; j++) {
467 if (i === 0) {
468 dataTypes[j].push(data[i][j]);
469 } else {
470 dataTypes[j].push(i === 0 || j === 0 ? data[i][j] : +data[i][j]);
471 }
472 }
473 }
474
475 var labels = dataTypes.shift();
476 labels.shift();
477 var dataSets = dataTypes.map(item => ({
478 label: item[0],
479 data: item.slice(1).map(Number),
480 }));
481
482 return {labels, dataSets};
483 }
484
485 // Update chart data and display immediately
486 ChartBuilderChartsJs.prototype.updateChartData = function(){
487 var _this = this;
488 var newData = _this.chartConvertData( _this.chartData );
489
490 _this.chartObject.data = {
491 ..._this.chartObject.data,
492 labels: newData?.labels,
493 datasets: newData?.dataSets,
494 },
495 _this.chartObject.update();
496 }
497
498 ChartBuilderChartsJs.prototype.addChartDataRow = function (element){
499 var _this = this;
500 var content = '';
501
502 var addedTermsandConds = this.$el.find("."+this.htmlClassPrefix+"chart-source-data-edit-block");
503 var addedTermsandCondsId = this.$el.find("."+this.htmlClassPrefix+"chart-source-data-edit-block:last-child");
504 var dataId = addedTermsandConds.length >= 1 ? addedTermsandCondsId.data("sourceId") + 1 : 1;
505 var colCount = addedTermsandConds.first().children().length - 1;
506
507 var termsCondsMessageAttrName = this.newTermsCondsMessageAttrName( this.htmlNamePrefix + 'chart_source_data' , dataId );
508
509 content += '<div class = "'+this.htmlClassPrefix+'chart-source-data-edit-block" data-source-id="' + dataId + '" >';
510 content += '<div class="'+this.htmlClassPrefix+'chart-source-data-move-block '+this.htmlClassPrefix+'chart-source-data-move-row">';
511 content += '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4V224H109.3l9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4H224V402.7l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4V288H402.7l-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4H288V109.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z" style="fill: #b8b8b8;" /></svg>';
512 content += '</div>';
513 content += '<div class="'+this.htmlClassPrefix+'icons-box '+this.htmlClassPrefix+'icons-remove-box">';
514 content += '<svg class="'+this.htmlClassPrefix+'chart-source-data-remove-block '+this.htmlClassPrefix+'chart-source-data-remove-row" data-trigger="hover" data-bs-toggle="tooltip" title="Delete row" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" style="fill: #b8b8b8;" /></svg>';
515 content += '</div>';
516 for (var i = 0; i < colCount; i++) {
517 if (i == 0) {
518 content += '<div class="'+this.htmlClassPrefix+'chart-source-data-input-box '+this.htmlClassPrefix+'chart-source-data-name-input-box" data-cell-id="'+i+'">';
519 content += '<input type="text" class="ays-text-input form-control" name="' + termsCondsMessageAttrName + '">';
520 content += '</div>';
521 } else {
522 content += '<div class="'+this.htmlClassPrefix+'chart-source-data-input-box '+this.htmlClassPrefix+'chart-source-data-input-number" data-cell-id="'+i+'">';
523 content += '<input type="number" class="ays-text-input form-control" name="' + termsCondsMessageAttrName + '" step="any">';
524 content += '</div>';
525 }
526 }
527 content += '</div>';
528
529 this.$el.find('.'+this.htmlClassPrefix+'chart-source-data-content').append(content);
530 $('[data-bs-toggle="tooltip"]').tooltip();
531 }
532
533 ChartBuilderChartsJs.prototype.addChartDataColumn = function (e){
534 var _this = this;
535
536 var rows = _this.$el.find("."+_this.htmlClassPrefix+"chart-source-data-content").children();
537 var lastColId = +$(rows[0]).find('.'+_this.htmlClassPrefix+'chart-source-data-input-box:last-child').attr('data-cell-id');
538 rows.each(function(key, row){
539 var dataIDEach = row.getAttribute('data-source-id');
540 var content = '';
541
542 if (key === 0) {
543 content += '<div class="'+_this.htmlClassPrefix+'chart-source-data-input-box ' +_this.htmlClassPrefix+'chart-source-title-box" data-cell-id="'+(lastColId+1)+'">';
544 content += '<svg class="'+_this.htmlClassPrefix+'chart-source-data-remove-block '+_this.htmlClassPrefix+'chart-source-data-remove-col" data-trigger="hover" data-bs-toggle="tooltip" title="Delete column" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="10px">';
545 content += '<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" style="fill: #b8b8b8;" />';
546 content += '</svg>';
547
548 content += '<div class="' + _this.htmlClassPrefix + 'chart-source-data-titles-box-item">';
549 content += '<input type="text" class="ays-text-input form-control ' + _this.htmlClassPrefix+'chart-source-title-input" name="' + _this.newTermsCondsMessageAttrName( _this.htmlNamePrefix + 'chart_source_data' , dataIDEach ) + '">';
550 content += '<svg class="' + _this.htmlClassPrefix + 'chart-source-data-sort" data-sort-order="asc" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512">';
551 content += '<path d="M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z" style="fill: #b8b8b8;" />';
552 content += '</svg>';
553 content += '</div>'
554 content += '</div>';
555 } else {
556 content += '<div class="'+_this.htmlClassPrefix+'chart-source-data-input-box ' +_this.htmlClassPrefix+'chart-source-data-input-number" data-cell-id="'+(lastColId+1)+'">';
557 content += '<input type="number" class="ays-text-input form-control" name="' + _this.newTermsCondsMessageAttrName( _this.htmlNamePrefix + 'chart_source_data' , dataIDEach ) + '" step="any">';
558 content += '</div>';
559 }
560
561 $(row).append(content);
562 $('[data-bs-toggle="tooltip"]').tooltip();
563 });
564 }
565
566 ChartBuilderChartsJs.prototype.deleteChartDataRow = function (element){
567 var _this = this;
568
569 var rows = _this.$el.find("."+_this.htmlClassPrefix+"chart-source-data-content").children();
570 if ((rows.length - 1) >= 2) {
571 var confirm = window.confirm(aysChartBuilderAdmin.confirmRowDelete);
572 if (confirm) {
573 var thisMainParent = element.parent().parent();
574 thisMainParent.remove();
575 }
576 } else {
577 alert(aysChartBuilderAdmin.minRowNotice);
578 }
579
580 element.blur();
581 element.tooltip('hide');
582 }
583
584 ChartBuilderChartsJs.prototype.deleteChartDataColumn = function (element){
585 var _this = this;
586
587 var rows = _this.$el.find("."+_this.htmlClassPrefix+"chart-source-data-content").children();
588 if (rows.eq(1).children('.ays-chart-chart-source-data-input-number').length >= 2) {
589 var confirm = window.confirm(aysChartBuilderAdmin.confirmColDelete);
590 if (confirm) {
591 var parent = element.parents('.ays-chart-chart-source-title-box');
592 var index = _this.returnIndexOfEl(parent);
593 rows.each(function(key, row){
594 var dataRow = $(row).find('.ays-chart-chart-source-data-input-box:not("ays-chart-chart-source-data-name-input-box")');
595 $(dataRow).each(function(ind, cell){
596 if (ind == index) {
597 $(cell).remove();
598 }
599 });
600 });
601 }
602 } else {
603 alert(aysChartBuilderAdmin.minColNotice);
604 }
605
606 element.blur();
607 element.tooltip('hide');
608 }
609
610 ChartBuilderChartsJs.prototype.sortDataByColumn = function (el) {
611 var _this = this;
612
613 var sortingOrder = el.attr('data-sort-order');
614 var colFirst = el.parents('.'+_this.htmlClassPrefix+'chart-source-data-input-box');
615 var colIndex = colFirst.attr('data-cell-id');
616 var colList = colFirst.parents('.'+_this.htmlClassPrefix+'chart-source-data-content').find('.'+_this.htmlClassPrefix+'chart-source-data-input-box[data-cell-id="'+colIndex+'"] input.ays-text-input');
617
618 var sorted = {};
619 colList.each(function(key, input){
620 if (key !== 0) {
621 var rowIndex = $(input).parents('.'+_this.htmlClassPrefix+'chart-source-data-edit-block').attr('data-source-id');
622 sorted[rowIndex] = +input.value
623 }
624 });
625
626 if (sortingOrder === 'asc') {
627 sorted = _this.sortDataAsc(sorted);
628 el.attr('data-sort-order', 'desc');
629 } else if (sortingOrder === 'desc') {
630 sorted = _this.sortDataDesc(sorted);
631 el.attr('data-sort-order', 'asc');
632 } else {
633 sorted = _this.sortDataAsc(sorted);
634 el.attr('data-sort-order', 'desc');
635 }
636
637 var container = _this.$el.find('.'+_this.htmlClassPrefix+'chart-source-data-content');
638 var newContainer = [];
639 sorted.forEach((index, newIndex) => {
640 var row = container.find("."+_this.htmlClassPrefix+"chart-source-data-edit-block[data-source-id='"+index+"']");
641 var inputs = row.find('input.ays-text-input');
642 var inputName = _this.newTermsCondsMessageAttrName(_this.htmlNamePrefix + 'chart_source_data', newIndex + 1);
643
644 $(inputs).each(function (inputIndex, input) {
645 input.setAttribute('name', inputName);
646 });
647
648 newContainer.push(row);
649 });
650 sorted.forEach((index, newIndex) => {
651 var row = container.find("."+_this.htmlClassPrefix+"chart-source-data-edit-block[data-source-id='"+index+"']");
652 newContainer.push(row);
653 });
654
655 container.innerHTML = '';
656 newContainer.forEach(row => {
657 container.append(row);
658 });
659
660 var rows = container.find("."+_this.htmlClassPrefix+"chart-source-data-edit-block");
661 for (var i = 0; i < rows.length; i++) {
662 $(rows[i]).attr('data-source-id', i);
663 }
664 }
665
666 ChartBuilderChartsJs.prototype.sortDataAsc = function (data) {
667 return Object.keys(data).sort(function (a, b) {return data[a] - data[b]});
668 }
669
670 ChartBuilderChartsJs.prototype.sortDataDesc = function (data) {
671 return Object.keys(data).sort(function (a, b) {return data[b] - data[a]});
672 }
673
674 ChartBuilderChartsJs.prototype.returnIndexOfEl = function (element){
675 var i = 0;
676 var elements = element.parent().find('.ays-chart-chart-source-title-box');
677 elements.each(function(key, cell){
678 if ($(cell).is(element)) {
679 i = key;
680 }
681 });
682 return i;
683 }
684
685 ChartBuilderChartsJs.prototype.configureOptions = function() {
686 var _this = this;
687
688 _this.$el.find('.ays-chart-chart-source-title-box').eq(0).find('.ays-chart-chart-source-data-remove-block').css('visibility', 'hidden');
689
690 var removeCols = _this.$el.find('.ays-chart-chart-source-title-box').find('.ays-chart-chart-source-data-remove-block');
691 if (_this.chartType === 'pie_chart') {
692 removeCols.css('visibility', 'hidden');
693 }
694
695 var options = _this.$el.find('.cb-changable-opt');
696 var typeOptions = _this.$el.find('.cb-'+_this.chartType+'-opt');
697 options.addClass('display_none');
698 typeOptions.removeClass('display_none');
699
700 var manualTabs = _this.$el.find('.cb-changable-manual:not(.cb-'+_this.chartType+'-manual)');
701 var typeManualTab = _this.$el.find('.cb-'+_this.chartType+'-manual');
702 manualTabs.remove();
703 typeManualTab.removeClass('display_none');
704
705 var tabs = _this.$el.find('.cb-changable-tab:not(.cb-'+_this.chartType+'-tab)').parents('fieldset.ays-accordion-options-container');
706 var currentTabs = _this.$el.find('.cb-'+_this.chartType+'-tab').parents('fieldset.ays-accordion-options-container');
707 tabs.addClass('display_none');
708 currentTabs.removeClass('display_none');
709 }
710
711 ChartBuilderChartsJs.prototype.newTermsCondsMessageAttrName = function (termCondName, termCondId){
712 var _this = this;
713 return termCondName + '['+ termCondId +'][]';
714 }
715
716 ChartBuilderChartsJs.prototype.setAccordionEvents = function(e){
717 var _this = this;
718
719 _this.$el.on('click', '.ays-accordion-options-header', function(e){
720 _this.openCloseAccordion(e, _this);
721 });
722
723 _this.$el.on('click', '.ays-slices-accordion-options-header', function(e){
724 _this.openCloseAccordion(e, _this, '-slices');
725 });
726
727 _this.$el.on('click', '.ays-series-accordion-options-header', function(e){
728 _this.openCloseAccordion(e, _this, '-series');
729 });
730
731 _this.$el.on('click', '.ays-rows-accordion-options-header', function(e){
732 _this.openCloseAccordion(e, _this, '-rows');
733 });
734 }
735
736 ChartBuilderChartsJs.prototype.openCloseAccordion = function(e, _this, contType = ""){
737 var container = $(e.target).parents('.ays' + contType + '-accordion-options-container');
738 var parent = (contType != "") ? container.parents('.ays-chart' + contType + '-settings') : _this.$el.find('#' + container.parents('.ays-tab-content').attr('id') + ' .ays-accordions-container').eq(0);
739 var index = (contType != "") ? container.index() : -1;
740
741 if( container.attr('data-collapsed') === 'true' ){
742 _this.closeAllAccordions( parent, contType, index );
743 setTimeout(() => {
744 container.find('.ays' + contType + '-accordion-options-content').slideDown();
745 container.attr('data-collapsed', 'false');
746 container.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').find('path').css('fill', '#008cff');
747 container.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').removeClass('ays' + contType + '-accordion-arrow-right').addClass('ays' + contType + '-accordion-arrow-down');
748 }, 150);
749 }else{
750 setTimeout(() => {
751 container.find('.ays' + contType + '-accordion-options-content').slideUp();
752 container.attr('data-collapsed', 'true');
753 container.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').find('path').css('fill', '#c4c4c4');
754 container.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').removeClass('ays' + contType + '-accordion-arrow-down').addClass('ays' + contType + '-accordion-arrow-right');
755 }, 150);
756 }
757 }
758
759 ChartBuilderChartsJs.prototype.closeAllAccordions = function( container, contType, index ){
760 var _this = this;
761
762 container.find('.ays' + contType + '-accordion-options-container').each(function (i){
763 var $this = $(this);
764 if (i != index) {
765 setTimeout(() => {
766 $this.find('.ays' + contType + '-accordion-options-content').slideUp();
767 $this.attr('data-collapsed', 'true');
768 $this.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').find('path').css('fill', '#c4c4c4');
769 $this.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').removeClass('ays' + contType + '-accordion-arrow-down').addClass('ays' + contType + '-accordion-arrow-right');
770 }, 150);
771 }
772 });
773 }
774
775 ChartBuilderChartsJs.prototype.quickSaveHotKeys = function() {
776 $(document).on('keydown', function(e){
777 var saveButton = $(document).find('input#ays-button-apply');
778 if ( saveButton.length > 0 ) {
779 if (!(e.which == 83 && e.ctrlKey) && !(e.which == 19)){
780 return true;
781 }
782 saveButton.trigger("click");
783 e.preventDefault();
784 return false;
785 }
786 });
787 }
788
789 // Manual data preview button
790 ChartBuilderChartsJs.prototype.showOnChart = function () { // TODO
791 var _this = this;
792
793 var lastId = $(document).find(".ays-chart-chart-source-data-edit-block:last-child").attr('data-source-id');
794 var chartData = [];
795
796 var rowTitles = $(document).find('.ays-chart-chart-source-data-name-input-box');
797 rowTitles.each(function(key, el) {
798 var value = $(el).find('input').val();
799 if ( value == '' ) {
800 $(el).find('input').val('Option');
801 }
802 });
803
804 var form = $(document).find("#ays-charts-form-chart-js");
805 var data = form.serializeFormJSON();
806
807 for (var i = 0; i <= lastId; i++) {
808 if (data['ays_chart_source_data['+i+'][]'] !== undefined) {
809 var dataRow = data['ays_chart_source_data['+i+'][]'];
810 var filteredRow = [];
811 for (var key = 0; key < dataRow.length; key++) {
812 var value = dataRow[key];
813 if (value != '') {
814 filteredRow.push(value);
815 } else {
816 if (i == 0) {
817 filteredRow.push('Title'+key);
818 } else {
819 filteredRow.push('0');
820 }
821 }
822 }
823 if (filteredRow.length != 0) {
824 chartData.push(filteredRow);
825 }
826 }
827 }
828
829 _this.chartData = chartData;
830 _this.updateChartData();
831 }
832
833 ChartBuilderChartsJs.prototype.htmlDecode = function (input) {
834 if (!input) return input;
835
836 var e = document.createElement('div');
837 e.innerHTML = input;
838 return e.childNodes[0].nodeValue;
839 }
840
841 $.fn.ChartBuilderChartsJsMain = function(options) {
842 return this.each(function() {
843 if (!$.data(this, 'ChartBuilderChartsJsMain')) {
844 $.data(this, 'ChartBuilderChartsJsMain', new ChartBuilderChartsJs(this, options));
845 } else {
846 try {
847 $(this).data('ChartBuilderChartsJsMain').init();
848 } catch (err) {
849 console.error('ChartBuilderChartsJsMain has not initiated properly');
850 }
851 }
852 });
853 };
854 $(document).find('#ays-charts-form-chart-js').ChartBuilderChartsJsMain();
855
856 })(jQuery);
857
858 (function ($) {
859
860 $.fn.serializeFormJSON = function () {
861 let o = {},
862 a = this.serializeArray();
863 $.each(a, function () {
864 if (o[this.name]) {
865 if (!o[this.name].push) {
866 o[this.name] = [o[this.name]];
867 }
868 o[this.name].push(this.value || '');
869 } else {
870 o[this.name] = this.value || '';
871 }
872 });
873 return o;
874 };
875
876 $.fn.lock = function () {
877 $(this).each(function () {
878 var $this = $(this);
879 var position = $this.css('position');
880
881 if (!position) {
882 position = 'static';
883 }
884
885 switch (position) {
886 case 'absolute':
887 case 'relative':
888 break;
889 default:
890 $this.css('position', 'relative');
891 break;
892 }
893 $this.data('position', position);
894
895 var width = $this.width(),
896 height = $this.height();
897
898 var locker = $('<div class="locker"></div>');
899 locker.width(width).height(height);
900
901 var loader = $('<div class="locker-loader"></div>');
902 loader.width(width).height(height);
903
904 locker.append(loader);
905 $this.append(locker);
906 $(window).resize(function () {
907 $this.find('.locker,.locker-loader').width($this.width()).height($this.height());
908 });
909 });
910
911 return $(this);
912 };
913
914 $.fn.unlock = function () {
915 $(this).each(function () {
916 $(this).find('.locker').remove();
917 $(this).css('position', $(this).data('position'));
918 });
919
920 return $(this);
921 };
922 })(jQuery);