Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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;
- [...] VARS OF THE DOM VALUES WERE HERE [...]
- const newTimes = times.length < 50 ? times : times.filter((_, i) => i % 2 === 0);
- const newValues = value.length < 50 ? value : value.filter((_, i) => i % 2 === 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;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement