73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import React, {FC} from 'react'
|
|
import {gql, useQuery} from '@apollo/client'
|
|
|
|
import {Query} from '../../../__generated__/graphql-schema'
|
|
import {Pie} from '../components/charts'
|
|
import {useDashboardContext} from "../DashboardContext";
|
|
|
|
type ResponsivePieData = {
|
|
id: string
|
|
label: string
|
|
value: number
|
|
}[]
|
|
|
|
type QuestionsByDifficultyCountQuery = {
|
|
easy: Query['questions']
|
|
medium: Query['questions']
|
|
hard: Query['questions']
|
|
}
|
|
|
|
const QuestionsByDifficultyCount = gql`
|
|
query QuestionsByDifficultyCount(
|
|
$easyWhere: QuestionWhereInput!,
|
|
$mediumWhere: QuestionWhereInput!,
|
|
$hardWhere: QuestionWhereInput!,
|
|
) {
|
|
easy: questions(where: $easyWhere) {
|
|
totalCount
|
|
}
|
|
medium: questions(where: $mediumWhere) {
|
|
totalCount
|
|
}
|
|
hard: questions(where: $hardWhere) {
|
|
totalCount
|
|
}
|
|
}
|
|
`
|
|
|
|
export const QuestionsByDifficulty: FC = () => {
|
|
const {where} = useDashboardContext()
|
|
const {loading, data} = useQuery<QuestionsByDifficultyCountQuery>(
|
|
QuestionsByDifficultyCount, {
|
|
variables: {
|
|
easyWhere: {difficulty: ['easy'], ...where},
|
|
mediumWhere: {difficulty: ['medium'], ...where},
|
|
hardWhere: {difficulty: ['hard'], ...where},
|
|
},
|
|
})
|
|
|
|
if (loading || !data) return null
|
|
|
|
const mappedData: ResponsivePieData = [
|
|
{
|
|
id: "Fácil",
|
|
label: "Fácil",
|
|
value: data.easy.totalCount ?? 0
|
|
},
|
|
{
|
|
id: "Difícil",
|
|
label: "Difícil",
|
|
value: data.hard.totalCount ?? 0
|
|
},
|
|
{
|
|
id: "Média",
|
|
label: "Média",
|
|
value: data.medium.totalCount ?? 0
|
|
},
|
|
]
|
|
const filteredData = mappedData.filter(item => item.value)
|
|
|
|
return (
|
|
<Pie title="Questões por Dificuldade" data={filteredData}/>
|
|
)
|
|
} |