@millistream/millistream-widgets 0.0.15 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/millistream-widgets.js +447 -760
  2. package/package.json +1 -1
@@ -7,10 +7,6 @@ function Milli_Chart(settings) {
7
7
  _this.scaleinfoY = {};
8
8
  _this.scaleinfoY2 = {};
9
9
  _this.instruments = [];
10
- var m_modules = {
11
- quantity: null
12
- };
13
-
14
10
  _this.settings = {
15
11
  autodraw: true,
16
12
  instrument: null,
@@ -46,6 +42,16 @@ function Milli_Chart(settings) {
46
42
  yearLabelsPos: 'bottom'
47
43
  };
48
44
  _this.unsubscriptions = {};
45
+ var m_chartspaces = {
46
+ chart: {
47
+ percent: 100,
48
+ height: 0
49
+ },
50
+ lowerChart: {
51
+ percent: 0,
52
+ height: 0
53
+ }
54
+ };
49
55
  var m_dummyDiv = null; // dummy div For chartclasses
50
56
  var m_requestid = 0;
51
57
  var m_canvas = null;
@@ -101,6 +107,7 @@ function Milli_Chart(settings) {
101
107
  div: null,
102
108
  isZooming: false
103
109
  };
110
+ var m_lastDrawnInstrument = -1;
104
111
  var m_months = ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'];
105
112
  var m_xLegendCss = {
106
113
  'font-size': '10px',
@@ -206,7 +213,6 @@ function Milli_Chart(settings) {
206
213
  }
207
214
 
208
215
  function findFirstWeekDay(date) {
209
- // console.log('DATE', date);
210
216
  var tmp = new Date(date);
211
217
  var count = 0;
212
218
  while (tmp.getDay() == 0 || tmp.getDay() == 6) {
@@ -396,9 +402,7 @@ function Milli_Chart(settings) {
396
402
  minValue *= 0.9;
397
403
  }
398
404
  var value = (maxValue - minValue) / num_labels;
399
- // console.log(value);
400
405
  var x = numDigits(value);
401
- // console.log(x);
402
406
  value = value / Math.pow(10, x);
403
407
  for (var i = 0; i < 3; i++) {
404
408
  value = getTickNextTickValue(value);
@@ -406,26 +410,16 @@ function Milli_Chart(settings) {
406
410
  if (nt <= num_labels) break;
407
411
  value *= 2;
408
412
  }
409
- /* var prec = (value < 0.000009 ? 7 :
410
- (value < 0.000009 ? 6 :
411
- (value < 0.00009 ? 5 :
412
- (value < 0.0009 ? 4 :
413
- (value < 0.009 ? 3 :
414
- (value < 0.09 ? 2 :
415
- (value < 0.9 ? 1 : 0)))))));
416
- m_yAxisPrecision = m_yAxisPrecision < prec ? prec : m_yAxisPrecision;
417
- */
418
- // console.log('ticksize', value, Math.pow(10, x), x);
419
-
420
413
  return value * Math.pow(10, x);
421
414
  }
422
415
 
423
416
  function calcHighLow() {
424
- var datalen = 0;
425
417
  _this.scaleinfoY.lowValue = null;
426
418
  _this.scaleinfoY.highValue = null;
427
419
  _this.scaleinfoY2.lowValue = null;
428
420
  _this.scaleinfoY2.highValue = null;
421
+ _this.scaleinfoY.lowLowerChart = null;
422
+ _this.scaleinfoY.highLowerChart = null;
429
423
  var firstvalue = null;
430
424
 
431
425
  for (var s = 0; s < _this.instruments.length; s++) {
@@ -434,34 +428,26 @@ function Milli_Chart(settings) {
434
428
  if (_this.scaleinfoY.type != 'history') {
435
429
  if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d' && !m_zoom.mousedown.timestamp) {
436
430
  firstvalue = parseFloat(_this.instruments[s].closeprice1d);
437
- //console.log('closeprice1d', firstvalue);
438
431
  }
439
432
  }
440
- //console.log(_this.scaleinfoY.type, data, firstvalue);
441
433
  for (var i = 0; i < data.length; i++) {
442
434
  // only calc on visible data
443
435
  var price = data[i][_this.settings.graphvalue] * _this.instruments[s].factor;
436
+ var quantity = 0;
437
+ if (data[i].quantity !== 'undefined')
438
+ quantity = data[i].quantity;
444
439
  if (data[i].timestamp < _this.scaleinfoX.startTimeStamp) {
445
- // if (_this.settings.chartlen != '1d' && _this.settings.chartlen != '0d') firstvalue = data[i][_this.settings.graphvalue] * _this.instruments[s].factor;
446
- // continue; // only calc high low on data we are showing
447
440
  continue;
448
441
  }
449
442
  if (data[i].timestamp > _this.scaleinfoX.endTimeStamp) {
450
- break; // continue?
443
+ break;
451
444
  }
452
445
 
453
446
  if (_this.scaleinfoY.type != 'history' && (data[i].timestamp % 86400000 < _this.instruments[0].opentimestamp || data[i].timestamp % 86400000 > _this.instruments[0].closetimestamp)) {
454
447
  // stämmer detta kan det bli överlapp vid sommartid/vintertid?
455
448
  continue;
456
449
  }
457
- if (data[i].timestamp > _this.scaleinfoX.endTimeStamp) break;
458
450
 
459
- if (data[i].timestamp < _this.scaleinfoX.startTimeStamp) { // hit kommer vi ju aldrig
460
- //if (_this.settings.chartlen != '1d' && _this.settings.chartlen != '0d') firstvalue = price
461
- //console.log(new Date(data[i].timestamp),price,firstvalue);
462
- continue; // only calc high low on data we are showing
463
- }
464
- datalen++;
465
451
  if (firstvalue == null) {
466
452
  if (_this.scaleinfoY.type == 'history')
467
453
  firstvalue = price;
@@ -478,6 +464,8 @@ function Milli_Chart(settings) {
478
464
  data[i].diff = diff;
479
465
  if (_this.scaleinfoY2.lowValue == null || _this.scaleinfoY2.lowValue > diff) _this.scaleinfoY2.lowValue = diff;
480
466
  if (_this.scaleinfoY2.highValue == null || _this.scaleinfoY2.highValue < diff) _this.scaleinfoY2.highValue = diff;
467
+ if (_this.scaleinfoY.lowLowerChart == null || _this.scaleinfoY.lowLowerChart > quantity) _this.scaleinfoY.lowLowerChart = quantity;
468
+ if (_this.scaleinfoY.highLowerChart == null || _this.scaleinfoY.highLowerChart < quantity) _this.scaleinfoY.highLowerChart = quantity;
481
469
  }
482
470
  if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') { // if closeprice is used calch high/low on it
483
471
  var cp = parseFloat(_this.instruments[s].closeprice1d);
@@ -496,18 +484,112 @@ function Milli_Chart(settings) {
496
484
  _this.scaleinfoY.lowValue -= 1;
497
485
  _this.scaleinfoY.highValue += 1;
498
486
  }
499
- // console.log(_this.scaleinfoY);
500
- // console.log('CALCHHIGHLOW', _this.scaleinfoY);
501
487
  return 1;
502
488
  }
503
489
 
490
+ function plotLower(valuePerPixel, lineLength) {
491
+ m_ctx.save();
492
+ m_ctx.strokeStyle = m_instrumentCss[0].color;
493
+ m_ctx.lineWidth = parseInt(m_instrumentCss[0].width);
494
+ m_ctx.beginPath();
495
+ var width = Math.round(m_chartspaces.lowerChart.width / (m_datapoints.length + 1) / 2);
496
+ if (width < 2) width = 2;
497
+ else if (width > 20) width = 20;
498
+ m_ctx.lineWidth = width;
499
+ for (var i = 0; i < m_datapoints.length; i++) {
500
+ var x = Math.round(m_datapoints[i].x);
501
+ if (x - width < m_chartspaces.lowerChart.left) {
502
+ x += width / 4;
503
+ m_ctx.lineWidth = width / 2;
504
+ } else
505
+ if (x + width > m_chartspaces.lowerChart.right) {
506
+ x -= width / 4;
507
+ m_ctx.lineWidth = width / 2;
508
+ }
509
+
510
+ m_ctx.moveTo(x + 0.5, m_chartspaces.lowerChart.bottom);
511
+ var y = Math.round(m_chartspaces.lowerChart.bottom - (m_datapoints[i].quantity * valuePerPixel));
512
+ m_ctx.lineTo(x + 0.5, y);
513
+ m_ctx.stroke();
514
+ }
515
+ m_ctx.closePath();
516
+ m_ctx.restore();
517
+ }
518
+
519
+ function drawYLegendLower(x, numticks, lineLength, markers) {
520
+ m_ctx.strokeStyle = m_gridHorizontalCss.color;
521
+ m_ctx.fillStyle = m_yLegendCss.color;
522
+
523
+ m_ctx.textAlign = 'right';
524
+ var tickSize = getTickValue(_this.scaleinfoY.lowLowerChart, _this.scaleinfoY.highLowerChart, numticks);
525
+ var maxValue = _this.scaleinfoY.highLowerChart == 0 ? 100 : _this.scaleinfoY.highLowerChart + (tickSize * 0.2);
526
+ var valuePerPixel = lineLength / maxValue;
527
+ if (isNaN(valuePerPixel) || !isFinite(valuePerPixel)) {
528
+ console.log('cant draw valuePerPixel' + valuePerPixel);
529
+ return false;
530
+ }
531
+ var value = 0;
532
+ for (;;) {
533
+ var y = Math.round(m_chartspaces.lowerChart.bottom - (value * valuePerPixel));
534
+
535
+ if (y <= m_chartspaces.lowerChart.top) break;
536
+ if (y <= m_chartspaces.lowerChart.bottom) {
537
+ if (_this.settings.gridHorizontalLines == true) {
538
+ m_ctx.save();
539
+ if (_this.settings.gridHorizontalLinesStyle == 'dash') {
540
+ m_ctx.setLineDash([3, 3]);
541
+ }
542
+ m_ctx.moveTo(m_chartspaces.lowerChart.left, y + 0.5);
543
+ m_ctx.lineTo(m_chartspaces.lowerChart.right, y + 0.5);
544
+ m_ctx.stroke();
545
+ m_ctx.restore();
546
+ } else
547
+ if (_this.settings.drawyaxis == true && markers == true) { // draw legenditem markers for price
548
+ m_ctx.moveTo(m_chartspaces.lowerChart.left, y + 0.5);
549
+ m_ctx.lineTo(m_chartspaces.lowerChart.left + 3, y + 0.5);
550
+ m_ctx.stroke();
551
+ }
552
+
553
+ if (markers == true && _this.settings.drawyaxis == true) {
554
+ var label = formatLargeNumber(value, 0, _this);
555
+ var textpos = x - 5;
556
+ if (m_yLegendCss['vertical-align'] == 'top') {
557
+ if (y - (getFontSize(m_yLegendCss)) > 0) // dont draw if cropped
558
+ m_ctx.fillText(label, textpos, y - ((getFontSize(m_yLegendCss) + 2)));
559
+ } else
560
+ m_ctx.fillText(label, textpos, y - (getFontSize(m_yLegendCss) / 2));
561
+ }
562
+ }
563
+ value += tickSize;
564
+ }
565
+ plotLower(valuePerPixel, lineLength);
566
+ return true;
567
+ }
568
+
569
+ function drawYAxisLower() {
570
+ //m_ctx.save();
571
+ m_ctx.strokeStyle = m_gridHorizontalCss.color;
572
+ m_ctx.font = m_yLegendCss['font-weight'] + ' ' + m_yLegendCss['font-size'] + ' ' + m_yLegendCss['font-family'];
573
+ m_ctx.fillStyle = m_yLegendCss.color;
574
+ var lineLen = m_chartspaces.lowerChart.bottom - m_chartspaces.lowerChart.top;
575
+ var numticks = lineLen / (getFontSize(m_yLegendCss) * 2);
576
+ if (numticks > 8) numticks = 8; // limit to 8 items on Y legend ( this is not an absolut count, since we calculate nice legend numbers
577
+
578
+ m_ctx.moveTo(m_chartspaces.lowerChart.left + 0.5, m_chartspaces.lowerChart.top);
579
+ m_ctx.lineTo(m_chartspaces.lowerChart.left + 0.5, m_chartspaces.lowerChart.bottom);
580
+ m_ctx.stroke();
581
+ var x = m_chartspaces.lowerChart.left - 3;
582
+
583
+ drawYLegendLower(x, numticks, lineLen, true);
584
+ //m_ctx.restore();
585
+
586
+ }
587
+
504
588
  function drawYLegend(si, x, side, gridHorizontalLines, number) {
505
589
  var value;
506
- if (si.highValue == si.lowValue) console.log(si.tickSize);
507
590
  si.maxValue = si.highValue + (si.tickSize * 0.2);
508
591
  si.minValue = si.lowValue - (si.tickSize * 0.2);
509
592
  m_ctx.font = m_yLegendCss['font-weight'] + ' ' + m_yLegendCss['font-size'] + ' ' + m_yLegendCss['font-family'];
510
- // console.log('drawYLegend in 2,', si.highValue, si.lowValue, si.tickSize);
511
593
  if (si.highValue == si.lowValue) { // only have one value so set values for 1 line only
512
594
  si.maxValue = si.maxValue + si.tickSize;
513
595
  si.minValue = si.minValue - si.tickSize;
@@ -525,25 +607,25 @@ function Milli_Chart(settings) {
525
607
  return false;
526
608
  }
527
609
  for (;;) {
528
- var y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - ((value - si.minValue) * si.valuePerPixel));
529
- if (y <= parseInt(m_chartCss['margin-top'])) break;
530
- if (y <= m_canvas.height - parseInt(m_chartCss['margin-bottom'])) {
610
+ var y = Math.round(m_chartspaces.chart.bottom - ((value - si.minValue) * si.valuePerPixel));
611
+ if (y <= m_chartspaces.chart.top) break;
612
+ if (y <= m_chartspaces.chart.bottom) {
531
613
  if (gridHorizontalLines == true) {
532
614
  m_ctx.save();
533
615
  if (_this.settings.gridHorizontalLinesStyle == 'dash') {
534
616
  m_ctx.setLineDash([3, 3]);
535
617
  }
536
618
  m_ctx.beginPath();
537
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), y + 0.5);
538
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), y + 0.5);
619
+ m_ctx.moveTo(m_chartspaces.chart.left, y + 0.5);
620
+ m_ctx.lineTo(m_chartspaces.chart.right, y + 0.5);
539
621
  m_ctx.stroke();
540
622
  m_ctx.closePath();
541
623
  m_ctx.restore();
542
624
  } else
543
625
  if (_this.settings.drawyaxis == true && number == 1) { // draw legenditem markers for price
544
626
  m_ctx.beginPath();
545
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), y + 0.5);
546
- m_ctx.lineTo(parseInt(m_chartCss['margin-left']) + 3, y + 0.5);
627
+ m_ctx.moveTo(m_chartspaces.chart.left, y + 0.5);
628
+ m_ctx.lineTo(m_chartspaces.chart.left + 3, y + 0.5);
547
629
  m_ctx.stroke();
548
630
  m_ctx.closePath();
549
631
  } else
@@ -572,12 +654,10 @@ function Milli_Chart(settings) {
572
654
  }
573
655
  value += si.tickSize;
574
656
  }
575
- // console.log('drawYLegend out');
576
657
  return true;
577
658
  }
578
659
 
579
660
  function drawYAxis() {
580
- // console.log(m_chartCss['margin-left']);
581
661
  m_ctx.save();
582
662
  m_ctx.strokeStyle = m_gridHorizontalCss.color;
583
663
  m_ctx.font = m_yLegendCss['font-weight'] + ' ' + m_yLegendCss['font-size'] + ' ' + m_yLegendCss['font-family'];
@@ -585,10 +665,9 @@ function Milli_Chart(settings) {
585
665
  //if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') firstvalue = _this.instruments[0].closeprice1d;
586
666
 
587
667
  if (0 == calcHighLow()) {
588
- // console.log('no data to draw on');
589
668
  return;
590
669
  }
591
- _this.scaleinfoY.lineLength = m_canvas.height - parseInt(m_chartCss['margin-top']) - parseInt(m_chartCss['margin-bottom']);
670
+ _this.scaleinfoY.lineLength = m_chartspaces.chart.bottom - m_chartspaces.chart.top;
592
671
  _this.scaleinfoY2.lineLength = _this.scaleinfoY.lineLength;
593
672
  var numticks = _this.scaleinfoY.lineLength / (getFontSize(m_yLegendCss) * 4);
594
673
  if (numticks > 8) numticks = 8; // limit to 8 items on Y legend ( this is not an absolut count, since we calculate nice legend numbers
@@ -597,12 +676,13 @@ function Milli_Chart(settings) {
597
676
  _this.scaleinfoY.decimals = _this.scaleinfoY.decimals > 4 ? 4 : _this.scaleinfoY.decimals;
598
677
  _this.scaleinfoY.decimals = _this.scaleinfoY.decimals < 2 ? 2 : _this.scaleinfoY.decimals;
599
678
  var label = formatNiceNumber(_this.scaleinfoY.highValue, _this.settings.thousandseparator, _this.settings.decimalseparator, _this.scaleinfoY.decimals);
600
- // console.log('SCALE', _this.scaleinfoY);
601
679
  if (m_yLegendCss.float != 'right') {
602
- m_chartCss['margin-left'] = 10 + Math.round(m_ctx.measureText(label).width) + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
680
+ m_chartspaces.chart.left = 10 + Math.round(m_ctx.measureText(label).width); // + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
681
+ m_chartspaces.lowerChart.left = m_chartspaces.chart.left;
603
682
  } else {
604
683
  if (m_yLegendCss['text-align'] == 'right') {
605
- m_chartCss['margin-right'] = 10 + Math.round(m_ctx.measureText(label).width) + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
684
+ m_chartspaces.chart.right = m_canvas.width - (10 + Math.round(m_ctx.measureText(label).width)); // + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
685
+ m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
606
686
  }
607
687
  // TODO: kolla setting om den skall vara "i diagrammet"
608
688
  }
@@ -614,61 +694,53 @@ function Milli_Chart(settings) {
614
694
  _this.scaleinfoY2.decimals = _this.scaleinfoY2.decimals < 0 ? 0 : _this.scaleinfoY2.decimals;
615
695
 
616
696
  label = formatNiceNumber(_this.scaleinfoY2.highValue, _this.settings.thousandseparator, _this.settings.decimalseparator, _this.scaleinfoY2.decimals) + ' %';
617
- if (m_y2LegendCss.float != 'right')
618
- m_chartCss['margin-left'] = 10 + Math.round(m_ctx.measureText(label).width) + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
619
- else {
697
+ if (m_y2LegendCss.float != 'right') {
698
+ m_chartspaces.chart.left = 10 + Math.round(m_ctx.measureText(label).width); // + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
699
+ m_chartspaces.lowerChart.left = m_chartspaces.chart.left
700
+ } else {
620
701
  // kolla setting om den skall vara "i diagrammet"
621
- m_chartCss['margin-right'] = 10 + Math.round(m_ctx.measureText(label).width) + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
702
+ m_chartspaces.chart.right = m_canvas.width - (10 + Math.round(m_ctx.measureText(label).width)); // + 'px'; // räkna fram hur hur mycket plats Y värdena tar och sätt margin till det, skall vi göra så?
703
+ m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
622
704
  }
623
705
  }
624
- // console.log(m_chartCss['margin-left']);
625
706
  if (m_yLegendCss.float != 'right' && _this.settings.drawyaxis) {
626
707
  m_ctx.save();
627
708
  m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
628
- if (getStringWidth(m_ctx, _this.settings.dateformat) / 2 + 5 > parseInt(m_chartCss['margin-left'])) m_chartCss['margin-left'] = getStringWidth(m_ctx, _this.settings.dateformat) / 2 + 5;
709
+ if (getStringWidth(m_ctx, _this.settings.dateformat) / 2 + 5 > m_chartspaces.chart.left) m_chartspaces.chart.left = getStringWidth(m_ctx, _this.settings.dateformat) / 2 + 5;
629
710
  m_ctx.restore();
630
711
  }
631
- // console.log('drawYXis 1');
632
-
633
- //if (_this.settings.drawyaxis == true) { // draw left y legend line
634
712
  m_ctx.beginPath();
635
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']) + 0.5, parseInt(m_chartCss['margin-top']));
636
- m_ctx.lineTo(parseInt(m_chartCss['margin-left']) + 0.5, m_canvas.height - parseInt(m_chartCss['margin-bottom']));
713
+ m_ctx.moveTo(m_chartspaces.chart.left + 0.5, m_chartspaces.chart.top);
714
+ m_ctx.lineTo(m_chartspaces.chart.left + 0.5, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']));
637
715
  m_ctx.stroke();
638
716
  m_ctx.closePath();
639
- //}
640
- // console.log('drawYXis 2');
717
+
641
718
  var x;
642
719
  if (m_yLegendCss.float == 'right') {
643
720
  if (m_yLegendCss['text-align'] == 'right')
644
- x = m_canvas.width - parseInt(m_chartCss['margin-right']);
721
+ x = m_chartspaces.chart.right;
645
722
  else
646
- x = m_canvas.width - parseInt(m_chartCss['margin-right']) + 3;
723
+ x = m_chartspaces.chart.right + 3;
647
724
  } else {
648
- x = parseInt(m_chartCss['margin-left']) - 3;
725
+ x = m_chartspaces.chart.left - 3;
649
726
  }
650
- // console.log('drawYXis 3');
651
727
 
652
728
  m_ctx.textAlign = 'right';
653
- //if (_this.settings.drawyaxis) {
654
729
  if (m_yLegendCss['text-align'] == 'right') {
655
730
  m_ctx.textAlign = 'left';
656
731
  drawYLegend(_this.scaleinfoY, x, 'right', _this.settings.gridHorizontalLines, 1);
657
732
  } else
658
733
  drawYLegend(_this.scaleinfoY, x, 'left', _this.settings.gridHorizontalLines, 1);
659
- //}
660
- // console.log('drawYXis 4');
661
734
 
662
735
  if (_this.settings.drawy2axis) {
663
736
  x = 0;
664
737
  if (m_y2LegendCss.float == 'right') {
665
- x = m_canvas.width - parseInt(m_chartCss['margin-right']) - 3;
738
+ x = m_chartspaces.chart.right - 3;
666
739
  m_ctx.textAlign = 'left';
667
740
  }
668
741
  drawYLegend(_this.scaleinfoY2, x, 'right', _this.settings.gridHorizontalLines2, 2);
669
742
  }
670
743
  m_ctx.restore();
671
- // console.log('draw Y axis out');
672
744
  }
673
745
 
674
746
  function drawXAxisGridlines(p, newday) {
@@ -676,7 +748,7 @@ function Milli_Chart(settings) {
676
748
  m_ctx.save();
677
749
  m_ctx.strokeStyle = m_gridHorizontalCss.color;
678
750
  if (_this.settings.gridVerticalLines > 0) {
679
- if (_this.settings.drawy2axis == false || p.x != parseInt(m_chartCss['margin-left'])) {
751
+ if (_this.settings.drawy2axis == false || p.x != m_chartspaces.chart.left) {
680
752
  if (_this.settings.gridHorizontalLinesStyle == 'dash') {
681
753
  m_ctx.setLineDash([3, 3]);
682
754
  }
@@ -684,7 +756,7 @@ function Milli_Chart(settings) {
684
756
 
685
757
  m_ctx.beginPath();
686
758
  m_ctx.moveTo(p.x + 0.5, p.y + 3);
687
- m_ctx.lineTo(p.x + 0.5, parseInt(m_chartCss['margin-top']));
759
+ m_ctx.lineTo(p.x + 0.5, m_chartspaces.chart.top);
688
760
  m_ctx.stroke();
689
761
  m_ctx.closePath();
690
762
  } else if (_this.settings.drawxaxis == 0) {
@@ -710,7 +782,7 @@ function Milli_Chart(settings) {
710
782
  _this.scaleinfoX.startDate = new Date(starttime);
711
783
  _this.scaleinfoX.endDate = new Date(endtime);
712
784
  _this.scaleinfoX.days = getNumberOfDays(starttime, endtime);
713
- _this.scaleinfoX.lineLength = m_canvas.width - parseInt(m_chartCss['margin-right']) - parseInt(m_chartCss['margin-left']);
785
+ _this.scaleinfoX.lineLength = m_chartspaces.chart.right - m_chartspaces.chart.left;
714
786
  var datesize = new Date('2888-12-28'); // bredaste datum jag kan komma på
715
787
  //_this.scaleinfoX.itemwidth = getStringWidth(m_ctx, '88:88') * 2; // kolla rätt format en 8a för varje tecken
716
788
  _this.scaleinfoX.itemwidth = getStringWidth(m_ctx, formatDate(datesize, _this.settings.dateformat)) * 2; // kolla rätt format en 8a för varje tecken
@@ -749,15 +821,13 @@ function Milli_Chart(settings) {
749
821
  if (xx >= x) return timestamp;
750
822
  timestamp += 86400000;
751
823
  }
752
- //var timestamp = (x - Math.round(parseInt(m_chartCss['margin-left'] + offset)) * _this.scaleinfoX.timePerPixel) - _this.scaleinfoX.startDate.getTime();
753
-
754
824
  return 0;
755
825
  }
756
826
 
757
827
  function getXPosition(timestamp) {
758
828
  var offset = (timestamp.getTime() - _this.scaleinfoX.startDate.getTime()) / (86400000 * 7); // veckor
759
829
  offset = offset * 86400000 * 2 / _this.scaleinfoX.timePerPixel;
760
- return Math.round(parseInt(m_chartCss['margin-left']) + ((timestamp.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
830
+ return Math.round(m_chartspaces.chart.left + ((timestamp.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
761
831
  }
762
832
 
763
833
  function drawXAxisYears(starttime, endtime) {
@@ -770,8 +840,8 @@ function Milli_Chart(settings) {
770
840
  calcXScale(starttime, endtime);
771
841
  if (_this.settings.drawxaxis != 0) {
772
842
  m_ctx.beginPath();
773
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
774
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
843
+ m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
844
+ m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
775
845
  m_ctx.stroke();
776
846
  m_ctx.closePath();
777
847
  }
@@ -789,20 +859,23 @@ function Milli_Chart(settings) {
789
859
  }
790
860
  }
791
861
  if (draw) {
792
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
862
+ //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
863
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
793
864
  text = year;
794
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - m_ctx.measureText(text).width) { // not to far right?
865
+ if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - m_ctx.measureText(text).width) { // not to far right?
795
866
  if (_this.settings.yearLabelsPos == 'top') {
796
867
  m_ctx.save(); // flip and write new years on top
797
868
  var fontMetrix = m_ctx.measureText(text);
798
869
  x = x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
799
- var y = parseInt(m_chartCss['margin-top']); // + m_ctx.measureText(datum).width;
870
+ var y = m_chartspaces.chart.top; // + m_ctx.measureText(datum).width;
800
871
  m_ctx.translate(x, y);
801
872
  m_ctx.rotate(90 * Math.PI / 180);
802
873
  m_ctx.fillText(text, 0, 0);
803
874
  m_ctx.restore();
804
- } else
805
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
875
+ } else {
876
+ //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
877
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
878
+ }
806
879
  }
807
880
  numItems++;
808
881
  legendItems.push({ text: year.toString(), timestamp: new Date(year + '-01-01T00:00:00Z'), 'x': x });
@@ -825,10 +898,12 @@ function Milli_Chart(settings) {
825
898
  }
826
899
  }
827
900
  if (draw) {
828
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
901
+ //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
902
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
829
903
  text = formatDate(year.getFullYear() + '-07-01', _this.settings.dateformat);
830
904
  // ingen if som på year???
831
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
905
+ //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
906
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
832
907
  numItems++;
833
908
  legendItems.push({ 'text': text, timestamp: new Date(year + '-07-01T00:00:00Z'), 'x': x });
834
909
  }
@@ -853,9 +928,11 @@ function Milli_Chart(settings) {
853
928
  }
854
929
  if (dontPrint) break;
855
930
  if (draw) {
856
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
931
+ //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
932
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
857
933
  text = formatDate(year.getFullYear() + '-' + (year.getMonth() + 1) + '-01', _this.settings.dateformat);
858
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
934
+ //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
935
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.height - parseInt(m_chartCss['margin-bottom']) + 10);
859
936
  }
860
937
  legendItems.push({ 'text': text, timestamp: new Date(year + '-04-01T00:00:00Z'), 'x': x });
861
938
  year = new Date((year.getFullYear() + 1) + '-04-01T00:00:00Z');
@@ -874,9 +951,11 @@ function Milli_Chart(settings) {
874
951
  }
875
952
  }
876
953
  if (draw) {
877
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
954
+ //drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
955
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) });
878
956
  text = formatDate(year.getFullYear() + '-' + (year.getMonth() + 1) + '-01', _this.settings.dateformat);
879
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
957
+ //m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
958
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 10);
880
959
  }
881
960
  legendItems.push({ 'text': text, timestamp: new Date(year + '-10-01T00:00:00Z'), 'x': x });
882
961
  year = new Date((year.getFullYear() + 1) + '-10-01T00:00:00Z');
@@ -897,8 +976,8 @@ function Milli_Chart(settings) {
897
976
  calcXScale(starttime, endtime);
898
977
  if (_this.settings.drawxaxis != 0) { // draw line
899
978
  m_ctx.beginPath();
900
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
901
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
979
+ m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
980
+ m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
902
981
  m_ctx.stroke();
903
982
  m_ctx.closePath();
904
983
  }
@@ -914,122 +993,43 @@ function Milli_Chart(settings) {
914
993
  currentDate = new Date(currentDate.getTime() + 86400000);
915
994
  offset += 86400000 / _this.scaleinfoX.timePerPixel;
916
995
  }
917
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
918
- if (lastx == 0 && parseInt(m_chartCss['margin-left']) > (x - (getMaxDateWidth() / 2))) { // do not print left of y legend
996
+ x = Math.round(m_chartspaces.chart.left + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
997
+ if (lastx == 0 && m_chartspaces.chart.left > (x - (getMaxDateWidth() / 2))) { // do not print left of y legend
919
998
  currentDate = new Date(currentDate.getTime() + 86400000);
920
999
  continue;
921
1000
  }
922
- console.log(x, lastx);
923
1001
  if (lastx + (getMaxDateWidth() / 2) > (x - getMaxDateWidth())) {
924
1002
  draw = false;
925
1003
  }
926
1004
  if (draw) {
927
1005
  lastx = x;
928
1006
  var text = formatDate(currentDate.toISOString().substring(0, 10), _this.settings.dateformat);
929
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxDateWidth()) // not to far right?
930
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
931
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
1007
+ if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - getMaxDateWidth()) { // not to far right?
1008
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.bottom + 10);
1009
+ }
1010
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom });
932
1011
  }
933
1012
  currentDate = new Date(currentDate.getTime() + 86400000);
934
1013
  }
935
1014
  // vad är detta?
936
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
937
- var boxshadow = m_chartCss['box-shadow'].split(' ');
938
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
939
-
940
- } else
941
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
942
- m_ctx.restore();
943
- }
944
-
945
- function drawXAxisMonth2(starttime, endtime) {
946
- // month axis
947
- starttime -= starttime % 8640000;
948
- endtime -= starttime % 8640000;
949
- m_ctx.save();
950
- m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
951
- m_ctx.strokeStyle = m_gridHorizontalCss.color;
952
- m_ctx.fillStyle = m_xLegendCss.color;
953
- m_ctx.textAlign = "left";
1015
+ if (typeof m_chartCss.boxShadow !== 'undefined') {
1016
+ var boxshadow = m_chartCss.boxShadow.split(' ');
1017
+ if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
954
1018
 
955
- calcXScale(starttime, endtime);
956
- if (_this.settings.drawxaxis != 0) { // draw line
957
- m_ctx.beginPath();
958
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
959
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
960
- m_ctx.stroke();
961
- m_ctx.closePath();
962
- }
963
- var currentDate = new Date(starttime);
964
- var lastDate = new Date(starttime);
965
- var endDate = new Date(endtime);
966
- var p = { x: 0, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) };
967
- var offset = 0; // timeoffset for closed hours,and weekends
968
- var last = 0;
969
- var olddate = '';
970
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) { // oklart om det skall vara så här 2021-06-01
971
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
972
- currentDate = new Date(currentDate.getTime() + 86400000);
973
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
974
- }
975
- p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
976
- var datum;
977
- var dash = false;
978
- datum = formatDate(currentDate.toISOString().substring(0, 10), _this.settings.dateformat);
979
- offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate); // varför?
980
- currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
981
- if (parseInt(m_chartCss['margin-left']) + (getMaxDateWidth() / 2) > (p.x - (getMaxDateWidth()))) {
982
- continue;
983
- }
984
-
985
- lastDate = new Date(currentDate);
986
- lastDate.setHours(endDate.getHours());
987
- lastDate.setMinutes(endDate.getMinutes());
988
- lastDate.setSeconds(endDate.getSeconds());
989
- var printLegendItem = true;
990
-
991
- if (p.x != parseInt(m_chartCss['margin-left']) && p.x - last < (Math.floor(_this.scaleinfoX.itemwidth))) {
992
- printLegendItem = false;
993
- }
994
- if (printLegendItem) {
995
- if (olddate != datum) {
996
- last = p.x;
997
- if (_this.scaleinfoX.lineLength > (p.x - (m_ctx.measureText(datum).width / 2) + m_ctx.measureText(datum).width / 2))
998
- m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
999
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1000
- olddate = datum;
1001
- }
1002
- }
1019
+ } else {
1020
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
1003
1021
  }
1004
- // print end x legend if not to close to last
1005
- /*if (_this.scaleinfoY.type == 'history') {
1006
- p.x = parseInt(m_chartCss['margin-left']) + _this.scaleinfoX.lineLength; // - (getStringWidth(m_ctx, 'HH:MM'));
1007
- if (p.x - last > (Math.floor(_this.scaleinfoX.itemwidth))) {
1008
- var datum = formatDate(_this.scaleinfoX.endDate, _this.settings.dateformat);
1009
- m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1010
- }
1011
- }*/
1012
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
1013
- var boxshadow = m_chartCss['box-shadow'].split(' ');
1014
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines(p, false);
1015
-
1016
- } else
1017
- drawXAxisGridlines(p, false);
1018
1022
  m_ctx.restore();
1019
- return;
1020
-
1021
-
1022
1023
  }
1023
1024
 
1024
1025
  function calcXScaleTick(starttime, endtime) {
1025
1026
  _this.scaleinfoX.startDate = new Date(starttime);
1026
1027
  _this.scaleinfoX.endDate = new Date(endtime);
1027
1028
  _this.scaleinfoX.days = getNumberOfDays(starttime, endtime); // kan vi nog skita i
1028
- _this.scaleinfoX.lineLength = m_canvas.width - parseInt(m_chartCss['margin-right']) - parseInt(m_chartCss['margin-left']); // daybreaks can have 88/88
1029
+ _this.scaleinfoX.lineLength = m_chartspaces.chart.right - m_chartspaces.chart.left; // daybreaks can have 88/88
1029
1030
  _this.scaleinfoX.itemwidth = getStringWidth(m_ctx, '88:88') * 2; // kolla rätt format en 8a för varje tecken
1030
1031
  var maxLegendItems = Math.floor(_this.scaleinfoX.lineLength / (_this.scaleinfoX.itemwidth * 2));
1031
1032
 
1032
- //if (_this.scaleinfoX.days < 1) {
1033
1033
  if (_this.scaleinfoY.type != 'history') {
1034
1034
  var arr = [];
1035
1035
  var tmptime = starttime;
@@ -1081,7 +1081,6 @@ function Milli_Chart(settings) {
1081
1081
  else factor = 1;
1082
1082
  _this.scaleinfoX.ticksize = factor * 60000; // time to add to next legenditem
1083
1083
  }
1084
- //console.log('calcx out',numticks,_this.scaleinfoX.ticksize,factor,totalmilli);
1085
1084
  return;
1086
1085
  }
1087
1086
  }
@@ -1111,11 +1110,31 @@ function Milli_Chart(settings) {
1111
1110
  }
1112
1111
 
1113
1112
  function calcTimeSpanInDays(startdate, enddate) {
1114
- console.log(startdate, enddate)
1115
1113
  var s = Math.ceil(startdate / 86400000) * 86400000;
1116
1114
  var e = Math.ceil(enddate / 86400000) * 86400000;
1117
- console.log(e - s / 86400000);
1115
+ var days = 1;
1116
+ for (s; s < e; s += 86400000) {
1117
+ var d = new Date(s);
1118
+ if (d.getDay() != 0 && d.getDay() != 6)
1119
+ days++;
1120
+ }
1121
+ return Math.min(days, 5);
1122
+ }
1118
1123
 
1124
+ function drawXAxisTickLowerChart() {
1125
+ m_ctx.save();
1126
+ m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1127
+
1128
+ m_ctx.strokeStyle = m_gridHorizontalCss.color;
1129
+ m_ctx.fillStyle = m_xLegendCss.color;
1130
+ if (_this.settings.drawxaxis != 0) { // draw line for legend
1131
+ m_ctx.beginPath();
1132
+ m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.lowerChart.bottom + 0.5);
1133
+ m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.lowerChart.bottom + 0.5);
1134
+ m_ctx.stroke();
1135
+ m_ctx.closePath();
1136
+ }
1137
+ m_ctx.restore();
1119
1138
  }
1120
1139
 
1121
1140
  function drawXAxisTick(starttime, endtime) {
@@ -1128,84 +1147,114 @@ function Milli_Chart(settings) {
1128
1147
  calcXScaleTick(starttime, endtime);
1129
1148
  if (_this.settings.drawxaxis != 0) { // draw line for legend
1130
1149
  m_ctx.beginPath();
1131
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1132
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1150
+ m_ctx.moveTo(m_chartspaces.chart.left, m_chartspaces.chart.bottom + 0.5);
1151
+ m_ctx.lineTo(m_chartspaces.chart.right, m_chartspaces.chart.bottom + 0.5);
1133
1152
  m_ctx.stroke();
1134
1153
  m_ctx.closePath();
1135
1154
  }
1136
- // if(startime.date == endtime.date && starttime > open || endtime < close ) // no date
1137
-
1138
1155
  var currentDate = new Date(starttime);
1139
- console.log('startdate', currentDate);
1140
1156
  var x;
1141
1157
  var lastx = 0;
1142
1158
  var draw = true;
1143
1159
  var offset = 0;
1144
1160
  var legendItems = [];
1145
- // add days (daychanges)
1146
- //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1161
+ var openhour = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z')).getTime() % 86400000;
1162
+ // add daysstarts
1147
1163
  if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
1148
1164
  currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1149
- console.log(currentDate);
1150
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1151
- draw = true;
1152
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1153
- currentDate = new Date(currentDate.getTime() + 86400000);
1154
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
1155
- }
1156
- //currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1157
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1158
- if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1159
- draw = false;
1160
- }
1161
- if (draw) {
1162
- lastx = x;
1163
- x += 0.5;
1164
- var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1165
- // if day change and setting print on top as well
1166
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
1167
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1168
- legendItems.push({ x: x, type: 0, text: text });
1165
+
1166
+ var firstDate = new Date(currentDate);
1167
+ var days = calcTimeSpanInDays(starttime, endtime);
1168
+ if (m_zoom.mouseup.timestamp == null || (m_zoom.mouseup.timestamp != null && days > 1)) {
1169
+ while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1170
+ draw = true;
1171
+ while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1172
+ currentDate = new Date(currentDate.getTime() + 86400000);
1173
+ offset += 86400000 / _this.scaleinfoX.timePerPixel;
1174
+ }
1175
+ x = Math.round(m_chartspaces.chart.left + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1176
+ if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1177
+ draw = false;
1178
+ } else
1179
+ if (m_zoom.mouseup.timestamp != null && firstDate.getTime() === currentDate.getTime())
1180
+ draw = false;
1181
+ if (draw) {
1182
+ lastx = x + 0.5;
1183
+ var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1184
+ // if day change and setting print on top as well
1185
+ if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - getMaxTimeWidth()) { // not to far right?
1186
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.bottom + 10);
1187
+ legendItems.push({ x: x, type: 0, text: text });
1188
+ }
1189
+ if (x != m_chartspaces.chart.left + 0.5) { // do not draw the first line, it is already drawn
1190
+ if (openhour == currentDate.getTime() % 86400000) {
1191
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, true); // dash?
1192
+ } else {
1193
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false); // dash?
1194
+ }
1195
+ }
1169
1196
  }
