#32 improving time range options

Cumulocity-IoT · Sep 30, 2024 · 88446b1 · 88446b1
1 parent 7dff684
commit 88446b1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 20 deletions.
diff --git a/...pp/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.html b/...pp/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.html
@@ -27,12 +27,6 @@
             >
               {{ 'Widget configuration' | translate }}
             </option>
-            <option
-              title="{{ 'Widget and widget configuration' | translate }}"
-              [value]="DATE_SELECTION.VIEW_AND_CONFIG"
-            >
-              {{ 'Widget and widget configuration' | translate }}
-            </option>
             <option
               title="{{ 'Dashboard time range' | translate }}"
               [value]="DATE_SELECTION.DASHBOARD_CONTEXT"
@@ -47,6 +41,31 @@
         <label>{{ 'Display options' | translate }}</label>
         <fieldset class="c8y-fieldset m-b-24 m-t-0">
           <c8y-form-group class="p-b-16 m-b-0 p-t-8">
+            <label
+              [title]="'Enable date selection in the widget view.' | translate"
+              class="c8y-checkbox"
+            >
+              <input
+                type="checkbox"
+                formControlName="displayDateSelection"
+                name="displayDateSelection"
+              />
+              <span></span>
+              <span translate>Date selection in the widget view.</span>
+              <button
+                *ngIf="dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT"
+                [tooltip]="
+                  'Date selection in widget view is not possible when using dashboard time range.'
+                    | translate
+                "
+                container="body"
+                (click)="$event.stopPropagation()"
+                [adaptivePosition]="false"
+                class="btn-clean m-l-8"
+              >
+                <i c8yIcon="info" class="text-info"></i>
+              </button>
+            </label>
             <label
               [title]="'Aggregation selection' | translate"
               class="c8y-checkbox"

diff --git a/src/app/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.ts b/src/app/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.ts
@@ -154,19 +154,15 @@ export class DatapointsGraphWidgetConfigComponent
   }
 
   dateSelectionChange(dateSelection: DATE_SELECTION): void {
+    this.dateSelection = dateSelection;
     if (dateSelection === DATE_SELECTION.CONFIG) {
+      this.formGroup.controls.displayDateSelection.enable();
       this.formGroup.patchValue({
-        displayDateSelection: false,
         widgetInstanceGlobalTimeContext: false,
       });
-    } else if (dateSelection === DATE_SELECTION.VIEW_AND_CONFIG) {
-      this.formGroup.patchValue({
-        displayDateSelection: true,
-        widgetInstanceGlobalTimeContext: false,
-      });
-    } else if (dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT) {
+    } else {
+      this.formGroup.controls.displayDateSelection.disable();
       this.formGroup.patchValue({
-        displayDateSelection: false,
         widgetInstanceGlobalTimeContext: true,
         realtime: false,
       });
@@ -216,12 +212,11 @@ export class DatapointsGraphWidgetConfigComponent
   }
 
   private initDateSelection(): void {
-    if (this.config?.widgetInstanceGlobalTimeContext) {
-      this.dateSelection = DATE_SELECTION.DASHBOARD_CONTEXT;
-    } else if (this.config?.displayDateSelection) {
-      this.dateSelection = DATE_SELECTION.VIEW_AND_CONFIG;
-    } else {
+    if (!this.config?.widgetInstanceGlobalTimeContext) {
       this.dateSelection = DATE_SELECTION.CONFIG;
+    } else {
+      this.dateSelection = DATE_SELECTION.DASHBOARD_CONTEXT;
+      this.formGroup.controls.displayDateSelection.disable();
     }
   }
 

diff --git a/src/app/datapoints-graph/model/datapoints-graph-widget.model.ts b/src/app/datapoints-graph/model/datapoints-graph-widget.model.ts
@@ -49,7 +49,6 @@ export type DatapointsGraphWidgetTimeProps = Partial<
 
 export enum DATE_SELECTION {
   CONFIG = 'config',
-  VIEW_AND_CONFIG = 'view_and_config',
   DASHBOARD_CONTEXT = 'dashboard_context',
 }