render.js

(function () {
  'use strict';

  function esc(s) {
    return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
  }
  function fmtDate(iso) {
    if (!iso) return '';
    var d = new Date(iso);
    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
  }
  function fmtMonth(iso) {
    if (!iso) return '';
    var d = new Date(iso);
    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
  }

  fetch('./data.json', { cache: 'no-store' })
    .then(function (r) { return r.json(); })
    .then(render)
    .catch(function (err) {
      document.getElementById('app').innerHTML =
        '<div class="header"><div class="stat-sub">Couldn\'t load data.json &mdash; ' + esc(err.message) + '</div></div>';
    });

  function render(data) {
    var app = document.getElementById('app');
    var p = data.profile, s = data.stats;

    var html = '';

    // header
    html += '<div class="header">' +
      '<img class="avatar" alt="' + esc(p.login) + ' avatar" src="./avatar.png">' +
      '<div class="id-block">' +
        '<div class="id-top"><span class="id-name">' + esc(p.name) + '</span>' +
        '<span class="id-handle mono">@' + esc(p.login) + '</span></div>' +
        '<div class="id-bio">' + esc(p.bio) + '</div>' +
        '<div class="id-meta">' +
          (p.company ? '<span><svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a4 4 0 100 8 4 4 0 000-8zM3 14a5 5 0 0110 0 1 1 0 01-1 1H4a1 1 0 01-1-1z"/></svg>' + esc(p.company) + '</span>' : '') +
          (p.location ? '<span><svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1C5.2 1 3 3.2 3 6c0 3.8 5 9 5 9s5-5.2 5-9c0-2.8-2.2-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>' + esc(p.location) + '</span>' : '') +
          '<span><svg viewBox="0 0 16 16" fill="currentColor"><path d="M5 1a1 1 0 011 1v1h4V2a1 1 0 112 0v1h1a2 2 0 012 2v9a2 2 0 01-2 2H3a2 2 0 01-2-2V5a2 2 0 012-2h1V2a1 1 0 011-1zM3 7v7h10V7H3z"/></svg>Joined ' + esc(fmtMonth(p.createdAt)) + '</span>' +
          '<span><svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 8a3 3 0 100-6 3 3 0 000 6zm-5 6c0-2.2 2.2-4 5-4s5 1.8 5 4v1H3v-1z"/></svg>' + p.followers + ' follower' + (p.followers === 1 ? '' : 's') + ' &middot; ' + p.following + ' following</span>' +
        '</div>' +
      '</div>' +
      '<span class="snapshot-tag mono">updated ' + esc(fmtDate(data.generatedAt)) + '</span>' +
      '</div>';

    // stat tiles
    html += '<div class="stats">' +
      statTile('Repositories', s.privateRepoCount + s.publicRepoCount, s.publicRepoCount + ' public &middot; ' + s.privateRepoCount + ' private') +
      statTile('Commits', s.totalCommits, 'across all repos, all-time') +
      statTile('Open issues', s.openIssues, s.openIssues > 0 ? '<span class="dot warning"></span>' + esc(s.openIssuesNote || '') : '<span class="dot good"></span>none right now') +
      statTile(data.languageComposition[0] ? data.languageComposition[0].name : '&mdash;', null,
        data.languageComposition[0] ? pct(data.languageComposition[0].bytes, totalBytes(data.languageComposition)) + '% of code, weighted across all repos' : '', 'Primary language') +
      '</div>';

    // commit activity + language composition (left col) / repos (right col)
    html += '<div class="grid"><div class="col">' + commitPanel(data.commitActivity) + languagePanel(data.languageComposition) + '</div>' +
      '<div class="col">' + reposPanel(data.repos) + '</div></div>';

    // OSS section
    if (data.oss && data.oss.items && data.oss.items.length) {
      html += ossPanel(data.oss);
      html += ossNotice(data.oss);
    }

    html += '<div class="footer-note">Generated automatically every day from the GitHub API &middot; ' +
      '<a href="https://github.com/' + esc(p.login) + '/github-dashboard" target="_blank" rel="noopener">source</a></div>';

    app.innerHTML = html;
    drawCommitChart(data.commitActivity);
    drawLanguageBar(data.languageComposition);
  }

  function statTile(label, value, sub, overrideLabel) {
    return '<div class="stat">' +
      '<span class="stat-label">' + esc(overrideLabel || label) + '</span>' +
      '<span class="stat-value tabular">' + (value == null ? esc(label) : value) + '</span>' +
      '<span class="stat-sub">' + sub + '</span>' +
      '</div>';
  }

  function totalBytes(langs) { return langs.reduce(function (s, l) { return s + l.bytes; }, 0); }
  function pct(v, total) { return total ? (v / total * 100).toFixed(1) : '0.0'; }

  function commitPanel(weeks) {
    var repoNames = [];
    weeks.forEach(function (w) { Object.keys(w.byRepo).forEach(function (r) { if (repoNames.indexOf(r) === -1) repoNames.push(r); }); });
    var colors = ['var(--accent)', 'var(--series-2)', 'var(--series-3)', 'var(--series-4)'];
    var legend = repoNames.map(function (r, i) {
      return '<span class="legend-item"><span class="legend-swatch" style="background:' + colors[i % colors.length] + '"></span>' + esc(r) + '</span>';
    }).join('');
    return '<div class="panel">' +
      '<div class="panel-title">Commit activity</div>' +
      '<div class="panel-sub">Weekly commits, last ' + weeks.length + ' weeks &middot; by repository</div>' +
      '<div class="legend">' + legend + '</div>' +
      '<div class="chart-frame"><svg id="chart-commits" viewBox="0 0 640 210"></svg>' +
      '<div class="tooltip mono" id="tooltip-commits"></div></div>' +
      '</div>';
  }

  function languagePanel(langs) {
    return '<div class="panel">' +
      '<div class="panel-title">Language composition</div>' +
      '<div class="panel-sub">Bytes of code across all repos you\'ve touched, weighted by your share of each repo\'s commits</div>' +
      '<div class="lang-bar" id="lang-bar"></div>' +
      '<div class="lang-legend" id="lang-legend"></div>' +
      '<div class="lang-footnote">Weighted estimate: each repo\'s language bytes &times; your share of its commits, then summed. ' +
      '<b>Structured Text</b> (PLC code) is counted from source files directly where GitHub\'s language detector mislabels or hides it.</div>' +
      '</div>';
  }

  function reposPanel(repos) {
    var privateCount = repos.filter(function (r) { return r.private; }).length;
    var cards = repos.map(function (r) {
      var statusClass = r.openIssues > 0 ? 'warning' : 'good';
      var statusIcon = r.openIssues > 0
        ? '<svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1L1 14h14L8 1zm0 4a1 1 0 011 1v4a1 1 0 01-2 0V6a1 1 0 011-1zm0 7a1 1 0 110 2 1 1 0 010-2z"/></svg>'
        : '<svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor"><path d="M13.7 4.3a1 1 0 010 1.4l-7 7a1 1 0 01-1.4 0l-3-3a1 1 0 111.4-1.4L6 10.6l6.3-6.3a1 1 0 011.4 0z"/></svg>';
      return '<div class="repo-card">' +
        '<div class="repo-top"><span class="repo-name mono">' + esc(r.name) + '</span>' +
        '<span class="badge">' + (r.private ? 'private' : 'public') + '</span></div>' +
        '<div class="repo-desc">' + esc(r.description || 'No description') + '</div>' +
        '<div class="repo-meta">' +
        '<span><span class="lang-chip" style="background:var(--accent)"></span>' + esc(r.language || 'no language') + '</span>' +
        '<span class="tabular">' + r.commits + ' commit' + (r.commits === 1 ? '' : 's') + '</span>' +
        '<span class="status-chip ' + statusClass + '">' + statusIcon + r.openIssues + ' issue' + (r.openIssues === 1 ? '' : 's') + '</span>' +
        '<span>pushed ' + esc(fmtDate(r.pushedAt)) + '</span>' +
        '</div></div>';
    }).join('');
    return '<div class="panel"><div class="panel-title">Repositories</div>' +
      '<div class="panel-sub">' + (privateCount === repos.length ? 'All ' + repos.length + ' are private &mdash; visible to you only' : repos.length + ' repositories') + '</div>' +
      '<div class="repos">' + cards + '</div></div>';
  }

  function ossPanel(oss) {
    var cards = oss.items.map(function (it) {
      var orgClass = it.org === 'siemens' ? 'siemens' : (it.org === 'simatic-ax' ? 'simatic-ax' : 'other');
      var sharePct = (it.share * 100);
      var color = sharePct >= 50 ? 'var(--series-3)' : 'var(--series-4)';
      if (it.org === 'siemens') color = 'var(--accent)';
      return '<div class="oss-card">' +
        '<div class="oss-top"><span class="org-badge ' + orgClass + '">' + esc(it.org) + '</span>' +
        '<span class="oss-name mono"><a href="' + esc(it.url) + '" target="_blank" rel="noopener">' + esc(it.name) + '</a></span>' +
        '<span class="role-badge">' + esc(it.role) + '</span></div>' +
        '<div class="oss-desc">' + esc(it.description || '') + '</div>' +
        '<div class="share-row"><div class="share-track"><div class="share-fill" style="width:' + sharePct.toFixed(0) + '%; background:' + color + '"></div></div>' +
        '<span class="share-label tabular">' + it.userCommits + ' / ' + it.totalCommits + ' commits</span></div>' +
        '<div class="oss-meta">' +
        (it.stars ? '<span><svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1l2.2 4.7 5.1.7-3.7 3.6.9 5.1L8 12.6l-4.5 2.5.9-5.1L.7 6.4l5.1-.7L8 1z"/></svg>' + it.stars + ' stars</span>' : '') +
        (it.prNote ? '<span>' + esc(it.prNote) + '</span>' : '') +
        '<span>active ' + esc(fmtMonth(it.activeFrom)) + ' &ndash; ' + esc(fmtMonth(it.activeTo)) + '</span>' +
        '</div></div>';
    }).join('');
    return '<div class="panel">' +
      '<div class="section-heading"><h2>Open source contributions</h2></div>' +
      '<div class="section-sub">Public commits and pull requests outside your own repos</div>' +
      '<div class="oss-stats">' +
      statTile('OSS commits', oss.totalCommits, 'across ' + oss.items.length + ' public repos') +
      statTile('Repos contributed to', oss.items.length, '') +
      statTile('Pull requests', oss.prsMerged + '<span style="font-size:1rem;color:var(--text-muted)"> / ' + oss.prsTotal + '</span>', 'merged / opened') +
      statTile('Stars earned', oss.starsEarned, 'on repos you helped build') +
      '</div>' +
      '<div class="oss-list" style="margin-top:18px;">' + cards + '</div>' +
      '</div>';
  }

  function ossNotice(oss) {
    return '<div class="notice good">' +
      '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm3.7 5.3l-4.4 4.4a1 1 0 01-1.4 0L4.3 9.1a1 1 0 111.4-1.4l1.2 1.2 3.7-3.7a1 1 0 111.4 1.4z"/></svg>' +
      '<div><div class="notice-title">Your public contribution graph counts this, even though your owned repos are private</div>' +
      '<div class="notice-body">These ' + oss.totalCommits + ' commits are on public repos, so they already count toward your GitHub contribution graph and streak. ' +
      'Stars and repo count in badges like <code>github-readme-stats</code> still only reflect repos you own.</div></div></div>';
  }

  // ---------- commit chart (stacked bar, up to 4 series) ----------
  function drawCommitChart(weeks) {
    var svgNS = 'http://www.w3.org/2000/svg';
    var chart = document.getElementById('chart-commits');
    if (!chart) return;
    var tooltip = document.getElementById('tooltip-commits');
    var frame = tooltip.parentElement;
    var cs = getComputedStyle(document.body);
    function cssVar(n) { return cs.getPropertyValue(n).trim(); }
    var colors = [cssVar('--accent'), cssVar('--series-2'), cssVar('--series-3'), cssVar('--series-4')];

    var repoNames = [];
    weeks.forEach(function (w) { Object.keys(w.byRepo).forEach(function (r) { if (repoNames.indexOf(r) === -1) repoNames.push(r); }); });

    var W = 640, H = 210, padL = 26, padR = 10, padT = 10, padB = 26;
    var plotW = W - padL - padR, plotH = H - padT - padB;
    var totals = weeks.map(function (w) { return repoNames.reduce(function (s, r) { return s + (w.byRepo[r] || 0); }, 0); });
    var maxTotal = Math.max.apply(null, totals.concat([1]));
    var niceMax = Math.ceil(maxTotal / 10) * 10 || 10;
    var groupW = plotW / weeks.length;
    var barW = Math.min(40, groupW * 0.48);
    function y(v) { return padT + plotH - (v / niceMax) * plotH; }

    [0, niceMax / 2, niceMax].forEach(function (v) {
      var line = document.createElementNS(svgNS, 'line');
      line.setAttribute('x1', padL); line.setAttribute('x2', W - padR);
      line.setAttribute('y1', y(v)); line.setAttribute('y2', y(v));
      line.setAttribute('stroke', cssVar('--border')); line.setAttribute('stroke-width', '1');
      chart.appendChild(line);
      var tick = document.createElementNS(svgNS, 'text');
      tick.setAttribute('x', padL - 6); tick.setAttribute('y', y(v) + 3);
      tick.setAttribute('text-anchor', 'end'); tick.setAttribute('class', 'chart-tick');
      tick.textContent = Math.round(v);
      chart.appendChild(tick);
    });

    weeks.forEach(function (w, i) {
      var cx = padL + groupW * i + groupW / 2;
      var x = cx - barW / 2;
      var group = document.createElementNS(svgNS, 'g');
      group.setAttribute('class', 'bar-group');
      var cum = 0;
      var total = totals[i];
      repoNames.forEach(function (r, ri) {
        var v = w.byRepo[r] || 0;
        if (v <= 0) return;
        var yTop = y(cum + v), yBottom = y(cum);
        var rect = document.createElementNS(svgNS, 'rect');
        rect.setAttribute('x', x); rect.setAttribute('y', yTop);
        rect.setAttribute('width', barW); rect.setAttribute('height', Math.max(0, yBottom - yTop));
        rect.setAttribute('fill', colors[ri % colors.length]);
        rect.setAttribute('rx', (cum + v === total) ? 4 : 0);
        rect.setAttribute('class', 'bar-seg');
        group.appendChild(rect);
        cum += v;
      });
      if (total === 0) {
        var zero = document.createElementNS(svgNS, 'rect');
        zero.setAttribute('x', x); zero.setAttribute('y', y(0) - 2);
        zero.setAttribute('width', barW); zero.setAttribute('height', 2);
        zero.setAttribute('fill', cssVar('--border'));
        group.appendChild(zero);
      } else {
        var label = document.createElementNS(svgNS, 'text');
        label.setAttribute('x', cx); label.setAttribute('y', y(total) - 7);
        label.setAttribute('text-anchor', 'middle'); label.setAttribute('class', 'chart-total-label');
        label.textContent = total;
        group.appendChild(label);
      }
      var xLabel = document.createElementNS(svgNS, 'text');
      xLabel.setAttribute('x', cx); xLabel.setAttribute('y', H - 6);
      xLabel.setAttribute('text-anchor', 'middle'); xLabel.setAttribute('class', 'chart-tick');
      xLabel.textContent = w.label;
      group.appendChild(xLabel);

      var hit = document.createElementNS(svgNS, 'rect');
      hit.setAttribute('x', padL + groupW * i); hit.setAttribute('y', padT);
      hit.setAttribute('width', groupW); hit.setAttribute('height', plotH);
      hit.setAttribute('fill', 'transparent');
      hit.addEventListener('mouseenter', function () {
        var lines = repoNames.map(function (r) { return esc(r) + ': ' + (w.byRepo[r] || 0); }).join('<br>');
        tooltip.innerHTML = '<b>' + esc(w.label) + '</b><br>' + lines + '<br>total: ' + total;
        tooltip.classList.add('show');
      });
      hit.addEventListener('mousemove', function (e) {
        var rect = frame.getBoundingClientRect();
        tooltip.style.left = (e.clientX - rect.left + 12) + 'px';
        tooltip.style.top = (e.clientY - rect.top - 10) + 'px';
      });
      hit.addEventListener('mouseleave', function () { tooltip.classList.remove('show'); });
      group.appendChild(hit);
      chart.appendChild(group);
    });

    var axis = document.createElementNS(svgNS, 'line');
    axis.setAttribute('x1', padL); axis.setAttribute('x2', W - padR);
    axis.setAttribute('y1', y(0)); axis.setAttribute('y2', y(0));
    axis.setAttribute('stroke', cssVar('--text-muted')); axis.setAttribute('stroke-width', '1');
    chart.appendChild(axis);
  }

  // ---------- language composition bar ----------
  function drawLanguageBar(langsIn) {
    var bar = document.getElementById('lang-bar');
    var legend = document.getElementById('lang-legend');
    if (!bar) return;
    var cs = getComputedStyle(document.body);
    function cssVar(n) { return cs.getPropertyValue(n).trim(); }
    var seriesColors = [cssVar('--accent'), cssVar('--series-2'), cssVar('--series-3'), cssVar('--series-4'), cssVar('--series-5'), cssVar('--series-6'), cssVar('--series-7'), cssVar('--series-8')];
    var langs = langsIn.slice().sort(function (a, b) { return b.bytes - a.bytes; });
    var total = totalBytes(langs);

    var langTooltip = document.createElement('div');
    langTooltip.className = 'tooltip mono';
    langTooltip.style.position = 'fixed';
    document.body.appendChild(langTooltip);

    langs.forEach(function (l, i) {
      var p = total ? (l.bytes / total * 100) : 0;
      var color = seriesColors[i] || cssVar('--text-muted');
      var seg = document.createElement('div');
      seg.className = 'lang-seg';
      seg.style.background = color;
      seg.style.width = Math.max(p, 1.1) + '%';
      seg.addEventListener('mouseenter', function () {
        langTooltip.innerHTML = '<b>' + esc(l.name) + '</b><br>' + p.toFixed(1) + '% &middot; ' + Math.round(l.bytes).toLocaleString('en-US') + ' bytes';
        langTooltip.classList.add('show');
      });
      seg.addEventListener('mousemove', function (e) {
        langTooltip.style.left = (e.clientX + 14) + 'px';
        langTooltip.style.top = (e.clientY - 34) + 'px';
      });
      seg.addEventListener('mouseleave', function () { langTooltip.classList.remove('show'); });
      bar.appendChild(seg);

      var row = document.createElement('div');
      row.className = 'lang-row';
      row.innerHTML = '<span class="legend-swatch" style="background:' + color + '"></span>' +
        '<span class="lang-name">' + esc(l.name) + '</span>' +
        '<span class="lang-pct tabular">' + p.toFixed(1) + '%</span>' +
        '<span class="lang-bytes tabular">' + Math.round(l.bytes).toLocaleString('en-US') + ' B</span>';
      legend.appendChild(row);
    });
  }
})();