shalugin / horizontal-timeline Goto Github PK

Horizontal Timeline Component on Angular2

License: MIT License

CSS 28.41% HTML 6.39% TypeScript 61.98% JavaScript 3.23%

horizontal-timeline's Introduction

horizontal-timeline

Horizontal Timeline Component on Angular2 (original component: https://codyhouse.co/demo/horizontal-timeline/index.html)

Usage

Clone repository.
Copy horizontal-timeline to your components folder.
Move cd-arrow.svg to your assets folder.
Modify horizontal-timeline.component.css: change url to your assets folder in line background: url(assets/images/cd-arrow.svg) no-repeat 0 0; (see angular/angular#6637).
Use component on your page: <horizontal-timeline [timelineElements]="timeline" [showContent]="true"></horizontal-timeline>.

Properties

Name	Type	Description	Default value
`eventsMinDistance`	`number`	Minimal distance between elements in px	`80`
`timelineElements`	`TimelineElement`	Timeline elements	none
`dateFormat`	`string`	Date format string	`'dd.MM.yyyy'`
`disabled`	`boolean`	If `true`, only left and right buttons are clickable	`false`
`showContent`	`boolean`	Use `false` to hide content, `true` to show content	`false`
`timelineWrapperWidth`	`number`	Width of timeline wrapper in px	`720`

TimelineElement interface

Name	Type	Description
`date`	`Date`	Event date
`title`	`string`	Element content title
`selected`	`boolean`	Is element selected
`content`	`string`	Element content

horizontal-timeline's People

Contributors

Stargazers

Watchers

horizontal-timeline's Issues

When we have multiple same dates they are not shown (only one or two)

When we have multiple same dates we are seeing just one or two dates. For example if we add 5 same objects in timeline in plunker provided (https://stackblitz.com/edit/angular-horizontal-timeline-test?file=src%2Fapp%2Fapp.component.ts) we will see only last one not all of them.

Reversing the order of Timeline events

Currently the most recent date in toward left, can we make it configurable to right.

Timeline not waiting for data to come from service and throwing errors in console.

Cannot read property 'nativeElement' of undefined
at HorizontalTimelineComponent.setDatePosition (horizontal-timeline.component.ts:332)
at HorizontalTimelineComponent.initTimeline (horizontal-timeline.component.ts:246)
at HorizontalTimelineComponent.initView (horizontal-timeline.component.ts:321)
at HorizontalTimelineComponent.set [as timelineElements] (horizontal-timeline.component.ts:103)
at updateProp (core.js:12619)
at checkAndUpdateDirectiveInline (core.js:12326)
at checkAndUpdateNodeInline (core.js:13893)
at checkAndUpdateNode (core.js:13836)
at debugCheckAndUpdateNode (core.js:14729)
at debugCheckDirectivesFn (core.js:14670)

Stackblitz example for the Component

@shalugin Nice work with the horizontal timeline

I have made a working example of the code on StackBlitz for everyone to refer.

The only thing that is missing is the arrow svg because StackBlitz doesnt allow files other than html, css, scss, ts to be uploaded.

unable to load data

I have a problem loading data. I fire the loadTimeline method after I have received data from the server. If I build the TimelineElement array manually everything works fine. If I load by pushing new objects into the array I get the following error:

ERROR TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

  loadTimeline(carePlanSections: NcCarePlanDto[]) {
    this.timeline = [];
    setTimeout(() => { // simulate delay 
      carePlanSections.forEach((section) => {
        this.timeline.push({ caption: 'fromNow', date: moment(section.reviewDatetime).toDate(), selected: false, title: section.subject, content: section.editor })
      })
    //   this.timeline = [
    //     { caption: '16 Jan', date: moment(carePlanSections[0].createdDatetime).toDate(), title: 'Horizontal Timeline', content: this.content },
    //     { caption: '28 Feb', date: new Date(2014, 2, 28), title: 'Status#1', content: this.content },
    //     { caption: '20 Mar', date: new Date(2014, 3, 20), selected: true, title: 'Status#2', content: this.content },
    //     { caption: '20 May', date: new Date(2014, 5, 20), title: 'Status#3', content: this.content },
    //     { caption: '09 Jul', date: new Date(2014, 7, 9), title: 'Status#4', content: this.content },
    //     { caption: '30 Aug', date: new Date(2014, 8, 30), title: 'Status#5', content: this.content },
    //     { caption: '15 Sep', date: new Date(2014, 9, 15), title: 'Status#6', content: this.content },
    //     { caption: '01 Nov', date: new Date(2014, 11, 1), title: 'Status#7', content: this.content },
    //     { caption: '10 Dec', date: new Date(2014, 12, 10), title: 'Status#8', content: this.content },
    //     { caption: '29 Jan', date: new Date(2015, 1, 19), title: 'Status#9', content: this.content },
    //     { caption: '3 Mar', date: new Date(2015, 3, 3), title: 'Status#9', content: this.content },
    //   ];
    }, 2000);
  }