1170
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }); // dash?
1197
+ // Move to next day and set starting hour correct if we have open at half hour
1198
+ currentDate = new Date(currentDate.getTime() + 86400000);
1199
+ currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1200
+ if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
1201
+ currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1202
+ offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1171
1203
  }
1172
- currentDate = new Date(currentDate.getTime() + 86400000);
1173
- offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1174
- //offset += (86400000 - _this.scaleinfoX.milliPerDay);
1175
1204
  }
1205
+ // add timestamps
1176
1206
  var currentDate = new Date(starttime);
1177
- console.log(currentDate);
1178
- //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1179
1207
  if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
1180
1208
  currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1181
- console.log(currentDate);
1182
1209
 
1183
1210
  var maxHourLegends;
1184
- console.log(legendItems);
1185
1211
  if (legendItems.length == 0)
1186
- maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - parseInt(m_chartCss['margin-left']) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1187
- else
1188
- if (legendItems.length == 1)
1189
- maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1212
+ maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - m_chartspaces.chart.left - getMaxTimeWidth()) / (getMaxTimeWidth() * 3)); // varför tar vi bort margin???
1190
1213
  else
1191
- maxHourLegends = Math.floor((legendItems[1].x - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1192
- var tickSize;
1193
- calcTimeSpanInDays(starttime, endtime);
1194
-
1195
- //if (m_zoom.isZooming) {
1196
- console.log(starttime, endtime);
1197
- tickSize = new Date(endtime - starttime);
1198
- console.log(tickSize.getTime());
1199
- //} else
1200
- // tickSize = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z'));
1214
+ if (legendItems.length == 1) {
1215
+ if (m_zoom.mouseup.timestamp && days == 2) {
1216
+ // ta den största delen av linjen och mät på
1217
+ if (_this.scaleinfoX.lineLength / 2 < legendItems[0].x + m_chartspaces.chart.left)
1218
+ maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - (_this.scaleinfoX.lineLength - legendItems[0].x) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1219
+ else
1220
+ maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1221
+ } else
1222
+ maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1223
+ } else {
1224
+ maxHourLegends = Math.floor((legendItems[legendItems.length - 1].x - legendItems[legendItems.length - 2].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3)); // calculate with the last days length
1225
+ }
1226
+
1227
+ var tickSize; // per day
1228
+ if (days == 1) {
1229
+ // use start and endtime as ticksize
1230
+ tickSize = new Date(endtime - starttime);
1231
+ } else if (m_zoom.mouseup.timestamp && days == 2) { // zoom with more than 2 days
1232
+ // use the day with most time as tickSize
1233
+ var tmpDate = new Date(starttime);
1234
+ tickSize = new Date(new Date(tmpDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(starttime)).getTime();
1235
+ var firstDay = tickSize;
1236
+ tmpDate = new Date(endtime);
1237
+ var secondDay = new Date(endtime - new Date(tmpDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z').getTime()).getTime();
1238
+ tickSize += new Date(endtime - new Date(tmpDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z').getTime()).getTime();
1239
+ tickSize = new Date(Math.max(firstDay, secondDay));
1240
+ } else {
1241
+ // use full day as tickSize
1242
+ tickSize = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z'));
1243
+ }
1201
1244
  var interval;
1202
1245
  var modularvalue = 3600000;
1203
- if (tickSize.getTime() < 3600000) {
1246
+
1247
+ // calc the ticksize to add to time(interval) when drawing and the modulu value
1248
+ if (tickSize.getTime() < 1800000) {
1249
+ tickSize = tickSize.getTime() / 60000;
1250
+ interval = Math.floor(tickSize / (maxHourLegends + 1)) * 60000;
1251
+ if (interval < 60000) interval = 60000;
1252
+ modularvalue = 60000;
1253
+ } else if (tickSize.getTime() < 3600000) {
1204
1254
  tickSize = tickSize.getTime() / 300000;
1205
1255
  interval = Math.floor(tickSize / (maxHourLegends + 1)) * 300000;
1206
1256
  modularvalue = 300000;
1207
- } else
1208
- if (tickSize.getTime() < 7200000 * 3) {
1257
+ } else if (tickSize.getTime() < 7200000 * 3) {
1209
1258
  tickSize = tickSize.getTime() / 600000;
1210
1259
  interval = Math.floor(tickSize / (maxHourLegends + 1)) * 600000;
1211
1260
  modularvalue = 600000;
@@ -1214,8 +1263,8 @@ function Milli_Chart(settings) {
1214
1263
  interval = Math.floor(tickSize / (maxHourLegends + 1)) * 3600000;
1215
1264
  }
1216
1265
  if (interval == 0) interval = 300000;
1217
-
1218
- console.log('MAX', maxHourLegends, tickSize, interval);
1266
+ if (interval % 60000 != 0)
1267
+ interval = (interval - interval % 60000) + 60000; // remove sekunder
1219
1268
  // print other times
1220
1269
  offset = 0;
1221
1270
  lastx = 0;
@@ -1225,29 +1274,26 @@ function Milli_Chart(settings) {
1225
1274
  if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
1226
1275
  currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
1227
1276
 
1228
- console.log('workdate', workDate);
1229
1277
  var count = 0;
1230
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1231
- console.log('workdate', workDate);
1232
- if (count++ > 30) break;
1278
+ while (currentDate.getTime() <= _this.scaleinfoX.endTimeStamp) {
1279
+ if (count++ > 100) {
1280
+ break; // just make sure we dont do an infinity loop
1281
+
1282
+ }
1233
1283
  draw = true;
1234
1284
  while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1235
- console.log('Helg', currentDate);
1236
1285
  closeTime = new Date(closeTime.getTime() + 86400000);
1237
1286
  currentDate = new Date(currentDate.getTime() + 86400000);
1238
- //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1239
1287
  if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
1240
1288
  currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
1241
1289
  var workDate = new Date(workDate.getTime() + 86400000);
1242
1290
  offset += 86400000 / _this.scaleinfoX.timePerPixel;
1243
1291
  }
1244
- console.log(currentDate, closeTime);
1245
1292
  if (currentDate.getTime() > closeTime.getTime()) {
1246
1293
  // draw DayEnd(start) dash line
1247
- /*var dayStart = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z')
1248
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((dayStart.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1249
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, true); // dash?*/
1250
-
1294
+ var dayStart = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z')
1295
+ x = Math.round(m_chartspaces.chart.left + ((dayStart.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1296
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, true); // dash?
1251
1297
 
1252
1298
  closeTime = new Date(closeTime.getTime() + 86400000);
1253
1299
  workDate = new Date(workDate.getTime() + 86400000);
@@ -1255,11 +1301,9 @@ function Milli_Chart(settings) {
1255
1301
  if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
1256
1302
  currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
1257
1303
  offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1258
- console.log('CLOSED', currentDate, closeTime);
1259
1304
  continue;
1260
1305
  }
1261
- console.log(currentDate, closeTime);
1262
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1306
+ x = Math.round(m_chartspaces.chart.left + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1263
1307
  for (var i = 0; i < legendItems.length; i++) {
1264
1308
  if (x < legendItems[i].x && x + (getMaxTimeWidth() / 2) > (legendItems[i].x - getMaxTimeWidth())) {
1265
1309
  draw = false;
@@ -1269,413 +1313,36 @@ function Milli_Chart(settings) {
1269
1313
  draw = false;
1270
1314
  break;
1271
1315
  }
1272
- }
1273
- console.log(x, lastx, offset);
1274
- if (lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1275
- //draw = false;
1276
- //console.log('false');
1277
- }
1278
- if (draw) {
1279
- lastx = x;
1280
- var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1281
- // if day change and setting print on top as well
1282
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
1283
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1284
- legendItems.push({ x: x, type: 0 });
1285
- }
1286
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
1287
- }
1288
- currentDate = new Date(currentDate.getTime() + interval);
1289
- //currentDate = new Date(currentDate.getTime() + 3600000);
1290
- }
1291
-
1292
- // vad är detta?
1293
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
1294
- var boxshadow = m_chartCss['box-shadow'].split(' ');
1295
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1296
-
1297
- } else
1298
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1299
- m_ctx.restore();
1300
-
1301
- }
1302
-
1303
- function drawXAxisTickBra(starttime, endtime) {
1304
- m_ctx.save();
1305
- m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1306
-
1307
- m_ctx.strokeStyle = m_gridHorizontalCss.color;
1308
- m_ctx.fillStyle = m_xLegendCss.color;
1309
- m_ctx.textAlign = "left";
1310
- calcXScaleTick(starttime, endtime);
1311
- if (_this.settings.drawxaxis != 0) { // draw line for legend
1312
- m_ctx.beginPath();
1313
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1314
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1315
- m_ctx.stroke();
1316
- m_ctx.closePath();
1317
- }
1318
- // if(startime.date == endtime.date && starttime > open || endtime < close ) // no date
1319
-
1320
- var currentDate = new Date(starttime);
1321
- console.log('startdate', currentDate);
1322
- var x;
1323
- var lastx = 0;
1324
- var draw = true;
1325
- var offset = 0;
1326
- var legendItems = [];
1327
- // add days (daychanges)
1328
- currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1329
- console.log(currentDate);
1330
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1331
- draw = true;
1332
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1333
- // console.log('Helg', currentDate);
1334
- currentDate = new Date(currentDate.getTime() + 86400000);
1335
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
1336
- }
1337
- //currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1338
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1339
- if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1340
- draw = false;
1341
- }
1342
- if (draw) {
1343
- lastx = x;
1344
- x += 0.5;
1345
- var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1346
- // if day change and setting print on top as well
1347
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
1348
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1349
- legendItems.push({ x: x, type: 0, text: text });
1350
- }
1351
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }); // dash?
1352
- }
1353
- currentDate = new Date(currentDate.getTime() + 86400000);
1354
- offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1355
- }
1356
- var currentDate = new Date(starttime);
1357
- console.log(currentDate);
1358
- currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1359
-
1360
- var maxHourLegends;
1361
- console.log(legendItems);
1362
- if (legendItems.length == 0)
1363
- maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - parseInt(m_chartCss['margin-left']) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1364
- else
1365
- if (legendItems.length == 1)
1366
- maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1367
- else
1368
- maxHourLegends = Math.floor((legendItems[1].x - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
1369
- var tickSize = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z'));
1370
- var tickSize = tickSize.getTime() / 3600000;
1371
- var interval = Math.floor(tickSize / (maxHourLegends + 1)) * 3600000;
1372
-
1373
- // print other times
1374
- offset = 0;
1375
- lastx = 0;
1376
- var closeTime = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
1377
- var workDate = new Date(currentDate);
1378
- console.log('workdate', workDate);
1379
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1380
- console.log('workdate', workDate);
1381
- draw = true;
1382
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1383
- console.log('Helg', currentDate);
1384
- closeTime = new Date(closeTime.getTime() + 86400000);
1385
- currentDate = new Date(currentDate.getTime() + 86400000);
1386
- currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1387
- var workDate = new Date(workDate.getTime() + 86400000);
1388
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
1389
- }
1390
- console.log(currentDate, closeTime);
1391
- if (currentDate.getTime() > closeTime.getTime()) {
1392
- closeTime = new Date(closeTime.getTime() + 86400000);
1393
- workDate = new Date(workDate.getTime() + 86400000);
1394
- currentDate = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1395
- currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
1396
- offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1397
- console.log('CLOSED', currentDate, closeTime);
1398
- continue;
1399
- }
1400
- console.log(currentDate, closeTime);
1401
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1402
- for (var i = 0; i < legendItems.length; i++) {
1403
- console.log('loop', x, legendItems[i].x);
1404
- if (x < legendItems[i].x && x + (getMaxTimeWidth() / 2) > (legendItems[i].x - getMaxTimeWidth())) {
1316
+ if (x == legendItems[i].x) {
1405
1317
  draw = false;
1406
- console.log('False1');
1407
- break;
1408
- }
1409
- if (x > legendItems[i].x && legendItems[i].x + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1410
- draw = false;
1411
- console.log('False2');
1412
1318
  break;
1413
1319
  }
1414
1320
  }
1415
- console.log(x, lastx, offset);
1416
1321
  if (lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
1417
1322
  //draw = false;
1418
- console.log('false');
1419
1323
  }
1324
+ var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1420
1325
  if (draw) {
1421
1326
  lastx = x;
1422
- var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1423
1327
  // if day change and setting print on top as well
1424
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
1425
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1328
+ if (_this.scaleinfoX.lineLength + m_chartspaces.chart.left > x - getMaxTimeWidth()) { // not to far right?
1329
+ m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_chartspaces.chart.bottom + 10);
1426
1330
  legendItems.push({ x: x, type: 0 });
1427
1331
  }
1428
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
1332
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
1429
1333
  }
1430
1334
  currentDate = new Date(currentDate.getTime() + interval);
1431
- //currentDate = new Date(currentDate.getTime() + 3600000);
1432
- }
1433
-
1434
- // vad är detta?
1435
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
1436
- var boxshadow = m_chartCss['box-shadow'].split(' ');
1437
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1438
-
1439
- } else
1440
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1441
- m_ctx.restore();
1442
-
1443
- }
1444
-
1445
- function drawXAxisTickTest(starttime, endtime) {
1446
- m_ctx.save();
1447
- m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1448
-
1449
- m_ctx.strokeStyle = m_gridHorizontalCss.color;
1450
- m_ctx.fillStyle = m_xLegendCss.color;
1451
- m_ctx.textAlign = "left";
1452
- calcXScaleTick(starttime, endtime);
1453
- if (_this.settings.drawxaxis != 0) { // draw line for legend
1454
- m_ctx.beginPath();
1455
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1456
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1457
- m_ctx.stroke();
1458
- m_ctx.closePath();
1459
1335
  }
1460
- // if(startime.date == endtime.date && starttime > open || endtime < close ) // no date
1461
1336
 
1462
- var currentDate = new Date(starttime);
1463
- console.log('startdate', currentDate);
1464
- var x;
1465
- var lastx = 0;
1466
- var draw = true;
1467
- var offset = 0;
1468
- var legendItems = [];
1469
- // add days (daychanges)
1470
- while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
1471
- draw = true;
1472
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
1473
- console.log('Helg', currentDate);
1474
- currentDate = new Date(currentDate.getTime() + 86400000);
1475
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
1476
- }
1477
- var closeTime = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
1478
- if (currentDate.getTime() > closeTime.getTime()) {
1479
- currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1480
- currentDate = new Date(currentDate.getTime() + 86400000);
1481
- // offset += 86400000 / _this.scaleinfoX.timePerPixel;
1482
- offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1483
- console.log('STÄNGT', currentDate);
1484
- continue;
1485
- }
1486
- console.log(currentDate);
1487
- x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1488
- /*if (lastx == 0 && parseInt(m_chartCss['margin-left']) > (x - (getMaxTimeWidth() / 2))) { // do not print left of y legend
1489
- console.log('ftst', currentDate);
1490
- currentDate = new Date(currentDate.getTime() + 86400000);
1491
- continue;
1492
- }*/
1493
- console.log(x, lastx, offset);
1494
- if (lastx + (getMaxDateWidth() / 2) > (x - getMaxDateWidth())) {
1495
- draw = false;
1496
- console.log('false');
1497
- }
1498
- if (draw) {
1499
- lastx = x;
1500
- var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1501
- // if day change and setting print on top as well
1502
- if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxDateWidth()) // not to far right?
1503
- m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1504
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
1505
- }
1506
- //currentDate = new Date(currentDate.getTime() + 86400000);
1507
- currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
1508
- }
1509
1337
  // vad är detta?
1510
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
1511
- var boxshadow = m_chartCss['box-shadow'].split(' ');
1512
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1513
-
1514
- } else
1515
- drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
1516
- m_ctx.restore();
1517
-
1518
- }
1338
+ if (typeof m_chartCss.boxShadow !== 'undefined') {
1339
+ var boxshadow = m_chartCss.boxShadow.split(' ');
1340
+ if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
1519
1341
 
1520
- function drawXAxisTick2(starttime, endtime) {
1521
- // day and month axis
1522
- m_ctx.save();
1523
- m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1524
-
1525
- m_ctx.strokeStyle = m_gridHorizontalCss.color;
1526
- m_ctx.fillStyle = m_xLegendCss.color;
1527
- m_ctx.textAlign = "left";
1528
- calcXScaleTick(starttime, endtime);
1529
- if (_this.settings.drawxaxis != 0) { // draw line for legend
1530
- m_ctx.beginPath();
1531
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1532
- m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
1533
- m_ctx.stroke();
1534
- m_ctx.closePath();
1535
- }
1536
- var currentDate = new Date(starttime);
1537
- lastDate = new Date(new Date(starttime).toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
1538
-
1539
- var p = { x: 0, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) };
1540
- var offset = 0; // timeoffset for closed hours,and weekends
1541
- var oldx = 1;
1542
- var newday = true;
1543
- var last = 0;
1544
- var nextYear = currentDate.getFullYear() + 1;
1545
- var drawDate = currentDate;
1546
- var lastDrawX = -100;
1547
- var datum;
1548
- var date;
1549
- var y, x;
1550
- while (p.x < (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 2))) { // && oldx != p.x) {
1551
- var dayChange = false;
1552
- if (currentDate.getTime() > endtime) {
1553
- break;
1554
- }
1555
- oldx = p.x;
1556
- p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1557
- var dash = false;
1558
- if (newday) {
1559
- //datum = currentDate.getDate() + '/' + (currentDate.getMonth() + 1); // format date
1560
- date = currentDate.getDate() + '/' + (currentDate.getMonth() + 1); // format date
1561
- dash = true;
1562
- dayChange = true;
1563
- }
1564
- //datum = currentDate.toTimeString().substring(0, 5); // Format time
1565
- _this.settings.timeformat = 'HH:mm'; // jonas får fixa
1566
- datum = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
1567
- drawDate = currentDate;
1568
- newday = false;
1569
- currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
1570
- var printLegendItem = true;
1571
- var drawGridline = true;
1572
- if (currentDate.getTime() >= lastDate.getTime() && _this.settings.chartlen != '1d' && _this.settings.chartlen != '0d') { // om nästa ticket är större än stängning idag, flytta till nästa dag
1573
- //console.log('hmm', currentDate, lastDate, _this.scaleinfoX.ticksize, newday);
1574
- currentDate = new Date((currentDate.getTime() + 86400000) - (currentDate.getTime() % 86400000));
1575
- currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
1576
-
1577
- // next day att starttime
1578
- while (currentDate.getDay() == 0 || currentDate.getDay() == 6) {
1579
- currentDate = new Date(currentDate.getTime() + 86400000);
1580
- offset += 86400000 / _this.scaleinfoX.timePerPixel;
1581
- }
1582
- //console.log(currentDate, _this.scaleinfoX.endDate);
1583
- if (currentDate.getTime() > _this.scaleinfoX.endDate.getTime()) {
1584
- break;
1585
- }
1586
- offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
1587
- lastDate = new Date(currentDate);
1588
- lastDate = new Date(lastDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
1589
- newday = true;
1590
- }
1591
- var fontMetrix;
1592
- var nextx = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
1593
- //if ((nextx - p.x < Math.floor(_this.scaleinfoX.itemwidth)) && new Date(currentDate.getTime() + _this.scaleinfoX.ticksize).getDate() != drawDate.getDate()) { // skriv bara ut om utrymmet får plats innan nästa punkt kommer skrivas (dagbrytningar)
1594
- console.log(nextx, p.x, currentDate);
1595
- if ((nextx - p.x < m_ctx.measureText('88:88').width) && new Date(currentDate.getTime() + _this.scaleinfoX.ticksize).getDate() != drawDate.getDate()) { // skriv bara ut om utrymmet får plats innan nästa punkt kommer skrivas (dagbrytningar)
1596
- //console.log('1', datum, 'Skall nog skrivas ut men för nära sista....',nextx,_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 1));
1597
- if (nextx < _this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 1)) { // is it too close to next?
1598
- //console.log('HIDE');
1599
- printLegendItem = false;
1600
- } else
1601
- if (p.x - lastDrawX < Math.floor(_this.scaleinfoX.itemwidth)) { // is it to close to previous?
1602
- // console.log('to close to previous',dash,datum);
1603
- printLegendItem = false;
1604
- }
1605
- if (dash) {
1606
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1607
- }
1608
- } else
1609
- if (p.x - lastDrawX < Math.floor(_this.scaleinfoX.itemwidth)) { // to close to previous?
1610
- //console.log('to close to previous',dash,datum);
1611
- printLegendItem = false;
1612
- if (dash) {
1613
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1614
- printLegendItem = true;
1615
- }
1616
- } else {
1617
- if (dash && _this.settings.intradaydates) { // lutande text
1618
- m_ctx.save();
1619
- fontMetrix = m_ctx.measureText(date);
1620
- x = p.x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
1621
- y = parseInt(m_chartCss['margin-top']); // + m_ctx.measureText(datum).width;
1622
- m_ctx.translate(x, y);
1623
- m_ctx.rotate(90 * Math.PI / 180);
1624
- m_ctx.fillText(date, 0, 0);
1625
- m_ctx.restore();
1626
- }
1627
- if (drawGridline) {
1628
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1629
- drawGridline = false;
1630
- }
1631
- }
1632
- if (printLegendItem) {
1633
- last = p.x;
1634
- //console.log(newday,datum,dayChange);
1635
- if (dayChange) {
1636
- m_ctx.save();
1637
- fontMetrix = m_ctx.measureText(date);
1638
- x = p.x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
1639
- y = parseInt(m_chartCss['margin-top']); // + m_ctx.measureText(datum).width;
1640
- m_ctx.translate(x, y);
1641
- m_ctx.rotate(90 * Math.PI / 180);
1642
- m_ctx.fillText(date, 0, 0);
1643
- m_ctx.restore();
1644
- //m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), parseInt(m_chartCss['margin-top']) + 5);
1645
- if (drawGridline) {
1646
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1647
- }
1648
- lastDrawX = p.x;
1649
- }
1650
- //else
1651
- if (p.x < m_canvas.width - m_ctx.measureText(datum).width) { // if text will be cropped do not print
1652
- m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1653
- if (drawGridline) {
1654
- drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
1655
- }
1656
- lastDrawX = p.x;
1657
- } else {
1658
- //console.log('else', p.x, _this.scaleinfoX.itemwidth, m_canvas.width, _this.scaleinfoX.lineLength, parseInt(m_chartCss['margin-left']), _this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - _this.scaleinfoX.itemwidth);
1659
- }
1660
- }
1342
+ } else {
1343
+ drawXAxisGridlines({ 'x': x, y: m_chartspaces.chart.bottom }, false);
1661
1344
  }
1662
- // print end x legend if not to close to last
1663
- /* p.x = parseInt(m_chartCss['margin-left']) + _this.scaleinfoX.lineLength; // - (getStringWidth(m_ctx, 'HH:MM'));
1664
- if (p.x - last > (Math.floor(_this.scaleinfoX.itemwidth))) {
1665
- var datum = _this.scaleinfoX.endDate.toTimeString().substring(0, 5);
1666
- m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
1667
- }
1668
-
1669
- */
1670
- if (typeof m_chartCss['box-shadow'] !== 'undefined') {
1671
- var boxshadow = m_chartCss['box-shadow'].split(' ');
1672
- if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines(p, false);
1673
-
1674
- } //else
1675
- //drawXAxisGridlines(p, false);
1676
-
1677
1345
  m_ctx.restore();
1678
- return;
1679
1346
  }
