Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

illustrated the difference between union and join, resolves #557

pull/712/head
Scott Anderson 2020-01-14 06:57:18 -07:00
parent 8af043069e
commit af669d44e9
8 changed files with 242 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/styles/layouts/_article.scss
View File

@ -109,6 +109,7 @@
"article/pagination-btns",
"article/related",
"article/scrollbars",
"article/svgs",
"article/tabbed-content",
"article/tables",
"article/tags",

21
assets/styles/layouts/article/_svgs.scss Normal file
View File

@ -0,0 +1,21 @@
svg {
&#join-vs-union {
max-width: 525px;
width: 100%;
margin-bottom: 2rem;
.st0{fill: $svg-table-code-bg;}
.st1{fill: $svg-table-header;}
.st2{fill: $svg-table-row-alt1;}
.st3{fill:none;stroke: $svg-table-stroke;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:none;stroke: $svg-table-stroke;stroke-width:4;stroke-miterlimit:10;}
.st5{fill: $svg-table-row-alt2;}
.st6{fill: $svg-table-code;}
.st7{font-family:'Roboto Mono';}
.st8{font-size:14.2px;}
.st9{fill: $svg-table-code-operator;}
.st10{fill: $svg-table-code-string;}
}
}

10
assets/styles/themes/_theme-dark.scss
View File

@ -182,3 +182,13 @@ $tooltip-color: $ch-chartreuse;
$tooltip-color-alt: $ch-canary;
$tooltip-bg: $g20-white;
$tooltip-text: $cp-minsk;
// SVG colors
$svg-table-header: $cp-minsk;
$svg-table-stroke: $np-deepnight;
$svg-table-row-alt1: $m-magenta;
$svg-table-row-alt2: $gr-canopy;
$svg-table-code: $cp-munchkin;
$svg-table-code-bg: $np-deepnight;
$svg-table-code-operator: $b-pool;
$svg-table-code-string: $gr-viridian;

10
assets/styles/themes/_theme-light.scss
View File

@ -183,3 +183,13 @@ $tooltip-color: $m-magenta !default;
$tooltip-color-alt: $wp-trance !default;
$tooltip-bg: $m-lavander !default;
$tooltip-text: $g20-white !default;
// SVG colors
$svg-table-header: $g15-platinum !default;
$svg-table-stroke: $g7-graphite !default;
$svg-table-row-alt1: $b-laser !default;
$svg-table-row-alt2: $cp-comet !default;
$svg-table-code: $cp-marguerite !default;
$svg-table-code-bg: $cp-titan !default;
$svg-table-code-operator: $b-dodger !default;
$svg-table-code-string: #12A290 !default;

13
content/v2.0/reference/flux/stdlib/built-in/transformations/join.md
View File

