Hugging Face's logo

Spaces:
nmtalhp
/
comic-datat
Running

App Files Community
2
nmtalhp commited on
Commit
19ee760
·
verified ·
1 Parent(s): 8e357c5

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +731 -373
index.html CHANGED
@@ -3,8 +3,9 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ComicLab - Statistical Analysis Dashboard</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  <script>
9
  tailwind.config = {
10
  theme: {
@@ -20,7 +21,9 @@
20
  accent: '#00ff88',
21
  highlight: '#0088ff',
22
  warning: '#ff6600',
23
- danger: '#ff0033'
 
 
24
  }
25
  }
26
  }
@@ -98,259 +101,295 @@
98
  line-height: 1;
99
  margin: 0.25rem 0 0.5rem;
100
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
101
  </style>
102
  </head>
103
  <body class="bg-lab-dark text-gray-300 font-mono">
104
- <header class="border-b border-lab-border bg-lab-dark">
105
  <div class="container mx-auto px-4 py-3">
106
  <div class="flex items-center justify-between">
107
  <div class="flex items-center space-x-2">
108
  <span class="text-lab-accent font-bold text-xl">COMIC</span>
109
- <span class="text-lab-highlight font-bold text-xl">LAB</span>
110
- <span class="text-xs px-2 py-1 bg-lab-panel rounded">v2.4.8</span>
111
  </div>
112
  <div class="text-xs text-gray-400">
113
- <span class="mr-4">Last updated: <span class="text-gray-100">2023-11-15 14:37:24 UTC</span></span>
114
- <span>Data source: <span class="text-gray-100">primary_api/main</span></span>
115
  </div>
116
  </div>
117
  </div>
118
  </header>
119
 
120
  <main class="container mx-auto px-4 py-6">
121
- <!-- System Overview -->
122
  <section class="mb-8">
123
- <h2 class="text-xl font-semibold mb-4 flex items-center">
124
- <span class="status-indicator bg-lab-accent"></span>
125
- <span>SYSTEM OVERVIEW</span>
126
- </h2>
127
-
128
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
129
- <div class="metric-card border-lab-accent">
130
- <div class="metric-title">TOTAL COMICS</div>
131
- <div class="metric-value">2,845</div>
132
- <div class="text-xs flex items-center">
133
- <span class="trend-icon">↗</span>
134
- <span class="positive-trend">+4.7% (7d)</span>
135
  </div>
136
- </div>
137
-
138
- <div class="metric-card border-lab-highlight">
139
- <div class="metric-title">ACTIVE READERS</div>
140
- <div class="metric-value">854,291</div>
141
- <div class="text-xs flex items-center">
142
- <span class="trend-icon">↗</span>
143
- <span class="positive-trend">+2.3% (7d)</span>
144
  </div>
145
- </div>
146
-
147
- <div class="metric-card border-yellow-500">
148
- <div class="metric-title">DAILY READS</div>
149
- <div class="metric-value">1,284,092</div>
150
- <div class="text-xs flex items-center">
151
- <span class="trend-icon">→</span>
152
- <span class="neutral-trend">+0.1% (7d)</span>
153
  </div>
154
  </div>
155
 
156
- <div class="metric-card border-lab-warning">
157
- <div class="metric-title">USER ENGAGEMENT</div>
158
- <div class="metric-value">87.4%</div>
159
- <div class="text-xs flex items-center">
160
- <span class="trend-icon">↘</span>
161
- <span class="negative-trend">-1.2% (7d)</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  </div>
163
  </div>
164
  </div>
165
 
166
- <div class="grid grid-cols-1 md:grid-cols-4 gap-2 text-xs mb-6">
167
- <div class="text-center">
168
- <span class="block text-sm mb-1">Avg. Session Duration</span>
169
- <span class="data-value">7m 23s</span>
 
 
 
 
 
 
 
 
 
 
 
170
  </div>
171
- <div class="text-center">
172
- <span class="block text-sm mb-1">Avg. Pages/Reader</span>
173
- <span class="data-value">12.7</span>
 
 
 
 
 
 
 
 
 
 
 
174
  </div>
175
- <div class="text-center">
176
- <span class="block text-sm mb-1">New Titles/Day</span>
177
- <span class="data-value">4.7</span>
 
 
 
 
 
 
 
 
 
 
 
178
  </div>
179
- <div class="text-center">
180
- <span class="block text-sm mb-1">API Response</span>
181
- <span class="data-value text-lab-accent">96ms</span>
 
 
 
 
 
 
 
 
 
 
 
182
  </div>
183
  </div>
184
  </section>
185
 
186
  <hr class="section-divider">
187
 
188
- <!-- Primary Rankings -->
189
  <section class="mb-8">
190
- <h2 class="text-xl font-semibold mb-4">TOP TITLES ANALYSIS</h2>
191
 
192
- <div class="data-panel rounded-lg mb-6">
193
- <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center">
194
- <h3 class="font-semibold">POPULARITY INDEX [∑(reads×rating×engagement)]</h3>
195
- <span class="text-xs bg-lab-panel px-2 py-1 rounded">filter: last 30d</span>
 
 
 
 
 
 
 
 
 
 
 
 
196
  </div>
197
 
198
- <div class="overflow-x-auto">
199
- <table class="w-full data-table">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
200
  <thead>
201
  <tr>
202
- <th class="text-left">Rank</th>
203
- <th class="text-left">Title ID</th>
204
- <th class="text-left">Title</th>
205
- <th class="text-right">Popularity</th>
206
- <th class="text-right">Δ (7d)</th>
207
- <th class="text-right">Reads</th>
208
- <th class="text-right">Rating</th>
209
- <th class="text-right">Engagement</th>
210
  </tr>
211
  </thead>
212
- <tbody class="divide-y divide-lab-border">
213
- <tr>
214
- <td class="text-left">#1</td>
215
- <td class="text-left text-lab-highlight">CM-4231-OP</td>
216
- <td class="text-left">ONE PIECE - WANO KURI</td>
217
- <td class="text-right data-value">9,842,719</td>
218
- <td class="text-right positive-trend">+2.7%</td>
219
- <td class="text-right">8,723,456</td>
220
- <td class="text-right">4.83</td>
221
- <td class="text-right">93.2%</td>
222
- </tr>
223
  <tr>
224
- <td class="text-left">#2</td>
225
- <td class="text-left text-lab-highlight">CM-5532-SL</td>
226
- <td class="text-left">SOLO LEVELING: RANKER</td>
227
- <td class="text-right data-value">7,482,156</td>
228
- <td class="text-right positive-trend">+3.4%</td>
229
- <td class="text-right">5,215,678</td>
230
- <td class="text-right">4.91</td>
231
- <td class="text-right">95.7%</td>
232
  </tr>
233
  <tr>
