Update PredictionsChart.tsx
All checks were successful
Build Frontend / build (push) Successful in 1m5s
All checks were successful
Build Frontend / build (push) Successful in 1m5s
This commit is contained in:
g
@@ -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,132 +237,185 @@ export default function PredictionsChart({
|
||||
<div className="space-y-6">
|
||||
{/* Sales Predictions */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<DollarSign className="h-4 w-4" />
|
||||
Revenue Prediction
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{predictions.sales.predicted !== null ? (
|
||||
<div className="space-y-2">
|
||||
<div className="text-2xl font-bold">
|
||||
{formatGBP(predictions.sales.predicted)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge
|
||||
className={getConfidenceColor(
|
||||
predictions.sales.confidence,
|
||||
<TooltipProvider>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<DollarSign className="h-4 w-4" />
|
||||
Revenue Prediction
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{predictions.sales.predicted !== null ? (
|
||||
<div className="space-y-2">
|
||||
<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,
|
||||
)}
|
||||
>
|
||||
{getConfidenceLabel(predictions.sales.confidence)} Confidence
|
||||
{predictions.sales.confidenceScore !== undefined && (
|
||||
<span className="ml-1 opacity-75">
|
||||
({Math.round(predictions.sales.confidenceScore * 100)}%)
|
||||
</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 && (
|
||||
<span className="ml-1 opacity-75">
|
||||
({Math.round(predictions.sales.aiModel.modelAccuracy * 100)}%)
|
||||
</span>
|
||||
)}
|
||||
</Badge>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Predictions generated using a Deep Learning Ensemble Model (TensorFlow.js)</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
>
|
||||
{getConfidenceLabel(predictions.sales.confidence)} Confidence
|
||||
{predictions.sales.confidenceScore !== undefined && (
|
||||
<span className="ml-1 opacity-75">
|
||||
({Math.round(predictions.sales.confidenceScore * 100)}%)
|
||||
</span>
|
||||
{predictions.sales.trend && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<div className="inline-flex">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
predictions.sales.trend.direction === "up"
|
||||
? "text-green-600 border-green-600"
|
||||
: predictions.sales.trend.direction === "down"
|
||||
? "text-red-600 border-red-600"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{predictions.sales.trend.direction === "up" && (
|
||||
<TrendingUp className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
{predictions.sales.trend.direction === "down" && (
|
||||
<TrendingDown className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
{predictions.sales.trend.direction === "up"
|
||||
? "Trending Up"
|
||||
: predictions.sales.trend.direction === "down"
|
||||
? "Trending Down"
|
||||
: "Stable"}
|
||||
</Badge>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Direction of the recent sales trend (slope analysis)</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Badge>
|
||||
{predictions.sales.aiModel?.used && (
|
||||
<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 && (
|
||||
<span className="ml-1 opacity-75">
|
||||
({Math.round(predictions.sales.aiModel.modelAccuracy * 100)}%)
|
||||
</span>
|
||||
)}
|
||||
</Badge>
|
||||
)}
|
||||
{predictions.sales.trend && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
predictions.sales.trend.direction === "up"
|
||||
? "text-green-600 border-green-600"
|
||||
: predictions.sales.trend.direction === "down"
|
||||
? "text-red-600 border-red-600"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{predictions.sales.trend.direction === "up" && (
|
||||
<TrendingUp className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
{predictions.sales.trend.direction === "down" && (
|
||||
<TrendingDown className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
{predictions.sales.trend.direction === "up"
|
||||
? "Trending Up"
|
||||
: predictions.sales.trend.direction === "down"
|
||||
? "Trending Down"
|
||||
: "Stable"}
|
||||
</Badge>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Next {daysAhead} days
|
||||
</span>
|
||||
</div>
|
||||
{predictions.sales.predictedOrders && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
~{Math.round(predictions.sales.predictedOrders)}{" "}
|
||||
orders
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Next {daysAhead} days
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{!predictions.sales.confidenceIntervals &&
|
||||
predictions.sales.minPrediction &&
|
||||
predictions.sales.maxPrediction && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Range: {formatGBP(predictions.sales.minPrediction)} -{" "}
|
||||
{formatGBP(predictions.sales.maxPrediction)}
|
||||
{predictions.sales.predictedOrders && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
~{Math.round(predictions.sales.predictedOrders)}{" "}
|
||||
orders
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{predictions.sales.message ||
|
||||
"Insufficient data for prediction"}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Model Intelligence Card */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<Brain className="h-4 w-4" />
|
||||
Model Intelligence
|
||||
</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">
|
||||
<Layers className="h-3 w-3 text-purple-500" />
|
||||
Hybrid Ensemble (Deep Learning)
|
||||
</span>
|
||||
</div>
|
||||
{stockPredictions?.predictions && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Features</span>
|
||||
<span className="text-xs font-medium bg-secondary px-2 py-1 rounded-md">
|
||||
Multi-Feature Enabled
|
||||
</span>
|
||||
{!predictions.sales.confidenceIntervals &&
|
||||
predictions.sales.minPrediction &&
|
||||
predictions.sales.maxPrediction && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Range: {formatGBP(predictions.sales.minPrediction)} -{" "}
|
||||
{formatGBP(predictions.sales.maxPrediction)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{predictions.sales.message ||
|
||||
"Insufficient data for prediction"}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Optimization</span>
|
||||
<span className="text-sm font-medium flex items-center gap-1">
|
||||
<Zap className="h-3 w-3 text-amber-500" />
|
||||
Performance Tuned
|
||||
</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Model Intelligence Card */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<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>
|
||||
<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">
|
||||
<span className="text-sm text-muted-foreground">Features</span>
|
||||
<span className="text-xs font-medium bg-secondary px-2 py-1 rounded-md">
|
||||
Multi-Feature Enabled
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Optimization</span>
|
||||
<span className="text-sm font-medium flex items-center gap-1">
|
||||
<Zap className="h-3 w-3 text-amber-500" />
|
||||
Performance Tuned
|
||||
</span>
|
||||
</div>
|
||||
<div className="pt-2 border-t text-xs text-muted-foreground">
|
||||
Model automatically retrains with new sales data.
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-2 border-t text-xs text-muted-foreground">
|
||||
Model automatically retrains with new sales data.
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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))",
|
||||
|
||||
Reference in New Issue
Block a user