diff --git a/assets/styles/layouts/article/_html-diagrams.scss b/assets/styles/layouts/article/_html-diagrams.scss index bd55cb6b8..4bae448c4 100644 --- a/assets/styles/layouts/article/_html-diagrams.scss +++ b/assets/styles/layouts/article/_html-diagrams.scss @@ -529,10 +529,285 @@ table tr.point{ } } +/////////////////////////// QUIX DOWNSAMPLING DIAGRAM ////////////////////////// + +#quix-downsample-pipeline { + margin: 3rem auto; + + .logo-row { + display: flex; + + &.top { + justify-content: flex-start; + margin-bottom: -2.6rem; + + .quix-connector {margin-top: .5rem;} + } + &.bottom { + justify-content: flex-end; + margin-top: -2.6rem; + } + } + + .influxdb-connector { + display: flex; + flex-direction: column; + align-items: center; + width: 29%; + } + + .influxdb-logo { + background: $influxdb-logo; + width: 175px; + height: 55px; + background-repeat: no-repeat; + background-size: contain; + position: relative; + + &:after { + content: attr(data-precision) " data db"; + position: absolute; + bottom: -2px; + left: 45px; + width: 100%; + color: $article-text; + font-style: italic; + font-size: 1rem; + } + } + + .quix-connector { + display: block; + height: 80px; + width: 20px; + position: relative; + + &:before { + content: ""; + display: block; + height: 100%; + width: 100%; + background-color: $article-text; + mask-image: url('/svgs/quix-connector-plug.svg'); + mask-repeat: no-repeat; + background-size: contain; + } + + &:after { + content: "Connector"; + display: block; + position: absolute; + top: 1.5rem; + left: 1.75rem; + padding: .25rem .5rem; + color: $article-text; + font-size: 1rem; + font-style: italic; + background-color: $article-bg; + border-radius: $radius * 3; + border: 1.5px solid rgba($article-text, .5); + box-shadow: 2px 2px 6px $sidebar-search-shadow; + } + } + + .quix-stream-container { + display: flex; + flex-direction: row; + border: 2px dashed $article-text; + background: rgba($article-text, .1); + border-radius: $radius * 4; + padding: 2.5rem; + justify-content: space-between; + align-items: center; + } + + .quix-stream-component { + padding: 1rem; + border-radius: $radius * 2; + border-style: dashed; + border-width: 2px; + position: relative; + + p { + margin: 0; + line-height: 1.2rem; + font-size: 1rem; + text-align: center; + color: $article-bold; + } + + &:before { + content: url('/svgs/quix-python-heart.svg'); + display: block; + position: absolute; + width: 40px; + height: 40px; + top: -15px; + left: -15px; + filter: + drop-shadow( 2px 0px 0px $article-bg) + drop-shadow(-2px 0px 0px $article-bg) + drop-shadow( 0px 2px 0px $article-bg) + drop-shadow( 0px -2px 0px $article-bg); + } + + &#source-producer { + background: rgba($b-dodger, .2); + border-color: $b-dodger + } + &#downsampling-process { + background: rgba($br-magenta, .2); + border-color: $br-magenta + } + &#sink-consumer { + background: rgba($y-tiger, .2); + border-color: $y-tiger + } + } + + .arrow { + margin: .5rem .75rem .5rem .5rem; + height: 2px; + width: auto; + min-width: 25px; + background: $article-text; + position: relative; + + &:after{ + content: "▶"; + position: absolute; + right: -4px; + top: -.48em; + font-size: .75rem; + color: $article-text; + } + } + + .kafka-toggle { + display: flex; + justify-content: flex-end; + width: 60px; + min-width: 60px; + height: 40px; + border-radius: 20px; + background: $grey5; + position: relative; + + &:after { + content: "TOPIC:\A" attr(topic); + position: absolute; + width: 215%; + color: $article-text; + text-align: center; + font-style: italic; + bottom: -42px; + font-size: .9rem; + left: -60%; + white-space: pre-wrap; + } + + .toggle-icon { + display: block; + height: 34px; + width: 34px; + margin: 3px; + border-radius: 50%; + background: url('/svgs/apache-kafka-icon.svg'); + background-color: #fff; + background-size: 86%; + background-position: 90%; + background-repeat: no-repeat; + } + } + + #quix-brand-icons { + height: 50px; + display: flex; + align-items: flex-start; + margin-top: -3rem; + + & > * { + height: 45px; + display: inline-block; + background-color: $g0-obsidian; + border-radius: $radius * 3; + margin-right: .25rem; + box-shadow: 0 1px 10px rgba($g20-white, .1); + + img { + margin: 0; + box-shadow: none; + border-radius: 0; + height: 100%; + } + } + + .quix-logo { + padding: .75rem; + } + + .quix-streams-logo { + position: relative; + padding: .6rem; + + &::after { + content: "Quix\A Streams"; + display: inline-block; + white-space: pre-wrap; + font-size: .92rem; + font-weight: $medium; + color: $g20-white; + line-height: .9rem; + margin-left: .15rem; + } + } + } +} + //////////////////////////////////////////////////////////////////////////////// ///////////////////////////////// MEDIA QUERIES //////////////////////////////// //////////////////////////////////////////////////////////////////////////////// +@include media(large) { + #quix-downsample-pipeline { + max-width: 325px; + + .logo-row .influxdb-connector {width: 100%;} + .quix-stream-container {flex-direction: column;} + .arrow { + margin: .5rem .5rem .75rem .5rem ; + width: 2px; + min-width: 2px; + height: auto; + min-height: 25px; + + &:after{ + content: "▼"; + right: -4.25px; + bottom: -.5em; + top: unset; + font-size: 1rem; + } + } + + .kafka-toggle { + margin-bottom: 1.5rem; + &:after { + content: "TOPIC: " attr(topic); + width: 400%; + bottom: -25px; + left: -150%; + } + } + + #quix-brand-icons { + margin-top: 1.5rem; + align-items: center; + justify-content: center; + } + } +} + @include media(small) { #shard-diagram { flex-direction: row; diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index 0ee95c3dd..299d57869 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -215,6 +215,7 @@ $html-diagram-shard-group-bg: $article-table-row-alt; $diagram-arrow: $g6-smoke; $flux-water-process-img: url('/img/flux/0-x-water-process-dark.svg'); +$influxdb-logo: url('/svgs/influxdb-logo-white.svg') !default; // Code placeholder colors $code-placeholder: #e659a2; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index d502ca3cf..93e62a8fb 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -211,6 +211,7 @@ $svg-geo-point: $p-potassium !default; $html-diagram-shard-group-bg: $g20-white !default; $flux-water-process-img: url('/img/flux/0-x-water-process-light.svg') !default; +$influxdb-logo: url('/svgs/influxdb-logo-blue.svg') !default; // Diagram colors $diagram-arrow: $g14-chromium !default; diff --git a/content/influxdb/cloud-serverless/process-data/downsample/_index.md b/content/influxdb/cloud-serverless/process-data/downsample/_index.md new file mode 100644 index 000000000..34a0ff1eb --- /dev/null +++ b/content/influxdb/cloud-serverless/process-data/downsample/_index.md @@ -0,0 +1,18 @@ +--- +title: Downsample data stored in InfluxDB +description: > + Learn about different methods for querying and downsampling time series data + stored in InfluxDB. +menu: + influxdb_cloud_serverless: + name: Downsample data + parent: Process & visualize data +weight: 101 +related: + - /influxdb/cloud-serverless/query-data/sql/aggregate-select/, Aggregate or apply selector functions to data (SQL) +--- + +Learn about different methods for querying and downsampling time series data +stored in InfluxDB. + +{{< children >}} \ No newline at end of file diff --git a/content/influxdb/cloud-serverless/process-data/downsample.md b/content/influxdb/cloud-serverless/process-data/downsample/client-libraries.md similarity index 97% rename from content/influxdb/cloud-serverless/process-data/downsample.md rename to content/influxdb/cloud-serverless/process-data/downsample/client-libraries.md index 4b681a687..b45071faf 100644 --- a/content/influxdb/cloud-serverless/process-data/downsample.md +++ b/content/influxdb/cloud-serverless/process-data/downsample/client-libraries.md @@ -1,13 +1,14 @@ --- -title: Downsample data stored in InfluxDB +title: Downsample data with client libraries description: > - Query and downsample time series data stored in InfluxDB and write the - downsampled data back to InfluxDB. + Use InfluxDB client libraries to query and downsample time series data stored + in InfluxDB and write the downsampled data back to InfluxDB. menu: influxdb_cloud_serverless: - name: Downsample data - parent: Process & visualize data -weight: 101 + name: Use client libraries + parent: Downsample data + identifier: downsample-client-libs +weight: 201 related: - /influxdb/cloud-serverless/query-data/sql/aggregate-select/, Aggregate or apply selector functions to data (SQL) --- diff --git a/content/influxdb/cloud-serverless/process-data/downsample-quix.md b/content/influxdb/cloud-serverless/process-data/downsample/downsample-quix.md similarity index 99% rename from content/influxdb/cloud-serverless/process-data/downsample-quix.md rename to content/influxdb/cloud-serverless/process-data/downsample/downsample-quix.md index f4774c5a3..a94aa8eb3 100644 --- a/content/influxdb/cloud-serverless/process-data/downsample-quix.md +++ b/content/influxdb/cloud-serverless/process-data/downsample/downsample-quix.md @@ -6,9 +6,9 @@ description: > downsample it, and then write the downsampled data back to InfluxDB. menu: influxdb_cloud_serverless: - name: Downsample data with Quix - parent: Process & visualize data -weight: 101 + name: Use Quix + parent: Downsample data +weight: 202 related: - /influxdb/cloud-serverless/query-data/sql/aggregate-select/, Aggregate or apply selector functions to data (SQL) --- @@ -29,13 +29,11 @@ but you can use your runtime of choice and any of the available This guide also assumes you have already [setup your Python project and virtual environment](/influxdb/cloud-serverless/query-data/execute-queries/client-libraries/python/#create-a-python-virtual-environment). - - ## Pipeline architecture The following diagram illustrates how data is passed between processes as it is downsampled: -![downsampling pipeline architecture](quix-pipeline-downsample.png) +{{< html-diagram/quix-downsample-pipeline >}} {{% note %}} It is usually more efficient to write raw data directly to Kafka rather than diff --git a/content/influxdb/cloud-serverless/process-data/quix-pipeline-downsample.png b/content/influxdb/cloud-serverless/process-data/quix-pipeline-downsample.png deleted file mode 100644 index b89987732..000000000 Binary files a/content/influxdb/cloud-serverless/process-data/quix-pipeline-downsample.png and /dev/null differ diff --git a/layouts/shortcodes/html-diagram/quix-downsample-pipeline.html b/layouts/shortcodes/html-diagram/quix-downsample-pipeline.html new file mode 100644 index 000000000..c0e538e58 --- /dev/null +++ b/layouts/shortcodes/html-diagram/quix-downsample-pipeline.html @@ -0,0 +1,43 @@ +
+
+
+ +
+
+
+
+
+

