@millistream/millistream-widgets 0.0.16 → 0.0.17

package/millistream-widgets.js

@@ -213,7 +213,6 @@ function Milli_Chart(settings) {
     }
 
     function findFirstWeekDay(date) {
-        // console.log('DATE', date);
         var tmp = new Date(date);
         var count = 0;
         while (tmp.getDay() == 0 || tmp.getDay() == 6) {
@@ -403,9 +402,7 @@ function Milli_Chart(settings) {
             minValue *= 0.9;
         }
         var value = (maxValue - minValue) / num_labels;
-        // console.log(value);
         var x = numDigits(value);
-        // console.log(x);
         value = value / Math.pow(10, x);
         for (var i = 0; i < 3; i++) {
             value = getTickNextTickValue(value);
@@ -413,17 +410,6 @@ function Milli_Chart(settings) {
             if (nt <= num_labels) break;
             value *= 2;
         }
-        /*        var prec = (value < 0.000009 ? 7 :
-                    (value < 0.000009 ? 6 :
-                        (value < 0.00009 ? 5 :
-                            (value < 0.0009 ? 4 :
-                                (value < 0.009 ? 3 :
-                                    (value < 0.09 ? 2 :
-                                        (value < 0.9 ? 1 : 0)))))));
-                m_yAxisPrecision = m_yAxisPrecision < prec ? prec : m_yAxisPrecision;
-        */
-        // console.log('ticksize', value, Math.pow(10, x), x);
-
         return value * Math.pow(10, x);
     }
 
@@ -498,26 +484,45 @@ function Milli_Chart(settings) {
             _this.scaleinfoY.lowValue -= 1;
             _this.scaleinfoY.highValue += 1;
         }
-        console.log(_this.scaleinfoY);
-        // console.log('CALCHHIGHLOW', _this.scaleinfoY);
         return 1;
     }
 
-    function plotLower(valuePerPixel) {
+    function plotLower(valuePerPixel, lineLength) {
         m_ctx.save();
         m_ctx.strokeStyle = m_instrumentCss[0].color;
         m_ctx.lineWidth = parseInt(m_instrumentCss[0].width);
+        m_ctx.beginPath();
+        var width = Math.round(m_chartspaces.lowerChart.width / (m_datapoints.length + 1) / 2);
+        console.log(m_chartspaces.lowerChart.width, m_datapoints.length);
+        if (width < 2) width = 2;
+        else if (width > 20) width = 20;
+        if (width * (m_datapoints.length + 1) >= m_chartspaces.lowerChart.width) console.log('test');
+        m_ctx.lineWidth = width;
+        console.log(width);
         for (var i = 0; i < m_datapoints.length; i++) {
-            m_ctx.moveTo(m_datapoints[i].x + 0.5, m_chartspaces.lowerChart.bottom - 0.5);
+            var x = Math.round(m_datapoints[i].x);
+            if (x - width < m_chartspaces.lowerChart.left) {
+                x += width / 4;
+                m_ctx.lineWidth = width / 2;
+            } else
+            if (x + width > m_chartspaces.lowerChart.right) {
+                x -= width / 4;
+                m_ctx.lineWidth = width / 2;
+            }
+
+            m_ctx.moveTo(x + 0.5, m_chartspaces.lowerChart.bottom);
             var y = Math.round(m_chartspaces.lowerChart.bottom - (m_datapoints[i].quantity * valuePerPixel));
-            m_ctx.lineTo(m_datapoints[i].x + 0.5, y - 0.5);
+            m_ctx.lineTo(x + 0.5, y);
             m_ctx.stroke();
         }
+        m_ctx.closePath();
         m_ctx.restore();
     }
 
     function drawYLegendLower(x, numticks, lineLength, markers) {
-        m_ctx.save();
+        m_ctx.strokeStyle = m_gridHorizontalCss.color;
+        m_ctx.fillStyle = m_yLegendCss.color;
+
         m_ctx.textAlign = 'right';
         var tickSize = getTickValue(_this.scaleinfoY.lowLowerChart, _this.scaleinfoY.highLowerChart, numticks);
         console.log(_this.scaleinfoY.highLowerChart, tickSize, lineLength);
@@ -562,13 +567,11 @@ function Milli_Chart(settings) {
             }
             value += tickSize;
         }
-        m_ctx.restore();
-        plotLower(valuePerPixel);
+        plotLower(valuePerPixel, lineLength);
         return true;
     }
 
     function drawYAxisLower() {
-
         //m_ctx.save();
         m_ctx.strokeStyle = m_gridHorizontalCss.color;
         m_ctx.font = m_yLegendCss['font-weight'] + ' ' + m_yLegendCss['font-size'] + ' ' + m_yLegendCss['font-family'];
@@ -659,7 +662,6 @@ function Milli_Chart(settings) {
             }
             value += si.tickSize;
         }
-        // console.log('drawYLegend out');
         return true;
     }
 
