dha-graph
v2.3.1
Published
DHA SDK graph
Downloads
63
Readme
dha-graph
This module is a React Graph component to be used in your applications.
Getting Started
Install
Install from npm:
- npm i dha-graph recharts
Graph Component
Graph Props:
- data: JSON data to graph
- dataKey: X axis of the chart
- title(optional): Title displayed on the top of the graph
- numberOfPoints(optional): number of points displayed on the graph
- legend(optional): Boolean object that adds the legend on the chart
- themeType(optional): Specify the theme to switch the gridline color of the graph
- dataLines:
- dataName: The Name of the data in the JSON data object
- lineName(optional): The name of the line on the graph
- strokeColor: Hexadecimal color of the line and dot
Home.tsx - Functional component
import { Graph } from 'dha-graph';
import React from 'react';
const Home = () => {
var myData: object[] = [
{ date: '12/20/2018', Anxiety: 0, Depression: 0 },
{ date: '12/21/2018', Anxiety: 88, Depression: 20 },
{ date: '12/22/2018', Anxiety: 4, Depression: 31 },
{ date: '12/26/2018', Anxiety: 71, Depression: 24 },
{ date: '12/27/2018', Anxiety: 50, Depression: 50 },
{ date: '12/30/2018', Anxiety: 30, Depression: 80 },
];
return (
<Graph
data={myData}
title="Mood Tracker"
dataKey="date"
dataLines={[
{
dataName: 'Anxiety',
lineName: 'Anxiety Level',
strokeColor: '#00c',
},
{
dataName: 'Depression',
lineName: 'Depression Level',
strokeColor: '#ff0800',
},
]}
/>
);
};
export default Home;
Home.tsx - Class component
import { Graph } from 'dha-graph';
import React from 'react';
export interface IState {
// GraphExample state defined here...
data: object[];
}
class Home extends React.Component<any, IState> {
constructor(props) {
super(props);
this.state = {
data: [
{ date: '12/20/2018', Anxiety: 74, Depression: 86 },
{ date: '12/21/2018', Anxiety: 88, Depression: 20 },
{ date: '12/22/2018', Anxiety: 4, Depression: 31 },
{ date: '12/26/2018', Anxiety: 71, Depression: 24 },
{ date: '12/27/2018', Anxiety: 50, Depression: 50 },
{ date: '12/30/2018', Anxiety: 30, Depression: 80 },
],
};
}
render() {
return (
<Graph
data={this.state.data}
title="Mood Tracker"
dataKey="date"
dataLines={[
{
dataName: 'Anxiety',
lineName: 'Anxiety Level',
strokeColor: '#00c',
},
{
dataName: 'Depression',
lineName: 'Depression Level',
strokeColor: '#ff0800',
},
]}
/>
);
}
}
export default Home;
Contribute
see Github wiki
NPM
https://www.npmjs.com/package/dha-graph
License
pending