Sometime we might end up the slow performance of showing custom charts by querying the object data- if the data is in millions. The best way to improve the performance is by creating a standard report and getting data of report to apex with ReportManager class.
we can also pass the filter values based on your requirement and display charts in the Lightning component with the help of Javascript chartCanvas class.

 

FYI : The above charts are constructed with standard reports- Matrix and Summary type.

 

 

 

 

 

 

 

 

 

• 

• 

We need to consider some standard classes.

ReportManager class helps to run a report synchronously or asynchronously.

ReportResults class contains the results of running a report.

ReportFilter class contains information about a report filter, including column, operator, and value.

and some Methods of above classes

 

describeReport(reportId) Retrieves report, report type, and extended metadata for a tabular, summary, or matrix report.

Example:Reports.ReportDescribeResult describe =  Reports.ReportManager.describeReport(reportId);

getReportMetadata() Returns metadata about the report, including grouping and summary information.

Example:Reports.ReportMetadata reportMd = describe.getReportMetadata();

getReportFilters() Returns a list of each custom filter in the report along with the field name, filter operator, and filter value.

Example: Reports.ReportFilter filterlist = reportMd.getReportFilters()[0];
filterlist .setValue(filterId);

Apex code

 

Aura component

To load chart on page load.

 

<ltng:require scripts="{!$Resource.chartjs}" afterScriptsLoaded="{!c.createPlannedchart}"/>

For displaying the report

 

 <canvas id="chartCanvas" height="300" width="300"></canvas>

To view standard report

[sourcecode language=”java”]
View Report
[/sourcecode]

Js Code

[sourcecode language=”java”]
var urlPlannedreport = ‘/lightning/r/Report/’+getPlannedReportId+’/view?queryScope=userFolders&fv0=’+accIdsub;

createPlannedchart: function(component) {
var chartCanvas = component.find(“plannedChart”).getElement();
var action = component.get(“c.getreportplanned”);

action.setParams({
“AccId”: component.get(“v.accrecId”)
});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === “SUCCESS”) {
var reportResultData = JSON.parse(response.getReturnValue());
// alert(JSON.stringify(reportResultData));
var chartData = [];
var chartLabels = [];
var nullcheck = reportResultData.groupingsDown.groupings;
if (nullcheck !== null) {
for (var i = 0; i < (reportResultData.groupingsDown.groupings.length); i++) {
//Iterate and prepare the list of Labels for the chart
var labelItem = reportResultData.groupingsDown.groupings[i].label;
chartLabels.push(labelItem);
var keyTemp = reportResultData.groupingsDown.groupings[i].key;
//Prepeare the chart data to be plotted.
var valueTemp = reportResultData.factMap[keyTemp + “!T”].aggregates[0].value;
chartData.push(valueTemp);
}
}
//Construct chart-doughnut/bar
var chart = new Chart(chartCanvas, {
type: ‘bar’,
data: {
labels: chartLabels,
datasets: [{
label: “Count”,
data: chartData,
backgroundColor: [
“#52BE80”,
“#76D7C4”,
“#1E8449”,
“#2ECC71”,
“#FFB74D”,
“#E67E22”,
“#F8C471”,
“#3498DB”,
“#00BCD4”,
“#D32F2F”,
“#82E0AA”,
“#AFB42B”
]
}]
},
options: {
responsive: true,
title: {
display: true,
text: ‘Planned Visits’
},
scales: {

yAxes: [{
ticks: {
// max: 100,
stepSize: 25,
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: ‘Visits Count’
},
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: ‘Created Date’
}
}]
},
maintainAspectRatio: false,
legend: {
display: false,
position: “right”,
fullWidth: false,
}
}
});

} else(state === “ERROR”) {
console.log(‘Problem, response state: ‘ + state);
}

});
$A.enqueueAction(action);
}
[/sourcecode]

You can change the look of charts with the help of chartcanvas methods.

 

 

 

So you now have a leaflet map on a lightning component. Great !

But let’s say, you want to be able to differentiate between the many markers on the map, for e.g. your Accounts are put on a map, but you want to be able to color code them, or possibly use icons to show the type of business they are or prioritize them by color.

The usual leaflet Marker is blue. Like so:

Now we want to change that boring blue marker. The documentation for Leaflet provides a way to override markers:  http://leafletjs.com/reference-1.3.0.html#icon

The object L.icon defines the marker icon and needs to be overridden with your custom icon definition for this. There are a number of options that need to be set.

var myIcon = L.icon({
iconUrl: 'my-icon.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowUrl: 'my-icon-shadow.png',
shadowSize: [68, 95],
shadowAnchor: [22, 94]
});
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

There is a useful github repo I found which has other colour Markers that can be directly used in lightning component code:

Leaflet Color Markers

Simple straightforward usage. You’ll then see colored markers.

But what if there was also the need to use icons on these markers ? I found an amazing Github repo called Awesome Markers by Lennard Voogdt: Leaflet Awesome Markers

This code uses either of jQuery, Font Awesome or Ionicons to generate the icons on the markers.

The code however cannot be directly used in lightning components. For my example, I settled on Font Awesome as the source for icons and came up with a result like this:

The approach to implementing this is in a Lightning component is broken down into:

1. Using the Fontawesome library as a static resource. Remember to add the webfonts and css in the static resource. Both are needed to create the icons.
2. Have the code dynamically generate the custom marker. Fontawesome generates icons using an html syntax like this

   <i class="fas fa-user"></i>

   This is essentially done dynamically within the L.Icon.extend function that will override your boring blue icon and add the Fontawesome icon in it. Most of the code in Leaflet-Awesome-Markers can be re-used as it is to generate our icons. I created a function that generates an icon (parameterized) and returns it for use.

3. Use the function to generate a new marker at a location using the L.marker function. E.g. –
   //Add Marker with leaf Icon
var leafIcon = helper.getIcon(
{icon: 'leaf',
markerColor: 'red'}
);
L.marker(["43.527414", "-96.741249"], {icon: leafIcon}).addTo(map)
.bindPopup('The Location');

And that should be it ! You now have custom markers on your leaflet map.

The exact implementation code is in this github repo  Here