import React from 'react' import { Gauge } from '../../' const data = [ { name: 'Name', value: 45 }, ] const GaugeDefault = (props) => ( <div> <Gauge chartData={data} id="gauge-default" {...props} /> </div> ) export default GaugeDefault
import React from 'react' import { Gauge } from '../../' const data = [ { name: 'Participants', value: 84 }, ] const GaugeDisableAnimation = (props) => ( <div> <Gauge chartData={data} disableAnimation id="gauge-disable-animation" {...props} /> </div> ) export default GaugeDisableAnimation
import React from 'react' import { Gauge } from '../../' const data = [ { name: 'Score', value: 780 }, ] const GaugeTitle = (props) => ( <div> <Gauge chartData={data} id="gauge-title" max={850} min={300} title="Credit Score" {...props} /> </div> ) export default GaugeTitle
import React from 'react' import { Gauge } from '../../' const data1 = [ { name: 'Data Used', value: 32 }, ] const data2 = [ { name: 'Sales to Date', value: 65 }, ] const GaugeUnits = (props) => ( <div> <Gauge chartData={data1} id="gauge-units1" suffix="GB" title="Data Usage" {...props} /> <Gauge chartData={data2} id="gauge-units2" prefix="$" suffix="k" title="Sales Goal" {...props} /> </div> ) export default GaugeUnits
import React from 'react' import { Gauge } from '../../' const data = [ { name: 'Capacity', value: 75 }, ] const GaugeFullCircle = (props) => ( <div> <Gauge chartData={data} fullCircle id="gauge-full-circle" suffix="%" title="Seating Capacity" {...props} /> </div> ) export default GaugeFullCircle
import React from 'react' import { Gauge } from '../../' const data = [{ name: 'Rating', value: 4.5, }] const GaugeMinMax = (props) => ( <div> <Gauge chartData={data} id="gauge-min-max" max={5} min={0} showLabels title="Product Rating" {...props} /> </div> ) export default GaugeMinMax
overflow
to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.import React from 'react' import { Flex, FlexItem, Gauge } from '../../' const GaugeSizing = (props) => ( <div> <Flex wrap {...props} > <FlexItem fixedSize="400px" overflow="hidden" shrink {...props} > <Gauge chartData={[ { name: 'Point 1', value: 100 } ]} id="gauge-sizing4" {...props} /> </FlexItem> <FlexItem fixedSize="300px" overflow="hidden" shrink {...props} > <Gauge chartData={[ { name: 'Point 2', value: 75 } ]} id="gauge-sizing3" {...props} /> </FlexItem> <FlexItem fixedSize="200px" overflow="hidden" shrink {...props} > <Gauge chartData={[ { name: 'Point 3', value: 50 } ]} id="gauge-sizing2" {...props} /> </FlexItem> <FlexItem fixedSize="125px" overflow="hidden" shrink {...props} > <Gauge chartData={[ { name: 'Point 4', value: 25 } ]} id="gauge-sizing1" {...props} /> </FlexItem> </Flex> </div> ) export default GaugeSizing
import React from 'react' import { Gauge } from '../../' const GaugeHeight = (props) => ( <div> <Gauge chartData={[ { name: 'Pixels', value: 400 } ]} height="400" id="gauge-height-px" suffix="px" title="Fixed Height in Pixels" {...props} /> <Gauge chartData={[ { name: 'Percentage', value: 45 } ]} height="45%" id="gauge-height-percent" suffix="%" title="Height as Percentage of Width" {...props} /> </div> ) export default GaugeHeight
import React, { useState } from 'react' import { Button, Gauge } from '../../' const GaugeLiveData = (props) => { const [value, setValue] = useState(50) const [name, setName] = useState('Name') const updateValue = () => { setValue(Math.floor(Math.random() * 100)) } const updateName = () => { let index = namesArray.indexOf(name) if (namesArray.indexOf(name) == 5) { index = 0 } else { index += 1 } setName(namesArray[index]) } const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters'] return ( <div> <Button onClick={updateValue} text="Update Value" {...props} /> <Button onClick={updateName} text="Update Name" {...props} /> <Gauge chartData={[{ name: name, value: value }]} id="gauge-live-data" {...props} /> </div> ) } export default GaugeLiveData
Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors
and use ONE desired value data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8
in an array. Hex colors are also available eg: #CA0095
import React from 'react' import { Gauge } from '../../' const data = [ { name: 'Name', value: 67 }, ] const GaugeColors = (props) => ( <div> <Gauge chartData={data} id="gauge-colors" {...props} colors={['data-7']} /> </div> ) export default GaugeColors