@c8y/style 1021.70.1 → 1021.71.1

package/markdown-files/datapoint-explorer-preview.md

@@ -0,0 +1,88 @@
+ 
+
+### **🚀 Data Point Explorer: Major Upgrade & New Features**
+
+ 
+
+The **Data Point Explorer** has undergone a **significant upgrade**, introducing **new capabilities** and a **modernized architecture**. This update brings a **seamless transition from AngularJS to Angular**, ensuring **better performance, an improved user experience, and expanded configuration options**.
+
+ 
+
+With this transformation, users can now benefit from **faster load times, a more intuitive interface, and a host of powerful features designed to streamline data analysis**. The new architecture also enhances the application's **scalability and maintainability**, ensuring a future-proof foundation for ongoing enhancements.
+
+ 
+
+<img src="./c8y-style-assets/datapoint-explorer.png" alt="Datapoint Explorer Feature Preview" width="100%">
+
+---
+
+### **✨ Key Enhancements & Features**
+
+&nbsp;
+
+#### **🛠️ Workspace Implementation** -- Improved Organization & Collaboration
+
+&nbsp;
+
+A key addition to the **Data Point Explorer** is the introduction of **workspaces**, allowing users to **create, manage, and organize multiple analysis sessions** with ease.
+
+&nbsp;
+
+✅ **Persistent Workspaces** -- Workspaces are stored locally, enabling users to save their progress and continue their work at any time.\
+✅ **Collaboration Made Easy** -- Workspaces can be **shared** across teams, promoting **seamless collaboration** and ensuring that insights are easily accessible by multiple users.\
+✅ **Custom Configuration** -- Each workspace can have its own set of preferences, layouts, and selected data points, catering to different analysis needs.
+
+&nbsp;
+
+By integrating **workspaces**, users can effortlessly switch between different data analysis contexts without losing their configurations, making the process **more flexible and efficient**.
+
+---
+
+#### **🔎 Enhanced Browsing & Search Experience**
+
+&nbsp;
+
+Finding relevant data has never been easier with the **revamped search and browsing experience**.
+
+&nbsp;
+
+✅ **Advanced Search Filters** -- Users can now quickly **locate specific data points** across multiple connected devices using refined filtering options.\
+✅ **Improved Navigation** -- The updated interface makes browsing **more intuitive**, reducing the time spent searching for relevant data.\
+✅ **Faster Data Discovery** -- Enhanced indexing ensures **quicker access** to important information, even in large datasets.
+
+&nbsp;
+
+These improvements empower users to **spend less time searching and more time analyzing data**, leading to **greater efficiency and productivity**.
+
+---
+
+#### **📊 Advanced Charting & Data Visualization**
+
+&nbsp;
+
+To enhance data interpretation, the latest upgrade introduces **expanded chart options and visualization tools**.
+&nbsp;
+✅ **More Customization Options** -- Users can fine-tune charts to match their specific data analysis needs.\
+✅ **New Aggregated Data Slider** -- A powerful **slider tool** allows users to **view aggregated data** over extended periods, making it easier to identify long-term trends.\
+✅ **Enhanced Data Representation** -- Improved charting functionalities provide **clearer insights** and better visual analysis.
+&nbsp;
+With these **charting enhancements**, users gain **deeper insights** into their data, enabling more **informed decision-making** and **precise trend analysis**.
+
+---
+
+### **💡 Why This Upgrade Matters**
+
+&nbsp;
+
+This major upgrade to the **Data Point Explorer** provides:
+
+&nbsp;
+
+🚀 **Faster, more efficient data analysis** with Angular-powered performance enhancements.\
+📂 **A structured, flexible workspace system** for managing and sharing multiple projects.\
+🔍 **Better search and navigation tools** for easier access to important data points.\
+📈 **Enhanced visualization features** for **clearer, more insightful** data representation.
+
+&nbsp;
+
+These updates **empower users to work more efficiently**, **collaborate seamlessly**, and **gain deeper insights into their data**, making the Data Point Explorer **a more powerful tool than ever before**! 🚀

package/markdown-files/datapoint-graph-preview.md

@@ -0,0 +1,80 @@
+ 
+ 
+
+### 📊 Data Point Graph: Enhanced Visualization & Real-Time Insights
+
+  
+
+The Data Point Graph has been upgraded with new capabilities and expanded customization options, making it an even more powerful tool for visualizing and analyzing data trends. This enhancement ensures better performance, improved usability, and seamless integration with global time contexts.
+
+With these improvements, users can effortlessly monitor alarms and events, fine-tune charts for precise analysis, and dynamically interact with their data, all within an intuitive interface.
+
+  
+
+<img src="./c8y-style-assets/datapoints-graph.png" alt="Datapoint graph" width="100%">
+ 
+---
+
+### ✨ Key Enhancements & Features
+
+ &nbsp;
+
+#### 🚀 Real-Time Data Monitoring & Event Tracking
+
+ &nbsp;
+
+Stay ahead of potential issues with real-time event tracking and alarm visualization.
+
+ &nbsp;
+
+✅ Configurable Alarms & Events -- Easily track and display critical system alarms and events within the graph.\
+✅ Real-Time Updates -- Data points refresh dynamically, ensuring the latest insights are always available.\
+✅ Interactive Event Highlights -- Key events are visually highlighted for quick identification and action.\
+
+These improvements help users monitor data more efficiently and react promptly to critical events.
+
+#### 🎨 Expanded Chart Customization
+
+ &nbsp;
+
+Enhance your data visualization experience with a wealth of chart customization options.
+
+ &nbsp;
+
+✅ Customizable Graph Styles -- Adjust colors, line styles, and markers to suit your analysis needs.\
+✅ Multiple Chart Types -- Choose from line, bar, and scatter plots for the most effective data representation.\
+✅ Advanced Data Smoothing -- Improve trend visibility with enhanced data smoothing and aggregation options.
+
+With these customization features, users gain greater control over how they interpret and present their data.
+
+&nbsp;
+
+#### ⏳ Seamless Integration with Dashboard Time Context
+
+ &nbsp;
+
+Optimize your workflow with two-way binding to the global time context.
+
+ &nbsp;
+
+✅ Dynamic Time Range Updates -- The graph adjusts automatically based on the selected global time frame.\
+✅ Synchronized Dashboards -- Maintain consistency across different dashboard components for a unified analysis experience.\
+✅ Historical Data Exploration -- Effortlessly review past trends by adjusting the time context.
+
+These enhancements ensure users can navigate their data efficiently and gain deeper insights into long-term trends.
+
+&nbsp;
+
+💡 Why This Upgrade Matters
+
+ &nbsp;
+
+This major upgrade to the Data Point Graph delivers:
+
+ &nbsp;
+
+📊 Enhanced real-time monitoring for improved situational awareness.\
+🎨 Greater customization options for precise data visualization.\
+⏳ Seamless integration with global time context for a more streamlined workflow.
+
+These updates empower users to analyze data more effectively, make informed decisions faster, and leverage advanced visual tools for better insights. 🚀

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1021.70.1",
+  "version": "1021.71.1",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",

