From e8bbd2129fa5321bce03517f41a993148a327770 Mon Sep 17 00:00:00 2001
From: Prateeksha Singh <pratu16x7@gmail.com>
Date: Wed, 6 Jun 2018 11:58:02 +0530
Subject: [PATCH] [docs] add configuration and navigation docs

---
 docs/basic/heatmap.md           | 17 ++++++++++-------
 docs/reference/configuration.md | 31 ++++++++++++++++---------------
 docs/update_state/navigation.md | 26 +++++++++++++++-----------
 3 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/docs/basic/heatmap.md b/docs/basic/heatmap.md
index 8ac90e7..b8d17b9 100644
--- a/docs/basic/heatmap.md
+++ b/docs/basic/heatmap.md
@@ -16,6 +16,9 @@ let data = {
 	end: endDate
 }
 ```
+(We are working on making the start date and end date implicit and optional).
+
+The chart is rendered by the type `heatmap`:
 
 ```js
 let chart = new Chart("#heatmap", {
@@ -29,6 +32,13 @@ let chart = new Chart("#heatmap", {
 	}">
 </project-demo>
 
+Setting `discreteDomains` to `0` allows for a continous distribution of heat squares (as on GitHub), rather than showing the month-wise separation. A different set of colors can also be specified.
+
+```js
+discreteDomains: 0, // default 1
+colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
+```
+
 <project-demo data="heatmap-data" v-bind:config="{
 		title: 'Monthly Distribution',
         type: 'heatmap',
@@ -57,11 +67,4 @@ let chart = new Chart("#heatmap", {
 		}
 	]">
 </project-demo>
-(We are working on making the start date and end date implicit and optional). [tip]
-
-The chart is rendered by the type `heatmap`:
-
-```js
-
-```
 
diff --git a/docs/reference/configuration.md b/docs/reference/configuration.md
index e6960e6..b6e958d 100644
--- a/docs/reference/configuration.md
+++ b/docs/reference/configuration.md
@@ -133,13 +133,13 @@ Set the height of the chart in pixels.
  - Values: `span | tick`
  - Default: `span`
 
-Foo
+Display axis points as short ticks or long spanning lines.
 
 #### xIsSeries
  - Type: `Boolean`
  - Default: `0`
 
-Foo
+The X axis (often the time axis) is usually continuous. That means we can reduce the redundancy of rendering every X label by setting `xIsSeries` to `1` and allowing only a few periodic ones.
 
 ---
 
@@ -147,14 +147,19 @@ Foo
  - Type: `Object`
  - Default: `{}`
 
+Customizing options for the format of the label and value displayed on hover tooltips.
+
 ####
+ - Type: `function`
+ - Default: `{}`
+
 ---
 
 ### barOptions
  - Type: `Object`
  - Default: `{}`
 
-This option controls how width of each `column` is calculated in the chart.
+Can be used to set various properties on bar plots.
 
 #### spaceRatio
  - Type: `Number`
@@ -162,17 +167,21 @@ This option controls how width of each `column` is calculated in the chart.
  - Max: `2`
  - Default: `0.5`
 
+In order to set the bar width, instead of defining it and the space between the bars independently, we simply define the <b>ratio of the space</b> between bars to the bar width. The chart then adjusts the actual size proportional to the chart container.
+
 #### stacked
  - Type: `Boolean`
  - Default: `0`
 
+Renders multiple bar datasets in a stacked configuration, rather than the default adjacent.
+
 ---
 
 ### lineOptions
  - Type: `Object`
  - Default: `{}`
 
-Foo
+Can be used to set various properties on line plots, turn them into Area Charts and so on. Explore in details on the [Trends]() page.
 
 ---
 
@@ -180,20 +189,12 @@ Foo
  - Type: `Boolean`
  - Default: `0`
 
-Foo
-Example
+Makes the chart interactive with arrow keys and highlights the current active data point.
 
-```javascript
-{
-    dropdownButton: '<span class="fa fa-chevron-down"></span>'
-}
-
-```
+---
 
 ### valuesOverPoints
  - Type: `Boolean`
  - Default: `0`
 
-Foo
-
-###
+To display data values over bars or dots in an axis graph.
diff --git a/docs/update_state/navigation.md b/docs/update_state/navigation.md
index dc6dec7..1559c23 100644
--- a/docs/update_state/navigation.md
+++ b/docs/update_state/navigation.md
@@ -1,23 +1,27 @@
 # Navigation
 
+In order to analyse a data individually, it helps if the chart can activate a given point on the plot. This is where `isNavigable` comes in handy, which makes the chart interactive with arrow keys and highlights the current active data point.
+
+```js
+isNavigable: true // default: false
+```
+
+Try and traverse this chart with arrow-keys.
+
 <project-demo data="2" v-bind:config="{
         type: 'bar',
         height: 140,
 		isNavigable: 1,
-        colors: ['orange'],
+        colors: ['light-blue'],
         axisOptions: { xAxisMode: 'tick' },
         barOptions: { spaceRatio: 0.2 },
     }">
 </project-demo>
 
+Each time a data point is activated, a new `data-select` event is triggered that contains all the label and value information specific to the point This can then be used to reflect in other parts of the webpage.
 
-<project-demo data="2" sideContent="2"
-	v-bind:config="{
-        type: 'bar',
-        height: 140,
-		isNavigable: 1,
-        colors: ['grey'],
-        axisOptions: { xAxisMode: 'tick' },
-        barOptions: { spaceRatio: 0.2 },
-    }">
-</project-demo>
\ No newline at end of file
+```js
+chart.parent.addEventListener('data-select', (e) => {
+    update_moon_data(e.index); // e contains index and value of current datapoint
+});
+```