Synchronizing components

Components may require synchronization that aids in visualizing, navigating and highlighting specific data.

How to synchronize the components?

To synchronize components you have to specify which event you want to synchronize between each component, as well as they have to use the same connector defined in the dataPool.

The events, that can be synchronized between components are:

• visibility
• extremes
• highlight

Sync declaration

sync: {
  highlight: true
}

The full example of synchronized components:

Dashboards.board('container', {
  dataPool: {
      connectors: [{
          id: 'Vitamin',
          type: 'CSV',
          options: {
              csv: `Food,Vitamin A,Iron
              Beef Liver,6421,6.5
              Lamb Liver,2122,6.5
              Cod Liver Oil,1350,0.9
              Mackerel,388,1
              Tuna,214,0.6`,
          },
      }]
  },    
  components: [{
      connector: {
          id: 'Vitamin'
      },
      sync: {
          visibility: true,
          highlight: true,
          extremes: true
      },
      cell: 'dashboard-col-0',
      type: 'Highcharts',
      columnAssignment: {
          Food: 'x',
          'Vitamin A': 'value'
      }
  }, {
      cell: 'dashboard-col-1',
      connector: {
          id: 'Vitamin'
      },
      sync: {
          visibility: true,
          highlight: true,
          extremes: true
      },
      type: 'Highcharts',
      columnAssignment: {
          Food: 'x',
          'Vitamin A': 'y'
      }
  }]
});

Components sync compatibility

Component's type	highlight	extremes	visibility
HTML	no	no	no
Highcharts	yes	yes	yes
DataGrid	yes	yes	yes
KPI	no	yes	no