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