Features

• We've introduced our new event fold feature that lets you view events that happen at the same time. Try it out in the Event Folds story.

Enhancements

• See what is possible with the getEntityPosition and getEventPosition APIs in our updated Social Media demo.

• See what is possible with the getEntityPosition and getEventPosition APIs in our updated Social Media demo.

• Better handling of cases where events end before they start.

TypeScript Changes

• Keys for TimelineData and TimelineDataProps have been renamed to id.

Features

• Time series charts have been promoted to beta, so you can use them in production. Please send your feedback to [email protected].
• A new type property for time series charts offers two ways of connecting data points - 'linear' and 'step'. The 'step' option is especially useful to display immediate changes in certain datasets such as account balances. The Time Series Charts story shows both options.
• Set the fontFamily for your application. See how it works in the Styling the Timeline story.

Enhancements

• Performance improvements for large datasets in time series charts.

Breaking Changes

• The time series chart label and base line will now have a targetType of 'timeSeriesChart' instead of null.

Features

• You can now customize your heatmaps by generating them from a value of your choosing and by controlling the underlying event directions. Use the heatmapValue API to assign your data and heatmapDirection to show the direction. Combine the two options to create a heatmap that reveals, for example, which entities are sending the most money, and which entities are receiving the most. See it in action in our Heatmap story.

Enhancements

• Control the look of your timeline with the new heatmapPadding and showLines options.
• The new getEntityPosition and getEventPosition getEntityPosition and getEventPosition APIs allow you to get the positions of entities and events on the timeline. Use them to add your own HTML pointing to entities and events that stays in sync as the timeline moves, like our Annotations story. These APIs are currently in beta. Please send your feedback to [email protected].

Bugs Fixed

• Row fading animations now better complement event animations.
• Fixed an issue with internal tooling on the SDK site. There are no behavior changes to the KronoGraph package.

Enhancements

• We've added a new Money Flow demo to show you how KronoGraph can represent financial data and expose fraudulent transactions. Here we flag suspicious transactions that have occurred within a possible money laundering operation.
• A new joinStyle option lets you decide how to show links between exactly two entities. See our Multiple Recipients story for an example.
• We've improved security by adding a SAST step to our build. For more info see our Architecture docs.

Breaking Changes

• Missing startTime and endTime properties in event handler objects are now undefined instead of null. This makes them consistent with the time property. If your code currently checks for null, update it to use undefined instead.

Bugs Fixed

• Fixed an issue with older playground links so they now work correctly.
• Fixed an issue where unfocusing when zoomed out a long way can break the zoom limits.
• Fixed an issue where the labelColor of an entity appeared with the wrong alpha value.
• Fixed an issue causing unnecessary CPU usage while the timeline is idle.

Features

• You can now build integrations between KronoGraph and KeyLines or ReGraph in our Playground. It's ideal for trying out different interaction patterns and understanding how to synchronize content between the graph and timeline views. Try our Keylines and ReGraph Integration stories as a starting point.
• You can now customize the language and format of date and time in the timeline scales to perfectly adapt to your locale. See how it works in our Scales Options story.

Enhancements

• The getInRangeItems getInRangeItems API gives you easy access to all the entities and events that are in range so that you can pass them between your KronoGraph and KeyLines or ReGraph visualizations.
• We're now showing a CSS tab for stories that include interesting styling, such as our Tooltip on Timeline story. Opening these stories in the Playground will allow you to edit the HTML and CSS in real time.
• We've added some helpful cross-links to help you navigate our API reference, and made it clearer which items in the API are optional or required.

Bugs Fixed

• Improved stability when loading time series charts with a large number of data points.
• Fixed an issue which caused complex events to be aggregated incorrectly.
• Improved rendering performance of events with color gradients in Firefox and MacOS.
• Fixed an issue with the display of some simultaneous events in Safari.

Features

