- Notifications
You must be signed in to change notification settings - Fork75
Minimalistic, animated SVG gauge. Zero dependencies
License
NotificationsYou must be signed in to change notification settings
naikus/svg-gauge
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Minmalistic, configurable, animated SVG gauge. Zero dependencies
If you like my work please consider making a small donation
The 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
Check out thelive demo for various options and styling tips for this gauge
HTML
<divid="cpuSpeed"class="gauge-container"></div>
CSS
.gauge-container {width:150px;height:150px;display: block;padding:10px;}.gauge-container> .gauge .dial {stroke:#eee;stroke-width:2;fill:rgba(0,0,0,0);}.gauge-container> .gauge .value {stroke:rgb(47,227,255);stroke-width:2;fill:rgba(0,0,0,0);}.gauge-container> .gauge .value-text {fill:rgb(47,227,255);font-family: sans-serif;font-weight: bold;font-size:1em;}
Javascript
// npm installnpminstallsvg-gauge// Require JSvarGauge=require("svg-gauge");// StandalonevarGauge=window.Gauge;// Create a new GaugevarcpuGauge=Gauge(document.getElementById("cpuSpeed"),{max:100,// custom label rendererlabel:function(value){returnMath.round(value)+"/"+this.max;},value:50,// Custom dial colors (Optional)color:function(value){if(value<20){return"#5ee432";// green}elseif(value<40){return"#fffa50";// yellow}elseif(value<60){return"#f7aa38";// orange}else{return"#ef4655";// red}}});// Set gauge valuecpuGauge.setValue(75);// Set value and animate (value, animation duration in seconds)cpuGauge.setValueAnimated(90,1);
| Name | Description |
|---|---|
dialStartAngle | The angle in degrees to start the dial (135) |
dialEndAngle | The angle in degrees to end the dial. This MUST be less than dialStartAngle (45) |
dialRadius | The radius of the gauge (40) |
min | The minimum value for the gauge. This can be a negative value (0) |
max | The maximum value for the gauge (100) |
label | Optional function that returns a string label that will be rendered in the center. This function will be passed the current value |
showValue | Whether to show the value at the center of the gauge (true) |
gaugeClass | The CSS class of the gauge (gauge) |
dialClass | The CSS class of the gauge's dial (dial) |
valueDialClass | The CSS class of the gauge's fill (value dial) (value) |
valueClass | The CSS class of the gauge's text (value-text) |
color (new) | An optional function that can return a color for current valuefunction(value) {} |
viewBox (new) | An optional string that specifies the crop region (0 0 100 100) |
importReact,{useEffect,useRef}from"react";importSvgGaugefrom"svg-gauge";constdefaultOptions={animDuration:1,showValue:true,initialValue:0,max:100// Put any other defaults you want. e.g. dialStartAngle, dialEndAngle, dialRadius, etc.};constGauge=props=>{constgaugeEl=useRef(null);constgaugeRef=useRef(null);useEffect(()=>{if(!gaugeRef.current){constoptions={ ...defaultOptions, ...props};gaugeRef.current=SvgGauge(gaugeEl.current,options);gaugeRef.current.setValue(options.initialValue);}gaugeRef.current.setValueAnimated(props.value,1);},[props]);return<divref={gaugeEl}className="gauge-container"/>;};exportdefaultGauge;// to render:constrenderGauge=()=>(<Gaugevalue={42}// any other options you want/>);
import{useEffect,useRef}from'react'importSvgGauge,{GaugeOptions,GaugeInstance}from'svg-gauge'constGauge=({ value}:Props)=>{constgaugeEl=useRef<HTMLDivElement>(null)constgaugeRef=useRef<GaugeInstance|null>(null)useEffect(()=>{if(!gaugeRef.current){if(!gaugeEl.current)returnconstoptions:GaugeOptions={color:value=>(value<30 ?'green' :'red')}gaugeRef.current=SvgGauge(gaugeEl.current,options)gaugeRef.current?.setValue(1)}gaugeRef.current?.setValueAnimated(value,1)},[value])return(<divstyle={{width:'500px',height:'500px'}}><divref={gaugeEl}/></div>)}interfaceProps{value:number}exportdefaultGauge
About
Minimalistic, animated SVG gauge. Zero dependencies
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published