webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Metric KPI Card Grid

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

Git Diff Stat Summary — Free GitHub-Style Diffstat UI

Git Diff Stat Summary · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsAccessibilityDeveloper ToolsDashboard UICSS Grid

Copy & paste

Source Code

<div class="gds-panel">
  <div class="gds-head">
    <h3>3 files changed</h3>
    <span class="gds-total"><b class="gds-add">+142</b> <b class="gds-del">&minus;38</b></span>
  </div>

  <ul class="gds-files" id="gdsFiles">
    <li class="gds-file" data-file="0">
      <button type="button" class="gds-file-toggle" aria-expanded="false">
        <span class="gds-chevron">&rsaquo;</span>
        <span class="gds-fname">src/components/Checkout.tsx</span>
        <span class="gds-fstat">+86 &minus;12</span>
        <span class="gds-diffbar" aria-hidden="true">
          <span class="gds-diffbar-add" style="width:74%"></span><span class="gds-diffbar-del" style="width:26%"></span>
        </span>
      </button>
      <div class="gds-diff" hidden>
        <pre><code><span class="gds-line ctx">  const [step, setStep] = useState(0);</span>
<span class="gds-line del">-  const total = items.reduce((s, i) =&gt; s + i.price, 0);</span>
<span class="gds-line add">+  const subtotal = items.reduce((s, i) =&gt; s + i.price, 0);</span>
<span class="gds-line add">+  const total = subtotal + shipping - discount;</span>
<span class="gds-line ctx">  return (</span>
<span class="gds-line add">+    &lt;OrderSummary subtotal={subtotal} total={total} /&gt;</span>
<span class="gds-line ctx">  );</span></code></pre>
      </div>
    </li>

    <li class="gds-file" data-file="1">
      <button type="button" class="gds-file-toggle" aria-expanded="false">
        <span class="gds-chevron">&rsaquo;</span>
        <span class="gds-fname">src/utils/pricing.ts</span>
        <span class="gds-fstat">+41 &minus;9</span>
        <span class="gds-diffbar" aria-hidden="true">
          <span class="gds-diffbar-add" style="width:82%"></span><span class="gds-diffbar-del" style="width:18%"></span>
        </span>
      </button>
      <div class="gds-diff" hidden>
        <pre><code><span class="gds-line ctx">  export function formatPrice(cents) {</span>
<span class="gds-line del">-    return '$' + (cents / 100).toFixed(2);</span>
<span class="gds-line add">+    return (cents / 100).toLocaleString('en-US', { style: 'currency', currency: 'USD' });</span>
<span class="gds-line ctx">  }</span></code></pre>
      </div>
    </li>

    <li class="gds-file" data-file="2">
      <button type="button" class="gds-file-toggle" aria-expanded="false">
        <span class="gds-chevron">&rsaquo;</span>
        <span class="gds-fname">tests/checkout.spec.ts</span>
        <span class="gds-fstat">+15 &minus;17</span>
        <span class="gds-diffbar" aria-hidden="true">
          <span class="gds-diffbar-add" style="width:47%"></span><span class="gds-diffbar-del" style="width:53%"></span>
        </span>
      </button>
      <div class="gds-diff" hidden>
        <pre><code><span class="gds-line ctx">  it('computes the order total', () =&gt; {</span>
<span class="gds-line del">-    expect(total(items)).toBe(84.50);</span>
<span class="gds-line add">+    expect(total(items, shipping, discount)).toBe(84.50);</span>
<span class="gds-line ctx">  });</span></code></pre>
      </div>
    </li>
  </ul>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Flexbox diffstat bars
Two colored spans with inline widths recreate GitHub's diffstat, no chart library.
Single-open accordion
Expanding one file's diff automatically collapses any other open one.
Git-convention line coloring
Context, added, and removed lines follow the same visual language as git diff.
Accessible expand state
aria-expanded and the hidden attribute stay in sync on every toggle.
Rotating chevron
A small icon rotation mirrors each row's expanded/collapsed state.
Monospaced diff text
File names, stats, and diff lines all use a consistent code font.
Compact by default
All diffs start collapsed so a many-file change stays scannable.
Zero dependencies
No diff library, no chart library — every visual is plain CSS.

About this UI Snippet

Git Diff Stat Summary — Diffstat Bars With an Expandable Line-Level Preview

Screenshot of the Git Diff Stat Summary snippet rendered live

