move move frontend to progress-test

app/javascript/pages/dashboard/charts/QuestionsByDifficulty.tsx

@@ -0,0 +1,73 @@
+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}/>
+  )
+}