Options
All
  • Public
  • Public/Protected
  • All
Menu

Class DateTimeTickStrategy<TProps>

Axis Tick Strategy that is designed for depicting date and time.

Axis values are interpreted as UNIX timestamps similarly as with JavaScript Date API.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Axis interval ranges supported by DateTImeTickStrategy:

  • Minimum: 1 second (1000).
  • Maximum: 1000 years (really big number).

For reaching Axis ranges smaller than 1 second, TimeTickStrategy is recommended.

Note, that available axis interval ranges can be also limited by the type of Axis, refer to Axis documentation for more information.

Axis tick strategy is selected with Axis.setTickStrategy method:

 Axis.setTickStrategy(AxisTickStrategies.DateTime, (dateTimeTicks) => dateTimeTicks)

All configuration of automatically created ticks is done using the callback from setTickStrategy, see example below for the idea:

 // Specify TickStrategy and use callback to style automatic ticks.
 Axis.setTickStrategy(AxisTickStrategies.DateTime, (dateTimeTicks) => dateTimeTicks
     // All methods of `DateTimeTickStrategy` can be used here for styling ticks.
     .setMajorTickStyle((majorTicks) => majorTicks
         .setLabelFont((font) => font
             .setWeight('bold')
         )
     )
 )

All available strategies for automatic Axis ticks creation can be referenced via AxisTickStrategies.

Index

Methods

[Symbol.iterator]

  • [Symbol.iterator](): IterableIterator<[keyof TProps, TProps[keyof TProps]]>
  • Returns IterableIterator<[keyof TProps, TProps[keyof TProps]]>

asImmutable

  • asImmutable(): this
  • see

    Map#asImmutable

    Returns this

asMutable

  • asMutable(): this
  • see

    Map#asMutable

    Returns this

clear

  • clear(): this
  • Returns a new instance of this Record type with all values set to their default values.

    Returns this

delete

  • delete(key: K): this
  • Returns a new instance of this Record type with the value for the specific key set to its default value.

    alias

    remove

    Type parameters

    • K: keyof TProps

    Parameters

    • key: K

    Returns this

deleteIn

  • deleteIn(keyPath: Iterable<any>): this
  • alias

    removeIn

    Parameters

    • keyPath: Iterable<any>

    Returns this

equals

  • equals(other: any): boolean
  • Parameters

    • other: any

    Returns boolean

get

  • get(key: K, notSetValue?: any): TProps[K]
  • get(key: string, notSetValue: T): T
  • Returns the value associated with the provided key, which may be the default value defined when creating the Record factory function.

    If the requested key is not defined by this Record type, then notSetValue will be returned if provided. Note that this scenario would produce an error when using Flow or TypeScript.

    Type parameters

    • K: keyof TProps

    Parameters

    • key: K
    • notSetValue: any

    Returns TProps[K]

  • Type parameters

    • T

    Parameters

    • key: string
    • notSetValue: T

    Returns T

getDateOrigin

  • getDateOrigin(): Date | undefined
  • Get the dateOrigin of this DateTimeTickStrategy object.

    By default data-points are interpreted as UTC dates (milliseconds since January 1st 1970 GMT+0). If a dateOrigin is defined, data-points will instead be interpreted as milliseconds since dateOrigin.

    Returns Date | undefined

    A JavaScript Date object or undefined.

getGreatTickStyle

  • getGreatTickStyle(): TickStyle
  • Get great tick style of this DateTimeTickStrategy object.

    Great ticks display the largest Date/Time information for the active time range. There is always exactly one great tick in view.

    Returns TickStyle

    Great tick style.

getIn

  • getIn(keyPath: Iterable<any>): any
  • Parameters

    • keyPath: Iterable<any>

    Returns any

getLocale

  • getLocale(): string | undefined
  • Get locale of this DateTimeTickStrategy object.

    The locale specifies a geographical, political or cultural region, affecting all formatting of Tick labels.

    Returns string | undefined

    JavaScript Date locale string, that specifies a geographical, political or cultural region.

getMajorTickStyle

  • getMajorTickStyle(): TickStyle
  • Get major tick style of this DateTimeTickStrategy object.

    Major ticks display the next smaller Date/Time information after Great ticks. Often times, they represent the most important information.

    Returns TickStyle

    Major tick style.

