fix dashboards and add empty state

app/javascript/pages/dashboard/Dashboard.tsx

@@ -1,4 +1,4 @@
-import React, {FC,} from 'react'
+import React from 'react'
 
 import {DashboardProvider} from './DashboardContext'
 import {
@@ -9,7 +9,7 @@ import {
 } from './charts'
 import {Filters} from './Filters'
 
-export const Dashboard: FC = () => (
+export const Dashboard = () => (
   <DashboardProvider>
     <main className="max-h-screen sm:px-8 gap-2 pt-2 sm:pt-4">
       <Filters/>

app/javascript/pages/dashboard/DashboardContext.tsx

@@ -31,7 +31,11 @@ export const whereDefaultState = (userContext: UserContext) => (
   userContext.isOnlyTeacher ? {userId: userContext.user?.id} : {}
 )
 
-export const DashboardProvider: FC = ({children}) => {
+type DashboardProviderProps = {
+  children: React.ReactNode
+}
+
+export const DashboardProvider = ({children}: DashboardProviderProps) => {
   const userContext = useCurrentUser()
   const [where, setWhere] = useState<QuestionWhereInput>(whereDefaultState(userContext))
   const providerValue = useMemo(() => ({where, setWhere}), [

app/javascript/pages/dashboard/components/charts/Pie.tsx

@@ -17,22 +17,26 @@ export const Pie: FC<Props> = ({title, data}) => {
       style={{ height: '36rem', width: '36rem' }}
     >
       <h3 className="text-lg leading-6 font-medium text-gray-900">{title}</h3>
-      <ResponsivePie
-        data={data}
-        margin={{top: 40, right: 80, bottom: 80, left: 80}}
-        innerRadius={0.5}
-        padAngle={0.7}
-        cornerRadius={3}
-        activeOuterRadiusOffset={8}
-        borderWidth={1}
-        borderColor={{from: 'color', modifiers: [['darker', 0.2]]}}
-        arcLinkLabelsSkipAngle={10}
-        arcLinkLabelsTextColor="#333333"
-        arcLinkLabelsThickness={2}
-        arcLinkLabelsColor={{from: 'color'}}
-        arcLabelsSkipAngle={10}
-        arcLabelsTextColor={{from: 'color', modifiers: [['darker', 2]]}}
-      />
+      {data.length ? (
+        <ResponsivePie
+          data={data}
+          margin={{top: 40, right: 80, bottom: 80, left: 80}}
+          innerRadius={0.5}
+          padAngle={0.7}
+          cornerRadius={3}
+          activeOuterRadiusOffset={8}
+          borderWidth={1}
+          borderColor={{from: 'color', modifiers: [['darker', 0.2]]}}
+          arcLinkLabelsSkipAngle={10}
+          arcLinkLabelsTextColor="#333333"
+          arcLinkLabelsThickness={2}
+          arcLinkLabelsColor={{from: 'color'}}
+          arcLabelsSkipAngle={10}
+          arcLabelsTextColor={{from: 'color', modifiers: [['darker', 2]]}}
+        />
+      ) : (
+        <div className='grid items-center text-center h-full'>Não existem dados disponíveis.</div>
+      )}
     </div>
   )
 }