Skip to content

Commit bdae37c

Browse files
niiloArctionniiloArction
committed
1 parent aacb1c3 commit bdae37c

File tree

4 files changed

+213
-213
lines changed

4 files changed

+213
-213
lines changed

‎.gitignore‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
node_modules
2-
dist
1+
node_modules
2+
dist
33
package-lock.json

‎package.json‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
{
2-
"version": "1.0.1",
3-
"scripts": {
4-
"build": "webpack --mode production",
5-
"start": "webpack-dev-server"
6-
},
7-
"license": "Custom",
8-
"private": true,
9-
"main": "./src/index.js",
10-
"devDependencies": {
11-
"copy-webpack-plugin": "^6.0.2",
12-
"html-webpack-plugin": "^3.2.0",
13-
"webpack-cli": "^3.3.10",
14-
"webpack-dev-server": "^3.9.0"
15-
},
16-
"dependencies": {
17-
"@arction/lcjs": "^3.2.0",
18-
"@arction/xydata": "^1.4.0",
19-
"clean-webpack-plugin": "^3.0.0",
20-
"webpack": "^4.41.2",
21-
"webpack-stream": "^5.2.1"
22-
}
23-
}
1+
{
2+
"version": "1.0.1",
3+
"scripts": {
4+
"build": "webpack --mode production",
5+
"start": "webpack-dev-server"
6+
},
7+
"license": "Custom",
8+
"private": true,
9+
"main": "./src/index.js",
10+
"devDependencies": {
11+
"copy-webpack-plugin": "^6.0.2",
12+
"html-webpack-plugin": "^3.2.0",
13+
"webpack-cli": "^3.3.10",
14+
"webpack-dev-server": "^3.9.0"
15+
},
16+
"dependencies": {
17+
"@arction/lcjs": "^3.2.0",
18+
"@arction/xydata": "^1.4.0",
19+
"clean-webpack-plugin": "^3.0.0",
20+
"webpack": "^4.41.2",
21+
"webpack-stream": "^5.2.1"
22+
}
23+
}

‎src/index.js‎

