open-index/open-npm huggingface dataset:
npm package: @goacgras/line-chart
Description: Reusable React + D3 line chart with tooltip and legend toggles.
Latest version: 0.1.1

# LineChart

Reusable React + D3 multi-series line chart with a fast nearest-point tooltip, clickable legend toggles, and generic datum accessors.

## Public API

- Default export: `LineChart`
- Type exports: `LineChartProps`, `LineChartSeries`, `LineChartDatum`, `LineChartXValue`, `LineChartXScale`

## Import

```ts
import LineChart, { type LineChartSeries } from "@goacgras/line-chart";
import "@goacgras/line-chart/style.css";
```

## Basic usage

```tsx
import LineChart, { type LineChartSeries } from "@goacgras/line-chart";
import "@goacgras/line-chart/style.css";

type TrafficDatum = {
  timestamp: Date;
  sessions: number;
};

const dataSets: LineChartSeries<TrafficDatum>[] = [
  {
    id: "search",
    label: "Search",
    color: "#2f6a4a",
    data: [
      { timestamp: new Date("2025-01-01T00:00:00Z"), sessions: 180 },
      { timestamp: new Date("2025-01-01T01:00:00Z"), sessions: 192 },
    ],
  },
];

export function Example() {
  return (
    <LineChart
      dataSets={dataSets}
      getX={(datum) => datum.timestamp}
      getY={(datum) => datum.sessions}
      legendPosition="bottom"
      lineStrokeWidth={1.5}
      hoverPointRadius={3.5}
      hoverPointStrokeWidth={2}
    />
  );
}
```

## Notes for publishing

- The component stylesheet lives in `LineChart.css` and should be shipped with the package.
- The package lives in its own standalone `line-chart-package` project folder and is not wired through npm workspaces.
- Build the package from this project root with `npm run build`.
- `react` and `react-dom` are peer dependencies. `d3` is a runtime dependency.

## Recommended local development workflow

Use the included `playground` app for fast iteration, then run a tarball check before you publish.

### 1. Install dependencies

From the package root:

```bash
npm install
npm run playground:install
```

### 2. Run the library build in watch mode

In one terminal from the package root:

```bash
npm run dev:lib
```

This keeps `dist/` updated as you edit the component source.

### 3. Run the real React consumer app

In a second terminal from the package root:

```bash
npm run dev:playground
```

The playground imports the package through a local `file:..` dependency, so you can validate it from a separate React app before publishing.

### 4. Run a publish-like check

Before publishing, generate the exact package tarball and inspect or install it elsewhere:

```bash
npm run pack:check
```

That creates a `.tgz` file with the same contents npm would publish.