Timeline Component for KBA / TEIPublisher

Component to display a timeline (barchart) of search results. Build with lit-element. Check out the interactive demo.

Preview

Requirements

• nodeJS
• npm
• lit-element npm-link
• firebase (only for hosting)

Install

npm install

Development

npm run dev # runs webpack dev server on port 8080

Production

App is live: https://dcts-timeline.web.app/ (hosted by firebase hosting)

# deploy in 2 steps
npm run prod    # bundle and build production files with webpack
firebase deploy # deploys content of /dist folder to firebase

# script (runs both steps)
npm run deploy

Testing with AVA

npm run test

to test the ParseDateService and SearchResultService. AVA testing framework was used + the npm package esm to enable modern module imports in AVA (as described on StackOverflow).

To Dos

• Support for date stringformat "2012-W01" to "2012-W53" (weeks)
• updating range in the rangepicker should update the selection in the timeline
• reset range button (in the datepicker)
• tooltip on hover
• tooltip during selection
• move selection around by dragging
• distinct behavior for both inputs
• custom validations for inputs
• custom views for all 6 scopes
  • decades(10Y)
  • decades(5Y)
  • years
  • months
  • weeks
  • day
• cleanup code and repo
• API documentation / storybook
• publish on NPM