Subversion Repositories SmartDukaan

$(document).on('click', '.mk-pur-sale-ratio-panel', function () {

    doGetAjaxRequestHandler(`${context}/pur-sale-ratio/panel`, function (response) {

        $('#main-content').html(response);

    });

});

$(document).on('change', '#purSaleStartDate, #purSaleEndDate, #purSaleBrand', function () {

    console.log("change clicked...");

    let startDate = $('input[name="startDate"]').val();

    let endDate = $('input[name="endDate"]').val();

    let brand = $('select[name="brand"]').val();

    let supplierId = $('select[name="supplier"]').val();

    if (!startDate) {

        alert("Please select start date");

        return;

    }

    if (!endDate) {

        alert("Please select end date");

        return;

    }

    if (!brand) {

        alert("Please select brand");

        return;

    }

    if (!supplierId) {

        supplierId = 0;

    }

    doGetAjaxRequestHandler(`${context}/pur-sale-ratio/brandSuppliers?startDate=${startDate}&endDate=${endDate}&brand=${brand}&supplierId=${supplierId}`, function (response) {

        if (response.hasOwnProperty('purchaseSaleQuantities') && response.purchaseSaleQuantities.length) {

            createPurchaseSaleBarChart(response.purchaseSaleQuantities, startDate, endDate, brand, supplierId);

        } else {

            if (salesChart) salesChart.destroy();

            if (catalogChart) catalogChart.destroy();

        }

        console.log('Purchase sale ratio data fetched successfully',response);

        if (response.hasOwnProperty('brandWiseSuppliers') && response.brandWiseSuppliers.length) {

            $('.suppliersList').empty();

            $('.suppliersList').append(`<option selected disabled>Select Supplier</option>`);

            $('.suppliersList').append(`<option value="0">All Supplier</option>`);

            response.brandWiseSuppliers.forEach(function (supplier) {

                $('.suppliersList').append(`<option value="${supplier.supplierId}">${supplier.supplierName}</option>`);

            });

        }

    });

});

$(document).on('change', '#purSaleSupplier', function () {

    let startDate = $('input[name="startDate"]').val();

    let endDate = $('input[name="endDate"]').val();

    let brand = $('select[name="brand"]').val();

    let supplierId = $(this).val();

    doGetAjaxRequestHandler(`${context}/pur-sale-ratio/data?startDate=${startDate}&endDate=${endDate}&brand=${brand}&supplierId=${supplierId}`, function (response) {

        if (response.length) {

            createPurchaseSaleBarChart(response, startDate, endDate, brand, supplierId);

        }

    });

});

let salesChart, catalogChart;

let currentPurchaseSaleData = [];

let currentCatalogData = [];

Chart.register(ChartDataLabels);

$(document).on('click', '#exportCsvBtn', function () {

    exportPurchaseSaleCSV();

});

function exportPurchaseSaleCSV() {

    if (!currentPurchaseSaleData.length && !currentCatalogData.length) {

        alert('No data to export');

        return;

    }

    let csvContent = '';

    // Summary section

    if (currentPurchaseSaleData.length) {

        csvContent += 'Status,Purchase,Sale,Sale %\n';

        currentPurchaseSaleData.forEach(row => {

            let pct = row.totalQuantity > 0 ? ((row.soldQuantity / row.totalQuantity) * 100).toFixed(1) : '0.0';

            csvContent += `${row.status},${row.totalQuantity},${row.soldQuantity},${pct}%\n`;

        });

    }

    // Catalog detail section

    if (currentCatalogData.length) {

        csvContent += '\nCatalog Detail\n';

        csvContent += 'Model,Status,Purchase,Sale,Sale %\n';

        currentCatalogData.forEach(row => {

            let pct = row.purchase > 0 ? ((row.sale / row.purchase) * 100).toFixed(1) : '0.0';

            csvContent += `${row.model},${row.status},${row.purchase},${row.sale},${pct}%\n`;

        });

    }

    let startDate = $('input[name="startDate"]').val();

    let endDate = $('input[name="endDate"]').val();

    let brand = $('select[name="brand"]').val() || '';

    let fileName = `purchase_sale_ratio_${brand}_${startDate}_to_${endDate}.csv`;

    let blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});

    let link = document.createElement('a');

    link.href = URL.createObjectURL(blob);

    link.download = fileName;

    link.click();

    URL.revokeObjectURL(link.href);

}

