- ;
-
@Input()
callbacks: LatestChartComponentCallbacks;
@@ -98,9 +95,9 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
private latestChart: TbLatestChart;
- constructor(private imagePipe: ImagePipe,
+ constructor(public widgetComponent: WidgetComponent,
+ private imagePipe: ImagePipe,
private sanitizer: DomSanitizer,
- private widgetComponent: WidgetComponent,
private renderer: Renderer2,
private translate: TranslateService,
private cd: ChangeDetectorRef) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
index 8880503eb5..39112c484b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
@@ -17,7 +17,14 @@
-->
- ;
-
showLegend: boolean;
legendClass: string;
@@ -86,7 +84,8 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
private timeSeriesChart: TbTimeSeriesChart;
- constructor(private imagePipe: ImagePipe,
+ constructor(public widgetComponent: WidgetComponent,
+ private imagePipe: ImagePipe,
private sanitizer: DomSanitizer,
private renderer: Renderer2,
private cd: ChangeDetectorRef) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
index 1ba501674e..1efcf30781 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
@@ -17,9 +17,14 @@
-->
-
-
-
-
-
+ formControlName="dsFilterId"
+ [callbacks]="context.callbacks">
+
-
-
+ @if (widgetComponent.dashboardWidget.showWidgetTitlePanel) {
+
+ } @else {
+ ;
-
horizontalLegendPosition = false;
showLegend: boolean;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
index 2b4b52ccfb..7bea76d325 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
@@ -793,7 +793,7 @@ export class TbTimeSeriesChart {
}
} else {
if (!axis.option.name) {
- axis.option.name = axis.settings.label;
+ axis.option.name = this.ctx.utilsService.customTranslation(axis.settings.label, axis.settings.label);
result.changed = true;
}
const nameGap = size;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/circles-data-layer.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/circles-data-layer.ts
index 9e25ddb486..2d3fc6b2fe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/circles-data-layer.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/circles-data-layer.ts
@@ -22,7 +22,7 @@ import {
TbMapDatasource
} from '@shared/models/widget/maps/map.models';
import L from 'leaflet';
-import { FormattedData } from '@shared/models/widget.models';
+import { DataKey, FormattedData } from '@shared/models/widget.models';
import { TbShapesDataLayer } from '@home/components/widget/lib/maps/data-layer/shapes-data-layer';
import { TbMap } from '@home/components/widget/lib/maps/map';
import { Observable } from 'rxjs';
@@ -213,9 +213,8 @@ export class TbCirclesDataLayer extends TbShapesDataLayer): Partial {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/map-data-layer.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/map-data-layer.ts
index 63d77c48b2..5dcb80ec41 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/map-data-layer.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/map-data-layer.ts
@@ -41,7 +41,7 @@ import L from 'leaflet';
import { CompiledTbFunction } from '@shared/models/js-function.models';
import { forkJoin, Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
-import { DataKey, FormattedData } from '@shared/models/widget.models';
+import { DataKey, DatasourceType, FormattedData } from '@shared/models/widget.models';
import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
import { TbMap } from '@home/components/widget/lib/maps/map';
import { WidgetContext } from '@home/models/widget-component.models';
@@ -170,7 +170,7 @@ export abstract class TbMapDataLayer {
- this.datasource = mapDataSourceSettingsToDatasource(this.settings);
- this.datasource.dataKeys = this.settings.additionalDataKeys ? [...this.settings.additionalDataKeys] : [];
- const colorRangeKeys = this.allColorSettings().filter(settings => settings.type === DataLayerColorType.range && settings.rangeKey)
- .map(settings => settings.rangeKey);
- this.datasource.dataKeys.push(...colorRangeKeys);
- this.mapDataId = this.datasource.mapDataIds[0];
- this.datasource = this.setupDatasource(this.datasource);
+ this.dataSources = [];
+ const datasource = mapDataSourceSettingsToDatasource(this.settings);
+ this.mapDataId = datasource.mapDataIds[0];
+ this.dataSources.push(datasource);
+ if (this.settings.additionalDataSources?.length && datasource.type !== DatasourceType.function) {
+ this.dataSources.push(...this.settings.additionalDataSources.map(ds => mapDataSourceSettingsToDatasource(ds, this.mapDataId)));
+ }
+ const dataKeys = this.calculateDataKeys();
+ const latestDataKeys = this.calculateLatestDataKeys();
+ this.dataSources.forEach(ds => ds.dataKeys.push(...dataKeys));
+ if (latestDataKeys?.length) {
+ this.dataSources.forEach(ds => ds.latestDataKeys.push(...latestDataKeys));
+ }
return forkJoin(
[
this.dataLayerLabelProcessor ? this.dataLayerLabelProcessor.setup() : of(null),
@@ -241,8 +247,8 @@ export abstract class TbMapDataLayer settings.type === DataLayerColorType.range && settings.rangeKey)
+ .map(settings => settings.rangeKey);
+ dataKeys.push(...colorRangeKeys);
+ dataKeys.push(...this.getDataKeys());
+ return dataKeys;
+ }
+
+ protected calculateLatestDataKeys(): DataKey[] {
+ return [];
+ }
+
+ protected getDataKeys(): DataKey[] {
+ return [];
}
protected allColorSettings(): DataLayerColorSettings[] {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/markers-data-layer.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/markers-data-layer.ts
index 3696435683..093cc265bb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/markers-data-layer.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/markers-data-layer.ts
@@ -37,7 +37,7 @@ import {
TbMapDatasource
} from '@shared/models/widget/maps/map.models';
import L, { FeatureGroup } from 'leaflet';
-import { FormattedData } from '@shared/models/widget.models';
+import { DataKey, FormattedData } from '@shared/models/widget.models';
import { forkJoin, Observable, of } from 'rxjs';
import { CompiledTbFunction } from '@shared/models/js-function.models';
import {
@@ -628,9 +628,8 @@ export class TbMarkersDataLayer extends TbLatestMapDataLayer): Partial {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/trips-data-layer.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/trips-data-layer.ts
index e598685786..ae2f62853e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/trips-data-layer.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/trips-data-layer.ts
@@ -351,10 +351,10 @@ class TbTripDataItem extends TbDataLayerItem 1) {
+ result[timeStamp[timeStamp.length - 1]].rotationAngle = result[timeStamp[timeStamp.length - 2]].rotationAngle;
+ }
+ } else if (this.settings.rotateMarker && timeStamp.length > 1) {
+ const startPoint = this.dataLayer.dataProcessor.extractLocation(result[timeStamp[timeStamp.length - 2]], dsData);
+ const endPoint = this.dataLayer.dataProcessor.extractLocation(result[timeStamp[timeStamp.length - 1]], dsData);
+ result[timeStamp[timeStamp.length - 1]].rotationAngle += findRotationAngle(startPoint, endPoint);
}
return result;
}
@@ -528,22 +535,33 @@ export class TbTripsDataLayer extends TbMapDataLayer settings.type === DataLayerColorType.range && settings.rangeKey)
- .map(settings => settings.rangeKey);
+ .map(settings => settings.rangeKey);
if (this.settings.additionalDataKeys?.length) {
additionalKeys.push(...this.settings.additionalDataKeys);
}
if (additionalKeys.length) {
const tsKeys = additionalKeys.filter(key => key.type === DataKeyType.timeseries);
+ dataKeys.push(...tsKeys);
+ }
+ return dataKeys;
+ }
+
+ protected calculateLatestDataKeys(): DataKey[] {
+ const additionalKeys = this.allColorSettings().filter(settings => settings.type === DataLayerColorType.range && settings.rangeKey)
+ .map(settings => settings.rangeKey);
+ if (this.settings.additionalDataKeys?.length) {
+ additionalKeys.push(...this.settings.additionalDataKeys);
+ }
+ if (additionalKeys.length) {
const latestKeys = additionalKeys.filter(key => key.type !== DataKeyType.timeseries);
- datasource.dataKeys.push(...tsKeys);
if (latestKeys.length) {
- datasource.latestDataKeys = latestKeys;
+ return latestKeys;
}
}
- return datasource;
+ return [];
}
protected allColorSettings(): DataLayerColorSettings[] {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.html
index b45869addf..e64ee71170 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.html
@@ -17,9 +17,14 @@
-->
;
-
backgroundStyle$: Observable;
overlayStyle: ComponentStyle = {};
padding: string;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
index 72f075e8f1..f1bb414878 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
@@ -308,7 +308,8 @@ export abstract class TbMap {
() => {
let datasources: TbMapDatasource[];
for (const layerType of mapDataLayerTypes) {
- const typeDatasources = this.latestDataLayers.filter(dl => dl.dataLayerType() === layerType).map(dl => dl.getDatasource());
+ const typeDatasources = this.latestDataLayers.filter(dl => dl.dataLayerType() === layerType)
+ .map(dl => dl.getDataSources()).flat();
if (!datasources) {
datasources = typeDatasources;
} else {
@@ -349,7 +350,7 @@ export abstract class TbMap {
);
}
if (this.tripDataLayers.length) {
- const tripDatasources = this.tripDataLayers.map(dl => dl.getDatasource());
+ const tripDatasources = this.tripDataLayers.map(dl => dl.getDataSources()).flat();
const tripDataLayersSubscriptionOptions: WidgetSubscriptionOptions = {
datasources: tripDatasources,
hasDataPageLink: true,
@@ -926,7 +927,7 @@ export abstract class TbMap {
private calculateCurrentTime(minTime: number, maxTime: number): number {
if (minTime !== this.minTime || maxTime !== this.maxTime) {
- if (this.minTime >= this.currentTime || isUndefined(this.currentTime)) {
+ if (this.minTime >= this.currentTime || isUndefined(this.currentTime) || this.currentTime === Infinity) {
return this.minTime;
} else if (this.maxTime <= this.currentTime) {
return this.maxTime;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.ts
index 7044ffa5fe..f9d0fa6d07 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.ts
@@ -202,7 +202,10 @@ export class MapTimelinePanelComponent implements OnInit, OnDestroy {
public moveNext() {
if (this.index < this.maxTimeIndex) {
if (this.settings.snapToRealLocation) {
- const anchorIndex = this.findIndex(this.currentTime, this.anchors) + 1;
+ let anchorIndex = this.findIndex(this.currentTime, this.anchors) + 1;
+ if (anchorIndex >= this.anchors.length) {
+ anchorIndex = this.anchors.length - 1;
+ }
this.index = Math.floor((this.anchors[anchorIndex] - this.minValue) / this.settings.timeStep);
} else {
this.index++;
@@ -214,7 +217,10 @@ export class MapTimelinePanelComponent implements OnInit, OnDestroy {
public movePrev() {
if (this.index > this.minTimeIndex) {
if (this.settings.snapToRealLocation) {
- const anchorIndex = this.findIndex(this.currentTime, this.anchors) - 1;
+ let anchorIndex = this.findIndex(this.currentTime, this.anchors) - 1;
+ if (anchorIndex < 0) {
+ anchorIndex = 0;
+ }
this.index = Math.floor((this.anchors[anchorIndex] - this.minValue) / this.settings.timeStep);
} else {
this.index--;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
index dc56c2a328..68d849fd0c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
@@ -105,6 +105,17 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
const params = widgetConfig.typeParameters as any;
if (isDefinedAndNotNull(params.chartType)) {
this.chartType = params.chartType;
+ } else {
+ this.chartType = TimeSeriesChartType.default;
+ }
+ if (this.timeSeriesChartWidgetSettingsForm) {
+ const isStateChartType = this.chartType === TimeSeriesChartType.state;
+ const hasStatesControl = this.timeSeriesChartWidgetSettingsForm.contains('states');
+ if (isStateChartType && !hasStatesControl) {
+ this.timeSeriesChartWidgetSettingsForm.addControl('states', this.fb.control(widgetConfig.config.settings.states), { emitEvent: false });
+ } else if (!isStateChartType && hasStatesControl) {
+ this.timeSeriesChartWidgetSettingsForm.removeControl('states', { emitEvent: false });
+ }
}
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
index a2a0e8c8fa..5c735010f1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
@@ -37,7 +37,7 @@
-
+
{{ widgetActionTypeTranslations.get(widgetActionType[actionType]) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.ts
index bd0fe36910..698645bacf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.ts
@@ -26,7 +26,7 @@ import {
ValidatorFn,
Validators
} from '@angular/forms';
-import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, computed, ElementRef, forwardRef, input, Input, OnInit, ViewChild } from '@angular/core';
import {
MapItemType,
mapItemTypeTranslationMap,
@@ -102,19 +102,16 @@ export class WidgetActionComponent implements ControlValueAccessor, OnInit, Vali
@Input()
actionNames: string[];
- @Input()
- set additionalWidgetActionTypes(value: WidgetActionType[]) {
- if (this.widgetActionFormGroup && !widgetActionTypes.includes(this.widgetActionFormGroup.get('type').value)) {
- this.widgetActionFormGroup.get('type').setValue(WidgetActionType.doNothing);
- }
- if (value?.length) {
- this.widgetActionTypes = widgetActionTypes.concat(value);
- } else {
- this.widgetActionTypes = widgetActionTypes;
+ additionalWidgetActionTypes = input(null);
+
+ actionTypes = computed(() => {
+ const predefinedActionTypes = widgetActionTypes;
+ if (this.additionalWidgetActionTypes()?.length) {
+ return predefinedActionTypes.concat(this.additionalWidgetActionTypes());
}
- }
+ return predefinedActionTypes;
+ });
- widgetActionTypes = widgetActionTypes;
widgetActionTypeTranslations = widgetActionTypeTranslationMap;
widgetActionType = WidgetActionType;
@@ -191,9 +188,6 @@ export class WidgetActionComponent implements ControlValueAccessor, OnInit, Vali
).subscribe(() => {
this.widgetActionUpdated();
});
- if (this.additionalWidgetActionTypes) {
- this.widgetActionTypes = this.widgetActionTypes.concat(this.additionalWidgetActionTypes);
- }
}
writeValue(widgetAction?: WidgetAction): void {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html
index 5e67638092..ff1bcb06a4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html
@@ -15,9 +15,14 @@
limitations under the License.
-->
-
- {{ 'filter.filter' | translate }}
-
+ {{ 'filter.filter' | translate }}
+
-
-
+
-
-
+ @if (widgetComponent.dashboardWidget.showWidgetTitlePanel) {
+
+ } @else {
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.scss
index 88157426f3..eab92a664f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.scss
@@ -34,4 +34,10 @@
div.tb-widget-title {
padding: 0;
}
+ .tb-widget-title-row .tb-widget-actions {
+ margin: 0;
+ }
+ .tb-widget-actions.tb-widget-actions-absolute {
+ z-index: 2;
+ }
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts
index 013a6c88a9..4ef3c3cd45 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts
@@ -21,7 +21,6 @@ import {
Input,
OnDestroy,
OnInit,
- TemplateRef,
ViewChild,
ViewEncapsulation
} from '@angular/core';
@@ -55,9 +54,6 @@ export class MapWidgetComponent implements OnInit, OnDestroy {
@Input()
ctx: WidgetContext;
- @Input()
- widgetTitlePanel: TemplateRefwidget-config.action
{{ 'datakey.keys' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts
index ae752ebca7..e7e11284eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts
@@ -180,6 +180,7 @@ export class MapDataLayerDialogComponent extends DialogComponent