@provoly/dashboard 0.18.4 → 0.18.5

package/lib/core/i18n/en.translations.d.ts

@@ -102,6 +102,7 @@ export declare const enTranslations: {
             automateRefresh: string;
             options: string;
             close: string;
+            filter: string;
             heatmap: string;
             bubblemap: string;
             markermap: string;

package/lib/core/i18n/fr.translations.d.ts

@@ -102,6 +102,7 @@ export declare const frTranslations: {
             automateRefresh: string;
             options: string;
             close: string;
+            filter: string;
             heatmap: string;
             bubblemap: string;
             markermap: string;

package/lib/dashboard/components/widgets/header/widget-header.component.d.ts

@@ -9,7 +9,7 @@ import { LibraryTypes } from '../../../../core/store/image/image.service';
 import { ToolboxMenuService } from '../../../../core/toolbox/toolbox-menu.service';
 import { SubscriptionnerDirective } from '../../subscriptionner.directive';
 import * as i0 from "@angular/core";
-export declare const WIDGET_HEADER_HEIGHT = 60;
+export declare const WIDGET_HEADER_HEIGHT = 30;
 export type HeaderAction = {
     icon: string;
     action: (that: PryWidgetHeaderComponent) => void;

package/lib/dashboard/filter/base-filter.component.d.ts

@@ -6,8 +6,10 @@ export declare class BaseFilterComponent extends SubscriptionnerDirective {
     protected store: Store;
     filter?: Filter;
     type: string;
+    private _value;
     constructor(store: Store);
     updateFilter(value: any): void;
+    validateFilters(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseFilterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BaseFilterComponent, "pry-base-filter", never, { "filter": { "alias": "filter"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/dashboard/filter/components/filter-instanciator/filter-instanciator.component.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectorRef, Injector, ViewContainerRef } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { Filter } from '../../../../core/model/filter.interface';
 import { SubscriptionnerDirective } from '../../../components/subscriptionner.directive';
 import { FilterFactoryService } from '../../filter-factory.service';
@@ -11,10 +11,13 @@ export declare class FilterInstanciatorComponent extends SubscriptionnerDirectiv
     private filterFactoryService;
     private changeDetector;
     filter$: BehaviorSubject<Filter | null>;
+    private applySub?;
+    private currentInstance?;
     set filter(filter: Filter);
     filterContainerRef: ViewContainerRef;
+    set applyFilter$(applyFilter$: Observable<void>);
     constructor(store: Store, injector: Injector, filterFactoryService: FilterFactoryService, changeDetector: ChangeDetectorRef);
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterInstanciatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterInstanciatorComponent, "pry-filter-instanciator", never, { "filter": { "alias": "filter"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterInstanciatorComponent, "pry-filter-instanciator", never, { "filter": { "alias": "filter"; "required": false; }; "applyFilter$": { "alias": "applyFilter$"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/dashboard/store/dashboard.actions.d.ts

@@ -441,6 +441,8 @@ export declare const DashboardActions: {
         value: any;
         datasourceId: string;
     } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] (bus) update filter value">>;
+    clearAllFilterValues: import("@ngrx/store").ActionCreator<"[Dashboard] (bus) clear all filter values", () => import("@ngrx/store/src/models").TypedAction<"[Dashboard] (bus) clear all filter values">>;
+    dispatchFilters: import("@ngrx/store").ActionCreator<"[Dashboard] (bus) apply filters to presentation datasources", () => import("@ngrx/store/src/models").TypedAction<"[Dashboard] (bus) apply filters to presentation datasources">>;
     resetWmsFeatures: import("@ngrx/store").ActionCreator<"[Widget map] Reset Wms layer features", () => import("@ngrx/store/src/models").TypedAction<"[Widget map] Reset Wms layer features">>;
     getWmsFeatures: import("@ngrx/store").ActionCreator<"[Widget map] Get Wms layer features", (props: {
         url: string;

package/lib/dashboard/store/dashboard.contants.d.ts

@@ -1,4 +1,4 @@
-export declare const DEFAULT_GAP_PX = 2;
+export declare const DEFAULT_GAP_PX = 15;
 export declare const DEFAULT_COLUMNS_NUMBER = 12;
 export declare const DEFAULT_ROWS_NUMBER = 12;
 export declare const DEFAULT_ROW_HEIGHT_PX = 50;

package/lib/dashboard/store/dashboard.effects.d.ts

@@ -221,6 +221,9 @@ export declare class DashboardEffects {
     updateViewAfterFilterValueUpdate$: import("rxjs").Observable<{
         id: string;
     } & import("@ngrx/store/src/models").TypedAction<"[Search] (bus) search named">> & import("@ngrx/effects").CreateEffectMetadata;
+    dispatchFilters$: import("rxjs").Observable<{
+        id: string;
+    } & import("@ngrx/store/src/models").TypedAction<"[Search] (bus) search named">> & import("@ngrx/effects").CreateEffectMetadata;
     getCapability$: import("rxjs").Observable<{
         url: string;
         capability: import("./wms.service").GetCapabilitiesResponse | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@provoly/dashboard",
-  "version": "0.18.4",
+  "version": "0.18.5",
   "type": "commonjs",
   "peerDependencies": {
     "@angular/cdk": "14.x || 15.x || 16.x",

package/presentation/style/_o-pry-new-presentation.scss

@@ -83,7 +83,7 @@ pry-add-edit-presentation {
 }
 
 .a-presentation-title {
-  padding: 15px;
+  padding: 10px;
 }
 
 .a-presentation__search {

package/presentation/style/_o-pry-presentation.scss

@@ -172,10 +172,16 @@
 h1.a-presentation-title {
   font-size: 16px;
   padding-right: 20px;
+  color: #3E546A;
 }
 
 .title-container {
   display: flex;
+
+  .h-1 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }
 
 .info-icon {
@@ -183,11 +189,11 @@ h1.a-presentation-title {
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 50%;
-  background-color: #ccc;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   align-self: center;
   margin-right: 1rem;
+  border: 1px solid #3E546A;
 }

package/styles/components/_a-btn.scss

@@ -114,6 +114,7 @@
     width: toRem(27);
     height: toRem(27);
     padding: 0;
+    margin: 2px;
   }
 
   // Toggler open/close element
@@ -164,12 +165,12 @@
   }
 
   &.-size-sm {
-    gap: toRem(5);
-    height: toRem(34);
-    padding-left: toRem(15);
-    padding-right: toRem(15);
-    font-size: toRem(13);
-    line-height: toRem(15);
+    gap: toRem(3);
+    height: toRem(30);
+    padding-left: toRem(12);
+    padding-right: toRem(12);
+    font-size: toRem(10);
+    line-height: toRem(13);
 
     &.-circle {
       width: toRem(34);
@@ -179,15 +180,15 @@
 
   &.-size-md {
     gap: toRem(5);
-    height: toRem(37);
-    padding-left: toRem(20);
-    padding-right: toRem(20);
-    font-size: toRem(14);
-    line-height: toRem(16);
+    height: toRem(34);
+    padding-left: toRem(15);
+    padding-right: toRem(15);
+    font-size: toRem(12);
+    line-height: toRem(14);
 
     &.-circle {
-      width: toRem(37);
-      height: toRem(37);
+      width: toRem(34);
+      height: toRem(34);
     }
 
     pry-icon,

package/styles/components/_a-color-picker.scss

@@ -5,6 +5,7 @@
   height: toRem(30);
   border-radius: toRem(15);
   position: relative;
+  box-shadow: 0px 4px 4px rgba(17, 59, 110, 0.24);
 
   &__modal {
     position: absolute;

package/styles/components/_m-filter.scss

@@ -3,6 +3,8 @@
 /* Molecule m-filter */
 
 .m-filter {
+  min-width: toRem(150);
+
   &__wrapper {
     display: flex;
     align-items: center;
@@ -13,9 +15,57 @@
     }
   }
 
+  &__input-wrapper {
+    display: flex;
+    border-radius: toRem(5);
+    padding: toRem(2) toRem(10);
+    align-items: center;
+
+    &:has(.pry-select) {
+      padding: toRem(1) toRem(10);
+    }
+
+    .ng-select-container {
+      border: none;
+      min-width: toRem(100);
+    }
+
+    .ng-select.ng-select-single .ng-select-container {
+      min-height: 22px;
+      height: 22px;
+    }
+
+    .ng-dropdown-panel.ng-select-bottom {
+      margin-top: 2px;
+    }
+
+    .ng-select.ng-select-focused:not(.ng-select-opened) > .ng-select-container{
+      border: none transparent;
+      box-shadow: none;
+    }
+  }
+
+  &__label {
+    cursor: none;
+    margin: 0;
+    align-self: center;
+    white-space: nowrap;
+  }
+
+  &__input {
+    outline: none;
+    min-height: toRem(20);
+    line-height: toRem(12);
+    padding: 0 toRem(2) toRem(1) toRem(1);
+  }
+
+  &__date-input-separator {
+    margin: 0 toRem(5);
+  }
+
   &__clear-wrapper {
     position: absolute;
-    bottom: toRem(8);
+    bottom: toRem(4);
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
@@ -31,6 +81,11 @@
     &--date {
       right: toRem(35);
     }
+
+    &--two-dates {
+      right: toRem(35);
+      bottom: toRem(0);
+    }
   }
 
   &__clear {
@@ -45,5 +100,5 @@
 pry-filter-instanciator {
   display: flex;
   justify-content: space-around;
-  padding: toRem(10);
+  padding: 0 toRem(10);
 }

package/styles/components/_o-about.scss

@@ -39,7 +39,7 @@
     width: 1.5rem;
     height: 1.5rem;
     border-radius: 50%;
-    background-color: #ccc;
+    border: 1px solid #3E546A;
     cursor: pointer;
     display: inline-flex;
     justify-content: center;

package/styles/components/_o-widget.scss

@@ -23,7 +23,7 @@
     overflow: auto;
     justify-content: space-between;
     width: 100%;
-    height: toRem(60);
+    height: toRem(32);
 
     &__content {
       display: flex;
@@ -45,9 +45,11 @@
           overflow: hidden;
           padding-left: toRem(10);
           padding-bottom: 0;
-          font-size: toRem(15);
+          font-size: toRem(14);
+          font-weight: 500;
           text-overflow: ellipsis;
           white-space: nowrap;
+          text-transform: uppercase;
         }
 
         &__color-point {

package/styles/layout/_o-workspace.scss

@@ -19,9 +19,31 @@
     padding: toRem(20);
 
     &__filters {
+      display: flex;
+      padding: toRem(8) toRem(10);
+      max-height: 50px; // needed for ng-select
+    }
+
+    &__filter-container {
       display: flex;
       justify-content: flex-start;
-      padding: toRem(10);
+      overflow-x: auto;
+      overflow-y: hidden;
+      margin-bottom: toRem(-5);
+      max-height: 50px; // needed for ng-select
+      padding: toRem(4) 0;
+
+      &:has(ng-dropdown-panel.ng-dropdown-panel) {
+        padding-bottom: 350px; // max ng-select dropdown length
+        background-clip: content-box, padding-box;
+      }
+    }
+
+    &__filter-actions {
+      display: flex;
+      align-items: center;
+      gap: toRem(10);
+      padding: 0 toRem(10);
     }
   }
 

package/styles-theme/abstracts-theme/variables/_variables-typo.scss

@@ -127,7 +127,16 @@ $theme-typography: (
     'letter-spacing': -1px,
     'font-weight': 700,
     'font-style': ''
-  )
+  ),
+  'tooltip': (
+    'font-family': '',
+    'font-variation': '',
+    'font-size': 12px,
+    'line-height': 14px,
+    'letter-spacing': '',
+    'font-weight': 400,
+    'font-style': ''
+  ),
 );
 
 ///// DO NOT EDIT FROM HERE /////

package/styles-theme/components-theme/_m-filter.theme.scss

@@ -1,7 +1,31 @@
 /* Theme - Atom a-icon */
 
-// colors that make the clear button look like the ng-select clear button
 .m-filter {
+  display: flex;
+  align-items: center;
+
+  &__input-wrapper {
+    border: 1px #BCCAD8 solid;
+    background: #ffffff;
+
+    .pry-select {
+      font-size: 12px;
+    }
+  }
+
+  &__label {
+    background: transparent;
+    font-size: 12px;
+    font-weight: bold;
+    color: #424B5A;
+  }
+
+  &__input {
+    border: none transparent;
+    font-size: 12px;
+  }
+
+  // colors that make the clear button look like the ng-select clear button
   &__clear-wrapper {
     color: #999999;
 

package/styles-theme/components-theme/_m-tooltip.theme.scss

@@ -7,11 +7,11 @@
   $this: &;
 
   &__text {
-    @include typography-level(themed($theme-map, 'typography', 'body'));
+    @include typography-level(themed($theme-map, 'typography', 'tooltip'));
   }
 
   &__description {
-    @include typography-level(themed($theme-map, 'typography', 'label'));
+    @include typography-level(themed($theme-map, 'typography', 'tooltip'));
   }
 
   &--popup,

package/styles-theme/components-theme/_o-pry-dataset.theme.scss

@@ -8,5 +8,5 @@
 }
 
 .info-icon {
-  background-color: #ccc;
+  //background-color: #ccc;
 }

package/widgets/widget-aggregated-chart/component/widget-aggregated-chart.component.d.ts

@@ -82,6 +82,7 @@ export declare class WidgetAggregatedChartComponent extends DataWidgetComponent
     openSettings(): void;
     openData(): void;
     private getTitle;
+    getChartConfig(): import("vega-lite").Config<import("vega").SignalRef>;
     changeChartTitle($event: string): void;
     changeType($event: GraphType): void;
     changeDonutSize($event: number): void;

package/widgets/widget-aggregated-chart/style/_o-widget-chart.scss

@@ -41,3 +41,8 @@
     }
   }
 }
+
+#vg-tooltip-element.vg-tooltip.custom-theme {
+  font-size: 12px;
+  font-family: 'Ubuntu', 'sans-serif';
+}

package/widgets/widget-table/style/_o-widget-table.scss

@@ -6,6 +6,7 @@
 .o-widget--table {
   display: flex;
   flex-direction: column;
+  font-size: toRem(12);
 
   .no-result {
     display: flex;
@@ -60,5 +61,19 @@
         opacity: 1;
       }
     }
+
+    thead tr, thead tr th {
+      height: toRem(30);
+      white-space: nowrap;
+    }
+
+    td, th {
+      margin: toRem(5);
+      padding: toRem(4.5);
+    }
+
+    .checkbox-wrapper {
+      height: auto;
+    }
   }
 }