|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SM+ Real-Time Streaming Analytics</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
mono: ['IBM Plex Mono', 'monospace'], |
|
|
}, |
|
|
colors: { |
|
|
smplus: { |
|
|
dark: '#0f0f1a', |
|
|
panel: '#1a1a2e', |
|
|
border: '#2a2a4a', |
|
|
accent: '#ff5e62', |
|
|
highlight: '#ff9966', |
|
|
warning: '#ff9e00', |
|
|
danger: '#ff3d47', |
|
|
teal: '#00f5d4', |
|
|
purple: '#9b5de5', |
|
|
ai: '#00ff9d' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
background-color: #0f0f1a; |
|
|
color: #e0e0e0; |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.data-panel { |
|
|
border: 1px solid #2a2a4a; |
|
|
background-color: #1a1a2e; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.data-header { |
|
|
border-bottom: 1px solid #2a2a4a; |
|
|
background-color: #161627; |
|
|
} |
|
|
.data-table { |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
.data-table th { |
|
|
font-weight: 600; |
|
|
text-transform: uppercase; |
|
|
font-size: 0.75rem; |
|
|
letter-spacing: 0.05em; |
|
|
} |
|
|
.data-table td, .data-table th { |
|
|
padding: 0.75rem 1rem; |
|
|
border-bottom: 1px solid #2a2a4a; |
|
|
} |
|
|
.data-value { |
|
|
font-family: 'IBM Plex Mono', monospace; |
|
|
font-weight: 600; |
|
|
} |
|
|
.positive-trend { |
|
|
color: #00ff9d; |
|
|
} |
|
|
.negative-trend { |
|
|
color: #ff3d47; |
|
|
} |
|
|
.neutral-trend { |
|
|
color: #ff9966; |
|
|
} |
|
|
.status-indicator { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
margin-right: 6px; |
|
|
} |
|
|
.trend-icon { |
|
|
margin-right: 4px; |
|
|
} |
|
|
.section-divider { |
|
|
border: none; |
|
|
border-top: 1px solid #2a2a4a; |
|
|
margin: 1.5rem 0; |
|
|
} |
|
|
.metric-card { |
|
|
background-color: #252538; |
|
|
border-left: 4px solid; |
|
|
padding: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.metric-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
.metric-title { |
|
|
font-size: 0.75rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
opacity: 0.7; |
|
|
} |
|
|
.metric-value { |
|
|
font-size: 1.75rem; |
|
|
line-height: 1; |
|
|
margin: 0.5rem 0; |
|
|
} |
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 250px; |
|
|
width: 100%; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
background-color: #2a2a4a; |
|
|
border-radius: 3px; |
|
|
overflow: hidden; |
|
|
} |
|
|
.progress-value { |
|
|
height: 100%; |
|
|
} |
|
|
.grid-point { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
margin-right: 6px; |
|
|
} |
|
|
.kpi-badge { |
|
|
font-size: 0.7rem; |
|
|
padding: 3px 8px; |
|
|
border-radius: 12px; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
} |
|
|
.ai-agent-card { |
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); |
|
|
border: 1px solid #2a2a4a; |
|
|
} |
|
|
.glow-effect { |
|
|
box-shadow: 0 0 10px rgba(255, 94, 98, 0.3); |
|
|
} |
|
|
.nav-tab { |
|
|
border-bottom: 3px solid transparent; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.nav-tab.active { |
|
|
border-bottom-color: #ff5e62; |
|
|
color: #ff5e62; |
|
|
} |
|
|
.nav-tab:hover:not(.active) { |
|
|
border-bottom-color: #ff9966; |
|
|
} |
|
|
.smplus-gradient { |
|
|
background: linear-gradient(45deg, #ff5e62, #ff9966); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-smplus-dark text-gray-300"> |
|
|
<header class="border-b border-smplus-border bg-smplus-dark sticky top-0 z-20"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-bolt text-smplus-accent text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold smplus-gradient">SM+</span> |
|
|
<span class="ml-1 text-xl font-bold">Real-Time Streaming Analytics</span> |
|
|
</div> |
|
|
<span class="text-xs px-2 py-1 bg-smplus-panel rounded-full flex items-center"> |
|
|
<i class="fas fa-brain text-smplus-ai mr-1"></i> |
|
|
AI ANALYTICS v4.2 |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="hidden md:flex items-center space-x-4 text-sm"> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-indicator bg-smplus-accent"></span> |
|
|
<span>Live Data</span> |
|
|
</div> |
|
|
<div class="text-xs bg-smplus-panel px-3 py-1 rounded-full flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-1 text-smplus-accent"></i> |
|
|
<span>Last updated: <span class="font-mono">2023-11-16 09:42:18 UTC</span></span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="bg-gradient-to-r from-smplus-accent to-smplus-highlight hover:opacity-90 text-white px-3 py-1 rounded-full text-sm flex items-center"> |
|
|
<i class="fas fa-robot mr-1"></i> |
|
|
AI Assist |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 flex space-x-6 overflow-x-auto pb-1 hide-scrollbar"> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="nav-tab active text-sm font-medium pb-2 whitespace-nowrap"> |
|
|
<i class="fas fa-tv mr-1"></i> Streaming Dashboard |
|
|
</a> |
|
|
<a href="#" class="nav-tab text-sm font-medium pb-2 whitespace-nowrap"> |
|
|
<i class="fas fa-robot mr-1"></i> AI Agents |
|
|
</a> |
|
|
<a href="#" class="nav-tab text-sm font-medium pb-2 whitespace-nowrap"> |
|
|
<i class="fas fa-users mr-1"></i> Subscriber Insights |
|
|
</a> |
|
|
<a href="#" class="nav-tab text-sm font-medium pb-2 whitespace-nowrap"> |
|
|
<i class="fas fa-film mr-1"></i> Content Library |
|
|
</a> |
|
|
<a href="#" class="nav-tab text-sm font-medium pb-2 whitespace-nowrap"> |
|
|
<i class="fas fa-chart-line mr-1"></i> Performance |
|
|
</a> |
|
|
<a href="#" class="nav-tab text-sm font-medium pb-2 whitespace-nowrap"> |
|
|
<i class="fas fa-lightbulb mr-1"></i> Recommendations |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<section class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h1 class="text-2xl font-bold flex items-center"> |
|
|
<span class="smplus-gradient">Streaming Analytics Dashboard</span> |
|
|
<span class="ml-2 text-xs bg-smplus-panel px-2 py-1 rounded-full">Real-time + Predictive</span> |
|
|
</h1> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs bg-smplus-panel hover:bg-smplus-border px-3 py-1 rounded-full flex items-center"> |
|
|
<i class="fas fa-calendar-alt mr-1 text-smplus-accent"></i> |
|
|
Last 30 Days |
|
|
</button> |
|
|
<button class="text-xs bg-smplus-panel hover:bg-smplus-border px-3 py-1 rounded-full flex items-center"> |
|
|
<i class="fas fa-filter mr-1 text-smplus-highlight"></i> |
|
|
Filters |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
|
|
|
|
|
<div class="metric-card rounded-lg border-l-smplus-accent glow-effect"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="metric-title">TOTAL SUBSCRIBERS</div> |
|
|
<div class="metric-value data-value">12.4M</div> |
|
|
<div class="text-xs flex items-center"> |
|
|
<span class="positive-trend mr-1">+8.2% YoY</span> |
|
|
<i class="fas fa-caret-up text-smplus-ai"></i> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-users text-smplus-accent opacity-30 text-2xl"></i> |
|
|
</div> |
|
|
<div class="progress-bar mt-2"> |
|
|
<div class="progress-value bg-smplus-accent" style="width: 82%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="metric-card rounded-lg border-l-smplus-highlight"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="metric-title">AVG. WATCH TIME</div> |
|
|
<div class="metric-value data-value">3.2h</div> |
|
|
<div class="text-xs flex items-center"> |
|
|
<span class="positive-trend mr-1">+12.7% YoY</span> |
|
|
<i class="fas fa-caret-up text-smplus-ai"></i> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-clock text-smplus-highlight opacity-30 text-2xl"></i> |
|
|
</div> |
|
|
<div class="progress-bar mt-2"> |
|
|
<div class="progress-value bg-smplus-highlight" style="width: 76%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="metric-card rounded-lg border-l-smplus-teal"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="metric-title">CONTENT RETENTION</div> |
|
|
<div class="metric-value data-value">89%</div> |
|
|
<div class="text-xs flex items-center"> |
|
|
<span class="positive-trend mr-1">+4.5% YoY</span> |
|
|
<i class="fas fa-caret-up text-smplus-ai"></i> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-percentage text-smplus-teal opacity-30 text-2xl"></i> |
|
|
</div> |
|
|
<div class="progress-bar mt-2"> |
|
|
<div class="progress-value bg-smplus-teal" style="width: 89%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="metric-card rounded-lg border-l-smplus-danger"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="metric-title">CHURN RATE</div> |
|
|
<div class="metric-value data-value">2.8%</div> |
|
|
<div class="text-xs flex items-center"> |
|
|
<span class="negative-trend mr-1">+0.3% MoM</span> |
|
|
<i class="fas fa-caret-down text-smplus-danger"></i> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-running text-smplus-danger opacity-30 text-2xl"></i> |
|
|
</div> |
|
|
<div class="progress-bar mt-2"> |
|
|
<div class="progress-value bg-smplus-danger" style="width: 28%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="data-panel rounded-lg p-4 col-span-2"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-semibold text-lg flex items-center"> |
|
|
<i class="fas fa-chart-line text-smplus-accent mr-2"></i> |
|
|
STREAMING GROWTH TRENDS |
|
|
</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs bg-smplus-panel hover:bg-smplus-border px-2 py-1 rounded"> |
|
|
Subscribers |
|
|
</button> |
|
|
<button class="text-xs bg-smplus-border px-2 py-1 rounded"> |
|
|
Watch Time |
|
|
</button> |
|
|
<button class="text-xs bg-smplus-panel hover:bg-smplus-border px-2 py-1 rounded"> |
|
|
Revenue |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="streamingGrowthChart"></canvas> |
|
|
</div> |
|
|
<div class="mt-3 text-xs grid grid-cols-4 gap-2"> |
|
|
<div class="flex items-center"><span class="grid-point bg-smplus-accent"></span> Total Subs</div> |
|
|
<div class="flex items-center"><span class="grid-point bg-smplus-highlight"></span> Premium</div> |
|
|
<div class="flex items-center"><span class="grid-point bg-smplus-ai"></span> Ad-Supported</div> |
|
|
<div class="flex items-center"><span class="grid-point bg-smplus-teal"></span> Trials</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-panel rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-semibold text-lg flex items-center"> |
|
|
<i class="fas fa-trophy text-smplus-warning mr-2"></i> |
|
|
TOP PERFORMING CONTENT |
|
|
</h3> |
|
|
<span class="text-xs bg-smplus-panel px-2 py-1 rounded">by watch time</span> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between p-2 hover:bg-smplus-panel rounded cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-smplus-highlight rounded flex items-center justify-center text-xs font-bold mr-2">1</div> |
|
|
<div> |
|
|
<div class="text-sm font-medium">The Last Kingdom</div> |
|
|
<div class="text-xs text-gray-400">Action Drama</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="text-sm data-value">12.4M</div> |
|
|
<div class="text-xs positive-trend">+24% WoW</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-2 hover:bg-smplus-panel rounded cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-smplus-border rounded flex items-center justify-center text-xs font-bold mr-2">2</div> |
|
|
<div> |
|
|
<div class="text-sm font-medium">AI Revolution</div> |
|
|
<div class="text-xs text-gray-400">Documentary</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="text-sm data-value">9.7M</div> |
|
|
<div class="text-xs positive-trend">+42% WoW</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-2 hover:bg-smplus-panel rounded cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-smplus-border rounded flex items-center justify-center text-xs font-bold mr-2">3</div> |
|
|
<div> |
|
|
<div class="text-sm font-medium">Cyberpunk 2077</div> |
|
|
<div class="text-xs text-gray-400">Anime</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="text-sm data-value">8.2M</div> |
|
|
<div class="text-xs negative-trend">-7% WoW</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-2 hover:bg-smplus-panel rounded cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-transparent rounded flex items-center justify-center text-xs font-bold mr-2">4</div> |
|
|
<div> |
|
|
<div class="text-sm font-medium">Love in Seoul</div> |
|
|
<div class="text-xs text-gray-400">Romance</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="text-sm data-value">7.5M</div> |
|
|
<div class="text-xs positive-trend">+15% WoW</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-2 hover:bg-smplus-panel rounded cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 bg-transparent rounded flex items-center justify-center text-xs font-bold mr-2">5</div> |
|
|
<div> |
|
|
<div class="text-sm font-medium">Dark Matter</div> |
|
|
<div class="text-xs text-gray-400">Sci-Fi</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="text-sm data-value">6.8M</div> |
|
|
<div class="text-xs neutral-trend">+3% WoW</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<hr class="section-divider"> |
|
|
|
|
|
|
|
|
<section class="mb-8"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-robot text-smplus-ai mr-2"></i> |
|
|
<span class="smplus-gradient">AI AGENT PERFORMANCE</span> |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> |
|
|
|
|
|
<div class="ai-agent-card rounded-lg p-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<div class="text-sm font-medium">Personalization Accuracy</div> |
|
|
<div class="text-xs bg-smplus-panel px-2 py-1 rounded-full">AI Model v3.2</div> |
|
|
</div> |
|
|
<div class="flex items-end justify-between"> |
|
|
<div class="metric-value data-value">87.4%</div> |
|
|
<div class="text-xs positive-trend flex items-center"> |
|
|
<i class="fas fa-caret-up mr-1"></i> |
|
|
+2.8% from v3.1 |
|
|
</div> |
|
|
</div> |
|
|
<div class="progress-bar mt-2"> |
|
|
<div class="progress-value bg-smplus-ai" style="width: 87%"></div> |
|
|
</div> |
|
|
<div class="text-xs mt-2 text-gray-400"> |
|
|
Measures how accurately AI predicts user preferences |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ai-agent-card rounded-lg p-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<div class="text-sm font-medium">Content Moderation</div> |
|
|
<div class="text-xs bg-smplus-panel px-2 py-1 rounded-full">AI Model v2.9</div> |
|
|
</div> |
|
|
<div class="flex items-end justify-between"> |
|
|
<div class="metric-value data-value">92.1%</div> |
|
|
<div class="text-xs positive-trend flex items-center"> |
|
|
<i class="fas fa-caret-up mr-1"></i> |
|
|
+1.2% from v2.8 |
|
|
</div> |
|
|
</div> |
|
|
<div class="progress-bar mt-2"> |
|
|
<div class="progress-value bg-smplus-teal" style="width: 92%"></div> |
|
|
</div> |
|
|
<div class="text-xs mt-2 text-gray-400"> |
|
|
Accuracy in detecting inappropriate content |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ai-agent-card rounded-lg p-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<div class="text-sm font-medium">Churn Prevention</div> |
|
|
<div class="text-xs bg-smplus-panel px-2 py-1 rounded-full">AI Model v4.1</div> |
|
|
</div> |
|
|
<div class="flex items-end justify-between"> |
|
|
<div class="metric-value data-value">78.3%</div> |
|
|
<div class="text-xs negative-trend flex items-center"> |
|
|
<i class="fas fa-caret-down mr-1"></i> |
|
|
-1.5% from v4.0 |
|
|
</div> |
|
|
</div> |
|
|
<div class="progress-bar mt-2"> |
|
|
<div class="progress-value bg-smplus-highlight" style="width: 78%"></div> |
|
|
</div> |
|
|
<div class="text-xs mt-2 text-gray-400"> |
|
|
Success rate in retaining at-risk subscribers |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
|
|
|
|
<div class="data-panel rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-semibold text-lg flex items-center"> |
|
|
<i class="fas fa-lightbulb text-smplus-warning mr-2"></i> |
|
|
AI RECOMMENDATION IMPACT |
|
|
</h3> |
|
|
<span class="text-xs bg-smplus-panel px-2 py-1 rounded">30-day period</span> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="aiImpactChart"></canvas> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-2 mt-3 text-xs"> |
|
|
<div> |
|
|
<div class="font-medium">Content Discovered</div> |
|
|
<div class="data-value">3.2M</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Watch Time</div> |
|
|
<div class="data-value">+18.7%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Retention</div> |
|
|
<div class="data-value positive-trend">+9.2%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-panel rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-semibold text-lg flex items-center"> |
|
|
<i class="fas fa-network-wired text-smplus-purple mr-2"></i> |
|
|
AI AGENT DISTRIBUTION |
|
|
</h3> |
|
|
<div class="text-xs bg-smplus-panel px-2 py-1 rounded">by function</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="aiDistributionChart"></canvas> |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-1 mt-3 text-xs"> |
|
|
<div class="flex items-center"><span class="grid-point bg-smplus-accent"></span> Personalization</div> |
|
|
<div class="flex items-center"><span class="grid-point bg-smplus-highlight"></span> Moderation</div> |
|
|
<div class="flex items-center"><span class="grid-point bg-smplus-ai"></span> Support</div> |
|
|
<div class="flex items-center"><span class="grid-point bg-smplus-teal"></span> Analytics</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-panel rounded-lg mb-6 p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-semibold text-lg flex items-center"> |
|
|
<i class="fas fa-tachometer-alt text-smplus-accent mr-2"></i> |
|
|
AI AGENT PERFORMANCE METRICS |
|
|
</h3> |
|
|
<div class="text-xs bg-smplus-panel px-2 py-1 rounded">real-time monitoring</div> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full data-table"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th class="text-left">Agent Name</th> |
|
|
<th class="text-left">Function</th> |
|
|
<th class="text-right">Accuracy</th> |
|
|
<th class="text-right">Latency</th> |
|
|
<th class="text-right">Uptime</th> |
|
|
<th class="text-right">Impact</th> |
|
|
<th class="text-right">Status</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr> |
|
|
<td class="text-left font-medium">Rec-Engine-v3</td> |
|
|
<td class="text-left">Personalization</td> |
|
|
<td class="text-right data-value">87.4%</td> |
|
|
<td class="text-right">142ms</td> |
|
|
<td class="text-right data-value">99.98%</td> |
|
|
<td class="text-right positive-trend">+12.7%</td> |
|
|
<td class="text-right"> |
|
|
<span class="status-indicator bg-smplus-ai"></span> |
|
|
<span>Optimal</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="text-left font-medium">Content-Mod-v2</td> |
|
|
<td class="text-left">Moderation</td> |
|
|
<td class="text-right data-value">92.1%</td> |
|
|
<td class="text-right">87ms</td> |
|
|
<td class="text-right data-value">99.99%</td> |
|
|
<td class="text-right positive-trend">+8.3%</td> |
|
|
<td class="text-right"> |
|
|
<span class="status-indicator bg-smplus-ai"></span> |
|
|
<span>Optimal</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="text-left font-medium">Churn-Shield-v4</td> |
|
|
<td class="text-left">Retention</td> |
|
|
<td class="text-right data-value">78.3%</td> |
|
|
<td class="text-right">210ms</td> |
|
|
<td class="text-right data-value">99.95%</td> |
|
|
<td class="text-right negative-trend">-1.5%</td> |
|
|
<td class="text-right"> |
|
|
<span class="status-indicator bg-smplus-warning"></span> |
|
|
<span>Needs Tuning</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="text-left font-medium">Support-Bot-v5</td> |
|
|
<td class="text-left">Customer Service</td> |
|
|
<td class="text-right data-value">81.7%</td> |
|
|
<td class="text-right">320ms</td> |
|
|
<td class="text-right data-value">99.93%</td> |
|
|
<td class="text-right positive-trend">+5.2%</td> |
|
|
<td class="text-right"> |
|
|
<span class="status-indicator bg-smplus-ai"></span> |
|
|
<span>Optimal</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="text-left font-medium">Trend-Spotter-v1</td> |
|
|
<td class="text-left">Content Analysis</td> |
|
|
<td class="text-right data-value">72.8%</td> |
|
|
<td class="text-right">450ms</td> |
|
|
<td class="text-right data-value">99.91%</td> |
|
|
<td class="text-right neutral-trend">+0.8%</td> |
|
|
<td class="text-right"> |
|
|
<span class="status-indicator bg-smplus-warning"></span> |
|
|
<span>Needs Tuning</span> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<hr class="section-divider"> |
|
|
|
|
|
|
|
|
<section class="mb-8"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-film text-smplus-highlight mr-2"></i> |
|
|
CONTENT & SUBSCRIBER ANALYTICS |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="data-panel rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-semibold">GENRE PERFORMANCE</h3> |
|
|
<span class="text-xs bg-smplus-panel px-2 py-1 rounded">by watch hours</span> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="genrePerformanceChart"></canvas> |
|
|
</div> |
|
|
<div class="text-xs mt-3 grid grid-cols-2 gap-1"> |
|
|
<div><span class="text-smplus-accent">Top Genre:</span> Action (32.4%)</div> |
|
|
<div><span class="text-smplus-highlight">Fastest Growing:</span> Sci-Fi (+18.2%)</div> |
|
|
<div><span class="text-smplus-warning">Declining:</span> Reality (-7.4%)</div> |
|
|
<div><span class="text-smplus-ai">Highest ARPU:</span> Documentary ($4.12)</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-panel rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-semibold">DEVICE DISTRIBUTION</h3> |
|
|
<span class="text-xs bg-smplus-panel px-2 py-1 rounded">last 7 days</span> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="deviceDistributionChart"></canvas> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2 mt-3 text-xs"> |
|
|
<div> |
|
|
<div class="font-medium">Mobile</div> |
|
|
<div class="data-value">42.3%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">TV</div> |
|
|
<div class="data-value">34.7%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Desktop</div> |
|
|
<div class="data-value">18.2%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Tablet</div> |
|
|
<div class="data-value">4.8%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-panel rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-semibold">GEOGRAPHIC CONCENTRATION</h3> |
|
|
<span class="text-xs bg-smplus-panel px-2 py-1 rounded">top regions</span> |
|
|
</div> |
|
|
<div class="h-48 bg-gradient-to-br from-smplus-panel to-smplus-dark rounded flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-globe-americas text-4xl opacity-20"></i> |
|
|
</div> |
|
|
<table class="w-full text-xs"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th class="text-left">Region</th> |
|
|
<th class="text-right">Subscribers</th> |
|
|
<th class="text-right">Growth</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr> |
|
|
<td class="text-left">North America</td> |
|
|
<td class="text-right data-value">4.2M</td> |
|
|
<td class="text-right positive-trend">+8.7%</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="text-left">Europe</td> |
|
|
<td class="text-right data-value">3.8M</td> |
|
|
<td class="text-right positive-trend">+12.4%</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="text-left">Asia Pacific</td> |
|
|
<td class="text-right data-value">2.9M</td> |
|
|
<td class="text-right positive-trend">+15.2%</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="text-left">Latin America</td> |
|
|
<td class="text-right data-value">1.5M</td> |
|
|
<td class="text-right neutral-trend">+1.8%</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-panel rounded-lg mb-6 p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-semibold text-lg">SUBSCRIBER SEGMENTATION</h3> |
|
|
<div class="text-xs bg-smplus-panel px-2 py-1 rounded">AI-powered clusters</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-3"> |
|
|
<div class="p-3 bg-gradient-to-br from-blue-900 to-smplus-dark rounded-lg"> |
|
|
<div class="text-xs mb-1 font-bold">Power Streamers (18%)</div> |
|
|
<div class="text-xs mb-1">Daily viewers, multiple devices</div> |
|
|
<div class="flex flex-wrap gap-1 mt-2"> |
|
|
<span class="kpi-badge bg-blue-800">LTV: $248</span> |
|
|
<span class="kpi-badge bg-green-900">Engage: 94%</span> |
|
|
<span class="kpi-badge bg-purple-900">Watch: 22h/wk</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 bg-gradient-to-br from-smplus-panel to-smplus-dark rounded-lg"> |
|
|
<div class="text-xs mb-1 font-bold">Weekend Bingers (32%)</div> |
|
|
<div class="text-xs mb-1">Heavy weekend consumption</div> |
|
|
<div class="flex flex-wrap gap-1 mt-2"> |
|
|
<span class="kpi-badge bg-blue-800">LTV: $124</span> |
|
|
<span class="kpi-badge bg-green-900">Engage: 82%</span> |
|
|
<span class="kpi-badge bg-purple-900">Watch: 12h/wk</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 bg-gradient-to-br from-purple-900 to-smplus-dark rounded-lg"> |
|
|
<div class="text-xs mb-1 font-bold">Genre Loyalists (28%)</div> |
|
|
<div class="text-xs mb-1">Watch only specific genres</div> |
|
|
<div class="flex flex-wrap gap-1 mt-2"> |
|
|
<span class="kpi-badge bg-blue-800">LTV: $87</span> |
|
|
<span class="kpi-badge bg-green-900">Engage: 78%</span> |
|
|
<span class="kpi-badge bg-purple-900">Watch: 8h/wk</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 bg-gradient-to-br from-red-900 to-smplus-dark rounded-lg"> |
|
|
<div class="text-xs mb-1 font-bold">At-Risk (22%)</div> |
|
|
<div class="text-xs mb-1">Declining engagement</div> |
|
|
<div class="flex flex-wrap gap-1 mt-2"> |
|
|
<span class="kpi-badge bg-blue-800">LTV: $32</span> |
|
|
<span class="kpi-badge bg-red-900">Engage: 34%</span> |
|
|
<span class="kpi-badge bg-purple-900">Watch: 3h/wk</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<hr class="section-divider"> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-crystal-ball text-smplus-purple mr-2"></i> |
|
|
PREDICTIVE ANALYTICS |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
|
|
|
|
<div class="data-panel rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-semibold text-lg">CONTENT TREND PROJECTIONS</h3> |
|
|
<div class="text-xs bg-smplus-panel px-2 py-1 rounded">AI forecast model</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="trendForecastChart"></canvas> |
|
|
</div> |
|
|
<div class="text-xs mt-3 grid grid-cols-2 gap-1"> |
|
|
<div><span class="text-smplus-ai">Rising:</span> AI Documentaries (+24%), Cyberpunk (+18%)</div> |
|
|
<div><span class="text-smplus-warning">Declining:</span> Vampire (-12%), Cooking (-9%)</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-panel rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-semibold text-lg">CHURN RISK ANALYSIS</h3> |
|
|
<div class="text-xs bg-smplus-panel px-2 py-1 rounded">machine learning</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="churnPredictionChart"></canvas> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-2 mt-3 text-xs"> |
|
|
<div> |
|
|
<div class="font-medium">High Risk</div> |
|
|
<div class="data-value">12.4%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Medium Risk</div> |
|
|
<div class="data-value">24.7%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Low Risk</div> |
|
|
<div class="data-value">62.9%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-panel rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-semibold text-lg">REVENUE FORECAST</h3> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="text-xs bg-smplus-panel px-2 py-1 rounded">Q4 2023 - Q4 2024</div> |
|
|
<button class="text-xs bg-smplus-panel hover:bg-smplus-border px-2 py-1 rounded flex items-center"> |
|
|
<i class="fas fa-download mr-1"></i> |
|
|
Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="revenueForecastChart"></canvas> |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-2 mt-3 text-xs text-center"> |
|
|
<div> |
|
|
<div>Q4 2023</div> |
|
|
<div class="data-value">$142M</div> |
|
|
</div> |
|
|
<div> |
|
|
<div>Q1 2024</div> |
|
|
<div class="data-value">$158M</div> |
|
|
</div> |
|
|
<div> |
|
|
<div>Q2 2024</div> |
|
|
<div class="data-value">$172M</div> |
|
|
</div> |
|
|
<div> |
|
|
<div>Q3 2024</div> |
|
|
<div class="data-value">$187M</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer class="border-t border-smplus-border py-4 mt-8 bg-smplus-panel"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center text-xs text-gray-400"> |
|
|
<div class="mb-2 md:mb-0"> |
|
|
<span class="mr-4">SM+ ANALYTICS v4.2</span> |
|
|
<span>AI ENGINE v3.1.2</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="flex items-center"> |
|
|
<span class="status-indicator bg-smplus-ai mr-1"></span> |
|
|
<span>AI Models: 87% accuracy</span> |
|
|
</span> |
|
|
<span>Last scan: 2023-11-16T09:42:18Z</span> |
|
|
<span>Next refresh: 2023-11-16T15:00:00Z</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2 text-xxs text-gray-500 text-center"> |
|
|
Predictive models have 89-93% accuracy on historical data | Confidence intervals at 95% | Not financial advice |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const streamingGrowthCtx = document.getElementById('streamingGrowthChart').getContext('2d'); |
|
|
const streamingGrowthChart = new Chart(streamingGrowthCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Total Subscribers', |
|
|
data: [9.2, 9.5, 9.8, 10.1, 10.4, 10.8, 11.2, 11.5, 11.7, 12.1, 12.4], |
|
|
borderColor: '#ff5e62', |
|
|
backgroundColor: 'rgba(255, 94, 98, 0.1)', |
|
|
tension: 0.3, |
|
|
borderWidth: 2 |
|
|
}, |
|
|
{ |
|
|
label: 'Premium', |
|
|
data: [6.1, 6.2, 6.4, 6.5, 6.7, 6.9, 7.1, 7.3, 7.4, 7.6, 7.8], |
|
|
borderColor: '#ff9966', |
|
|
backgroundColor: 'rgba(255, 153, 102, 0.1)', |
|
|
tension: 0.3, |
|
|
borderWidth: 2 |
|
|
}, |
|
|
{ |
|
|
label: 'Ad-Supported', |
|
|
data: [2.8, 3.0, 3.1, 3.3, 3.4, 3.6, 3.8, 3.9, 4.0, 4.2, 4.3], |
|
|
borderColor: '#00ff9d', |
|
|
backgroundColor: 'rgba(0, 255, 157, 0.1)', |
|
|
tension: 0.3, |
|
|
borderWidth: 2 |
|
|
}, |
|
|
{ |
|
|
label: 'Trials', |
|
|
data: [0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3], |
|
|
borderColor: '#00f5d4', |
|
|
backgroundColor: 'rgba(0, 245, 212, 0.1)', |
|
|
tension: 0.3, |
|
|
borderWidth: 2 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false, |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
return context.dataset.label + ': ' + context.raw + 'M'; |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
min: 8, |
|
|
grid: { |
|
|
color: 'rgba(42, 42, 74, 0.5)' |
|
|
}, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value + 'M'; |
|
|
} |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const aiImpactCtx = document.getElementById('aiImpactChart').getContext('2d'); |
|
|
const aiImpactChart = new Chart(aiImpactCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Content Discovered', 'Watch Time', 'Retention', 'Revenue'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Without AI', |
|
|
data: [2.1, 100, 100, 100], |
|
|
backgroundColor: 'rgba(42, 42, 74, 0.8)', |
|
|
borderRadius: 4 |
|
|
}, |
|
|
{ |
|
|
label: 'With AI', |
|
|
data: [3.2, 118.7, 109.2, 112.4], |
|
|
backgroundColor: 'rgba(0, 255, 157, 0.8)', |
|
|
borderRadius: 4 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
}, |
|
|
tooltip: { |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
if context.datasetIndex === 0) { |
|
|
return 'Baseline: ' + (context.raw === 100 ? '100%' : context.raw + 'M'); |
|
|
} else { |
|
|
if (context.dataIndex === 0) return context.raw + 'M discoveries'; |
|
|
return context.raw + '% of baseline'; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
grid: { |
|
|
color: 'rgba(42, 42, 74, 0.5)' |
|
|
}, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value === 100 ? 'Baseline' : value + (value > 10 ? '%' : ''); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const aiDistributionCtx = document.getElementById('aiDistributionChart').getContext('2d'); |
|
|
const aiDistributionChart = new Chart(aiDistributionCtx, { |
|
|
type: 'doughnut', |
|
|
data: { |
|
|
labels: ['Personalization', 'Content Moderation', 'Customer Support', 'Data Analytics'], |
|
|
datasets: [{ |
|
|
data: [42, 28, 18, 12], |
|
|
backgroundColor: [ |
|
|
'#ff5e62', |
|
|
'#ff9966', |
|
|
'#00ff9d', |
|
|
'#00f5d4' |
|
|
], |
|
|
borderWidth: 0 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
cutout: '70%', |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const genrePerformanceCtx = document.getElementById('genrePerformanceChart').getContext('2d'); |
|
|
const genrePerformanceChart = new Chart(genrePerformanceCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Action', 'Sci-Fi', 'Drama', 'Comedy', 'Documentary', 'Romance', 'Horror', 'Reality'], |
|
|
datasets: [{ |
|
|
label: 'Watch Hours', |
|
|
data: [32.4, 18.7, 15.2, 12.8, 9.5, 8.3, 6.2, 4.9], |
|
|
backgroundColor: [ |
|
|
'rgba(255, 94, 98, 0.8)', |
|
|
'rgba(255, 153, 102, 0.8)', |
|
|
'rgba(0, 255, 157, 0.8)', |
|
|
'rgba(0, 245, 212, 0.8)', |
|
|
'rgba(255, 158, 0, 0.8)', |
|
|
'rgba(155, 93, 229, 0.8)', |
|
|
'rgba(255, 61, 71, 0.8)', |
|
|
'rgba(42, 42, 74, 0.8)' |
|
|
], |
|
|
borderRadius: 4 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
grid: { |
|
|
color: 'rgba(42, 42, 74, 0.5)' |
|
|
}, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value + '%'; |
|
|
} |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const deviceDistributionCtx = document.getElementById('deviceDistributionChart').getContext('2d'); |
|
|
const deviceDistributionChart = new Chart(deviceDistributionCtx, { |
|
|
type: 'pie', |
|
|
data: { |
|
|
labels: ['Mobile', 'TV', 'Desktop', 'Tablet'], |
|
|
datasets: [{ |
|
|
data: [42.3, 34.7, 18.2, 4.8], |
|
|
backgroundColor: [ |
|
|
'rgba(255, 94, 98, 0.8)', |
|
|
'rgba(255, 153, 102, 0.8)', |
|
|
'rgba(0, 255, 157, 0.8)', |
|
|
'rgba(0, 245, 212, 0.8)' |
|
|
], |
|
|
borderWidth: 0 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const trendForecastCtx = document.getElementById('trendForecastChart').getContext('2d'); |
|
|
const trendForecastChart = new Chart(trendForecastCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Current', '+1M', '+2M', '+3M', '+4M', '+5M', '+6M'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'AI Documentaries', |
|
|
data: [100, 108, 116, 124, 131, 139, 147], |
|
|
borderColor: '#00ff9d', |
|
|
backgroundColor: 'rgba(0, 255, 157, 0.1)', |
|
|
tension: 0.4, |
|
|
borderWidth: 2 |
|
|
}, |
|
|
{ |
|
|
label: 'Cyberpunk', |
|
|
data: [100, 106, 112, 117, 122, 126, 130], |
|
|
borderColor: '#ff9966', |
|
|
backgroundColor: 'rgba(255, 153, 102, 0.1)', |
|
|
tension: 0.4, |
|
|
borderWidth: 2 |
|
|
}, |
|
|
{ |
|
|
label: 'Vampire', |
|
|
data: [100, 97, 94, 91, 87, 84, 81], |
|
|
borderColor: '#ff3d47', |
|
|
backgroundColor: 'rgba(255, 61, 71, 0.1)', |
|
|
tension: 0.4, |
|
|
borderWidth: 2 |
|
|
}, |
|
|
{ |
|
|
label: 'Cooking', |
|
|
data: [100, 97, 94, 91, 88, 85, 82], |
|
|
borderColor: '#ff9e00', |
|
|
backgroundColor: 'rgba(255, 158, 0, 0.1)', |
|
|
tension: 0.4, |
|
|
borderWidth: 2 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
}, |
|
|
tooltip: { |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
return context.dataset.label + ': ' + (context.raw - 100) + '% change'; |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
min: 80, |
|
|
grid: { |
|
|
color: 'rgba(42, 42, 74, 0.5)' |
|
|
}, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return (value - 100) + '%'; |
|
|
} |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const churnPredictionCtx = document.getElementById('churnPredictionChart').getContext('2d'); |
|
|
const churnPredictionChart = new Chart(churnPredictionCtx, { |
|
|
type: 'doughnut', |
|
|
data: { |
|
|
labels: ['High Risk', 'Medium Risk', 'Low Risk'], |
|
|
datasets: [{ |
|
|
data: [12.4, 24.7, 62.9], |
|
|
backgroundColor: [ |
|
|
'#ff3d47', |
|
|
'#ff9e00', |
|
|
'#00ff9d' |
|
|
], |
|
|
borderWidth: 0 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
cutout: '70%', |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const revenueForecastCtx = document.getElementById('revenueForecastChart').getContext('2d'); |
|
|
const revenueForecastChart = new Chart(revenueForecastCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Q4 2023', 'Q1 2024', 'Q2 2024', 'Q3 2024', 'Q4 2024'], |
|
|
datasets: [{ |
|
|
label: 'Revenue', |
|
|
data: [142, 158, 172, 187, 203], |
|
|
borderColor: '#ff5e62', |
|
|
backgroundColor: 'rgba(255, 94, 98, 0.1)', |
|
|
tension: 0.3, |
|
|
borderWidth: 2, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
}, |
|
|
tooltip: { |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
return '$' + context.raw + 'M'; |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
min: 130, |
|
|
grid: { |
|
|
color: 'rgba(42, 42, 74, 0.5)' |
|
|
}, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return '$' + value + 'M'; |
|
|
} |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/smstrm-anaylsis-vbeta1-03" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
