{"id":48900994,"url":"https://github.com/shadedprofit/category-pie-chart","last_synced_at":"2026-04-16T15:02:21.639Z","repository":{"id":328186461,"uuid":"1108617673","full_name":"shadedprofit/category-pie-chart","owner":"shadedprofit","description":"A full-stack Django, React.js, TypeScript app that provides an example of how to publish a reusable React component to npm for public or private use.","archived":false,"fork":false,"pushed_at":"2025-12-11T14:53:09.000Z","size":273,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-12T18:30:45.540Z","etag":null,"topics":["django","django-rest-framework","docker","docker-compose","eslint","husky","lint-staged","prettier","python3","reactjs","rest-api","restful-api","sqlite3","storybook","tailwindcss","tanstack-query","typescript","vite","vitest"],"latest_commit_sha":null,"homepage":"","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/shadedprofit.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-12-02T17:29:25.000Z","updated_at":"2025-12-11T14:53:13.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/shadedprofit/category-pie-chart","commit_stats":null,"previous_names":["shadedprofit/category-pie-chart"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/shadedprofit/category-pie-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadedprofit%2Fcategory-pie-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadedprofit%2Fcategory-pie-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadedprofit%2Fcategory-pie-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadedprofit%2Fcategory-pie-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shadedprofit","download_url":"https://codeload.github.com/shadedprofit/category-pie-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadedprofit%2Fcategory-pie-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31891038,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T11:36:10.202Z","status":"ssl_error","status_checked_at":"2026-04-16T11:36:09.652Z","response_time":69,"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":["django","django-rest-framework","docker","docker-compose","eslint","husky","lint-staged","prettier","python3","reactjs","rest-api","restful-api","sqlite3","storybook","tailwindcss","tanstack-query","typescript","vite","vitest"],"created_at":"2026-04-16T15:02:20.470Z","updated_at":"2026-04-16T15:02:21.630Z","avatar_url":"https://github.com/shadedprofit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Category Pie Chart\n\nThis app is set up to export a Category Pie Chart component that can be imported in any React application if published to `npm`. An example demo using the component is also provided, consisting of a React frontend and a Django backend for the API server.\n\n\n## Project Organization\n\nThe component library is contained in the `frontend/lib` folder.  Vite has specifically been set up to only build and export this component.  The frontend code relevant to the demo, on the other hand, is contained within the `src` folder.  The Django API server located in the `backend` folder is only meant to be used with the demo application.\n\nA demo app using the component has also been setup, which either can be run in a Docker container or locally by running both the backend and frontend servers in separate terminal windows.\n\n\n## Running the Demo App in a Docker Container\n\nFirst, make sure you have installed Docker and have started your local Docker Engine.  Then, from the project root, run:\n\n- `docker-compose up --build`\n\nThis will run both the backend and frontend in a Docker container, and seed the database with 1000 records over the past year.  Once the app is running, you can navigate to:\n\n- `http://0.0.0.0:5173`\n\nThere, you will find a Pie Chart displaying a count of purchases for every category over the selected date range.  You can select different date ranges to see how the percentages differ over time.\n\n\n## Running the Backend Locally\n\ncd into the backend:\n- `cd backend/`\n\nInstall packages using Poetry:\n- `poetry install`\n\nActivate virtual environment:\n- `poetry env activate`\n\ncd into the charts folder:\n- `cd charts/`\n\nStart the server:\n- `python manage.py runserver`\n\nYou should now be able to call the Pie chart API at:\n- `http://localhost:8000/api/pie-chart?start-date=\u003cYYYY-MM-DD\u003e\u0026end-date=\u003cYYYY-MM-DD\u003e`\n\n\n## Running the Frontend Locally\n\ncd into the frontend:\n- `cd frontend/`\n\nInstall packages using Yarn (`npm i -g yarn` if you need to install yarn):\n- `yarn install`\n\nRun dev server:\n- `yarn dev`\n\nNavigate to the page at:\n- `http://localhost:5173`\n\n\n## Other Chart Examples\n\nStorybook has been set up in the frontend to provide other examples of how to style the Pie Chart component.\n\nFirst, you should build storybook by navigating into the frontend folder and running:\n- `yarn build-storybook`\n\nTo run Storybook, cd into the frontend folder and run:\n- `yarn storybook`\n\n\n## Running Unit Tests\n\n### Backend Tests\n\ncd into backend/charts/ and run:\n- `python manage.py test`\n\n### Frontend Tests\n\ncd into frontend/ and run:\n- `yarn test`\n\n\n## Project Architecture\n\n### Frontend Architecture\n\nFor the demo, I chose to use React, TypeScript, TanStack Query, and Tailwind CSS as the primary libraries.  TypeScript is used to help document the code, eliminate bugs during development, and enable other developers to get up to speed more easily.  I chose TanStack Query to handle the data management from API requests primarily because it gives developers a lot of flexibility with API requests and because it makes data management for components very simple.  Tailwind, I believe, also enables developers to step into a codebase and more easily understand what is happening with every component or page.  This stack, collectively, enables a codebase to scale for a larger organization.\n\nVite is used for the build tool and dev server.  The `\u003cCategoryPieChart /\u003e` component is structured so that only the peer dependencies for `react`, `react-dom`, and `recharts` are required for it to be utilized.  For that reason, the code specifically pertaining to the component is in the `lib/` folder, and the code for the demo is in the `src` folder.\n\n### Backend Architecture\n\nThe primary dependencies for the backend are Django, Django Rest Framework, and Django Cors Headers. The backend uses a SQLite database.  The primary API route `api/pie-charts?start_date=\u0026end_date=` is structured as a GET request from an API view.\n\nBecause Django is an MVC framework, I have tried to follow MVC principles as closely as possible.  As such, views primarily deal with requests and responses, and services deal with logic as it pertains to database models.\n\nThe route setup is structured so that other API routes can easily be added.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadedprofit%2Fcategory-pie-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshadedprofit%2Fcategory-pie-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadedprofit%2Fcategory-pie-chart/lists"}