petar_bonov

price cuts (fix)

Dec 3rd, 2020 (edited)
538
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.75 KB | None | 0 0
  1. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  2. <script>
  3. google.charts.load('current', {'packages':['corechart']});
  4.  
  5. document.addEventListener("DOMContentLoaded", function () {
  6.     const CHART_WIDTH = 700, CHART_HEIGHT = 200;
  7.     let chartContainer, chart;
  8.     let TD_SPAN = 1;
  9.  
  10.     function buildChart() {
  11.         // <div id="curve_chart" style="width: 900px; height: 500px"></div>
  12.         chartContainer = document.createElement("tr");
  13.         const td = document.createElement("td");
  14.         td.setAttribute("colspan", TD_SPAN);
  15.         td.setAttribute("align", "right");
  16.         td.setAttribute("style", "position: relative;");
  17.         chartContainer.appendChild(td);
  18.  
  19.         chart = document.createElement("div");
  20.         chart.setAttribute("id", "curve_chart");
  21.         chart.setAttribute("style", `width: ${CHART_WIDTH}px; height: ${CHART_HEIGHT}px`);
  22.         td.appendChild(chart);
  23.  
  24.         const close = document.createElement("div");
  25.         close.innerHTML = "&#10060;";
  26.         td.appendChild(close);
  27.         close.setAttribute("style", "position: absolute; top: 5px; right: 5px; cursor: pointer;");
  28.         close.onclick = closeChart;
  29.     }
  30.  
  31.     function closeChart() {
  32.         chartContainer.parentElement.removeChild(chartContainer);
  33.         chart = null;
  34.     }
  35.  
  36.     let lastCutLinkClicked;
  37.     const rows = Array.from(document.querySelectorAll("table tr"));
  38.     if (rows.length > 0) TD_SPAN = rows[0].querySelectorAll("td").length;
  39.     rows.forEach(function (row) {
  40.         const cut = row.querySelector(".cutprice");
  41.         cut.onclick = function (event) {
  42.             if (event.target === lastCutLinkClicked) {
  43.                 closeChart();
  44.                 lastCutLinkClicked = null;
  45.                 return;
  46.             }
  47.             lastCutLinkClicked = event.target;
  48.  
  49.             if (!chart) buildChart();
  50.             const tr = event.target.closest("tr");
  51.             tr.insertAdjacentElement("afterend", chartContainer);
  52.  
  53.             const link = event.target.closest("a");
  54.             const data = link.getAttribute("history");
  55.             const options = {
  56.                     currency: link.getAttribute("currency")
  57.             }
  58.             setTimeout(function () {
  59.                 drawChart(data, options);
  60.             }, 1);
  61.  
  62.             event.preventDefault();
  63.         };
  64.     });
  65.  
  66.     function drawChart(dataToPlot, options) {
  67.         var splitData = dataToPlot.split(";");
  68.         var splitData = splitData.filter(function (el) {
  69.             return el !== "";
  70.         });
  71.  
  72.         var firstDate = new Date(toDate(splitData[0].split(',')[0]));
  73.         var lastDate = new Date(toDate(splitData[splitData.length - 1].split(',')[0]));
  74.        
  75.         var dateDifference = daysBetween(firstDate, lastDate);
  76.  
  77.         // console.log(dateDifference);
  78.  
  79.         var datePeriodArray = [];
  80.         datePeriodArray.push(firstDate);
  81.  
  82.         for (var i = 1; i <= dateDifference; i++) {
  83.            let nextDate = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate());
  84.            nextDate.setDate(firstDate.getDate() + i);
  85.            datePeriodArray.push(nextDate);
  86.        }
  87.  
  88.        var DateKeyDataArray = new Object();
  89.  
  90.        splitData.forEach(function(el, index){
  91.            var elParts = el.split(',');
  92.            DateKeyDataArray[toDate(elParts[0])] = parseInt(elParts[1]) / 100.0;
  93.        });
  94.  
  95.        var finalDataArray = [['Date', 'Price']];
  96.        var lastStablePricePoint = null;
  97.  
  98.        for (var i in datePeriodArray) {
  99.  
  100.            var priceValue = DateKeyDataArray[datePeriodArray[i]];
  101.            if(priceValue == null){
  102.                priceValue = lastStablePricePoint;
  103.            }
  104.  
  105.            lastStablePricePoint = priceValue;
  106.  
  107.            var dataPointArray = [datePeriodArray[i], priceValue];
  108.            finalDataArray.push(dataPointArray);
  109.        }
  110.  
  111.        // console.log(finalDataArray);
  112.  
  113.        var oneMonthStepprDateArray = [];
  114.        for (var i = 1; i <= 30; i++) {
  115.            let previousDate = new Date();
  116.            previousDate.setDate(previousDate.getDate() - i);
  117.            oneMonthStepprDateArray.unshift(previousDate);
  118.        }
  119.  
  120.        function _draw(dataArray) {
  121.            const data = google.visualization.arrayToDataTable(dataArray);
  122.            const formatter = new google.visualization.NumberFormat({decimalSymbol: '.', groupingSymbol: ',', prefix: `${options.currency} `});
  123.            formatter.format(data, 1);
  124.  
  125.            var chartOptions = {
  126.                // title: `Price`,
  127.                curveType: 'none',
  128.                interpolateNulls: true,
  129.                // legend: { position: 'bottom' },
  130.                legend: 'none',
  131.                // width: CHART_WIDTH,
  132.                // height: CHART_HEIGHT,
  133.                // trendlines: {
  134.                //    0: {
  135.                //      type: 'linear',
  136.                //      color: 'green',
  137.                //      lineWidth: 3,
  138.                //      opacity: 0.3,
  139.                //      showR2: false,
  140.                //      visibleInLegend: false
  141.                //    }
  142.                //  },
  143.                /* explorer: {
  144.                    keepInBounds: true,
  145.                    axis: "horizontal",
  146.                }, */
  147.                "chartArea": {
  148.                    "width": "85%",
  149.                    "height": "85%"
  150.                },
  151.                hAxis: {
  152.                //     ticks: oneMonthStepprDateArray,
  153.                
  154.                    gridlines: {
  155.                        // opacity: 0,
  156.                        color: "white",
  157.                        // count: 0,
  158.                    },
  159.                    format: "yyyy-MM-dd",
  160.                    textStyle: {
  161.                        fontSize : 9,
  162.                    },
  163.                },
  164.                vAxis: {
  165.                    // format: "currency",
  166.                    textStyle: {
  167.                        fontSize : 11,
  168.                    },
  169.                },
  170.            };
  171.  
  172.            (new google.visualization.LineChart(chart)).draw(data, chartOptions);
  173.        }
  174.  
  175.        function treatAsUTC(date) {
  176.            var result = new Date(date);
  177.            result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
  178.            return result;
  179.        }
  180.  
  181.        function daysBetween(startDate, endDate) {
  182.            var millisecondsPerDay = 24 * 60 * 60 * 1000;
  183.            return (treatAsUTC(endDate) - treatAsUTC(startDate)) / millisecondsPerDay;
  184.        }
  185.  
  186.        function toDate(dateStr) {
  187.            var parts = dateStr.split("-");
  188.            return new Date(parseInt(parts[0]), parseInt(parts[1] - 1), parseInt(parts[2]));
  189.        }
  190.  
  191.        _draw(finalDataArray);
  192.    }
  193. });
  194. </script>
Add Comment
Please, Sign In to add comment