From eab83edf0005e572743a260dca048da7e4025aa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Mon, 17 Oct 2022 23:59:47 +0200
Subject: [PATCH] new `tracking` component (#1317)

---
 src/pages/_data/docs.yml                      |  3 ++
 src/pages/_docs/tracking.md                   | 33 +++++++++++++++++++
 .../_includes/parts/dropdown/months.html      |  8 +++++
 src/pages/_includes/ui/tracking.html          | 14 ++++++++
 src/scss/_core.scss                           |  1 +
 src/scss/_variables.scss                      |  5 +++
 src/scss/ui/_cards.scss                       |  6 ++--
 src/scss/ui/_tracking.scss                    | 29 ++++++++++++++++
 8 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/_docs/tracking.md
 create mode 100644 src/pages/_includes/parts/dropdown/months.html
 create mode 100644 src/pages/_includes/ui/tracking.html
 create mode 100644 src/scss/ui/_tracking.scss

diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml
index 1fe70d22d..2d0be2bd5 100644
--- a/src/pages/_data/docs.yml
+++ b/src/pages/_data/docs.yml
@@ -147,6 +147,9 @@ components:
     toasts:
       title: Toasts
       url: docs/toasts.html
+    tracking:
+      title: Tracking
+      url: docs/tracking.html
     tooltips:
       title: Tooltips
       url: docs/tooltips.html
diff --git a/src/pages/_docs/tracking.md b/src/pages/_docs/tracking.md
new file mode 100644
index 000000000..5570739ec
--- /dev/null
+++ b/src/pages/_docs/tracking.md
@@ -0,0 +1,33 @@
+---
+title: Tracking
+menu: help.docs.components.tracking
+description: Component for visualising activity logs or other monitoring-related data.
+---
+
+{% capture code %}
+{% include ui/tracking.html %}
+{% endcapture %}
+{% include example.html code=code max-width="20rem" centered=true %}
+
+{% capture code %}
+<div class="card">
+	 <div class="card-body">
+		 <div class="d-flex align-items-center">
+			 <div class="subheader">Status monitoring</div>
+			 <div class="ms-auto lh-1">
+				 {% include parts/dropdown/months.html %}
+			 </div>
+		 </div>
+		 <div class="d-flex align-items-baseline">
+			 <div class="h1 mb-3 me-2">99.5%</div>
+			 <div class="me-auto">
+				 {% include ui/trending.html value=2 %}
+			 </div>
+		 </div>
+		 <div class="mt-2">
+			 {% include ui/tracking.html %}
+		 </div>
+	 </div>
+ </div>
+{% endcapture %}
+{% include example.html code=code columns=1 %}
\ No newline at end of file
diff --git a/src/pages/_includes/parts/dropdown/months.html b/src/pages/_includes/parts/dropdown/months.html
new file mode 100644
index 000000000..cd101f11f
--- /dev/null
+++ b/src/pages/_includes/parts/dropdown/months.html
@@ -0,0 +1,8 @@
+<div class="dropdown">
+	<a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ include.value | default: 'Current month' }}</a>
+	<div class="dropdown-menu dropdown-menu-end">
+		<a class="dropdown-item active" href="#">Current month</a>
+		<a class="dropdown-item" href="#">Last month</a>
+		<a class="dropdown-item" href="#">Last 3 months</a>
+	</div>
+</div>
diff --git a/src/pages/_includes/ui/tracking.html b/src/pages/_includes/ui/tracking.html
new file mode 100644
index 000000000..8d7ee0bf4
--- /dev/null
+++ b/src/pages/_includes/ui/tracking.html
@@ -0,0 +1,14 @@
+{% assign blocks = include.blocks | default: 30 %}
+<div class="tracking{% if include.squares %} tracking-squares{% endif %}">
+	{% for i in (1..blocks) %}
+	{% if i == 5 or i == 18 %}
+		<div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime"></div>
+	{% elsif i == 22 or i == 23 %}
+		<div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
+	{% elsif i == 14 %}
+		<div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load"></div>
+	{% else %}
+		<div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
+	{% endif %}
+	{% endfor %}
+</div>
\ No newline at end of file
diff --git a/src/scss/_core.scss b/src/scss/_core.scss
index 8234706a5..9bfa6e4f8 100644
--- a/src/scss/_core.scss
+++ b/src/scss/_core.scss
@@ -53,6 +53,7 @@
 @import "ui/tables";
 @import "ui/toasts";
 @import "ui/toolbar";
+@import "ui/tracking";
 @import "ui/type";
 @import "ui/charts";
 @import "ui/offcanvas";
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 69258a2bb..cd00126f2 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -693,6 +693,11 @@ $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org
 $toast-border-color: var(--#{$prefix}border-color) !default;
 $toast-header-color: var(--#{$prefix}muted) !default;
 
+//tracking
+$tracking-height: 1.5rem !default;
+$tracking-gap-width: .125rem !default;
+$tracking-border-radius: var(--#{$prefix}border-radius) !default;
+
 //progress
 $progress-bg: var(--#{$prefix}border-color) !default;
 $progress-border-radius: var(--#{$prefix}border-radius) !default;
diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss
index 3aa84ea42..adf1158cd 100644
--- a/src/scss/ui/_cards.scss
+++ b/src/scss/ui/_cards.scss
@@ -316,17 +316,17 @@ Stacked card
     margin-bottom: 0;
   }
 
-  .card-sm & {
+  .card-sm > & {
     padding: 1rem;
   }
 
-  .card-md & {
+  .card-md > & {
     @include media-breakpoint-up(md) {
       padding: 2.5rem;
     }
   }
 
-  .card-lg & {
+  .card-lg > & {
     @include media-breakpoint-up(md) {
       padding: 2rem;
     }
diff --git a/src/scss/ui/_tracking.scss b/src/scss/ui/_tracking.scss
new file mode 100644
index 000000000..dd71a16d3
--- /dev/null
+++ b/src/scss/ui/_tracking.scss
@@ -0,0 +1,29 @@
+.tracking {
+  --#{$prefix}tracking-height: #{$tracking-height};
+  --#{$prefix}tracking-gap-width: #{$tracking-gap-width};
+  --#{$prefix}tracking-block-border-radius: #{$tracking-border-radius};
+  display: flex;
+  gap: var(--#{$prefix}tracking-gap-width);
+}
+
+.tracking-squares {
+  --#{$prefix}tracking-block-border-radius: var(--#{$prefix}border-radius-sm);
+
+  .tracking-block {
+    height: auto;
+
+    &:before {
+      content: '';
+      display: block;
+      padding-top: 100%;
+    }
+  }
+}
+
+.tracking-block {
+  flex: 1;
+  border-radius: var(--#{$prefix}tracking-block-border-radius);
+  height: var(--#{$prefix}tracking-height);
+  min-width: .25rem;
+  background: var(--#{$prefix}border-color);
+}
\ No newline at end of file