import Chart from 'chart.js';
[...] I removed the rest of the imports [...]

const { Promise } = require('es6-promise');

const quoteDisplay = {

    init() {
        if ($('.quoteDisplay').length > 0) {
            $('.quoteDisplay').each((_, elementObj) => {
                const stockId =  $(elementObj).data('stock_id');
                this.setup(stockId, elementObj);
            });
        }
    },


    setup(stockId, element) {
        let stockTime = 1;
        const grab = (id, time) => {
            /* Promise to make sure data loads */

            // eslint-disable-next-line
            new Promise((resolve, reject) => {
                const self = this;

                $.ajax({
                    url: `${vars.baseUrl}/${vars.country}/components/quoteDisplay/${time}/${stockId}`,
                    method: 'GET',
                    dataType: 'JSON',
                    beforeSend() {
                        $('.loading-image').show();
                    },
                    success(data) {
                        resolve(data);
                        self.vals(data, stockId, element);
                        $('.loading-image').hide();
                    },
                    error(error) {
                        reject(error);
                    },
                });
            });
        };

		[...] UNNECESSARY CODE WAS HERE [...]
        /**
         * Changes graph when the user chooses a different time frame
         */
        $('.quoteDisplay__subheader__timing__url').on('click', (e) => {
            e.preventDefault();
            const self = $(e.currentTarget);
            self.siblings().removeClass('active');
            self.addClass('active');
            const largeStockId =  $('.quoteDisplay').data('stock_id');

            stockTime = self.data('timing_id');
            grab(largeStockId, stockTime);
        });
    },


    vals(data, stockId, quoteDisplayEl) {
        [...] CONST FOR DOM ELEMENTS WERE HERE [...]
        const chartHandel = [];

        const times = [];
        const value = [];


        let backgroundColor;
        let borderColor;



        [...] EPOCH TIME -> Normal time function was here [...]


        try {
            data.historic.forEach((item) => {
                times.push(item[0]);
                value.push(item[1]);
            });

            const { snapshot } = data;

            const closingTime = utilities.validate(snapshot[122]);


            const lineType = stockTime === 1 ? 'line' : 'none';
            let  previousClosePluginQuoteDisplay;

            const lastValue = utilities.validate(value[value.length - 1]);
            const firstValue = utilities.validate(value[0]);
            const priceChange = lastValue - firstValue;

            const priceChangePerc = priceChange * 100 / firstValue;


            const newTimes = times.length < 50 ? times : times.filter((_, i) => i % 2 === 0);
            const newValues = value.length < 50 ? value : value.filter((_, i) => i % 2 === 0);


            getTimes(times[0], $(`${mainWrapper} .time`));
            getTimes(times[times.length - 1], $(`${mainWrapper} .time_close`));

            const date = new Date(times[times.length - 1]);
            const formatter = new Intl.DateTimeFormat(vars.country, { month: 'short' });
            const closeMonth = formatter.format(new Date(times[times.length - 1]));
            const closeDay = date.getDate();
            const closeYear = date.getFullYear();
            const closeHour = date.getHours() - 1;
            const minutes = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();

            $(`${mainWrapper} .last__update`).text(`${closeMonth} ${closeDay}, ${closeYear} ${closeHour}:${minutes} `);


            if (value[0] < value[value.length - 1]) {
                backgroundColor = 'rgba(0, 200, 120, 0.1)';
                borderColor = 'rgb(0, 200, 120)';
            } else {
                backgroundColor = 'rgba(199,23,0, 0.1)';
                borderColor = 'rgb(199,23,0)';
            }


            [...] CODE TO CHANGE DOM VALUES WAS HERE [...]




             [...] BEFORE RENDER FUNCTION WAS HERE, IT COLORS THE GRAPH RED AND GREEN BASED ON THE CLOSING PRICE [...]


            const chartdata = {
                labels: [...newTimes],
                datasets: [{
                    label: 'EMA 20',
                    data: [...newValues],
                    borderColor: '#868e96',
                    backgroundColor: 'transparent',
                    borderWidth: 2,

                }, {
                    label: 'EMA 50',
                    data: [...newValues],
                    borderColor: '#fab008',
                    backgroundColor: 'transparent',
                    borderWidth: 2,

                }, {
                    backgroundColor,
                    borderColor,
                    data: [...newValues],
                    lineTension: 0,

                }],
            };

            const ctx = {};

            ctx[stockIds] = document.getElementById(`quoteDisplay_chart-${stockId}`).getContext('2d');

            ctx[stockIds].height = 500;



            if (window.chart !== undefined)  window.chart.update();


            const quoteChart = new Chart(ctx[stockIds], {
                type: 'line',
                data: chartdata,
                options: {

                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                            position: 'right',
                            ticks: {
                                display: true,
                            },
                        }],
                        xAxes: [{
                            ticks: {
                                display: true,
                            },
                        }],
                    },
                    animation: {
                        duration: 0,
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                        position: 'custom',
                        },
                        filter(tooltipItem) {
                            return tooltipItem.datasetIndex === 2;
                        },
                    },
                    legend: {

                        display: true,
                        position: 'top',
                        padding: 20,
                        align: 'start',

                        labels: {
                            filter(legendItem) {
                                if (legendItem.datasetIndex === 2) {
                                    return false;
                                }
                                return true;
                            },

                        },
                    },


                },
            });

            if (quoteChart) {
                quoteChart.update();
            }

            if ($(quoteDisplayEl).hasClass('quoteDisplay--light')) {
                chartHandel.push(quoteChart);
            } else {
                window.chart = quoteChart;
            }
        } catch (error) {
            window.console.log('Error parsing JSON data', error);
        }
    },
};


export default quoteDisplay;