[Library] React-slick, Apex-charts 라이브러리 이용법 -리액트로 캐러셀 구현, 도넛그래프, 반원그래프, 오각형그래프, 막대그래프 그리기

이번 프로젝트에서 react-slick을 이용해 캐러셀을 구현하였고, 

apex-charts를 이용해 그래프를 그렸다. 

 

react-slick

import

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

 

세팅을 만들어준 다음, <Slide>태그에 세팅을 넣어준다. 

const StoryPageFinder: Settings = {
    slidesToShow: 5,
    arrows: true,
    nextArrow: <StNextArrow src={nextBtn} alt="nextBtn" />,
    prevArrow: <StNextArrow src={prevBtn} alt="prevBtn" />,
    infinite: false,
    vertical: true,
    slidesToScroll: 3,
    speed: 600,
  };

 <StPageFinder.StyledSlider {...StoryPageFinder}>
 ...
 </StPageFinder.StyledSlider>

 

styled components에서도 이게 지원됨

 

 StyledSlider: styled(Slider)`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    .slick-list {
    }
    .slick-track {
      height: 100%;
      width: 90%;
    }
    .slick-prev {
      left: 66px;
      top: 6%;
      z-index: 90;
      cursor: pointer;
      &::before {
        color: #1ab9c5;
      }
    }
    .slick-next {
      left: 66px;
      top: 92%;
      cursor: pointer;
      &::before {
        color: #1ab9c5;
      }
    }
  `,

 

세로 캐러셀을 만들 때 이용한 세팅이다. 저 화살표버튼 커스텀이 어려웠다.

이미지로 저렇게 nextArrow, prevArrow를 세팅으로 넣어줄 수 있지만, 원래 디폴트로 갖고있는 화살표도 남아있기 때문에 class로 접근해서 숨김처리를해야함.

 

//index.css

.slick-prev::before,
.slick-next::before {
  opacity: 0;
  display: none;
}

그럼 원래 라이브러리에서 제공하는 안예쁜 화살표버튼을 지울 수 있음

 

커스텀할 수 있는 옵션이 꽤 많다!

 

Apex-charts

 

https://apexcharts.com/docs/react-charts/

React-ApexChart - A React Chart wrapper for ApexCharts.js

 

이렇게 세가지종류의 그래프를 그려보았다.

처음엔 쫄았는데 생각보다 금방 뚝딱 만들 수 있었다.

 

import 하나만 하면 됨

 

import Chart from "react-apexcharts";

// 막대그래프

<Chart
                  type="bar"
                  series={[
                    {
                      name: `${data?.data.user_name}님의 점수`,
                      data: [data?.data.user_fluency, data?.data.user_accuracy],
                      color: "#00AEA8",
                    },
                    {
                      name: "평균 점수",
                      data: [data?.data.avg_fluency, data?.data.avg_accuracy], // 평균 점수 데이터
                      color: "rgb(239, 111, 156)",
                    },
                  ]}
                  options={{
                    chart: { height: 700, width: 500, toolbar: { show: false } },
                    theme: {
                      monochrome: {
                        enabled: true,
                        color: "#ffffff",
                        shadeTo: "light",
                      },
                    },
                    stroke: {
                      curve: "stepline",
                      width: 2,
                    },
                    xaxis: {
                      categories: ["유창성 (Fluency)", "정확성 (Accuracy)"],
                    },
                    plotOptions: {
                      bar: {
                        columnWidth: "30%", 
                      },
                    },
                  }}
                />

 

 

사람들은 options 변수 정의해서 하는 방법을 많이 쓰던데 나는 글케하면 자꾸 에러나서 그냥 태그 내에 다 넣었다

 

apex chart도 커스텀이 용이해서 디자인대로 적용할 수 있었다.

 

// 오각형 그래프 (육각형,칠각형,,, 등 categories의 length만큼 생김 )

<Chart
        options={{
          stroke: {
            width: 2,
          },
          fill: {
            opacity: 0.5,
          },
          chart: {
            height: 350,
            type: "radar",
          },
          series: series,
          xaxis: {
            categories: [
              "발음 정확성 (Pronunciation)",
              "끊어 읽기 (Mute, Pause)",
              "악센트 (Accent)",
              "스피드 (Speed)",
              "억양 (Intonation)",
            ],
          },
        }}
        series={series}
        type="radar"
        height={450}
      />

radar chart 라고 한다. 저기 series는 따로 변수로 빼서 색상이랑 opacity 커스텀했음.

 

<Chart
      options={{
        stroke: {
          width: 3,
        },
        fill: {
          opacity: 0.8,
        },
        chart: {
          type: "donut",
          height: 450,
          width: 450,
        },
        dataLabels: {
          enabled: false,
        },
        labels: ["Nice try", "Good", "Excellent"],
        colors: ["RGB(252, 21,51)", "RGB(252,109,8)", "RGB(28,169,125)"],

        plotOptions: {
          pie: {
            startAngle: -90, // 수정된 값
            endAngle: 90, // 수정된 값
            offsetY: 50, // 중심 위치 조정
            offsetX: 5,
            donut: {
              size: "70%",
            },
          },
        },
      }}
      series={[Number(data?.try_cnt), Number(data?.good_cnt), Number(data?.excellent_cnt)]}
      type="donut"
      height={450}
      width={450}
    />

도넛그래프는 반원모양으로 조정하기 위해 chat GPT와 싸워가며 만들었다. 

pid 옵션에서 startAngel이랑 endAngle로 반원모양을 만들 수 있었다.

donut 옵션은 퍼센트가 커질수록 가운데 뚫린 모양이 커짐