3B Knowledge

Embed Charts: Difference between revisions

Embed Charts (view source)

Revision as of 11:19, 6 December 2023

4,514 bytes added ,  11:19, 6 December 2023
no edit summary
(Created page with "== Introduction == This article teaches admins how to utilize the 3B Charts component for embedding charts in a Digital Experience or Record Detail Page. 3B created the component due to the fact that Salesforce requires an additional, more expensive license in order to embed Charts and Dashboards on a community. This component implements custom SOQL queries that are turned into beautiful charts using ChartJS javascript Framework == Digital Experience / Record Page == ...")
 
No edit summary
Line 10: Line 10:
=== Embedding ===
=== Embedding ===
In the App Builder, a new custom component will be available called "Chart Builder". Similarly, in the digital experience builder, the same component will be made available. Administrators need to drag and drop that component onto a page or record.
In the App Builder, a new custom component will be available called "Chart Builder". Similarly, in the digital experience builder, the same component will be made available. Administrators need to drag and drop that component onto a page or record.
=== Sample SOQL ===
SELECT b3o__Type__c label, COUNT(Id) value FROM b3o__Chat_Message__c GROUP BY b3o__Type__c - this renders a doughnut chart that shows how many inbound messages were received vs how many outbound messages were recieved. Since we group by Type, the legend and dataset will display as Inbound and Outbound
== Component Properties ==


=== Configuring ===
=== Configuring ===
Line 32: Line 37:
The Charts component has been created with reactivity as a key point. All the attributes of the different components are reactive to changes, what means, that any change that you perform on real time (for example, the scale or the source data) will automatically fire an update event on the chart.
The Charts component has been created with reactivity as a key point. All the attributes of the different components are reactive to changes, what means, that any change that you perform on real time (for example, the scale or the source data) will automatically fire an update event on the chart.


=== Sample SOQL ===
=== Properties ===
SELECT b3o__Type__c label, COUNT(Id) value FROM b3o__Chat_Message__c GROUP BY b3o__Type__c - this renders a doughnut chart that shows how many inbound messages were received vs how many outbound messages were recieved. Since we group by Type, the legend and dataset will display as Inbound and Outbound
{| class="wikitable"
!ATTRIBUTE
!DESCRIPTION
!VALIDATION
!EXAMPLE
|-
|Type
|Define the chart type
|Picklist (line, bar, radar, doughnut, pie, polarArea, bubble, scatter)
|
|-
|Title
|Define the chart title
|String
|
|-
|Legend Position
|Define where the legend will be displayed
|Picklist (top, bottom, right, left)
|
|-
|CSS Style
|Provide inline custom css style for chart container
|String
|<code>position: relative; margin: auto;</code>
|-
|Color palette to use
|Choose the slds color palette to use
|Picklist (default, colorsafe, light, bluegrass, sunrise, water, watermelon)
|
|-
|Fill the chart ?
|Check this property fo fill the chart
|Boolean
|
|-
|Dataset Labels
|Display the label for each values set in the dataset in a JSON array of string
|JSON Array []
|<code>["Label 1", "Label 2", ...]</code>
|-
|Dataset
|Define the chart values in a JSON array of object
|JSON Array []
|<code>[{"labels":"Data 1", "detail":[1, 1]},{"labels":"Data 2", "detail":[2, 2]},...]</code>
|-
|SOQL
|Define a SOQL to be used to fetch the data (only aggregate query). Use label alias for the label and value alias for the value
|String
|<code>SELECT StageName label, SUM(Amount) value FROM Opportunity WHERE IsClosed = false WITH SECURITY_ENFORCED GROUP BY StageName LIMIT 10</code>
|-
|Custom Data Provider
|Define the Custom Data Provider class hander name to fetch the data. It must extends "ChartDataProvider"
|String
|MyCustomChartDataProvider
|}
 
==== Focus on the "Dataset" Property ====
This property is used to display static content.
 
Provide the JSON object you want to display.
 
Use this property to get fast at prototyping and to show case final render.
 
==== Focus on the "SOQL" Property ====
This property is used to execute a query to gather data from the server.
 
The SOQL query must respect those constraints :
 
* having a <code>label</code> alias in order to set the label of the data.
* having a <code>value</code> alias in order to set the values of the data.
* grouping the record by a field
* having a <code>limit</code> statement (optional)
* having the <code>WITH SECURITY_ENFORCED</code> statement (optional)
 
The query accept to use <code>:recordId</code> string placeholder and will replace this with the actual record Id if the component is placed on an object page.
 
 
IMPORTANT: The radar, bubble and scatter charts are not currently supported to work with the SOQL property. If you need to create a chart of one of these types, please use a JSON structure or check the API Documentation.
 
 
Example of a well formed query for a Component placed on an account page :
<code>SELECT StageName label, SUM(Amount) value FROM Opportunity WHERE IsClosed = false AND AccountId = :recordId WITH SECURITY_ENFORCED GROUP BY StageName LIMIT 10</code>
 
==== Focus on the "Custom Data Provider" Property ====
This property is used to execute custom apex handler to provide data.
 
The class provided must extend the class <code>ChartDataProvider</code>.
 
The lwc component will pass to the class the recordId (if on an object page)
 
IMPORTANT: The radar, bubble and scatter charts are not currently supported to work with a Custom Data Provider.


== Chart API ==
== Chart API ==
Line 501: Line 597:
   </c-dataset>
   </c-dataset>
</c-chart>
</c-chart>
</syntaxhighlight>
== Custom Apex Data Providers ==
<syntaxhighlight lang="java">
global inherited sharing class DemoDataProvider extends ChartDataProvider {
  /*******************************************************************************************************
  * @description Not used for this class
  * @param initParameter Object
  */
  public override void init(final Object initParameter) {
    // TODO
  }
  /*******************************************************************************************************
  * @description return the data
  * @return List<ChartData> the list of chart data needed to display the graph
  */
  public override List<ChartDataProvider.ChartData> getData() {
    final List<ChartDataProvider.ChartData> chartDatas = new List<ChartDataProvider.ChartData>();
    ChartDataProvider.ChartData aChartData = new ChartDataProvider.ChartData();
    aChartData.labels = DEMO_LABEL;
    aChartData.detail = DEMO_DATA;
    aChartData.bgColor = DEMO_COLOR;
    chartDatas.add(aChartData);
    return chartDatas;
  }
  public static final List<String> DEMO_LABEL = new List<String>{ '' };
  public static final List<Decimal> DEMO_DATA = new List<Decimal>{
    10,
    20,
    15,
    5,
    25,
    30
  };
  public static final String DEMO_COLOR = 'rgba(0,0,0,0.5);';
}
</syntaxhighlight>
</syntaxhighlight>


Retrieved from ‘https://3bknowhow.com/wiki/Special:MobileDiff/367’