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.

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.

Annotate data source classes with @injectable decorator

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

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.

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.

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.

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.

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

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:

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

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

• The Others