{"_id":"@redsift/d3-rs-radial-chart","_rev":"108-5a9ed58703968534332c9882345d90b2","name":"@redsift/d3-rs-radial-chart","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.1":{"name":"@redsift/d3-rs-radial-chart","version":"0.2.1","keywords":["redsift-ui-component","redsift-ui","redsift"],"author":{"name":"Martin Hecher"},"license":"MIT","_id":"@redsift/d3-rs-radial-chart@0.2.1","maintainers":[{"name":"martinhecher","email":"martin@redsift.io"}],"homepage":"https://github.com/redsift/d3-rs-radial-chart","bugs":{"url":"https://github.com/redsift/d3-rs-radial-chart/issues"},"dist":{"shasum":"bf8182ffae0d58895dfedd46181aea189b38179a","tarball":"https://registry.npmjs.org/@redsift/d3-rs-radial-chart/-/d3-rs-radial-chart-0.2.1.tgz","integrity":"sha512-36QPnDN4Yi+O7pefT4j6YD+fIcqKkpeN3s8zJ63LtCLUQ5hONvfha3HNmddKJdg2FmyfwTzUdAZHTJSSgH622A==","signatures":[{"sig":"MEYCIQCIyIurj/DfeeosG3vMRZ/tLZ3YMdvAcwPsl0EWzYyMrAIhALwZxXMd93GIyVYJbQgp8qwGcHY/oFm69CsS+QltsMl9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/js/d3-rs-radial-chart.umd-es2015.js","_from":".","_shasum":"bf8182ffae0d58895dfedd46181aea189b38179a","scripts":{"test":"echo \"No test specified\" && exit 0","build":"node ./node_modules/gulp/bin/gulp.js build","serve":"npm run build && node ./node_modules/gulp/bin/gulp.js serve","start":"npm run build && npm run serve","prepublish":"npm run build"},"_npmUser":{"name":"martinhecher","email":"martin@redsift.io"},"repository":{"url":"git+https://github.com/redsift/d3-rs-radial-chart.git","type":"git"},"_npmVersion":"3.10.9","description":"A customizable radial chart.","directories":{},"jsnext:main":"./src/index.js","_nodeVersion":"5.10.1","dependencies":{"@redsift/d3-rs-core":"^0.1.5","@redsift/ui-rs-core":"^0.8.10"},"devDependencies":{"del":"*","gulp":"^3.9.0","gulp-concat":"*","browser-sync":"^2.11.1","@redsift/redsift-bundler":"^0.5.5"},"_npmOperationalInternal":{"tmp":"tmp/d3-rs-radial-chart-0.2.1.tgz_1479223744289_0.07572593074291945","host":"packages-12-west.internal.npmjs.com"}}},"time":{"created":"2016-11-15T15:29:06.615Z","modified":"2026-09-15T11:13:53.048Z","0.2.1":"2016-11-15T15:29:06.615Z"},"bugs":{"url":"https://github.com/redsift/d3-rs-radial-chart/issues"},"author":{"name":"Martin Hecher"},"license":"MIT","homepage":"https://github.com/redsift/d3-rs-radial-chart","keywords":["redsift-ui-component","redsift-ui","redsift"],"repository":{"url":"git+https://github.com/redsift/d3-rs-radial-chart.git","type":"git"},"description":"A customizable radial chart.","maintainers":[{"email":"operations@redsift.io","name":"redsift_operations"},{"email":"rahul@redsift.io","name":"rahulpowar"},{"email":"randal@redsift.io","name":"randalpinto"},{"email":"nicolas.jaremek@redsift.io","name":"njaremek"},{"email":"eduardo.arada@redsift.io","name":"earada"},{"email":"jose.cabrera@redsift.io","name":"jmccanal"},{"email":"bernat.mayolas@redsift.io","name":"bmayolasredsift"},{"email":"raul.lorenzo@redsift.io","name":"raul.lorenzo.redsift"},{"email":"pidupuis@protonmail.com","name":"pierredupuis"},{"email":"caluminus@hotmail.co.uk","name":"luminous_cal"},{"email":"hector.ortega@redsift.io","name":"hortega_rs"},{"email":"asim.gunes@smartbee.uk","name":"asimgunes"},{"email":"dmitry@redsift.io","name":"sometimesitbetterstepasideandnotusejavascript"},{"email":"serhii.trofimenko@redsift.io","name":"sega057"},{"email":"julian.picht@redsift.io","name":"julian.picht"},{"email":"pedro.jimenez@redsift.io","name":"pedro.lop.j"},{"email":"anne.shackelford@redsift.io","name":"anneshackeford"},{"email":"piero.nima@redsift.io","name":"pieronima"},{"email":"bhushan.lokhande@redsift.io","name":"bhushan-redsift"},{"email":"mike.cardwell@redsift.io","name":"mikehardenize"},{"email":"jay.singh@redsift.io","name":"jaydsingh11"},{"email":"antony.seedhouse@redsift.io","name":"synotnars"},{"email":"nadim.lahoud@redsift.io","name":"lahoud"},{"email":"juan.baquero@redsift.io","name":"jmbaquero_redsift"}],"readme":"# ui-rs-radial-chart\n\n`ui-rs-radial-chart` is a component for creating a customizable radial chart for your application, e.g. to show data over time like monthly expenses on taxis over a year. It is provided as a [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements) for easy integration into your projects.\n\n> If your browser does *NOT* support *custom elements* natively (see [caniuse](http://caniuse.com/#feat=custom-elements)) you have to install the [web components shim](http://webcomponents.org/) and include it in your project before including this component!\n\nThe component is part of the [RedsiftUI](https://github.com/redsift/redsift-ui) library. For a documentation of the hero unit see the [official RedsiftUI documentation](https://docs.redsift.io/docs/client-code-redsift-ui).\n\n## Builds\n\n[](https://circleci.com/gh/Redsift/ui-rs-radial-chart)\n\nA UMD build is available from //static.redsift.io/reusable/ui-rs-radial-chart/latest/ui-rs-radial-chart.umd-es2015.min.js.\n\nTo build locally checkout this repository and\n\n```bash\n> cd ui-rs-radial-chart\n> npm install\n> npm run build\n```\n\nThis will create a `./dist` folder with the Javascript and CSS files.\n\n## Browser Usage\n\nFirst include the CSS file in the `` of your page:\n\n```html\n\n```\n\nAdditionally include the Javascript on the bottom of the ``:\n\n```html\n\n\n```\n\nIncluding the Javascript already registers the custom element `rs-radial-chart` with the browser. Make sure to include [D3](https://d3js.org/) *before* the component, as it depends on it!\n\nUse the following HTML code to create a `rs-radial-chart` element:\n\n```html\n\n```\n\nYou can optionally provide a DIV with the ID `chart` like so:\n\n```html\n\n \n\n```\n\nIf provided the chart will render into this DIV, giving you more control over e.g. styling. If not provided a DIV is created automatically by the element.\n\nData is added to the chart via Javascript in the following form:\n\n```Javascript\nvar chart = document.querySelector('rs-radial-chart');\n\nvar data = [{\n name: \"Jan\",\n value: 3.6732592034888905,\n color: () => { return '#00ff00'; }\n}, {\n name: \"Feb\",\n value: 3.3835721480313685,\n color: () => { return '#00ff00'; },\n classed: \"stripe\"\n}, {\n name: \"Mar\",\n value: 46.90614320865888,\n color: () => { return '#00ff11'; }\n}, {\n name: \"Apr\",\n value: 16.262593631395912,\n color: () => { return '#00ff22'; }\n}, {\n name: \"May\",\n value: 53.40171839979518,\n color: () => { return '#00ff33'; }\n}, {\n name: \"Jun\",\n value: 15.899117927917139,\n color: () => { return '#00ff44'; }\n}, {\n name: \"Jul\",\n value: 6.650584346480011,\n color: () => { return '#00ff55'; }\n}, {\n name: \"Aug\",\n value: 26.689381547140503,\n color: () => { return '#00ff66'; }\n}, {\n name: \"Sep\",\n value: 34.29461737322482,\n color: () => { return '#00ff77'; }\n}, {\n name: \"Oct\",\n value: 26.4320733402228,\n color: () => { return '#00ff88'; }\n}, {\n name: \"Nov\",\n value: 51.88087153647562,\n color: () => { return '#00ff99'; }\n}, {\n name: \"Dec\",\n value: 54.6380052855129,\n color: () => { return '#00ffaa'; }\n}];\n\nchart.data = data;\n```\n\n#### CAUTION:\n\nIf your browser does not support *custom elements* (and only then!) make sure to wrap the above code into the following code:\n\n```javascript\nwindow.addEventListener('WebComponentsReady', function(e) {\n // setup code ...\n});\n```\n\nSee a description of why this is necessary [here](https://www.polymer-project.org/1.0/docs/migration.html#polymer-ready).\n\n# Development Setup\n\nFor development run\n\n```bash\n> npm run serve\n```\n\nwithin the repository folder. It will start a web server serving the content of `./samples` and supports live-reloading when a source file is changed.\n","readmeFilename":"README.md"}