React Strip Plot

A react strip plot implementation in the style of Radix Primitives

Installation

yarn add @datum-ui/react-strip-plot

# or

npm install @datum-ui/react-strip-plot

Usage

import * as StripPlot from "@datum-ui/react-strip-plot";

export default () => (
  <StripPlot.Root>
    <StripPlot.Axis />
    <StripPlot.Datapoint />
  </StripPlot.Root>
);

API Reference

Root

This extends a <svg /> element and accepts all props that a <svg /> element accepts.

| Prop | Description | Type | Default | | --------------- | ---------------------------------------------------------------------- | ------------------------------ | ------------------ | | orientation | The orientation of the strip plot | "horizontal" | "vertical" | horizontal | | range | The range of strip plot values | [number, number] | [0, 100] | | scaleFunction | A scale function that maps a value to a position based on the range. | (value: number) => number | (value) => value |

Axis

This extends a <line /> element and accepts all props that a <line /> element accepts.

| Prop | Description | Type | Default | | ------- | ------------------------------------------------------- | -------------------- | ------- | | start | Set's either x1 or y1 depending on Root's orientation | number | string | 0% | | end | Set's either x2 or y2 depending on Root's orientation | number | string | 100% |

Datapoint

This extends a <g /> element and accepts all props that a <g /> element accepts.

| Prop | Description | Type | Default | | ------- | -------------------------- | -------- | ------- | | value | The value of the datapoint | number | 0 |