{"_id":"@careacademy/vue2-circle-progress","_rev":"8-fb8f494b1830dbcefbf6c304a54f8f8a","name":"@careacademy/vue2-circle-progress","dist-tags":{"latest":"1.2.3"},"versions":{"1.2.3":{"name":"@careacademy/vue2-circle-progress","version":"1.2.3","author":{"name":"vaibhavraj roham"},"_id":"@careacademy/vue2-circle-progress@1.2.3","maintainers":[{"name":"nicolacares","email":"nreyes@careacademy.com"},{"name":"aomrancareacademy","email":"aomran@careacademy.com"}],"homepage":"https://github.com/CareAcademy/vue-circle-progress#readme","bugs":{"url":"https://github.com/CareAcademy/vue-circle-progress/issues"},"dist":{"shasum":"eb0fa516d61676624ca055bbe3db55474dea4420","tarball":"https://registry.npmjs.org/@careacademy/vue2-circle-progress/-/vue2-circle-progress-1.2.3.tgz","fileCount":21,"integrity":"sha512-rDm4PLmSe1kylUvaOSbNQN7ksTRu8jkxlYV0sHs4kBdo1u/Vrq+K8qeAs+Qpt982GIVRgnYuQ0NMlkI+FIP7Mw==","signatures":[{"sig":"MEUCIFUWFMZbxQZv9jbXoBEsscvlP7cYXPt+dNT9eUTlYoK0AiEA3mY7h/qjAH/Jo4m6VrspXgBZCRbn3Yy1Hus0Fve1W/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2424332},"main":"./dist/vue-circle-progress.js","gitHead":"332be16d07e9f316517f0e5a7cc535d99c85daa7","scripts":{"dev":"webpack-dev-server --inline --hot --config ./build/dev.js --port 8080","build":"cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/prod.js && npm run build:demo","prepare":"npm run build","build:demo":"cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/dev.js"},"_npmUser":{"name":"aomrancareacademy","email":"aomran@careacademy.com"},"repository":{"url":"git+https://github.com/CareAcademy/vue-circle-progress.git","type":"git"},"_npmVersion":"9.5.0","description":"A Vue.js component to draw animated circular progress bars","directories":{},"_nodeVersion":"18.15.0","dependencies":{"vue":"^2.0.0","jquery-easing":"0.0.1","jquery-circle-progress":"^1.2.2"},"_hasShrinkwrap":false,"devDependencies":{"less":"^2.7.2","fittext":"^1.0.1","webpack":"^1.12.2","cross-env":"^1.0.6","babel-core":"^6.0.0","css-loader":"^0.23.0","url-loader":"^0.5.7","vue-loader":"^8.5.4","FitText-UMD":"^1.0.0","file-loader":"^0.8.4","json-loader":"^0.5.4","less-loader":"^2.2.3","babel-loader":"^6.0.0","style-loader":"^0.13.1","vue-html-loader":"^1.2.3","vue-style-loader":"^1.0.0","vue-hot-reload-api":"^2.0.6","webpack-dev-server":"^1.12.0","autoprefixer-loader":"^3.2.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-plugin-transform-runtime":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue2-circle-progress_1.2.3_1694801279693_0.9635327999917147","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-09-15T18:07:59.692Z","modified":"2025-02-06T13:59:51.079Z","1.2.3":"2023-09-15T18:07:59.978Z"},"bugs":{"url":"https://github.com/CareAcademy/vue-circle-progress/issues"},"author":{"name":"vaibhavraj roham"},"homepage":"https://github.com/CareAcademy/vue-circle-progress#readme","repository":{"url":"git+https://github.com/CareAcademy/vue-circle-progress.git","type":"git"},"description":"A Vue.js component to draw animated circular progress bars","maintainers":[{"email":"drodrigue@careacademy.com","name":"msdaciacare"},{"email":"kmcfadden@careacademy.com","name":"ca-kmcfadden"},{"email":"ferris@careacademy.com","name":"ferris_at_careacademy"},{"email":"dhershman@careacademy.com","name":"dhershmancare"},{"email":"product@careacademy.com","name":"product_careacademy"}],"readme":"# vue-circle-progress\n\n> A Vue.js component to draw animated circular progress bars\n\nDraw animated progress circle like below,\n\n\n\n---\n\n## Install\n\n```\n// For Vue.js 2.0+\nnpm install vue2-circle-progress\n```\n\n## Usage\n\n1. Import the module\n2. Register it as a component as you would any other Vue component\n3. Use it within your template\n\n### Example\n\n```vue\n\n
\n
A Vue.js component to draw animated circular progress bars!
\n \n
Slot!
\n \n
\n\n\n\n```\n\n## Props\n\nFollwing `props` are used while initialization\n\n> Note : Only `progress` is a required prop. Others are optional\n\n| Prop Name | Type | Description |\n| --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| progress `(required)` | Number | Total progress of circle (filled area) |\n| scale | Number | Scale of circle Default : `100` |\n| precision | Number | Circle precision Default : `0` |\n| size | Number | Size of circle Default : `200` |\n| reverse | Boolean | Reverse animation and arc draw Default:`false` |\n| line-cap | String | Arc line cap: \"butt\", \"round\" or \"square\" `Default: \"butt\"` |\n| fill | Object | The arc fill config. You may specify next: - `\"#ff1e41\"` - `{ color: \"#ff1e41\" }` - `{ color: 'rgba(255, 255, 255, .3)' }` - `{ gradient: [\"red\", \"green\", \"blue\"] }` - `{ gradient: [[\"red\", .2], [\"green\", .3], [\"blue\", .8]] }` - `{ gradient: [ ... ], gradientAngle: Math.PI / 4 }` - `{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }` - `{ image: \"http://i.imgur.com/pT0i89v.png\" }` - `{ image: imageInstance }` - `{ color: \"lime\", image: \"http://i.imgur.com/pT0i89v.png\" }` Default: `{ gradient: [\"#3aeabb\", \"#fdd250\"] }` |\n| empty-fill | String | Color of the \"empty\" arc. Only a color fill supported by now Default: `\"rgba(0, 0, 0, .1)\"` |\n| animation | Mixed | Animation config. See [jQuery animations](http://api.jquery.com/animate/). You may also set it to `false` Default: `{ duration: 1200, easing: \"circleProgressEasing\" }` `\"circleProgressEasing\"` _is just a ease-in-out-cubic easing_ |\n| animation-start-value | Number | Default animation starts at `0.0` and ends at specified `value`. Let's call this direct animation. If you want to make reversed animation then you should set `animationStartValue` to `1.0`. Also you may specify any other value from `0.0` to `1.0` Default: `0.0` |\n| start-angle | Number | Initial angle (for `0` value) Default: `-Math.PI` |\n| insert-mode | String | Canvas insertion mode: append or prepend it into the parent element Default: `\"prepend\"` |\n| thickness | Number | Width of the arc. By default it's automatically calculated as 1/14 of `size` but you may set your own number Default: `\"auto\"` |\n| show-percent | Boolean | Show loaded percentage inside circle. If `inner-text` property is set then percentage will not be shown. Default : `true` |\n| show-legend | Boolean | Shows percentage text Default : `true` |\n| legendClass | String | Classes for percentage text Default : `true` |\n\n---\n\n## Events\n\nEvents emitted by the component to the parent.\n\n| Event Name | Description |\n| --------------------------------------------- | ----------------------------------------------------- |\n| vue-circle-init(event) | This event is emmited after the circle is initialized |\n| vue-circle-progress(event,progress,stepValue) | This event is emitted on every progress step |\n| vue-circle-end(event) | This event is emitted after completing progress |\n\n---\n\n## Methods\n\nMethods you can call on the component.\n\n| Method | Description |\n| --------------------- | ------------------------------------------------------------------------------------------------- |\n| updateProgress(value) | It will update component progress value and animate the change. **It doesn't redraw the widget.** |\n| updateFill(fill) | It will update component fill color. |\n\n## Using Methods\n\nMethods can be called from your parent component by making use of the special tag \"ref\".\n\nWhen you initialize the component add a unique ID to the component using the ref tag, like this\n\n```html\n\n```\n\nThen from your parent Vue instance, you can call the methods by using the following:\n\n```javascript\nthis.$refs.myUniqueID.updateProgress(21)\nthis.$refs.myUniqueID.updateFill('#ff1e41')\n```\n\n## Development\n\nIf you feel you can make this better, you are welcome to contribute. I'd love to see your ideas.\n\n```bash\n# install dependencies\nnpm install\n\n# serve example at localhost:8080\nnpm run dev\n\n# build any changes made\nnpm run build\n```\n\n## Thanks\n\nThis is a Vue2 component built with wrapper around [this library](https://github.com/kottenator/jquery-circle-progress) Thanks to **Rostyslav Bryzgunov**.\n","readmeFilename":"README.md"}