feat: Enhance provider components with detailed documentation and comments
- Added comprehensive comments and JSDoc-style documentation to NotificationProvider, ThemeProvider, UserProvider, and WebsiteThemeProvider for better clarity and maintainability. - Improved type definitions in index.ts for better code understanding and usage. - Introduced Docker support with Dockerfiles for various services including AI server, signaling server, and browser-use service. - Created a docker-compose.yml file to orchestrate multiple services including PostgreSQL, AI, scraper, and frontend. - Added a startup guide (startup.txt) for setting up the CRM environment on Ubuntu with Docker. - Included a .dockerignore file to exclude unnecessary files from Docker builds.
This commit is contained in:
@@ -1,3 +1,8 @@
|
||||
// ── Dashboard: Lead Status Donut Chart ──
|
||||
// Interactive SVG donut chart showing lead distribution by status.
|
||||
// Hover highlights a segment and shows its value/percentage in the center.
|
||||
// Includes a legend with colored dots and percentages.
|
||||
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
@@ -14,11 +19,13 @@ interface LeadStatusChartProps {
|
||||
data: StatusData[]
|
||||
}
|
||||
|
||||
/** Convert polar coordinates to cartesian */
|
||||
function polar(cx: number, cy: number, r: number, deg: number) {
|
||||
const rad = ((deg - 90) * Math.PI) / 180
|
||||
return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }
|
||||
}
|
||||
|
||||
/** Generate an SVG arc path for a donut segment with inner and outer radii */
|
||||
function arcPath(cx: number, cy: number, oR: number, iR: number, start: number, end: number) {
|
||||
const gap = 3
|
||||
const s = start + gap / 2
|
||||
@@ -31,6 +38,10 @@ function arcPath(cx: number, cy: number, oR: number, iR: number, start: number,
|
||||
return `M${o1.x} ${o1.y} A${oR} ${oR} 0 ${lg} 1 ${o2.x} ${o2.y} L${i1.x} ${i1.y} A${iR} ${iR} 0 ${lg} 0 ${i2.x} ${i2.y}Z`
|
||||
}
|
||||
|
||||
/**
|
||||
* LeadStatusChart — donut chart with hover interactions, center text display,
|
||||
* and a legend grid. Shows "No data" when total is 0.
|
||||
*/
|
||||
export function LeadStatusChart({ data }: LeadStatusChartProps) {
|
||||
const [hov, setHov] = useState<number | null>(null)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user