Power

The Power component displays a growing power indicator between 2 angles.

Live Editor

<Knob
    size={100}
    value={50}
    min={0}
    max={100}
    angleOffset={220}
    angleRange={280}
>
    <Power
        percentageFrom={0}
        radiusFrom={40}
        widthFrom={0}
        percentageTo={1}
        radiusTo={40}
        widthTo={20}
        color="#FC5A96"
        interpolateTo={true}
    />
</Knob>

Result

Loading...

Stack

The Power component can be stacked together the following way.

Live Editor

<Knob
    size={100}
    value={50}
    min={0}
    max={100}
    angleOffset={220}
    angleRange={280}
>
    <Power
        percentageFrom={0}
        radiusFrom={40}
        widthFrom={0}
        percentageTo={0.5}
        radiusTo={40}
        widthTo={10}
        color="#6bca6c"
        interpolateTo={true}
    />
    <Power
        percentageFrom={0.5}
        radiusFrom={40}
        widthFrom={10}
        percentageTo={0.75}
        radiusTo={40}
        widthTo={15}
        color="#fccf41"
        interpolateTo={true}
    />
    <Power
        percentageFrom={0.75}
        radiusFrom={40}
        widthFrom={15}
        percentageTo={1}
        radiusTo={40}
        widthTo={20}
        color="#fb5463"
        interpolateTo={true}
    />
</Knob>

Result

Loading...

Geometry

Here is the way the component is built from the properties.

The shape following the linear interpolation of the 3 parameters pencentage, radius, width provided for the 2 positions from and to.

Properties

Prop	Type	Description
color	?string	Color of the spiral.
percentageFrom	0 <= number <= 1	Angular starting point of the component.
percentageTo	0 <= number <= 1	Angular ending point of the component.
radiusFrom	?number	Radius of the starting point of the component. If unset the radius of the knob is used.
radiusTo	?number	Radius of the ending point of the component. If unset the radius of the knob is used.
widthFrom	number	Width of the component at the starting point.
widthTo	number	Width of the component at the ending point.
className	?string	Tag the component with this class name.
interpolateTo	?boolean	If set, the ending position of the component is computed from an interpolation between from/to positions with the actual location of the knob.