circle-divided-by-chord

Circle divided by chord

Circle divided by chord.

Install

npm install --save circle-divided-by-chord

or

yarn add circle-divided-by-chord

Usage

Basic example

import * as React from "react";
import CircleDividedByChord from "circle-divided-by-chord";

class Example extends React.Component {
  render() {
    return <CircleDividedByChord />;
  }
}

Another example

import * as React from "react";
import CircleDividedByChord from "circle-divided-by-chord";
import { random, range } from "lodash";

function getRandomColor() {
  return `hsl(${parseInt(256 * Math.random())}, 70%, 85%, 1)`;
}

class Example extends React.Component {
  render() {
    return (
      <div className="pa2">
        {range(56).map(i => {
          const datum1 = random(0, 100, true);
          const datum2 = random(0, 100, true);
          const angle = random(0, 360, true);
          const color1 = getRandomColor();
          const color2 = getRandomColor();

          return (
            <CircleDividedByChord
              key={i}
              radius={30}
              datum1={datum1}
              datum2={datum2}
              angle={angle}
              color1={color1}
              color2={color2}
            />
          );
        })}
      </div>
    );
  }
}

Props

Props are all optional:

Prop name	Type	Default value	What is
color1	string	#8DC0B1	color of the first section
color2	string	#F3E0D2	color of the second section
radius	number	200	radius of the circle (px)
datum1	number	20	first datum
datum2	number	80	second datum
angle	number	135	angle of the chord

License

MIT © ilariaventurini