@@ -26,17 +26,37 @@ export enum DurationInputType {
2626}
2727
2828// ISO 8601
29- enum TimeDurationUnit {
30- MINUTE = 'M' ,
31- HOUR = 'H'
29+ export enum TimeDurationUnit {
30+ MINUTE = 'PT%M' ,
31+ HOUR = 'PT%H' ,
32+ DAY = 'P%D' ,
33+ WEEK = 'P%W' ,
34+ MONTH = 'P%M' ,
35+ YEAR = 'P%Y'
3236}
3337
38+ // Display name for the ISO 8601 units
39+ const TimeDurationUnitDisplay : Record < TimeDurationUnit , string > = {
40+ [ TimeDurationUnit . MINUTE ] : 'Minutes' ,
41+ [ TimeDurationUnit . HOUR ] : 'Hours' ,
42+ [ TimeDurationUnit . DAY ] : 'Days' ,
43+ [ TimeDurationUnit . WEEK ] : 'Weeks' ,
44+ [ TimeDurationUnit . MONTH ] : 'Months' ,
45+ [ TimeDurationUnit . YEAR ] : 'Years'
46+ } ;
47+
3448// Pandas Frequency
35- enum PandasTimeUnit {
36- MINUTE = 'min' ,
37- HOUR = 'h'
49+ export enum PandasTimeUnit {
50+ MINUTE = '% min' ,
51+ HOUR = '% h'
3852}
3953
54+ // Display name for the Pandas units
55+ const PandasTimeUnitDisplay : Record < PandasTimeUnit , string > = {
56+ [ PandasTimeUnit . MINUTE ] : 'Minutes' ,
57+ [ PandasTimeUnit . HOUR ] : 'Hours'
58+ } ;
59+
4060// This is a input component that renders both a number input and a dropdown for the unit of the duration
4161@customElement ( 'custom-duration-input' )
4262export class CustomDurationInput extends LitElement {
@@ -79,12 +99,17 @@ export class CustomDurationInput extends LitElement {
7999 break ;
80100 }
81101
102+ if ( ! this . unit || ! this . number ) {
103+ return ;
104+ }
105+
106+ // Replace the % in the unit with the number and set the value
82107 switch ( this . type ) {
83108 case DurationInputType . ISO_8601 :
84- this . value = `PT ${ this . number } ${ this . unit } ` ;
109+ this . value = `${ this . unit . replace ( '%' , this . number . toString ( ) ) } ` ;
85110 break ;
86111 case DurationInputType . PANDAS_FREQ :
87- this . value = `${ this . number } ${ this . unit } ` ;
112+ this . value = `${ this . unit . replace ( '%' , this . number . toString ( ) ) } ` ;
88113 }
89114
90115 // Fire event to notify parent component that the value has changed
@@ -105,20 +130,29 @@ export class CustomDurationInput extends LitElement {
105130 @property ( { type : String } )
106131 public value : string = '' ;
107132
133+ @property ( { type : Array } )
134+ public iso_units : TimeDurationUnit [ ] = [ TimeDurationUnit . MINUTE , TimeDurationUnit . HOUR ] ;
135+
136+ @property ( { type : Array } )
137+ public pandas_units : PandasTimeUnit [ ] = [ PandasTimeUnit . MINUTE , PandasTimeUnit . HOUR ] ;
138+
108139 protected number : number | null = null ;
109140
110141 protected unit : TimeDurationUnit | PandasTimeUnit | null = null ;
111142
112143 // Extract the number from the ISO 8601 Duration string
113144 getNumberFromDuration ( duration : string ) : number | null {
114- const match = / P T ( \d + ) ( [ H M ] ) / . exec ( duration ) ;
145+ const match = / P (?: T ) ? ( \d + ) ( [ H M D W M O Y ] + ) / . exec ( duration ) ;
115146 return match ? parseInt ( match [ 1 ] , 10 ) : null ;
116147 }
117148
118149 // Extract the unit from the ISO 8601 Duration string
119150 getUnitFromDuration ( duration : string ) : TimeDurationUnit | null {
120- const match = / P T ( \d + ) ( [ H M ] ) / . exec ( duration ) ;
121- return match ? ( match [ 2 ] as TimeDurationUnit ) : null ;
151+ const match = / P (?: T ) ? ( \d + ) ( [ H M D W M O Y ] + ) / . exec ( duration ) ;
152+
153+ // replace the number in the full match with % to get the unit
154+ const unit = match ?. [ 0 ] ?. replace ( match ?. [ 1 ] , '%' ) ;
155+ return unit as TimeDurationUnit ;
122156 }
123157
124158 // Extract the number from the Pandas Frequency string
@@ -130,7 +164,21 @@ export class CustomDurationInput extends LitElement {
130164 // Extract the unit from the Pandas Frequency string
131165 getUnitFromPandasFrequency ( freq : string ) : PandasTimeUnit | null {
132166 const match = / ( \d + ) ( m i n | h ) / . exec ( freq ) ;
133- return match ? ( match [ 2 ] as PandasTimeUnit ) : null ;
167+
168+ // replace the number in the full match with % to get the unit
169+ const unit = match ?. [ 0 ] ?. replace ( match ?. [ 1 ] , '%' ) ;
170+ return unit as PandasTimeUnit ;
171+ }
172+
173+ // Get available unit options based on the units property or defaults
174+ getUnitOptions ( ) : [ string , string ] [ ] {
175+ if ( this . type === DurationInputType . ISO_8601 ) {
176+ return this . iso_units . map ( ( unit ) => [ unit , TimeDurationUnitDisplay [ unit ] ] ) ;
177+ } else if ( this . type === DurationInputType . PANDAS_FREQ ) {
178+ return this . pandas_units . map ( ( unit ) => [ unit , PandasTimeUnitDisplay [ unit ] ] ) ;
179+ }
180+
181+ return [ ] ;
134182 }
135183
136184 render ( ) {
@@ -153,15 +201,7 @@ export class CustomDurationInput extends LitElement {
153201 label ="Unit "
154202 .value =${ this . unit }
155203 @or-mwc-input-changed =${ this . onInput }
156- .options="${ this . type === DurationInputType . ISO_8601
157- ? [
158- [ TimeDurationUnit . MINUTE , 'Minutes' ] ,
159- [ TimeDurationUnit . HOUR , 'Hours' ]
160- ]
161- : [
162- [ PandasTimeUnit . MINUTE , 'Minutes' ] ,
163- [ PandasTimeUnit . HOUR , 'Hours' ]
164- ] } "
204+ .options="${ this . getUnitOptions ( ) } "
165205 > </ or-mwc-input >
166206 ` ;
167207 }
0 commit comments