function createPurchaseSaleBarChart(response, startDate, endDate, brand, supplierId) {

    response = arrangeLabelsOrder(response);

    currentPurchaseSaleData = response;

    currentCatalogData = [];

    $('#exportCsvBtn').hide();

    let labels = [], totalQuantities = [], soldQuantities = [];

    labels = response.map(sale => sale.status);

    totalQuantities = response.map(sale => sale.totalQuantity);

    soldQuantities = response.map(sale => sale.soldQuantity);

    const ctx = document.getElementById('salesChart').getContext('2d');

    //destroy salesChart data if available

    if (salesChart) {

        salesChart.destroy();

    }

    if (catalogChart) {

        catalogChart.destroy();

    }

    const percentageData = soldQuantities.map((sale, i) => ((sale / totalQuantities[i]) * 100).toFixed(1));

    // Chart.js configuration

    salesChart = new Chart(ctx, {

        type: 'bar',

        data: {

            labels: labels, // Labels for each bar

            datasets: [

                {

                    label: 'Purchase',

                    data: totalQuantities,

                    backgroundColor: 'rgba(255, 99, 132, 0.6)', // Red bars

                    borderColor: 'rgba(255, 99, 132, 1)',

                    borderWidth: 1

                },

                {

                    label: 'Sale',

                    data: soldQuantities,

                    backgroundColor: 'rgba(144, 238, 144, 0.6)', // Green bars

                    borderColor: 'rgba(144, 238, 144, 1)',

                    borderWidth: 1

                }

            ]

        },

        options: {

            responsive: true,

            plugins: {

                tooltip: {

                    enabled: false,

                },

                legend: {

                    position: 'top',

                },

                datalabels: {

                    display: true,

                    color: 'black',

                    font: {

                        size: 12,

                    },

                    formatter: function (value, context) {

                        const index = context.dataIndex;

                        const purchase = totalQuantities[index];

                        const sale = soldQuantities[index];

                        const percentage = percentageData[index];

                        if (context.dataset.label === 'Purchase') {

                            return `${purchase}`;

                        } else {

                            return `${sale} (${percentage}%)`;

                        }

                    },

                    align: 'end', // Place labels at the center of the bars

                    anchor: 'center', // Align labels to the center of each bar pair

                    offset: 5, // Adjust positioning for better visibility if needed

                },

            }, onClick: function (event, activeElements) {

                if (activeElements.length > 0) {

                    const element = activeElements[0]; // Get the clicked element

                    const datasetIndex = element.datasetIndex; // Get the dataset (Sale or Purchase)

                    const dataIndex = element.index; // Get the index of the clicked bar

                    const label = this.data.labels[dataIndex]; // Get the label for the clicked bar

                    const value = this.data.datasets[datasetIndex].data[dataIndex]; // Get the value of the clicked bar

                    // Show an alert with the label and value

                    catalogPurchaseSaleChart(startDate, endDate, brand, supplierId, label);

                }

            },

            indexAxis: 'y',

            scales: {

                x: {

                    beginAtZero: true,

                    title: {

                        display: true,

                        text: 'Quantity',

                        color: '#000000'

                    }

                },

                y: {

                    title: {

                        display: true,

                        text: 'Status',

                        color: '#000000'

                    }

                }

            }

        }

    });

}

function catalogPurchaseSaleChart(startDate, endDate, brand, supplierId, label) {

    doGetAjaxRequestHandler(`${context}/pur-sale-ratio/catalog-quantity?startDate=${startDate}&endDate=${endDate}&brand=${brand}&supplierId=${supplierId}&label=${label}`, function (response) {

        console.log("response to check status - ",response);

        createCatalogPurchaseSaleBarChart(response, startDate, endDate, supplierId);

    });

}

function getCatalogAgeDetail(startDate, endDate, supplierId, label,status) {

    // /catalog-age-detail

    let modelNumber = label;

    doGetAjaxRequestHandler(`${context}/pur-sale-ratio/catalog-age-detail?startDate=${startDate}&endDate=${endDate}&modelNumber=${modelNumber}&supplierId=${supplierId}&status=${status}`, function (response) {

        $('#catalog-age-div #catalogModalBody').html(response);

        $('#catalog-age-div').modal('show');

    });

}

