README
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:
<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.