Object holding various meta information that controls how the visualization behaves.
For instance, an attribute can be set that controls the default shape that is used
for encoding categorical legend items. A good place to make changes to this meta
information is in the create method of the visualization.
// Change the shape of all categorical legend items to 'rectangle'.
this.meta.legendShape = "rectangle";
// Limit the 'categories' slot to 250 tuples.
this.meta.slotLimits.set( "categories", 250 );The properties of the rendering service. Created at initialization time, this object will not change during the lifetime of the instance. Since VIPR handles locking of properties during rendering, we can safely pass this instance as part of UpdateInfo.
Properties are 'protected' to allow subclasses to access them in methods that don't have an UpdateInfo. An example is [[getEncodings]], where the renderer may need to return legend encodings based on certain property values. The general rule however is to access properties through UpdateInfo.props.
// Retrieve the background color of the visualization.
const bgColor = _info.props.get( "color.background" );Called during initialization of the visualization. This is, after the constructor, the very first method that is called on the visualization object.
HTML element used as entry point for the visualization.
An Element or a promise that resolves to an element. The element that is
returned here will be passed to the update function as part of UpdateInfo.
This element is considered the root element of the visualization.
A void return value is also allowed (or a Promise that resolves with void). In
that case, the root element of the visualization will be the _parent that was
passed to create.
Called for every palette that is not linked to a slot. Subclasses can override this method to dynamically link a palette to a slot.
Actual data.
The name of a slot that is supposed to be linked to the palette, or null if the palette remains unlinked.
Performs a hit test on a given position. The position is specified in both client coordinates and viewport coordinates. Client coordinates are relative to the upper left corner of the browser. Viewport coordinates are relative to the top left of the visualization. Subclasses can override this method to perform specific hit testing.
Note: the default implementation checks if
_elem.__data__represents a DataPoint, Tuple or Segment. If this is the case, then_elem.__data__is returned. This provides automatic hit testing for d3 visualizations when the node is bound to a DataPoint, Tuple or Segment.
Element that was found on on the hit test position. Can be null in case no element was found on the specified hit test position.
Client coordinate of the hit test position.
Viewport coordinate of the hit test position.
An DataPoint, Tuple or Segment element from the data model, or null if nothing was hit.
Load a stylesheet by appending a style tag to the head of the HTML document.
Absolute or relative url of the stylesheet. If the url is relative, then it will be made absolute by calling toUrl. Relative means relative to the root of the visualization.
Returns a translated string given a key.
The key to lookup in the translation table.
The translated string, or an empty string if the key is unknown.
Returns an absolute Url based on a Url relative to the visualization. Can be used to create absolute references to e.g. static resources.
Path of the content relative to the root of the visualization.
An absolute url.
const img = this.toUrl( "./static/image.png" );Info which can be used to render the visualization. Contains the root element in which rendering should take place, along with properties, locale info and data. During (async) rendering this info will not change.
Optionally a promise that resolves when rendering is complete. If no promise is returned, rendering is considered to have completed synchronously.
Called when the host application requests information to update the legend. The default implementation creates the correct encodings needed for the host. Override this method only when you need to make modifications to the automatically created legend.
The active data set.
A list of legend encodings.
// Reverse the items in the categorical legend.
updateLegend( _data: DataSet ) : Encoding[]
{
// Call base class implementation.
encodings = super.updateLegend( _data );
// Retrieve the first, categorical, encoding.
const encoding = encodings[ 0 ] as CatEncoding;
// Reverse the entries in the encoding.
encoding.entries.reverse();
}Called immediately if the host assigns a new value to a property. Also called at initialization time for each property in the bundle. Subclasses of Renderbase can override this method to process property changes. For instance, they can set the active state of properties based on the value of another property.
Name of the property that has changed.
New value of the property.
RenderBase serves as the base class for all custom visualizations. It provides a custom visualization with meta information, properties, nls support and a number of methods that can be overridden to implement rendering and hit testing. A minimal custom visualization would look like this:
import { RenderBase } from "@businessanalytics/customvis-lib" class MyCustomVis extends RenderBase { create( _node: HTMLElement ): void { _node.textContent = "Hello Custom Visualization"; } }