Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Makes ng-gauge highlights width configurable #445

Merged
merged 10 commits into from
Aug 4, 2024
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions src/app/core/interfaces/widgets-interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,8 @@ export interface IWidgetSvcConfig {
rotateFace?: boolean;
/** Optional. GaugeSteel digital or bar */
digitalMeter?: boolean;
/** Optional. Width of gauge highlights */
highlightsWidth?: number;
}
/** Used by numeric data Widget: Display minimum registered value since started */
showMin?: boolean;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,6 @@
</mat-checkbox>
</div>
} @else if ( ['measuring','capacity'].indexOf(formMaster.value.gauge.subType) > -1 ) {

<mat-form-field formGroupName="gauge" class="options-grid-span2">
<mat-label>Gauge Type</mat-label>
<mat-select
Expand All @@ -168,7 +167,6 @@
<mat-option value="capacity">Capacity</mat-option>
</mat-select>
</mat-form-field>

}
}

Expand All @@ -185,6 +183,13 @@
</mat-form-field>
}

@if ( (widgetConfig.gauge?.type == 'ngRadial' && ['measuring','capacity'].includes(formMaster.value.gauge.subType)) || widgetConfig.gauge?.type == 'ngLinear') {
<mat-form-field formGroupName="gauge" class="options-grid-span2">
<mat-label>Highlights Width</mat-label>
<input type="number" min="0" max="25" matInput placeholder="Enter or select number..." name="highlightsWidth" formControlName="highlightsWidth" required>
</mat-form-field>
}

@if (widgetConfig.gauge?.type == 'simpleLinear') {
<mat-form-field formGroupName="gauge" class="options-grid-span2">
<mat-label>Unit Label</mat-label>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export class WidgetGaugeNgLinearComponent extends BaseWidgetComponent implements
type: 'ngLinear',
subType: 'vertical', // vertical or horizontal
enableTicks: true,
highlightsWidth: 5,
},
numInt: 1,
numDecimal: 0,
Expand Down Expand Up @@ -252,7 +253,7 @@ export class WidgetGaugeNgLinearComponent extends BaseWidgetComponent implements
needleSide: "both",

highlights: [],
highlightsWidth: 0,
highlightsWidth: this.widgetProperties.config.gauge.highlightsWidth,

animation: true,
animationRule: "linear",
Expand Down Expand Up @@ -358,7 +359,7 @@ export class WidgetGaugeNgLinearComponent extends BaseWidgetComponent implements
};
//@ts-ignore
let highlights: LinearGaugeOptions = {};
highlights.highlightsWidth = 5;
highlights.highlightsWidth = this.widgetProperties.config.gauge.highlightsWidth;
//@ts-ignore - bug in highlights property definition
highlights.highlights = JSON.stringify(gaugeZonesHighlight, null, 1);
this.linearGauge.update(highlights);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@ export class WidgetGaugeNgRadialComponent extends BaseWidgetComponent implements
type: 'ngRadial', // capacity, measuring, marineCompass, baseplateCompass
subType: 'measuring', // capacity, measuring, marineCompass, baseplateCompass
enableTicks: true,
compassUseNumbers: false
compassUseNumbers: false,
highlightsWidth: 5,
},
numInt: 1,
numDecimal: 0,
Expand Down Expand Up @@ -129,7 +130,7 @@ export class WidgetGaugeNgRadialComponent extends BaseWidgetComponent implements
});

this.metaSub = this.zones$.subscribe(zones => {
if (zones && zones.length > 0 && this.widgetProperties.config.gauge.subType == "measuring") {
if (zones && zones.length > 0 && ["capacity", "measuring"].includes(this.widgetProperties.config.gauge.subType)) {
this.setHighlights(zones);
}
});
Expand Down Expand Up @@ -171,7 +172,7 @@ export class WidgetGaugeNgRadialComponent extends BaseWidgetComponent implements
this.gaugeOptions.valueDec = this.widgetProperties.config.numDecimal !== undefined && this.widgetProperties.config.numDecimal !== null ? this.widgetProperties.config.numDecimal : 2;
this.gaugeOptions.majorTicksInt = this.widgetProperties.config.numInt !== undefined && this.widgetProperties.config.numInt !== null ? this.widgetProperties.config.numInt : 1;
this.gaugeOptions.majorTicksDec = this.widgetProperties.config.numDecimal !== undefined && this.widgetProperties.config.numDecimal !== null ? this.widgetProperties.config.numDecimal : 2;
this.gaugeOptions.highlightsWidth = 0;
this.gaugeOptions.highlightsWidth = this.widgetProperties.config.gauge.highlightsWidth;

this.gaugeOptions.animation = true;
this.gaugeOptions.animateOnInit = false;
Expand Down Expand Up @@ -379,7 +380,7 @@ export class WidgetGaugeNgRadialComponent extends BaseWidgetComponent implements
};
//@ts-ignore
let highlights: LinearGaugeOptions = {};
highlights.highlightsWidth = 5;
highlights.highlightsWidth = this.widgetProperties.config.gauge.highlightsWidth;
//@ts-ignore - bug in highlights property definition
highlights.highlights = JSON.stringify(gaugeZonesHighlight, null, 1);
this.radialGauge.update(highlights);
Expand Down