From 3d52420d17b4fbc9ff7e24416ed9e13167756272 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 21 Oct 2021 15:43:15 +0300 Subject: [PATCH] Fixed map functions. Update map helps. --- ui-ngx/src/app/core/api/data-aggregator.ts | 30 ++++++--- .../widget/lib/maps/common-maps-utils.ts | 55 +++++++++------- .../components/widget/lib/maps/leaflet-map.ts | 60 ++++++++++-------- .../components/widget/lib/maps/schemes.ts | 10 +-- .../trip-animation.component.html | 4 +- .../trip-animation.component.ts | 43 +++++++------ .../help/en_US/widget/lib/map/map_fn_args.md | 6 +- ...trip_path_color_fn.md => path_color_fn.md} | 2 +- ...int_color_fn.md => path_point_color_fn.md} | 2 +- .../help/en_US/widget/lib/map/tooltip_fn.md | 4 +- .../help/en_US/widget/lib/map/trip_fn_args.md | 11 ---- .../en_US/widget/lib/map/trip_label_fn.md | 40 ------------ .../widget/lib/map/trip_marker_image_fn.md | 62 ------------------- .../widget/lib/map/trip_point_as_anchor_fn.md | 2 +- .../en_US/widget/lib/map/trip_tooltip_fn.md | 40 ------------ 15 files changed, 126 insertions(+), 245 deletions(-) rename ui-ngx/src/assets/help/en_US/widget/lib/map/{trip_path_color_fn.md => path_color_fn.md} (94%) rename ui-ngx/src/assets/help/en_US/widget/lib/map/{trip_path_point_color_fn.md => path_point_color_fn.md} (95%) delete mode 100644 ui-ngx/src/assets/help/en_US/widget/lib/map/trip_fn_args.md delete mode 100644 ui-ngx/src/assets/help/en_US/widget/lib/map/trip_label_fn.md delete mode 100644 ui-ngx/src/assets/help/en_US/widget/lib/map/trip_marker_image_fn.md delete mode 100644 ui-ngx/src/assets/help/en_US/widget/lib/map/trip_tooltip_fn.md diff --git a/ui-ngx/src/app/core/api/data-aggregator.ts b/ui-ngx/src/app/core/api/data-aggregator.ts index 300998548c..9bc621fe22 100644 --- a/ui-ngx/src/app/core/api/data-aggregator.ts +++ b/ui-ngx/src/app/core/api/data-aggregator.ts @@ -25,7 +25,7 @@ import { SubscriptionTimewindow } from '@shared/models/time/time.models'; import { UtilsService } from '@core/services/utils.service'; -import { deepClone, isNumeric } from '@core/utils'; +import { deepClone, isNumber, isNumeric } from '@core/utils'; import Timeout = NodeJS.Timeout; export declare type onAggregatedData = (data: SubscriptionData, detectChanges: boolean) => void; @@ -92,20 +92,36 @@ declare type AggFunction = (aggData: AggData, value?: any) => void; const avg: AggFunction = (aggData: AggData, value?: any) => { aggData.count++; - aggData.sum += value; - aggData.aggValue = aggData.sum / aggData.count; + if (isNumber(value)) { + aggData.sum += value; + aggData.aggValue = aggData.sum / aggData.count; + } else { + aggData.aggValue = value; + } }; const min: AggFunction = (aggData: AggData, value?: any) => { - aggData.aggValue = Math.min(aggData.aggValue, value); + if (isNumber(value)) { + aggData.aggValue = Math.min(aggData.aggValue, value); + } else { + aggData.aggValue = value; + } }; const max: AggFunction = (aggData: AggData, value?: any) => { - aggData.aggValue = Math.max(aggData.aggValue, value); + if (isNumber(value)) { + aggData.aggValue = Math.max(aggData.aggValue, value); + } else { + aggData.aggValue = value; + } }; const sum: AggFunction = (aggData: AggData, value?: any) => { - aggData.aggValue = aggData.aggValue + value; + if (isNumber(value)) { + aggData.aggValue = aggData.aggValue + value; + } else { + aggData.aggValue = value; + } }; const count: AggFunction = (aggData: AggData) => { @@ -409,7 +425,7 @@ export class DataAggregator { } private convertValue(val: string): any { - if (!this.noAggregation || val && isNumeric(val) && Number(val).toString() === val) { + if (val && isNumeric(val) && (!this.noAggregation || this.noAggregation && Number(val).toString() === val)) { return Number(val); } return val; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts index a0950eb53f..6d10e154b0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts @@ -16,7 +16,7 @@ import { FormattedData, MapProviders, ReplaceInfo } from '@home/components/widget/lib/maps/map-models'; import { - createLabelFromDatasource, deepClone, + createLabelFromDatasource, hashCode, isDefined, isDefinedAndNotNull, @@ -127,7 +127,6 @@ export function aspectCache(imageUrl: string): Observable { export type TranslateFunc = (key: string, defaultTranslation?: string) => string; -const varsRegex = /\${([^}]*)}/g; const linkActionRegex = /([^<]*)<\/link-act>/g; const buttonActionRegex = /([^<]*)<\/button-act>/g; @@ -304,7 +303,8 @@ export const parseWithTranslation = { if (this.translateFn) { return this.translateFn(key, defaultTranslation); } else { - throw console.error('Translate not assigned'); + console.error('Translate not assigned'); + throw Error('Translate not assigned'); } }, parseTemplate(template: string, data: object, forceTranslate = false): string { @@ -334,7 +334,7 @@ export function parseData(input: DatasourceData[], dataIndex?: number): Formatte if (!obj.hasOwnProperty(el.dataKey.label) || el.data[dataIndex][1] !== '') { obj[el.dataKey.label] = el.data[dataIndex][1]; obj[el.dataKey.label + '|ts'] = el.data[dataIndex][0]; - if (el.dataKey.label === 'type') { + if (el.dataKey.label.toLowerCase() === 'type') { obj.deviceType = el.data[dataIndex][1]; } } @@ -360,28 +360,35 @@ export function flatData(input: FormattedData[]): FormattedData { } export function parseArray(input: DatasourceData[]): FormattedData[][] { - return _(input).groupBy(el => el?.datasource?.entityName) - .values().value().map((entityArray) => - entityArray[0].data.map((el, i) => { - const obj: FormattedData = { - entityName: entityArray[0]?.datasource?.entityName, - entityId: entityArray[0]?.datasource?.entityId, - entityType: entityArray[0]?.datasource?.entityType, - $datasource: entityArray[0]?.datasource, - dsIndex: i, - time: el[0], - deviceType: null - }; - entityArray.filter(e => e.data.length && e.data[i]).forEach(entity => { - obj[entity?.dataKey?.label] = entity?.data[i][1]; - obj[entity?.dataKey?.label + '|ts'] = entity?.data[0][0]; - if (entity?.dataKey?.label === 'type') { - obj.deviceType = entity?.data[0][1]; + return _(input).groupBy(el => el.datasource.entityName) + .values().value().map((entityArray, dsIndex) => { + const timeDataMap: {[time: number]: FormattedData} = {}; + entityArray.filter(e => e.data.length).forEach(entity => { + entity.data.forEach(tsData => { + const time = tsData[0]; + const value = tsData[1]; + let data = timeDataMap[time]; + if (!data) { + data = { + entityName: entity.datasource.entityName, + entityId: entity.datasource.entityId, + entityType: entity.datasource.entityType, + $datasource: entity.datasource, + dsIndex, + time, + deviceType: null + }; + timeDataMap[time] = data; + } + data[entity.dataKey.label] = value; + data[entity.dataKey.label + '|ts'] = time; + if (entity.dataKey.label.toLowerCase() === 'type') { + data.deviceType = value; } }); - return obj; - }) - ); + }); + return _.values(timeDataMap); + }); } export function parseFunction(source: any, params: string[] = ['def']): (...args: any[]) => any { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index fb79b44e35..5120fc8c9e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -474,9 +474,10 @@ export default abstract class LeafletMap { this.showPolygon = showPolygon; if (this.map) { const data = this.ctx.data; - const formattedData = parseData(this.ctx.data); + const formattedData = parseData(data); if (drawRoutes) { - this.updatePolylines(parseArray(data), false); + const polyData = parseArray(data); + this.updatePolylines(polyData, formattedData, false); } if (showPolygon) { this.updatePolygons(formattedData, false); @@ -633,7 +634,8 @@ export default abstract class LeafletMap { return polygon; } - updatePoints(pointsData: FormattedData[][], getTooltip: (point: FormattedData) => string) { + updatePoints(pointsData: FormattedData[][], + getTooltip: (point: FormattedData, points: FormattedData[]) => string) { if (pointsData.length) { if (this.points) { this.map.removeLayer(this.points); @@ -642,21 +644,25 @@ export default abstract class LeafletMap { } let pointColor = this.options.pointColor; for (const pointsList of pointsData) { - pointsList.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { - if (this.options.useColorPointFunction) { - pointColor = safeExecute(this.options.colorPointFunction, [data, pointsData, data.dsIndex]); - } - const point = L.circleMarker(this.convertPosition(data), { - color: pointColor, - radius: this.options.pointSize - }); - if (!this.options.pointTooltipOnRightPanel) { - point.on('click', () => getTooltip(data)); - } else { - createTooltip(point, this.options, data.$datasource, getTooltip(data)); + for (let tsIndex = 0; tsIndex < pointsList.length; tsIndex++) { + const pdata = pointsList[tsIndex]; + if (!!this.convertPosition(pdata)) { + const dsData = pointsData.map(ds => ds[tsIndex]); + if (this.options.useColorPointFunction) { + pointColor = safeExecute(this.options.colorPointFunction, [pdata, dsData, pdata.dsIndex]); + } + const point = L.circleMarker(this.convertPosition(pdata), { + color: pointColor, + radius: this.options.pointSize + }); + if (!this.options.pointTooltipOnRightPanel) { + point.on('click', () => getTooltip(pdata, dsData)); + } else { + createTooltip(point, this.options, pdata.$datasource, getTooltip(pdata, dsData)); + } + this.points.addLayer(point); } - this.points.addLayer(point); - }); + } } if (pointsData.length) { this.map.addLayer(this.points); @@ -665,15 +671,15 @@ export default abstract class LeafletMap { // Polyline - updatePolylines(polyData: FormattedData[][], updateBounds = true, activePolyline?: FormattedData) { + updatePolylines(polyData: FormattedData[][], dsData: FormattedData[], updateBounds = true) { const keys: string[] = []; - polyData.forEach((dataSource: FormattedData[]) => { - const data = activePolyline || dataSource[0]; - if (dataSource.length && data.entityName === dataSource[0].entityName) { + polyData.forEach((tsData: FormattedData[], index) => { + const data = dsData[index]; + if (tsData.length && data.entityName === tsData[0].entityName) { if (this.polylines.get(data.entityName)) { - this.updatePolyline(data, dataSource, this.options, updateBounds); + this.updatePolyline(data, tsData, dsData, this.options, updateBounds); } else { - this.createPolyline(data, dataSource, this.options, updateBounds); + this.createPolyline(data, tsData, dsData, this.options, updateBounds); } keys.push(data.entityName); } @@ -689,9 +695,9 @@ export default abstract class LeafletMap { }); } - createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) { + createPolyline(data: FormattedData, tsData: FormattedData[], dsData: FormattedData[], settings: PolylineSettings, updateBounds = true) { const poly = new Polyline(this.map, - dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); + tsData.map(el => this.convertPosition(el)).filter(el => !!el), data, dsData, settings); if (updateBounds) { const bounds = poly.leafletPoly.getBounds(); this.fitBounds(bounds); @@ -699,10 +705,10 @@ export default abstract class LeafletMap { this.polylines.set(data.entityName, poly); } - updatePolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) { + updatePolyline(data: FormattedData, tsData: FormattedData[], dsData: FormattedData[], settings: PolylineSettings, updateBounds = true) { const poly = this.polylines.get(data.entityName); const oldBounds = poly.leafletPoly.getBounds(); - poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); + poly.updatePolyline(tsData.map(el => this.convertPosition(el)).filter(el => !!el), data, dsData, settings); const newBounds = poly.leafletPoly.getBounds(); if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) { this.fitBounds(newBounds); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts index d7110f0a4b..4c7e6e61fa 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts @@ -866,7 +866,7 @@ export const pathSchema = 'useColorFunction', { key: 'colorFunction', - helpId: 'widget/lib/map/trip_path_color_fn', + helpId: 'widget/lib/map/path_color_fn', type: 'javascript', condition: 'model.useColorFunction === true' }, @@ -961,7 +961,7 @@ export const pointSchema = 'useColorPointFunction', { key: 'colorPointFunction', - helpId: 'widget/lib/map/trip_path_point_color_fn', + helpId: 'widget/lib/map/path_point_color_fn', type: 'javascript', condition: 'model.useColorPointFunction === true' }, @@ -1150,7 +1150,7 @@ export const tripAnimationSchema = { { key: 'labelFunction', type: 'javascript', - helpId: 'widget/lib/map/trip_label_fn', + helpId: 'widget/lib/map/label_fn', condition: 'model.showLabel === true && model.useLabelFunction === true' }, 'showTooltip', @@ -1184,7 +1184,7 @@ export const tripAnimationSchema = { { key: 'tooltipFunction', type: 'javascript', - helpId: 'widget/lib/map/trip_tooltip_fn', + helpId: 'widget/lib/map/tooltip_fn', condition: 'model.showTooltip === true && model.useTooltipFunction === true' }, 'rotationAngle', @@ -1201,7 +1201,7 @@ export const tripAnimationSchema = { { key: 'markerImageFunction', type: 'javascript', - helpId: 'widget/lib/map/trip_marker_image_fn', + helpId: 'widget/lib/map/marker_image_fn', condition: 'model.useMarkerImageFunction === true' }, { diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html index b98a00263b..cd539a4a50 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html @@ -16,9 +16,7 @@ -->
-
- {{label}} -
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts index 2581da88ad..e614c80455 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts @@ -30,7 +30,7 @@ import { import { FormattedData, MapProviders, TripAnimationSettings } from '@home/components/widget/lib/maps/map-models'; import { addCondition, addGroupInfo, addToSchema, initSchema } from '@app/core/schema-utils'; import { mapPolygonSchema, pathSchema, pointSchema, tripAnimationSchema } from '@home/components/widget/lib/maps/schemes'; -import { DomSanitizer } from '@angular/platform-browser'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { WidgetContext } from '@app/modules/home/models/widget-component.models'; import { findAngle, getProviderSchema, @@ -70,13 +70,14 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy mapWidget: MapWidgetInterface; historicalData: FormattedData[][]; normalizationStep: number; - interpolatedTimeData = []; + interpolatedTimeData: {[time: number]: FormattedData}[] = []; + formattedInterpolatedTimeData: FormattedData[][] = []; widgetConfig: WidgetConfig; settings: TripAnimationSettings; mainTooltips = []; visibleTooltip = false; activeTrip: FormattedData; - label: string; + label: SafeHtml; minTime: number; maxTime: number; anchors: number[] = []; @@ -117,6 +118,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy const subscription = this.ctx.defaultSubscription; subscription.callbacks.onDataUpdated = () => { this.historicalData = parseArray(this.ctx.data).filter(arr => arr.length); + this.interpolatedTimeData.length = 0; + this.formattedInterpolatedTimeData.length = 0; if (this.historicalData.length) { this.calculateIntervals(); this.timeUpdated(this.minTime); @@ -146,6 +149,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy timeUpdated(time: number) { this.currentTime = time; + // get point for each datasource associated with time const currentPosition = this.interpolatedTimeData .map(dataSource => dataSource[time]); for (let j = 0; j < this.interpolatedTimeData.length; j++) { @@ -171,20 +175,20 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy currentPosition[j] = this.calculateLastPoints(this.interpolatedTimeData[j], time); } } - this.calcLabel(); + this.calcLabel(currentPosition); this.calcMainTooltip(currentPosition); if (this.mapWidget && this.mapWidget.map && this.mapWidget.map.map) { - const formattedInterpolatedTimeData = this.interpolatedTimeData.map(ds => _.values(ds)); - this.mapWidget.map.updatePolylines(formattedInterpolatedTimeData, true); + this.mapWidget.map.updatePolylines(this.formattedInterpolatedTimeData, currentPosition, true); if (this.settings.showPolygon) { - this.mapWidget.map.updatePolygons(this.interpolatedTimeData); + this.mapWidget.map.updatePolygons(currentPosition); } if (this.settings.showPoints) { - this.mapWidget.map.updatePoints(formattedInterpolatedTimeData.map(ds => _.union(ds)), this.calcTooltip); + this.mapWidget.map.updatePoints(this.formattedInterpolatedTimeData, this.calcTooltip); } this.mapWidget.map.updateMarkers(currentPosition, true, (trip) => { this.activeTrip = trip; this.timeUpdated(this.currentTime); + this.cd.markForCheck(); }); } } @@ -215,41 +219,44 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy this.maxTime = dataSource[dataSource.length - 1]?.time || -Infinity; this.interpolatedTimeData[index] = this.interpolateArray(dataSource); }); + this.formattedInterpolatedTimeData = this.interpolatedTimeData.map(ds => _.values(ds)); if (!this.activeTrip) { this.activeTrip = this.interpolatedTimeData.map(dataSource => dataSource[this.minTime]).filter(ds => ds)[0]; } if (this.useAnchors) { const anchorDate = Object.entries(_.union(this.interpolatedTimeData)[0]); this.anchors = anchorDate - .filter((data: [string, FormattedData]) => safeExecute(this.settings.pointAsAnchorFunction, [data[1], anchorDate, data[1].dsIndex])) + .filter((data: [string, FormattedData], tsIndex) => safeExecute(this.settings.pointAsAnchorFunction, [data[1], + this.formattedInterpolatedTimeData.map(ds => ds[tsIndex]), data[1].dsIndex])) .map(data => parseInt(data[0], 10)); } } - calcTooltip = (point: FormattedData): string => { + calcTooltip = (point: FormattedData, points: FormattedData[]): string => { const data = point ? point : this.activeTrip; const tooltipPattern: string = this.settings.useTooltipFunction ? - safeExecute(this.settings.tooltipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern; + safeExecute(this.settings.tooltipFunction, + [data, points, point.dsIndex]) : this.settings.tooltipPattern; return parseWithTranslation.parseTemplate(tooltipPattern, data, true); } private calcMainTooltip(points: FormattedData[]): void { const tooltips = []; for (const point of points) { - tooltips.push(this.sanitizer.sanitize(SecurityContext.HTML, this.calcTooltip(point))); + tooltips.push(this.sanitizer.sanitize(SecurityContext.HTML, this.calcTooltip(point, points))); } this.mainTooltips = tooltips; } - calcLabel() { - const data = this.activeTrip; + calcLabel(points: FormattedData[]) { + const data = points[this.activeTrip.dsIndex]; const labelText: string = this.settings.useLabelFunction ? - safeExecute(this.settings.labelFunction, [data, this.historicalData, data.dsIndex]) : this.settings.label; - this.label = (parseWithTranslation.parseTemplate(labelText, data, true)); + safeExecute(this.settings.labelFunction, [data, points, data.dsIndex]) : this.settings.label; + this.label = this.sanitizer.bypassSecurityTrustHtml(parseWithTranslation.parseTemplate(labelText, data, true)); } - interpolateArray(originData: FormattedData[]) { - const result = {}; + interpolateArray(originData: FormattedData[]): {[time: number]: FormattedData} { + const result: {[time: number]: FormattedData} = {}; const latKeyName = this.settings.latKeyName; const lngKeyName = this.settings.lngKeyName; for (const data of originData) { diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/map/map_fn_args.md b/ui-ngx/src/assets/help/en_US/widget/lib/map/map_fn_args.md index d1275ee871..7a4f24f0ac 100644 --- a/ui-ngx/src/assets/help/en_US/widget/lib/map/map_fn_args.md +++ b/ui-ngx/src/assets/help/en_US/widget/lib/map/map_fn_args.md @@ -1,10 +1,10 @@ -
  • data: FormattedData - A FormattedData object associated with marker.
    +
  • data: FormattedData - A FormattedData object associated with marker or data point of the route.
    Represents basic entity properties (ex. entityId, entityName)
    and provides access to other entity attributes/timeseries declared in widget datasource configuration.
    • -
  • dsData: FormattedData[] - All available widget data (entities) as array of FormattedData objects
    +
  • dsData: FormattedData[] - All available data associated with markers or routes data points as array of FormattedData objects
    resolved from configured datasources. Each object represents basic entity properties (ex. entityId, entityName)
    and provides access to other entity attributes/timeseries declared in widget datasource configuration.
    • -
  • dsIndex number - index of the current marker data in dsData array.
    +
  • dsIndex number - index of the current marker data or route data point in dsData array.
    Note: The data argument is equivalent to dsData[dsIndex] expression.
    • diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_path_color_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/map/path_color_fn.md similarity index 94% rename from ui-ngx/src/assets/help/en_US/widget/lib/map/trip_path_color_fn.md rename to ui-ngx/src/assets/help/en_US/widget/lib/map/path_color_fn.md index 5afcd678c7..056e47d0eb 100644 --- a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_path_color_fn.md +++ b/ui-ngx/src/assets/help/en_US/widget/lib/map/path_color_fn.md @@ -10,7 +10,7 @@ A JavaScript function used to compute color of the trip path. **Parameters:**
      - {% include widget/lib/map/trip_fn_args %} + {% include widget/lib/map/map_fn_args %}
    **Returns:** diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_path_point_color_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/map/path_point_color_fn.md similarity index 95% rename from ui-ngx/src/assets/help/en_US/widget/lib/map/trip_path_point_color_fn.md rename to ui-ngx/src/assets/help/en_US/widget/lib/map/path_point_color_fn.md index 3b16a3ef22..30f5e0f4d5 100644 --- a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_path_point_color_fn.md +++ b/ui-ngx/src/assets/help/en_US/widget/lib/map/path_point_color_fn.md @@ -10,7 +10,7 @@ A JavaScript function used to compute color of the trip path point. **Parameters:**
      - {% include widget/lib/map/trip_fn_args %} + {% include widget/lib/map/map_fn_args %}
    **Returns:** diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/map/tooltip_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/map/tooltip_fn.md index 6468b8a973..d4d97d99b6 100644 --- a/ui-ngx/src/assets/help/en_US/widget/lib/map/tooltip_fn.md +++ b/ui-ngx/src/assets/help/en_US/widget/lib/map/tooltip_fn.md @@ -5,7 +5,7 @@ *function (data, dsData, dsIndex): string* -A JavaScript function used to compute text or HTML code to be displayed in the marker tooltip. +A JavaScript function used to compute text or HTML code to be displayed in the marker, point or polygon tooltip. **Parameters:** @@ -15,7 +15,7 @@ A JavaScript function used to compute text or HTML code to be displayed in the m **Returns:** -Should return string value presenting text or HTML for the marker tooltip. +Should return string value presenting text or HTML for the tooltip.
    diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_fn_args.md b/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_fn_args.md deleted file mode 100644 index a6adebddb6..0000000000 --- a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_fn_args.md +++ /dev/null @@ -1,11 +0,0 @@ -
  • data: FormattedData - A FormattedData object associated with the point of the trip.
    - Represents basic entity properties (ex. entityId, entityName)
    and provides access to other entity attributes/timeseries declared in widget datasource configuration. -
    • -
  • dsData: FormattedData[][] - two-dimensional array of FormattedData objects presenting
    - array of trips (entities with timeseries data) resolved from configured datasources.
    - Each element of array is particular entity trip data presented as array of FormattedData object (trip point).
    - Each object represents basic entity properties (ex. entityId, entityName)
    - and provides access to other entity attributes/timeseries declared in widget datasource configuration. -
    • -
  • dsIndex number - index of the current trip data in dsData array. -
    • diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_label_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_label_fn.md deleted file mode 100644 index 0203a592f8..0000000000 --- a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_label_fn.md +++ /dev/null @@ -1,40 +0,0 @@ -#### Trip animation widget label function - -
    -
    - -*function (data, dsData, dsIndex): string* - -A JavaScript function used to compute text or HTML code of the marker label. - -**Parameters:** - -
      - {% include widget/lib/map/trip_fn_args %} -
    - -**Returns:** - -Should return string value presenting text or HTML of the marker label. - -
    - -##### Examples - -* Display styled label with corresponding latest telemetry data for `energy meter` or `thermometer` device types: - -```javascript -var deviceType = data['Type']; -if (typeof deviceType !== undefined) { - if (deviceType == "energy meter") { - return '${entityName}, ${energy:2} kWt'; - } else if (deviceType == "thermometer") { - return '${entityName}, ${temperature:2} °C'; - } -} -return data.entityName; -{:copy-code} -``` - -
    -
    diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_marker_image_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_marker_image_fn.md deleted file mode 100644 index b5389985eb..0000000000 --- a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_marker_image_fn.md +++ /dev/null @@ -1,62 +0,0 @@ -#### Marker image function - -
    -
    - -*function (data, images, dsData, dsIndex): {url: string, size: number}* - -A JavaScript function used to compute marker image. - -**Parameters:** - -
      - {% include widget/lib/map/trip_fn_args %} -
    - -**Returns:** - -Should return marker image data having the following structure: - -```typescript -{ - url: string, - size: number -} -``` - -- *url* - marker image url; -- *size* - marker image size; - -In case no data is returned, default marker image will be used. - -
    - -##### Examples - -
      -
    • -Calculate image url depending on temperature telemetry value for thermometer device type.
      -Let's assume 4 images are defined in Marker images section. Each image corresponds to particular temperature level: -
      • -
    - -```javascript -var type = data['Type']; -if (type == 'thermometer') { - var res = { - url: images[0], - size: 40 - } - var temperature = data['temperature']; - if (typeof temperature !== undefined) { - var percent = (temperature + 60)/120; - var index = Math.min(3, Math.floor(4 * percent)); - res.url = images[index]; - } - return res; -} -{:copy-code} -``` - -
    -
    diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_point_as_anchor_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_point_as_anchor_fn.md index 788e2bb189..e938532b78 100644 --- a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_point_as_anchor_fn.md +++ b/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_point_as_anchor_fn.md @@ -10,7 +10,7 @@ A JavaScript function evaluating whether to use trip point as time anchor used i **Parameters:**
      - {% include widget/lib/map/trip_fn_args %} + {% include widget/lib/map/map_fn_args %}
    **Returns:** diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_tooltip_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_tooltip_fn.md deleted file mode 100644 index 6678dc9b2e..0000000000 --- a/ui-ngx/src/assets/help/en_US/widget/lib/map/trip_tooltip_fn.md +++ /dev/null @@ -1,40 +0,0 @@ -#### Trip animation widget tooltip function - -
    -
    - -*function (data, dsData, dsIndex): string* - -A JavaScript function used to compute text or HTML code to be displayed in the marker tooltip. - -**Parameters:** - -
      - {% include widget/lib/map/trip_fn_args %} -
    - -**Returns:** - -Should return string value presenting text or HTML for the marker tooltip. - -
    - -##### Examples - -* Display details with corresponding telemetry data for `thermostat` device type: - -```javascript -var deviceType = data['Type']; -if (typeof deviceType !== undefined) { - if (deviceType == "energy meter") { - return '${entityName}
    Energy: ${energy:2} kWt
    '; - } else if (deviceType == "thermometer") { - return '${entityName}
    Temperature: ${temperature:2} °C
    '; - } -} -return data.entityName; -{:copy-code} -``` - -
    -