@millistream/millistream-widgets 1.0.45 → 1.0.46

package/millistream-widgets.js

@@ -74,7 +74,8 @@ function Milli_Chart(settings) {
         },
         xAxisSpacing: 0,
         yAxisSpacing: 4, // undocumented
-        xAxisModulo: 1 // undocumented,
+        xAxisModulo: 1, // undocumented,
+        cursor: 'crosshair' //'crosshair'
     };
     var m_startdate = null;
     var m_chartspaces = {
@@ -1261,7 +1262,6 @@ function Milli_Chart(settings) {
             x = Math.round(m_chartspaces.chart.left + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
             //if (lastx == 0 && m_chartspaces.chart.left > (x - (getMaxDateWidth() / 2))) { // do not print left of y legend
             if (lastx == 0 && 0 > x - (getMaxDateWidth() / 2)) {
-                console.log(currentDate,x - (getMaxDateWidth() / 2));
                 currentDate = new Date(currentDate.getTime() + 86400000);
                 continue;
             }
@@ -1769,6 +1769,48 @@ function Milli_Chart(settings) {
         if (m_zoom.mousedown && m_zoom.mousedown.pos != m_zoom.mouseup.pos) return;
     }
 
+    function findClosestValue(dataset, target) {
+        //returns closest value and position in array
+        let left = 0;
+        let right = dataset.length - 1;
+        let closest = null;
+        let iterations = 0;
+        let mid;
+        while (left <= right) {
+            iterations++;
+            mid = Math.floor((left + right) / 2);
+            const midValue = dataset[mid];
+
+            if (midValue === target) {
+                return [midValue,mid];
+            }
+
+            if (closest === null || Math.abs(midValue - target) < Math.abs(closest - target)) {
+                closest = midValue;
+            }
+
+            if (midValue < target) {
+                left = mid + 1;
+            } else {
+                right = mid - 1;
+            }
+        }
+        return [closest,mid];
+    }
+    function  getDivHeight(elem) {
+        let style = getComputedStyle(elem);
+        let h = elem.offsetHeight + parseInt(style.marginBottom) + parseInt(style.marginTop);
+        let divs = elem.children;
+        if(divs) {
+            for(let d = 0; d < divs.length; d++) {
+                if(divs[d].nodeName == 'DIV' && divs[d].offsetWidth != 0) {
+                    style = getComputedStyle(divs[d]);
+                    h = Math.max(h,divs[d].offsetHeight + parseInt(style.marginBottom) + parseInt(style.marginTop));
+                }
+            }
+        }
+        return h;
+    }
     function onMouseMove(pos) {
         if (m_dataPoints.arr.length == 0) return;
         var rect = m_canvas.getBoundingClientRect();
@@ -1794,28 +1836,39 @@ function Milli_Chart(settings) {
             onMouseOut();
             return;
         }
-        var i;
-        for (i = 0; i < m_dataPoints.arr.length; i++) {
-            if (x <= m_dataPoints.arr[i]) {
-                break;
+        let obj = [];
+        let i;
+        let a = findClosestValue(m_dataPoints.arr,x);   // closest and pos
+
+        for(let s = 0; s < _this.instruments.length; s++) {
+            if(_this.instruments[s].insref != 0) {
+                //for (i = 0; i < m_dataPoints.arr.length; i++) {
+                //for (i = m_dataPoints.arr.length - 1; i >= 0; i--) {
+                for (i = a[1]; i >= 0; i--) {
+                        if (x >= m_dataPoints.arr[i]) {
+                        let o = m_dataPoints.map.get(m_dataPoints.arr[i]);
+                        let breakout = false;
+                        for(let ss = 0; ss < o.instruments.length; ss++) {
+                            if(o.instruments[ss] && o.instruments[ss].insref == _this.instruments[s].insref) {
+                                obj[s] = {timestamp: o.timestamp,instruments: o.instruments[ss]};
+                                breakout = true;
+                                break;
+                            }
+                        }
+                        if(breakout) break;
+                    }
+                }
             }
         }
-        if (i == m_dataPoints.arr.length) i--;
-        if (i != 0) {
-            if (Math.abs(x - m_dataPoints.arr[i]) > Math.abs(x - m_dataPoints.arr[i - 1]))
-                i--;
-        }
-        var obj = m_dataPoints.map.get(m_dataPoints.arr[i]);
-        if (obj == null) {
+        if (obj.length == 0) {
             return;
         }
-        var highy = -1;
-        var lowy = m_chartspaces.chart.height;
         var toolArray = [];
         let pointerWidth = 0;
         for (x = 0; x < _this.instruments.length; x++) {
-            if (_this.instruments[x].insref != 0 && typeof obj.instruments[x] !== 'undefined') {
-                var instr = {};
+            //if (_this.instruments[x].insref != 0 && typeof obj.instruments[x] !== 'undefined') {
+            if (_this.instruments[x].insref != 0 && typeof obj[x] !== 'undefined') {
+                    var instr = {};
                 instr.chartType = chartType;
                 instr.name = _this.instruments[x].name;
                 instr.instrumenttype = _this.instruments[x].instrumenttype;
@@ -1824,7 +1877,7 @@ function Milli_Chart(settings) {
                     instr.symbol = _this.instruments[x].symbol;
 
                 instr.data = {};
-                MillistreamWidgetApi_AssignObject(obj.instruments[x], instr.data);
+                MillistreamWidgetApi_AssignObject(obj[x].instruments, instr.data);
                 instr.data.price = formatNiceNumber(instr.data.price, _this.settings.thousandseparator, _this.settings.decimalseparator, _this.settings.num_decimals, false);
                 if(x == 0) {
                     for (let s = 0; s < _this.settings.indicators.length; s++) {
@@ -1834,7 +1887,7 @@ function Milli_Chart(settings) {
                                     instr.data.indicator = {
                                         method: _this.settings.indicators[s].method,
                                         datapoints: _this.settings.indicators[s].timeseries[ss].datapoints
-                                    }
+                                    };
                                 } else break;
                             }
                         }
@@ -1853,24 +1906,22 @@ function Milli_Chart(settings) {
                     m_canvas.parentNode.appendChild(_this.instruments[x].toolTipPointer);
                     _this.instruments[x].toolTipPointer.setAttribute('class', 'millistream-chart-pointer');
                     _this.instruments[x].toolTipPointer.style.left = (m_dataPoints.arr[i] - (_this.instruments[x].toolTipPointer.clientWidth / 2)) + 'px';
-                    _this.instruments[x].toolTipPointer.style.top = (obj.instruments[x].y - (_this.instruments[x].toolTipPointer.clientHeight / 2)) + 'px';
+                    _this.instruments[x].toolTipPointer.style.top = (obj[x].instruments.y - (_this.instruments[x].toolTipPointer.clientHeight / 2)) + 'px';
                     _this.instruments[x].toolTipPointer.style.position = 'absolute';
                     _this.instruments[x].toolTipPointer.style.backgroundColor = typeof m_instrumentCss[x].pointerColor === 'string' ? m_instrumentCss[x].pointerColor : m_instrumentCss[x].color;
                     _this.instruments[x].toolTipPointer.style.pointerEvents = 'none';
 
                 }
-                _this.instruments[x].toolTip.innerHTML = _this.settings.tooltip.formatter.call(instr, m_chartspaces, obj.instruments[x].x);
+                _this.instruments[x].toolTip.innerHTML = _this.settings.tooltip.formatter.call(instr, m_chartspaces, obj[x].instruments.x);
                 var pointerStyle = getComputedStyle(_this.instruments[x].toolTipPointer);
                 pointerWidth = _this.instruments[x].toolTipPointer.offsetWidth + parseInt(pointerStyle.marginLeft) + (parseInt(pointerStyle.marginRight));
                 var pointerHeight = _this.instruments[x].toolTipPointer.offsetHeight + parseInt(pointerStyle.marginTop) + parseInt(pointerStyle.marginBottom);
-                var posy = obj.instruments[x].y - (_this.instruments[x].toolTip.offsetHeight / 2);
+                var posy = obj[x].instruments.y - (getDivHeight(_this.instruments[x].toolTip    ) / 2);
+                //var posy = obj[x].instruments.y - (_this.instruments[x].toolTip.offsetHeight / 2);
                 _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;
-//                _this.instruments[x].toolTip.innerHTML = _this.settings.tooltip.formatter.call(instr, m_chartspaces, obj.instruments[x].x);
+                toolArray.push({ top: (obj[x].instruments.y - (pointerHeight / 2)), instrument: x });
+                _this.instruments[x].toolTipPointer.style.left = (obj[x].instruments.x - (pointerWidth / 2)) + 1 + 'px'; // hmm plus 1??
+                _this.instruments[x].toolTipPointer.style.top = (obj[x].instruments.y - (pointerHeight / 2)) + 'px';
                 let divs = _this.instruments[x].toolTip.children;
                 let width = _this.instruments[x].toolTip.offsetWidth;
                 for(let d = 0; d < divs.length; d++) {
@@ -1878,10 +1929,10 @@ function Milli_Chart(settings) {
                 }
                 if (m_dataPoints.arr[i] + width  > m_canvas.getWidth()) { // || m_dataPoints.arr[i] + (_this.instruments[x].toolTip.offsetWidth * 1.5) > m_canvas.getWidth()) { // TODO +10 should be calculated better
                     // draw the hover to the left
-                    _this.instruments[x].toolTip.style.left = (obj.instruments[x].x - width - (pointerWidth / 2)) + 1 + 'px';
+                    _this.instruments[x].toolTip.style.left = (obj[x].instruments.x - width - (pointerWidth / 2)) + 1 + 'px';
                 } else {
                     // draw hover to the right
-                    _this.instruments[x].toolTip.style.left = (obj.instruments[x].x + (pointerWidth / 2)) + 'px';
+                    _this.instruments[x].toolTip.style.left = (obj[x].instruments.x + (pointerWidth / 2)) + 'px';
                 }
             } else {
                 if (_this.instruments[x].toolTip) {
@@ -1920,12 +1971,14 @@ function Milli_Chart(settings) {
                         m_canvas.parentNode.appendChild(_this.settings.indicators[x].toolTip.div);
                     }
                     _this.settings.indicators[x].toolTip.div.style.left = _this.settings.indicators[x].timeseries[xx].pos.x / 1 + (pointerWidth / 2) + 'px'; // this i modified in the data for the instruments, but not for indicators
-                    _this.settings.indicators[x].toolTip.div.style.top = _this.settings.indicators[x].timeseries[xx].pos.y / 1 + 'px'; // this i modified in the data for the instruments, but not for indicators	
+                    //_this.settings.indicators[x].toolTip.div.style.top = _this.settings.indicators[x].timeseries[xx].pos.y / 1 + 'px'; // this i modified in the data for the instruments, but not for indicators	
+                    _this.settings.indicators[x].toolTip.div.style.top = toolArray[0].top + 2 + 'px'; // this i modified in the data for the instruments, but not for indicators	
+                    
                     _this.settings.indicators[x].toolTip.div.innerHTML = _this.settings.indicators[x].toolTip.formatter.call(_this.settings.indicators[x].timeseries[xx]);
                     if (y > _this.settings.indicators[x].timeseries[xx].pos.y -(height/2) && y < _this.settings.indicators[x].timeseries[xx].pos.y + (height/2))
                         m_canvas.style.cursor = "pointer";
                     else {
-                        m_canvas.style.cursor = "crosshair";
+                        m_canvas.style.cursor = _this.settings.cursor;
                     }
                     remove = false;
                     toolArray.push({ top: parseInt(_this.settings.indicators[x].toolTip.div.style.top), indicator: x });
@@ -1936,7 +1989,7 @@ function Milli_Chart(settings) {
                 if (_this.settings.indicators[x].toolTip.div && _this.settings.indicators[x].staticTooltip != true) {
                     _this.settings.indicators[x].toolTip.div.parentNode.removeChild(_this.settings.indicators[x].toolTip.div);
                     _this.settings.indicators[x].toolTip.div = undefined;
-                    m_canvas.style.cursor = "crosshair";
+                    m_canvas.style.cursor = _this.settings.cursor;
                 }
 
             }
@@ -1946,26 +1999,20 @@ function Milli_Chart(settings) {
         let lastHeight = 0;
         for (x = 0; x < toolArray.length; x++) {
             if (typeof toolArray[x].instrument !== 'undefined') {
-                //if (x != 0 && typeof _this.instruments[x - 1].toolTip !== 'undefined') {
-                //if (lastTop + _this.instruments[x - 1].toolTip.offsetHeight > toolArray[x].top) {
                 if (lastTop + lastHeight > toolArray[x].top) {
-                    //toolArray[x].top = (lastTop + _this.instruments[x - 1].toolTip.offsetHeight);
-                    toolArray[x].top = (lastTop + lastHeight);
+                    toolArray[x].top = (lastTop + lastHeight)+1;
                 }
-                //}
             } else {
-                //if (lastTop + _this.settings.indicators[toolArray[x].indicator].toolTip.div.offsetHeight > toolArray[x].top) {
                 if (lastTop + lastHeight > toolArray[x].top) {
-                    //toolArray[x].top = (lastTop + _this.settings.indicators[toolArray[x].indicator].toolTip.div.offsetHeight);
                     toolArray[x].top = (lastTop + lastHeight);
                 }
             }
             if (typeof toolArray[x].instrument !== 'undefined') {
                 _this.instruments[toolArray[x].instrument].toolTip.style.top = toolArray[x].top + 'px';
-                lastHeight = _this.instruments[toolArray[x].instrument].toolTip.offsetHeight;
+                lastHeight = getDivHeight(_this.instruments[toolArray[x].instrument].toolTip);
             } else {
                 _this.settings.indicators[toolArray[x].indicator].toolTip.div.style.top = toolArray[x].top + 'px';
-                lastHeight = _this.settings.indicators[toolArray[x].indicator].toolTip.div.offsetHeight;
+                lastHeight = getDivHeight(_this.settings.indicators[toolArray[x].indicator].toolTip.div);
             }
             lastTop = toolArray[x].top;
         }
@@ -2067,7 +2114,7 @@ function Milli_Chart(settings) {
         m_chartspaces.chart.right = m_canvas.getWidth()- getScaledSetting(m_chartCss.marginRight);// - 50;
         m_chartspaces.chart.marginBottom = getScaledSetting(m_chartCss.marginBottom);
         m_chartspaces.chart.bottom = (m_chartspaces.chart.height - m_chartspaces.chart.marginBottom);
-        m_chartspaces.chart.width = m_canvas.getWidth()
+        m_chartspaces.chart.width = m_canvas.getWidth();
 
         m_chartspaces.lowerChart.marginBottom = getScaledSetting(20) / window.devicePixelRatio;
         m_chartspaces.lowerChart.marginTop = getScaledSetting(0);
@@ -2076,7 +2123,7 @@ function Milli_Chart(settings) {
         m_chartspaces.lowerChart.left = m_chartspaces.chart.left;
         m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
         m_chartspaces.lowerChart.bottom = m_canvas.getHeight() - m_chartspaces.lowerChart.marginBottom;
-        m_chartspaces.lowerChart.width = m_canvas.getWidth() 
+        m_chartspaces.lowerChart.width = m_canvas.getWidth();
     }
 
     function calculateIndicators() {
@@ -2149,12 +2196,12 @@ function Milli_Chart(settings) {
             return;
         }
         calcChartSpaces();
-
         m_ctx.clearRect(0, 0, m_canvas.getWidth(), m_canvas.getHeight());
         m_ctx.lineWidth = 1 / 1;
         m_ctx.textBaseline = 'top'; // important!
         var s;
         if (period == 'd' && _this.settings.chartlen != 'ytd') {
+            if(_this.instruments[0].trades.length == 0) return;
             if (m_zoom.mousedown.timestamp) {
                 _this.scaleinfoX.endTimeStamp = m_zoom.mouseup.timestamp > m_zoom.mousedown.timestamp ? m_zoom.mouseup.timestamp : m_zoom.mousedown.timestamp;
                 _this.scaleinfoX.startTimeStamp = m_zoom.mouseup.timestamp < m_zoom.mousedown.timestamp ? m_zoom.mouseup.timestamp : m_zoom.mousedown.timestamp;
@@ -2181,17 +2228,14 @@ function Milli_Chart(settings) {
 
                     var tradetimestamp = new Date(_this.instruments[0].trades[_this.instruments[0].trades.length - 1].timestamp).getTime();
                     var closetimestamp = new Date(new Date(_this.instruments[0].trades[_this.instruments[0].trades.length - 1].timestamp).toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z').getTime();
-                    //console.log(tradetimestamp,closetimestamp);
                     if (closetimestamp < tradetimestamp)
                         _this.scaleinfoX.endTimeStamp = new Date(closetimestamp); // borde inte rita med closeprice1d då heller eller spelar det ingen roll?
                     else
                         _this.scaleinfoX.endTimeStamp = new Date(tradetimestamp);
-                    //console.log(new Date(_this.scaleinfoX.endTimeStamp));
                 }
                 if (_this.scaleinfoX.endTimeStamp - (_this.scaleinfoX.endTimeStamp % 86400000) > _this.instruments[0].quotedate) {
                     _this.scaleinfoX.endTimeStamp -= _this.scaleinfoX.endTimeStamp - _this.scaleinfoX.endTimeStamp % 86400000;
                     _this.scaleinfoX.endTimeStamp += _this.instruments[0].quotedate; // set enddate = last Quotedate
-                    //console.log('asdasd',new Date(_this.scaleinfoX.endTimeStamp));
                 }
 
                 for (var i = 0; i < _this.settings.indicators.length; i++) {
@@ -2201,7 +2245,6 @@ function Milli_Chart(settings) {
                     }
                 }
             }
-            //console.log(new Date(_this.scaleinfoX.startTimeStamp),new Date(_this.scaleinfoX.endTimeStamp),new Date(_this.instruments[0].quotedate));
             setTimeSpanData();
             if (_this.settings.absoluteScaling == true) {
                 for (s = 1; s < _this.instruments.length; s++) _this.instruments[s].factor = 1;
@@ -2209,7 +2252,7 @@ function Milli_Chart(settings) {
             if (_this.instruments.length > 1) {
                 // calc factors
                 var instrumentprice;
-                for (i = 0; i < _this.instruments[0].trades.length; i++) {
+                for (let i = 0; i < _this.instruments[0].trades.length; i++) {
                     if (_this.instruments[0].trades[i].timestamp >= _this.scaleinfoX.startTimeStamp) {
                         instrumentprice = _this.instruments[0].trades[i].price;
                         break;
@@ -2217,7 +2260,7 @@ function Milli_Chart(settings) {
                 }
                 for (s = 1; s < _this.instruments.length; s++) {
                     if (_this.instruments[s].insref != 0) {
-                        for (i = 0; i < _this.instruments[s].trades.length; i++) {
+                        for (let i = 0; i < _this.instruments[s].trades.length; i++) {
                             if (_this.instruments[s].trades[i].timestamp >= _this.scaleinfoX.startTimeStamp) {
                                 _this.instruments[s].factor = instrumentprice / _this.instruments[s].trades[i].price;
                                 break;
@@ -2266,6 +2309,7 @@ function Milli_Chart(settings) {
 
         } else
         if (period == 'm') {
+            if(_this.instruments[0].history.length == 0) return;
             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.endTimeStamp = m_zoom.mousedown.timestamp > m_zoom.mouseup.timestamp ? m_zoom.mousedown.timestamp : m_zoom.mouseup.timestamp;
@@ -2334,6 +2378,7 @@ function Milli_Chart(settings) {
             }
         } else
         if ((period == 'y' || _this.settings.chartlen == 'ytd' || _this.settings.chartlen == 'max')) {
+            if(_this.instruments[0].history.length == 0) return;
             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);
@@ -3636,8 +3681,9 @@ function Milli_Chart(settings) {
         parseData(resp[0], 1);
         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') {
-            return;
+        //if ((period == 'd' && _this.settings.chartlen != 'ytd') && typeof resp[0].trades === 'undefined') {
+        if ((period == 'd' && _this.settings.chartlen != 'ytd') && typeof _this.instruments[0].trades === 'undefined' ) {
+                return;
         }
         if ((period == 'm' || period == 'y' || _this.settings.chartlen == 'ytd' || _this.settings.chartlen == 'max') && typeof resp[0].history === 'undefined') {
             return;
@@ -3651,7 +3697,7 @@ function Milli_Chart(settings) {
             setChartSize();
             m_canvas.addEventListener('mousemove', onMouseMove, false); // disable while loading and enable on drawReady
             m_canvas.addEventListener('mouseout', onMouseOut, false);
-            m_canvas.style.cursor = "crosshair";
+            m_canvas.style.cursor = _this.settings.cursor; //"crosshair";
             m_canvas.onmousedown = (function(evt) {
                 if (evt.which != 1) return; // ignore right and middle
                 var rect = m_canvas.getBoundingClientRect();
@@ -6954,9 +7000,15 @@ function formatDate(date, format, widget) {
     }
     if (format == 'b dd') { // Jan 01
         timeStamp = new Date(date);
-        mon = timeStamp.toDateString().split(' ');
+        if(typeof widget.settings.locale !== 'undefined') {
+            mon = timeStamp.toLocaleString(widget.settings.locale, { month: 'short' }).substring(0, 3);
+        }
+        else  {
+            mon = timeStamp.toDateString().split(' ');
+            mon = mon[1];
+        }
         day = timeStamp.getDate();
-        return mon[1] + ' ' + (day <= 9 ? '0' + day : day);
+        return mon + ' ' + (day <= 9 ? '0' + day : day);
     }
     if (format == 'b dd yyyy') { // Jan 01 2017
         timeStamp = new Date(date);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@millistream/millistream-widgets",
-	"version": "1.0.45",
+	"version": "1.0.46",
 	"description": "Millistream widgets node package",
 	"main": "millistream-widgets.js",
 	"scripts": {