getMinorTickStyle

  • getMinorTickStyle(): TickStyle
  • Get minor tick style of this DateTimeTickStrategy object.

    Minor ticks display the next smaller Date/Time information after Major ticks.

    Returns TickStyle

    Minor tick style.

has

  • has(key: string): key
  • Parameters

    • key: string

    Returns key

hasIn

  • hasIn(keyPath: Iterable<any>): boolean
  • Parameters

    • keyPath: Iterable<any>

    Returns boolean

hashCode

  • hashCode(): number
  • Returns number

merge

  • merge(...collections: Array<Partial<TProps> | Iterable<[string, any]>>): this
  • Parameters

    • ...collections: Array<Partial<TProps> | Iterable<[string, any]>>

    Returns this

mergeDeep

  • mergeDeep(...collections: Array<Partial<TProps> | Iterable<[string, any]>>): this
  • Parameters

    • ...collections: Array<Partial<TProps> | Iterable<[string, any]>>

    Returns this

mergeDeepIn

  • mergeDeepIn(keyPath: Iterable<any>, ...collections: Array<any>): this
  • Parameters

    • keyPath: Iterable<any>
    • ...collections: Array<any>

    Returns this

mergeDeepWith

  • mergeDeepWith(merger: function, ...collections: Array<Partial<TProps> | Iterable<[string, any]>>): this
  • Parameters

    • merger: function
        • Parameters

          • oldVal: any
          • newVal: any
          • key: any

          Returns any

    • ...collections: Array<Partial<TProps> | Iterable<[string, any]>>

    Returns this

mergeIn

  • mergeIn(keyPath: Iterable<any>, ...collections: Array<any>): this
  • Parameters

    • keyPath: Iterable<any>
    • ...collections: Array<any>

    Returns this

mergeWith

  • mergeWith(merger: function, ...collections: Array<Partial<TProps> | Iterable<[string, any]>>): this
  • Parameters

    • merger: function
        • Parameters

          • oldVal: any
          • newVal: any
          • key: keyof TProps

          Returns any

    • ...collections: Array<Partial<TProps> | Iterable<[string, any]>>

    Returns this

remove

  • remove(key: K): this
  • Type parameters

    • K: keyof TProps

    Parameters

    • key: K

    Returns this

removeIn

  • removeIn(keyPath: Iterable<any>): this
  • Parameters

    • keyPath: Iterable<any>

    Returns this

set

  • set(key: K, value: TProps[K]): this
  • Type parameters

    • K: keyof TProps

    Parameters

    • key: K
    • value: TProps[K]

    Returns this

setDateOrigin

  • setDateOrigin(dateOrigin: Date | undefined): this
  • Construct a new DateTimeTickStrategy object based on this one, but with modified dateOrigin.

    By default data-points are interpreted as UTC dates (milliseconds since January 1st 1970 GMT+0). If a dateOrigin is defined, data-points will instead be interpreted as milliseconds since dateOrigin.

    Specifying a dateOrigin can be necessary in applications where there is a long range of date-time data, and high resolution zooming is desired.

    Example usage:

    Application with one day of high-density data starting in year 2020:

    // Without specifying a dateOrigin, zooming will be limited to minutes with this range.
    // Milliseconds resolution can be reached by setting the dateOrigin to a Date
    // that is closer to the actual data (instead of the default 1.1.1970).
    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setDateOrigin( new Date( 2020, 0, 1 ) )
    )
    

    Check our DateTime Axis Interactive Example for a more thorough example on DateTime TickStrategy usage: https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0020-dateTimeAxis.html

    Parameters

    • dateOrigin: Date | undefined

      A JavaScript Date object or undefined.

    Returns this

    New DateTimeTickStrategy object.

