Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Charting the Course With Nuxeo

DZone's Guide to

Charting the Course With Nuxeo

Charts are a fundamental part of effective reporting and are especially useful for "dashboards" to give an easy-to-understand visual representation of data. In this case, I want to build a simple, reusable chart for my Nuxeo applications. Let me show you how it's done.

· Integration Zone
Free Resource

Modernize your application architectures with microservices and APIs with best practices from this free virtual summit series. Brought to you in partnership with CA Technologies.

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”:

Queues

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”:

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 divs 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 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 Integration Zone is proudly sponsored by CA Technologies. Learn from expert microservices and API presentations at the Modernizing Application Architectures Virtual Summit Series.

Topics:
visualization ,data ,management ,web ,nuxeo ,integration

Published at DZone with permission of Josh Fletcher. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}