docs: Add JSON example for every component

fixes #171
kantord · May 20, 2018 · eaa5303 · eaa5303
1 parent f699d27
commit eaa5303
Show file tree

Hide file tree

Showing 29 changed files with 4,743 additions and 3,485 deletions.
diff --git a/Makefile b/Makefile
@@ -33,6 +33,12 @@ docs/examples/%.md: ./docs/examples/%.yml
 	echo "The code above will render a $* that looks like this:" | sed 's/_/ /g' >> $@
 	echo "" >> $@
 	echo "![](../screenshots/$*.png)" >> $@
+	echo "" >> $@
+	echo "## JSON format" >> $@
+	echo "The YAML above is equivalent to this JSON:" >> $@
+	echo "\`\`\`json" >> $@
+	cat $^ | npx babel-node scripts/compile_yaml_to_json >> $@
+	echo "\`\`\`" >> $@
 
 docs/examples/%.js: ./docs/examples/%.yml
 	echo " \

diff --git a/docs/examples/area_chart.md b/docs/examples/area_chart.md
@@ -32,3 +32,45 @@ dashboard "Example":
 The code above will render a area chart that looks like this:
 
 ![](../screenshots/area_chart.png)
+
+## JSON format
+The YAML above is equivalent to this JSON:
+```json
+{
+  "component": "root",
+  "args": {
+    "title": "Example"
+  },
+  "data": [
+    {
+      "component": "chart",
+      "args": {
+        "type": "area",
+        "stacked": false
+      },
+      "data": {
+        "columns": [
+          [
+            "Apples",
+            30,
+            29,
+            25,
+            26,
+            27,
+            10
+          ],
+          [
+            "Oranges",
+            20,
+            21,
+            22,
+            20,
+            27,
+            19
+          ]
+        ]
+      }
+    }
+  ]
+}
+```
diff --git a/docs/examples/bar_chart.md b/docs/examples/bar_chart.md
@@ -25,3 +25,39 @@ dashboard "Example":
 The code above will render a bar chart that looks like this:
 
 ![](../screenshots/bar_chart.png)
+
+## JSON format
+The YAML above is equivalent to this JSON:
+```json
+{
+  "component": "root",
+  "args": {
+    "title": "Example"
+  },
+  "data": [
+    {
+      "component": "chart",
+      "args": {
+        "type": "bar",
+        "stacked": false
+      },
+      "data": {
+        "columns": [
+          [
+            "Apples",
+            3
+          ],
+          [
+            "Oranges",
+            2
+          ],
+          [
+            "Pears",
+            2
+          ]
+        ]
+      }
+    }
+  ]
+}
+```
diff --git a/docs/examples/board.md b/docs/examples/board.md
@@ -31,3 +31,56 @@ dashboard "Example":
 The code above will render a board that looks like this:
 
 ![](../screenshots/board.png)
