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