Gauge

import React from 'react'
import { Gauge } from 'playbook-ui'

const data = [
  { name: 'Name', value: 45 },
]

const GaugeDefault = (props) => (
  <div>
    <Gauge
        chartData={data}
        id="gauge-default"
    />
  </div>
)

export default GaugeDefault

import React from 'react'
import { Gauge } from 'playbook-ui'

const data = [
  { name: 'Participants', value: 84 },
]

const GaugeDisableAnimation = (props) => (
  <div>
    <Gauge
        chartData={data}
        disableAnimation
        id="gauge-disable-animation"
    />
  </div>
)

export default GaugeDisableAnimation

import React from 'react'
import { Gauge } from 'playbook-ui'

const data = [
  { name: 'Score', value: 780 },
]

const GaugeTitle = (props) => (
  <div>
    <Gauge
        chartData={data}
        id="gauge-title"
        max={850}
        min={300}
        title="Credit Score"
    />
  </div>
)

export default GaugeTitle

import React from 'react'
import { Gauge } from 'playbook-ui'

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"
    />
    <Gauge
        chartData={data2}
        id="gauge-units2"
        prefix="$"
        suffix="k"
        title="Sales Goal"
    />
  </div>
)

export default GaugeUnits

import React from 'react'
import { Gauge } from 'playbook-ui'

const data = [
  { name: 'Capacity', value: 75 },
]

const GaugeFullCircle = (props) => (
  <div>
    <Gauge
        chartData={data}
        fullCircle
        id="gauge-full-circle"
        suffix="%"
        title="Seating Capacity"
    />
  </div>
)

export default GaugeFullCircle

import React from 'react'
import { Gauge } from 'playbook-ui'

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"
    />
  </div>
)

export default GaugeMinMax

import React from 'react'
import { Flex, FlexItem, Gauge } from 'playbook-ui'

const GaugeSizing = (props) => (
  <div>
    <Flex
        align="center"
        wrap
    >
      <FlexItem
          fixedSize="400px"
          overflow="hidden"
          shrink
      >
        <Gauge
            chartData={[ { name: 'Point 1', value: 100 } ]}
            id="gauge-sizing4"
        />
      </FlexItem>
      <FlexItem
          fixedSize="300px"
          overflow="hidden"
          shrink
      >
        <Gauge
            chartData={[ { name: 'Point 2', value: 75 } ]}
            id="gauge-sizing3"
        />
      </FlexItem>
      <FlexItem
          fixedSize="200px"
          overflow="hidden"
          shrink
      >
        <Gauge
            chartData={[ { name: 'Point 3', value: 50 } ]}
            id="gauge-sizing2"
        />
      </FlexItem>
      <FlexItem
          fixedSize="125px"
          overflow="hidden"
          shrink
      >
        <Gauge
            chartData={[ { name: 'Point 4', value: 25 } ]}
            height="100%"
            id="gauge-sizing1"
        />
      </FlexItem>
    </Flex>
  </div>
)

export default GaugeSizing

import React from 'react'
import { Gauge } from 'playbook-ui'

const GaugeHeight = (props) => (
  <div>
    <Gauge
        chartData={[ { name: 'Pixels', value: 400 } ]}
        height="400"
        id="gauge-height-px"
        suffix="px"
        title="Fixed Height in Pixels"
    />
    <Gauge
        chartData={[ { name: 'Percentage', value: 45 } ]}
        height="45%"
        id="gauge-height-percent"
        suffix="%"
        title="Height as Percentage of Width"
    />
  </div>
)

export default GaugeHeight

import React, { useState } from 'react'
import { Button, Gauge } from 'playbook-ui'

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"
      />
      <Button
          onClick={updateName}
          text="Update Name"
      />
      <Gauge
          chartData={[{ name: name, value: value }]}
          id="gauge-live-data"
      />
    </div>
  )
}

export default GaugeLiveData

import React from 'react'
import { Gauge } from 'playbook-ui'

const data = [
  { name: 'Name', value: 67 },
]

const GaugeColors = (props) => (
  <div>
    <Gauge
        chartData={data}
        id="gauge-colors"
        colors={['data-7']}
    />
  </div>
)

export default GaugeColors

import React from "react";
import {
  Title,
  Card,
  Gauge,
  Flex,
  FlexItem,
  SectionSeparator,
  Body,
  Caption,
} from "playbook-ui";

const data = [{ name: "Name", value: 10 }];

const GaugeComplex = (props) => (
  <Flex
      gap="sm"
      padding="xl"
      wrap
  >
    <FlexItem
        flex={1}
        grow
    >
      <Card
          maxWidth="xs"
          padding="md"
      >
        <Title
            paddingBottom="sm"
            size={4}
            text="Abandoned Calls"
        />
        <Flex align="stretch">
          <Flex
              marginRight="sm"
              orientation="column"
          >
            <Body
                color="light"
                paddingBottom="sm"
                text="Total Abandoned"
            />
            <Flex
                align="baseline"
                paddingBottom="xs"
            >
              <Title
                  size={1}
                  text="39"
              />
              <Title
                  color="light"
                  size={3}
                  text="calls"
              />
            </Flex>
            <Caption
                size="xs"
                text="of 390"
            />
          </Flex>

          <SectionSeparator
              alignSelf="stretch"
              marginRight="sm"
              orientation="vertical"
          />

          <Flex
              orientation="column"
              wrap
          >
              <Body
                  color="light"
                  text="% Abandoned"
               />
            <Flex wrap>
              <FlexItem
                  fixedSize="150px"
                  overflow="hidden"
                  shrink
              > 
                <Gauge
                    chartData={data}
                    disableAnimation
                    height="150"
                    id="gauge-complex"
                    suffix="%"
                />
               </FlexItem>
            </Flex>  
          </Flex>
        </Flex>
      </Card>
    </FlexItem>
  </Flex>
);

export default GaugeComplex;