Page History

...

• dataTestId - Sets the testing hook ID for automated testing. For example, setting to "warehouse-safety-map" allows test scripts to reliably locate this component during automated testing.

• enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the image viewer can be highlighted during onboarding or tutorial flows to explain important visualization features to users.

• guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Warehouse Safety Map", "de-DE": "Lagerhaus-Sicherheitskarte"} provides clear identification during guided tours.

• guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This map shows real-time safety sensor data", "de-DE": "Diese Karte zeigt Echtzeitdaten der Sicherheitssensoren"} provides detailed context during guided tours.

Data source

The Image Point Viewer is a dynamic component that displays an image with interactive points overlaid on it. It requires two data sources:

1. Image Data Source: Provides the image to be displayed
2. Points Data Source: Provides the points to be overlaid on the image

This document focuses on the expected data structure for the Points Data Source.

Data Source Configuration

The component requires proper configuration of several fields:

Required Configuration Fields

1. pointsDataSourceId: ID of the data source that provides the points data
2. positionXFieldName: Field name in the data that contains the X coordinate
3. positionYFieldName: Field name in the data that contains the Y coordinate
4. keyFieldName: Field name in the data that contains unique identifiers for the points
5. displayFieldName: Field name in the data that contains the text to display in tooltips

Points Data Structure

The Points Data Source should return an array of objects. Each object represents a point on the image.

Required Format

[
  {
    "<positionXFieldName>": <x_coordinate>,
    "<positionYFieldName>": <y_coordinate>,
    "<keyFieldName>": <unique_identifier>,
    "<displayFieldName>": <display_text>,
    // Additional fields for thresholds if needed
  },
  // More points...
]

Field Descriptions

1. X Coordinate Field: (specified by positionXFieldName)

• Contains the horizontal position of the point on the image
• Numeric value representing the X coordinate

1. Y Coordinate Field: (specified by positionYFieldName)

• Contains the vertical position of the point on the image
• Numeric value representing the Y coordinate

1. Key Field: (specified by keyFieldName)

• Contains a unique identifier for the point
• Used for tracking and identifying points
• Can be a string or number

1. Display Field: (specified by displayFieldName)

• Contains the text to display when hovering over the point
• Usually a descriptive name or label for the point

1. Additional Fields:

• Any other fields used for threshold configuration
• Custom data that might be used in event handlers

Example Data Structure

[
  {
    "xPos": 100,
    "yPos": 150,
    "pointId": "point1",
    "label": "Control Valve",
    "status": "normal",
    "temperature": 72
  },
  {
    "xPos": 250,
    "yPos": 200,
    "pointId": "point2",
    "label": "Pressure Gauge",
    "status": "warning",
    "temperature": 95
  },
  {
    "xPos": 400,
    "yPos": 300,
    "pointId": "point3",
    "label": "Flow Meter",
    "status": "critical",
    "temperature": 120
  }
]

In this example, if the component is configured with:

• positionXFieldName = "xPos"
• positionYFieldName = "yPos"
• keyFieldName = "pointId"
• displayFieldName = "label"

The component will display three points on the image at the specified coordinates, with tooltips showing "Control Valve", "Pressure Gauge", and "Flow Meter".

Nested Properties Support

The component supports accessing nested properties using dot notation. This is useful if your data has a more complex structure.

Example with Nested Properties

If your data looks like:

[
  {
    "metadata": {
      "position": {
        "x": 100,
        "y": 150
      }
    },
    "id": "point1",
    "details": {
      "name": "Control Valve"
    }
  }
]

You can configure:

• positionXFieldName = "metadata.position.x"
• positionYFieldName = "metadata.position.y"
• keyFieldName = "id"
• displayFieldName = "details.name"

The component will correctly extract the nested values.