diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 1742a5371..e582ca37f 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -19767,6 +19767,10 @@ export namespace Components { interface RuxRuler { "end": string; "interval": any; + /** + * Display a secondary ruler which shows one level up from the current interval. IE: Days for Hours, Months for Days, etc. + */ + "showSecondaryRuler"?: boolean | undefined; /** * Display the day (MM/DD) at 00:00. Only works when Timeline interval is set to 'hour' or 'minutes'. */ @@ -55345,6 +55349,10 @@ declare namespace LocalJSX { interface RuxRuler { "end"?: string; "interval"?: any; + /** + * Display a secondary ruler which shows one level up from the current interval. IE: Days for Hours, Months for Days, etc. + */ + "showSecondaryRuler"?: boolean | undefined; /** * Display the day (MM/DD) at 00:00. Only works when Timeline interval is set to 'hour' or 'minutes'. */ 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 006438bbc..fe9d2be8a 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 @@ -32,6 +32,11 @@ export class RuxRuler { */ @Prop({ attribute: 'show-start-of-day' }) showStartOfDay? = false + /** + * Display a secondary ruler which shows one level up from the current interval. IE: Days for Hours, Months for Days, etc. + */ + @Prop({ attribute: 'show-secondary-ruler' }) showSecondaryRuler? = false + get dateRange() { return getRange( new Date(this.start), @@ -163,7 +168,6 @@ export class RuxRuler { timePattern: RegExp = this.timePatterns['day'] secondaryRuler(time: string, newDay: string, index: number) { - if (!this.showStartOfDay) return null let gridColumn let textDisplay = '' if ( @@ -267,9 +271,10 @@ export class RuxRuler { key={index} class={{ 'ruler-time': true, - 'ruler-new-day-cell': this.shouldShow( - time - ), + 'ruler-new-day-cell': + (this.showStartOfDay && + this.shouldShow(time)) || + false, 'has-date-scroll': (this.showStartOfDay && ['hour', 'minute'].includes( @@ -284,12 +289,18 @@ export class RuxRuler { > {time} - {this.secondaryRuler(time, newDay, index)} + {this.showSecondaryRuler + ? this.secondaryRuler( + time, + newDay, + index + ) + : null} ) } )} - {this.showStartOfDay ? this.getPartial() : null} + {this.showSecondaryRuler ? this.getPartial() : null} ) diff --git a/packages/web-components/src/index.html b/packages/web-components/src/index.html index 6ad97accf..159ca1073 100644 --- a/packages/web-components/src/index.html +++ b/packages/web-components/src/index.html @@ -116,7 +116,7 @@ - +