234
- <td class="text-left">#3</td>
235
- <td class="text-left text-lab-highlight">CM-3311-TG</td>
236
- <td class="text-left">TOWER OF GOD - S3</td>
237
- <td class="text-right data-value">6,123,845</td>
238
- <td class="text-right positive-trend">+1.8%</td>
239
- <td class="text-right">4,327,891</td>
240
- <td class="text-right">4.72</td>
241
- <td class="text-right">89.4%</td>
242
  </tr>
243
  <tr>
244
- <td class="text-left">#4</td>
245
- <td class="text-left text-lab-highlight">CM-7221-TB</td>
246
- <td class="text-left">THE BEGINNING AFTER END</td>
247
- <td class="text-right data-value">5,831,402</td>
248
- <td class="text-right negative-trend">-0.9%</td>
249
- <td class="text-right">3,982,456</td>
250
- <td class="text-right">4.68</td>
251
- <td class="text-right">92.1%</td>
252
  </tr>
253
  <tr>
254
- <td class="text-left">#5</td>
255
- <td class="text-left text-lab-highlight">CM-1123-OR</td>
256
- <td class="text-left">OMNISCIENT READER</td>
257
- <td class="text-right data-value">5,421,873</td>
258
- <td class="text-right positive-trend">+5.3%</td>
259
- <td class="text-right">3,765,432</td>
260
- <td class="text-right">4.78</td>
261
- <td class="text-right">94.5%</td>
262
  </tr>
263
  </tbody>
264
  </table>
 
 
 
265
  </div>
266
  </div>
267
 
268
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
269
- <div class="data-panel rounded-lg">
270
- <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center">
271
- <h3 class="font-semibold">READER GROWTH RATE (LAST 30D)</h3>
272
- <span class="text-xs bg-lab-panel px-2 py-1 rounded">new subscribers</span>
273
- </div>
274
-
275
- <div class="overflow-x-auto">
276
- <table class="w-full data-table">
277
- <thead>
278
- <tr>
279
- <th class="text-left">Rank</th>
280
- <th class="text-left">Title ID</th>
281
- <th class="text-left">Title</th>
282
- <th class="text-right">New Readers</th>
283
- <th class="text-right">Growth</th>
284
- </tr>
285
- </thead>
286
- <tbody class="divide-y divide-lab-border">
287
- <tr>
288
- <td class="text-left">#1</td>
289
- <td class="text-left text-lab-highlight">CM-5532-SL</td>
290
- <td class="text-left">SOLO LEVELING: RANKER</td>
291
- <td class="text-right data-value">124,567</td>
292
- <td class="text-right positive-trend">+17.2%</td>
293
- </tr>
294
- <tr>
295
- <td class="text-left">#2</td>
296
- <td class="text-left text-lab-highlight">CM-1123-OR</td>
297
- <td class="text-left">OMNISCIENT READER</td>
298
- <td class="text-right data-value">98,721</td>
299
- <td class="text-right positive-trend">+12.4%</td>
300
- </tr>
301
- <tr>
302
- <td class="text-left">#3</td>
303
- <td class="text-left text-lab-highlight">CM-4412-SS</td>
304
- <td class="text-left">SSS-CLASS SUICIDE</td>
305
- <td class="text-right data-value">87,456</td>
306
- <td class="text-right positive-trend">+24.7%</td>
307
- </tr>
308
- </tbody>
309
- </table>
310
- </div>
311
  </div>
312
 
313
- <div class="data-panel rounded-lg">
314
- <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center">
315
- <h3 class="font-semibold">NEGATIVE ENGAGEMENT (LAST 30D)</h3>
316
- <span class="text-xs bg-lab-warning px-2 py-1 rounded">dropoff risk</span>
317
- </div>
318
-
319
- <div class="overflow-x-auto">
320
- <table class="w-full data-table">
321
- <thead>
322
- <tr>
323
- <th class="text-left">Rank</th>
324
- <th class="text-left">Title ID</th>
325
- <th class="text-left">Title</th>
326
- <th class="text-right">Negative %</th>
327
- <th class="text-right">Churn Risk</th>
328
- </tr>
329
- </thead>
330
- <tbody class="divide-y divide-lab-border">
331
- <tr>
332
- <td class="text-left">#1</td>
333
- <td class="text-left text-lab-highlight">CM-8874-BH</td>
334
- <td class="text-left">BAD HERO</td>
335
- <td class="text-right data-value negative-trend">43.2%</td>
336
- <td class="text-right data-value negative-trend">High</td>
337
- </tr>
338
- <tr>
339
- <td class="text-left">#2</td>
340
- <td class="text-left text-lab-highlight">CM-1128-FK</td>
341
- <td class="text-left">FLOP KNIGHT</td>
342
- <td class="text-right data-value negative-trend">38.7%</td>
343
- <td class="text-right data-value negative-trend">High</td>
344
- </tr>
345
- <tr>
346
- <td class="text-left">#3</td>
347
- <td class="text-left text-lab-highlight">CM-5521-MQ</td>
348
- <td class="text-left">MOCK QUEST</td>
349
- <td class="text-right data-value negative-trend">32.1%</td>
350
- <td class="text-right data-value">Medium</td>
351
- </tr>
352
- </tbody>
353
- </table>
354
  </div>
355
  </div>
356
  </div>
@@ -358,214 +397,533 @@
358
 
359
  <hr class="section-divider">
360
 
361
- <!-- Engagement Metrics -->
362
  <section class="mb-8">
363
- <h2 class="text-xl font-semibold mb-4">ENGAGEMENT METRICS</h2>
 
 
 
364
 
365
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
366
- <div class="data-panel rounded-lg">
367
- <div class="data-header px-4 py-3 rounded-t-lg">
368
- <h3 class="font-semibold">COMMENT ACTIVITY</h3>
369
- </div>
370
-
371
- <div class="p-4">
372
- <div class="mb-3">
373
- <div class="text-sm mb-1 flex justify-between">
374
- <span>Avg. Comments/Title</span>
375
- <span class="data-value">847</span>
376
- </div>
377
- <div class="h-1 bg-lab-border rounded-full">
378
- <div class="h-1 bg-lab-highlight rounded-full" style="width: 65%"></div>
379
- </div>
380
- </div>
381
-
382
- <div class="mb-3">
383
- <div class="text-sm mb-1 flex justify-between">
384
- <span>Most Discussed Title</span>
385
- <span class="data-value text-lab-highlight">CM-4231-OP</span>
386
- </div>
387
- <div class="h-1 bg-lab-border rounded-full">
388
- <div class="h-1 bg-lab-accent rounded-full" style="width: 92%"></div>
389
- </div>
390
- </div>
391
-
392
- <div class="text-xs">
393
- <div class="flex justify-between mb-1">
394
- <span>Emotion Analysis (Pos/Neg):</span>
395
- <span>78.2% / 21.8%</span>
396
- </div>
397
- <div class="flex justify-between">
398
- <span>Avg. Reply Depth:</span>
399
- <span>2.7</span>
400
- </div>
401
- </div>
402
  </div>
403
  </div>
404
 
405
- <div class="data-panel rounded-lg">
406
- <div class="data-header px-4 py-3 rounded-t-lg">
407
- <h3 class="font-semibold">SOCIAL SHARING</h3>
408
- </div>
409
-
410
- <div class="p-4">
411
- <div class="mb-3">
412
- <div class="text-sm mb-1 flex justify-between">
413
- <span>Avg. Shares/Title</span>
414
- <span class="data-value">324</span>
415
- </div>
416
- <div class="h-1 bg-lab-border rounded-full">
417
- <div class="h-1 bg-lab-accent rounded-full" style="width: 45%"></div>
418
- </div>
419
- </div>
420
-
421
- <div class="mb-3">
422
- <div class="text-sm mb-1 flex justify-between">
423
- <span>Most Shared Title</span>
424
- <span class="data-value text-lab-highlight">CM-5532-SL</span>
425
- </div>
426
- <div class="h-1 bg-lab-border rounded-full">
427
- <div class="h-1 bg-lab-highlight rounded-full" style="width: 88%"></div>
428
- </div>
429
- </div>
430
-
431
- <div class="text-xs grid grid-cols-3 gap-2">
432
  <div>
433
- <div class="mb-1">Twitter:</div>
434
- <div class="data-value">62%</div>
435
  </div>
436
  <div>
437
- <div class="mb-1">Discord:</div>
438
- <div class="data-value">23%</div>
439
  </div>
440
  <div>
441
- <div class="mb-1">Other:</div>
442
- <div class="data-value">15%</div>
443
  </div>
444
  </div>
445
  </div>
446
  </div>
 
 
 
 
 
 
 
 
447
 
448
- <div class="data-panel rounded-lg">
449
- <div class="data-header px-4 py-3 rounded-t-lg">
450
- <h3 class="font-semibold">READING PATTERNS</h3>
451
- </div>
452
-
453
- <div class="p-4">
454
- <div class="mb-3">
455
- <div class="text-sm mb-1 flex justify-between">
456
- <span>Avg. Reading Time</span>
457
- <span class="data-value">8m 17s</span>
458
- </div>
459
- <div class="h-1 bg-lab-border rounded-full">
460
- <div class="h-1 bg-lab-highlight rounded-full" style="width: 55%"></div>
461
- </div>
462
- </div>
463
-
464
- <div class="mb-3">
465
- <div class="text-sm mb-1 flex justify-between">
466
- <span>Peak Hours</span>
467
- <span class="data-value">19:00-22:00</span>
468
- </div>
469
- <div class="h-1 bg-lab-border rounded-full">
470
- <div class="h-1 bg-lab-accent rounded-full" style="width: 78%"></div>
471
- </div>
472
- </div>
473
-
474
  <div class="text-xs">
475
- <div class="flex justify-between mb-1">
476
- <span>Binge Readers:</span>
477
- <span>34.2%</span>
478
- </div>
479
- <div class="flex justify-between">
480
- <span>Weekly Readers:</span>
481
- <span>61.7%</span>
482
- </div>
483
  </div>
484
  </div>
 
 
 
 
 
485
  </div>
486
  </div>
 
 
 
 
 
 
 
487
 
488
- <div class="data-panel rounded-lg">
489
- <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center">
490
- <h3 class="font-semibold">GENRE PERFORMANCE ANALYSIS</h3>
491
- <span class="text-xs bg-lab-panel px-2 py-1 rounded">reads/engagement</span>
492
- </div>
493
-
494
- <div class="overflow-x-auto">
495
- <table class="w-full data-table">
496
- <thead>
497
- <tr>
498
- <th class="text-left">Genre</th>
499
- <th class="text-right">Total Titles</th>
500
- <th class="text-right">Avg. Reads</th>
501
- <th class="text-right">Engagement</th>
502
- <th class="text-right">Completion</th>
503
- <th class="text-right">New Titles/Day</th>
504
- <th class="text-right">Rating</th>
505
- <th class="text-right">Health</th>
506
- </tr>
507
- </thead>
508
- <tbody class="divide-y divide-lab-border">
509
- <tr>
510
- <td class="text-left">Action</td>
511
- <td class="text-right">782</td>
512
- <td class="text-right data-value">342,156</td>
513
- <td class="text-right">89.2%</td>
514
- <td class="text-right positive-trend">92.1%</td>
515
- <td class="text-right">1.7</td>
516
- <td class="text-right">4.63</td>
517
- <td class="text-right positive-trend">Excellent</td>
518
- </tr>
519
- <tr>
520
- <td class="text-left">Fantasy</td>
521
- <td class="text-right">521</td>
522
- <td class="text-right data-value">287,432</td>
523
- <td class="text-right">87.4%</td>
524
- <td class="text-right positive-trend">90.3%</td>
525
- <td class="text-right">1.2</td>
526
- <td class="text-right">4.57</td>
527
- <td class="text-right positive-trend">Good</td>
528
- </tr>
529
- <tr>
530
- <td class="text-left">Romance</td>
531
- <td class="text-right">387</td>
532
- <td class="text-right data-value">154,789</td>
533
- <td class="text-right">84.1%</td>
534
- <td class="text-right positive-trend">88.9%</td>
535
- <td class="text-right">0.8</td>
536
- <td class="text-right">4.42</td>
537
- <td class="text-right positive-trend">Good</td>
538
- </tr>
539
- <tr>
540
- <td class="text-left">Horror</td>
541
- <td class="text-right">143</td>
542
- <td class="text-right data-value">98,765</td>
543
- <td class="text-right">81.3%</td>
544
- <td class="text-right negative-trend">79.2%</td>
545
- <td class="text-right">0.3</td>
546
- <td class="text-right">4.21</td>
547
- <td class="text-right negative-trend">Caution</td>
548
- </tr>
549
- </tbody>
550
- </table>
551
- </div>
 
 
 
552
  </div>
553
  </section>
554
  </main>
555
 
556
- <footer class="border-t border-lab-border py-4 mt-8">
557
  <div class="container mx-auto px-4">
558
  <div class="flex flex-col md:flex-row justify-between items-center text-xs text-gray-400">
559
  <div class="mb-2 md:mb-0">
560
- <span class="mr-4">COMICLAB v2.4.8</span>
561
- <span>DATA API v1.3.2</span>
562
  </div>
563
  <div>
564
- <span class="mr-4">Last scan: 2023-11-15T14:37:24Z</span>
565
- <span>Next update: 2023-11-15T15:37:24Z</span>
566
  </div>
567
  </div>
 
 
 
568
  </div>
569
  </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
