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

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

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

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  {
8    fieldName: "Account.Name",
9    operator: FilterOperator.Equals,
10    values: ["Acme Corp"],
11    dataSource: "SalesData", // specifying data source for dashboards
12  },
13];
14
15await component.applyFilters(filters); //applies the filters to the component.

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

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  {
8    fieldName: "Account.Name",
9    operator: FilterOperator.Equals,
10    values: ["Acme Corp"],
11    dataSource: "SalesData",
12  },
13];
14
15await component.applyFilters(filters); //applies the filters to the component.
16
17await component.clearFilters(); // Clears the filters applied to the component.

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

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 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  {
8    fieldName: "Account.Name",
9    operator: FilterOperator.Equals,
10    values: ["Acme Corp"],
11    dataSource: "SalesData",
12  },
13];
14
15await component.applyFilters(filters); //applies the filters to the component.
16const appliedFilters = await component.getFilters(); // Returns the filters applied to the component.

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

1// Example response structure for metric or visualization:
2// {
3//   fields: Map {
4//     "SalesData" => [
5//       { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" },
6//       { apiName: "Region", label: "Region", dataType: "String", fieldType: "Dimension" }
7//     ]
8//   },
9//   filterFields: Map {
10//     "SalesData" => [
11//       { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" }
12//     ]
13//   }
14// }

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// }