Category: The Others

Refactoring the ChartJS SPFx Web Part  Using IoC Container

Refactoring the ChartJS SPFx Web Part Using IoC Container

In the previous blog post, I introduced how to create Chart.js enabled SPFx web parts. In the example I have used in that blog post, I created a IDataSource interface and implemented the interface with a MockDataSource class that was instantiated in the React component.

01

However, there is an issue with this design as the ChartJs React component class depends on the concrete data source class implementation instead of the abstraction of the data sources. In this way, we have to change the ChartJs React component code if we want to substitute the MockDataSource with other data sources that implements the IDataSource interfaces.

In future, we may create other data sources for the chart web part such as SharePoint data source, Office Excel data source, or Rest API data source. Instead of changing the code in ChartJs React component to substitute the data source type, we expect a better approach that allow us to configure the data source type outside of the ChartJs React component so that we can have the ChartJs React component closed to change when we need add a new data source type.

Here a IoC container will help. In this blog post, I improved the ChartJs SPFx web part solution with InversifyJS IoC container to manage the dependencies. Please find the source code used for this blog post here in github.

Setup InversifyJS in ChartJs web part project

It is pretty easy to setup InversifyJS library in our ChartJs web part project. Firstly, we run the npm command: npm install inversify reflect-metadata –save to install the library, and then we need to modify the compiler options of Typescript in the tsconfig.json file to add additional settings for “lib”, “types”, “moduleResolution”, “experimentalDecorators”, and “emitDecoratorMetadata” as the snapshot below shown.

03

Annotate data source classes with @injectable decorator

We need to add @injectable decorator to the data source classes that are implemented the IDataSource interface.

04

Apart from the MockDataSource class we already have, we are going to create another data source class for testing purpose, namely MockDataSourceForTestIOC. All the values of the mock data feed from this class are set as “10” as a comparison to the orginal MockDataSoruce class.

06

Add Inversify configuration file

We need to create a Inversify configuration file in the src folder that declares the Inversify IoC container and register the concrete data source class implementation to IDataSource interface.

08

In this file, we need import the IDataSource interface and the concrete data source classes, and then we create an instance of Inversify Container and bind a concrete class to the IDataSource interface.

07

Use abstraction in Chart.js component

In the Chart.js component class that depends on the data source implementation, we firstly import the container declared in the Inversify configuration file.

09

We then use the get method of the container  (kernel.get(“IDataSource”)) to resolve the dependency.

10

Test 

We have setup the Inversify IoC container in our project. We can now test the setup through binding the IDataSource interface to different data sources. Firstly, we bind the interface to MockDataSource class. After run gulp serve to preview the web part in local workbench, we have the results showing as:

11

Then we bind the IDataSource interface to MockDataSourceForTestIOC class that provides the data set with all the groups having same value as “10”.

11

After run the preview, we can see that the chart is rendered using the data provided by the MockDataSourceForTestIOC implementation.

12

Building SPFx Client-Side Web Parts using Chart.js

Building SPFx Client-Side Web Parts using Chart.js

Chart.js is a very handy Javascript charting library, lightweight, flexible, sleek UI and free of charge. In this blog post, I will walk through the steps to build SharePoint Framework client-side web parts using Chart.js library.

I have created a demo client-side chart web part with the source code on github. This web part allows users to select chart type on the web part properties panel and then renders the chart in the selected chart type using Chart.js library. An interface, IDataSource, was created in the web part and we can implement the interface with all kinds of data sources such as SharePoint, Office Excel, and Rest APIs. For this demo web part, I just implemented the interface with a mock data source class MockDataSource, however we can add any data source class in future as long as the class implements the getData method defined in the IDataSource interface.

2

Setup development environment and scaffold the project structures

Please follow this guide from Microsoft to setup the SharePoint Framework development environment.

After the development environment is ready, run yo @microsoft/sharepoint in node.js command prompt to scaffold the project structures and select “React” as the Javascript framework.

Create data access interface/classes

In this demo, three data access interface/classes need to be created, including ChartJSData DTO class, IDataSoruce interface, and MockDataSoruce class.

3

Firstly, we need to create a DTO class, ChartJSData, that holds the data read from the data sources and will be rendered using Chart.js charts.

4e

We then create the IDataSource interface with the getData() method signature and implement the interface with a mock data source, MockDataSource.

5

6

Import Chart.js library into client-side web part

To import the Chart.js library into the client-side web part, we need add an external entry in the config.json file and point it to the CDN hosted Chart.js file.

7

Then import the library in the React component file (ChartJs.tsx) that will render the Chart.js charts.

8

Create and Render the Chart.js charts in client-side web part

In the React component file (ChartJs.tsx), we firstly import the MockDataSource class and ChartJSData class defined earlier.

9

In the render() method of the ChartJs React component, we add the canvas tag where the Chart.js charts will be drew on.

We then create a private method renderChart() that creates and renders the Chart.js chart object with the data read from the MockDataSource. This method will be called in the both componentDidMount() method and componentDidUpdate() method. The reason to re-render the chart in the componentDidUpdate() method is to allow users changing chart type using the web part properties panel.

10

We now have the Chart.js library ready to render charts in the demo client-side web part. We can run gulp serve to preview the web part on the local workbench.

11

EasyBuildingCMS.NET (A Module-based CMS Framework)

EasyBuildingCMS.NET (A Module-based CMS Framework)

One of my old work 🙂

EasyBuildingCMS.Net is a module-based CMS and a web application framework which is developed using .NET 4.0/Visual Studio 2010, Entity Framework/LINQ-to-Entity, SQL Server 2008. To build this framework, I have/will borrow some ideas from Sharepoint and TheBeerHouse.

Please find Source Code here.

EasyBuildingCMS.Net is highly modularized. The most important concept of this CMS framework is “BuildingBlock” that is similar to the WebPart used in Sharepoint. All the function modules such as content editor, news, gallery, forum, blog, report can be encapsulated into an independent BuildingBlock. It is extremely easy to build custom BuildingBlock (just require one line code).