package/styles/_bottom-drawer.less

@@ -3,7 +3,7 @@
   top: calc(@header-bar-height + 6px);
   right: 10px;
   bottom: 0;
-  z-index: @zindex-navbar-fixed;
+  z-index: @zindex-navbar-fixed + 5;
   overflow-y: auto;
   width: calc(100vw - 20px);
   background-color: @component-background-default;
@@ -25,3 +25,19 @@
     }
   }
 }
+
+.drawerOpen{
+  &:has(.bottom-drawer.has-backdrop){
+    &:before{
+      content: '';
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: @zindex-navbar-fixed + 4;
+      background-color: @component-background-default;
+      opacity: 0.5;
+    }
+  }
+}

package/styles/_c8y-pulse.less

@@ -18,6 +18,28 @@
     content: '';
     transform: rotateZ(360deg);
   }
+  &--md{
+    width: @margin-16;
+    height: @margin-16;
+    &.active {
+      border: 1px solid @component-background-default;
+      background-color: @component-pulse-color;
+      &:before {
+        animation: c8ypulse 2s infinite;
+      }
+    }
+  }
+  &--lg{
+    width: @margin-24;
+    height: @margin-24;
+    &.active {
+      border: 1px solid @component-background-default;
+      background-color: @component-pulse-color;
+      &:before {
+        animation: c8ypulse 2s infinite;
+      }
+    }
+  }
 }
 
 .c8y-realtime {
@@ -44,6 +66,10 @@
   }
 }
 
+
+
+
+
 @keyframes c8ypulse {
   0% {
     opacity: 1;

package/styles/_main-header.less

@@ -81,6 +81,8 @@
     font-size: 24px;
   }
 
+
+
   .dropdown-menu:not(.app-switcher-dropdown-menu):not(.search-mobile-menu) {
     a,
     .btn {
@@ -270,8 +272,18 @@ body:not(:has(.has-tabs)):not(:has(.has-action-bar)) {
         display: flex;
       }
     }
+     + .p-relative{
+      --c8y-component-pulse-color: var(--header-hover-color, var(--c8y-header-hover-color));
+      >.c8y-pulse{
+        position: absolute;
+        top: 13px;
+        right: -5px;
+      }
+    }
   }
 
+  
+
   @media (max-width: @screen-xs-max) {
     max-height: 46px;
     overflow: hidden;

package/styles/_tabs.less

@@ -173,9 +173,12 @@
   width: @nav-tabs-vertical-width;
   border: 0;
   box-shadow: none;
+  &.nav-tabs-vertical--wide {
+    width:unset;
+  }
   > div,
   li {
-    > a {
+    > a, > button {
       display: flex;
       align-items: center;
       flex-direction: row;
@@ -204,20 +207,21 @@
       }
     }
     &.active {
-      > a,
-      a:hover {
-        border-left: 4px solid @nav-tabs-color-active;
-        background-color: @nav-tabs-background-active;
-        box-shadow: inset 0 -1px 0 @nav-tabs-border-color-default !important;
-        border-radius: 0 !important;
-        pointer-events: none;
-        &::before {
-          width: 100%;
-        }
-        &::after {
-          left: 100%;
-          height: 100%;
-          border-width: calc(@margin-16 + @margin-4) 0 calc(@margin-16 + @margin-4) @margin-base;
+      > a, > button{
+        &, &:hover{
+          border-left: 4px solid @nav-tabs-color-active;
+          background-color: @nav-tabs-background-active;
+          box-shadow: inset 0 -1px 0 @nav-tabs-border-color-default !important;
+          border-radius: 0 !important;
+          pointer-events: none;
+          &::before {
+            width: 100%;
+          }
+          &::after {
+            left: 100%;
+            height: 100%;
+            border-width: calc(@margin-16 + @margin-4) 0 calc(@margin-16 + @margin-4) @margin-base;
+          }
         }
       }
     }

package/styles/_type.less

@@ -1,3 +1,4 @@
+
 h1,
 h2,
 h3,
@@ -10,7 +11,6 @@ h6,
 .h4,
 .h5,
 .h6 {
-  color: @headings-color;
   font-weight: @headings-font-weight;
   font-family: @headings-font-family;
   line-height: @headings-line-height;
@@ -22,6 +22,15 @@ h6,
   }
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6{
+  color: @headings-color;
+}
+
 h1,
 .h1,
 h2,