{"_id":"@acimini/cm-d3-graphs","_rev":"15-7f6d0f9ce8d4932995a4fb6a3a98597b","name":"@acimini/cm-d3-graphs","dist-tags":{"latest":"0.0.14"},"versions":{"0.0.1":{"name":"@acimini/cm-d3-graphs","version":"0.0.1","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"^9.1.13","@angular/core":"^9.1.13","d3":"^6.3.1","dagre":"^0.8.5"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm5/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm5":"esm5/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm5":"fesm5/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.1","_nodeVersion":"15.2.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-3qc/t/haxx/ZSNSCYe+O1VRva5mKAx+7Ht71l8UZzmRM+RjqRqmPzSEBUQ3QODQ+LqwCjQ+Ov2MPb9Qw0HiIhQ==","shasum":"8e8590b998f9aeef9f04ef21410821dd0f49aaec","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.1.tgz","fileCount":74,"unpackedSize":4539233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGWjdCRA9TVsSAnZWagAAVf4P/ivEpJAjcqKJj9ZOWGM/\ni/QBS3Ncdp/BugVAPb4b34HS2zqhh25JkdFKhPw+R/y8PakwcOV23tEhBFIW\nuA5Nmwt/8yjWhf/aQiRa6wGdoCi8Jgomsg1fZhQXLmRjgIqRjLE7fPkOPBwj\nBRNQF4IXi6LQcuc05NxmR+/pA2p4puHbvFquqaoMeiOrw4CHDzQyynKzTmxl\nGV3mS0eRoORdRysn5PNXhO41kOnzFosb+EVkZ+HG6MJlYqe38fSI+1muo5Mf\np8tIiN/3g382HvVOC+YLbcjoUgzia15hUEgwCMNoXP7HvXcvkc8jDStEXO6T\nriRvZWYTIZNyBcnmEnbQLR4pslLYpqg8U59KEA3CabEoXBLxg3c6qUnbM72A\nfp2afD5tJUNHMSzEpJ3M7nma4RXsNsqncKvsfesSyMLfRbCw7Lfem5Bkc3UP\nWGQN0UbWpDh0tGJcqNLtgwmTyf006MGOHt3kV5fbnPRtOpNzZQvShXcxkhuc\nT9H1DklquZSlhUBtXBzywBX3sMv6DOwXgm+5O5ASu6cqjsD7H4h0nW/NJwLy\nGVL/mKgpxJoX3flunEqjfoPT8i09ohX8fF6BZBu6IGHF0VfaHMYhW3aKecvt\n1/CxkKBG3C6LVoia4FHOKmjr9rp+PKJOwLHHyyTAJbf7NwjCwhHKFCN7nseC\nmwCN\r\n=bdFg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDysx90/me/uPLyhi0n6XexDnQ28T6s187Hc1DfGfnY8gIhAMRZhM8qqgNWv6f7jIrNRj0Pe9zv9yN2Ju95iEC++wUp"}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.1_1612277980577_0.8347703901079833"},"_hasShrinkwrap":false},"0.0.2":{"name":"@acimini/cm-d3-graphs","version":"0.0.2","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"^9.1.13","@angular/core":"^9.1.13","d3":"^6.3.1","dagre":"^0.8.5"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm5/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm5":"esm5/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm5":"fesm5/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.2","_nodeVersion":"15.2.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Tpl/1qkRL8914dXzRvQOJibOb93Mr9tjRPVxCiF7JAKO8b8ZVJ1UAGgnXVJ27B4BAczGP5emCAIy/09TYbqv5w==","shasum":"1905aceefe23079268437a4156b02d4cd1323627","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.2.tgz","fileCount":74,"unpackedSize":4540847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG7RECRA9TVsSAnZWagAA/QwQAJBanOaBaM5TiVzGFGoH\n0cr1qUHgeuHJeRP/LBnNdi9nDYaj7bGtp2c4WHdFNkVHcp5v4QS+WA371yr/\nege79FHSdRP/0M/0Xvt51fMGD0Bj2BvQauTyC3DB52Z/0KHxBoWwbhFLryZn\nZJEko5EqFJdkbH3zjMLnvYSXhlhDgVWss0C2WvfYlcOha7oz+7XEqHzV5pTz\nTwUAUvqx5kaYAdkz2D1J/uPOzX4U2q4E9/0uv53kbeWd5ma6wQq4js2RKWFP\nOv3W+eB4feRinqbxmGtfrhdsZpfquZzJvTv/e+/d6K/ysw70eaV3gyOJ8WWU\n9ZGewmGtVBJJzn1PzMIlsNOBxOO0iLhHhhpJBd/r4LD6/ePRyHt+2QPRLX/v\nbXMksU/RlzZCRGHHXAWxBZhau0BRDKsV6qrH2JzTavVDK6N+lDQi3jHvwZUV\nXetFSYnotXNHHSsBrsdSOdGV7ug+Vxs8Q1Ke8TEJ924Dew0DUD2RtQh34INq\nfqy8mzPPRAM7aMwW8E21q1dhnCrJV9aQT7BbUrXmj2Qwr3I+rpYBCpjQhoZH\n9aGI0DNb9n8fQq2j99zIHrCqAQMYpUicswI/d64CfV2Knzsr8eT2SIxLQBE/\nBNtXpGdj3RlBZeIwMBe5XTK1hfGFadwecj/2IuQlOvoFQXA48z2HIqyswJwW\nG2eu\r\n=e+Aa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPaIWcOGZu6xLGA4OZQKUjqMm40/KmQcr8GX988cyOlwIgYEAaBtJdpLVFeTb8GFpU4qlTfxjGWJrvlkNPrInLy40="}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.2_1612428355418_0.7862358434989352"},"_hasShrinkwrap":false},"0.0.3":{"name":"@acimini/cm-d3-graphs","version":"0.0.3","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"^9.1.13","@angular/core":"^9.1.13","d3":"^6.3.1","dagre":"^0.8.5"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm5/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm5":"esm5/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm5":"fesm5/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.3","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-ceGK22y0bpXA2/3AuTHPntTckz1t6P93XYVN/zlMsOCQLdqBYjctGThQVYN1IIDfhqvpVOiypWSziEVtTd/O0A==","shasum":"9c33f75201668f2f37b96698303accbfc7b4d2a4","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.3.tgz","fileCount":74,"unpackedSize":4592537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQgvVCRA9TVsSAnZWagAAZV4P/jPE5pbVw/1kLZOBrbIh\nWrw3yW+RioU2nNq3PZHWj6qVoZzIJ9r5t2hjwBYQFEy3fVgt/M7YiFrR4fXZ\nkZFIknL1/TGvC84cU9vndDtinnkd7q/1MYnQdFtYQMKwFrSrFtGsV/w2BSIT\nPoTDRfExVcmHBFomEToyKDkGn06SVKT+03f35DAu6tyAIm73DcgSB6d27LD9\nHXSYAc+MVuW+G0/SfYWM/4ZXdB0YERsoKTJ/8U3NbhnNwH4HFUesJM2dJQVr\n1NPs5o52MnaS34c1ceT4G0l/a8Jm5wvzmu9Gm2qqNYfIZQvP54hl/Vmuh21y\nnlBqpy05Z1b9HqH/WMZPPaqhoSgCF2XFD8Davam3KJ9DQ5O7UT09VCeAqc+E\nMPuAegtDuTCPso8rO9ZJsZDsDz3shLq18yWAICWGnk3Ox3GMYo5LuT0euk4i\n5i3GedzRgIJMY1H7vI2WHvqcN30A7yn++rl2U7UF14i9tbeSzDNNnLOC9B0j\n0UAISn8PAyV3CJqHgfORGLwU+gpkYshbciQSKTj0sMoQTeZBq2IFwv0jqYAn\nULCTWpz3FZqwhXYI6EbmcZ0HctWS2fbXVh6Hl5Nr9q5Onkx+1GbCxCWJiKOw\nXumnhSFpZUsw6OK/DTeqdpjbDOzfPqBGzT0LFmMiO7pGyPnyUw/zHMS7qZ5T\n4aKP\r\n=uzCU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH60sKQJpQgo4fZ5ggJqQm5/lQNXhg8W/QyCiRkECiudAiBVtAIDejzp4sPy+aFcdfN44wWJqpXWnE3GUc2NK/EwuA=="}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.3_1631718357551_0.031129434339865147"},"_hasShrinkwrap":false},"0.0.4":{"name":"@acimini/cm-d3-graphs","version":"0.0.4","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^6.3.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.4","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-I8dyJgLvnQYTI2ncqbE07GUtg/mnY4igeYhW4YRWp/T7VW4FTKpgCXFBQ50eNjR0vhuAg8Q5cpJn+QzMmb8dBw==","shasum":"6c6875745b7fb2a08a60818c4f899823e980855a","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.4.tgz","fileCount":53,"unpackedSize":2780923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQhVBCRA9TVsSAnZWagAAAucP/imzU/yvoik8a93FL+/L\nt5nZ7zfFdIR1adIXBPg8EiWHRVevPq17kLaUhEmjUJr6bjRkyLVo+4XlKPc4\nEPjrmUqY3AVSCq2dju56dFM4EYDVkx/NgpyXd2tEe6LLgjJWwd3rt9SpeqP0\nmn0PmbzZxIA9+8hcaBp2C9HM50VqP+DgXNdnop4twmIO4J28uttlNIT7jndd\nRieD5ZFvmaI/lRduj35VaZrKwDuJQJOAtf5YhQxmiJPd+s0zHwEYsnqeG/WR\n/LVq5+givKBz3tVjU18ZyEFkF9dG9bmcibvJekXEjStrNHiK8Wjwwj3EEhtb\nx3lM56YIcBStasrNhIGP2S8rTecQt43OySHrKnnoM/XdoYULUQf3XTLf1hc1\n/9wen+UpKbnXTwMcd4ezamqwp0vu0cEbVIYiejsrwu3iq2vlLus2QYgs1b4n\nVgKyXIl3WFq+/68wztKqhUcATnBoLTnQl7+4pWkjyAI/BVWvOnssTqbzv2z3\niYbqk/xyJpqJgSLMyhbqFyoKYiId/ToG3hrAnIOofhWvCUvzjb8zvuumisUx\niq411p6UfIjqcCxflfr7nlqiZR10o861eC2Np7GTrsQMlzSKIayaAoe2+BYK\nAs0PDjzSzSI39gdmXwNH3wBC/jAtfNZyns+9u08qt/Creh+HtDqVbYZ70Eu7\nBVzn\r\n=Q+yu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3/HDACNT+Td/ljFfxFBo5vN9pqe0C93UH+VbuKTCtTAiAPyheZ5bjU7LpjxsiQUlssyOkq5Y7ni8fFfFvgi2fysw=="}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.4_1631720769304_0.3602905027009897"},"_hasShrinkwrap":false},"0.0.5":{"name":"@acimini/cm-d3-graphs","version":"0.0.5","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^7.0.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.5","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-doNO9rzHRVOpKYfFR0KOM1Bro14NO9BrkJ7cJnRGfm4r/FiL65GdtGT3EZ+GbDEH0n4HQANBURt3qqdDJ+sRHg==","shasum":"510ee39260d27280353c53c637d0de730943caf2","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.5.tgz","fileCount":53,"unpackedSize":2797651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhRFJMCRA9TVsSAnZWagAAAj0P/RKwdDUAgnrOVlmNcGxJ\nlTGQZqFttHAci2RbFUAbsIiEZdej+pSLdrlTo/Ab/7GbCqcIPec5Ng5lAwwU\niJSX7qKu52WiDdfV2eybb1qi0jdixqjdnvuKpRWNKILYFmxSTgPbnGLRyH7Z\n7WpDGi8X+rGvoBUgKfnYBKIVllQ1vQAhR1wMTEQJ1uvKd8iXFGuoRWr223Jq\nnzz3r8EQvlQlwFO0gdTN2eZdxqwIHbIokvKFp0xYb8wmyMDEr0Cq0eFhMVo7\n63PQwIrH5UZ7RoLsqXIBT6Pf2xA10kcg7iT9E/U5h+rURWtNFteLDMHE6XYk\nPIILerYpq4Jwyp3SwU6inltCkR34YmxsVmeJBcLWPSnNEwPC7exI7cNdHIX+\nX6uOmScA8L9gBpfnTfHnqrwglgyfC7cDawPyRk+CkezYd46Mbkzh4eJbwjos\nE3U4Rkdgg/Qs+s69kiXQOnbfZAtD1NON9cig7dnrNWoHhHN0t0T6klCHLPs/\nddiyPNRS5FmWY4IawysB5jE1si0mIfvCl/ror9Mflq4MymQmHaRUJGg2Z0HG\nNprfJof+n/Zn34WLanulA8Lmi5TJ1+yQhhg2UNPeULtWYf17p9VZFwmbZX3w\nPdTNgaNmdSdV8H1qP5ekowuFXsvdYG5/1HttO6IXoiEREdGwIWhKkQrXWsMT\nGCSS\r\n=3XOS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgoqC4ICHXqY8AONWkcLpjKt80Ia4Lb6Wkb/UoOnwJLAIgAynw45CUQRHynAVhjV+4bX1gqGc4x6ExZ1J6Pr5ovss="}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.5_1631867468578_0.4451397129111154"},"_hasShrinkwrap":false},"0.0.6":{"name":"@acimini/cm-d3-graphs","version":"0.0.6","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^7.0.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.6","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-8NZcBGEY5zAHcC33j8YAtl3ZVsmGIGUmfwxy8VkBsZFVL0kwcP3f+rq16l6QFXW4A2/ldKpznc93Y68ALU1Fog==","shasum":"c78a2123304864c39626366c10a04c4d30dbc844","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.6.tgz","fileCount":53,"unpackedSize":2812022,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEeafbpze5NwOQfuO1u18iFfPZIzv8JOYkqov2LwcXqkAiEAs1fPqAaXH4crS7bua78T4hY+Ao2CPYiXGYDDTioaUQg="}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.6_1632143742648_0.21224337535859195"},"_hasShrinkwrap":false},"0.0.7":{"name":"@acimini/cm-d3-graphs","version":"0.0.7","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^7.0.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.7","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-goVA9FYp2axy2fHWkpxTPbJ4Q+qIm8FsoKr8n7Gg2+hlRv+NKSQk7ayuhMG3EwxL2E8aeLsIZQtoe6giZd0iOw==","shasum":"9874d4ee5bd3add4feb44b0322fa7505e7f03726","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.7.tgz","fileCount":53,"unpackedSize":2814553,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUfmHIB0kDhZHQN2k3JRMgd2TcLJTRapezHufI2GX8rAiA1SgsPv7XTks0dRgbihLYIA4uzlQohxCot4AIVZ2EHbw=="}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.7_1632152300396_0.23939154979675314"},"_hasShrinkwrap":false},"0.0.8":{"name":"@acimini/cm-d3-graphs","version":"0.0.8","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^7.0.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.8","_nodeVersion":"15.2.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-lYdavMUuFKj5tRDpdTTtu1nXRp2imrp5fj2jIE66gLEOw0R7xvMP6A6yE+fjFnMOHjAJsuQnZ0VpKSVvgT0oEQ==","shasum":"2222362b0c414082a8464a7e4be6291459206a74","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.8.tgz","fileCount":53,"unpackedSize":2818582,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrMFxI7B+Z6/2fesUN4MQMaob1NCOGcrH/BeLDAzKdrAiEAtMpRdWRTK6+uIQ14W/DDyJJpOlhnDcLBCpJOaSBL44o="}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.8_1632214988842_0.3351809404065844"},"_hasShrinkwrap":false},"0.0.9":{"name":"@acimini/cm-d3-graphs","version":"0.0.9","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^7.0.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.9","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-WUvvydI4+nOMB/ZPd26pRu7maadqOoZSAVBhrb3Ca5/gBl64k3Nqdews73h8IrG8qQDLGqnUg9PnyGU5BXg2iA==","shasum":"da8d9cf6d520a157e82b35c3c55e74bc8239d91c","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.9.tgz","fileCount":53,"unpackedSize":2820035,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7UhK35rNljWXomIe5VEvjAPQbM2oxhdSMeSZhYNFrEwIhALZ0vzAvhu2Cy3aS+wwILgP5FZFrauE88jMmYNFCrOxw"}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.9_1632302780580_0.16417291979502346"},"_hasShrinkwrap":false},"0.0.10":{"name":"@acimini/cm-d3-graphs","version":"0.0.10","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^7.0.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.10","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-Qwe/lXGNpimfIwjmDTd0to0mvIU3u2BwYBA4O9jNKsvkRvMSIuu8BhssegsEBUAVE78iPfjv9ukBQL7ybXLHUA==","shasum":"c8955631cb6ec107d79eb46c9b3720866a5ce8dc","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.10.tgz","fileCount":53,"unpackedSize":2820192,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgeaTfCgQf9NJ8ckR+Z9fMuRvR5CfOErh8gy5GvoRs0AIhAJmB/xa1I5ahG7xKjgaFmO4dSOvR8vKYzAs/wu1Mxkbq"}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.10_1632303601690_0.8943505345041243"},"_hasShrinkwrap":false},"0.0.11":{"name":"@acimini/cm-d3-graphs","version":"0.0.11","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^7.0.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.11","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-5zj/HHtucrkZjDa4MfygfRtojO8jEMqt3CFxqcMmj0c5ASqBk689do9ZHlk2Eqtqi/FnQLoDIjQRx+EgFe1Yeg==","shasum":"736551b6a6bf839b0c4f9b06c6f51df7d9801c35","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.11.tgz","fileCount":53,"unpackedSize":2820332,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID18JxUySqrexRg8xigKVVN/Ogm+QCdHxUB2jjEpzah7AiA7Z2WJBnIZUnDSCHOnpOn8zjSpETMYnYZ9bkaRbK9Skw=="}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.11_1632303915811_0.3092783361101925"},"_hasShrinkwrap":false},"0.0.12":{"name":"@acimini/cm-d3-graphs","version":"0.0.12","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^7.0.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.12","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-FlAEUu1muJLDjhCrEi/4b4GtU2nXjLkbM2df0ja1gILtxZWL/kNvDN8ApDbJf9qa7sJ7edre79g2ikZXmDHkKQ==","shasum":"2bd92f237366b6dc8030c232cf7d2e93fe2a4c7d","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.12.tgz","fileCount":53,"unpackedSize":2827611,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfwEPOR89QJrpjT+wEPfMESnsmW9/pgUFd2DCJ6H+cSAiAi76wEEkQFuxlE1wdpYUrQGOBdYYxUo9lR/KOUD/DHVA=="}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.12_1632307445936_0.4872068483633316"},"_hasShrinkwrap":false},"0.0.13":{"name":"@acimini/cm-d3-graphs","version":"0.0.13","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^7.0.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.13","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-UHqHjpKK0b78JG1JrKrkpliiBvbmToF0eyfpdI3B9GgjN6SuxdynLluQ1FB08dXBqh8XWeNkfyvPGJPju0X5OA==","shasum":"6ad56eef1fec7f8cad058fefb6eb9f24563f57fb","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.13.tgz","fileCount":53,"unpackedSize":2835343,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvwnx5kdW5l+ACg1283GHuAx5yAENt4Z/CgkxmRCdLmgIhALcfPW8o0ZKdcwPKU0h2CfylS5Iq9h07YPJ52M57E3x5"}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.13_1632743104324_0.8045110987360402"},"_hasShrinkwrap":false},"0.0.14":{"name":"@acimini/cm-d3-graphs","version":"0.0.14","author":{"name":"Andrea Cimini"},"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"license":"Apache","peerDependencies":{"@angular/common":"~12.2.5","@angular/core":"~12.2.5","d3":"^7.0.1","dagre":"^0.8.5"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/acimini-cm-d3-graphs.umd.js","module":"fesm2015/acimini-cm-d3-graphs.js","es2015":"fesm2015/acimini-cm-d3-graphs.js","esm2015":"esm2015/acimini-cm-d3-graphs.js","fesm2015":"fesm2015/acimini-cm-d3-graphs.js","typings":"acimini-cm-d3-graphs.d.ts","metadata":"acimini-cm-d3-graphs.metadata.json","sideEffects":false,"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","_id":"@acimini/cm-d3-graphs@0.0.14","_nodeVersion":"15.2.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-WNlGQaDgrvbI65Fd2ZY2mmzPMp4OEFKkD0LDwkhfO5iNhqWx65E2AxzW8TxJX6UEsmHox4QHQZ6ViR9pnoP/3w==","shasum":"addeda0e7fe8fecc88b1c4d0b8a914ad5df55633","tarball":"https://registry.npmjs.org/@acimini/cm-d3-graphs/-/cm-d3-graphs-0.0.14.tgz","fileCount":53,"unpackedSize":2860095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxHgZCRA9TVsSAnZWagAAv1sP/2OmMyRwOmR+G2AwxU3e\na5cEsenb77EWzsjmoZjo0aT8A6r51JFgsBexVCk1x6AAa1g6IiCUel5vs71m\nidqAQ9Pvkj+OhtRgSS3aCLKsh0Kq3TALkNLE/99mSIlyqIXb7IcIgKZ6wHM3\nK3zt+KZYpsSp+S/uZSeJVWbGf3VdSlSpBApTWpi/8ilbKTdOVbV2id5T7SLu\nwv9SL09w9kZkruVSJ1Jjh96/BNM6C8HHrtQoMtxZqZ7poWyN5CowQDOw4kjW\nti24JNeaxO8Deu5Q3/MTqow8cGNvNAATSChGMbed4kpVGrAr2B055K9d97UQ\nL8/kIHZ//flBKYaWw8Fd4U5F5dN/VFMQ43GKUPXUycSW3HoIMzgU7j30xpLP\nrMzAhLQR/HI6I7/la7w+ya6qKKsK0ehnSpncUZ4CThzHqdeb8gv9mBXqdDIC\nhJ8OchlXxJabG4cCX+ljzHotFL/SBPdDEviKuK8QYj3lc/p6zgohbCuzs/ED\nLbZsgesCOisC3FXld2jfcAVfeTxE9lvdov3CG4LpL1arKwhew/x4uKthP0jW\nxiHl5DqmQipPZI/ayxlbHiUm5hEc+Z71cYO6DlEtzbZwYSA3X/EiZDIJw8oF\nETUwbMvLQosqZRubOochTzdSpiEC9Vg16FidIuRNINtEN7P0DvhMGDQ/Ntr2\nWMDE\r\n=3xX6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC36lkVfjit97pZmopqefcMvwwn202pXbPlkmMyDGNNCAIgIBO8zV8g2JTAEnOa9a0PZ638gwM0LdUHcVKfk9ibBVY="}]},"_npmUser":{"name":"acimini","email":"and.cimini@gmail.com"},"directories":{},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cm-d3-graphs_0.0.14_1632910348201_0.3775636798128472"},"_hasShrinkwrap":false}},"time":{"created":"2021-02-02T14:59:40.539Z","0.0.1":"2021-02-02T14:59:40.831Z","modified":"2022-04-04T11:11:24.203Z","0.0.2":"2021-02-04T08:45:55.720Z","0.0.3":"2021-09-15T15:05:57.755Z","0.0.4":"2021-09-15T15:46:09.498Z","0.0.5":"2021-09-17T08:31:08.790Z","0.0.6":"2021-09-20T13:15:42.906Z","0.0.7":"2021-09-20T15:38:20.615Z","0.0.8":"2021-09-21T09:03:09.053Z","0.0.9":"2021-09-22T09:26:20.974Z","0.0.10":"2021-09-22T09:40:01.934Z","0.0.11":"2021-09-22T09:45:16.243Z","0.0.12":"2021-09-22T10:44:06.178Z","0.0.13":"2021-09-27T11:45:05.244Z","0.0.14":"2021-09-29T10:12:28.465Z"},"maintainers":[{"name":"acimini","email":"and.cimini@gmail.com"}],"description":"This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\ With this library we have: * histogram * line chart * pie * donut * range slider * tree chart * flow chart * bubble chart","homepage":"https://github.com/AndreaCimini/cm-d3-graphs#readme","keywords":["angular","javascript","typescript","d3","dagre","graphs","histogram","pie","donut","tree chart","flow chart","bubble chart","range slider chart","line chart"],"repository":{"type":"git","url":"git+https://github.com/AndreaCimini/cm-d3-graphs.git"},"author":{"name":"Andrea Cimini"},"bugs":{"url":"https://github.com/AndreaCimini/cm-d3-graphs/issues"},"license":"Apache","readme":"# CmD3Graphs\n\nThis library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\\\nWith this library we have:\n* histogram\n* line chart\n* pie\n* donut\n* range slider\n* tree chart\n* flow chart\n* bubble chart\n\nThis is based on:\n* [Angular 9](https://angular.io)\n* [D3 6.3.1](https://d3js.org/)\n* [Dagre 0.8.5](https://github.com/dagrejs/dagre)\n\n## Index\n\n1. [Install](#install)\n2. [How to use](#how-to-use)\n3. [Graph types](#graph-types)\n * [Histogram](#histogram)\n * [Configurations](#h-configurations)\n * [Data](#h-data)\n * [Component](#h-component)\n * [Example](#h-example)\n * [Pie](#pie)\n * [Configurations](#p-configurations)\n * [Data](#p-data)\n * [Component](#p-component)\n * [Example](#p-example)\n * [Donut](#donut)\n * [Configurations](#d-configurations)\n * [Data](#d-data)\n * [Component](#d-component)\n * [Example](#d-example)\n * [Line](#line)\n * [Configurations](#l-configurations)\n * [Data](#l-data)\n * [Component](#l-component)\n * [Example](#l-example)\n * [Range slider](#range-slider)\n * [Configurations](#r-configurations)\n * [Data](#r-data)\n * [Component](#r-component)\n * [Example](#r-example)\n * [Tree](#treee)\n * [Configurations](#t-configurations)\n * [Data](#t-data)\n * [Component](#t-component)\n * [Example](#t-example)\n * [Flow chart](#flow-chart)\n * [Configurations](#f-configurations)\n * [Data](#f-data)\n * [Component](#f-component)\n * [Example](#f-example)\n * [Bubble chart](#bubble-chart)\n * [Configurations](#b-configurations)\n * [Data](#b-data)\n * [Component](#b-component)\n * [Example](#b-example)\n4. [Authors](#authors)\n5. [License](#license)\n\n## Install\n``npm install d3 --save``\n\n``npm install dagre --save``\n\n``npm install @acimini/cm-d3-graphs --save``\n\nImport in your app\n\n```javascript\nimport { CmD3GraphsModule } from '@acimini/cm-d3-graphs';\n\n@NgModule({\n imports: [ CmD3GraphsModule ],\n ...\n})\n```\n\n## How to use\n\n#### First define the configuration for the graph\n\n```javascript\nimport {GraphTypeConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst graphConf: GraphTypeConfigurationInterface = {\n ...\n}\n```\nEach graph has its own configuration. See the sections below to check what is the configuration for the graph you choose.\n\n#### Define the data for the graph\n\n```javascript\nimport {GraphTypeDataInterface} from '@acimini/cm-d3-graphs';\n\nconst graphData: GraphTypeDataInterface = [\n ...\n];\n```\nFor the graph data there are a base interface that is suitable for the most of the graph types, and some specific for those graphs that have a more complex structure. See the sections below to check what is the data format for the graph you choose.\n\n#### Use the graph component in the html\n\n```angular2html\n\n```\nThe component can need more inputs than those shown above. See the sections below to check what is the right way to use the component for the graph you choose.\n\n**IMPORTANT**: the component must be enclosed in an element with **width** and **height** set.\n\n## Graph types\n\nBelow it is shown the list of the available graph types.\\\nEach graph section is divided in four parts:\n* Configurations: in this section, it is described what configurations are available for the graph and how use them.\n* Data: in this section, it is described how data must be structured to work with the graph type choose.\n* Component: in this section, it is show how to use the graph component in the html.\n* Example: in this section, it is show an example of the usage of the graph choose.\n\n### Histogram\n\n#### Configurations\n\nTo configure correctly the graph, it is possible to use the **HistogramGraphConfigurationInterface**\n\n```javascript\nimport {HistogramGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst histogramConf: HistogramGraphConfigurationInterface = {\n ...\n}\n```\n\nBelow a list with all the configurations available for the histogram chart.\\\nMost of the configurations are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that sets the id of the chart. It is **required**.\n\n###### type\n\nA **string** that defines the type of the graph. It is **required** and must be **histogram**.\n\n###### margin\n\nAn **object** that sets the margins between the graph and its container.\n\n```javascript\n{\n top: number,\n bottom: number,\n left: number,\n right: number\n}\n```\nIf not provided, default value will be used.\n\n```javascript\n{\n top: 10,\n bottom: 10,\n left: 10,\n right: 10\n}\n```\n\n###### maxDisplayedNumber\n\nA **number** that defines the max number of data displayed in the graph.\\\nIf the data length is grater than the value of this property, a scrollbar will be shown.\n\n###### events\n\nAn **object** that sets the events enabled on the graph.\n\n```javascript\n{\n clickOnElement: boolean\n}\n```\n* **clickOnElement**: if true, the event **clickOnBar** will be emitted each time user clicks on a bar. The event contains the data of the bar clicked.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n clickOnElement: false\n}\n```\n\n###### overflowX\n\nA **boolean** that enables the overflow along the horizontal direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container width, and a horizontal scrollbar will be shown.\n\n###### overflowY\n\nA **boolean** that enables the overflow along the vertical direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container height, and a vertical scrollbar will be shown.\n\n###### tooltipFormat\n\nA **function** that defines the format of the tooltip that appears when the mouse goes on a bar.\n\n```javascript\n(label: string, value: number) => string\n```\nIf not provided, default value will be used.\n\n```javascript\n(label, value) => label + ': ' + value\n```\n\n###### orientation\n\nIt can be **horizontal** or **vertical** and defines the orientation of the graph.\\\nIf not provided, default value will be **vertical**.\n\n###### grid\n\nAn **object** that defines the appearance of the grid.\n\n```javascript\n{\n axisX: boolean,\n axisY: boolean,\n color: string\n}\n```\n\n* **axisX**: if true, enables the grid along the horizontal direction.\n* **axisY**: if true, enables the grid along the vertical direction.\n* **color**: defines the color of the grid.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n axisX: true,\n axisY: true,\n color: '#ccc'\n}\n```\n\n###### axis\n\nAn **object** that defines the appearance of the axes.\n\n```javascript\n{\n showAxisX: boolean,\n showAxisY: boolean,\n invertAxisX: boolean,\n invertAxisY: boolean,\n labelXOrientation: 'horizontal' | 'vertical' | 'oblique',\n labelYOrientation: 'horizontal' | 'vertical' | 'oblique',\n tickFormatX: (d: string) => string,\n tickFormatY: (d: string) => string,\n lineColor: string,\n textColor: string\n}\n```\n\n* **showAxisX**: if true, enables the axis along the horizontal direction.\n* **showAxisY**: if true, enables the axis along the vertical direction.\n* **invertAxisX**: if true, inverts the axis along the horizontal direction.\n* **invertAxisY**: if true, inverts the axis along the vertical direction.\n* **labelXOrientation**: defines the orientation of the tick label for the horizontal axis.\n* **labelYOrientation**: defines the orientation of the tick label for the vertical axis.\n* **tickFormatX**: a function that returns the tick label formatted for the horizontal axis.\n* **tickFormatY**: a function that returns the tick label formatted for the vertical axis.\n* **lineColor**: defines the color of the axes.\n* **textColor**: defines the tick label color.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n showAxisX: true,\n showAxisY: true,\n invertAxisX: false,\n invertAxisY: false,\n labelXOrientation: 'horizontal',\n labelYOrientation: 'horizontal',\n lineColor: 'black',\n textColor: 'black'\n}\n```\n\n###### groups\n\nWith the histogram we can represent one or more set of data in the same graph.\\\nThe groups' configuration is an **array of objects** that defines the configuration for each set.\n\n```javascript\n{\n color: string,\n label: string\n}\n```\n\n* **color**: defines the color of the bars that represent the set.\n* **label**: defines the label of the set (it is useful in conjunction with the legend - see section below).\n\nIf not provided, the system automatically calculates the number of the sets from data provided, and for each create the default configuration.\n\n```javascript\n{\n color: '#1980B6',\n label: 'Group-' + index of the set\n}\n```\n\n###### groupedType\n\nTogether with the previous configuration, it is possible define the type of grouping. It can be **inline** or **stacked**.\\\nIf not provided, default value will be **inline**.\n\n###### legend\n\nAn **object** that defines the visibility and the position of the legend.\n\n```javascript\n{\n enabled: boolean,\n position: 'bottom' | 'top' | 'left' | 'right'\n}\n```\n\n* **enabled**: defines if the legend is enabled.\n* **position**: defines the position of the legend.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n enabled: false, \n position: 'right'\n}\n```\n\n#### Data\n\nThe data for the histogram have a specific format, defined by the **HistogramGraphDataInterface**\n\n```javascript\nimport {HistogramGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst histogramData: HistogramGraphDataInterface[] = [\n {...},\n ...\n]\n```\n\nBelow a list with all the properties that the single data can have.\\\nMost of the properties are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that defines the id of the data.\\\nIf not provided, an **auto-calculated** value will be used.\n\n###### label\n\nA **string** that defines the label of the data. It is **required**.\n\n###### values\n\nAn **array of numbers** that defines for each data the groups values. It is **required**.\n\n###### extraData\n\nAn **object** that defines extra data associated with the data. It can contain each extra information.\\\nFor example, it is returned whit the data under key **extraData**, when the user clicks on a bar.\n\n#### Component\n\nWhen the configuration and the data are set, the last step is to import the component into the html.\n\n```angular2html\n\n```\n\n**IMPORTANT**: the component must be enclosed in an element with **width** and **height** set.\n\n#### Example\n\nBelow an example\n\n\n Configuration
\n\n```javascript\nimport {HistogramGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst histogramConfs: HistogramGraphConfigurationInterface = {\n id: 'histogram_chart',\n type: 'histogram',\n groups: [\n {color: '#1980B6'},\n {color: '#ec1f1f'},\n {color: '#09b116'}\n ],\n axis: {\n invertAxisY: false,\n invertAxisX: false\n },\n orientation: 'vertical',\n maxDisplayedNumber: 10,\n legend: {\n position: 'right',\n enabled: true\n }\n}\n```\n\n \n\n\n Data
\n\n```javascript\nimport {HistogramGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst histogramData: HistogramGraphDataInterface[] = [\n {values: [-12, 34, -56], label: 'Label1'},\n {values: [23, -5, 67], label: 'Label2'},\n {values: [1, 7, 4], label: 'Label3'},\n {values: [67, 31, -12], label: 'Label4'},\n {values: [-43, -43, 9], label: 'Label5'},\n {values: [2, -89, -63], label: 'Label6'},\n {values: [98, 11, 45], label: 'Label7'},\n {values: [-53, 26, -12], label: 'Label8'},\n {values: [-29, 26, 35], label: 'Label9'},\n {values: [31, 1, -5], label: 'Label10'},\n {values: [81, -12, -34], label: 'Label11'},\n {values: [60, 51, -41], label: 'Label12'},\n {values: [-4, -17, 31], label: 'Label13'},\n {values: [35, 67, 18], label: 'Label14'},\n {values: [19, 56, 25], label: 'Label15'},\n {values: [-93, 5, -89], label: 'Label16'},\n {values: [51, 34, -57], label: 'Label17'},\n {values: [56, 76, 12], label: 'Label18'},\n {values: [-48, 87, 90], label: 'Label19'},\n {values: [11, -32, -12], label: 'Label20'}\n]\n```\n\n \n\n\n\n\n### Pie\n\n#### Configurations\n\nTo configure correctly the graph, it is possible to use the **PieGraphConfigurationInterface**\n\n```javascript\nimport {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst pieConf: PieGraphConfigurationInterface = {\n ...\n}\n```\n\nBelow a list with all the configurations available for the pie chart.\\\nMost of the configurations are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that sets the id of the chart. It is **required**.\n\n###### type\n\nA **string** that defines the type of the graph. It is **required** and must be **pie**.\n\n###### margin\n\nAn **object** that sets the margins between the graph and its container.\n\n```javascript\n{\n top: number,\n bottom: number,\n left: number,\n right: number\n}\n```\nIf not provided, default value will be used.\n\n```javascript\n{\n top: 10,\n bottom: 10,\n left: 10,\n right: 10\n}\n```\n\n###### maxDisplayedNumber\n\nA **number** that defines the max number of data displayed in the graph.\\\nIf the data length is grater than the value of this property, slices will be distributed in crowns.\n\n###### events\n\nAn **object** that sets the events enabled on the graph.\n\n```javascript\n{\n clickOnElement: boolean\n}\n```\n* **clickOnElement**: if true, the event **clickOnSlice** will be emitted each time user clicks on a slice. The event contains the data of the slice clicked.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n clickOnElement: false\n}\n```\n\n###### overflowX\n\nA **boolean** that enables the overflow along the horizontal direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container width, and a horizontal scrollbar will be shown.\n\n###### overflowY\n\nA **boolean** that enables the overflow along the vertical direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container height, and a vertical scrollbar will be shown.\n\n###### tooltipFormat\n\nA **function** that defines the format of the tooltip that appears when the mouse goes on a slice.\n\n```javascript\n(label: string, value: number) => string\n```\nIf not provided, default value will be used.\n\n```javascript\n(label, value) => label + ': ' + value\n```\n\n###### slices\n\nAn **object** that defines the appearance of the slices.\n\n```javascript\n{\n colors: string[],\n textColor: string\n}\n```\n\n* **colors**: an array that defines the color of each slice.\n* **textColor**: defines the color of the slice label.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n colors: ['#e61400', '#ff0f64', '#0555fa', '#008c5a', '#ff5a0f',\n '#ff4687', '#41b9e6', '#55be5a', '#c6c6c6', '#000000'],\n textColor: 'white'\n}\n```\n\nIf colors defined have dimension smaller than data dimension, they will be used cyclically.\\\nFor example, if we have 11 data and 10 colors, for the 11th data will be used first color , and so on.\n\n###### legend\n\nAn **object** that defines the visibility and the position of the legend.\n\n```javascript\n{\n enabled: boolean,\n position: 'bottom' | 'top' | 'left' | 'right'\n}\n```\n\n* **enabled**: defines if the legend is enabled.\n* **position**: defines the position of the legend.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n enabled: false, \n position: 'right'\n}\n```\n\n#### Data\n\nThe data for the pie have a specific format, defined by the **PieGraphDataInterface**\n\n```javascript\nimport {PieGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst pieData: PieGraphDataInterface[] = [\n {...},\n ...\n]\n```\n\nBelow a list with all the properties that the single data can have.\\\nMost of the properties are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that defines the id of the data.\\\nIf not provided, an **auto-calculated** value will be used.\n\n###### label\n\nA **string** that defines the label of the data. It is **required**.\n\n###### value\n\nA **number** that defines the value of the data. It is **required**.\n\n###### extraData\n\nAn **object** that defines extra data associated with the data. It can contain each extra information.\\\nFor example, it is returned whit the data under key **extraData**, when the user clicks on a slice.\n\n###### slice\n\nAn **object** that defines the appearance of the single slice.\n\n```javascript\n{\n color: string;\n}\n```\n\n* **color**: defines the color of the slice and overwrite the colors' property defined in configurations.\n\nIf not provided, the color from the configuration will be used.\n\n#### Component\n\nWhen the configuration and the data are set, the last step is to import the component into the html.\n\n```angular2html\n\n```\n\n**IMPORTANT**: the component must be enclosed in an element with **width** and **height** set.\n\n#### Example\n\nBelow an example\n\n\n Configuration
\n\n```javascript\nimport {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst pieConfs: PieGraphConfigurationInterface = {\n id: 'pie_chart',\n type: 'pie',\n maxDisplayedNumber: 7,\n legend: {\n position: 'top',\n enabled: true\n }\n};\n```\n\n \n\n\n Data
\n\n```javascript\nimport {PieGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst pieData: PieGraphDataInterface[] = [\n {label: 'USA', value: 130},\n {label: 'UK', value: 20},\n {label: 'Canada', value: 30},\n {label: 'Mexico', value: 15},\n {label: 'Italy', value: 5},\n {label: 'France', value: 6},\n {label: 'England', value: 4},\n {label: 'Japan', value: 10},\n {label: 'Germany', value: 7},\n {label: 'Poland', value: 12},\n {label: 'Ukraine', value: 8},\n {label: 'Russia', value: 9},\n {label: 'China', value: 10}\n]\n```\n\n \n\n\n\n\n### Donut\n\n#### Configurations\n\nTo configure correctly the graph, it is possible to use the **PieGraphConfigurationInterface**\n\n```javascript\nimport {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst donutConf: PieGraphConfigurationInterface = {\n ...\n}\n```\n\nBelow a list with all the configurations available for the donut chart.\\\nMost of the configurations are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that sets the id of the chart. It is **required**.\n\n###### type\n\nA **string** that defines the type of the graph. It is **required** and must be **donut**.\n\n###### margin\n\nAn **object** that sets the margins between the graph and its container.\n\n```javascript\n{\n top: number,\n bottom: number,\n left: number,\n right: number\n}\n```\nIf not provided, default value will be used.\n\n```javascript\n{\n top: 10,\n bottom: 10,\n left: 10,\n right: 10\n}\n```\n\n###### maxDisplayedNumber\n\nA **number** that defines the max number of data displayed in the graph.\\\nIf the data length is grater than the value of this property, slices will be distributed in crowns.\n\n###### events\n\nAn **object** that sets the events enabled on the graph.\n\n```javascript\n{\n clickOnElement: boolean\n}\n```\n* **clickOnElement**: if true, the event **clickOnSlice** will be emitted each time user clicks on a slice. The event contains the data of the slice clicked.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n clickOnElement: false\n}\n```\n\n###### overflowX\n\nA **boolean** that enables the overflow along the horizontal direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container width, and a horizontal scrollbar will be shown.\n\n###### overflowY\n\nA **boolean** that enables the overflow along the vertical direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container height, and a vertical scrollbar will be shown.\n\n###### tooltipFormat\n\nA **function** that defines the format of the tooltip that appears when the mouse goes on a slice.\n\n```javascript\n(label: string, value: number) => string\n```\nIf not provided, default value will be used.\n\n```javascript\n(label, value) => label + ': ' + value\n```\n\n###### slices\n\nAn **object** that defines the appearance of the slices.\n\n```javascript\n{\n colors: string[],\n textColor: string\n}\n```\n\n* **colors**: an array that defines the color of each slice.\n* **textColor**: defines the color of the slice label.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n colors: ['#e61400', '#ff0f64', '#0555fa', '#008c5a', '#ff5a0f',\n '#ff4687', '#41b9e6', '#55be5a', '#c6c6c6', '#000000'],\n textColor: 'white'\n}\n```\n\nIf colors defined have dimension smaller than data dimension, they will be used cyclically.\\\nFor example, if we have 11 data and 10 colors, for the 11th data will be used first color , and so on.\n\n###### legend\n\nAn **object** that defines the visibility and the position of the legend.\n\n```javascript\n{\n enabled: boolean,\n position: 'bottom' | 'top' | 'left' | 'right'\n}\n```\n\n* **enabled**: defines if the legend is enabled.\n* **position**: defines the position of the legend.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n enabled: false, \n position: 'right'\n}\n```\n\n#### Data\n\nThe data for the donut have a specific format, defined by the **PieGraphDataInterface**\n\n```javascript\nimport {PieGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst donutData: PieGraphDataInterface[] = [\n {...},\n ...\n]\n```\n\nBelow a list with all the properties that the single data can have.\\\nMost of the properties are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that defines the id of the data.\\\nIf not provided, an **auto-calculated** value will be used.\n\n###### label\n\nA **string** that defines the label of the data. It is **required**.\n\n###### value\n\nA **number** that defines the value of the data. It is **required**.\n\n###### extraData\n\nAn **object** that defines extra data associated with the data. It can contain each extra information.\\\nFor example, it is returned whit the data under key **extraData**, when the user clicks on a slice.\n\n###### slice\n\nAn **object** that defines the appearance of the single slice.\n\n```javascript\n{\n color: string;\n}\n```\n\n* **color**: defines the color of the slice and overwrite the colors' property defined in configurations.\n\nIf not provided, the color from the configuration will be used.\n\n#### Component\n\nWhen the configuration and the data are set, the last step is to import the component into the html.\n\n```angular2html\n\n```\n\n**IMPORTANT**: the component must be enclosed in an element with **width** and **height** set.\n\n#### Example\n\nBelow an example\n\n\n Configuration
\n\n```javascript\nimport {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst donutConfs: PieGraphConfigurationInterface = {\n id: 'donut_chart',\n type: 'donut',\n maxDisplayedNumber: 7\n};\n```\n\n \n\n\n Data
\n\n```javascript\nimport {PieGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst donutData: PieGraphDataInterface[] = [\n {label: 'USA', value: 60},\n {label: 'UK', value: 20},\n {label: 'Canada', value: 30},\n {label: 'Mexico', value: 15},\n {label: 'Italy', value: 5},\n {label: 'France', value: 6},\n {label: 'England', value: 4},\n {label: 'Japan', value: 10},\n {label: 'Germany', value: 7},\n {label: 'Poland', value: 12},\n {label: 'Ukraine', value: 8},\n {label: 'Russia', value: 9},\n {label: 'China', value: 10}\n]\n```\n\n \n\n\n\n\n### Line\n\n#### Configurations\n\nTo configure correctly the graph, it is possible to use the **LineGraphConfigurationInterface**\n\n```javascript\nimport {LineGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst lineConf: LineGraphConfigurationInterface = {\n ...\n}\n```\n\nBelow a list with all the configurations available for the line chart.\\\nMost of the configurations are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that sets the id of the chart. It is **required**.\n\n###### type\n\nA **string** that defines the type of the graph. It is **required** and must be **line**.\n\n###### margin\n\nAn **object** that sets the margins between the graph and its container.\n\n```javascript\n{\n top: number,\n bottom: number,\n left: number,\n right: number\n}\n```\nIf not provided, default value will be used.\n\n```javascript\n{\n top: 10,\n bottom: 10,\n left: 10,\n right: 10\n}\n```\n\n###### maxDisplayedNumber\n\nA **number** that defines the max number of data displayed in the graph.\\\nIf the data length is grater than the value of this property, a scrollbar will be shown.\n\n###### events\n\nAn **object** that sets the events enabled on the graph.\n\n```javascript\n{\n clickOnElement: boolean\n}\n```\n* **clickOnElement**: if true, the event **clickOnDot** will be emitted each time user clicks on a dot on the line. The event contains the data of the dot clicked.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n clickOnElement: false\n}\n```\n\n###### overflowX\n\nA **boolean** that enables the overflow along the horizontal direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container width, and a horizontal scrollbar will be shown.\n\n###### overflowY\n\nA **boolean** that enables the overflow along the vertical direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container height, and a vertical scrollbar will be shown.\n\n###### tooltipFormat\n\nA **function** that defines the format of the tooltip that appears when the mouse goes on a dot.\n\n```javascript\n(label: string, value: number) => string\n```\nIf not provided, default value will be used.\n\n```javascript\n(label, value) => label + ': ' + value\n```\n\n###### orientation\n\nIt can be **horizontal** or **vertical** and defines the orientation of the graph.\\\nIf not provided, default value will be **vertical**.\n\n###### grid\n\nAn **object** that defines the appearance of the grid.\n\n```javascript\n{\n axisX: boolean,\n axisY: boolean,\n color: string\n}\n```\n\n* **axisX**: if true, enables the grid along the horizontal direction.\n* **axisY**: if true, enables the grid along the vertical direction.\n* **color**: defines the color of the grid.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n axisX: true,\n axisY: true,\n color: '#ccc'\n}\n```\n\n###### axis\n\nAn **object** that defines the appearance of the axes.\n\n```javascript\n{\n showAxisX: boolean,\n showAxisY: boolean,\n invertAxisX: boolean,\n invertAxisY: boolean,\n labelXOrientation: 'horizontal' | 'vertical' | 'oblique',\n labelYOrientation: 'horizontal' | 'vertical' | 'oblique',\n tickFormatX: (d: string) => string,\n tickFormatY: (d: string) => string,\n lineColor: string,\n textColor: string\n}\n```\n\n* **showAxisX**: if true, enables the axis along the horizontal direction.\n* **showAxisY**: if true, enables the axis along the vertical direction.\n* **invertAxisX**: if true, inverts the axis along the horizontal direction.\n* **invertAxisY**: if true, inverts the axis along the vertical direction.\n* **labelXOrientation**: defines the orientation of the tick label for the horizontal axis.\n* **labelYOrientation**: defines the orientation of the tick label for the vertical axis.\n* **tickFormatX**: a function that returns the tick label formatted for the horizontal axis.\n* **tickFormatY**: a function that returns the tick label formatted for the vertical axis.\n* **lineColor**: defines the color of the axes.\n* **textColor**: defines the tick label color.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n showAxisX: true,\n showAxisY: true,\n invertAxisX: false,\n invertAxisY: false,\n labelXOrientation: 'horizontal',\n labelYOrientation: 'horizontal',\n lineColor: 'black',\n textColor: 'black'\n}\n```\n\n###### groups\n\nWith the line we can represent one or more set of data in the same graph.\\\nThe groups' configuration is an **array of objects** that defines the configuration for each set.\n\n```javascript\n{\n color: string,\n label: string\n}\n```\n\n* **color**: defines the color of the line that represent the set.\n* **label**: defines the label of the set (it is useful in conjunction with the legend - see section below).\n\nIf not provided, the system automatically calculates the number of the sets from data provided, and for each create the default configuration.\n\n```javascript\n{\n color: '#1980B6',\n label: 'Group-' + index of the set\n}\n```\n\n###### hasArea\n\nA **boolean** that enables the area under the line.\n\n###### legend\n\nAn **object** that defines the visibility and the position of the legend.\n\n```javascript\n{\n enabled: boolean,\n position: 'bottom' | 'top' | 'left' | 'right'\n}\n```\n\n* **enabled**: defines if the legend is enabled.\n* **position**: defines the position of the legend.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n enabled: false, \n position: 'right'\n}\n```\n\n#### Data\n\nThe data for the line have a specific format, defined by the **LineGraphDataInterface**\n\n```javascript\nimport {LineGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst lineData: LineGraphDataInterface[] = [\n {...},\n ...\n]\n```\n\nBelow a list with all the properties that the single data can have.\\\nMost of the properties are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that defines the id of the data.\\\nIf not provided, an **auto-calculated** value will be used.\n\n###### label\n\nA **string** that defines the label of the data. It is **required**.\n\n###### values\n\nAn **array of numbers** that defines for each data the groups values. It is **required**.\n\n###### extraData\n\nAn **object** that defines extra data associated with the data. It can contain each extra information.\\\nFor example, it is returned whit the data under key **extraData**, when the user clicks on a dot on the line.\n\n#### Component\n\nWhen the configuration and the data are set, the last step is to import the component into the html.\n\n```angular2html\n\n```\n\n**IMPORTANT**: the component must be enclosed in an element with **width** and **height** set.\n\n#### Example\n\nBelow an example\n\n\n Configuration
\n\n```javascript\nimport {LineGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst lineConfs: LineGraphConfigurationInterface = {\n id: 'line_chart',\n type: 'line',\n groups: [\n {color: '#1980B6'},\n {color: '#ec1f1f'}\n ]\n}\n```\n\n \n\n\n Data
\n\n```javascript\nimport {LineGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst lineData: LineGraphDataInterface[] = [\n {values: [-12, 34], label: 'Label1'},\n {values: [23, -5], label: 'Label2'},\n {values: [1, 7], label: 'Label3'},\n {values: [67, 31], label: 'Label4'},\n {values: [-43, -43], label: 'Label5'},\n {values: [2, -89], label: 'Label6'},\n {values: [98, 11], label: 'Label7'},\n {values: [-53, 26], label: 'Label8'},\n {values: [-29, 26], label: 'Label9'},\n {values: [31, 1], label: 'Label10'},\n {values: [81, -12], label: 'Label11'},\n {values: [60, 51], label: 'Label12'},\n {values: [-4, -17], label: 'Label13'},\n {values: [35, 67], label: 'Label14'},\n {values: [19, 56], label: 'Label15'},\n {values: [-93, 5], label: 'Label16'},\n {values: [51, 34], label: 'Label17'},\n {values: [56, 76], label: 'Label18'},\n {values: [-48, 87], label: 'Label19'},\n {values: [11, -32], label: 'Label20'}\n]\n```\n\n \n\n\n\n\n### Range slider\n\n#### Configurations\n\nTo configure correctly the graph, it is possible to use the **RangeSliderGraphConfigurationInterface**\n\n```javascript\nimport {RangeSliderGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst rangeSliderConf: RangeSliderGraphConfigurationInterface = {\n ...\n}\n```\n\nBelow a list with all the configurations available for the range slider chart.\\\nMost of the configurations are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that sets the id of the chart. It is **required**.\n\n###### type\n\nA **string** that defines the type of the graph. It is **required** and must be **range-slider**.\n\n###### margin\n\nAn **object** that sets the margins between the graph and its container.\n\n```javascript\n{\n top: number,\n bottom: number,\n left: number,\n right: number\n}\n```\nIf not provided, default value will be used.\n\n```javascript\n{\n top: 10,\n bottom: 10,\n left: 10,\n right: 10\n}\n```\n\n###### events\n\nAn **object** that sets the events enabled on the graph.\n\n```javascript\n{\n rangeChanging: boolean,\n rangeChanged: boolean\n}\n```\n* **rangeChanging**: if true, the event **rangeChanging** will be emitted during range selection. The event contains the data of the range selected.\n* **rangeChanged**: if true, the event **rangeChanged** will be emitted at the end of selection. The event contains the data of the range selected.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n rangeChanging: false,\n rangeChanged: false\n}\n```\n\n###### overflowX\n\nA **boolean** that enables the overflow along the horizontal direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container width, and a horizontal scrollbar will be shown.\n\n###### overflowY\n\nA **boolean** that enables the overflow along the vertical direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container height, and a vertical scrollbar will be shown.\n\n###### tooltipFormat\n\nA **function** that defines the format of the tooltip that appears when the mouse goes on a dot.\n\n```javascript\n(label: string, value: number) => string\n```\nIf not provided, default value will be used.\n\n```javascript\n(label, value) => label + ': ' + value\n```\n\n###### orientation\n\nIt can be **horizontal** or **vertical** and defines the orientation of the graph.\\\nIf not provided, default value will be **horizontal**.\n\n###### axis\n\nAn **object** that defines the appearance of the axes.\n\n```javascript\n{\n showAxisX: boolean,\n showAxisY: boolean,\n invertAxisX: boolean,\n invertAxisY: boolean,\n labelXOrientation: 'horizontal' | 'vertical' | 'oblique',\n labelYOrientation: 'horizontal' | 'vertical' | 'oblique',\n tickFormatX: (d: string) => string,\n tickFormatY: (d: string) => string,\n lineColor: string,\n textColor: string\n}\n```\n\n* **showAxisX**: if true, enables the axis along the horizontal direction.\n* **showAxisY**: if true, enables the axis along the vertical direction.\n* **invertAxisX**: if true, inverts the axis along the horizontal direction.\n* **invertAxisY**: if true, inverts the axis along the vertical direction.\n* **labelXOrientation**: defines the orientation of the tick label for the horizontal axis.\n* **labelYOrientation**: defines the orientation of the tick label for the vertical axis.\n* **tickFormatX**: a function that returns the tick label formatted for the horizontal axis.\n* **tickFormatY**: a function that returns the tick label formatted for the vertical axis.\n* **lineColor**: defines the color of the axes.\n* **textColor**: defines the tick label color.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n showAxisX: true,\n showAxisY: false,\n invertAxisX: false,\n invertAxisY: false,\n labelXOrientation: 'horizontal',\n labelYOrientation: 'horizontal',\n lineColor: 'black',\n textColor: 'black'\n}\n```\n\n###### track\n\nAn **object** that defines the appearance of the track.\n\n```javascript\n{\n color: string,\n width: number,\n insetColor: string,\n insetWidth: number,\n fillColor: string,\n fillWidth: number\n}\n```\n\n* **color**: defines the border color of the track.\n* **width**: defines the border width of the track.\n* **insetColor**: defines the color of the track outside the range selected.\n* **insetWidth**: defines the width of the track outside the range selected.\n* **fillColor**: defines the color of the track into the range selected.\n* **fillWidth**: defines the width of the track into the range selected.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n color: '#bbb',\n width: 6,\n insetColor: '#eee',\n insetWidth: 4,\n fillColor: '#3883fa',\n fillWidth: 4\n}\n```\n\n###### interval\n\nAn **object** that defines the values' interval.\n\n```javascript\n{\n type: 'discrete' | 'continuous',\n step: number\n}\n```\n\n* **type**: if set to **discrete**, the interval will be discrete and only values defined in data will be selectable. If set to **continuos**, all values between start and end values will be selectable.\n* **step**: defines minimum range selectable. It works if handle type is **double**.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n type: 'discrete'\n}\n```\n\n###### handle\n\nAn **object** that defines the appearance of the handle.\n\n```javascript\n{\n strokeColor: string,\n fillColor: string,\n type: 'single' | 'double',\n showTooltip: 'never' | 'always' | 'on-hover'\n}\n```\n\n* **strokeColor**: defines the border color of the handle.\n* **fillColor**: defines the inner color of the handle.\n* **type**: if it is **single**, we will have a **single handle**, and we can select only a specific value of the interval. If it is **double**, we will have **two handles** and we can select a range.\n* **showTooltip**: set the visibility of the handle tooltip.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n strokeColor: '#777',\n fillColor: 'white',\n type: 'double',\n showTooltip: 'always'\n}\n```\n\n#### Data\n\nThe data for the range slider have a specific format, defined by the **RangeSliderGraphDataInterface**\n\n```javascript\nimport {RangeSliderGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst rangeSliderData: RangeSliderGraphDataInterface[] = [\n {...},\n ...\n]\n```\n\nBelow a list with all the properties that the single data can have.\\\nMost of the properties are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that defines the id of the data.\\\nIf not provided, an **auto-calculated** value will be used.\n\n###### label\n\nA **string** that defines the label of the data. It is **required**.\n\n###### value\n\nA **number** that defines the value of the data. It is **required**.\n\n###### extraData\n\nAn **object** that defines extra data associated with the data. It can contain each extra information.\\\nFor example, it is returned whit the data under key **extraData**, when the user clicks on a dot on the line.\n\n#### Component\n\nWhen the configuration and the data are set, the last step is to import the component into the html.\n\n```angular2html\n\n```\n\n**IMPORTANT**: the component must be enclosed in an element with **width** and **height** set.\n\n#### Example\n\nBelow an example\n\n\n Configuration
\n\n```javascript\nimport {RangeSliderGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst rangeSldierConfs: RangeSliderGraphConfigurationInterface = {\n id: 'range_slider_chart',\n type: 'range-slider',\n tooltipFormat: (label, value) => value.toFixed(2),\n axis: {\n tickFormatX: d => Number(d).toFixed(2)\n }\n}\n```\n\n \n\n\n Data
\n\n```javascript\nimport {RangeSliderGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst rangeSliderData: RangeSliderGraphDataInterface[] = [\n { value: 1 },\n { value: 2 },\n { value: 3 },\n { value: 4 },\n { value: 5 },\n { value: 6 },\n { value: 7 },\n { value: 8 },\n { value: 9 },\n { value: 10 },\n { value: 11 },\n { value: 12 },\n { value: 13 },\n { value: 14 },\n { value: 15 },\n { value: 16 },\n { value: 17 },\n { value: 18 },\n { value: 19 },\n { value: 20 },\n { value: 21 },\n { value: 22 },\n { value: 23 },\n { value: 24 },\n { value: 25 },\n { value: 26 },\n { value: 27 },\n { value: 28 },\n { value: 29 },\n { value: 30 }\n]\n```\n\n \n\n\n\n\n### Tree\n\n#### Configurations\n\nTo configure correctly the graph, it is possible to use the **TreeGraphConfigurationInterface**\n\n```javascript\nimport {TreeGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst treeConf: TreeGraphConfigurationInterface = {\n ...\n}\n```\n\nBelow a list with all the configurations available for the tree chart.\\\nMost of the configurations are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that sets the id of the chart. It is **required**.\n\n###### type\n\nA **string** that defines the type of the graph. It is **required** and must be **tree**.\n\n###### margin\n\nAn **object** that sets the margins between the graph and its container.\n\n```javascript\n{\n top: number,\n bottom: number,\n left: number,\n right: number\n}\n```\nIf not provided, default value will be used.\n\n```javascript\n{\n top: 10,\n bottom: 10,\n left: 10,\n right: 10\n}\n```\n\n###### events\n\nAn **object** that sets the events enabled on the graph.\n\n```javascript\n{\n clickOnElement: boolean\n}\n```\n* **clickOnElement**: if true, the event **clickOnNode** will be emitted each time user clicks on a node. The event contains the data of the node clicked.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n clickOnElement: false\n}\n```\n\n###### overflowX\n\nA **boolean** that enables the overflow along the horizontal direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container width, and a horizontal scrollbar will be shown.\n\n###### overflowY\n\nA **boolean** that enables the overflow along the vertical direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container height, and a vertical scrollbar will be shown.\n\n###### orientation\n\nIt can be **horizontal** or **vertical** and defines the orientation of the graph.\\\nIf not provided, default value will be **vertical**.\n\n###### zoom\n\nAn **object** that defines the zoom configuration.\n\n```javascript\n{\n minZoom: number,\n maxZoom: number\n}\n```\n\n* **minZoom**: defines the minimum zoom level available.\n* **maxZoom**: defines the maximum zoom level available.\n\nIf not provided, no limits are set.\n\n###### nodes\n\nAn **object** that defines the appearance of the nodes.\n\n```javascript\n{\n shape: 'circle' | 'rect' | 'square' | 'rhombus',\n collapsedColor: string,\n expandedColor: string,\n strokeColor: string,\n strokeWidth: string,\n circleRadius: number,\n rectangleDimensions: { width: number, height: number },\n squareDimensions: number,\n rhombusDimensions: number,\n distanceBetweenBrothers: number,\n distanceBetweenCousins: number,\n distanceBetweenParentAndChild: number,\n expandable: boolean,\n maxInitialExpandedLevel: number,\n additionalClasses: string\n}\n```\n\n* **shape**: sets the shape for all nodes. It can be overwritten by single data (see section below).\n* **collapsedColor**: defines the color of the node when it is collapsed.\n* **expandedColor**: defines the color of the node when it is expanded.\n* **strokeColor**: defines the color of the border of the node.\n* **strokeWidth**: defines the width of the border of the node.\n* **circleRadius**: defines the radius of the node if shape is **circle**.\n* **rectangleDimensions**: defines the dimensions of the node if shape is **rect**.\n* **squareDimensions**: defines the dimensions of the node if shape is **square**.\n* **rhombusDimensions**: defines the dimensions of the node if shape is **rhombus**.\n* **distanceBetweenBrothers**: defines the distance between two nodes at the same level with the same parent.\n* **distanceBetweenCousins**: defines the distance between two nodes at different level with a different parent.\n* **distanceBetweenParentAndChild**: defines the distance between parent and its children.\n* **expandable**: sets if nodes with children can be collapsed and expanded.\n* **maxInitialExpandedLevel**: if **expandable** is true, defines the last level visible.\n* **additionalClasses**: list of additional classes associated to nodes (example \"class1 class2 ...\"). It's important to put ::ng-deep before class definition.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n shape: 'circle',\n collapsedColor: 'lightsteelblue',\n expandedColor: 'white',\n strokeColor: 'lightsteelblue',\n circleRadius: 10,\n rectangleDimensions: {width: 150, height: 40},\n squareDimensions: 80,\n rhombusDimensions: 120,\n distanceBetweenBrothers: 20,\n distanceBetweenCousins: 40,\n distanceBetweenParentAndChild: 150,\n expandable: true,\n maxInitialExpandedLevel: 2\n}\n```\n\n###### links\n\nAn **object** that defines the appearance of the links.\n\n```javascript\n{\n color: string,\n arrow: boolean,\n arrowDirection: 'start' | 'end',\n width: string\n}\n```\n\n* **color**: defines the color of the links.\n* **arrow**: if **true** add arrows to the links.\n* **arrowDirection**: if arrow is **true**, set the position of the arrow.\n* **width**: defines the width of the links.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n color: 'lightsteelblue',\n arrow: true,\n arrowDirection: 'end',\n width: '0.125rem'\n}\n```\n\n###### label\n\nAn **object** that defines the appearance of the label.\n\n```javascript\n{\n color: string,\n padding: {top: number, left: number, right: number, bottom: number},\n 'font-size': number\n}\n```\n\n* **color**: defines the color of the labels.\n* **padding**: defines the padding of the labels.\n* **font-size**: defines the font size of the labels.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n color: 'black',\n padding: {top: 5, left: 10, right: 10, bottom: 5}\n}\n```\n\n#### Data\n\nThe data for the tree have a specific format, defined by the **TreeGraphDataInterface**\n\n```javascript\nimport {TreeGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst treeData: TreeGraphDataInterface[] = [\n {...},\n ...\n]\n```\n\nBelow a list with all the properties that the single data can have.\\\nMost of the properties are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that defines the id of the data.\\\nIf not provided, an **auto-calculated** value will be used.\n\n###### label\n\nA **string** that defines the label of the data. It is **required**.\\\nIf label contains special character **%nl%**, it will be splitted on multiple lines (for example \"hi %nl%my name is Andrea\", results in \"hi\" and \"my name is Andrea\" on two different lines).\n\n###### extraData\n\nAn **object** that defines extra data associated with the data. It can contain each extra information.\\\nFor example, it is returned whit the data under key **extraData**, when the user clicks on a node.\n\n###### node\n\nAn **object** that defines the appearance of the single node.\n\n```javascript\n{\n shape: 'circle' | 'rect' | 'square' | 'rhombus',\n collapsedColor: string,\n expandedColor: string,\n strokeColor: string,\n strokeWidth: string,\n labelColor: string,\n circleRadius: number,\n rectangleDimensions: { width: number, height: number },\n squareDimensions: number,\n rhombusDimensions: number,\n additionalClasses: string\n}\n```\n\n* **shape**: sets the shape for single node.\n* **collapsedColor**: defines the color of the node when it is collapsed.\n* **expandedColor**: defines the color of the node when it is expanded.\n* **strokeColor**: defines the color of the border of the node.\n* **strokeWidth**: defines the width of the border of the node.\n* **labelColor**: defines the color of the node label.\n* **circleRadius**: defines the radius of the node if shape is **circle**.\n* **rectangleDimensions**: defines the dimensions of the node if shape is **rect**.\n* **squareDimensions**: defines the dimensions of the node if shape is **square**.\n* **rhombusDimensions**: defines the dimensions of the node if shape is **rhombus**.\n* **additionalClasses**: list of additional classes associated to single node (example \"class1 class2 ...\"). It's important to put ::ng-deep before class definition.\n\nIf not provided, will be used the values set in the configuration.\n\n###### link\n\nAn **object** that defines the appearance of the single link.\n\n```javascript\n{\n color: string,\n width: string\n}\n```\n\n* **color**: defines the color of the single link.\n* **width**: defines the width of the single link.\n\nIf not provided, will be used the values set in the configuration.\n\n###### children\n\nAn **array of object** where the single element has the same structure of the single node.\n\n```javascript\n{\n children: TreeGraphDataInterface[]\n}\n```\n\n#### Component\n\nWhen the configuration and the data are set, the last step is to import the component into the html.\n\n```angular2html\n\n```\n\n**IMPORTANT**: the component must be enclosed in an element with **width** and **height** set.\n\n#### Example\n\nBelow an example\n\n\n Configuration
\n\n```javascript\nimport {TreeGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst treeConfs: TreeGraphConfigurationInterface = {\n id: 'tree_chart',\n type: 'tree',\n nodes: {\n shape: 'rect'\n },\n zoom: {\n minZoom: 0.5,\n maxZoom: 4\n }\n}\n```\n\n \n\n\n Data
\n\n```javascript\nimport {TreeGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst treeData: TreeGraphDataInterface[] = [\n {\n label: 'Top Level with a very very long text',\n node: {\n shape: 'square'\n },\n children: [\n {\n label: 'Level 2: A',\n children: [\n {\n label: 'Son of A with a very very long text' ,\n children: [\n {\n label: 'Son of son of A'\n },\n {\n label: 'Daughter of son of A'\n }\n ]\n },\n {\n label: 'Daughter of A',\n children: [\n {\n label: 'Son of son of A'\n },\n {\n label: 'Daughter of son of A'\n }\n ]\n }\n ]\n },\n {\n label: 'Level 2: B',\n node: {\n shape: 'rhombus'\n },\n children: [\n {\n label: 'Son of B with a very very long text'\n },\n {\n label: 'Daughter of B'\n }\n ]\n },\n {\n label: 'Level 2: B',\n children: [\n {\n label: 'Son of B',\n children: [\n {\n label: 'Daughter of A',\n children: [\n {\n label: 'Son of son of A'\n },\n {\n label: 'Daughter of son of A'\n }\n ]\n }\n ]\n },\n {\n label: 'Daughter of B'\n }\n ]\n }\n ]\n }\n]\n```\n\n \n\n\n\n\n### Flow chart\n\n#### Configurations\n\nTo configure correctly the graph, it is possible to use the **FlowChartGraphConfigurationInterface**\n\n```javascript\nimport {FlowChartGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst flowChartConf: FlowChartGraphConfigurationInterface = {\n ...\n}\n```\n\nBelow a list with all the configurations available for the flow chart.\\\nMost of the configurations are optional and, if a value is not provided, a default one will be set.\n\n###### id\n\nA **string** that sets the id of the chart. It is **required**.\n\n###### type\n\nA **string** that defines the type of the graph. It is **required** and must be **flow-chart**.\n\n###### margin\n\nAn **object** that sets the margins between the graph and its container.\n\n```javascript\n{\n top: number,\n bottom: number,\n left: number,\n right: number\n}\n```\nIf not provided, default value will be used.\n\n```javascript\n{\n top: 10,\n bottom: 10,\n left: 10,\n right: 10\n}\n```\n\n###### events\n\nAn **object** that sets the events enabled on the graph.\n\n```javascript\n{\n clickOnElement: boolean\n}\n```\n* **clickOnElement**: if true, the event **clickOnNode** will be emitted each time user clicks on a node. The event contains the data of the node clicked.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n clickOnElement: false\n}\n```\n\n###### overflowX\n\nA **boolean** that enables the overflow along the horizontal direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container width, and a horizontal scrollbar will be shown.\n\n###### overflowY\n\nA **boolean** that enables the overflow along the vertical direction.\\\nIf not provided, by default it is **false**.\\\nIf enabled, the graph is not resized to the container height, and a vertical scrollbar will be shown.\n\n###### orientation\n\nIt can be **horizontal** or **vertical** and defines the orientation of the graph.\\\nIf not provided, default value will be **vertical**.\n\n###### zoom\n\nAn **object** that defines the zoom configuration.\n\n```javascript\n{\n minZoom: number,\n maxZoom: number\n}\n```\n\n* **minZoom**: defines the minimum zoom level available.\n* **maxZoom**: defines the maximum zoom level available.\n\nIf not provided, no limits are set.\n\n###### nodes\n\nAn **object** that defines the appearance of the nodes.\n\n```javascript\n{\n shape: 'circle' | 'rect' | 'square' | 'rhombus',\n collapsedColor: string,\n expandedColor: string,\n strokeColor: string,\n strokeWidth: string,\n circleRadius: number,\n rectangleDimensions: { width: number, height: number },\n squareDimensions: number,\n rhombusDimensions: number,\n distanceBetweenBrothers: number,\n distanceBetweenCousins: number,\n distanceBetweenParentAndChild: number,\n expandable: boolean,\n maxInitialExpandedLevel: number,\n icon: string,\n additionalClasses: string\n}\n```\n\n* **shape**: sets the shape for all nodes. It can be overwritten by single data (see section below).\n* **collapsedColor**: defines the color of the node when it is collapsed.\n* **expandedColor**: defines the color of the node when it is expanded.\n* **strokeColor**: defines the color of the border of the node.\n* **strokeWidth**: defines the width of the border of the node.\n* **circleRadius**: defines the radius of the node if shape is **circle**.\n* **rectangleDimensions**: defines the dimensions of the node if shape is **rect**.\n* **squareDimensions**: defines the dimensions of the node if shape is **square**.\n* **rhombusDimensions**: defines the dimensions of the node if shape is **rhombus**.\n* **distanceBetweenBrothers**: defines the distance between two nodes at the same level with the same parent.\n* **distanceBetweenCousins**: defines the distance between two nodes at different level with a different parent.\n* **distanceBetweenParentAndChild**: defines the distance between parent and its children.\n* **expandable**: sets if nodes with children can be collapsed and expanded.\n* **maxInitialExpandedLevel**: if **expandable** is true, defines the last level visible.\n* **icon**: sets the icon for all nodes. It can be overwritten by single data (see section below).\n* **additionalClasses**: list of additional classes associated to nodes (example \"class1 class2 ...\"). It's important to put ::ng-deep before class definition.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n shape: 'circle',\n collapsedColor: 'lightsteelblue',\n expandedColor: 'white',\n strokeColor: 'lightsteelblue',\n circleRadius: 10,\n rectangleDimensions: {width: 150, height: 40},\n squareDimensions: 80,\n rhombusDimensions: 120,\n distanceBetweenBrothers: 20,\n distanceBetweenCousins: 40,\n distanceBetweenParentAndChild: 150\n}\n```\n\n###### links\n\nAn **object** that defines the appearance of the links.\n\n```javascript\n{\n color: string,\n arrow: boolean,\n arrowDirection: 'start' | 'end',\n shape: 'smooth' | 'straight',\n width: string\n}\n```\n\n* **color**: defines the color of the links.\n* **arrow**: if **true** add arrows to the links.\n* **arrowDirection**: if arrow is **true**, set the position of the arrow.\n* **shape**: defines the shape of the links.\n* **width**: defines the width of the links.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n color: 'lightsteelblue',\n arrow: true,\n arrowDirection: 'end',\n shape: 'smooth',\n width: '0.125rem'\n}\n```\n\n###### label\n\nAn **object** that defines the appearance of the label.\n\n```javascript\n{\n color: string,\n padding: {top: number, left: number, right: number, bottom: number},\n 'font-size': number\n}\n```\n\n* **color**: defines the color of the labels.\n* **padding**: defines the padding of the labels.\n* **font-size**: defines the font size of the labels.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n color: 'black',\n padding: {top: 5, left: 10, right: 10, bottom: 5}\n}\n```\n###### clusters\n\nAn **object** that defines the appearance of the clusters.\n\n```javascript\n{\n position: 'default' | 'full-space',\n strokeColor: string,\n fillColor: string,\n borderRadius: number,\n label: {\n color: string,\n position: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center',\n 'font-size': number,\n padding: {top: number, left: number, right: number, bottom: number}\n };\n}\n```\n\n* **position**: defines if the cluster is drawn around its nodes, or if it occupies the total width/height of the graph in case of vertical/horizontal orientation.\n* **strokeColor**: defines the border color of the clusters.\n* **fillColor**: defines the inner color of the clusters.\n* **shape**: defines the shape of the clusters.\n* **label**: an object that defines the appearance of the cluster label.\n * **color**: defines the color of the label.\n * **position**: defines the position of the label within the cluster.\n * **font-size**: defines the font size of the label.\n * **padding**: defines the padding of the label.\n\nIf not provided, default value will be used.\n\n```javascript\n{\n strokeColor: 'lightsteelblue',\n fillColor: 'transparent',\n position: 'default',\n shape: 'rectangle',\n label: {\n color: 'lightsteelblue',\n position: 'center',\n 'font-size': 25,\n padding: {top: 5, left: 10, right: 10, bottom: 5}\n }\n}\n```\n\n#### Data\n\nThe data for the flow chart have a specific format, defined by the **FlowChartGraphDataInterface**\n\n```javascript\nimport {FlowChartGraphDataInterface} from '@acimini/cm-d3-graphs';\n\nconst flowChartData: FlowChartGraphDataInterface[] = [\n {...},\n ...\n]\n```\n\nBelow a list with all the properties that the single data can have.\\\nMost of the properties are optional and, if a value is not provided, a default one will be set.\\\nFlow chart data is different from those of other graphs. Data is divided by nodes (**required**), edges (**required**) and clusters (**optional**).\\\nEach of these elements have the same interface **FlowChartGraphDataInterface**, so some properties are useless for nodes, but not for edge and viceversa.\n\n###### id (configuration for node)\n\nA **string** that defines the id of the data. It is **required**.\n\n###### label (configuration for node and cluster)\n\nA **string** that defines the label of the data. It is **required**.\\\nIf label contains special character **%nl%**, it will be splitted on multiple lines (for example \"hi %nl%my name is Andrea\", results in \"hi\" and \"my name is Andrea\" on two different lines).\n\n###### extraData (configuration for node)\n\nAn **object** that defines extra data associated with the data. It can contain each extra information.\\\nFor example, it is returned whit the data under key **extraData**, when the user clicks on a node.\n\n###### node (configuration for node)\n\nAn **object** that defines the appearance of the single node.\n\n```javascript\n{\n shape: 'circle' | 'rect' | 'square' | 'rhombus',\n collapsedColor: string,\n expandedColor: string,\n strokeColor: string,\n strokeWidth: string,\n labelColor: string,\n icon: string,\n circleRadius: number,\n rectangleDimensions: { width: number, height: number },\n squareDimensions: number,\n rhombusDimensions: number,\n additionalClasses: string\n}\n```\n\n* **shape**: sets the shape for single node.\n* **collapsedColor**: defines the color of the node when it is collapsed.\n* **expandedColor**: defines the color of the node when it is expanded.\n* **strokeColor**: defines the color of the border of the node.\n* **strokeWidth**: defines the width of the border of the node.\n* **labelColor**: defines the color of the node label.\n* **icon**: sets the icon for single node.\n* **circleRadius**: defines the radius of the node if shape is **circle**.\n* **rectangleDimensions**: defines the dimensions of the node if shape is **rect**.\n* **squareDimensions**: defines the dimensions of the node if shape is **square**.\n* **rhombusDimensions**: defines the dimensions of the node if shape is **rhombus**.\n* **additionalClasses**: list of additional classes associated to node (example \"class1 class2 ...\"). It's important to put ::ng-deep before class definition.\n\nIf not provided, will be used the values set in the configuration.\n\n###### link (configuration for edge)\n\nAn **object** that defines the appearance of the single link.\n\n```javascript\n{\n color: string,\n width: string\n}\n```\n\n* **color**: defines the color of the single link.\n* **width**: defines the width of the single link.\n\nIf not provided, will be used the values set in the configuration.\n\n###### source (configuration for edge)\n\nAn **string** that defines the id of the source node of the edge. It is **required**.\n\n###### target (configuration for edge)\n\nAn **string** that defines the id of the target node of the edge. It is **required**.\n\n###### nodes (configuration for cluster)\n\nAn **array of string** that defines the ids of the nodes that are contained in the cluster. It is **required**.\n\n###### cluster (configuration for cluster)\n\nAn **object** that defines the appearance of the cluster.\n\n```javascript\n{\n level: number,\n strokeColor: string,\n fillColor: string,\n label: {\n color: string,\n position: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center'\n }\n}\n```\n\n* **level**: defines the position of the cluster respect to the others. For example, if level is **0**, the cluster will be the first and so on. If not provided, clusters will be ordered by the position in the data.\n* **strokeColor**: defines the border color of the cluster. If not provided, will be used the values set in the configuration.\n* **fillColor**: defines the inner color of the cluster. If not provided, will be used the values set in the configuration.\n* **label**: an object that defines the appearance of the cluster label. If not provided, will be used the values set in the configuration.\n\n\n#### Component\n\nWhen the configuration and the data are set, the last step is to import the component into the html.\n\n```angular2html\n\n```\n\n**IMPORTANT**: the component must be enclosed in an element with **width** and **height** set.\n\n#### Example\n\nBelow an example\n\n\n Configuration
\n\n```javascript\nimport {FlowChartGraphConfigurationInterface} from '@acimini/cm-d3-graphs';\n\nconst flowChartConfs: FlowChartGraphConfigurationInterface = {\n id: 'flow_chart',\n type: 'flow-chart',\n nodes: {\n shape: 'rect'\n },\n zoom: {\n minZoom: 0.5,\n maxZoom: 4\n },\n links: {\n arrowDirection: 'end'\n },\n orientation: 'horizontal',\n clusters: {\n ","readmeFilename":"README.md"}