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', 'input[name="endDate"], input[name="startDate"], select[name="brand"]', 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;
    } else {
        supplierId = supplierId;
    }
    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);
        }
        if (response.hasOwnProperty('brandWiseSuppliers') && response.brandWiseSuppliers.length) {
            $('.suppliersList').empty();
            $('.suppliersList').append(`<option selected disabled>Select Supplier</option>`);
            response.brandWiseSuppliers.forEach(function (supplier) {
                $('.suppliersList').append(`<option value="${supplier.supplierId}">${supplier.supplierName}</option>`);
            });
        }
    });
});

$(document).on('change', 'select[name="supplier"]', 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;

Chart.register(ChartDataLabels);

function createPurchaseSaleBarChart(response, startDate, endDate, brand, supplierId) {
    response = arrangeLabelsOrder(response);
    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) {
        createCatalogPurchaseSaleBarChart(response, startDate, endDate, supplierId);
    });
}

function getCatalogAgeDetail(startDate, endDate, supplierId, label) {
    // /catalog-age-detail
    let modelNumber = label;
    doGetAjaxRequestHandler(`${context}/pur-sale-ratio/catalog-age-detail?startDate=${startDate}&endDate=${endDate}&modelNumber=${modelNumber}&supplierId=${supplierId}`, 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);
    labels = filterResponse.map(sale => sale.model);
    totalQuantities = filterResponse.map(sale => sale.purchase);
    soldQuantities = filterResponse.map(sale => sale.sale);

    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 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
                    getCatalogAgeDetail(startDate, endDate, supplierId, label);
                }
            },
            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;
}