https://github.com/techwithty/activity-graph
Activity Graph module: reusable team activity feed and employee activity dashboard (React/TypeScript) with charts, tables, filters. Self-contained UI components using shadcn and TanStack Table.
https://github.com/techwithty/activity-graph
activity-graph charts component frontend nextjs react shadcn table team-activity typescript ui
Last synced: 2 days ago
JSON representation
Activity Graph module: reusable team activity feed and employee activity dashboard (React/TypeScript) with charts, tables, filters. Self-contained UI components using shadcn and TanStack Table.
- Host: GitHub
- URL: https://github.com/techwithty/activity-graph
- Owner: TechWithTy
- Created: 2025-09-12T03:11:52.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-09-19T17:48:29.000Z (7 months ago)
- Last Synced: 2025-09-19T19:59:27.355Z (7 months ago)
- Topics: activity-graph, charts, component, frontend, nextjs, react, shadcn, table, team-activity, typescript, ui
- Language: TypeScript
- Homepage: https://www.cybershoptech.com
- Size: 15.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Activity Graph
Reusable team activity feed and employee activity dashboard (React/TypeScript). Ships self‑contained UI components (no parent‑app types) and utility functions for building rich activity views.
## Features
- Team Activity tab with range filter and comparative line graph
- Employees Activity tab with toolbar search and table view
- Recent activity list with formatted entries
- Local, minimal type definitions to keep the module independent
- Built with shadcn/ui + TanStack Table
## Directory structure
```
external/activity-graph/
├─ components/
│ ├─ ActivityLineGraph.tsx
│ ├─ MemberChips.tsx
│ ├─ RecentActivityList.tsx
│ └─ TeamActivityFeed.tsx # Primary entry component
├─ utils/
│ ├─ events.ts
│ ├─ interactions.ts
│ └─ time.ts
└─ README.md
```
## Tech stack
- React + TypeScript
- shadcn/ui
- TanStack Table
- Recharts (for example charts)
## Installation (as a submodule)
If this folder has been split into a standalone repo (e.g. `TechWithTy/activity-graph`), add it as a submodule to your host project:
```bash
git submodule add https://github.com/TechWithTy/activity-graph.git external/activity-graph
```
Install peer dependencies in your host app (version ranges per your app setup):
```bash
pnpm add @tanstack/react-table clsx tailwind-merge
```
Also ensure shadcn/ui primitives are available in your host app (Buttons, Tabs, Input, Label, etc.).
## Usage
Import and render `TeamActivityFeed` inside a page or route. Provide a `permissions` object compatible with the local utilities.
```tsx
import TeamActivityFeed from "@/external/activity-graph/components/TeamActivityFeed";
export default function Page() {
return (
);
}
```
## Notes on typing
- This module defines minimal local types and avoids importing types from a parent app to remain portable.
- When consuming table callbacks (e.g., `renderToolbar`), annotate `table` as `Table` where `TeamMember` refers to your host‑app team member row type. If you prefer, you may continue with `unknown` and infer.
## Development
- The components assume TailwindCSS and shadcn/ui are configured in the host app.
- Line‑ending warnings (LF→CRLF) on Windows are cosmetic. You can enforce LF via a root `.gitattributes` if desired.
## License
MIT
---
## Charts: Example (AreaChart)
This module includes a self‑contained example chart component using Recharts: `components/ExampleAreaChart.tsx`.
### Install Recharts (peer)
```bash
pnpm add recharts
```
### Add chart color tokens (host app CSS)
Add CSS variables that the chart references. You can place these in your global CSS (e.g., `app/globals.css`).
```css
@layer base {
:root {
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
}
.dark {
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
}
}
```
### Use the example chart
```tsx
import ExampleAreaChart from "@/external/activity-graph/components/ExampleAreaChart";
export default function Demo() {
return (
Area Chart
);
}
```
The example reads `--chart-1` and `--chart-2` for colors. Adjust tokens or the component to match your theme.