# react-segmented-round-display

> react-segmented-round-display provides a simple ARC component, drawn with SVG, it can have one or more segments and its easy configurable.

Latest version **1.1.5** (published 2020-06-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-segmented-round-display
pnpm add react-segmented-round-display
yarn add react-segmented-round-display
bun add react-segmented-round-display
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2020-06-01 |
| First published | 2020-05-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 22.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ricardo V. Corrêa |
| Maintainers | ricardovazcorrea |
| Keywords | react, chart, charts, graphs, arc, segments, progress, SVG, round |

## Links

- npm: https://www.npmjs.com/package/react-segmented-round-display
- Repository: https://github.com/ricardovcorrea/react-segmented-round-display
- Homepage: https://github.com/ricardovcorrea/react-segmented-round-display#readme
- Issues: https://github.com/ricardovcorrea/react-segmented-round-display/issues
- npm.io page: https://npm.io/package/react-segmented-round-display

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-spring](https://npm.io/package/react-spring.md) ^8.0.27

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.1.5 (latest) — 2020-06-01
- 1.1.4 — 2020-06-01
- 1.1.3 — 2020-05-31
- 1.1.2 — 2020-05-31
- 1.1.1 — 2020-05-29
- 1.1.0 — 2020-05-29
- 1.0.0 — 2020-05-28

## README

## react-segmented-round-display
[![Version](https://img.shields.io/npm/v/react-segmented-round-display.svg)](https://www.npmjs.com/package/react-segmented-round-display)  [![NPM](https://img.shields.io/npm/dm/react-segmented-round-display.svg)](https://www.npmjs.com/package/react-segmented-round-display) ![STARS](https://img.shields.io/github/stars/ricardovcorrea/react-segmented-round-display?style=social)


`react-segmented-round-display` provides a simple ARC component, drawn with SVG, it can have one or more segments and its easy configurable.

![Example](https://raw.githubusercontent.com/ricardovcorrea/react-segmented-round-display/master/examples.gif)

## Features
-   One segment
- 	Multiple segments
- 	Fill animation
- 	Control of fill animation duration
- 	Animated tag with value
- 	Custom value formater
- 	Configurable colors
- 	Configurable ARC radius and total size in degrees
- 	Configurable space between arc segments
- 	[React Native version](https://github.com/ricardovcorrea/react-native-segmented-round-display "React Native version")

## Installation
`yarn add react-segmented-round-display`

**or**

`npm install react-segmented-round-display --save`

## Usage

Here's a simple example. To render output like this:

![Usage example](https://raw.githubusercontent.com/ricardovcorrea/react-segmented-round-display/master/usage_example.gif)

```jsx
import React from 'react';
import SegmentedRoundDisplay from 'react-segmented-round-display';

function App() {

  const examples = [
    {
      displayValue: true,
      formatValue: (value) => `R$ ${value.toFixed(2)}`,
      segments: [
        {
          total: 80,
          filled: 40
        }
      ]
    },
    {
      displayValue: true,
      formatValue: (value) => `R$ ${value.toFixed(2)}`,
      segments: [
        {
          total: 80,
          filled: 80
        },
        {
          total: 30,
          filled: 15
        }
      ]
    },
    {
      displayValue: true,
      formatValue: (value) => `R$ ${value.toFixed(2)}`,
      segments: [
        {
          total: 80,
          filled: 80
        },
        {
          total: 30,
          filled: 30
        },
        {
          total: 100,
          filled: 40
        }
      ]
    }
  ]
  return (
    <div>
      {examples.map((example, i) => (<SegmentedRoundDisplay style={{ marginLeft: 30 }} key={i} {...example} />))}
    </div>
  );
}

export default App;

```

## Common props
| Name  | Type  | Default  | Description  |
| ------------ | ------------ | ------------ | ------------ |
|  segments | Array **of** { total: int, filled: int }  | []  | segments to be rendered  |
| filledArcWidth  | int | 7  | thickness of filled arc  |
| emptyArcWidth  | int   | 7  | thickness of empty arc |
| arcSpacing  |  int |  7 | space between segments  |
| totalArcSize |  int | 280  | total arc size in degrees  |
| radius  | int  | 150  | radius of the arc  |
| emptyArcColor  |  string | #ADB1CC  |  color of empty arc |
| filledArcColor | string  |  #5ECCAA |  color of filled arc |
| incompleteArcColor  | string  | #23318C  | color of incomplete arc  |
| animated  | bool  | true  | enable/disable segments fill animation  |
| animationDuration  | int  | 1000  | duration of fill animation in MS  |
| displayValue  | bool  | false  | enable/disable the value display  |
| formatValue  | function  | {}  | function to formar the value |
| valueBoxColor  | string | #23318C  | color of box that holds the value if displayValue = true  |
| valueFontColor  | string  | #FFFFFF  | color of text of value if displayValue = true  |
| styles  | Styles object  | {}  | styles to be applied to container  |

## Run example

```bash
git clone https://github.com/ricardovcorrea/react-segmented-round-display.git
cd react-segmented-round-display/example
yarn
yarn start
```

## Contributors

### Ricardo Vaz Corrêa
- [ricardovazcorrea@gmail.com](mailto:ricardovazcorrea@gmail.com "Email - ricardovazcorrea@gmail.com")
- [Github](https://github.com/ricardovcorrea "Github")
- [Linkedin](https://www.linkedin.com/in/ricardo-vaz-correa/ "Linkedin")

---
_Source: https://npm.io/package/react-segmented-round-display · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._