From 50e7ba47ddbe4491ba6823c9a50b1d4b407a1b92 Mon Sep 17 00:00:00 2001 From: Roman Roelofsen Date: Tue, 13 Dec 2016 14:55:51 +0100 Subject: [PATCH] Timeline: added header legend for zoom level: month, quarter, year --- .../wp-table/timeline/wp-timeline.header.ts | 48 ++++++++++++++++--- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/frontend/app/components/wp-table/timeline/wp-timeline.header.ts b/frontend/app/components/wp-table/timeline/wp-timeline.header.ts index 6b36067f6a..a70a371c4c 100644 --- a/frontend/app/components/wp-table/timeline/wp-timeline.header.ts +++ b/frontend/app/components/wp-table/timeline/wp-timeline.header.ts @@ -275,27 +275,61 @@ export class WpTimelineHeader { cell.innerHTML = start.format("YYYY"); }); - this.renderTimeSlices(vp, "quarter", 10, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { - cell.innerHTML = start.format("Q"); + this.renderTimeSlices(vp, "month", 10, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + cell.innerHTML = start.format("MMM"); cell.style.borderColor = "#000000"; cell.style.height = (this.globalHeight - 10) + "px"; - cell.style.zIndex = "2"; }); - this.renderTimeSlices(vp, "month", 20, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { - cell.innerHTML = start.format("MM"); + this.renderTimeSlices(vp, "week", 20, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + cell.innerHTML = start.format("ww"); cell.style.borderColor = "#CCCCCC"; - cell.style.height = "15px"; + cell.style.height = "25px"; cell.style.borderBottom = "1px solid black"; + cell.style.backgroundColor = "white"; }); } private renderLabelsQuarters(vp: TimelineViewParameters) { + this.renderTimeSlices(vp, "year", 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + cell.innerHTML = start.format("YYYY"); + }); + + this.renderTimeSlices(vp, "quarter", 10, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + cell.innerHTML = "Q" + start.format("Q"); + cell.style.borderColor = "#000000"; + cell.style.height = (this.globalHeight - 10) + "px"; + }); + + this.renderTimeSlices(vp, "month", 20, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + cell.innerHTML = start.format("MMM"); + cell.style.borderColor = "#000000"; + cell.style.height = "25px"; + cell.style.borderBottom = "1px solid black"; + cell.style.backgroundColor = "white"; + }); } private renderLabelsYears(vp: TimelineViewParameters) { - } + this.renderTimeSlices(vp, "year", 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + cell.innerHTML = start.format("YYYY"); + cell.style.backgroundColor = "white"; + }); + + this.renderTimeSlices(vp, "quarter", 10, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + cell.innerHTML = "Q" + start.format("Q"); + cell.style.borderColor = "#000000"; + cell.style.height = (this.globalHeight - 10) + "px"; + }); + this.renderTimeSlices(vp, "month", 20, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => { + cell.innerHTML = start.format("M"); + cell.style.borderColor = "#000000"; + cell.style.height = "25px"; + cell.style.borderBottom = "1px solid black"; + cell.style.backgroundColor = "white"; + }); + } renderTimeSlices(vp: TimelineViewParameters, unit: string,