Instantiates a new RevealView component and renders it at the provided DOM selector location.
Selector to the DOM element where the RevealView should be rendered. Exception is thrown if no element is found in DOM matching the selector.
This property allows customization of the grouping separator that appears between the category and field name. The default character used is "/" (forward slash).
revealView.categoryGroupingSeparator = " - ";
This property allows the customization of the default visualization when a new visualization is created.
revealView.defaultChartType = RVChartType.ColumnChart;
This event is triggered when Reveal is requesting credentials for a given data source, and only when the creation of new data sources is not enabled (by adding providers to addDataSourceEnabledProviders). This is optional, as you can specify server side credentials for all your data sources, but if you don't know in advance credentials your users should use (for example if you want your users to enter their own credentials to the database) you can use this approach. Please note how credentials are requested and stored is something you need to do in your application, this event indicates credentials are needed, once the user entered credentials (or cancelled the flow) you must call the callback function received as a parameter, the function receives a boolean parameter that indicates if Reveal should try again (true) or the prompt was cancelled (false).
Event triggered when the dashboard property is set to a new instance of an RVDashboard. The event handler receives one argument:
args: An instance of DashboardChangedEventArgs which contains the old and new dashboards.Remarks: If the dashboard property is set to null, a new dashboard is created automatically with a title "New Dashboard".
Example usage:
revealView.onDashboardChanged = function (args: DashboardChangedEventArgs) {
console.log('Dashboard has changed.');
console.log('Old Dashboard:', args.oldValue);
console.log('New Dashboard:', args.newValue);
};
Event called when the list of data sources is about to be displayed, this is the way to show your own UI for the list of data sources instead of the default UI. If this handler is not installed Reveal will use the default dialog for selecting a data source.
This event is triggered whenever the end user clicks on the 'Add visualization' button. You can create custom datasources to replace the default/existing ones. The argument is a callback function you're supposed to call and pass your custom collection of datasources which the end user will see.
revealView.onDataSourcesRequested = function (callback, trigger) {
if(trigger == RVDataSourcesRequestedTriggerType.Visualization){
var inMemoryDSI = new RVInMemoryDataSourceItem("employees");
inMemoryDSI.title = "My InMemory Title";
inMemoryDSI.description ="My InMemory Description";
var sqlDs = new RVSqlServerDataSource();
sqlDs.title = "Clients";
sqlDs.id = "SqlDataSource1";
sqlDs.host = "db.mycompany.local";
sqlDs.port = 1433;
sqlDs.database = "Invoices";
callback(new $.ig.RevealDataSources([sqlDs], [inMemoryDSI], true));
}
};
This event is triggered when entering the visualization editor after selecting your data source. With this event you can customize the list of fields shown in the editor by removing, renaming, or reordering fields.
revealView.onFieldsInitializing = function (args) {
var editedFields = args.fields;
// a example of how you can delete fields
// list of field names to be deleted
var exclude = ["Date", "Budget", "CTR", "Avg.CPC", "Avg. CPC", "Traffic"];
// deleted the fields
editedFields = editedFields.filter(f => !exclude.some(e => e == f.name));
//change name to show to Spend field to Spent
var fieldToChange = editedFields.find(f => f.name == "Spend");
if (fieldToChange) { fieldToChange.label = "Spent"; }
//change order
args.useCustomSort = true; //when set to true the fields are displayed in the same order as in args.fields
// if you want to re order only the first two positions
var newOrder = ["Organic %", "Spend"]; // change the order for the first two position,
//for this example spend will be in the first position and Organic in the second position,
//the rest of the fields will be kept in the order they had in args fields
newOrder.forEach(function (field) {
var moveFiled = editedFields.find(function (f) {
return f.name === field;
});
if (editedFields.indexOf(moveFiled) !== -1) {
editedFields.splice(editedFields.indexOf(moveFiled), 1);
editedFields.unshift(moveFiled);
}
});
args.fields = editedFields
}
This event is triggered whenever the end user clicks the 'Export Image' button in the 'Export Image' popup after annotating the screenshot (optional).
Note: This feature relies on server-side image rendering, so you will need to enable in your .NET Core or Java Reveal server component.
revealView.onImageExported = function (img) {
console.log(img);
};
Will be called when a linked dashboard is needed either if the user tries to follow a dashboard link or tries to create a dashboard link while editing.
Note: This callback is expected to return a Promise of an RVDashboard.
revealView.onLinkedDashboardProviderAsync = function (dashboardId, linkTitle) {
return $.ig.RVDashboard.loadDashboardAsync(dashboardId);
};
This event is triggered when the end user maximizes or minimizes a visualization. If the action is maximizing, the visualization the title of the maximized visualization can be retrieved via the maximizedVisualization property of the revealView object.
revealView.onMaximizedVisualizationChanged = function () {
maximizedVisualization = revealView.maximizedVisualization;
msg = "";
if (maximizedVisualization != null) {
msg = maximizedVisualization.title;
} else {
msg = "no current maximized visualization";
}
console.log("Maximized visualization changed! " + msg);
};
This event is triggered when the overflow is clicked on the dashboard or visualization to expose the menu. Using this event, you can customize what is shown in that menu.
revealView.onMenuOpening = function (visualization, args) {
for (var i = 0; i < args.menuItems.length; i++)
{
if (i == 2)
{
args.menuItems[i].isHidden = true;
}
if (args.menuItems[i].title === "Edit")
{
args.menuItems[i].title = "Edit Mode";
}
}
var icon = new $.ig.RVImage("https://svgsilh.com/png-512/1088490.png", "Icon");
args.menuItems.push(new $.ig.RVMenuItem("Cool Menu Item", icon, () => { alert('Example'); }));
}
This event is triggered when the end user clicks 'Save' or 'Save As'. However, if this event is set in RevealView then the callback server side (SaveDashboardAsync) will not be called, and the application will handle how the dashboard is saved, for example by implementing its own controller server side.
revealView.onSave = function (rv, saveEvent) {
if (saveEvent.saveAs) {
var newName = prompt("Save as", dashboardId);
if (!newName) return;
saveEvent.serializeWithNewName(newName,
function (b) {
saveDashboard(newName, b, saveEvent);
});
} else {
saveEvent.serialize(
function (b) {
saveDashboard(dashboardId, b, saveEvent);
});
}
};
Event fired when the user hover over a visualization and a tooltip is about to show up.
revealView.onTooltipShowing = function (args) {
{
var vizTitle = args.Visualization.Title;
if(vizTitle == "noNeedForTooltipsHere")
{
args.Cancel = true;
}
}
Will be called when a url is needed if the user tries to follow a dashboard link. If this method is not provided, the link defined in the dashboard will be used. Note: This callback is expected to return the modified url.
revealView.onUrlLinkRequested = function (args) {
return args.url + "&modfiedUrl=true";
};
This event triggered when a visualization is about to request data, the event can be canceled if showing data for the visualization is not allowed. Using the args parameter you could cancel the data request by setting args.cancel to true and set the message to be displayed to the end user by setting cancel.errorMessage. See VisualizationDataLoadingEventArgs.
JavaScript:
revealView.onVisualizationDataLoading = function (args) {
if(!hasAccess(args.visualization)){
args.cancel = true;
args.errorMessage = "You don't have access to this data";
}
};
TypeScript:
revealView.onVisualizationDataLoading = (args:RevealApi.VisualizationDataLoadingEventArgs) =>
{
if(!hasAccess(args.visualization)){
args.cancel = true;
args.errorMessage = "You don't have access to this data";
}
}
This event is triggered whenever the end user clicks on a data point over a maximized visualization and not in edit mode.
revealView.onVisualizationDataPointClicked = function (visualization, cell, row) {
console.log("Visualization Data Point Clicked");
console.log(visualization.title);
console.log(cell.columnLabel);
console.log(cell.value);
console.log(cell.formattedValue);
console.log("First cell in the row has label:" + row[0].columnLabel)
}
Event triggered when the visualization editor is closed. Using the args parameter you could check if this is a brand new visualization or the user edited an existing one. The isCancelled flag can be used to determine whether the changes were applied or discarded. The isCancelled is true when the later is true.
revealView.onVisualizationEditorClosed = function (args) {
if(args.isNewVisualization == false) {
}
};
This event is triggered when the end user clicks on cancel("x") button upon editing/creating a visualization. Using the args parameter you could check if this is a brand new visualization or the user is editing an existing one. You could also cancel the process of exiting edit mode by setting args.cancel to true.
revealView.onVisualizationEditorClosing = function (args) {
if(args.isNewVisualization == false){ //the user is editing
args.resetVisualization = true; //puts the widget to the state when it was when the user started editing it
}
};
Event triggered when the visualization editor is opened. Using the args parameter you could check if this is a brand new visualization or the user is editing an existing one.
revealView.onVisualizationEditorOpened = function (args) {
if(args.isNewVisualization == false) { //the user is editing an existing visualization
}
};
This event is triggered whenever the end user is trying to open the editor for a visualization. Using the args parameter you could check if this is a brand new visualization or the user is trying to edit an existing one. You could also cancel the process of entering the editor by setting args.cancel to true.
revealView.onVisualizationEditorOpening = function (args) {
if(args.isNewVisualization == false){
//the user is trying to edit an existing visualization
args.cancel = true; //prevent it
}
};
This event is triggered when the chart visualization loads and is in the process of creating each series. With this event you can customize the color used for the series.
revealView.onVisualizationSeriesColorAssigning = function (visualization, defaultColor, fieldName, categoryName) {
console.log("Visualization is creating a series");
console.log(visualization.title);
console.log(fieldName);
console.log(categoryName);
return defaultColor;
}
Returns the currently applied theme.
Returns the currently applied theme.
The list of providers that will be allowed when clicking "+ Data Source" in the data source selector, if empty (the default) or null data source creation will be disabled.
The list of providers that will be allowed when clicking "+ Data Source" in the data source selector, if empty (the default) or null data source creation will be disabled.
A flag indicating if new (calculated) fields can be added to the list of fields.
A flag indicating if new (calculated) fields can be added to the list of fields.
A flag that indicates if the end user will be allowed to create dashboard filters.
A flag that indicates if the end user will be allowed to create dashboard filters.
A flag that indicates if the end user will be allowed to create date filter.
A flag that indicates if the end user will be allowed to create date filter.
A flag indicating if the f(x) option in numeric values sections (like "Values") should be displayed or not.
A flag indicating if the f(x) option in numeric values sections (like "Values") should be displayed or not.
A flag that indicates if new visualizations can be added when the dashboard is edited.
A flag that indicates if new visualizations can be added when the dashboard is edited.
A flag indicating if the end-user can change the background color for a given visualization in the visualization editor (under Settings tab), if enabled the list of colors specified via RevealTheme.backgroundColors will be displayed as a suggested palette, but the user can also use an advanced mode to select any color. In the future, this property will be removed and the background color setting will be automatically visible in the visualization editor settings.
A flag indicating if the end-user can change the background color for a given visualization in the visualization editor (under Settings tab), if enabled the list of colors specified via RevealTheme.backgroundColors will be displayed as a suggested palette, but the user can also use an advanced mode to select any color. In the future, this property will be removed and the background color setting will be automatically visible in the visualization editor settings.
A flag that indicates if the "Copy" option is available in the menu for a visualization.
A flag that indicates if the "Copy" option is available in the menu for a visualization.
A flag that indicates if the "Duplicate" option is available in the menu for a visualization.
A flag that indicates if the "Duplicate" option is available in the menu for a visualization.
A flag indicating if the user can switch to edit mode or not.
A flag indicating if the user can switch to edit mode or not.
A flag that indicates if the maximize visualization would be visible and the user would be able to maximize visualizations.
A flag that indicates if the maximize visualization would be visible and the user would be able to maximize visualizations.
A flag indicating if the user can 'Save as' the dashboard.
A flag indicating if the user can 'Save as' the dashboard.
The list of available chart types for the end user to select from. Please note this only affects the list of visualizations to pick from, if a given dashboard is using a visualization not listed here, that visualization will be used anyway. The list is initially populated with all supported visualization types, so you can just remove the ones you would like to get excluded. Please note that RVChartType.Pivot and RVChartType.Image are used as the initial chart type for a new visualization (depending on the source selected) regardless if those types are not included in this list.
The list of available chart types for the end user to select from. Please note this only affects the list of visualizations to pick from, if a given dashboard is using a visualization not listed here, that visualization will be used anyway. The list is initially populated with all supported visualization types, so you can just remove the ones you would like to get excluded. Please note that RVChartType.Pivot and RVChartType.Image are used as the initial chart type for a new visualization (depending on the source selected) regardless if those types are not included in this list.
A flag indicating if crosshairs are displayed for charts.
A flag indicating if crosshairs are displayed for charts.
Get/set the dashboard that is/should be rendered.
Get/set the dashboard that is/should be rendered.
A flag indicating if tooltips are displayed on hover for chart visualizations.
A flag indicating if tooltips are displayed on hover for chart visualizations.
A flag indicating if interactive filtering is enabled.
A flag indicating if interactive filtering is enabled.
In Dashboard Editor, indicates if a small set of data should be displayed as tooltip when moving the mouse over a field.
In Dashboard Editor, indicates if a small set of data should be displayed as tooltip when moving the mouse over a field.
the maximized visualization object if any, null if no visualization is maximized
the maximized visualization object if any, null if no visualization is maximized
A flag indicating if server side saving is enabled.
A flag indicating if server side saving is enabled.
Gets the visibility status of the drill down breadcrumb.
Sets the visibility of the drill down breadcrumb.
If true, the breadcrumb will be shown; if false, it will be hidden.
Gets the visibility status of the dashboard title in the breadcrumb when the visualization is maximized.
Sets the visibility of the Dashboard title in the breadcrumb when the visualization is maximized.
If true, the Dashboard title in the breadcrumb will be shown when maximized; if false, it will be hidden.
A flag that indicates if the "Change data source" button should be displayed or not.
A flag that indicates if the "Change data source" button should be displayed or not.
A flag indicating if the button to change visualization should be available or not, this button is used to switch to another visualization type (for example from Bar to Column chart) without entering edit mode.
A flag indicating if the button to change visualization should be available or not, this button is used to switch to another visualization type (for example from Bar to Column chart) without entering edit mode.
A flag indicating if the button "Add fields from another data source" (in the visualization editor) should be available or not.
A flag indicating if the button "Add fields from another data source" (in the visualization editor) should be available or not.
A flag indicating if the data source selection dialog (displayed when creating a new visualization) includes a search box on top to search for data sources.
A flag indicating if the data source selection dialog (displayed when creating a new visualization) includes a search box on top to search for data sources.
A flag indicating if the Dashboard's description should be displayed.
A flag indicating if the Dashboard's description should be displayed.
A flag that indicates if the edit button for a datasource in the visualization editor should be displayed or not.
A flag that indicates if the edit button for a datasource in the visualization editor should be displayed or not.
A flag indicating if the export image action is available or not.
A flag indicating if the export image action is available or not.
A flag indicating if the export to Excel action is available or not.
A flag indicating if the export to Excel action is available or not.
A flag indicating if the export to PDF action is available or not.
A flag indicating if the export to PDF action is available or not.
A flag indicating if the export to PowerPoint action is available or not.
A flag indicating if the export to PowerPoint action is available or not.
A flag that allows the dashboard filters panel to be hidden. This is useful if you want to limit the selected values for the filters to the initial selection specified in the dashboard object. Once the RevealView is created and rendered you can use RVDashboard.filters or RVDashboard.dateFilter to change the selection for a given filter, so you can keep the selected values synced with your app.
A flag that allows the dashboard filters panel to be hidden. This is useful if you want to limit the selected values for the filters to the initial selection specified in the dashboard object. Once the RevealView is created and rendered you can use RVDashboard.filters or RVDashboard.dateFilter to change the selection for a given filter, so you can keep the selected values synced with your app.
A flag that indicates if dashboard header will be rendered. Please note that if you hide the header bar UI controls to save, save as, export wont be available for the end user.
A flag that indicates if dashboard header will be rendered. Please note that if you hide the header bar UI controls to save, save as, export wont be available for the end user.
A flag indicating if the button "Add fields from a Machine Learning model" (in the visualization editor) should be available or not.
A flag indicating if the button "Add fields from a Machine Learning model" (in the visualization editor) should be available or not.
A flag that indicates if the menu (containing Refresh, Export, etc.) should be displayed or not.
A flag that indicates if the menu (containing Refresh, Export, etc.) should be displayed or not.
A flag that indicates if the Refresh action should be available or not.
A flag that indicates if the Refresh action should be available or not.
A flag indicating if the menu to apply statistical functions (forecasting, etc.) is available or not.
A flag indicating if the menu to apply statistical functions (forecasting, etc.) is available or not.
Single visualization mode is used to show a single visualization at a time. You can control the initial visualization to maximize using the maximizedVisualization property. If no initial visualization is configured to be maximized the first one will be maximized initially. You can use maximizedVisualization to change the maximized one once the dashboard is visible.
Single visualization mode is used to show a single visualization at a time. You can control the initial visualization to maximize using the maximizedVisualization property. If no initial visualization is configured to be maximized the first one will be maximized initially. You can use maximizedVisualization to change the maximized one once the dashboard is visible.
A flag indicating the view should start in edit mode instead of the default view mode.
A flag indicating the view should start in edit mode instead of the default view mode.
A flag indicating the new visualization dialog should be displayed automatically when this view is presented. This setting requires startInEditMode set to true.
A flag indicating the new visualization dialog should be displayed automatically when this view is presented. This setting requires startInEditMode set to true.
Used to maximize a visualization once the Reveal View was initialized and rendered. It might be used to sync the currently displayed visualization with a feature in the containing app, like displaying 'Sales by Country' along a Sales report.
the visualization to be maximized, an object obtained from the dashboard with methods like visualizations()[index] or getVisualizationByTitle(title).
You could find the visualization you want to maximize using getById or getByTitle methods like:
let viz = dashboard.visualizations.getByTitle("MyVizTitle")
let viz = dashboard.visualizations.getById("TargetVizId")
true if the given visualization was found in the dashboard and maximized properly, false otherwise.
Used to restore the currently maximized visualization to the original state, so the whole dashboard is visible.
true if there was a maximized visualization, which was minimized, false otherwise.
Method used to programmatically refresh the dashboard data, equivalent to execute the 'Refresh' action in the dashboard menu.
Makes sure the current theme specified in RevealSdkSettings.theme is applied. This involves re-loading of the currently displayed dashboard, so any state like pending edits, maximized visualization, filters selection changes will be reset and lost.
Serializes the current dashboard to a byte array
Sets the date filter in the current dashboard. Please note the dashboard must be defined with a date filter, otherwise this method will be ignored.
the new date filter to set in the dashboard model.
Set the background color for the given visualization, color is specified in hex format, like "#ffffff".
Set the chart settings
Creates a screenshot of the revealView.
Note: This feature relies on server-side image rendering so you will need to enable in your .NET Core or Java Reveal server component.
This method is used to indicate the size of the container has changed and RevealView must re-layout its contents.
This method calls RevealUtility.loadDashboardFromContainer that loads a dashboard from the Blob object with the contents of an .rdash file.
Overrides built in Reveal Theme settings. This method will not affect RevealView instances already rendered.
object containing theme settings to override RevealSdkSettings.theme
Used to create a new instance of the RevealView class. The main class used to render a dashboard in your application, it also allows the editing of existing dashboards or the creation from scratch.