commit c28c12c002ea329ba31b1805a2d7105f05d7b376 · dunkirk.sh/cachet

+747 -740
src/dashboard.html
···

       1
       1
        
       <!doctype html>

     

       2
       2
        
       <html lang="en">

     

       3
       3
       -
         <head>

     

       4
       4
       -
           <meta charset="UTF-8" />

     

       5
       5
       -
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       6
       6
       -
           <title>Cachet Analytics Dashboard</title>

     

       7
       7
       -
           <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>

     

       8
       8
       -
           <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

     

       9
       9
       -
           <style>

     

       10
       10
       -
             * {

     

       11
       11
       -
               margin: 0;

     

       12
       12
       -
               padding: 0;

     

       13
       13
       -
               box-sizing: border-box;

     

       14
       14
       -
             }

     

       15
       3
        
       

     

       16
       16
       -
             body {

     

       17
       17
       -
               font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,

     

       18
       18
       -
                 sans-serif;

     

       19
       19
       -
               background: #f9fafb;

     

       20
       20
       -
               color: #111827;

     

       21
       21
       -
               line-height: 1.6;

     

       22
       22
       -
             }

     

       4
       4
       +
       <head>

     

       5
       5
       +
         <meta charset="UTF-8" />

     

       6
       6
       +
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       7
       7
       +
         <title>Cachet Analytics Dashboard</title>

     

       8
       8
       +
         <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>

     

       9
       9
       +
         <script

     

       10
       10
       +
           src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

     

       11
       11
       +
         <style>

     

       12
       12
       +
           * {

     

       13
       13
       +
             margin: 0;

     

       14
       14
       +
             padding: 0;

     

       15
       15
       +
             box-sizing: border-box;

     

       16
       16
       +
           }

     

       23
       17
        
       

     

       24
       24
       -
             .header {

     

       25
       25
       -
               background: #fff;

     

       26
       26
       -
               padding: 1.5rem 2rem;

     

       27
       27
       -
               box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

     

       28
       28
       -
               margin-bottom: 2rem;

     

       29
       29
       -
               border-bottom: 1px solid #e5e7eb;

     

       30
       30
       -
             }

     

       18
       18
       +
           body {

     

       19
       19
       +
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,

     

       20
       20
       +
               sans-serif;

     

       21
       21
       +
             background: #f9fafb;

     

       22
       22
       +
             color: #111827;

     

       23
       23
       +
             line-height: 1.6;

     

       24
       24
       +
           }

     

       31
       25
        
       

     

       32
       32
       -
             .header h1 {

     

       33
       33
       -
               color: #111827;

     

       34
       34
       -
               font-size: 1.875rem;

     

       35
       35
       -
               font-weight: 700;

     

       36
       36
       -
               margin-bottom: 0.5rem;

     

       37
       37
       -
             }

     

       26
       26
       +
           .header {

     

       27
       27
       +
             background: #fff;

     

       28
       28
       +
             padding: 1.5rem 2rem;

     

       29
       29
       +
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

     

       30
       30
       +
             margin-bottom: 2rem;

     

       31
       31
       +
             border-bottom: 1px solid #e5e7eb;

     

       32
       32
       +
           }

     

       38
       33
        
       

     

       39
       39
       -
             .header-links {

     

       40
       40
       -
               display: flex;

     

       41
       41
       -
               gap: 1.5rem;

     

       42
       42
       -
             }

     

       34
       34
       +
           .header h1 {

     

       35
       35
       +
             color: #111827;

     

       36
       36
       +
             font-size: 1.875rem;

     

       37
       37
       +
             font-weight: 700;

     

       38
       38
       +
             margin-bottom: 0.5rem;

     

       39
       39
       +
           }

     

       43
       40
        
       

     

       44
       44
       -
             .header-links a {

     

       45
       45
       -
               color: #6366f1;

     

       46
       46
       -
               text-decoration: none;

     

       47
       47
       -
               font-weight: 500;

     

       48
       48
       -
             }

     

       41
       41
       +
           .header-links {

     

       42
       42
       +
             display: flex;

     

       43
       43
       +
             gap: 1.5rem;

     

       44
       44
       +
           }

     

       49
       45
        
       

     

       50
       50
       -
             .header-links a:hover {

     

       51
       51
       -
               color: #4f46e5;

     

       52
       52
       -
               text-decoration: underline;

     

       53
       53
       -
             }

     

       46
       46
       +
           .header-links a {

     

       47
       47
       +
             color: #6366f1;

     

       48
       48
       +
             text-decoration: none;

     

       49
       49
       +
             font-weight: 500;

     

       50
       50
       +
           }

     

       54
       51
        
       

     

       55
       55
       -
             .controls {

     

       56
       56
       -
               margin-bottom: 2rem;

     

       57
       57
       -
               display: flex;

     

       58
       58
       -
               justify-content: center;

     

       59
       59
       -
               align-items: center;

     

       60
       60
       -
               gap: 1rem;

     

       61
       61
       -
               flex-wrap: wrap;

     

       62
       62
       -
             }

     

       52
       52
       +
           .header-links a:hover {

     

       53
       53
       +
             color: #4f46e5;

     

       54
       54
       +
             text-decoration: underline;

     

       55
       55
       +
           }

     

       63
       56
        
       

     

       64
       64
       -
             .controls select,

     

       65
       65
       -
             .controls button {

     

       66
       66
       -
               padding: 0.75rem 1.25rem;

     

       67
       67
       -
               border: 1px solid #d1d5db;

     

       68
       68
       -
               border-radius: 8px;

     

       69
       69
       -
               background: white;

     

       70
       70
       -
               cursor: pointer;

     

       71
       71
       -
               font-size: 0.875rem;

     

       72
       72
       -
               font-weight: 500;

     

       73
       73
       -
               transition: all 0.2s ease;

     

       74
       74
       -
             }

     

       57
       57
       +
           .controls {

     

       58
       58
       +
             margin-bottom: 2rem;

     

       59
       59
       +
             display: flex;

     

       60
       60
       +
             justify-content: center;

     

       61
       61
       +
             align-items: center;

     

       62
       62
       +
             gap: 1rem;

     

       63
       63
       +
             flex-wrap: wrap;

     

       64
       64
       +
           }

     

       75
       65
        
       

     

       76
       76
       -
             .controls select:hover,

     

       77
       77
       -
             .controls select:focus {

     

       78
       78
       -
               border-color: #6366f1;

     

       79
       79
       -
               outline: none;

     

       80
       80
       -
               box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

     

       81
       81
       -
             }

     

       66
       66
       +
           .controls select,

     

       67
       67
       +
           .controls button {

     

       68
       68
       +
             padding: 0.75rem 1.25rem;

     

       69
       69
       +
             border: 1px solid #d1d5db;

     

       70
       70
       +
             border-radius: 8px;

     

       71
       71
       +
             background: white;

     

       72
       72
       +
             cursor: pointer;

     

       73
       73
       +
             font-size: 0.875rem;

     

       74
       74
       +
             font-weight: 500;

     

       75
       75
       +
             transition: all 0.2s ease;

     

       76
       76
       +
           }

     

       82
       77
        
       

     

       83
       83
       -
             .controls button {

     

       84
       84
       -
               background: #6366f1;

     

       85
       85
       -
               color: white;

     

       86
       86
       -
               border: none;

     

       87
       87
       -
             }

     

       78
       78
       +
           .controls select:hover,

     

       79
       79
       +
           .controls select:focus {

     

       80
       80
       +
             border-color: #6366f1;

     

       81
       81
       +
             outline: none;

     

       82
       82
       +
             box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

     

       83
       83
       +
           }

     

       88
       84
        
       

     

       89
       89
       -
             .controls button:hover {

     

       90
       90
       -
               background: #4f46e5;

     

       91
       91
       -
             }

     

       85
       85
       +
           .controls button {

     

       86
       86
       +
             background: #6366f1;

     

       87
       87
       +
             color: white;

     

       88
       88
       +
             border: none;

     

       89
       89
       +
           }

     

       92
       90
        
       

     

       93
       93
       -
             .controls button:disabled {

     

       94
       94
       -
               background: #9ca3af;

     

       95
       95
       -
               cursor: not-allowed;

     

       96
       96
       -
             }

     

       91
       91
       +
           .controls button:hover {

     

       92
       92
       +
             background: #4f46e5;

     

       93
       93
       +
           }

     

       97
       94
        
       

     

       98
       98
       -
             .dashboard {

     

       99
       99
       -
               max-width: 1200px;

     

       100
       100
       -
               margin: 0 auto;

     

       101
       101
       -
               padding: 0 2rem;

     

       102
       102
       -
             }

     

       95
       95
       +
           .controls button:disabled {

     

       96
       96
       +
             background: #9ca3af;

     

       97
       97
       +
             cursor: not-allowed;

     

       98
       98
       +
           }

     

       103
       99
        
       

     

       104
       104
       -
             .stats-grid {

     

       105
       105
       -
               display: grid;

     

       106
       106
       -
               grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

     

       107
       107
       -
               gap: 1.5rem;

     

       108
       108
       -
               margin-bottom: 3rem;

     

       109
       109
       -
             }

     

       100
       100
       +
           .dashboard {

     

       101
       101
       +
             max-width: 1200px;

     

       102
       102
       +
             margin: 0 auto;

     

       103
       103
       +
             padding: 0 2rem;

     

       104
       104
       +
           }

     

       110
       105
        
       

     

       111
       111
       -
             .stat-card {

     

       112
       112
       -
               background: white;

     

       113
       113
       -
               padding: 2rem;

     

       114
       114
       -
               border-radius: 12px;

     

       115
       115
       -
               box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

     

       116
       116
       -
               text-align: center;

     

       117
       117
       -
               border: 1px solid #e5e7eb;

     

       118
       118
       -
               transition: all 0.2s ease;

     

       119
       119
       -
               min-height: 140px;

     

       120
       120
       -
               display: flex;

     

       121
       121
       -
               flex-direction: column;

     

       122
       122
       -
               justify-content: center;

     

       123
       123
       -
             }

     

       106
       106
       +
           .stats-grid {

     

       107
       107
       +
             display: grid;

     

       108
       108
       +
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

     

       109
       109
       +
             gap: 1.5rem;

     

       110
       110
       +
             margin-bottom: 3rem;

     

       111
       111
       +
           }

     

       112
       112
       +
       

     

       113
       113
       +
           .stat-card {

     

       114
       114
       +
             background: white;

     

       115
       115
       +
             padding: 2rem;

     

       116
       116
       +
             border-radius: 12px;

     

       117
       117
       +
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

     

       118
       118
       +
             text-align: center;

     

       119
       119
       +
             border: 1px solid #e5e7eb;

     

       120
       120
       +
             transition: all 0.2s ease;

     

       121
       121
       +
             min-height: 140px;

     

       122
       122
       +
             display: flex;

     

       123
       123
       +
             flex-direction: column;

     

       124
       124
       +
             justify-content: center;

     

       125
       125
       +
           }

     

       126
       126
       +
       

     

       127
       127
       +
           .stat-card:hover {

     

       128
       128
       +
             transform: translateY(-2px);

     

       129
       129
       +
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

     

       130
       130
       +
           }

     

       131
       131
       +
       

     

       132
       132
       +
           .stat-number {

     

       133
       133
       +
             font-weight: 800;

     

       134
       134
       +
             color: #111827;

     

       135
       135
       +
             margin-bottom: 0.5rem;

     

       136
       136
       +
             font-size: 2.5rem;

     

       137
       137
       +
             line-height: 1;

     

       138
       138
       +
           }

     

       124
       139
        
       

     

       125
       125
       -
             .stat-card:hover {

     

       126
       126
       -
               transform: translateY(-2px);

     

       127
       127
       -
               box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

     

       128
       128
       -
             }

     

       140
       140
       +
           .stat-label {

     

       141
       141
       +
             color: #6b7280;

     

       142
       142
       +
             font-weight: 600;

     

       143
       143
       +
             font-size: 0.875rem;

     

       144
       144
       +
             text-transform: uppercase;

     

       145
       145
       +
             letter-spacing: 0.05em;

     

       146
       146
       +
           }

     

       129
       147
        
       

     

       130
       130
       -
             .stat-number {

     

       131
       131
       -
               font-weight: 800;

     

       132
       132
       -
               color: #111827;

     

       133
       133
       -
               margin-bottom: 0.5rem;

     

       134
       134
       -
               font-size: 2.5rem;

     

       135
       135
       -
               line-height: 1;

     

       136
       136
       -
             }

     

       148
       148
       +
           .charts-grid {

     

       149
       149
       +
             display: grid;

     

       150
       150
       +
             grid-template-columns: 1fr;

     

       151
       151
       +
             gap: 2rem;

     

       152
       152
       +
             margin-bottom: 3rem;

     

       153
       153
       +
           }

     

       137
       154
        
       

     

       138
       138
       -
             .stat-label {

     

       139
       139
       -
               color: #6b7280;

     

       140
       140
       -
               font-weight: 600;

     

       141
       141
       -
               font-size: 0.875rem;

     

       142
       142
       -
               text-transform: uppercase;

     

       143
       143
       -
               letter-spacing: 0.05em;

     

       144
       144
       -
             }

     

       155
       155
       +
           .charts-row {

     

       156
       156
       +
             display: grid;

     

       157
       157
       +
             grid-template-columns: 1fr 1fr;

     

       158
       158
       +
             gap: 2rem;

     

       159
       159
       +
           }

     

       145
       160
        
       

     

       146
       146
       -
             .charts-grid {

     

       147
       147
       -
               display: grid;

     

       161
       161
       +
           @media (max-width: 768px) {

     

       162
       162
       +
             .charts-row {

     

       148
       163
        
               grid-template-columns: 1fr;

     

       149
       149
       -
               gap: 2rem;

     

       150
       150
       -
               margin-bottom: 3rem;

     

       151
       164
        
             }

     

       152
       165
        
       

     

       153
       153
       -
             .charts-row {

     

       154
       154
       -
               display: grid;

     

       155
       155
       -
               grid-template-columns: 1fr 1fr;

     

       156
       156
       -
               gap: 2rem;

     

       166
       166
       +
             .stats-grid {

     

       167
       167
       +
               grid-template-columns: 1fr;

     

       157
       168
        
             }

     

       158
       169
        
       

     

       159
       159
       -
             @media (max-width: 768px) {

     

       160
       160
       -
               .charts-row {

     

       161
       161
       -
                 grid-template-columns: 1fr;

     

       162
       162
       -
               }

     

       170
       170
       +
             .dashboard {

     

       171
       171
       +
               padding: 0 1rem;

     

       172
       172
       +
             }

     

       163
       173
        
       

     

       164
       164
       -
               .stats-grid {

     

       165
       165
       -
                 grid-template-columns: 1fr;

     

       166
       166
       -
               }

     

       174
       174
       +
             .stat-number {

     

       175
       175
       +
               font-size: 2rem;

     

       176
       176
       +
             }

     

       177
       177
       +
           }

     

       167
       178
        
       

     

       168
       168
       -
               .dashboard {

     

       169
       169
       -
                 padding: 0 1rem;

     

       170
       170
       -
               }

     

       179
       179
       +
           .chart-container {

     

       180
       180
       +
             background: white;

     

       181
       181
       +
             padding: 1.5rem;

     

       182
       182
       +
             border-radius: 12px;

     

       183
       183
       +
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

     

       184
       184
       +
             border: 1px solid #e5e7eb;

     

       185
       185
       +
             height: 25rem;

     

       186
       186
       +
             padding-bottom: 5rem;

     

       187
       187
       +
           }

     

       171
       188
        
       

     

       172
       172
       -
               .stat-number {

     

       173
       173
       -
                 font-size: 2rem;

     

       174
       174
       -
               }

     

       175
       175
       -
             }

     

       189
       189
       +
           .chart-title {

     

       190
       190
       +
             font-size: 1.25rem;

     

       191
       191
       +
             margin-bottom: 1.5rem;

     

       192
       192
       +
             color: #111827;

     

       193
       193
       +
             font-weight: 700;

     

       194
       194
       +
           }

     

       176
       195
        
       

     

       177
       177
       -
             .chart-container {

     

       178
       178
       -
               background: white;

     

       179
       179
       -
               padding: 1.5rem;

     

       180
       180
       -
               border-radius: 12px;

     

       181
       181
       -
               box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

     

       182
       182
       -
               border: 1px solid #e5e7eb;

     

       183
       183
       -
               height: 25rem;

     

       184
       184
       -
               padding-bottom: 5rem;

     

       185
       185
       -
             }

     

       196
       196
       +
           .user-agents-table {

     

       197
       197
       +
             background: white;

     

       198
       198
       +
             padding: 2rem;

     

       199
       199
       +
             border-radius: 12px;

     

       200
       200
       +
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

     

       201
       201
       +
             border: 1px solid #e5e7eb;

     

       202
       202
       +
           }

     

       186
       203
        
       

     

       187
       187
       -
             .chart-title {

     

       188
       188
       -
               font-size: 1.25rem;

     

       189
       189
       -
               margin-bottom: 1.5rem;

     

       190
       190
       -
               color: #111827;

     

       191
       191
       -
               font-weight: 700;

     

       192
       192
       -
             }

     

       204
       204
       +
           .search-container {

     

       205
       205
       +
             margin-bottom: 1.5rem;

     

       206
       206
       +
             position: relative;

     

       207
       207
       +
           }

     

       193
       208
        
       

     

       194
       194
       -
             .user-agents-table {

     

       195
       195
       -
               background: white;

     

       196
       196
       -
               padding: 2rem;

     

       197
       197
       -
               border-radius: 12px;

     

       198
       198
       -
               box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

     

       199
       199
       -
               border: 1px solid #e5e7eb;

     

       200
       200
       -
             }

     

       209
       209
       +
           .search-input {

     

       210
       210
       +
             width: 100%;

     

       211
       211
       +
             padding: 0.75rem 1rem;

     

       212
       212
       +
             border: 1px solid #d1d5db;

     

       213
       213
       +
             border-radius: 8px;

     

       214
       214
       +
             font-size: 0.875rem;

     

       215
       215
       +
             background: #f9fafb;

     

       216
       216
       +
             transition: border-color 0.2s ease;

     

       217
       217
       +
           }

     

       201
       218
        
       

     

       202
       202
       -
             .search-container {

     

       203
       203
       -
               margin-bottom: 1.5rem;

     

       204
       204
       -
               position: relative;

     

       205
       205
       -
             }

     

       219
       219
       +
           .search-input:focus {

     

       220
       220
       +
             outline: none;

     

       221
       221
       +
             border-color: #6366f1;

     

       222
       222
       +
             background: white;

     

       223
       223
       +
             box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

     

       224
       224
       +
           }

     

       206
       225
        
       

     

       207
       207
       -
             .search-input {

     

       208
       208
       -
               width: 100%;

     

       209
       209
       -
               padding: 0.75rem 1rem;

     

       210
       210
       -
               border: 1px solid #d1d5db;

     

       211
       211
       -
               border-radius: 8px;

     

       212
       212
       -
               font-size: 0.875rem;

     

       213
       213
       -
               background: #f9fafb;

     

       214
       214
       -
               transition: border-color 0.2s ease;

     

       215
       215
       -
             }

     

       226
       226
       +
           .ua-table {

     

       227
       227
       +
             width: 100%;

     

       228
       228
       +
             border-collapse: collapse;

     

       229
       229
       +
             font-size: 0.875rem;

     

       230
       230
       +
           }

     

       216
       231
        
       

     

       217
       217
       -
             .search-input:focus {

     

       218
       218
       -
               outline: none;

     

       219
       219
       -
               border-color: #6366f1;

     

       220
       220
       -
               background: white;

     

       221
       221
       -
               box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

     

       222
       222
       -
             }

     

       232
       232
       +
           .ua-table th {

     

       233
       233
       +
             text-align: left;

     

       234
       234
       +
             padding: 0.75rem 1rem;

     

       235
       235
       +
             background: #f9fafb;

     

       236
       236
       +
             border-bottom: 2px solid #e5e7eb;

     

       237
       237
       +
             font-weight: 600;

     

       238
       238
       +
             color: #374151;

     

       239
       239
       +
             position: sticky;

     

       240
       240
       +
             top: 0;

     

       241
       241
       +
           }

     

       223
       242
        
       

     

       224
       224
       -
             .ua-table {

     

       225
       225
       -
               width: 100%;

     

       226
       226
       -
               border-collapse: collapse;

     

       227
       227
       -
               font-size: 0.875rem;

     

       228
       228
       -
             }

     

       243
       243
       +
           .ua-table td {

     

       244
       244
       +
             padding: 0.75rem 1rem;

     

       245
       245
       +
             border-bottom: 1px solid #f3f4f6;

     

       246
       246
       +
             vertical-align: top;

     

       247
       247
       +
           }

     

       229
       248
        
       

     

       230
       230
       -
             .ua-table th {

     

       231
       231
       -
               text-align: left;

     

       232
       232
       -
               padding: 0.75rem 1rem;

     

       233
       233
       -
               background: #f9fafb;

     

       234
       234
       -
               border-bottom: 2px solid #e5e7eb;

     

       235
       235
       -
               font-weight: 600;

     

       236
       236
       -
               color: #374151;

     

       237
       237
       -
               position: sticky;

     

       238
       238
       -
               top: 0;

     

       239
       239
       -
             }

     

       249
       249
       +
           .ua-table tbody tr:hover {

     

       250
       250
       +
             background: #f9fafb;

     

       251
       251
       +
           }

     

       240
       252
        
       

     

       241
       241
       -
             .ua-table td {

     

       242
       242
       -
               padding: 0.75rem 1rem;

     

       243
       243
       -
               border-bottom: 1px solid #f3f4f6;

     

       244
       244
       -
               vertical-align: top;

     

       245
       245
       -
             }

     

       253
       253
       +
           .ua-name {

     

       254
       254
       +
             font-weight: 500;

     

       255
       255
       +
             color: #111827;

     

       256
       256
       +
             line-height: 1.4;

     

       257
       257
       +
             max-width: 400px;

     

       258
       258
       +
             word-break: break-word;

     

       259
       259
       +
           }

     

       246
       260
        
       

     

       247
       247
       -
             .ua-table tbody tr:hover {

     

       248
       248
       -
               background: #f9fafb;

     

       249
       249
       -
             }

     

       261
       261
       +
           .ua-raw {

     

       262
       262
       +
             font-family: monospace;

     

       263
       263
       +
             font-size: 0.75rem;

     

       264
       264
       +
             color: #6b7280;

     

       265
       265
       +
             margin-top: 0.25rem;

     

       266
       266
       +
             max-width: 400px;

     

       267
       267
       +
             word-break: break-all;

     

       268
       268
       +
             line-height: 1.3;

     

       269
       269
       +
           }

     

       250
       270
        
       

     

       251
       251
       -
             .ua-name {

     

       252
       252
       -
               font-weight: 500;

     

       253
       253
       -
               color: #111827;

     

       254
       254
       -
               line-height: 1.4;

     

       255
       255
       -
               max-width: 400px;

     

       256
       256
       -
               word-break: break-word;

     

       257
       257
       -
             }

     

       271
       271
       +
           .ua-count {

     

       272
       272
       +
             font-weight: 600;

     

       273
       273
       +
             color: #111827;

     

       274
       274
       +
             text-align: right;

     

       275
       275
       +
             white-space: nowrap;

     

       276
       276
       +
           }

     

       258
       277
        
       

     

       259
       259
       -
             .ua-raw {

     

       260
       260
       -
               font-family: monospace;

     

       261
       261
       -
               font-size: 0.75rem;

     

       262
       262
       -
               color: #6b7280;

     

       263
       263
       -
               margin-top: 0.25rem;

     

       264
       264
       -
               max-width: 400px;

     

       265
       265
       -
               word-break: break-all;

     

       266
       266
       -
               line-height: 1.3;

     

       267
       267
       -
             }

     

       278
       278
       +
           .ua-percentage {

     

       279
       279
       +
             color: #6b7280;

     

       280
       280
       +
             text-align: right;

     

       281
       281
       +
             font-size: 0.75rem;

     

       282
       282
       +
           }

     

       268
       283
        
       

     

       269
       269
       -
             .ua-count {

     

       270
       270
       -
               font-weight: 600;

     

       271
       271
       -
               color: #111827;

     

       272
       272
       -
               text-align: right;

     

       273
       273
       -
               white-space: nowrap;

     

       274
       274
       -
             }

     

       284
       284
       +
           .no-results {

     

       285
       285
       +
             text-align: center;

     

       286
       286
       +
             padding: 2rem;

     

       287
       287
       +
             color: #6b7280;

     

       288
       288
       +
             font-style: italic;

     

       289
       289
       +
           }

     

       275
       290
        
       

     

       276
       276
       -
             .ua-percentage {

     

       277
       277
       -
               color: #6b7280;

     

       278
       278
       -
               text-align: right;

     

       279
       279
       -
               font-size: 0.75rem;

     

       280
       280
       -
             }

     

       291
       291
       +
           .loading {

     

       292
       292
       +
             text-align: center;

     

       293
       293
       +
             padding: 3rem;

     

       294
       294
       +
             color: #6b7280;

     

       295
       295
       +
           }

     

       281
       296
        
       

     

       282
       282
       -
             .no-results {

     

       283
       283
       -
               text-align: center;

     

       284
       284
       -
               padding: 2rem;

     

       285
       285
       -
               color: #6b7280;

     

       286
       286
       -
               font-style: italic;

     

       287
       287
       -
             }

     

       297
       297
       +
           .loading-spinner {

     

       298
       298
       +
             display: inline-block;

     

       299
       299
       +
             width: 2rem;

     

       300
       300
       +
             height: 2rem;

     

       301
       301
       +
             border: 3px solid #e5e7eb;

     

       302
       302
       +
             border-radius: 50%;

     

       303
       303
       +
             border-top-color: #6366f1;

     

       304
       304
       +
             animation: spin 1s ease-in-out infinite;

     

       305
       305
       +
             margin-bottom: 1rem;

     

       306
       306
       +
           }

     

       288
       307
        
       

     

       289
       289
       -
             .loading {

     

       290
       290
       -
               text-align: center;

     

       291
       291
       -
               padding: 3rem;

     

       292
       292
       -
               color: #6b7280;

     

       308
       308
       +
           @keyframes spin {

     

       309
       309
       +
             to {

     

       310
       310
       +
               transform: rotate(360deg);

     

       293
       311
        
             }

     

       312
       312
       +
           }

     

       294
       313
        
       

     

       295
       295
       -
             .loading-spinner {

     

       296
       296
       -
               display: inline-block;

     

       297
       297
       -
               width: 2rem;

     

       298
       298
       -
               height: 2rem;

     

       299
       299
       -
               border: 3px solid #e5e7eb;

     

       300
       300
       -
               border-radius: 50%;

     

       301
       301
       -
               border-top-color: #6366f1;

     

       302
       302
       -
               animation: spin 1s ease-in-out infinite;

     

       303
       303
       -
               margin-bottom: 1rem;

     

       304
       304
       -
             }

     

       314
       314
       +
           .error {

     

       315
       315
       +
             background: #fef2f2;

     

       316
       316
       +
             color: #dc2626;

     

       317
       317
       +
             padding: 1rem;

     

       318
       318
       +
             border-radius: 8px;

     

       319
       319
       +
             margin: 1rem 0;

     

       320
       320
       +
             border: 1px solid #fecaca;

     

       321
       321
       +
           }

     

       305
       322
        
       

     

       306
       306
       -
             @keyframes spin {

     

       307
       307
       -
               to { transform: rotate(360deg); }

     

       308
       308
       -
             }

     

       323
       323
       +
           .auto-refresh {

     

       324
       324
       +
             display: flex;

     

       325
       325
       +
             align-items: center;

     

       326
       326
       +
             gap: 0.5rem;

     

       327
       327
       +
             font-size: 0.875rem;

     

       328
       328
       +
             color: #6b7280;

     

       329
       329
       +
           }

     

       309
       330
        
       

     

       310
       310
       -
             .error {

     

       311
       311
       -
               background: #fef2f2;

     

       312
       312
       -
               color: #dc2626;

     

       313
       313
       -
               padding: 1rem;

     

       314
       314
       -
               border-radius: 8px;

     

       315
       315
       -
               margin: 1rem 0;

     

       316
       316
       -
               border: 1px solid #fecaca;

     

       317
       317
       -
             }

     

       331
       331
       +
           .auto-refresh input[type="checkbox"] {

     

       332
       332
       +
             transform: scale(1.1);

     

       333
       333
       +
             accent-color: #6366f1;

     

       334
       334
       +
           }

     

       335
       335
       +
         </style>

     

       336
       336
       +
       </head>

     

       318
       337
        
       

     

       319
       319
       -
             .auto-refresh {

     

       320
       320
       -
               display: flex;

     

       321
       321
       -
               align-items: center;

     

       322
       322
       -
               gap: 0.5rem;

     

       323
       323
       -
               font-size: 0.875rem;

     

       324
       324
       -
               color: #6b7280;

     

       325
       325
       -
             }

     

       338
       338
       +
       <body>

     

       339
       339
       +
         <div class="header">

     

       340
       340
       +
           <h1>📊 Cachet Analytics Dashboard</h1>

     

       341
       341
       +
           <div class="header-links">

     

       342
       342
       +
             <a href="https://github.com/taciturnaxolotl/cachet">Github</a>

     

       343
       343
       +
             <a href="/swagger">API Docs</a>

     

       344
       344
       +
             <a href="/stats">Raw Stats</a>

     

       345
       345
       +
             <a href="https://status.dunkirk.sh/status/cachet">Status</a>

     

       346
       346
       +
           </div>

     

       347
       347
       +
         </div>

     

       326
       348
        
       

     

       327
       327
       -
             .auto-refresh input[type="checkbox"] {

     

       328
       328
       -
               transform: scale(1.1);

     

       329
       329
       -
               accent-color: #6366f1;

     

       330
       330
       -
             }

     

       331
       331
       -
           </style>

     

       332
       332
       -
         </head>

     

       333
       333
       -
         <body>

     

       334
       334
       -
           <div class="header">

     

       335
       335
       -
             <h1>📊 Cachet Analytics Dashboard</h1>

     

       336
       336
       -
             <div class="header-links">

     

       337
       337
       -
               <a href="https://github.com/taciturnaxolotl/cachet">Github</a>

     

       338
       338
       -
               <a href="/swagger">API Docs</a>

     

       339
       339
       -
               <a href="/stats">Raw Stats</a>

     

       349
       349
       +
         <div class="dashboard">

     

       350
       350
       +
           <div class="controls">

     

       351
       351
       +
             <select id="daysSelect">

     

       352
       352
       +
               <option value="1">Last 24 hours</option>

     

       353
       353
       +
               <option value="7" selected>Last 7 days</option>

     

       354
       354
       +
               <option value="30">Last 30 days</option>

     

       355
       355
       +
             </select>

     

       356
       356
       +
             <button id="refreshBtn" onclick="loadData()">Refresh</button>

     

       357
       357
       +
             <div class="auto-refresh">

     

       358
       358
       +
               <input type="checkbox" id="autoRefresh" />

     

       359
       359
       +
               <label for="autoRefresh">Auto-refresh (30s)</label>

     

       340
       360
        
             </div>

     

       341
       361
        
           </div>

     

       342
       362
        
       

     

       343
       343
       -
           <div class="dashboard">

     

       344
       344
       -
             <div class="controls">

     

       345
       345
       -
               <select id="daysSelect">

     

       346
       346
       -
                 <option value="1">Last 24 hours</option>

     

       347
       347
       -
                 <option value="7" selected>Last 7 days</option>

     

       348
       348
       -
                 <option value="30">Last 30 days</option>

     

       349
       349
       -
               </select>

     

       350
       350
       -
               <button id="refreshBtn" onclick="loadData()">Refresh</button>

     

       351
       351
       -
               <div class="auto-refresh">

     

       352
       352
       -
                 <input type="checkbox" id="autoRefresh" />

     

       353
       353
       -
                 <label for="autoRefresh">Auto-refresh (30s)</label>

     

       363
       363
       +
           <div id="loading" class="loading">

     

       364
       364
       +
             <div class="loading-spinner"></div>

     

       365
       365
       +
             Loading analytics data...

     

       366
       366
       +
           </div>

     

       367
       367
       +
           <div id="error" class="error" style="display: none"></div>

     

       368
       368
       +
       

     

       369
       369
       +
           <div id="content" style="display: none">

     

       370
       370
       +
             <!-- Key Metrics -->

     

       371
       371
       +
             <div class="stats-grid">

     

       372
       372
       +
               <div class="stat-card">

     

       373
       373
       +
                 <div class="stat-number" id="totalRequests">-</div>

     

       374
       374
       +
                 <div class="stat-label">Total Requests</div>

     

       375
       375
       +
               </div>

     

       376
       376
       +
               <div class="stat-card">

     

       377
       377
       +
                 <div class="stat-number" id="uptime">-</div>

     

       378
       378
       +
                 <div class="stat-label">Uptime</div>

     

       354
       379
        
               </div>

     

       355
       355
       -
             </div>

     

       356
       356
       -
       

     

       357
       357
       -
             <div id="loading" class="loading">

     

       358
       358
       -
               <div class="loading-spinner"></div>

     

       359
       359
       -
               Loading analytics data...

     

       380
       380
       +
               <div class="stat-card">

     

       381
       381
       +
                 <div class="stat-number" id="avgResponseTime">-</div>

     

       382
       382
       +
                 <div class="stat-label">Avg Response Time</div>

     

       383
       383
       +
               </div>

     

       360
       384
        
             </div>

     

       361
       361
       -
             <div id="error" class="error" style="display: none"></div>

     

       362
       385
        
       

     

       363
       363
       -
             <div id="content" style="display: none">

     

       364
       364
       -
               <!-- Key Metrics -->

     

       365
       365
       -
               <div class="stats-grid">

     

       366
       366
       -
                 <div class="stat-card">

     

       367
       367
       -
                   <div class="stat-number" id="totalRequests">-</div>

     

       368
       368
       -
                   <div class="stat-label">Total Requests</div>

     

       386
       386
       +
             <!-- Main Charts -->

     

       387
       387
       +
             <div class="charts-grid">

     

       388
       388
       +
               <div class="charts-row">

     

       389
       389
       +
                 <div class="chart-container">

     

       390
       390
       +
                   <div class="chart-title">Requests Over Time</div>

     

       391
       391
       +
                   <canvas id="requestsChart"></canvas>

     

       369
       392
        
                 </div>

     

       370
       370
       -
                 <div class="stat-card">

     

       371
       371
       -
                   <div class="stat-number" id="uptime">-</div>

     

       372
       372
       -
                   <div class="stat-label">Uptime</div>

     

       373
       373
       -
                 </div>

     

       374
       374
       -
                 <div class="stat-card">

     

       375
       375
       -
                   <div class="stat-number" id="avgResponseTime">-</div>

     

       376
       376
       -
                   <div class="stat-label">Avg Response Time</div>

     

       393
       393
       +
                 <div class="chart-container">

     

       394
       394
       +
                   <div class="chart-title">Latency Over Time</div>

     

       395
       395
       +
                   <canvas id="latencyChart"></canvas>

     

       377
       396
        
                 </div>

     

       378
       397
        
               </div>

     

       398
       398
       +
             </div>

     

       379
       399
        
       

     

       380
       380
       -
               <!-- Main Charts -->

     

       381
       381
       -
               <div class="charts-grid">

     

       382
       382
       -
                 <div class="charts-row">

     

       383
       383
       -
                   <div class="chart-container">

     

       384
       384
       -
                     <div class="chart-title">Requests Over Time</div>

     

       385
       385
       -
                     <canvas id="requestsChart"></canvas>

     

       386
       386
       -
                   </div>

     

       387
       387
       -
                   <div class="chart-container">

     

       388
       388
       -
                     <div class="chart-title">Latency Over Time</div>

     

       389
       389
       -
                     <canvas id="latencyChart"></canvas>

     

       390
       390
       -
                   </div>

     

       391
       391
       -
                 </div>

     

       400
       400
       +
             <!-- User Agents Table -->

     

       401
       401
       +
             <div class="user-agents-table">

     

       402
       402
       +
               <div class="chart-title">User Agents</div>

     

       403
       403
       +
               <div class="search-container">

     

       404
       404
       +
                 <input type="text" id="userAgentSearch" class="search-input" placeholder="Search user agents...">

     

       392
       405
        
               </div>

     

       393
       393
       -
       

     

       394
       394
       -
               <!-- User Agents Table -->

     

       395
       395
       -
               <div class="user-agents-table">

     

       396
       396
       -
                 <div class="chart-title">User Agents</div>

     

       397
       397
       -
                 <div class="search-container">

     

       398
       398
       -
                   <input type="text" id="userAgentSearch" class="search-input" placeholder="Search user agents...">

     

       399
       399
       -
                 </div>

     

       400
       400
       -
                 <div id="userAgentsTable">

     

       401
       401
       -
                   <div class="loading">Loading user agents...</div>

     

       402
       402
       -
                 </div>

     

       406
       406
       +
               <div id="userAgentsTable">

     

       407
       407
       +
                 <div class="loading">Loading user agents...</div>

     

       403
       408
        
               </div>

     

       404
       409
        
             </div>

     

       405
       410
        
           </div>

     

       411
       411
       +
         </div>

     

       406
       412
        
       

     

       407
       407
       -
           <script>

     

       408
       408
       -
             const charts = {};

     

       409
       409
       -
             let autoRefreshInterval;

     

       410
       410
       -
             const _currentData = null;

     

       411
       411
       -
             let _isLoading = false;

     

       412
       412
       -
             let currentRequestId = 0;

     

       413
       413
       -
             let abortController = null;

     

       413
       413
       +
         <script>

     

       414
       414
       +
           const charts = {};

     

       415
       415
       +
           let autoRefreshInterval;

     

       416
       416
       +
           const _currentData = null;

     

       417
       417
       +
           let _isLoading = false;

     

       418
       418
       +
           let currentRequestId = 0;

     

       419
       419
       +
           let abortController = null;

     

       414
       420
        
       

     

       415
       415
       -
             // Debounced resize handler for charts

     

       416
       416
       -
             let resizeTimeout;

     

       417
       417
       -
             function handleResize() {

     

       418
       418
       -
               clearTimeout(resizeTimeout);

     

       419
       419
       -
               resizeTimeout = setTimeout(() => {

     

       420
       420
       -
                 Object.values(charts).forEach(chart => {

     

       421
       421
       -
                   if (chart && typeof chart.resize === 'function') {

     

       422
       422
       -
                     chart.resize();

     

       423
       423
       -
                   }

     

       424
       424
       -
                 });

     

       425
       425
       -
               }, 250);

     

       426
       426
       -
             }

     

       421
       421
       +
           // Debounced resize handler for charts

     

       422
       422
       +
           let resizeTimeout;

     

       423
       423
       +
           function handleResize() {

     

       424
       424
       +
             clearTimeout(resizeTimeout);

     

       425
       425
       +
             resizeTimeout = setTimeout(() => {

     

       426
       426
       +
               Object.values(charts).forEach(chart => {

     

       427
       427
       +
                 if (chart && typeof chart.resize === 'function') {

     

       428
       428
       +
                   chart.resize();

     

       429
       429
       +
                 }

     

       430
       430
       +
               });

     

       431
       431
       +
             }, 250);

     

       432
       432
       +
           }

     

       427
       433
        
       

     

       428
       428
       -
             window.addEventListener('resize', handleResize);

     

       434
       434
       +
           window.addEventListener('resize', handleResize);

     

       429
       435
        
       

     

       430
       430
       -
             async function loadData() {

     

       431
       431
       -
               // Cancel any existing requests

     

       432
       432
       -
               if (abortController) {

     

       433
       433
       -
                 abortController.abort();

     

       434
       434
       -
               }

     

       436
       436
       +
           async function loadData() {

     

       437
       437
       +
             // Cancel any existing requests

     

       438
       438
       +
             if (abortController) {

     

       439
       439
       +
               abortController.abort();

     

       440
       440
       +
             }

     

       435
       441
        
       

     

       436
       436
       -
               // Create new abort controller for this request

     

       437
       437
       -
               abortController = new AbortController();

     

       438
       438
       -
               const requestId = ++currentRequestId;

     

       439
       439
       -
               const signal = abortController.signal;

     

       442
       442
       +
             // Create new abort controller for this request

     

       443
       443
       +
             abortController = new AbortController();

     

       444
       444
       +
             const requestId = ++currentRequestId;

     

       445
       445
       +
             const signal = abortController.signal;

     

       440
       446
        
       

     

       441
       441
       -
               _isLoading = true;

     

       442
       442
       -
               const startTime = Date.now();

     

       447
       447
       +
             _isLoading = true;

     

       448
       448
       +
             const startTime = Date.now();

     

       443
       449
        
       

     

       444
       444
       -
               // Capture the days value at the start to ensure consistency

     

       445
       445
       -
               const days = document.getElementById("daysSelect").value;

     

       446
       446
       -
               const loading = document.getElementById("loading");

     

       447
       447
       -
               const error = document.getElementById("error");

     

       448
       448
       -
               const content = document.getElementById("content");

     

       449
       449
       -
               const refreshBtn = document.getElementById("refreshBtn");

     

       450
       450
       +
             // Capture the days value at the start to ensure consistency

     

       451
       451
       +
             const days = document.getElementById("daysSelect").value;

     

       452
       452
       +
             const loading = document.getElementById("loading");

     

       453
       453
       +
             const error = document.getElementById("error");

     

       454
       454
       +
             const content = document.getElementById("content");

     

       455
       455
       +
             const refreshBtn = document.getElementById("refreshBtn");

     

       450
       456
        
       

     

       451
       451
       -
               console.log(`Starting request ${requestId} for ${days} days`);

     

       457
       457
       +
             console.log(`Starting request ${requestId} for ${days} days`);

     

       452
       458
        
       

     

       453
       453
       -
               // Update UI state

     

       454
       454
       -
               loading.style.display = "block";

     

       455
       455
       -
               error.style.display = "none";

     

       456
       456
       -
               content.style.display = "none";

     

       457
       457
       -
               refreshBtn.disabled = true;

     

       458
       458
       -
               refreshBtn.textContent = "Loading...";

     

       459
       459
       +
             // Update UI state

     

       460
       460
       +
             loading.style.display = "block";

     

       461
       461
       +
             error.style.display = "none";

     

       462
       462
       +
             content.style.display = "none";

     

       463
       463
       +
             refreshBtn.disabled = true;

     

       464
       464
       +
             refreshBtn.textContent = "Loading...";

     

       459
       465
        
       

     

       460
       460
       -
               try {

     

       461
       461
       -
                 // Step 1: Load essential stats first (fastest)

     

       462
       462
       -
                 console.log(`[${requestId}] Loading essential stats...`);

     

       463
       463
       -
                 const essentialResponse = await fetch(`/api/stats/essential?days=${days}`, { signal });

     

       466
       466
       +
             try {

     

       467
       467
       +
               // Step 1: Load essential stats first (fastest)

     

       468
       468
       +
               console.log(`[${requestId}] Loading essential stats...`);

     

       469
       469
       +
               const essentialResponse = await fetch(`/api/stats/essential?days=${days}`, {signal});

     

       464
       470
        
       

     

       465
       465
       -
                 // Check if this request is still current

     

       466
       466
       -
                 if (requestId !== currentRequestId) {

     

       467
       467
       -
                   console.log(`[${requestId}] Request cancelled (essential stats)`);

     

       468
       468
       -
                   return;

     

       469
       469
       -
                 }

     

       471
       471
       +
               // Check if this request is still current

     

       472
       472
       +
               if (requestId !== currentRequestId) {

     

       473
       473
       +
                 console.log(`[${requestId}] Request cancelled (essential stats)`);

     

       474
       474
       +
                 return;

     

       475
       475
       +
               }

     

       470
       476
        
       

     

       471
       471
       -
                 if (!essentialResponse.ok) throw new Error(`HTTP ${essentialResponse.status}`);

     

       477
       477
       +
               if (!essentialResponse.ok) throw new Error(`HTTP ${essentialResponse.status}`);

     

       472
       478
        
       

     

       473
       473
       -
                 const essentialData = await essentialResponse.json();

     

       479
       479
       +
               const essentialData = await essentialResponse.json();

     

       474
       480
        
       

     

       475
       475
       -
                 // Double-check we're still the current request

     

       476
       476
       -
                 if (requestId !== currentRequestId) {

     

       477
       477
       -
                   console.log(`[${requestId}] Request cancelled (essential stats after response)`);

     

       478
       478
       -
                   return;

     

       479
       479
       -
                 }

     

       481
       481
       +
               // Double-check we're still the current request

     

       482
       482
       +
               if (requestId !== currentRequestId) {

     

       483
       483
       +
                 console.log(`[${requestId}] Request cancelled (essential stats after response)`);

     

       484
       484
       +
                 return;

     

       485
       485
       +
               }

     

       480
       486
        
       

     

       481
       481
       -
                 updateEssentialStats(essentialData);

     

       487
       487
       +
               updateEssentialStats(essentialData);

     

       482
       488
        
       

     

       483
       483
       -
                 // Show content immediately with essential stats

     

       484
       484
       -
                 loading.style.display = "none";

     

       485
       485
       -
                 content.style.display = "block";

     

       486
       486
       -
                 refreshBtn.textContent = "Loading Charts...";

     

       489
       489
       +
               // Show content immediately with essential stats

     

       490
       490
       +
               loading.style.display = "none";

     

       491
       491
       +
               content.style.display = "block";

     

       492
       492
       +
               refreshBtn.textContent = "Loading Charts...";

     

       487
       493
        
       

     

       488
       488
       -
                 console.log(`[${requestId}] Essential stats loaded in ${Date.now() - startTime}ms`);

     

       494
       494
       +
               console.log(`[${requestId}] Essential stats loaded in ${Date.now() - startTime}ms`);

     

       489
       495
        
       

     

       490
       490
       -
                 // Step 2: Load chart data (medium speed)

     

       491
       491
       -
                 console.log(`[${requestId}] Loading chart data...`);

     

       492
       492
       -
                 const chartResponse = await fetch(`/api/stats/charts?days=${days}`, { signal });

     

       496
       496
       +
               // Step 2: Load chart data (medium speed)

     

       497
       497
       +
               console.log(`[${requestId}] Loading chart data...`);

     

       498
       498
       +
               const chartResponse = await fetch(`/api/stats/charts?days=${days}`, {signal});

     

       493
       499
        
       

     

       494
       494
       -
                 if (requestId !== currentRequestId) {

     

       495
       495
       -
                   console.log(`[${requestId}] Request cancelled (chart data)`);

     

       496
       496
       -
                   return;

     

       497
       497
       -
                 }

     

       500
       500
       +
               if (requestId !== currentRequestId) {

     

       501
       501
       +
                 console.log(`[${requestId}] Request cancelled (chart data)`);

     

       502
       502
       +
                 return;

     

       503
       503
       +
               }

     

       498
       504
        
       

     

       499
       499
       -
                 if (!chartResponse.ok) throw new Error(`HTTP ${chartResponse.status}`);

     

       505
       505
       +
               if (!chartResponse.ok) throw new Error(`HTTP ${chartResponse.status}`);

     

       500
       506
        
       

     

       501
       501
       -
                 const chartData = await chartResponse.json();

     

       507
       507
       +
               const chartData = await chartResponse.json();

     

       502
       508
        
       

     

       503
       503
       -
                 if (requestId !== currentRequestId) {

     

       504
       504
       -
                   console.log(`[${requestId}] Request cancelled (chart data after response)`);

     

       505
       505
       -
                   return;

     

       506
       506
       -
                 }

     

       509
       509
       +
               if (requestId !== currentRequestId) {

     

       510
       510
       +
                 console.log(`[${requestId}] Request cancelled (chart data after response)`);

     

       511
       511
       +
                 return;

     

       512
       512
       +
               }

     

       507
       513
        
       

     

       508
       508
       -
                 updateCharts(chartData, parseInt(days, 10));

     

       509
       509
       -
                 refreshBtn.textContent = "Loading User Agents...";

     

       514
       514
       +
               updateCharts(chartData, parseInt(days, 10));

     

       515
       515
       +
               refreshBtn.textContent = "Loading User Agents...";

     

       510
       516
        
       

     

       511
       511
       -
                 console.log(`[${requestId}] Charts loaded in ${Date.now() - startTime}ms`);

     

       517
       517
       +
               console.log(`[${requestId}] Charts loaded in ${Date.now() - startTime}ms`);

     

       512
       518
        
       

     

       513
       513
       -
                 // Step 3: Load user agents last (slowest)

     

       514
       514
       -
                 console.log(`[${requestId}] Loading user agents...`);

     

       515
       515
       -
                 const userAgentsResponse = await fetch(`/api/stats/useragents?days=${days}`, { signal });

     

       519
       519
       +
               // Step 3: Load user agents last (slowest)

     

       520
       520
       +
               console.log(`[${requestId}] Loading user agents...`);

     

       521
       521
       +
               const userAgentsResponse = await fetch(`/api/stats/useragents?days=${days}`, {signal});

     

       516
       522
        
       

     

       517
       517
       -
                 if (requestId !== currentRequestId) {

     

       518
       518
       -
                   console.log(`[${requestId}] Request cancelled (user agents)`);

     

       519
       519
       -
                   return;

     

       520
       520
       -
                 }

     

       523
       523
       +
               if (requestId !== currentRequestId) {

     

       524
       524
       +
                 console.log(`[${requestId}] Request cancelled (user agents)`);

     

       525
       525
       +
                 return;

     

       526
       526
       +
               }

     

       521
       527
        
       

     

       522
       522
       -
                 if (!userAgentsResponse.ok) throw new Error(`HTTP ${userAgentsResponse.status}`);

     

       528
       528
       +
               if (!userAgentsResponse.ok) throw new Error(`HTTP ${userAgentsResponse.status}`);

     

       523
       529
        
       

     

       524
       524
       -
                 const userAgentsData = await userAgentsResponse.json();

     

       530
       530
       +
               const userAgentsData = await userAgentsResponse.json();

     

       525
       531
        
       

     

       526
       526
       -
                 if (requestId !== currentRequestId) {

     

       527
       527
       -
                   console.log(`[${requestId}] Request cancelled (user agents after response)`);

     

       528
       528
       -
                   return;

     

       529
       529
       -
                 }

     

       532
       532
       +
               if (requestId !== currentRequestId) {

     

       533
       533
       +
                 console.log(`[${requestId}] Request cancelled (user agents after response)`);

     

       534
       534
       +
                 return;

     

       535
       535
       +
               }

     

       530
       536
        
       

     

       531
       531
       -
                 updateUserAgentsTable(userAgentsData);

     

       537
       537
       +
               updateUserAgentsTable(userAgentsData);

     

       532
       538
        
       

     

       533
       533
       -
                 const totalTime = Date.now() - startTime;

     

       534
       534
       -
                 console.log(`[${requestId}] All data loaded in ${totalTime}ms`);

     

       535
       535
       -
               } catch (err) {

     

       536
       536
       -
                 // Only show error if this is still the current request

     

       537
       537
       -
                 if (requestId === currentRequestId) {

     

       538
       538
       -
                   if (err.name === 'AbortError') {

     

       539
       539
       -
                     console.log(`[${requestId}] Request aborted`);

     

       540
       540
       -
                   } else {

     

       541
       541
       -
                     loading.style.display = "none";

     

       542
       542
       -
                     error.style.display = "block";

     

       543
       543
       -
                     error.textContent = `Failed to load data: ${err.message}`;

     

       544
       544
       -
                     console.error(`[${requestId}] Error: ${err.message}`);

     

       545
       545
       -
                   }

     

       546
       546
       -
                 }

     

       547
       547
       -
               } finally {

     

       548
       548
       -
                 // Only update UI if this is still the current request

     

       549
       549
       -
                 if (requestId === currentRequestId) {

     

       550
       550
       -
                   _isLoading = false;

     

       551
       551
       -
                   refreshBtn.disabled = false;

     

       552
       552
       -
                   refreshBtn.textContent = "Refresh";

     

       553
       553
       -
                   abortController = null;

     

       539
       539
       +
               const totalTime = Date.now() - startTime;

     

       540
       540
       +
               console.log(`[${requestId}] All data loaded in ${totalTime}ms`);

     

       541
       541
       +
             } catch (err) {

     

       542
       542
       +
               // Only show error if this is still the current request

     

       543
       543
       +
               if (requestId === currentRequestId) {

     

       544
       544
       +
                 if (err.name === 'AbortError') {

     

       545
       545
       +
                   console.log(`[${requestId}] Request aborted`);

     

       546
       546
       +
                 } else {

     

       547
       547
       +
                   loading.style.display = "none";

     

       548
       548
       +
                   error.style.display = "block";

     

       549
       549
       +
                   error.textContent = `Failed to load data: ${err.message}`;

     

       550
       550
       +
                   console.error(`[${requestId}] Error: ${err.message}`);

     

       554
       551
        
                 }

     

       552
       552
       +
               }

     

       553
       553
       +
             } finally {

     

       554
       554
       +
               // Only update UI if this is still the current request

     

       555
       555
       +
               if (requestId === currentRequestId) {

     

       556
       556
       +
                 _isLoading = false;

     

       557
       557
       +
                 refreshBtn.disabled = false;

     

       558
       558
       +
                 refreshBtn.textContent = "Refresh";

     

       559
       559
       +
                 abortController = null;

     

       555
       560
        
               }

     

       556
       561
        
             }

     

       562
       562
       +
           }

     

       557
       563
        
       

     

       558
       558
       -
             // Update just the essential stats (fast)

     

       559
       559
       -
             function updateEssentialStats(data) {

     

       560
       560
       -
               document.getElementById("totalRequests").textContent = data.totalRequests.toLocaleString();

     

       561
       561
       -
               document.getElementById("uptime").textContent = `${data.uptime.toFixed(1)}%`;

     

       562
       562
       -
               document.getElementById("avgResponseTime").textContent =

     

       563
       563
       -
                 data.averageResponseTime ? `${Math.round(data.averageResponseTime)}ms` : "N/A";

     

       564
       564
       -
             }

     

       564
       564
       +
           // Update just the essential stats (fast)

     

       565
       565
       +
           function updateEssentialStats(data) {

     

       566
       566
       +
             document.getElementById("totalRequests").textContent = data.totalRequests.toLocaleString();

     

       567
       567
       +
             document.getElementById("uptime").textContent = `${data.uptime.toFixed(1)}%`;

     

       568
       568
       +
             document.getElementById("avgResponseTime").textContent =

     

       569
       569
       +
               data.averageResponseTime ? `${Math.round(data.averageResponseTime)}ms` : "N/A";

     

       570
       570
       +
           }

     

       565
       571
        
       

     

       566
       566
       -
             // Update charts (medium speed)

     

       567
       567
       -
             function updateCharts(data, days) {

     

       568
       568
       -
               updateRequestsChart(data.requestsByDay, days === 1);

     

       569
       569
       -
               updateLatencyChart(data.latencyOverTime, days === 1);

     

       570
       570
       -
             }

     

       572
       572
       +
           // Update charts (medium speed)

     

       573
       573
       +
           function updateCharts(data, days) {

     

       574
       574
       +
             updateRequestsChart(data.requestsByDay, days === 1);

     

       575
       575
       +
             updateLatencyChart(data.latencyOverTime, days === 1);

     

       576
       576
       +
           }

     

       571
       577
        
       

     

       572
       578
        
       

     

       573
       573
       -
             // Requests Over Time Chart

     

       574
       574
       -
             function updateRequestsChart(data, _isHourly) {

     

       575
       575
       -
               const ctx = document.getElementById("requestsChart").getContext("2d");

     

       576
       576
       -
               const days = parseInt(document.getElementById("daysSelect").value, 10);

     

       579
       579
       +
           // Requests Over Time Chart

     

       580
       580
       +
           function updateRequestsChart(data, _isHourly) {

     

       581
       581
       +
             const ctx = document.getElementById("requestsChart").getContext("2d");

     

       582
       582
       +
             const days = parseInt(document.getElementById("daysSelect").value, 10);

     

       577
       583
        
       

     

       578
       578
       -
               if (charts.requests) charts.requests.destroy();

     

       584
       584
       +
             if (charts.requests) charts.requests.destroy();

     

       579
       585
        
       

     

       580
       580
       -
               // Format labels based on granularity

     

       581
       581
       -
               const labels = data.map((d) => {

     

       582
       582
       -
                 if (days === 1) {

     

       583
       583
       -
                   // 15-minute intervals: show just time

     

       584
       584
       -
                   return d.date.split(" ")[1] || d.date;

     

       585
       585
       -
                 } else if (days <= 7) {

     

       586
       586
       -
                   // Hourly: show date + hour

     

       587
       587
       -
                   const parts = d.date.split(" ");

     

       588
       588
       -
                   const date = parts[0].split("-")[2]; // Get day

     

       589
       589
       -
                   const hour = parts[1] || "00:00";

     

       590
       590
       -
                   return `${date} ${hour}`;

     

       591
       591
       -
                 } else {

     

       592
       592
       -
                   // 4-hour intervals: show abbreviated

     

       593
       593
       -
                   return d.date.split(" ")[0];

     

       594
       594
       -
                 }

     

       595
       595
       -
               });

     

       586
       586
       +
             // Format labels based on granularity

     

       587
       587
       +
             const labels = data.map((d) => {

     

       588
       588
       +
               if (days === 1) {

     

       589
       589
       +
                 // 15-minute intervals: show just time

     

       590
       590
       +
                 return d.date.split(" ")[1] || d.date;

     

       591
       591
       +
               } else if (days <= 7) {

     

       592
       592
       +
                 // Hourly: show date + hour

     

       593
       593
       +
                 const parts = d.date.split(" ");

     

       594
       594
       +
                 const date = parts[0].split("-")[2]; // Get day

     

       595
       595
       +
                 const hour = parts[1] || "00:00";

     

       596
       596
       +
                 return `${date} ${hour}`;

     

       597
       597
       +
               } else {

     

       598
       598
       +
                 // 4-hour intervals: show abbreviated

     

       599
       599
       +
                 return d.date.split(" ")[0];

     

       600
       600
       +
               }

     

       601
       601
       +
             });

     

       596
       602
        
       

     

       597
       597
       -
               charts.requests = new Chart(ctx, {

     

       598
       598
       -
                 type: "line",

     

       599
       599
       -
                 data: {

     

       600
       600
       -
                   labels: labels,

     

       601
       601
       -
                   datasets: [{

     

       602
       602
       -
                     label: "Requests",

     

       603
       603
       -
                     data: data.map((d) => d.count),

     

       604
       604
       -
                     borderColor: "#6366f1",

     

       605
       605
       -
                     backgroundColor: "rgba(99, 102, 241, 0.1)",

     

       606
       606
       -
                     tension: 0.4,

     

       607
       607
       -
                     fill: true,

     

       608
       608
       -
                     borderWidth: 1.5,

     

       609
       609
       -
                     pointRadius: 1,

     

       610
       610
       -
                     pointBackgroundColor: "#6366f1",

     

       611
       611
       -
                   }],

     

       612
       612
       -
                 },

     

       613
       613
       -
                 options: {

     

       614
       614
       -
                   responsive: true,

     

       615
       615
       -
                   maintainAspectRatio: false,

     

       616
       616
       -
                   plugins: {

     

       617
       617
       -
                     legend: { display: false },

     

       618
       618
       -
                     tooltip: {

     

       619
       619
       -
                       callbacks: {

     

       620
       620
       -
                         title: (context) => {

     

       621
       621
       -
                           const original = data[context[0].dataIndex];

     

       622
       622
       -
                           if (days === 1) return `Time: ${original.date}`;

     

       623
       623
       -
                           if (days <= 7) return `DateTime: ${original.date}`;

     

       624
       624
       -
                           return `Interval: ${original.date}`;

     

       625
       625
       -
                         },

     

       626
       626
       -
                         label: (context) => `Requests: ${context.parsed.y.toLocaleString()}`

     

       627
       627
       -
                       }

     

       628
       628
       -
                     }

     

       629
       629
       -
                   },

     

       630
       630
       -
                   scales: {

     

       631
       631
       -
                     x: {

     

       632
       632
       -
                       title: {

     

       633
       633
       -
                         display: true,

     

       634
       634
       -
                         text: days === 1 ? 'Time (15min intervals)' : days <= 7 ? 'Time (hourly)' : 'Time (4hr intervals)'

     

       603
       603
       +
             charts.requests = new Chart(ctx, {

     

       604
       604
       +
               type: "line",

     

       605
       605
       +
               data: {

     

       606
       606
       +
                 labels: labels,

     

       607
       607
       +
                 datasets: [{

     

       608
       608
       +
                   label: "Requests",

     

       609
       609
       +
                   data: data.map((d) => d.count),

     

       610
       610
       +
                   borderColor: "#6366f1",

     

       611
       611
       +
                   backgroundColor: "rgba(99, 102, 241, 0.1)",

     

       612
       612
       +
                   tension: 0.4,

     

       613
       613
       +
                   fill: true,

     

       614
       614
       +
                   borderWidth: 1.5,

     

       615
       615
       +
                   pointRadius: 1,

     

       616
       616
       +
                   pointBackgroundColor: "#6366f1",

     

       617
       617
       +
                 }],

     

       618
       618
       +
               },

     

       619
       619
       +
               options: {

     

       620
       620
       +
                 responsive: true,

     

       621
       621
       +
                 maintainAspectRatio: false,

     

       622
       622
       +
                 plugins: {

     

       623
       623
       +
                   legend: {display: false},

     

       624
       624
       +
                   tooltip: {

     

       625
       625
       +
                     callbacks: {

     

       626
       626
       +
                       title: (context) => {

     

       627
       627
       +
                         const original = data[context[0].dataIndex];

     

       628
       628
       +
                         if (days === 1) return `Time: ${original.date}`;

     

       629
       629
       +
                         if (days <= 7) return `DateTime: ${original.date}`;

     

       630
       630
       +
                         return `Interval: ${original.date}`;

     

       635
       631
        
                       },

     

       636
       636
       -
                       grid: { color: 'rgba(0, 0, 0, 0.05)' },

     

       637
       637
       -
                       ticks: {

     

       638
       638
       -
                         maxTicksLimit: days === 1 ? 12 : 20,

     

       639
       639
       -
                         maxRotation: 0,

     

       640
       640
       -
                         minRotation: 0

     

       641
       641
       -
                       }

     

       632
       632
       +
                       label: (context) => `Requests: ${context.parsed.y.toLocaleString()}`

     

       633
       633
       +
                     }

     

       634
       634
       +
                   }

     

       635
       635
       +
                 },

     

       636
       636
       +
                 scales: {

     

       637
       637
       +
                   x: {

     

       638
       638
       +
                     title: {

     

       639
       639
       +
                       display: true,

     

       640
       640
       +
                       text: days === 1 ? 'Time (15min intervals)' : days <= 7 ? 'Time (hourly)' : 'Time (4hr intervals)'

     

       642
       641
        
                     },

     

       643
       643
       -
                     y: {

     

       644
       644
       -
                       title: { display: true, text: 'Requests' },

     

       645
       645
       -
                       beginAtZero: true,

     

       646
       646
       -
                       grid: { color: 'rgba(0, 0, 0, 0.05)' }

     

       642
       642
       +
                     grid: {color: 'rgba(0, 0, 0, 0.05)'},

     

       643
       643
       +
                     ticks: {

     

       644
       644
       +
                       maxTicksLimit: days === 1 ? 12 : 20,

     

       645
       645
       +
                       maxRotation: 0,

     

       646
       646
       +
                       minRotation: 0

     

       647
       647
        
                     }

     

       648
       648
       +
                   },

     

       649
       649
       +
                   y: {

     

       650
       650
       +
                     title: {display: true, text: 'Requests'},

     

       651
       651
       +
                     beginAtZero: true,

     

       652
       652
       +
                     grid: {color: 'rgba(0, 0, 0, 0.05)'}

     

       648
       653
        
                   }

     

       649
       654
        
                 }

     

       650
       650
       -
               });

     

       651
       651
       -
             }

     

       655
       655
       +
               }

     

       656
       656
       +
             });

     

       657
       657
       +
           }

     

       652
       658
        
       

     

       653
       653
       -
             // Latency Over Time Chart

     

       654
       654
       -
             function updateLatencyChart(data, _isHourly) {

     

       655
       655
       -
               const ctx = document.getElementById("latencyChart").getContext("2d");

     

       656
       656
       -
               const days = parseInt(document.getElementById("daysSelect").value, 10);

     

       659
       659
       +
           // Latency Over Time Chart

     

       660
       660
       +
           function updateLatencyChart(data, _isHourly) {

     

       661
       661
       +
             const ctx = document.getElementById("latencyChart").getContext("2d");

     

       662
       662
       +
             const days = parseInt(document.getElementById("daysSelect").value, 10);

     

       657
       663
        
       

     

       658
       658
       -
               if (charts.latency) charts.latency.destroy();

     

       664
       664
       +
             if (charts.latency) charts.latency.destroy();

     

       659
       665
        
       

     

       660
       660
       -
               // Format labels based on granularity

     

       661
       661
       -
               const labels = data.map((d) => {

     

       662
       662
       -
                 if (days === 1) {

     

       663
       663
       -
                   // 15-minute intervals: show just time

     

       664
       664
       -
                   return d.time.split(" ")[1] || d.time;

     

       665
       665
       -
                 } else if (days <= 7) {

     

       666
       666
       -
                   // Hourly: show date + hour

     

       667
       667
       -
                   const parts = d.time.split(" ");

     

       668
       668
       -
                   const date = parts[0].split("-")[2]; // Get day

     

       669
       669
       -
                   const hour = parts[1] || "00:00";

     

       670
       670
       -
                   return `${date} ${hour}`;

     

       671
       671
       -
                 } else {

     

       672
       672
       -
                   // 4-hour intervals: show abbreviated

     

       673
       673
       -
                   return d.time.split(" ")[0];

     

       674
       674
       -
                 }

     

       675
       675
       -
               });

     

       666
       666
       +
             // Format labels based on granularity

     

       667
       667
       +
             const labels = data.map((d) => {

     

       668
       668
       +
               if (days === 1) {

     

       669
       669
       +
                 // 15-minute intervals: show just time

     

       670
       670
       +
                 return d.time.split(" ")[1] || d.time;

     

       671
       671
       +
               } else if (days <= 7) {

     

       672
       672
       +
                 // Hourly: show date + hour

     

       673
       673
       +
                 const parts = d.time.split(" ");

     

       674
       674
       +
                 const date = parts[0].split("-")[2]; // Get day

     

       675
       675
       +
                 const hour = parts[1] || "00:00";

     

       676
       676
       +
                 return `${date} ${hour}`;

     

       677
       677
       +
               } else {

     

       678
       678
       +
                 // 4-hour intervals: show abbreviated

     

       679
       679
       +
                 return d.time.split(" ")[0];

     

       680
       680
       +
               }

     

       681
       681
       +
             });

     

       676
       682
        
       

     

       677
       677
       -
               // Calculate dynamic max for logarithmic scale

     

       678
       678
       -
               const responseTimes = data.map((d) => d.averageResponseTime);

     

       679
       679
       -
               const maxResponseTime = Math.max(...responseTimes);

     

       683
       683
       +
             // Calculate dynamic max for logarithmic scale

     

       684
       684
       +
             const responseTimes = data.map((d) => d.averageResponseTime);

     

       685
       685
       +
             const maxResponseTime = Math.max(...responseTimes);

     

       680
       686
        
       

     

       681
       681
       -
               // Calculate appropriate max for log scale (next power of 10)

     

       682
       682
       -
               const logMax = 10 ** Math.ceil(Math.log10(maxResponseTime));

     

       687
       687
       +
             // Calculate appropriate max for log scale (next power of 10)

     

       688
       688
       +
             const logMax = 10 ** Math.ceil(Math.log10(maxResponseTime));

     

       683
       689
        
       

     

       684
       684
       -
               // Generate dynamic tick values based on the data range

     

       685
       685
       -
               const generateLogTicks = (_min, max) => {

     

       686
       686
       -
                 const ticks = [];

     

       687
       687
       -
                 let current = 1;

     

       688
       688
       -
                 while (current <= max) {

     

       689
       689
       -
                   ticks.push(current);

     

       690
       690
       -
                   current *= 10;

     

       691
       691
       -
                 }

     

       692
       692
       -
                 return ticks;

     

       693
       693
       -
               };

     

       690
       690
       +
             // Generate dynamic tick values based on the data range

     

       691
       691
       +
             const generateLogTicks = (_min, max) => {

     

       692
       692
       +
               const ticks = [];

     

       693
       693
       +
               let current = 1;

     

       694
       694
       +
               while (current <= max) {

     

       695
       695
       +
                 ticks.push(current);

     

       696
       696
       +
                 current *= 10;

     

       697
       697
       +
               }

     

       698
       698
       +
               return ticks;

     

       699
       699
       +
             };

     

       694
       700
        
       

     

       695
       695
       -
               const dynamicTicks = generateLogTicks(1, logMax);

     

       701
       701
       +
             const dynamicTicks = generateLogTicks(1, logMax);

     

       696
       702
        
       

     

       697
       697
       -
               charts.latency = new Chart(ctx, {

     

       698
       698
       -
                 type: "line",

     

       699
       699
       -
                 data: {

     

       700
       700
       -
                   labels: labels,

     

       701
       701
       -
                   datasets: [{

     

       702
       702
       -
                     label: "Average Response Time",

     

       703
       703
       -
                     data: responseTimes,

     

       704
       704
       -
                     borderColor: "#10b981",

     

       705
       705
       -
                     backgroundColor: "rgba(16, 185, 129, 0.1)",

     

       706
       706
       -
                     tension: 0.4,

     

       707
       707
       -
                     fill: true,

     

       708
       708
       -
                     borderWidth: 1.5,

     

       709
       709
       -
                     pointRadius: 1,

     

       710
       710
       -
                     pointBackgroundColor: "#10b981",

     

       711
       711
       -
                   }],

     

       712
       712
       -
                 },

     

       713
       713
       -
                 options: {

     

       714
       714
       -
                   responsive: true,

     

       715
       715
       -
                   maintainAspectRatio: false,

     

       716
       716
       -
                   plugins: {

     

       717
       717
       -
                     legend: { display: false },

     

       718
       718
       -
                     tooltip: {

     

       719
       719
       -
                       callbacks: {

     

       720
       720
       -
                         title: (context) => {

     

       721
       721
       -
                           const original = data[context[0].dataIndex];

     

       722
       722
       -
                           if (days === 1) return `Time: ${original.time}`;

     

       723
       723
       -
                           if (days <= 7) return `DateTime: ${original.time}`;

     

       724
       724
       -
                           return `Interval: ${original.time}`;

     

       725
       725
       -
                         },

     

       726
       726
       -
                         label: (context) => {

     

       727
       727
       -
                           const point = data[context.dataIndex];

     

       728
       728
       -
                           return [

     

       729
       729
       -
                             `Response Time: ${Math.round(context.parsed.y)}ms`,

     

       730
       730
       -
                             `Request Count: ${point.count.toLocaleString()}`

     

       731
       731
       -
                           ];

     

       732
       732
       -
                         }

     

       733
       733
       -
                       }

     

       734
       734
       -
                     }

     

       735
       735
       -
                   },

     

       736
       736
       -
                   scales: {

     

       737
       737
       -
                     x: {

     

       738
       738
       -
                       title: {

     

       739
       739
       -
                         display: true,

     

       740
       740
       -
                         text: days === 1 ? 'Time (15min intervals)' : days <= 7 ? 'Time (hourly)' : 'Time (4hr intervals)'

     

       703
       703
       +
             charts.latency = new Chart(ctx, {

     

       704
       704
       +
               type: "line",

     

       705
       705
       +
               data: {

     

       706
       706
       +
                 labels: labels,

     

       707
       707
       +
                 datasets: [{

     

       708
       708
       +
                   label: "Average Response Time",

     

       709
       709
       +
                   data: responseTimes,

     

       710
       710
       +
                   borderColor: "#10b981",

     

       711
       711
       +
                   backgroundColor: "rgba(16, 185, 129, 0.1)",

     

       712
       712
       +
                   tension: 0.4,

     

       713
       713
       +
                   fill: true,

     

       714
       714
       +
                   borderWidth: 1.5,

     

       715
       715
       +
                   pointRadius: 1,

     

       716
       716
       +
                   pointBackgroundColor: "#10b981",

     

       717
       717
       +
                 }],

     

       718
       718
       +
               },

     

       719
       719
       +
               options: {

     

       720
       720
       +
                 responsive: true,

     

       721
       721
       +
                 maintainAspectRatio: false,

     

       722
       722
       +
                 plugins: {

     

       723
       723
       +
                   legend: {display: false},

     

       724
       724
       +
                   tooltip: {

     

       725
       725
       +
                     callbacks: {

     

       726
       726
       +
                       title: (context) => {

     

       727
       727
       +
                         const original = data[context[0].dataIndex];

     

       728
       728
       +
                         if (days === 1) return `Time: ${original.time}`;

     

       729
       729
       +
                         if (days <= 7) return `DateTime: ${original.time}`;

     

       730
       730
       +
                         return `Interval: ${original.time}`;

     

       741
       731
        
                       },

     

       742
       742
       -
                       grid: { color: 'rgba(0, 0, 0, 0.05)' },

     

       743
       743
       -
                       ticks: {

     

       744
       744
       -
                         maxTicksLimit: days === 1 ? 12 : 20,

     

       745
       745
       -
                         maxRotation: 0,

     

       746
       746
       -
                         minRotation: 0

     

       732
       732
       +
                       label: (context) => {

     

       733
       733
       +
                         const point = data[context.dataIndex];

     

       734
       734
       +
                         return [

     

       735
       735
       +
                           `Response Time: ${Math.round(context.parsed.y)}ms`,

     

       736
       736
       +
                           `Request Count: ${point.count.toLocaleString()}`

     

       737
       737
       +
                         ];

     

       747
       738
        
                       }

     

       739
       739
       +
                     }

     

       740
       740
       +
                   }

     

       741
       741
       +
                 },

     

       742
       742
       +
                 scales: {

     

       743
       743
       +
                   x: {

     

       744
       744
       +
                     title: {

     

       745
       745
       +
                       display: true,

     

       746
       746
       +
                       text: days === 1 ? 'Time (15min intervals)' : days <= 7 ? 'Time (hourly)' : 'Time (4hr intervals)'

     

       748
       747
        
                     },

     

       749
       749
       -
                     y: {

     

       750
       750
       -
                       type: 'logarithmic',

     

       751
       751
       -
                       title: { display: true, text: 'Response Time (ms, log scale)' },

     

       752
       752
       -
                       min: 1,

     

       753
       753
       -
                       max: logMax,

     

       754
       754
       -
                       grid: { color: 'rgba(0, 0, 0, 0.05)' },

     

       755
       755
       -
                       ticks: {

     

       756
       756
       -
                         callback: (value) => {

     

       757
       757
       -
                           // Show clean numbers based on dynamic range

     

       758
       758
       -
                           if (dynamicTicks.includes(value)) {

     

       759
       759
       -
                             return `${value}ms`;

     

       760
       760
       -
                           }

     

       761
       761
       -
                           return '';

     

       748
       748
       +
                     grid: {color: 'rgba(0, 0, 0, 0.05)'},

     

       749
       749
       +
                     ticks: {

     

       750
       750
       +
                       maxTicksLimit: days === 1 ? 12 : 20,

     

       751
       751
       +
                       maxRotation: 0,

     

       752
       752
       +
                       minRotation: 0

     

       753
       753
       +
                     }

     

       754
       754
       +
                   },

     

       755
       755
       +
                   y: {

     

       756
       756
       +
                     type: 'logarithmic',

     

       757
       757
       +
                     title: {display: true, text: 'Response Time (ms, log scale)'},

     

       758
       758
       +
                     min: 1,

     

       759
       759
       +
                     max: logMax,

     

       760
       760
       +
                     grid: {color: 'rgba(0, 0, 0, 0.05)'},

     

       761
       761
       +
                     ticks: {

     

       762
       762
       +
                       callback: (value) => {

     

       763
       763
       +
                         // Show clean numbers based on dynamic range

     

       764
       764
       +
                         if (dynamicTicks.includes(value)) {

     

       765
       765
       +
                           return `${value}ms`;

     

       762
       766
        
                         }

     

       767
       767
       +
                         return '';

     

       763
       768
        
                       }

     

       764
       769
        
                     }

     

       765
       770
        
                   }

     

       766
       771
        
                 }

     

       767
       767
       -
               });

     

       768
       768
       -
             }

     

       772
       772
       +
               }

     

       773
       773
       +
             });

     

       774
       774
       +
           }

     

       775
       775
       +
       

     

       776
       776
       +
           // User Agents Table

     

       777
       777
       +
           let allUserAgents = [];

     

       769
       778
        
       

     

       770
       770
       -
             // User Agents Table

     

       771
       771
       -
             let allUserAgents = [];

     

       779
       779
       +
           function updateUserAgentsTable(userAgents) {

     

       780
       780
       +
             allUserAgents = userAgents;

     

       781
       781
       +
             renderUserAgentsTable(userAgents);

     

       782
       782
       +
             setupUserAgentSearch();

     

       783
       783
       +
           }

     

       772
       784
        
       

     

       773
       773
       -
             function updateUserAgentsTable(userAgents) {

     

       774
       774
       -
               allUserAgents = userAgents;

     

       775
       775
       -
               renderUserAgentsTable(userAgents);

     

       776
       776
       -
               setupUserAgentSearch();

     

       785
       785
       +
           function parseUserAgent(ua) {

     

       786
       786
       +
             // Keep strange/unique ones as-is

     

       787
       787
       +
             if (ua.length < 50 ||

     

       788
       788
       +
               !ua.includes('Mozilla/') ||

     

       789
       789
       +
               ua.includes('bot') ||

     

       790
       790
       +
               ua.includes('crawler') ||

     

       791
       791
       +
               ua.includes('spider') ||

     

       792
       792
       +
               !ua.includes('AppleWebKit') ||

     

       793
       793
       +
               ua.includes('Shiba-Arcade') ||

     

       794
       794
       +
               ua === 'node' ||

     

       795
       795
       +
               ua.includes('curl') ||

     

       796
       796
       +
               ua.includes('python') ||

     

       797
       797
       +
               ua.includes('PostmanRuntime')) {

     

       798
       798
       +
               return ua;

     

       777
       799
        
             }

     

       778
       800
        
       

     

       779
       779
       -
             function parseUserAgent(ua) {

     

       780
       780
       -
               // Keep strange/unique ones as-is

     

       781
       781
       -
               if (ua.length < 50 ||

     

       782
       782
       -
                   !ua.includes('Mozilla/') ||

     

       783
       783
       -
                   ua.includes('bot') ||

     

       784
       784
       -
                   ua.includes('crawler') ||

     

       785
       785
       -
                   ua.includes('spider') ||

     

       786
       786
       -
                   !ua.includes('AppleWebKit') ||

     

       787
       787
       -
                   ua.includes('Shiba-Arcade') ||

     

       788
       788
       -
                   ua === 'node' ||

     

       789
       789
       -
                   ua.includes('curl') ||

     

       790
       790
       -
                   ua.includes('python') ||

     

       791
       791
       -
                   ua.includes('PostmanRuntime')) {

     

       792
       792
       -
                 return ua;

     

       793
       793
       -
               }

     

       801
       801
       +
             // Parse common browsers

     

       802
       802
       +
             const os = ua.includes('Macintosh') ? 'macOS' :

     

       803
       803
       +
               ua.includes('Windows NT 10.0') ? 'Windows 10' :

     

       804
       804
       +
                 ua.includes('Windows NT') ? 'Windows' :

     

       805
       805
       +
                   ua.includes('X11; Linux') ? 'Linux' :

     

       806
       806
       +
                     ua.includes('iPhone') ? 'iOS' :

     

       807
       807
       +
                       ua.includes('Android') ? 'Android' : 'Unknown OS';

     

       808
       808
       +
       

     

       809
       809
       +
             // Detect browser and version

     

       810
       810
       +
             let browser = 'Unknown Browser';

     

       794
       811
        
       

     

       795
       795
       -
               // Parse common browsers

     

       796
       796
       -
               const os = ua.includes('Macintosh') ? 'macOS' :

     

       797
       797
       -
                         ua.includes('Windows NT 10.0') ? 'Windows 10' :

     

       798
       798
       -
                         ua.includes('Windows NT') ? 'Windows' :

     

       799
       799
       -
                         ua.includes('X11; Linux') ? 'Linux' :

     

       800
       800
       -
                         ua.includes('iPhone') ? 'iOS' :

     

       801
       801
       -
                         ua.includes('Android') ? 'Android' : 'Unknown OS';

     

       812
       812
       +
             if (ua.includes('Edg/')) {

     

       813
       813
       +
               const match = ua.match(/Edg\/(\d+\.\d+)/);

     

       814
       814
       +
               const version = match ? match[1] : '';

     

       815
       815
       +
               browser = `Edge ${version}`;

     

       816
       816
       +
             } else if (ua.includes('Chrome/')) {

     

       817
       817
       +
               const match = ua.match(/Chrome\/(\d+\.\d+)/);

     

       818
       818
       +
               const version = match ? match[1] : '';

     

       819
       819
       +
               browser = `Chrome ${version}`;

     

       820
       820
       +
             } else if (ua.includes('Firefox/')) {

     

       821
       821
       +
               const match = ua.match(/Firefox\/(\d+\.\d+)/);

     

       822
       822
       +
               const version = match ? match[1] : '';

     

       823
       823
       +
               browser = `Firefox ${version}`;

     

       824
       824
       +
             } else if (ua.includes('Safari/') && !ua.includes('Chrome')) {

     

       825
       825
       +
               browser = 'Safari';

     

       826
       826
       +
             }

     

       802
       827
        
       

     

       803
       803
       -
               // Detect browser and version

     

       804
       804
       -
               let browser = 'Unknown Browser';

     

       828
       828
       +
             return `${browser} (${os})`;

     

       829
       829
       +
           }

     

       805
       830
        
       

     

       806
       806
       -
               if (ua.includes('Edg/')) {

     

       807
       807
       -
                 const match = ua.match(/Edg\/(\d+\.\d+)/);

     

       808
       808
       -
                 const version = match ? match[1] : '';

     

       809
       809
       -
                 browser = `Edge ${version}`;

     

       810
       810
       -
               } else if (ua.includes('Chrome/')) {

     

       811
       811
       -
                 const match = ua.match(/Chrome\/(\d+\.\d+)/);

     

       812
       812
       -
                 const version = match ? match[1] : '';

     

       813
       813
       -
                 browser = `Chrome ${version}`;

     

       814
       814
       -
               } else if (ua.includes('Firefox/')) {

     

       815
       815
       -
                 const match = ua.match(/Firefox\/(\d+\.\d+)/);

     

       816
       816
       -
                 const version = match ? match[1] : '';

     

       817
       817
       -
                 browser = `Firefox ${version}`;

     

       818
       818
       -
               } else if (ua.includes('Safari/') && !ua.includes('Chrome')) {

     

       819
       819
       -
                 browser = 'Safari';

     

       820
       820
       -
               }

     

       831
       831
       +
           function renderUserAgentsTable(userAgents) {

     

       832
       832
       +
             const container = document.getElementById("userAgentsTable");

     

       821
       833
        
       

     

       822
       822
       -
               return `${browser} (${os})`;

     

       834
       834
       +
             if (userAgents.length === 0) {

     

       835
       835
       +
               container.innerHTML = '<div class="no-results">No user agents found</div>';

     

       836
       836
       +
               return;

     

       823
       837
        
             }

     

       824
       838
        
       

     

       825
       825
       -
             function renderUserAgentsTable(userAgents) {

     

       826
       826
       -
               const container = document.getElementById("userAgentsTable");

     

       839
       839
       +
             const totalRequests = userAgents.reduce((sum, ua) => sum + ua.count, 0);

     

       827
       840
        
       

     

       828
       828
       -
               if (userAgents.length === 0) {

     

       829
       829
       -
                 container.innerHTML = '<div class="no-results">No user agents found</div>';

     

       830
       830
       -
                 return;

     

       831
       831
       -
               }

     

       832
       832
       -
       

     

       833
       833
       -
               const totalRequests = userAgents.reduce((sum, ua) => sum + ua.count, 0);

     

       834
       834
       -
       

     

       835
       835
       -
               const tableHTML = `

     

       841
       841
       +
             const tableHTML = `

     

       836
       842
        
                 <table class="ua-table">

     

       837
       843
        
                   <thead>

     

       838
       844
        
                     <tr>

     
···

       843
       849
        
                   </thead>

     

       844
       850
        
                   <tbody>

     

       845
       851
        
                     ${userAgents.map(ua => {

     

       846
       846
       -
                       const displayName = parseUserAgent(ua.userAgent);

     

       847
       847
       -
                       const percentage = ((ua.count / totalRequests) * 100).toFixed(1);

     

       852
       852
       +
               const displayName = parseUserAgent(ua.userAgent);

     

       853
       853
       +
               const percentage = ((ua.count / totalRequests) * 100).toFixed(1);

     

       848
       854
        
       

     

       849
       849
       -
                       return `

     

       855
       855
       +
               return `

     

       850
       856
        
                         <tr>

     

       851
       857
        
                           <td>

     

       852
       858
        
                             <div class="ua-name">${displayName}</div>

     
···

       856
       862
        
                           <td class="ua-percentage">${percentage}%</td>

     

       857
       863
        
                         </tr>

     

       858
       864
        
                       `;

     

       859
       859
       -
                     }).join('')}

     

       865
       865
       +
             }).join('')}

     

       860
       866
        
                   </tbody>

     

       861
       867
        
                 </table>

     

       862
       868
        
               `;

     

       863
       869
        
       

     

       864
       864
       -
               container.innerHTML = tableHTML;

     

       865
       865
       -
             }

     

       870
       870
       +
             container.innerHTML = tableHTML;

     

       871
       871
       +
           }

     

       866
       872
        
       

     

       867
       867
       -
             function setupUserAgentSearch() {

     

       868
       868
       -
               const searchInput = document.getElementById('userAgentSearch');

     

       869
       869
       -
       

     

       870
       870
       -
               searchInput.addEventListener('input', function() {

     

       871
       871
       -
                 const searchTerm = this.value.toLowerCase().trim();

     

       873
       873
       +
           function setupUserAgentSearch() {

     

       874
       874
       +
             const searchInput = document.getElementById('userAgentSearch');

     

       872
       875
        
       

     

       873
       873
       -
                 if (searchTerm === '') {

     

       874
       874
       -
                   renderUserAgentsTable(allUserAgents);

     

       875
       875
       -
                   return;

     

       876
       876
       -
                 }

     

       876
       876
       +
             searchInput.addEventListener('input', function () {

     

       877
       877
       +
               const searchTerm = this.value.toLowerCase().trim();

     

       877
       878
        
       

     

       878
       878
       -
                 const filtered = allUserAgents.filter(ua => {

     

       879
       879
       -
                   const displayName = parseUserAgent(ua.userAgent).toLowerCase();

     

       880
       880
       -
                   const rawUA = ua.userAgent.toLowerCase();

     

       881
       881
       -
                   return displayName.includes(searchTerm) || rawUA.includes(searchTerm);

     

       882
       882
       -
                 });

     

       879
       879
       +
               if (searchTerm === '') {

     

       880
       880
       +
                 renderUserAgentsTable(allUserAgents);

     

       881
       881
       +
                 return;

     

       882
       882
       +
               }

     

       883
       883
        
       

     

       884
       884
       -
                 renderUserAgentsTable(filtered);

     

       884
       884
       +
               const filtered = allUserAgents.filter(ua => {

     

       885
       885
       +
                 const displayName = parseUserAgent(ua.userAgent).toLowerCase();

     

       886
       886
       +
                 const rawUA = ua.userAgent.toLowerCase();

     

       887
       887
       +
                 return displayName.includes(searchTerm) || rawUA.includes(searchTerm);

     

       885
       888
        
               });

     

       886
       886
       -
             }

     

       887
       889
        
       

     

       888
       888
       -
             // Event Handlers

     

       889
       889
       -
             document.getElementById("autoRefresh").addEventListener("change", function () {

     

       890
       890
       -
               if (this.checked) {

     

       891
       891
       -
                 autoRefreshInterval = setInterval(loadData, 30000);

     

       892
       892
       -
               } else {

     

       893
       893
       -
                 clearInterval(autoRefreshInterval);

     

       894
       894
       -
               }

     

       890
       890
       +
               renderUserAgentsTable(filtered);

     

       895
       891
        
             });

     

       892
       892
       +
           }

     

       896
       893
        
       

     

       897
       897
       -
             document.getElementById("daysSelect").addEventListener("change", loadData);

     

       894
       894
       +
           // Event Handlers

     

       895
       895
       +
           document.getElementById("autoRefresh").addEventListener("change", function () {

     

       896
       896
       +
             if (this.checked) {

     

       897
       897
       +
               autoRefreshInterval = setInterval(loadData, 30000);

     

       898
       898
       +
             } else {

     

       899
       899
       +
               clearInterval(autoRefreshInterval);

     

       900
       900
       +
             }

     

       901
       901
       +
           });

     

       898
       902
        
       

     

       899
       899
       -
             // Initialize dashboard

     

       900
       900
       -
             document.addEventListener('DOMContentLoaded', loadData);

     

       903
       903
       +
           document.getElementById("daysSelect").addEventListener("change", loadData);

     

       901
       904
        
       

     

       902
       902
       -
             // Cleanup on page unload

     

       903
       903
       -
             window.addEventListener('beforeunload', () => {

     

       904
       904
       -
               clearInterval(autoRefreshInterval);

     

       905
       905
       -
               Object.values(charts).forEach(chart => {

     

       906
       906
       -
                 if (chart && typeof chart.destroy === 'function') {

     

       907
       907
       -
                   chart.destroy();

     

       908
       908
       -
                 }

     

       909
       909
       -
               });

     

       905
       905
       +
           // Initialize dashboard

     

       906
       906
       +
           document.addEventListener('DOMContentLoaded', loadData);

     

       907
       907
       +
       

     

       908
       908
       +
           // Cleanup on page unload

     

       909
       909
       +
           window.addEventListener('beforeunload', () => {

     

       910
       910
       +
             clearInterval(autoRefreshInterval);

     

       911
       911
       +
             Object.values(charts).forEach(chart => {

     

       912
       912
       +
               if (chart && typeof chart.destroy === 'function') {

     

       913
       913
       +
                 chart.destroy();

     

       914
       914
       +
               }

     

       910
       915
        
             });

     

       911
       911
       -
           </script>

     

       912
       912
       -
         </body>

     

       913
       913
       -
       </html>

     

       916
       916
       +
           });

     

       917
       917
       +
         </script>

     

       918
       918
       +
       </body>

     

       919
       919
       +
       

     

       920
       920
       +
       </html>