Component Dependencies

Overview

When you add a set of components to a blog, often times you want one component to feed another, such as a dataset feeding a chart. In addition, you may want there to be dynamic interactions between the components. To understand how dependencies can be set up among component, please see the following:

Components Dependencies

There are a couple of ways to implement component dependencies. the first is through the data mechanism in the blog or workspace. For example, when you add a data component in a blog, it inserts data into the blog. Then, when you add a chart component, you will be given a dialog window where you can choose the dataset and columns that you wish to chart.

Several components allow you to connect them to data in the blog or workspace through a dialog or a wizard.

When you make a connection like this, you have created a dependency. Whenever the data in the blog changes, the change will be automatically pushed to the components that depend upon it (in this case, the chart).

Transformations

Often times when you connect components, you need to transform the data before it is input into the target component. For example, in the case of the chart, when you choose the fields to chart in the chart dialog window, the chart is performing a transformation for you under the covers, something similar to the following: 


data.map(p=>{
  return {
    x:p.date,
    y:p.price
  };						
})


This code takes a dataset and maps it to a dataset with an x and a y property.

Sometimes you will need to transform data in way that cant easily be accomplished with a wizard or dialog box. In such a case, you will have to create a script to transform the data. Scripting in a desktop is provided with the following apps:

Events

The davinci platform typically does not rely on events and event handlers to integrate components, however, there are scenarios where you may wish to use events to communicate between components. The most common example is when you have a button in the blog. You can register an event handler with the button that will fire when the button is clicked.

When an event handler is called, in order to make a change to a separate component, you will need to get a reference to that component. This can be done using the $ctrl function. You need the id of the component that you wish to get a reference to, but then you can retrieve that component by calling $ctrl as in the following: 


let ctrl = $ctrl('chart-id');
ctrl.clear();


Video Demos

Component Dependencies