@ -9,6 +9,8 @@ menu:
name: join
parent: built-in-transformations
weight: 401
related:
- /v2.0/reference/flux/stdlib/built-in/transformations/union/
---
The `join()` function merges two or more input streams whose values are equal on
@ -136,3 +138,14 @@ join(
on: ["_time", "host"]
)
```
## join() versus union()
`join()` outputs new rows comprised of data from each of the joined streams of tables.
`union()` does not modify the data in each row, but unifies separate streams of tables
into a single stream of tables and groups rows of data based on existing
[group keys](/v2.0/reference/glossary/#group-key).
Given two streams of tables, `t1` and `t2`, the results of `join()` and `union()`
are illustrated below:
{{< svg "/static/svgs/join-vs-union.svg" >}}

14
content/v2.0/reference/flux/stdlib/built-in/transformations/union.md
View File

@ -9,6 +9,8 @@ menu:
name: union
parent: built-in-transformations
weight: 401
related:
- /v2.0/reference/flux/stdlib/built-in/transformations/join/
---
The `union()` function concatenates two or more input streams into a single output stream.
@ -45,3 +47,15 @@ bucket2 = from(bucket: "example-bucket-2")
union(tables: [bucket1, bucket2])
```
## union() versus join()
`union()` unifies separate streams of tables into a single stream of tables and
groups rows of data based on existing [group keys](/v2.0/reference/glossary/#group-key).
`union()` does not modify individual rows of data.
`join()` outputs new rows based on one or more columns present in both streams of tables.
Each row contains data from each of the joined streams.
Given two streams of tables, `t1` and `t2`, the results of `join()` and `union()`
are illustrated below:
{{< svg "/static/svgs/join-vs-union.svg" >}}

2
layouts/shortcodes/svg.html Normal file
View File

@ -0,0 +1,2 @@
{{ $svg := .Get 0 }}
{{ $svg | readFile | safeHTML }}

171
static/svgs/join-vs-union.svg Normal file
View File

@ -0,0 +1,171 @@
<svg version="1.1" id="join-vs-union" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 432.12 665.86" style="enable-background:new 0 0 432.12 665.86;" xml:space="preserve">
<path class="st0" d="M119.5,38.11H93.9c-1.66,0-3-1.34-3-3V9.51c0-1.66,1.34-3,3-3h25.6c1.66,0,3,1.34,3,3v25.6
C122.51,36.77,121.16,38.11,119.5,38.11z"/>
<path class="st0" d="M338.13,38.11h-25.6c-1.66,0-3-1.34-3-3V9.51c0-1.66,1.34-3,3-3h25.6c1.66,0,3,1.34,3,3v25.6
C341.14,36.77,339.79,38.11,338.13,38.11z"/>
<path class="st0" d="M413.83,234.49H18.29c-1.66,0-3-1.34-3-3v-25.6c0-1.66,1.34-3,3-3h395.54c1.66,0,3,1.34,3,3v25.6
C416.83,233.15,415.49,234.49,413.83,234.49z"/>
<path class="st0" d="M330,430.74H102.12c-1.66,0-3-1.34-3-3v-25.6c0-1.66,1.34-3,3-3H330c1.66,0,3,1.34,3,3v25.6
C333,429.4,331.66,430.74,330,430.74z"/>
<g>
<g>
<path class="st1" d="M204.06,69.99H9.34V57.71c0-6.24,5.06-11.31,11.31-11.31h172.11c6.24,0,11.31,5.06,11.31,11.31V69.99
L204.06,69.99z"/>
</g>
<path class="st2" d="M193.01,162.88H20.39c-6.1,0-11.05-4.95-11.05-11.05V69.99h194.72v81.84
C204.06,157.93,199.12,162.88,193.01,162.88z"/>
<g>
<g>
<g>
<line class="st3" x1="9.34" y1="69.99" x2="204.06" y2="69.99"/>
</g>
<g>
<line class="st3" x1="9.34" y1="93.76" x2="204.06" y2="93.76"/>
</g>
<g>
<line class="st3" x1="9.34" y1="117.53" x2="204.06" y2="117.53"/>
</g>
<g>
<line class="st3" x1="9.34" y1="141.3" x2="204.06" y2="141.3"/>
</g>
</g>
<line class="st3" x1="58.02" y1="46.41" x2="58.02" y2="162.88"/>
<line class="st3" x1="106.7" y1="46.41" x2="106.7" y2="162.88"/>
<line class="st3" x1="155.38" y1="46.41" x2="155.38" y2="162.88"/>
</g>
<path class="st4" d="M192.89,162.88H20.51c-6.17,0-11.17-5-11.17-11.17V57.58c0-6.17,5-11.17,11.17-11.17h172.38
c6.17,0,11.17,5,11.17,11.17v94.13C204.06,157.88,199.06,162.88,192.89,162.88z"/>
</g>
<g>
<g>
<path class="st5" d="M302.37,650.15H129.75c-6.1,0-11.05-4.95-11.05-11.05v-10.53h194.72v10.53
C313.42,645.2,308.47,650.15,302.37,650.15z"/>
<rect x="118.7" y="604.8" class="st2" width="194.72" height="23.77"/>
<rect x="118.7" y="581.03" class="st5" width="194.72" height="23.77"/>
<rect x="118.7" y="557.26" class="st2" width="194.72" height="23.77"/>
</g>
<g>
<path class="st1" d="M313.42,462.18H118.7v-12.28c0-6.24,5.06-11.31,11.31-11.31h172.11c6.24,0,11.31,5.06,11.31,11.31V462.18
L313.42,462.18z"/>
</g>
<rect x="118.7" y="533.49" class="st2" width="194.72" height="23.77"/>
<rect x="118.7" y="485.95" class="st5" width="194.72" height="47.54"/>
<rect x="118.7" y="462.18" class="st2" width="194.72" height="23.77"/>
<g>
<g>
<g>
<line class="st3" x1="118.7" y1="462.18" x2="313.42" y2="462.18"/>
</g>
<g>
<line class="st3" x1="118.7" y1="485.95" x2="313.42" y2="485.95"/>
</g>
<g>
<line class="st3" x1="118.7" y1="509.72" x2="313.42" y2="509.72"/>
</g>
<g>
<line class="st3" x1="118.7" y1="533.49" x2="313.42" y2="533.49"/>
</g>
<g>
<line class="st3" x1="118.7" y1="557.26" x2="313.42" y2="557.26"/>
</g>
<g>
<line class="st3" x1="118.7" y1="581.03" x2="313.42" y2="581.03"/>
</g>
<g>
<line class="st3" x1="118.7" y1="604.8" x2="313.42" y2="604.8"/>
</g>
<g>
<line class="st3" x1="118.7" y1="628.57" x2="313.42" y2="628.57"/>
</g>
<g>
<line class="st3" x1="118.7" y1="533.49" x2="313.42" y2="533.49"/>
</g>
</g>
<line class="st3" x1="167.38" y1="438.6" x2="167.38" y2="652.34"/>
<line class="st3" x1="216.06" y1="438.6" x2="216.06" y2="652.34"/>
<line class="st3" x1="264.74" y1="438.6" x2="264.74" y2="652.34"/>
</g>
<path class="st4" d="M302.25,652.34H129.87c-6.17,0-11.17-5-11.17-11.17v-191.4c0-6.17,5-11.17,11.17-11.17h172.38
c6.17,0,11.17,5,11.17,11.17v191.4C313.42,647.34,308.42,652.34,302.25,652.34z"/>
</g>
<g>
<g>
<polygon class="st2" points="45.68,289.92 45.68,266.15 94.36,266.15 "/>
<polygon class="st5" points="94.36,266.15 94.36,289.92 45.68,289.92 "/>
</g>
<g>
<polygon class="st2" points="45.68,313.69 45.68,289.92 94.36,289.92 "/>
<polygon class="st5" points="94.36,289.92 94.36,313.69 45.68,313.69 "/>
</g>
<g>
<polygon class="st2" points="45.68,337.46 45.68,313.69 94.36,313.69 "/>
<polygon class="st5" points="94.36,313.69 94.36,337.46 45.68,337.46 "/>
</g>
<g>
<path class="st2" d="M45.68,347.98c0,4.48,2.67,8.34,6.51,10.08l42.17-20.59H45.68V347.98z"/>
<path class="st5" d="M56.74,359.04h37.61v-21.58l-42.17,20.59C53.58,358.68,55.12,359.04,56.74,359.04z"/>
</g>
<g>
<path class="st1" d="M386.44,266.15H45.68v-12.28c0-6.24,5.06-11.31,11.31-11.31h318.15c6.24,0,11.31,5.06,11.31,11.31V266.15
L386.44,266.15z"/>
</g>
<rect x="94.36" y="266.15" class="st2" width="146.04" height="92.89"/>
<path class="st5" d="M374.64,359.04H240.4v-92.89h146.04v81.09C386.44,353.76,381.16,359.04,374.64,359.04z"/>
<g>
<g>
<line class="st3" x1="45.68" y1="266.15" x2="386.44" y2="266.15"/>
</g>
<g>
<line class="st3" x1="45.68" y1="289.92" x2="386.44" y2="289.92"/>
</g>
<g>
<line class="st3" x1="45.68" y1="313.69" x2="386.44" y2="313.69"/>
</g>
<g>
<line class="st3" x1="45.68" y1="337.46" x2="386.44" y2="337.46"/>
</g>
</g>
<line class="st3" x1="94.36" y1="242.57" x2="94.36" y2="359.04"/>
<line class="st3" x1="143.04" y1="242.57" x2="143.04" y2="359.04"/>
<line class="st3" x1="191.72" y1="242.57" x2="191.72" y2="359.04"/>
<line class="st3" x1="240.4" y1="242.57" x2="240.4" y2="359.04"/>
<line class="st3" x1="289.08" y1="242.57" x2="289.08" y2="359.04"/>
<line class="st3" x1="337.76" y1="242.57" x2="337.76" y2="359.04"/>
<path class="st4" d="M375.27,359.04H56.85c-6.17,0-11.17-5-11.17-11.17v-94.13c0-6.17,5-11.17,11.17-11.17h318.42
c6.17,0,11.17,5,11.17,11.17v94.13C386.44,354.04,381.44,359.04,375.27,359.04z"/>
</g>
<g>
<g>
<path class="st1" d="M422.69,69.99H227.97V57.71c0-6.24,5.06-11.31,11.31-11.31h172.11c6.24,0,11.31,5.06,11.31,11.31V69.99
L422.69,69.99z"/>
</g>
<path class="st5" d="M411.64,162.88H239.02c-6.1,0-11.05-4.95-11.05-11.05V69.99h194.72v81.84
C422.69,157.93,417.74,162.88,411.64,162.88z"/>
<g>
<g>
<g>
<line class="st3" x1="227.97" y1="69.99" x2="422.69" y2="69.99"/>
</g>
<g>
<line class="st3" x1="227.97" y1="93.76" x2="422.69" y2="93.76"/>
</g>
<g>
<line class="st3" x1="227.97" y1="117.53" x2="422.69" y2="117.53"/>
</g>
<g>
<line class="st3" x1="227.97" y1="141.3" x2="422.69" y2="141.3"/>
</g>
</g>
<line class="st3" x1="276.65" y1="46.41" x2="276.65" y2="162.88"/>
<line class="st3" x1="325.33" y1="46.41" x2="325.33" y2="162.88"/>
<line class="st3" x1="374.01" y1="46.41" x2="374.01" y2="162.88"/>
</g>
<path class="st4" d="M411.52,162.88H239.14c-6.17,0-11.17-5-11.17-11.17V57.58c0-6.17,5-11.17,11.17-11.17h172.38
c6.17,0,11.17,5,11.17,11.17v94.13C422.69,157.88,417.69,162.88,411.52,162.88z"/>
</g>
<text transform="matrix(1 0 0 1 97.6582 27.7161)" class="st6 st7 st8">t1</text>
<text transform="matrix(1 0 0 1 24.5067 223.4948)"><tspan x="0" y="0" class="st6 st7 st8">join(tables</tspan><tspan x="100.34" y="0" class="st9 st7 st8">:</tspan><tspan x="109.46" y="0" class="st6 st7 st8"> {t1</tspan><tspan x="145.94" y="0" class="st9 st7 st8">:</tspan><tspan x="155.06" y="0" class="st6 st7 st8">t1, t2</tspan><tspan x="209.79" y="0" class="st9 st7 st8">:</tspan><tspan x="218.92" y="0" class="st6 st7 st8">t2}, on</tspan><tspan x="282.77" y="0" class="st9 st7 st8">:</tspan><tspan x="291.89" y="0" class="st6 st7 st8"> [</tspan><tspan x="310.13" y="0" class="st10 st7 st8">&quot;col1&quot;</tspan><tspan x="364.86" y="0" class="st6 st7 st8">])</tspan></text>
<text transform="matrix(1 0 0 1 111.1606 419.4754)"><tspan x="0" y="0" class="st6 st7 st8">union(tables</tspan><tspan x="109.46" y="0" class="st9 st7 st8">:</tspan><tspan x="118.58" y="0" class="st6 st7 st8"> [t1, t2])</tspan></text>
<text transform="matrix(1 0 0 1 316.2086 27.7161)" class="st6 st7 st8">t2</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB