24
loading...
building a cryto pnl dashboard lightweight-chart (part 1)
I used Binance to trade some crypto. While they offer a competitive fees and wide range of products, I found understand it P&L a bit difficult. Usually I use TradingView to visualize my positions, therefore I am thinking if it is possible to build an app to show my crypto P&L 🤑 and that begin my journey
I haven't decided everything yet, but I want to use NextJs for building this project. The project scaffoldings is nice and the deployment pipeline is surprising wonderful! For chart library, I want to try the one offered by TradingView - lightweight-chart.
The example of lightweight-chart is not a common React style I learnt. After a bit of studying, we can achieve the same with
useRefimport { createChart } from "lightweight-charts";
import { useEffect, useRef } from "react";
const data = [
{ time: "2019-04-11", value: 80.01 },
{ time: "2019-04-12", value: 96.63 },
//... skipped ...
{ time: "2019-04-20", value: 74.43 }
];
const Chart = () => {
const chartRef = useRef(null);
useEffect(() => {
const chart = createChart(chartRef.current, { width: 200, height: 200 });
const lineSeries = chart.addLineSeries();
lineSeries.setData(data);
}, []);
return <div ref={chartRef} />;
};
export default Chart;My understanding is that:
1) first a
2) the
3) the
1) first a
div is created in the React Page, the chartRef is bind.2) the
useEffect hook kicks in after the page is loaded3) the
createChart can render into the div that was bindThe full example will be liked this:
which is still having one error to resolve:
SyntaxError: Cannot use import statement outside a moduleThis error basically means that the
lightweight-chart is a frontend library but we are using it in a SSR (server side rendering) context, which is how NextJs work. Fortunately, it is pretty easy to resolve it. You will just need to dynamics import itconst Chart = dynamics(() => import("../components/charts", {
ssr: false
});24