Add markdown formatted documentation for Visualization components

README.md

@@ -6,3 +6,9 @@ Collection of commonly used react components.
 
 #### Repo currently using react store
 - [deeper](https://github.com/the-deep/client/)
+
+### Documentation
+ * [components documentation](docs/README.md)
+
+### License
+ [react-store] (https://github.com/toggle-corp/react-store) is licensed under MIT license.

docs/README.md

@@ -0,0 +1,57 @@
+# React Store
+
+## To generate documentation
+
+#### go to [react-store](https://github.com/toggle-corp/react-store) root folder
+    cd react-store
+
+#### run [react-docgen](https://github.com/reactjs/react-docgen) on folders or files you want to generate documentation
+    react-docgen components/Visualization/ChordDiagram.js -o ChordDiagram.json
+
+#### run buildDocs script located on docs/scripts folder with generated json
+    node docs/scripts/buildDocs.js < ChordDiagram.json
+
+## Components
+
+### Visualization
+Visualization components helps to represent data in graphical way.
+
+* [ChordDiagram](components/Visualization/ChordDiagram.md)
+* [ClusteredForceLayout](components/Visualization/ClusteredForceLayout.md)
+* [ClusterForceLayout](components/Visualization/ClusterForceLayout.md)
+* [CollapsibleTree](components/Visualization/CollapsibleTree.md)
+* [ColorPalette](components/Visualization/ColorPalette.md)
+* [CorrelationMatrix](components/Visualization/CorrelationMatrix.md)
+* [Dendrogram](components/Visualization/Dendrogram.md)
+* [DonutChart](components/Visualization/DonutChart.md)
+* [ForceDirectedGraph](components/Visualization/ForceDirectedGraph.md)
+* [FullScreen](components/Visualization/FullScreen.md)
+* [GeoReferencedMap](components/Visualization/GeoReferencedMap.md)
+* [GoogleOrgChart](components/Visualization/GoogleOrgChart.md)
+* [GroupedBarChart](components/Visualization/GroupedBarChart.md)
+* [HealthBar](components/Visualization/HealthBar.md)
+* [Histogram](components/Visualization/Histogram.md)
+* [HorizontalBar](components/Visualization/HorizontalBar.md)
+* [LegendItem](components/Visualization/LegendItem.md)
+* [Legend](components/Visualization/Legend.md)
+* [NewForceDirectedGraph](components/Visualization/NewForceDirectedGraph.md)
+* [Organigram](components/Visualization/Organigram.md)
+* [OrgChart](components/Visualization/OrgChart.md)
+* [ParallelCoordinates](components/Visualization/ParallelCoordinates.md)
+* [PieChart](components/Visualization/PieChart.md)
+* [RadialDendrogram](components/Visualization/RadialDendrogram.md)
+* [Sankey](components/Visualization/Sankey.md)
+* [Segment](components/Visualization/Segment.md)
+* [SimpleHorizontalBarChart](components/Visualization/SimpleHorizontalBarChart.md)
+* [SimpleVerticalBarChart](components/Visualization/SimpleVerticalBarChart.md)
+* [SparkLine](components/Visualization/SparkLine.md)
+* [SparkLines](components/Visualization/SparkLines.md)
+* [StackedBarChart](components/Visualization/StackedBarChart.md)
+* [StreamGraph](components/Visualization/StreamGraph.md)
+* [SunBurst](components/Visualization/SunBurst.md)
+* [TimeSeries](components/Visualization/TimeSeries.md)
+* [Tooltip](components/Visualization/Tooltip.md)
+* [TreeMap](components/Visualization/TreeMap.md)
+* [VerticalBarChart](components/Visualization/VerticalBarChart.md)
+* [WordCloud](components/Visualization/WordCloud.md)
+* [ZoomableTreeMap](components/Visualization/ZoomableTreeMap.md)

docs/components/Visualization/BarChart.md

@@ -0,0 +1,140 @@
+`BarChart` (component)
+======================
+
+Represent categorical data with bars with values proportional to the
+length of each bar.
+
+Props
+-----
+
+### `barPadding`
+
+Padding between bars
+
+type: `number`
+defaultValue: `0.01`
+
+
+### `boundingClientRect` (required)
+
+Size of the parent element/component (passed by the Responsive hoc)
+
+type: `object`
+
+
+### `className`
+
+Data
+[{
+   xKey: value,
+   yKey: value,
+ },...]
+
+type: `string`
+defaultValue: `''`
+
+
+### `data` (required)
+
+The data to be visualized
+
+type: `arrayOf[object Object]`
+
+
+### `highlightBarX`
+
+Highlight which bar
+
+type: `union(string|number)`
+defaultValue: `null`
+
+
+### `margins`
+
+Chart Margins
+
+type: `shape[object Object]`
+defaultValue: `{
+    top: 10,
+    right: 10,
+    bottom: 30,
+    left: 30,
+}`
+
+
+### `maxNuOfRow`
+
+if length is greater, than rotate X-axis label
+
+type: `number`
+defaultValue: `30`
+
+
+### `tooltipRender` (required)
+
+Renderer for tooltip
+
+type: `func`
+
+
+### `updateFromProps`
+
+key for for x-axis and y-axis in Data
+
+type: `bool`
+defaultValue: `true`
+
+
+### `xGrid`
+
+Show x grid lines
+
+type: `bool`
+defaultValue: `true`
+
+
+### `xKey` (required)
+
+key for x-axis data
+
+type: `string`
+
+
+### `xTickFormat`
+
+Tick format for x-axis
+
+type: `func`
+defaultValue: `d => d`
+
+
+### `yGrid`
+
+Show y grid lines
+
+type: `bool`
+defaultValue: `true`
+
+
+### `yKey` (required)
+
+key for y-axis data
+
+type: `string`
+
+
+### `yTickFormat`
+
+Tick format for y-axis
+
+type: `func`
+defaultValue: `d => d`
+
+
+### `yTicks`
+
+No of y ticks
+
+type: `number`
+defaultValue: `undefined`
+

docs/components/Visualization/ChordDiagram.md

@@ -0,0 +1,94 @@
+`ChordDiagram` (component)
+==========================
+
+Chord diagram displays the inter-relationships between data in a matrix.The data are arranged
+radially around a circle with the relationships between the data points typically drawn as arcs
+connecting the data.
+see <a href="https://github.com/d3/d3-chord">d3-chord</a>
+
+Props
+-----
+
+### `boundingClientRect` (required)
+
+Size of the parent element/component (passed by the Responsive hoc)
+
+type: `shape[object Object]`
+
+
+### `className`
+
+Additional sscss classes passed from parent
+
+type: `string`
+defaultValue: `''`
+
+
+### `colorScheme`
+
+Array of colors as hex color codes
+
+type: `arrayOf[object Object]`
+defaultValue: `schemePaired`
+
+
+### `data`
+
+The nxn square matrix representing the directed flow amongst a network of n nodes
+see <a href="https://github.com/d3/d3-chord">d3-chord</a>
+
+type: `arrayOf[object Object]`
+defaultValue: `[]`
+
+
+### `labelModifier`
+
+Modifier to handle label info onMouseOver
+
+type: `func`
+defaultValue: `d => d`
+
+
+### `labelsData` (required)
+
+Array of labels
+
+type: `arrayOf[object Object]`
+
+
+### `margins`
+
+Margins for the chart
+
+type: `shape[object Object]`
+defaultValue: `{
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+}`
+
+
+### `setSaveFunction`
+
+Handler function to save the generated svg
+
+type: `func`
+defaultValue: `() => {}`
+
+
+### `showLabels`
+
+Handle visibility of labels on chord
+
+type: `bool`
+defaultValue: `true`
+
+
+### `showTooltip`
+
+Handle visibility of tooltip
+
+type: `bool`
+defaultValue: `true`
+