Class: AnalyticsVisualization

1//JavaScript
2//Importing required modules and libraries from the Tableau Next Embedding SDK
3import {initializeAnalyticsSdk, AnalyticsVisualization, analyticsEventTarget} from '@salesforce/analytics-embedding-sdk';
4
5//Listening to global ERROR event, such as SDK or component initialization failures.
6analyticsEventTarget.addEventListener(EventName.ERROR, (errorEvent) => {		
7  //Error details (such as error code and message) are available in the event object
8  console.log("Received a global error event", errorEvent)				
9});
10
11//Configuration object for initializing the Tableau Next Embedding SDK
12await initializeAnalyticsSdk({                  
13  //The frontdoor URL required for authentication
14  authCredential: "<%- authCredential %>",		
15  //The Salesforce org URL that hosts the Analytics component to embed.			
16  orgUrl: '<%- org-url %>'                    
17});
18
19const analyticsVisualization = new AnalyticsVisualization({
20  //The parent ID or element to render the component in
21  parentIdOrElement: '<%- parent-element %>',   
22  //The ID or API name of the component to embed
23  idOrApiName: '<%- viz-id-or-api-name %>'
24});    
25
26//Listening to component specific ERROR event
27analyticsVisualization.addEventListener(EventName.ERROR, (event) => {        
28  //Error details (such as error code and message) are available in the event object
29  console.log("Received error", event);								
30});
31
32//Listening to COMPONENT_LOADED event triggered when the component gets loaded
33analyticsVisualization.addEventListener(EventName.COMPONENT_LOADED, () => {      
34  console.log("Component Loaded");
35});
36
37//Sets filter property of the component to apply a filter on the embedded visualization
38analyticsVisualization.filters = [						
39  {
40    //The API name of the semantic model and the API name of the field to filter
41    fieldName: '<%- semantic-model-api-name %>.<%- field-api-name %>',	
42    //The field value to filter the component with based on the operator <%filter-operator %>
43    values: ['<%- value %>'],											
44    operator: FilterOperator.<%filter-operator %>
45  }
46];
47
48//Renders the visualization in the parent HTML element
49analyticsVisualization.render();

1//TypeScript
2//Importing required modules and libraries from the Tableau Next Embedding SDK
3import {
4  AnalyticsVisualization,
5  initializeAnalyticsSdk,
6  analyticsEventTarget,
7  type VisualizationProps,
8  type AnalyticsSdkConfig
9} from '@salesforce/analytics-embedding-sdk';
10
11//Listening to global ERROR event, such as SDK or component initialization failures.
12analyticsEventTarget.addEventListener(EventName.ERROR, (errorEvent) => {		
13  //Error details (such as error code and message) are available in the event object
14  console.log("Received a global error event", errorEvent)				
15});
16
17//Configuration object for initializing the Tableau Next Embedding SDK
18const config: AnalyticsSdkConfig = {	
19  //The frontdoor URL required for authentication
20  authCredential: "<%- authCredential %>",			
21  //The Salesforce org URL that hosts the Analytics component to be embedded.
22  orgUrl: "<%- org-url %>"							
23};
24//Initializes the Tableau Next Embedding SDK with the provided configuration and returns a promise that resolves on successful initialization.
25await initializeAnalyticsSdk(config);				
26
27//Defines the properties required for configuring a visualization component.
28const vizProps: VisualizationProps = {				
29  //The parent ID or element to render the component in
30  parentIdOrElement: '<%- parent-element %>',   	
31  //The ID or API name of the component to embed
32  idOrApiName: '<%- viz-id-or-api-name %>'   	
33};
34
35//Initializing a web component for embedding an analytics visualization
36const analyticsVisualization: AnalyticsVisualization = new AnalyticsVisualization(vizProps);
37
38//Listening to component specific ERROR event
39analyticsVisualization.addEventListener(EventName.ERROR, (event) => {			
40  //Error details (such as error code and message) are available in the event object
41  console.log("Received error", event);										
42});
43
44//Listening to COMPONENT_LOADED event triggered when the component gets loaded
45analyticsVisualization.addEventListener(EventName.COMPONENT_LOADED, () => {		
46  console.log("Component Loaded");
47});
48
49//Sets filter property of the component to apply a filter on the embedded visualization
50analyticsVisualization.filters = [						
51  {
52    //The API name of the semantic model and the API name of the field to filter
53    fieldName: '<%- semantic-model-api-name %>.<%- field-api-name %>',	
54    //The field value to filter the component with based on the operator <%filter-operator %>
55    values: ['<%- value %>'],											
56    operator: FilterOperator.<%filter-operator %>
57  }
58];
59
60//Renders the visualization in the parent HTML element
61analyticsVisualization.render();

