`public/panels/performance.html`

112 lines
<div id="perf-banner"></div>

<div class="card">
  <div class="perf-head">
    <div>
      <h2>Performance overview</h2>
      <p class="muted" style="margin:2px 0 0;font-size:12.5px">Email engagement, list growth, and web traffic at a glance.</p>
    </div>
    <div class="row" style="gap:6px;flex-wrap:nowrap;align-items:center">
      <span class="perf-rng" role="group" aria-label="Date range">
        <button class="btn ghost perf-range" data-range="7d">7d</button>
        <button class="btn ghost perf-range active" data-range="30d">30d</button>
        <button class="btn ghost perf-range" data-range="90d">90d</button>
      </span>
    </div>
  </div>

  <div class="perf-kpis" id="perf-kpis"></div>
</div>

<div class="card">
  <div class="perf-head">
    <h2>Trend</h2>
    <div class="row" style="gap:6px;flex-wrap:wrap;align-items:center">
      <label for="perf-metric" style="margin:0 6px 0 0">Metric</label>
      <select id="perf-metric" style="width:auto;min-width:150px">
        <optgroup label="Email">
          <option value="opens">Opens</option>
          <option value="clicks">Clicks</option>
          <option value="sends">Sends</option>
          <option value="signups">Signups</option>
        </optgroup>
        <optgroup label="Web">
          <option value="sessions">Sessions</option>
          <option value="users">Users</option>
          <option value="conversions">Conversions</option>
        </optgroup>
      </select>
    </div>
  </div>
  <div class="perf-chart-meta" id="perf-chart-meta"></div>
  <div class="perf-chart-wrap">
    <svg id="perf-chart" class="perf-chart" preserveAspectRatio="none" role="img" aria-label="Trend chart"></svg>
    <div class="perf-tip" id="perf-tip" hidden></div>
  </div>
</div>

<div class="card">
  <div class="perf-head">
    <h2>Top campaigns</h2>
    <p class="muted" style="margin:0;font-size:12.5px">Ranked by open rate</p>
  </div>
  <div class="perf-table-wrap">
    <table class="perf-table" id="perf-campaigns">
      <thead>
        <tr>
          <th>Campaign</th><th>List</th><th class="num">Sends</th>
          <th class="num">Opens</th><th class="num">Open rate</th><th class="num">Click rate</th>
        </tr>
      </thead>
      <tbody><tr><td colspan="6" class="perf-empty">Loading…</td></tr></tbody>
    </table>
  </div>
</div>

<style>
.perf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.perf-rng{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.perf-range{border:0;border-radius:0;padding:7px 14px;background:#fff;color:var(--ink)}
.perf-range+.perf-range{border-left:1px solid var(--line)}
.perf-range.active{background:var(--ink);color:var(--cream)}
.perf-range:hover{background:var(--cream)}
.perf-range.active:hover{background:#000}

.perf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--paper)}
.kpi .k-label{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--mut)}
.kpi .k-val{font:600 25px/1.1 "Cormorant Garamond",Georgia,serif;margin:5px 0 2px;letter-spacing:.2px}
.kpi .k-trend{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:3px}
.kpi .k-trend.up{color:#3f8f5e}.kpi .k-trend.down{color:#c0573f}.kpi .k-trend.flat{color:var(--mut)}
.kpi .k-sub{font-size:11px;color:var(--mut);margin-left:7px;font-weight:600}

.perf-chart-meta{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.perf-chart-meta .cm-total{font:600 22px/1 "Cormorant Garamond",Georgia,serif}
.perf-chart-meta .cm-label{font-size:12px;color:var(--mut);font-weight:600}
.perf-chart-wrap{position:relative;width:100%;height:240px}
.perf-chart{width:100%;height:100%;display:block}
.perf-chart .grid-line{stroke:var(--line);stroke-width:1}
.perf-chart .axis-lbl{fill:var(--mut);font-size:10px;font-family:Inter,sans-serif}
.perf-chart .area{fill:rgba(184,146,90,.14)}
.perf-chart .line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.perf-chart .bar{fill:var(--gold)}
.perf-chart .bar:hover{fill:var(--accent)}
.perf-chart .dot{fill:var(--gold);stroke:#fff;stroke-width:1.5}
.perf-chart .hit{fill:transparent;cursor:pointer}
.perf-tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--cream);font-size:11.5px;
 padding:5px 9px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-115%);z-index:3;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.perf-tip b{color:#fff}

.perf-table-wrap{overflow-x:auto}
.perf-table{width:100%;border-collapse:collapse;font-size:13px}
.perf-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
 color:var(--mut);padding:6px 12px 9px;border-bottom:1px solid var(--line)}
.perf-table td{padding:11px 12px;border-bottom:1px solid var(--line)}
.perf-table tr:last-child td{border-bottom:0}
.perf-table .num{text-align:right;font-variant-numeric:tabular-nums}
.perf-table .c-name{font-weight:600}
.perf-table .c-rate{font-weight:700;color:var(--accent)}
.perf-table tbody tr:hover td{background:var(--cream)}
.perf-empty{color:var(--mut);text-align:center;padding:18px 0}
</style>