# dha-graph

> DHA SDK graph

Latest version **2.3.1** (published 2024-03-27) · 0 weekly downloads

## Install

```sh
npm install dha-graph
pnpm add dha-graph
yarn add dha-graph
bun add dha-graph
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.1 |
| Published | 2024-03-27 |
| First published | 2019-04-10 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 24.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Joseph Bethards, Jake McKenzie |
| Maintainers | dha-sdk |

## Links

- npm: https://www.npmjs.com/package/dha-graph
- npm.io page: https://npm.io/package/dha-graph

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.2.0
- [recharts](https://npm.io/package/recharts.md) ^2.12.3
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Recent versions

- 2.3.1 (latest) — 2024-03-27
- 2.3.0 — 2024-03-26
- 2.2.1 — 2023-09-05
- 2.1.0 — 2023-05-18
- 2.0.1 — 2022-07-22
- 2.0.0 — 2022-04-05
- 1.3.17 — 2021-02-23
- 1.3.16 — 2021-02-08
- 1.3.15 — 2020-01-15
- 1.3.14 — 2020-01-15
- 1.3.13 — 2020-01-15
- 1.3.12 — 2020-01-09
- 1.2.12 — 2019-07-26
- 1.2.11 — 2019-04-10
- 1.2.10 — 2019-04-10

## README

# 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

```javascript
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

```javascript
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;
```

## Contribute

_see Github wiki_

## NPM

https://www.npmjs.com/package/dha-graph

## License

_pending_

---
_Source: https://npm.io/package/dha-graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._