Subversion Repositories SmartDukaan

    <div class="row">

            <h4><strong>Investometer</strong></h4>

            <canvas id="investometerGauge"></canvas>

        </div>

        <div class="col-lg-5">

                            #end

    (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'

                    }

                }

            }]

        });

    })();