Example: workshop equipment

English · Русский

Show equipment scheduling without supply/request areas, retain unavailability shading, label operations, and show operation/order/time details on hover. Equipment without operations should not occupy rows.

This is a complete component settings object for @mes/aps@1.23.0. Application code adds uuid and webWorker. In MES, write the scalar leaf properties as separate schedule.* records following the Settings guide; do not replace the application or panel JSON with this object.

What the application supplies

The application integrates the component, obtains a schedule from its API, and passes it as schedules: operations under scheduledOperations, orders under workOrders. An operation's orderGuid must match an order's guid to show its number. The application merges the object below into package defaults and passes the result as config.

Settings object

{
  "sidebarWidth": 200,
  "hideEmptyUnits": true,
  "swapLayers": false,
  "showConstraints": false,
  "showMaterialConstraints": false,
  "barSettings": { "initialWidth": 40, "maxInitialWidth": 160 },
  "precisionYGantt": { "minSize": 30, "maxSize": 200, "steps": 20 },
  "appSettings": {
    "locale": "ru-RU",
    "timezone": "UTC",
    "undefinedTooltipText": "Not set",
    "splitter": { "enableSplitter": true, "minWidth": 150, "maxWidth": 450 },
    "equipmentAreaSettings": {
      "ganttTitle": "Workshop equipment",
      "showSupply": false,
      "showRequest": false,
      "showAvailability": true,
      "showAdjustment": true,
      "showTerminator": true
    },
    "drawPreferences": {
      "labelTextFont": "arial",
      "labelTextFontSize": 14,
      "useLabelEllipsis": true
    }
  },
  "equipmentInfoConfig": {
    "workUnitObjectName": { "label": "", "order": 1 }
  },
  "operationInfoConfig": {
    "name": { "label": "", "order": 1 },
    "workOrder.number": { "label": "", "order": 2 }
  },
  "operationTooltipConfig": {
    "name": { "label": "Operation", "order": 1 },
    "workOrder.number": { "label": "Order number", "order": 2 },
    "startDate": { "label": "Start", "order": 3 },
    "finishDate": { "label": "Finish", "order": 4 }
  }
}

Visible result

After receiving the schedule, the chart fits the horizontal scale with a base division width at most 160 pixels. Vertical zoom has 20 positions; with enough area height, its lower bound is 30 pixels and its upper bound is 200, further limited by area height. These are single-level heights; finite: false equipment can have taller rows.

The sidebar shows equipment names under “Workshop equipment”. Empty equipment rows and supply/request areas disappear. Unavailability shading and setup bars remain wherever schedule data contains them.

For illustration, take Milling, order WO-104, from 2026-09-22T08:00:00.000Z through 2026-09-22T10:00:00.000Z. With enough bar width and row height, it shows Milling and WO-104. At font size 14, two rows need a base height of at least 72 pixels; at the lower 30-pixel bound there is no bar text. The component tooltip without transforms shows:

Operation: Milling
Order number: WO-104
Start: 2026-09-22T08:00:00.000Z
Finish: 2026-09-22T10:00:00.000Z

Use names, order numbers and dates from your own schedule. The component prints raw dates without transforms; locale/timezone alone do not format them. The MES panel adds supported date formatting as described in its guide. A missing order shows “Not set”; narrow bars can truncate text.

Adapt this example

• Enable showSupply/showRequest for supplies and requests.
• Change operationTooltipConfig for a different operation tooltip, following row rules.
• Choose a constraint panel and its row labels; the application supplies constraint data.
• Choose another locale or timezone for time-scale labels.