https://github.com/dcts/timeline-component
WebComponent that visualizes historical data as an interactive histogram. Written with lit-element.
https://github.com/dcts/timeline-component
Last synced: about 1 year ago
JSON representation
WebComponent that visualizes historical data as an interactive histogram. Written with lit-element.
- Host: GitHub
- URL: https://github.com/dcts/timeline-component
- Owner: dcts
- Created: 2020-03-09T21:19:03.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T23:44:08.000Z (over 3 years ago)
- Last Synced: 2025-04-10T20:26:03.058Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://dcts-timeline.web.app/
- Size: 2.05 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Timeline Component for KBA / TEIPublisher
Component to display a timeline (barchart) of search results. Build with lit-element. [Check out the interactive demo](https://dcts-timeline.web.app/).
**Preview**
# Requirements
- **`nodeJS`**
- **`npm`**
- [**`lit-element`**](https://lit-element.polymer-project.org/) [npm-link](https://www.npmjs.com/package/lit-element)
- [**`firebase`**](https://firebase.google.com/docs/cli) (only for hosting)
### Install
```bash
npm install
```
### Development
```bash
npm run dev # runs webpack dev server on port 8080
```
### Production
App is live: https://dcts-timeline.web.app/ (hosted by firebase hosting)
```bash
# 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](https://github.com/avajs/ava) was used + the npm package `esm` to enable modern module imports in AVA (as described on [StackOverflow](https://stackoverflow.com/a/55803624/6272061)).
# To Dos
- [x] Support for date stringformat "2012-W01" to "2012-W53" (weeks)
- [x] updating range in the rangepicker should update the selection in the timeline
- [x] reset range button (in the datepicker)
- [x] tooltip on hover
- [x] tooltip during selection
- [ ] move selection around by dragging
- [ ] distinct behavior for both inputs
- [x] custom validations for inputs
- [x] custom views for all 6 scopes
- [x] decades(10Y)
- [x] decades(5Y)
- [x] years
- [x] months
- [x] weeks
- [x] day
- [ ] cleanup code and repo
- [ ] API documentation / storybook
- [ ] publish on NPM