Merge pull request #183 from pkiop/feat/InjectPieChartData

파이 차트에 데이터 주입 / 차트 색 카테고리 지정색으로 그리도록 수정

frontend/src/components/UI/atoms/PieChart/index.tsx

@@ -4,24 +4,17 @@ import React, { useEffect } from 'react';
 import { IRecode } from 'components/UI/molecules/Recode';
 import { calNowTime, nowHourMin, convertMinute } from 'libs/time';
 
-// base css
 import 'billboard.js/dist/theme/insight.css';
-// import bb from 'billboard.js';
 
 import bb, { pie } from 'billboard.js';
 import * as S from './style';
 
-// for ESM environment, need to import modules as:
-
 export interface Props {
  recodeList?: IRecode[];
+ categoryList?: any;
  className?: string;
 }
 
-interface categoryCollect {
-
-}
-
 const reducer = (acc: any, recode: IRecode) => {
  const nowCategoryName = recode.category;
  const convertMinTime = convertMinute(calNowTime(recode.startTime,
@@ -38,17 +31,30 @@ const reducer = (acc: any, recode: IRecode) => {
  };
 };
 
+const colorReducer = (categoryList: any) => (acc: any, recode: IRecode) => {
+ const nowCategoryName = recode.category;
+ if (nowCategoryName in acc) {
+ return acc;
+ }
+ return {
+ ...acc,
+ [nowCategoryName]: categoryList.find((el: any) => el.labelName === nowCategoryName)?.color,
+ };
+};
+
 function PieChart({
- className, recodeList,
+ className, recodeList, categoryList,
 }: Props) {
  useEffect(() => {
  const categoryData = recodeList?.reduce(reducer, {});
- console.log('CD : ', categoryData);
+ const colorData = recodeList?.reduce(colorReducer(categoryList), {});
+ const dataArray = Object.entries(categoryData || {}).map((el: any) => el);
 
  bb.generate({
  data: {
- columns: [['data', 30], ['data2', 40]],
- type: pie(), // for ESM specify as: pie()
+ columns: dataArray.length === 0 ? [['empty', 1]] : dataArray,
+ type: pie(),
+ colors: colorData,
  },
  bindto: '#pieChart',
  });

frontend/src/components/UI/organisms/Board/index.tsx

@@ -11,6 +11,7 @@ export interface Props {
 
 function Board({ goalTime, recodeList, className }: Props) {
  const nowTime = recodeList?.reduce((acc: number, recode: IRecode) => {
+ if (recode.isActive === false) return acc;
  const endTime = recode.endTime?.hour ? recode.endTime : nowHourMin();
  const calValue = calNowTime(recode.startTime, endTime);
  return acc + calValue.hour + calValue.min / 60;

frontend/src/graphql/mutations.ts

@@ -88,7 +88,11 @@ export const createUser = /* GraphQL */ `
  createUser(input: $input, condition: $condition) {
  id
  username
- categoryList
+ categoryList {
+ color
+ labelName
+ }
+ goalTime
  createdAt
  updatedAt
  owner

frontend/src/pages/Main/index.tsx

@@ -29,9 +29,12 @@ function Main() {
  });
 
  const {
- loading: userLoading, error: userError, data: userData,
+ loading: userLoading, error: userError, data: userData, refetch: userRefetch,
  } = useQuery(gql`${getUser}`);
 
+ // #TODO Login 시 user정보가 하나도 없는 user라면 카테고리 설정 페이지로 이동
+ const [addUserData] = useMutation(gql`${createUser}`);
+
  // #TODO let 없이 로직 수정하기..
  let tempGoalTime = 13;
  let tempLabelList = [];
@@ -41,26 +44,37 @@ function Main() {
  tempLabelList = userData.getUser.items[0]?.categoryList;
  tempGoalTime = userData.getUser.items[0]?.goalTime;
  } else {
- tempLabelList = [{ color: '#123455', labelName: 'develop' }, { color: '#938193', labelName: 'sleep' }, { color: '#000111', labelName: 'reading' }, { color: '#eeeeee', labelName: 'else' }];
+ const defaultLabelList = [{ color: 'red', labelName: '개발' }, { color: 'blue', labelName: '잠' }, { color: 'green', labelName: '책' }, { color: 'yellow', labelName: '운동' }, { color: 'skyblue', labelName: '산책' }, { color: 'black', labelName: '기타' }];
+ addUserData({
+ variables: {
+ input: {
+ categoryList: defaultLabelList,
+ goalTime: 12,
+ },
+ },
+ }).then(() => {
+ userRefetch();
+ });
  }
  }
  }
 
- // #TODO Login 시 user정보가 하나도 없는 user라면 카테고리 설정 페이지로 이동
- const [addUserData] = useMutation(gql`${createUser}`);
-
  if (userError) {
  console.error('userError', userError);
  }
  if (error) {
  console.error('error : ', error);
  }
 
+ if (userLoading || tempLabelList.length === 0) {
+ return <></>;
+ }
+
  const contents = (
  <>
  <S.UpperWrap>
  <Board goalTime={tempGoalTime} recodeList={data?.listTimeRecodes?.items}/>
- <PieChart recodeList={data?.listTimeRecodes?.items} />
+ <PieChart recodeList={data?.listTimeRecodes?.items} categoryList={tempLabelList} />
  </S.UpperWrap>
  <RecodeList
  setUpdateRecodeId={setClickedRecodeId}