Merge pull request #264 from influxdata/visualization-frontmatter

Added frontmatter to visualization types

content/v2.0/visualize-data/visualization-types/_index.md

@@ -0,0 +1,17 @@
+---
+title: Visualization types
+description: >
+  The InfluxDB UI provides multiple visualization types to visualize your data in
+  a format that makes to the most sense for your use case. Use to available customization
+  options to customize each visualization.
+menu:
+  v2_0:
+    parent: Visualize data
+weight: 101
+---
+
+The InfluxDB UI provides multiple visualization types to visualize your data in
+a format that makes to the most sense for your use case. Use to available customization
+options to customize each visualization.
+
+{{< children >}}

content/v2.0/visualize-data/visualization-types/gauge.md

@@ -1,3 +1,15 @@
+---
+title: Gauge visualization
+list_title: Gauge
+list_image: /img/2-0-visualizations-gauge-example.png
+description: >
+  The Gauge view displays the single value most recent value for a time series in a gauge view.
+weight: 206
+menu:
+  v2_0:
+    name: Gauge
+    parent: Visualization types
+---
 
 The **Gauge** view displays the single value most recent value for a time series in a gauge view.
 

content/v2.0/visualize-data/visualization-types/graph-single-stat.md

@@ -1,3 +1,16 @@
+---
+title: Graph + Single Stat visualization
+list_title: Graph + Single Stat
+list_image: /img/2-0-visualizations-line-graph-single-stat-example.png
+description: >
+  The Graph + Single Stat view displays the specified time series in a line graph
+  and overlays the single most recent value as a large numeric value.
+weight: 202
+menu:
+  v2_0:
+    name: Graph + Single Stat
+    parent: Visualization types
+---
 
 The **Graph + Single Stat** view displays the specified time series in a line graph
 and overlays the single most recent value as a large numeric value.
@@ -14,7 +27,7 @@ next to the visualization dropdown in the upper right.
 
 ###### Data
 - **X Column**: Select a column to display on the x-axis.
-- **Y Column**: Select a column to display on the y-axis. 
+- **Y Column**: Select a column to display on the y-axis.
 
 ###### Options
 - **Line Colors**: Select a color scheme to use for your graph.

content/v2.0/visualize-data/visualization-types/graph.md

@@ -1,3 +1,16 @@
+---
+title: Graph visualization
+list_title: Graph
+list_image: /img/2-0-visualizations-line-graph-example.png
+description: >
+  The Graph view lets you select from multiple graph types such as line graphs and bar graphs *(Coming)*.
+weight: 201
+menu:
+  v2_0:
+    name: Graph
+    parent: Visualization types
+---
+
 There are several types of graphs you can create.
 
 To select this view, select the **Graph** option from the visualization dropdown

content/v2.0/visualize-data/visualization-types/heatmap.md

@@ -1,4 +1,16 @@
-### Heatmap
+---
+title: Heatmap visualization
+list_title: Heatmap
+list_image: /img/2-0-visualizations-heatmap-example.png
+description: >
+  A Heatmap displays the distribution of data on an x and y axes where color
+  represents different concentrations of data points.
+weight: 203
+menu:
+  v2_0:
+    name: Heatmap
+    parent: Visualization types
+---
 
 A **Heatmap** displays the distribution of data on an x and y axes where color
 represents different concentrations of data points.

content/v2.0/visualize-data/visualization-types/histogram.md

@@ -1,3 +1,17 @@
+---
+title: Histogram visualization
+list_title: Histogram
+list_image: /img/2-0-visualizations-histogram-example.png
+description: >
+  A histogram is a way to view the distribution of data. Unlike column charts, histograms have no time axis.
+  The y-axis is dedicated to count, and the x-axis is divided into bins.
+weight: 204
+menu:
+  v2_0:
+    name: Histogram
+    parent: Visualization types
+---
+
 A histogram is a way to view the distribution of data. Unlike column charts, histograms have no time axis.
 The y-axis is dedicated to count, and the x-axis is divided into bins.
 

content/v2.0/visualize-data/visualization-types/scatter.md

@@ -1,4 +1,17 @@
-The **Scatter** option uses a scatter plot to display time series data.
+---
+title: Scatter visualization
+list_title: Scatter
+list_image: /img/2-0-visualizations-scatter-example.png
+description: >
+  The Scatter view uses a scatter plot to display time series data.
+weight: 208
+menu:
+  v2_0:
+    name: Scatter
+    parent: Visualization types
+---
+
+The **Scatter** view uses a scatter plot to display time series data.
 
 {{< img-hd src="/img/2-0-visualizations-scatter-example.png" alt="Scatter plot example" />}}
 
@@ -12,7 +25,7 @@ to the visualization dropdown in the upper right.
 - **Symbol column**: Define a column containing values that should be differentiated with symbols.
 - **Fill column**: Define a column containing values that should be differentiated with fill color.
 - **X Column**: Select a column to display on the x-axis.
-- **Y Column**: Select a column to display on the y-axis. 
+- **Y Column**: Select a column to display on the y-axis.
 
 ###### Options
 - **Color Scheme**: Select a color scheme to use for your scatter plot.

content/v2.0/visualize-data/visualization-types/single-stat.md

@@ -1,3 +1,16 @@
+---
+title: Single Stat visualization
+list_title: Single stat
+list_image: /img/2-0-visualizations-single-stat-example.png
+description: >
+  The Single Stat view displays the most recent value of the specified time series as a numerical value.
+weight: 205
+menu:
+  v2_0:
+    name: Single Stat
+    parent: Visualization types
+---
+
 The **Single Stat** view displays the most recent value of the specified time series as a numerical value.
 
 {{< img-hd src="/img/2-0-visualizations-single-stat-example.png" alt="Single stat example" />}}

content/v2.0/visualize-data/visualization-types/table.md

@@ -1,3 +1,16 @@
+---
+title: Table visualization
+list_title: Single stat
+list_image: /img/2-0-visualizations-table-example.png
+description: >
+  The Table option displays the results of queries in a tabular view, which is
+  sometimes easier to analyze than graph views of data.
+weight: 207
+menu:
+  v2_0:
+    name: Table
+    parent: Visualization types
+---
 
 The **Table** option displays the results of queries in a tabular view, which is
 sometimes easier to analyze than graph views of data.

layouts/shortcodes/children.html

@@ -21,6 +21,17 @@
 			{{ else }}{{- .Summary | markdownify -}}
 			{{ end -}}
 		</p>
+		{{ if .Params.list_image }}
+			{{ $img := .Params.list_image }}
+			{{ if (fileExists ( print "/static" $img )) }}
+				{{ with (imageConfig ( print "/static" $img )) }}
+					{{ $imageWidth := div .Width 3 }}
+					<img src='{{ $img }}' width='{{ $imageWidth }}' />
+				{{ end }}
+			{{ else }}
+				<img src='{{ $img }}'/>
+			{{ end }}
+		{{ end }}
 	{{ end }}
 
 {{ else if (eq $type "functions") }}