c3 charts and LWC

I wanted to try out some charting on LWC and I thought what better framework than C3. In this post we will see a component which will display opportunities in various statues associated to an account.

accountCHart

As a prerequisite you would need c3 and d3 (c3 has a dependency on d3.js) framework loaded in static resource for the charting to work .

Download the latest version of the C3 and D3 from below.

C3 -> https://github.com/c3js/c3/releases/latest

D3 -> https://github.com/d3/d3/releases/download/v5.9.7/d3.zip

Couple of important points for charting:

  1. Load the dependency in the same order that I mentioned below. D3 first and then follow it up with C3.
  2. We have added the a parameter t and assigned the current time to it.
    This is done to make sure the cache is refreshed every time the scripts are loaded.
    If we do not do this then there is an issues if we add multiple charts in a single component.

This is just a simple example for one to start with C3. Please share the beautiful charts that you build. Enjoy Charting!!!

LWC-Lightning Datatable sorting

This is a quick post to understand how sorting is accomplished in lightning datatable (LWC).

Lightning datatable provides an onsort attribute which will allow us to implement the sorting for the elements in the table. You could implement sorting locally or via making a server call.

Local Sorting

You would generally implement this type of sorting if you know that the list of elements is going to be small and limited. For example, if you’re displaying a list of approval history records for a particular record, you know that the number of records won’t be more (assuming you have a simple approval process).

In the example below, we have created a simple component which displays the list of the contacts (firstName and lastName). When the header column is clicked the onsort handler is invoked, the field and the sort order is passed and using this information the list is sorted.

Sorting via server call

As you would have guessed this would be useful when you have a huge list and you are displaying a small chunk of the total records.

The major advantage of this method is that you need not implement any custom logic at all. The sorting will be completely handled by the SOQL. Another thing to note here is that you will have to disable the data-table so that the user’s do not click on the header in the time the server call is being executed.

Apex class