증권사 메인화면에 있는 그래프 만들어보기

주식이나 투자와 같은 서비스에서 딱 제일 먼저 생각나는 부분은 그래프!
그래서 대기업에서의 프론트들은 이 데이터들을 어떤식으로 그래프를 그리는지 궁금했다.
canvas로 그리는 것은 해봤지만 각각의 값을 모두 canvas에 그려주는 것은 비효율적일 것이라 생각하던 중에
문득, 대기업은 어떤식으로 구현하는지가 궁금했다.

 ㅇㅇ 사이트에 들어가서 확인해보니 svg의 path data를 토대로 그래프를 그려주는 것을 확인할 수 있었고, 한번 만들어보자. 라는 생각이 들었다. 이 데이터의 값을 백엔드에서 받는다고 가정하고 svg로 그래프를 만드는 것을 해봤다.

 간단하게 데이터를 넣어서 그려주는것은 간단했다. L, M 값을 통해서 그려주면 되는 것이었기 때문에.
(L : Line To, 현재 위치에서 지정한 위치까지 선을 그린다. M : Move To, 경로의 시작점을 지정한다.)

 즉, 시작점으로 이동해서 내가 원하는 지점까지 그리고 그 지점에서 다시 그리고 하는 식으로!

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 0 25.7528 L 0.0121299 19.2809 ... 1.89227 31.9551" fill="none" stroke="black" />
</svg>

 하지만 내가 원하는 것이 아니라 너무 작은 값들로 인해서 그려지는 것을 알게되었다. 값들은 단순히 임의로 넣었지만, 문득 이런 값들은 고정될 것이고, 각 페이지마다 그래프를 그릴 크기는 다를텐데? 라는 생각이 또 들었다. 그래서 각 path를 곱셈연산을 통해 바꾸는 함수를 만들어보기로 했다.

const scalePath = (
  path: string,
  xScaleFactor: number,
  yScaleFactor: number,
) => {
  const commands = path.split(" ");
  let scaledCommands = "";

  for (let i = 0; i < commands.length; i++) {
    const command = commands[i];

    if (command === "M" || command === "L") {
      const x = parseFloat(commands[i + 1]) * xScaleFactor;
      const y = parseFloat(commands[i + 2]) * yScaleFactor;
      scaledCommands += `${command} ${x.toFixed(6)} ${y.toFixed(6)} `;
      i += 2;
    } else {
      scaledCommands += `${command} `;
    }
  }

  return scaledCommands.trim();
};

  const originalPath =
    "M 0 25.7528 L 0.0121299 19.2809...L 1.89227 31.9551";
  const xScale = 200;
  const yScale = 10;
  const scaledPath = scalePath(originalPath, xScale, yScale);

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
   <path d={scaledPath} fill="none" stroke="black" />
</svg>

 좋군...생각대로 그래프가 내가 원하는 그래프로 데이터가 가공되는 것을 확인했다. 결론 적으로는 y축에 들어가야할 데이터를 백엔드에게 받는다면 그 값을 그래프로 그려주는 작업을 할 수 있는 것!