You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2020/09/22 13:49:17 UTC
[incubator-streampipes] 02/02: Add grouping to maps dashboard widget
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 19730246387ba670337f2342d6981a1e915e9305
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Tue Sep 22 15:48:43 2020 +0200
Add grouping to maps dashboard widget
---
.../dashboard/components/widgets/map/map-config.ts | 48 ++++++++------
.../widgets/map/map-widget.component.html | 3 +-
.../components/widgets/map/map-widget.component.ts | 75 +++++++++++++++++-----
3 files changed, 87 insertions(+), 39 deletions(-)
diff --git a/ui/src/app/dashboard/components/widgets/map/map-config.ts b/ui/src/app/dashboard/components/widgets/map/map-config.ts
index 6c56f4d..1f15c41 100644
--- a/ui/src/app/dashboard/components/widgets/map/map-config.ts
+++ b/ui/src/app/dashboard/components/widgets/map/map-config.ts
@@ -15,35 +15,41 @@
* limitations under the License.
*/
-import {WidgetConfigBuilder} from "../../../registry/widget-config-builder";
-import {SchemaRequirementsBuilder} from "../../../sdk/schema-requirements-builder";
-import {EpRequirements} from "../../../sdk/ep-requirements";
-import {WidgetConfig} from "../base/base-config";
-import {DashboardWidgetSettings} from "../../../../core-model/gen/streampipes-model";
+import { WidgetConfigBuilder } from '../../../registry/widget-config-builder';
+import { SchemaRequirementsBuilder } from '../../../sdk/schema-requirements-builder';
+import { EpRequirements } from '../../../sdk/ep-requirements';
+import { WidgetConfig } from '../base/base-config';
+import { DashboardWidgetSettings } from '../../../../core-model/gen/streampipes-model';
export class MapConfig extends WidgetConfig {
- static readonly LATITUDE_MAPPING_KEY: string = "latitude-mapping";
- static readonly LONGITUDE_MAPPING_KEY: string = "longitude-mapping";
- static readonly ITEMS_MAPPING_KEY: string = "items-mapping";
- static readonly MARKER_TYPE_KEY: string = "marker-type-mapping";
+ static readonly LATITUDE_MAPPING_KEY: string = 'latitude-mapping';
+ static readonly LONGITUDE_MAPPING_KEY: string = 'longitude-mapping';
+ static readonly ITEMS_MAPPING_KEY: string = 'items-mapping';
+ static readonly ID_MAPPING_KEY: string = 'ids-mapping';
+ static readonly MARKER_TYPE_KEY: string = 'marker-type-mapping';
+ static readonly CENTER_MAP_KEY: string = 'center-map-mapping';
constructor() {
super();
}
getConfig(): DashboardWidgetSettings {
- return WidgetConfigBuilder.createWithSelectableColorsAndTitlePanel("map", "Map")
- .withIcon("fas fa-map")
- .withDescription("A map including a marker to show the live position of a thing")
- .requiredSchema(SchemaRequirementsBuilder
- .create()
- .requiredPropertyWithUnaryMapping(MapConfig.LATITUDE_MAPPING_KEY, "Latitude field", "", EpRequirements.latitudeReq())
- .requiredPropertyWithUnaryMapping(MapConfig.LONGITUDE_MAPPING_KEY, "Latitude field", "", EpRequirements.longitudeReq())
- .requiredPropertyWithNaryMapping(MapConfig.ITEMS_MAPPING_KEY, "Fields to display", "", EpRequirements.anyProperty())
- .build())
- .requiredSingleValueSelection(MapConfig.MARKER_TYPE_KEY, "Marker type", "", [this.makeOption("Default"), this.makeOption("Car")])
- .build();
+ return WidgetConfigBuilder.createWithSelectableColorsAndTitlePanel('map', 'Map')
+ .withIcon('fas fa-map')
+ .withDescription('A map including a marker to show the live position of a thing')
+ .requiredSchema(SchemaRequirementsBuilder
+ .create()
+ .requiredPropertyWithUnaryMapping(MapConfig.LATITUDE_MAPPING_KEY, 'Latitude field', '', EpRequirements.latitudeReq())
+ .requiredPropertyWithUnaryMapping(MapConfig.LONGITUDE_MAPPING_KEY, 'Latitude field', '', EpRequirements.longitudeReq())
+ .requiredPropertyWithNaryMapping(MapConfig.ID_MAPPING_KEY, 'Group Markers', 'Each id gets its own marker', EpRequirements.anyProperty())
+ .requiredPropertyWithNaryMapping(MapConfig.ITEMS_MAPPING_KEY, 'Fields to display', '', EpRequirements.anyProperty())
+ .build())
+ .requiredSingleValueSelection(
+ MapConfig.CENTER_MAP_KEY, 'Center map', 'Center the map around new markers', [this.makeOption('Center'), this.makeOption('No Center')])
+ .requiredSingleValueSelection(
+ MapConfig.MARKER_TYPE_KEY, 'Marker type', '', [this.makeOption('Default'), this.makeOption('Car')])
+ .build();
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/dashboard/components/widgets/map/map-widget.component.html b/ui/src/app/dashboard/components/widgets/map/map-widget.component.html
index d159168..4fd2c93 100644
--- a/ui/src/app/dashboard/components/widgets/map/map-widget.component.html
+++ b/ui/src/app/dashboard/components/widgets/map/map-widget.component.html
@@ -23,6 +23,7 @@
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)">
- <div *ngIf="showMarkers" [leafletLayer]="markerLayer"></div>
+<!-- <div *ngIf="showMarkers" [leafletLayer]="markerLayer"></div>-->
+ <div *ngFor="let markerLayer of markerLayers" [leafletLayer]="markerLayer"></div>
</div>
</div>
diff --git a/ui/src/app/dashboard/components/widgets/map/map-widget.component.ts b/ui/src/app/dashboard/components/widgets/map/map-widget.component.ts
index a579bc2..4cc420f 100644
--- a/ui/src/app/dashboard/components/widgets/map/map-widget.component.ts
+++ b/ui/src/app/dashboard/components/widgets/map/map-widget.component.ts
@@ -36,11 +36,14 @@ export class MapWidgetComponent extends BaseStreamPipesWidget implements OnInit,
selectedLatitudeField: string;
selectedLongitudeField: string;
selectedMarkerIcon: string;
- additionalItemsToDisplay: Array<string>;
+ idsToDisplay: string[];
+ additionalItemsToDisplay: string[];
+ centerMap: boolean;
map: Map;
- showMarkers: boolean = false;
- markerLayer: Marker;
+ showMarkers = false;
+ markerLayers: Marker[];
+ markerIds: string[];
mapWidth: number;
mapHeight: number;
@@ -59,7 +62,9 @@ export class MapWidgetComponent extends BaseStreamPipesWidget implements OnInit,
ngOnInit(): void {
super.ngOnInit();
- this.markerLayer = this.makeMarker([0, 0]);
+ // this.markerLayer = this.makeMarker([0, 0]);
+ this.markerLayers = [];
+ this.markerIds = [];
this.showMarkers = true;
this.mapWidth = this.computeCurrentWidth(this.gridsterItemComponent);
this.mapHeight = this.computeCurrentHeight(this.gridsterItemComponent);
@@ -74,10 +79,13 @@ export class MapWidgetComponent extends BaseStreamPipesWidget implements OnInit,
this.selectedLongitudeField = extractor.mappingPropertyValue(MapConfig.LONGITUDE_MAPPING_KEY);
this.selectedMarkerIcon = this.markerImage(extractor.selectedSingleValue(MapConfig.MARKER_TYPE_KEY));
this.additionalItemsToDisplay = extractor.mappingPropertyValues(MapConfig.ITEMS_MAPPING_KEY);
+ this.idsToDisplay = extractor.mappingPropertyValues(MapConfig.ID_MAPPING_KEY);
+ const b = extractor.singleValueParameter(MapConfig.CENTER_MAP_KEY);
+ this.centerMap = extractor.selectedSingleValue(MapConfig.CENTER_MAP_KEY) === 'Center';
}
markerImage(selectedMarker: string): string {
- return selectedMarker === "Default" ? 'assets/img/marker-icon.png' : 'assets/img/pe_icons/car.png';
+ return selectedMarker === 'Default' ? 'assets/img/marker-icon.png' : 'assets/img/pe_icons/car.png';
}
onMapReady(map: Map) {
@@ -86,24 +94,47 @@ export class MapWidgetComponent extends BaseStreamPipesWidget implements OnInit,
}
protected onEvent(event: any) {
- this.updatePosition(event);
+
+ // TODO handle when user selected id field
+
+ const tmpMarker = this.getMarker(event);
+
+ // Set one marker when no ids are selected
+ if (this.idsToDisplay.length === 0) {
+ this.markerLayers = [tmpMarker];
+ } else {
+
+ const id = this.getId(event);
+ const index = this.markerIds.indexOf(id);
+ if (index > -1) {
+ this.markerLayers[index] = tmpMarker;
+ } else {
+ this.markerIds.push(id);
+ this.markerLayers.push(tmpMarker);
+ }
+ }
+
}
- updatePosition(event) {
- var lat = event[this.selectedLatitudeField];
- var long = event[this.selectedLongitudeField];
- var text = "";
+ getMarker(event) {
+ const lat = event[this.selectedLatitudeField];
+ const long = event[this.selectedLongitudeField];
+ let text = '';
this.additionalItemsToDisplay.forEach(item => {
- text = text.concat("<b>" +item +"</b>" + ": " + event[item] + "<br>");
+ text = text.concat('<b>' + item + '</b>' + ': ' + event[item] + '<br>');
});
- let content : Content = text;
- let point: LatLngExpression = new LatLng(lat, long);
- this.markerLayer.setLatLng(point);
- this.markerLayer.bindTooltip(content);
- this.map.panTo(point);
+ const content: Content = text;
+ const point: LatLngExpression = new LatLng(lat, long);
+ const result = this.makeMarker(point);
+ result.setLatLng(point);
+ result.bindTooltip(content);
- };
+ if (this.centerMap) {
+ this.map.panTo(point);
+ }
+ return result;
+ }
makeMarker(point: LatLngExpression): Marker {
return marker(point, { icon: icon({
@@ -114,6 +145,16 @@ export class MapWidgetComponent extends BaseStreamPipesWidget implements OnInit,
})});
}
+ getId(event) {
+ let result = '';
+
+ for (const id of this.idsToDisplay) {
+ result = result + event[id];
+ }
+
+ return result;
+ }
+
protected onSizeChanged(width: number, height: number) {
this.mapWidth = width;
this.mapHeight = height;