import React from 'react' import { BarGraph } from '../../' const chartData = [{ name: 'Installation', data: [1475, 200, 3000, 654, 656], }, { name: 'Manufacturing', data: [4434, 524, 2320, 440, 500], }, { name: 'Sales & Distribution', data: [3387, 743, 1344, 434, 440], }, { name: 'Project Development', data: [3227, 878, 999, 780, 1000], }, { name: 'Other', data: [1111, 677, 3245, 500, 200], }] const BarGraphDefault = (props) => ( <div> <BarGraph axisTitle="Number of Employees" chartData={chartData} id="bar-default" subTitle="Source: thesolarfoundation.com" title="Solar Employment Growth by Sector, 2010-2016" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']} yAxisMin={0} {...props} /> </div> ) export default BarGraphDefault
import React from 'react' import { BarGraph } from '../..' const chartData = [{ name: 'Number of Installations', data: [1475, 200, 3000, 654, 656], }] const BarGraphLegend = (props) => ( <div> <BarGraph axisTitle="Number of Employees" chartData={chartData} id="bar-test-2" legend title="Bar Graph with Legend" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']} yAxisMin={0} {...props} /> </div> ) export default BarGraphLegend
import React from 'react' import { BarGraph } from '../..' const chartData = [{ name: 'Number of Installations', data: [1475, 200, 3000, 654, 656], }] const BarGraphLegendNonClickable = (props) => ( <div> <BarGraph axisTitle="Number of Employees" chartData={chartData} id="bar-test-3" legend title="Bar Graph with Legend Non Clickable" toggleLegendClick={false} xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']} yAxisMin={0} {...props} /> </div> ) export default BarGraphLegendNonClickable
import React from 'react' import { BarGraph } from '../../' const chartData = [{ name: 'Number of Installations', data: [1475, 200, 3000, 654, 656], }] const BarGraphDefault = (props) => ( <div> <BarGraph axisTitle="Number of Employees" chartData={chartData} height="300" id="bar-fixed-height" title="Fixed Height (300px)" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> <br /> <br /> <BarGraph axisTitle="Number of Employees" chartData={chartData} height="50%" id="bar-percentage-height" title="Percentage Height (50%)" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> </div> ) export default BarGraphDefault
import React from 'react' import { CircleChart } from '../../' const data = [ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ] const CircleChartDefault = (props) => ( <div> <CircleChart chartData={data} id="circle-chart-default" {...props} /> </div> ) export default CircleChartDefault
import React, { useState } from 'react' import { Button, CircleChart } from '../../' const CircleChartLiveData = (props) => { const [data, setData] = useState([ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ]) const data2 = [ { name: 'Waiting for Calls', value: 48, }, { name: 'On Call', value: 12, }, { name: 'After call', value: 140, }, ] const updateValue = () => { setData(data2) } return ( <div> <Button onClick={updateValue} text="Update Value" {...props} /> <CircleChart chartData={data} id="circle-chart-live-data" {...props} /> </div> ) } export default CircleChartLiveData
import React from 'react' import { CircleChart } from '../../' const dataRounded = [ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ] const CircleChartRounded = (props) => ( <div> <CircleChart chartData={dataRounded} id="default-test-rounded" innerSize="lg" rounded {...props} /> </div> ) export default CircleChartRounded
import React from 'react' import { CircleChart, Title } from '../../' const dataWithABlock = [ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ] const CircleChartBlock = (props) => ( <div> <CircleChart chartData={dataWithABlock} id="chart-with-a-block" innerSize="lg" marginTop="xl" rounded {...props} > <Title size={1} tag="div" {...props} > {'83'} </Title> </CircleChart> </div> ) export default CircleChartBlock
import React from 'react' import { CircleChart } from '../../' const dataWithColors = [ { name: 'Waiting for Calls', value: 41, }, { name: 'On Call', value: 49, }, { name: 'After call', value: 10, }, ] const CircleChartColors = (props) => ( <div> <CircleChart chartData={dataWithColors} colors={['data-6', 'data-4', 'data-2']} id="colors-example" {...props} /> </div> ) export default CircleChartColors
import React from 'react' import { CircleChart } from '../../' const dataWithLabels = [ { name: 'Facebook', value: 2498, }, { name: 'YouTube', value: 2000, }, { name: 'WhatsApp', value: 2000, }, { name: 'Facebook Messenger', value: 1300, }, { name: 'WeChat', value: 1165, }, { name: 'Instagram', value: 1000, }, { name: 'Tik Tok', value: 800, }, ] const CircleChartWithLabels = (props) => ( <div> <CircleChart chartData={dataWithLabels} dataLabels id="with-labels-example" {...props} /> </div> ) export default CircleChartWithLabels
import React from 'react' import { CircleChart } from '../../' const dataWithLegend = [{ name: 'Bugs', value: 8, }, { name: 'Chores', value: 1, }, { name: 'Stories', value: 12, }, ] const CircleChartWithLegendKit = (props) => ( <div> <CircleChart chartData={dataWithLegend} id="with-legend-example" legend {...props} /> </div> ) export default CircleChartWithLegendKit
import React from 'react' import { CircleChart } from '../../' const dataWithTitle = [ { name: 'Facebook', value: 2498, }, { name: 'YouTube', value: 2000, }, { name: 'WhatsApp', value: 2000, }, { name: 'Facebook Messenger', value: 1300, }, { name: 'WeChat', value: 1165, }, { name: 'Instagram', value: 1000, }, { name: 'Tik Tok', value: 800, }, ] const CircleChartWithLegendKit = (props) => ( <div> <CircleChart chartData={dataWithTitle} id="with-title-example" title="Active Users on Social Media" {...props} /> </div> ) export default CircleChartWithLegendKit
import React from 'react' import { CircleChart } from '../../' const dataFirst = [ { name: 'Bugs', value: 8, }, { name: 'Chores', value: 1, }, { name: 'Stories', value: 12, }, ] const dataSecond = [ { name: 'Queued', value: 7, }, { name: 'In Progress', value: 6, }, { name: 'Validation', value: 3, }, { name: 'Done', value: 6, }, ] const dataThird = [ { name: '1 Point Tickets', value: 2, }, { name: '3 Point Tickets', value: 5, }, { name: '5 Point Tickets', value: 6, }, { name: '8 Point Tickets', value: 3, }, { name: '13 Point Tickets', value: 1, }, ] const dataFourth = [ { name: 'Facebook', value: 2498, }, { name: 'YouTube', value: 2000, }, { name: 'WhatsApp', value: 2000, }, { name: 'Facebook Messenger', value: 1300, }, { name: 'WeChat', value: 1165, }, { name: 'Instagram', value: 1000, }, { name: 'Tik Tok', value: 800, }, ] const CircleChartInnerSizes = (props) => ( <div> <CircleChart chartData={dataFirst} id="with-innersize-sm" innerSize="sm" {...props} /> <CircleChart chartData={dataSecond} id="with-innersize-md" innerSize="md" {...props} /> <CircleChart chartData={dataThird} id="with-innersize-lg" innerSize="lg" {...props} /> <CircleChart chartData={dataFourth} className="poop" id="with-innersize-none " innerSize="none" {...props} /> </div> ) export default CircleChartInnerSizes
import React from 'react' import DistributionBar from '../_distribution_bar.jsx' const DistributionBarDefault = (props) => { return ( <React.Fragment> <div> <DistributionBar widths={[1, 2, 3, 4, 5, 3, 3, 7]} {...props} /> </div> <br /> <br /> <div> <DistributionBar size="sm" widths={[1, 2, 3, 4, 5, 3, 3, 7]} {...props} /> </div> </React.Fragment> ) } export default DistributionBarDefault
You can customize the order of the colors you would like to use by using the colors
prop. Only the data and status colors will work for Playbook charts. See the design page for reference.
import React from 'react' import DistributionBar from '../_distribution_bar.jsx' const DistributionBarCustomColors = (props) => { return ( <React.Fragment> <div> <DistributionBar colors={['data_7', 'data_1', 'neutral']} widths={[4, 5, 3]} {...props} /> </div> </React.Fragment> ) } export default DistributionBarCustomColors
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
import React from 'react' import { Legend } from '../../' const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other'] const LegendDefault = (props) => ( <div> { products.map((product, i) => ( <Legend color={`data_${i + 1}`} key={`legend_${i + 1}`} text={product} {...props} /> )) } </div> ) export default LegendDefault
import React from 'react' import { Legend } from '../..' const LegendPrefix = (props) => ( <div> <Legend color="data_3" prefixText="10" text="Windows" {...props} /> </div> ) export default LegendPrefix
import React from 'react' import { LineGraph } from '../../' const data = [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }, { name: 'Manufacturing', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434], }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387], }, { name: 'Project Development', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227], }, { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111], }] const LineGraphDefault = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-default" subTitle="Source: thesolarfoundation.com" title="Solar Employment Growth by Sector, 2010-2016" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> </div> ) export default LineGraphDefault
import React from 'react' import { LineGraph } from '../..' const data = [{ name: 'Number of Installations', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }] const LineGraphLegend = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-test-2" legend title="Line Graph with Legend" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']} yAxisMin={0} {...props} /> </div> ) export default LineGraphLegend
import React from 'react' import { LineGraph } from '../..' const data = [{ name: 'Number of Installations', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }] const LineGraphLegendNonclickable = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-test-3" legend title="Line Graph with Legend Non Clickable" toggleLegendClick={false} xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']} {...props} /> </div> ) export default LineGraphLegendNonclickable
import React from 'react' import { LineGraph } from '../../' const data = [{ name: 'Number of Installations', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], }] const LineGraphDefault = (props) => ( <div> <LineGraph axisTitle="Number of Employees" chartData={data} id="line-fixed-height" title="Fixed Height (300px)" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> <br /> <br /> <LineGraph axisTitle="Number of Employees" chartData={data} height="50%" id="line-percentage-height" title="Percentage Height (50%)" xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} yAxisMin={0} {...props} /> </div> ) export default LineGraphDefault