📊 Stats Dashboard: Enhancing Your Data Visualization

"Raw numbers are mere ink. Transform them into stories, and you wield true power." — The Data Sage

🎯 Quest Objectives

• Understand the contributor data structure
• Create a new Liquid include for enhanced stats
• Add a language/category breakdown chart
• Build a contribution summary visualization
• Integrate the dashboard into the character sheet

📖 Background

Your character sheet already shows basic stat tiles (commits, PRs, etc.). This quest upgrades the stats panel with richer visualizations — bar charts, progress rings, and comparative displays — all using pure HTML/CSS and Liquid (no JavaScript libraries required).

🗺️ Quest Steps

Step 1: Understand the Data

Your contributor YAML file (_data/contributors/YOUR_USERNAME.yml) contains:

stats:
  top_languages:
    - name: Markdown
      percentage: 45
    - name: Ruby
      percentage: 25
    - name: JavaScript
      percentage: 15
  top_categories:
    - name: DevOps
      count: 12
    - name: Frontend
      count: 8
  lines_added: 5432
  lines_removed: 1234

All of this is accessible in Liquid as site.data.contributors.YOUR_USERNAME.stats.

Step 2: Create the Enhanced Stats Include

Create _includes/contributor/stats_dashboard.html:

{% raw %}{% assign s = include.stats %}{% endraw %}
{% raw %}{% if s %}{% endraw %}
<div class="contributor-dashboard">

  <!-- Language Breakdown -->
  {% raw %}{% if s.top_languages.size > 0 %}{% endraw %}
  <div class="dashboard-section">
    <h4>🔤 Languages</h4>
    <div class="language-bars">
      {% raw %}{% for lang in s.top_languages %}{% endraw %}
      <div class="lang-row">
        <span class="lang-name">{% raw %}{{ lang.name }}{% endraw %}</span>
        <div class="lang-bar-track">
          <div class="lang-bar-fill" style="width: {% raw %}{{ lang.percentage }}{% endraw %}%">
            {% raw %}{{ lang.percentage }}{% endraw %}%
          </div>
        </div>
      </div>
      {% raw %}{% endfor %}{% endraw %}
    </div>
  </div>
  {% raw %}{% endif %}{% endraw %}

  <!-- Lines of Code -->
  {% raw %}{% if s.lines_added > 0 or s.lines_removed > 0 %}{% endraw %}
  <div class="dashboard-section">
    <h4>📝 Code Impact</h4>
    {% raw %}{% assign total_lines = s.lines_added | plus: s.lines_removed %}{% endraw %}
    {% raw %}{% assign add_pct = s.lines_added | times: 100 | divided_by: total_lines %}{% endraw %}
    <div class="code-impact-bar">
      <div class="impact-added" style="width: {% raw %}{{ add_pct }}{% endraw %}%"
           title="{% raw %}{{ s.lines_added }}{% endraw %} lines added">
        +{% raw %}{{ s.lines_added }}{% endraw %}
      </div>
      <div class="impact-removed" style="width: {% raw %}{{ 100 | minus: add_pct }}{% endraw %}%"
           title="{% raw %}{{ s.lines_removed }}{% endraw %} lines removed">
        -{% raw %}{{ s.lines_removed }}{% endraw %}
      </div>
    </div>
  </div>
  {% raw %}{% endif %}{% endraw %}

</div>
{% raw %}{% endif %}{% endraw %}

Step 3: Add CSS Styles

Add to assets/css/contributor-profile.css:

/* Dashboard */
.contributor-dashboard {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.dashboard-section h4 {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}
.lang-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.lang-name {
  min-width: 80px;
  font-size: 0.85rem;
}
.lang-bar-track {
  flex: 1;
  height: 20px;
  background: var(--contributor-bg, #f5f5f5);
  border-radius: 4px;
  overflow: hidden;
}
.lang-bar-fill {
  height: 100%;
  background: var(--contributor-accent, #6c3fc5);
  border-radius: 4px;
  font-size: 0.75rem;
  color: #fff;
  display: flex;
  align-items: center;
  padding-left: 6px;
  min-width: 30px;
}
.code-impact-bar {
  display: flex;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.8rem;
  color: #fff;
}
.impact-added {
  background: #2e7d32;
  display: flex;
  align-items: center;
  justify-content: center;
}
.impact-removed {
  background: #c5221f;
  display: flex;
  align-items: center;
  justify-content: center;
}

Step 4: Integrate into Character Sheet

Edit _includes/contributor/character_sheet.html and add after the stats panel:

{% raw %}{% include contributor/stats_dashboard.html stats=contributor.stats %}{% endraw %}

Step 5: Verify

bundle exec jekyll serve

Check your profile page for the new visualizations.

• Language bars render with correct percentages
• Code impact bar shows ± ratio
• Layout is responsive on mobile
• Colors match your class theme

💡 Bonus: Category Breakdown

Add a category section to your dashboard for extra polish:

{% raw %}{% if s.top_categories.size > 0 %}{% endraw %}
<div class="dashboard-section">
  <h4>📂 Top Categories</h4>
  {% raw %}{% for cat in s.top_categories %}{% endraw %}
  <span class="category-chip">{% raw %}{{ cat.name }}{% endraw %} ({% raw %}{{ cat.count }}{% endraw %})</span>
  {% raw %}{% endfor %}{% endraw %}
</div>
{% raw %}{% endif %}{% endraw %}

🏆 Reward: Data Sage Badge 📊

Once your enhanced stats dashboard renders on your profile, you've earned the Data Sage badge (+100 XP).

---

"You see beyond the numbers now. Welcome to the inner circle of data wielders."

🕸️ Knowledge Graph

Structured wiki-links connect this quest to the IT-Journey knowledge graph. Open the Obsidian Graph View to explore connections.

Level hub: [[Level 0010 - Terminal Enhancement & Shell Mastery]] Overworld: [[🏰 Overworld - Master Quest Map]] Prerequisites: [[Forge Your Character: Crafting Your Contributor Identity]] Recommended: [[Badge Collector: Showcasing Your Achievements]] Unlocks: [[Contribution Calendar: Mapping Your Journey Through Time]] Obsidian docs: [[Obsidian Knowledge Graph and Wiki Links]]