1// After initializing SDK with multiple orgs
2const viz1 = new AnalyticsVisualization({
3    parentIdOrElement: 'container1',
4    idOrApiName: 'Visualization1',
5    // Required in multi-org
6    orgUrl: 'https://org1.lightning.force.com'  
7});
8
9const viz2 = new AnalyticsVisualization({
10    parentIdOrElement: 'container2',
11    idOrApiName: 'Visualization2',
12    // Required in multi-org
13    orgUrl: 'https://org2.lightning.force.com'  
14});

1// For dashboards, the `dataSource` attribute is required in the filter input
2// to specify the data source to which the filter should be applied.
3
4await component.render();
5
6const filters: UnifiedFilterJson[] = [{
7  fieldName: "Account.Name",
8  operator: FilterOperator.Equals,
9  values: ["Acme Corp"],
10  // specifying data source for dashboards
11  dataSource: "SalesData"		
12}];
13
14//applies the filters to the component.
15await component.applyFilters(filters);

1// For metrics or visualizations, dataSource not needed.
2
3await component.render();
4
5const filters: UnifiedFilterJson[] = [{
6  fieldName: "Account.Name",
7  operator: FilterOperator.Equals,
8  values: ["Acme Corp"]
9}];
10
11//applies the filters to the component.
12await component.applyFilters(filters);

1// For dashboards, the `dataSource` attribute is required in the filter input
2// to specify the data source to which the filter should be applied.
3
4await component.render();
5
6const filters: UnifiedFilterJson[] = [{
7  fieldName: "Account.Name",
8  operator: FilterOperator.Equals,
9  values: ["Acme Corp"],
10  dataSource: "SalesData"
11}];
12
13//applies the filters to the component.
14await component.applyFilters(filters); 
15
16// Clears the filters applied to the component.
17await component.clearFilters();

1// For metrics or visualizations, no need to pass dataSource.
2
3await component.render();
4
5const filters: UnifiedFilterJson[] = [{
6  fieldName: "Account.Name",
7  operator: FilterOperator.Equals,
8  values: ["Acme Corp"]
9}];
10
11//applies the filters to the component.
12await component.applyFilters(filters); 
13
14// Clears the filters applied to the component.
15await component.clearFilters();

1// Assuming `myComponent` is an instance of a class that implements the export() method
2// Export with default filename and default PNG format
3await myComponent.export();
4
5// Export with a custom filename (still as PNG)
6await myComponent.export("my-component");
7
8// Export with custom filename and file type
9await myComponent.export("report", ExportFileType.PNG); // Currently only PNG supported

1// For dashboards, specify one or more data sources or omit to get all:
2const fieldsMap = await component.getFields(); // returns fields for all data sources
3
4// Example response structure:
5// fieldsMap => Map {
6//   "SalesData" => [
7//     { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" },
8//     { apiName: "Region", label: "Region", dataType: "Text", fieldType: "Dimension" }
9//   ],
10//   "MarketingData" => [
11//     { apiName: "CampaignName", label: "Campaign Name", dataType: "Text", fieldType: "Dimension" }
12//   ]
13// }

