wmt-graph

This module is a React Graph component to be used in your applications.

Setting up the module

• git clone [email protected]:wmtp/wmt-graph.git
• cd wmt-graph
• npm install

Building the module

The module uses Typescript compiler (TSC) to compile the source code. To build the project run the following command:

• npm run build

Installing the module for testing

You can install the module into your own React project as a dependency. After you clone the module you can install using the following command:

• npm install /absolute/path/to/wmt-graph
• i.e. -> npm install /Users/wmt/Documents/projects/npm/wmt-graph

Installing the module from npm

Use the following command to install from npm:

• npm install wmt-graph

Importing the module

Once you have the module installed you can import exported functions into your code like so:

import Graph from "wmt-graph";

Using the module

Example of using the module:

<Graph
  data={[
    { date: "12/20/2018", Anxiety: 74, Depression: 86 },
    { date: "12/21/2018", Anxiety: 88, Depression: 20 },
    { date: "12/22/2018", Anxiety: 42, Depression: 31 },
    { date: "12/26/2018", Anxiety: 71, Depression: 24 },
    { date: "12/27/2018", Anxiety: 50, Depression: 50 }
  ]}
  title="Mood Tracker"
  dataKey="date"
  legend={true}
  themeType={"dark"}
  dataLines={[
    {
      dataName: "Anxiety",
      lineName: "Anxiety Level",
      strokeColor: "#0000cc"
    },
    {
      dataName: "Depression",
      lineName: "Depression Level",
      strokeColor: "#ff0800"
    }
  ]}
/>

• 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 will add the legend on the chart

• themeType(optional):Specify the theme to switch the grid line 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

Testing

• Tests can be ran with the npm test command.
• Tests are ran using Jest with Enzyme - More information about getting started with Jest can be found here.

Example render test:

it('renders without crashing', () => {
    shallow(<Graph />);
});`

Viewing API docs

You can generate and view the API docs by running the following command:

• npm run docs

This will start a development server on localhost:6060 showing all the properties for the Graph component.

You can also view the docs which are hosted here: https://wmtp.bitbucket.io/ReactModules/docs/#/Graph

Viewing source code

https://bitbucket.org/wmtp/wmt-graph

Published module

Here is where the module is currently published: https://www.npmjs.com/package/wmt-graph

License

This project is licensed under the MIT License.