Define custom report renderers for dashboard

Adds additional output types for dashboard items that define a report or

There are several built-in renderers defined in reportRenderers.js.

withReportRenderer Mixin

If the renderer uses the mixin, the only function required is render. Optionally, a processData function can be defined to transform the raw server results. It's better to process the data in processData function instead of render because it will run once on refreshData events, instead of on every reflow event.

The render function is called with four parameters render(d3, svgNode, data, d3tip)

  • d3 [Object] The d3 library object
  • node [DomElement] The dom element to populate
  • data [?] The response from the server (after processData)
  • d3tip [Object] The d3tip library object (for tooltips)


Using Mixin

define(['public/v1/api', 'dashboard/reportRenderers/withRenderer'], function(defineComponent, withReportRenderer) {
    return defineComponent(MyReportRenderer, withReportRenderer)
    function MyReportRenderer() {
        this.render = function() { ... }


registry.registerExtension("org.visallo.dashboard.reportrenderer", config)

Configuration Properties:
Name Type Attributes Description
identifier string

Unique identifier for this type of renderer. Can be referenced by dashboard report item using defaultRenderer: [id] in report configuration.

label string

Shown in the configuration interface (see tutorial) in Visualization section.

supportsResponse function

Return true if this renderer can handle the data argument passed to it.

componentPath string

RequireJS path to org.visallo.dashboard.item~Component component.

configurationPath string <optional>

RequireJS path to extra configuration.

Validation Function

Extensions registered must pass this validation check to be used.

function extensionValidator(e) {
    return _.isFunction(e.supportsResponse) && _.isString(e.identifier) && e.identifier && _.isString(e.label) && e.componentPath;