ActivityGrid

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { ActivityGrid } from '@silverpoint/react/activity-grid';

const data = [
  { date: '2026-03-30', count: 0 },
  { date: '2026-03-31', count: 7 },
  { date: '2026-04-01', count: 3 },
  { date: '2026-04-02', count: 10 },
  { date: '2026-04-03', count: 6 },
  { date: '2026-04-04', count: 0 },
  { date: '2026-04-05', count: 3 },
  { date: '2026-04-06', count: 8 },
  { date: '2026-04-07', count: 4 },
  { date: '2026-04-08', count: 0 },
  { date: '2026-04-09', count: 7 },
  { date: '2026-04-10', count: 3 },
  // … 170 more rows of the same shape
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <ActivityGrid
        data={data}
        dateKey="date"
        countKey="count"
        title="Contributions"
        weeks={26}
      />
    </div>
  );
}

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpActivityGrid } from '@silverpoint/vue/activity-grid';

const data = [
  { date: '2026-03-30', count: 0 },
  { date: '2026-03-31', count: 7 },
  { date: '2026-04-01', count: 3 },
  { date: '2026-04-02', count: 10 },
  { date: '2026-04-03', count: 6 },
  { date: '2026-04-04', count: 0 },
  { date: '2026-04-05', count: 3 },
  { date: '2026-04-06', count: 8 },
  { date: '2026-04-07', count: 4 },
  { date: '2026-04-08', count: 0 },
  { date: '2026-04-09', count: 7 },
  { date: '2026-04-10', count: 3 },
  // … 170 more rows of the same shape
];
</script>

<template>
  <div style="width: 480px">
    <SpActivityGrid
      :data="data"
      date-key="date"
      count-key="count"
      title="Contributions"
      :weeks="26"
    />
  </div>
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';

import { Component } from '@angular/core';
import { SpActivityGrid } from '@silverpoint/angular/activity-grid';

@Component({
  selector: 'app-root',
  imports: [SpActivityGrid],
  template: `
    <div style="width: 480px">
      <sp-activity-grid
        [data]="data"
        dateKey="date"
        countKey="count"
        title="Contributions"
        [weeks]="26"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { date: '2026-03-30', count: 0 },
    { date: '2026-03-31', count: 7 },
    { date: '2026-04-01', count: 3 },
    { date: '2026-04-02', count: 10 },
    { date: '2026-04-03', count: 6 },
    { date: '2026-04-04', count: 0 },
    { date: '2026-04-05', count: 3 },
    { date: '2026-04-06', count: 8 },
    { date: '2026-04-07', count: 4 },
    { date: '2026-04-08', count: 0 },
    { date: '2026-04-09', count: 7 },
    { date: '2026-04-10', count: 3 },
    // … 170 more rows of the same shape
  ];
}

import reflex as rx
from reflex_silverpoint_react import activity_grid

DATA = [
    {"date": "2026-03-30", "count": 0},
    {"date": "2026-03-31", "count": 7},
    {"date": "2026-04-01", "count": 3},
    {"date": "2026-04-02", "count": 10},
    {"date": "2026-04-03", "count": 6},
    {"date": "2026-04-04", "count": 0},
    {"date": "2026-04-05", "count": 3},
    {"date": "2026-04-06", "count": 8},
    {"date": "2026-04-07", "count": 4},
    {"date": "2026-04-08", "count": 0},
    {"date": "2026-04-09", "count": 7},
    {"date": "2026-04-10", "count": 3},
    # … 170 more rows of the same shape
]


def index() -> rx.Component:
    return rx.box(
        activity_grid(
            data=DATA,
            date_key="date",
            count_key="count",
            title="Contributions",
            weeks=26,
        ),
        width="480px",
    )


app = rx.App()
app.add_page(index)