history.html

---
layout: null
permalink: /history/
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/svg+xml" href="{{ '/brand/favicon.svg' | relative_url }}" />
  <link rel="icon" type="image/png" sizes="32x32" href="{{ '/brand/favicon-32.png' | relative_url }}" />
  <link rel="icon" type="image/png" sizes="16x16" href="{{ '/brand/favicon-16.png' | relative_url }}" />
  <link rel="apple-touch-icon" href="{{ '/brand/apple-touch-icon.png' | relative_url }}" />
  <title>S33R — Historical Trends</title>
  <script src="{{ '/ui.js' | relative_url }}"></script>
  <link rel="stylesheet" href="{{ '/s33r-feed.css' | relative_url }}" />
  <link rel="stylesheet" href="{{ '/s33r-pages.css' | relative_url }}" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    .history-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
    .history-full { margin-top: 14px; }
    .chart-container { height: 260px; } .chart-sm { height: 220px; } .chart-md { height: 300px; }
    .month-selector { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
    .detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .detail-block { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--panel-2); }
    .detail-block h3 { margin: 0 0 8px; font-size: 12.5px; color: var(--text); }
    .detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
    .detail-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-2); border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
    .detail-item:last-child { border-bottom: none; padding-bottom: 0; }
    .detail-item a { color: var(--text-2); cursor: pointer; } .detail-item a:hover { color: var(--brand); }
    .detail-count { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--brand); }
    .cve-empty { font-size: 12.5px; color: var(--dim); padding: 10px 0; }
    .cve-search-row { display: flex; gap: 8px; margin-bottom: 14px; }
    .cve-search-input { flex: 1; }
    .cve-meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .chart-clickable { cursor: pointer; }
    @media (max-width: 900px) { .history-grid { grid-template-columns: minmax(0, 1fr); } .detail-grid { grid-template-columns: minmax(0, 1fr); } }
  </style>

  <script>window.S33R = { base: "{{ '/' | relative_url }}", data: "{{ '/data' | relative_url }}", feed: "{{ '/data/news_recent.json' | relative_url }}" };</script>
</head>
<body data-page="history">
  <div class="app app--page" id="app">
    <main class="page-main">
      <div class="crumb">
        <span class="lab">SECTION</span>
        <span class="here">HISTORICAL TRENDS</span>
        <span class="meta"><span id="history-meta-crumb">MONTHLY ARCHIVE</span></span>
      </div>

      <div class="page-wrap">
        <header class="phead">
          <div class="phead-l">
            <span class="eyebrow">LONG-RANGE VIEW</span>
            <h1>Historical <span>Trends</span></h1>
            <p class="sub" id="history-meta">Loading archive data…</p>
          </div>
        </header>

        <div class="history-grid">
          <article class="card"><h2>News volume per month</h2><p class="trend-note">Total items and curated items collected per month.</p><div class="chart-container"><canvas id="volumeMonthChart"></canvas></div></article>
          <article class="card"><h2>Unique CVEs per month</h2><p class="trend-note">Number of distinct CVEs mentioned across all news each month.</p><div class="chart-container"><canvas id="cveMonthChart"></canvas></div></article>
        </div>

        <div class="history-full">
          <article class="card"><h2>Topic evolution over time</h2><p class="trend-note">How often ransomware, phishing, zero-day, supply chain and data breach appear in the news each month.</p><div class="chart-md"><canvas id="topicEvolutionChart"></canvas></div></article>
        </div>

        <div class="history-full">
          <article class="card">
            <h2>Monthly deep-dive</h2>
            <p class="trend-note">Click a month to see its top CVEs, vendors and smart groups. Click any CVE to populate the lifecycle tracker below.</p>
            <div class="month-selector" id="monthSelector"></div>
            <div class="detail-grid" id="monthDetailGrid"><div class="detail-block"><p class="cve-empty">Select a month above.</p></div></div>
          </article>
        </div>

        <div class="history-full">
          <article class="card">
            <h2>CVE lifecycle tracker</h2>
            <p class="trend-note">Search any CVE to see how many times it was mentioned each month. Top 20 all-time CVEs are below — click a bar to track it.</p>
            <div class="cve-search-row">
              <input id="cve-search-input" class="cve-search-input filter-input" type="text" placeholder="e.g. CVE-2026-41089" list="cve-datalist" autocomplete="off" />
              <datalist id="cve-datalist"></datalist>
            </div>
            <div id="cve-meta-row" class="cve-meta-row" style="display:none"></div>
            <div class="chart-sm"><canvas id="cveLifecycleChart"></canvas></div>
            <h3 style="font-size:12.5px;margin:18px 0 8px;color:var(--text)">Top 20 CVEs all-time</h3>
            <div class="chart-sm"><canvas id="cveAllTimeChart"></canvas></div>
          </article>
        </div>

        <footer class="site-footer">S33R Security News Feed · Historical data from the monthly archive</footer>
      </div>
    </main>
  </div>

  <script src="{{ '/s33r-nav.js' | relative_url }}"></script>
  <script src="{{ '/s33r-history.js' | relative_url }}"></script>
</body>
</html>