570
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=nmtalhp/comic-datat" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
571
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ComicLab - Advanced Research Dashboard</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
  <script>
10
  tailwind.config = {
11
  theme: {
 
21
  accent: '#00ff88',
22
  highlight: '#0088ff',
23
  warning: '#ff6600',
24
+ danger: '#ff0033',
25
+ teal: '#00f5d4',
26
+ purple: '#9b5de5'
27
  }
28
  }
29
  }
 
101
  line-height: 1;
102
  margin: 0.25rem 0 0.5rem;
103
  }
104
+ .chart-container {
105
+ position: relative;
106
+ height: 250px;
107
+ width: 100%;
108
+ }
109
+ .progress-bar {
110
+ height: 4px;
111
+ background-color: #333;
112
+ border-radius: 2px;
113
+ overflow: hidden;
114
+ }
115
+ .progress-value {
116
+ height: 100%;
117
+ }
118
+ .grid-point {
119
+ width: 8px;
120
+ height: 8px;
121
+ border-radius: 50%;
122
+ display: inline-block;
123
+ margin-right: 6px;
124
+ }
125
+ .kpi-badge {
126
+ font-size: 0.7rem;
127
+ padding: 2px 6px;
128
+ border-radius: 10px;
129
+ display: inline-flex;
130
+ align-items: center;
131
+ }
132
  </style>
133
  </head>
134
  <body class="bg-lab-dark text-gray-300 font-mono">
135
+ <header class="border-b border-lab-border bg-lab-dark sticky top-0 z-10">
136
  <div class="container mx-auto px-4 py-3">
137
  <div class="flex items-center justify-between">
138
  <div class="flex items-center space-x-2">
139
  <span class="text-lab-accent font-bold text-xl">COMIC</span>
140
+ <span class="text-lab-highlight font-bold text-xl">RESEARCH</span>
141
+ <span class="text-xs px-2 py-1 bg-lab-panel rounded">v3.1.0</span>
142
  </div>
143
  <div class="text-xs text-gray-400">
144
+ <span class="mr-4">Last updated: <span class="text-gray-100">2023-11-16 09:42:18 UTC</span></span>
145
+ <span>Data source: <span class="text-gray-100">research_api/v3</span></span>
146
  </div>
147
  </div>
148
  </div>
149
  </header>
150
 
151
  <main class="container mx-auto px-4 py-6">
152
+ <!-- Executive Analysis -->
153
  <section class="mb-8">
154
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
155
+ <!-- Market Growth Chart -->
156
+ <div class="data-panel rounded-lg p-4">
157
+ <div class="flex justify-between items-center mb-3">
158
+ <h3 class="font-semibold">MARKET GROWTH PROJECTIONS</h3>
159
+ <span class="text-xs bg-lab-panel px-2 py-1 rounded">by genre</span>
 
 
 
 
 
 
160
  </div>
161
+ <div class="chart-container">
162
+ <canvas id="marketGrowthChart"></canvas>
 
 
 
 
 
 
163
  </div>
164
+ <div class="mt-3 text-xs grid grid-cols-4 gap-2">
165
+ <div class="flex items-center"><span class="grid-point bg-[#00ff88]"></span> Action</div>
166
+ <div class="flex items-center"><span class="grid-point bg-[#0088ff]"></span> Fantasy</div>
167
+ <div class="flex items-center"><span class="grid-point bg-[#9b5de5]"></span> Romance</div>
168
+ <div class="flex items-center"><span class="grid-point bg-[#ff6600]"></span> Horror</div>
 
 
 
169
  </div>
170
  </div>
171
 
172
+ <!-- Demographic Breakdown -->
173
+ <div class="data-panel rounded-lg p-4">
174
+ <div class="flex justify-between items-center mb-3">
175
+ <h3 class="font-semibold">READER DEMOGRAPHICS</h3>
176
+ <span class="text-xs bg-lab-panel px-2 py-1 rounded">latest survey</span>
177
+ </div>
178
+ <div class="chart-container">
179
+ <canvas id="demographicChart"></canvas>
180
+ </div>
181
+ <div class="grid grid-cols-3 gap-2 mt-2 text-xs text-center">
182
+ <div>
183
+ <div class="font-bold">Gender</div>
184
+ <div>Male: 48%</div>
185
+ <div>Female: 49%</div>
186
+ <div>Other: 3%</div>
187
+ </div>
188
+ <div>
189
+ <div class="font-bold">Age Groups</div>
190
+ <div>13-17: 22%</div>
191
+ <div>18-24: 41%</div>
192
+ <div>25-34: 28%</div>
193
+ </div>
194
+ <div>
195
+ <div class="font-bold">Engagement</div>
196
+ <div>Daily: 34%</div>
197
+ <div>Weekly: 52%</div>
198
+ <div>Monthly: 14%</div>
199
+ </div>
200
  </div>
201
  </div>
202
  </div>
203
 
204
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
205
+ <!-- Key Performance Indicators -->
206
+ <div class="data-panel rounded-lg p-3">
207
+ <div class="text-xs mb-2">MARKET SHARE GROWTH</div>
208
+ <div class="flex justify-between items-end mb-1">
209
+ <span class="text-xl data-value">17.2%</span>
210
+ <span class="text-xs positive-trend">+3.4% YoY</span>
211
+ </div>
212
+ <div class="progress-bar">
213
+ <div class="progress-value bg-lab-accent" style="width: 70%"></div>
214
+ </div>
215
+ <div class="text-xs mt-1 flex justify-between">
216
+ <span>2022: 13.8%</span>
217
+ <span>Forecast: 21%</span>
218
+ </div>
219
  </div>
220
+
221
+ <div class="data-panel rounded-lg p-3">
222
+ <div class="text-xs mb-2">AVG. REVENUE/USER</div>
223
+ <div class="flex justify-between items-end mb-1">
224
+ <span class="text-xl data-value">$3.42</span>
225
+ <span class="text-xs positive-trend">+11.1% YoY</span>
226
+ </div>
227
+ <div class="progress-bar">
228
+ <div class="progress-value bg-lab-highlight" style="width: 65%"></div>
229
+ </div>
230
+ <div class="text-xs mt-1 flex justify-between">
231
+ <span>2022: $2.89</span>
232
+ <span>Forecast: $4.15</span>
233
+ </div>
234
  </div>
235
+
236
+ <div class="data-panel rounded-lg p-3">
237
+ <div class="text-xs mb-2">CONTENT RETENTION</div>
238
+ <div class="flex justify-between items-end mb-1">
239
+ <span class="text-xl data-value">87%</span>
240
+ <span class="text-xs positive-trend">+2.8% YoY</span>
241
+ </div>
242
+ <div class="progress-bar">
243
+ <div class="progress-value bg-lab-teal" style="width: 87%"></div>
244
+ </div>
245
+ <div class="text-xs mt-1 flex justify-between">
246
+ <span>2022: 84.2%</span>
247
+ <span>Forecast: 89%</span>
248
+ </div>
249
  </div>
250
+
251
+ <div class="data-panel rounded-lg p-3">
252
+ <div class="text-xs mb-2">NEW READER ACQUISITION</div>
253
+ <div class="flex justify-between items-end mb-1">
254
+ <span class="text-xl data-value">28.4K</span>
255
+ <span class="text-xs negative-trend">-4.2% YoY</span>
256
+ </div>
257
+ <div class="progress-bar">
258
+ <div class="progress-value bg-lab-warning" style="width: 45%"></div>
259
+ </div>
260
+ <div class="text-xs mt-1 flex justify-between">
261
+ <span>2022: 29.7K</span>
262
+ <span>Forecast: 25K</span>
263
+ </div>
264
  </div>
265
  </div>
266
  </section>
267
 
268
  <hr class="section-divider">
269
 
270
+ <!-- Deep Demographic Analysis -->
271
  <section class="mb-8">
272
+ <h2 class="text-xl font-semibold mb-4">DEMOGRAPHIC DEEP DIVE</h2>
273
 
274
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
275
+ <!-- Age Distribution by Genre -->
276
+ <div class="data-panel rounded-lg p-4">
277
+ <div class="mb-4">
278
+ <h3 class="font-semibold">AGE DISTRIBUTION BY GENRE</h3>
279
+ <div class="text-xs text-gray-400 mt-1">Average reader age with engagement</div>
280
+ </div>
281
+ <div class="chart-container">
282
+ <canvas id="ageGenreChart"></canvas>
283
+ </div>
284
+ <div class="text-xs mt-3 grid grid-cols-2 gap-1">
285
+ <div><span class="text-lab-highlight">Action:</span> Avg. age 21.4 | Peak 18-24</div>
286
+ <div><span class="text-lab-teal">Fantasy:</span> Avg. age 22.7 | Peak 18-24</div>
287
+ <div><span class="text-lab-purple">Romance:</span> Avg. age 24.2 | Peak 18-30</div>
288
+ <div><span class="text-lab-warning">Horror:</span> Avg. age 25.1 | Peak 22-30</div>
289
+ </div>
290
  </div>
291
 
292
+ <!-- Gender Preferences -->
293
+ <div class="data-panel rounded-lg p-4">
294
+ <div class="mb-4">
295
+ <h3 class="font-semibold">GENDER PREFERENCES</h3>
296
+ <div class="text-xs text-gray-400 mt-1">Content consumption by gender</div>
297
+ </div>
298
+ <div class="chart-container">
299
+ <canvas id="genderPreferenceChart"></canvas>
300
+ </div>
301
+ <div class="text-xs mt-3">
302
+ <div>
303
+ <span class="text-lab-highlight">Male:</span> 72% Action, 14% Fantasy, 8% Sci-Fi, 6% Others
304
+ </div>
305
+ <div>
306
+ <span class="text-lab-purple">Female:</span> 58% Romance, 22% Fantasy, 12% Drama, 8% Others
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Geographic Heatmap Preview -->
312
+ <div class="data-panel rounded-lg p-4">
313
+ <div class="mb-4">
314
+ <h3 class="font-semibold">GEOGRAPHIC CONCENTRATION</h3>
315
+ <div class="text-xs text-gray-400 mt-1">Top regions by readership</div>
316
+ </div>
317
+ <table class="w-full text-xs">
318
  <thead>
319
  <tr>
320
+ <th class="text-left">Region</th>
321
+ <th class="text-right">Readers</th>
322
+ <th class="text-right">Growth</th>
 
 
 
 
 
323
  </tr>
324
  </thead>
325
+ <tbody>
 
 
 
 
 
 
 
 
 
 
326
  <tr>
327
+ <td class="text-left">East Asia</td>
328
+ <td class="text-right data-value">421,892</td>
329
+ <td class="text-right positive-trend">+8.7%</td>
 
 
 
 
 
330
  </tr>
331
  <tr>
332
+ <td class="text-left">Southeast Asia</td>
333
+ <td class="text-right data-value">387,562</td>
334
+ <td class="text-right positive-trend">+12.4%</td>
 
 
 
 
 
335
  </tr>
336
  <tr>
337
+ <td class="text-left">North America</td>
338
+ <td class="text-right data-value">234,789</td>
339
+ <td class="text-right positive-trend">+5.3%</td>
 
 
 
 
 
340
  </tr>
341
  <tr>
342
+ <td class="text-left">Europe</td>
343
+ <td class="text-right data-value">187,654</td>
344
+ <td class="text-right neutral-trend">+1.8%</td>
 
 
 
 
 
345
  </tr>
346
  </tbody>
347
  </table>
348
+ <div class="text-xs mt-2 text-amber-300">
349
+ Emerging markets: South America (+17.2%), Middle East (+9.8%)
350
+ </div>
351
  </div>
352
  </div>
353
 
354
+ <!-- Behavioral Segmentation -->
355
+ <div class="data-panel rounded-lg mb-6 p-4">
356
+ <div class="flex justify-between items-center mb-4">
357
+ <h3 class="font-semibold">READER BEHAVIOR SEGMENTATION</h3>
358
+ <div class="text-xs bg-lab-panel px-2 py-1 rounded">cluster analysis</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
  </div>
360
 
361
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
362
+ <div class="p-3 bg-[#003153] rounded">
363
+ <div class="text-xs mb-1 font-bold">Power Readers (18%)</div>
364
+ <div class="text-xs mb-1">Daily readers, high spend</div>
365
+ <div class="flex flex-wrap gap-1">
366
+ <span class="kpi-badge bg-blue-900">LTV: $128</span>
367
+ <span class="kpi-badge bg-green-900">Engage: 94%</span>
368
+ </div>
369
+ </div>
370
+ <div class="p-3 bg-[#1a1a2e] rounded">
371
+ <div class="text-xs mb-1 font-bold">Casual Enjoyers (42%)</div>
372
+ <div class="text-xs mb-1">2-3x weekly, medium spend</div>
373
+ <div class="flex flex-wrap gap-1">
374
+ <span class="kpi-badge bg-blue-900">LTV: $64</span>
375
+ <span class="kpi-badge bg-green-900">Engage: 82%</span>
376
+ </div>
377
+ </div>
378
+ <div class="p-3 bg-[#3a0a2e] rounded">
379
+ <div class="text-xs mb-1 font-bold">Series Followers (28%)</div>
380
+ <div class="text-xs mb-1">Weekly, only favorite titles</div>
381
+ <div class="flex flex-wrap gap-1">
382
+ <span class="kpi-badge bg-blue-900">LTV: $43</span>
383
+ <span class="kpi-badge bg-green-900">Engage: 78%</span>
384
+ </div>
385
+ </div>
386
+ <div class="p-3 bg-[#4a0100] rounded">
387
+ <div class="text-xs mb-1 font-bold">Drop-off Risks (12%)</div>
388
+ <div class="text-xs mb-1">Declining engagement</div>
389
+ <div class="flex flex-wrap gap-1">
390
+ <span class="kpi-badge bg-blue-900">LTV: $12</span>
391
+ <span class="kpi-badge bg-red-900">Engage: 34%</span>
392
+ </div>
 
 
 
 
 
 
 
 
 
393
  </div>
394
  </div>
395
  </div>
 
397
 
398
  <hr class="section-divider">
399
 
400
+ <!-- Predictive Analytics -->
401
  <section class="mb-8">
402
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
403
+ <span class="status-indicator bg-lab-purple"></span>
404
+ <span>PREDICTIVE ANALYTICS</span>
405
+ </h2>
406
 
407
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
408
+ <!-- Content Trend Forecast -->
409
+ <div class="data-panel rounded-lg p-4">
410
+ <div class="mb-3">
411
+ <h3 class="font-semibold">CONTENT TREND PROJECTIONS</h3>
412
+ <div class="text-xs text-gray-400">6-month forecast based on current patterns</div>
413
+ </div>
414
+ <div class="chart-container">
415
+ <canvas id="trendForecastChart"></canvas>
416
+ </div>
417
+ <div class="text-xs mt-3 grid grid-cols-2 gap-1">
418
+ <div><span class="text-lab-accent">Rising:</span> Isekai (+14%), Slice-of-Life (+9%)</div>
419
+ <div><span class="text-lab-warning">Declining:</span> Traditional Fantasy (-7%), Vampire (-12%)</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
420
  </div>
421
  </div>
422
 
423
+ <!-- Revenue Prediction -->
424
+ <div class="data-panel rounded-lg p-4">
425
+ <div class="mb-3">
426
+ <h3 class="font-semibold">REVENUE FORECAST MODEL</h3>
427
+ <div class="text-xs text-gray-400">Quarterly projections with confidence intervals</div>
428
+ </div>
429
+ <div class="chart-container">
430
+ <canvas id="revenueForecastChart"></canvas>
431
+ </div>
432
+ <div class="text-xs mt-3">
433
+ <div class="grid grid-cols-3 gap-2">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
434
  <div>
435
+ <div>Q1 2024</div>
436
+ <div class="data-value">$2.4M</div>
437
  </div>
438
  <div>
439
+ <div>Q2 2024</div>
440
+ <div class="data-value">$2.7M</div>
441
  </div>
442
  <div>
443
+ <div>Q3 2024</div>
444
+ <div class="data-value">$2.9M</div>
445
  </div>
446
  </div>
447
  </div>
448
  </div>
449
+ </div>
450
+
451
+ <!-- Churn Prediction -->
452
+ <div class="data-panel rounded-lg p-4">
453
+ <div class="flex justify-between items-center mb-3">
454
+ <h3 class="font-semibold">CHURN RISK ANALYSIS</h3>
455
+ <span class="text-xs bg-lab-panel px-2 py-1 rounded">machine learning model</span>
456
+ </div>
457
 
458
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
459
+ <div class="p-3">
460
+ <div class="text-xs mb-1">Overall Churn Probability</div>
461
+ <div class="text-2xl data-value">3.8%</div>
462
+ <div class="text-xs"><span class="neutral-trend">→</span> Stable (no significant change)</div>
463
+ </div>
464
+ <div class="p-3">
465
+ <div class="text-xs mb-1">At-Risk Titles</div>
466
+ <div class="text-2xl data-value">87</div>
467
+ <div class="text-xs"><span class="positive-trend">↘</span> 12 less than last month</div>
468
+ </div>
469
+ <div class="p-3">
470
+ <div class="text-xs mb-1">High-Risk Segments</div>
471
+ <div class="text-2xl data-value">3</div>
 
 
 
 
 
 
 
 
 
 
 
 
472
  <div class="text-xs">
473
+ <span class="negative-trend">Vampire (27%)</span>,
474
+ <span class="negative-trend">Western (19%)</span>
 
 
 
 
 
 
475
  </div>
476
  </div>
477
+ <div class="p-3">
478
+ <div class="text-xs mb-1">Intervention Success Rate</div>
479
+ <div class="text-2xl data-value positive-trend">68%</div>
480
+ <div class="text-xs">(+9% from Q2)</div>
481
+ </div>
482
  </div>
483
  </div>
484
+ </section>
485
+
486
+ <hr class="section-divider">
487
+
488
+ <!-- Genre Performance Detail -->
489
+ <section class="mb-8">
490
+ <h2 class="text-xl font-semibold mb-4">GENRE PERFORMANCE MATRIX</h2>
491
 
492
+ <div class="overflow-x-auto">
493
+ <table class="w-full data-table">
494
+ <thead>
495
+ <tr>
496
+ <th class="text-left">Genre</th>
497
+ <th class="text-right">Market Share</th>
498
+ <th class="text-right">Reader Growth</th>
499
+ <th class="text-right">Revenue/Reader</th>
500
+ <th class="text-right">Age Skew</th>
501
+ <th class="text-right">Gender Ratio</th>
502
+ <th class="text-right">Series Length</th>
503
+ <th class="text-right">Health Index</th>
504
+ </tr>
505
+ </thead>
506
+ <tbody>
507
+ <tr>
508
+ <td class="text-left font-semibold">Action (Shounen)</td>
509
+ <td class="text-right data-value">34.2%</td>
510
+ <td class="text-right positive-trend">+8.7%</td>
511
+ <td class="text-right">$2.87</td>
512
+ <td class="text-right">21.4</td>
513
+ <td class="text-right">68/32</td>
514
+ <td class="text-right">72.4</td>
515
+ <td class="text-right positive-trend">89/100</td>
516
+ </tr>
517
+ <tr>
518
+ <td class="text-left font-semibold">Fantasy (Isekai)</td>
519
+ <td class="text-right data-value">27.8%</td>
520
+ <td class="text-right positive-trend">+14.2%</td>
521
+ <td class="text-right">$3.12</td>
522
+ <td class="text-right">22.1</td>
523
+ <td class="text-right">59/41</td>
524
+ <td class="text-right">45.7</td>
525
+ <td class="text-right positive-trend">92/100</td>
526
+ </tr>
527
+ <tr>
528
+ <td class="text-left font-semibold">Romance</td>
529
+ <td class="text-right data-value">15.3%</td>
530
+ <td class="text-right neutral-trend">+2.1%</td>
531
+ <td class="text-right">$4.21</td>
532
+ <td class="text-right">24.2</td>
533
+ <td class="text-right">22/78</td>
534
+ <td class="text-right">28.5</td>
535
+ <td class="text-right">75/100</td>
536
+ </tr>
537
+ <tr>
538
+ <td class="text-left font-semibold">Horror</td>
539
+ <td class="text-right data-value">7.8%</td>
540
+ <td class="text-right negative-trend">-3.4%</td>
541
+ <td class="text-right">$2.45</td>
542
+ <td class="text-right">25.1</td>
543
+ <td class="text-right">54/46</td>
544
+ <td class="text-right">34.2</td>
545
+ <td class="text-right negative-trend">61/100</td>
546
+ </tr>
547
+ <tr>
548
+ <td class="text-left font-semibold">Sports</td>
549
+ <td class="text-right data-value">6.2%</td>
550
+ <td class="text-right neutral-trend">+0.7%</td>
551
+ <td class="text-right">$1.98</td>
552
+ <td class="text-right">23.8</td>
553
+ <td class="text-right">82/18</td>
554
+ <td class="text-right">62.4</td>
555
+ <td class="text-right">68/100</td>
556
+ </tr>
557
+ </tbody>
558
+ </table>
559
  </div>
