From 4af97e089832243ba8b49480d9ca23ddbbdf1c64 Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Thu, 13 Jun 2019 11:38:26 -0600 Subject: [PATCH 1/2] added frontmatter to visualization types --- .../visualization-types/_index.md | 17 +++++++++++++++++ .../visualize-data/visualization-types/gauge.md | 11 +++++++++++ .../visualization-types/graph-single-stat.md | 14 +++++++++++++- .../visualize-data/visualization-types/graph.md | 12 ++++++++++++ .../visualization-types/heatmap.md | 13 ++++++++++++- .../visualization-types/histogram.md | 13 +++++++++++++ .../visualization-types/scatter.md | 16 ++++++++++++++-- .../visualization-types/single-stat.md | 12 ++++++++++++ .../visualize-data/visualization-types/table.md | 12 ++++++++++++ 9 files changed, 116 insertions(+), 4 deletions(-) create mode 100644 content/v2.0/visualize-data/visualization-types/_index.md diff --git a/content/v2.0/visualize-data/visualization-types/_index.md b/content/v2.0/visualize-data/visualization-types/_index.md new file mode 100644 index 000000000..b6b713070 --- /dev/null +++ b/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 >}} diff --git a/content/v2.0/visualize-data/visualization-types/gauge.md b/content/v2.0/visualize-data/visualization-types/gauge.md index 30e3e7d52..604465c72 100644 --- a/content/v2.0/visualize-data/visualization-types/gauge.md +++ b/content/v2.0/visualize-data/visualization-types/gauge.md @@ -1,3 +1,14 @@ +--- +title: Gauge visualization +list_title: Gauge +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. diff --git a/content/v2.0/visualize-data/visualization-types/graph-single-stat.md b/content/v2.0/visualize-data/visualization-types/graph-single-stat.md index f779b5012..7f8322f6f 100644 --- a/content/v2.0/visualize-data/visualization-types/graph-single-stat.md +++ b/content/v2.0/visualize-data/visualization-types/graph-single-stat.md @@ -1,3 +1,15 @@ +--- +title: Graph + Single Stat visualization +list_title: Graph + Single Stat +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 +26,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. diff --git a/content/v2.0/visualize-data/visualization-types/graph.md b/content/v2.0/visualize-data/visualization-types/graph.md index 37077e971..8d8580f08 100644 --- a/content/v2.0/visualize-data/visualization-types/graph.md +++ b/content/v2.0/visualize-data/visualization-types/graph.md @@ -1,3 +1,15 @@ +--- +title: Graph visualization +list_title: Graph +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 diff --git a/content/v2.0/visualize-data/visualization-types/heatmap.md b/content/v2.0/visualize-data/visualization-types/heatmap.md index 6d318f896..8fea8a1f3 100644 --- a/content/v2.0/visualize-data/visualization-types/heatmap.md +++ b/content/v2.0/visualize-data/visualization-types/heatmap.md @@ -1,4 +1,15 @@ -### Heatmap +--- +title: Heatmap visualization +list_title: Heatmap +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. diff --git a/content/v2.0/visualize-data/visualization-types/histogram.md b/content/v2.0/visualize-data/visualization-types/histogram.md index 8e0487128..906e92d10 100644 --- a/content/v2.0/visualize-data/visualization-types/histogram.md +++ b/content/v2.0/visualize-data/visualization-types/histogram.md @@ -1,3 +1,16 @@ +--- +title: Histogram visualization +list_title: Histogram +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. diff --git a/content/v2.0/visualize-data/visualization-types/scatter.md b/content/v2.0/visualize-data/visualization-types/scatter.md index 4d5052e67..d81a841c5 100644 --- a/content/v2.0/visualize-data/visualization-types/scatter.md +++ b/content/v2.0/visualize-data/visualization-types/scatter.md @@ -1,4 +1,16 @@ -The **Scatter** option uses a scatter plot to display time series data. +--- +title: Scatter visualization +list_title: Scatter +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 +24,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. diff --git a/content/v2.0/visualize-data/visualization-types/single-stat.md b/content/v2.0/visualize-data/visualization-types/single-stat.md index c98dc1415..0c72d2b2e 100644 --- a/content/v2.0/visualize-data/visualization-types/single-stat.md +++ b/content/v2.0/visualize-data/visualization-types/single-stat.md @@ -1,3 +1,15 @@ +--- +title: Single Stat visualization +list_title: Single stat +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" />}} diff --git a/content/v2.0/visualize-data/visualization-types/table.md b/content/v2.0/visualize-data/visualization-types/table.md index 865a96ed5..b47f1da5b 100644 --- a/content/v2.0/visualize-data/visualization-types/table.md +++ b/content/v2.0/visualize-data/visualization-types/table.md @@ -1,3 +1,15 @@ +--- +title: Table visualization +list_title: Single stat +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. From ff90875a1f7cb2234f4c21e2a4da3be8f3a9630d Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Thu, 13 Jun 2019 11:51:46 -0600 Subject: [PATCH 2/2] updated children shortcode to show a list_image --- .../v2.0/visualize-data/visualization-types/gauge.md | 1 + .../visualization-types/graph-single-stat.md | 1 + .../v2.0/visualize-data/visualization-types/graph.md | 1 + .../visualize-data/visualization-types/heatmap.md | 1 + .../visualize-data/visualization-types/histogram.md | 1 + .../visualize-data/visualization-types/scatter.md | 1 + .../visualize-data/visualization-types/single-stat.md | 1 + .../v2.0/visualize-data/visualization-types/table.md | 1 + layouts/shortcodes/children.html | 11 +++++++++++ 9 files changed, 19 insertions(+) diff --git a/content/v2.0/visualize-data/visualization-types/gauge.md b/content/v2.0/visualize-data/visualization-types/gauge.md index 604465c72..c09b7a67f 100644 --- a/content/v2.0/visualize-data/visualization-types/gauge.md +++ b/content/v2.0/visualize-data/visualization-types/gauge.md @@ -1,6 +1,7 @@ --- 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 diff --git a/content/v2.0/visualize-data/visualization-types/graph-single-stat.md b/content/v2.0/visualize-data/visualization-types/graph-single-stat.md index 7f8322f6f..5e9edc1d1 100644 --- a/content/v2.0/visualize-data/visualization-types/graph-single-stat.md +++ b/content/v2.0/visualize-data/visualization-types/graph-single-stat.md @@ -1,6 +1,7 @@ --- 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. diff --git a/content/v2.0/visualize-data/visualization-types/graph.md b/content/v2.0/visualize-data/visualization-types/graph.md index 8d8580f08..df07b7018 100644 --- a/content/v2.0/visualize-data/visualization-types/graph.md +++ b/content/v2.0/visualize-data/visualization-types/graph.md @@ -1,6 +1,7 @@ --- 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 diff --git a/content/v2.0/visualize-data/visualization-types/heatmap.md b/content/v2.0/visualize-data/visualization-types/heatmap.md index 8fea8a1f3..ba7bbbe20 100644 --- a/content/v2.0/visualize-data/visualization-types/heatmap.md +++ b/content/v2.0/visualize-data/visualization-types/heatmap.md @@ -1,6 +1,7 @@ --- 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. diff --git a/content/v2.0/visualize-data/visualization-types/histogram.md b/content/v2.0/visualize-data/visualization-types/histogram.md index 906e92d10..c5abef006 100644 --- a/content/v2.0/visualize-data/visualization-types/histogram.md +++ b/content/v2.0/visualize-data/visualization-types/histogram.md @@ -1,6 +1,7 @@ --- 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. diff --git a/content/v2.0/visualize-data/visualization-types/scatter.md b/content/v2.0/visualize-data/visualization-types/scatter.md index d81a841c5..886b99f7f 100644 --- a/content/v2.0/visualize-data/visualization-types/scatter.md +++ b/content/v2.0/visualize-data/visualization-types/scatter.md @@ -1,6 +1,7 @@ --- 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 diff --git a/content/v2.0/visualize-data/visualization-types/single-stat.md b/content/v2.0/visualize-data/visualization-types/single-stat.md index 0c72d2b2e..f5dafc906 100644 --- a/content/v2.0/visualize-data/visualization-types/single-stat.md +++ b/content/v2.0/visualize-data/visualization-types/single-stat.md @@ -1,6 +1,7 @@ --- 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 diff --git a/content/v2.0/visualize-data/visualization-types/table.md b/content/v2.0/visualize-data/visualization-types/table.md index b47f1da5b..3449c2bb1 100644 --- a/content/v2.0/visualize-data/visualization-types/table.md +++ b/content/v2.0/visualize-data/visualization-types/table.md @@ -1,6 +1,7 @@ --- 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. diff --git a/layouts/shortcodes/children.html b/layouts/shortcodes/children.html index f2d948c6f..0ae52a9d0 100644 --- a/layouts/shortcodes/children.html +++ b/layouts/shortcodes/children.html @@ -21,6 +21,17 @@ {{ else }}{{- .Summary | markdownify -}} {{ end -}}

+ {{ if .Params.list_image }} + {{ $img := .Params.list_image }} + {{ if (fileExists ( print "/static" $img )) }} + {{ with (imageConfig ( print "/static" $img )) }} + {{ $imageWidth := div .Width 3 }} + + {{ end }} + {{ else }} + + {{ end }} + {{ end }} {{ end }} {{ else if (eq $type "functions") }}