• Seeing data from different perspectives during analysis can help you navigate large datasets and spot interesting information and patterns faster. KronoGraph now lets you add time series charts into your timelines, harnessing the power of two simultaneous views - continuous data and sequences of discrete events. See more in our new stories - Time Series Charts and Time Series Chart Tooltips. This feature is currently in alpha. Please send your feedback to [email protected].

Enhancements

• A new showCircles option to control whether the circles at the start of the entity lines are displayed.

Features

• Even timelines with very dense or closely neighboring events should keep as much informational value as possible without appearing crowded. This is why KronoGraph now elegantly combines event joins and event lines into 'event summaries'. When interacted with, a targetType 'eventSummary' is passed to the event handler and the eventIds property contains the ids of summarized events. See the improved behavior throughout our showcase demos.

Enhancements

• To prevent cluttered and overlapping timelines, font icons are no longer drawn if there is not enough space. They will reappear once the user zooms in far enough for the font icons to fit.

Features

• KronoGraph now has its own live code editor! To start writing your own code, you can access the new Playground from the top navigation panel or by clicking the playground icon available in the bottom right corner of all our stories in the Storybook.
• We've simplified heatmaps by introducing a single heatmapThreshold option that determines whether heatmap or individual events are drawn. As a result, the two views transition smoothly without overlapping.

Breaking Changes

• heatmapLowerThreshold and heatmapUpperThreshold have been replaced with a single heatmapThreshold option.

Features

• KronoGraph now attempts to vertically order entities to minimize the length of the connections between them. This results in much clearer timelines and also helps analysts spot clusters, such as groups of people who regularly communicate with each other. You can still choose to e.g. order entities alphabetically or by event order using the ordering ordering option.
• We've updated our Telephone Call Analysis demo to show you how to combine KronoGraph with more UI elements including a chart, time bar, date picker, search box and undo/redo controls.

Enhancements

• A new reorder property that you can set to false to keep the order of entities after focus change.
• The horizontal entity lines are now fainter and less intrusive by default.
• The fadeOutsideRange option, highlighting the range of events' activities, is now off by default. Set it to true to turn it back on.

Features

• We've reworked the design of some events to make them clearer and easier to analyze. For example, you'll notice that events with duration and multiple entities are now drawn using bars along each entity line, rather than as a large solid rectangle. To showcase the improved design we've added a number of new stories in the Data Model section of our Storybook.
• We've also improved drawing of complex events with multiple inputs and outputs by adding optional from and to properties to entityIds. If you specify them, you'll see the ins and outs reflected in the event direction in relation to each entity, just like in our new Multiple Sources story.
• The default coloring behavior for events with no specified color has also been improved. For example, this results in smarter color gradients of non-directional events.

Bugs Fixed

• Fixed an issue where group labels were sometimes not truncating correctly.
• Fixed an issue where double-clicking on major scales when they're empty could produce an error.
• Fixed an issue where KronoGraph could sometimes produce an empty timeline on initial load.

TypeScript Changes

• TypeScript changes to reflect the extended format of the entityIds property.

Features

• We've introduced panning and zooming limits for the timeline which ensure that your data is always readable. In addition, panning or zooming into a specific area now always keeps at least one event or marker in view to help you keep track of where you are in the timeline.
• Our updated Phone Call Analysis demo now features a sleek dark mode design and scale wrapping.

Bugs Fixed

• Fixed some issues that could cause unexpected scale behavior when zooming into the chart.

Features

• KronoGraph now supports marquee zoom for even faster and more precise navigation. There are two ways to start a marquee range:
  • Hold left click and drag from the top or bottom scales.
  • Hold left click + shift key and drag anywhere in the timeline.
• The drag-start event The onTimelineDragStart event contains a new setDragOptions() function that lets you customize the type of drag when the event is fired. See how to create custom draggers for various user interactions in our brand new Custom Dragging story.
• KronoGraph is now fully supported when used in a shadow DOM which makes it more compatible with Web Components and related tools like Polymer.

Bugs Fixed

• Improved the appearance of the scale at the edges of the timeline.
• Fixed an issue with the way times were returned from events that occurred on very old dates.

Features

• This version features a new scale wrapping option for exploring patterns of behavior, sometimes known as 'pattern of life' analysis. Scale wrapping summarizes data over a chosen period, such as a day or week, and provides a unique insight into patterns and anomalies in your data. Take a look at our new Pattern of Life Analysis showcase demo to see it in action.
• We've also added a scale wrapping story to show you how to implement the feature.

Bugs Fixed

• Loading data into an empty timeline will now always fit to view.

• Fixed an issue where using a grouping property with the same name as an ID or with a reserved name could sometimes cause an error.

About this Release

We're thrilled to announce the first General Availability release of KronoGraph. Version 1.0 has a stable API that’s been validated and guided by over 100 developers who took part in our Early Access program. Thank you for all your contributions!

See the Breaking Changes section for more details on the new API.

Features

Improved Entity Groups

We've made some big improvements to the way groups look and behave. For example, the interactive group labels let you perform actions on a group as a whole, such as focusing or expanding an entire group. And thanks to our innovative 'runs' approach, any group can now be opened, no matter how big. See the improved groups in our Grouping stories and our Showcase demos.

Richer UI Controls

Exploring the timeline is now easier with even more UI controls. You can expand or focus groups, focus entities or pin them to make sure they're always in the view. These controls can also be hidden or called programmatically, letting you create your own UI that suits your design.

Better Events Handling

We've improved event handling and added more events you can respond to in your event handlers. We've also made zooming on the timeline more precise, added the possibility to configure a hover delay and added support for some touch gestures such as pinch-to-zoom or a long press. To find out more about events and how to respond to them, take a look at our new Events and Context Menu stories.

Friendlier Validation

We've significantly improved validation for a better user experience. The error messages returned by KronoGraph when validation fails are now more detailed and useful for debugging.

Breaking Changes

For any help implementing the changes below, please contact support.

Data Structure

• The properties of entities and events on the data object passed to timeline.set are now dictionaries indexed by the item id rather than arrays. See the new data structure in the Simple Events story.

• The properties of entities and events props are now dictionaries indexed by the item id rather than arrays. See the new data structure in the Simple Events story.

• Since events and entities are no longer arrays, it's no longer possible to define a strict load order to support the load order ordering method. We now support 'keyorder' instead, which uses JavaScript's key ordering to infer an ordering for entities.

• Since events and entities are no longer arrays, it's no longer possible to define a strict load order to support the load order ordering method. We now support 'keyorder' instead, which uses JavaScript's key ordering to infer an ordering for entities.

• The id properties of both entity and event have been removed.

Entity Groups

• By default, double-clicking an entity group now focuses a group instead of expanding it.
• The groupingProperties property of EntityType has been renamed to groupBy.
• The type and/or groupBy properties of open groups are now always shown in the form of a new row.
• The showPinOnHover function has been removed. Use the controls API instead.

Handling Events

• Interactions on the background now return null instead of 'undefined'.
• Timeline controls (pin, focus, expand) now have a targetType instead of retuning null.
• Scale now has an id and targetType instead of returning 'undefined'.
• The id of a single entity row is now the id of the entity itself rather than an id of a group containing a single entity.
• Preventing default behavior of an event is now done by calling the preventDefault() property instead of returning true from the event handler.
• The hover event now fires with a default delay that can be configured in the hover option.
• The default behavior when double-clicking heatmap cells is now to focus the entity row.

General API Consistency

• The dx and dy attributes of a fontIcon are now expressed as percentages of a font icon's size rather than as absolute offsets.

• The value property of event has been removed. Use the event's data property to store custom values on an event.

• The id property of ComponentDefinition has been removed. The canvas id is now set internally.