# chart-builder/1.0.0/admin/js/chart-builder-admin.js Chartify – WordPress Chart Plugin, version 1.0.0. 626 lines. - Page: https://pluginprobe.com/plugins/chart-builder/1.0.0/code/admin/js/chart-builder-admin.js - Raw: https://pluginprobe.com/plugins/chart-builder/1.0.0/raw/admin/js/chart-builder-admin.js - Modified: 2022-11-24T14:14:12+00:00 Line numbers below start at 1. Link to a line or a range by appending a fragment to the page URL, for example `https://pluginprobe.com/plugins/chart-builder/1.0.0/code/admin/js/chart-builder-admin.js#L10-L20`. ```javascript (function($) { 'use strict'; function AysChartBuilder(element, options){ this.el = element; this.$el = $(element); this.ajaxAction = 'ays_chart_admin_ajax'; this.htmlClassPrefix = 'ays-chart-'; this.htmlNamePrefix = 'ays_'; this.dbOptions = undefined; this.chartSourceData = undefined; this.chartObj = undefined; this.chartOptions = null; this.chartData = null; this.chartTempData = null; this.chartSources = { 'bar_chart' : 'Bar Chart', 'pie_chart' : 'Pie Chart', 'column_chart' : 'Column Chart' } this.init(); return this; } AysChartBuilder.prototype.init = function() { var _this = this; _this.chartSourceData = window.ChartBuilderSourceData; _this.setEvents(); _this.initLibraries(); _this.setAccordionEvents(); }; // Set events AysChartBuilder.prototype.setEvents = function(e){ var _this = this; /* == Choose poll type from modal == */ _this.$el.on('dblclick' , '.'+_this.htmlClassPrefix+'layer_box_blocks label.'+_this.htmlClassPrefix+'dblclick-layer:not(.'+_this.htmlClassPrefix+'type-pro-feature)', function(){ _this.$el.find('.'+_this.htmlClassPrefix+'select_button_layer input.'+_this.htmlClassPrefix+'layer_button').trigger('click'); }); _this.$el.on('change' , '.'+_this.htmlClassPrefix+'choose-source', function(){ _this.$el.find('.'+_this.htmlClassPrefix+'select_button_layer input.'+_this.htmlClassPrefix+'layer_button').prop('disabled',false).attr("data-type" , $(this).val()); // _this.$el.find('#poll_choose_type').val($(this).val()); }); _this.$el.on('click', '.'+_this.htmlClassPrefix+'layer_button' ,function(){ var getCheckedChartTpye = _this.$el.find('.'+_this.htmlClassPrefix+'choose-source:checked').val(); _this.$el.find('.'+_this.htmlClassPrefix+'layer_container').css({'position':'unset' , 'display':'none'}); _this.$el.find('.'+_this.htmlClassPrefix+'type-info-box-text-changeable').text(_this.chartSources[getCheckedChartTpye]); _this.$el.find('#'+_this.htmlClassPrefix+'option-chart-type').val(getCheckedChartTpye); _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').attr('id' , _this.htmlClassPrefix+getCheckedChartTpye); _this.loadChartBySource( getCheckedChartTpye ); }); /* */ /* == Tabulation == */ _this.$el.on('click', '.nav-tab-wrapper a.nav-tab' , _this.changeTabs); /* */ // /* == Range slider functions == */ // _this.$el.on('input', '#ays-chart-option-font-size', _this.rangeSliderChange); // _this.$el.on('mouseenter', '#ays-chart-option-font-size', function(e) { // $('#ays-chart-range-value').show(); // }); // _this.$el.on('mouseleave', '#ays-chart-option-font-size', function(e) { // $('#ays-chart-range-value').hide(); // }); // /* */ /* == Notifications dismiss button == */ _this.$el.on('click', '.notice-dismiss', function (e) { _this.changeCurrentUrl('status'); }); _this.$el.on('click', '.toggle_ddmenu' , _this.toggleDDmenu); /* */ /* Add Manual data */ _this.$el.on("click" , '.'+_this.htmlClassPrefix+'add-new-row-box', function(){ _this.addChartDataRow(); }); _this.$el.on("click" , '.'+_this.htmlClassPrefix+'add-new-column-box', function(){ _this.addLineChartDataColumn(); }); _this.$el.on('click', '.'+_this.htmlClassPrefix+'show-on-chart-bttn', function(e){ var loadedChartType = _this.$el.find('.'+_this.htmlClassPrefix+'choose-source:checked').val(); var chartType = (loadedChartType === undefined) ? _this.chartSourceData.chartType : loadedChartType; e.preventDefault(); _this.showOnChart($(this), chartType); }); /* */ /* Delete data */ _this.$el.on("click" , '.'+_this.htmlClassPrefix+'chart-source-data-remove-block', function(){ _this.deleteChartDataRow($(this)); }); _this.$el.on('mouseenter', '.'+_this.htmlClassPrefix+'chart-source-data-remove-block', function() { $(this).find('path').css('fill', '#ff0000'); }); _this.$el.on('mouseleave', '.'+_this.htmlClassPrefix+'chart-source-data-remove-block', function() { $(this).find('path').css('fill', '#b8b8b8'); }); /* */ /* Load data on the edit page */ if(_this.chartSourceData.action == 'edit'){ _this.loadChartBySource( _this.chartSourceData.chartType ); } /* */ /* Save with Ctrl + S */ _this.$el.on('keydown', $(document), _this.quickSaveHotKeys); /* */ // Submit buttons disabling _this.$el.on('click', '.'+_this.htmlClassPrefix+'loader-banner', _this.submitOnce); /* */ // Disabling submit when press enter button on inputing $(document).on("keypress", '.ays-text-input', _this.disableSubmit); /* */ // Modal close $(document).on('click', '.ays-close', function () { $(this).parents('.ays-modal').aysModal('hide'); }); } // Disabling submit when pressing enter button on input AysChartBuilder.prototype.disableSubmit = function(e){ if(e.which == 13){ if($(document).find("#ays-charts-form").length !== 0 || $(document).find("#ays-settings-form").length !== 0){ return false; } } } // Change tabs (tabulation) AysChartBuilder.prototype.changeTabs = function(e){ if(! $(this).hasClass('no-js')){ var elemenetID = $(this).attr('href'); var active_tab = $(this).attr('data-tab'); $(document).find('.nav-tab-wrapper a.nav-tab').each(function () { if ($(this).hasClass('nav-tab-active')) { $(this).removeClass('nav-tab-active'); } }); $(this).addClass('nav-tab-active'); $(document).find('.ays-tab-content').each(function () { $(this).css('display', 'none'); }); $(document).find("[name='ays_form_tab']").val(active_tab); $('.ays-tab-content' + elemenetID).css('display', 'block'); e.preventDefault(); } } // AysChartBuilder.prototype.rangeSliderChange = function(e){ // var min = e.target.min; // var max = e.target.max; // var val = e.target.value; // var width = $('#ays-chart-option-font-size').width(); // $(e.target).css('backgroundSize', (val - min) / (max - min) * 100 + '% 100%'); // $('#ays-chart-range-value').css('left', 12.8 + (val - min) / (max - min + 1) * width + 'px'); // $('#ays-chart-range-value span').html(val); // } AysChartBuilder.prototype.changeCurrentUrl = function(e){ var linkModified = location.href.split('?')[1].split('&'); for(var i = 0; i < linkModified.length; i++){ if(linkModified[i].split("=")[0] == key){ linkModified.splice(i, 1); } } linkModified = linkModified.join('&'); window.history.replaceState({}, document.title, '?'+linkModified); } AysChartBuilder.prototype.toggleDDmenu = function(e){ var ddmenu = $(this).next(); var state = ddmenu.attr('data-expanded'); switch (state) { case 'true': $(this).find('.ays_fa').css({ transform: 'rotate(0deg)' }); ddmenu.attr('data-expanded', 'false'); break; case 'false': $(this).find('.ays_fa').css({ transform: 'rotate(90deg)' }); ddmenu.attr('data-expanded', 'true'); break; } } AysChartBuilder.prototype.submitOnce = function(el) { setTimeout(function() { $(document).find('.ays-chart-loader-banner').attr('disabled', true); }, 50); setTimeout(function() { $(document).find('.ays-chart-loader-banner').attr('disabled', false); }, 5000); } // Load charts by given type main function AysChartBuilder.prototype.initLibraries = function (){ var _this = this; } // Load charts by given type main function AysChartBuilder.prototype.loadChartBySource = function( chartType ){ var _this = this; if( ! chartType ){ chartType = _this.chartSourceData.chartType; } if(typeof chartType !== undefined && chartType){ switch (chartType) { case 'pie_chart': _this.pieChartView( chartType ); break; case 'bar_chart': _this.barChartView( chartType ); break; case 'column_chart': _this.columnChartView( chartType ); break; default: _this.pieChartView( chartType ); break; } } } // Load chart by pie chart AysChartBuilder.prototype.pieChartView = function( chartType ){ var _this = this; var getChartSource = _this.chartSourceData.source; var dataTypes = _this.chartConvertData( getChartSource ); var settings = _this.chartSourceData.settings; var chartFontSize = settings['font_size']; var tooltipTrigger = settings['tooltip_trigger']; var showColorCode = (settings['show_color_code'] == 'checked') ? true : false; /* == Google part == */ google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { _this.chartData = google.visualization.arrayToDataTable( dataTypes ); _this.chartOptions = { backgroundColor: 'transparent', fontSize: chartFontSize, tooltip: { trigger: tooltipTrigger, showColorCode: showColorCode } }; // height: 250, // chartArea: { // width: '80%', // height: '80%' // }, _this.chartObj = new google.visualization.PieChart( document.getElementById(_this.htmlClassPrefix + chartType) ); _this.chartObj.draw( _this.chartData, _this.chartOptions ); _this.resizeChart(); } /* */ } // Load chart by bar chart AysChartBuilder.prototype.barChartView = function( chartType ){ var _this = this; var getChartSource = _this.chartSourceData.source; var dataTypes = _this.chartConvertData( getChartSource ); var settings = _this.chartSourceData.settings; var chartFontSize = settings['font_size']; var tooltipTrigger = settings['tooltip_trigger']; var showColorCode = (settings['show_color_code'] == 'checked') ? true : false; /* == Google part == */ google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { _this.chartData = google.visualization.arrayToDataTable(dataTypes); _this.chartOptions = { backgroundColor: 'transparent', fontSize: chartFontSize, legend: { position: 'none' }, tooltip: { trigger: tooltipTrigger, showColorCode: showColorCode } }; _this.chartObj = new google.visualization.BarChart(document.getElementById(_this.htmlClassPrefix + chartType)); _this.chartObj.draw( _this.chartData, _this.chartOptions ); _this.resizeChart(); } /* */ } // Load chart by column chart AysChartBuilder.prototype.columnChartView = function( chartType ){ var _this = this; var getChartSource = _this.chartSourceData.source; var dataTypes = _this.chartConvertData( getChartSource ); var settings = _this.chartSourceData.settings; var chartFontSize = settings['font_size']; var tooltipTrigger = settings['tooltip_trigger']; var showColorCode = (settings['show_color_code'] == 'checked') ? true : false; // Collect data in new array for chart rendering (Column chart) /* == Google part == */ google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { _this.chartData = google.visualization.arrayToDataTable(dataTypes); _this.chartOptions = { backgroundColor: 'transparent', fontSize: chartFontSize, legend: { position: 'none' }, tooltip: { trigger: tooltipTrigger, showColorCode: showColorCode } }; _this.chartObj = new google.visualization.ColumnChart(document.getElementById(_this.htmlClassPrefix + chartType)); _this.chartObj.draw( _this.chartData, _this.chartOptions ); _this.resizeChart(); } /* */ } // Detect window resize moment to draw charts responsively AysChartBuilder.prototype.resizeChart = function(){ var _this = this; //create trigger to resizeEnd event $(window).resize(function() { if(this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 100); }); //redraw graph when window resize is completed $(window).on('resizeEnd', function() { _this.chartObj.draw( _this.chartData, _this.chartOptions ); }); } // Load chart by pie chart AysChartBuilder.prototype.chartConvertData = function( data ){ var _this = this; // var dataTypes = [['Option', 'Value', { role: 'style' }]]; var dataTypes = [['Option', 'Value']]; // var defaultColors = _this.chartSourceData.settings['colors']; // Collect data in new array for chart rendering for ( var key in data ) { if ( data.hasOwnProperty( key ) ) { // var columnColor = (key <= 10) ? defaultColors[key] : Math.floor( Math.random() * 16777215 ).toString(16); dataTypes.push([ data[key][0], +(data[key][1]) ]); } } return dataTypes; } // Update chart data and display immediately AysChartBuilder.prototype.updateChartData = function( newData ){ var _this = this; _this.chartObj.draw( newData, _this.chartOptions ); } AysChartBuilder.prototype.addChartDataRow = function (element){ // var deleteImageUrl = ChartBuilderSourceData.removeManualDataRow; var content = ''; var addedTermsandConds = this.$el.find("."+this.htmlClassPrefix+"chart-source-data-edit-block"); var addedTermsandCondsId = this.$el.find("."+this.htmlClassPrefix+"chart-source-data-edit-block:last-child"); var dataId = addedTermsandConds.length >= 1 ? addedTermsandCondsId.data("sourceId") + 1 : 1; var colCount = addedTermsandConds.first().children().length - 1; var termsCondsMessageAttrName = this.newTermsCondsMessageAttrName( this.htmlNamePrefix + 'chart_source_data' , dataId ); // content += '
'; // content += '
'; // content += ''; // content += '
'; // content += '
'; // content += ''; // content += '
'; // content += '
'; // content += ''; // content += '
'; // content += '
'; content += '
'; content += '
'; content += ''; content += '
'; for (var i = 0; i < colCount; i++) { if (i == 0) { content += '
'; content += ''; content += '
'; } else { content += '
'; content += ''; content += '
'; } } content += '
'; this.$el.find('.'+this.htmlClassPrefix+'chart-source-data-content').append(content); } AysChartBuilder.prototype.deleteChartDataRow = function (element){ var $this = element; var $thisMainParent = $this.parent().parent(); $this.tooltip('hide'); $thisMainParent.remove(); } AysChartBuilder.prototype.newTermsCondsMessageAttrName = function (termCondName, termCondId){ var _this = this; return termCondName + '['+ termCondId +'][]'; } AysChartBuilder.prototype.setAccordionEvents = function(e){ var _this = this; _this.$el.on('click', '.ays-accordion-options-header', function(e){ _this.openCloseAccordion(e, _this); }); } AysChartBuilder.prototype.openCloseAccordion = function(e, _this){ var container = $(e.target).parents('.ays-accordion-options-container'); if( container.attr('data-collapsed') === 'true' ){ _this.closeAllAccordions( container.parents('.ays-tab-content').attr('id') ); // container.find('.ays-accordion-options-content').removeClass('display_none'); container.attr('data-collapsed', 'false'); container.find('.ays-accordion-options-header .ays-accordion-arrow').removeClass('ays-accordion-arrow-right').addClass('ays-accordion-arrow-down'); }else{ // container.find('.ays-accordion-options-content').addClass('display_none'); container.attr('data-collapsed', 'true'); container.find('.ays-accordion-options-header .ays-accordion-arrow').removeClass('ays-accordion-arrow-down').addClass('ays-accordion-arrow-right'); } } AysChartBuilder.prototype.closeAllAccordions = function( tab ){ var _this = this; var container = _this.$el.find('#' + tab + ' .ays-accordions-container'); container.find('.ays-accordion-options-container').each(function (){ $(this).attr('data-collapsed', 'true'); $(this).find('.ays-accordion-options-header .ays-accordion-arrow').removeClass('ays-accordion-arrow-down').addClass('ays-accordion-arrow-right'); }); } AysChartBuilder.prototype.startAjax = function( element ){ element.lock(); } AysChartBuilder.prototype.endAjax = function( element ){ element.unlock(); } AysChartBuilder.prototype.quickSaveHotKeys = function() { $(document).on('keydown', function(e){ var saveButton = $(document).find('input#ays-button-apply'); if ( saveButton.length > 0 ) { if (!(e.which == 83 && e.ctrlKey) && !(e.which == 19)){ return true; } saveButton.trigger("click"); e.preventDefault(); return false; } }); } // Manual data show on chart button AysChartBuilder.prototype.showOnChart = function (button, chartType) { var _this = this; var form = $(document).find("#ays-charts-form"); var data = form.serializeFormJSON(); // var count = $(document).find(".ays-chart-chart-source-data-edit-block").length; var lastId = $(document).find(".ays-chart-chart-source-data-edit-block:last-child").attr('data-source-id'); var chartData = []; for (var i = 0; i <= lastId; i++) { if (data['ays_chart_source_data['+i+'][]'] != undefined) { chartData.push(data['ays_chart_source_data['+i+'][]']); } } chartData = _this.chartConvertData( chartData ); chartData = window.google.visualization.arrayToDataTable( chartData ); _this.updateChartData( chartData ); chartData = null; } $.fn.AysChartBuilderMain = function(options) { return this.each(function() { if (!$.data(this, 'AysChartBuilderMain')) { $.data(this, 'AysChartBuilderMain', new AysChartBuilder(this, options)); } else { try { $(this).data('AysChartBuilderMain').init(); } catch (err) { console.error('AysChartBuilderMain has not initiated properly'); } } }); }; $(document).find('#ays-charts-form').AysChartBuilderMain(); })(jQuery); (function ($) { $.fn.serializeFormJSON = function () { let o = {}, a = this.serializeArray(); $.each(a, function () { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; $.fn.lock = function () { $(this).each(function () { var $this = $(this); var position = $this.css('position'); if (!position) { position = 'static'; } switch (position) { case 'absolute': case 'relative': break; default: $this.css('position', 'relative'); break; } $this.data('position', position); var width = $this.width(), height = $this.height(); var locker = $('
'); locker.width(width).height(height); var loader = $('
'); loader.width(width).height(height); locker.append(loader); $this.append(locker); $(window).resize(function () { $this.find('.locker,.locker-loader').width($this.width()).height($this.height()); }); }); return $(this); }; $.fn.unlock = function () { $(this).each(function () { $(this).find('.locker').remove(); $(this).css('position', $(this).data('position')); }); return $(this); }; })(jQuery); ```