JET 2.1.0 is a major release of JET framework that contains over 140 new features and over 900 bug fixes.

 

Some of the largest new features are:

  • The first public release of the new Composite Component Architecture
  • Timezone support has now been added to converters and all JET UI Components that work with date/time
  • In-line editing is available in both ojTable and ojDataGrid
  • ListView now supports drag and drop as well as card layout in addition to the existing list layout

 

On the Mobile feature side there have been significant enhancements to the command line tooling:

  • Addition of SASS support
  • New starter templates for mobile and web
  • Refactoring of the command line tooling for easier maintence and expansion

 

More details on the new features are provided below, as well as in the release notes.

 

Composite Components

JET now exposes composite components which are reusable pieces of UI that can be embedded as a custom HTML element and can be composed of other composites, JET components, HTML, JavaScript, or CSS. See the composite documentation and demos for more information.

ccaDemo.gif

List View

JET ListView now supports reordering items within ListView as well as drag and drop with other JET components.

 

Menu

JET Menu now supports Sheet Menus. In all built-in themes, Menu launches as a sheet menu for small screen sizes, and as the existing "dropDown" style of menu for larger screen sizes. This behavior can vary by theme and by instance. See the new openOptions.display option and $menuDropDownThresholdWidth SASS variable for details.

 

Data Grid

JET Data Grid now supports in cell editing for data body cells. New options for editMode have been added to enable this feature.

Data Grid now also supports row and column "end headers" or "footers". This functionality can now be used to create visualizations such as a Trellis example below.

trellis1.png

 

New Data Visualization Features in JET 2.1.0

 

New Component: Gantt

The gantt component displays the start and finish dates of a set of tasks.

gantt.png

 

New Component: Time Axis

The timeline and gantt time axis has been introduced as a standalone component for use in tables and grids.

 

New Chart Type: Box Plot

The box plot displays distributions of data values through their quartiles, extents, and outliers.

boxPlot.png

 

New Chart Type: Pyramid Chart

Similar to an inverted funnel chart, the pyramid chart is used for visualizing parts of a whole. It is especially useful when the triangular shape helps to reinforce the relationship of the underlying data.

pyramid.png

 

Custom Fills and Strokes

Custom fills and strokes are now supported on diagram, gauge, nBox, picto chart, spark chart, sunburst, tag cloud, thematic map, and treemap. First introduced on chart in the 2.0.2 release, these components now support style and className options corresponding to thestyle and styleClass DOM attributes. These attributes override any other styling set through the component options, enabling the use of custom gradients, patterns, filters, and other SVG style properties.

 

Diagram Containers

Diagram now supports containers, allowing nodes (including other containers) to be contained within other nodes. Containers can be expanded and collapsed at runtime.

diagramContainers.png

 

Thematic Map Links

Thematic map now supports the display of links between locations. Often used to show airline routes or other data with origin and destination locations, the links can be styled and customized with start and end markers.

thematicMapLinks.png

Treemap Visual Design Updates

The treemap visual design has been updated to match the modern look of the other visualizations by replacing the node bevels with single pixel white gaps. This update also improves rendering performance of the treemap, since the gaps can be rendered without the additional shapes needed by the bevels.

treemapModern1.png

Other Enhancements

  • Chart axis titles will be automatically wrapped if they exceed the available space.
  • The oj.DiagramUtils.getLayout function can be used in many cases to simplify Diagram layout. Applications can now pass layout information through a javaScript object which will be used by this function to create the layout function that is required by the diagram.
  • Timeline events can now be rendered from top to bottom in addition to the existing behavior of bottom to top.
  • Performance has been improved for bubble charts, categorical axis charts, scatter charts, stacked charts, and treemap.

 

More information and best practices for using data visualization components can be found in JET Data Visualizations FAQ.