Lines changed: 111 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,111 @@
1-
/*
2-
* LightningChartJS example that showcases the 'packing resolution' property of StockSeries.
3-
*/
4-
// Import LightningChartJS
5-
const lcjs = require('@arction/lcjs')
6-
7-
// Extract required parts from LightningChartJS.
8-
const {
9-
lightningChart,
10-
AxisTickStrategies,
11-
OHLCSeriesTypes,
12-
emptyLine,
13-
Themes
14-
} = lcjs
15-
16-
// Import data-generator from 'xydata'-library.
17-
const {
18-
createProgressiveTraceGenerator
19-
} = require('@arction/xydata')
20-
21-
const dataSpan = 60 * 60 * 1000
22-
const dataFrequency = 1 * 1000
23-
24-
// Decide on an origin for DateTime axis.
25-
const dateOrigin = new Date(2018, 0, 1)
26-
// Create charts and series for two different packing resolutions.
27-
const dashboard = lightningChart().Dashboard({numberOfColumns: 1, numberOfRows: 2})
28-
const chartDefault = dashboard.createChartXY({
29-
columnIndex: 0,
30-
rowIndex: 0,
31-
// theme: Themes.darkGold
32-
})
33-
// Use DateTime TickStrategy with custom origin date.
34-
chartDefault
35-
.getDefaultAxisX()
36-
.setTickStrategy(
37-
AxisTickStrategies.DateTime,
38-
(tickStrategy) => tickStrategy.setDateOrigin(dateOrigin)
39-
)
40-
41-
chartDefault
42-
.setTitle('Default packing resolution')
43-
.setAutoCursor(cursor => {
44-
cursor.disposeTickMarkerY()
45-
cursor.setGridStrokeYStyle(emptyLine)
46-
})
47-
// Preventing ResultTable from getting cut at the edge
48-
chartDefault.setPadding({
49-
right: 42
50-
})
51-
52-
// show title 'USD on Y axis
53-
chartDefault.getDefaultAxisY()
54-
.setTitle('USD')
55-
56-
const chartLow = dashboard.createChartXY({
57-
columnIndex: 0,
58-
rowIndex: 1,
59-
// theme: Themes.darkGold
60-
})
61-
// Use DateTime TickStrategy with custom origin date.
62-
chartLow
63-
.getDefaultAxisX()
64-
.setTickStrategy(
65-
AxisTickStrategies.DateTime,
66-
(tickStrategy) => tickStrategy.setDateOrigin(dateOrigin)
67-
)
68-
69-
chartLow
70-
.setTitle('Very small packing resolution')
71-
.setAutoCursor(cursor => {
72-
cursor.disposeTickMarkerY()
73-
cursor.setGridStrokeYStyle(emptyLine)
74-
})
75-
// Preventing ResultTable from getting cut at the edge
76-
chartLow.setPadding({
77-
right: 42
78-
})
79-
80-
// show title 'USD on Y axis
81-
chartLow.getDefaultAxisY()
82-
.setTitle('USD')
83-
84-
const seriesDefault = chartDefault.addOHLCSeries(
85-
// Specify type of OHLC-series for adding points
86-
{ seriesConstructor: OHLCSeriesTypes.AutomaticPacking }
87-
)
88-
.setName('Default packing resolution')
89-
90-
const seriesLow = chartLow.addOHLCSeries({ seriesConstructor: OHLCSeriesTypes.AutomaticPacking })
91-
.setName('Very small packing resolution')
92-
// Set packing resolution that is equal to the minimum resolution between two points.
93-
// (essentially allows users to zoom to full resolution)
94-
.setPackingResolution(dataFrequency)
95-
96-
// Push points to both series.
97-
createProgressiveTraceGenerator()
98-
.setNumberOfPoints(dataSpan / dataFrequency)
99-
.generate()
100-
.toPromise()
101-
.then((data) => data.map((p) => ({
102-
x: p.x * dataFrequency, y: p.y
103-
})))
104-
.then((data) => {
105-
seriesDefault.add(data)
106-
seriesLow.add(data)
107-
// Fit axes to fully show difference between packing resolutions. (without fitting
108-
// the initial pixel size of axes would drastically affect automatic packing resolution)
109-
chartDefault.getDefaultAxisX().fit()
110-
chartLow.getDefaultAxisX().fit()
111-
})
1+
/*
2+
* LightningChartJS example that showcases the 'packing resolution' property of StockSeries.
3+
*/
4+
// Import LightningChartJS
5+
const lcjs = require('@arction/lcjs')
6+
7+
// Extract required parts from LightningChartJS.
8+
const {
9+
lightningChart,
10+
AxisTickStrategies,
11+
OHLCSeriesTypes,
12+
emptyLine,
13+
Themes
14+
} = lcjs
15+
16+
// Import data-generator from 'xydata'-library.
17+
const {
18+
createProgressiveTraceGenerator
19+
} = require('@arction/xydata')
20+
21+
const dataSpan = 60 * 60 * 1000
22+
const dataFrequency = 1 * 1000
23+
24+
// Decide on an origin for DateTime axis.
25+
const dateOrigin = new Date(2018, 0, 1)
26+
// Create charts and series for two different packing resolutions.
27+
const dashboard = lightningChart().Dashboard({numberOfColumns: 1, numberOfRows: 2})
28+
const chartDefault = dashboard.createChartXY({
29+
columnIndex: 0,
30+
rowIndex: 0,
31+
// theme: Themes.darkGold
32+
})
33+
// Use DateTime TickStrategy with custom origin date.
34+
chartDefault
35+
.getDefaultAxisX()
36+
.setTickStrategy(
37+
AxisTickStrategies.DateTime,
38+
(tickStrategy) => tickStrategy.setDateOrigin(dateOrigin)
39+
)
40+
41+
chartDefault
42+
.setTitle('Default packing resolution')
43+
.setAutoCursor(cursor => {
44+
cursor.disposeTickMarkerY()
45+
cursor.setGridStrokeYStyle(emptyLine)
46+
})
47+
// Preventing ResultTable from getting cut at the edge
48+
chartDefault.setPadding({
49+
right: 42
50+
})
51+
52+
// show title 'USD on Y axis
53+
chartDefault.getDefaultAxisY()
54+
.setTitle('USD')
55+
56+
const chartLow = dashboard.createChartXY({
57+
columnIndex: 0,
58+
rowIndex: 1,
59+
// theme: Themes.darkGold
60+
})
61+
// Use DateTime TickStrategy with custom origin date.
62+
chartLow
63+
.getDefaultAxisX()
64+
.setTickStrategy(
65+
AxisTickStrategies.DateTime,
66+
(tickStrategy) => tickStrategy.setDateOrigin(dateOrigin)
67+
)
68+
69+
chartLow
70+
.setTitle('Very small packing resolution')
71+
.setAutoCursor(cursor => {
72+
cursor.disposeTickMarkerY()
73+
cursor.setGridStrokeYStyle(emptyLine)
74+
})
75+
// Preventing ResultTable from getting cut at the edge
76+
chartLow.setPadding({
77+
right: 42
78+
})
79+
80+
// show title 'USD on Y axis
81+
chartLow.getDefaultAxisY()
82+
.setTitle('USD')
83+
84+
const seriesDefault = chartDefault.addOHLCSeries(
85+
// Specify type of OHLC-series for adding points
86+
{ seriesConstructor: OHLCSeriesTypes.AutomaticPacking }
87+
)
88+
.setName('Default packing resolution')
89+
90+
const seriesLow = chartLow.addOHLCSeries({ seriesConstructor: OHLCSeriesTypes.AutomaticPacking })
91+
.setName('Very small packing resolution')
92+
// Set packing resolution that is equal to the minimum resolution between two points.
93+
// (essentially allows users to zoom to full resolution)
94+
.setPackingResolution(dataFrequency)
95+
96+
// Push points to both series.
97+
createProgressiveTraceGenerator()
98+
.setNumberOfPoints(dataSpan / dataFrequency)
99+
.generate()
100+
.toPromise()
101+
.then((data) => data.map((p) => ({
102+
x: p.x * dataFrequency, y: p.y
103+
})))
104+
.then((data) => {
105+
seriesDefault.add(data)
106+
seriesLow.add(data)
107+
// Fit axes to fully show difference between packing resolutions. (without fitting
108+
// the initial pixel size of axes would drastically affect automatic packing resolution)
109+
chartDefault.getDefaultAxisX().fit()
110+
chartLow.getDefaultAxisX().fit()
111+
})

0 commit comments

Comments
 (0)