setFormattingDay

  • Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:

    • Great: Weeks
    • Major: Days
    • Minor: Hours

    Example usage:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setFormattingDay(
                { year: 'numeric', month: 'long' },
                { day: '2-digit' },
                { hour: '2-digit', minute: '2-digit' }
            )
    )
    

    The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.

    For more detailed example usage, refer to DateTimeFormatter.

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setFormattingDecade

  • Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:

    • Major: Decades
    • Minor: Years

    Example usage:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setFormattingDecade(
                { year: 'numeric' },
                { year: 'numeric' }
            )
    )
    

    The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.

    For more detailed example usage, refer to DateTimeFormatter.

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setFormattingHour

  • Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:

    • Great: Days
    • Major: Hours
    • Minor: Minutes

    Example usage:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setFormattingHour(
                { year: 'numeric', month: 'long', day: '2-digit' },
                { hour: '2-digit', minute: '2-digit' },
                { hour: '2-digit', minute: '2-digit' }
            )
    )
    

    The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.

    For more detailed example usage, refer to DateTimeFormatter.

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setFormattingMilliSecond

  • Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:

    • Great: Seconds
    • Major: Every tenth MilliSecond

    Example usage:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setFormattingMilliSecond(
                { year: 'numeric', month: 'long', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' },
                ( value ) => new Date( value ).getUTCMilliseconds()
            )
    )
    

    The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.

    For more detailed example usage, refer to DateTimeFormatter.

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setFormattingMinute

  • Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:

    • Great: Hours
    • Major: Minutes
    • Minor: Seconds

    Example usage:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setFormattingMinute(
                { year: 'numeric', month: 'long', day: '2-digit' },
                { hour: '2-digit', minute: '2-digit' },
                { hour: '2-digit', minute: '2-digit', second: '2-digit' }
            )
    )
    

    The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.

    For more detailed example usage, refer to DateTimeFormatter.

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setFormattingMonth

  • Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:

    • Great: Years
    • Major: Months
    • Minor: Weeks

    Example usage:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setFormattingMonth(
                { year: 'numeric' },
                { month: 'long' },
                { day: '2-digit' }
            )
    )
    

    The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.

    For more detailed example usage, refer to DateTimeFormatter.

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setFormattingSecond

  • Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:

    • Great: Minutes
    • Major: Seconds

    Example usage:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setFormattingSecond(
                { year: 'numeric', month: 'long', day: '2-digit', hour: '2-digit', minute: '2-digit' },
                { hour: '2-digit', minute: '2-digit', second: '2-digit' }
            )
    )
    

    The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.

    For more detailed example usage, refer to DateTimeFormatter.

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setFormattingWeek

  • Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:

    • Great: Months
    • Major: Weeks
    • Minor: Days

    Example usage:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setFormattingWeek(
                { year: 'numeric', month: 'long' },
                { day: '2-digit' },
                { day: '2-digit' }
            )
    )
    

    The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.

    For more detailed example usage, refer to DateTimeFormatter.

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setFormattingYear

  • Construct a new DateTimeTickStrategy object based on this one, but with modified formatting options for DateTime ranges where ticks are positioned as follows:

    • Major: Years
    • Minor: Months

    Example usage:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setFormattingYear(
                { year: 'numeric' },
                { month: 'short' }
            )
    )
    

    The used formatting options are dynamically chosen depending on the range of Axis, so depending on the application this formatting customization method might not have a visible effect.

    For more detailed example usage, refer to DateTimeFormatter.

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setGreatTickStyle

  • Construct a new DateTimeTickStrategy object based on this one, but with modified great tick style.

    Great ticks display the largest Date/Time information for the active time range. There is always exactly one great tick in view.

    Example usage:

    Disable great ticks:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setGreatTickStyle( emptyTick )
    )
    

    Set font of great ticks:

     Axis.setTickStrategy(
         AxisTickStrategies.DateTime,
         ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
             .setGreatTickStyle(( tickStyle: VisibleTicks ) => tickStyle
                 .setLabelFont(( font ) => font
                     .setWeight( 'bold' )
                 )
             )
     )
    

    Parameters

    • value: TickStyle | ImmutableMutator<TickStyle>

      Either a TickStyle object or a function, which creates a new one based on the existing style.

    Returns this

    New DateTimeTickStrategy object.

setIn

  • setIn(keyPath: Iterable<any>, value: any): this
  • Parameters

    • keyPath: Iterable<any>
    • value: any

    Returns this

setLocale

  • setLocale(locale: string | undefined): this
  • Construct a new DateTimeTickStrategy object based on this one, but with modified locale.

    The locale specifies a geographical, political or cultural region, affecting all formatting of Tick labels.

    All valid values can be found from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat

    Example usage:

    Use locale of browser:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setLocale( undefined )
    )
    

    Use specific locale:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setLocale('en-US')
    )
    

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setMajorTickStyle

  • Construct a new DateTimeTickStrategy object based on this one, but with modified major tick style.

    Major ticks display the next smaller Date/Time information after Great ticks. Often times, they represent the most important information.

    Example usage:

    Set font of major ticks:

     Axis.setTickStrategy(
         AxisTickStrategies.DateTime,
         ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
             .setMajorTickStyle(( tickStyle ) => tickStyle
                 .setLabelFont(( font ) => font
                     .setWeight( 'bold' )
                 )
             )
     )
    

    Parameters

    Returns this

    New DateTimeTickStrategy object.

