Charts are a fundamental part of effective reporting, and are especially useful for “dashboards”, to give an easy-to-understand visual representation of data. Nuxeo provides an extensive list of charting features, including template rendering options (for basic to advanced rendering as well as UI configuration), a library of data visualization Web components, Kibana integration, etc. In this case I want to build a simple, reusable chart for my Nuxeo applications.
One of our example applications involves claims processing for an auto insurace company, a classic example of Case Management. This Nuxeo application contains virtual folders, called “Queues” for different case types, like “accident”, as well as cases in different states, like “check contract”:
These queues display content that matches either a type of case, a case state, or both. This provides quick access to the content. What it does not provide is an at-a-glance overview of the queue. How are the cases progressing? Are there many past-due cases or is everything on schedule? Certainly these kinds of questions can be answered by browsing the content, or running a report, but it would be great to have a simple overview chart to act as a health check for each queue.
In more generic terms, given a list of tasks in various states, I want to display a chart showing the percentages of tasks in each state. To accomplish this I leverage Google Polymer to build a reusable Web component for this “percentage chart”:
Goals for the Percentage Chart
My goals for this chart are as follows:
- Easy to understand as a user, good User Experience
- Simple design, good Developer Experience
- Easy to reuse
User Experience
The chart uses color-coded bars to represent each set of matching content. For the Case Management queues, red-based colors indicate problem areas, green-based colors are “ok”, teal bars are “ignorable”. In addition the colors are repeated in a histogram at the bottom to visually reinforce the proportion of each set of content.
The chart is responsive, easily adapting to different display widths.
Note that the chart takes advantage of the nuxeo-largest-remainder component to makes sure that the percentages add up to 100!
Developer Experience
One thing I highly recommend when doing Polymer development, especially in the beginning, is to stick with building components that use paper-elements. They bring so many advantages to the table:
- Responsiveness is built in
- Easy to style
- Easy to use
The percentage chart is made of the following components:
- A paper-material element to contain the whole chart; this element takes care of the responsiveness allowing the chart to easily adjust to different display widths
- A smattering of div’s for the header, the content, each row of data, etc.
- For each “bar”, as well as the histogram, I used paper-progress elements to display the values
Easy Reuse
This chart is available as a Polymer Web component (as part of our nuxeo-labs-elements repository). Installation can be managed with Bower:
bower install --save nuxeo-sandbox/nuxeo-labs-elements
The chart can be used like so:
<nuxeo-labs-percentage-chart title="Chart Title" data="[[data]]" data-type="Claims"> </nuxeo-labs-percentage-chart>
The data property takes for form of an array of JSON objects like this:
[{
'label': 'Done',
'value': 4
}, {
'label': 'Pending',
'value': 34
}, {
'label': 'New',
'value': 140
}]
Note that the data need not contain the percentages, only counts. The chart calculates the percentages automatically based on the number of inputs.
The bar colors can be changed like so:
<style is="custom-style">
nuxeo-labs-percentage-chart::content {
--percentage-chart-bar-2-color: #109618;
}
</style>
There are 10 variables available for --percentage-chart-bar-#-color, starting at 0.
There is a documentation page (with demo) too. The demo page source is here.
Conclusion
For me this was an exercise in making a more complex reusable Web component. One of the things I struggled with was how to parameterize the bar colors, for example (effectively how to parameterize CSS and more specifically how to parameterize “shadow-dom”). The good news is that frameworks like Google Polymer make this sort of thing a lot easier. Now I have a nice looking, responsive chart that I can insert into my Nuxeo applications.
Join me next time and I’ll talk about adding this chart as a widget that can be used in Nuxeo Studio.
The post Charting the Course appeared first on Nuxeo.