This article was originally posted on the Eventbrite Engineering Blog.
Britecharts, Eventbrite’s D3 based charting library, has grown with additional charts contributed by the community. It is now a mature library, but it still lacks some charts used in today’s standard DataViz suites. We want to add these charts, and that means we will experience some growing pains. We wondered, how we could make that process easier? Britecharts 2.0 is a breaking release which, among some new accessors and bug fixes, aims to help in the creation of new charts. For that reason, we have improved our API and set up rules to keep it consistent.
Naming is hard. Some of us struggle when facing the decision of assigning a name to a method that will be part of a public API - sometimes even for a simple private variable. It is usually a complicated decision. We need to take into account not only what the method is doing, but also how we named the other methods in that module - and in the rest of the library. We want to make it easy for contributors to help to grow Britecharts, streamlining their decisions and reducing the back-and-forth during code reviews. That's why we decided to create an API Guidelines document that will make it easy to solve naming discrepancies and keep the library's API consistent. To do this, we gathered all the chart’s APIs with some screenshots of our documentation:
We want them to be 'predicates.' We will prefix them with one of the following words: should, has or is. This rule implies that, for example, we will move from horizontal to isHorizontal or from usePercentage to hasPercentage.
At some point in the past, we introduced the force prefix, to mark an override in the defaults. The problem with this, is that it wasn’t clear when to use it, so we decided to simplify it by removing all of them. This means that we will move from forceAxisFormat to xAxisFormat or from forceDateRange to dateFormat.
Axis and Tick accessors
We felt we needed more consistency on these variables, so the new rule is to simply add "Ticks" at the end of the variables. Examples are: from numOfHorizontalTicks into xTicks and from verticalTicks to yTicks.
Dispatchers and Custom Events
Instead of using callbacks for our command methods, we are going to capture events. This means that the onBrush callback definition method is transformed into .on(‘customBrushEnd', callbackFunction), making it consistent with the rest of custom events triggered by other charts. We have also made the custom events function signature more coherent, hoping to provide a more intuitive interface for our users. In the next release, we will try to make them even more consistent by merging our tooltip and mini-tooltip, making them more visually appealing.
Britecharts v2 changes the names of the color schemas, moving them into less verbose versions of the same names: from britechartsColorSchema to britecharts; from extendedOrangeColorSchema to orange. All of this refactoring has introduced breaking changes into the library that we hope our users will be OK within the end. You can find the full list of them in the release notes, which includes a list of changes by chart type.
New Charts and Features
The grouped and stacked bar charts were present during the previous minor releases, and we have finally deemed them ready for production!
In addition, Britecharts v2 added some new accessors contributed by the community —the number format for the Legend chart, shouldReverseColorList for the Bar chart and a custom number formatting option for the main Tooltip.
In this release, we normalized the chart names between the britecharts bundle and the individual UMD packages. We also updated our ESLint configuration, added tests and polished the stacked and grouped bar charts and amended a rounding error in the tooltip component.
On the doc side, we created the Code Styleguide document that includes the API Guidelines. We will update it with more code writing guidelines soon. Also, we updated and added a license badge to the main page, as well as the Contributing Guide, which needed a bit of love.
After this second major release, we feel Britecharts are now better prepared to succeed. We provided steps to streamline the contribution workflow and make it easy to grow and support more charts, lowering the entry barrier for new contributors and improving their developer experience. We are super excited about what lies down the road, with a new React wrapper with a set of new features like:
- New charts: Scatter plot, Heatmap, bullet charts and more!
- More interactivity with charts
- Improved tooltips