Skip to main content

Define an interactive scenario

In this tutorial you will learn how to create a scenario to interact with the future performance of the example business and produce interactive insights, you will:

  1. Add patch data sources for suppliers, orders and price.
  2. Adapt the predictive scenario to alter suppliers, orders and the price from the patch data sources.
  3. Adapt the suppliers and orders layouts, to use the patch data sources with constraints and targets, create a new form layout to do the same for price.
  4. Adapt the headers to exclude the price value, and add the price form to the panel

This lesson will assume that you have an empty project and asset which you can to deploy to a workspace named 04_03_05_define_an_interactive_scenario with the following command:

edk template deploy -ycw 04_03_05_define_an_interactive_scenario

Define custom sources

To create an interactive solution, you can allow the user to "edit" data streams for the order schedule, and suppliers and the price. Depending on the type of the data stream, the method will vary.

Define patch sources

In the previous lessons you create descriptive, predictive and prescriptive insights. A patch source will allow you to create an interactive solution, by allowing the user to "edit" existing data streams for the order schedule, and suppliers.

Starting with the suppliers, you can use patch type data source, with the following steps:

  1. Create a new data sources named Custom Suppliers.
  2. Set the type to patch from the Suppliers produced in the descriptive scenario.

In the code add the above changes:

// create a patched source of suppliers
const custom_suppliers = new SourceBuilder('Custom Suppliers')
    .patch(descriptive.simulationResultStreams().Suppliers)

Repeat a similar step to produce a Custom Orders patch data source, since the descriptive scenario does not produce orders, you can use the stream calculated in the Procurement Date function.

Define value source

Since the price is a simple float value, you can use a value type data source, with the following steps:

  1. Create a new data sources named Custom Price.
  2. Set the type to value.
  3. Set the value to the price calculated in the RRP function.

In the code add the above changes:

// create a patched source of the price
const custom_price = new SourceBuilder("Custom Price")
    .value({ value: { price: rrp - (rrp - rrp * 0.7) / 2 } })

Update predictive scenario

You now have three data sources which can be used to alter the suppliers, orders and price, you can now update the predictive scenario to use these data sources, with the following steps:

  1. Add the custom_suppliers data source to alter the Suppliers resource.
  2. Add the custom_orders data source to alter the Orders resource.
  3. Add the custom_price data source to alter the Price resource.

In the code add the above changes:

// create a scenario to simulate future events
const predictive = new ScenarioBuilder("Predictive")
    .continueScenario(descriptive)
    .resource(orders)
    .process(predicted_sales)
    .process(predicted_procurement)
    .alterResourceFromValue("Reports", new Map())
    .alterResourceFromStream("Suppliers", custom_suppliers.outputStream())
    .alterResourceFromStream("Orders", custom_orders.outputStream())
    .alterResourceFromPipeline("Price", builder => builder
        .from(custom_price.outputStream())
        .transform((price) => GetField(price, 'price'))
    )
    // end simulation at the end date
    .endSimulation(end_date.outputStream())

Update dashboard

To enable an interactive solution, the dashboard can be extended to suit the new editable data sources.

Update orders layout

To include an editable version of the orders table in the dashboard, you can change the table layout, with the following steps:

  1. Add the custom_orders data source to the fromPatch method.
  2. Add the "Recommended" orders and "Suppliers" data streams to the input method.
  3. Add a readonly "Date" column, from the date.
  4. Add a "Supplier Name" column, from the supplierName field, with a range of all the suppliers, and a target of the recommended supplier.
  5. Disable adding and removing orders.

In the code add the above changes:

// create an editable table of orders
const orders_graph = new LayoutBuilder("Orders")
    .table(
        "Orders",
        builder => builder
            .fromPatch(custom_orders)
            .input({ name: "Recommended", stream: prescriptive.simulationResultStreams().Orders })
            .input({ name: "Suppliers", stream: descriptive.simulationResultStreams().Suppliers })
            // make the date readonly
            .date("Date", {
                value: fields => fields.date,
                readonly: true
            })
            // allow selection of supplier based on all the suppliers, and the recommended supplier
            .string("Supplier Name", {
                value: fields => fields.supplierName,
                range: (_, inputs) => Keys(inputs.Suppliers),
                target: (fields, inputs) => GetField(Get(inputs.Recommended, Print(fields.date, "YYYY-MM-DD")), "supplierName"),
            })
            // disable adding or removing orders
            .disableAdd()
            .disableRemove()
    )

Update suppliers layout

