univariate-infographics

React component library of SVG info-graphics for displaying uni-variate data

github
hackersupreme.com

Install

npm install --save univariate-infographics

Components

• <PieChart data={data} />
• <PieSlice data={data} />
• <BarChart data={data} />
• <HorizontalBar data={data} />
• <VerticalBar data={data} />

Usage

import React from 'react'

import { PieChart, BarChart, PieSlice, HorizontalBar, VerticalBar } from 'univariate-infographics'

Data Config

Each component takes in an array of objects called data. Each object must have a value property that represents the value of the item in the data set. You can also include other properties if you want to use them in a component's legend or as an overlay on some of the components.

// this is all that's required for the components to work
const data = [
  {
    value: 1
  },
  {
    value: 2
  }
]

/*
=== BUT ===
*/

// you can also add more fields
const data = [
  {
    value: 3,
    label: 'Plot A',
    unit: 'acres',
    ...
  },
  {
    value: 5,
    label: 'Plot B',
    unit: 'acres',
    ...
  }
]

PieChart

How to use

const data = [
  {
    value: 1
  },
  {
    value: 2
  }
]

const Example = () => (
  <PieChart
    data={data}
  />
)

Props

Property	Type	Default	Description
data (required)	array	-	Data to be represented by component
width	number	200	Pixel width of component
height	number	200	Pixel height of component
baseColor	string	'#4095bf'	Starting color for component's gradient. Accepts rgb, hsl, and hex color formats
title	string	null	Title of component
titleColor	string	'#1d3940'	Text color of title. Accepts any color format
highlightColor	string	'#884ca1'	Hover color of component. Accepts any color format
donut	boolean	false	Turns the pie chart into a donut chart
donutColor	string	'white'	Color of inner donut circle. Accepts any color format
legend	boolean	false	Includes a legend for the component.
legendColor	string	'#1d3940'	Text color of legend. Accepts any color format
legendDataType	string	'value'	Selects the property of the objects in the data array to display in the legend
orientation	number (0-1)	0	Where the start of the piechart is on the circle. eg, 0, 1, 0.25, 0.5, etc
circleArea	number (0-1)	1	What percentage of the circle should the pie chart fill
gradientDirection	string	null	Set to 'reverse' to reverse the gradient in the component
style	obj	null	Style object passed to the component
className	string	null	Class names to be added to the component

Examples

PieSlice

How to use

const data = [
  {
    value: 1
  },
  {
    value: 2
  }
]

const Example = () => (
  <PieSlice
    data={data}
   />
)

Props

Property	Type	Default	Description
data (required)	array	-	Data to be represented by component
slice	number	0	Index of data array that is going to displayed
width	number	200	Pixel width of component
height	number	200	Pixel height of component
baseColor	string	'#4095bf'	Color of slice
secondaryColor	string	'#e9ecef'	Background color of pie chart
title	string	null	Title of component
titleColor	string	'#1d3940'	Text color of title. Accepts any color format
donut	boolean	false	Turns the pie chart into a donut chart
donutColor	string	'white'	Color of inner donut circle. Accepts any color format
legend	boolean	false	Includes a legend for the component.
legendColor	string	'#1d3940'	Text color of legend. Accepts any color format
legendDataType	string	'value'	Selects the property of the objects in the data array to display in the legend
orientation	number (0-1)	0	Where the start of the piechart is on the circle. eg, 0, 1, 0.25, 0.5, etc
circleArea	number (0-1)	1	What percentage of the circle should the pie chart fill
gradientDirection	string	null	Set to 'reverse' to reverse the gradient in the component
style	obj	null	Style object passed to the component
className	string	null	Class names to be added to the component

Examples

BarChart

How to use

const data = [
  {
    value: 1
  },
  {
    value: 4
  },
  {
    value: 2
  }
]


const Example = () => (
  <BarChart
    data={data}
   />
)

Props

Property	Type	Default	Description
data (required)	array	-	Data to be represented by component
width	number	200	Pixel width of component
height	number	200	Pixel height of component
barWidth	number	20	Pixel width of individual bars
baseColor	string	'#4095bf'	Starting color for component's gradient. Accepts rgb, hsl, and hex color formats
title	string	null	Title of component
titleColor	string	'#1d3940'	Text color of title. Accepts any color format
highlightColor	string	'#884ca1'	Hover color of component. Accepts any color format
legend	boolean	false	Includes a legend for the component.
legendColor	string	'#1d3940'	Text color of legend. Accepts any color format
legendDataType	string	'value'	Selects the property of the objects in the data array to display in the legend
overlay	boolean	false	Include an overlay value on the bars of the component
overlayColor	string	'#1d3940'	Text color of overlay. Accepts any color format
overlayDataType	string	'value'	Selects the property of the objects in the data array to display in the overlay
gradientDirection	string	null	Set to 'reverse' to reverse the gradient in the component
style	obj	null	Style object passed to the component
className	string	null	Class names to be added to the component

Examples

HorizontalBar

How to use

const data = [
  {
    value: 1
  },
  {
    value: 4
  },
  {
    value: 2
  }
]

const Example = () => (
  <HorizontalBar
    width={400}
    height={50}
    data={data}
   />
)

Props

Property	Type	Default	Description
data (required)	array	-	Data to be represented by component
width	number	200	Pixel width of component
height	number	200	Pixel height of component
baseColor	string	'#4095bf'	Starting color for component's gradient. Accepts rgb, hsl, and hex color formats
title	string	null	Title of component
titleColor	string	'#1d3940'	Text color of title. Accepts any color format
highlightColor	string	'#884ca1'	Hover color of component. Accepts any color format
legend	boolean	false	Includes a legend for the component.
legendColor	string	'#1d3940'	Text color of legend. Accepts any color format
legendDataType	string	'value'	Selects the property of the objects in the data array to display in the legend
overlay	boolean	false	Include an overlay value on the bars of the component
overlayColor	string	'#1d3940'	Text color of overlay. Accepts any color format
overlayDataType	string	'value'	Selects the property of the objects in the data array to display in the overlay
gradientDirection	string	null	Set to 'reverse' to reverse the gradient in the component
style	obj	null	Style object passed to the component
className	string	null	Class names to be added to the component

Examples

VerticalBar

const data = [
  {
    value: 1
  },
  {
    value: 4
  },
  {
    value: 2
  }
]

const Example = () => (
  <VerticalBar
    width={50}
    height={200}
    data={data}
   />
)

Props

Property	Type	Default	Description
data (required)	array	-	Data to be represented by component
width	number	200	Pixel width of component
height	number	200	Pixel height of component
baseColor	string	'#4095bf'	Starting color for component's gradient. Accepts rgb, hsl, and hex color formats
title	string	null	Title of component
titleColor	string	'#1d3940'	Text color of title. Accepts any color format
highlightColor	string	'#884ca1'	Hover color of component. Accepts any color format
legend	boolean	false	Includes a legend for the component.
legendColor	string	'#1d3940'	Text color of legend. Accepts any color format
legendDataType	string	'value'	Selects the property of the objects in the data array to display in the legend
overlay	boolean	false	Include an overlay value on the bars of the component
overlayColor	string	'#1d3940'	Text color of overlay. Accepts any color format
overlayDataType	string	'value'	Selects the property of the objects in the data array to display in the overlay
gradientDirection	string	null	Set to 'reverse' to reverse the gradient in the component
style	obj	null	Style object passed to the component
className	string	null	Class names to be added to the component

Examples

License

MIT © hackersupreme