min/max of y-axis #634 #736

frangoteam · Mar 23, 2023 · aab727c · aab727c
1 parent 831b1a9
commit aab727c
Show file tree

Hide file tree

Showing 17 changed files with 178 additions and 76 deletions.
diff --git a/client/dist/index.html b/client/dist/index.html
@@ -30,7 +30,7 @@
     <script src="assets/lib/svg/svg.min.js"></script>
     <script src="assets/lib/svg/raphael.min.js"></script>
 
-<style>@font-face{font-family:Roboto-Regular;src:local("Roboto Regular"),local("Roboto-Regular"),url(roboto-regular-webfont.f58066a2d9061006.woff) format("woff"),url(roboto-regular-webfont.ae47f6f1292d196f.woff2) format("woff2"),url(roboto-regular-webfont.2b0501b72f5a94d5.ttf) format("truetype"),url(roboto-regular-webfont.2ce0ba9a06424965.svg) format("svg")}html{height:100%;position:relative;background-color:#fff;font-family:Segoe UI Symbol,Roboto-Regular,Helvetica Neue,sans-serif;font-weight:300}body{height:100%;margin:0;font-family:Segoe UI Symbol,Roboto-Regular,Helvetica Neue,sans-serif;font-weight:300;background-color:#fff}*{text-decoration:none;scrollbar-width:thin}*:focus{outline:none}app-root{display:block;height:100%}.logo{display:block;text-indent:-9999px;width:30px;height:30px;background:url(logo.0e8e64e69250a450.svg);background-size:30px 30px}</style><link rel="stylesheet" href="styles.104b904bdfa54abe.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.104b904bdfa54abe.css"></noscript></head>
+<style>@font-face{font-family:Roboto-Regular;src:local("Roboto Regular"),local("Roboto-Regular"),url(roboto-regular-webfont.f58066a2d9061006.woff) format("woff"),url(roboto-regular-webfont.ae47f6f1292d196f.woff2) format("woff2"),url(roboto-regular-webfont.2b0501b72f5a94d5.ttf) format("truetype"),url(roboto-regular-webfont.2ce0ba9a06424965.svg) format("svg")}html{height:100%;position:relative;background-color:#fff;font-family:Segoe UI Symbol,Roboto-Regular,Helvetica Neue,sans-serif;font-weight:300}body{height:100%;margin:0;font-family:Segoe UI Symbol,Roboto-Regular,Helvetica Neue,sans-serif;font-weight:300;background-color:#fff}*{text-decoration:none;scrollbar-width:thin}*:focus{outline:none}app-root{display:block;height:100%}.logo{display:block;text-indent:-9999px;width:30px;height:30px;background:url(logo.0e8e64e69250a450.svg);background-size:30px 30px}</style><link rel="stylesheet" href="styles.a26181b2c641f0d9.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.a26181b2c641f0d9.css"></noscript></head>
 <!-- 3. Display the application -->
 
 <body>
@@ -45,6 +45,6 @@
             </div>
         </div>
     </app-root>
-<script src="runtime.baefb0096c638cd1.js" type="module"></script><script src="polyfills.15e52e6eacaabf13.js" type="module"></script><script src="scripts.4caafee715dae69c.js" defer></script><script src="main.e30a4fa9967c3625.js" type="module"></script>
+<script src="runtime.baefb0096c638cd1.js" type="module"></script><script src="polyfills.15e52e6eacaabf13.js" type="module"></script><script src="scripts.4caafee715dae69c.js" defer></script><script src="main.c0c03e1e671134f9.js" type="module"></script>
 
 </body></html>
diff --git a/client/dist/main.e30a4fa9967c3625.js → client/dist/main.c0c03e1e671134f9.js b/client/dist/main.e30a4fa9967c3625.js → client/dist/main.c0c03e1e671134f9.js
diff --git a/client/dist/styles.104b904bdfa54abe.css b/client/dist/styles.104b904bdfa54abe.css
diff --git a/client/dist/styles.a26181b2c641f0d9.css b/client/dist/styles.a26181b2c641f0d9.css
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fuxa",
-  "version": "1.1.12-1148",
+  "version": "1.1.12-1149",
   "keywords": [],
   "author": "frangoteam <[email protected]>",
   "description": "Web-based Process Visualization (SCADA/HMI/Dashboard) software",

diff --git a/client/src/app/_directives/stop-input-propagation.directive.ts b/client/src/app/_directives/stop-input-propagation.directive.ts
@@ -0,0 +1,20 @@
+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[stopInputPropagation]'
+})
+export class StopInputPropagationDirective implements AfterViewInit  {
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngAfterViewInit() {
+    const container = this.elementRef.nativeElement;
+    const inputs = container.querySelectorAll('input');
+    inputs.forEach(input => {
+
+      input.addEventListener('keydown', (event: Event) => {
+        event.stopPropagation();
+      });
+    });
+  }
+}
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
@@ -161,6 +161,7 @@ import { ScriptModeComponent } from './scripts/script-mode/script-mode.component
 import { DeviceWebapiPropertyDialogComponent } from './device/device-map/device-webapi-property-dialog/device-webapi-property-dialog.component';
 import { SvgSelectorComponent } from './editor/svg-selector/svg-selector.component';
 import { FrameworkModule } from './framework/framework.module';
