[docs] Add docs html to vx-demo

Issue airbnb#9
Flaque · May 20, 2017 · 6fea9b0 · 6fea9b0
1 parent 36ebfe3
commit 6fea9b0
Show file tree

Hide file tree

Showing 27 changed files with 2,164 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -17,5 +17,8 @@
     "charts"
   ],
   "author": "@hshoff",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "cheerio": "^0.22.0"
+  }
 }
diff --git a/packages/vx-demo/pages/docs.js b/packages/vx-demo/pages/docs.js
@@ -7,17 +7,16 @@ export default () => (
     <div className="page-left">
       <div className="comingsoon">
         <h1><a name="packages" />Packages</h1>
-        <code>// TODO: write docs</code>
       </div>
       <ul>
         <li>
-          @vx/annotation
+          <a href="/static/docs/vx-annotation.html"> @vx/annotation </a>
           <ul>
             <li>LinePath</li>
           </ul>
         </li>
         <li>
-          @vx/axis
+          <a href="/static/docs/vx-axis.html"> @vx/axis </a>
           <ul>
             <li>
               <strong>/axis</strong>
@@ -47,7 +46,7 @@ export default () => (
           </ul>
         </li>
         <li>
-          @vx/curve
+          <a href="/static/docs/vx-curve.html"> @vx/curve </a>
           <ul>
             <li>curveBasis</li>
             <li>curveBasisClose</li>
@@ -70,34 +69,34 @@ export default () => (
           </ul>
         </li>
         <li>
-          @vx/glyph
+          <a href="/static/docs/vx-glyph.html"> @vx/glyph </a>
           <ul>
             <li>GlyphDot</li>
             <li>Glyph</li>
           </ul>
         </li>
         <li>
-          @vx/grid
+          <a href="/static/docs/vx-grid.html"> @vx/grid </a>
           <ul>
             <li>Grid</li>
             <li>Columns</li>
             <li>Rows</li>
           </ul>
         </li>
         <li>
-          @vx/group
+          <a href="/static/docs/vx-group.html"> @vx/group </a>
           <ul>
             <li>Group</li>
           </ul>
         </li>
         <li>
-          @vx/marker
+          <a href="/static/docs/vx-marker.html"> @vx/marker </a>
           <ul>
             <li>Marker</li>
           </ul>
         </li>
         <li>
-          @vx/mock-data
+          <a href="/static/docs/vx-mock-data.html"> @vx/mock-data </a>
           <ul>
             <li>
               <strong>/generators</strong>
@@ -117,7 +116,7 @@ export default () => (
           </ul>
         </li>
         <li>
-          @vx/pattern
+          <a href="/static/docs/vx-pattern.html"> @vx/pattern </a>
           <ul>
             <li>PatternCircles</li>
             <li>PatternHexagons</li>
@@ -129,13 +128,15 @@ export default () => (
           </ul>
         </li>
         <li>
-          @vx/point
+          <a href="/static/docs/vx-point.html">
+            @vx/point
+          </a>
           <ul>
             <li>Point</li>
           </ul>
         </li>
         <li>
-          @vx/responsive
+          <a href="/static/docs/vx-responsive.html"> @vx/responsive </a>
           <ul>
             <li>
               <strong>/components</strong>
@@ -152,7 +153,7 @@ export default () => (
           </ul>
         </li>
         <li>
-          @vx/scale
+          <a href="/static/docs/vx-scale.html"> @vx/scale </a>
           <ul>
             <li>scaleBand</li>
             <li>scalePoint</li>
@@ -163,7 +164,7 @@ export default () => (
           </ul>
         </li>
         <li>
-          @vx/shape
+          <a href="/static/docs/vx-shape.html"> @vx/shape </a>
           <ul>
             <li>AreaClosed</li>
             <li>AreaStack</li>
@@ -173,7 +174,7 @@ export default () => (
           </ul>
         </li>
         <li>
-          @vx/text
+          <a href="/static/docs/vx-text.html"> @vx/text </a>
           <ul>
             <li>TextBackground</li>
             <li>TextOutline</li>

diff --git a/packages/vx-demo/static/doc_styles.css b/packages/vx-demo/static/doc_styles.css
@@ -0,0 +1,8 @@
+body {
+  padding: 50px;
+  font: 15px/1.6 Helvetica, Arial, sans-serif;
+}
+
+img {
+  max-width: 100%;
+}
diff --git a/packages/vx-demo/static/docs/vx-annotation.html b/packages/vx-demo/static/docs/vx-annotation.html
@@ -0,0 +1,153 @@
+
+  <html>
+    <head>
+      <link rel="stylesheet" type="text/css" href="../doc_styles.css">
+    </head>
+
+    <h1 id="-vx-annotation">@vx/annotation</h1>
+<h2 id="linepathannotation">LinePathAnnotation</h2>
+<p>Line Path Annotations add a bit of text and a line coming from a point. They&#39;re useful for adding info to your graphs.</p>
+<pre><code class="lang-javascript">import { LinePathAnnotation } from &#39;@vx/annotation&#39;;
+// or
+// import * as Annotation from &#39;@vx/annotation&#39;; 
+// &lt;Annotation.LinePathAnnotation /&gt;
+
+const annotation = (
+  &lt;LinePathAnnotation
+    label={&#39;expected from deploy&#39;}
+    stroke={&#39;white&#39;}
+    labelFill={&#39;white&#39;}
+    labelStroke={&#39;none&#39;}
+    labelStrokeWidth={2}
+    points={[
+      annotationPoint,
+      new Point({
+        x: annotationPoint.x + (width / allData.length),
+        y: annotationPoint.y - (height / allData.length),
+      })
+    ]}
+  /&gt;
+);
+</code></pre>
+<p><img src="http://i.imgur.com/o5jnHFS.png" alt="image output"></p>
+<h1 id="properties">Properties</h1>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Default</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">top</td>
+<td style="text-align:left">0</td>
+<td style="text-align:left">number</td>
+<td style="text-align:left">Margin on top</td>
+</tr>
+<tr>
+<td style="text-align:left">left</td>
+<td style="text-align:left">0</td>
+<td style="text-align:left">number</td>
+<td style="text-align:left">Margin on left</td>
+</tr>
+<tr>
+<td style="text-align:left">points</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">array</td>
+<td style="text-align:left">Points describing the line path</td>
+</tr>
+<tr>
+<td style="text-align:left">stroke</td>
+<td style="text-align:left">black</td>
+<td style="text-align:left">string</td>
+<td style="text-align:left">The color of the line</td>
+</tr>
+<tr>
+<td style="text-align:left">strokeWidth</td>
+<td style="text-align:left">1</td>
+<td style="text-align:left">number</td>
+<td style="text-align:left">The pixel width of the line</td>
+</tr>
+<tr>
+<td style="text-align:left">className</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">string</td>
+<td style="text-align:left">The class name associated of the LinePath shape</td>
+</tr>
+<tr>
+<td style="text-align:left">label</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">string</td>
+<td style="text-align:left">The text for your label</td>
+</tr>
+<tr>
+<td style="text-align:left">labelAnchor</td>
+<td style="text-align:left">left</td>
+<td style="text-align:left">string</td>
+<td style="text-align:left">The label&#39;s textAnchor</td>
+</tr>
+<tr>
+<td style="text-align:left">labelDx</td>
+<td style="text-align:left">0</td>
+<td style="text-align:left">number</td>
+<td style="text-align:left">The x-coordinate shift to the label</td>
+</tr>
+<tr>
+<td style="text-align:left">labelDy</td>
+<td style="text-align:left">0</td>
+<td style="text-align:left">number</td>
+<td style="text-align:left">The y-coordinate shift to the label</td>
+</tr>
+<tr>
+<td style="text-align:left">labelFill</td>
+<td style="text-align:left"><stroke></td>
+<td style="text-align:left">string</td>
+<td style="text-align:left">The color of label. Defaults to the stroke color</td>
+</tr>
+<tr>
+<td style="text-align:left">labelFontSize</td>
+<td style="text-align:left">10</td>
+<td style="text-align:left">number</td>
+<td style="text-align:left">The font size of the label text</td>
+</tr>
+<tr>
+<td style="text-align:left">labelStroke</td>
+<td style="text-align:left">white</td>
+<td style="text-align:left">string</td>
+<td style="text-align:left">The color of the label</td>
+</tr>
+<tr>
+<td style="text-align:left">labelStrokeWidth</td>
+<td style="text-align:left">3</td>
+<td style="text-align:left">number</td>
+<td style="text-align:left">The stroke width of the label text</td>
+</tr>
+<tr>
+<td style="text-align:left">labelPaintOrder</td>
+<td style="text-align:left">stroke</td>
+<td style="text-align:left">string</td>
+<td style="text-align:left">The label&#39;s SVG <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order">paint-order</a>.</td>
+</tr>
+</tbody>
+</table>
+<h2 id="vx-packages">vx packages</h2>
+<ul>
+<li>@vx/annotation</li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-axis">@vx/axis</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-curve">@vx/curve</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-demo">@vx/demo</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-glyph">@vx/glyph</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-grid">@vx/grid</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-group">@vx/group</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-marker">@vx/marker</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-mock-data">@vx/mock-data</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-point">@vx/point</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-responsive">@vx/responsive</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-scale">@vx/scale</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-shape">@vx/shape</a></li>
+</ul>
+
+  </html>
diff --git a/packages/vx-demo/static/docs/vx-axis.html b/packages/vx-demo/static/docs/vx-axis.html
@@ -0,0 +1,31 @@
+
+  <html>
+    <head>
+      <link rel="stylesheet" type="text/css" href="../doc_styles.css">
+    </head>
+
+    <h1 id="-vx-axis">@vx/axis</h1>
+<ul>
+<li><a href="https://github.com/hshoff/vx/blob/master/packages/vx-axis/src/axis/Axis.js"><code>&lt;Axis /&gt;</code></a></li>
+<li><a href="https://github.com/hshoff/vx/blob/master/packages/vx-axis/src/axis/AxisLeft.js"><code>&lt;AxisLeft /&gt;</code></a></li>
+<li><a href="https://github.com/hshoff/vx/blob/master/packages/vx-axis/src/axis/AxisBottom.js"><code>&lt;AxisBottom /&gt;</code></a></li>
+<li><a href="https://github.com/hshoff/vx/blob/master/packages/vx-axis/src/axis/AxisTop.js"><code>&lt;AxisTop /&gt;</code></a></li>
+<li><a href="https://github.com/hshoff/vx/blob/master/packages/vx-axis/src/axis/AxisRight.js"><code>&lt;AxisRight /&gt;</code></a></li>
+</ul>
+<h2 id="vx-packages">vx packages</h2>
+<ul>
+<li>@vx/axis</li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-curve">@vx/curve</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-demo">@vx/demo</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-glyph">@vx/glyph</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-grid">@vx/grid</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-group">@vx/group</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-marker">@vx/marker</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-mock-data">@vx/mock-data</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-point">@vx/point</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-responsive">@vx/responsive</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-scale">@vx/scale</a></li>
+<li><a href="https://github.com/hshoff/vx/tree/master/packages/vx-shape">@vx/shape</a></li>
+</ul>
+
+  </html>
diff --git a/packages/vx-demo/static/docs/vx-brush.html b/packages/vx-demo/static/docs/vx-brush.html
@@ -0,0 +1,9 @@
+
+  <html>
+    <head>
+      <link rel="stylesheet" type="text/css" href="../doc_styles.css">
+    </head>
+
+    <h1 id="-vx-brush">@vx/brush</h1>
+
+  </html>