Domain

DiffStatistics

Compact added, removed, and modified line-count summary that accompanies a Markdown diff view.

import { DiffStatistics } from '@lostgradient/cinder/diff-statistics';
diffstatisticsdomain-suite
01

Overview

Compact inline display of added, modified, and removed line counts for a file diff.

Choosing this component

  • Showing the line-change summary for a single file or commit in a code review, pull-request list, or activity feed.
  • Toolbars and compact layouts — use density="toolbar" to snap to the shared control-height tier.
  • Suppressing zero-count values cleanly with hideZero when a file has only additions or only deletions.

Choosing something else

  • General numeric metrics (revenue, users, errors) — use Statistic or StatisticGroup for dashboard figures.
  • Full diff rendering (side-by-side or unified views of the actual line changes) — DiffStatistics only summarises counts; use a diff renderer component for the actual content.

Related components

  • Statistic — general-purpose metric tile for non-diff numeric values.
  • StatisticGroup — grid container for multiple Statistic tiles.

Usage

svelte 
<script lang="ts">
  import DiffStatistics from '@lostgradient/cinder/diff-statistics';
</script>

<DiffStatistics />
Live preview
02

When to use

Use when
  • Surfacing a quick numeric summary of changes alongside or in lieu of a full diff surface.
  • Annotating a list of files or pull requests with line-change counts as part of the source-diff-viewer suite.
Avoid when
  • Rendering the actual hunked diff content — pair with `DiffViewer` from `@lostgradient/editor` for the full document comparison.
  • Generic numeric badges that have nothing to do with diffs — reach for stat or badge instead.
03

Examples

Basic diff statistics

Line-change counts with semantic colors.

04

Props

Props for diff-statistics
Name Type Default Required Bindable Description
added number req Number of added lines.
removed number req Number of removed lines.
modified number req Number of modified lines.
variant 'default' | 'compact' 'default' Layout variant. default shows full statistic markup; compact trims it for tight surfaces. Distinct from density, which adjusts control height.
density 'toolbar' Toolbar density opt-in (compact variant only). When set, pills snap to the shared --cinder-control-height-sm tier.
hideZero boolean false Hide statistics with a zero value.