You can apply the same concepts to the suppliers table, with the following steps:

  1. Add the custom_suppliers data source to the fromPatch method.
  2. Add a readonly "Supplier" column, from the supplierName field.
  3. Add a "Payment Terms" column, from the paymentTerms field, with a min and max of 0 and 100.
  4. Add a "Lead Time" column, from the leadTime field, with a min and max of 0 and 100.
  5. Add a "Unit Cost" column, from the unitCost field, with a min and max of 0 and 5.
  6. Add a "Unit Qty" column, from the unitQty field, with a min and max of 0 and 5000.
  7. Disable adding and removing suppliers.

In the code add the above changes:

// create an editable table of suppliers
const supplier_graph = new LayoutBuilder("Suppliers")
    .table(
        "Suppliers",
        builder => builder
            .fromPatch(custom_suppliers)
            // supplier name is readonly
            .string("Supplier", {
                value: fields => fields.supplierName,
                readonly: true
            })
            // provide limits to the payment terms, lead time, unit cost and unit qty
            .float("Payment Terms", {
                value: fields => fields.paymentTerms,
                min: 0,
                max: 100,
            })
            .float("Lead Time", {
                value: fields => fields.leadTime,
                min: 0,
                max: 100,
            })
            .float("Unit Cost", {
                value: fields => fields.unitCost,
                min: 0,
                max: 5,
            })
            .integer("Unit Qty", {
                value: fields => fields.unitQty,
                min: 0n,
                max: 5000n,
            })
            // disable adding or removing suppliers
            .disableAdd()
            .disableRemove()
    )

Define price layout

Lastly, you can create a new form layout for the price, with the following steps:

  1. Add the custom_price data source to the fromStream method.
  2. Add the "Recommended" price data stream to the input method.
  3. Add a "Price" float input, with a min and max of 0 and 100, and a target of the recommended price.

In the code add the above changes:

// create an editable form for the price
const price_form = new LayoutBuilder("Price")
    .form(
        "Price",
        builder => builder
            .fromStream(custom_price.outputStream())
            .input({ name: "Recommended", stream: prescriptive.simulationResultStreams().Price })
            // provide a float input for the price, with a min and max, and target
            .float("Price", {
                value: fields => fields.price,
                min: rrp * 0.7,
                max: rrp,
                target: (_fields, inputs) => inputs.Recommended,
                target_display: (_fields, inputs) => PrintTruncatedCurrency(inputs.Recommended),
            })
    )

Update kpi headers

Finally, you can update the kpi headers to exclude the price, and add the price form to the panel, with the following steps:

  1. Add the "Price" layout to the panel with the "Orders" and "Suppliers.
  2. Remove the price item from the header.

In the code add the above changes:

const dashboard = new LayoutBuilder("Dashboard")
    .panel(
        "row",
        builder => builder
            .tab(40, builder => builder
                .layout(orders_graph)
                .layout(supplier_graph)
                .layout(price_form)
            )
            .tab(60, builder => builder
                .layout(cash_graph)
                .layout(liability_graph)
                .layout(inventory_graph)
            )
    )
    .header(
        builder => builder
            .item(
                "Profit (% Full Potential)",
                builder => builder
                    // add a kpi to the header, with the cash value, target, comparison and goal
                    .fromStream(prescriptive.simulationResultStreams().Cash)
                    .input({ name: "interactive", stream: predictive.simulationResultStreams().Cash })
                    .kpi({
                        value: (_value, inputs) => PrintTruncatedCurrency(inputs.interactive),
                        target: (value) => PrintTruncatedCurrency(value),
                        comparison: (value, inputs) => Compare(inputs.interactive, value),
                        goal: 'greater'
                    })
            )
            .item(
                "Inventory (% Full Potential)",
                builder => builder
                    .fromStream(prescriptive.simulationResultStreams().Inventory)
                    .input({ name: "interactive", stream: predictive.simulationResultStreams().Inventory })
                    // add a kpi to the header, with the inventory value, target, comparison and goal
                    .kpi({
                        value: (_value, inputs) => inputs.interactive,
                        target: (value) => value,
                        goal: 'less'
                    })
            )
            .item(
                "Liability (% Full Potential)",
                builder => builder
                    .fromStream(prescriptive.simulationResultStreams().Liability)
                    .input({ name: "interactive", stream: predictive.simulationResultStreams().Liability })
                    // add a kpi to the header, with the liability value, target, comparison and goal
                    .kpi({
                        value: (_value, inputs) => PrintTruncatedCurrency(inputs.interactive),
                        target: (value) => PrintTruncatedCurrency(value),
                        comparison: (value, inputs) => Compare(inputs.interactive, value),
                        goal: 'greater'
                    })
            )
    )

Congratulations, you have now created an interactive solution that allows the user to adjust future decisions, and compare the results to the optimized decisions. Deploy the project to see if it's easy to "beat" the performance of the optimizer.

Example Solution

The final solution for this tutorial is available below:

Next Steps

You now know how to create a range of insights to solve complex business problems for a modern business.

On this page