univariate-infographics v1.0.0

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

Examples

PieSlice

How to use

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

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

Props

Examples

BarChart

How to use

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


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

Props

Examples

HorizontalBar

How to use

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

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

Props

Examples

VerticalBar

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

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

Props

Examples

License

MIT © hackersupreme