@beacon-interactive-systems-llc/beacon-platform-ui 19.1.2 → 19.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "19.1.2",
+  "version": "19.1.4",
   "peerDependencies": {
     "@angular/common": "^19.2.14",
     "@angular/core": "^19.2.14",

package/styles/_quill.scss

@@ -84,7 +84,7 @@ quill-editor {
     }
 
     &.tall-editor .ql-container .ql-editor {
-      min-height: 500px;
+      min-height: 390px;
 
       @media (min-width: 1024px) and (max-width: 1024px) {
         min-height: 330px;

package/styles/_widgets.scss

@@ -22,7 +22,9 @@ $platform_widget_contrasts: (
     widgetSummarySelection: $beacon-dark-blue-200,
     widgetSummarySelectionText: $beacon-black,
     widgetDropShadow: 0 0 4px 0 rgba(0, 0, 0, 0.12),
-    selectedFilterBackground: $beacon-gray-100
+    selectedFilterBackground: $beacon-gray-100,
+    widgetLineChartText: $beacon-gray-500,
+    widgetLineChartFillColor: $beacon-green-500
   ),
   dark: (
     widgetText: $beacon-gray-200,
@@ -45,7 +47,9 @@ $platform_widget_contrasts: (
     widgetSummarySelection: $beacon-gray-500,
     widgetSummarySelectionText: $beacon-gray-300,
     widgetDropShadow: none,
-    selectedFilterBackground: $beacon-gray-700
+    selectedFilterBackground: $beacon-gray-700,
+    widgetLineChartText: $beacon-gray-700,
+    widgetLineChartFillColor: $beacon-green-700
   ),
   highcontrast: (
     widgetText: $beacon-white,
@@ -68,7 +72,9 @@ $platform_widget_contrasts: (
     widgetSummarySelection: $beacon-gray-700,
     widgetSummarySelectionText: $beacon-white,
     widgetDropShadow: none,
-    selectedFilterBackground: $beacon-gray-600
+    selectedFilterBackground: $beacon-gray-600,
+    widgetLineChartText: $beacon-white,
+    widgetLineChartFillColor: $highcontrast-bright-green-200
   )
 );
 
@@ -614,6 +620,70 @@ $platform_widget_contrasts: (
       }
     }
   }
+
+  &.line-chart-widget {
+    height: 400px !important;
+    width: 322px; 
+
+    @include widget-filter-container();
+    .gridline-path {
+      stroke-dasharray: 1, 4;
+    }
+
+    .tick text {
+      font-size: 9px !important;
+      @include themify($platform_widget_contrasts) {
+        fill: apply('widgetLineChartText') !important;
+      }
+      @include font-weight--bold;
+    }
+
+    ngx-charts-line-chart {
+      .line-series path.line {
+        @include themify($platform_widget_contrasts) {
+          stroke: apply('widgetLineChartFillColor') !important;
+        }
+        stroke-width: 2px;
+      } 
+
+      path.area {
+        @include themify($platform_widget_contrasts) {
+          fill: apply('widgetLineChartFillColor') !important;
+        }
+        fill-opacity: 0.4 !important;
+      }
+    }
+
+    ngx-charts-chart g > circle {
+      @include themify($platform_widget_contrasts) {
+        fill: apply('widgetLineChartFillColor') !important;
+        stroke: apply('widgetLineChartFillColor') !important; 
+      }
+    }
+
+    .ngx-charts .line-highlight {
+      display: block;
+    }
+
+    rect {
+      @include themify($platform_widget_contrasts) {
+        fill: apply('widgetLineChartFillColor') !important;
+      }
+      fill-opacity: 0.4 !important;
+    }
+      
+    .chart-wrapper {
+      width: 100%;
+      flex: 1 1 auto;
+      height: 310px !important;
+    }
+  }
+}
+
+.ngx-charts-tooltip-content.type-tooltip [style*="background"] {
+  @include themify($platform_widget_contrasts) {
+    background: apply('widgetLineChartFillColor') !important;
+  }
 }
 
 /*