[React] 라이브러리 chart 각 데이터별로 color 값 주기

📍원래의 코드 

const adFormatDataGraph = {

    labels: adFormatData.labels,
    datasets: [
      {
        labels: adFormatData.labels,
        data: adFormatData.data,
        borderWidth: 0,
        // 추후 옵션 설정의 값 갯수에 따라 컬러 추가 필요합니다.
        backgroundColor: [
          'rgba(66, 165, 245, 1)',
          'rgba(102, 187, 106, 1)',
          'rgba(158, 189, 178, 1)',
        ],
      },
    ],
  };

  const funnelLevelDataGraph = {
    labels: funnelLevelData.labels,
    datasets: [
      {
        labels: funnelLevelData.labels,
        data: funnelLevelData.data,
        borderWidth: 0,
        backgroundColor: [
          'rgba(66, 165, 245, 1)',
          'rgba(102, 187, 106, 1)',
          'rgba(158, 189, 178, 1)',
        ],
      },
    ],
  };

 

 

기존의 코드는 데이터가 들어올때마다 다른 색상들을 보여주는게 아닌,

color를 설정한 기준으로 만드는 순서에 따라 

하늘 - 연두 - 회색 이런식으로 생성 되었다.

 

single-media, search, collection

awareness, conversion, consideration

 

총 6가지 데이터를 차트에 받아와야했고,

6가지 color로 구분을 지어주어야했다. 

 

 

 

데이터를 불러올 때 경우의 수를 생각함

 

collection <-> search

collection <-> single-media

search <-> single-media

 

awareness <-> conversion

consideration <-> conversion

awareness <-> consideration

 

우선은 데이터가 하나만 들어올때, 두개가 들어올때, 세개 다 들어올때의 경우의 수를 

적어보았다. 

 

  const adFormatDataGraphSingle = {
    labels: adFormatData.labels,
    datasets: [
      {
        labels: adFormatData.labels,
        data: adFormatData.data,
        borderWidth: 0,
        // 추후 옵션 설정의 값 갯수에 따라 컬러 추가 필요합니다.
        backgroundColor: [
          (adFormatData?.labels?.length === 1) &
          (adFormatData?.labels?.[0] === 'search')
            ? 'rgba(179, 157, 219, 1)'
            : (adFormatData?.labels?.length === 1) &
              (adFormatData?.labels?.[0] === 'single-media')
            ? 'rgba(67, 165, 245, 1)'
            : (adFormatData?.labels?.length === 1) &
              (adFormatData?.labels?.[0] === 'collection')
            ? 'rgba(102, 187, 106, 1)'
            : null,
        ],
      },
    ],
  };

하나만 들어올 땐, 

삼항연산자를 활용하여 간단히 해결.

 

두개만 들어올 땐? 

// collection <-> search
  const adFormatDataGraphDouble1 = {
    labels: adFormatData.labels.sort(),
    datasets: [
      {
        labels: adFormatData.labels.sort(),
        data: adFormatData.data,
        borderWidth: 0,
        backgroundColor: ['rgba(102, 187, 106, 1)', 'rgba(179, 157, 219, 1)'],
      },
    ],
  };

  // collection <-> single-media
  const adFormatDataGraphDouble2 = {
    labels: adFormatData.labels.sort(),
    datasets: [
      {
        labels: adFormatData.labels.sort(),
        data: adFormatData.data,
        borderWidth: 0,
        backgroundColor: ['rgba(102, 187, 106, 1)', 'rgba(67, 165, 245, 1)'],
      },
    ],
  };
  // search <-> single-media
  const adFormatDataGraphDouble3 = {
    labels: adFormatData.labels.sort(),
    datasets: [
      {
        labels: adFormatData.labels.sort(),
        data: adFormatData.data,
        borderWidth: 0,
        backgroundColor: ['rgba(179, 157, 219, 1)', 'rgba(67, 165, 245, 1)'],
      },
    ],
  };

 adFormatDataGraphDouble1,2,3 이라는 함수를 만들고,

그안에 로직을 구현하였다. 

 

여기서 문제가 ?

데이터의 color 값은 순서대로만 받아 올 수 있기때문에

search, single-media, collection 의 알파벳 순서에 따라 

sort() 메소드를 활용하여  collection, search, single-media 의 순서대로 

데이터 값을 받아 올 수 있도록 구현하였다.  

 

 

두개짜리 데이터들이 잘 들어오는 모습

 

 

세개짜리 데이터는?

 const adFormatDataGraphTriple = {
    labels: adFormatData.labels.sort(),
    datasets: [
      {
        labels: adFormatData.labels.sort(),
        data: adFormatData.data,
        borderWidth: 0,
        backgroundColor: [
          'rgba(102, 187, 106, 1)',
          'rgba(179, 157, 219, 1)',
          'rgba(67, 165, 245, 1)',
        ],
      },
    ],
  };

세개짜리 데이터도 잘들어옴.

<Pie
options={adFormatGraphOptions}
                data={
                  adFormatData?.labels?.length === 1
                    ? adFormatDataGraphSingle
                    : (adFormatData?.labels?.length === 2) &
                      (adFormatData?.labels.sort()?.[0] === 'search')
                    ? adFormatDataGraphDouble3
                    : (adFormatData?.labels?.length === 2) &
                      (adFormatData?.labels.sort()?.[0] === 'collection') &
                      (adFormatData?.labels.sort()?.[1] === 'search')
                    ? adFormatDataGraphDouble1
                    : (adFormatData?.labels?.length === 2) &
                      (adFormatData?.labels.sort()?.[0] === 'collection') &
                      (adFormatData?.labels.sort()?.[1] === 'single-media')
                    ? adFormatDataGraphDouble2
                    : adFormatData?.labels?.length === 3
                    ? adFormatDataGraphTriple
                    : adFormatDataGraphTriple
                }
              />

pie 컴포넌트안에 위에서 구현한 함수를 넣어준다 . 

 

awareness, consideration, conversion 도 똑같이 만들어주면되는데

 

여기서 주의해야할점은? 

위의

collection, search, single-media 의 데이터와 똑같이 기능을 구현하게 되면

알파벳 순서가 다르기때문에 원하는 색깔의 데이터가 안들어올지도 모른다.

각각의 알파벳 순서를 생각하며 알맞게 넣어주면 끝!