Each input event-interval consists of a start and end date. The bins as well consist of start and end dates. The mapping algorithm has to count the number of event-intervals per bin.
Component outputs
Event rangeChange
When the user changes the component emits a range consisting of this model:
interface RangeChangeEvent { start: Date, end: Date };
Functional Requirements
While the timeline component #54 is good for displaying a few events on a timeline, we need another component
The POC #123 proves that the requirements can be met with Plotly.js
Technical Specs
Component inputs
Input
data
Model, array of:
Example
<eventA>
<eventB>
<eventC>
<eventD>
<eventE>
Input
binSize
The binSize can be one of these values
'century' | 'decade' | 'year' | 'month' | 'day'
Default:'year'
Visualization
The visualization is composed by a histogram chart and a select UI to manually change the binSize.
The chart has these axes:
Depending on
binSize
, the bin size is one century, decade, year, month or day.The chart has a range slider
Mapping event-intervals to bins
Each input event-interval consists of a start and end date. The bins as well consist of start and end dates. The mapping algorithm has to count the number of event-intervals per bin.
Component outputs
Event
rangeChange
When the user changes the component emits a range consisting of this model: