example 1 - abudaan/vega-multi-view GitHub Wiki

import { addViews } from 'vega-multi-view';
import spec1 from '../specs/vega-spec1';

spec1.vmvConfig = {
    leaflet: true,
    publish: [{
        signal: 'hover',
        as: 'spec1_hover',
    }],
    subscribe: [{
        signal: 'spec2_hover',
        as: 'hover',
    }],
};

const config = {
    specs: {
        spec1: spec1,
        spec2: ['../specs/spec2.yaml', {
            element: 'divSpec2',
            hover: true,
            publish: [{
                signal: 'hover',
                as: 'spec2_hover',
            }],
            subscribe: [{
                signal: 'spec1_hover',
                as: 'hover',
            }],
        }]
    }
};

addViews(data)
    .then(result => {
        const view1 = result.spec1.view;
        view1.hover();
    });

What we see here is two specs that respond to each other's hover signal.

The spec is imported as javascript object, then a configuration is added to the spec. You can safely add a vmvConfig entry to a spec because it will be stripped off before the spec is passed to the Vega parser. If you have to load a spec from the server it saves you a HTTP request if you inline the view specific configuration in the spec.

The second spec is added as a tuple; the first element is always the spec, the second the configuration. Remember that both spec and configuration can created from a:

• javascript object (POJO)
• JSON string
• uri of a JSON, BSON, CSON or YAML file.

Personally I find a Vega specs in YAML format the best readable. Also a YAML file is a bit smaller in file size compared to JSON.

In the resolve function of the addViews promise we have to enable hover event processing for spec1 because hover defaults to false and it hasn't been overridden in the view specific configuration. The configuration of spec2 has already overridden the global hover setting.

The vega-specs project shows how you can create Vega specs in javascript and export them in several formats (JSON, BSON, CSON, YAML or as a template).