{"_id":"@avsolatorio/vue-map-chart","_rev":"1-3ff03e6fdc21029eebe2196800d25633","name":"@avsolatorio/vue-map-chart","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.3":{"author":{"name":"Aivin V. Solatorio"},"dependencies":{"chroma-js":"^1.3.5","vue":"^2.5.2"},"deprecated":false,"description":"VueJS Map Chart","devDependencies":{"babel-core":"^6.22.1","babel-eslint":"^7.1.1","babel-jest":"^22.0.4","babel-loader":"^7.1.1","css-loader":"^0.28.0","eslint":"^4.18.2","eslint-config-airbnb-base":"^11.3.0","eslint-friendly-formatter":"^3.0.0","eslint-import-resolver-webpack":"^0.8.3","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-import":"^2.7.0","jest":"^22.0.4","vue-jest":"^1.4.0","vue-loader":"^13.3.0"},"license":"MIT","main":"src/App.vue","name":"@avsolatorio/vue-map-chart","publishConfig":{"access":"public"},"scripts":{"lint":"eslint --ext .js,.vue src test","test":"jest --config jest.conf.js","test:watch":"npm run test -- --watch"},"version":"0.0.3","directories":{"test":"test"},"repository":{"type":"git","url":"git+https://github.com/avsolatorio/vue-map-chart.git"},"keywords":["vue","map","chart","dynamic-map"],"bugs":{"url":"https://github.com/avsolatorio/vue-map-chart/issues"},"homepage":"https://github.com/avsolatorio/vue-map-chart#readme","gitHead":"4f7a6a7ac9354334eaffee298ebdc73d9143e7fe","_id":"@avsolatorio/vue-map-chart@0.0.3","_nodeVersion":"10.19.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-9zyXQvrXCd27c60PEp5cMvEF9kf53oxlTWiof8cMHJBraefyB42odDfBVsob95mLM6jN+qRWAU2WaPCvTYgUuw==","shasum":"5d0512c1dd5bfe2f0ddc09cb56a835d6387e48f7","tarball":"https://registry.npmjs.org/@avsolatorio/vue-map-chart/-/vue-map-chart-0.0.3.tgz","fileCount":11,"unpackedSize":262245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXCwHCRA9TVsSAnZWagAA8YIP/R+SXeC7Ukb3MgXhV4d0\nuwdi5MorAl8g+Bhj24QxLL6qrcuKjc/JcJSozJCE3nqPfHNjG3npdHZlX8lX\nxrOoBhDOEzK/LwDRpBNh44rXHwU+bS91YE7t/zi4J89oXIrfpSVsvx4ko3UG\nisVDHP5yGdhjb9sQSbupLi5ZDs2hyncWbZtybdwWMUZicKl9lhUENSkZJthR\nzSzkfaIw9n8gMCzZK745zQWbzwhQ1uPPwet9UQ6KA11PyDes/YxVJjvJLcDo\nQvv5Tz7ZYTQXNYOYcs45RH27HdyJihyAJ71U6qYLTKaWg5vOEtB4cwig3MdG\nSRRBqPXg33q6gW2bBLa1Bgw/6y42SFV6dJeSrrYZviL8nq9Yf8G/ZuzwApYq\naKptWsimzG5RPBIF3ffjDthBzGKyBvEV2JsNbU0CREHRHes3CZ34KcFpTueI\nVJ00ldkgtsv8ZYmm3gFnPRfOGB7Elhp5ec6IiE3E9fIGrOA9GOTrkNfMJTAH\nGO68yRjVYlc7tHDciPLspauBAw3m7tDcfjbTHuJpP1tw2CLXArFTaIFLdOHk\nbkWlTMehvDdqiEi07tdRmRHGMhWBW3SH1Xjpxsg7OLo4PYqP9o5b4Irlt5Oh\nCO7Y1pYfy8D53EKJw0rU8qUZ2Snt5+kmP+FCYtehOoP7Me1RnOcdvtvpHCz3\nvfx+\r\n=FcXX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN3dakDcR2vExpk7Yo54ETlibqAz3sfUubiV1o2XFwmQIhAIgQPqkhPKsJd1MMnMG39xEWRarTUYZbmwBsJF0L6Zex"}]},"_npmUser":{"name":"avsolatorio","email":"avsolatorio@gmail.com"},"maintainers":[{"name":"avsolatorio","email":"avsolatorio@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-map-chart_0.0.3_1616653318507_0.2569088887595281"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-25T06:21:58.470Z","0.0.3":"2021-03-25T06:21:58.688Z","modified":"2022-04-04T16:48:55.977Z"},"maintainers":[{"name":"avsolatorio","email":"avsolatorio@gmail.com"}],"description":"VueJS Map Chart","homepage":"https://github.com/avsolatorio/vue-map-chart#readme","keywords":["vue","map","chart","dynamic-map"],"repository":{"type":"git","url":"git+https://github.com/avsolatorio/vue-map-chart.git"},"author":{"name":"Aivin V. Solatorio"},"bugs":{"url":"https://github.com/avsolatorio/vue-map-chart/issues"},"license":"MIT","readme":"# Vue Map Chart\n\nA Vue JS Component for displaying dynamic data on a world map.\n\n![preview](https://raw.githubusercontent.com/maguayo/vue-map-chart/master/preview/preview-world.png)\n\n\n## Credits\n\n- Most of this code is copied from [https://github.com/Ghrehh/vue-world-map](https://github.com/Ghrehh/vue-world-map)\n- Map SVG [amCharts](https://www.amcharts.com/svg-maps/?map=world)\n\n\n## Installation\n\nInstall via npm using `npm install vue-map-chart`\n``` javascript\nimport MapChart from 'vue-map-chart'\n```\n\n## Usage\n\nThis component is most useful in creating a heat map for various countries. And\nwill color countries differently based on a props passed.\n\nThe component requires a prop of `countryData` to be passed to it, which is a JS\nobject formatted like so.\n\n``` javascript\n{\n  \"US\": 100,\n  \"CA\": 120,\n  \"GB\": 400,\n}\n```\n\nWhere the key is a country's\n[ISO 3166 Code](https://en.wikipedia.org/wiki/ISO_3166) and the value is a\nnumerical value associated with it.\n\nExample:\n``` javascript\nimport MapChart from 'vue-map-chart'\n\n<MapChart\n  :countryData=\"{'US': 4, 'CA': 7, 'GB': 8, 'IE': 14, 'ES': 21}\"\n  highColor=\"#ff0000\"\n  lowColor=\"#aaaaaa\"\n  countryStrokeColor=\"#909090\"\n  defaultCountryFillColor=\"#dadada\"\n  />\n```\n\n## API\n\n| Props | Description | Optional |Type|\n| --- | --- | --- |--- |\n| countryData | See Usage Section above for details  | no | Object |\n| lowColor | Countries with lower values will be colored more strongly with this color | yes | String|\n| highColor | Countries with higher values will be colored more strongly with this color | yes | String|\n| chromaScaleOn |If True chromaScale of color, if false countries with value will be filled of the hightColor. By default is True | yes | Boolean|\n| defaultCountryFillColor | Countries with no data will default to this color | yes |String |\n| countryStrokeColor | The color of the border around countries | yes | String|\n| legendBorderColor |  The color of the legend's border | yes | String|\n| legendBorderRadius |  The radius of the legend's border | yes |Number|\n| legendHeaderBackgroundColor |  The background color of the legend's header | yes |String|\n| legendContentBackgroundColor |  The background color of the legend's content | yes |String|\n| legendFontColorHeader |  The font color of the legend's header | yes |String|\n| legendFontColorContent |  The font color of the legend's content | yes |String|\n| legendBoxShadow |  If true, a box shadow is display | yes |Boolean|\n| showLegend | (WIP) If true, when you select a country a legend will appear on the screen | WIP |Boolean|\n\n\n\n\n## Roadmap\n- Change Map type (World, Europe, single country, etc...) (WIP)\n- Click events\n- More customization\n- Export PDF/CSV","readmeFilename":"README.md"}