# vue-cumulative-circle

> vue-cumulative-circle UI Component

Latest version **1.0.1** (published 2021-02-25) · 0 weekly downloads

## Install

```sh
npm install vue-cumulative-circle
pnpm add vue-cumulative-circle
yarn add vue-cumulative-circle
bun add vue-cumulative-circle
```

## 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.0.1 |
| Published | 2021-02-25 |
| First published | 2021-02-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 1 |
| Unpacked size | 121 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | KangPilGyu |
| Maintainers | eiffeltop |

## Links

- npm: https://www.npmjs.com/package/vue-cumulative-circle
- Repository: https://github.com/KangPilGyu/vue-cumulative-circle
- Homepage: https://github.com/KangPilGyu/vue-cumulative-circle#readme
- Issues: https://github.com/KangPilGyu/vue-cumulative-circle/issues
- npm.io page: https://npm.io/package/vue-cumulative-circle

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.2

## Recent versions

- 1.0.1 (latest) — 2021-02-25
- 1.0.0 — 2021-02-25

## README

# vue-cumulative-circle

> Vue Cumulative Circle Component

## Demo
![Alt Text](./demo-play.gif)

## Usage
```
import Vue from 'vue'
import App from './App'
import CumulativeCircle from "./CumulativeCircle.vue";

Vue.use(CumulativeCircle);

Vue.config.productionTip = false

new Vue({
  render: (h) => h(App),
}).$mount("#app");
```

## Example

```
<template>
  <div id="app">
    <cumulative-circle :size="200"
                      :stroke-width="8"
                      v-model="data"/>
    <div>
      <p>data</p>
      <div><label>data 0</label><input v-model="data[0].percentage"></div>
      <div><label>data 1</label><input v-model="data[1].percentage"></div>
      <div><label>data 2</label><input v-model="data[2].percentage"></div>
      <div><label>data 3</label><input v-model="data[3].percentage"></div>
    </div>
  </div>
</template>

<script>
import CumulativeCircle from "./CumulativeCircle";
export default {
  name: 'App',
  components: {
    CumulativeCircle
  },
  data() {
    return {
      data: [
        {
          color: '#ffa10e',
          percentage: 10
        },
        {
          color: '#1886ff',
          percentage: 20
        },
        {
          color: 'red',
          percentage: 20
        },
        {
          color: 'blue',
          percentage: 10
        }
      ]
    }
  }
}
</script>
```

| Prop       | Type       | Description   | default  |
| ------------- |:-------------:| -----:| -----:|
| `value` | `Array` | object array(property: color, percentage)   | $1600 |
| `size`      | `Number`     |  component size (w x h) | 200 |
| `strokeWidth` | `Number`     | circle bar width | 8 |
| `ringColor` | `String`     |  default ring color | f2f2f2 |

---
_Source: https://npm.io/package/vue-cumulative-circle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._