@git-stats-components/svelte

> Beautiful contribution graphs for Svelte


Demo

View Live Demo

!Git Stats Components
!Git Stats Components

Installation

``bash
npm install @git-stats-components/svelte
`

Quick Start

`svelte




`

Components

$3

GitHub-style contribution heatmap.

Props:

- dataUrl (string) - Path to stats JSON file (default: /data/git-stats.json)
- profileIndex (number) - Which profile to display (default: 0)
- colorScheme ('green' | 'blue' | 'purple' | 'orange') - Color theme (default: 'green')
- showSettings (boolean) - Show color scheme dropdown (default: true)
- cacheTTL (number) - Cache duration in milliseconds

Events:

- dayClick - Dispatched when a day is clicked (detail: { date, count })
- colorSchemeChange - Dispatched when color scheme changes (detail: scheme)

Example:

`svelte


on:dayClick={handleDayClick}
on:colorSchemeChange={handleColorChange}
/>

dataUrl="/data/git-stats.json"
profileIndex={0}
colorScheme="blue"
showSettings={true}
/>
`

$3

Project and commit count statistics.

Props:

- dataUrl (string) - Path to stats JSON file
- profileIndexes (number[]) - Which profiles to aggregate (default: [])
- experienceData (ExperienceEntry[]) - Work experience for years calculation (default: [])
- showCustomStat (boolean) - Show custom stat (default: true)
- customStatCalculator (function) - Custom stat calculation function

Slots:

- icon-experience - Custom icon for experience stat
- icon-projects - Custom icon for projects stat
- icon-commits - Custom icon for commits stat
- icon-custom - Custom icon for custom stat
- custom-stat-label - Custom label for custom stat
- Default slot for additional content

Example:

`svelte


dataUrl="/data/git-stats.json"
{experienceData}
showCustomStat={true}
customStatCalculator={calculatePizzas}
>


`typescript
import type {
GitStatsData,
ColorScheme,
Platform,
ExperienceEntry,
CustomStatCalculator,
} from '@git-stats-components/svelte'

let colorScheme: ColorScheme = 'green'

const experienceData: ExperienceEntry[] = [
{
startDate: '2020-01-01',
endDate: null,
skills: ['JavaScript', 'Svelte'],
},
]
`

SvelteKit

`svelte





`

Reactive Props

All props are reactive-update them and the component updates:

`svelte


Change Color

`

Styling

Components use scoped styles but you can override using global styles:

`css
/ In your global CSS /
:global(.git-contribution-graph) {
/ Custom styles /
}

:global(.contribution-day.level-4.green) {
background-color: #00ff00 !important;
}
`

Setup

$3

Initialize in your project:

`bash
npx @git-stats-components/svelte init
`

This creates:
- git-stats.config.js - Configuration file
- .github/workflows/update-git-stats.yml - GitHub Action workflow
- public/data/ - Directory for stats data

$3

Edit git-stats.config.js:

`javascript
export default {
profiles: [
{
username: 'your-github-username',
platform: 'github',
tokenSecret: 'GITHUB_TOKEN'
}
],
dataPath: 'public/data/git-stats.json',
schedule: '0 2 *' // Daily at 2 AM UTC
}
``

$3

Go to Settings → Secrets and variables → Actions and add your tokens.

That's it! The GitHub Action will fetch your stats daily.

For more details, see the main git-stats-components repository.

License

MIT © Derek Johnston