import React from "react" ; import { Typography , Paper } from "@material-ui/core" ; import CalendarHeatmap from "react-calendar-heatmap" ; import ReactTooltip from "react-tooltip" ; import "react-calendar-heatmap/dist/styles.css" ; import { makeStyles , Theme , createStyles } from "@material-ui/core/styles" ; import getDate from "utils/getDate" ; import Select from "react-select" ; import dateFormat from "dateformat" ; import Dialog from "./Dialog" ; import { SubmissionType , yearListType , QuestionMapDateType } from "types" ; import { useSelector } from "react-redux" ; import { selectSubmissionList } from "reducers/slices/FetchedDataSlice" ; const useStyles = makeStyles ( ( theme ) => createStyles ( { root : { "&:hover" : { background : "#fafafa" , boxShadow : "20px 20px 60px #d5d5d5,-20px -20px 60px #ffffff" , } , } , containerForm : { display : "flex" , justifyContent : "space-between" , } , containerHeatmap : { margin : "auto" , padding : "1rem 3rem 1rem 3rem" , } , dropdown : { width : "12vw" , padding : "8px" , } , } ) ) ; /**
 * SubmissionList - is the list of submissions
 * QuestionMap-{} - is an object sorted by some paramater(duplictes handling) eg date and has {date: , quest6ions: ,}
 * yearList - is the list of years to be put in to the select component
 */ /**
 * Takes the resposne (all submissions) and returns a hashmap for all the
 *  submission sorted by dates
 */ const prepareData = ( SubmissionList ) => { const LastSubmissionYear = getDate ( SubmissionList [ 0 ] . creationTimeSeconds ) . getFullYear ( ) ; const FirstSubmissionYear = getDate ( SubmissionList [ SubmissionList . length - 1 ] . creationTimeSeconds ) . getFullYear ( ) ; let yearList = [ ] ; for ( let idx = FirstSubmissionYear ; idx <= LastSubmissionYear ; idx ++ ) yearList . push ( { value : idx , label : idx . toString ( ) } ) ; let QuestionMap = { } ; SubmissionList . forEach ( ( attempt ) => { const date = getDate ( attempt . creationTimeSeconds ) ; const dateKey = date . toISOString ( ) . slice ( 0 , 10 ) ; if ( ! QuestionMap [ dateKey ] ) { QuestionMap [ dateKey ] = { date : date , questions : [ attempt ] , } ; } else { QuestionMap [ dateKey ] . questions . push ( attempt ) ; } } ) ; return { QuestionMap , yearList } ; } ; param QuestionMap param year const filterData = ( QuestionMap , year ) => { const QuestionListYear = [ ] ; for ( const [ , value ] of Object . entries ( QuestionMap ) ) { const { date } = value ; if ( date . getFullYear ( ) === year ) QuestionListYear . push ( value ) ; } return QuestionListYear ; } ; param year const getYearDate = ( year ) : Record < string , Date > => { const dateObject = { startDate : new Date ( year , 0 , 0 ) , endDate : new Date ( year , 11 , 31 ) , } ; return dateObject ; } ; const Heatmap = ( { drawerOpen } ) => { const classes = useStyles ( ) ; const SubmissionList = useSelector ( selectSubmissionList ) ; const { QuestionMap , yearList } = prepareData ( SubmissionList ) ; const [ year , setYear ] = React . useState ( yearList [ yearList . length - 1 ] . value ) ; const [ open , setOpen ] = React . useState ( false ) ; const QuestionListYear = filterData ( QuestionMap , year ) ; const [ dialogQuestionList , setDialogQuestionList ] = React . useState < QuestionMapDateType > ( QuestionListYear [ QuestionListYear . length - 1 ] ) ; React . useEffect ( ( ) => { ReactTooltip . rebuild ( ) ; } , [ year , drawerOpen ] ) ; const Dates = getYearDate ( year ) ; let numberOfSubmissions = 0 ; QuestionListYear . forEach ( ( { questions } ) => { numberOfSubmissions += questions . length ; } ) ; return ( < > < Paper className = { classes . root } > < div className = { classes . containerForm } > < Typography variant = "h6" style = { { padding : "8px" } } > Number of Submissions in { year } : { numberOfSubmissions } < /Typography> < Select className = { classes . dropdown } options = { yearList } defaultValue = { yearList [ yearList . length - 1 ] } onChange = { ( options ) => setYear ( options ! . value ) } > < /Select> < /div> < div className = { classes . containerHeatmap } > < CalendarHeatmap startDate = { Dates . startDate } endDate = { Dates . endDate } values = { QuestionListYear } classForValue = { ( value ) => { if ( ! value ) { return "color-empty" ; } const count = Math . min ( 4 , Math . ceil ( value . questions . length / 4 ) ) ; return `color-github-${ count }` ; } } tooltipDataAttrs = { ( value ) => { if ( value && value ?. date && value ?. questions ) { return { "data-tip" : `
                  ${ value . questions . length } Submissions on
                  ${ dateFormat ( value . date , " mmm dS, yyyy" ) }` , } ; } else return { } ; } } onClick = { ( value ) => { if ( value && value . questions ) { setOpen ( true ) ; setDialogQuestionList ( value ) ; } } } /> < ReactTooltip / > < /div> < /Paper> < Dialog open = { open } setOpen = { setOpen } dialogData = { dialogQuestionList } / > < />); } ; export default Heatmap ;