Canvas
Overview
The visual container. The Canvas is used for accessing properties and functions related to visualization and rendering.
- From version: 2020.20
Properties
height
height: number
The height of the visual container. Used to calculate the dimension of your visual and fit it to the parent container.
const height = cvApi2.canvas.height;
style
style: Style
The Visual's styles. Used to access the styles object and its theme configurations for styling the custom visual.
const themeIndexColor = cvApi2.canvas.style.getThemeColorByIndex(0);
width
width: number
The width of the visual container. Used to calculate the dimension of your visual and fit it to the parent container.
const width = cvApi2.canvas.width;
Methods
addEventListener
addEventListener ( event : Event , callBack : () => void): void
Method for attaching functions to specific triggered events. This allows methods to be called based on event operations on the canvas or based on user interactions.
function main() {
cvApi2.canvas.addEventListener(cvApi2.enums.events.Render, render);
}
function render(){
}
Parameters
-
event:Event
The event that is being subscribed to.
-
callBack:() => void
The function to invoke when the event is triggered.
-
- (): void
-
Returns void
-
Returns void
getHTMLElement
getHTMLElement (): SVGElement
Gets the visual container's parent HTML element. The parent container is the visual starting point. The custom visual's generated elements will be appended to it in the HTML DOM.
const element = cvApi2.canvas.getHTMLElement();
element.appendChild(foreignObject).appendChild(div);
Returns SVGElement
the visual container's parent HTML element.
isSelectionEnabled
isSelectionEnabled (): boolean
Indication to enable or disable the selection of members and datapoints. Can be used to control the item selection mechanism.
const isSelectionEnable = cvApi2.resultSet.canvas.isSelectionEnabled();
Returns boolean
Indication to enable or disable the selection of members and datapoints.
notifyRenderComplete
notifyRenderComplete (): void
Use this function to notify services that the visual is done rendering. Some services need to know when the render process is done for their process to work correctly. Sometimes the render process can be asynchronous, this function will let you notify those services when you are done rendering. Notice that the services will wait for your notification only if you will set "waitForCompleteNotify" as true in your visual configuration.
cvApi2.canvas.notifyRenderComplete();
Returns void
setCustomCssStyle
setCustomCssStyle ( styles : string): void
Set a specific CSS style for the visual. Used to add inline custom css styling to the visual logic.
function main() {
cvApi2.canvas.setCustomCssStyle(defineStyles());
}
function defineStyles(){
return '.axis path,'+
'.axis line {'+
'fill: none;'+
'stroke: #000;'+
'shape-rendering: crispEdges;}';
}
Parameters
-
styles:string
CSS code implementation.
Returns void
setExternalStyleSheets
setExternalStyleSheets ( paths : string[]): void
Set external style sheets for the styling of the visual. Used to add entire custom style sheet documents.
cvApi2.canvas.setExternalStyleSheets(['https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css']);
Parameters
-
paths:string[]
Each string represent the address for the style sheet document.
Returns void
showDataPointContextMenu
showDataPointContextMenu ( datapoint : Datapoint , event : MouseEvent<any, MouseEvent>): void
Show the 'Data Point' context menu for the selected datapoint. Provides a method to trigger the data point context menu from Pyramid. Showing the context menu gives the user more options and interactions between the visual and the data.
const datapoint = cvApi2.resultSet.data.getCurrentTrellisData().datapoints[0];
svgElement
.append("path")
.on("contextmenu", function(d) { cvApi2.canvas.showDataPointContextMenu(datapoint, d3.selection.event); });
Parameters
-
datapoint:Datapoint
A Datapoint for the context menu to interact with.
-
event:MouseEvent<any, MouseEvent>
DOM mouse event object that will trigger the context menu.
Returns void
showElementsContextMenu
showElementsContextMenu ( elements : Element [] , event : MouseEvent<any, MouseEvent>): void
Show the 'elements' context menu for the selected elements. Provides a method to trigger the member element context menu from Pyramid. Showing the context menu gives the user more options and interactions between the visual and the data.
const elements = cvApi2.resultSet.data.getCurrentTrellisData().datapoints[0].Coordinates;
svgElement
.append("path")
.on("contextmenu", function(d) { cvApi2.canvas.showElementsContextMenu(elements, d3.selection.event); });
Parameters
-
elements:Element[]
Array of elements you want the context menu to interact with.
-
event:MouseEvent<any, MouseEvent>
DOM mouse event object that will trigger the context menu.
Returns void