{"_id":"@aguycalled/react-native-segmented-round-display","_rev":"2-ea44a866e44efa2c894e662687eb0234","name":"@aguycalled/react-native-segmented-round-display","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aguycalled/react-native-segmented-round-display","version":"1.0.0","description":"react-native-segmented-round-display provides a simple ARC component, drawn with react-native-svg, it can have one or more segments and its easy configurable.","main":"index.js","scripts":{"build":"babel src --out-file index.js"},"repository":{"type":"git","url":"git+https://github.com/ricardovcorrea/react-native-segmented-round-display.git"},"author":{"name":"Ricardo V. Corrêa"},"license":"ISC","bugs":{"url":"https://github.com/ricardovcorrea/react-native-segmented-round-display/issues"},"homepage":"https://github.com/ricardovcorrea/react-native-segmented-round-display#readme","devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.1","@babel/preset-env":"^7.10.1","@babel/preset-react":"^7.10.1"},"dependencies":{"prop-types":"^15.7.2","react-spring":"^8.0.27"},"peerDependencies":{"react":"17.0.2","react-dom":"17.0.2","react-native-svg":"^9.13.6"},"keywords":["react","native","react-native","chart","charts","graphs","arc","segments","progress","SVG","round"],"gitHead":"c24ac6c080cdb78df9fb457af081ebc4ed95d29e","_id":"@aguycalled/react-native-segmented-round-display@1.0.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-lfTzjoxoDP3birud/vbdHcmX/OH7B6MpPv+oGT0wBs1o2yVMsMgh+AukEo/WLOdzhFfdp1I/e1U7BeSXCuzoNQ==","shasum":"32fd7e14e4b6b8295520fc7203ffdfbe582d4934","tarball":"https://registry.npmjs.org/@aguycalled/react-native-segmented-round-display/-/react-native-segmented-round-display-1.0.0.tgz","fileCount":6,"unpackedSize":25277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4b3QCRA9TVsSAnZWagAA7BAP/15xg7NzsdB+06JUjqam\nheKyu0kOy/QI0wCMc1zDyF2TNMgl/SlaNRnZdsE6mmZPPmXrLY85W+3Vbs0h\npHWUdIjfY91xxA7CDS3k58Ys7KcCMDl4rpRQnT1XjPAx7XW1jD7f6vj71b9v\n+VF1Pv8ZGdRuQnN1b/2+gP9pQlPRXy5WZmVH0WcMDODDIAQrtOvSAaJRkvLA\nKTq1ECU+CopK04odfTO+fazi+KneqcE/mxG7AOL03en6y+43/ierH2g5/zPX\nv44yhyHnVOGeK0zGN13neSSlNu+FOew/wKYCs+TEUzmzmj5K5NabGVi4oU7J\nOBH0inXYaczX4KuJSByqFTuwr+NeBdA5Kdoj3VnCLgL6ZE4aWALqk8+7DrHR\ng8OzcSfZesvyRRF5F4onM0qFHI773qR6ZbGzL6f99qQ2gTE9EQ+VZCnsDdcJ\n3mJTRMffA66hIhX90i/f7Z7BC0wsWXQMdBtgGYxwXOFmi9lvRodWMo1ZFkbC\np3fZshEU1Q6Xyp3RZYfFZey9pNaBR5e5/bql6Vj6PhV0zl7uMqBE3jrzLsB5\n7Fhz26+Hd0F9e94IwusRMoNMiKjWthgNVhZ6SiSjQMWmboZwnbEe/aXAq1iy\nJZhLihQBDsADR0N2lgEbrP/dRJUaAxFo3bgQB2lCGItxFX9JAmyK++SXVTw3\nlOF0\r\n=G11a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7bfp81Ae9FXIamM2hviAnaESuWKxJK+gxya1UyH/NJAiEA8Etdmcai3tcRONHJUYxkbZuu9fPFhCq4rauZ1gPRgVk="}]},"_npmUser":{"name":"aguycalled","email":"alex@nav.community"},"directories":{},"maintainers":[{"name":"aguycalled","email":"alex@nav.community"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-segmented-round-display_1.0.0_1642184144833_0.6634868684188941"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aguycalled/react-native-segmented-round-display","version":"1.0.1","description":"react-native-segmented-round-display provides a simple ARC component, drawn with react-native-svg, it can have one or more segments and its easy configurable.","main":"index.js","scripts":{"build":"babel src --out-file index.js"},"repository":{"type":"git","url":"git+https://github.com/ricardovcorrea/react-native-segmented-round-display.git"},"author":{"name":"Ricardo V. Corrêa"},"license":"ISC","bugs":{"url":"https://github.com/ricardovcorrea/react-native-segmented-round-display/issues"},"homepage":"https://github.com/ricardovcorrea/react-native-segmented-round-display#readme","devDependencies":{"@babel/cli":"^7.10.1","@babel/core":"^7.10.1","@babel/preset-env":"^7.10.1","@babel/preset-react":"^7.10.1"},"dependencies":{"prop-types":"^15.7.2","react-spring":"^8.0.27"},"peerDependencies":{"react":"17.0.2","react-dom":"17.0.2","react-native-svg":"^9.13.6"},"keywords":["react","native","react-native","chart","charts","graphs","arc","segments","progress","SVG","round"],"gitHead":"c24ac6c080cdb78df9fb457af081ebc4ed95d29e","_id":"@aguycalled/react-native-segmented-round-display@1.0.1","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-9kh3fxuuI+IvjcaYQN9EkqkYgZUSwCoaSfInUaqx3kgX4XUNLEH8kxPgQqeB7/2OJicwTG0aEiIYsK86CFPeaA==","shasum":"611519e5f70a1c57d72844cc3c48481211a5c070","tarball":"https://registry.npmjs.org/@aguycalled/react-native-segmented-round-display/-/react-native-segmented-round-display-1.0.1.tgz","fileCount":10,"unpackedSize":27708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cO9CRA9TVsSAnZWagAAqAgP/jYnl67YIbZmrZDV/Dwu\nmAKhMj8/HbvNHeT0nc5tDz7IAX71P2N8alJdsYiAikNvCIk+DnbanV7uxfUN\nAkUiJyoME2LTlnc0j/qr3WfRR9Xa1pqrDDiiuxJEVh3wTcUrkdMwrH9QZ6pa\nEddhXp7EEPaNU5zGtBUu78rrH3fGQMMqJkKfI1xVTRT/9MijCt0eaLjQH5sI\nhHEJIu3TDloLlt19iSW8ff/DnEzCIKvq3Osb56Tka9+rnObEyO2lKMpAGlx4\njGCMaJOiBcl40cc/MObk2jRTQ7O1V9nlqpDrvdUUV/StJFKq2lVaZ1+oNcx+\nxDa7XyNBTokcqOeF6exDlEjEj5Mm5WoXk4qpVHxi4QrfSZFidctUfNFBMMB2\nvVqHT29VkQ0Q06/OuWY6xlwBoxxBplzS0GSghZYPLLt7JjXcwe66YgYbVzpG\nykZU8GCoNIg7GJ18qJjax9am4KhKUapLGvJGhR2FMhUG0QQPfr4GV2hjcINX\nnuvf9qumgtT1JAIQ68QXVkXDgAkQK0Aa3XKRZjBmulzDCsldcu63G6YBnQaL\nHpbdCs9ud8n26z42VcdGLvkG18dXQs4quy+7JtwKqNVPcBhJ0+B+YKfa2840\nv9XEsI5hREm3I6NVGZJN3FkrTycVIRY6GA5iFIispgH5g/YyuNMBRkGMz/4u\nEs/2\r\n=HdaA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtbklBEm0GZ9ShPKbIKdmGgoDF/zXimYFxtTi629VuwAiA9qgLFCf3Dzme/tA6irydOChPOHRG7RPf0W/E/9jxExA=="}]},"_npmUser":{"name":"aguycalled","email":"alex@nav.community"},"directories":{},"maintainers":[{"name":"aguycalled","email":"alex@nav.community"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-segmented-round-display_1.0.1_1642185661513_0.5562198889532803"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-14T18:15:44.792Z","1.0.0":"2022-01-14T18:15:44.958Z","modified":"2022-04-04T12:08:58.557Z","1.0.1":"2022-01-14T18:41:01.652Z"},"maintainers":[{"name":"aguycalled","email":"alex@nav.community"}],"description":"react-native-segmented-round-display provides a simple ARC component, drawn with react-native-svg, it can have one or more segments and its easy configurable.","homepage":"https://github.com/ricardovcorrea/react-native-segmented-round-display#readme","keywords":["react","native","react-native","chart","charts","graphs","arc","segments","progress","SVG","round"],"repository":{"type":"git","url":"git+https://github.com/ricardovcorrea/react-native-segmented-round-display.git"},"author":{"name":"Ricardo V. Corrêa"},"bugs":{"url":"https://github.com/ricardovcorrea/react-native-segmented-round-display/issues"},"license":"ISC","readme":"\n\n## react-native-segmented-round-display\n[](https://www.npmjs.com/package/react-native-segmented-round-display) [](https://www.npmjs.com/package/react-native-segmented-round-display) \n\n\n`react-native-segmented-round-display` provides a simple ARC component, drawn with `react-native-svg`, it can have one or more segments and its easy configurable.\n\n\n\n## Features\n- One segment\n- \tMultiple segments\n- \tFill animation\n- \tControl of fill animation duration\n- \tAnimated tag with value\n- \tCustom value formater\n- \tConfigurable colors\n- \tConfigurable ARC radius and total size in degrees\n- \tConfigurable space between arc segments\n- \t[React Web version](https://github.com/ricardovcorrea/react-segmented-round-display \"React Web version\")\n\n## Installation\n**first**\n\nThis package uses `react-native-svg` to draw SVG`s, so please install it following this [installation manual](https://github.com/react-native-community/react-native-svg#installation \"installation manual\").\n\n**then**\n\n`yarn add react-native-segmented-round-display`\n\n**or**\n\n`npm install react-native-segmented-round-display --save`\n\n## Usage\n\nHere's a simple example. To render output like this:\n\n\n\n\n```jsx\nimport React from 'react';\nimport {SafeAreaView, ScrollView, StatusBar} from 'react-native';\n\nimport SegmentedRoundDisplay from 'react-native-segmented-round-display';\n\nconst App = () => {\n const examples = [\n {\n displayValue: true,\n formatValue: (value) => `R$ ${value.toFixed(2)}`,\n segments: [\n {\n total: 80,\n filled: 40,\n },\n ],\n },\n {\n displayValue: true,\n formatValue: (value) => `R$ ${value.toFixed(2)}`,\n segments: [\n {\n total: 80,\n filled: 80,\n },\n {\n total: 30,\n filled: 15,\n },\n ],\n },\n {\n displayValue: true,\n formatValue: (value) => `R$ ${value.toFixed(2)}`,\n segments: [\n {\n total: 80,\n filled: 80,\n },\n {\n total: 30,\n filled: 30,\n },\n {\n total: 100,\n filled: 40,\n },\n ],\n }\n ];\n\n return (\n <>\n \n \n \n {examples.map((example, i) => (\n \n ))}\n \n \n \n );\n};\n\nexport default App;\n```\n\n## Common props\n| Name | Type | Default | Description |\n| ------------ | ------------ | ------------ | ------------ |\n| segments | Array **of** { total: int, filled: int } | [] | segments to be rendered |\n| filledArcWidth | int | 7 | thickness of filled arc |\n| emptyArcWidth | int | 7 | thickness of empty arc |\n| arcSpacing | int | 7 | space between segments |\n| totalArcSize | int | 280 | total arc size in degrees |\n| radius | int | 150 | radius of the arc |\n| emptyArcColor | string | #ADB1CC | color of empty arc |\n| filledArcColor | string | #5ECCAA | color of filled arc |\n| incompleteArcColor | string | #23318C | color of incomplete arc |\n| animated | bool | true | enable/disable segments fill animation |\n| animationDuration | int | 1000 | duration of fill animation in MS |\n| displayValue | bool | false | enable/disable the value display |\n| formatValue | function | {} | function to formar the value |\n| valueBoxColor | string | #23318C | color of box that holds the value if displayValue = true |\n| valueFontColor | string | #FFFFFF | color of text of value if displayValue = true |\n| styles | Styles object | {} | styles to be applied to container |\n\n## Run example\n\n```bash\ngit clone https://github.com/ricardovcorrea/react-native-segmented-round-display.git\ncd react-native-segmented-round-display/example\nyarn\n\ncd ios && pod install\ncd .. \n\nyarn start\nreact-native run-ios\n```\n\n## Contributors\n\n### Ricardo Vaz Corrêa\n- [ricardovazcorrea@gmail.com](mailto:ricardovazcorrea@gmail.com \"Email - ricardovazcorrea@gmail.com\")\n- [Github](https://github.com/ricardovcorrea \"Github\")\n- [Linkedin](https://www.linkedin.com/in/ricardo-vaz-correa/ \"Linkedin\")","readmeFilename":"README.md"}