Gauge

Close

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

Close

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

Close

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

Close

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

Close

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

Close

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

Close

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

Close

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

Close

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