mamberamo/public/style/js/dashboard/dashboard-1.js

(function($) {
    /* "use strict" */


    var dzChartlist = function() {
        let draw = Chart.controllers.line.__super__.draw; //draw shadow
        var screenWidth = $(window).width();
        var btnAware = function() {

            $('.avtivity-card')
                .on('mouseenter', function(e) {
                    var parentOffset = $(this).offset(),
                        relX = e.pageX - parentOffset.left,
                        relY = e.pageY - parentOffset.top;
                    $(this).find('.effect').css({ top: relY, left: relX })
                })
                .on('mouseout', function(e) {
                    var parentOffset = $(this).offset(),
                        relX = e.pageX - parentOffset.left,
                        relY = e.pageY - parentOffset.top;
                    $(this).find('.effect').css({ top: relY, left: relX })
                });
        }
        var chartTimeline = function() {

            var optionsTimeline = {
                chart: {
                    type: "bar",
                    height: 320,
                    stacked: true,
                    toolbar: {
                        show: false
                    },
                    sparkline: {
                        //enabled: true
                    },
                    backgroundBarRadius: 5,
                    offsetX: -10,
                },
                series: [{
                        name: "New Clients",
                        data: [70, 20, 75, 20, 50, 40, 65, 15, 40, 55, 60, 20, 75, 40, 25, 70, 20, 40, 65, 50]
                    },
                    {
                        name: "Retained Clients",
                        data: [-60, -10, -50, -25, -30, -65, -22, -10, -50, -20, -70, -35, -60, -20, -30, -45, -70, -50, -45, -10]
                    }
                ],

                plotOptions: {
                    bar: {
                        columnWidth: "20%",
                        endingShape: "rounded",
                        colors: {
                            backgroundBarColors: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)'],
                            backgroundBarOpacity: 1,
                            backgroundBarRadius: 5,
                            opacity: 0
                        },

                    },
                    distributed: true
                },
                colors: ['#0B2A97', '#FF9432'],

                grid: {
                    show: true,
                },
                legend: {
                    show: false
                },
                fill: {
                    opacity: 1
                },
                dataLabels: {
                    enabled: false,
                    colors: ['#0B2A97', '#FF9432'],
                    dropShadow: {
                        enabled: true,
                        top: 1,
                        left: 1,
                        blur: 1,
                        opacity: 1
                    }
                },
                xaxis: {
                    categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
                    labels: {
                        style: {
                            colors: '#787878',
                            fontSize: '13px',
                            fontFamily: 'Poppins',
                            fontWeight: 400

                        },
                    },
                    crosshairs: {
                        show: false,
                    },
                    axisBorder: {
                        show: false,
                    },
                },

                yaxis: {
                    //show: false
                    labels: {
                        style: {
                            colors: '#787878',
                            fontSize: '13px',
                            fontFamily: 'Poppins',
                            fontWeight: 400

                        },
                    },
                },

                tooltip: {
                    x: {
                        show: true
                    }
                }
            };
            var chartTimelineRender = new ApexCharts(document.querySelector("#chartTimeline"), optionsTimeline);
            chartTimelineRender.render();
        }

        var chartBar = function() {
                var optionsArea = {
                    series: [{
                        name: "Distance",
                        data: [2, 2, 1, 12, 6, 4, 10]
                    }],
                    chart: {
                        height: 200,
                        type: 'area',
                        group: 'social',
                        toolbar: {
                            show: false
                        },
                        zoom: {
                            enabled: false
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        width: [10],
                        colors: ['#0B2A97'],
                        curve: 'smooth'
                    },
                    legend: {
                        show: false,
                        tooltipHoverFormatter: function(val, opts) {
                            return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
                        },

                    },
                    markers: {
                        strokeWidth: [8],
                        strokeColors: ['#0B2A97'],
                        border: 0,
                        colors: ['#fff'],
                        hover: {
                            size: 13,
                        }
                    },
                    xaxis: {
                        categories: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
                        labels: {
                            style: {
                                colors: '#3E4954',
                                fontSize: '14px',
                                fontFamily: 'Poppins',
                                fontWeight: 100,

                            },
                        },
                    },
                    yaxis: {
                        labels: {
                            offsetX: -16,
                            style: {
                                colors: '#3E4954',
                                fontSize: '14px',
                                fontFamily: 'Poppins',
                                fontWeight: 100,

                            },
                        },
                    },
                    fill: {
                        colors: ['#0B2A97'],
                        type: 'solid',
                        opacity: 0
                    },
                    colors: ['#0B2A97'],
                    grid: {
                        borderColor: '#f1f1f1',
                        xaxis: {
                            lines: {
                                show: true
                            }
                        }
                    },
                    responsive: [{
                        breakpoint: 1601,
                        options: {
                            chart: {
                                height: 400
                            },
                        },
                    }, {
                        breakpoint: 768,
                        options: {
                            chart: {
                                height: 250
                            },
                            markers: {
                                strokeWidth: [4],
                                strokeColors: ['#0B2A97'],
                                border: 0,
                                colors: ['#fff'],
                                hover: {
                                    size: 6,
                                }
                            },
                            stroke: {
                                width: [6],
                                colors: ['#0B2A97'],
                                curve: 'smooth'
                            },
                        }
                    }]
                };
                var chartArea = new ApexCharts(document.querySelector("#chartBar"), optionsArea);
                chartArea.render();

            }
            /* Function ============ */
        return {
            init: function() {},


            load: function() {
                btnAware();
                chartTimeline();
                chartBar();
            },

            resize: function() {

            }
        }

    }();

    jQuery(document).ready(function() {});

    jQuery(window).on('load', function() {
        setTimeout(function() {
            dzChartlist.load();
        }, 1000);

    });

    jQuery(window).on('resize', function() {


    });

})(jQuery);