Github Graph

[Nurtimax]

how to create github graph

[Matraim]

1. yarn install react-activity-calendar

Import Calendar from 'react-activity-calendar'

[Neomax05]

import React, { useEffect } from 'react';
import { Card, CardContent } from '@mui/material';
import Calendar from 'react-activity-calendar';

import { useAppDispatch, useAppSelector } from '../../../store/hooks';
import { DEFAULT_THEME, fillMissingDates } from '../../../utils/helpers/graph';
import { getDataThunk, selectorGithubGraph } from '../../../store/slices/github-graph';

const UserGraphChart = () => {
const dispatch = useAppDispatch();
const { data, year } = useAppSelector((state) => selectorGithubGraph(state));

const arrayCalendarGrid = fillMissingDates(data, year);

useEffect(() => {
dispatch(getDataThunk());
}, [dispatch]);

return (
<Card
sx={{
'& svg': {
width: 'inherit',
height: 'inherit'
}
}}
>




);
};

export default UserGraphChart;