1// For metrics or visualizations, no need to pass dataSources, will return map for the single underlying data source:
2const fieldsMap = await component.getFields();
3
4// Example response structure:
5// fieldsMap => Map {
6//   "SalesData" => [
7//     { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" },
8//     { apiName: "Region", label: "Region", dataType: "Text", fieldType: "Dimension" }
9//   ]
10// }

1const fieldValues = await component.getFilterFieldValues("Account", "AccountObject", "Acme");
2console.log(fieldValues);
3
4// Example response:
5// [
6//   "Acme Corporation",
7//   "Acme Inc.",
8//   "Acme Solutions"
9// ]

1// For dashboards, the `dataSource` attribute is required in the filter input
2// to specify the data source to which the filter should be applied.
3
4await component.render();
5
6const filters: UnifiedFilterJson[] = [{
7  fieldName: "Account.Name",
8  operator: FilterOperator.Equals,
9  values: ["Acme Corp"],
10  dataSource: "SalesData"
11}];
12
13//applies the filters to the component.
14await component.applyFilters(filters); 
15// Returns the filters applied to the component.
16const appliedFilters = await component.getFilters();

1// For metrics or visualizations, no need to pass dataSource.
2
3await component.render();
4
5const filters: UnifiedFilterJson[] = [{
6  fieldName: "Account.Name",
7  operator: FilterOperator.Equals,
8  values: ["Acme Corp"]
9}];
10
11//applies the filters to the component.
12await component.applyFilters(filters); 
13// Returns the filters applied to the component.
14const appliedFilters = await component.getFilters();

1const interactionDetails = await component.getInteractionDetails();
2
3// Example response structure for dashboard:
4// {
5//   dataSources: [
6//     { apiName: "SalesData", label: "Sales Data Source" },
7//     { apiName: "MarketingData", label: "Marketing Data Source" }
8//   ],
9//   fields: Map {
10//     "SalesData" => [
11//       { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" },
12//       { apiName: "Region", label: "Region", dataType: "String", fieldType: "Dimension" }
13//     ],
14//     "MarketingData" => [
15//       { apiName: "CampaignName", label: "Campaign Name", dataType: "String", fieldType: "Dimension" }
16//     ]
17//   },
18//   filterFields: Map {
19//     "SalesData" => [
20//       { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" }
21//     ],
22//     "MarketingData" => [
23//       { apiName: "CampaignName", label: "Campaign Name", dataType: "String", fieldType: "Dimension" }
24//     ]
25//   }
26// }
27
28// Example response structure for metric or visualization:
29// {
30//   fields: Map {
31//     "SalesData" => [
32//       { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" },
33//       { apiName: "Region", label: "Region", dataType: "String", fieldType: "Dimension" }
34//     ]
35//   },
36//   filterFields: Map {
37//     "SalesData" => [
38//       { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" }
39//     ]
40//   }
41// }

1const viz = new AnalyticsVisualization({
2  parentIdOrElement: 'viz-container',
3  idOrApiName: 'my-viz'
4});
5
6await viz.render();
7
8await viz.getSelections(); // Returns the current selection state of the component.
9
10// Example of SelectionData object returned:
11// {
12//     "marks": [
13//         {
14//             "fieldIds": [
15//                 {
16//                     "type": "Field",
17//                     "displayCategory": "Continuous",
18//                     "role": "Measure",
19//                     "fieldName": "sales_1",
20//                     "objectName": "excelCase1",
21//                     "function": "Sum",
22//                     "disambiguationIndex": 0
23//                 },
24//                 {
25//                     "type": "Field",
26//                     "displayCategory": "Discrete",
27//                     "role": "Dimension",
28//                     "fieldName": "category_1",
29//                     "objectName": "excelCase1",
30//                     "disambiguationIndex": 0
31//                 }
32//             ],
33//             "values": [
34//                 [
35//                     82517.64,
36//                     "Furniture"
37//                 ]
38//             ]
39//         }
40//     ],
41//     "headers": [],
42//     "axes": []
43// }