From 1c3a58b89a7004bf02c3adc4576429e10a980135 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=BA=90?= <wangyuan@wanghuoguo.local>
Date: Mon, 7 Sep 2026 17:10:14 +0800
Subject: [PATCH] rebuild: clean 3-tab report (Mintegral perf data), drop mock
 data.json

---
 .gitignore    |   3 +
 data.json     |  34 --
 index.html    | 953 ++++++++++++++++----------------------------------
 mtg_data.json |  98 ++++++
 4 files changed, 394 insertions(+), 694 deletions(-)
 create mode 100644 .gitignore
 delete mode 100644 data.json
 create mode 100644 mtg_data.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..dd8c6f3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+mtg_raw.tsv
+channel_matrix.csv
+mtg_fetch.py
diff --git a/data.json b/data.json
deleted file mode 100644
index 9fac787..0000000
--- a/data.json
+++ /dev/null
@@ -1,34 +0,0 @@
-[
-  {"date":"2026-08-17","pkg":"com.igg.android.lordsmobile","ad_unit":"91530536_IGG_RU","impressions":40311,"clicks":542,"conversions":23,"ecpm":0.285,"cpc":0.021,"ctr":0.01345,"ivr":0.00057,"cvr":0.04244},
-  {"date":"2026-08-17","pkg":"net.mbc.shahid","ad_unit":"91530537_MBCShahid_SA","impressions":85696,"clicks":19376,"conversions":19,"ecpm":0.1,"cpc":0,"ctr":0.2261,"ivr":0.00022,"cvr":0.00098},
-  {"date":"2026-08-17","pkg":"com.sialiagames.xczyw.gp.tw","ad_unit":"91533906_xczyw_TW","impressions":9943,"clicks":343,"conversions":0,"ecpm":0,"cpc":0,"ctr":0.0345,"ivr":0,"cvr":0},
-  {"date":"2026-08-17","pkg":"com.qookkagames.xczyw.gp.hk","ad_unit":"91534913_xczyw_HK","impressions":21829,"clicks":1998,"conversions":0,"ecpm":0,"cpc":0,"ctr":0.09153,"ivr":0,"cvr":0},
-  {"date":"2026-08-17","pkg":"br.com.netshoes.app","ad_unit":"91530549_Netshoes_BR","impressions":4,"clicks":0,"conversions":0,"ecpm":0,"cpc":0,"ctr":0,"ivr":0,"cvr":0},
-  {"date":"2026-08-17","pkg":"com.luizalabs.mlapp","ad_unit":"91530547_Magalu_BR","impressions":12,"clicks":2,"conversions":0,"ecpm":0,"cpc":0,"ctr":0.16667,"ivr":0,"cvr":0},
-  {"date":"2026-08-17","pkg":"com.levelinfinite.sgameGlobal_in","ad_unit":"91530535_HonorofKings_IN","impressions":18,"clicks":8,"conversions":0,"ecpm":0,"cpc":0,"ctr":0.44444,"ivr":0,"cvr":0},
-  {"date":"2026-08-17","pkg":"com.levelinfinite.sgameGlobal_ph","ad_unit":"91530534_HonorofKings_PH","impressions":2,"clicks":0,"conversions":0,"ecpm":0,"cpc":0,"ctr":0,"ivr":0,"cvr":0},
-  {"date":"2026-08-18","pkg":"com.igg.android.lordsmobile","ad_unit":"91530536_IGG_RU","impressions":33211,"clicks":508,"conversions":20,"ecpm":0.301,"cpc":0.02,"ctr":0.0153,"ivr":0.0006,"cvr":0.03937},
-  {"date":"2026-08-18","pkg":"net.mbc.shahid","ad_unit":"91530537_MBCShahid_SA","impressions":163377,"clicks":43382,"conversions":19,"ecpm":0.052,"cpc":0,"ctr":0.26553,"ivr":0.00012,"cvr":0.00044},
-  {"date":"2026-08-18","pkg":"com.qookkagames.xczyw.gp.hk","ad_unit":"91534913_xczyw_HK","impressions":21925,"clicks":1853,"conversions":2,"ecpm":0.059,"cpc":0.001,"ctr":0.08452,"ivr":0.00009,"cvr":0.00108},
-  {"date":"2026-08-18","pkg":"com.sialiagames.xczyw.gp.tw","ad_unit":"91533906_xczyw_TW","impressions":9249,"clicks":247,"conversions":0,"ecpm":0,"cpc":0,"ctr":0.02671,"ivr":0,"cvr":0},
-  {"date":"2026-08-19","pkg":"com.igg.android.lordsmobile","ad_unit":"91530536_IGG_RU","impressions":40503,"clicks":629,"conversions":23,"ecpm":0.284,"cpc":0.018,"ctr":0.01553,"ivr":0.00057,"cvr":0.03657},
-  {"date":"2026-08-19","pkg":"net.mbc.shahid","ad_unit":"91530537_MBCShahid_SA","impressions":51738,"clicks":9944,"conversions":19,"ecpm":0.165,"cpc":0.001,"ctr":0.1922,"ivr":0.00037,"cvr":0.00191},
-  {"date":"2026-08-19","pkg":"com.qookkagames.xczyw.gp.hk","ad_unit":"91534913_xczyw_HK","impressions":18978,"clicks":1251,"conversions":0,"ecpm":0,"cpc":0,"ctr":0.06592,"ivr":0,"cvr":0},
-  {"date":"2026-08-19","pkg":"com.sialiagames.xczyw.gp.tw","ad_unit":"91533906_xczyw_TW","impressions":8912,"clicks":228,"conversions":2,"ecpm":0.112,"cpc":0.004,"ctr":0.02558,"ivr":0.00022,"cvr":0.00877},
-  {"date":"2026-08-20","pkg":"com.sialiagames.xczyw.gp.tw","ad_unit":"91533906_xczyw_TW","impressions":8620,"clicks":258,"conversions":1,"ecpm":0.058,"cpc":0.002,"ctr":0.02993,"ivr":0.00012,"cvr":0.00388},
-  {"date":"2026-08-20","pkg":"com.qookkagames.xczyw.gp.hk","ad_unit":"91534913_xczyw_HK","impressions":21010,"clicks":2211,"conversions":1,"ecpm":0.031,"cpc":0,"ctr":0.10524,"ivr":0.00005,"cvr":0.00045},
-  {"date":"2026-08-20","pkg":"net.mbc.shahid","ad_unit":"91530537_MBCShahid_SA","impressions":54406,"clicks":7459,"conversions":19,"ecpm":0.157,"cpc":0.001,"ctr":0.1371,"ivr":0.00035,"cvr":0.00255},
-  {"date":"2026-08-20","pkg":"com.igg.android.lordsmobile","ad_unit":"91530536_IGG_RU","impressions":42226,"clicks":669,"conversions":25,"ecpm":0.296,"cpc":0.019,"ctr":0.01584,"ivr":0.00059,"cvr":0.03737},
-  {"date":"2026-08-21","pkg":"com.sialiagames.xczyw.gp.tw","ad_unit":"91533906_xczyw_TW","impressions":8048,"clicks":236,"conversions":0,"ecpm":0,"cpc":0,"ctr":0.02932,"ivr":0,"cvr":0},
-  {"date":"2026-08-21","pkg":"com.qookkagames.xczyw.gp.hk","ad_unit":"91534913_xczyw_HK","impressions":14550,"clicks":1383,"conversions":0,"ecpm":0,"cpc":0,"ctr":0.09505,"ivr":0,"cvr":0},
-  {"date":"2026-08-21","pkg":"net.mbc.shahid","ad_unit":"91530537_MBCShahid_SA","impressions":105591,"clicks":22397,"conversions":19,"ecpm":0.104,"cpc":0,"ctr":0.21211,"ivr":0.00018,"cvr":0.00085},
-  {"date":"2026-08-21","pkg":"com.igg.android.lordsmobile","ad_unit":"91530536_IGG_RU","impressions":39951,"clicks":852,"conversions":30,"ecpm":0.375,"cpc":0.018,"ctr":0.02133,"ivr":0.00075,"cvr":0.03521},
-  {"date":"2026-08-22","pkg":"com.sialiagames.xczyw.gp.tw","ad_unit":"91533906_xczyw_TW","impressions":10089,"clicks":371,"conversions":2,"ecpm":0.099,"cpc":0.003,"ctr":0.03677,"ivr":0.0002,"cvr":0.00539},
-  {"date":"2026-08-22","pkg":"com.qookkagames.xczyw.gp.hk","ad_unit":"91534913_xczyw_HK","impressions":13944,"clicks":1460,"conversions":0,"ecpm":0,"cpc":0,"ctr":0.1047,"ivr":0,"cvr":0},
-  {"date":"2026-08-22","pkg":"net.mbc.shahid","ad_unit":"91530537_MBCShahid_SA","impressions":104031,"clicks":30747,"conversions":19,"ecpm":0.11,"cpc":0,"ctr":0.29556,"ivr":0.00018,"cvr":0.00062},
-  {"date":"2026-08-22","pkg":"com.igg.android.lordsmobile","ad_unit":"91530536_IGG_RU","impressions":33215,"clicks":767,"conversions":54,"ecpm":0.813,"cpc":0.035,"ctr":0.02309,"ivr":0.00163,"cvr":0.0704},
-  {"date":"2026-08-23","pkg":"com.sialiagames.xczyw.gp.tw","ad_unit":"91533906_xczyw_TW","impressions":9577,"clicks":405,"conversions":1,"ecpm":0.052,"cpc":0.001,"ctr":0.04229,"ivr":0.0001,"cvr":0.00247},
-  {"date":"2026-08-23","pkg":"com.qookkagames.xczyw.gp.hk","ad_unit":"91534913_xczyw_HK","impressions":13892,"clicks":1432,"conversions":1,"ecpm":0.047,"cpc":0,"ctr":0.10308,"ivr":0.00007,"cvr":0.0007},
-  {"date":"2026-08-23","pkg":"net.mbc.shahid","ad_unit":"91530537_MBCShahid_SA","impressions":44565,"clicks":11596,"conversions":19,"ecpm":0.256,"cpc":0.001,"ctr":0.2602,"ivr":0.00043,"cvr":0.00164},
-  {"date":"2026-08-23","pkg":"com.igg.android.lordsmobile","ad_unit":"91530536_IGG_RU","impressions":37835,"clicks":1698,"conversions":45,"ecpm":0.595,"cpc":0.013,"ctr":0.04488,"ivr":0.00119,"cvr":0.0265}
-]
diff --git a/index.html b/index.html
index 5602692..814da2c 100644
--- a/index.html
+++ b/index.html
@@ -9,403 +9,180 @@
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            color: #2d3748;
-        }
-        .container {
-            max-width: 1440px;
-            margin: 0 auto;
-            padding: 30px 24px;
-        }
-        .header {
-            text-align: center;
-            padding: 40px 0 35px;
-        }
-        .header h1 {
-            font-size: 28px;
-            font-weight: 700;
-            color: #fff;
-            letter-spacing: -0.5px;
-            margin-bottom: 8px;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        .header p {
-            color: rgba(255,255,255,0.8);
-            font-size: 14px;
+            background: #f7f8fa;
+            color: #1f2933;
+            line-height: 1.5;
         }
+        .container { max-width: 1400px; margin: 0 auto; padding: 24px 20px 48px; }
 
-        /* Summary Cards */
-        .summary-row {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 16px;
-            margin-bottom: 24px;
-        }
-        .summary-card {
-            background: #fff;
-            border-radius: 16px;
-            padding: 20px 24px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-            transition: transform 0.2s, box-shadow 0.2s;
-        }
-        .summary-card:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
-        }
-        .summary-card .label {
-            font-size: 12px;
-            color: #94a3b8;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            font-weight: 600;
-        }
-        .summary-card .value {
-            font-size: 26px;
-            font-weight: 700;
-            color: #1e293b;
-            margin-top: 6px;
-        }
-        .summary-card .sub {
-            font-size: 12px;
-            color: #64748b;
-            margin-top: 4px;
-        }
-
-        /* Controls */
-        .controls {
-            background: #fff;
-            border-radius: 16px;
-            padding: 16px 24px;
-            margin-bottom: 24px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-            display: flex;
-            gap: 20px;
-            flex-wrap: wrap;
-            align-items: center;
-        }
-        .control-group {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .controls label {
-            font-size: 13px;
-            color: #64748b;
-            font-weight: 500;
-        }
-        .controls select {
-            padding: 8px 14px;
-            border: 1.5px solid #e2e8f0;
-            border-radius: 10px;
-            font-size: 13px;
-            background: #f8fafc;
-            cursor: pointer;
-            color: #334155;
-            font-weight: 500;
-            transition: border-color 0.2s, box-shadow 0.2s;
-            outline: none;
-        }
-        .controls select:focus {
-            border-color: #667eea;
-            box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
-        }
-
-        /* Charts */
-        .charts-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
-            margin-bottom: 24px;
-        }
-        .chart-card {
-            background: #fff;
-            border-radius: 16px;
-            padding: 24px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-            transition: transform 0.2s, box-shadow 0.2s;
-        }
-        .chart-card:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
-        }
-        .chart-card h3 {
-            font-size: 14px;
-            color: #475569;
-            margin-bottom: 16px;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .chart-card h3::before {
-            content: '';
-            display: inline-block;
-            width: 4px;
-            height: 16px;
-            border-radius: 2px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
-        }
-        .chart-card canvas {
-            width: 100% !important;
-            height: 240px !important;
-        }
-
-        /* Table */
-        .table-section {
-            background: #fff;
-            border-radius: 16px;
-            padding: 24px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-            overflow: hidden;
-        }
-        .table-section h2 {
-            font-size: 16px;
-            color: #1e293b;
-            margin-bottom: 16px;
-            font-weight: 700;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .table-section h2::before {
-            content: '';
-            display: inline-block;
-            width: 4px;
-            height: 18px;
-            border-radius: 2px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
-        }
-        .table-wrapper {
-            overflow-x: auto;
-            border-radius: 12px;
-            border: 1px solid #e2e8f0;
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 13px;
-        }
-        thead {
-            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
-        }
-        th {
-            padding: 12px 14px;
-            text-align: left;
-            font-weight: 600;
-            color: #475569;
-            white-space: nowrap;
-            font-size: 12px;
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-            border-bottom: 2px solid #e2e8f0;
-        }
-        td {
-            padding: 11px 14px;
-            border-bottom: 1px solid #f1f5f9;
-            white-space: nowrap;
-            color: #334155;
-        }
-        tr:last-child td {
-            border-bottom: none;
-        }
-        tr:hover td {
-            background: #f8fafc;
-        }
-        .pkg-tag {
-            display: inline-block;
-            padding: 3px 10px;
-            border-radius: 20px;
-            font-size: 11px;
-            font-weight: 500;
-            background: linear-gradient(135deg, #eef2ff, #e0e7ff);
-            color: #4338ca;
-            border: 1px solid #c7d2fe;
-        }
-        .num-cell {
-            font-variant-numeric: tabular-nums;
-            font-family: 'SF Mono', 'Fira Code', monospace;
-            font-size: 12px;
-        }
-
-        .updated-time {
-            text-align: center;
-            color: rgba(255,255,255,0.7);
-            font-size: 12px;
-            margin-top: 24px;
-            padding-bottom: 20px;
-        }
+        .header { padding: 12px 0 20px; }
+        .header h1 { font-size: 22px; font-weight: 700; color: #111827; }
+        .header p { color: #6b7280; font-size: 13px; margin-top: 4px; }
 
         /* Tabs */
         .tabs {
             display: flex;
-            gap: 8px;
+            gap: 4px;
+            border-bottom: 1px solid #e5e7eb;
             margin-bottom: 24px;
-            background: rgba(255,255,255,0.15);
-            padding: 6px;
-            border-radius: 14px;
-            backdrop-filter: blur(10px);
-            width: fit-content;
-            margin-left: auto;
-            margin-right: auto;
         }
         .tab-btn {
-            padding: 10px 28px;
+            padding: 10px 20px;
             border: none;
             background: transparent;
-            color: rgba(255,255,255,0.85);
+            color: #6b7280;
             font-size: 14px;
-            font-weight: 600;
-            border-radius: 10px;
+            font-weight: 500;
             cursor: pointer;
-            transition: all 0.2s;
-        }
-        .tab-btn.active {
-            background: #fff;
-            color: #667eea;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            border-bottom: 2px solid transparent;
+            margin-bottom: -1px;
+            transition: color 0.15s, border-color 0.15s;
         }
+        .tab-btn:hover { color: #111827; }
+        .tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
         .tab-panel { display: none; }
         .tab-panel.active { display: block; }
 
-        /* Order status badges */
-        .status-badge {
-            display: inline-block;
-            padding: 3px 12px;
-            border-radius: 20px;
-            font-size: 11px;
-            font-weight: 600;
-        }
-        .status-active {
-            background: #dcfce7;
-            color: #16a34a;
-            border: 1px solid #86efac;
-        }
-        .status-pause {
-            background: #fef3c7;
-            color: #d97706;
-            border: 1px solid #fcd34d;
-        }
-        .pay-badge {
-            display: inline-block;
-            padding: 2px 8px;
-            border-radius: 6px;
-            font-size: 11px;
-            font-weight: 600;
-            background: #f1f5f9;
-            color: #475569;
-        }
-        .channel-chip {
-            display: inline-block;
-            padding: 2px 8px;
-            margin: 2px;
-            border-radius: 6px;
-            font-size: 10px;
-            background: #eef2ff;
-            color: #4338ca;
-            border: 1px solid #c7d2fe;
-        }
-        .no-channel {
-            color: #cbd5e1;
-            font-size: 12px;
-        }
-        .order-stats {
+        /* Summary cards */
+        .summary-row {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-            gap: 16px;
-            margin-bottom: 24px;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 12px;
+            margin-bottom: 20px;
         }
+        .card {
+            background: #fff;
+            border: 1px solid #e5e7eb;
+            border-radius: 10px;
+            padding: 16px 18px;
+        }
+        .card .label { font-size: 12px; color: #6b7280; font-weight: 500; }
+        .card .value { font-size: 22px; font-weight: 700; color: #111827; margin-top: 4px; }
+        .card .sub { font-size: 11px; color: #9ca3af; margin-top: 2px; }
 
-        @media (max-width: 900px) {
-            .charts-grid { grid-template-columns: 1fr; }
-            .summary-row { grid-template-columns: repeat(2, 1fr); }
-            .container { padding: 16px; }
-            .header h1 { font-size: 22px; }
+        /* Section */
+        .section {
+            background: #fff;
+            border: 1px solid #e5e7eb;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
         }
-        @media (max-width: 500px) {
-            .summary-row { grid-template-columns: 1fr; }
+        .section h2 { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 14px; }
+        .section .hint { font-size: 12px; color: #9ca3af; margin: -8px 0 14px; }
+
+        /* Controls */
+        .controls { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
+        .control-group { display: flex; align-items: center; gap: 6px; }
+        .controls label { font-size: 13px; color: #6b7280; }
+        .controls select {
+            padding: 6px 10px;
+            border: 1px solid #d1d5db;
+            border-radius: 8px;
+            font-size: 13px;
+            background: #fff;
+            color: #374151;
+            outline: none;
+            cursor: pointer;
+        }
+        .controls select:focus { border-color: #2563eb; }
+
+        /* Table */
+        .table-wrapper { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
+        table { width: 100%; border-collapse: collapse; font-size: 13px; }
+        thead { background: #f9fafb; }
+        th {
+            padding: 10px 12px; text-align: left; font-weight: 600; color: #6b7280;
+            white-space: nowrap; font-size: 12px; border-bottom: 1px solid #e5e7eb;
+        }
+        td { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; white-space: nowrap; color: #374151; }
+        tr:last-child td { border-bottom: none; }
+        tr:hover td { background: #f9fafb; }
+        .num { font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Menlo', monospace; font-size: 12px; }
+
+        .tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; background: #eff6ff; color: #2563eb; }
+        .badge-active { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
+        .badge-pause  { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
+        .badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
+        .muted { color: #d1d5db; }
+
+        .chart-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; margin-bottom: 20px; }
+        .chart-box h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: #111827; }
+        .chart-box canvas { width: 100% !important; height: 280px !important; }
+
+        .updated { color: #9ca3af; font-size: 12px; margin-top: 8px; }
+        .empty { text-align: center; color: #9ca3af; padding: 30px; font-size: 13px; }
+
+        @media (max-width: 720px) {
+            .summary-row { grid-template-columns: repeat(2, 1fr); }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
-            <h1>Moboost 广告投放数据报告</h1>
-            <p>数据概览与趋势分析</p>
+            <h1>Moboost 广告投放报告</h1>
+            <p>投放数据 · 订单信息 · Campaign ID 明细</p>
         </div>
 
         <div class="tabs">
             <button class="tab-btn active" data-tab="performance">投放数据</button>
             <button class="tab-btn" data-tab="orders">订单信息</button>
+            <button class="tab-btn" data-tab="campaigns">Campaign ID 明细</button>
         </div>
 
+        <!-- ============ Tab 1: 投放数据 ============ -->
         <div class="tab-panel active" id="tab-performance">
-        <div class="summary-row" id="summaryRow"></div>
+            <div class="summary-row" id="perfSummary"></div>
 
-        <div class="controls">
-            <div class="control-group">
-                <label>广告主</label>
-                <select id="pkgFilter">
-                    <option value="all">全部</option>
-                </select>
+            <div class="section">
+                <div class="controls">
+                    <div class="control-group">
+                        <label>渠道</label>
+                        <select id="perfChannel"><option value="all">全部</option></select>
+                    </div>
+                    <div class="control-group">
+                        <label>产品</label>
+                        <select id="perfProduct"><option value="all">全部</option></select>
+                    </div>
+                    <div class="control-group">
+                        <label>日期</label>
+                        <select id="perfDate"><option value="all">全部</option></select>
+                    </div>
+                </div>
+                <div class="table-wrapper">
+                    <table id="perfTable">
+                        <thead>
+                            <tr>
+                                <th>日期</th>
+                                <th>渠道</th>
+                                <th>产品</th>
+                                <th>Offer Name</th>
+                                <th>国家</th>
+                                <th>展示</th>
+                                <th>点击</th>
+                                <th>转化</th>
+                                <th>CTR</th>
+                                <th>CVR</th>
+                                <th>Spend</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
+                </div>
             </div>
-            <div class="control-group">
-                <label>日期范围</label>
-                <select id="dateFilter">
-                    <option value="all">全部日期</option>
-                </select>
+
+            <div class="chart-box">
+                <h2>各 Campaign 展示量对比</h2>
+                <canvas id="chartImp"></canvas>
             </div>
         </div>
 
-        <div class="charts-grid">
-            <div class="chart-card">
-                <h3>展示量趋势</h3>
-                <canvas id="chartImpressions"></canvas>
-            </div>
-            <div class="chart-card">
-                <h3>点击量趋势</h3>
-                <canvas id="chartClicks"></canvas>
-            </div>
-            <div class="chart-card">
-                <h3>转化量趋势</h3>
-                <canvas id="chartConversions"></canvas>
-            </div>
-            <div class="chart-card">
-                <h3>eCPM 趋势</h3>
-                <canvas id="chartEcpm"></canvas>
-            </div>
-        </div>
-
-        <div class="table-section">
-            <h2>明细数据</h2>
-            <div class="table-wrapper">
-                <table id="dataTable">
-                    <thead>
-                        <tr>
-                            <th>日期</th>
-                            <th>广告单元</th>
-                            <th>Pkg</th>
-                            <th>展示</th>
-                            <th>点击</th>
-                            <th>转化</th>
-                            <th>eCPM</th>
-                            <th>CPC</th>
-                            <th>CTR</th>
-                            <th>IVR</th>
-                            <th>CVR</th>
-                        </tr>
-                    </thead>
-                    <tbody></tbody>
-                </table>
-            </div>
-        </div>
-        </div><!-- /tab-performance -->
-
+        <!-- ============ Tab 2: 订单信息 ============ -->
         <div class="tab-panel" id="tab-orders">
-            <div class="order-stats" id="orderStats"></div>
+            <div class="summary-row" id="orderSummary"></div>
 
-            <!-- 模块1：产品订单基础信息 -->
-            <div class="table-section" style="margin-bottom:24px;">
+            <div class="section">
                 <h2>产品订单基础信息</h2>
                 <div class="table-wrapper">
                     <table id="orderTable">
@@ -427,33 +204,30 @@
                 </div>
             </div>
 
-            <!-- 模块2：渠道投放矩阵 -->
-            <div class="table-section">
+            <div class="section">
                 <h2>渠道投放矩阵（渠道 × 产品）</h2>
-                <p style="font-size:12px;color:#94a3b8;margin:-8px 0 14px;">
-                    <span class="status-badge status-active" style="padding:1px 8px;">Active</span> 投放中　
-                    <span class="status-badge status-pause" style="padding:1px 8px;">Pause</span> 投过已停　
+                <p class="hint">
+                    <span class="badge badge-active">Active</span> 投放中　
+                    <span class="badge badge-pause">Pause</span> 投过已停　
                     空白 = 未投放
                 </p>
                 <div class="table-wrapper">
-                    <table id="matrixTable">
-                        <thead></thead>
-                        <tbody></tbody>
-                    </table>
+                    <table id="matrixTable"><thead></thead><tbody></tbody></table>
                 </div>
             </div>
+        </div>
 
-            <!-- 模块3：Campaign ID 明细 -->
-            <div class="table-section" style="margin-top:24px;">
-                <h2>Campaign ID 明细（唯一识别值）</h2>
-                <div class="controls" style="box-shadow:none;padding:0 0 14px;background:transparent;">
+        <!-- ============ Tab 3: Campaign ID 明细 ============ -->
+        <div class="tab-panel" id="tab-campaigns">
+            <div class="section">
+                <div class="controls">
                     <div class="control-group">
                         <label>产品</label>
-                        <select id="campProductFilter"><option value="all">全部</option></select>
+                        <select id="campProduct"><option value="all">全部</option></select>
                     </div>
                     <div class="control-group">
                         <label>渠道</label>
-                        <select id="campChannelFilter"><option value="all">全部</option></select>
+                        <select id="campChannel"><option value="all">全部</option></select>
                     </div>
                 </div>
                 <div class="table-wrapper">
@@ -471,50 +245,32 @@
                     </table>
                 </div>
             </div>
-        </div><!-- /tab-orders -->
+        </div>
 
-        <div class="updated-time" id="updatedTime"></div>
+        <div class="updated" id="updated"></div>
     </div>
 
     <script>
-    const COLORS = [
-        '#667eea','#f56565','#48bb78','#ed8936','#9f7aea',
-        '#38b2ac','#e53e3e','#4299e1','#d69e2e','#ed64a6'
-    ];
+    let perfData = [], orderData = [], campaignData = [];
+    let impChart = null;
 
-    let rawData = [];
-    let orderData = [];
-    let campaignData = [];
-    let charts = {};
-
-    async function loadData() {
+    async function load() {
         try {
-            const [dResp, oResp, cResp] = await Promise.all([
-                fetch('data.json?' + Date.now()),
-                fetch('orders.json?' + Date.now()),
-                fetch('campaigns.json?' + Date.now())
+            const [p, o, c] = await Promise.all([
+                fetch('mtg_data.json?' + Date.now()).then(r => r.json()).catch(() => []),
+                fetch('orders.json?' + Date.now()).then(r => r.json()).catch(() => []),
+                fetch('campaigns.json?' + Date.now()).then(r => r.json()).catch(() => [])
             ]);
-            rawData = await dResp.json();
-            orderData = await oResp.json();
-            campaignData = await cResp.json();
-            init();
-        } catch(e) {
-            console.error('Failed to load data:', e);
-        }
+            perfData = p; orderData = o; campaignData = c;
+            initTabs();
+            renderPerformance();
+            renderOrders();
+            renderCampaigns();
+            document.getElementById('updated').textContent = '最后刷新：' + new Date().toLocaleString('zh-CN');
+        } catch (e) { console.error(e); }
     }
 
-    function init() {
-        populateFilters();
-        renderAll();
-        renderOrders();
-        renderCampaigns();
-        setupTabs();
-        document.getElementById('pkgFilter').addEventListener('change', renderAll);
-        document.getElementById('dateFilter').addEventListener('change', renderAll);
-        document.getElementById('updatedTime').textContent = '最后刷新：' + new Date().toLocaleString('zh-CN');
-    }
-
-    function setupTabs() {
+    function initTabs() {
         document.querySelectorAll('.tab-btn').forEach(btn => {
             btn.addEventListener('click', () => {
                 document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
@@ -525,307 +281,184 @@
         });
     }
 
+    /* ---------- Tab 1: 投放数据 ---------- */
+    function renderPerformance() {
+        // filters
+        const chans = [...new Set(perfData.map(d => d.channel))];
+        const prods = [...new Set(perfData.map(d => d.product))];
+        const dates = [...new Set(perfData.map(d => d.date))].sort();
+        fillSelect('perfChannel', chans);
+        fillSelect('perfProduct', prods);
+        fillSelect('perfDate', dates);
+        ['perfChannel', 'perfProduct', 'perfDate'].forEach(id =>
+            document.getElementById(id).addEventListener('change', drawPerf));
+        drawPerf();
+    }
+
+    function getPerfFiltered() {
+        let d = perfData;
+        const ch = document.getElementById('perfChannel').value;
+        const pr = document.getElementById('perfProduct').value;
+        const dt = document.getElementById('perfDate').value;
+        if (ch !== 'all') d = d.filter(x => x.channel === ch);
+        if (pr !== 'all') d = d.filter(x => x.product === pr);
+        if (dt !== 'all') d = d.filter(x => x.date === dt);
+        return d;
+    }
+
+    function drawPerf() {
+        const data = getPerfFiltered();
+        // summary
+        const imp = data.reduce((s, d) => s + d.impression, 0);
+        const clk = data.reduce((s, d) => s + d.clicks, 0);
+        const conv = data.reduce((s, d) => s + d.conversions, 0);
+        const spend = data.reduce((s, d) => s + d.spend, 0);
+        const ctr = imp ? clk / imp : 0;
+        document.getElementById('perfSummary').innerHTML = `
+            <div class="card"><div class="label">总展示</div><div class="value">${imp.toLocaleString()}</div><div class="sub">${data.length} 条 campaign</div></div>
+            <div class="card"><div class="label">总点击</div><div class="value">${clk.toLocaleString()}</div><div class="sub">CTR ${(ctr*100).toFixed(2)}%</div></div>
+            <div class="card"><div class="label">总转化</div><div class="value">${conv.toLocaleString()}</div><div class="sub">CVR ${(clk?conv/clk*100:0).toFixed(2)}%</div></div>
+            <div class="card"><div class="label">总花费</div><div class="value">$${spend.toFixed(2)}</div><div class="sub">Spend</div></div>
+        `;
+
+        // table
+        const tbody = document.querySelector('#perfTable tbody');
+        if (!data.length) {
+            tbody.innerHTML = `<tr><td colspan="11" class="empty">暂无数据</td></tr>`;
+        } else {
+            const sorted = [...data].sort((a, b) => b.impression - a.impression);
+            tbody.innerHTML = sorted.map(d => `
+                <tr>
+                    <td>${d.date}</td>
+                    <td><span class="tag">${d.channel}</span></td>
+                    <td style="font-weight:500">${d.product}</td>
+                    <td class="num" style="font-size:11px">${d.offer_name}</td>
+                    <td>${d.location}</td>
+                    <td class="num">${d.impression.toLocaleString()}</td>
+                    <td class="num">${d.clicks.toLocaleString()}</td>
+                    <td class="num">${d.conversions}</td>
+                    <td class="num">${(d.ctr*100).toFixed(2)}%</td>
+                    <td class="num">${(d.cvr*100).toFixed(2)}%</td>
+                    <td class="num">$${d.spend.toFixed(2)}</td>
+                </tr>
+            `).join('');
+        }
+
+        // chart
+        const sorted = [...data].sort((a, b) => b.impression - a.impression);
+        const labels = sorted.map(d => d.offer_name);
+        const vals = sorted.map(d => d.impression);
+        if (impChart) impChart.destroy();
+        impChart = new Chart(document.getElementById('chartImp'), {
+            type: 'bar',
+            data: {
+                labels,
+                datasets: [{ label: '展示量', data: vals, backgroundColor: '#3b82f6', borderRadius: 4 }]
+            },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: { ticks: { font: { size: 10 }, color: '#9ca3af' }, grid: { display: false } },
+                    y: { beginAtZero: true, ticks: { color: '#9ca3af' }, grid: { color: '#f3f4f6' } }
+                }
+            }
+        });
+    }
+
+    /* ---------- Tab 2: 订单信息 ---------- */
     function renderOrders() {
-        // Stats
         const total = orderData.length;
         const active = orderData.filter(o => o.status === 'Active').length;
         const products = new Set(orderData.map(o => o.product)).size;
-        const allChannels = new Set();
-        orderData.forEach(o => {
-            (o.agency_channels || []).forEach(c => allChannels.add(c));
-            (o.self_channels || []).forEach(c => allChannels.add(c));
-        });
-
-        document.getElementById('orderStats').innerHTML = `
-            <div class="summary-card">
-                <div class="label">订单条目</div>
-                <div class="value">${total}</div>
-                <div class="sub">${products} 个独立产品</div>
-            </div>
-            <div class="summary-card">
-                <div class="label">在投中 (Active)</div>
-                <div class="value" style="color:#16a34a">${active}</div>
-                <div class="sub">${total - active} 个 Pause</div>
-            </div>
-            <div class="summary-card">
-                <div class="label">已铺投放渠道</div>
-                <div class="value">${allChannels.size}</div>
-                <div class="sub">媒体/代投渠道</div>
-            </div>
-            <div class="summary-card">
-                <div class="label">MMP 归因</div>
-                <div class="value" style="font-size:20px">AppsFlyer</div>
-                <div class="sub">全线统一</div>
-            </div>
+        const chSet = new Set();
+        orderData.forEach(o => { (o.agency_channels||[]).forEach(c => chSet.add(c)); (o.self_channels||[]).forEach(c => chSet.add(c)); });
+        document.getElementById('orderSummary').innerHTML = `
+            <div class="card"><div class="label">订单条目</div><div class="value">${total}</div><div class="sub">${products} 个产品</div></div>
+            <div class="card"><div class="label">在投 Active</div><div class="value" style="color:#059669">${active}</div><div class="sub">${total-active} 个 Pause</div></div>
+            <div class="card"><div class="label">投放渠道</div><div class="value">${chSet.size}</div><div class="sub">媒体渠道</div></div>
+            <div class="card"><div class="label">MMP</div><div class="value" style="font-size:16px">AppsFlyer</div><div class="sub">统一归因</div></div>
         `;
 
-        // Table
         const tbody = document.querySelector('#orderTable tbody');
         tbody.innerHTML = orderData.map(o => {
-            const statusClass = o.status === 'Active' ? 'status-active' : 'status-pause';
+            const cls = o.status === 'Active' ? 'badge-active' : 'badge-pause';
             return `
                 <tr>
-                    <td style="font-weight:600">${o.product}</td>
-                    <td class="num-cell" style="font-size:11px">${o.pkg}</td>
+                    <td style="font-weight:500">${o.product}</td>
+                    <td class="num" style="font-size:11px">${o.pkg}</td>
                     <td>${o.platform}</td>
                     <td>${o.geo}</td>
-                    <td><span class="pay-badge">${o.pay_mode}</span></td>
-                    <td class="num-cell">${o.price}</td>
-                    <td class="num-cell">${o.budget}</td>
-                    <td><span class="status-badge ${statusClass}">${o.status}</span></td>
+                    <td><span class="tag">${o.pay_mode}</span></td>
+                    <td class="num">${o.price}</td>
+                    <td class="num">${o.budget}</td>
+                    <td><span class="badge ${cls}">${o.status}</span></td>
                     <td>${o.mmp}</td>
-                </tr>
-            `;
+                </tr>`;
         }).join('');
 
         renderMatrix();
     }
 
     function renderMatrix() {
-        // 列 = 产品（按 pkg 区分，同名产品用地区区分显示）；行 = 渠道
-        // 每个订单条目是一列，代投+自投渠道合并
         const cols = orderData.map(o => ({
-            key: o.pkg,
-            label: o.product,
-            sub: o.geo,
-            status: o.status,
+            label: o.product, sub: o.geo, status: o.status,
             channels: new Set([...(o.agency_channels||[]), ...(o.self_channels||[])])
         }));
-
-        // 收集所有渠道（代投+自投合并去重，保持出现顺序）
         const channels = [];
-        orderData.forEach(o => {
-            [...(o.agency_channels||[]), ...(o.self_channels||[])].forEach(c => {
-                if (!channels.includes(c)) channels.push(c);
-            });
-        });
+        orderData.forEach(o => [...(o.agency_channels||[]), ...(o.self_channels||[])].forEach(c => { if (!channels.includes(c)) channels.push(c); }));
 
-        // 表头
-        const thead = document.querySelector('#matrixTable thead');
-        thead.innerHTML = `
+        document.querySelector('#matrixTable thead').innerHTML = `
             <tr>
-                <th style="position:sticky;left:0;background:#f1f5f9;z-index:2;">渠道 \\ 产品</th>
-                ${cols.map(c => `<th style="text-align:center;min-width:90px;">
-                    <div>${c.label}</div>
-                    <div style="font-weight:400;font-size:10px;color:#94a3b8;">${c.sub}</div>
-                </th>`).join('')}
-            </tr>
-        `;
-
-        // 单元格生成
-        const cell = (col, channel) => {
-            if (!col.channels.has(channel)) return '<td></td>';
-            const cls = col.status === 'Active' ? 'status-active' : 'status-pause';
-            return `<td style="text-align:center;"><span class="status-badge ${cls}" style="padding:2px 8px;font-size:10px;">${col.status}</span></td>`;
+                <th style="position:sticky;left:0;background:#f9fafb;z-index:2;">渠道 \\ 产品</th>
+                ${cols.map(c => `<th style="text-align:center;min-width:88px;"><div>${c.label}</div><div style="font-weight:400;font-size:10px;color:#9ca3af;">${c.sub}</div></th>`).join('')}
+            </tr>`;
+        const cell = (col, ch) => {
+            if (!col.channels.has(ch)) return '<td></td>';
+            const cls = col.status === 'Active' ? 'badge-active' : 'badge-pause';
+            return `<td style="text-align:center;"><span class="badge ${cls}">${col.status}</span></td>`;
         };
-
-        const tbody = document.querySelector('#matrixTable tbody');
-        tbody.innerHTML = channels.map(ch => `
+        document.querySelector('#matrixTable tbody').innerHTML = channels.map(ch => `
             <tr>
                 <td style="position:sticky;left:0;background:#fff;font-weight:500;">${ch}</td>
                 ${cols.map(col => cell(col, ch)).join('')}
-            </tr>
-        `).join('');
+            </tr>`).join('');
     }
 
+    /* ---------- Tab 3: Campaign ID 明细 ---------- */
     function renderCampaigns() {
-        // 填充筛选器
         const prods = [...new Set(campaignData.map(c => c.product))].sort();
         const chans = [...new Set(campaignData.map(c => c.channel))].sort();
-        const pf = document.getElementById('campProductFilter');
-        const cf = document.getElementById('campChannelFilter');
-        prods.forEach(p => { const o=document.createElement('option'); o.value=p; o.textContent=p; pf.appendChild(o); });
-        chans.forEach(c => { const o=document.createElement('option'); o.value=c; o.textContent=c; cf.appendChild(o); });
-        pf.addEventListener('change', drawCampaignRows);
-        cf.addEventListener('change', drawCampaignRows);
-        drawCampaignRows();
+        fillSelect('campProduct', prods);
+        fillSelect('campChannel', chans);
+        document.getElementById('campProduct').addEventListener('change', drawCampaigns);
+        document.getElementById('campChannel').addEventListener('change', drawCampaigns);
+        drawCampaigns();
     }
 
-    function drawCampaignRows() {
-        const pf = document.getElementById('campProductFilter').value;
-        const cf = document.getElementById('campChannelFilter').value;
+    function drawCampaigns() {
+        const pf = document.getElementById('campProduct').value;
+        const cf = document.getElementById('campChannel').value;
         let data = campaignData;
         if (pf !== 'all') data = data.filter(c => c.product === pf);
         if (cf !== 'all') data = data.filter(c => c.channel === cf);
-
-        const tbody = document.querySelector('#campaignTable tbody');
-        tbody.innerHTML = data.map(c => `
+        document.querySelector('#campaignTable tbody').innerHTML = data.map(c => `
             <tr>
-                <td class="num-cell" style="font-weight:600;color:#4338ca;">${c.campid}</td>
+                <td class="num" style="font-weight:600;color:#2563eb;">${c.campid}</td>
                 <td style="font-weight:500">${c.product}</td>
-                <td class="num-cell" style="font-size:11px">${c.pkg}</td>
-                <td><span class="pkg-tag">${c.geo}</span></td>
+                <td class="num" style="font-size:11px">${c.pkg}</td>
+                <td><span class="tag">${c.geo}</span></td>
                 <td>${c.channel}</td>
-            </tr>
-        `).join('');
+            </tr>`).join('');
     }
 
-    function populateFilters() {
-        const pkgs = [...new Set(rawData.map(d => d.pkg))];
-        const sel = document.getElementById('pkgFilter');
-        pkgs.forEach(p => {
-            const opt = document.createElement('option');
-            opt.value = p;
-            opt.textContent = p.split('.').pop();
-            sel.appendChild(opt);
-        });
-
-        const dates = [...new Set(rawData.map(d => d.date))].sort();
-        const dateSel = document.getElementById('dateFilter');
-        dates.forEach(d => {
-            const opt = document.createElement('option');
-            opt.value = d;
-            opt.textContent = d.slice(5);
-            dateSel.appendChild(opt);
-        });
+    /* ---------- helpers ---------- */
+    function fillSelect(id, items) {
+        const sel = document.getElementById(id);
+        items.forEach(v => { const o = document.createElement('option'); o.value = v; o.textContent = v; sel.appendChild(o); });
     }
 
-    function getFilteredData() {
-        let data = rawData;
-        const pkg = document.getElementById('pkgFilter').value;
-        const date = document.getElementById('dateFilter').value;
-        if (pkg !== 'all') data = data.filter(d => d.pkg === pkg);
-        if (date !== 'all') data = data.filter(d => d.date === date);
-        return data;
-    }
-
-    function renderAll() {
-        const data = getFilteredData();
-        renderSummary(data);
-        renderCharts();
-        renderTable(data);
-    }
-
-    function renderSummary(data) {
-        const totalImp = data.reduce((s, d) => s + d.impressions, 0);
-        const totalClk = data.reduce((s, d) => s + d.clicks, 0);
-        const totalConv = data.reduce((s, d) => s + d.conversions, 0);
-        const avgEcpm = data.length ? (data.reduce((s, d) => s + d.ecpm, 0) / data.length) : 0;
-        const avgCtr = data.length ? (data.reduce((s, d) => s + d.ctr, 0) / data.length) : 0;
-
-        document.getElementById('summaryRow').innerHTML = `
-            <div class="summary-card">
-                <div class="label">总展示</div>
-                <div class="value">${totalImp.toLocaleString()}</div>
-                <div class="sub">${data.length} 条记录</div>
-            </div>
-            <div class="summary-card">
-                <div class="label">总点击</div>
-                <div class="value">${totalClk.toLocaleString()}</div>
-                <div class="sub">整体 CTR ${(totalClk/Math.max(totalImp,1)*100).toFixed(2)}%</div>
-            </div>
-            <div class="summary-card">
-                <div class="label">总转化</div>
-                <div class="value">${totalConv.toLocaleString()}</div>
-                <div class="sub">整体 CVR ${(totalConv/Math.max(totalClk,1)*100).toFixed(2)}%</div>
-            </div>
-            <div class="summary-card">
-                <div class="label">平均 eCPM</div>
-                <div class="value">${avgEcpm.toFixed(3)}</div>
-                <div class="sub">均值</div>
-            </div>
-            <div class="summary-card">
-                <div class="label">平均 CTR</div>
-                <div class="value">${(avgCtr*100).toFixed(2)}%</div>
-                <div class="sub">均值</div>
-            </div>
-        `;
-    }
-
-    function renderCharts() {
-        const pkg = document.getElementById('pkgFilter').value;
-        const chartData = pkg === 'all' ? rawData : rawData.filter(d => d.pkg === pkg);
-        const dates = [...new Set(chartData.map(d => d.date))].sort();
-        const pkgs = [...new Set(chartData.map(d => d.pkg))];
-
-        renderChart('chartImpressions', dates, pkgs, chartData, 'impressions');
-        renderChart('chartClicks', dates, pkgs, chartData, 'clicks');
-        renderChart('chartConversions', dates, pkgs, chartData, 'conversions');
-        renderChart('chartEcpm', dates, pkgs, chartData, 'ecpm');
-    }
-
-    function renderChart(canvasId, dates, pkgs, data, metric) {
-        if (charts[canvasId]) charts[canvasId].destroy();
-
-        const datasets = pkgs.map((pkg, i) => {
-            const values = dates.map(date => {
-                const rows = data.filter(d => d.date === date && d.pkg === pkg);
-                if (rows.length === 0) return null;
-                return rows.reduce((sum, r) => sum + (r[metric] || 0), 0);
-            });
-            return {
-                label: pkg.split('.').pop(),
-                data: values,
-                borderColor: COLORS[i % COLORS.length],
-                backgroundColor: COLORS[i % COLORS.length] + '15',
-                borderWidth: 2.5,
-                pointRadius: 4,
-                pointBackgroundColor: '#fff',
-                pointBorderWidth: 2,
-                pointHoverRadius: 6,
-                tension: 0.4,
-                fill: true
-            };
-        });
-
-        const ctx = document.getElementById(canvasId).getContext('2d');
-        charts[canvasId] = new Chart(ctx, {
-            type: 'line',
-            data: { labels: dates.map(d => d.slice(5)), datasets },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                interaction: { mode: 'index', intersect: false },
-                plugins: {
-                    legend: {
-                        position: 'bottom',
-                        labels: { boxWidth: 10, padding: 15, font: { size: 11 }, usePointStyle: true }
-                    },
-                    tooltip: {
-                        backgroundColor: 'rgba(30,41,59,0.95)',
-                        titleFont: { size: 12 },
-                        bodyFont: { size: 12 },
-                        padding: 12,
-                        cornerRadius: 8,
-                        displayColors: true
-                    }
-                },
-                scales: {
-                    x: {
-                        grid: { display: false },
-                        ticks: { font: { size: 11 }, color: '#94a3b8' }
-                    },
-                    y: {
-                        beginAtZero: true,
-                        grid: { color: '#f1f5f9', drawBorder: false },
-                        ticks: { font: { size: 11 }, color: '#94a3b8' }
-                    }
-                }
-            }
-        });
-    }
-
-    function renderTable(data) {
-        const sorted = [...data].sort((a, b) => b.date.localeCompare(a.date) || a.pkg.localeCompare(b.pkg));
-        const tbody = document.querySelector('#dataTable tbody');
-        tbody.innerHTML = sorted.map(d => `
-            <tr>
-                <td>${d.date.slice(5)}</td>
-                <td style="font-weight:500">${d.ad_unit}</td>
-                <td><span class="pkg-tag">${d.pkg.split('.').pop()}</span></td>
-                <td class="num-cell">${d.impressions.toLocaleString()}</td>
-                <td class="num-cell">${d.clicks.toLocaleString()}</td>
-                <td class="num-cell">${d.conversions}</td>
-                <td class="num-cell">${d.ecpm.toFixed(3)}</td>
-                <td class="num-cell">${d.cpc.toFixed(3)}</td>
-                <td class="num-cell">${(d.ctr * 100).toFixed(2)}%</td>
-                <td class="num-cell">${(d.ivr * 100).toFixed(3)}%</td>
-                <td class="num-cell">${(d.cvr * 100).toFixed(2)}%</td>
-            </tr>
-        `).join('');
-    }
-
-    loadData();
+    load();
     </script>
 </body>
 </html>
diff --git a/mtg_data.json b/mtg_data.json
new file mode 100644
index 0000000..5a5b0bd
--- /dev/null
+++ b/mtg_data.json
@@ -0,0 +1,98 @@
+[
+  {
+    "date": "2026-09-06",
+    "channel": "Mintegral",
+    "campid": "91534913",
+    "offer_name": "91534913_xczyw_HK",
+    "product": "灵犀互动",
+    "pkg": "com.qookkagames.xczyw.gp.hk",
+    "location": "HK",
+    "bid_type": "",
+    "impression": 30331,
+    "clicks": 6220,
+    "conversions": 8,
+    "ctr": 0.20507,
+    "cvr": 0.00128,
+    "spend": 8.0
+  },
+  {
+    "date": "2026-09-06",
+    "channel": "Mintegral",
+    "campid": "91533906",
+    "offer_name": "91533906_xczyw_TW",
+    "product": "灵犀互动",
+    "pkg": "com.sialiagames.xczyw.gp.tw",
+    "location": "TW",
+    "bid_type": "",
+    "impression": 19127,
+    "clicks": 1796,
+    "conversions": 6,
+    "ctr": 0.09389,
+    "cvr": 0.00334,
+    "spend": 6.0
+  },
+  {
+    "date": "2026-09-06",
+    "channel": "Mintegral",
+    "campid": "91530537",
+    "offer_name": "91530537_MBCShahid_SA",
+    "product": "Shahid",
+    "pkg": "net.mbc.shahid",
+    "location": "SA",
+    "bid_type": "",
+    "impression": 14,
+    "clicks": 0,
+    "conversions": 0,
+    "ctr": 0.0,
+    "cvr": 0.0,
+    "spend": 0.0
+  },
+  {
+    "date": "2026-09-06",
+    "channel": "Mintegral",
+    "campid": "91551606",
+    "offer_name": "91551606_ZombieWaves_US",
+    "product": "Zombie",
+    "pkg": "com.ddup.zombiewaves.zw",
+    "location": "US",
+    "bid_type": "",
+    "impression": 6,
+    "clicks": 0,
+    "conversions": 0,
+    "ctr": 0.0,
+    "cvr": 0.0,
+    "spend": 0.0
+  },
+  {
+    "date": "2026-09-06",
+    "channel": "Mintegral",
+    "campid": "91530535",
+    "offer_name": "91530535_HonorofKings_IN",
+    "product": "Honor of Kings",
+    "pkg": "com.levelinfinite.sgameGlobal",
+    "location": "IN",
+    "bid_type": "",
+    "impression": 3,
+    "clicks": 0,
+    "conversions": 0,
+    "ctr": 0.0,
+    "cvr": 0.0,
+    "spend": 0.0
+  },
+  {
+    "date": "2026-09-06",
+    "channel": "Mintegral",
+    "campid": "91530547",
+    "offer_name": "91530547_Magalu_BR",
+    "product": "Magalu_BR (Android)",
+    "pkg": "com.luizalabs.mlapp",
+    "location": "BR",
+    "bid_type": "",
+    "impression": 2,
+    "clicks": 0,
+    "conversions": 0,
+    "ctr": 0.0,
+    "cvr": 0.0,
+    "spend": 0.0
+  }
+]
\ No newline at end of file