InfluxDB v2 Source Producer

+
+
+
+
+
+
+
+

Downsampling Process

+
+
+
+
+
+
+
+

InfluxDB v3 Sink Consumer

+
+
+
+
+
+ +
+
+
+ + +
+
\ No newline at end of file diff --git a/static/svgs/apache-kafka-icon.svg b/static/svgs/apache-kafka-icon.svg new file mode 100644 index 000000000..91f471200 --- /dev/null +++ b/static/svgs/apache-kafka-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/influxdb-logo-blue.svg b/static/svgs/influxdb-logo-blue.svg new file mode 100644 index 000000000..d52284561 --- /dev/null +++ b/static/svgs/influxdb-logo-blue.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/svgs/influxdb-logo-white.svg b/static/svgs/influxdb-logo-white.svg new file mode 100644 index 000000000..59f554e9f --- /dev/null +++ b/static/svgs/influxdb-logo-white.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/svgs/quix-connector-plug.svg b/static/svgs/quix-connector-plug.svg new file mode 100644 index 000000000..97b9c347b --- /dev/null +++ b/static/svgs/quix-connector-plug.svg @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/static/svgs/quix-logo-white.svg b/static/svgs/quix-logo-white.svg new file mode 100644 index 000000000..a84db625e --- /dev/null +++ b/static/svgs/quix-logo-white.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + diff --git a/static/svgs/quix-python-heart.svg b/static/svgs/quix-python-heart.svg new file mode 100644 index 000000000..795902d8b --- /dev/null +++ b/static/svgs/quix-python-heart.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file