add chart doc

Author: ctxhou

README.md

@@ -211,6 +211,14 @@ Build production `js`, `min.js` code
 $ npm run prod
 ```
 
+### Docs
+
+If you want to modify the docs file, please modify `docs_pre` folder.
+
+After you finish, remember to install [smash-md](https://github.com/Canner/smash-md) first, then run `sh doc.sh` to compile the readme.
+
+Your new readme would show in `docs` folder.
+
 ## License
 
 Apache 2.0

doc.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+for filename in docs_pre/**/*.md docs_pre/**/**/*.md; do
+    dist=${filename//docs_pre\//docs\/}
+    dir=${dist%/*}
+    mkdir -p "$dir"
+    smashmd $filename > $dist
+done
+

docs/charts/area_stack_chart.md

@@ -1,4 +1,208 @@
-## Area Stack Chart Example
+# Area Stack Chart
+
+Area stack chart combines the `components/area_stack` and `x,y-axis`
+
+## Required Props
+
+### data
+
+- type: `array of object`
+
+each object has same key
+
+example:
+
+    [{
+      "date": "04/23/12",
+      "Group1": "-20",
+      "Group2": "12",
+      "Group3": "46"
+    }, {
+      "date": "04/24/12",
+      "Group1": "32",
+      "Group2": "-20",
+      "Group3": "24"
+    }]
+
+
+
+#### x
+
+- type: `function`
+
+parsed data function
+
+#### chartSeries
+
+- type: `array of object`
+- field: `required`, define the data field
+- name: `optional`, the show name of this data. default is the same with field.
+- color: `optional`, show categorical color
+
+example:
+
+    [{
+      field: "Group1",
+      name: "Group 1",
+      color: "red"
+    },
+    {
+      field: "Group2",
+      name: "Group 2",
+      color: "black"
+    }]
+
+## Appearance Props (optional)
+
+### title
+
+- type: string
+
+the title of the graph
+
+### width
+
+- type: int
+- default: `960`
+
+the width of the graph
+
+### height
+
+- type: int
+- default: `500`
+
+the height of the graph
+
+
+### margins
+
+- type: object
+- default: `{top: 80, right: 100, bottom: 80, left: 100}`
+
+margins of the graph
+
+### id
+
+- type: stirng
+
+- default : `null`
+
+## X axis props (optional)
+
+### xDomain
+
+reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more detail
+
+### xScale
+
+- type: boolean
+- default: `true`
+
+### xOrient
+
+### xTickOrient
+
+### xLabel
+
+### xRange
+
+
+## Y axis props (optional)
+
+### y
+
+- type: function
+
+- default: `y: (d) => {return +d;}`
+
+
+### yOrient
+
+### yRange
+
+### yDomain
+
+reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more details.
+
+### yScale
+
+- type: boolean
+- default: `true`
+
+### yTickOrient
+
+### yTicks
+
+### yLabel
+
+### yLabelPosition
+
+## Show Props (optional)
+
+### interpolate
+
+please reference d3 interpolate
+
+### showXAxis
+
+- type: boolean
+- default: `true`
+
+### showYAxis
+
+- type: boolean
+- default: `true`
+
+### showXGrid
+
+- type: boolean
+- default: `true`
+
+### showYGrid
+
+- type: boolean
+- default: `true`
+
+### showLegend
+
+- type: boolean
+- default: `true`
+
+### categoricalColors
+
+- default:  `d3.scale.category10()`
+
+you must send one of the d3 categorical colors. [reference](https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors)
+
+## Class Props (optional)
+
+### svgClassName
+
+- type: string
+- default: `null`
+
+### titleClassName
+
+- type: string
+- default: `null`
+
+### yAxisClassName
+
+- type: string
+- default: `null`
+
+### xAxisClassName
+
+- type: string
+- default: `null`
+
+### legendClassName
+
+- type: string
+- default: `null`
+
+## Example
 
 ```js
 "use strict";
@@ -109,46 +313,3 @@ var AreaStackChart = require('react-d3-basic').AreaStackChart;
   )
 })()
 ```
-
-## Settings
-
-### Basic Settings
-
-- interpolate
-- chartSeries
-- data
-- xDomain
-- yDomain
-- x
-- y
-- categoricalColors
-
-
-### Show Implements
-
-- showXGrid
-- showYGrid
-- showLegend
-
-----
-
-## Components
-
-### Plotting
-
-- AreaStack
-
-### Core
-
-#### Axis
-
-- Xaxis
-- Yaxis
-
-#### Grid
-
-- Grid
-
-#### Legend
-
-- legend