kline wip
This commit is contained in:
Adrian Brzeziński
parent
b4b2198af6
commit
0d7c899730
|
|
@ -1,16 +1,15 @@
|
|||
import { useEffect, useRef, useMemo, useState } from 'react'
|
||||
import { useEffect, useRef, useMemo } from 'react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import {
|
||||
widget,
|
||||
ChartingLibraryWidgetOptions,
|
||||
IChartingLibraryWidget,
|
||||
ResolutionString,
|
||||
} from '@public/charting_library'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { CHART_DATA_FEED, DEFAULT_MARKET_NAME } from 'utils/constants'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import { CHART_DATA_FEED } from 'utils/constants'
|
||||
import { COLORS } from 'styles/colors'
|
||||
import { init, dispose } from 'klinecharts'
|
||||
import axios from 'axios'
|
||||
|
||||
export interface ChartContainerProps {
|
||||
container: ChartingLibraryWidgetOptions['container']
|
||||
|
|
@ -30,15 +29,20 @@ export interface ChartContainerProps {
|
|||
|
||||
const TradingViewChart = () => {
|
||||
const { theme } = useTheme()
|
||||
const { width } = useViewport()
|
||||
|
||||
const [chartReady, setChartReady] = useState(false)
|
||||
const selectedMarketName = mangoStore((s) => s.selectedMarket.current?.name)
|
||||
const isMobile = width ? width < breakpoints.sm : false
|
||||
|
||||
const interval = 60
|
||||
console.log(selectedMarketName)
|
||||
const query = {
|
||||
resolution: interval,
|
||||
symbol: 'SOL/USDC',
|
||||
from: Math.floor(Date.now() / 1000) - 60 * 60 * 24 * 14,
|
||||
to: Math.floor(Date.now() / 1000),
|
||||
countback: 2,
|
||||
}
|
||||
const defaultProps = useMemo(
|
||||
() => ({
|
||||
symbol: DEFAULT_MARKET_NAME,
|
||||
symbol: 'SOL/USDC',
|
||||
interval: '60' as ResolutionString,
|
||||
theme: 'Dark',
|
||||
container: 'tv_chart_container',
|
||||
|
|
@ -54,7 +58,7 @@ const TradingViewChart = () => {
|
|||
}),
|
||||
[theme]
|
||||
)
|
||||
|
||||
console.log(defaultProps)
|
||||
const tvWidgetRef = useRef<IChartingLibraryWidget | null>(null)
|
||||
|
||||
let chartStyleOverrides = {
|
||||
|
|
@ -92,7 +96,7 @@ const TradingViewChart = () => {
|
|||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (tvWidgetRef.current && chartReady && selectedMarketName) {
|
||||
if (tvWidgetRef.current && selectedMarketName) {
|
||||
tvWidgetRef.current.setSymbol(
|
||||
selectedMarketName!,
|
||||
tvWidgetRef.current.activeChart().resolution(),
|
||||
|
|
@ -101,77 +105,127 @@ const TradingViewChart = () => {
|
|||
}
|
||||
)
|
||||
}
|
||||
}, [selectedMarketName, chartReady])
|
||||
}, [selectedMarketName])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (window) {
|
||||
// const widgetOptions: ChartingLibraryWidgetOptions = {
|
||||
// // debug: true,
|
||||
// symbol: defaultProps.symbol,
|
||||
// // BEWARE: no trailing slash is expected in feed URL
|
||||
// // tslint:disable-next-line:no-any
|
||||
// datafeed: new (window as any).Datafeeds.UDFCompatibleDatafeed(
|
||||
// defaultProps.datafeedUrl
|
||||
// ),
|
||||
// interval:
|
||||
// defaultProps.interval as ChartingLibraryWidgetOptions['interval'],
|
||||
// container:
|
||||
// defaultProps.container as ChartingLibraryWidgetOptions['container'],
|
||||
// library_path: defaultProps.libraryPath as string,
|
||||
// locale: 'en',
|
||||
// enabled_features: ['hide_left_toolbar_by_default'],
|
||||
// disabled_features: [
|
||||
// 'use_localstorage_for_settings',
|
||||
// 'timeframes_toolbar',
|
||||
// isMobile ? 'left_toolbar' : '',
|
||||
// 'show_logo_on_all_charts',
|
||||
// 'caption_buttons_text_if_possible',
|
||||
// 'header_settings',
|
||||
// // 'header_chart_type',
|
||||
// 'header_compare',
|
||||
// 'compare_symbol',
|
||||
// 'header_screenshot',
|
||||
// // 'header_widget_dom_node',
|
||||
// // 'header_widget',
|
||||
// 'header_saveload',
|
||||
// 'header_undo_redo',
|
||||
// 'header_interval_dialog_button',
|
||||
// 'show_interval_dialog_on_key_press',
|
||||
// 'header_symbol_search',
|
||||
// 'popup_hints',
|
||||
// ],
|
||||
// fullscreen: defaultProps.fullscreen,
|
||||
// autosize: defaultProps.autosize,
|
||||
// studies_overrides: defaultProps.studiesOverrides,
|
||||
// theme: theme === 'Light' ? 'Light' : 'Dark',
|
||||
// custom_css_url: '/styles/tradingview.css',
|
||||
// loading_screen: {
|
||||
// backgroundColor:
|
||||
// theme === 'Dark'
|
||||
// ? COLORS.BKG1.Dark
|
||||
// : theme === 'Light'
|
||||
// ? COLORS.BKG1.Light
|
||||
// : COLORS.BKG1.Mango,
|
||||
// },
|
||||
// overrides: {
|
||||
// timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
|
||||
// ...chartStyleOverrides,
|
||||
// },
|
||||
// }
|
||||
|
||||
// const tvWidget = new widget(widgetOptions)
|
||||
// tvWidgetRef.current = tvWidget
|
||||
|
||||
// tvWidgetRef.current.onChartReady(function () {
|
||||
// setChartReady(true)
|
||||
// })
|
||||
// //eslint-disable-next-line
|
||||
// }
|
||||
// }, [theme, isMobile, defaultProps])
|
||||
|
||||
const generatedKLineDataList = async (dataSize = 336) => {
|
||||
const response = await axios.get(`${CHART_DATA_FEED}/history`, {
|
||||
params: query,
|
||||
})
|
||||
const newData = response.data as any
|
||||
|
||||
const dataList = []
|
||||
for (let i = 0; i < dataSize; i++) {
|
||||
const kLineModel = {
|
||||
open: parseFloat(newData.o[i]),
|
||||
low: parseFloat(newData.l[i]),
|
||||
high: parseFloat(newData.h[i]),
|
||||
close: parseFloat(newData.c[i]),
|
||||
volume: parseFloat(newData.v[i]),
|
||||
timestamp: newData.t[i],
|
||||
}
|
||||
dataList.unshift(kLineModel)
|
||||
}
|
||||
return dataList
|
||||
}
|
||||
|
||||
function updateData(kLineChart: any) {
|
||||
setTimeout(async () => {
|
||||
if (kLineChart) {
|
||||
const newData = (await generatedKLineDataList(1))[0]
|
||||
newData.timestamp += 10000 * 60
|
||||
kLineChart.updateData(newData)
|
||||
}
|
||||
updateData(kLineChart)
|
||||
}, 10000)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (window) {
|
||||
const widgetOptions: ChartingLibraryWidgetOptions = {
|
||||
// debug: true,
|
||||
symbol: defaultProps.symbol,
|
||||
// BEWARE: no trailing slash is expected in feed URL
|
||||
// tslint:disable-next-line:no-any
|
||||
datafeed: new (window as any).Datafeeds.UDFCompatibleDatafeed(
|
||||
defaultProps.datafeedUrl
|
||||
),
|
||||
interval:
|
||||
defaultProps.interval as ChartingLibraryWidgetOptions['interval'],
|
||||
container:
|
||||
defaultProps.container as ChartingLibraryWidgetOptions['container'],
|
||||
library_path: defaultProps.libraryPath as string,
|
||||
locale: 'en',
|
||||
enabled_features: ['hide_left_toolbar_by_default'],
|
||||
disabled_features: [
|
||||
'use_localstorage_for_settings',
|
||||
'timeframes_toolbar',
|
||||
isMobile ? 'left_toolbar' : '',
|
||||
'show_logo_on_all_charts',
|
||||
'caption_buttons_text_if_possible',
|
||||
'header_settings',
|
||||
// 'header_chart_type',
|
||||
'header_compare',
|
||||
'compare_symbol',
|
||||
'header_screenshot',
|
||||
// 'header_widget_dom_node',
|
||||
// 'header_widget',
|
||||
'header_saveload',
|
||||
'header_undo_redo',
|
||||
'header_interval_dialog_button',
|
||||
'show_interval_dialog_on_key_press',
|
||||
'header_symbol_search',
|
||||
'popup_hints',
|
||||
],
|
||||
fullscreen: defaultProps.fullscreen,
|
||||
autosize: defaultProps.autosize,
|
||||
studies_overrides: defaultProps.studiesOverrides,
|
||||
theme: theme === 'Light' ? 'Light' : 'Dark',
|
||||
custom_css_url: '/styles/tradingview.css',
|
||||
loading_screen: {
|
||||
backgroundColor:
|
||||
theme === 'Dark'
|
||||
? COLORS.BKG1.Dark
|
||||
: theme === 'Light'
|
||||
? COLORS.BKG1.Light
|
||||
: COLORS.BKG1.Mango,
|
||||
},
|
||||
overrides: {
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
|
||||
...chartStyleOverrides,
|
||||
},
|
||||
}
|
||||
|
||||
const tvWidget = new widget(widgetOptions)
|
||||
tvWidgetRef.current = tvWidget
|
||||
|
||||
tvWidgetRef.current.onChartReady(function () {
|
||||
setChartReady(true)
|
||||
})
|
||||
//eslint-disable-next-line
|
||||
const initKline = async () => {
|
||||
const kLineChart = init('update-k-line')
|
||||
const data = await generatedKLineDataList()
|
||||
kLineChart.applyNewData(data)
|
||||
updateData(kLineChart)
|
||||
}
|
||||
}, [theme, isMobile, defaultProps])
|
||||
|
||||
initKline()
|
||||
return () => {
|
||||
dispose('update-k-line')
|
||||
}
|
||||
}, [])
|
||||
return (
|
||||
<div id={defaultProps.container as string} className="tradingview-chart" />
|
||||
<>
|
||||
<div
|
||||
style={{ height: '300px' }}
|
||||
id="update-k-line"
|
||||
className="k-line-chart"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"@types/howler": "^2.2.7",
|
||||
"@types/lodash": "^4.14.185",
|
||||
"assert": "^2.0.0",
|
||||
"axios": "^1.2.0",
|
||||
"big.js": "^6.2.1",
|
||||
"date-fns": "^2.29.3",
|
||||
"dayjs": "^1.11.3",
|
||||
|
|
@ -32,6 +33,7 @@
|
|||
"howler": "^2.2.3",
|
||||
"html-react-parser": "^3.0.4",
|
||||
"immer": "^9.0.12",
|
||||
"klinecharts": "^8.6.3",
|
||||
"lodash": "^4.17.21",
|
||||
"next": "^13.0.0",
|
||||
"next-i18next": "^11.1.1",
|
||||
|
|
|
|||
59
yarn.lock
59
yarn.lock
|
|
@ -2156,6 +2156,11 @@ async-mutex@^0.3.2:
|
|||
dependencies:
|
||||
tslib "^2.3.1"
|
||||
|
||||
asynckit@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
|
||||
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
|
||||
|
||||
atomic-sleep@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
|
||||
|
|
@ -2190,6 +2195,15 @@ axios@^0.21.0, axios@^0.21.1:
|
|||
dependencies:
|
||||
follow-redirects "^1.14.0"
|
||||
|
||||
axios@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.0.tgz#1cb65bd75162c70e9f8d118a905126c4a201d383"
|
||||
integrity sha512-zT7wZyNYu3N5Bu0wuZ6QccIf93Qk1eV8LOewxgjOZFd2DenOs98cJ7+Y6703d0wkaXGY6/nZd4EweJaHz9uzQw==
|
||||
dependencies:
|
||||
follow-redirects "^1.15.0"
|
||||
form-data "^4.0.0"
|
||||
proxy-from-env "^1.1.0"
|
||||
|
||||
axobject-query@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
|
||||
|
|
@ -2636,6 +2650,13 @@ color-name@^1.1.4, color-name@~1.1.4:
|
|||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
|
||||
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
|
||||
|
||||
combined-stream@^1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
|
||||
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
|
||||
dependencies:
|
||||
delayed-stream "~1.0.0"
|
||||
|
||||
commander@^2.20.3:
|
||||
version "2.20.3"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
|
||||
|
|
@ -2911,6 +2932,11 @@ delay@^5.0.0:
|
|||
resolved "https://registry.yarnpkg.com/delay/-/delay-5.0.0.tgz#137045ef1b96e5071060dd5be60bf9334436bd1d"
|
||||
integrity sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==
|
||||
|
||||
delayed-stream@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
|
||||
integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
|
||||
|
||||
des.js@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
|
||||
|
|
@ -3702,7 +3728,7 @@ flatted@^3.1.0:
|
|||
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
|
||||
integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
|
||||
|
||||
follow-redirects@^1.14.0:
|
||||
follow-redirects@^1.14.0, follow-redirects@^1.15.0:
|
||||
version "1.15.2"
|
||||
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
|
||||
integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
|
||||
|
|
@ -3712,6 +3738,15 @@ foreach@^2.0.5:
|
|||
resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
|
||||
integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
|
||||
|
||||
form-data@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
|
||||
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
|
||||
dependencies:
|
||||
asynckit "^0.4.0"
|
||||
combined-stream "^1.0.8"
|
||||
mime-types "^2.1.12"
|
||||
|
||||
fraction.js@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
|
||||
|
|
@ -4379,6 +4414,11 @@ keyvaluestorage-interface@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/keyvaluestorage-interface/-/keyvaluestorage-interface-1.0.0.tgz#13ebdf71f5284ad54be94bd1ad9ed79adad515ff"
|
||||
integrity sha512-8t6Q3TclQ4uZynJY9IGr2+SsIGwK9JHcO6ootkHCGA0CrQCRy+VkouYNO2xicET6b9al7QKzpebNow+gkpCL8g==
|
||||
|
||||
klinecharts@^8.6.3:
|
||||
version "8.6.3"
|
||||
resolved "https://registry.yarnpkg.com/klinecharts/-/klinecharts-8.6.3.tgz#9ff2c40e31d86ca0600abc5fb8bf546c61daf130"
|
||||
integrity sha512-hGDtWiMNywEDneZFmt+vZ6tOYutCDWV5FPBcXcn7L8kGwe73Q5yJayk8UzP9pIQSBWyxswWIySKh/BVFA6GhuQ==
|
||||
|
||||
language-subtag-registry@~0.3.2:
|
||||
version "0.3.21"
|
||||
resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
|
||||
|
|
@ -4538,6 +4578,18 @@ miller-rabin@^4.0.0:
|
|||
bn.js "^4.0.0"
|
||||
brorand "^1.0.1"
|
||||
|
||||
mime-db@1.52.0:
|
||||
version "1.52.0"
|
||||
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
|
||||
integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
|
||||
|
||||
mime-types@^2.1.12:
|
||||
version "2.1.35"
|
||||
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
|
||||
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
|
||||
dependencies:
|
||||
mime-db "1.52.0"
|
||||
|
||||
mimic-fn@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
|
||||
|
|
@ -5114,6 +5166,11 @@ prop-types@15.x, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, pro
|
|||
object-assign "^4.1.1"
|
||||
react-is "^16.13.1"
|
||||
|
||||
proxy-from-env@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
|
||||
integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
|
||||
|
||||
ps-tree@1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.2.0.tgz#5e7425b89508736cdd4f2224d028f7bb3f722ebd"
|
||||
|
|
|
|||
Loading…
Reference in New Issue