@@ -747,7 +749,6 @@ function Milli_Chart(settings) {
             drawYLegend(_this.scaleinfoY2, x, 'right', _this.settings.gridHorizontalLines2, 2);
         }
         m_ctx.restore();
-        // console.log('draw Y axis out');
     }
 
     function drawXAxisGridlines(p, newday) {
@@ -1005,7 +1006,6 @@ function Milli_Chart(settings) {
                 currentDate = new Date(currentDate.getTime() + 86400000);
                 continue;
             }
-            console.log(x, lastx);
             if (lastx + (getMaxDateWidth() / 2) > (x - getMaxDateWidth())) {
                 draw = false;
             }
@@ -1013,23 +1013,19 @@ function Milli_Chart(settings) {
                 lastx = x;
                 var text = formatDate(currentDate.toISOString().substring(0, 10), _this.settings.dateformat);
                 if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - getMaxDateWidth()) { // not to far right?
-                    //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.bottom + 10);
                 }
-                //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
-                drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
+                drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom });
             }
             currentDate = new Date(currentDate.getTime() + 86400000);
         }
         // vad är detta?
         if (typeof m_chartCss.boxShadow !== 'undefined') {
             var boxshadow = m_chartCss.boxShadow.split(' ');
-            //if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
-            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) }, false);
+            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
 
         } else {
-            //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
-            drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) }, false);
+            drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
         }
         m_ctx.restore();
     }
@@ -1042,7 +1038,6 @@ function Milli_Chart(settings) {
         _this.scaleinfoX.itemwidth = getStringWidth(m_ctx, '88:88') * 2; // kolla rätt format en 8a för varje tecken
         var maxLegendItems = Math.floor(_this.scaleinfoX.lineLength / (_this.scaleinfoX.itemwidth * 2));
 
-        //if (_this.scaleinfoX.days < 1) {
         if (_this.scaleinfoY.type != 'history') {
             var arr = [];
             var tmptime = starttime;
@@ -1094,7 +1089,6 @@ function Milli_Chart(settings) {
                 else factor = 1;
                 _this.scaleinfoX.ticksize = factor * 60000; // time to add to next legenditem
             }
-            //console.log('calcx out',numticks,_this.scaleinfoX.ticksize,factor,totalmilli);  
             return;
         }
     }
@@ -1133,8 +1127,6 @@ function Milli_Chart(settings) {
                 days++;
         }
         return Math.min(days, 5);
