mirror of
https://github.com/freedbygrace/ActiveDirectoryManager.git
synced 2026-08-21 23:57:19 +00:00
Enhance dashboard with customizable widgets and data visualization. Adds drag-and-drop layout, data export options, and improved data fetching.
Replit-Commit-Author: Agent Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/8f36e120-5301-4443-89d0-23e9edfc5120.jpg
This commit is contained in:
alphaeusmote
@@ -0,0 +1,303 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Settings, Trash2, Maximize2, Download } from "lucide-react";
|
||||
import { AreaChart, Area, BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
|
||||
import { exportToExcel, exportToPDF, exportToCSV } from "../../lib/export-utils";
|
||||
|
||||
// Type for dataKey to work around TypeScript restrictions
|
||||
type DataKeyType = string | number | ((obj: any) => any);
|
||||
|
||||
export interface DataPoint {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface WidgetProps {
|
||||
id: string;
|
||||
title: string;
|
||||
type: "bar" | "line" | "pie" | "area" | "table" | "number";
|
||||
data: DataPoint[];
|
||||
config: {
|
||||
xAxis?: string;
|
||||
yAxis?: string | string[];
|
||||
dimensions?: string[];
|
||||
metrics?: string[];
|
||||
colors?: string[];
|
||||
showLegend?: boolean;
|
||||
stacked?: boolean;
|
||||
precision?: number;
|
||||
};
|
||||
onEdit: (id: string) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
const COLORS = [
|
||||
"#8884d8", "#82ca9d", "#ffc658", "#ff8042", "#0088fe",
|
||||
"#00C49F", "#FFBB28", "#FF8042", "#a4de6c", "#d0ed57"
|
||||
];
|
||||
|
||||
export function DashboardWidget({ id, title, type, data, config, onEdit, onDelete }: WidgetProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Format data for number type
|
||||
const calculateNumber = () => {
|
||||
if (!data || data.length === 0 || !config.metrics || config.metrics.length === 0) return 0;
|
||||
|
||||
const metric = config.metrics[0];
|
||||
let value = 0;
|
||||
|
||||
// Sum all values for the metric
|
||||
data.forEach(item => {
|
||||
if (item[metric] !== undefined && !isNaN(Number(item[metric]))) {
|
||||
value += Number(item[metric]);
|
||||
}
|
||||
});
|
||||
|
||||
// Apply precision if specified
|
||||
if (config.precision !== undefined) {
|
||||
return value.toFixed(config.precision);
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
const handleExport = (format: 'excel' | 'pdf' | 'csv') => {
|
||||
switch (format) {
|
||||
case 'excel':
|
||||
exportToExcel(data, title);
|
||||
break;
|
||||
case 'pdf':
|
||||
exportToPDF(data, title, config);
|
||||
break;
|
||||
case 'csv':
|
||||
exportToCSV(data, title);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Render a table
|
||||
const renderTable = () => {
|
||||
if (!data || data.length === 0) return <p className="text-muted-foreground text-center py-4">No data available</p>;
|
||||
|
||||
// Determine columns from first data point and config
|
||||
const columns = Object.keys(data[0])
|
||||
.filter(key => {
|
||||
if (config.dimensions && config.metrics) {
|
||||
return [...config.dimensions, ...config.metrics].includes(key);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto max-h-[300px] overflow-y-auto">
|
||||
<table className="min-w-full divide-y divide-border">
|
||||
<thead className="bg-muted">
|
||||
<tr>
|
||||
{columns.map((column) => (
|
||||
<th
|
||||
key={column}
|
||||
className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider"
|
||||
>
|
||||
{column}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-card divide-y divide-border">
|
||||
{data.map((item, idx) => (
|
||||
<tr key={idx} className={idx % 2 === 0 ? "bg-background" : "bg-card"}>
|
||||
{columns.map((column) => (
|
||||
<td key={column} className="px-3 py-2 text-sm">
|
||||
{item[column] !== undefined ? String(item[column]) : '—'}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render different chart types
|
||||
const renderChart = () => {
|
||||
if (!data || data.length === 0) return <p className="text-muted-foreground text-center py-4">No data available</p>;
|
||||
|
||||
const { xAxis, yAxis, dimensions, metrics, colors = COLORS, showLegend = true, stacked = false } = config;
|
||||
|
||||
switch (type) {
|
||||
case 'bar':
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 30 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey={xAxis} />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
{showLegend && <Legend />}
|
||||
{Array.isArray(yAxis) && yAxis.length > 0
|
||||
? yAxis.map((axis, index) => (
|
||||
<Bar
|
||||
key={axis}
|
||||
dataKey={axis}
|
||||
stackId={stacked ? "a" : undefined}
|
||||
fill={colors[index % colors.length]}
|
||||
/>
|
||||
))
|
||||
: yAxis ? <Bar dataKey={yAxis} fill={colors[0]} /> : null
|
||||
}
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
|
||||
case 'line':
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 30 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey={xAxis} />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
{showLegend && <Legend />}
|
||||
{Array.isArray(yAxis) && yAxis.length > 0
|
||||
? yAxis.map((axis, index) => (
|
||||
<Line
|
||||
key={axis}
|
||||
type="monotone"
|
||||
dataKey={axis}
|
||||
stroke={colors[index % colors.length]}
|
||||
activeDot={{ r: 8 }}
|
||||
/>
|
||||
))
|
||||
: yAxis ? <Line type="monotone" dataKey={yAxis} stroke={colors[0]} activeDot={{ r: 8 }} /> : null
|
||||
}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
|
||||
case 'area':
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 30 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey={xAxis} />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
{showLegend && <Legend />}
|
||||
{Array.isArray(yAxis) && yAxis.length > 0
|
||||
? yAxis.map((axis, index) => (
|
||||
<Area
|
||||
key={axis}
|
||||
type="monotone"
|
||||
dataKey={axis}
|
||||
stackId={stacked ? "a" : `${index}`}
|
||||
fill={colors[index % colors.length]}
|
||||
stroke={colors[index % colors.length]}
|
||||
/>
|
||||
))
|
||||
: yAxis ? <Area type="monotone" dataKey={yAxis} fill={colors[0]} stroke={colors[0]} /> : null
|
||||
}
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
|
||||
case 'pie':
|
||||
// For pie charts, we need to process the data differently
|
||||
const pieData = data.map(item => {
|
||||
const dimensionField = dimensions?.[0] || xAxis || "name";
|
||||
const metricField = Array.isArray(metrics) && metrics.length > 0 ? metrics[0] :
|
||||
(Array.isArray(yAxis) && yAxis.length > 0 ? yAxis[0] :
|
||||
(typeof yAxis === 'string' ? yAxis : "value"));
|
||||
|
||||
const name = item[dimensionField];
|
||||
const value = item[metricField];
|
||||
return { name, value: Number(value) };
|
||||
}).filter(item => !isNaN(item.value));
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<PieChart margin={{ top: 20, right: 30, left: 20, bottom: 30 }}>
|
||||
<Pie
|
||||
data={pieData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
labelLine={true}
|
||||
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
|
||||
outerRadius={80}
|
||||
fill="#8884d8"
|
||||
dataKey="value"
|
||||
>
|
||||
{pieData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip formatter={(value) => [`${value}`, ""]} />
|
||||
{showLegend && <Legend />}
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
|
||||
case 'number':
|
||||
return (
|
||||
<div className="flex justify-center items-center h-[300px]">
|
||||
<div className="text-center">
|
||||
<h3 className="text-5xl font-bold">{calculateNumber()}</h3>
|
||||
{config.metrics && config.metrics.length > 0 && (
|
||||
<p className="text-muted-foreground mt-4">{config.metrics[0]}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'table':
|
||||
default:
|
||||
return renderTable();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={`shadow-sm hover:shadow-md transition-shadow ${expanded ? 'fixed inset-4 z-50 overflow-auto' : ''}`}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-md font-medium">{title}</CardTitle>
|
||||
<div className="flex space-x-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleExport('excel')}
|
||||
title="Export to Excel"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
title={expanded ? "Minimize" : "Maximize"}
|
||||
>
|
||||
<Maximize2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onEdit(id)}
|
||||
title="Edit Widget"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onDelete(id)}
|
||||
title="Delete Widget"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent ref={contentRef}>
|
||||
{renderChart()}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user