# urban_graph

> An easy-to-use graphing component and interface

Latest version **1.2.0** (published 2020-12-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install urban_graph
pnpm add urban_graph
yarn add urban_graph
bun add urban_graph
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2020-12-17 |
| First published | 2020-10-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Pranay Agarwal |
| Maintainers | pranay1208 |
| Keywords | graph, custom, data, visualisation, charts, diagram, grid, plot |

## Links

- npm: https://www.npmjs.com/package/urban_graph
- Repository: https://github.com/pranay1208/urban-graph
- Homepage: https://github.com/pranay1208/urban-graph#readme
- Issues: https://github.com/pranay1208/urban-graph/issues
- npm.io page: https://npm.io/package/urban_graph

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.0.0
- [devextreme](https://npm.io/package/devextreme.md) 20.2.3
- [devextreme-react](https://npm.io/package/devextreme-react.md) 20.2.3
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2020-12-17
- 1.1.3 — 2020-11-08
- 1.1.2-readme-3 — 2020-11-08
- 1.1.2-readme-2 — 2020-11-06
- 1.1.2-readme — 2020-11-06
- 1.1.2 — 2020-11-06
- 1.1.1 — 2020-11-03
- 1.1.0 — 2020-11-03
- 1.0.4-fix3 — 2020-11-03
- 1.0.4-fix2 — 2020-11-03
- 1.0.4-fix — 2020-11-03
- 1.0.4 — 2020-11-03
- 1.0.3 — 2020-10-27
- 1.0.2 — 2020-10-27

## README

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

# Urban Graph

A React component that abstracts painstaking graph creation into a single class with easy-to-use props and a variety of customisation possiblities.

# Installation

Use `npm i urban_graph --save` to install and save the package.

## Usage

```
import UrbanGraph from 'urban_graph'

const _data = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35, gender: "male", hourServed: 24, email: "sample@gmail.com", skills:["IT", "Finance", "Art"] },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42, gender: "female",  hourServed: 22, email: "sample@gmail.com", skills:["Teaching", "Art"] },
    ...,
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65,gender: "male", hourServed: 100, email: "sample@gmail.com", skills:["Finance", "Teaching"] },
  ];
const _argumentAxis = "firstName" //this attribute's value will be the x-axis of the graph
const _seriesList = ["age", "hoursServed"] //list of attribute names that should be plotted on the graph
const _title = "GoT Volunteer Work"
const _graphType = "bar" //other options included in Options description

class ABC extends React.Component {
    render(){
        return <UrbanGraph data={_dataList} graphType={_graphType}
            seriesList={_listOfSeries} colourTheme="Bright" argumentAxis={_argumentAxis} title={_title}
            export/>
    }

}
```

# Options

- title is the title of the graph (**string**)
- data is the list of data objects that the graph will be built on (**list of objects**)
- graphType is the type of the graph (e.g - 'bar', 'line', 'spline', 'stackedBar', 'area', **_'pie'_**, **_'doughnut'_**)
- seriesList is the list of data attributes to plot on the graph (**list of string**)
- argumentAxis is the x-axis of a line graph, or the identifying attribute for each data-point (**string**)
- aggregate can be added as a **bool** prop to aggregate data by values and report number of instances
- export can be added as a **bool** prop to make the graph exportable as PNG/PDF/SVG/JPEG
- crosshair can be added as a **bool** prop to add crosshairs (lines connecting to both axes) to the graph

In a pie-chart, if the seriesList contains a key with non-numeric values, UrbanGraph will count the number of occurrences of each unique value and display the number as the value, and the attribute as the argument axis. If aggregate is selected, even numeric values will be counted based on values. **_Italicised graph types are pie-like graphs_**

# Example

The above code gives the following graph... _all graphs are made from the same data set shown in Usage section_
![line graph](assets/line.png)

Aggregated x-y chart
![aggregated line graph](assets/line_aggr.png)

Pie charts with numeric attribute value
![pie chart](assets/pie.png)

Pie charts with non-numeric attribute value
![aggregated pie chart](assets/pie_aggr.png)

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