Publish Custom Cross-Visual Filters

This applies to: Visual Data Discovery

You can build and enable your own custom cross-visual filters. An example is provided below.

If you use date-time fields in your custom cross-visual filters, they must be in the format required by Symphony. See Date-Time Formats in Cross-Visual Filters for information on the required date-time format and an example for how to convert your data to the required format.

// START: PUB/SUB COMMON SECTION
// An embedding application should listen for the 'composer-dashboard-ready' event
// BEFORE attempting to publish or subscribe to cross-visual filters. The code below
// should be specified at the beginning of both publish and subscribe Javascript code.

const DASHBOARD_READY_EVENT = 'composer-dashboard-ready';
  const pubSubReady = new Promise((resolve) => {
    const resolvePubSubReady = (message, publisherId) => {
      resolve();
      document.removeEventListener(DASHBOARD_READY_EVENT, resolvePubSubReady);
    }
    document.addEventListener(DASHBOARD_READY_EVENT, resolvePubSubReady);
  });
/* END: Pub/Sub common section */

/* START: Publish to Cross-Visual Filters */

// The following code represents the From and To date pickers on the
// embedding application's page that allow users to filter the data by
// a date range.  The BETWEEN operator is used for the link name
// defined in the dashboard called 'LaunchedDate'. Note that the first part of
// this code converts the date-time data to the format expected by Composer.

const dateFromInput = document.getElementById('date-from');
  const dateToInput = document.getElementById('date-to');

const formatDate = (date) => {  
    const d = new Date(date);
  const year = `${d.getFullYear()}`;
    let month = `${d.getMonth() + 1}`; 
  let day = `${d.getDate()}`;
    if (month.length < 2) {    
      month = `0${month}`;
    }
    if (day.length < 2) {
      day = `0${day}`;
    }

    return `${year}-${month}-${day}`;
  }
  
  const getEndOfDayString = dateString => `${dateString} 23:59:59.999`;
  const getStartOfDayString = dateString => `${dateString} 00:00:00.000`;

    const dateInputChangeHandler = (event) => {    
        const dateFromInputValue = dateFromInput.value;
        const dateToInputValue = dateToInput.value;

      const dateFrom = dateFromInputValue ? new Date(dateFromInput.value) : null;    
      const dateTo = dateToInputValue ? new Date(dateToInput.value) : null;

        const dateFromString = dateFrom ? formatDate(dateFrom) : null;
        const dateToString = dateTo ? formatDate(dateTo) : null;
   
        const dateTimeFromString = dateFromString ? getEndOfDayString(dateFromString) : null;
      const dateTimeToString = dateToString ? getStartOfDayString(dateToString) : null;

        let operation = 'BETWEEN';
      let value = [dateTimeFromString, dateTimeToString];

          if (!dateTimeFromString) {
          operation = 'LT';
          value = dateTimeToString;
        }

          if (!dateTimeToString) {
          operation = 'GT';        
          value = dateTimeFromString;
        }

          let publishObject = {
            type: 'selection',
            valueType: 'TIME',
            ranges: [
                {
                  operation: '<operation>',
                  value: '<value>'
                }
            ]
        }


          if (!dateTimeFromString && !dateTimeToString) {
          publishObject = null;
        }
       
        pubSubReady.then(() =>  embedManager.publish('LaunchedDate', publishObject));
      }

      dateFromInput.addEventListener('change', dateInputChangeHandler);
      dateToInput.addEventListener('change', dateInputChangeHandler);

// This represents a drop-down field on the embedding application's page that 
// lists a set of countries the user can filter by. After selecting a value,
// the embedding application calls its 'publishValue' function, defined
// below with the link name '<linkname> and the selected country value.
// The link name is defined in the dashboard. To clear the value filter,
// make sure you pass a null value as shown below.

      const fieldSelect = document.getElementById('field-select');
      fieldSelect.addEventListener('change', (event) => { 
          const value = event.target.value;
          const publishObject = value !== 'null' ? {
              type: 'selection',
              valueType: 'ATTRIBUTE',
              ranges: [
                {
                  operation: 'IN',
                  value: '<value>'
                }
              ]
          } : null;
          pubSubReady.then(() =>  embedManager.publish('Country', publishObject));
        });
/* END: Publish to Cross-Visual Filters */

The publish Method

The publish method publishes a message (filter) for a specific cross-source or same-source link (channel). Publishing a link filter causes any subscribing handlers for the link to be called and passed the filter message. There is no registration process for a link, simply call the publish method with a link name and it will be created. No value is returned.

The publish Properties

The properties for the publish method of the Zoomdata class are described in the following table.

The publish Filter Message Structure

All filter messages (cross-visual filters) that can be consumed by Symphony or that will be published by Symphony must conform to the following structure. The value of the type property defines the structure of the rest of the message.

ranges: [
   {
      operation: '<operation>',
      value: '<value>'
   },
]