@millistream/millistream-widgets 1.0.0 → 1.0.3

package/README.md

@@ -45,12 +45,66 @@ loadChart) {
         gridHorizontalLines: 0,
         gridHorizontalLinesStyle: 'normal',
         gridVerticalLines: 1,
-        chartlen: '1y',
+        chartlen: '2d',
         dateformat: 'b dd',
         drawyaxis: true,
         fillchart: true,
         timeformat: 'HH:mm',
         streaming: pushapi,
+        fillchart: true,
+        timeformat: 'HH:mm',
+        streaming: pushapi,
+        instrumentStyle: {
+          color: '#f90',
+          backgroundLinearGradient: {
+            topColor: 'rgba(255,153,0,0.6)',
+            bottomColor: 'rgba(255,153,0,0.1)',
+          },
+          width: 1,
+        },
+        horizontalLegendStyle: {
+          fontSize: '11px',
+          fontFamily: 'Arial, Helvetica, sans-serif',
+        },
+        verticalLegendStyle: {
+          fontSize: '11px',
+          fontFamily: 'Arial, Helvetica, sans-serif',
+        },
+        tooltip: {
+          // @ts-ignore
+          formatter: function () {
+            // @ts-ignore
+            var date = formatDate(this.data.date, 'yyyy-mm-dd');
+            var time = '';
+            // @ts-ignore
+            if (this.chartType == 'trades') {
+              // @ts-ignore
+              var hour = this.data.date.getHours();
+              var minute = '';
+              // @ts-ignore
+              if (this.data.date.getMinutes() < 10) minute = '0';
+              // @ts-ignore
+              minute += this.data.date.getMinutes();
+              time = hour + ':' + minute;
+            }
+            // @ts-ignore
+            return (
+              '<span class="tooltip-name">' +
+              // @ts-ignore
+              this.name +
+              '</span><br>' +
+              // @ts-ignore
+              this.data.price +
+              ', ' +
+              // @ts-ignore
+              this.data.diff.toFixed(2) +
+              '%</br>' +
+              date +
+              ' ' +
+              time
+            );
+          },
+        },
     });
 
 })();
@@ -67,19 +121,6 @@ loadChart) {
   position: relative;
 }
 
-.millistream-chart {
-  margin-bottom: 30px;
-}
-
-.millistream-chart-instrument {
-  color: #f90;
-  background-image: linear-gradient(
-    rgba(255, 153, 0, 0.6),
-    rgba(255, 153, 0, 0)
-  );
-  width: 2px;
-}
-
 .millistream-chart-tooltip {
   position: absolute;
   background: #ffffff;
@@ -88,7 +129,6 @@ loadChart) {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   padding: 2px;
-  height: 14px;
   pointer-events: none;
 }
 
@@ -100,23 +140,6 @@ loadChart) {
   pointer-events: none;
 }
 
