feat: add hover tooltips to all charts and increase project legend font
- PieChart (org dashboard): tooltip on hover shows project name, time and % - BarChart (member detail): tooltip on hover shows period label and value - MiniPieChart (member detail): tooltip on hover shows project name, time and % - Increase project stats legend font from text-[10px] to text-xs (12px) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gabriel Santana de Menezes
parent
92847f4095
commit
6e77f7b194
2 changed files with 178 additions and 47 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { X, Mail, Clock, CheckCircle2, Loader2, AlertCircle, TrendingUp, Zap } from "lucide-react";
|
||||
import { format, differenceInDays } from "date-fns";
|
||||
|
|
@ -27,6 +27,24 @@ function getPeriodLabel(s: PeriodStats, groupedBy: "DAY" | "MONTH"): string {
|
|||
return `${MONTH_NAMES[s.month - 1]}/${String(s.year).slice(2)}`;
|
||||
}
|
||||
|
||||
interface TooltipState { x: number; y: number; content: string }
|
||||
|
||||
function ChartTooltip({ tooltip }: { tooltip: TooltipState }) {
|
||||
const above = tooltip.y > 40;
|
||||
return (
|
||||
<div
|
||||
className="absolute pointer-events-none z-20 bg-surface border border-border-soft rounded-lg px-2 py-1 text-xs font-bold text-text-main shadow-lg whitespace-nowrap"
|
||||
style={{
|
||||
left: tooltip.x,
|
||||
top: above ? tooltip.y - 34 : tooltip.y + 8,
|
||||
transform: "translateX(-50%)",
|
||||
}}
|
||||
>
|
||||
{tooltip.content}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Avatar({ name, photo }: { name: string; photo?: string | null }) {
|
||||
if (photo) return <img src={photo} alt={name} className="w-14 h-14 rounded-2xl object-cover shrink-0" />;
|
||||
const initials = name.split(" ").slice(0, 2).map((n) => n[0]).join("").toUpperCase();
|
||||
|
|
@ -42,12 +60,23 @@ function BarChart({
|
|||
valueKey,
|
||||
color,
|
||||
groupedBy,
|
||||
formatValue,
|
||||
}: {
|
||||
data: PeriodStats[];
|
||||
valueKey: "finishedTasksCount" | "totalMinutesWorked";
|
||||
color: string;
|
||||
groupedBy: "DAY" | "MONTH";
|
||||
formatValue: (v: number) => string;
|
||||
}) {
|
||||
const [tooltip, setTooltip] = useState<TooltipState | null>(null);
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent, content: string) => {
|
||||
const rect = svgRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
setTooltip({ x: e.clientX - rect.left, y: e.clientY - rect.top, content });
|
||||
};
|
||||
|
||||
const values = data.map((d) => d[valueKey] as number);
|
||||
const maxVal = Math.max(...values, 1);
|
||||
const chartW = 220;
|
||||
|
|
@ -62,7 +91,13 @@ function BarChart({
|
|||
};
|
||||
|
||||
return (
|
||||
<svg viewBox={`0 0 ${chartW} ${barAreaH + 18}`} className="w-full">
|
||||
<div className="relative">
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={`0 0 ${chartW} ${barAreaH + 18}`}
|
||||
className="w-full"
|
||||
onMouseLeave={() => setTooltip(null)}
|
||||
>
|
||||
{data.map((d, i) => {
|
||||
const val = d[valueKey] as number;
|
||||
const barH = maxVal > 0 ? Math.max(val > 0 ? 2 : 0, Math.round((val / maxVal) * barAreaH)) : 0;
|
||||
|
|
@ -72,9 +107,42 @@ function BarChart({
|
|||
|
||||
return (
|
||||
<g key={i}>
|
||||
<rect x={x} y={y} width={barW} height={barH} rx={2} fill={color} opacity={val === 0 ? 0.12 : 0.85} />
|
||||
<rect
|
||||
x={x}
|
||||
y={y}
|
||||
width={barW}
|
||||
height={barH}
|
||||
rx={2}
|
||||
fill={color}
|
||||
opacity={val === 0 ? 0.12 : 0.85}
|
||||
className="cursor-pointer transition-opacity hover:opacity-100"
|
||||
onMouseMove={(e) =>
|
||||
handleMouseMove(e, `${getPeriodLabel(d, groupedBy)}: ${formatValue(val)}`)
|
||||
}
|
||||
/>
|
||||
{/* invisible hit area for zero-height bars */}
|
||||
{val === 0 && (
|
||||
<rect
|
||||
x={x}
|
||||
y={0}
|
||||
width={barW}
|
||||
height={barAreaH}
|
||||
fill="transparent"
|
||||
onMouseMove={(e) =>
|
||||
handleMouseMove(e, `${getPeriodLabel(d, groupedBy)}: ${formatValue(val)}`)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{label && (
|
||||
<text x={x + barW / 2} y={barAreaH + 12} textAnchor="middle" fontSize="7" fontWeight="700" fill="currentColor" opacity="0.45">
|
||||
<text
|
||||
x={x + barW / 2}
|
||||
y={barAreaH + 12}
|
||||
textAnchor="middle"
|
||||
fontSize="7"
|
||||
fontWeight="700"
|
||||
fill="currentColor"
|
||||
opacity="0.45"
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
)}
|
||||
|
|
@ -82,10 +150,15 @@ function BarChart({
|
|||
);
|
||||
})}
|
||||
</svg>
|
||||
{tooltip && <ChartTooltip tooltip={tooltip} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MiniPieChart({ data }: { data: MemberProjectStats[] }) {
|
||||
const [tooltip, setTooltip] = useState<TooltipState | null>(null);
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
|
||||
const total = data.reduce((s, d) => s + d.totalMinutes, 0);
|
||||
if (total === 0 || data.length === 0) {
|
||||
return (
|
||||
|
|
@ -108,17 +181,40 @@ function MiniPieChart({ data }: { data: MemberProjectStats[] }) {
|
|||
const ix2 = cx + innerR * Math.cos(startAngle), iy2 = cy + innerR * Math.sin(startAngle);
|
||||
const largeArc = angle > Math.PI ? 1 : 0;
|
||||
const path = `M ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} L ${ix1} ${iy1} A ${innerR} ${innerR} 0 ${largeArc} 0 ${ix2} ${iy2} Z`;
|
||||
const result = { path, color: CHART_COLORS[i % CHART_COLORS.length], name: d.projectName, fraction };
|
||||
const pct = (fraction * 100).toFixed(0);
|
||||
const result = { path, color: CHART_COLORS[i % CHART_COLORS.length], label: `${d.projectName}: ${formatMinutes(d.totalMinutes)} (${pct}%)` };
|
||||
startAngle = endAngle;
|
||||
return result;
|
||||
});
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent, content: string) => {
|
||||
const rect = svgRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
setTooltip({ x: e.clientX - rect.left, y: e.clientY - rect.top, content });
|
||||
};
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 100 100" className="w-full h-full">
|
||||
<div className="relative w-full h-full">
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox="0 0 100 100"
|
||||
className="w-full h-full"
|
||||
onMouseLeave={() => setTooltip(null)}
|
||||
>
|
||||
{slices.map((s, i) => (
|
||||
<path key={i} d={s.path} fill={s.color} stroke="var(--color-surface,#fff)" strokeWidth="1.5" />
|
||||
<path
|
||||
key={i}
|
||||
d={s.path}
|
||||
fill={s.color}
|
||||
stroke="var(--color-surface,#fff)"
|
||||
strokeWidth="1.5"
|
||||
className="cursor-pointer transition-opacity hover:opacity-90"
|
||||
onMouseMove={(e) => handleMouseMove(e, s.label)}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
{tooltip && <ChartTooltip tooltip={tooltip} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -257,6 +353,7 @@ export const MemberDetailModal: React.FC<MemberDetailModalProps> = ({
|
|||
valueKey="finishedTasksCount"
|
||||
color="#7C3AED"
|
||||
groupedBy={data.groupedBy}
|
||||
formatValue={(v) => `${v} tarefa${v !== 1 ? "s" : ""}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -272,6 +369,7 @@ export const MemberDetailModal: React.FC<MemberDetailModalProps> = ({
|
|||
valueKey="totalMinutesWorked"
|
||||
color="#06B6D4"
|
||||
groupedBy={data.groupedBy}
|
||||
formatValue={formatMinutes}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -297,7 +395,7 @@ export const MemberDetailModal: React.FC<MemberDetailModalProps> = ({
|
|||
<div key={p.projectId ?? "geral"} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full shrink-0" style={{ background: CHART_COLORS[i % CHART_COLORS.length] }} />
|
||||
<span className="text-xs font-bold text-text-main truncate flex-1">{p.projectName}</span>
|
||||
<span className="text-[10px] font-black text-text-muted shrink-0">
|
||||
<span className="text-xs font-black text-text-muted shrink-0">
|
||||
{formatMinutes(p.totalMinutes)} ({pct}%)
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { MemberDetailModal } from "../components/MemberDetailModal";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
|
|
@ -35,7 +35,12 @@ const CHART_COLORS = [
|
|||
"#EC4899",
|
||||
];
|
||||
|
||||
interface TooltipState { x: number; y: number; content: string }
|
||||
|
||||
function PieChart({ data }: { data: OrgProjectStats[] }) {
|
||||
const [tooltip, setTooltip] = useState<TooltipState | null>(null);
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
|
||||
const total = data.reduce((sum, d) => sum + d.totalMinutes, 0);
|
||||
if (total === 0 || data.length === 0) {
|
||||
return (
|
||||
|
|
@ -76,13 +81,31 @@ function PieChart({ data }: { data: OrgProjectStats[] }) {
|
|||
"Z",
|
||||
].join(" ");
|
||||
|
||||
const result = { path, color: CHART_COLORS[i % CHART_COLORS.length], fraction, name: d.projectName };
|
||||
const pct = ((fraction) * 100).toFixed(1);
|
||||
const result = {
|
||||
path,
|
||||
color: CHART_COLORS[i % CHART_COLORS.length],
|
||||
fraction,
|
||||
label: `${d.projectName}: ${formatMinutes(d.totalMinutes)} (${pct}%)`,
|
||||
};
|
||||
startAngle = endAngle;
|
||||
return result;
|
||||
});
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent, content: string) => {
|
||||
const rect = svgRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
setTooltip({ x: e.clientX - rect.left, y: e.clientY - rect.top, content });
|
||||
};
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 200 200" className="w-full h-full">
|
||||
<div className="relative w-full h-full">
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox="0 0 200 200"
|
||||
className="w-full h-full"
|
||||
onMouseLeave={() => setTooltip(null)}
|
||||
>
|
||||
{slices.map((slice, i) => (
|
||||
<path
|
||||
key={i}
|
||||
|
|
@ -90,7 +113,8 @@ function PieChart({ data }: { data: OrgProjectStats[] }) {
|
|||
fill={slice.color}
|
||||
stroke="var(--color-surface, #fff)"
|
||||
strokeWidth="2"
|
||||
className="transition-opacity hover:opacity-80"
|
||||
className="cursor-pointer transition-opacity hover:opacity-80"
|
||||
onMouseMove={(e) => handleMouseMove(e, slice.label)}
|
||||
/>
|
||||
))}
|
||||
<text x={cx} y={cy - 8} textAnchor="middle" className="text-xs" fontSize="11" fill="currentColor" opacity="0.5">
|
||||
|
|
@ -100,6 +124,15 @@ function PieChart({ data }: { data: OrgProjectStats[] }) {
|
|||
{data.length}
|
||||
</text>
|
||||
</svg>
|
||||
{tooltip && (
|
||||
<div
|
||||
className="absolute pointer-events-none z-20 bg-surface border border-border-soft rounded-lg px-2 py-1 text-xs font-bold text-text-main shadow-lg whitespace-nowrap"
|
||||
style={{ left: tooltip.x, top: tooltip.y - 36, transform: "translateX(-50%)" }}
|
||||
>
|
||||
{tooltip.content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue