RSK World - News Summary Bot - Project Files Browser | RSK World - Free Programming Resources & Source Code

templates/admin/analytics.html

<!DOCTYPE html>
<html lang="en">
<!--
    Admin Analytics - News Summary Bot
    Developer: Molla Samser
    Design & Testing: Rima Khatun
    Company: RSK World
    Year: 2026
    Website: https://rskworld.in
-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analytics - News Summary Bot</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        .analytics-container {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
        
        .analytics-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        
        .date-filter {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        .date-filter select {
            background: var(--glass);
            color: white;
            border: 1px solid var(--glass-border);
            padding: 0.5rem 1rem;
            border-radius: 8px;
        }
        
        .analytics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        
        .chart-container {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            padding: 1.5rem;
        }
        
        .chart-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .stats-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        
        .stats-table th,
        .stats-table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid var(--glass-border);
        }
        
        .stats-table th {
            background: rgba(255, 255, 255, 0.1);
            font-weight: 600;
        }
        
        .trending-list {
            list-style: none;
            padding: 0;
        }
        
        .trending-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--glass-border);
        }
        
        .trending-keywords {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        
        .keyword-tag {
            background: rgba(220, 53, 69, 0.2);
            color: var(--primary);
            padding: 0.25rem 0.5rem;
            border-radius: 5px;
            font-size: 0.8rem;
        }
    </style>
</head>
<body>
    <div class="admin-container">
        <aside class="sidebar">
            <div class="sidebar-header">
                <i class="fas fa-newspaper"></i>
                <h2>Admin Panel</h2>
            </div>
            
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="{{ url_for('admin.dashboard') }}" class="nav-link">
                        <i class="fas fa-tachometer-alt"></i>
                        Dashboard
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.analytics_page') }}" class="nav-link active">
                        <i class="fas fa-chart-line"></i>
                        Analytics
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.users') }}" class="nav-link">
                        <i class="fas fa-users"></i>
                        Users
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.content') }}" class="nav-link">
                        <i class="fas fa-newspaper"></i>
                        Content
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.settings') }}" class="nav-link">
                        <i class="fas fa-cog"></i>
                        Settings
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.logout') }}" class="nav-link">
                        <i class="fas fa-sign-out-alt"></i>
                        Logout
                    </a>
                </li>
            </ul>
        </aside>

        <main class="main-content">
            <div class="analytics-header">
                <h1>Detailed Analytics</h1>
                <div class="date-filter">
                    <label for="daysFilter">Period:</label>
                    <select id="daysFilter" onchange="updateAnalytics()">
                        <option value="7">Last 7 Days</option>
                        <option value="30" selected>Last 30 Days</option>
                        <option value="90">Last 90 Days</option>
                        <option value="365">Last Year</option>
                    </select>
                    <button class="btn btn-secondary" onclick="exportData()">
                        <i class="fas fa-download"></i> Export
                    </button>
                </div>
            </div>

            <div class="analytics-grid">
                <div class="chart-container">
                    <h3 class="chart-title">Sentiment Trends Over Time</h3>
                    <canvas id="sentimentTrendsChart" width="400" height="200"></canvas>
                </div>

                <div class="chart-container">
                    <h3 class="chart-title">Category Distribution</h3>
                    <canvas id="categoryChart" width="400" height="200"></canvas>
                </div>

                <div class="chart-container">
                    <h3 class="chart-title">User Activity</h3>
                    <canvas id="userActivityChart" width="400" height="200"></canvas>
                </div>

                <div class="chart-container">
                    <h3 class="chart-title">Search Analytics</h3>
                    <canvas id="searchChart" width="400" height="200"></canvas>
                </div>
            </div>

            <div class="analytics-container">
                <h3 class="chart-title">Trending Topics Analysis</h3>
                <ul class="trending-list">
                    {% for topic in trending_topics %}
                    <li class="trending-item">
                        <div class="trending-keywords">
                            {% for keyword in topic.keywords %}
                            <span class="keyword-tag">{{ keyword }}</span>
                            {% endfor %}
                        </div>
                        <div>
                            <span><i class="fas fa-folder"></i> {{ topic.category }}</span>
                            <span><i class="fas fa-fire"></i> {{ topic.frequency }}</span>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>

            <div class="analytics-container">
                <h3 class="chart-title">Category Performance</h3>
                <table class="stats-table">
                    <thead>
                        <tr>
                            <th>Category</th>
                            <th>Total Articles</th>
                            <th>Avg Reliability</th>
                            <th>Sentiment Breakdown</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for category, stats in category_analytics.items() %}
                        <tr>
                            <td>{{ category.title() }}</td>
                            <td>{{ stats.total_articles }}</td>
                            <td>{{ "%.1f"|format(stats.avg_reliability) }}%</td>
                            <td>
                                <span style="color: #28a745;">P: {{ stats.sentiments.Positive }}</span> |
                                <span style="color: #dc3545;">N: {{ stats.sentiments.Negative }}</span> |
                                <span style="color: #ffc107;">Neu: {{ stats.sentiments.Neutral }}</span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="analytics-container">
                <h3 class="chart-title">User Activity Summary</h3>
                <table class="stats-table">
                    <thead>
                        <tr>
                            <th>Action</th>
                            <th>Count</th>
                            <th>Percentage</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for action, count in user_activity.items() %}
                        <tr>
                            <td>{{ action.replace('_', ' ').title() }}</td>
                            <td>{{ count }}</td>
                            <td>{{ "%.1f"|format((count / user_activity.values() | sum) * 100) }}%</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </main>
    </div>

    <script>
        // Initialize charts with data
        const sentimentData = {{ sentiment_trends | tojson }};
        const categoryData = {{ category_analytics | tojson }};
        const activityData = {{ user_activity | tojson }};

        // Sentiment Trends Chart
        const sentimentCtx = document.getElementById('sentimentTrendsChart').getContext('2d');
        new Chart(sentimentCtx, {
            type: 'line',
            data: {
                labels: Object.keys(sentimentData),
                datasets: [
                    {
                        label: 'Positive',
                        data: Object.values(sentimentData).map(d => d.Positive || 0),
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        tension: 0.4
                    },
                    {
                        label: 'Negative',
                        data: Object.values(sentimentData).map(d => d.Negative || 0),
                        borderColor: '#dc3545',
                        backgroundColor: 'rgba(220, 53, 69, 0.1)',
                        tension: 0.4
                    },
                    {
                        label: 'Neutral',
                        data: Object.values(sentimentData).map(d => d.Neutral || 0),
                        borderColor: '#ffc107',
                        backgroundColor: 'rgba(255, 193, 7, 0.1)',
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        labels: { color: 'white' }
                    }
                },
                scales: {
                    x: { ticks: { color: 'white' }, grid: { color: 'rgba(255, 255, 255, 0.1)' } },
                    y: { ticks: { color: 'white' }, grid: { color: 'rgba(255, 255, 255, 0.1)' } }
                }
            }
        });

        // Category Chart
        const categoryCtx = document.getElementById('categoryChart').getContext('2d');
        const categoryLabels = Object.keys(categoryData);
        const categoryValues = categoryLabels.map(cat => categoryData[cat].total_articles || 0);
        
        new Chart(categoryCtx, {
            type: 'doughnut',
            data: {
                labels: categoryLabels,
                datasets: [{
                    data: categoryValues,
                    backgroundColor: ['#dc3545', '#0d6efd', '#28a745', '#ffc107', '#17a2b8', '#6f42c1']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { color: 'white' }
                    }
                }
            }
        });

        // User Activity Chart
        const activityCtx = document.getElementById('userActivityChart').getContext('2d');
        const activityLabels = Object.keys(activityData);
        const activityValues = Object.values(activityData);
        
        new Chart(activityCtx, {
            type: 'bar',
            data: {
                labels: activityLabels.map(label => label.replace('_', ' ').title()),
                datasets: [{
                    data: activityValues,
                    backgroundColor: '#0d6efd'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    x: { ticks: { color: 'white' }, grid: { color: 'rgba(255, 255, 255, 0.1)' } },
                    y: { ticks: { color: 'white' }, grid: { color: 'rgba(255, 255, 255, 0.1)' } }
                }
            }
        });

        function updateAnalytics() {
            const days = document.getElementById('daysFilter').value;
            window.location.href = `?days=${days}`;
        }

        function exportData() {
            // Implement data export functionality
            alert('Export functionality would be implemented here');
        }
    </script>
</body>
</html>

393 lines•14.5 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size

Theme Settings

Color Scheme

Display Options

Font Size

🚀 Support RSK World