+
+## JSON format
+The YAML above is equivalent to this JSON:
+```json
+{
+  "component": "root",
+  "args": {
+    "title": "Example"
+  },
+  "data": [
+    {
+      "component": "board",
+      "data": [
+        {
+          "component": "rows",
+          "data": [
+            {
+              "component": "chart",
+              "args": {
+                "type": "pie",
+                "stacked": false
+              },
+              "data": {
+                "columns": [
+                  [
+                    "Apples",
+                    3
+                  ],
+                  [
+                    "Oranges",
+                    2
+                  ],
+                  [
+                    "Pears",
+                    2
+                  ]
+                ]
+              }
+            },
+            {
+              "component": "text",
+              "args": {
+                "tagName": "p"
+              },
+              "data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor massa, luctus rhoncus justo vel, cursus placerat ligula. Proin pulvinar ipsum in enim rutrum, quis fermentum ex finibus. Nunc commodo urna tellus, tristique tempor magna tempor eget. Phasellus eu ex lacinia sapien viverra fermentum."
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
diff --git a/docs/examples/bubble_chart.md b/docs/examples/bubble_chart.md
@@ -40,3 +40,54 @@ dashboard "Example":
 The code above will render a bubble chart that looks like this:
 
 ![](../screenshots/bubble_chart.png)
+
+## JSON format
+The YAML above is equivalent to this JSON:
+```json
+{
+  "component": "root",
+  "args": {
+    "title": "Example"
+  },
+  "data": [
+    {
+      "component": "chart",
+      "args": {
+        "type": "bubble",
+        "stacked": false
+      },
+      "data": {
+        "columns": [
+          [
+            "Apples",
+            30,
+            29,
+            25,
+            26,
+            27,
+            10
+          ],
+          [
+            "Oranges",
+            20,
+            21,
+            22,
+            20,
+            27,
+            19
+          ],
+          [
+            "Pears",
+            10,
+            9,
+            8,
+            8,
+            7,
+            8
+          ]
+        ]
+      }
+    }
+  ]
+}
+```
diff --git a/docs/examples/columns.md b/docs/examples/columns.md
@@ -29,3 +29,54 @@ dashboard "Example":
 The code above will render a columns that looks like this:
 
 ![](../screenshots/columns.png)
+
+## JSON format
+The YAML above is equivalent to this JSON:
+```json
+{
+  "component": "root",
+  "args": {
+    "title": "Example"
+  },
+  "data": [
+    {
+      "component": "columns",
+      "args": {
+        "columns": 2
+      },
+      "data": [
+        {
+          "component": "chart",
+          "args": {
+            "type": "pie",
+            "stacked": false
+          },
+          "data": {
+            "columns": [
+              [
+                "Apples",
+                3
+              ],
+              [
+                "Oranges",
+                2
+              ],
+              [
+                "Pears",
+                2
+              ]
+            ]
+          }
+        },
+        {
+          "component": "text",
+          "args": {
+            "tagName": "p"
+          },
+          "data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor massa, luctus rhoncus justo vel, cursus placerat ligula. Proin pulvinar ipsum in enim rutrum, quis fermentum ex finibus. Nunc commodo urna tellus, tristique tempor magna tempor eget. Phasellus eu ex lacinia sapien viverra fermentum."
+        }
+      ]
+    }
+  ]
+}
+```
diff --git a/docs/examples/custom_axes.md b/docs/examples/custom_axes.md
@@ -61,3 +61,77 @@ dashboard "Example":
 The code above will render a custom axes that looks like this:
 
 ![](../screenshots/custom_axes.png)
+
+## JSON format
+The YAML above is equivalent to this JSON:
+```json
+{
+  "component": "root",
+  "args": {
+    "title": "Example"
+  },
+  "data": [
+    {
+      "component": "chart",
+      "args": {
+        "axis": {
+          "x": {
+            "label": "Year",
+            "type": "timeseries",
+            "tick": {
+              "format": "%Y"
+            }
+          },
+          "y": {
+            "label": "Amount consumed (tonnes)"
+          }
+        },
+        "type": "line",
+        "stacked": false
+      },
+      "data": {
+        "x": "x",
+        "xFormat": "%Y",
+        "columns": [
+          [
+            "x",
+            "1999",
+            "2001",
+            "2002",
+            "2004",
+            "2007",
+            "2008"
+          ],
+          [
+            "Apples",
+            30,
+            29,
+            25,
+            26,
+            27,
+            10
+          ],
+          [
+            "Oranges",
+            20,
+            21,
+            22,
+            20,
+            27,
+            19
+          ],
+          [
+            "Pears",
+            10,
+            9,
+            8,
+            8,
+            7,
+            8
+          ]
+        ]
+      }
+    }
+  ]
+}
+```
diff --git a/docs/examples/donut_chart.md b/docs/examples/donut_chart.md
@@ -25,3 +25,39 @@ dashboard "Example":
 The code above will render a donut chart that looks like this:
 
 ![](../screenshots/donut_chart.png)
+
+## JSON format
+The YAML above is equivalent to this JSON:
+```json
+{
+  "component": "root",
+  "args": {
+    "title": "Example"
+  },
+  "data": [
+    {
+      "component": "chart",
+      "args": {
+        "type": "donut",
+        "stacked": false
+      },
+      "data": {
+        "columns": [
+          [
+            "Apples",
+            3
+          ],
+          [
+            "Oranges",
+            2
+          ],
+          [
+            "Pears",
+            2
+          ]
+        ]
+      }
+    }
+  ]
+}
+```