React Simple Charts

DEPRECATION WARNING

This component is now part of Salad-UI. Please See docs for more information. (You can still install the charts as a standalone using npm i --save salad-ui.chart

A collection of React Components usefull for creating dashboards or other type of number formatting. Currently there are 3 components: Area, BarMetric, and CirclePie.

Usage

npm install --save react-simple-charts

import {Area, CirclePie, BarMetric} from 'react-simple-charts'

Area

A pure React/SVG charting library.

Input data

Data input is specified as follow: [{time: Unix MS timestamp, value: yValue, label: Text shown for this value}]

Default Props

{
    width: 640,
    height: 320,
    border: 'none',
    strokeWidth: 2,
    useDynamicYMin: false,
    strokeColor: '#408AE5',
    pointsRadius: 5,
    tipsWidth: 240,
    tipsHeight: 22,
    tipsPadding: 10,
    tipStrokeWidth: 1,
    tipStrokeColor: '#BBBBBB',
    tipsFill: 'white',
    gridColor: 'rgba(230,230,230,.5)',
    labelFontSize: 12,
    labelTextShadow: '1px 1px #fff',
    labelColor: '#555',
    fillColor: 'rgba(191, 216, 246, 0.3)',
    maxOverflow: 20,
    yLabelsOutside: false,
    yLabelsPosition: 'left',
    yPadding: 10,
    data: [],
}

Sample use:

let data = [
    {time:1422766800000, value: 0, label: "{{value}} active users"},
    {time:1422853200000, value: 10, label: "{{value}} active users"},
    {time:1422939600000, value: 5, label: "{{value}} active users"}
];
<Area width={900} height={300} data={data}/>

Bar Metric

A micro bar metric component.

Default Props

{
    metricName: 'points',
    value: 0,
    percent: 100,
    metricPadding: 15,
    metricColor: '#777',
    barWidth: 70,
    barHeight: 7,
    barRailColor: '#ddd',
    barColor: '#408AE5',
    label: 'N/A'
}

Sample use:

<BarMetric label="Share of IE" percent={5} metricName="Nearing Zero"/>

Circle Pie

A micro component for rendering a percentage value as an SVG circle.

Default Props

{
    width: 150,
    height: 150,
    border: 'none',
    strokeWidth: 10,
    labelColor: '#111111',
    labelFontSize: '18px',
    strokeColor: '#408AE5',
    railColor: '#f5f5f5',
    fillColor: 'none',
    percent: 70,
    padding: 0,
}

Sample use:

<CirclePie percent={5}/>

Dependencies

The following libraries are peer dependencies and are expected to be included in your own package:

• Moment.js >= 2.0.0
• React >= 0.14.0

Credits

Made with love at Dailymotion in NYC. Designed by Leury Hidalgo and created by Samuel Delesque.