add readme docs

janis-commerce · Sep 21, 2020 · 75f4b5c · gastonpereyra · Oct 6, 2020 · 75f4b5c
1 parent fd77d3e
commit 75f4b5c
Show file tree

Hide file tree

Showing 3 changed files with 200 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -4,20 +4,196 @@
 [![Coverage Status](https://coveralls.io/repos/github/janis-commerce/format-data-to-google-chart/badge.svg?branch=master)](https://coveralls.io/github/janis-commerce/format-data-to-google-chart?branch=master)
 [![npm version](https://badge.fury.io/js/%40janiscommerce%2Fformat-data-to-google-chart.svg)](https://www.npmjs.com/package/@janiscommerce/format-data-to-google-chart)
 
-A package that formats the data for use in Google charts
+A package for format an array of object for create the data for many Google Charts.
 
 ## Installation
+
 ```sh
 npm install @janiscommerce/format-data-to-google-chart
 ```
 
-## API
-
 
 ## Usage
+
 ```js
-const FormatDataToGoogleChart = require('@janiscommerce/format-data-to-google-chart');
+const { LineChart } = require('@janiscommerce/format-data-to-google-chart');
+
+const lineChart = new LineChart({
+	label: {
+		source: 'date'
+	},
+	values: [{
+		source: 'quantity'
+	}, {
+		source: 'double'
+	}]
+});
+
+lineChart.setData(sampleData);
+
+const { data } = lineChart.parse();
 
 ```
 
+## Label and Values items properties
+
+
+| Property    | type     | description                           | required |
+|-------------|----------|---------------------------------------|----------|
+| source      | string   | Field name for find value in the data | true     |
+| title       | string   | Title for view in chart labels        | false    |
+| valueMapper | function | function for modify value to show     | false    |
+| titleMapper | function | function for modify title to show     | false    |
+
+
 ## Examples
+
+### LineChart
+
+```js
+const { LineChart } = require('@janiscommerce/format-data-to-google-chart');
+
+const sampleData = [
+	{
+		id: 1,
+		date: '2020-04-15',
+		name: 'First element',
+		quantity: 10,
+		double: 20
+	},
+	{
+		id: 2,
+		date: '2020-04-16',
+		name: 'Second element',
+		quantity: 20,
+		double: 40
+	},
+	{
+		id: 3,
+		date: '2020-04-17',
+		name: 'Third element',
+		quantity: 60,
+		double: 120
+	}
+];
+
+const lineChart = new LineChart({
+	label: {
+		source: 'date'
+	},
+	values: [{
+		source: 'quantity'
+	}, {
+		source: 'double'
+	}]
+});
+
+lineChart.setData(sampleData);
+
+const { data } = lineChart.parse();
+
+// data preview
+
+[
+	['date', 'quantity', 'double'],
+	['2020-04-15', 10, 20],
+	['2020-04-16', 20, 40],
+	['2020-04-17', 60, 120]
+]
+```
+
+
+
+### PieChart
+
+```js
+const { PieChart } = require('@janiscommerce/format-data-to-google-chart');
+
+const sampleData = [
+	{
+		id: 1,
+		name: 'First element',
+		quantity: 10
+	},
+	{
+		id: 2,
+		name: 'Second element',
+		quantity: 20
+	},
+	{
+		id: 3,
+		name: 'Third element',
+		quantity: 60
+	}
+];
+
+
+const pieChart = new PieChart({
+	label: {
+		source: 'name'
+	},
+	values: [{
+		source: 'quantity'
+	}]
+});
+
+pieChart.setData(sampleData);
+
+const { data } = pieChart.parse();
+
+// data preview
+
+[
+	['name', 'quantity'],
+	['First element', 10],
+	['Second element', 20],
+	['Third element', 60]
+]
+```
+
+
+### TableChart
+
+```js
+const { TableChart } = require('@janiscommerce/format-data-to-google-chart');
+
+const sampleData = [
+	{
+		id: 1,
+		name: 'First element',
+		quantity: 10
+	},
+	{
+		id: 2,
+		name: 'Second element',
+		quantity: 20
+	},
+	{
+		id: 3,
+		name: 'Third element',
+		quantity: 60
+	}
+];
+
+
+const tableChart = new TableChart({
+	values: [
+		{ source: 'id' },
+		{ source: 'name' },
+		{ source: 'quantity' }
+	]
+});
+
+tableChart.setData(sampleData);
+
+const { data } = tableChart.parse();
+
+// data preview
+
+[
+	[{ label: 'id' }, { label: 'name' }, { label: 'quantity' }],
+	[1, 'First element', 10],
+	[2, 'Second element', 20],
+	[3, 'Third element', 60]
+]
+```
diff --git a/lib/pie-chart.js b/lib/pie-chart.js
@@ -12,7 +12,7 @@ class PieChart extends BaseChart {
 		return [
 			getTitles([
 				this._dataHandlingProps.label,
-				this._dataHandlingProps.value
+				...this._dataHandlingProps.values
 			]),
 			// Data
 			...data.map(row => this._parseRow(row))
@@ -22,7 +22,7 @@ class PieChart extends BaseChart {
 	_parseRow(row) {
 		return getValues(row, [
 			this._dataHandlingProps.label,
-			this._dataHandlingProps.value
+			...this._dataHandlingProps.values
 		]);
 	}
 

diff --git a/tests/unit/pie-chart.js b/tests/unit/pie-chart.js
@@ -13,9 +13,9 @@ describe('Pie Chart', () => {
 			label: {
 				source: 'name'
 			},
-			value: {
+			values: [{
 				source: 'quantity'
-			}
+			}]
 		});
 
 		pieChart.setData(sampleData);
@@ -42,10 +42,10 @@ describe('Pie Chart', () => {
 				source: 'name',
 				title: 'Name'
 			},
-			value: {
+			values: [{
 				source: 'quantity',
 				title: 'Quantity'
-			}
+			}]
 		});
 
 		pieChart.setData(sampleData);
@@ -71,9 +71,9 @@ describe('Pie Chart', () => {
 			label: {
 				source: 'name'
 			},
-			value: {
+			values: [{
 				source: 'quantity'
-			}
+			}]
 		}, {
 			title: 'My chart title',
 			is3D: true,
@@ -109,10 +109,10 @@ describe('Pie Chart', () => {
 			label: {
 				source: 'name'
 			},
-			value: {
+			values: [{
 				source: 'quantity',
 				valueMapper: v => v * 10
-			}
+			}]
 		});
 
 		pieChart.setData(sampleData);
@@ -139,9 +139,9 @@ describe('Pie Chart', () => {
 				source: 'name',
 				valueMapper: s => s.toUpperCase()
 			},
-			value: {
+			values: [{
 				source: 'quantity'
-			}
+			}]
 		});
 
 		pieChart.setData(sampleData);
@@ -168,10 +168,10 @@ describe('Pie Chart', () => {
 				source: 'name',
 				titleMapper: s => s.toUpperCase()
 			},
-			value: {
+			values: [{
 				source: 'quantity',
 				titleMapper: s => `The ${s}`
-			}
+			}]
 		});
 
 		pieChart.setData(sampleData);
@@ -207,9 +207,9 @@ describe('Pie Chart', () => {
 			label: {
 				source: 'type'
 			},
-			value: {
+			values: [{
 				source: 'quantity'
-			}
+			}]
 		});
 
 		pieChart.setData(sampleData);
@@ -242,9 +242,9 @@ describe('Pie Chart', () => {
 			label: {
 				source: 'sum'
 			},
-			value: {
+			values: [{
 				source: 'quantity'
-			}
+			}]
 		});
 
 		pieChart.setData(sampleData);
@@ -273,9 +273,9 @@ describe('Pie Chart', () => {
 			label: {
 				source: 'name'
 			},
-			value: {
+			values: [{
 				source: 'quantity'
-			}
+			}]
 		});
 
 		pieChart.setData(sampleData);