+import { StopInputPropagationDirective } from './_directives/stop-input-propagation.directive';
 
 export function createTranslateLoader(http: HttpClient) {
     return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -236,6 +237,7 @@ export function createTranslateLoader(http: HttpClient) {
         EscapeHtmlPipe,
         DraggableDirective,
         NumberOnlyDirective,
+        StopInputPropagationDirective,
         NumberOrNullOnlyDirective,
         NgxFabButtonComponent,
         NgxFabItemButtonComponent,

diff --git a/client/src/app/gauges/controls/html-chart/chart-property/chart-property.component.html b/client/src/app/gauges/controls/html-chart/chart-property/chart-property.component.html
@@ -1,4 +1,4 @@
-<div class="element-property">
+<div stopInputPropagation class="element-property">
     <div class="element-property-title">
         {{'editor.controls-chart-settings' | translate}}
     </div>
@@ -7,11 +7,11 @@
             <span>{{'chart.property-data' | translate}}</span>
         </div>
         <div class="_section-newline">
-            <div class="my-form-field section-item section-item-block">
+            <div class="my-form-field field-block lbk">
                 <span>{{'chart.property-name' | translate}}</span>
                 <input [(ngModel)]="data.settings.name" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="text">
             </div>
-            <div class="my-form-field section-item section-item-block">
+            <div class="my-form-field field-block lbk">
                 <span>{{'chart.property-chart' | translate}}</span>
                 <mat-select [formControl]="chartCtrl" (selectionChange)="onChartChanged()">
                     <mat-select-search [formControl]="chartFilterCtrl"></mat-select-search>
@@ -39,7 +39,7 @@
                     </mat-option>
                 </mat-select>
             </div>
-            <div *ngIf="chartViewValue === chartViewRealtime" class="my-form-field section-inline-number section-item">
+            <div *ngIf="chartViewValue === chartViewRealtime" class="my-form-field field-number lbk section-item">
                 <span style="width: 100px">{{'chart.property-realtime-max' | translate}}</span>
                 <input numberOnly [(ngModel)]="options.realtime"  (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number" min="1">
             </div>            
@@ -55,12 +55,12 @@
                 </mat-select>
             </div>
             <div class="section-inline-margin"></div>
-            <div class="my-form-field section-inline-number section-toogle">
+            <div class="my-form-field field-number lbk section-toogle">
                 <span>{{'chart.property-font.titlesize' | translate}}</span>
                 <input numberOnly [(ngModel)]="options.titleHeight" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number" min="0" max="36">
             </div>
             <div class="section-inline-margin"></div>
-            <div class="my-form-field section-inline-number section-toogle">
+            <div class="my-form-field field-number lbk section-toogle">
                 <span>{{'chart.property-font.axissize' | translate}}</span>
                 <input numberOnly [(ngModel)]="options.axisLabelFontSize" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number" min="0" max="24">
             </div>
@@ -94,25 +94,62 @@
             <div class="element-property-header">
                 <span>{{'chart.property-yaxis' | translate}}</span>
             </div>
-            <div class="my-form-field section-inline-text">
-                <span>{{'chart.property-axis-y1' | translate}}</span>
-                <input [(ngModel)]="options.axisLabelY1" type="text" (change)="onChartChanged()">
-            </div>
-            <div class="section-inline-margin-s"></div>
-            <div class="my-form-field section-inline-text">
-                <span>{{'chart.property-axis-y2' | translate}}</span>
-                <input [(ngModel)]="options.axisLabelY2" type="text" (change)="onChartChanged()">
-            </div>
-            <div class="section-inline-margin-s"></div>
-            <div class="my-form-field section-inline-text">
-                <span>{{'chart.property-axis-y3' | translate}}</span>
-                <input [(ngModel)]="options.axisLabelY3" type="text" (change)="onChartChanged()">
-            </div>
-            <div class="section-inline-margin-s"></div>
-            <div class="my-form-field section-inline-text">
-                <span>{{'chart.property-axis-y4' | translate}}</span>
-                <input [(ngModel)]="options.axisLabelY4" type="text" (change)="onChartChanged()">
-            </div>
+            <div class="block">
+                <div class="my-form-field field-text">
+                    <span>{{'chart.property-axis-y1' | translate}}</span>
+                    <input [(ngModel)]="options.axisLabelY1" type="text" (change)="onChartChanged()">
+                </div>
+                <div class="my-form-field field-number ml5">
+                    <span>{{'chart.property-axis-y1-min' | translate}}</span>
+                    <input [(ngModel)]="options.scaleY1min" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number">
+                </div>
+                <div class="my-form-field field-number ml12">
+                    <span>{{'chart.property-axis-y1-max' | translate}}</span>
+                    <input [(ngModel)]="options.scaleY1max" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number">
+                </div>
+            </div>
+            <div class="block">
+                <div class="my-form-field field-text lbk">
+                    <span>{{'chart.property-axis-y2' | translate}}</span>
+                    <input [(ngModel)]="options.axisLabelY2" type="text" (change)="onChartChanged()">
+                </div>
+                <div class="my-form-field field-number ml5">
+                    <span>{{'chart.property-axis-y2-min' | translate}}</span>
+                    <input [(ngModel)]="options.scaleY2min" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number">
+                </div>
+                <div class="my-form-field field-number ml12">
+                    <span>{{'chart.property-axis-y2-max' | translate}}</span>
+                    <input [(ngModel)]="options.scaleY2max" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number">
+                </div>
+            </div>            
+            <div class="block">
+                <div class="my-form-field field-text lbk">
+                    <span>{{'chart.property-axis-y3' | translate}}</span>
+                    <input [(ngModel)]="options.axisLabelY3" type="text" (change)="onChartChanged()">
+                </div>
+                <div class="my-form-field field-number ml5">
+                    <span>{{'chart.property-axis-y3-min' | translate}}</span>
+                    <input [(ngModel)]="options.scaleY3min" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number">
+                </div>
+                <div class="my-form-field field-number ml12">
+                    <span>{{'chart.property-axis-y3-max' | translate}}</span>
+                    <input [(ngModel)]="options.scaleY3max" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number">
+                </div>
+            </div>                     
+            <div class="block">
+                <div class="my-form-field field-text lbk">
+                    <span>{{'chart.property-axis-y4' | translate}}</span>
+                    <input [(ngModel)]="options.axisLabelY4" type="text" (change)="onChartChanged()">
+                </div>
+                <div class="my-form-field field-number ml5">
+                    <span>{{'chart.property-axis-y4-min' | translate}}</span>
+                    <input [(ngModel)]="options.scaleY4min" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number">
+                </div>
+                <div class="my-form-field field-number ml12">
+                    <span>{{'chart.property-axis-y4-max' | translate}}</span>
+                    <input [(ngModel)]="options.scaleY4max" (change)="onChartChanged()" (keyup.enter)="onChartChanged()" type="number">
+                </div>
+            </div>                    
                     <!-- <div class="my-form-field slider-field" style="padding-left: 12px">
                         <span>{{'chart.property-scala.auto' | translate}}</span>
                         <mat-slide-toggle color="primary" [(ngModel)]="autoScala.enabled" (change)="onChangeOptions('autoscala', $event.value)"></mat-slide-toggle>

diff --git a/...art-property/chart-property.component.css → ...rt-property/chart-property.component.scss b/...art-property/chart-property.component.css → ...rt-property/chart-property.component.scss
@@ -3,35 +3,34 @@
     top: 35px;
     bottom: 0px;
     overflow: auto;
+    width: 340px;
 }
 
 .section-item {
     width: 100%;
 }
 
-.section-item-block mat-select, span {
-    width:calc(100% - 15px);
-}
-
-.section-inline-text {
-    display: inline-block;
+.field-block {
+    width: 100%;
+    mat-select, input, span {
+        width:calc(100% - 15px);
+    }
 }
 
-.section-inline-text input {
+.field-text input {
     width: 70px;
 }
 
-.section-inline-number {
-    display: inline-block;
+.field-number {
     width: 60px;
 }
 
-.section-inline-number input {
+.field-number input {
     width: inherit;
     text-align: center;
 }
 
-.section-inline-number span {
+.field-number span {
     width: 65px;
     text-align: left;
 }

diff --git a/client/src/app/gauges/controls/html-chart/chart-property/chart-property.component.ts b/client/src/app/gauges/controls/html-chart/chart-property/chart-property.component.ts
@@ -9,16 +9,17 @@ import { TranslateService } from '@ngx-translate/core';
 
 import { GaugeChartProperty, DateFormatType, TimeFormatType } from '../../../../_models/hmi';
 import { Chart, ChartViewType, ChartLegendMode, ChartRangeType } from '../../../../_models/chart';
-import { ChartOptions, ChartUplotComponent } from '../chart-uplot/chart-uplot.component';
+import { ChartUplotComponent } from '../chart-uplot/chart-uplot.component';
 import { ChartConfigComponent } from '../../../../editor/chart-config/chart-config.component';
 import { Define } from '../../../../_helpers/define';
 import { Utils } from '../../../../_helpers/utils';
+import { ChartOptions } from '../../../../gui-helpers/ngx-uplot/ngx-uplot.component';
 
 
 @Component({
     selector: 'app-chart-property',
     templateUrl: './chart-property.component.html',
-    styleUrls: ['./chart-property.component.css']
+    styleUrls: ['./chart-property.component.scss']
 })
 export class ChartPropertyComponent implements OnInit, OnDestroy {
 

diff --git a/client/src/app/gauges/controls/html-chart/chart-uplot/chart-uplot.component.ts b/client/src/app/gauges/controls/html-chart/chart-uplot/chart-uplot.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild, Input, Output, EventEmitter, ElementRef } from '@angular/core';
 
 import { ChartLegendMode, ChartRangeType, ChartRangeConverter, ChartLine } from '../../../../_models/chart';
-import { NgxUplotComponent, NgxOptions, NgxSeries } from '../../../../gui-helpers/ngx-uplot/ngx-uplot.component';
+import { NgxUplotComponent, NgxSeries, ChartOptions } from '../../../../gui-helpers/ngx-uplot/ngx-uplot.component';
 import { DaqQuery, DateFormatType, TimeFormatType, IDateRange } from '../../../../_models/hmi';
 import { Utils } from '../../../../_helpers/utils';
 import { TranslateService } from '@ngx-translate/core';
@@ -369,31 +369,3 @@ export class ChartUplotComponent implements OnInit, AfterViewInit, OnDestroy {
         this.chartPanel.nativeElement.style.backgroundColor = this.options.colorBackground;
     }
 }
-
-export interface ChartOptions extends NgxOptions {
-    /** chart panel size, with from toolbar to legend */
-    panel?: { height: number; width: number };
-    /** when true, null data values will not cause line breaks, Series.spanGaps */
-    connectSeparatedPoints?: boolean;
-
-    titleHeight?: number;
-    axisLabelFontSize?: number;
-    axisLabelWidth?: number;
-    labelsDivWidth?: number;
-    axisLineColor?: string;
-    axisLabelColor?: string;
-    gridLineColor?: string;
-    axisLabelX?: string;
-    axisLabelY1?: string;
-    axisLabelY2?: string;
-    axisLabelY3?: string;
-    axisLabelY4?: string;
-
-    fontFamily?: string;
-    legendFontSize?: number;
-    colorBackground?: string;
-    legendBackground?: string;
-    legendMode?: string;
-    realtime?: number;
-    lastRange?: string;
-}
diff --git a/client/src/app/gauges/controls/html-chart/html-chart.component.ts b/client/src/app/gauges/controls/html-chart/html-chart.component.ts
@@ -4,7 +4,8 @@ import { GaugeSettings, Variable, GaugeStatus } from '../../../_models/hmi';
 import { Utils } from '../../../_helpers/utils';
 import { GaugeDialogType } from '../../gauge-property/gauge-property.component';
 
-import { ChartUplotComponent, ChartOptions } from './chart-uplot/chart-uplot.component';
+import { ChartUplotComponent } from './chart-uplot/chart-uplot.component';
+import { ChartOptions } from '../../../gui-helpers/ngx-uplot/ngx-uplot.component';
 
 @Component({
     selector: 'html-chart',

diff --git a/client/src/app/gauges/controls/html-graph/graph-property/graph-property.component.css b/client/src/app/gauges/controls/html-graph/graph-property/graph-property.component.css
@@ -3,6 +3,7 @@
     top: 35px;
     bottom: 0px;
     overflow: auto;
+    width: 340px;
 }
 
 .section-item {

diff --git a/client/src/app/gauges/gauges.component.ts b/client/src/app/gauges/gauges.component.ts
@@ -25,13 +25,14 @@ import { SliderComponent } from './controls/slider/slider.component';
 
 import { WindowRef } from '../_helpers/windowref';
 import { Utils } from '../_helpers/utils';
-import { ChartUplotComponent, ChartOptions } from './controls/html-chart/chart-uplot/chart-uplot.component';
+import { ChartUplotComponent } from './controls/html-chart/chart-uplot/chart-uplot.component';
 import { NgxGaugeComponent } from '../gui-helpers/ngx-gauge/ngx-gauge.component';
 import { NgxNouisliderComponent } from '../gui-helpers/ngx-nouislider/ngx-nouislider.component';
 import { GraphBaseComponent } from './controls/html-graph/graph-base/graph-base.component';
 import { HtmlIframeComponent } from './controls/html-iframe/html-iframe.component';
 import { HtmlTableComponent } from './controls/html-table/html-table.component';
 import { DataTableComponent } from './controls/html-table/data-table/data-table.component';
+import { ChartOptions } from '../gui-helpers/ngx-uplot/ngx-uplot.component';
 
 @Injectable()
 export class GaugesManager {