Untitled

// Webpack support
if (typeof module !== 'undefined') {
    module.exports = KTChartsWidget35;
}
"use strict";

var firstChartDate;
var secondChartDate;
var thirdChartDate;
var fourthChartDate;
var fifthChartDate;

var firstChartData;
var secondChartData;
var thirdChartData;
var fourthChartData;
var fifthChartData;

// Class definition
var KTChartsWidget35 = function () {
    var chart1 = {
        self: null,
        rendered: false
    };

    var chart2 = {
        self: null,
        rendered: false
    };

    var chart3 = {
        self: null,
        rendered: false
    };

    var chart4 = {
        self: null,
        rendered: false
    };

    var chart5 = {
        self: null,
        rendered: false
    };


    function getChart(url)
    {
        if (currentPage != 'homepage')
            return false;

        var tmp = [];
        $.ajax({
            'async': false,
            'type': "GET",
            'global': false,
            'dataType': 'html',
            'url': url,
            'data': { 'request': "", 'target': 'arrange_url', 'method': 'method_target' },
            'success': function (data) {
                tmp = JSON.parse(data);
            }
        });

        if (url.indexOf("total-revenue") != -1) {
            tmp.forEach((element, index) => {
                tmp[index] = Math.round((element + Number.EPSILON) * 100) / 100;
            });
        }

        return tmp;
    }

    // date requests starts
    firstChartDate = getChart('/v1/chart-date-listing?date=today');
    secondChartDate = getChart('/v1/chart-date-listing?date=yesterday');
    thirdChartDate = getChart('/v1/chart-date-listing?date=thisWeek');
    fourthChartDate = getChart('/v1/chart-date-listing?date=thisMonth');
    fifthChartDate = getChart('/v1/chart-date-listing?date=lastThreeMonths');

    //// date requests ends ///


    /// data requests starts ///
    firstChartData = getChart('/v1/total-revenue-by-date?date=today');
    secondChartData = getChart('/v1/total-revenue-by-date?date=yesterday');
    thirdChartData = getChart('/v1/total-revenue-by-date?date=thisWeek');
    fourthChartData = getChart('/v1/total-revenue-by-date?date=thisMonth');
    fifthChartData = getChart('/v1/total-revenue-by-date?date=lastThreeMonths');

    // data requests ends ///

    // Private methods
    var initChart = function(chart, toggle, chartSelector, data, labels, initByDefault) {
        var element = document.querySelector(chartSelector);

        if (!element) {
            return;
        }

        var height = parseInt(KTUtil.css(element, 'height'));
        var color = element.getAttribute('data-kt-chart-color');

        var labelColor = KTUtil.getCssVariableValue('--kt-gray-500');
        var borderColor = KTUtil.getCssVariableValue('--kt-border-dashed-color');
        var baseColor = "#4FCD89";


        var options = {
            series: [{
                name: 'Earnings',
                data: data
            }],
            chart: {
                fontFamily: 'inherit',
                type: 'area',
                height: 490,
                toolbar: {
                    show: true
                }
            },
            legend: {
                show: true
            },
            dataLabels: {
                enabled: false
            },
            fill: {
                type: "gradient",
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.4,
                    opacityTo: 0.2,
                    stops: [50, 300, 1000]
                }
            },
            stroke: {
                curve: 'smooth',
                show: true,
                width: 3,
                colors: [baseColor]
            },
            xaxis: {
                categories: labels,
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: true
                },
                offsetX: 20,
                tickAmount: 6,
                labels: {
                    rotate: 40,
                    rotateAlways: true,
                    show: true,
                    style: {
                        colors: labelColor,
                        fontSize: '12px'
                    }
                },
                crosshairs: {
                    position: 'front',
                    stroke: {
                        color: baseColor,
                        width: 1,
                        dashArray: 3
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: undefined,
                    offsetY: 0,
                    style: {
                        fontSize: '12px'
                    }
                }
            },


            yaxis: {
                tickAmount: 6,
                max: Math.max.apply(Math, data),
                min: Math.min.apply(Math, data),
                labels: {
                    show: true
                }
            },
            states: {
                normal: {
                    filter: {
                        type: 'none',
                        value: 0
                    }
                },
                hover: {
                    filter: {
                        type: 'none',
                        value: 0
                    }
                },
                active: {
                    allowMultipleDataPointsSelection: false,
                    filter: {
                        type: 'date',
                        value: 0
                    }
                }
            },
            tooltip: {
                style: {
                    fontSize: '12px'
                },
                y: {
                    formatter: function (val) {
                        return val + '$';
                    }
                }
            },
            colors: [baseColor],
            grid: {
                borderColor: borderColor,
                strokeDashArray: 3,
                yaxis: {
                    lines: {
                        show: false
                    }
                }
            },
            markers: {
                strokeColor: baseColor,
                strokeWidth: 3
            }
        };

        chart.self = new ApexCharts(element, options);
        var tab = document.querySelector(toggle);

        if (initByDefault === true) {
            // Set timeout to properly get the parent elements width
            setTimeout(function() {
                chart.self.render();
                chart.rendered = true;
            }, 200);
        }

        tab.addEventListener('shown.bs.tab', function (event) {
            if (chart.rendered === false) {
                chart.self.render();
                chart.rendered = true;
            }
        });
    }



    // Public methods
    return {
        init: function () {

            var chart1Data =   firstChartData;
            var chart2Data =   secondChartData;
            var chart3Data =   thirdChartData;
            var chart4Data =   fourthChartData;
            var chart5Data =   fifthChartData;


            var chart1Labels = firstChartDate;
            var chart2Labels = secondChartDate;
            var chart3Labels = thirdChartDate;
            var chart4Labels = fourthChartDate;
            var chart5Labels = fifthChartDate;

            // initChart(chart1, '#kt_charts_widget_35_tab_1', '#kt_charts_widget_35_chart_1', chart1Data, chart1Labels, true);
            initChart(chart2, '#kt_charts_widget_35_tab_2', '#kt_charts_widget_35_chart_2', chart2Data, chart2Labels, true);
            initChart(chart3, '#kt_charts_widget_35_tab_3', '#kt_charts_widget_35_chart_3', chart3Data, chart3Labels, true);
            initChart(chart4, '#kt_charts_widget_35_tab_4', '#kt_charts_widget_35_chart_4', chart4Data, chart4Labels, true);
            initChart(chart5, '#kt_charts_widget_35_tab_5', '#kt_charts_widget_35_chart_5', chart5Data, chart5Labels, true);
            // Update chart on theme mode change
            KTThemeMode.on("kt.thememode.change", function() {
                if (chart1.rendered) {
                    chart1.self.destroy();
                }

                if (chart2.rendered) {
                    chart2.self.destroy();
                }

                if (chart3.rendered) {
                    chart3.self.destroy();
                }

                if (chart4.rendered) {
                    chart4.self.destroy();
                }

                if (chart5.rendered) {
                    chart5.self.destroy();
                }
                initChart(chart1, '#kt_charts_widget_35_tab_1', '#kt_charts_widget_35_chart_1', chart1Data, chart1Labels, chart1.rendered);
                initChart(chart2, '#kt_charts_widget_35_tab_2', '#kt_charts_widget_35_chart_2', chart2Data, chart2Labels, chart2.rendered);
                initChart(chart3, '#kt_charts_widget_35_tab_3', '#kt_charts_widget_35_chart_3', chart3Data, chart3Labels, chart3.rendered);
                initChart(chart4, '#kt_charts_widget_35_tab_4', '#kt_charts_widget_35_chart_4', chart4Data, chart4Labels, chart4.rendered);
                initChart(chart5, '#kt_charts_widget_35_tab_5', '#kt_charts_widget_35_chart_5', chart5Data, chart5Labels, chart5.rendered);
                // initChart(chart4, '#kt_charts_widget_35_tab_4', '#kt_charts_widget_35_chart_4', chart4Data, chart4Labels, chart4.rendered);
            });
        }
    }
}();

// On document ready
KTUtil.onDOMContentLoaded(function() {
    KTChartsWidget35.init();
});