Custom React plotting components built with Plotly.js
npm install td-plotsA React + TypeScript component library for interactive Plotly.js charts, with Storybook documentation and comprehensive testing.


``bash`
npm install td-plotsor
yarn add td-plotsor
pnpm add td-plots
- Node.js 18+
- pnpm 8+
1. Clone the repository
`bash`
git clone https://github.com/asizemore/td-plots.git
cd td-plots
2. Install dependencies
`bash`
pnpm install
3. Set up environment variables
Copy .env.sample to .env and configure:`
bash`
CHROMATIC_PROJECT_TOKEN=your_chromatic_token_here
`bashStart Storybook development server
pnpm storybook
$3
To use this package in another local project during development:
1. In this package directory:
`bash
pnpm link --global
`2. In your target project:
`bash
pnpm link td-plots
`Alternatively, you can link directly (I have best results with this):
`bash
pnpm add file:../td-plots
`Build
td-plots and watch for new changes with
`bash
pnpm dev:full
`If the target project doesn't see the new updates, try unlinking and relinking, or clearing cache
`bash
Clear Parcel cache
rm -rf .parcel-cache
rm -rf dist
`
and then restarting the target project.
To unlink, run
`bash
pnpm unlink td-plots
`Components
$3
Interactive histogram component with click and selection event handling.
`tsx
import { HistogramPlot } from 'td-plots';function MyComponent() {
const data = [1, 2, 3, 4, 5, 2, 3, 4, 1, 2];
return (
data={data}
title="My Histogram"
xAxisTitle="Values"
barColor="rgb(72, 72, 74)"
onClick={(event) => console.log('Clicked:', event)}
onSelected={(event) => console.log('Selected:', event)}
/>
);
}
`
Testing
This package uses vitest for testing.
Run tests locally:
`bash
pnpm test # Run all tests
pnpm test --ui # Run with Vitest UI
pnpm test --coverage # Run with coverage report
``MIT
- 📖 Storybook Documentation
- 🐛 Issue Tracker
- 💬 Discussions