Subversion Repositories SmartDukaan

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<!-- Chart.js Datalabels plugin for v2 -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script>


<div>



    <div class="row">
        <div class="col-lg-7">
            <h4><strong>Investometer</strong></h4>
            <canvas id="investometerGauge"></canvas>
        </div>


        <div class="col-lg-5">
            <h4 style="margin-bottom:24px "><strong>Banner for Shopfront</strong></h4>
            <div class="form-group">
                #if(!$printResources.isEmpty())
                    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top: 50px">
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner text-center">
                            #set($first = true)
                            #foreach($printResource in $printResources)
                                <div class="item #if($first)active#set($first = false)#end">
                                    <img src="$printResource.getThumbnailUrl()" alt="Los Angeles"
                                         style="max-height:150px;width:auto;max-width: 100%;margin: auto;">
                                    <div class="carousel-caption">
                                        <br>
                                        <button class="btn btn-danger btn-sm partner_print_resources">Get File !
                                        </button>
                                    </div>
                                </div>

                            #end
                        </div>
                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                #end
                #if($printResources.isEmpty())
                    <div class="form-group">
                        <img src="/resources/images/image-not-found.png"
                             style="max-height:150px;width:auto;max-width: 100%;margin: auto;">
                    </div>
                #end
            </div>
        </div>
    </div>

</div>
<script>

    function formatIndianNumber(number) {
        return Number(number).toLocaleString('en-IN');
    }

    (function () {
        const isInvestmentOk = $investments.get('isInvestmentOk');
        const partnerType = "$investments.get('partnerType')";
        let cutOfPercent =  $investments.get('cutOf');
        let minimumInvestmentParcent =  $investments.get('minInvestment');

        let agreedInvestment =$investments.get('minimumInvestment');
        let currentInvestment =$investments.get('totalInvestment');
        let billBlockPercentAmt = ((agreedInvestment * cutOfPercent) / 100).toFixed(2);
        let maintainPercentAmt = ((agreedInvestment * minimumInvestmentParcent) / 100).toFixed(2);

        var percentForNeedle = 0.00;

        if (currentInvestment > agreedInvestment) {
            percentForNeedle = 98;
        } else {
            percentForNeedle = ((currentInvestment / agreedInvestment) * 100).toFixed(2)
        }
        const percent = ((currentInvestment / agreedInvestment) * 100).toFixed(2);
        console.log("percentForNeedle - ", percentForNeedle)
        console.log("percent - ", percent)


        let billBlockPercentAmtFormmated = formatIndianNumber(billBlockPercentAmt);
        let agreedInvestmentFormmated = formatIndianNumber(agreedInvestment);
        let currentInvestmentFormmated = formatIndianNumber(currentInvestment);
        let maintainPercentAmtFormmated = formatIndianNumber(maintainPercentAmt);
        const ctx = document.getElementById("investometerGauge").getContext("2d");
        let labels = [];
        let data = [];
        let colors = [];

        if (isInvestmentOk) {
            if (partnerType == "BRONZE") {
                // One segments: Investment OK bcoz of Partner type BRONZE
                labels = [
                    `Investment OK (${currentInvestmentFormmated})+`
                ];
                data = [100];
                colors = ["green"];
            } else {
                // Three segments: Billing Blocked, Increase Investment, Investment OK
                labels = [
                    `70% of Agreed Investment(Billing Block)  (${billBlockPercentAmtFormmated})`,
                    `75% of Agreed Investment(Increase Investment) (${maintainPercentAmtFormmated})`,
                    `Investment OK (${maintainPercentAmtFormmated})+`
                ];
                data = [70, 5, 25];
                colors = ["red", "orange", "green"];
            }


        } else {
            // Only two segments: Billing Blocked and Investment OK
            labels = [
                `75% of Agreed Investment(Billing Block)  (${billBlockPercentAmtFormmated})`,
                `Investment OK (${maintainPercentAmtFormmated})+`
            ];
            data = [75, 25];
            colors = ["red", "green"];
        }
        const gaugeChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: colors,
                    borderWidth: 2
                }]

            },
            options: {
                responsive: true,
                cutoutPercentage: 20,
                rotation: -Math.PI,
                circumference: Math.PI,
                title: {
                    display: true,
                    text: `Current Invested Value: Rs.${currentInvestment.toLocaleString('en-IN')}(${percent}%)`
                },
                tooltips: {enabled: true},
                animation: {
                    animateRotate: true,
                    animateScale: false
                },
                plugins: {
                    datalabels: {
                        display: true,
                        formatter: (value, context) => context.chart.data.labels[context.dataIndex],
                    }
                }
            },
            plugins: [{
                // Draw needle after the chart renders
                afterDraw: function (chart) {
                    const needleValue = percentForNeedle;
                    const total = chart.config.data.datasets[0].data.reduce((a, b) => a + b, 0);
                    const angle = Math.PI + (Math.PI * needleValue / total);
                    const ctx = chart.chart.ctx;
                    const cw = chart.chartArea;
                    const cx = (cw.left + cw.right) / 2;
                    const cy = chart.chartArea.bottom;
                    const needleLength = chart.outerRadius * 0.9;
                    const needleRadius = 8;

                    // Clear needle
                    ctx.save();

                    // Draw needle
                    ctx.translate(cx, cy);
                    ctx.rotate(angle);
                    ctx.beginPath();
                    ctx.moveTo(0, -needleRadius);
                    ctx.lineTo(needleLength, 0);
                    ctx.lineTo(0, needleRadius);
                    ctx.fillStyle = 'black';
                    ctx.fill();

                    // Draw needle dot
                    ctx.beginPath();
                    ctx.arc(0, 0, needleRadius, 0, Math.PI * 2);
                    ctx.fill();

                    ctx.restore();
                },
                datalabels: {
                    display: true,
                    formatter: function (value, context) {
                        const label = context.chart.data.labels[context.dataIndex];

                        if (label.includes("Billing Block")) {
                            return `₹${currentInvestment.toLocaleString('en-IN')}`;
                        }
                        if (label.includes("Investment OK")) {
                            return `₹${agreedInvestment.toLocaleString('en-IN')}`;
                        }
                        return label;
                    },
                    color: 'white',
                    font: {
                        weight: 'bold'
                    }
                }
            }]
        });
    })();
</script>
##<script type="text/javascript" src="resources/js/gauge.min.js"></script>