koperasi/script/widget.js

var countLineChartDataRun = 0;

const widgetChartLine = function () {
    countLineChartDataRun++;
    var data = {
        buttonBackground: '#ffffff',
        buttonColor: '#324041',
        title: 'Penjualan',
        background: '#393e46',
        color: '#ffffff',
        hairLine: '#dddddd',
        lineColor: '#efefef',
        link: 'https://github.com/webshunter/javascript-admin-post/blob/main/doc/widget.md',
        labels: ['Januari', 'Februari', 'Maret', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'],
        data: [
            {
                color: '#efefef',
                label: 'Penjualan',
                data: [200, 1200, 600, 855, 698, 659, 500, 900, 400, 500, 800]
            },
        ],
    }

    var arg = arguments;

    if (arg[0] != undefined && typeof arg[0] === 'object') {
        var obj = arg[0]
        Object.keys(obj).forEach(function (s) {
            if (data[s] != undefined) {
                data[s] = obj[s];
            }
        })
    }

    var nId = 'chart' + Date.now() + 'canvasline' + countLineChartDataRun;


    var dataSet = [];

    data.data.forEach(function (dataR) {
        var j = {
            label: dataR.label,
            fill: false,
            borderWidth: 2,
            lineTension: 0,
            spanGaps: true,
            borderColor: dataR.color,
            pointRadius: 3,
            pointHoverRadius: 7,
            pointColor: dataR.color,
            pointBackgroundColor: dataR.color,
            data: dataR.data
        }
        dataSet.push(j);
    });
    var canv = el('canvas').id(nId).css({
        minHeight: '300px',
        height: '300px',
        maxHeight: '300px',
        maxWidth: '100%',
    })
    .load(function (e) {
        try{
            (function(e){
                e = e.el
                var id = e.id;
                var salesGraphChartCanvas = $('#' + id).get(0).getContext('2d');
                //$('#revenue-chart').get(0).getContext('2d');
        
                var salesGraphChartData = {
                    labels: data.labels,
                    datasets: dataSet
                }
        
                var salesGraphChartOptions = {
                    maintainAspectRatio: false,
                    responsive: true,
                    legend: {
                        display: false,
                    },
                    scales: {
                        xAxes: [{
                            ticks: {
                                fontColor: data.lineColor,
                            },
                            gridLines: {
                                display: true,
                                color: data.hairline,
                                drawBorder: true,
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                stepSize: 5,
                                fontColor: data.lineColor,
                            },
                            gridLines: {
                                display: true,
                                color: data.lineColor,
                                drawBorder: false,
                            }
                        }]
                    }
                }
                // This will get the first returned node in the jQuery collection.
                var salesGraphChart = new Chart(salesGraphChartCanvas, {
                    type: 'line',
                    data: salesGraphChartData,
                    options: salesGraphChartOptions
                }
                )
            })(e);
        }catch(e){
            console.log(e);
        }
    })

    // container
    var ct = div()
    if (data.title != false) {
        ct.child(
            el('span').align('left')
                .color(data.color)
                .display('block')
                .padding('12px 10px')
                .css('border-bottom', '1px solid ' + data.hairLine)
                .size('16px')
                .child(
                    el('i').class('fas fa-chart-bar')
                        .css('font-weight', 'bold')
                        .display('inline-block').css('margin-right', '5px')
                )
                .child(
                    el('span').text(data.title)
                )
                .child(
                    el('span').float('right')
                        .css('font-weight', 'bold')
                        .text(tanggal().normal.split('-')[0])
                )
        )
    }
    ct.background(data.background)
    ct.child(
        div().padding('16px 10px').child(canv)
    )
    if (data.link != false) {
        ct.child(
            div().css('text-align', 'right')
                .padding('16px 10px')
                .child(
                    span()
                        .child(
                            el('i').class('fas fa-angle-right')
                                .css({
                                    position: 'absolute',
                                    display: 'inline-flex',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    background: data.buttonBackground,
                                    top: '0',
                                    left: '-20px',
                                    height: '100%',
                                    width: '35px',
                                    borderRadius: '50%',
                                })
                        )
                        .css('position', 'relative')
                        .text('Read more')
                        .background(data.buttonBackground)
                        .height("35px")
                        .display("inline-flex")
                        .css("padding", "0 20px")
                        .css("cursor", "pointer")
                        .css("align-items", "center")
                        .css("margin-top", "10px")
                        .css("padding-right", "20px")
                        .css("border-top-right-radius", "20px")
                        .color(data.buttonColor)
                        .addModule('links', data.link)
                        .click(function () {
                            window.open(this.links, "", "width=" + screen.availWidth + ",height=" + screen.availHeight);
                        })
                )
        )
    }
    return ct;
}