37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { useQuery } from 'react-query';
|
|
import { format } from 'date-fns';
|
|
import { ptBR } from 'date-fns/locale';
|
|
import api from '../../../services/api';
|
|
|
|
export const MapaCalor: React.FC = () => {
|
|
const { data: atividadesDiarias } = useQuery('atividadesDiarias', async () => {
|
|
const response = await api.get('/dashboard/atividades/diarias');
|
|
return response.data;
|
|
});
|
|
|
|
const intensidadeCor = (quantidade: number) => {
|
|
if (quantidade === 0) return 'bg-gray-100 dark:bg-gray-800';
|
|
if (quantidade <= 3) return 'bg-blue-100 dark:bg-blue-900';
|
|
if (quantidade <= 6) return 'bg-blue-300 dark:bg-blue-700';
|
|
return 'bg-blue-500 dark:bg-blue-500';
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
Mapa de Atividades
|
|
</h2>
|
|
<div className="grid grid-cols-7 gap-2">
|
|
{atividadesDiarias?.map((dia: any) => (
|
|
<div
|
|
key={dia.data}
|
|
className={`aspect-square rounded-sm ${intensidadeCor(dia.quantidade)}`}
|
|
title={`${format(new Date(dia.data), "dd 'de' MMMM", { locale: ptBR })}: ${dia.quantidade} atividades`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|