diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d4fabcee7..c15880cdb 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -509,6 +509,38 @@ The following options are available:
{{< ui-message color="green" text="The message displayed in the notification.">}}
```
+### Flexbox-formatted content blocks
+CSS Flexbox formatting lets you create columns in article content that adjust and
+flow based on the viewable width.
+In article content, this helps if you have narrow tables that could be displayed
+side-by-side, rather than stacked vertically.
+Use the `{{< flex >}}` shortcode to create the Flexbox wrapper.
+Use the `{{% flex-content %}}` shortcode to identify each column content block.
+
+```md
+{{< flex >}}
+{{% flex-content %}}
+Column 1
+{{% /flex-content %}}
+{{% flex-content %}}
+Column 2
+{{% /flex-content %}}
+{{< /flex >}}
+```
+
+`{{% flex-content %}}` has an optional width argument that determines the maximum
+width of the column.
+
+```md
+{{% flex-content "half" %}}
+```
+
+The following options are available:
+
+- half _(Default)_
+- third
+- quarter
+
### Reference content
The InfluxDB documentation is "task-based," meaning content primarily focuses on
what a user is **doing**, not what they are **using**.
diff --git a/assets/styles/layouts/_article.scss b/assets/styles/layouts/_article.scss
index 15997d6ce..19caeeacc 100644
--- a/assets/styles/layouts/_article.scss
+++ b/assets/styles/layouts/_article.scss
@@ -104,6 +104,7 @@
"article/cloud",
"article/enterprise",
"article/feedback",
+ "article/flex",
"article/lists",
"article/note",
"article/pagination-btns",
diff --git a/assets/styles/layouts/article/_flex.scss b/assets/styles/layouts/article/_flex.scss
new file mode 100644
index 000000000..93ba285d0
--- /dev/null
+++ b/assets/styles/layouts/article/_flex.scss
@@ -0,0 +1,24 @@
+/////////////////////////// Flex Content Blocks ///////////////////////////
+
+.flex-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.flex-container {
+ margin-right: 1rem;
+ &.half { width: calc(50% - 1rem); }
+ &.third { width: calc(33.33% - 1rem); }
+ &.quarter { width: calc(25% - 1rem); }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////// MEDIA QUERIES ////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+
+@include media(small) {
+ .flex-container {
+ &.half, &.third { width: calc(100% - 1rem); }
+ &.quarter { width: calc(50% - 1rem); }
+ }
+}
diff --git a/content/v2.0/query-data/common-queries/_index.md b/content/v2.0/query-data/common-queries/_index.md
index d5b152586..46505fc2d 100644
--- a/content/v2.0/query-data/common-queries/_index.md
+++ b/content/v2.0/query-data/common-queries/_index.md
@@ -11,86 +11,41 @@ v2.0/tags: [query]
---
-- SELECT-like commands
-- Median
-- Percentile
-- Cumulative Sum
-- Moving Average
-- Increase
-- Rate
-- Delta
-- Window
-- First/Last
-- Histogram
-- Gap filling
-- Last observation carried forward
-- Last point
+{{% note %}}
+#### Example data variable
+Many of the examples provided in the following guides use a `data` variable,
+which represents a basic query which filters data by measurement and field.
+`data` is defined as:
-## SELECT-like commands
-
-Query fields from InfluxDB
-
-## Median
-
-##### Median as an aggregate
```js
-from(bucket: "example-bucket")
+data = from(bucket: "example-bucket")
|> range(start: -1h)
|> filter(fn: (r) =>
- r._measurement == "example-measurement" and
- r._field == "example-key"
- )
- |> aggregateWindow(every: 5m, fn: median)
-```
-
-##### Median as a selector
-```js
-from(bucket: "example-bucket")
- |> range(start: -1h)
- |> filter(fn: (r) =>
- r._measurement == "example-measurement" and
- r._field == "example-key"
- )
- |> median(method: "exact_selector")
-```
-
-## Percentile
-
-##### Percentile as an aggregate
-```js
-from(bucket: "example-bucket")
- |> range(start: -1h)
- |> filter(fn: (r) =>
- r._measurement == "example-measurement" and
- r._field == "example-key"
- )
- |> aggregateWindow(
- every: 5m,
- fn: (tables=<-, column) => tables |> quantile(q: 0.99)
+ r._measurement == "example-measurement" and
+ r._field == "example-field"
)
```
+{{% /note %}}
-##### Percentile as a selector
-```js
-from(bucket: "example-bucket")
- |> range(start: -1h)
- |> filter(fn: (r) =>
- r._measurement == "example-measurement" and
- r._field == "example-key"
- )
- |> quantile(q: 0.99)
-```
+{{< children >}}
+
+---
+
+- [x] SELECT-like commands
+- [x] Median
+- [x] Percentile
+- [ ] Cumulative Sum
+- [ ] Moving Average
+- [ ] Increase
+- [ ] Rate
+- [ ] Delta
+- [ ] Window
+- [ ] First/Last
+- [ ] Histogram
+- [ ] Gap filling
+- [ ] Last observation carried forward
+- [ ] Last point
-## Cumulative Sum
-```js
-from(bucket: "example-bucket")
- |> range(start: -1h)
- |> filter(fn: (r) =>
- r._measurement == "example-measurement" and
- r._field == "example-key"
- )
- |> cumulativeSum()
-```
## Moving Average
```js
diff --git a/content/v2.0/query-data/common-queries/cumulativesum.md b/content/v2.0/query-data/common-queries/cumulativesum.md
new file mode 100644
index 000000000..7ed9db61c
--- /dev/null
+++ b/content/v2.0/query-data/common-queries/cumulativesum.md
@@ -0,0 +1,67 @@
+---
+title: Query cumulative sum
+seotitle: Query cumulative sum in Flux
+list_title: Cumulative sum
+description: >
+ Use the `cumulativeSum()` function to calculate a running total of values.
+weight: 204
+menu:
+ v2_0:
+ parent: Common queries
+ name: Cumulative sum
+v2.0/tags: [query, cumulative sum]
+---
+
+Use the [`cumulativeSum()` function](/v2.0/reference/flux/stdlib/built-in/transformations/cumulativesum/)
+to calculate a running total of values.
+`cumulativeSum` sums the values of subsequent records and returns each row updated with the summed total.
+
+{{< flex >}}
+{{% flex-content "half" %}}
+**Given the following input table:**
+
+| _time | _value |
+| ----- |:------:|
+| 0001 | 1 |
+| 0002 | 2 |
+| 0003 | 1 |
+| 0004 | 3 |
+{{% /flex-content %}}
+{{% flex-content "half" %}}
+**`cumulativeSum()` returns:**
+
+| _time | _value |
+| ----- |:------:|
+| 0001 | 1 |
+| 0002 | 3 |
+| 0003 | 4 |
+| 0004 | 7 |
+{{% /flex-content %}}
+{{< /flex >}}
+
+{{% note %}}
+The examples below use the [example data variable](/v2.0/query-data/common-queries/#example-data-variable).
+{{% /note %}}
+
+##### Calculate the running total of values
+```js
+data
+ |> cumulativeSum()
+```
+
+## Use cumulativeSum() with aggregateWindow()
+[`aggregateWindow()`](/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/aggregatewindow/)
+segments data into windows of time, aggregates data in each window into a single
+point, then removes the time-based segmentation.
+It is primarily used to [downsample data](/v2.0/process-data/common-tasks/downsample-data/).
+
+`aggregateWindow()` expects an aggregate function that returns a single row for each time window.
+To use `cumulativeSum()` with `aggregateWindow`, use `sum` in `aggregateWindow()`,
+then calculate the running total of the aggregate values with `cumulativeSum()`.
+
+
+```js
+data
+ |> aggregateWindow(every: 5m, fn: sum)
+ |> cumulativeSum()
+```
diff --git a/content/v2.0/query-data/common-queries/query-median.md b/content/v2.0/query-data/common-queries/median.md
similarity index 55%
rename from content/v2.0/query-data/common-queries/query-median.md
rename to content/v2.0/query-data/common-queries/median.md
index c9fc57880..97a41ae50 100644
--- a/content/v2.0/query-data/common-queries/query-median.md
+++ b/content/v2.0/query-data/common-queries/median.md
@@ -1,15 +1,18 @@
---
title: Query median values
seotitle: Query median values in Flux
+list_title: Median
description: >
- placeholder
-weight: 201
+ Use the `median()` function to return all values within the `0.5` quantile
+ (50th percentile) or the median value of input data.
+weight: 202
menu:
v2_0:
parent: Common queries
+ name: Median
v2.0/tags: [query, median]
related:
- - /v2.0/query-data/common-queries/query-percentile/
+ - /v2.0/query-data/common-queries/percentile-quantile/
---
Use the [`median()` function](/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/median/)
@@ -18,35 +21,88 @@ to return all values within the `0.5` quantile (50th percentile) or the median v
## Median calculation methods
Select from the following methods for calculating the median:
-##### estimate_tdigest
+- [estimate_tdigest](#estimate-tdigest)
+- [exact_mean](#exact-mean)
+- [exact_selector](#exact-selector)
+
+### estimate_tdigest
**(Default)** An aggregate method that uses a [t-digest data structure](https://github.com/tdunning/t-digest)
to compute an accurate quantile estimate on large data sources.
-Returns all values in the `0.5` quantile or 50th percentile.
+Output tables consist of a single row containing the calculated median.
-##### exact_mean
+{{< flex >}}
+{{% flex-content %}}
+**Given the following input table:**
+
+| _time | _value |
+| ----- |:------:|
+| 0001 | 1.0 |
+| 0002 | 1.0 |
+| 0003 | 2.0 |
+| 0004 | 3.0 |
+{{% /flex-content %}}
+{{% flex-content %}}
+**`estimate_tdigest` returns:**
+
+| _value |
+|:------:|
+| 1.5 |
+{{% /flex-content %}}
+{{< /flex >}}
+
+### exact_mean
An aggregate method that takes the average of the two points closest to the quantile value.
Output tables consist of a single row containing the calculated median.
-##### exact_selector
+{{< flex >}}
+{{% flex-content %}}
+**Given the following input table:**
+
+| _time | _value |
+| ----- |:------:|
+| 0001 | 1.0 |
+| 0002 | 1.0 |
+| 0003 | 2.0 |
+| 0004 | 3.0 |
+{{% /flex-content %}}
+{{% flex-content %}}
+**`exact_mean` returns:**
+
+| _value |
+|:------:|
+| 1.5 |
+{{% /flex-content %}}
+{{< /flex >}}
+
+### exact_selector
A selector method that returns the data point for which at least 50% of points are less than.
Output tables consist of a single row containing the calculated median.
-{{% note %}}
-#### Example data variable
-To focus on using the `median()` function, the examples below use a `data` variable
-which represents a base queried dataset.
+{{< flex >}}
+{{% flex-content %}}
+**Given the following input table:**
-```js
-data = from(bucket: "example-bucket")
- |> range(start: -1h)
- |> filter(fn: (r) =>
- r._measurement == "example-measurement" and
- r._field == "example-field"
- )
-```
+| _time | _value |
+| ----- |:------:|
+| 0001 | 1.0 |
+| 0002 | 1.0 |
+| 0003 | 2.0 |
+| 0004 | 3.0 |
+{{% /flex-content %}}
+{{% flex-content %}}
+**`exact_selector` returns:**
+
+| _time | _value |
+| ----- |:------:|
+| 0002 | 1.0 |
+{{% /flex-content %}}
+{{< /flex >}}
+
+{{% note %}}
+The examples below use the [example data variable](/v2.0/query-data/common-queries/#example-data-variable).
{{% /note %}}
-## Query all values in the 50th percentile
+## Query the value that represents the median
Use the default method, `"estimate_tdigest"`, to return all rows in a table that
contain values in the 50th percentile of data in the table.
@@ -64,7 +120,7 @@ data
|> median(method: "exact_mean")
```
-## Query the median value
+## Query the point with the median value
Use the `exact_selector` method to return a single row per input table containing the
value that 50% of values in the table are less than.
@@ -73,16 +129,13 @@ data
|> median(method: "exact_selector")
```
-## Use median with aggregateWindow()
+## Use median() with aggregateWindow()
[`aggregateWindow()`](/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/aggregatewindow/)
segments data into windows of time, aggregates data in each window into a single
point, then removes the time-based segmentation.
It is primarily used to [downsample data](/v2.0/process-data/common-tasks/downsample-data/).
-`aggregateWindow()` expects a single point from each time window.
-Use either the `exact_mean` or `exact_mode` median calculation method.
-
-To specify parameters of the aggregate function in `aggregateWindow()`, use the
+To specify the [median calculation method](#median-calculation-methods) in `aggregateWindow()`, use the
[full function syntax](/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/aggregatewindow/#specify-parameters-of-the-aggregate-function):
```js
diff --git a/content/v2.0/query-data/common-queries/percentile-quantile.md b/content/v2.0/query-data/common-queries/percentile-quantile.md
new file mode 100644
index 000000000..a6f5ac51b
--- /dev/null
+++ b/content/v2.0/query-data/common-queries/percentile-quantile.md
@@ -0,0 +1,161 @@
+---
+title: Query percentile and quantile values
+seotitle: Query percentile and quantile values in Flux
+list_title: Percentile & quantile
+description: >
+ Use the `quantile()` function to return all values within the `q` quantile or
+ percentile of input data.
+weight: 203
+menu:
+ v2_0:
+ parent: Common queries
+ name: Percentile & quantile
+v2.0/tags: [query, percentile, quantile]
+related:
+ - /v2.0/query-data/common-queries/query-median/
+---
+
+Use the [`quantile()` function](/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/quantile/)
+to return all values within the `q` quantile or percentile of input data.
+
+## Percentile versus quantile
+Percentiles and quantiles are very similar, differing only in the number used to calculate return values.
+A percentile is calculated using numbers between `0` and `100`.
+A quantile is calculated using numbers between `0.0` and `1.0`.
+For example, the **`0.5` quantile** is the same as the **50th percentile**.
+
+## Quantile calculation methods
+Select from the following methods for calculating the quantile:
+
+- [estimate_tdigest](#estimate-tdigest)
+- [exact_mean](#exact-mean)
+- [exact_selector](#exact-selector)
+
+### estimate_tdigest
+**(Default)** An aggregate method that uses a [t-digest data structure](https://github.com/tdunning/t-digest)
+to compute an accurate quantile estimate on large data sources.
+Output tables consist of a single row containing the calculated quantile.
+
+If calculating the `0.5` quantile or 50th percentile:
+
+{{< flex >}}
+{{% flex-content %}}
+**Given the following input table:**
+
+| _time | _value |
+| ----- |:------:|
+| 0001 | 1.0 |
+| 0002 | 1.0 |
+| 0003 | 2.0 |
+| 0004 | 3.0 |
+{{% /flex-content %}}
+{{% flex-content %}}
+**`estimate_tdigest` returns:**
+
+| _value |
+|:------:|
+| 1.5 |
+{{% /flex-content %}}
+{{< /flex >}}
+
+### exact_mean
+An aggregate method that takes the average of the two points closest to the quantile value.
+Output tables consist of a single row containing the calculated quantile.
+
+If calculating the `0.5` quantile or 50th percentile:
+
+{{< flex >}}
+{{% flex-content %}}
+**Given the following input table:**
+
+| _time | _value |
+| ----- |:------:|
+| 0001 | 1.0 |
+| 0002 | 1.0 |
+| 0003 | 2.0 |
+| 0004 | 3.0 |
+{{% /flex-content %}}
+{{% flex-content %}}
+**`exact_mean` returns:**
+
+| _value |
+|:------:|
+| 1.5 |
+{{% /flex-content %}}
+{{< /flex >}}
+
+### exact_selector
+A selector method that returns the data point for which at least `q` points are less than.
+Output tables consist of a single row containing the calculated quantile.
+
+If calculating the `0.5` quantile or 50th percentile:
+
+{{< flex >}}
+{{% flex-content %}}
+**Given the following input table:**
+
+| _time | _value |
+| ----- |:------:|
+| 0001 | 1.0 |
+| 0002 | 1.0 |
+| 0003 | 2.0 |
+| 0004 | 3.0 |
+{{% /flex-content %}}
+{{% flex-content %}}
+**`exact_selector` returns:**
+
+| _time | _value |
+| ----- |:------:|
+| 0002 | 1.0 |
+{{% /flex-content %}}
+{{< /flex >}}
+
+{{% note %}}
+The examples below use the [example data variable](/v2.0/query-data/common-queries/#example-data-variable).
+{{% /note %}}
+
+## Query the value representing the 99th percentile
+Use the default method, `"estimate_tdigest"`, to return all rows in a table that
+contain values in the 50th percentile of data in the table.
+
+```js
+data
+ |> quantile(q: 0.99)
+```
+
+## Query the average of values closest to the quantile
+Use the `exact_mean` method to return a single row per input table containing the
+average of the two values closest to the mathematical quantile of data in the table.
+
+```js
+data
+ |> quantile(q: 0.99, method: "exact_mean")
+```
+
+## Query the point with the quantile value
+Use the `exact_selector` method to return a single row per input table containing the
+value that `q * 100`% of values in the table are less than.
+
+```js
+data
+ |> quantile(q: 0.99, method: "exact_selector")
+```
+
+## Use quantile() with aggregateWindow()
+[`aggregateWindow()`](/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/aggregatewindow/)
+segments data into windows of time, aggregates data in each window into a single
+point, then removes the time-based segmentation.
+It is primarily used to [downsample data](/v2.0/process-data/common-tasks/downsample-data/).
+
+To specify the [quantile calculation method](#quantile-calculation-methods) in
+`aggregateWindow()`, use the [full function syntax](/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/aggregatewindow/#specify-parameters-of-the-aggregate-function):
+
+```js
+data
+ |> aggregateWindow(
+ every: 5m,
+ fn: (tables=<-, column) =>
+ tables
+ |> quantile(q: 0.99, method: "exact_selector")
+ )
+```
diff --git a/content/v2.0/query-data/common-queries/query-fields.md b/content/v2.0/query-data/common-queries/query-fields.md
index 26646ce40..04e0bad02 100644
--- a/content/v2.0/query-data/common-queries/query-fields.md
+++ b/content/v2.0/query-data/common-queries/query-fields.md
@@ -4,7 +4,7 @@ seotitle: Query fields and tags in InfluxDB using Flux
description: >
Use the `filter()` function to query data based on fields, tags, or any other column value.
If familiar with InfluxQL or other SQL-like query languages, `filter()` performs
- operations similar to the `SELECT` statement and `WHERE` clause.
+ operations similar to the `SELECT` statement and the `WHERE` clause.
weight: 201
menu:
v2_0:
@@ -15,7 +15,7 @@ v2.0/tags: [query, select, where]
Use the [`filter()` function](/v2.0/reference/flux/stdlib/built-in/transformations/filter/)
to query data based on fields, tags, or any other column value.
If familiar with InfluxQL or other SQL-like query languages, `filter()` performs
-operations similar to the `SELECT` statement and `WHERE` clause.
+operations similar to the `SELECT` statement and the `WHERE` clause.
## The filter() function
`filter()` has an `fn` parameter that expects a [predicate function](/v2.0/reference/glossary/#predicate-function),
diff --git a/content/v2.0/query-data/common-queries/query-percentile.md b/content/v2.0/query-data/common-queries/query-percentile.md
deleted file mode 100644
index fd0c3e1d7..000000000
--- a/content/v2.0/query-data/common-queries/query-percentile.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Query percentile values
-seotitle: Query percentile values in Flux
-description: >
- placeholder
-weight: 201
-menu:
- v2_0:
- parent: Common queries
-v2.0/tags: [query, percentile, quantile]
-related:
- - /v2.0/query-data/common-queries/query-median/
----
-
-Use the [`quantile()` function](/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/quantile/)
-to return all values within the `q` quantile or percentile of input data.
-
-## Percentile versus quantile
-Percentiles and quantiles are very similar, differing only in the number used to calculate return values.
-A percentile is calculated using numbers between `0` and `100`.
-A quantile is calculated using numbers between `0.0` and `1.0`.
-For example, the **`0.5` quantile** is the same as the **50th percentile**.
-
-## Quantile calculation methods
-Select from the following methods for calculating the quantile:
-
-##### estimate_tdigest
-(Default) An aggregate method that uses a [t-digest data structure](https://github.com/tdunning/t-digest)
-to compute an accurate quantile estimate on large data sources.
-Returns all values in the `q` quantile.
-
-##### exact_mean
-An aggregate method that takes the average of the two points closest to the quantile value.
-Output tables consist of a single row containing the calculated quantile.
-
-##### exact_selector
-A selector method that returns the data point for which at least `q` points are less than.
-Output tables consist of a single row containing the calculated quantile.
-
-{{% note %}}
-#### Example data variable
-To focus on using the `quantile()` function, the examples below use a `data` variable
-which represents a base queried dataset.
-
-```js
-data = from(bucket: "example-bucket")
- |> range(start: -1h)
- |> filter(fn: (r) =>
- r._measurement == "example-measurement" and
- r._field == "example-field"
- )
-```
-{{% /note %}}
-
-## Query all values in the 50th percentile
-Use the default method, `"estimate_tdigest"`, to return all rows in a table that
-contain values in the 50th percentile of data in the table.
-
-```js
-data
- |> quantile(q: 0.99)
-```
-
-## Query the average of values closest to the quantile
-Use the `exact_mean` method to return a single row per input table containing the
-average of the two values closest to the mathematical quantile of data in the table.
-
-```js
-data
- |> quantile(q: 0.99, method: "exact_mean")
-```
-
-## Query the quantile value
-Use the `exact_selector` method to return a single row per input table containing the
-value that 50% of values in the table are less than.
-
-```js
-data
- |> quantile(q: 0.99, method: "exact_selector")
-```
-
-## Use quantile with aggregateWindow()
-[`aggregateWindow()`](/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/aggregatewindow/)
-segments data into windows of time, aggregates data in each window into a single
-point, then removes the time-based segmentation.
-It is primarily used to [downsample data](/v2.0/process-data/common-tasks/downsample-data/).
-
-`aggregateWindow()` expects a single point from each time window.
-Use either the `exact_mean` or `exact_mode` quantile calculation method.
-
-To specify parameters of the aggregate function in `aggregateWindow()`, use the
-[full function syntax](/v2.0/reference/flux/stdlib/built-in/transformations/aggregates/aggregatewindow/#specify-parameters-of-the-aggregate-function):
-
-```js
-data
- |> aggregateWindow(
- every: 5m,
- fn: (tables=<-, column) =>
- tables
- |> quantile(q: 0.99, method: "exact_selector")
- )
-```
diff --git a/layouts/shortcodes/flex-content.html b/layouts/shortcodes/flex-content.html
new file mode 100644
index 000000000..8458f6fa4
--- /dev/null
+++ b/layouts/shortcodes/flex-content.html
@@ -0,0 +1,5 @@
+{{ $width := .Get 0 | default "half" }}
+{{ $_hugo_config := `{ "version": 1 }` }}
+
+ {{ .Inner }}
+
diff --git a/layouts/shortcodes/flex.html b/layouts/shortcodes/flex.html
new file mode 100644
index 000000000..5943fba4b
--- /dev/null
+++ b/layouts/shortcodes/flex.html
@@ -0,0 +1,4 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+
+ {{ .Inner }}
+