react-plot/README.md

Library of React components to render SVG 2D plots.

<h3 align="center">
  <a href="https://www.zakodium.com">
    <img src="https://www.zakodium.com/brand/zakodium-logo-white.svg" width="50" alt="Zakodium logo" />
  </a>
  <p>
    Maintained by <a href="https://www.zakodium.com">Zakodium</a>
  </p>
</h3>

# react-plot

[![NPM version](https://img.shields.io/npm/v/react-plot.svg)](https://www.npmjs.com/package/react-plot)
[![npm download](https://img.shields.io/npm/dm/react-plot.svg)](https://www.npmjs.com/package/react-plot)
[![license](https://img.shields.io/npm/l/react-plot.svg)](https://github.com/zakodium-oss/react-plot/blob/main/LICENSE)

Library of React components to render SVG 2D plots.

Check our exhaustive [documentation here](https://react-plot.zakodium.com/).

## [Storybook](https://react-plot.pages.dev/)

```tsx
const Example = () => (
  <Plot
    width={550}
    height={500}
    margin={{ bottom: 50, left: 90, top: 50, right: 100 }}
  >
    <Heading
      title="Electrical characterization"
      subtitle="current vs voltage"
    />
    <LineSeries
      data={[
        { x: 0, y: 0 },
        { x: 1, y: 1 },
        { x: 2, y: 2 },
        { x: 3, y: 3 },
        { x: 4, y: 3 },
        { x: 5, y: 3 },
      ]}
      xAxis="x"
      yAxis="y"
      lineStyle={{ strokeWidth: 3 }}
      label="Vg = 7V"
      displayMarker={false}
    />
    <LineSeries
      data={[
        { x: 0, y: 0 },
        { x: 1, y: 1 },
        { x: 2, y: 2 },
        { x: 3, y: 3 },
        { x: 4, y: 3 },
        { x: 5, y: 3 },
      ]}
      xAxis="x"
      yAxis="y"
      displayMarker={true}
      markerShape="circle"
      label="Vg = 3V"
    />
    <Axis
      id="x"
      position="bottom"
      label="Drain voltage [V]"
      displayPrimaryGridLines
      max={6.1 / factor}
    />
    <Axis
      id="y"
      position="left"
      label="Drain current [mA]"
      displayPrimaryGridLines
      max={6.1 * factor}
    />
    <Legend position="right" />
  </Plot>
);
```

This code will result in this example

![Plot Example](./PlotExample.png)

## Installation

`$ npm install --save react-plot`

## Debugging

For major React hooks debugging use [`@simbathesailor/use-what-changed`](https://github.com/simbathesailor/use-what-changed)

```tsx
import { useWhatChanged } from '@simbathesailor/use-what-changed';

function Example() {

  // useEffect, useCallback or useMemo
  useWhatChanged([a, b, c, d]); // debugs the below useEffect

  // displays names of variables instead of index
  // useWhatChanged([a, b, c, d], 'a, b, c, d', 'anysuffix-string');
  React.useEffect(() => {
    // console.log("some thing changed , need to figure out")
  }, [a, b, c, d]);
```

## License

[MIT](./LICENSE)