560
  </section>
561
  </main>
562
 
563
+ <footer class="border-t border-lab-border py-4 mt-8 bg-lab-panel">
564
  <div class="container mx-auto px-4">
565
  <div class="flex flex-col md:flex-row justify-between items-center text-xs text-gray-400">
566
  <div class="mb-2 md:mb-0">
567
+ <span class="mr-4">COMICLAB RESEARCH v3.1.0</span>
568
+ <span>ANALYTICS ENGINE v2.0.1</span>
569
  </div>
570
  <div>
571
+ <span class="mr-4">Last scan: 2023-11-16T09:42:18Z</span>
572
+ <span>Next model refresh: 2023-11-17T03:00:00Z</span>
573
  </div>
574
  </div>
575
+ <div class="mt-2 text-xxs text-gray-500 text-center">
576
+ Predictive models have 87-92% accuracy on historical data | Confidence intervals at 95%
577
+ </div>
578
  </div>
579
  </footer>
580
+
581
+ <script>
582
+ // Market Growth Chart
583
+ const marketGrowthCtx = document.getElementById('marketGrowthChart').getContext('2d');
584
+ const marketGrowthChart = new Chart(marketGrowthCtx, {
585
+ type: 'line',
586
+ data: {
587
+ labels: ['2021', '2022', '2023', '2024F', '2025F', '2026F'],
588
+ datasets: [
589
+ {
590
+ label: 'Action',
591
+ data: [120, 145, 180, 215, 250, 290],
592
+ borderColor: '#00ff88',
593
+ backgroundColor: 'rgba(0, 255, 136, 0.1)',
594
+ tension: 0.3,
595
+ borderWidth: 2
596
+ },
597
+ {
598
+ label: 'Fantasy',
599
+ data: [100, 130, 165, 200, 240, 280],
600
+ borderColor: '#0088ff',
601
+ backgroundColor: 'rgba(0, 136, 255, 0.1)',
602
+ tension: 0.3,
603
+ borderWidth: 2
604
+ },
605
+ {
606
+ label: 'Romance',
607
+ data: [80, 95, 110, 125, 140, 155],
608
+ borderColor: '#9b5de5',
609
+ backgroundColor: 'rgba(155, 93, 229, 0.1)',
610
+ tension: 0.3,
611
+ borderWidth: 2
612
+ },
613
+ {
614
+ label: 'Horror',
615
+ data: [65, 70, 72, 68, 65, 62],
616
+ borderColor: '#ff6600',
617
+ backgroundColor: 'rgba(255, 102, 0, 0.1)',
618
+ tension: 0.3,
619
+ borderWidth: 2
620
+ }
621
+ ]
622
+ },
623
+ options: {
624
+ responsive: true,
625
+ maintainAspectRatio: false,
626
+ plugins: {
627
+ legend: {
628
+ display: false
629
+ },
630
+ tooltip: {
631
+ mode: 'index',
632
+ intersect: false,
633
+ callbacks: {
634
+ label: function(context) {
635
+ return context.dataset.label + ': ' + context.raw + 'M';
636
+ }
637
+ }
638
+ }
639
+ },
640
+ scales: {
641
+ y: {
642
+ beginAtZero: true,
643
+ grid: {
644
+ color: 'rgba(51, 51, 51, 0.5)'
645
+ },
646
+ ticks: {
647
+ callback: function(value) {
648
+ return value + 'M';
649
+ }
650
+ }
651
+ },
652
+ x: {
653
+ grid: {
654
+ display: false
655
+ }
656
+ }
657
+ }
658
+ }
659
+ });
660
+
661
+ // Demographic Chart
662
+ const demographicCtx = document.getElementById('demographicChart').getContext('2d');
663
+ const demographicChart = new Chart(demographicCtx, {
664
+ type: 'doughnut',
665
+ data: {
666
+ labels: ['Age 13-17', 'Age 18-24', 'Age 25-34', 'Age 35+'],
667
+ datasets: [{
668
+ data: [22, 41, 28, 9],
669
+ backgroundColor: [
670
+ '#00f5d4',
671
+ '#0088ff',
672
+ '#9b5de5',
673
+ '#ff006e'
674
+ ],
675
+ borderWidth: 0
676
+ }]
677
+ },
678
+ options: {
679
+ responsive: true,
680
+ maintainAspectRatio: false,
681
+ cutout: '70%',
682
+ plugins: {
683
+ legend: {
684
+ display: false
685
+ }
686
+ }
687
+ }
688
+ });
689
+
690
+ // Age by Genre Chart
691
+ const ageGenreCtx = document.getElementById('ageGenreChart').getContext('2d');
692
+ const ageGenreChart = new Chart(ageGenreCtx, {
693
+ type: 'bar',
694
+ data: {
695
+ labels: ['13-17', '18-20', '21-24', '25-30', '31-40', '41+'],
696
+ datasets: [
697
+ {
698
+ label: 'Action',
699
+ data: [18, 25, 32, 15, 7, 3],
700
+ backgroundColor: 'rgba(0, 136, 255, 0.7)'
701
+ },
702
+ {
703
+ label: 'Fantasy',
704
+ data: [15, 22, 35, 18, 8, 2],
705
+ backgroundColor: 'rgba(0, 245, 212, 0.7)'
706
+ },
707
+ {
708
+ label: 'Romance',
709
+ data: [12, 18, 25, 30, 12, 3],
710
+ backgroundColor: 'rgba(155, 93, 229, 0.7)'
711
+ },
712
+ {
713
+ label: 'Horror',
714
+ data: [8, 15, 28, 35, 12, 2],
715
+ backgroundColor: 'rgba(255, 102, 0, 0.7)'
716
+ }
717
+ ]
718
+ },
719
+ options: {
720
+ responsive: true,
721
+ maintainAspectRatio: false,
722
+ plugins: {
723
+ legend: {
724
+ display: false
725
+ }
726
+ },
727
+ scales: {
728
+ x: {
729
+ stacked: false,
730
+ grid: {
731
+ display: false
732
+ }
733
+ },
734
+ y: {
735
+ stacked: false,
736
+ grid: {
737
+ color: 'rgba(51, 51, 51, 0.5)'
738
+ },
739
+ ticks: {
740
+ callback: function(value) {
741
+ return value + '%';
742
+ }
743
+ }
744
+ }
745
+ }
746
+ }
747
+ });
748
+
749
+ // Gender Preference Chart
750
+ const genderPreferenceCtx = document.getElementById('genderPreferenceChart').getContext('2d');
751
+ const genderPreferenceChart = new Chart(genderPreferenceCtx, {
752
+ type: 'radar',
753
+ data: {
754
+ labels: ['Action', 'Fantasy', 'Romance', 'Horror', 'Sci-Fi', 'Sports', 'Comedy', 'Drama'],
755
+ datasets: [
756
+ {
757
+ label: 'Male Readers',
758
+ data: [72, 14, 5, 8, 12, 15, 18, 6],
759
+ backgroundColor: 'rgba(0, 136, 255, 0.2)',
760
+ borderColor: '#0088ff',
761
+ borderWidth: 2
762
+ },
763
+ {
764
+ label: 'Female Readers',
765
+ data: [18, 22, 58, 12, 8, 3, 15, 12],
766
+ backgroundColor: 'rgba(155, 93, 229, 0.2)',
767
+ borderColor: '#9b5de5',
768
+ borderWidth: 2
769
+ }
770
+ ]
771
+ },
772
+ options: {
773
+ responsive: true,
774
+ maintainAspectRatio: false,
775
+ plugins: {
776
+ legend: {
777
+ display: false
778
+ }
779
+ },
780
+ scales: {
781
+ r: {
782
+ angleLines: {
783
+ color: 'rgba(51, 51, 51, 0.5)'
784
+ },
785
+ grid: {
786
+ color: 'rgba(51, 51, 51, 0.5)'
787
+ },
788
+ suggestedMin: 0,
789
+ suggestedMax: 80
790
+ }
791
+ }
792
+ }
793
+ });
794
+
795
+ // Trend Forecast Chart
796
+ const trendForecastCtx = document.getElementById('trendForecastChart').getContext('2d');
797
+ const trendForecastChart = new Chart(trendForecastCtx, {
798
+ type: 'line',
799
+ data: {
800
+ labels: ['Current', '+1M', '+2M', '+3M', '+4M', '+5M', '+6M'],
801
+ datasets: [
802
+ {
803
+ label: 'Isekai',
804
+ data: [100, 108, 116, 124, 131, 139, 147],
805
+ borderColor: '#00ff88',
806
+ backgroundColor: 'rgba(0, 255, 136, 0.1)',
807
+ tension: 0.4,
808
+ borderWidth: 2
809
+ },
810
+ {
811
+ label: 'Sports',
812
+ data: [100, 102, 103, 104, 103, 102, 101],
813
+ borderColor: '#0088ff',
814
+ backgroundColor: 'rgba(0, 136, 255, 0.1)',
815
+ tension: 0.4,
816
+ borderWidth: 2
817
+ },
818
+ {
819
+ label: 'Traditional Fantasy',
820
+ data: [100, 97, 94, 91, 87, 84, 81],
821
+ borderColor: '#ff6600',
822
+ backgroundColor: 'rgba(255, 102, 0, 0.1)',
823
+ tension: 0.4,
824
+ borderWidth: 2
825
+ },
826
+ {
827
+ label: 'Slice-of-Life',
828
+ data: [100, 103, 107, 110, 113, 117, 120],
829
+ borderColor: '#9b5de5',
830
+ backgroundColor: 'rgba(155, 93, 229, 0.1)',
831
+ tension: 0.4,
832
+ borderWidth: 2
833
+ }
834
+ ]
835
+ },
836
+ options: {
837
+ responsive: true,
838
+ maintainAspectRatio: false,
839
+ plugins: {
840
+ legend: {
841
+ display: false
842
+ },
843
+ tooltip: {
844
+ callbacks: {
845
+ label: function(context) {
846
+ return context.dataset.label + ': ' + (context.raw - 100) + '% change';
847
+ }
848
+ }
849
+ }
850
+ },
851
+ scales: {
852
+ y: {
853
+ beginAtZero: false,
854
+ min: 80,
855
+ grid: {
856
+ color: 'rgba(51, 51, 51, 0.5)'
857
+ },
858
+ ticks: {
859
+ callback: function(value) {
860
+ return (value - 100) + '%';
861
+ }
862
+ }
863
+ },
864
+ x: {
865
+ grid: {
866
+ display: false
867
+ }
868
+ }
869
+ }
870
+ }
871
+ });
872
+
873
+ // Revenue Forecast Chart
874
+ const revenueForecastCtx = document.getElementById('revenueForecastChart').getContext('2d');
875
+ const revenueForecastChart = new Chart(revenueForecastCtx, {
876
+ type: 'bar',
877
+ data: {
878
+ labels: ['Q4 2023', 'Q1 2024', 'Q2 2024', 'Q3 2024', 'Q4 2024'],
879
+ datasets: [{
880
+ label: 'Revenue',
881
+ data: [2200, 2400, 2700, 2900, 3200],
882
+ backgroundColor: [
883
+ 'rgba(0, 136, 255, 0.8)',
884
+ 'rgba(0, 136, 255, 0.8)',
885
+ 'rgba(0, 245, 212, 0.8)',
886
+ 'rgba(0, 245, 212, 0.8)',
887
+ 'rgba(0, 255, 136, 0.8)'
888
+ ],
889
+ borderWidth: 0
890
+ }]
891
+ },
892
+ options: {
893
+ responsive: true,
894
+ maintainAspectRatio: false,
895
+ plugins: {
896
+ legend: {
897
+ display: false
898
+ },
899
+ tooltip: {
900
+ callbacks: {
901
+ label: function(context) {
902
+ return '$' + context.raw + 'K';
903
+ }
904
+ }
905
+ }
906
+ },
907
+ scales: {
908
+ y: {
909
+ beginAtZero: true,
910
+ grid: {
911
+ color: 'rgba(51, 51, 51, 0.5)'
912
+ },
913
+ ticks: {
914
+ callback: function(value) {
915
+ return '$' + value + 'K';
916
+ }
917
+ }
918
+ },
919
+ x: {
920
+ grid: {
921
+ display: false
922
+ }
923
+ }
924
+ }
925
+ }
926
+ });
927
+ </script>
928
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=nmtalhp/comic-datat" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
929
  </html>