@potion/element v1.0.0-next.0

Shapes/Elements

Potion provides several shape primitives for constructing visualizations. They all render SVG by default but this can be overridden using component injection. The prop names are designed to be as similar to the API of native SVG and D3 generators.

Arc

Renders an arc shape using the D3 Arc generator.

import { Arc } from '@potion/element';

Usage

<Arc
  innerRadius={150}
  outerRadius={200}
  startAngle={0}
  endAngle={Math.PI * 3 / 2}
  fill='black'
/>

Props

Area

Renders an area shape using the D3 Area generator.

import { Area } from '@potion/element';

Usage

<Area
  x={d => d.x}
  y1={d => d.y1}
  y0={80}
  points={[
    { x: 10, y1: 20 },
    { x: 30, y1: 40 },
    { x: 40, y1: 30 },
    { x: 50, y1: 70 },
    { x: 70, y1: 40 },
    { x: 90, y1: 50 },
  ]}
  fill='black'
/>```

```javascript
// TODO: document

AreaRadial

Renders a radial area shape using the D3 Radial Area generator.

import { RadialArea } from '@potion/element';

// TODO: document

Circle

Renders a circle.

import { Circle } from '@potion/element';

Usage

<Circle cx={100} cy={100} r={30} fill='black' />

Props

Group

Renders a symbol shape using the D3 Symbol generator.

import { Group } from '@potion/element';

Usage

<Group transform={{ translate: [100, 50], rotate: [45] }}>
  <Rect width={50} height={10} />
</Group>

Props

Line

Renders a line.

import { Line } from '@potion/element';

Usage

<Line x1={50} y1={50} x2={150} y2={150} stroke='black' strokeWidth={2} />

Props

LineRadial

Renders a radial line using the D3 radial line generator.

import { LineRadial } from '@potion/element';

Usage

<LineRadial
  radius={50}
  angle={({ angle }) => angle}
  fill="none"
  stroke='black'
  points={[
    { angle: 0 },
    { angle: Math.PI * 0.25 },
    { angle: Math.PI * 0.5 },
    { angle: Math.PI * 0.75 },
    { angle: Math.PI },
    { angle: Math.PI * 1.25 },
    { angle: Math.PI * 1.5 },
    { angle: Math.PI * 1.75 },
    { angle: Math.PI * 2 },
  ]}
  strokeWidth={4}
/>

Props

Rect

Renders a rectangle.

import { Rect } from '@potion/element';

Usage

<Rect x={100} y={100} width={200} height={300} fill='black' />

Props

Ribbon

Renders a ribbon using the D3 Ribbon generator.

import { Ribbon } from '@potion/element';

Usage

<Ribbon
  source={{
    startAngle: 0.7524114,
    endAngle: 1.1212972,
    radius: 200,
  }}
  target={{
    startAngle: 1.8617078,
    endAngle: 1.9842927,
    radius: 200,
  }}
  fill="black"
/>

Props

Svg

Renders an Svg element.

import { Svg } from '@potion/element';

Usage

<Svg width={400} height={400}>
  <circle r='100' cx='200' cy='200' />
</Svg>

Props

SymbolShape

Renders a symbol shape using the D3 symbol generator.

import { SymbolShape } from '@potion/element';

Usage

<SymbolShape size={500} type='symbolCross' fill='black' />

Props

Text

Renders text.

import { Text } from '@potion/element';

Usage

<Text dx={100} stroke='black'>Lorem ipsum</Text>

Props