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 useRef

import { 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 div is created in the React Page, the chartRef is bind.
2) the useEffect hook kicks in after the page is loaded
3) the createChart can render into the div that was bind

The full example will be liked this:

which is still having one error to resolve:

SyntaxError: Cannot use import statement outside a module

This 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 it

const Chart = dynamics(() => import("../components/charts", {
  ssr: false
});

  • There are some Babel plugin config difference with codesandbox, but the code works on my VSCode. The working version of code can be found here and demo can be found here

18

Tags:

NextjsLightweightchart