Skip to content

WebComponent that visualizes historical data as an interactive histogram. Written with lit-element.

Notifications You must be signed in to change notification settings

dcts/timeline-component

Repository files navigation

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

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

About

WebComponent that visualizes historical data as an interactive histogram. Written with lit-element.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages