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>