GitHub's pull request file list — a colored bar chip showing each file's insertion/deletion ratio next to its name — communicates change size at a glance without opening a single file. This snippet rebuilds that diffstat pattern, plus a click-to-expand line-level preview, entirely in vanilla HTML/CSS/JS. It pairs naturally with a code diff viewer or code comparison widget in a PR review dashboard.

The diffstat bar is two flex children, not a chart

Each file's bar is a flex container with two children — .gds-diffbar-add and .gds-diffbar-del — each given an inline width percentage representing that file's share of insertions versus deletions. No canvas, no SVG: two colored <span>s inside a display: flex container naturally lay out side by side proportional to their widths, which is the entire visual technique behind GitHub's diffstat.

Totals are a separate, deliberately unlinked number

The header's +142 −38 total is written directly in the markup rather than summed from the per-file stats in JS. In a real implementation you'd compute it server-side from the actual diff and inject both the total and the per-file numbers from the same source — the point of keeping them as plain text here is that this snippet's job is the *display* pattern, not diff computation.

One accordion, not independent toggles

Clicking a file's row expands its line-level diff preview and collapses any other currently-open file — the click handler loops through every toggle button, closing all others, before opening (or closing) the one that was clicked. This keeps the panel compact even with many changed files, rather than letting every diff expand independently and pushing the total height very tall.

Colored diff lines follow git's own convention

Inside the expanded preview, each line carries a .ctx, .add, or .del class — context lines stay neutral, added lines get a green tint with a + prefix, removed lines get a red tint with a - prefix — the same visual language as git diff in a terminal or GitHub's own file view, so it reads as instantly familiar to anyone who has looked at a diff before.

Wiring it to real diff data

Replace the hardcoded file list and diff lines with output from your git provider's API (GitHub's compare API, GitLab's diff API, or a local git diff --numstat and git diff parse) — compute each file's add/delete percentage for the bar width, and split the unified diff into context/add/del lines by their leading +/-/space character.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA three-file diff summary renders with colored insertion/deletion bars.
  2. 2
    Click a file rowIts line-level diff preview expands below it, with added/removed lines colored and prefixed.
  3. 3
    Click another fileThe previous diff collapses automatically — only one stays open at a time.
  4. 4
    Feed in real dataReplace the file list and diff lines with parsed output from git diff --numstat and git diff.
  5. 5
    Compute bar widthsSet each file's add/delete bar width as its share of that file's total changed lines.
  6. 6
    Sum the header totalCompute +142 −38 from the sum of every file's insertions and deletions.

Real-world uses

Common Use Cases

Pull request file lists
Summarise a PR's changed files with GitHub-style add and delete bar chips, so reviewers gauge each file's change size before opening it.
CI and deploy change summaries
Show what a build touched, with an expandable line-level preview that follows the familiar context, added and removed colouring.
Full diff review
Link the summary to a code diff viewer for side-by-side reading, once the overview has shown which files deserve attention.
Commit history browsers
Show diffstat for every commit in a log, using a single-open accordion so expanding one file collapses any other.
Infrastructure change audits
Review config and infrastructure-as-code changes, with aria-expanded and the hidden attribute kept in sync for accessible disclosure.
Related: Trip Itinerary Day Timeline
See the Trip Itinerary Day Timeline for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Each bar is a flex container with two child spans — one for insertions, one for deletions — each given an inline-style width percentage representing that file's insertion/deletion ratio. Because they sit inside a display: flex container, the two colored segments naturally lay out side by side proportional to their widths, with no canvas, SVG, or chart dependency involved.

The click handler loops through every toggle button and forces aria-expanded to false (and hides the diff) on every file except the one just clicked, before toggling that one. This single-open accordion pattern keeps the panel's total height manageable even when many files changed, rather than letting every expanded diff stack up.

Run git diff --numstat to get each file's insertion and deletion counts, then compute addPercent = insertions / (insertions + deletions) * 100 and delPercent = 100 - addPercent for that file's bar. Set those as the inline width styles on the two bar segments. The header total is simply the sum of insertions and deletions across all files.

Split the diff text by newline. Any line starting with + (but not +++) is an added line, any line starting with - (but not ---) is a removed line, and any other line is context — apply the matching .add, .del, or .ctx class to each line's element. Strip or keep the leading +/- character depending on whether you want it shown as part of the line text.

Hold an openFileIndex (or null) in component state instead of toggling DOM attributes directly. Render each file's bar widths and diff lines from your parsed diff data, and derive each toggle's aria-expanded and each diff panel's visibility from whether its index matches openFileIndex — clicking a file sets openFileIndex to its own index (or null if already open).