README

react-graphical-ui

SVG UI Lib, it contains serie of components to show graphs with values

try it at https://champix56.github.io/react-graphical-ui/

Install

npm install --save react-graphical-ui

Usage

import React, { Component } from 'react'

import * as RGUI from 'react-graphical-ui'
import 'react-graphical-ui/dist/index.css'

class Example extends Component {
  render() {
    return <RGUI.Component />
  }
}

GraphCircular

Show value as a circular graphwith value on center

import { Circular } from 'react-graphical-ui';
<Circular value={47}  max={100} display="inline" withGrid={true} />

value : number, required value to show
max? : number, def. = 100
display : string, 'inline' | 'block' def. = 'inline'
withGrid : boolean, def. = false

GraphHistogram

Show value as a Histogram graph with values send by props

import { Histogram } from 'react-graphical-ui';
<Histogram values={[ 20, 80, 19]} notAllreadyFull={true} whithGrid={true} gridDivisionCount={5} max={150} />

values : [number], required values to show
max? : number, def. = max value in values list
display : string, 'inline' | 'block' def. = 'inline'
notAllreadyFull : boolean,next horizontal step spce on graph, def. = false
withGrid : boolean, def. = true
gridDivisionCount : number, number of horizontal divisions def. = 10

GraphCloudPoint

Show value as a cloud points graph with values

import { CloudPoint } from 'react-graphical-ui';
<CloudPoint value={[47,18]}  max={100} display="inline" withGrid={true} />

value : number, required value to show
max? : number, def. = 100
display : string, 'inline' |or 'block' def. = 'inline'
withGrid : boolean, def. = false
notAllreadyFull : boolean,next horizontal step spce on graph, def. = false
gridDivisionCount : number, number of horizontal divisions def. = 10

version note:

V 0.0.1

Add Circular component

V 0.0.2

Add Histogram component

V 0.0.3

Add Cloud points component

V 0.0.3.1

Add key for iterated point and bars

Usage no npm install needed!