new tracking component (#1317)

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

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 %}

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>

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>

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";

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;

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;
     }

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);
+}