g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Update PredictionsChart.tsx
All checks were successful
Build Frontend / build (push) Successful in 1m5s
Details

Browse Source
This commit is contained in:
g
2026-01-12 00:59:40 +00:00
parent a8fdac532c
commit c0f4b05ef4
1 changed files with 180 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
components/analytics/PredictionsChart.tsx
View File

@@ -29,6 +29,7 @@ import {
Brain,
Layers,
Zap,
Info,
} from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { Skeleton } from "@/components/ui/skeleton";
@@ -54,9 +55,15 @@ import {
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Tooltip as RechartsTooltip,
ResponsiveContainer,
} from "recharts";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
interface PredictionsChartProps {
timeRange?: number;
@@ -230,6 +237,7 @@ export default function PredictionsChart({
<div className="space-y-6">
{/* Sales Predictions */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<TooltipProvider>
<Card>
<CardHeader className="pb-3">
<CardTitle className="text-sm font-medium flex items-center gap-2">
@@ -240,10 +248,21 @@ export default function PredictionsChart({
<CardContent>
{predictions.sales.predicted !== null ? (
<div className="space-y-2">
<div className="text-2xl font-bold">
<Tooltip>
<TooltipTrigger asChild>
<div className="text-2xl font-bold w-fit cursor-help">
{formatGBP(predictions.sales.predicted)}
</div>
</TooltipTrigger>
<TooltipContent>
<p>Predicted daily average revenue for the next {daysAhead} days</p>
</TooltipContent>
</Tooltip>
<div className="flex items-center gap-2 flex-wrap">
<Tooltip>
<TooltipTrigger>
<div className="inline-flex">
<Badge
className={getConfidenceColor(
predictions.sales.confidence,
@@ -256,7 +275,17 @@ export default function PredictionsChart({
</span>
)}
</Badge>
</div>
</TooltipTrigger>
<TooltipContent>
<p>Based on data consistency, historical accuracy, and model agreement</p>
</TooltipContent>
</Tooltip>
{predictions.sales.aiModel?.used && (
<Tooltip>
<TooltipTrigger>
<div className="inline-flex">
<Badge variant="outline" className="bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-500/30">
🤖 AI Powered
{predictions.sales.aiModel.modelAccuracy !== undefined && (
@@ -265,8 +294,17 @@ export default function PredictionsChart({
</span>
)}
</Badge>
</div>
</TooltipTrigger>
<TooltipContent>
<p>Predictions generated using a Deep Learning Ensemble Model (TensorFlow.js)</p>
</TooltipContent>
</Tooltip>
)}
{predictions.sales.trend && (
<Tooltip>
<TooltipTrigger>
<div className="inline-flex">
<Badge
variant="outline"
className={
@@ -289,6 +327,12 @@ export default function PredictionsChart({
? "Trending Down"
: "Stable"}
</Badge>
</div>
</TooltipTrigger>
<TooltipContent>
<p>Direction of the recent sales trend (slope analysis)</p>
</TooltipContent>
</Tooltip>
)}
<span className="text-xs text-muted-foreground">
Next {daysAhead} days
@@ -324,16 +368,31 @@ export default function PredictionsChart({
<CardTitle className="text-sm font-medium flex items-center gap-2">
<Brain className="h-4 w-4" />
Model Intelligence
<Tooltip>
<TooltipTrigger>
<Info className="h-3 w-3 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>Technical details about the active prediction model</p>
</TooltipContent>
</Tooltip>
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex justify-between items-center">
<span className="text-sm text-muted-foreground">Architecture</span>
<span className="text-sm font-medium flex items-center gap-1">
<Tooltip>
<TooltipTrigger asChild>
<span className="text-sm font-medium flex items-center gap-1 cursor-help">
<Layers className="h-3 w-3 text-purple-500" />
Hybrid Ensemble (Deep Learning)
</span>
</TooltipTrigger>
<TooltipContent>
<p>Combines LSTM Neural Networks with Statistical Methods (Holt-Winters, ARIMA)</p>
</TooltipContent>
</Tooltip>
</div>
{stockPredictions?.predictions && (
<div className="flex justify-between items-center">
@@ -356,6 +415,7 @@ export default function PredictionsChart({
</div>
</CardContent>
</Card>
</TooltipProvider>
</div>
{/* Daily Predictions Chart */}
@@ -404,7 +464,7 @@ export default function PredictionsChart({
axisLine={false}
tickFormatter={(value) => `£${value}`}
/>
<Tooltip
<RechartsTooltip
contentStyle={{
backgroundColor: "hsl(var(--background))",
borderColor: "hsl(var(--border))",