PluginProbe
Chartify – WordPress Chart Plugin / 3.1.3
Chartify – WordPress Chart Plugin v3.1.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.1.3, at admin/js/chart-builder-admin-chartjs.js

933 lines 33.6 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 // title
153 _this.$el.find('#ays-title').on('input', function () {
154 _this.$el.find('.'+_this.htmlClassPrefix+'charts-title').text($(this).val());
155 });
156
157 // description
158 _this.$el.find('#'+_this.htmlClassPrefix+'description').on('input', function () {
159 _this.$el.find('.'+_this.htmlClassPrefix+'charts-description').text($(this).val());
160 });
161
162 // advanced options
163 _this.$el.find('#'+_this.htmlClassPrefix+'option-outer-radius').on('input', function () {
164 _this.chartSourceData.settings.outer_radius = $(this).val();
165 _this.chartObject.options.radius = _this.chartSourceData.settings.outer_radius;
166 _this.chartObject.update();
167 });
168
169 _this.$el.find('#'+_this.htmlClassPrefix+'option-slice-spacing').on('input', function () {
170 _this.chartSourceData.settings.slice_spacing = $(this).val();
171 _this.chartObject.options.spacing = _this.chartSourceData.settings.slice_spacing;
172 _this.chartObject.update();
173 });
174
175 _this.$el.find('#'+_this.htmlClassPrefix+'option-circumference').on('input', function () {
176 _this.chartSourceData.settings.circumference = $(this).val();
177 _this.chartObject.options.circumference = _this.chartSourceData.settings.circumference;
178 _this.chartObject.update();
179 });
180
181 _this.$el.find('#'+_this.htmlClassPrefix+'option-start-angle').on('input', function () {
182 _this.chartSourceData.settings.start_angle = $(this).val();
183 _this.chartObject.options.rotation = _this.chartSourceData.settings.start_angle;
184 _this.chartObject.update();
185 });
186 }
187
188 ChartBuilderChartsJs.prototype.detectManualChange = function (e) {
189 var input = $(document).find('input[name="ays_source_type"]');
190 if (input.val() !== 'manual') input.val('manual');
191 }
192
193 ChartBuilderChartsJs.prototype.keyBoardConfig = function(e) {
194 if (e.which == 13) {
195 if ($(document).find("#ays-charts-form-chart-js").length !== 0 || $(document).find("#ays-settings-form").length !== 0) {
196 var parent = $(e.target).parents('.ays-chart-chart-source-data-edit-block');
197 var index = $(e.target).parents('.ays-chart-chart-source-data-input-box').index();
198 index = parent.index() == 0 ? index - 1 : index - 2;
199
200 if (e.shiftKey) {
201 var prevRow;
202 if (parent.prev('.ays-chart-chart-source-data-edit-block').length === 0) {
203 return false;
204 }
205 prevRow = parent.prev('.ays-chart-chart-source-data-edit-block');
206
207 prevRow.children('.ays-chart-chart-source-data-input-box').eq(index).find('.ays-text-input').focus();
208 } else {
209 var nextRow;
210 if (parent.next('.ays-chart-chart-source-data-edit-block').length === 0) {
211 this.addChartDataRow();
212 }
213 nextRow = parent.next('.ays-chart-chart-source-data-edit-block');
214
215 nextRow.children('.ays-chart-chart-source-data-input-box').eq(index).find('.ays-text-input').focus();
216 }
217
218 return false;
219 }
220 }
221 }
222
223 // Change tabs (tabulation)
224 ChartBuilderChartsJs.prototype.changeTabs = function(e){
225 if(! $(this).hasClass('no-js')){
226 var elemenetID = $(this).attr('href');
227 var active_tab = $(this).attr('data-tab');
228 $(document).find('.nav-tab-wrapper a.nav-tab').each(function () {
229 if ($(this).hasClass('nav-tab-active')) {
230 $(this).removeClass('nav-tab-active');
231 }
232 });
233 $(this).addClass('nav-tab-active');
234 $(document).find('.ays-tab-content').each(function () {
235 $(this).removeClass('ays-tab-content-active');
236 });
237 $(document).find("[name='ays_chart_tab']").val(active_tab);
238 $('.ays-tab-content' + elemenetID).addClass('ays-tab-content-active');
239 e.preventDefault();
240 }
241 }
242
243 ChartBuilderChartsJs.prototype.changeCurrentUrl = function(key){
244 var linkModified = location.href.split('?')[1].split('&');
245 for(var i = 0; i < linkModified.length; i++){
246 if(linkModified[i].split("=")[0] == key){
247 linkModified.splice(i, 1);
248 }
249 }
250 linkModified = linkModified.join('&');
251 window.history.replaceState({}, document.title, '?'+linkModified);
252 }
253
254 ChartBuilderChartsJs.prototype.toggleDDmenu = function(e){
255 var ddmenu = $(this).next();
256 var state = ddmenu.attr('data-expanded');
257 switch (state) {
258 case 'true':
259 $(this).find('.ays_fa').css({
260 transform: 'rotate(0deg)'
261 });
262 ddmenu.attr('data-expanded', 'false');
263 break;
264 case 'false':
265 $(this).find('.ays_fa').css({
266 transform: 'rotate(90deg)'
267 });
268 ddmenu.attr('data-expanded', 'true');
269 break;
270 }
271 }
272
273 ChartBuilderChartsJs.prototype.submitOnce = function(el) {
274 setTimeout(function() {
275 $(document).find('.ays-chart-loader-banner').attr('disabled', true);
276 }, 50);
277
278 setTimeout(function() {
279 $(document).find('.ays-chart-loader-banner').attr('disabled', false);
280 }, 5000);
281 }
282
283 // Load charts by given type main function
284 ChartBuilderChartsJs.prototype.initLibraries = function (){
285 var _this = this;
286
287 _this.$el.find('#ays-chart-option-create-author').select2({
288 placeholder: aysChartBuilderAdmin.selectUser,
289 minimumInputLength: 1,
290 allowClear: true,
291 language: {
292 searching: function() {
293 return aysChartBuilderAdmin.searching;
294 },
295 inputTooShort: function () {
296 return aysChartBuilderAdmin.pleaseEnterMore;
297 }
298 },
299 ajax: {
300 url: ajaxurl,
301 dataType: 'json',
302 data: function (response) {
303 var checkedUsers = _this.$el.find('#ays-chart-option-create-author').val();
304 return {
305 action: _this.ajaxAction,
306 function: window.aysChartBuilderChartSettings.ajax['actions']['author_user_search'],
307 security: window.aysChartBuilderChartSettings.ajax['nonces']['author_user_search'],
308 params: {
309 search: response.term,
310 val: checkedUsers
311 }
312 };
313 }
314 }
315 });
316
317 _this.$el.find('.' + _this.htmlClassPrefix + 'chart-source-data-content').sortable({
318 items: "> div." + _this.htmlClassPrefix + "chart-source-data-edit-block:not(:first)",
319 handle: "." + _this.htmlClassPrefix + "chart-source-data-move-row",
320 update: function (event, ui) {
321 _this.$el.find('div.' + _this.htmlClassPrefix + 'chart-source-data-edit-block:not(:first)').each(function (index) {
322 $(this).attr('data-source-id', index + 1);
323 $(this).find("input.ays-text-input").attr('name', 'ays_chart_source_data[' + (index + 1) + '][]')
324 });
325 }
326 });
327 }
328
329 // Load charts by given type main function
330 ChartBuilderChartsJs.prototype.loadChartBySource = function(isChangedType = false){
331 var _this = this;
332
333 if( ! _this.chartType ){
334 _this.chartType = _this.chartSourceData.chartType;
335 }
336
337 if(typeof _this.chartType !== undefined && _this.chartType){
338 switch (_this.chartType) {
339 case 'pie_chart':
340 _this.pieChartView(isChangedType);
341 break;
342 case 'bar_chart':
343 _this.barChartView(isChangedType);
344 break;
345 case 'line_chart':
346 _this.lineChartView(isChangedType);
347 break;
348 default:
349 _this.pieChartView(isChangedType);
350 break;
351 }
352 }
353 }
354
355 // Load chart by pie chart
356 ChartBuilderChartsJs.prototype.pieChartView = function(isChangedType){
357 var _this = this;
358 var getChartSource = _this.chartSourceData.source;
359
360 var dataTypes = _this.chartConvertData( getChartSource );
361
362 var settings = _this.chartSourceData.settings;
363 var nSettings = _this.configOptionsForCharts(settings);
364
365 var ctx = document.getElementById(_this.htmlClassPrefix + '-canvas');
366
367 _this.chartObject = new Chart(ctx, {
368 type: 'pie',
369 data: {
370 labels: dataTypes?.labels,
371 datasets: dataTypes?.dataSets,
372 },
373 options: {
374 radius: nSettings.outerRadius,
375 spacing: nSettings.sliceSpacing,
376 circumference: nSettings.circumference,
377 rotation: nSettings.startAngle,
378 }
379 });
380
381 _this.resizeChart();
382 }
383
384 // Load chart by bar chart
385 ChartBuilderChartsJs.prototype.barChartView = function(isChangedType){
386 var _this = this;
387 var getChartSource = _this.chartSourceData.source;
388
389 var dataTypes = _this.chartConvertData( getChartSource );
390
391 var settings = _this.chartSourceData.settings;
392 var nSettings = _this.configOptionsForCharts(settings);
393
394 var ctx = document.getElementById(_this.htmlClassPrefix + '-canvas');
395
396 _this.chartObject = new Chart(ctx, {
397 type: 'bar',
398 data: {
399 labels: dataTypes?.labels,
400 datasets: dataTypes?.dataSets,
401 },
402 options: {
403 // indexAxis: nSettings.indexAxis,
404 }
405 });
406
407 _this.resizeChart();
408 }
409
410 // Load chart by line chart
411 ChartBuilderChartsJs.prototype.lineChartView = function(isChangedType){
412 var _this = this;
413 var getChartSource = _this.chartSourceData.source;
414
415 var dataTypes = _this.chartConvertData( getChartSource );
416
417 var settings = _this.chartSourceData.settings;
418 var nSettings = _this.configOptionsForCharts(settings);
419
420 var ctx = document.getElementById(_this.htmlClassPrefix + '-canvas');
421
422 _this.chartObject = new Chart(ctx, {
423 type: 'line',
424 data: {
425 labels: dataTypes?.labels,
426 datasets: dataTypes?.dataSets,
427 },
428 options: {
429 // indexAxis: nSettings.indexAxis,
430 }
431 });
432
433 _this.resizeChart();
434 }
435
436 /*
437 Configure all settings for all chart types
438 Getting settings for each chart type in respective function
439 */
440 ChartBuilderChartsJs.prototype.configOptionsForCharts = function (settings) {
441 var newSettings = {};
442
443 // newSettings.indexAxis = (settings['index_axis'] == 'checked') ? 'y' : 'x';
444 newSettings.outerRadius = settings['outer_radius'];
445 newSettings.sliceSpacing = settings['slice_spacing'];
446 newSettings.circumference = settings['circumference'];
447 newSettings.startAngle = settings['start_angle'];
448
449 return newSettings;
450 }
451
452 // Detect window resize moment to draw charts responsively
453 ChartBuilderChartsJs.prototype.resizeChart = function(){
454 var _this = this;
455
456 //create trigger to resizeEnd event
457 $(window).resize(function() {
458 if(this.resizeTO) clearTimeout(this.resizeTO);
459 this.resizeTO = setTimeout(function() {
460 $(this).trigger('resizeEnd');
461 }, 100);
462 });
463
464 //redraw graph when window resize is completed
465 $(window).on('resizeEnd', function() {
466 _this.chartObject.resize();
467 });
468
469 }
470
471 ChartBuilderChartsJs.prototype.chartConvertData = function( data ){
472 var _this = this;
473 var dataTypes = [];
474
475 var dataTypes = Array.from({ length: data[0].length }, () => []);
476 for (var i = 0; i < data.length; i++) {
477 for (var j = 0; j < data[i].length; j++) {
478 if (i === 0) {
479 dataTypes[j].push(data[i][j]);
480 } else {
481 dataTypes[j].push(i === 0 || j === 0 ? data[i][j] : +data[i][j]);
482 }
483 }
484 }
485
486 var labels = dataTypes.shift();
487 labels.shift();
488 var dataSets = dataTypes.map(item => ({
489 label: item[0],
490 data: item.slice(1).map(Number),
491 }));
492
493 return {labels, dataSets};
494 }
495
496 // Update chart data and display immediately
497 ChartBuilderChartsJs.prototype.updateChartData = function(){
498 var _this = this;
499 var newData = _this.chartConvertData( _this.chartData );
500
501 _this.chartObject.data = {
502 ..._this.chartObject.data,
503 labels: newData?.labels,
504 datasets: newData?.dataSets,
505 },
506 _this.chartObject.update();
507 }
508
509 ChartBuilderChartsJs.prototype.addChartDataRow = function (element){
510 var _this = this;
511 var content = '';
512
513 var addedTermsandConds = this.$el.find("."+this.htmlClassPrefix+"chart-source-data-edit-block");
514 var addedTermsandCondsId = this.$el.find("."+this.htmlClassPrefix+"chart-source-data-edit-block:last-child");
515 var dataId = addedTermsandConds.length >= 1 ? addedTermsandCondsId.data("sourceId") + 1 : 1;
516 var colCount = addedTermsandConds.first().children().length - 1;
517
518 var termsCondsMessageAttrName = this.newTermsCondsMessageAttrName( this.htmlNamePrefix + 'chart_source_data' , dataId );
519
520 content += '<div class = "'+this.htmlClassPrefix+'chart-source-data-edit-block" data-source-id="' + dataId + '" >';
521 content += '<div class="'+this.htmlClassPrefix+'chart-source-data-move-block '+this.htmlClassPrefix+'chart-source-data-move-row">';
522 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>';
523 content += '</div>';
524 content += '<div class="'+this.htmlClassPrefix+'icons-box '+this.htmlClassPrefix+'icons-remove-box">';
525 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>';
526 content += '</div>';
527 for (var i = 0; i < colCount; i++) {
528 if (i == 0) {
529 content += '<div class="'+this.htmlClassPrefix+'chart-source-data-input-box '+this.htmlClassPrefix+'chart-source-data-name-input-box" data-cell-id="'+i+'">';
530 content += '<input type="text" class="ays-text-input form-control" name="' + termsCondsMessageAttrName + '">';
531 content += '</div>';
532 } else {
533 content += '<div class="'+this.htmlClassPrefix+'chart-source-data-input-box '+this.htmlClassPrefix+'chart-source-data-input-number" data-cell-id="'+i+'">';
534 content += '<input type="number" class="ays-text-input form-control" name="' + termsCondsMessageAttrName + '" step="any">';
535 content += '</div>';
536 }
537 }
538 content += '</div>';
539
540 this.$el.find('.'+this.htmlClassPrefix+'chart-source-data-content').append(content);
541 $('[data-bs-toggle="tooltip"]').tooltip();
542 }
543
544 ChartBuilderChartsJs.prototype.addChartDataColumn = function (e){
545 var _this = this;
546
547 var rows = _this.$el.find("."+_this.htmlClassPrefix+"chart-source-data-content").children();
548 var lastColId = +$(rows[0]).find('.'+_this.htmlClassPrefix+'chart-source-data-input-box:last-child').attr('data-cell-id');
549 rows.each(function(key, row){
550 var dataIDEach = row.getAttribute('data-source-id');
551 var content = '';
552
553 if (key === 0) {
554 content += '<div class="'+_this.htmlClassPrefix+'chart-source-data-input-box ' +_this.htmlClassPrefix+'chart-source-title-box" data-cell-id="'+(lastColId+1)+'">';
555 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">';
556 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;" />';
557 content += '</svg>';
558
559 content += '<div class="' + _this.htmlClassPrefix + 'chart-source-data-titles-box-item">';
560 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 ) + '">';
561 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">';
562 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;" />';
563 content += '</svg>';
564 content += '</div>'
565 content += '</div>';
566 } else {
567 content += '<div class="'+_this.htmlClassPrefix+'chart-source-data-input-box ' +_this.htmlClassPrefix+'chart-source-data-input-number" data-cell-id="'+(lastColId+1)+'">';
568 content += '<input type="number" class="ays-text-input form-control" name="' + _this.newTermsCondsMessageAttrName( _this.htmlNamePrefix + 'chart_source_data' , dataIDEach ) + '" step="any">';
569 content += '</div>';
570 }
571
572 $(row).append(content);
573 $('[data-bs-toggle="tooltip"]').tooltip();
574 });
575 }
576
577 ChartBuilderChartsJs.prototype.deleteChartDataRow = function (element){
578 var _this = this;
579
580 var rows = _this.$el.find("."+_this.htmlClassPrefix+"chart-source-data-content").children();
581 if ((rows.length - 1) >= 2) {
582 var confirm = window.confirm(aysChartBuilderAdmin.confirmRowDelete);
583 if (confirm) {
584 var thisMainParent = element.parent().parent();
585 thisMainParent.remove();
586 }
587 } else {
588 alert(aysChartBuilderAdmin.minRowNotice);
589 }
590
591 element.blur();
592 element.tooltip('hide');
593 }
594
595 ChartBuilderChartsJs.prototype.deleteChartDataColumn = function (element){
596 var _this = this;
597
598 var rows = _this.$el.find("."+_this.htmlClassPrefix+"chart-source-data-content").children();
599 if (rows.eq(1).children('.ays-chart-chart-source-data-input-number').length >= 2) {
600 var confirm = window.confirm(aysChartBuilderAdmin.confirmColDelete);
601 if (confirm) {
602 var parent = element.parents('.ays-chart-chart-source-title-box');
603 var index = _this.returnIndexOfEl(parent);
604 rows.each(function(key, row){
605 var dataRow = $(row).find('.ays-chart-chart-source-data-input-box:not("ays-chart-chart-source-data-name-input-box")');
606 $(dataRow).each(function(ind, cell){
607 if (ind == index) {
608 $(cell).remove();
609 }
610 });
611 });
612 }
613 } else {
614 alert(aysChartBuilderAdmin.minColNotice);
615 }
616
617 element.blur();
618 element.tooltip('hide');
619 }
620
621 ChartBuilderChartsJs.prototype.sortDataByColumn = function (el) {
622 var _this = this;
623
624 var sortingOrder = el.attr('data-sort-order');
625 var colFirst = el.parents('.'+_this.htmlClassPrefix+'chart-source-data-input-box');
626 var colIndex = colFirst.attr('data-cell-id');
627 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');
628
629 var sorted = {};
630 colList.each(function(key, input){
631 if (key !== 0) {
632 var rowIndex = $(input).parents('.'+_this.htmlClassPrefix+'chart-source-data-edit-block').attr('data-source-id');
633 sorted[rowIndex] = +input.value
634 }
635 });
636
637 if (sortingOrder === 'asc') {
638 sorted = _this.sortDataAsc(sorted);
639 el.attr('data-sort-order', 'desc');
640 } else if (sortingOrder === 'desc') {
641 sorted = _this.sortDataDesc(sorted);
642 el.attr('data-sort-order', 'asc');
643 } else {
644 sorted = _this.sortDataAsc(sorted);
645 el.attr('data-sort-order', 'desc');
646 }
647
648 var container = _this.$el.find('.'+_this.htmlClassPrefix+'chart-source-data-content');
649 var newContainer = [];
650 sorted.forEach((index, newIndex) => {
651 var row = container.find("."+_this.htmlClassPrefix+"chart-source-data-edit-block[data-source-id='"+index+"']");
652 var inputs = row.find('input.ays-text-input');
653 var inputName = _this.newTermsCondsMessageAttrName(_this.htmlNamePrefix + 'chart_source_data', newIndex + 1);
654
655 $(inputs).each(function (inputIndex, input) {
656 input.setAttribute('name', inputName);
657 });
658
659 newContainer.push(row);
660 });
661 sorted.forEach((index, newIndex) => {
662 var row = container.find("."+_this.htmlClassPrefix+"chart-source-data-edit-block[data-source-id='"+index+"']");
663 newContainer.push(row);
664 });
665
666 container.innerHTML = '';
667 newContainer.forEach(row => {
668 container.append(row);
669 });
670
671 var rows = container.find("."+_this.htmlClassPrefix+"chart-source-data-edit-block");
672 for (var i = 0; i < rows.length; i++) {
673 $(rows[i]).attr('data-source-id', i);
674 }
675 }
676
677 ChartBuilderChartsJs.prototype.sortDataAsc = function (data) {
678 return Object.keys(data).sort(function (a, b) {return data[a] - data[b]});
679 }
680
681 ChartBuilderChartsJs.prototype.sortDataDesc = function (data) {
682 return Object.keys(data).sort(function (a, b) {return data[b] - data[a]});
683 }
684
685 ChartBuilderChartsJs.prototype.returnIndexOfEl = function (element){
686 var i = 0;
687 var elements = element.parent().find('.ays-chart-chart-source-title-box');
688 elements.each(function(key, cell){
689 if ($(cell).is(element)) {
690 i = key;
691 }
692 });
693 return i;
694 }
695
696 ChartBuilderChartsJs.prototype.configureOptions = function() {
697 var _this = this;
698
699 _this.$el.find('.ays-chart-chart-source-title-box').eq(0).find('.ays-chart-chart-source-data-remove-block').css('visibility', 'hidden');
700
701 var removeCols = _this.$el.find('.ays-chart-chart-source-title-box').find('.ays-chart-chart-source-data-remove-block');
702 if (_this.chartType === 'pie_chart') {
703 removeCols.css('visibility', 'hidden');
704 }
705
706 var options = _this.$el.find('.cb-changable-opt');
707 var typeOptions = _this.$el.find('.cb-'+_this.chartType+'-opt');
708 options.addClass('display_none');
709 typeOptions.removeClass('display_none');
710
711 var manualTabs = _this.$el.find('.cb-changable-manual:not(.cb-'+_this.chartType+'-manual)');
712 var typeManualTab = _this.$el.find('.cb-'+_this.chartType+'-manual');
713 manualTabs.remove();
714 typeManualTab.removeClass('display_none');
715
716 var tabs = _this.$el.find('.cb-changable-tab:not(.cb-'+_this.chartType+'-tab)').parents('fieldset.ays-accordion-options-container');
717 var currentTabs = _this.$el.find('.cb-'+_this.chartType+'-tab').parents('fieldset.ays-accordion-options-container');
718 tabs.addClass('display_none');
719 currentTabs.removeClass('display_none');
720 }
721
722 ChartBuilderChartsJs.prototype.newTermsCondsMessageAttrName = function (termCondName, termCondId){
723 var _this = this;
724 return termCondName + '['+ termCondId +'][]';
725 }
726
727 ChartBuilderChartsJs.prototype.setAccordionEvents = function(e){
728 var _this = this;
729
730 _this.$el.on('click', '.ays-accordion-options-header', function(e){
731 _this.openCloseAccordion(e, _this);
732 });
733
734 _this.$el.on('click', '.ays-slices-accordion-options-header', function(e){
735 _this.openCloseAccordion(e, _this, '-slices');
736 });
737
738 _this.$el.on('click', '.ays-series-accordion-options-header', function(e){
739 _this.openCloseAccordion(e, _this, '-series');
740 });
741
742 _this.$el.on('click', '.ays-rows-accordion-options-header', function(e){
743 _this.openCloseAccordion(e, _this, '-rows');
744 });
745 }
746
747 ChartBuilderChartsJs.prototype.openCloseAccordion = function(e, _this, contType = ""){
748 var container = $(e.target).parents('.ays' + contType + '-accordion-options-container');
749 var parent = (contType != "") ? container.parents('.ays-chart' + contType + '-settings') : _this.$el.find('#' + container.parents('.ays-tab-content').attr('id') + ' .ays-accordions-container').eq(0);
750 var index = (contType != "") ? container.index() : -1;
751
752 if( container.attr('data-collapsed') === 'true' ){
753 _this.closeAllAccordions( parent, contType, index );
754 setTimeout(() => {
755 container.find('.ays' + contType + '-accordion-options-content').slideDown();
756 container.attr('data-collapsed', 'false');
757 container.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').find('path').css('fill', '#008cff');
758 container.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').removeClass('ays' + contType + '-accordion-arrow-right').addClass('ays' + contType + '-accordion-arrow-down');
759 }, 150);
760 }else{
761 setTimeout(() => {
762 container.find('.ays' + contType + '-accordion-options-content').slideUp();
763 container.attr('data-collapsed', 'true');
764 container.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').find('path').css('fill', '#c4c4c4');
765 container.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').removeClass('ays' + contType + '-accordion-arrow-down').addClass('ays' + contType + '-accordion-arrow-right');
766 }, 150);
767 }
768 }
769
770 ChartBuilderChartsJs.prototype.closeAllAccordions = function( container, contType, index ){
771 var _this = this;
772
773 container.find('.ays' + contType + '-accordion-options-container').each(function (i){
774 var $this = $(this);
775 if (i != index) {
776 setTimeout(() => {
777 $this.find('.ays' + contType + '-accordion-options-content').slideUp();
778 $this.attr('data-collapsed', 'true');
779 $this.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').find('path').css('fill', '#c4c4c4');
780 $this.find('.ays' + contType + '-accordion-options-header .ays' + contType + '-accordion-arrow').removeClass('ays' + contType + '-accordion-arrow-down').addClass('ays' + contType + '-accordion-arrow-right');
781 }, 150);
782 }
783 });
784 }
785
786 ChartBuilderChartsJs.prototype.quickSaveHotKeys = function() {
787 $(document).on('keydown', function(e){
788 var saveButton = $(document).find('input#ays-button-apply');
789 if ( saveButton.length > 0 ) {
790 if (!(e.which == 83 && e.ctrlKey) && !(e.which == 19)){
791 return true;
792 }
793 saveButton.trigger("click");
794 e.preventDefault();
795 return false;
796 }
797 });
798 }
799
800 // Manual data preview button
801 ChartBuilderChartsJs.prototype.showOnChart = function () { // TODO
802 var _this = this;
803
804 var lastId = $(document).find(".ays-chart-chart-source-data-edit-block:last-child").attr('data-source-id');
805 var chartData = [];
806
807 var rowTitles = $(document).find('.ays-chart-chart-source-data-name-input-box');
808 rowTitles.each(function(key, el) {
809 var value = $(el).find('input').val();
810 if ( value == '' ) {
811 $(el).find('input').val('Option');
812 }
813 });
814
815 var form = $(document).find("#ays-charts-form-chart-js");
816 var data = form.serializeFormJSON();
817
818 for (var i = 0; i <= lastId; i++) {
819 if (data['ays_chart_source_data['+i+'][]'] !== undefined) {
820 var dataRow = data['ays_chart_source_data['+i+'][]'];
821 var filteredRow = [];
822 for (var key = 0; key < dataRow.length; key++) {
823 var value = dataRow[key];
824 if (value != '') {
825 filteredRow.push(value);
826 } else {
827 if (i == 0) {
828 filteredRow.push('Title'+key);
829 } else {
830 filteredRow.push('0');
831 }
832 }
833 }
834 if (filteredRow.length != 0) {
835 chartData.push(filteredRow);
836 }
837 }
838 }
839
840 _this.chartData = chartData;
841 _this.updateChartData();
842 }
843
844 ChartBuilderChartsJs.prototype.htmlDecode = function (input) {
845 if (!input) return input;
846
847 var e = document.createElement('div');
848 e.innerHTML = input;
849 return e.childNodes[0].nodeValue;
850 }
851
852 $.fn.ChartBuilderChartsJsMain = function(options) {
853 return this.each(function() {
854 if (!$.data(this, 'ChartBuilderChartsJsMain')) {
855 $.data(this, 'ChartBuilderChartsJsMain', new ChartBuilderChartsJs(this, options));
856 } else {
857 try {
858 $(this).data('ChartBuilderChartsJsMain').init();
859 } catch (err) {
860 console.error('ChartBuilderChartsJsMain has not initiated properly');
861 }
862 }
863 });
864 };
865 $(document).find('#ays-charts-form-chart-js').ChartBuilderChartsJsMain();
866
867 })(jQuery);
868
869 (function ($) {
870
871 $.fn.serializeFormJSON = function () {
872 let o = {},
873 a = this.serializeArray();
874 $.each(a, function () {
875 if (o[this.name]) {
876 if (!o[this.name].push) {
877 o[this.name] = [o[this.name]];
878 }
879 o[this.name].push(this.value || '');
880 } else {
881 o[this.name] = this.value || '';
882 }
883 });
884 return o;
885 };
886
887 $.fn.lock = function () {
888 $(this).each(function () {
889 var $this = $(this);
890 var position = $this.css('position');
891
892 if (!position) {
893 position = 'static';
894 }
895
896 switch (position) {
897 case 'absolute':
898 case 'relative':
899 break;
900 default:
901 $this.css('position', 'relative');
902 break;
903 }
904 $this.data('position', position);
905
906 var width = $this.width(),
907 height = $this.height();
908
909 var locker = $('<div class="locker"></div>');
910 locker.width(width).height(height);
911
912 var loader = $('<div class="locker-loader"></div>');
913 loader.width(width).height(height);
914
915 locker.append(loader);
916 $this.append(locker);
917 $(window).resize(function () {
918 $this.find('.locker,.locker-loader').width($this.width()).height($this.height());
919 });
920 });
921
922 return $(this);
923 };
924
925 $.fn.unlock = function () {
926 $(this).each(function () {
927 $(this).find('.locker').remove();
928 $(this).css('position', $(this).data('position'));
929 });
930
931 return $(this);
932 };
933 })(jQuery);