function createCatalogPurchaseSaleBarChart(response, startDate, endDate, supplierId) {

    let labels = [], totalQuantities = [], soldQuantities = [];

    let filterResponse = response.filter(res => res.sale !== res.purchase);

    currentCatalogData = filterResponse;

    $('#exportCsvBtn').show();

    labels = filterResponse.map(sale => sale.model);

    totalQuantities = filterResponse.map(sale => sale.purchase);

    soldQuantities = filterResponse.map(sale => sale.sale);

    let status = filterResponse.map(sale => sale.status)[0];

    let charContainer = document.getElementById('chartContainer');

    //destroy old Catalog Chart Container

    $('#catalogChartContainer').remove();

    //create new Catalog Chart Container

    let newCatalogChartContainer = document.createElement('div');

    newCatalogChartContainer.id = 'catalogChartContainer';

    newCatalogChartContainer.classList.add('col-md-6');

    let canvas = document.createElement('canvas');

    let catalogChartHeight;

    switch (labels.length) {

        case 1:

            catalogChartHeight = 150;

            break;

        case 2:

            catalogChartHeight = 200;

            break;

        case 3:

            catalogChartHeight = 250;

            break;

        case 4:

            catalogChartHeight = 250;

            break;

        default:

            catalogChartHeight = labels.length * 2 * 25;

            break;

    }

    newCatalogChartContainer.style.height = catalogChartHeight + 'px';

    const ctx = canvas.getContext('2d');

    //destroy catalogChart data if available

    if (catalogChart) {

        catalogChart.destroy();

    }

    const percentageData = soldQuantities.map((sale, i) => ((sale / totalQuantities[i]) * 100).toFixed(1));

    // Chart.js configuration

    //Chart.register(ChartDataLabels);

    catalogChart = new Chart(ctx, {

        type: 'bar',

        data: {

            labels: labels, // Labels for each bar

            datasets: [

                {

                    label: 'Purchase',

                    data: totalQuantities,

                    backgroundColor: 'rgba(255, 99, 132, 0.6)', // Red bars

                    borderColor: 'rgba(255, 99, 132, 1)',

                    borderWidth: 1

                },

                {

                    label: 'Sale',

                    data: soldQuantities,

                    backgroundColor: 'rgba(144, 238, 144, 0.6)', // Green bars

                    borderColor: 'rgba(144, 238, 144, 1)',

                    borderWidth: 1,

                }

            ]

        },

        options: {

            responsive: true,

            maintainAspectRatio: false,

            plugins: {

                tooltip: {

                    enabled: false,

                },

                legend: {

                    position: 'top',

                },

                datalabels: {

                    display: true,

                    color: 'black',

                    font: {

                        size: 12,

                    },

                    formatter: function (value, context) {

                        const index = context.dataIndex;

                        const purchase = totalQuantities[index];

                        const sale = soldQuantities[index];

                        const percentage = percentageData[index];

                        if (context.dataset.label === 'Purchase') {

                            return `${purchase}`;

                        } else {

                            return `${sale} (${percentage}%)`;

                        }

                    },

                    align: 'end', // Place labels at the center of the bars

                    anchor: 'center', // Align labels to the center of each bar pair

                    offset: 5, // Adjust positioning for better visibility if needed

                },

            }, onClick: function (event, activeElements) {

                if (activeElements.length > 0) {

                    const element = activeElements[0]; // Get the clicked element

                    const datasetIndex = element.datasetIndex; // Get the dataset (Sale or Purchase)

                    const dataIndex = element.index; // Get the index of the clicked bar

                    const modelNumber = this.data.labels[dataIndex]; // Get the label for the clicked bar that is modelNumber this time

                    const value = this.data.datasets[datasetIndex].data[dataIndex]; // Get the value of the clicked bar

                    getCatalogAgeDetail(startDate, endDate, supplierId, modelNumber,status);

                }

            },

            indexAxis: 'y',

            scales: {

                x: {

                    beginAtZero: true,

                    title: {

                        display: true,

                        text: 'Quantity',

                        color: '#000000'

                    }

                },

                y: {

                    title: {

                        display: true,

                        text: 'Models',

                        color: '#000000'

                    }

                }

            }

        }

    });

    newCatalogChartContainer.appendChild(canvas);

    charContainer.appendChild(newCatalogChartContainer);

}

function arrangeLabelsOrder(responseData) {

    const requiredOrder = ['HID', 'FASTMOVING', 'SLOWMOVING', 'OTHER'];

    const orderMap = {};

    requiredOrder.forEach((label, index) => {

        orderMap[label] = index;

    });

    const sortedResponse = responseData.sort((a, b) => {

        const indexA = orderMap[a.status] !== undefined ? orderMap[a.status] : Infinity;

        const indexB = orderMap[b.status] !== undefined ? orderMap[b.status] : Infinity;

        return indexA - indexB;

    });

    return sortedResponse;

}