\n\t\t ");
// Append the row HTML to the container
$(table_body).append(rowHTML);
});
},
/**
* Updates all campaigns table with new data.
* @param data - The data to update the table with.
* @param container - The container element for the table.
*/
updateAllCampaignsWithData: function updateAllCampaignsWithData(data, container) {
var self = this;
var rowsHTML = [];
var table_body = container.find('tbody');
table_body.empty();
container.find('table th').removeClass('asc desc');
container.find('.js-campaign-search').val('');
container.find('.no-results-message').hide();
var count = 0;
var $pagination = container.find('.js-pagination');
var rowsPerPage = parseInt($pagination.attr('data-rows-per-page'));
$.each(data, function (moduleIndex, module_object) {
// Extract module and campaign info
var moduleId = module_object.module_id;
// check if module_object.campaigns is not empty
if (module_object.campaigns.length > 0) {
// Loop through each campaign
module_object.campaigns.forEach(function (campaign, index) {
var _campaign$revenue;
count++;
var switcherId = "".concat(moduleId, "-campaign-").concat(moduleIndex, "-").concat(index);
rowsHTML.push("\n\t\t\t\t rowsPerPage ? 'is-hidden' : '', "\"\n\t\t\t\t \t").concat(count > rowsPerPage ? 'style="display: none;"' : '', "\n\t\t\t\t data-module-id=\"").concat(moduleId, "\"\n\t\t\t\t data-campaign-key=\"").concat(campaign.campaign_key, "\"\n\t\t\t\t data-campaign-id=\"").concat(campaign.campaign_id, "\"\n\t\t\t\t data-row-count=\"").concat(count, "\">\n\t\t\t\t
\n\t\t\t\t \n\t\t\t\t "));
});
}
});
$(table_body).append(rowsHTML.join(''));
// Reset pagination initial state
self.updatePaginationButtons(1, parseInt($pagination.attr('data-total-pages-initial')), parseInt($pagination.attr('data-total-rows-initial')));
},
/**
* Initializes the date picker for a chart container.
* @param {jQuery} container - The container element for the chart.
* @param {Object} options - Options for the date picker.
* @param {Function} options.onSelectHandler - Callback function for date selection.
* @param {Object} options.datePickerArgs - Additional arguments for the date picker.
*/
datePickerInit: function datePickerInit(container, _ref3) {
var onSelectHandler = _ref3.onSelectHandler,
datePickerArgs = _ref3.datePickerArgs;
var inputs = container.find('.date-range-input');
if (!inputs.length) {
return;
}
inputs.each(function () {
var datePicker = $(this);
var initialValue = datePicker.val();
var selectedDates = [];
if (initialValue) {
selectedDates = initialValue.split(' - ').map(function (dateStr) {
return new Date(dateStr.trim());
});
}
var dpArgs = _objectSpread(_objectSpread({}, {
maxDate: new Date(),
locale: JSON.parse(merchant_datepicker_locale),
range: true,
position: 'bottom right',
dateFormat: 'MM/dd/yy',
selectedDates: selectedDates,
// Set the selected dates
multipleDatesSeparator: ' - ',
onSelect: function onSelect(data) {
if (typeof onSelectHandler === 'function') {
onSelectHandler(data);
}
}
}), datePickerArgs);
new AirDatepicker(datePicker.get(0), dpArgs);
});
},
/**
* Initializes the overview cards.
*/
initOverviewCards: function initOverviewCards() {
var _this = this;
var container = $('.merchant-analytics-overview-section');
// Initialize the date picker
this.datePickerInit(container, {
onSelectHandler: function onSelectHandler() {
// Get both date range inputs
var firstInput = container.find('.first-date-range .date-range-input');
var secondInput = container.find('.second-date-range .date-range-input');
var firstDateRange = firstInput.val().split(' - ').map(function (dateStr) {
return dateStr.trim();
});
var secondDateRange = secondInput.val().split(' - ').map(function (dateStr) {
return dateStr.trim();
});
// Ensure both date ranges have exactly two dates
if (firstDateRange.length === 2 && secondDateRange.length === 2) {
_this.updateOverviewCards({
startDate: firstDateRange[0],
endDate: firstDateRange[1],
compareStartDate: secondDateRange[0],
compareEndDate: secondDateRange[1]
});
}
}
});
},
/**
* Renders a chart and initializes its date picker.
* @param {jQuery} container - The container element for the chart.
* @param {Object} chartOptions - Options for the ApexCharts instance.
* @param {Function} updateFunction - Function to call when the date is selected.
* @param {string} loadingIndicatorSelector - Selector for the loading indicator.
* @param datePickerArgs
* @returns {ApexCharts} - The rendered chart instance.
*/
renderChart: function renderChart(container, chartOptions, updateFunction, loadingIndicatorSelector) {
var datePickerArgs = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
var chartEl = container.find('.chart');
if (!chartEl.length) {
return;
}
var chart = new ApexCharts(chartEl.get(0), chartOptions);
chart.render();
chart.updateSeries([{
data: JSON.parse(chartEl.attr('data-period'))
}]);
this.datePickerInit(container, {
onSelectHandler: function onSelectHandler(data) {
if (data.formattedDate.length === 2) {
updateFunction(data);
}
},
datePickerArgs: datePickerArgs
});
return chart;
},
/**
* Renders the revenue chart.
*/
widgetChartRender: function widgetChartRender() {
var _this2 = this;
var container = $('.widget-chart-section');
var isRTL = $('body').hasClass('rtl');
merchantAnalyticsChart.revenueChart = this.renderChart(container, this.widgetChartOptions, function (data) {
return _this2.updateRevenueChart(data);
}, '.widget-chart-section .merchant-analytics-loading-spinner', {
position: isRTL ? 'top right' : 'top left'
});
},
/**
* Renders the revenue chart.
*/
revenueChartRender: function revenueChartRender() {
var _this3 = this;
var container = $('.revenue-chart-section');
if (container.length) {
this.revenueChart = this.renderChart(container, this.revenueChartOptions, function (data) {
return _this3.updateRevenueChart(data);
}, '.revenue-chart-section .merchant-analytics-loading-spinner');
}
},
/**
* Renders the average order value (AOV) chart.
*/
avgOrderValChartRender: function avgOrderValChartRender() {
var _this4 = this;
var container = $('.aov-chart-section');
if (container.length) {
this.avgOrderValChart = this.renderChart(container, this.avgOrderValChartOptions, function (data) {
return _this4.updateAOVChart(data);
}, '.aov-chart-section .merchant-analytics-loading-spinner');
}
},
/**
* Renders the impressions chart.
*/
impressionsChartRender: function impressionsChartRender() {
var _this5 = this;
var container = $('.impressions-chart-section');
if (container.length) {
this.impressionsChart = this.renderChart(container, this.columnChartOptions, function (data) {
return _this5.updateImpressionsChart(data);
}, '.impressions-chart-section .merchant-analytics-loading-spinner');
}
},
/**
* Initializes the top campaigns table.
*/
initTopCampaignsTable: function initTopCampaignsTable() {
var container = $('.merchant-analytics-section.campaigns-table');
var self = this;
if (container.length) {
// Initialize the date picker
this.datePickerInit(container, {
onSelectHandler: function onSelectHandler() {
// Get both date range inputs
var firstInput = container.find('.first-date-range .date-range-input');
var firstDateRange = firstInput.val().split(' - ').map(function (dateStr) {
return dateStr.trim();
});
// Ensure both date ranges have exactly two dates
if (firstDateRange.length === 2) {
self.updatePerformingCampaignsTable({
startDate: firstDateRange[0],
endDate: firstDateRange[1],
container: container
});
}
},
datePickerArgs: {
position: 'top right'
}
});
this.setupSortableTableEventListeners(container);
}
},
/**
* Initializes the all campaigns table.
*/
initAllCampaignsTable: function initAllCampaignsTable() {
var container = $('.merchant-analytics-section.all-campaigns-table');
var self = this;
if (container.length) {
// Initialize the date picker
this.datePickerInit(container, {
onSelectHandler: function onSelectHandler() {
// Get both date range inputs
var firstInput = container.find('.first-date-range .date-range-input');
var firstDateRange = firstInput.val().split(' - ').map(function (dateStr) {
return dateStr.trim();
});
// Ensure both date ranges have exactly two dates
if (firstDateRange.length === 2) {
self.updateAllCampaignsTable({
startDate: firstDateRange[0],
endDate: firstDateRange[1],
container: container
});
}
}
});
self.setupSortableTableEventListeners(container);
self.populateFilterSelect(container);
}
},
/**
* Filters the table based on the the available module in the table
*
* @param container - The table container element.
*/
populateFilterSelect: function populateFilterSelect(container) {
var table = container.find('.js-campaigns-table');
var selectorField = $('.filter-campaign select');
// Clear all options except the first one
$(selectorField).find('option:not(:first)').remove();
// Get unique values from the specified table column
var values = [];
$(table).find('tr .js-module-name').each(function () {
var value = $(this).attr('data-module-id');
var label = $(this).text().trim();
// Check if the value is not already in the values array
if (value && !values.some(function (item) {
return item.value === value;
})) {
values.push({
value: value,
label: label
});
}
});
// Sort the values alphabetically (optional)
values.sort();
// Append new options to the select field
$.each(values, function (index, item) {
$(selectorField).append($('