Simple Pie Monorepo
🔧 🥧 🍩

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

---

project	badges
homepage
simple-pie
react-simple-pie

Overview

This project creates simple svg pie and doughnut charts for infographics like graphs ant others.

Check out the demo here

Motivation

Some time ago I had to integrate a network graph. And the every node of the network graph would be tiny pie chart. The network graph library doesn't support anything else except png or svg as node inner content. So, it is not very nice idea to keep a bunch of png or svg files for every case of data distribution. And for obvious reasons it is not possible to use HighCharts, Chart.js or other data visualization library. (Perhaps it would work with d3, but I'm not sure, it is an overkill to keep such big library for the such small purpose)

Well the simple-pie does exactly this thing. It generates tiny svg pie which can be integrated into network graph or map or any other case, when you can't use data-visualization libraries.

Monorepo

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

simple-pie-project
├─ docs
├─ apps
│  └─ 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

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