# Simpler Graph Components

<details> 
<summary>## Line Graph</summary>
A line graph component which fills under the line.

Takes three props:

 1. `series`: an array of objects. Each object is one "row" in the data. The object must have properties `x` and `y`. If the x property is a date, it must be formatted like so: `2020-02-15`.

 [

		{
			x: '2019-11-11',
			y: 14
		},

		{
			x: '2019-11-12',
			y: 10
		},

		{
			x: '2019-11-13',
			y: 18
		}
	]

 2. `hoverLabel`: the label seen when hovering over any data point, e.g. 'Total visits (30 days)'
 3. `fillColour`: a string hex code for the colour under the graph
 </details>
 <details> 
<summary>## Colour Graph</summary>
A line graph component which fills under the line.

Takes three props:

 1. `series`: an array of objects. Each object is one "row" in the data. The object must have properties `x` and `y`. If the x property is a date, it must be formatted like so: `2020-02-15`.

 [

		{
			x: '2019-11-11',
			y: 14
		},

		{
			x: '2019-11-12',
			y: 10
		},

		{
			x: '2019-11-13',
			y: 18
		}
	]

 2. `hoverLabel`: the label seen when hovering over any data point, e.g. 'Total visits (30 days)'
 3. `lineColour`: a string hex code for the colour of the line
 </details>
 <details> 
<summary>## Doughnut Graph</summary>
A doughnut graph component.

Takes one prop:

 1. `series`: an array of objects. Each object is one segment in the doughnut. The object must have properties `colour` (colour code for that segment), `label` (label of the segment) and `value` (the value of the segment).

 [

		{ colour: '#171f7f', label: 'Series A', value: 14 },

		{ colour: '#f56565', label: 'Series B', value: 10 },

		{ colour: '#2aca79', label: 'Series C', value: 18 }
		
	]

 </details>
 <details> 
<summary>## Table Graph</summary>
An expandable table.

Props:

1. `columnNames`: an array of the titles of the columns
2. `rows`: an array of arrays, with each subarray as one 'row' in the table. Must be in the same order as the array of titles, e.g.:

```
[
		['debenhams skechers', 3, 3],
		['black lace up skechers', 2, 1],
		['rieker', 1, 51],
]

```

3. `defaultSortColumn`: which column you want the table to start sorted by. Defaults to 1.
4. `initialLength`: how many rows to render in the unexpanded mode. Defaults to 10. 
5. `maxLength`: maximum number of rows to render. Defaults to 1000.

 </details>
 <details> 
<summary>## Stacked Bar Graph</summary>
A bar graph component showing stacked data.

Takes one prop:

 1. `series`: an array of objects. Each object is one "layer" of the bar. The object must have properties `backgroundColor` (colour code for that layer), `label` (label of the layer) and `dataset`, which is an array of objects representing the columns for each layer.
[
		{
			label: 'PLUS0',
			dataset: [
				{ label: 'January', value: 10 },

				{ label: 'February', value: 12 },

				{ label: 'March', value: 15 }
			],
			backgroundColor: '#171f7f'
		},
		{
			label: 'PLUS2',
			dataset: [
				{ label: 'January', value: 4 },

				{ label: 'February', value: 1 },

				{ label: 'March', value: 8 }
			],
			backgroundColor: '#f56565'
		},
		{
			label: 'PLUS3',
			dataset: [
				{ label: 'January', value: 1 },

				{ label: 'February', value: 0 },

				{ label: 'March', value: 7 }
			],
			backgroundColor: '#2aca79'
		}
	] 

 </details>