Chart.js를 사용해서 사용자 주간 학습 일자를 시각화 하여 구현하였습니다.

ChartWeekly.jsx

import React, { useEffect, useState } from 'react';
import { styled } from 'styled-components';

function ChartWeekly(props) {
    const [weeklyAttend, setWeeklyAttend] = useState([10.0, 0, 0, 0, 0, 0, 0])
    const [wkTotTm, setWkTotTm] = useState('00H00M')
    useEffect(() => {
        // 초기화
        return () => {
            // 클린
        }
    }, [])

    useEffect(() => {
        if (props.data) {
            const dataObject = props.data
            const dataArray = Object.entries(dataObject).sort((a, b) => {
                // 주어진 요일 순서대로 정렬하기 위해 숫자로 변환하여 비교
                const weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
                return weekdays.indexOf(a[0]) - weekdays.indexOf(b[0]);
            }).map((entry) => entry[1]).slice(2)
            setWeeklyAttend((prevWeeklyAttend)=>dataArray)
            setWkTotTm(props.data.weekTotal)
        }
    }, [props])

    const dayWkNmHandler = (idx) => {
        let wkNm = ''
        switch (idx) {
            case 0:
                wkNm = '월'
                break;
            case 1:
                wkNm = '화'
                break;
            case 2:
                wkNm = '수'
                break;
            case 3:
                wkNm = '목'
                break;
            case 4:
                wkNm = '금'
                break;
            case 5:
                wkNm = '토'
                break;
            case 6:
                wkNm = '일'
                break;
        }
        return wkNm
    }

    return (
        <Wrap>
            <ChartWeelkyWrap>
                <AttendancesWrap>
                    {weeklyAttend.map((dayWk, idx) => {
                        return (
                            <AttendanceDiv>
                                <DayWk>{dayWkNmHandler(idx)}</DayWk>
                                <EllipseDiv isAttend={dayWk} />
                            </AttendanceDiv>
                        )
                    })}
                    <WkTotWrap>
                        <WkTotTmTitle>TOTAL</WkTotTmTitle>
                        <WkTotTm>{wkTotTm}</WkTotTm>
                    </WkTotWrap>

                </AttendancesWrap>
            </ChartWeelkyWrap>
        </Wrap>
    );
}