@millistream/millistream-widgets 0.0.9 → 0.0.12
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.
- package/README.md +128 -0
- package/millistream-widgets.js +3 -2
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# Millistream Widgets
|
|
2
|
+
Millistream financial data widgets for websites.
|
|
3
|
+
|
|
4
|
+
## Installation
|
|
5
|
+
```bash
|
|
6
|
+
$ npm install @millistream/millistream-widgets
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Angular example
|
|
10
|
+
```html
|
|
11
|
+
<button (click)="loadChart()">Load</button>
|
|
12
|
+
<div id="chart" style="millistream-chart-target"></div>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
...
|
|
17
|
+
loadChart) {
|
|
18
|
+
(async function () {
|
|
19
|
+
const {
|
|
20
|
+
MillistreamWidgetStreamingApi,
|
|
21
|
+
Milli_Chart,
|
|
22
|
+
MillistreamWidgetSettings,
|
|
23
|
+
} = await import(
|
|
24
|
+
// @ts-ignore
|
|
25
|
+
'@millistream/millistream-widgets'
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
MillistreamWidgetSettings.token = 'xxx';
|
|
29
|
+
|
|
30
|
+
let pushapi = new MillistreamWidgetStreamingApi({
|
|
31
|
+
token: MillistreamWidgetSettings.token,
|
|
32
|
+
server: 'wss://push.millistream.com',
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
let ml = new Milli_Chart({
|
|
36
|
+
instrument: [6485],
|
|
37
|
+
target: document.getElementById('chart'),
|
|
38
|
+
autodraw: true,
|
|
39
|
+
intradaylen: '5',
|
|
40
|
+
historylen: '5y',
|
|
41
|
+
gridHorizontalLines: 0,
|
|
42
|
+
gridHorizontalLinesStyle: 'normal',
|
|
43
|
+
gridVerticalLines: 1,
|
|
44
|
+
chartlen: '1y',
|
|
45
|
+
dateformat: 'b dd',
|
|
46
|
+
drawyaxis: true,
|
|
47
|
+
fillchart: true,
|
|
48
|
+
timeformat: 'HH:mm',
|
|
49
|
+
streaming: pushapi,
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
})();
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
```css
|
|
57
|
+
/* Global Styles */
|
|
58
|
+
.millistream-chart-target {
|
|
59
|
+
position: relative;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.millistream-chart-target {
|
|
63
|
+
position: relative;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.millistream-chart {
|
|
67
|
+
margin-bottom: 30px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.millistream-chart-instrument {
|
|
71
|
+
color: #f90;
|
|
72
|
+
background-image: linear-gradient(
|
|
73
|
+
rgba(255, 153, 0, 0.6),
|
|
74
|
+
rgba(255, 153, 0, 0)
|
|
75
|
+
);
|
|
76
|
+
width: 2px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.millistream-chart-tooltip {
|
|
80
|
+
position: absolute;
|
|
81
|
+
background: #ffffff;
|
|
82
|
+
border: 1px solid lightblue;
|
|
83
|
+
border-radius: 2px;
|
|
84
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
85
|
+
font-size: 11px;
|
|
86
|
+
padding: 2px;
|
|
87
|
+
height: 14px;
|
|
88
|
+
pointer-events: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.millistream-chart-pointer {
|
|
92
|
+
width: 5px;
|
|
93
|
+
height: 5px;
|
|
94
|
+
border-radius: 50%;
|
|
95
|
+
box-shadow: 0px 0px 10px 2px #f90;
|
|
96
|
+
pointer-events: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.millistream-chart-x-legend {
|
|
100
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
101
|
+
font-size: 11px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.millistream-chart-y-legend {
|
|
105
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
106
|
+
font-size: 11px;
|
|
107
|
+
float: left;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.millistream-chart-y2-legend {
|
|
111
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
112
|
+
font-size: 11px;
|
|
113
|
+
float: right;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.millistream-chart-zoombox {
|
|
117
|
+
position: absolute;
|
|
118
|
+
background: rgb(255, 153, 0, 0.1);
|
|
119
|
+
pointer-events: none;
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## Widget documentation
|
|
124
|
+
Please refer to non npm-version documentation on widget customization.
|
|
125
|
+
https://widgets.millistream.com/3.0.3/doc/widgets.html
|
|
126
|
+
|
|
127
|
+
## Support
|
|
128
|
+
https://www.millistream.com
|
package/millistream-widgets.js
CHANGED
|
@@ -900,7 +900,7 @@ function Milli_Chart(settings) {
|
|
|
900
900
|
nextYear = currentDate.getFullYear() + 1;
|
|
901
901
|
}
|
|
902
902
|
}
|
|
903
|
-
oldx = p.x;
|
|
903
|
+
//oldx = p.x; används inte tydligen
|
|
904
904
|
p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
|
|
905
905
|
var datum;
|
|
906
906
|
var dash = false;
|
|
@@ -1407,6 +1407,7 @@ function Milli_Chart(settings) {
|
|
|
1407
1407
|
color = m_instrumentCss[k].color;
|
|
1408
1408
|
m_toolTip.arrowDiv[k].style.backgroundColor = color;
|
|
1409
1409
|
m_toolTip.arrowDiv[k].style.boxShadow = '0px 0px 17px 7px ' + color;
|
|
1410
|
+
m_toolTip.arrowDiv[k].style.pointerEvents = 'none';
|
|
1410
1411
|
}
|
|
1411
1412
|
if (posy > highy) highy = posy;
|
|
1412
1413
|
if (posy < lowy) lowy = posy;
|
|
@@ -4707,7 +4708,6 @@ var MillistreamWidgetSettings = {
|
|
|
4707
4708
|
thousandseparator: ' ',
|
|
4708
4709
|
streaming: false
|
|
4709
4710
|
};
|
|
4710
|
-
|
|
4711
4711
|
function MillistreamWidgetStreamingApi(settings) {
|
|
4712
4712
|
var _this = this;
|
|
4713
4713
|
_this.settings = {
|
|
@@ -5107,4 +5107,5 @@ function MillistreamWidgetStreamingApi(settings) {
|
|
|
5107
5107
|
milli_stream_connect();
|
|
5108
5108
|
}
|
|
5109
5109
|
exports.Milli_Chart = Milli_Chart;
|
|
5110
|
+
exports.MillistreamWidgetSettings = MillistreamWidgetSettings;
|
|
5110
5111
|
exports.MillistreamWidgetStreamingApi = MillistreamWidgetStreamingApi;
|