td-plots

A React + TypeScript component library for interactive Plotly.js charts, with Storybook documentation and comprehensive testing.


Installation

``bash
npm install td-plots


or

yarn add td-plots

or

pnpm add td-plots
`

Development

$3

- Node.js 18+
- pnpm 8+

$3

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
`

$3

`bash


Start Storybook development server

pnpm storybook

Build the library

pnpm run build

Run tests

pnpm test

Run tests in watch mode

pnpm test --watch

Build Storybook for production

pnpm build-storybook

Publish to Chromatic (visual testing)

pnpm chromatic
`

$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
``

License

MIT

Support

- 📖 Storybook Documentation
- 🐛 Issue Tracker
- 💬 Discussions