Results Graph npm module

Usage no npm install needed!

<script type="module">
  import wmtGraph from 'https://cdn.skypack.dev/wmt-graph';



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

Setting up the module

  • git clone git@bitbucket.org: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:

    { 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"
      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


  • 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


Published module

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


This project is licensed under the MIT License.