(DEPLOY) Add Bar Chart Documentation (WIP)

Author: GeorgeBerdovskiy

app/markdown/types-of-charts/bar-chart/index.md

@@ -1,2 +1,43 @@
 # Bar Chart
-Words go here.
+## Introduction
+A bar chart represents **categorical** data with rectangular bars. These bars may be horizontal or vertical, but PureChart currently supports only horizontal bar charts.
+
+The length of each bar is proportional to the value it's supposed to represent. The vertical axis of the bar chart lists the discrete categories being represented while the horizontal axis represents the values of said categories in relation to one another.
+
+## Usage
+In your view, use the bar chart helper method as so -
+
+```erb
+<%= bar_chart @data, @configuration, "custom-style" %>
+```
+
+The third optional argument is the name of the theme you wish to use. The data is organized as a hash. Here's an example of some data and an optional configuration -
+
+```rb
+@data = [
+    {
+        name: "PureChart",
+        color: "blue",
+        value: 0
+    },
+    {
+        name: "Highcharts",
+        color: "purple",
+        value: 1000
+    },
+    {
+        name: "Chartkick",
+        color: "orange",
+        value: 2570
+    },
+]
+
+...
+
+@configuration = {
+    axes: {
+        horizontal: "Lines of JavaScript",
+    },
+    corner_radius: "100px"
+}
+```

app/markdown/types-of-charts/index.md

@@ -1,2 +1,10 @@
 # Types of Charts
-This is about types of charts.
+In the future, PureChart will support a wide range of charts, including...
+
+ - Bar charts
+ - Column charts
+ - Pie charts
+ - Line charts
+ - Scatter plots
+ - Box plots
+ - And more!

app/markdown/types-of-charts/pie-chart/index.md

@@ -32,9 +32,15 @@
     <div class='mobile-sidebar'>
         <div style="width: 100%">
             <div class='links padding-top'>
-                <%= button_tag "Getting Started", id: "getting-started", class: "nav-button getting-started", data: { action: "click->articles--page#navigate" } %>
-                <%= button_tag "Types of Charts", id: "types-of-charts", class: "nav-button types-of-charts", data: { action: "click->articles--page#navigate" } %>
-                <%= button_tag "Chart Styling", id: "chart-styling", class: "nav-button chart-styling", data: { action: "click->articles--page#navigate" } %>
+                <% @nav_tree.each do |key, value| %>
+                    <%= button_tag key, id: value["Index"], class: "nav-button #{value['Index']}", data: { action: "click->articles--page#navigate" } %>
+
+                    <% value.each do |skey, svalue| %>
+                        <% if skey != "Index" %>
+                            <%= button_tag skey, id: svalue["Index"], class: "nav-button #{svalue['Index']} nested-page-button", data: { action: "click->articles--page#navigate" } %>
+                        <% end %>
+                    <% end %>
+                <% end %>
             </div>
         </div>