setMinorTickStyle

  • Construct a new DateTimeTickStrategy object based on this one, but with modified minor tick style.

    Minor ticks display the next smaller Date/Time information after Major ticks.

    Example usage:

    Disable minor ticks:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setMinorTickStyle( emptyTick )
    )
    

    Set font of minor ticks:

    Axis.setTickStrategy(
        AxisTickStrategies.DateTime,
        ( tickStrategy: DateTimeTickStrategy ) => tickStrategy
            .setMinorTickStyle(( tickStyle ) => tickStyle
                .setLabelFont(( font ) => font
                    .setWeight( 'bold' )
                )
            )
    )
    

    Parameters

    • value: TickStyle | ImmutableMutator<VisibleTicks>

      Either a TickStyle object or a function, which creates a new one based on the existing style. Passing a function only works if the existing style is not emptyTick.

    Returns this

    New DateTimeTickStrategy object.

toJS

  • toJS(): object
  • Deeply converts this Record to equivalent native JavaScript Object.

    Note: This method may not be overridden. Objects with custom serialization to plain JS may override toJSON() instead.

    Returns object

toJSON

  • toJSON(): TProps
  • Shallowly converts this Record to equivalent native JavaScript Object.

    Returns TProps

toObject

  • toObject(): TProps
  • Shallowly converts this Record to equivalent JavaScript Object.

    Returns TProps

toSeq

  • toSeq(): Keyed<keyof TProps, TProps[keyof TProps]>
  • Returns Keyed<keyof TProps, TProps[keyof TProps]>

update

  • update(key: K, updater: function): this
  • Type parameters

    • K: keyof TProps

    Parameters

    • key: K
    • updater: function
        • Parameters

          • value: TProps[K]

          Returns TProps[K]

    Returns this

updateIn

  • updateIn(keyPath: Iterable<any>, updater: function): this
  • Parameters

    • keyPath: Iterable<any>
    • updater: function
        • Parameters

          • value: any

          Returns any

    Returns this

wasAltered

  • wasAltered(): boolean
  • see

    Map#wasAltered

    Returns boolean

withMutations

  • withMutations(mutator: function): this
  • Note: Not all methods can be used on a mutable collection or within withMutations! Only set may be used mutatively.

    see

    Map#withMutations

    Parameters

    • mutator: function
        • Parameters

          • mutable: this

          Returns any

    Returns this

Static Factory

  • Factory(values?: Partial<TProps> | Iterable<[string, any]>): Record<TProps> & Readonly<TProps>
  • Type parameters

    • TProps: Object

    Parameters

    • values: Partial<TProps> | Iterable<[string, any]>

    Returns Record<TProps> & Readonly<TProps>

Static Record

  • Record(defaultValues: TProps, name?: undefined | string): Factory<TProps>
  • Unlike other types in Immutable.js, the Record() function creates a new Record Factory, which is a function that creates Record instances.

    See above for examples of using Record().

    Note: Record is a factory function and not a class, and does not use the new keyword during construction.

    Type parameters

    • TProps

    Parameters

    • defaultValues: TProps
    • name: undefined | string

    Returns Factory<TProps>

Static getDescriptiveName

  • getDescriptiveName(record: Record<any>): string
  • Records allow passing a second parameter to supply a descriptive name that appears when converting a Record to a string or in any error messages. A descriptive name for any record can be accessed by using this method. If one was not provided, the string "Record" is returned.

    const { Record } = require('immutable')
    const Person = Record({
      name: null
    }, 'Person')
    
    var me = Person({ name: 'My Name' })
    me.toString() // "Person { "name": "My Name" }"
    Record.getDescriptiveName(me) // "Person"
    

    Parameters

    Returns string

Static isRecord

  • isRecord(maybeRecord: any): maybeRecord
  • True if maybeRecord is an instance of a Record.

    Parameters

    • maybeRecord: any

    Returns maybeRecord