1680
1347
 
1681
1348
  function onMouseOut(evt) {
@@ -1719,15 +1386,15 @@ function Milli_Chart(settings) {
1719
1386
  m_canvas.parentNode.appendChild(m_zoom.div);
1720
1387
  m_zoom.div.setAttribute('class', 'millistream-chart-zoombox');
1721
1388
  }
1722
- if (x < parseInt(m_chartCss['margin-left'])) x = parseInt(m_chartCss['margin-left']);
1723
- m_zoom.div.style.top = parseInt(m_chartCss['margin-top']) + 'px';
1389
+ if (x < m_chartspaces.chart.left) x = m_chartspaces.chart.left;
1390
+ m_zoom.div.style.top = m_chartspaces.chart.top + 'px';
1724
1391
  m_zoom.div.style.left = (m_zoom.mousedown.pos > x ? x : m_zoom.mousedown.pos) + 'px';
1725
- if (x > m_canvas.width - parseInt(m_chartCss['margin-right'])) x = m_canvas.width - parseInt(m_chartCss['margin-right']);
1726
- m_zoom.div.style.height = m_canvas.height - parseInt(m_chartCss['margin-bottom']) - parseInt(m_chartCss['margin-top']) + 'px';
1392
+ if (x > m_chartspaces.chart.right) x = m_chartspaces.chart.right;
1393
+ m_zoom.div.style.height = m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - m_chartspaces.chart.top + 'px';
1727
1394
  m_zoom.div.style.width = (m_zoom.mousedown.pos > x ? m_zoom.mousedown.pos - x : x - m_zoom.mousedown.pos) + 'px';
1728
1395
  }
