For a while, we at Webiks used our own AngularJS D3.js library for graphs visualizations of real-life data sets, called “Force-Horse“.
While you can read all of the details on the library in Ram’s blog post, the gist of it is having a library that adapts to many types of data, is easily modifiable for developers, supports large data sets, and easily allowing customization of the base SVG’s design.
So… What’s New?
Having the library written using AngularJS, forced the user to use a legacy framework. Either the user thinks they can just include AngularJS in the bundle, increasing the bundle, or trying to implement the component for their used framework.
Therefore, we decided to remove the dependency for AngularJS, making the library framework agnostic.
We migrated AngularJS out of the library, moving to a standard browser feature – Custom Elements, being adopted by most modern browsers. (In case it isn’t supported at the moment, there is a tiny browser polyfill – see browsers support)
What we love about using Custom Elements, is that all of the main frameworks – Angular, React, Vue, Polymer etc.. – support it for bindings of inputs, but you don’t have to use a framework to use it.
And as per requests from users, we added SVG support, so you can now use your custom SVG elements as nodes.
The original AngularJS component did not have many tests, so we could not ensure it was working for every user. Now, we added many unit tests for many use cases, to cover all of the grounds we need to be confidant in the stability of this awesome component.
For continuous integration we now use Travis-CI, to automatically tests, and deploy the package.
Also, we moved from CSS to SCSS, for better style management and versatility.
While the new version was not written using Typescript, we do believe that types are important, and as such we created a typing file for all of the necessary definitions to be much more easily understood without searching the source code.
Using Force-Horse is now as simple as using any other element. The new usage guide can be found in the README.