SpringBoot - stream, reChart (2024.05.19)

2024.05.19(일)

1. stream
이전 인턴 과정에서 forEach를 계속 사용해서 배열에 담아준 다음 전달하는게 너무 귀찮아서
stream메서드를 사용해서 처리했는데 한 번 더 정리하는 겸 해서 작성.
return으로 전달할 곳에 배열을 stream() 메서드 사용 후 
map() 안에 각 요소를 뽑고 난 다음 변경할 Dto 타입으로 builder로 감싸고
build() 이후 .collect(Collectors.toList()) 메서드 처리하면 된다. 
여기서 collect() 메서드는 stream()에서 요소를 수집하는 최종 연산이며,
스트림의 요소를 수집해서 컬렉션 형태로 반환하고, Collector 인터페이스를 구현한 객체를 인수로 받음.
그리고 Collectors.toList() 메서드는 리스트로 요소를 수집하는 Collectors 인터페이스를 구현한 클래스이며
스트림에서 요소를 수집하여 리스트로 반환하는 역할을 한다.

// StockService
public List<DetailStockReqDto> lastDetailStockData() {
        StockEntity stock = stockRepository.findTopByOrderByStockIdDesc();
        List<DetailStockEntity> detailStockEntities = detailStockRepository.findAllByStock_StockId(stock.getStockId());
        return detailStockEntities.stream()
                .map(detailStock -> DetailStockReqDto.builder()
                        .stockName(detailStock.getStockName())
                        .lastRate(detailStock.getLastRate())
                        .fluctuationRate(detailStock.getFluctuationRate())
                        .build()).collect(Collectors.toList());
}

2. 주식 데이터 시각화
현재 100개의 고정된 기업의 주식 데이터를 계속해서 조회할 수 있기 때문에
가장 마지막으로 조회된 StockRepository의 stockId를 찾고
해당 stockId에 해당하는 DetailStock을 찾아 보여주도록 하기.
보여줄 데이터는 변동률로 양수, 음수에 따라 다른 색상으로 보여주기.


3. reChart
현재는 100개 기업의 데이터를 보여줘야 하기에 Bar 형태의 차트를 사용했는데 
여기서 Cell 컴포넌트를 사용해서 변동률에 대한 조건 분기 후 그에 따른 색상으로 시각화
Cell 컴포넌트에 대해 궁금해서 찾아보니 각 데이터 포인트의 스타일을 개별적으로 지정할 수 있음.
여기서 fill 속성으로 각 바의 색상을 조건에 따라 설정이 가능.

// Stock
import axios from "axios";
import React, {useEffect, useState } from "react";
import LastStockComp from "./LastStockComp";

function Stock() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get("http://localhost:8080/scrap/last").then((r) => {
      setData(r.data);
    });
  }, []);

  return (
    <>
      <div className="w-full h-[96vh]">
        <LastStockComp data={data} />
      </div>
    </>
  );
}

export default Stock;

// LastStockComp
import React from "react";
import {
  BarChart,
  Bar,
  Brush,
  ReferenceLine,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Cell,
} from "recharts";

const LastStockComp = ({ data }) => {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <BarChart
        width={500}
        height={300}
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="stockName" />
        <YAxis />
        <Tooltip />
        <Legend />
        <ReferenceLine y={0} stroke="#000" />
        {/* <Bar dataKey="lastRate" fill="#8884d8" /> */}
        <Bar dataKey="fluctuationRate">
          {data.map((entry, index) => (
            <Cell
              key={index}
              fill={entry.fluctuationRate >= 0 ? "#8884d8" : "#ff0000"}
            />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
};

export default LastStockComp;