input:date, input:date-range

Type can be input:date, input:date-range

<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="input:date">
  ...
</discovery-tile>

{
  'type' 'input:date'
  ...
  'macro' <% %>
}

input:date

When used by the Events Mechanism, emits the timestamp in time unit of the input.

Name	Default
--warp-view-input-font-size	1rem
--warp-view-input-border-radius	0.25rem
--warp-view-input-border-color	#c0c0c0
--warp-view-input-label-color	#404040
--warp-view-input-bg-color	#ffffff
--warp-view-button-font-size	1rem
--warp-view-button-border-color	#004eff
--warp-view-button-padding	.375rem .75rem
--warp-view-button-label-color	#ffffff
--warp-view-button-bg-color	#004eff
--warp-view-button-width	auto
--warp-view-button-border-radius	0.25rem

Name	Type	Description
data	number	Initial timestamp of the input in time unit
globalParams	Option	Global options (see above) concerning this tile
params	Option[]	List of options (see above) concerning each displayed dataset depending of the index of this array
events	Events[]	List of events to emit (see Events Mechanism)

By default, inputs will send an event on each click or keystroke. To throttle this event flow, you can use one of these input options:

• Options.input.value: Initial value
• Options.input.delayRequest: the event are delayed of the specified number of milliseconds, ie value 1000 will keep request rate under one per second.
• Options.input.validation: Add a validation check before sending an event

input:date-range

When used by the Events Mechanism, emits the timestamps (start and end) in time unit of the input.

Name	Default
--warp-view-input-font-size	1rem
--warp-view-input-border-radius	0.25rem
--warp-view-input-border-color	#c0c0c0
--warp-view-input-label-color	#404040
--warp-view-input-bg-color	#ffffff
--warp-view-button-font-size	1rem
--warp-view-button-border-color	#004eff
--warp-view-button-padding	.375rem .75rem
--warp-view-button-label-color	#ffffff
--warp-view-button-bg-color	#004eff
--warp-view-button-width	auto
--warp-view-button-border-radius	0.25rem

Name	Type	Description
data	number[]	Initial timestamps of the input in time unit, start and end of the range
globalParams	Option	Global options (see above) concerning this tile
params	Option[]	List of options (see above) concerning each displayed dataset depending of the index of this array
events	Events[]	List of events to emit (see Events Mechanism)

Date input

{
  'data' NOW
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}

Disabled state

{
  'data' NOW
  'globalParams' {
    'input' { 'disabled' true }
  } 
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}

Disabled time

{
  'data' NOW
  'globalParams' {
    'input' { 'disableTime' true }
  } 
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}

Localized Date input

You can set a country code (default 'en'), full list here You can also use 'AUTO' to use the browser default language.

{
  'data' NOW
  'globalParams' { 'input' { 'locale' 'nl' } }
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}

Date range input

{
  'data' [ 
    NOW 10 d - 
    NOW 
  ]
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}

Disabled time

{
  'data' [ NOW 10 d - NOW ]
  'globalParams' { 'input' { 'disableTime' true } }
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}

Localized Date range input

You can set a country code (default 'en'), full list here You can also use 'AUTO' to use the browser default language.

{
  'data' [ NOW 10 d - NOW ]
  'globalParams' { 'input' { 'locale' 'de'  } }
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}

Custom time ranges

You can set a country code (default 'en'), full list here You can also use 'AUTO' to use the browser default language.

{
  'data' [ NOW 10 d - NOW ]
  'globalParams' { 
    'input' { 
      'locale' 'fr' 
      'customRangeLabel' 'Plage de temps'
      'applyLabel' 'Ok'
      'cancelLabel' 'Annuler'
      'ranges' {
        'Aujourd'hui' [ 
          NOW ->TSELEMENTS [ 0 2 ] SUBLIST TSELEMENTS->
          NOW ->TSELEMENTS [ 0 2 ] SUBLIST TSELEMENTS-> 1 d + 1 s -
        ]
        'Hier' [ 
          NOW ->TSELEMENTS [ 0 2 ] SUBLIST TSELEMENTS-> 1 d -
          NOW ->TSELEMENTS [ 0 2 ] SUBLIST TSELEMENTS-> 1 s -
        ]
        'Cette semaine' [ 
          NOW ->TSELEMENTS [ 0 2 ] SUBLIST TSELEMENTS-> 7 d -
          NOW ->TSELEMENTS [ 0 2 ] SUBLIST TSELEMENTS-> 1 s -
        ]
        'Ce mois' [ 
          NOW ->TSELEMENTS [ 0 2 ] SUBLIST TSELEMENTS-> 30 d -
          NOW ->TSELEMENTS [ 0 2 ] SUBLIST TSELEMENTS-> 1 s -
        ]
      }
    }
  }
  'events' [
    { 'type' 'variable' 'tags' 'myVar' 'selector' 'myVar' }
  ]
}