{"_id":"@alexnavis/react-gauge-chart2","_rev":"2-a3c8d2b7998b7e257fc247feede6d550","name":"@alexnavis/react-gauge-chart2","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@alexnavis/react-gauge-chart2","version":"1.0.0","main":"dist/index","module":"dist/index","typings":"dist/index","homepage":"https://github.com/alexnavis/react-gauge-chart/","keywords":["visualization","react","gauge chart","speedometer"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alexnavis/react-gauge-chart.git"},"dependencies":{"d3":"^5.12.0"},"scripts":{"start":"react-scripts start","prebuild":"rimraf dist","build":"NODE_ENV=production babel src/lib --out-dir dist --copy-files","build-page":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","predeploy":"npm run build-page","deploy":"gh-pages -d build"},"eslintConfig":{"extends":"react-app"},"browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"devDependencies":{"@babel/cli":"^7.12.8","@babel/core":"^7.6.2","@babel/plugin-proposal-class-properties":"^7.4.4","@babel/preset-env":"^7.4.4","@babel/preset-react":"^7.0.0","@babel/runtime":"^7.6.2","babel-preset-react-app":"^8.0.0","cross-env":"^5.2.1","gh-pages":"^2.1.1","react":"^17.0.1","react-bootstrap":"^1.4.0","react-dom":"^17.0.1","react-scripts":"4.0.0","rimraf":"^2.7.1"},"peerDependencies":{"react":"*","react-dom":"*"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"description":"React component for displaying a gauge chart, using D3.js","bugs":{"url":"https://github.com/alexnavis/react-gauge-chart/issues"},"author":{"name":"Alex Lawrence","email":"alexnavis85@gmail.com","url":"https://github.com/alexnavis"},"gitHead":"7c03e0998a879dc5fc163371b2aa52cdaaa204c5","_id":"@alexnavis/react-gauge-chart2@1.0.0","_nodeVersion":"18.0.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-4S45MCjxduygEgoOlRiy/CHyIdmVmDZya3akshEfGFMUrd983WCBKKKvP9hXTWbcpOhLvNcsMsmwDu3Nvmip5g==","shasum":"270dfbf27c580161c84996c4a3f3de3c6238c197","tarball":"https://registry.npmjs.org/@alexnavis/react-gauge-chart2/-/react-gauge-chart2-1.0.0.tgz","fileCount":6,"unpackedSize":26110,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCESqm/qEZ7fvcsHehHwkio8oPA8BoEpcZP89C/Im64AiBKeVBhJ6lmW4hItBOWv5cTsyvbtxFvXQRAjl4ErzgFdw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6m0EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsUQ/+MEZNRjGLDleP+pGU6iFZ5IzUjT63mIi2elAqB8GkiRMYtxr1\r\nSF8NpYcvfuPBv5F7jORcbOnj7bWZBeShFHFQV3S/iwIJO5zXTn/nf5n3JlNK\r\nkixNNR6J5UvL1v215CyggC+NhZx1dfgVJfB5GQ1j7i72FoKH72rJN4OZ8GcW\r\nGSqpHzhunq67kB9YSOo1jbydfoq4KQhw4/SRq5LPqq6hbi0BrYYYzd5GkQzd\r\nz7xH4Z91DMnhXCoJUUEs5l9VdV1OFilTagxnuDyzjCIZO0HDcfxMqLkxsX3Q\r\nYZP4Y0OL+kKTGXvQSKvyQ6Rg4bnyz4rWbSRi63XrcjaAwmvqCEDUBL8sM5U5\r\nYKjibNe6Tcq1V01xRIFhFyPtG+Uily+iQk2OofUHgYUn14BZkxKZYRJLVffP\r\n2efxgMe/Fy5vcxyQkmVpE2Twc3AAN+ESc/hCC1RKJ376tqA35sM1poomVD54\r\nfkP0YtkHSnBKh0jVysE72q6zL9SqvMxrZaFzLub11EjTaGZwpWwm8t4T4vtA\r\n7Wj0UtajrflFfuFkAFnGGtiFL4MvqbQLrolqXsKdfR1/Cv/PMvfCojPw0OKZ\r\n2An48Jzlx0T1sw/9uF+9qAIIIyVUfc0UDBwa1tT3b6DwzJyvO5VkZKv+VLXO\r\nPv21aqP/+gU6TYQCodcBhAsnA5O/KNmySak=\r\n=T+v/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexnavis","email":"alexnavis85@gmail.com"},"directories":{},"maintainers":[{"name":"alexnavis","email":"alexnavis85@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gauge-chart2_1.0.0_1659530499785_0.22133987205858574"},"_hasShrinkwrap":false},"1.0.1":{"name":"@alexnavis/react-gauge-chart2","version":"1.0.1","main":"dist/index","module":"dist/index","typings":"dist/index","homepage":"https://github.com/alexnavis/react-gauge-chart/","keywords":["visualization","react","gauge chart","speedometer"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alexnavis/react-gauge-chart.git"},"dependencies":{"d3":"^5.12.0"},"scripts":{"start":"react-scripts start","prebuild":"rimraf dist","build":"NODE_ENV=production babel src/lib --out-dir dist --copy-files","build-page":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","predeploy":"npm run build-page","deploy":"gh-pages -d build"},"eslintConfig":{"extends":"react-app"},"browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"devDependencies":{"@babel/cli":"^7.12.8","@babel/core":"^7.6.2","@babel/plugin-proposal-class-properties":"^7.4.4","@babel/preset-env":"^7.4.4","@babel/preset-react":"^7.0.0","@babel/runtime":"^7.6.2","babel-preset-react-app":"^8.0.0","cross-env":"^5.2.1","gh-pages":"^2.1.1","react":"^17.0.1","react-bootstrap":"^1.4.0","react-dom":"^17.0.1","react-scripts":"4.0.0","rimraf":"^2.7.1"},"peerDependencies":{"react":"*","react-dom":"*"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"description":"React component for displaying a gauge chart, using D3.js","bugs":{"url":"https://github.com/alexnavis/react-gauge-chart/issues"},"author":{"name":"Alex Lawrence","email":"alexnavis85@gmail.com","url":"https://github.com/alexnavis"},"gitHead":"33ffb161ca309112370cabdbc56255790f40442c","_id":"@alexnavis/react-gauge-chart2@1.0.1","_nodeVersion":"18.0.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-YHDa1R+Wk6qo0RXQ0uW9LUohOZGTkmOC8eZMnoeVBNk96AzPE8MqjeKumc3AMaSGmYz5010IbQoAVzpEcpsfbA==","shasum":"45996700a7395239569541366c3db0761a0e3767","tarball":"https://registry.npmjs.org/@alexnavis/react-gauge-chart2/-/react-gauge-chart2-1.0.1.tgz","fileCount":6,"unpackedSize":26199,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGMTZKnASBM1t4ZUWk0VyBcYdd3u1+JKaMJS8hR8n/m2AiAofVdv8SW2zis9S+O/zedT8Nx+2w73TWNkH50gkfyxAA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6m2ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo8RAAllhW62cXdlvzNp+Gyxpuh+u2y/znbxYN0Hp1huPHXS0Fxhua\r\nPYY+8t+XmQXym0DpItIFRw/8sR29vzzPn53nITfG8dN7KDiouAha4rrL9b8q\r\nurqN0pThm08ogsB86E5FuuWgry3rEqCZYG2i0ZwU1t0KLaLfX6eLSQyusAPP\r\nqaOPpoWjDzaVhg8jdejQbNFcM+bHMrhuyrGIMWv88aQGZxais33Q6eND/wU1\r\nDREIAcgYU3hBTQ0wKmAo3hdaOARL7Km8I6btyDLmy71ZA31rtDIIwiItm3F4\r\nzlNzaF5esvVEZux4hVNB3NDqIW0Urrmq2Db2I/lCits/V/t42eAAeydi5CU/\r\nHjxCCtx1s3OsvIcTNkyOkW/2K75uVfPk9YdsrM6vmVos6a0hCaSPgPK0pBTJ\r\n8r0F4fKq55GnKIJrDRaUMHbU6nrdlvYpMmBxDGuDvs4ZiU7nHraIJ4MjrSPc\r\nqBfnA2bp3lxcD+85O8bg0VlApGXFWyhSdLkzTj+TM2YNekrsK77hgXfJlvSv\r\n5b7SBl6CsTTwGFRSmUl/Z8ZCdf9pxY73wcYqZ08Oa+KElt3Vpi9DcwiRFv7+\r\nYK8i0Wf7/zXxcfeM/XYqB3ONJ2az5XIH4ijIIh8PSIKMEb5XM/tx9mxf24UW\r\n5w5dv6+hBVl68GVjPAk3zn6e04MkzpmGIjU=\r\n=nsB4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexnavis","email":"alexnavis85@gmail.com"},"directories":{},"maintainers":[{"name":"alexnavis","email":"alexnavis85@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gauge-chart2_1.0.1_1659530649138_0.30573761483249573"},"_hasShrinkwrap":false},"1.0.2":{"name":"@alexnavis/react-gauge-chart2","version":"1.0.2","main":"dist/index","module":"dist/index","typings":"dist/index","homepage":"https://github.com/alexnavis/react-gauge-chart/","keywords":["visualization","react","gauge chart","speedometer"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alexnavis/react-gauge-chart.git"},"dependencies":{"d3":"^5.12.0"},"scripts":{"start":"react-scripts start","prebuild":"rimraf dist","build":"NODE_ENV=production babel src/lib --out-dir dist --copy-files","build-page":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","predeploy":"npm run build-page","deploy":"gh-pages -d build"},"eslintConfig":{"extends":"react-app"},"browserslist":[">0.2%","not dead","not ie <= 11","not op_mini all"],"devDependencies":{"@babel/cli":"^7.12.8","@babel/core":"^7.6.2","@babel/plugin-proposal-class-properties":"^7.4.4","@babel/preset-env":"^7.4.4","@babel/preset-react":"^7.0.0","@babel/runtime":"^7.6.2","babel-preset-react-app":"^8.0.0","cross-env":"^5.2.1","gh-pages":"^2.1.1","react":"^17.0.1","react-bootstrap":"^1.4.0","react-dom":"^17.0.1","react-scripts":"4.0.0","rimraf":"^2.7.1"},"peerDependencies":{"react":"*","react-dom":"*"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"description":"React component for displaying a gauge chart, using D3.js","bugs":{"url":"https://github.com/alexnavis/react-gauge-chart/issues"},"author":{"name":"Alex Lawrence","email":"alexnavis85@gmail.com","url":"https://github.com/alexnavis"},"gitHead":"a02d0c4871a5dc7d1860ea117bc9925997038177","_id":"@alexnavis/react-gauge-chart2@1.0.2","_nodeVersion":"18.0.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-fcYJ2eiUGGHa8kTG364t3trt1umE7V+UB07PdtkHUNhJ0XoWvOj5PU8aQN8gNABneqsqzG3NK5IzLUatddhW9w==","shasum":"d2bd1ad6d94943c24144cbba56f8f817b92a2e33","tarball":"https://registry.npmjs.org/@alexnavis/react-gauge-chart2/-/react-gauge-chart2-1.0.2.tgz","fileCount":6,"unpackedSize":26200,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7zrOLDxFTlbMAotCUz1ew2H+C9wqsvZD3/CmBNWhItAiBLpHM7xA7DNolLRyv7etRxXblIi0encfsET2viOkvIZw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6m3tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGsxAAnfr9QuA1ktQEMaftiaENs7Nd8ji9sUmNPL9kIUYK01gYISDO\r\nwDEahdIJfCYT1DZLZPB2FNCl6KQri8ST1/V3VtIOsVep5HhhPiOUrii8BMwu\r\nH4cniM9PueMPqdUgW2jExu2gJH3UNrdYa/hPMEjlerzTa6PV9yDt832FJ0WD\r\nZvoVGZZnQZ7vZ1CwwHlP6hZEa1cEh5zaz2vC0yyWux+gVIc8n6u6uk+buXDo\r\ntOuwoXeDPkH7bSaRyOZ6jVUCsRy+cdHXCGzf7b1r/+cfyDVqeAPTAZ35hbNP\r\n03ejqGZdj7TK8YIJ2q77uPDQg0Jcls5MCxoEEyZVWMwa4JpHciLO4ln9XKbR\r\nBlKL+sBXudibnFO1hlLbrmEhxCwv2/bDnXe2T6QdCizRgljF7T1IyWaoFjdH\r\nyfSUQhpgM47T4xmjmNPVmkiVeysq9VyXo+xFe8CQcsX0hr6v/m1HQ67NHSIk\r\niEaooLtLnnCUFxHOXn9SkzheLxBLyqCitGebkrla8aZ7iQdt6lNT1y9Ac41s\r\nhuAwE61B1SV9D7/AamLz3e/hR32ABYndkkPIkZg3Dl2d8Eupj0iqPqdy4OKh\r\n3LfUOiOx6dRyJo71Zgo2Y9c8p/BE+GNtnJzv4MVh/sT8iZrY9xyIkgxGzZFj\r\nBoVsFPS2agF1dVkhaA6mWQqDHfkK1MqdfKQ=\r\n=DrsE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexnavis","email":"alexnavis85@gmail.com"},"directories":{},"maintainers":[{"name":"alexnavis","email":"alexnavis85@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gauge-chart2_1.0.2_1659530733611_0.4674539186062745"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-03T12:41:39.680Z","1.0.0":"2022-08-03T12:41:40.019Z","modified":"2022-08-03T12:45:33.932Z","1.0.1":"2022-08-03T12:44:09.320Z","1.0.2":"2022-08-03T12:45:33.856Z"},"maintainers":[{"name":"alexnavis","email":"alexnavis85@gmail.com"}],"description":"React component for displaying a gauge chart, using D3.js","homepage":"https://github.com/alexnavis/react-gauge-chart/","keywords":["visualization","react","gauge chart","speedometer"],"repository":{"type":"git","url":"git+https://github.com/alexnavis/react-gauge-chart.git"},"author":{"name":"Alex Lawrence","email":"alexnavis85@gmail.com","url":"https://github.com/alexnavis"},"bugs":{"url":"https://github.com/alexnavis/react-gauge-chart/issues"},"license":"MIT","readme":"Forked from https://github.com/Martin36/react-gauge-chart.\n\n- Updated To Latest 'React'\n\n# react-gauge-chart\nReact component for displaying a gauge chart, using D3.js\n\n# Usage\nInstall it by running `npm install react-gauge-chart2`. Then to use it:\n\n```jsx\nimport GaugeChart from 'react-gauge-chart'\n\n\n```\n\n## Examples\n\nCheck the demo below for live examples of the charts\n\n#### To create a default chart\n\n```jsx\n\n```\n\n#### Chart with 20 levels and pointer at 86%\n\n```jsx\n\n```\n\n#### Chart with custom colors and larger arc width\n\n```jsx\n\n```\n\n#### Chart with other corner radius and larger padding between arcs\n\n```jsx\n\n```\n\n#### Chart with custom arcs width\n\n```jsx\n\n```\n\n#### Chart with disabled animation\n\n```jsx\n\n```\n\n# Demo\nhttps://martin36.github.io/react-gauge-chart/\n\n# API\n\n## \n\n### Warning: Do not use the same `id` for multiple charts, as it will put multiple charts in the same container\n\n#### Note: If you do any updates to the props of the chart, it will rerender with a different size (it's a bug). To prevent this set a fixed height for the chart e.g.\n\n```jsx\nconst chartStyle = {\n height: 250,\n}\n\n\n\n```\n\nThe props for the chart:\n\n| Name | PropType | Description | Default value |\n|-----------------|-----------------------------|----------------------------------------------------------------|------------------------|\n| id | PropTypes.string.isRequired | Used for the identification of the div surrounding the chart | |\n| className | PropTypes.string | Add `className` to the div container | |\n| style | PropTypes.object | Add `style` to the div container | { width: '100%' } |\n| marginInPercent | PropTypes.number | Margin for the chart inside the containing SVG element | 0.05 |\n| cornerRadius | PropTypes.number | Corner radius for the elements in the chart | 6 |\n| nrOfLevels | PropTypes.number | The number of elements displayed in the arc | 3 |\n| percent | PropTypes.number | The number where the pointer should point to (between 0 and 1) | 0.4 |\n| arcPadding | PropTypes.number | The distance between the elements in the arc | 0.05 |\n| arcWidth | PropTypes.number | The thickness of the arc | 0.2 |\n| colors | PropTypes.array | An array of colors in HEX format displayed in the arc | [\"#00FF00\", \"#FF0000\"] |\n| textColor | PropTypes.string | The color of the text | \"#FFFFFF\" |\n| needleColor | PropTypes.string | The color of the needle triangle | \"#464A4F\" |\n| needleBaseColor | PropTypes.string | The color of the circle at the base of the needle | \"#464A4F\" |\n| hideText | PropTypes.bool | Whether or not to hide the percentage display | false |\n| arcsLength | PropTypes.array | An array specifying the length of each individual arc. If this prop is set, the nrOfLevels prop will have no effect | none |\n| animate | PropTypes.bool | Whether or not to animate the needle when loaded | true |\n| animDelay | PropTypes.number | Delay in ms before starting the needle animation | 500 |\n| animateDuration | PropTypes.number | Duration in ms for the needle animation | 3000 |\n| formatTextValue | PropTypes.func | Format you own text value (example: value => value+'%') | null |\n\n##### Colors for the chart\n\nThe colors could either be specified as an array of hex color values, such as `[\"#FF0000\", \"#00FF00\", \"#0000FF\"]` where\neach arc would a color in the array (colors are assigned from left to right). If that is the case, then the **length of the array**\nmust match the **number of levels** in the arc.\nIf the number of colors does not match the number of levels, then the **first** and the **last** color from the colors array will\nbe selected and the arcs will get colors that are interpolated between those. The interpolation is done using [d3.interpolateHsl](https://github.com/d3/d3-interpolate#interpolateHsl).\n","readmeFilename":"README.md"}