1729
1396
  if (_this.settings.enablehover == false) return;
1730
- if (x < parseInt(m_chartCss['margin-left']) || x > m_canvas.width - parseInt(m_chartCss['margin-right']) || y < parseInt(m_chartCss['margin-top']) || y > m_canvas.height - parseInt(m_chartCss['margin-bottom'])) {
1397
+ if (x < m_chartspaces.chart.left || x > m_chartspaces.chart.right || y < m_chartspaces.chart.top || y > m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom'])) {
1731
1398
  onMouseOut();
1732
1399
  return;
1733
1400
  }
@@ -1744,7 +1411,6 @@ function Milli_Chart(settings) {
1744
1411
  }
1745
1412
  var obj = m_dataPoints.map.get(m_dataPoints.arr[i]);
1746
1413
  if (obj == null) {
1747
- //console.log('not found', m_dataPoints, obj);
1748
1414
  return;
1749
1415
  }
1750
1416
  // datetime
@@ -1806,7 +1472,6 @@ function Milli_Chart(settings) {
1806
1472
  //posy = parseFloat(highy) + 20;
1807
1473
  }
1808
1474
  m_toolTip.instrDiv[k].innerHTML = formatNiceNumber(obj.instruments[k].price, _this.settings.thousandseparator, _this.settings.decimalseparator, obj.instruments[k].price.countDecimals());
1809
- //console.log()
1810
1475
  if (typeof obj.instruments[k].diff !== 'undefined') m_toolTip.instrDiv[k].innerHTML += ', diff:' + formatNiceNumber(obj.instruments[k].diff, ' ', ',', m_y2settings.decimals);
1811
1476
  m_toolTip.instrDiv[k].setAttribute('class', 'millistream-chart-tooltip'); // set class so we can measure it might change below depending on position
1812
1477
  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
@@ -1941,42 +1606,19 @@ function Milli_Chart(settings) {
1941
1606
  }
1942
1607
  }
