{"_id":"@redsift/ui-rs-radial-chart","_rev":"103-4f7d9c4d28da32e2ac2f4a65020e469b","name":"@redsift/ui-rs-radial-chart","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@redsift/ui-rs-radial-chart","version":"0.1.0","keywords":["redsift-ui-component","redsift-ui","redsift"],"author":{"name":"Martin Hecher"},"license":"MIT","_id":"@redsift/ui-rs-radial-chart@0.1.0","maintainers":[{"name":"martinhecher","email":"martin@redsift.io"}],"homepage":"https://github.com/redsift/ui-rs-radial-chart","bugs":{"url":"https://github.com/redsift/ui-rs-radial-chart/issues"},"dist":{"shasum":"dc2ca580f95f8be6c6ea87ccc448fa614b0bbdb2","tarball":"https://registry.npmjs.org/@redsift/ui-rs-radial-chart/-/ui-rs-radial-chart-0.1.0.tgz","integrity":"sha512-nGnA3blCqVRNfGKG3vAFgmjicEMHpF3yqaD1p0b2M3zmyoWwLtR6/FAbFClZ13+CxmfXMg3K5+kaoEx7lVe+RA==","signatures":[{"sig":"MEUCIQCz57afPYqZFA6oXCxvkPPRM5U+IKo+eLboq6XU7jS4AgIgNPWgxmkhUkeFGijNmsWH/ggnecRWGM7aZOZnCx6BQWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/js/ui-rs-radial-chart.umd-es2015.js","_from":".","_shasum":"dc2ca580f95f8be6c6ea87ccc448fa614b0bbdb2","scripts":{"test":"echo \"No test specified\" && exit 0","build":"node ./node_modules/gulp/bin/gulp.js build","serve":"node ./node_modules/gulp/bin/gulp.js serve","prepublish":"npm run build"},"_npmUser":{"name":"martinhecher","email":"martin@redsift.io"},"repository":{"url":"git+https://github.com/redsift/ui-rs-radial-chart.git","type":"git"},"_npmVersion":"3.9.0","description":"A customizable radial chart.","directories":{},"jsnext:main":"./src/index.js","_nodeVersion":"5.10.1","dependencies":{"@redsift/d3-rs-core":"^0.1.5"},"devDependencies":{"del":"*","gulp":"^3.9.0","bower":"*","jshint":"*","lodash":"^4.12.0","rollup":"^0.26.2","rupture":"^0.6.1","gulp-util":"^3.0.7","browserify":"*","gulp-babel":"*","gulp-concat":"*","gulp-jshint":"*","gulp-notify":"*","gulp-rename":"*","gulp-stylus":"*","gulp-uglify":"*","browser-sync":"^2.11.1","gulp-plumber":"^1.0.1","merge-stream":"^1.0.0","babel-runtime":"^6.6.1","gulp-cleancss":"^0.2.2","normalize.css":"^3.0.3","babel-polyfill":"^6.0.16","gulp-sourcemaps":"*","gulp-autoprefixer":"*","rollup-plugin-json":"^2.0.0","babel-preset-es2015":"*","rollup-plugin-babel":"^2.4.0","rollup-plugin-buble":"^0.7.0","rollup-plugin-string":"^1.0.1","rollup-plugin-uglify":"^0.3.1","gulp-closure-compiler":"*","rollup-plugin-commonjs":"^2.2.1","rollup-plugin-filesize":"^0.3.4","babel-preset-es2015-rollup":"^1.1.1","rollup-plugin-includepaths":"^0.1.5","rollup-plugin-node-resolve":"^1.5.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-rs-radial-chart-0.1.0.tgz_1463417139214_0.26367960148490965","host":"packages-16-east.internal.npmjs.com"}}},"time":{"created":"2016-05-16T16:45:41.283Z","modified":"2026-09-15T11:14:43.897Z","0.1.0":"2016-05-16T16:45:41.283Z"},"bugs":{"url":"https://github.com/redsift/ui-rs-radial-chart/issues"},"author":{"name":"Martin Hecher"},"license":"MIT","homepage":"https://github.com/redsift/ui-rs-radial-chart","keywords":["redsift-ui-component","redsift-ui","redsift"],"repository":{"url":"git+https://github.com/redsift/ui-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[![Circle CI](https://circleci.com/gh/Redsift/ui-rs-radial-chart.svg?style=svg)](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 `<head>` of your page:\n\n```html\n<link rel=\"stylesheet\" href=\"//static.redsift.io/reusable/ui-rs-radial-chart/latest/css/ui-rs-radial-chart.min.css\">\n```\n\nAdditionally include the Javascript on the bottom of the `<body>`:\n\n```html\n<script src=\"//d3js.org/d3.v3.min.js\"></script>\n<script src=\"//static.redsift.io/reusable/ui-rs-radial-chart/latest/js/ui-rs-radial-chart.umd-es2015.min.js\"></script>\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<rs-radial-chart></rs-radial-chart>\n```\n\nYou can optionally provide a DIV with the ID `chart` like so:\n\n```html\n<rs-radial-chart>\n  <div id=\"chart\"></div>\n</rs-radial-chart>\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"}