View specific configuration - abudaan/vega-multi-view GitHub Wiki

---
spec: spec_1
renderer: canvas
type: bson
element: id
run: true
hover: false
leaflet: false
publish:
    - signal: internalSignalName1
      as: externalSignalName1
    - signal: internalSignalName2
      as: externalSignalName2
subscribe:
    signal: externalSignalNameOfAnotherView
    as: internalSignalName2
tooltipOptions:
    showAllFields: false
    fields:
        - formatType: string
          field: fieldName
          title: displayName
styling:
    url: ../css/view1.css
    css: 'div {
        color: red;
        font-size: 1em;
    }'
    addToHead: false
    classes: [view, small-view]
    classesAppend: true

Note that because a spec can be rendered without a view specific configuration file, none of the parameters above are mandatory.

spec: string

The spec this configuration belongs to.

renderer: "canvas" | "svg"

The renderer to use this view

type: "yaml" | "json" | "cson" | "bson" | "json-string" | "object"

File-type of the spec. This setting overrules the global setting. vega-multi-view detects file types automatically, however providing a type can make the parsing process a tiny bit faster. In case you serve your specs using a REST API, vega-multi-view uses the content type in the response header to detect the file-type. If your server is not sending the correct content types you should provide a file type. Content types:

  • json: application/json
  • yaml: text/yaml
  • bson: application/bson
  • cson: text/cson

Specs in the types json-string and object are typically already available in the client-side runtime and don't need to be loaded from a server.

element: false | string | HTMLElement

The element where the view will be rendered to. If the element does not exist a div will be created and added to the HTML element that is set in the global settings. Use false (boolean) for headless rendering.

run: boolean

Whether or not to call the run() method of the view after it has been added to the page. Defaults to true.

hover: boolean

Whether or not to call the hover() method of the view after it has been added to the page. Defaults to false.

leaflet: boolean

Whether or not the Vega view should be added as a layer to a Leaflet map. Defaults to false.

publish: SignalType | Array<SignalType>

// @flow
type SignalType = {
    [signal: string]: string,
    [as: string]?: string,
    [query: string]?: QueryType,
};

type QueryType = {
    [dataset: string]: string,
    [action: string]: ActionUnionType
    [select: string]?: {
        [field: string]: string,
        [test: string]?: TestUnionType,
    },
    [update: string]?: {
        [fields: string]: Array<string>,
    },
};

type ActionUnionType =
    | 'change'
    | 'remove'
    | 'insert'
    | 'replace_all'
    | 'remove_all'
;

type TestUnionType =
    | '=='
    | '!='
    | '<'
    | '>'
;

A signal or array of signals that will be available for the other views to listen to. An explanation of the query object can be found in the data binding chapter.

subscribe: SignalType | Array<SignalType>

A signal or array of signals originating from another view that this view wants to listen to.

tooltipOptions: TooltipType

The options that will be passed on to vega-tooltip for rendering custom tooltips on top of the view.

// @flow
type TooltipType = {
    [showAllFields: string]?: boolean,
    [fields: string]?: {
        [formatType: string]: string,
        [field: string]: string,
        [title: string]: string,
    },
};

styling: StylingType

Add view specific styling to the view. You can add the URI of an external css file or inline the styling as text. If you set values for both url and css, the value set for css will prevail. The setting addToHead defaults to false, if you set it totrue the styling will be added to the head of the page before the Vega view gets rendered. If you set it to false, you can bundle all styles on the server before sending to the client. Note that you can only style a view when you use the SVG renderer.

// @flow
type StylingType = {
    url?: string,
    css?: string,
    cssAppend?: boolean,
    addToHead?: boolean,
    classes?: string | Array<string>,
    classesAppend?: boolean,
};
url: string

The url of an external stylesheet. Note that this setting only has effect when the renderer is set to 'svg'.

css: string

SVG renderer only. The css as string, allows you to inline the css in the configuration file which saves a HTTP request. If you set both url and css, the value set for css will prevail.

cssAppend: boolean

Not supported in ViewConfigType. You can pass a value but it will be ignored.

addToHead: boolean

SVG renderer only. Adds the styling to the head of the HTML page before the Vega view gets rendered, defaults to false. Default value is false, keep this setting if you want to bundle styles on the server before sending to the client. Note that this setting only has effect when the renderer is set to 'svg'.

classes: string | Array<string>

The css class or array of css classes that will be added to the view's containing HTML element.

classesAppend: boolean

Whether the classes should be appended to the existing classes or replace them. Defaults to true. This setting can be very handy if want to extend or overwrite some rules in the css class that is defined in the global configuration. For instance you want to use the global styling but overrule the background color.

⚠️ **GitHub.com Fallback** ⚠️