README

wmtp-graph module

This module is a react graph component to be used in node.js applications

Setting up the module

clone the repository
run "npm install" to install dependencies needed to run

Building the module

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

/Users/joseph.bethards/Documents/ts-components/wmtp-graph
npm run build

Installing the module for testing

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

npm install /absolute/path/to/modules/directory
i.e. -> npm install /Users/jbethards/Documents/WorkProjects/custom-node-modules/wmtp-graph

Installing the module from npm

Use the following command to install from npm

npm install wmtp-graph

Importing the module

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

import WmtpGraph from 'wmtp-graph'

Using the module

Here is an example of our component usage

 <WmtpGraph
    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}
    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
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

Viewing ReactDocs

You can view the React Docs by entering the following command:

npm start

This will start a development server on localhost:6060 showing all the properties for the WMTP Slider module

Published module

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

wmtp-graphdeprecated

Usage no npm install needed!