{"_id":"@dungeon2/svg-gauge","_rev":"1-7a40e9f565362749ea60bdabadb90ca7","name":"@dungeon2/svg-gauge","dist-tags":{"latest":"1.0.9"},"versions":{"1.0.8":{"name":"@dungeon2/svg-gauge","version":"1.0.8","keywords":["SVG","Gauge","Animation"],"author":{"name":"dungeon2.marek@gmail.com"},"license":"MIT","_id":"@dungeon2/svg-gauge@1.0.8","maintainers":[{"name":"dungeon2","email":"dungeon2.marek@gmail.com"}],"homepage":"https://github.com/mpolakov/svg-gauge#readme","bugs":{"url":"https://github.com/mpolakov/svg-gauge/issues"},"dist":{"shasum":"88dbf3649cc6229ebccf6bef1609d57f96e217d9","tarball":"https://registry.npmjs.org/@dungeon2/svg-gauge/-/svg-gauge-1.0.8.tgz","fileCount":13,"integrity":"sha512-kP2Wq22kigzdMfBGhC4f2hXFbn7/5j6T1V0zw92I5f/xgEcUVc/NB3TPQZDqrwcp7su/vfcMFMRJf8UzIWbvCQ==","signatures":[{"sig":"MEUCIG+TAjQgVi7xl1rffd85+LCTSujDSiMxRfDorsdQGTxrAiEAlOXNlzUK5EPIs9nzF5U0bTa2qBE8ydvraVM80FAtYek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63025},"main":"index.js","types":"svg-gauge.d.ts","gitHead":"9fca8137ef67e9c9144ef3c12d356d0a02283d54","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"dungeon2","email":"dungeon2.marek@gmail.com"},"repository":{"url":"git+https://github.com/mpolakov/svg-gauge.git","type":"git"},"_npmVersion":"10.5.0","description":"Minimal SVG animated gauge with zero dependencies","directories":{"test":"test"},"_nodeVersion":"20.12.0","_hasShrinkwrap":false,"devDependencies":{"del":"~3.0.0","gulp":"^4.0.2","gulp-concat":"~2.6.1","gulp-uglify":"~3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/svg-gauge_1.0.8_1732875266228_0.7132518339884084","host":"s3://npm-registry-packages"}},"1.0.9":{"name":"@dungeon2/svg-gauge","version":"1.0.9","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/mpolakov/svg-gauge.git"},"keywords":["SVG","Gauge","Animation"],"author":{"name":"dungeon2.marek@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mpolakov/svg-gauge/issues"},"homepage":"https://github.com/mpolakov/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","_id":"@dungeon2/svg-gauge@1.0.9","gitHead":"9fca8137ef67e9c9144ef3c12d356d0a02283d54","_nodeVersion":"20.12.0","_npmVersion":"10.5.0","dist":{"integrity":"sha512-uuMaiOsw0Vp4PQg3+N7R3bmmhddf1zOTBfyCws+Y6WekiUf8cG9bjEuWB+7p78xXfF5KcWBkulKzF64I/AQv6A==","shasum":"5b77ad7b4ba026d9140b55c6440b177740654e7b","tarball":"https://registry.npmjs.org/@dungeon2/svg-gauge/-/svg-gauge-1.0.9.tgz","fileCount":13,"unpackedSize":63035,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQkBYh4z8ixH9uOs/Jiq+0uzno+LQ0uXZZzvK3vCW5/gIhAIeozFccUUwC4RN8kQNb7q2eeiRFJb5ZXI58P57nFa+L"}]},"_npmUser":{"name":"dungeon2","email":"dungeon2.marek@gmail.com"},"maintainers":[{"name":"dungeon2","email":"dungeon2.marek@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-gauge_1.0.9_1732877499052_0.5211742417105576"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-29T10:14:26.130Z","modified":"2024-11-29T10:51:39.416Z","1.0.8":"2024-11-29T10:14:26.423Z","1.0.9":"2024-11-29T10:51:39.250Z"},"bugs":{"url":"https://github.com/mpolakov/svg-gauge/issues"},"author":{"name":"dungeon2.marek@gmail.com"},"license":"MIT","homepage":"https://github.com/mpolakov/svg-gauge#readme","keywords":["SVG","Gauge","Animation"],"repository":{"type":"git","url":"git+https://github.com/mpolakov/svg-gauge.git"},"description":"Minimal SVG animated gauge with zero dependencies","maintainers":[{"name":"dungeon2","email":"dungeon2.marek@gmail.com"}],"readme":"# SVG Gauge\r\nMinmalistic, configurable, animated SVG gauge. Zero dependencies\r\n\r\n\r\n## Buy me a coffee ☕\r\nIf you like my work please consider making a small donation\r\n\r\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/Z8Z01L1TS)\r\n\r\n\r\n## Migration from 1.0.2\r\n\r\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\r\n\r\n\r\n## Demo\r\nCheck out the [live demo](http://codepen.io/naikus/pen/BzkoLL) for various options and styling tips for this gauge\r\n\r\n\r\n## Usage\r\n\r\nHTML\r\n```html\r\n<div id=\"cpuSpeed\" class=\"gauge-container\"></div>\r\n```\r\nCSS\r\n```css\r\n.gauge-container {\r\n  width: 150px;\r\n  height: 150px;\r\n  display: block;\r\n  padding: 10px;\r\n}\r\n.gauge-container > .gauge .dial {\r\n  stroke: #eee;\r\n  stroke-width: 2;\r\n  fill: rgba(0,0,0,0);\r\n}\r\n.gauge-container > .gauge .value {\r\n  stroke: rgb(47, 227, 255);\r\n  stroke-width: 2;\r\n  fill: rgba(0,0,0,0);\r\n}\r\n.gauge-container > .gauge .value-text {\r\n  fill: rgb(47, 227, 255);\r\n  font-family: sans-serif;\r\n  font-weight: bold;\r\n  font-size: 1em;\r\n}\r\n```\r\nJavascript\r\n```js\r\n// npm install\r\nnpm install svg-gauge\r\n\r\n// Require JS\r\nvar Gauge = require(\"svg-gauge\");\r\n\r\n// Standalone\r\nvar Gauge = window.Gauge;\r\n\r\n// Create a new Gauge\r\nvar cpuGauge = Gauge(document.getElementById(\"cpuSpeed\"), {\r\n    max: 100,\r\n    // custom label renderer\r\n    label: function(value) {\r\n      return Math.round(value) + \"/\" + this.max;\r\n    },\r\n    value: 50,\r\n    // Custom dial colors (Optional)\r\n    color: function(value) {\r\n      if(value < 20) {\r\n        return \"#5ee432\"; // green\r\n      }else if(value < 40) {\r\n        return \"#fffa50\"; // yellow\r\n      }else if(value < 60) {\r\n        return \"#f7aa38\"; // orange\r\n      }else {\r\n        return \"#ef4655\"; // red\r\n      }\r\n    }\r\n});\r\n\r\n// Set gauge value\r\ncpuGauge.setValue(75);\r\n\r\n// Set value and animate (value, animation duration in seconds)\r\ncpuGauge.setValueAnimated(90, 1);\r\n\r\n```\r\n\r\n#### Options\r\n\r\n|      Name            |                  Description                       |\r\n| -------------------- | ------------------------------------------------------------------------------------- |\r\n| ```dialStartAngle``` | The angle in degrees to start the dial (```135```)       |\r\n| ```dialEndAngle```   | The angle in degrees to end the dial. This MUST be less than dialStartAngle (```45```)  |\r\n| ```dialRadius```     | The radius of the gauge (```40```) |\r\n| ```min```            | The minimum value for the gauge. This can be a negative value (```0```)  |\r\n| ```max```            | The maximum value for the gauge (```100```)  |\r\n| ```label```          | Optional function that returns a string label that will be rendered in the center. This function will be passed the current value |\r\n| ```showValue```      | Whether to show the value at the center of the gauge (```true```) |\r\n| ```gaugeClass```     | The CSS class of the gauge (```gauge```) |\r\n| ```dialClass```      | The CSS class of the gauge's dial (```dial```) |\r\n| ```valueDialClass``` | The CSS class of the gauge's fill (value dial) (```value```) |\r\n| ```valueClass```     | The CSS class of the gauge's text (```value-text```) |\r\n| ```color (new)```    | An optional function that can return a color for current value  ```function(value) {}``` |\r\n| ```viewBox (new)```  | An optional string that specifies the crop region (```0 0 100 100```) |\r\n\r\n\r\n\r\n## That's all good, but what about React?\r\n```JSX\r\nimport React, { useEffect, useRef } from \"react\";\r\nimport SvgGauge from \"svg-gauge\";\r\n\r\nconst defaultOptions = {\r\n  animDuration: 1,\r\n  showValue: true,\r\n  initialValue: 0,\r\n  max: 100\r\n  // Put any other defaults you want. e.g. dialStartAngle, dialEndAngle, dialRadius, etc.\r\n};\r\n\r\nconst Gauge = props => {\r\n  const gaugeEl = useRef(null);\r\n  const gaugeRef = useRef(null);\r\n  useEffect(() => {\r\n    if (!gaugeRef.current) {\r\n      const options = { ...defaultOptions, ...props };\r\n      gaugeRef.current = SvgGauge(gaugeEl.current, options);\r\n      gaugeRef.current.setValue(options.initialValue);\r\n    }\r\n    gaugeRef.current.setValueAnimated(props.value, 1);\r\n  }, [props]);\r\n\r\n  return <div ref={gaugeEl} className=\"gauge-container\" />;\r\n};\r\n\r\nexport default Gauge;\r\n\r\n// to render:\r\nconst renderGauge = () => (\r\n  <Gauge\r\n    value={42}\r\n    // any other options you want\r\n  />\r\n);\r\n```\r\n\r\n## React w/ TypeScript?\r\n\r\n```tsx\r\nimport { useEffect, useRef } from 'react'\r\nimport SvgGauge, { GaugeOptions, GaugeInstance } from 'svg-gauge'\r\n\r\nconst Gauge = ({ value }: Props) => {\r\n  const gaugeEl = useRef<HTMLDivElement>(null)\r\n  const gaugeRef = useRef<GaugeInstance | null>(null)\r\n  useEffect(() => {\r\n    if (!gaugeRef.current) {\r\n      if (!gaugeEl.current) return\r\n      const options: GaugeOptions = { color: value => (value < 30 ? 'green' : 'red') }\r\n      gaugeRef.current = SvgGauge(gaugeEl.current, options)\r\n      gaugeRef.current?.setValue(1)\r\n    }\r\n    gaugeRef.current?.setValueAnimated(value, 1)\r\n  }, [value])\r\n\r\n  return (\r\n    <div style={{ width: '500px', height: '500px' }}>\r\n      <div ref={gaugeEl} />\r\n    </div>\r\n  )\r\n}\r\n\r\ninterface Props {\r\n  value: number\r\n}\r\n\r\nexport default Gauge\r\n```\r\n\r\n## And Angular?\r\nHa! [It's already there](https://github.com/mattlewis92/angular-gauge)\r\n","readmeFilename":"README.md"}