-.millistream-chart-x-legend {
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 11px;
-}
-
-.millistream-chart-y-legend {
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 11px;
-  float: left;
-}
-
-.millistream-chart-y2-legend {
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 11px;
-  float: right;
-}
-
 .millistream-chart-zoombox {
   position: absolute;
   background: rgb(255, 153, 0, 0.1);
@@ -129,4 +152,4 @@ Please refer to non npm-version documentation on widget customization.
 https://widgets.millistream.com/3.0.3/doc/widgets.html
 
 ## Support
-https://www.millistream.com
+https://www.millistream.com

package/millistream-widgets.js

@@ -6,6 +6,7 @@ function Milli_Chart(settings) {
     _this.scaleinfoY = {};
     _this.scaleinfoY2 = {};
     _this.instruments = [];
+    _this.movingAverage = [];
     _this.settings = {
         adjusted: true,
         autodraw: true,
@@ -59,7 +60,8 @@ function Milli_Chart(settings) {
         arr: [],
         map: new Map()
     };
-
+    var m_analyzisMethod = new Map();
+    var m_analyzisIndex = 0;
     var m_resizing = {
         resizing: false,
         width: 0,
@@ -191,19 +193,6 @@ function Milli_Chart(settings) {
         // Discard the time and time-zone information.
         const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
         const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
-        /*var start = new Date(utc1);
-        var end = new Date(utc2);
-        var days = 0;
-        console.log(start, end, a, b);
-        while (start < end) {
-            console.log(start, end);
-            if (start.getDay() != 0 && start.getDay() != 6)
-                days++;
-            start = new Date(start.getTime() + 86400000);
-        }
-
-        console.log(days, Math.floor((utc2 - utc1) / 86400000));
-        return days;*/
         return Math.floor((utc2 - utc1) / 86400000); // ms per day
     }
 
@@ -422,7 +411,7 @@ function Milli_Chart(settings) {
             var data = _this.instruments[s][_this.scaleinfoY.type];
             if (_this.scaleinfoY.type != 'history') {
                 if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d' && !m_zoom.mousedown.timestamp) {
-                    firstvalue = parseFloat(_this.instruments[s].closeprice1d);
+                    firstvalue = parseFloat(_this.instruments[s].closeprice1d) * _this.instruments[s].factor;
                 }
             }
             var quantity = 0;
@@ -434,6 +423,7 @@ function Milli_Chart(settings) {
                     quantity = data[i].quantity;
                 }
                 if (data[i].timestamp < _this.scaleinfoX.startTimeStamp) {
+                    if (_this.scaleinfoY.type == 'history') firstvalue = price;
                     continue;
                 }
                 if (data[i].timestamp > _this.scaleinfoX.endTimeStamp) {
@@ -446,11 +436,11 @@ function Milli_Chart(settings) {
                 }
 
                 if (firstvalue == null) {
-                    if (_this.scaleinfoY.type == 'history')
+                    if (_this.scaleinfoY.type == 'history') {
                         firstvalue = price;
-                    else {
+                    } else {
                         if (isToday(new Date(data[i].timestamp)) && !m_zoom.mousedown.timestamp) {
-                            firstvalue = parseFloat(_this.instruments[s].closeprice1d);
+                            firstvalue = parseFloat(_this.instruments[s].closeprice1d) * _this.instruments[s].factor;
                         } else
                             firstvalue = price;
                     }
@@ -465,7 +455,7 @@ function Milli_Chart(settings) {
                 if (_this.scaleinfoY.highLowerChart == null || _this.scaleinfoY.highLowerChart < quantity) _this.scaleinfoY.highLowerChart = quantity;
             }
             if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') { // if closeprice is used calch high/low on it
-                var cp = parseFloat(_this.instruments[s].closeprice1d);
+                var cp = parseFloat(_this.instruments[s].closeprice1d) * _this.instruments[s].factor;
                 if (_this.scaleinfoY.lowValue > cp) _this.scaleinfoY.lowValue = cp;
                 else
                 if (_this.scaleinfoY.highValue < cp) _this.scaleinfoY.highValue = cp;
@@ -481,6 +471,30 @@ function Milli_Chart(settings) {
             _this.scaleinfoY.lowValue -= 1;
             _this.scaleinfoY.highValue += 1;
         }
+        // do we have any analyzis we need to take into account
+
+        for (const [key, a] of m_analyzisMethod.entries()) {
+            var data;
+            if (_this.scaleinfoY.type == 'history') data = a.history;
+            else data = a.trades;
+            for (var i = 0; i < data.length; i++) {
+                if (data[i].timestamp < _this.scaleinfoX.startTimeStamp) {
+                    continue;
+                }
+                if (data[i].timestamp > _this.scaleinfoX.endTimeStamp) {
+                    break;
+                }
+                if (typeof data[i].datapoints !== 'undefined') {
+                    for (var x = 0; x < data[i].datapoints.length; x++) {
+                        if (data[i].datapoints[x] < _this.scaleinfoY.lowValue) _this.scaleinfoY.lowValue = data[i].datapoints[x];
+                        else
+                        if (data[i].datapoints[x] > _this.scaleinfoY.highValue) _this.scaleinfoY.highValue = data[i].datapoints[x];
+                    }
+                }
+                if (data[i].price < _this.scaleinfoY.lowValue) _this.scaleinfoY.lowValue = data[i].price;
+                if (data[i].price > _this.scaleinfoY.highValue) _this.scaleinfoY.highValue = data[i].price;
+            }
+        }
         return 1;
     }
 
@@ -800,7 +814,6 @@ function Milli_Chart(settings) {
         _this.scaleinfoX.days = getNumberOfDays(starttime, endtime);
         _this.scaleinfoX.lineLength = m_chartspaces.chart.right - m_chartspaces.chart.left;
         var datesize = new Date('2888-12-28'); // bredaste datum jag kan komma på
-        //_this.scaleinfoX.itemwidth = getStringWidth(m_ctx, '88:88') * 2; // kolla rätt format en 8a för varje tecken
         _this.scaleinfoX.itemwidth = getStringWidth(m_ctx, formatDate(datesize, _this.settings.dateformat)) * 2; // kolla rätt format en 8a för varje tecken
 
         var maxLegendItems = _this.scaleinfoX.lineLength / (_this.scaleinfoX.itemwidth * 2);
@@ -875,7 +888,6 @@ function Milli_Chart(settings) {
                 }
             }
             if (draw) {
-                //drawXAxisGridlines({ 'x': x, y: m_canvas.height - m_chartCss.marginBottom });
                 drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - m_chartCss.marginBottom });
                 text = year;
                 if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - m_ctx.measureText(text).width) { // not to far right?
@@ -883,13 +895,12 @@ function Milli_Chart(settings) {
                         m_ctx.save(); // flip and write new years on top
                         var fontMetrix = m_ctx.measureText(text);
                         x = x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
-                        var y = m_chartspaces.chart.top; // + m_ctx.measureText(datum).width;
+                        var y = m_chartspaces.chart.top;
                         m_ctx.translate(x, y);
                         m_ctx.rotate(90 * Math.PI / 180);
                         m_ctx.fillText(text, 0, 0);
                         m_ctx.restore();
                     } else {
-                        //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - m_chartCss.marginBottom + 10);
                         m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - m_chartCss.marginBottom + 10);
                     }
                 }
@@ -908,7 +919,6 @@ function Milli_Chart(settings) {
                 x = getXPosition(new Date(year.getFullYear() + '-07-01T00:00:00Z')); // 7
                 draw = true;
                 for (i = 0; i < legendItems.length; i++) {
-                    //if (Math.abs(legendItems[i].x - x) < (getMaxDateWidth() / 2)) {
                     if (Math.abs(legendItems[i].x - x) < getMaxDateWidth()) {
                         draw = false;
                     }
@@ -1076,7 +1086,6 @@ function Milli_Chart(settings) {
             else {
                 if (numticks < 2) numticks = 2;
                 x = _this.scaleinfoX.milliPerDay / numticks / 60000;
-                //x = totalmilli / numticks / 60000;
                 if (totalmilli > 4 * 3600000) factor = 60; // 4 timmar
                 else
                 if (totalmilli > 2 * 3600000) factor = 30; // 2 timmar
@@ -1438,8 +1447,9 @@ function Milli_Chart(settings) {
             return;
         }
         var highy = -1;
-        var lowy = m_chartspaces.height;
-        for (var x = 0; x < _this.instruments.length; x++) {
+        var lowy = m_chartspaces.chart.height;
+        var toolArray = [];
+        for (x = 0; x < _this.instruments.length; x++) {
             if (_this.instruments[x].insref != 0 && typeof obj.instruments[x] !== 'undefined') {
                 var instr = {};
                 instr.chartType = _this.scaleinfoY.type;
@@ -1475,16 +1485,6 @@ function Milli_Chart(settings) {
                 var pointerHeight = _this.instruments[x].toolTipPointer.offsetHeight + parseInt(pointerStyle.marginTop) + parseInt(pointerStyle.marginBottom);
                 _this.instruments[x].toolTip.innerHTML = ttip;
                 var posy = obj.instruments[x].y - (_this.instruments[x].toolTip.offsetHeight / 2);
-                var tmp = Math.abs(posy - parseFloat(highy));
-                var height = _this.instruments[x].toolTip.offsetHeight;
-                if (tmp < height) {
-                    posy = parseFloat(highy) + height;
-                }
-                tmp = Math.abs(posy - parseFloat(lowy));
-                if (tmp < 30) {
-                    // hur gör vi här? behövs det när vi sätter dom i ordning?
-                    //posy = parseFloat(highy) + 20;
-                }
                 if (m_dataPoints.arr[i] + (_this.instruments[x].toolTip.offsetWidth * 1.5) > m_canvas.width || m_dataPoints.arr[i] + (_this.instruments[x].toolTip.offsetWidth * 1.5) > m_canvas.width) { // TODO +10 should be calculated better
                     // draw the hover to the left
                     _this.instruments[x].toolTip.style.left = (m_dataPoints.arr[i] - _this.instruments[x].toolTip.offsetWidth - (pointerWidth / 2)) + 1 + 'px';
@@ -1493,14 +1493,33 @@ function Milli_Chart(settings) {
                     _this.instruments[x].toolTip.style.left = (obj.instruments[x].x + (pointerWidth / 2)) + 'px';
                 }
                 _this.instruments[x].toolTip.style.top = posy + 'px';
-
+                toolArray.push({ top: (obj.instruments[x].y - (pointerHeight / 2)), instrument: x });
                 _this.instruments[x].toolTipPointer.style.left = (obj.instruments[x].x - (pointerWidth / 2)) + 1 + 'px'; // hmm plus 1??
                 _this.instruments[x].toolTipPointer.style.top = (obj.instruments[x].y - (pointerHeight / 2)) + 'px';
                 if (posy > highy) highy = posy;
                 if (posy < lowy) lowy = posy;
 
+            } else {
+                if (_this.instruments[x].toolTip) {
+                    _this.instruments[x].toolTip.parentNode.removeChild(_this.instruments[x].toolTip);
+                    _this.instruments[x].toolTipPointer.parentNode.removeChild(_this.instruments[x].toolTipPointer);
+                    _this.instruments[x].toolTip = undefined;
+                    _this.instruments[x].toolTipPointer = undefined;
+                }
             }
         }
+        toolArray.sort((a, b) => a.top - b.top);
+        var lastTop = 0;
+        for (x = 0; x < toolArray.length; x++) {
+            if (x != 0) {
+                //console.log(lastTop,_this.instruments[x-1].toolTip.offsetHeight , toolArray[x].top);
+                if (lastTop + _this.instruments[x - 1].toolTip.offsetHeight > toolArray[x].top) {
+                    toolArray[x].top = lastTop + _this.instruments[x - 1].toolTip.offsetHeight;
+                }
+            }
+            _this.instruments[toolArray[x].instrument].toolTip.style.top = toolArray[x].top + 'px';
+            lastTop = toolArray[x].top;
+        }
         return;
     }
 
@@ -1595,6 +1614,31 @@ function Milli_Chart(settings) {
             if (m_zoom.div) m_canvas.parentNode.removeChild(m_zoom.div);
             m_zoom.div = null;
             m_zoom.isZooming = false;
+            for (const [key, a] of m_analyzisMethod.entries()) {
+                switch (a.method) {
+                    case 'sma':
+                        {
+                            a.history = simpleMovingAverage(_this.instruments[0].history, a.length);
+                            a.trades = simpleMovingAverage(_this.instruments[0].trades, a.length);
+                        }
+                        break;
+                    case 'ema':
+                        {
+                            a.history = exponentialMovingAverage(_this.instruments[0].history, a.length);
+                            a.trades = exponentialMovingAverage(_this.instruments[0].trades, a.length);
+                            break;
+                        }
+                    case 'bollinger':
+                        {
+                            a.history = bollingerBands(_this.instruments[0].history, a.length, a.stddev | 2);
+                            a = bollingerBands(_this.instruments[0].trades, a.length, a.stddev | 2);
+                            break;
+                        }
+                    default:
+                        break;
+                }
+            }
+
         }
         m_lastDrawnInstrument = _this.instruments[0].insref;
         if (m_ctx == null) return;
@@ -1685,6 +1729,12 @@ function Milli_Chart(settings) {
                 if (_this.instruments[i].insref != 0)
                     plotData(_this.instruments[i].trades, i);
             }
+
+            for (const [key, a] of m_analyzisMethod.entries()) {
+                if (a.method == 'bollinger') plotBollingerBand(a, 'trades');
+                else plotMovingAverage(a, 'trades');
+            }
+
         } else
         if (period == 'm') {
             if (m_zoom.mousedown.timestamp) {
@@ -1692,10 +1742,12 @@ function Milli_Chart(settings) {
                 _this.scaleinfoX.endTimeStamp = m_zoom.mousedown.timestamp > m_zoom.mouseup.timestamp ? m_zoom.mousedown.timestamp : m_zoom.mouseup.timestamp;
                 _this.scaleinfoX.endTimeStamp -= (_this.scaleinfoX.endTimeStamp % 3600000);
             } else {
+                var startdate = new Date().getTime() - (86400000 * 365 * (isNaN(len) ? 1 : len));
+
                 _this.scaleinfoX.startTimeStamp = subtractMonth(new Date(), len);
                 _this.scaleinfoX.startTimeStamp = new Date(_this.scaleinfoX.startTimeStamp.toISOString().substring(0, 10) + 'T' + '00:00:00Z').getTime();
                 _this.scaleinfoX.startTimeStamp = findFirstWeekDay(_this.scaleinfoX.startTimeStamp).getTime();
-                if (_this.instruments[0].history.len > 1 && _this.scaleinfoX.startTimeStamp < _this.instruments[0].history[0].timestamp) _this.scaleinfoX.startTimeStamp = _this.instruments[0].history[0].timestamp;
+                if (_this.instruments[0].history.length > 1 && _this.scaleinfoX.startTimeStamp < _this.instruments[0].history[0].timestamp) _this.scaleinfoX.startTimeStamp = _this.instruments[0].history[0].timestamp;
                 _this.scaleinfoX.endTimeStamp = new Date();
                 _this.scaleinfoX.endTimeStamp = new Date(_this.scaleinfoX.endTimeStamp.toISOString().substring(0, 10) + 'T' + '00:00:00Z').getTime();
             }
@@ -1712,25 +1764,30 @@ function Milli_Chart(settings) {
                 if (_this.instruments[i].insref != 0)
                     plotData(_this.instruments[i].history, i);
             }
+            for (const [key, a] of m_analyzisMethod.entries()) {
+                if (a.method == 'bollinger') plotBollingerBand(a, 'history');
+                else plotMovingAverage(a, 'history');
+            }
         } else
-        if ((period == 'y' || _this.settings.chartlen == 'ytd' || _this.settings.chartlen == 'max')) { // && _this.instruments[0].history.length != 0) {
+        if ((period == 'y' || _this.settings.chartlen == 'ytd' || _this.settings.chartlen == 'max')) {
             if (m_zoom.mousedown.timestamp) {
                 _this.scaleinfoX.startTimeStamp = m_zoom.mousedown.timestamp > m_zoom.mouseup.timestamp ? m_zoom.mouseup.timestamp : m_zoom.mousedown.timestamp;
                 _this.scaleinfoX.startTimeStamp -= (_this.scaleinfoX.startTimeStamp % 3600000);
                 _this.scaleinfoX.endTimeStamp = m_zoom.mousedown.timestamp > m_zoom.mouseup.timestamp ? m_zoom.mousedown.timestamp : m_zoom.mouseup.timestamp;
                 _this.scaleinfoX.endTimeStamp -= (_this.scaleinfoX.endTimeStamp % 3600000);
             } else {
-                var startdate;
+                var startdateM;
                 if (_this.settings.chartlen == 'max' && _this.instruments[0].history.length > 1) {
-                    startdate = _this.instruments[0].history[0].timestamp;
+                    startdateM = _this.instruments[0].history[0].timestamp;
                 } else
                 if (_this.settings.chartlen == 'ytd') {
-                    startdate = new Date(new Date().getFullYear() - 1 + '-12-30').getTime(); // TODO, hur skall vi göra här om det inte finns data runt här?
+                    //startdateM = new Date(new Date().getFullYear() - 1 + '-12-30').getTime(); // TODO, hur skall vi göra här om det inte finns data runt här?
+                    startdateM = new Date(new Date().getFullYear() + '-01-01').getTime(); // TODO, hur skall vi göra här om det inte finns data runt här?
                 } else {
-                    startdate = new Date().getTime() - (86400000 * 365 * (isNaN(len) ? 1 : len));
+                    startdateM = new Date().getTime() - (86400000 * 365 * (isNaN(len) ? 1 : len));
                 }
-                if (_this.instruments[0].history.length > 1 && startdate < _this.instruments[0].history[0].timestamp) startdate = _this.instruments[0].history[0].timestamp;
-                _this.scaleinfoX.startTimeStamp = startdate;
+                if (_this.instruments[0].history.length > 1 && startdateM < _this.instruments[0].history[0].timestamp) startdateM = _this.instruments[0].history[0].timestamp;
+                _this.scaleinfoX.startTimeStamp = startdateM;
                 _this.scaleinfoX.startTimeStamp = findFirstWeekDay(_this.scaleinfoX.startTimeStamp).getTime();
                 _this.scaleinfoX.endTimeStamp = new Date();
                 _this.scaleinfoX.endTimeStamp = new Date(_this.scaleinfoX.endTimeStamp.toISOString().substring(0, 10) + 'T' + '00:00:00Z').getTime();
@@ -1748,6 +1805,12 @@ function Milli_Chart(settings) {
                 if (_this.instruments[i].insref != 0)
                     plotData(_this.instruments[i].history, i);
 
+            for (const [key, a] of m_analyzisMethod.entries()) {
+                if (a.method == 'bollinger') plotBollingerBand(a, 'history');
+                else plotMovingAverage(a, 'history');
+            }
+
+
         }
         drawBoxShadow(m_chartspaces.chart);
         if (m_chartspaces.chart.percent != 100) {
@@ -1919,6 +1982,7 @@ function Milli_Chart(settings) {
     };
 
     function plotExternalHistoricalData(data) {
+        // används för dividend osv
         m_ctx.save();
         var startpoint = { x: 0, y: 0 };
         var endpoint = { x: 0, y: 0 };
@@ -1976,6 +2040,133 @@ function Milli_Chart(settings) {
         m_ctx.restore();
     }
 
+    function calcAnalyzisLine(data, pricecol) {
+        var startpoint = { x: 0, y: 0 };
+        var endpoint = { x: 0, y: 0 };
+        var startDate = _this.scaleinfoX.startTimeStamp;
+        var len = data.length;
+        var lastdate = new Date(_this.scaleinfoX.startTimeStamp);
+        var offset = 0;
+        var maxy = 0;
+        var ret = [];
+        for (var i = 0; i < len; i++) {
+            var currentDate;
+            var tmpx = startpoint.x;
+            var tmp;
+            if (data[i].timestamp < _this.scaleinfoX.startTimeStamp) {
+                continue;
+            }
+            if (data[i].timestamp > _this.scaleinfoX.endTimeStamp) {
+                break;
+            }
+
+            if (_this.scaleinfoY.type != 'history' && (data[i].timestamp % 86400000 < _this.instruments[0].opentimestamp || data[i].timestamp % 86400000 > _this.instruments[0].closetimestamp)) {
+                continue;
+            }
+            var endtimeToday = new Date(data[i].timestamp);
+            if (endtimeToday.getDay() == 0 || endtimeToday.getDay() == 6) continue;
+            if (_this.scaleinfoY.type != 'history') {
+                endtimeToday = new Date(endtimeToday.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z'); // borde räcka att göra 1 gång när det blir nytt datum
+            }
+            if (data[i].timestamp > endtimeToday.getTime()) {
+                continue; // dataticks efter stängning ritas inte
+            }
+            currentDate = new Date(data[i].timestamp);
+            currentDate.setHours(lastdate.getHours());
+            currentDate.setMinutes(lastdate.getMinutes());
+            currentDate.setSeconds(lastdate.getSeconds());
+            if (lastdate.toISOString().substring(0, 10) != currentDate.toISOString().substring(0, 10)) { // new date
+                tmp = new Date(lastdate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
+                var nextDate = new Date(data[i].timestamp);
+                tmp = tmp.getTime() + 86400000 - _this.scaleinfoX.milliPerDay; // increase to next days starttime
+
+                currentDate = new Date(tmp);
+                while (dateDiffInDays(currentDate, nextDate) > 0) {
+                    if (currentDate.getDay() == 0 || currentDate.getDay() == 6)
+                        offset += 86400000 / _this.scaleinfoX.timePerPixel;
+                    else
+                        offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel);
+                    currentDate = new Date(currentDate.getTime() + 86400000);
+                }
+                offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate);
+                lastdate = currentDate;
+                startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
+
+                // TODO: här blir det fel när det är från 00:00: 23:59 men göms av tmpx < startpoint.x
+                if (_this.scaleinfoY.type == 'trades' && tmpx < startpoint.x) {
+                    ret.push(startpoint.x, startpoint.y);
+                }
+            }
+            startpoint.y = Math.round(m_chartspaces.chart.height - m_chartCss.marginBottom - ((data[i].datapoints[pricecol] - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
+            maxy = maxy > startpoint.y ? maxy : startpoint.y;
+
+            startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
+            startpoint.x -= offset;
+
+            if (startpoint.x != endpoint.x || startpoint.y != endpoint.y) {
+                var x = Math.round(startpoint.x);
+                if (endpoint.x != 0) {
+                    if (tmpx < startpoint.x) {
+                        if (_this.settings.hcurve) m_ctx.lineTo(startpoint.x, endpoint.y);
+                        ret.push({ x: startpoint.x, y: startpoint.y });
+                    }
+                } else {
+                    ret.push({ x: startpoint.x, y: startpoint.y });
+                }
+                endpoint.x = startpoint.x;
+                endpoint.y = startpoint.y;
+            }
+        }
+        return ret;
+    }
+
+    function plotMovingAverage(method, type) {
+        var data = method[type];
+        m_ctx.strokeStyle = method.color;
+        m_ctx.lineWidth = method.lineWidth | 1;
+        var line = calcAnalyzisLine(data, 0);
+        if (line.length == 0) return;
+        m_ctx.save();
+        m_ctx.beginPath();
+        m_ctx.closePath(); // clear path
+        m_ctx.moveTo(line[0].x, line[0].y);
+        for (var i = 1; i < line.length; i++) {
+            m_ctx.lineTo(line[i].x, line[i].y);
+        }
+        m_ctx.stroke();
+        m_ctx.restore();
+    }
+
+    function plotBollingerBand(method, type) {
+        var data = method[type];
+        var upper = calcAnalyzisLine(data, 0, null);
+        var lower = calcAnalyzisLine(data, 1, null);
+        if (upper.length == 0 || lower.length == 0) return;
+        m_ctx.strokeStyle = method.color;
+        m_ctx.lineWidth = method.lineWidth | 1;
+        m_ctx.save();
+        m_ctx.beginPath();
+        var upper = calcAnalyzisLine(data, 0, null);
+        var lower = calcAnalyzisLine(data, 1, null);
+        for (var i = 0; i < upper.length; i++) m_ctx.lineTo(upper[i].x, upper[i].y);
+        m_ctx.lineTo(lower[lower.length - 1].x, lower[lower.length - 1].y);
+        for (var i = lower.length - 1; i >= 0; i--) m_ctx.lineTo(lower[i].x, lower[i].y);
+        if (method.border) m_ctx.stroke();
+        m_ctx.closePath();
+        if (method.fill) {
+            m_ctx.fillStyle = method.fill;
+            m_ctx.fill();
+        }
+        var sma = calcAnalyzisLine(data, 2);
+        m_ctx.beginPath();
+        m_ctx.closePath(); // clear path
+        m_ctx.moveTo(sma[0].x, sma[0].y);
+        for (var i = 0; i < sma.length; i++) m_ctx.lineTo(sma[i].x, sma[i].y);
+        m_ctx.stroke();
+        m_ctx.restore();
+        return;
+    }
+
     function plotData(data, instrument) {
         m_ctx.save();
         m_ctx.strokeStyle = m_instrumentCss[instrument].color;
@@ -2061,17 +2252,13 @@ function Milli_Chart(settings) {
                 }
                 offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate);
                 lastdate = currentDate;
-                //console.log(startpoint.x);
                 startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
-                //console.log(startpoint.x);
 
                 // TODO: här blir det fel när det är från 00:00: 23:59 men göms av tmpx < startpoint.x
                 if (_this.scaleinfoY.type == 'trades' && tmpx < startpoint.x) {
                     m_ctx.lineTo(startpoint.x, startpoint.y);
                 }
-                //m_ctx.lineTo(startpoint.x, startpoint.y);
             }
-            //startpoint.y = Math.round(m_canvas.height - m_chartCss.marginBottom - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
             startpoint.y = Math.round(m_chartspaces.chart.height - m_chartCss.marginBottom - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
             maxy = maxy > startpoint.y ? maxy : startpoint.y;
 
@@ -2180,6 +2367,116 @@ function Milli_Chart(settings) {
         m_zoom.mouseup.timestamp = null;
     };
 
+    function bollingerBands(prices, window, stddev) {
+        if (!prices || prices.length < window) {
+            return [];
+        }
+
+        let index = window - 1;
+        const length = prices.length + 1;
+        const standardDeviations = [];
+        while (++index < length) {
+            const windowSlice = prices.slice(index - window, index);
+            const mean = windowSlice.reduce((prev, curr) => prev + curr.price, 0) / window;
+            const variance = Math.sqrt(windowSlice.reduce((a, b) => a + (b.price - mean) ** 2, 0) / window) * stddev;
+            const uppervariance = mean + variance;
+            const lowervariance = mean - variance;
+            standardDeviations.push({ timestamp: prices[index - 1].timestamp, datapoints: [uppervariance, lowervariance, mean] });
+        }
+        return standardDeviations;
+    }
+
+    function simpleMovingAverage(prices, window, n = Infinity) {
+        if (!prices || prices.length < window) {
+            return [];
+        }
+
+        let index = window - 1;
+        const length = prices.length + 1;
+
+        const simpleMovingAverages = [];
+
+        let numberOfSMAsCalculated = 0;
+
+        while (++index < length && numberOfSMAsCalculated++ < n) {
+            const windowSlice = prices.slice(index - window, index);
+            const sum = windowSlice.reduce((prev, curr) => prev + curr.price, 0);
+            simpleMovingAverages.push({ timestamp: prices[index - 1].timestamp, datapoints: [sum / window] });
+        }
+        return simpleMovingAverages;
+    }
+
+    function exponentialMovingAverage(prices, window) {
+        if (!prices || prices.length < window) {
+            return [];
+        }
+        let index = window - 1;
+        let previousEmaIndex = 0;
+        const length = prices.length;
+        const smoothingFactor = 2 / (window + 1);
+        const exponentialMovingAverages = [];
+
+        const [sma] = simpleMovingAverage(prices, window, 1);
+        exponentialMovingAverages.push(sma);
+        while (++index < length) {
+            const value = prices[index].price;
+            const previousEma = [exponentialMovingAverages[previousEmaIndex++].datapoints[0]];
+            const currentEma = (value * smoothingFactor) + (previousEma * (1 - smoothingFactor));
+            exponentialMovingAverages.push({ timestamp: prices[index].timestamp, datapoints: [currentEma] });
+        }
+        return exponentialMovingAverages;
+    }
+    _this.removeIndicator = function(index) {
+        if (m_analyzisMethod.get(index)) {
+            m_analyzisMethod.delete(index);
+            _this.drawChart();
+            return true;
+        }
+        return false;
+    }
+
+    _this.addIndicator = function(method) {
+        if (typeof method !== 'object' || method == null || typeof method.type == undefined) return;
+        switch (method.method) {
+            case 'sma':
+                {
+                    if (typeof method.length === undefined) return;
+                    method.history = simpleMovingAverage(_this.instruments[0].history, method.length);
+                    method.trades = simpleMovingAverage(_this.instruments[0].trades, method.length);
+                }
+                break;
+            case 'ema':
+                {
+                    if (typeof method.length === undefined) return;
+                    method.index = m_analyzisIndex++;
+                    method.history = exponentialMovingAverage(_this.instruments[0].history, method.length);
+                    method.trades = exponentialMovingAverage(_this.instruments[0].trades, method.length);
+                    break;
+                }
+            case 'bollinger':
+                {
+                    if (typeof method.length === undefined) return;
+                    if (!method.stddev) method.stddev = 2;
+                    if (!method.length) method.stddev = 20;
+                    method.index = m_analyzisIndex++;
+                    method.history = bollingerBands(_this.instruments[0].history, method.length, method.stddev | 2);
+                    method.trades = bollingerBands(_this.instruments[0].trades, method.length, method.stddev | 2);
+                    break;
+                }
+            default:
+                if (typeof method.history !== 'undefined' && typeof method.trades !== 'undefined') {
+                    if (!Array.isArray(method.history) || !Array.isArray(method.trades)) {
+                        return -1;
+                    }
+                }
+                break;
+        }
+        method.index = m_analyzisIndex++;
+        m_analyzisMethod.set(method.index, method);
+        console.log(method, m_analyzisMethod);
+        _this.drawChart();
+    };
+
     _this.removeAllCompares = function() {
         if (_this.instruments.length == 1) return;
         for (var i = 0; i < 3; i++)
@@ -2191,7 +2488,6 @@ function Milli_Chart(settings) {
         if (instrument == 0 || isNaN(instrument)) return;
         for (var i = 0; i < _this.instruments.length; i++) {
             if (_this.instruments[i].insref == instrument) {
-                //                _this.instruments.splice(i, 1);
                 _this.instruments[i] = { insref: 0 };
                 _this.drawChart();
             }
@@ -2209,7 +2505,6 @@ function Milli_Chart(settings) {
             if (_this.instruments[pos].insref == 0) break;
         }
         if (pos == 4) return 0;
-        //            if (_this.instruments.length > 3) return; // MAX 4 instruments (3 compares)
         var instrument = parseInt(insref);
         if (instrument == 0 || isNaN(instrument)) return 0;
         for (i = 0; i < _this.instruments.length; i++) {
@@ -2226,12 +2521,17 @@ function Milli_Chart(settings) {
         };
 
         _this.instruments[pos] = instr;
+        var oldfields = _this.settings.fields;
         if (_this.settings.compare1 != '') {
-            var url = milli_data_api_url + "widget=intradaychart&token=" + _this.settings.token + "&target=buildwidget&fields=name,tradecurrency,date,time,tradeprice,tradequantity,marketopen,marketclose&language=sv&compress=1&insref=" + instrument + '&intradaylen=' + _this.settings.intradaylen;
+            _this.settings.fields = [...['name', 'tradecurrency', 'time', 'date', 'tradeprice', 'tradequantity', 'marketopen', 'marketclose', 'closeprice1d'], ...oldfields];
+            var url = milli_data_api_url + "widget=intradaychart&token=" + _this.settings.token + "&target=buildwidget&fields=" + _this.settings.fields + "&language=sv&compress=1&insref=" + instrument + '&intradaylen=' + _this.settings.intradaylen;
+            _this.settings.fields = oldfields;
             millistream_data_api.fetch(url, function(data) {
                 drawCompare(data);
             });
-            url = milli_data_api_url + "widget=historychart&token=" + _this.settings.token + "&target=buildwidget&insref=" + instrument + "&fields=name,tradecurrency,date,closeprice,closequantity,marketopen,marketclose&language=sv&startdate=" + _this.settings.startdate + "&adjusted=1";
+            _this.settings.fields = [...['name', 'tradecurrency', 'date', 'closeprice', 'closequantity', 'marketopen', 'marketclose'], ...oldfields];
+            url = milli_data_api_url + "widget=historychart&token=" + _this.settings.token + "&target=buildwidget&insref=" + instrument + "&fields=" + _this.settings.fields + "&language=sv&startdate=" + _this.settings.startdate + "&adjusted=1";
+            _this.settings.fields = oldfields;
             millistream_data_api.fetch(url, function(data) {
                 drawCompare(data);
             });
@@ -2255,11 +2555,9 @@ function Milli_Chart(settings) {
         var period = _this.settings.chartlen.substring(_this.settings.chartlen.length - 1);
         var len = parseInt(_this.settings.chartlen.substring(0, _this.settings.chartlen.length - 1));
         if ((period == 'd' && _this.settings.chartlen != 'ytd') && typeof resp[0].trades === 'undefined') {
-            //console.log('typeof resp.trades', typeof resp[0].trades, period, _this.settings.chartlen);
             return;
         }
         if ((period == 'm' || period == 'y' || _this.settings.chartlen == 'ytd' || _this.settings.chartlen == 'max') && typeof resp[0].history === 'undefined') {
-            //console.log('typeof resp.history', typeof resp[0].history, resp);
             return;
         }
 
@@ -2324,17 +2622,14 @@ function Milli_Chart(settings) {
         _this.drawChart();
 
         if (_this.settings.streaming != false && typeof resp[0].trades !== 'undefined') {
-            /*if (MillistreamWidgetApi_isObjectEmpty(_this.unsubscriptions) == false) {
-                _this.settings.streaming.MillistreamWidgetStreamingApi_unsubscribe(_this);
-            }*/
             m_requestid = _this.settings.streaming.MillistreamWidgetStreamingApi_subscribeInstruments(_this, m_requestid, [_this.settings.instrument]);
-            //_this.requestid = _this.settings.streaming.MillistreamWidgetStreamingApi_subscribeInstruments(_this, _this.requestid, m_insrefs);
         }
         if (_this.settings.onreadyCallback) _this.settings.onreadyCallback();
     };
 
     _this.streamingCallback = function(insref, mref, json) {
         var update = false;
+        var calcAnalyizis = false;
         var instr = _this.instruments.find(function(item) {
             return item.insref == insref;
         });
@@ -2344,38 +2639,62 @@ function Milli_Chart(settings) {
         if (json['3'] && json['36'] && json['13'] && (json['12'] || json['201'])) {
             var timestamp = new Date(json['3'] + 'T' + json['36'].substring(0, 6) + '00' + 'Z').getTime();
 
-            // TODO hash/strangle with YYYY-mm-dd hh:mm:00 trades and only draw once per minute
             var data = instr.hashmap.get(timestamp);
-            if (data != 'undefined') {
+            if (typeof data === 'undefined') {
                 update = true;
                 data = {};
                 //data.tradereference = json['14'];
                 data.timestamp = timestamp;
                 instr.hashmap.set(data.timestamp, data);
+                calcAnalyizis = true;
                 data.price = parseFloat(json['12']); // eller 201 för tradeyield
                 data.open = parseFloat(json['12']); // eller 201 för tradeyield
                 data.high = parseFloat(json['12']); // eller 201 för tradeyield
                 data.low = parseFloat(json['12']); // eller 201 för tradeyield
                 data.quantity = parseInt(json['13']);
+
                 if (instr.trades.length != 0 && data.timestamp < instr.trades[instr.trades.length - 1].timestamp) {
                     //console.log("pushtrade is older than last trade ignoring, should file it on correct postition");
                 } else
                     instr.trades.push(data);
             } else {
+                if (data.price != parseFloat(json['12']))
+                    calcAnalyizis = true;
                 data.price = parseFloat(json['12']); // eller 201 för tradeyield
                 data.quantity += parseInt(json['13']);
                 update = true;
                 // updatera med quantity, open , high,low osv?
             }
         }
-        if (update) _this.drawChart(); // hover försvinner... (harris också)
+        if (calcAnalyizis) {
+            for (const [key, a] of m_analyzisMethod.entries()) {
+                switch (a.method) {
+                    case 'sma':
+                        a.trades = [];
+                        a.trades = simpleMovingAverage(_this.instruments[0].trades, a.length);
+                        break;
+                    case 'ema':
+                        a.trades = [];
+                        a.trades = exponentialMovingAverage(_this.instruments[0].trades, a.length);
+                        break;
+                    case 'bollinger':
+                        a.trades = [];
+                        a.trades = bollingerBands(_this.instruments[0].trades, a.length, a.stddev | 2);
+                        break;
+                    default:
+                        // draw custom added?
+                        break;
+                }
+            }
+        }
+
+        if (update && _this.settings.chartlen != 'ytd' && _this.settings.chartlen.substring(_this.settings.chartlen.length - 1) == 'd') { // do not redraw if not tickchart
+            _this.drawChart();
+        }
     };
 
     function changeOrientation() {
         if (m_canvas == null) return;
-        // set size 0 so target div does not expand due to chartsize
-        //readCss();	// TODO
-
         m_canvas.setAttribute('height', _this.settings.target.getBoundingClientRect().height);
         m_canvas.setAttribute('width', _this.settings.target.getBoundingClientRect().width);
         _this.drawChart();
@@ -2385,15 +2704,22 @@ function Milli_Chart(settings) {
         var req = new XMLHttpRequest();
         req.onload = function() {
             _this.buildwidget(JSON.parse(this.responseText));
-        }
+        };
         req.open("GET", url, true);
         req.onerror = function(error) {
             console.log('Fetch data error', error);
-        }
+        };
         req.send();
     }
 
-    this.drawWidget = function() {
+    _this.destroyWidget = function() {
+        // if we have subscriptions send in an empty array to unsubscribe all and release it
+        if (MillistreamWidgetApi_isObjectEmpty(_this.unsubscriptions) == false)
+            _this.requestid = _this.settings.streaming.MillistreamWidgetStreamingApi_subscribeInstruments(_this, _this.requestid, []);
+        return 0;
+    };
+
+    _this.drawWidget = function() {
         // remove standard fields from array, they will be requested anyway
         _this.settings.fields = _this.settings.fields.filter(function(obj) {
             return ['name', 'tradecurrency', 'time', 'date', 'tradeprice', 'tradequantity', 'marketopen', 'marketclose', 'closeprice1d', 'closeprice', 'closequantity'].indexOf(obj) == -1;
@@ -2405,15 +2731,13 @@ function Milli_Chart(settings) {
         m_dummyDiv.style.display = 'none';
         m_dummyDiv.setAttribute('class', 'millistream-chart');
         _this.settings.target.appendChild(m_dummyDiv);
-        _this.instruments = []; // Hmm
-        var instr = {
+        _this.instruments[0] = {
             insref: _this.settings.instrument,
             history: [],
             trades: [],
             hashmap: new Map(),
             intradayQuantity: []
         };
-        _this.instruments.push(instr);
         var d, url, oldfields;
         if (_this.settings.intradaylen) {
             d = new Date().getTime();
@@ -2431,7 +2755,6 @@ function Milli_Chart(settings) {
             oldfields = _this.settings.fields;
             _this.settings.fields = [...['name', 'tradecurrency', 'time', 'date', 'tradeprice', 'tradequantity', 'marketopen', 'marketclose', 'closeprice1d'], ...oldfields];
             _this.settings.startdate = e.getFullYear() + '-' + zeroPad(e.getMonth() + 1, 2) + '-' + zeroPad(e.getDate(), 2);
-            //_this.settings.startdateintraday = _this.settings.startdate;
             url = MillistreamWidgetApi_buildQuery(_this, 'intradaychart');
             _this.settings.fields = oldfields;
             if (_this.settings.xhr) {
@@ -2479,9 +2802,7 @@ function Milli_Chart(settings) {
                     startdate -= 86400000 * 365 * len; // remember leapyear
                     break;
                 case 'x':
-                    //startdate -= 86400000 * 365 * 10; // remember leapyear
                     startdate = new Date('1970-01-01T00:00:00Z').getTime();
-                    //console.log(startdate);
                     break;
             }
             // must be reset when  changing from intraday -> history and vice versa

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@millistream/millistream-widgets",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Millistream widgets node package",
   "main": "millistream-widgets.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Mats Fors (http://www.millistream.com)",
-  "license": "GPL-3.0"
+  "license": "GPL-3.0",
+  "repository": {
+    "private": true
+  }
 }