td-plots

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

Installation

npm install td-plots
# or
yarn add td-plots
# or
pnpm add td-plots

Development

Prerequisites

• Node.js 18+
• pnpm 8+

Setup

1. Clone the repository

   git clone https://github.com/asizemore/td-plots.git
   cd td-plots

2. Install dependencies

   pnpm install

3. Set up environment variables Copy .env.sample to .env and configure:

   CHROMATIC_PROJECT_TOKEN=your_chromatic_token_here

Development Commands

# 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

Local Development Linking

To use this package in another local project during development:

1. In this package directory:

   pnpm link --global

2. In your target project:

   pnpm link td-plots

Alternatively, you can link directly (I have best results with this):

pnpm add file:../td-plots

Build td-plots and watch for new changes with

pnpm dev:full

If the target project doesn't see the new updates, try unlinking and relinking, or clearing cache

# Clear Parcel cache
rm -rf .parcel-cache
rm -rf dist

and then restarting the target project.

To unlink, run

pnpm unlink td-plots

Components

HistogramPlot

Interactive histogram component with click and selection event handling.

import { HistogramPlot } from 'td-plots';

function MyComponent() {
  const data = [1, 2, 3, 4, 5, 2, 3, 4, 1, 2];
  
  return (
    <HistogramPlot
      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:

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