Tooltips and labels

English · Русский

Component options for @mes/aps@1.23.0. Prefix Settings names with schedule.; see how to fill in a record.

Common row rules for tooltips and labels: field metadata, date output, and missing values. Field sets are described by the individual chart-area guides.

Start with explicit fields

Sections are empty by default. Without operationTooltipConfig, hovering an operation shows no text; without operationInfoConfig, bars have no labels. Two exceptions are the equipment-name fallback and supply tracking-number headings. Configure the fields you need explicitly.

Each section maps a data-field path to a row descriptor:

{
  "operationTooltipConfig": {
    "name": { "label": "Operation", "order": 1 },
    "workOrder.number": { "label": "Order number", "order": 2 },
    "workOrder.dueDate": { "label": "Due", "template": "${label} — ${value}" }
  }
}

For illustration, a Milling operation whose order has number WO-104 and due date 2026-09-22T08:00:00.000Z shows:

Operation: Milling
Order number: WO-104
Due — 2026-09-22T08:00:00.000Z

If the order is missing, the last two values use the package default Не задан. The application supplies operation/order data with the schedule; settings only choose how to display them. See operations for how workOrder is resolved.

Row descriptor

label

Required string. A normal row is label: value. An empty label "" prints only the value, without the separator, as used for bar text.

order

Numeric ascending row order. Rows without order follow all ordered rows in property order. Numbers do not need to be consecutive.

hidden

Boolean. true hides a row; false and omission are equivalent. This keeps a configured field available without displaying it.

template

String template. ${label} substitutes the label and ${value} the current field value. Other ${...} names read a path in the same record; for example, "${value} (${workOrder.number})" appends the order number. Missing paths use appSettings.undefinedTooltipText. Names allow letters, digits, underscores, and dots. Unsupported substitutions such as ${workOrder-number} stay as literal text. If template processing throws, the row falls back to label: value.

transform

JavaScript function applied before displaying the value; it cannot be supplied as Settings data. Without a transform, booleans remain true/false, operation dates use their source representation, and constraint dates use browser date stringification. The application guide describes declarative alternatives such as valueMap and its own date formatting.

appSettings.undefinedTooltipText

String substituted for missing values across rows and template substitutions. Package default: Не задан.

Dates

The component text builder stringifies values without a transform. Operation start/finish values are UTC ISO instants such as 2026-03-12T05:00:00.000Z; the order due date follows its source data. Locale/timezone do not format raw tooltip values by themselves. Application-provided transforms can format dates; the MES panel applies supported formatting as described in its guide.

Sections

Section	Surface	Guide
operationTooltipConfig	Operation hover tooltip	Operations
operationInfoConfig	Operation bar text	Operations
equipmentInfoConfig	Equipment sidebar row	Equipment
supplyTooltipConfig	Supply icon popup	Supplies and requests
flowArrowTooltipConfig, supplyArrowTooltipConfig, producerArrowTooltipConfig	Dependency arrow tooltips	Arrows
constraintsListInfoConfig, constraintsTooltipConfig, materialConstraintsListInfoConfig, materialConstraintsTooltipConfig	Constraint list rows and tooltips	Constraints

Limits

• The chart copies configuration at creation and remembers built tooltip/label rows. New tooltip settings require a new chart instance.
• A data path such as workOrder.number addresses a nested data field. In a flat MES Settings name, bracket escaping keeps the whole descriptor key together; see Settings.

Main chart example

An explicit field set for the main chart and arrows, without transform functions. late prints true/false; a missing locked uses Не задан.

{
  "operationTooltipConfig": {
    "position": { "label": "Operation no." },
    "name": { "label": "Operation", "order": 1 },
    "startDate": { "label": "Start", "order": 2 },
    "finishDate": { "label": "Finish", "order": 3 },
    "setupFinishDate": { "label": "Setup finish", "template": "⚠ ${label} — ${value}" },
    "late": { "label": "Late" },
    "locked": { "label": "Status" },
    "workOrder.number": { "label": "Order number" },
    "workOrder.name": { "label": "Order name" },
    "workOrder.dueDate": { "label": "Due" },
    "workOrder.quantity": { "label": "Quantity" },
    "workOrder.priority": { "label": "Priority" }
  },
  "operationInfoConfig": {
    "name": { "label": "" },
    "position": { "label": "" },
    "startDate": { "label": "" },
    "finishDate": { "label": "" },
    "late": { "label": "" },
    "workOrder.priority": { "label": "" }
  },
  "equipmentInfoConfig": {
    "workUnitObjectName": { "label": "", "order": 1 }
  },
  "supplyTooltipConfig": {
    "date": { "label": "Supply date" },
    "trackingNumber": { "label": "Tracking number" },
    "materialDefinitionItemId": { "label": "Code" },
    "materialDefinitionName": { "label": "Name" },
    "materialDefinitionVersion": { "label": "Version" },
    "quantity": { "label": "Available quantity" },
    "materialDefinitionUOM": { "label": "UOM" }
  },
  "flowArrowTooltipConfig": {
    "fromOp.name": { "label": "From operation", "order": 1 },
    "fromOp.position": { "label": "Source no.", "order": 3 },
    "fromOp.startDate": { "label": "Source start", "order": 4 },
    "fromOp.finishDate": { "label": "Source finish", "order": 5 },
    "fromOp.workOrder.number": { "label": "Source order", "order": 6 },
    "toOp.name": { "label": "To operation", "order": 10 },
    "toOp.position": { "label": "Target no.", "order": 12 },
    "toOp.startDate": { "label": "Target start", "order": 13 },
    "toOp.finishDate": { "label": "Target finish", "order": 14 },
    "toOp.workOrder.number": { "label": "Target order", "order": 15 }
  },
  "supplyArrowTooltipConfig": {
    "quantity": { "label": "Quantity", "order": 1 }
  },
  "producerArrowTooltipConfig": {
    "materialDefinitionName": { "label": "Material", "order": 1 },
    "materialDefinitionItemId": { "label": "Code", "order": 2 },
    "materialDefinitionUOM": { "label": "UOM", "order": 3 },
    "quantity": { "label": "Quantity", "order": 4 }
  }
}