-        // Dra av helgen om det är någon där
-        return Math.min(((e - s) / 86400000 + 1), 5);
     }
 
     function drawXAxisTickLowerChart() {
@@ -1336,7 +1328,6 @@ function Milli_Chart(settings) {
             }
             if (lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
                 //draw = false;
-                //console.log('false');
             }
             var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
             if (draw) {
@@ -1428,7 +1419,6 @@ function Milli_Chart(settings) {
         }
         var obj = m_dataPoints.map.get(m_dataPoints.arr[i]);
         if (obj == null) {
-            //console.log('not found', m_dataPoints, obj);
             return;
         }
         // datetime
@@ -1490,7 +1480,6 @@ function Milli_Chart(settings) {
                     //posy = parseFloat(highy) + 20;
                 }
                 m_toolTip.instrDiv[k].innerHTML = formatNiceNumber(obj.instruments[k].price, _this.settings.thousandseparator, _this.settings.decimalseparator, obj.instruments[k].price.countDecimals());
-                //console.log()
                 if (typeof obj.instruments[k].diff !== 'undefined') m_toolTip.instrDiv[k].innerHTML += ', diff:' + formatNiceNumber(obj.instruments[k].diff, ' ', ',', m_y2settings.decimals);
                 m_toolTip.instrDiv[k].setAttribute('class', 'millistream-chart-tooltip'); // set class so we can measure it might change below depending on position
                 m_toolTip.instrDiv[k].style.top = posy + 'px'; // TODO: räkna ut 7 px beroende på hur hoverpilen ser ut från höjden på diven depending on position
@@ -1630,15 +1619,12 @@ function Milli_Chart(settings) {
         var count = 0;
         for (var i = 0; i < data.length; i++) {
             if (data[i].timestamp >= _this.scaleinfoX.startTimeStamp && data[i].timestamp <= _this.scaleinfoX.endTimeStamp) {
-                //console.log(new Date(data[i].timestamp), new Date(_this.scaleinfoX.startTimeStamp), new Date(_this.scaleinfoX.endTimeStamp), data[i]);
                 if (count++ > 0) {
                     return true;
                 }
             }
         }
         console.log('NO data to draw on');
-        // var y = (m_canvas.height - parseInt(m_chartCss['margin-bottom'])) / 2 + m_chartspaces.chart.top;
-        // var x = (m_canvas.width - parseInt(m_chartCss['margin-bottom'])) / 2 + m_chartspaces.chart.left;
         var y = m_chartspaces.chart.bottom - m_chartspaces.chart.top / 2 + m_chartspaces.chart.top;
         var x = m_chartspaces.chart.right - m_chartspaces.chart.left / 2 + m_chartspaces.chart.left;
         m_ctx.save();
@@ -1654,20 +1640,18 @@ function Milli_Chart(settings) {
     }
 
     function calcChartSpaces() {
-        m_chartspaces.chart.height = m_canvas.height * (m_chartspaces.chart.percent / 100);
+        m_chartspaces.chart.height = Math.round(m_canvas.height * (m_chartspaces.chart.percent / 100));
         m_chartspaces.chart.top = parseInt(m_chartCss['margin-top']);
         m_chartspaces.chart.left = parseInt(m_chartCss['margin-left']);
         m_chartspaces.chart.right = m_canvas.width - parseInt(m_chartCss['margin-right']);
         m_chartspaces.chart.bottom = m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']);
         m_chartspaces.chart.width = m_canvas.width;
         m_chartspaces.lowerChart.height = m_canvas.height * (m_chartspaces.lowerChart.percent / 100);
-        m_chartspaces.lowerChart.top = m_chartspaces.chart.bottom + parseInt(m_chartCss['margin-bottom']) + m_chartspaces.chart.top;
+        m_chartspaces.lowerChart.top = Math.round(m_chartspaces.chart.bottom + parseInt(m_chartCss['margin-bottom']) + m_chartspaces.chart.top);
         m_chartspaces.lowerChart.left = m_chartspaces.chart.left;
         m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
-        //m_chartspaces.lowerChart.bottom =m_chartspaces.lowerChart.top +m_chartspaces.lowerChart.height - parseInt(m_chartCss['margin-bottom']);
         m_chartspaces.lowerChart.bottom = m_canvas.height - parseInt(m_chartCss['margin-bottom']);
         m_chartspaces.lowerChart.width = m_canvas.width;
-        console.log(m_chartspaces);
     }
 
     _this.drawChart = function() {
@@ -1722,7 +1706,6 @@ function Milli_Chart(settings) {
                     _this.scaleinfoX.endTimeStamp = new Date(_this.scaleinfoX.endTimeStamp.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z').getTime();
                 else if (len == 1) {
                     // check if startdate is not today (due to exchange is closed f ex DJ)
-                    //console.log(new Date(_this.scaleinfoX.endTimeStamp), new Date(_this.scaleinfoX.startTimeStamp));
                     if (_this.scaleinfoX.startTimeStamp % 86400000 != new Date().getTime() % 86400) {
                         _this.scaleinfoX.endTimeStamp = new Date(new Date(_this.scaleinfoX.startTimeStamp).toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z').getTime();
                     } else
@@ -1740,8 +1723,6 @@ function Milli_Chart(settings) {
                     _this.scaleinfoX.endTimeStamp -= _this.scaleinfoX.endTimeStamp - _this.scaleinfoX.endTimeStamp % 86400000;
                     _this.scaleinfoX.endTimeStamp += _this.instruments[0].quotedate; // set enddate = last Quotedate
                 }
-                //console.log('Starttimestamp',new Date(_this.scaleinfoX.startTimeStamp));
-                //console.log('endtimestammp',new Date(_this.scaleinfoX.endTimeStamp), 'quotedate',new Date(_this.instruments[0].quotedate));
             }
             setTimeSpanData();
             _this.scaleinfoY.type = 'trades';
@@ -1795,7 +1776,6 @@ function Milli_Chart(settings) {
 
             drawYAxis();
             drawXAxisMonth(_this.scaleinfoX.startTimeStamp, _this.scaleinfoX.endTimeStamp);
-            //console.log(_this.scaleinfoX.startTimeStamp, _this.scaleinfoX.endTimeStamp);
             if (false == checkChartData(_this.instruments[0].history)) return;
 
             for (i = 0; i < _this.instruments.length; i++) {
@@ -1839,7 +1819,6 @@ function Milli_Chart(settings) {
             for (i = 0; i < _this.instruments.length; i++)
                 if (_this.instruments[i].insref != 0)
                     plotData(_this.instruments[i].history, i);
-                //plotChart(_this.instruments[0].history, null);
 
         }
         drawBoxShadow(m_chartspaces.chart);
@@ -1852,7 +1831,6 @@ function Milli_Chart(settings) {
     };
 
     function drawBoxShadow(space) {
-        console.log(space);
         if (typeof m_chartCss.boxShadow === 'undefined') return;
         var boxShadow = m_chartCss.boxShadow;
         if (boxShadow.indexOf(')') != -1) {
@@ -1860,25 +1838,22 @@ function Milli_Chart(settings) {
         }
         var boxshadow = boxShadow.split(' ');
         m_ctx.save();
+        m_ctx.beginPath();
         if (parseInt(boxshadow[0]) > 0) {
-            m_ctx.beginPath();
             m_ctx.strokeStyle = m_chartCss['border-top-color'];
             m_ctx.lineWidth = parseInt(boxshadow[1]);
             m_ctx.moveTo(space.left, space.top);
             m_ctx.lineTo(space.right, space.top);
             m_ctx.stroke();
-            m_ctx.closePath();
         }
         if (parseInt(boxshadow[1]) > 0) {
-            m_ctx.beginPath();
             m_ctx.strokeStyle = m_chartCss['border-right-color'];
             m_ctx.lineWidth = parseInt(boxshadow[1]);
             m_ctx.moveTo(space.right, space.top + 0.5);
-            //m_ctx.lineTo(spaces.chart.right, spaces.chart.height - parseInt(m_chartCss['margin-bottom']));
             m_ctx.lineTo(space.right, space.bottom);
             m_ctx.stroke();
-            m_ctx.closePath();
         }
+        m_ctx.closePath();
         m_ctx.restore();
     }
 

package/package.json

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