{"_id":"@dpaladin/svg-gauge","_rev":"1-2e28e582ca1dddfc492c16ce1ed91f3f","name":"@dpaladin/svg-gauge","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.6":{"name":"@dpaladin/svg-gauge","version":"1.0.6","description":"Minimal SVG animated gauge with zero dependencies","main":"index.js","directories":{"test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/dpaladin/svg-gauge.git"},"keywords":["SVG","Gauge","Animation"],"author":{"name":"dpaladinnyuu@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/dpaladin/svg-gauge/issues"},"homepage":"https://github.com/dpaladin/svg-gauge#readme","devDependencies":{"del":"~3.0.0","gulp":"^4.0.2","gulp-concat":"~2.6.1","gulp-uglify":"~3.0.1"},"types":"svg-gauge.d.ts","gitHead":"6e25e2384075d16071769a68ccb453ce788b9423","_id":"@dpaladin/svg-gauge@1.0.6","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-rdf0L1fVkPjUYQd1T1mo0YzZ4/qc9VlnZBiuc6jUaVc2+ydjGunRvQMIlVDHtxgr+YCny3OHFger1h/NaXNNdQ==","shasum":"ca476ddc9bafe845cc6dec90ca268389d0db4d67","tarball":"https://registry.npmjs.org/@dpaladin/svg-gauge/-/svg-gauge-1.0.6.tgz","fileCount":13,"unpackedSize":59818,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0eTFLDNvXwI1OE2m1VxIcZDjcEHRbBiua6DijYru6WAIgNiEqJHh9UScg9Vw02R+HQHiM3w3A7wv8VIlevzLNFJE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6V+aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrm2w//Ul34l8V9xACHRgCXK2UBZFmSj1g9MXI/sHM1JSJBDEw7YgQ0\r\n6f4O2CYUj9l4tUsYzpIwOzGBPOgNLJ7EbE942ksJiD95Fs2y0Ls3GKeoDji6\r\nDYl9Ux7sHF57YUdTEAWPVwAQ3RPGslcTFGCanlNtxmZWB0Z5a5jt9QgLOjdF\r\n+7VmSYELiUB+IJdNBukNnhgjC69FfNmRLxqQr+QvYNfCSGKltHg3VpiuHRn6\r\nmm0T8EzbyC0FiWtxswtdnissNJrJyCUfp9zSiA3n+0FRjzrmdQnNw3ZsVwJA\r\n9YsRh841DklEp/ah9oCPEyrdZdnr1m3UGsNIPwUpLnw5mZlD7KAcfc9ku0mv\r\njHj3GK9IUFbCSn62WqKMQI8LQqQUz1Po2Lt9ZjjUvd9nfDU4OE7CR+phJnhv\r\nrtB7ZylM4xqcxyLQhRsf1SAh+HH5j439Ap8kPnM1e90Jkfc3+E0tNUz3Px2S\r\nCz5q+r7G+KgB9OooxyN9aww75E35Ird3g6iva/P3Fb5HCD8sfSEAHTqWdRj+\r\nzHkZUMbC4j8EDcofk2aR32CchNcsK/LYy/kXu9A5YwOUITZ0YzOD2cHoOKTW\r\nO3pZxqQp1Up6x7sm/5nKStP1Uf5/mmWr5/5MwjFm4j/3hJyITy9FSByNKdCm\r\nrUvntyrK4dnYO3B8X3wd0Xuh4lbUK690Dh4=\r\n=MZZu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dpaladin","email":"dpaladinnyuu@gmail.com"},"maintainers":[{"name":"dpaladin","email":"dpaladinnyuu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-gauge_1.0.6_1659461530420_0.059112241149329"},"_hasShrinkwrap":false},"1.0.7":{"name":"@dpaladin/svg-gauge","version":"1.0.7","description":"Minimal SVG animated gauge with zero dependencies","main":"index.js","directories":{"test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/dpaladin/svg-gauge.git"},"keywords":["SVG","Gauge","Animation"],"author":{"name":"dpaladinnyuu@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/dpaladin/svg-gauge/issues"},"homepage":"https://github.com/dpaladin/svg-gauge#readme","devDependencies":{"del":"~3.0.0","gulp":"^4.0.2","gulp-concat":"~2.6.1","gulp-uglify":"~3.0.1"},"types":"svg-gauge.d.ts","gitHead":"6e25e2384075d16071769a68ccb453ce788b9423","_id":"@dpaladin/svg-gauge@1.0.7","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-dkwwVFF5TNDaGsU3oT7RswVwv2vb8EZs5yr18k+0Yt/fNEGhgr904uJ6jkmwkCYeSHteYuSY/hmP1bMQqG7m0A==","shasum":"8f128b4f43315b407673da115591355b92211196","tarball":"https://registry.npmjs.org/@dpaladin/svg-gauge/-/svg-gauge-1.0.7.tgz","fileCount":13,"unpackedSize":59828,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDU25mJKFwtbqaMZQA/oiG+7TfARvU2afhe2j+0mDCHpQIhAKvbaRg7kuv00ck+HW1omuv2KRYe1yOylIian4DUqaq3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6ZfsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmritBAAoOBm2F3SvoU7Ph7dy/aqNyCsHfue3oegjyS6+QBw5BFSP8CJ\r\niIwupWKZd4x70j9oE/nCm/BOe8AHaYMqWEEcLO/3vprPXy/M64T4CMwz7QUw\r\nR/YyJQewekAYAG2sNNkobci5gbnovC1s37ptvCR618czlCRGdz9swF/tLKB7\r\nTfqQFtGHuUZvnDeIbpggu17THFKDNOGqyDHBBDgP38+2AuCd/tdeY9oUhvAA\r\ngSmjKYC4YGNW4eOmf6iiGRQ2xUlD73jT5JcsFDpTu7O0YrjM7vISkeloXHYh\r\nJrG45JnmDFKNPonOx5uxKkTIxZ0iTqbFrC0Vse5XRZLlyD9cvWggXMxTItRr\r\nSwV2FXbs2YTlWxQ6FZ3GgaNCXKbYWgRgIPN4zFZvOfNOpyMv9m7ENhUbqOWH\r\nrSUCzb42kF1RNppVp+PpUZbFkCOm0OwGI7qekr7d9VZEn+pgq9mNIg5/mWDT\r\nVyio8IBL3ne0oGalPsfBT8iaYR1s4LWcJDrCr7crkH5k8o1L7cQzu84v/qAH\r\nASBc6F5AOPjCsvU5nplqLc+PEF2i6iuHC4QfeJhHJmn+/R2gPmmtPoCgYFFR\r\nCuvuuDqpX+M4iOAN/cotzJ+oUdiNk3p9lc84Ue/dv8949KAdn+HyrxZtaM+o\r\nKD3mKSUu9VNUL6ixuT0nimuTvE79nK+VuPg=\r\n=ZHvT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dpaladin","email":"dpaladinnyuu@gmail.com"},"maintainers":[{"name":"dpaladin","email":"dpaladinnyuu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-gauge_1.0.7_1659475947897_0.24380759694926435"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-02T17:32:10.359Z","1.0.6":"2022-08-02T17:32:10.610Z","modified":"2022-08-02T21:32:28.259Z","1.0.7":"2022-08-02T21:32:28.187Z"},"maintainers":[{"name":"dpaladin","email":"dpaladinnyuu@gmail.com"}],"description":"Minimal SVG animated gauge with zero dependencies","homepage":"https://github.com/dpaladin/svg-gauge#readme","keywords":["SVG","Gauge","Animation"],"repository":{"type":"git","url":"git+https://github.com/dpaladin/svg-gauge.git"},"author":{"name":"dpaladinnyuu@gmail.com"},"bugs":{"url":"https://github.com/dpaladin/svg-gauge/issues"},"license":"MIT","readme":"# SVG Gauge\nMinmalistic, configurable, animated SVG gauge. Zero dependencies\n\n\n## Buy me a coffee ☕\nIf you like my work please consider making a small donation\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/Z8Z01L1TS)\n\n\n## Migration from 1.0.2\n\nThe new gauge uses a viewbox of 100x100 as opposed to previous 1000x1000. All the stroke and font values have to be adjusted accordingly in your CSS. Just divide those by 10\n\n\n## Demo\nCheck out the [live demo](http://codepen.io/naikus/pen/BzkoLL) for various options and styling tips for this gauge\n\n\n## Usage\n\nHTML\n```html\n<div id=\"cpuSpeed\" class=\"gauge-container\"></div>\n```\nCSS\n```css\n.gauge-container {\n  width: 150px;\n  height: 150px;\n  display: block;\n  padding: 10px;\n}\n.gauge-container > .gauge .dial {\n  stroke: #eee;\n  stroke-width: 2;\n  fill: rgba(0,0,0,0);\n}\n.gauge-container > .gauge .value {\n  stroke: rgb(47, 227, 255);\n  stroke-width: 2;\n  fill: rgba(0,0,0,0);\n}\n.gauge-container > .gauge .value-text {\n  fill: rgb(47, 227, 255);\n  font-family: sans-serif;\n  font-weight: bold;\n  font-size: 1em;\n}\n```\nJavascript\n```js\n// npm install\nnpm install svg-gauge\n\n// Require JS\nvar Gauge = require(\"svg-gauge\");\n\n// Standalone\nvar Gauge = window.Gauge;\n\n// Create a new Gauge\nvar cpuGauge = Gauge(document.getElementById(\"cpuSpeed\"), {\n    max: 100,\n    // custom label renderer\n    label: function(value) {\n      return Math.round(value) + \"/\" + this.max;\n    },\n    value: 50,\n    // Custom dial colors (Optional)\n    color: function(value) {\n      if(value < 20) {\n        return \"#5ee432\"; // green\n      }else if(value < 40) {\n        return \"#fffa50\"; // yellow\n      }else if(value < 60) {\n        return \"#f7aa38\"; // orange\n      }else {\n        return \"#ef4655\"; // red\n      }\n    }\n});\n\n// Set gauge value\ncpuGauge.setValue(75);\n\n// Set value and animate (value, animation duration in seconds)\ncpuGauge.setValueAnimated(90, 1);\n\n```\n\n#### Options\n\n|      Name            |                  Description                       |\n| -------------------- | ------------------------------------------------------------------------------------- |\n| ```dialStartAngle``` | The angle in degrees to start the dial (```135```)       |\n| ```dialEndAngle```   | The angle in degrees to end the dial. This MUST be less than dialStartAngle (```45```)  |\n| ```radius```         | The radius of the gauge (```40```) |\n| ```min```            | The minimum value for the gauge. This can be a negative value (```0```)  |\n| ```max```            | The maximum value for the gauge (```100```)  |\n| ```label```          | Optional function that returns a string label that will be rendered in the center. This function will be passed the current value |\n| ```showValue```      | Whether to show the value at the center of the gauge (```true```) |\n| ```gaugeClass```     | The CSS class of the gauge (```gauge```) |\n| ```dialClass```      | The CSS class of the gauge's dial (```dial```) |\n| ```valueDialClass``` | The CSS class of the gauge's fill (value dial) (```value```) |\n| ```valueClass```     | The CSS class of the gauge's text (```value-text```) |\n| ```color (new)```    | An optional function that can return a color for current value  ```function(value) {}``` |\n| ```viewBox (new)```  | An optional string that specifies the crop region (```0 0 100 100```) |\n\n\n\n## That's all good, but what about React?\n```JSX\nimport React, { useEffect, useRef } from \"react\";\nimport SvgGauge from \"svg-gauge\";\n\nconst defaultOptions = {\n  animDuration: 1,\n  showValue: true,\n  initialValue: 0,\n  max: 100\n  // Put any other defaults you want. e.g. dialStartAngle, dialEndAngle, radius, etc.\n};\n\nconst Gauge = props => {\n  const gaugeEl = useRef(null);\n  const gaugeRef = useRef(null);\n  useEffect(() => {\n    if (!gaugeRef.current) {\n      const options = { ...defaultOptions, ...props };\n      gaugeRef.current = SvgGauge(gaugeEl.current, options);\n      gaugeRef.current.setValue(options.initialValue);\n    }\n    gaugeRef.current.setValueAnimated(props.value, 1);\n  }, [props]);\n\n  return <div ref={gaugeEl} className=\"gauge-container\" />;\n};\n\nexport default Gauge;\n\n// to render:\nconst renderGauge = () => (\n  <Gauge\n    value={42}\n    // any other options you want\n  />\n);\n```\n\n## React w/ TypeScript?\n\n```tsx\nimport { useEffect, useRef } from 'react'\nimport SvgGauge, { GaugeOptions, GaugeInstance } from 'svg-gauge'\n\nconst Gauge = ({ value }: Props) => {\n  const gaugeEl = useRef<HTMLDivElement>(null)\n  const gaugeRef = useRef<GaugeInstance | null>(null)\n  useEffect(() => {\n    if (!gaugeRef.current) {\n      if (!gaugeEl.current) return\n      const options: GaugeOptions = { color: value => (value < 30 ? 'green' : 'red') }\n      gaugeRef.current = SvgGauge(gaugeEl.current, options)\n      gaugeRef.current?.setValue(1)\n    }\n    gaugeRef.current?.setValueAnimated(value, 1)\n  }, [value])\n\n  return (\n    <div style={{ width: '500px', height: '500px' }}>\n      <div ref={gaugeEl} />\n    </div>\n  )\n}\n\ninterface Props {\n  value: number\n}\n\nexport default Gauge\n```\n\n## And Angular?\nHa! [It's already there](https://github.com/mattlewis92/angular-gauge)\n","readmeFilename":"README.md"}