SmartCharts Examples

revione

Hi, I am interested in finding examples of smartcharts implementations.

https://www.npmjs.com/package/@binary-com/smartcharts?activeTab=readme

but I can't find much information about it, and the documentation is very dense,

Do you know how to make a simple implementation with react, typescript, etc.?

I have for example... this component on react, but it just run with issues....

import { useCallback } from "react"
import { SmartChart } from "@binary-com/smartcharts"

const apiToken = "asdfasdfasdfasdf"
const ws = new WebSocket("wss://ws.binaryws.com/websockets/v3?app_id=1089")

ws.onmessage = (msg) => {
  const data = JSON.parse(msg.data)

  if (data.msg_type === "tick_history") {
    // Llama a la función de suscripción
    if (typeof data.subscribe === "function") {
      data.subscribe(data)
    }
  } else if (data.msg_type === "forget") {
    // Llama a la función de olvido
    if (typeof data.forget === "function") {
      data.forget(data)
    }
  }
}

export const App = () => {
  const requestSubscribe = useCallback(
    (request: { req_id: number; subscribe: any }, cb: any) => {
      request.req_id = Date.now()
      request.subscribe = cb
      ws.send(JSON.stringify(request))
    },
    []
  )

  const requestForget = useCallback(
    (request: { req_id: number; forget: any }, cb: any) => {
      request.req_id = Date.now()
      request.forget = cb
      ws.send(JSON.stringify(request))
    },
    []
  )

  const requestAPI = useCallback((request: { req_id: number }) => {
    return new Promise((resolve, reject) => {
      request.req_id = Date.now()
      ws.send(JSON.stringify(request))

      ws.onmessage = (msg) => {
        const data = JSON.parse(msg.data)
        if (data.req_id === request.req_id) {
          resolve(data)
        }
      }
    })
  }, [])

  return (
    <SmartChart
      requestSubscribe={requestSubscribe}
      requestForget={requestForget}
      requestAPI={requestAPI}
      symbol="R_50"
      chartType="candle"
      granularity={60}
      startEpoch={Math.floor(Date.now() / 1000) - 60 * 60}
      endEpoch={Math.floor(Date.now() / 1000)}
    />
  )
}

revione

...