Simple Pie Monorepo
🔧 🥧 🍩

Super light weight and super simple SVG pie/doughnut diagram packages

---

project	badges
homepage
simple-pie
react-simple-pie
homepage-legacy

Overview

The simple-pie package family offers an easy way to create SVG pie and doughnut charts. These packages are lightweight and ideal for situations where you need small, simple charts, such as in network graphs or other compact visualizations.

Check out the demo here

Motivation

The idea for the simple-pie packages came from a need to add small pie charts to a network graph. The network graph library only supported PNG or SVG files for node content, making it impractical to store many pre-rendered images for different data sets.

Using popular charting libraries like Highcharts or Chart.js wasn't an option because they were too complex for this specific use case. Even though D3.js might have worked, it was still too large for such a simple need.

That's where simple-pie comes in. It provides a straightforward solution for creating the smallest possible SVG pie and doughnut charts. These charts are perfect for embedding in network graphs, maps, or any application where you need a simple and efficient way to visualize data without the bulk of heavier libraries.

Monorepo

Simple-pie project is utilising a monorepo for a development and deployment. Read more in monorepo.md

simple-pie-project
├─ docs
├─ apps
│  ├─ homepage
│  └─ homepage-legacy
└─ packages
   ├─ pie-math
   ├─ simple-pie
   ├─ react-simple-pie
   └─ tsconfig

Installing packages

1. Make sure you're in the root directory of the monorepo.
2. Run the installation command:

npm install

Workspaces are symlinked into node_modules. To check symlink state run the command:

npm ls --link=true --depth=0

⚠️ After add/remove workspaces, or change their locations on the filesystem, it is necessary to re-run the install-command from root to set up workspaces again

Scripts

Remove all node_modules

npm run clean

Build all workspaces:

npm run build

Run all workspaces in dev mode:

npm run dev

Correct build order is handled by Turborepo.

flowchart LR
  PM[packages/pie-math] --> SP[packages/simple-pie]
  PM[packages/pie-math] --> RSP[packages/react-simple-pie]
  SP --> HL[apps/homepage-legacy]
  RSP --> HL

Loading

Build all package workspaces (used by ci workflow read more in package-publishing.md):

npm run build:packages

Start releasing new npm package version (read more in package-publishing.md):

npm run changeset

More readings

• motivation
• monorepo
• contributing
• package-publishing
  • module-systems
• deploy