Skip to content

Commit b463569

Browse files
author
Niilo Keinänen
committed
v5.2.0
1 parent 70c5ce6 commit b463569

File tree

3 files changed

+75
-78
lines changed

3 files changed

+75
-78
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ Direct developer email support can be purchased through a [Support Plan][4] or b
6969
© LightningChart Ltd 2009-2022. All rights reserved.
7070

7171

72-
[Data Grid]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/classes/DataGrid.html
73-
[Chart XY]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/classes/ChartXY.html
74-
[Spark Chart]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/types/SparkChart.html
72+
[Data Grid]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/classes/DataGrid.html
73+
[Chart XY]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/classes/ChartXY.html
74+
[Spark Chart]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/types/SparkChart.html
7575

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"webpack-stream": "^7.0.0"
1818
},
1919
"dependencies": {
20-
"@arction/lcjs": "^5.1.1",
20+
"@arction/lcjs": "^5.2.0",
2121
"@arction/xydata": "^1.4.0"
2222
},
2323
"lightningChart": {

‎src/index.js

Lines changed: 71 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
11
const lcjs = require('@arction/lcjs')
2-
const { AxisTickStrategies, emptyTick, FormattingFunctions, SolidLine, SolidFill, synchronizeAxisIntervals, lightningChart, Themes } = lcjs
2+
const { AxisTickStrategies, emptyTick, FormattingFunctions, SolidLine, emptyFill, SolidFill, lightningChart, Themes } = lcjs
33

44
const highlightIntensity = 0.2 // [0, 1]
55
const assetsUrl = new URL(document.head.baseURI).origin + new URL(document.head.baseURI).pathname + 'examples/assets/1300'
66
const exampleContainer = document.getElementById('chart') || document.body
7-
const exampleBounds = exampleContainer.getBoundingClientRect()
8-
const dataGridWidthFull = 800
7+
if (exampleContainer === document.body) {
8+
exampleContainer.style.width = '100vw'
9+
exampleContainer.style.height = '100vh'
10+
exampleContainer.style.margin = '0px'
11+
}
12+
exampleContainer.style.display = 'flex'
13+
exampleContainer.style.flexDirection = 'row'
14+
const containerDataGrid = document.createElement('div')
15+
containerDataGrid.style.width = '60%'
16+
containerDataGrid.style.height = '100%'
17+
exampleContainer.append(containerDataGrid)
18+
const containerDrilldown = document.createElement('div')
19+
containerDrilldown.style.width = '40%'
20+
containerDrilldown.style.height = '100%'
21+
exampleContainer.append(containerDrilldown)
922

1023
let license = undefined
1124
try {
1225
license = LCJS_LICENSE
1326
} catch (e) {}
1427

15-
// NOTE: Using `Dashboard` is no longer recommended for new applications. Find latest recommendations here: https://lightningchart.com/js-charts/docs/basic-topics/grouping-charts/
16-
const dashboard = lightningChart({
17-
license: license,
18-
}).Dashboard({
19-
theme: Themes[new URLSearchParams(window.location.search).get('theme') || 'darkGold'] || undefined,
20-
numberOfColumns: 2,
21-
numberOfRows: 4,
22-
})
23-
24-
if (exampleBounds.width > 1200) {
25-
dashboard.setColumnWidth(0, dataGridWidthFull).setColumnWidth(1, exampleBounds.width - dataGridWidthFull)
26-
}
28+
const lc = lightningChart({
29+
resourcesBaseUrl: new URL(document.head.baseURI).origin + new URL(document.head.baseURI).pathname + 'resources/',
30+
})
2731

2832
/**
2933
* Calculate delta between open and close for given time range (1 hour, 1 day, etc.) from list of data points.
@@ -59,36 +63,41 @@ const setDrillDown = (() => {
5963

6064
const { name } = coinInfo
6165

62-
const chartRate = dashboard
63-
.createChartXY({ columnIndex: 1, rowIndex: 0 })
64-
.setTitle(`${name} Rate $`)
65-
.setTitlePosition('series-left-top')
66-
.setTitleMargin(0)
67-
.forEachAxis((axis) => axis.setAnimationScroll(false))
68-
chartRate.getDefaultAxisX().setTickStrategy(AxisTickStrategies.Empty)
69-
const seriesRate = chartRate
70-
.addLineSeries({ dataPattern: { pattern: 'ProgressiveX' } })
66+
const chart = lc
67+
.ChartXY({
68+
container: containerDrilldown,
69+
defaultAxisX: { type: 'linear-highPrecision' },
70+
theme: Themes[new URLSearchParams(window.location.search).get('theme') || 'darkGold'] || undefined,
71+
})
72+
.setTitle(name)
73+
chart
74+
.getDefaultAxisX()
75+
.setTickStrategy(AxisTickStrategies.DateTime)
76+
.setIntervalRestrictions((state) => ({
77+
startMin: state.dataMin,
78+
endMax: state.dataMax,
79+
}))
80+
chart.getDefaultAxisY().dispose()
81+
const axisRate = chart.addAxisY({ iStack: 3 }).setTitle(`Rate $`).setMargins(10, 0)
82+
const seriesRate = chart
83+
.addPointLineAreaSeries({ dataPattern: 'ProgressiveX', yAxis: axisRate })
84+
.setAreaFillStyle(emptyFill)
7185
.setName(`${name} Rate $`)
72-
.add(coinData.map((p) => ({ x: p.date, y: p.rate })))
73-
.setCursorResultTableFormatter((builder, series, x, y, dataPoint) =>
86+
.appendJSON(coinData.map((p) => ({ x: p.date, y: p.rate })))
87+
.setCursorResultTableFormatter((builder, series, dataPoint) =>
7488
builder
7589
.addRow(series.getName())
7690
.addRow(timeAxis.formatValue(dataPoint.x))
7791
.addRow(`$${series.axisY.formatValue(dataPoint.y)}`),
7892
)
7993

80-
const chartVolume = dashboard
81-
.createChartXY({ columnIndex: 1, rowIndex: 1 })
82-
.setTitle(`${name} Volume $`)
83-
.setTitlePosition('series-left-top')
84-
.setTitleMargin(0)
85-
.forEachAxis((axis) => axis.setAnimationScroll(false))
86-
chartVolume.getDefaultAxisX().setTickStrategy(AxisTickStrategies.Empty)
87-
chartVolume
88-
.getDefaultAxisY()
94+
const axisVolume = chart
95+
.addAxisY({ iStack: 2 })
96+
.setTitle(`Volume $`)
97+
.setMargins(10, 10)
8998
.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks.setFormattingFunction(FormattingFunctions.NumericUnits))
90-
const seriesVolume = chartVolume
91-
.addAreaSeries()
99+
const seriesVolume = chart
100+
.addAreaSeries({ yAxis: axisVolume })
92101
.setName(`${name} Volume $`)
93102
.add(coinData.map((p) => ({ x: p.date, y: p.volume })))
94103
.setCursorResultTableFormatter((builder, series, x, high, low) =>
@@ -98,70 +107,58 @@ const setDrillDown = (() => {
98107
.addRow(`$${(high / 10 ** 9).toFixed(3)} B`),
99108
)
100109

101-
const chartLiquidity = dashboard
102-
.createChartXY({ columnIndex: 1, rowIndex: 2 })
103-
.setTitle(`${name} Liquidity $`)
104-
.setTitlePosition('series-left-top')
105-
.setTitleMargin(0)
106-
.forEachAxis((axis) => axis.setAnimationScroll(false))
107-
chartLiquidity.getDefaultAxisX().setTickStrategy(AxisTickStrategies.Empty)
108-
chartLiquidity
109-
.getDefaultAxisY()
110+
const axisLiquidity = chart
111+
.addAxisY({ iStack: 1 })
112+
.setTitle(`Liquidity $`)
113+
.setMargins(10, 10)
110114
.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks.setFormattingFunction(FormattingFunctions.NumericUnits))
111-
const seriesLiquidity = chartLiquidity
112-
.addLineSeries({ dataPattern: { pattern: 'ProgressiveX' } })
115+
const seriesLiquidity = chart
116+
.addPointLineAreaSeries({ dataPattern: 'ProgressiveX', yAxis: axisLiquidity })
117+
.setAreaFillStyle(emptyFill)
113118
.setName(`${name} Liquidity $`)
114119
.add(coinData.map((p) => ({ x: p.date, y: p.liquidity })))
115-
.setCursorResultTableFormatter((builder, series, x, y, dataPoint) =>
120+
.setCursorResultTableFormatter((builder, series, dataPoint) =>
116121
builder
117122
.addRow(series.getName())
118123
.addRow(timeAxis.formatValue(dataPoint.x))
119124
.addRow(`$${series.axisY.formatValue(dataPoint.y)}`),
120125
)
121126

122-
const chartCap = dashboard
123-
.createChartXY({ columnIndex: 1, rowIndex: 3 })
124-
.setTitle(`${name} Market Cap $`)
125-
.setTitlePosition('series-left-top')
126-
.setTitleMargin(0)
127-
.forEachAxis((axis) => axis.setAnimationScroll(false))
128-
chartCap.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (ticks) => ticks.setGreatTickStyle(emptyTick))
129-
chartCap
130-
.getDefaultAxisY()
127+
const axisCap = chart
128+
.addAxisY({ iStack: 0 })
129+
.setTitle(`Market Cap $`)
130+
.setMargins(0, 10)
131131
.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks.setFormattingFunction(FormattingFunctions.NumericUnits))
132-
const seriesCap = chartCap
133-
.addLineSeries({ dataPattern: { pattern: 'ProgressiveX' } })
132+
const seriesCap = chart
133+
.addPointLineAreaSeries({ dataPattern: 'ProgressiveX', yAxis: axisCap })
134+
.setAreaFillStyle(emptyFill)
134135
.setName(`${name} Market Cap $`)
135136
.add(coinData.map((p) => ({ x: p.date, y: p.cap })))
136-
.setCursorResultTableFormatter((builder, series, x, y, dataPoint) =>
137+
.setCursorResultTableFormatter((builder, series, dataPoint) =>
137138
builder
138139
.addRow(series.getName())
139140
.addRow(timeAxis.formatValue(dataPoint.x))
140141
.addRow(`$${series.axisY.formatValue(dataPoint.y)}`),
141142
)
142143

143-
const charts = [chartRate, chartVolume, chartLiquidity, chartCap]
144-
const seriesList = [seriesRate, seriesVolume, seriesLiquidity, seriesCap]
145-
146-
const timeAxis = chartCap.getDefaultAxisX()
147-
const axesX = charts.map((chart) => chart.getDefaultAxisX())
148-
synchronizeAxisIntervals(...axesX)
149-
150-
const axesY = charts.map((chart) => chart.getDefaultAxisY())
151-
axesY.forEach((axis) => axis.setThickness(60).setChartInteractionZoomByWheel(false).setChartInteractionPanByDrag(false))
152-
153-
charts.forEach((chart) => chart.setAutoCursor((cursor) => cursor.setTickMarkerXVisible(false)))
144+
chart.forEachAxis((axis) => axis.setAnimationScroll(false))
145+
const timeAxis = chart.getDefaultAxisX()
146+
const axesY = [axisRate, axisVolume, axisLiquidity, axisCap]
147+
axesY.forEach((axis) => axis.setChartInteractionZoomByWheel(false).setChartInteractionPanByDrag(false).setMouseInteractions(false))
154148

155149
const dispose = () => {
156-
charts.forEach((chart) => chart.dispose())
150+
chart.dispose()
157151
}
158152

159153
activeDrillDown = { info: coinInfo, dispose }
160154
}
161155
})()
162156

163157
setTimeout(async () => {
164-
const dataGrid = dashboard.createDataGrid({ columnIndex: 0, rowIndex: 0, rowSpan: 4 })
158+
const dataGrid = lc.DataGrid({
159+
container: containerDataGrid,
160+
// theme: Themes.darkGold
161+
})
165162

166163
const gridColHighlight = 0
167164
const gridColCoin = 1

0 commit comments

Comments
 (0)