diff --git a/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.tsx b/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.tsx
index a8acf752b..4d0390df3 100644
--- a/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.tsx
+++ b/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.tsx
@@ -71,31 +71,50 @@ export class RuxRuler {
}
getPartialDay() {
- if (!this.firstNewDay) return
- console.log(this.firstNewDay)
- const prevDay = this.dateRange[this.firstNewDay - 1]
- console.log(this.dateRange, prevDay)
- //Set Last Column
- let unitOfTime = 60
- const end = unitOfTime * this.firstNewDay! + 2
- console.log(prevDay)
+ let partialDay = {
+ end: -1,
+ date: this.dateRange[0][1],
+ }
+ /**
+ * If this.firsNewDay exists it means that there is the start of a day within the date range
+ * so we need to find where it starts and backfill the previous day to the start day
+ */
+ if (this.firstNewDay) {
+ //Set Last Column
+ let unitOfTime = 60
+ if (this.interval === 'minute') {
+ unitOfTime = unitOfTime * 60
+ }
+ const prevDay = this.dateRange[this.firstNewDay - 1]
+ const end = unitOfTime * this.firstNewDay! + 2
+ partialDay = {
+ end,
+ date: prevDay[1],
+ }
+ }
+ /**
+ * Otherwise there is not the start of a day
+ * within the timeine so we can make the partial
+ * date take up the full width of the timeline.
+ */
return (
- {prevDay[1]}
+ {partialDay.date}
)
}
- timePattern = /^00:.+$/
+ timePattern = /^00:00+$/
shouldShowDate(time: string) {
+ console.log(time, this.timePattern.test(time))
if (!['hour', 'minute'].includes(this.interval)) {
return false
}
diff --git a/packages/web-components/src/index.html b/packages/web-components/src/index.html
index ff800dcbc..a3e70b44b 100644
--- a/packages/web-components/src/index.html
+++ b/packages/web-components/src/index.html
@@ -91,7 +91,7 @@
start="2021-02-01T00:00:00.000Z"
end="2021-03-03T01:00:00.000Z"
playhead="2021-02-02T00:00:00.000Z"
- interval="week"
+ interval="hour"
zoom="4"
show-grid
>
@@ -193,9 +193,9 @@
-
- Region 5
-
- Event 5.1
-
-
-
- Region 6
-
- Event 6.1
-
-
-
- Region 7
-
- Event 7.1
-
-
@@ -328,10 +298,8 @@
}
function setZoomInterval2(zoomLevel) {
- if (zoomLevel <= 2) timeline2.setAttribute('interval', 'hour')
- if (zoomLevel > 2 && zoomLevel <= 6)
- timeline2.setAttribute('interval', 'minute')
- if (zoomLevel > 6) timeline2.setAttribute('interval', 'second')
+ if (zoomLevel <= 4) timeline2.setAttribute('interval', 'hour')
+ if (zoomLevel > 4) timeline2.setAttribute('interval', 'minute')
}