Dha-graph NPM | npm.io

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;