{"id":31136969,"url":"https://github.com/techwithty/activity-graph","last_synced_at":"2026-04-05T21:02:04.911Z","repository":{"id":314375465,"uuid":"1055273742","full_name":"TechWithTy/activity-graph","owner":"TechWithTy","description":"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.","archived":false,"fork":false,"pushed_at":"2025-09-19T17:48:29.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-19T19:59:27.355Z","etag":null,"topics":["activity-graph","charts","component","frontend","nextjs","react","shadcn","table","team-activity","typescript","ui"],"latest_commit_sha":null,"homepage":"https://www.cybershoptech.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TechWithTy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-12T03:11:52.000Z","updated_at":"2025-09-19T17:48:32.000Z","dependencies_parsed_at":"2025-09-12T05:43:55.216Z","dependency_job_id":"f2348043-3d76-400b-964d-4833e6126272","html_url":"https://github.com/TechWithTy/activity-graph","commit_stats":null,"previous_names":["techwithty/activity-graph"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TechWithTy/activity-graph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechWithTy%2Factivity-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechWithTy%2Factivity-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechWithTy%2Factivity-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechWithTy%2Factivity-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TechWithTy","download_url":"https://codeload.github.com/TechWithTy/activity-graph/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechWithTy%2Factivity-graph/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31449836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T15:22:31.103Z","status":"ssl_error","status_checked_at":"2026-04-05T15:22:00.205Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["activity-graph","charts","component","frontend","nextjs","react","shadcn","table","team-activity","typescript","ui"],"created_at":"2025-09-18T08:04:16.178Z","updated_at":"2026-04-05T21:02:04.906Z","avatar_url":"https://github.com/TechWithTy.png","language":"TypeScript","readme":"# Activity Graph\n\nReusable 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.\n\n## Features\n\n- Team Activity tab with range filter and comparative line graph\n- Employees Activity tab with toolbar search and table view\n- Recent activity list with formatted entries\n- Local, minimal type definitions to keep the module independent\n- Built with shadcn/ui + TanStack Table\n\n## Directory structure\n\n```\nexternal/activity-graph/\n├─ components/\n│  ├─ ActivityLineGraph.tsx\n│  ├─ MemberChips.tsx\n│  ├─ RecentActivityList.tsx\n│  └─ TeamActivityFeed.tsx   # Primary entry component\n├─ utils/\n│  ├─ events.ts\n│  ├─ interactions.ts\n│  └─ time.ts\n└─ README.md\n```\n\n## Tech stack\n\n- React + TypeScript\n- shadcn/ui\n- TanStack Table\n- Recharts (for example charts)\n\n## Installation (as a submodule)\n\nIf this folder has been split into a standalone repo (e.g. `TechWithTy/activity-graph`), add it as a submodule to your host project:\n\n```bash\ngit submodule add https://github.com/TechWithTy/activity-graph.git external/activity-graph\n```\n\nInstall peer dependencies in your host app (version ranges per your app setup):\n\n```bash\npnpm add @tanstack/react-table clsx tailwind-merge\n```\n\nAlso ensure shadcn/ui primitives are available in your host app (Buttons, Tabs, Input, Label, etc.).\n\n## Usage\n\nImport and render `TeamActivityFeed` inside a page or route. Provide a `permissions` object compatible with the local utilities.\n\n```tsx\nimport TeamActivityFeed from \"@/external/activity-graph/components/TeamActivityFeed\";\n\nexport default function Page() {\n  return (\n    \u003cTeamActivityFeed\n      permissions={{ ManageTeam: true, ViewReports: true }}\n      apiPath=\"/api/v1/team/activity\"\n      days={14}\n    /\u003e\n  );\n}\n```\n\n## Notes on typing\n\n- This module defines minimal local types and avoids importing types from a parent app to remain portable.\n- When consuming table callbacks (e.g., `renderToolbar`), annotate `table` as `Table\u003cTeamMember\u003e` where `TeamMember` refers to your host‑app team member row type. If you prefer, you may continue with `unknown` and infer.\n\n## Development\n\n- The components assume TailwindCSS and shadcn/ui are configured in the host app.\n- Line‑ending warnings (LF→CRLF) on Windows are cosmetic. You can enforce LF via a root `.gitattributes` if desired.\n\n## License\n\nMIT\n\n---\n\n## Charts: Example (AreaChart)\n\nThis module includes a self‑contained example chart component using Recharts: `components/ExampleAreaChart.tsx`.\n\n### Install Recharts (peer)\n\n```bash\npnpm add recharts\n```\n\n### Add chart color tokens (host app CSS)\n\nAdd CSS variables that the chart references. You can place these in your global CSS (e.g., `app/globals.css`).\n\n```css\n@layer base {\n  :root {\n    --chart-1: oklch(0.646 0.222 41.116);\n    --chart-2: oklch(0.6 0.118 184.704);\n  }\n\n  .dark {\n    --chart-1: oklch(0.488 0.243 264.376);\n    --chart-2: oklch(0.696 0.17 162.48);\n  }\n}\n```\n\n### Use the example chart\n\n```tsx\nimport ExampleAreaChart from \"@/external/activity-graph/components/ExampleAreaChart\";\n\nexport default function Demo() {\n  return (\n    \u003cdiv className=\"rounded-md border p-4\"\u003e\n      \u003ch2 className=\"mb-2 font-semibold\"\u003eArea Chart\u003c/h2\u003e\n      \u003cExampleAreaChart /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nThe example reads `--chart-1` and `--chart-2` for colors. Adjust tokens or the component to match your theme.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechwithty%2Factivity-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechwithty%2Factivity-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechwithty%2Factivity-graph/lists"}