1943
1608
 
1944
- function checkTickChartData() {
1945
- var count = 0;
1946
- for (var i = 0; i < _this.instruments[0].trades.length; i++) {
1947
- if (_this.instruments[0].trades[i].timestamp > _this.scaleinfoX.startTimeStamp && _this.instruments[0].trades[i].timestamp < _this.scaleinfoX.endTimeStamp) {
1948
- if (count++ > 0) {
1949
- return true;
1950
- }
1951
- }
1952
- }
1953
- var y = (m_canvas.height - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-top']);
1954
- var x = (m_canvas.width - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-left']);
1955
- m_ctx.save();
1956
- m_ctx.font = 'bold ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1957
- m_ctx.font = 'bold 12px ' + m_xLegendCss['font-family'];
1958
- m_ctx.strokeStyle = m_gridHorizontalCss.color;
1959
- m_ctx.fillStyle = m_xLegendCss.color;
1960
- m_ctx.textAlign = "left";
1961
-
1962
- m_ctx.fillText(_this.settings.nochartlabel, x - (m_ctx.measureText(_this.settings.nochartlabel).width / 2), y);
1963
- m_ctx.restore();
1964
- return false;
1965
- }
1966
-
1967
1609
  function checkChartData(data) {
1968
1610
  // _this.instruments[0].history / _this.instruments[0].trades
1969
1611
  var count = 0;
1970
1612
  for (var i = 0; i < data.length; i++) {
1971
- if (data[i].timestamp > _this.scaleinfoX.startTimeStamp && data[i].timestamp < _this.scaleinfoX.endTimeStamp) {
1972
- //console.log(new Date(data[i].timestamp), new Date(_this.scaleinfoX.startTimeStamp), new Date(_this.scaleinfoX.endTimeStamp), data[i]);
1613
+ if (data[i].timestamp >= _this.scaleinfoX.startTimeStamp && data[i].timestamp <= _this.scaleinfoX.endTimeStamp) {
1973
1614
  if (count++ > 0) {
1974
1615
  return true;
1975
1616
  }
1976
1617
  }
1977
1618
  }
1978
- var y = (m_canvas.height - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-top']);
1979
- var x = (m_canvas.width - parseInt(m_chartCss['margin-bottom'])) / 2 + parseInt(m_chartCss['margin-left']);
1619
+ console.log('NO data to draw on');
1620
+ var y = m_chartspaces.chart.bottom - m_chartspaces.chart.top / 2 + m_chartspaces.chart.top;
1621
+ var x = m_chartspaces.chart.right - m_chartspaces.chart.left / 2 + m_chartspaces.chart.left;
1980
1622
  m_ctx.save();
1981
1623
  m_ctx.font = 'bold ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
1982
1624
  m_ctx.font = 'bold 12px ' + m_xLegendCss['font-family'];
@@ -1989,8 +1631,34 @@ function Milli_Chart(settings) {
1989
1631
  return false;
1990
1632
  }
1991
1633
 
1634
+ function calcChartSpaces() {
1635
+ m_chartspaces.chart.height = Math.round(m_canvas.height * (m_chartspaces.chart.percent / 100));
1636
+ m_chartspaces.chart.top = parseInt(m_chartCss['margin-top']);
1637
+ m_chartspaces.chart.left = parseInt(m_chartCss['margin-left']);
1638
+ m_chartspaces.chart.right = m_canvas.width - parseInt(m_chartCss['margin-right']);
1639
+ m_chartspaces.chart.bottom = m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']);
1640
+ m_chartspaces.chart.width = m_canvas.width;
1641
+ m_chartspaces.lowerChart.height = m_canvas.height * (m_chartspaces.lowerChart.percent / 100);
1642
+ m_chartspaces.lowerChart.top = Math.round(m_chartspaces.chart.bottom + parseInt(m_chartCss['margin-bottom']) + m_chartspaces.chart.top);
1643
+ m_chartspaces.lowerChart.left = m_chartspaces.chart.left;
1644
+ m_chartspaces.lowerChart.right = m_chartspaces.chart.right;
1645
+ m_chartspaces.lowerChart.bottom = m_canvas.height - parseInt(m_chartCss['margin-bottom']);
1646
+ m_chartspaces.lowerChart.width = m_canvas.width;
1647
+ }
1648
+
1992
1649
  _this.drawChart = function() {
1650
+ if (m_lastDrawnInstrument != _this.instruments[0].insref) {
1651
+ m_zoom.mousedown.pos = 0;
1652
+ m_zoom.mousedown.i = 0;
1653
+ m_zoom.mousedown.timestamp = null;
1654
+ m_zoom.mouseup.timestamp = null;
1655
+ if (m_zoom.div) m_canvas.parentNode.removeChild(m_zoom.div);
1656
+ m_zoom.div = null;
1657
+ m_zoom.isZooming = false;
1658
+ }
1659
+ m_lastDrawnInstrument = _this.instruments[0].insref;
1993
1660
  if (m_ctx == null) return;
1661
+ //console.clear();
1994
1662
  m_datapoints = [];
1995
1663
  if (m_dataPoints.map) m_dataPoints.map.clear();
1996
1664
  m_dataPoints.map = new Map();
@@ -1999,6 +1667,8 @@ function Milli_Chart(settings) {
1999
1667
  console.log('no chartdata');
2000
1668
  return;
2001
1669
  }
1670
+ calcChartSpaces();
1671
+
2002
1672
  var period = _this.settings.chartlen.substring(_this.settings.chartlen.length - 1);
2003
1673
  var len = parseInt(_this.settings.chartlen.substring(0, _this.settings.chartlen.length - 1));
2004
1674
  m_ctx.clearRect(0, 0, m_canvas.width, m_canvas.height);
@@ -2013,11 +1683,8 @@ function Milli_Chart(settings) {
2013
1683
  _this.scaleinfoX.endTimeStamp = m_zoom.mouseup.timestamp > m_zoom.mousedown.timestamp ? m_zoom.mouseup.timestamp : m_zoom.mousedown.timestamp;
2014
1684
  _this.scaleinfoX.startTimeStamp = m_zoom.mouseup.timestamp < m_zoom.mousedown.timestamp ? m_zoom.mouseup.timestamp : m_zoom.mousedown.timestamp;
2015
1685
  } else {
2016
- //console.log('len', len);
2017
1686
  _this.scaleinfoX.startTimeStamp = getTickStartDate(len); // calc not to start with weekends
2018
1687
  // back up x days from quotedate if needed
2019
- //console.log(new Date(_this.scaleinfoX.startTimeStamp), new Date(_this.instruments[0].quotedate));
2020
- //console.log(new Date(_this.scaleinfoX.startTimeStamp), new Date(_this.instruments[0].quotedate - (86400000 * (len - 1))));
2021
1688
  // TODO if startTimeStamp < quotedate -len borde det vara
2022
1689
  var quoteDate = businessDaysSubtraction(_this.instruments[0].quotedate, len);
2023
1690
  if (_this.scaleinfoX.startTimeStamp - _this.scaleinfoX.startTimeStamp % 86400000 > quoteDate) { // if startdate > quotedate back startdate
@@ -2031,7 +1698,6 @@ function Milli_Chart(settings) {
2031
1698
  _this.scaleinfoX.endTimeStamp = new Date(_this.scaleinfoX.endTimeStamp.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z').getTime();
2032
1699
  else if (len == 1) {
2033
1700
  // check if startdate is not today (due to exchange is closed f ex DJ)
2034
- //console.log(new Date(_this.scaleinfoX.endTimeStamp), new Date(_this.scaleinfoX.startTimeStamp));
2035
1701
  if (_this.scaleinfoX.startTimeStamp % 86400000 != new Date().getTime() % 86400) {
2036
1702
  _this.scaleinfoX.endTimeStamp = new Date(new Date(_this.scaleinfoX.startTimeStamp).toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z').getTime();
2037
1703
  } else
@@ -2049,8 +1715,6 @@ function Milli_Chart(settings) {
2049
1715
  _this.scaleinfoX.endTimeStamp -= _this.scaleinfoX.endTimeStamp - _this.scaleinfoX.endTimeStamp % 86400000;
2050
1716
  _this.scaleinfoX.endTimeStamp += _this.instruments[0].quotedate; // set enddate = last Quotedate
2051
1717
  }
2052
- //console.log('Starttimestamp',new Date(_this.scaleinfoX.startTimeStamp));
2053
- //console.log('endtimestammp',new Date(_this.scaleinfoX.endTimeStamp), 'quotedate',new Date(_this.instruments[0].quotedate));
2054
1718
  }
2055
1719
  setTimeSpanData();
2056
1720
  _this.scaleinfoY.type = 'trades';
@@ -2104,7 +1768,6 @@ function Milli_Chart(settings) {
2104
1768
 
2105
1769
  drawYAxis();
2106
1770
  drawXAxisMonth(_this.scaleinfoX.startTimeStamp, _this.scaleinfoX.endTimeStamp);
2107
- //console.log(_this.scaleinfoX.startTimeStamp, _this.scaleinfoX.endTimeStamp);
2108
1771
  if (false == checkChartData(_this.instruments[0].history)) return;
2109
1772
 
2110
1773
  for (i = 0; i < _this.instruments.length; i++) {
@@ -2148,39 +1811,42 @@ function Milli_Chart(settings) {
2148
1811
  for (i = 0; i < _this.instruments.length; i++)
2149
1812
  if (_this.instruments[i].insref != 0)
2150
1813
  plotData(_this.instruments[i].history, i);
2151
- //plotChart(_this.instruments[0].history, null);
2152
1814
 
2153
1815
  }
2154
- drawBoxShadow(m_canvas, m_ctx);
2155
- if (m_modules.quantity) {
2156
- m_modules.quantity.redraw();
1816
+ drawBoxShadow(m_chartspaces.chart);
1817
+ if (m_chartspaces.chart.percent != 100) {
1818
+ drawXAxisTickLowerChart();
1819
+ drawYAxisLower();
1820
+ drawBoxShadow(m_chartspaces.lowerChart);
2157
1821
  }
2158
1822
  onMouseOut();
2159
1823
  };
2160
1824
 
2161
- function drawBoxShadow(canvas, ctx) {
2162
- if (typeof m_chartCss['box-shadow'] === 'undefined') return;
2163
- var boxshadow = m_chartCss['box-shadow'].split(' ');
2164
- ctx.save();
1825
+ function drawBoxShadow(space) {
1826
+ if (typeof m_chartCss.boxShadow === 'undefined') return;
1827
+ var boxShadow = m_chartCss.boxShadow;
1828
+ if (boxShadow.indexOf(')') != -1) {
1829
+ boxShadow = boxShadow.substring(boxShadow.indexOf(')') + 2);
1830
+ }
1831
+ var boxshadow = boxShadow.split(' ');
1832
+ m_ctx.save();
1833
+ m_ctx.beginPath();
2165
1834
  if (parseInt(boxshadow[0]) > 0) {
2166
- ctx.beginPath();
2167
- ctx.strokeStyle = m_chartCss['border-top-color'];
2168
- ctx.lineWidth = parseInt(boxshadow[1]);
2169
- ctx.moveTo(parseInt(m_chartCss['margin-left']), parseInt(m_chartCss['margin-top']));
2170
- ctx.lineTo(canvas.width - parseInt(m_chartCss['margin-right']), parseInt(m_chartCss['margin-top']));
2171
- ctx.stroke();
2172
- ctx.closePath();
1835
+ m_ctx.strokeStyle = m_chartCss['border-top-color'];
1836
+ m_ctx.lineWidth = parseInt(boxshadow[1]);
1837
+ m_ctx.moveTo(space.left, space.top);
1838
+ m_ctx.lineTo(space.right, space.top);
1839
+ m_ctx.stroke();
2173
1840
  }
2174
1841
  if (parseInt(boxshadow[1]) > 0) {
2175
- ctx.beginPath();
2176
- ctx.strokeStyle = m_chartCss['border-right-color'];
2177
- ctx.lineWidth = parseInt(boxshadow[1]);
2178
- ctx.moveTo(canvas.width - parseInt(m_chartCss['margin-right']), parseInt(m_chartCss['margin-top']) + 0.5);
2179
- ctx.lineTo(canvas.width - parseInt(m_chartCss['margin-right']), canvas.height - parseInt(m_chartCss['margin-bottom']));
2180
- ctx.stroke();
2181
- ctx.closePath();
1842
+ m_ctx.strokeStyle = m_chartCss['border-right-color'];
1843
+ m_ctx.lineWidth = parseInt(boxshadow[1]);
1844
+ m_ctx.moveTo(space.right, space.top + 0.5);
1845
+ m_ctx.lineTo(space.right, space.bottom);
1846
+ m_ctx.stroke();
2182
1847
  }
2183
- ctx.restore();
1848
+ m_ctx.closePath();
1849
+ m_ctx.restore();
2184
1850
  }
2185
1851
 
2186
1852
  function parseData(data, factor) {
@@ -2274,39 +1940,50 @@ function Milli_Chart(settings) {
2274
1940
  }
2275
1941
 
2276
1942
  _this.addQuantity = function() {
2277
- if (m_modules.quantity == null)
2278
- m_modules.quantity = new MilliChart_Quantity(_this, m_canvas);
1943
+ if (m_chartspaces.chart.percent == 100) {
1944
+ m_chartspaces.chart.percent = 70;
1945
+ m_chartspaces.lowerChart.percent = 30;
1946
+ } else {
1947
+ m_chartspaces.chart.percent = 100;
1948
+ m_chartspaces.lowerChart.percent = 0;
1949
+ _this.drawChart();
1950
+ return;
1951
+ }
1952
+ /*if (m_modules.quantity == null)
1953
+ m_modules.quantity = new MilliChart_Quantity(_this, m_canvas);*/
1954
+ _this.drawChart();
2279
1955
  };
2280
1956
 
2281
1957
  _this.resizeStart = function(e, ui) {
2282
- m_resizing.resizing = true;
2283
1958
  m_resizing.width = m_canvas.width;
2284
1959
  m_resizing.height = m_canvas.height;
2285
1960
  };
2286
1961
 
2287
1962
  _this.resize = function(e, ui) {
2288
- var diff = (m_resizing.height - _this.settings.target.offsetHeight) / _this.settings.target.offsetHeight * 100;
2289
- if (Math.abs(diff) > 10) {
2290
- m_canvas.setAttribute('height', _this.settings.target.offsetHeight + 'px');
2291
- m_canvas.setAttribute('width', _this.settings.target.offsetWidth + 'px'); // läs från css?
1963
+ var diff = (m_resizing.height - m_canvas.height) / m_canvas.height * 100;
1964
+ if (Math.abs(diff) > 1) {
1965
+ setChartSize();
1966
+ m_resizing.width = m_canvas.width;
1967
+ m_resizing.height = m_canvas.height;
2292
1968
  _this.drawChart();
2293
1969
  } else {
2294
- diff = (m_resizing.width - _this.settings.target.offsetWidth) / _this.settings.target.offsetWidth * 100;
2295
- if (Math.abs(diff) > 10) {
2296
- m_canvas.setAttribute('height', _this.settings.target.offsetHeight + 'px');
2297
- m_canvas.setAttribute('width', _this.settings.target.offsetWidth + 'px'); // läs från css?
1970
+ diff = (m_resizing.width - m_canvas.width) / m_canvas.width * 100;
1971
+ if (Math.abs(diff) > 1) {
1972
+ setChartSize();
1973
+ m_canvas.height = _this.settings.target.offsetHeight;
1974
+ m_canvas.width = _this.settings.target.offsetWidth;
1975
+ m_resizing.width = m_canvas.width;
1976
+ m_resizing.height = m_canvas.height;
2298
1977
  _this.drawChart();
2299
1978
  }
2300
1979
  }
2301
- m_resizing.width = m_canvas.width;
2302
- m_resizing.height = m_canvas.height;
1980
+ var cache = m_ctx.getImageData(0, 0, m_canvas.width, m_canvas.height);
1981
+ setChartSize();
1982
+ m_ctx.putImageData(cache, 0, 0);
2303
1983
  };
2304
1984
 
2305
1985
  _this.resizeEnd = function(e, ui) {
2306
- m_resizeing = false;
2307
- m_canvas.setAttribute('height', _this.settings.target.offsetHeight + 'px');
2308
- m_canvas.setAttribute('width', _this.settings.target.offsetWidth + 'px'); // läs från css?
2309
- console.log('Width:', _this.settings.target.offsetWidth);
1986
+ setChartSize();
2310
1987
  _this.drawChart();
2311
1988
  };
2312
1989
 
@@ -2335,7 +2012,7 @@ function Milli_Chart(settings) {
2335
2012
  currentDate.setSeconds(lastdate.getSeconds());
2336
2013
 
2337
2014
  if (lastdate.toISOString().substring(0, 10) != currentDate.toISOString().substring(0, 10)) { // new date
2338
- tmp = new Date(lastdate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
2015
+ var tmp = new Date(lastdate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
2339
2016
  var nextDate = new Date(data[i].timestamp);
2340
2017
  tmp = tmp.getTime() + 86400000 - _this.scaleinfoX.milliPerDay; // increase to next days starttime
2341
2018
  currentDate = new Date(tmp);
@@ -2348,14 +2025,15 @@ function Milli_Chart(settings) {
2348
2025
  }
2349
2026
  offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate);
2350
2027
  lastdate = currentDate;
2351
- startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2028
+ startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2352
2029
  // TODO: här blir det fel när det är från 00:00: 23:59 men göms av tmpx < startpoint.x
2353
2030
 
2354
2031
  }
2355
- startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2032
+ //startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2033
+ startpoint.y = Math.round(m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2356
2034
  var maxy = maxy > startpoint.y ? maxy : startpoint.y;
2357
2035
 
2358
- startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
2036
+ startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
2359
2037
  startpoint.x -= offset;
2360
2038
  m_ctx.beginPath();
2361
2039
  m_ctx.arc(startpoint.x, startpoint.y - 20, 10, 0, 2 * Math.PI, false);
@@ -2421,11 +2099,13 @@ function Milli_Chart(settings) {
2421
2099
  currentDate = new Date(data[i].timestamp);
2422
2100
  offset = ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel) * dateDiffInDays(new Date(startDate), currentDate);
2423
2101
  tmp = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
2424
- endpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((tmp.getTime() - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2425
- if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') // plot the closeprice1d
2426
- endpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(_this.instruments[instrument].closeprice1d) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2427
- else {
2428
- endpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(lastItem.price) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2102
+ endpoint.x = Math.round(m_chartspaces.chart.left + ((tmp.getTime() - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2103
+ if (_this.settings.chartlen == '1d' || _this.settings.chartlen == '0d') { // plot the closeprice1d
2104
+ //endpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(_this.instruments[instrument].closeprice1d) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2105
+ endpoint.y = Math.round(m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(_this.instruments[instrument].closeprice1d) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2106
+ } else {
2107
+ //endpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(lastItem.price) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2108
+ endpoint.y = Math.round(m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - (((parseFloat(lastItem.price) * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2429
2109
  // do not add closeprice to hover array
2430
2110
  /*
2431
2111
  var x = Math.round(endpoint.x);
@@ -2470,22 +2150,20 @@ function Milli_Chart(settings) {
2470
2150
  offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate);
2471
2151
  lastdate = currentDate;
2472
2152
  //console.log(startpoint.x);
2473
- startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2153
+ startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - startDate) / _this.scaleinfoX.timePerPixel)) + 0.5 - offset;
2474
2154
  //console.log(startpoint.x);
2475
2155
 
2476
2156
  // TODO: här blir det fel när det är från 00:00: 23:59 men göms av tmpx < startpoint.x
2477
2157
  if (_this.scaleinfoY.type == 'trades' && tmpx < startpoint.x) {
2478
2158
  m_ctx.lineTo(startpoint.x, startpoint.y);
2479
2159
  }
2480
-
2481
2160
  //m_ctx.lineTo(startpoint.x, startpoint.y);
2482
-
2483
2161
  }
2484
- //p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset); // from drawXaxis
2485
- startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2162
+ //startpoint.y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2163
+ startpoint.y = Math.round(m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) - (((data[i].price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2486
2164
  maxy = maxy > startpoint.y ? maxy : startpoint.y;
2487
2165
 
2488
- startpoint.x = Math.round(parseInt(m_chartCss['margin-left']) + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
2166
+ startpoint.x = Math.round(m_chartspaces.chart.left + ((data[i].timestamp - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel)) + 0.5;
2489
2167
  startpoint.x -= offset;
2490
2168
  if (startpoint.x != endpoint.x || startpoint.y != endpoint.y) {
2491
2169
  var x = Math.round(startpoint.x);
@@ -2509,7 +2187,7 @@ function Milli_Chart(settings) {
2509
2187
  //m_ctx.bezierCurveTo(startpoint.x, startpoint.y, endpoint.x - 1, endpoint.y - 1, endpoint.x, endpoint.y); // läs på om detta för "runda linjer"
2510
2188
 
2511
2189
  if (instrument == 0) {
2512
- point = { price: data[i].price, open: data[i].openprice, x: startpoint.x - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp) };
2190
+ point = { price: data[i].price, open: data[i].openprice, x: startpoint.x - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp), quantity: data[i].quantity };
2513
2191
  if (typeof data[i].dividend !== 'undefined') point.dividend = data[i].dividend;
2514
2192
  if (typeof data[i].diff !== 'undefined') point.diff = data[i].diff;
2515
2193
  m_datapoints.push(point);
@@ -2523,19 +2201,19 @@ function Milli_Chart(settings) {
2523
2201
  if (_this.settings.hcurve && _this.scaleinfoY.type == 'history') {
2524
2202
  if (isToday(currentDate)) {
2525
2203
  // only 1 point in hcurve chart, draw line from start of chart to end date
2526
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), startpoint.y);
2204
+ m_ctx.moveTo(m_chartspaces.chart.left, startpoint.y);
2527
2205
  m_ctx.lineTo(startpoint.x, startpoint.y);
2528
- point = { price: data[i].price, open: data[i].openprice, x: parseInt(m_chartCss['margin-left']) - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp), insref: _this.instruments[instrument].insref, diff: data[i].diff };
2206
+ point = { price: data[i].price, open: data[i].openprice, x: m_chartspaces.chart.left - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp), insref: _this.instruments[instrument].insref, diff: data[i].diff };
2529
2207
  m_datapoints.push(point);
2530
2208
  point = { price: data[i].price, open: data[i].openprice, x: startpoint.x - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp), insref: _this.instruments[instrument].insref, diff: data[i].diff };
2531
2209
  m_datapoints.push(point);
2532
- startx = parseInt(m_chartCss['margin-left']);
2210
+ startx = m_chartspaces.chart.left;
2533
2211
  starty = startpoint.y;
2534
2212
  // last point so break out and store startx and starty from fake point
2535
2213
  break;
2536
2214
  } else if (hCurveLastPoint) {
2537
2215
  /* var y = Math.round(m_canvas.height - parseInt(m_chartCss['margin-bottom']) - (((hCurveLastPoint.price * factor) - _this.scaleinfoY.minValue) * _this.scaleinfoY.valuePerPixel)) + 0.5;
2538
- m_ctx.moveTo(parseInt(m_chartCss['margin-left']), y);
2216
+ m_ctx.moveTo(m_chartspaces.chart.left, y);
2539
2217
  m_ctx.lineTo(startpoint.x, y);*/
2540
2218
  }
2541
2219
  }
@@ -2544,11 +2222,9 @@ function Milli_Chart(settings) {
2544
2222
  startx = startpoint.x;
2545
2223
  starty = startpoint.y;
2546
2224
  }
2547
- //console.log('in', startpoint.x);
2548
2225
  endpoint.x = startpoint.x;
2549
2226
  endpoint.y = startpoint.y;
2550
2227
  }
2551
- // console.log('div', data[i]);
2552
2228
  if (data[i].dividend) {
2553
2229
  //console.log('div', data[i]);
2554
2230
  }
@@ -2558,9 +2234,10 @@ function Milli_Chart(settings) {
2558
2234
  });
2559
2235
  m_ctx.stroke();
2560
2236
  if (_this.settings.fillchart == true && instrument == 0) {
2561
- //console.log(startpoint.x, endpoint.x);
2562
- m_ctx.lineTo(startpoint.x, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2563
- m_ctx.lineTo(startx, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2237
+ // m_ctx.lineTo(startpoint.x, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2238
+ // m_ctx.lineTo(startx, m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2239
+ m_ctx.lineTo(startpoint.x, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2240
+ m_ctx.lineTo(startx, m_chartspaces.chart.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
2564
2241
  m_ctx.lineTo(startx, starty);
2565
2242
  m_ctx.closePath();
2566
2243
  if (true == m_instrumentCss[0]['background-image'].startsWith('linear-gradient')) {
@@ -2572,7 +2249,7 @@ function Milli_Chart(settings) {
2572
2249
  col0 = col0.substring(0, col0.lastIndexOf(','));
2573
2250
  col1 = colors.substring(colors.lastIndexOf('rgba'), colors.lastIndexOf(')'));
2574
2251
  }
2575
- var grd = m_ctx.createLinearGradient(0, 0, 0, m_canvas.height - parseInt(m_chartCss['margin-top']) - parseInt(m_chartCss['margin-bottom']));
2252
+ var grd = m_ctx.createLinearGradient(0, 0, 0, m_chartspaces.chart.height - m_chartspaces.chart.top - parseInt(m_chartCss['margin-bottom']));
2576
2253
  grd.addColorStop(0, col0);
2577
2254
  grd.addColorStop(1, col1);
2578
2255
  m_ctx.fillStyle = grd;
@@ -2669,6 +2346,16 @@ function Milli_Chart(settings) {
2669
2346
  return 1;
2670
2347
  };
2671
2348
 
2349
+ function setChartSize() {
2350
+ var offset = 0;
2351
+ if (_this.settings.target.parentNode.classList.contains('chartcontainer')) {
2352
+ offset = _this.settings.target.getBoundingClientRect().top - _this.settings.target.parentNode.getBoundingClientRect().top;
2353
+ }
2354
+ _this.settings.target.style.height = (_this.settings.target.parentNode.offsetHeight - offset) + 'px';
2355
+ _this.settings.target.style.width = _this.settings.target.parentNode.offsetWidth + 'px';
2356
+ m_canvas.height = _this.settings.target.offsetHeight;
2357
+ m_canvas.width = _this.settings.target.offsetWidth;
2358
+ }
2672
2359
  _this.buildwidget = function(resp) {
2673
2360
  //console.log('buildwidget', resp);
2674
2361
  parseData(resp[0], 1);
@@ -2686,13 +2373,8 @@ function Milli_Chart(settings) {
2686
2373
  if (m_canvas == null) {
2687
2374
  m_canvas = MillistreamWidgetApi_addElement(_this, 'canvas', 'millistream-chart-canvas', _this.settings.target);
2688
2375
 
2689
- //m_canvas.style.width = '100%';
2690
- //m_canvas.style.height = '100%';
2691
- //m_canvas.setAttribute('height', m_canvas.offsetHeight);
2692
- //m_canvas.setAttribute('width', m_canvas.offsetWidth); // läs från css?
2693
- m_canvas.setAttribute('height', _this.settings.target.offsetHeight);
2694
- //m_canvas.setAttribute('height', 300);
2695
- m_canvas.setAttribute('width', _this.settings.target.offsetWidth); // läs från css?
2376
+ setChartSize();
2377
+
2696
2378
  m_ctx = m_canvas.getContext("2d");
2697
2379
  m_canvas.addEventListener('mousemove', onMouseMove, false); // disable while loading and enable on drawReady
2698
2380
  m_canvas.addEventListener('mouseout', onMouseOut, false);
@@ -2718,9 +2400,13 @@ function Milli_Chart(settings) {
2718
2400
  if (m_datapoints.length == 0 || m_zoom.mousedown.timestamp == null) return;
2719
2401
  var rect = m_canvas.getBoundingClientRect();
2720
2402
  var x = evt.clientX - rect.left - 1;
2403
+ if (x < m_zoom.mousedown.pos) {
2404
+ clearZoom();
2405
+ return;
2406
+ }
2721
2407
  if (Math.abs(x - m_zoom.mousedown.pos) > 5) { // only handle zoom with 5 pixels width
2722
2408
  var i;
2723
- for (i = m_datapoints.length - 1; i > 0; i--) { // -1??
2409
+ for (i = m_datapoints.length - 1; i > 0; i--) {
2724
2410
  if (x >= m_datapoints[i].x) {
2725
2411
  m_zoom.end = x;
2726
2412
  break;
@@ -2796,7 +2482,8 @@ function Milli_Chart(settings) {
2796
2482
  m_chartCss['margin-bottom'] = properties.marginBottom;
2797
2483
  m_chartCss['margin-left'] = properties.marginLeft;
2798
2484
  m_chartCss['margin-right'] = properties.marginRight;
2799
- m_chartCss['box-shadow'] = properties.boxShadow;
2485
+ //m_chartCss['box-shadow'] = properties.boxShadow;
2486
+ m_chartCss.boxShadow = properties.boxShadow;
2800
2487
  m_chartCss['border-right-color'] = properties.borderRightColor;
2801
2488
  m_chartCss['border-left-color'] = properties.borderLeftColor;
2802
2489
 
@@ -2977,7 +2664,7 @@ function Milli_Chart(settings) {
2977
2664
  _this.settings.startdate = startdate.getFullYear() + '-' + zeroPad(startdate.getMonth() + 1, 2) + '-' + zeroPad(startdate.getDate(), 2);
2978
2665
  url = MillistreamWidgetApi_buildQuery(_this, 'historychart');
2979
2666
  _this.settings.fields = oldfields;
2980
- console.log(_this.settings.fields);
2667
+ //console.log(_this.settings.fields);
2981
2668
  millistream_data_api.fetch(url, function(data) {
2982
2669
  _this.buildwidget(data);
2983
2670
 
@@ -2992,7 +2679,6 @@ function Milli_Chart(settings) {
2992
2679
  changeOrientation();
2993
2680
 
2994
2681
  });
2995
-
2996
2682
  }
2997
2683
  var milli_data_api_url = 'https://stage.millistream.com/widgets/3.0.3/data/milli_widget_dataapi.php?';
2998
2684
 
@@ -3640,7 +3326,7 @@ function print_field(widget, element, field, value, overridedecimals) {
3640
3326
  }
3641
3327
  }
3642
3328
  if (typeof widget.settings.translations !== 'undefined' && widget.translateTypes) {
3643
- element.innerHTML = widget.translateTypes(value);
3329
+ element.innerHTML = widget.translateTypes(value, field);
3644
3330
  return element.innerHTML;
3645
3331
  }
3646
3332
 
@@ -5567,4 +5253,5 @@ function MillistreamWidgetStreamingApi(settings) {
5567
5253
  }
5568
5254
  exports.Milli_Chart = Milli_Chart;
5569
5255
  exports.MillistreamWidgetSettings = MillistreamWidgetSettings;
5256
+ exports.milli_data_api_url = milli_data_api_url;
5570
5257
  exports.MillistreamWidgetStreamingApi = MillistreamWidgetStreamingApi;