Ej1 api migration in React Range navigator component

20 Jan 20236 minutes to read

This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.

RangeNavigator

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Allow snapping| Property: allowSnapping

<EJ.RangeNavigator
allowSnapping ={true}>
</EJ.RangeNavigator>|Property: allowSnapping

<RangeNavigatorComponent id='charts' allowSnapping={true}>
</RangeNavigatorComponent>|
|Animation duration| Not Applicable|Property: allowSnapping

<RangeNavigatorComponent id='charts' animationDuration='2000'>
</RangeNavigatorComponent>|
|Border for range navigator| Property: border

var border = { color:’blue’, width:2, opacity:0.5 };
<EJ.RangeNavigator
border ={border}>
</EJ.RangeNavigator>|Property: navigatorBorder

<RangeNavigatorComponent id='charts' navigatorBorder={ width: 4, color: 'green'}>
</RangeNavigatorComponent>|
|dataSource for range navigator| Property: dataSource

var series = { type: ‘line’, dataSource: data };
<EJ.RangeNavigator
series={series}>
</EJ.RangeNavigator>|Property: dataSource

<RangenavigatorSeriesDirective dataSource={data}>
</RangenavigatorSeriesDirective>|
|enabling deffered update for range navigator| Property: enableDeferedUpdate

<EJ.RangeNavigator
enableDeferedUpdate={true}>
</EJ.RangeNavigator>|Property: enableDeferredUpdate

<RangeNavigatorComponent id='charts' enableDeferredUpdate={false}>
</RangeNavigatorComponent>|
|multilevel level labels| Property: labelSettings.higherLevelLabels

var labelSettings= { higherLevel: { } };
<EJ.RangeNavigator
labelSettings = {labelSettings}>
</EJ.RangeNavigator>|Property: enableGrouping

<RangeNavigatorComponent id='charts' enableGrouping={false}>
</RangeNavigatorComponent>|
|enabling scroll bar| Property: enableScrollBar

var labelSettings= { higherLevel: { } };
<EJ.RangeNavigator
enableScrollBar={true}>
</EJ.RangeNavigator>|Not Applicable|
|enabling auto resizing| Property: enableAutoResize

<EJ.RangeNavigator
enableAutoResize={true}>
</EJ.RangeNavigator>|Not Applicable|
|enabling isResponsive| Property: isResponsive

<EJ.RangeNavigator
isResponsive={true}>
</EJ.RangeNavigator>|Not Applicable|
|enabling RTL for range navigator| Property: enableRtl

<EJ.RangeNavigator
enableRtl={true}>
</EJ.RangeNavigator>|Property: enableRtl

<RangeNavigatorComponent id='charts' enableRtl={false}>
</RangeNavigatorComponent>|
|interval for range navigator| Property: valueAxisSettings.range.interval

var valueAxisSettings= {Interval: 5 };
<EJ.RangeNavigator
valueAxisSettings={valueAxisSettings}>
</EJ.RangeNavigator>|Property: interval

<RangeNavigatorComponent id='charts' interval={1}>
</RangeNavigatorComponent>|
|intervaltype for range navigator| Property: valueAxisSettings.range.intervalType

var valueAxisSettings= {intervalType: ‘Years’};
<EJ.RangeNavigator
valueAxisSettings={valueAxisSettings}>
</EJ.RangeNavigator>|Property: intervalType

<RangeNavigatorComponent id='charts' intervalType='Months'>
</RangeNavigatorComponent>|
|labelformat for range navigator| Not applicable|Property: labelFormat

<RangeNavigatorComponent id='charts' labelFormat='yMd'>
</RangeNavigatorComponent>|
|label intersect action for range navigator| Not applicable|Property: labelIntersectAction

<RangeNavigatorComponent id='charts' labelIntersectAction='Hide'>
</RangeNavigatorComponent>|
|labelStyle range navigator| Property: valueAxisSettings.font

var valueAxisSettings= {font: { } };
<EJ.RangeNavigator
valueAxisSettings={valueAxisSettings}>
</EJ.RangeNavigator>|Property: labelStyle

<RangeNavigatorComponent id='charts' labelStyle='Hide'>
</RangeNavigatorComponent>|
|locale of range navigator| Property: locale

<EJ.RangeNavigator
locale='en-US'>
</EJ.RangeNavigator>|Property: locale

<RangeNavigatorComponent id='charts' locale='en-US'>
</RangeNavigatorComponent>|
|major grid lines of range navigator| Property: valueAxisSettings.majorGridLines

var valueAxisSettings= { majorGridLines: { width: 2, color: ‘red’ } };
<EJ.RangeNavigator
locale='en-US'>
</EJ.RangeNavigator>|Property: majorGridLines

<RangeNavigatorComponent id='charts' majorGridLines={ width: 2, color: 'red'}>
</RangeNavigatorComponent>|
|margin of range navigator|Not Applicable|Property: margin

<RangeNavigatorComponent id='charts' margin={ }>
</RangeNavigatorComponent>|
|maximum value of range navigator| Property: valueAxisSettings.range.max

var valueAxisSettings= { range: { max: 2 } };
<EJ.RangeNavigator
locale='en-US'>
</EJ.RangeNavigator>|Property: maximum

<RangeNavigatorComponent id='charts' maximum={34}>
</RangeNavigatorComponent>|
|minimum value of range navigator| Property: valueAxisSettings.range.min

var valueAxisSettings= { range: { min: 2 } };
<EJ.RangeNavigator
locale='en-US'>
</EJ.RangeNavigator>|Property: minimum

<RangeNavigatorComponent id='charts' minimum={4}>
</RangeNavigatorComponent>|
|query for data source of range navigator| Not Applicable|Property: query

<RangeNavigatorComponent id='charts' query=''>
</RangeNavigatorComponent>|
|Secondary label alignment of range navigator| Not Applicable|Property: secondaryLabelAlignment

<RangeNavigatorComponent id='charts' secondaryLabelAlignment='Far'>
</RangeNavigatorComponent>|
|Skeleton of range navigator axis| Not Applicable|Property: skeleton

<RangeNavigatorComponent id='charts' skeleton=''>
</RangeNavigatorComponent>|
|skeletontype of range navigator axis| Not Applicable|Property: skeletonType

<RangeNavigatorComponent id='charts' skeletonType=''>
</RangeNavigatorComponent>|
|Theme of range navigator| Property: theme

<EJ.RangeNavigator
theme=''>
</EJ.RangeNavigator>|Property: theme

<RangeNavigatorComponent id='charts' theme=''>
</RangeNavigatorComponent>|
|Default selector value range navigator| Property: selectedRangeSettings

var selectedRangeSettings= {start:’’, end:’’};
<EJ.RangeNavigator
selectedRangeSettings={selectedRangeSettings}>
</EJ.RangeNavigator>|Property: value

<RangeNavigatorComponent id='charts' value=[ 2, 10]>
</RangeNavigatorComponent>|
|Value type of range navigator| Property: valueType

<EJ.RangeNavigator
valueType='DateTime'>
</EJ.RangeNavigator>|Property: valueType

<RangeNavigatorComponent id='charts' valueType='Logarithmic'>
</RangeNavigatorComponent>|
|Width of range navigator| Property: size.width

<EJ.RangeNavigator
size={ width: '200'}>
</EJ.RangeNavigator>|Property: width

<RangeNavigatorComponent id='charts' width='400'>
</RangeNavigatorComponent>|
|Height of range navigator| Property: size.height

<EJ.RangeNavigator
size={ height: '200'}>
</EJ.RangeNavigator>|Property: height

<RangeNavigatorComponent id='charts' height='400'>
</RangeNavigatorComponent>|
|Series settings for range navigator| Property: seriesSettings

var seriesSettings= { };
<EJ.RangeNavigator
seriesSettings={seriesSettings}>
</EJ.RangeNavigator>|Not Applicable|
|Range settings for range navigator| Property: rangeSettings

var rangeSettings= { start: 3, end: 6 };
<EJ.RangeNavigator
rangeSettings={rangeSettings}>
</EJ.RangeNavigator>|Not Applicable|
|Scroll range settings for range navigator| Property: scrollRangeSettings

var scrollRangeSettings= { start: 3, end: 6 };
<EJ.RangeNavigator
scrollRangeSettings={scrollRangeSettings}>
</EJ.RangeNavigator>|Not Applicable|

Series

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|animation| Property: enableAnimation

<EJ.RangeNavigator
enableAnimation={true}>
</EJ.RangeNavigator>|Property: animation.enable

<RangeNavigatorComponent id='charts' animation={ enable: true}>
</RangeNavigatorComponent>|
|Border for range navigator series| Property: border

var series = [{ border: { color: ‘transparent’, width: 2 } }];
<EJ.RangeNavigator
series={series}>
</EJ.RangeNavigator>|Property: border

<RangenavigatorSeriesDirective
border={ color: 'pink', width: 2}>
</RangenavigatorSeriesDirective>|
|dataSource for range navigator| Property: series.dataSource

var series = [{ dataSource: [{}] }];
<EJ.RangeNavigator
series={series}>
</EJ.RangeNavigator>|Property: series.dataSource

<RangenavigatorSeriesDirective
dataSource={data}>
</RangenavigatorSeriesDirective>|
|query for data source of range navigator| Not Applicable|Property: query

<RangenavigatorSeriesDirective
dataSource={data} query=''>
</RangenavigatorSeriesDirective>|
|series type for range navigator| Property: series.type

var series = [{ type: ‘’ }];
<EJ.RangeNavigator
series={series}>
</EJ.RangeNavigator>|Property: series.type

<RangenavigatorSeriesDirective
type=''>
</RangenavigatorSeriesDirective>|
|series xName for range navigator| Property: series.xName

var series = [{ xName: ‘’ }];
<EJ.RangeNavigator
series={series}>
</EJ.RangeNavigator>|Property: series.xName

<RangenavigatorSeriesDirective
xName=''>
</RangenavigatorSeriesDirective>|
|series yName for range navigator| Property: series.yName

var series = [{ yName: ‘’ }];
<EJ.RangeNavigator
series={series}>
</EJ.RangeNavigator>|Property: series.yName

<RangenavigatorSeriesDirective
yName=''>
</RangenavigatorSeriesDirective>|
|series fill color for range navigator| Property: series.fill

var series = [{ fill: ‘’ }];
<EJ.RangeNavigator
series={series}>
</EJ.RangeNavigator>|Property: series.fill

<RangenavigatorSeriesDirective
fill=''>
</RangenavigatorSeriesDirective>|
|series width for range navigator| Property: series.width

var series = [{ width: ‘2’ }];
<EJ.RangeNavigator
series={series}>
</EJ.RangeNavigator>|Property: series.width

<RangenavigatorSeriesDirective
width=''>
</RangenavigatorSeriesDirective>|
|series dashArray for range navigator|Not Applicable|Property: series.dashArray

<RangenavigatorSeriesDirective
dashArray='10,5'>
</RangenavigatorSeriesDirective>|

StyleSettings

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Style settings of range navigator| Property: navigatorStyleSettings

var navigatorStyleSettings = { leftThumbTemplate: ‘left’ };
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Property: navigatorStyleSettings

<RangeNavigatorComponent id='charts'
navigatorStyleSettings={ unselectedRegionColor: 'transparent' }
</RangeNavigatorComponent>|
|Selected region color of range navigator| Property: selectedRegionColor

var navigatorStyleSettings = { selectedRegionColor: ‘red’ };
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Property: selectedRegionColor

<RangeNavigatorComponent id='charts'
navigatorStyleSettings={selectedRegionColor: 'red' }
</RangeNavigatorComponent>|
|UnSelected region color of range navigator| Property: unselectedRegionColor

var navigatorStyleSettings = { unselectedRegionColor: ‘red’ };
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Property: unselectedRegionColor

<RangeNavigatorComponent id='charts'
navigatorStyleSettings={unselectedRegionColor: 'red' }
</RangeNavigatorComponent>|
|Thumb color of range navigator| Property: thumbColor

var navigatorStyleSettings = { thumbColor: ‘red’ };
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Property: thumbSettings

<RangeNavigatorComponent id='charts'
navigatorStyleSettings={thumbSettings: 'red' }
</RangeNavigatorComponent>|
|Selected region opacity of range navigator| Property: selectedRegionOpacity

var navigatorStyleSettings = { selectedRegionOpacity: 0.4 };
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Not Applicable|
|Unselected region opacity of range navigator| Property: UnselectedRegionOpacity

var navigatorStyleSettings = { UnselectedRegionOpacity: 0.4 };
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Not Applicable|
|Background for thumb| Property: background

var navigatorStyleSettings = { background: ‘red’ };
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Not Applicable|
|border for thumb| Property: border

var navigatorStyleSettings = { border: { color: ‘red’, width: 2} };
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Not Applicable|
|Highlightsettings for range navigator| Property: highlightSettings

var navigatorStyleSettings = { highlightSettings: { } };
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Not Applicable|
|Selected style settings for range navigator| Property: selectionSettings

var navigatorStyleSettings = { selectionSettings: { } };
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Not Applicable|
|Left thumb template for range navigator| Property: leftThumbTemplate

var navigatorStyleSettings = { leftThumbTemplate: ‘’};
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Not Applicable|
|Right thumb template for range navigator| Property: rightThumbTemplate

var navigatorStyleSettings = { rightThumbTemplate: ‘’};
<EJ.RangeNavigator
navigatorStyleSettings={navigatorStyleSettings}>
</EJ.RangeNavigator>|Not Applicable|

Tooltip

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|tooltip| Property: visible

var tooltipSettings = { visible: true};
<EJ.RangeNavigator
tooltipSettings = {tooltipSettings}>
</EJ.RangeNavigator>|Property: enable

<RangeNavigatorComponent id='charts'
tooltip= { enable: true }
</RangeNavigatorComponent>|
|background color of tooltip| Property: backgroundColor

var tooltipSettings = { backgroundColor: ‘red’};
<EJ.RangeNavigator
tooltipSettings = {tooltipSettings}>
</EJ.RangeNavigator>|Property: fill

<RangeNavigatorComponent id='charts'
tooltip= { fill: 'pink' }
</RangeNavigatorComponent>|
|Font style of tooltip| Property: font

var tooltipSettings = { font: ‘red’};
<EJ.RangeNavigator
tooltipSettings = {tooltipSettings}>
</EJ.RangeNavigator>|Property: textStyle

<RangeNavigatorComponent id='charts'
tooltip= { textStyle: 'pink' }
</RangeNavigatorComponent>|
|Label format of tooltip| Property: labelFormat

var tooltipSettings = {labelFormat: ‘yMd’};
<EJ.RangeNavigator
tooltipSettings = {tooltipSettings}>
</EJ.RangeNavigator>|Property: format

<RangeNavigatorComponent id='charts'
tooltip= { format: 'yMd' }
</RangeNavigatorComponent>|
|Display mode of tooltip| Property: tooltipDisplayMode

var tooltipSettings = { tooltipDisplayMode: ‘always’};
<EJ.RangeNavigator
tooltipSettings = {tooltipSettings}>
</EJ.RangeNavigator>|Property: displayMode

<RangeNavigatorComponent id='charts'
tooltip= {displayMode: 'Always'}
</RangeNavigatorComponent>|
|Template of tooltip| Not Applicable|Property: template

<RangeNavigatorComponent id='charts'
tooltip= {template: '<div>Chart</div>'}
</RangeNavigatorComponent>|
|Border of tooltip|Not Applicable|Property: border

<RangeNavigatorComponent id='charts'
tooltip= {border: { color: 'red', width: 2} }
</RangeNavigatorComponent>|
|Border of tooltip|Not Applicable|Property: opacity

<RangeNavigatorComponent id='charts'
tooltip= {opacity: 0.5 }
</RangeNavigatorComponent>|

Period Selector

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|period Selector position|Not Applicable|Property: periodSelectorSettings.position

<RangeNavigatorComponent id='charts'
periodSelectorSettings= { position:'Top'}
</RangeNavigatorComponent>|

Methods

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Print|Not Applicable|Property: print()

public clickHandler(){
this.range.print();}
<RangeNavigatorComponent id='charts'
ref={g => this.range = g}
</RangeNavigatorComponent>|
|Export|Not Applicable|Property: export()

public clickHandler(){
this.range.export(‘PNG’,’export’);}
<RangeNavigatorComponent id='charts'
ref={g => this.range = g}
</RangeNavigatorComponent>|

Events

| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Fires before loading the RangeNavigator.| Property: load

<EJ.RangeNavigator
load = {Load}>
</EJ.RangeNavigator>
function Load(){ };|Property: load

<RangeNavigatorComponent id='charts'
load={this.load.bind(this)}
</RangeNavigatorComponent>
public load(): void { };|
|Fires before loading the RangeNavigator.| Property: loaded

<EJ.RangeNavigator
loaded = {loaded}>
</EJ.RangeNavigator>
function Loaded(){ };|Property: loaded

<RangeNavigatorComponent id='charts'
loaded={this.loaded.bind(this)}
</RangeNavigatorComponent>
public loaded(): void { };|
|Fires when the value changes in range navigator| Property: rangeChanged

<EJ.RangeNavigator
rangeChanged = {rangeChanged}>
</EJ.RangeNavigator>
function rangeChanged(){ };|Property: changed

<RangeNavigatorComponent id='charts'
changed={this.changed.bind(this)}
</RangeNavigatorComponent>
public changed(): void { };|
|Fires after the RangeNavigator|Not Applicable|Property: resized

<RangeNavigatorComponent id='charts'
resized={this.resized.bind(this)}
</RangeNavigatorComponent>
public resized(): void { };|
|Fires before tooltip in RangeNavigator|Not Applicable|Property: tooltipRender

<RangeNavigatorComponent id='charts'
tooltipRender={this.tooltipRender.bind(this)}
</RangeNavigatorComponent>
public tooltipRender(): void { };|
|Fires before period render in the RangeNavigator|Not Applicable|Property: selectorRender

<RangeNavigatorComponent id='charts'
selectorRender={this.selectorRender.bind(this)}
</RangeNavigatorComponent>
public selectorRender(): void { };|
|Fires when scrollStart the RangeNavigator|Property: scrollStart

<EJ.RangeNavigator
scrollStart = {scrollStart}>
</EJ.RangeNavigator>
function scrollStart(){ };|Not Applicable|
|Fires when scrollEnd the RangeNavigator|Property: scrollEnd

<EJ.RangeNavigator
scrollEnd = {scrollEnd}>
</EJ.RangeNavigator>
function scrollEnd(){ };|Not Applicable|
|Fires when selected range Start the RangeNavigator|Property: selectedRangeStart

<EJ.RangeNavigator
selectedRangeStart = {selectedRangeStart}>
</EJ.RangeNavigator>
function selectedRangeStart(){ };|Not Applicable|
|Fires when selected range ends the RangeNavigator|Property: selectedRangeEnd

<EJ.RangeNavigator
selectedRangeEnd = {selectedRangeEnd}>
</EJ.RangeNavigator>
function selectedRangeEnd(){ };|Not Applicable|
|Fires when scroll range changed in the RangeNavigator|Property: scrollChanged

<EJ.RangeNavigator
scrollChanged = {scrollChanged}>
</EJ.RangeNavigator>
function scrollChanged(){ };|Not Applicable|
|Fires when click in the RangeNavigator|Property: click

<EJ.RangeNavigator
click = {click}>
</EJ.RangeNavigator>
function click(){ };|Not Applicable|
|Fires when right click in the RangeNavigator|Property: rightClick

<EJ.RangeNavigator
rightClick = {rightClick}>
</EJ.RangeNavigator>
function rightClick(){ };|Not Applicable|
|Fires when double click in the RangeNavigator|Property: doubleClick

<EJ.RangeNavigator
doubleClick = {doubleClick}>
</EJ.RangeNavigator>
function doubleClick(){ };|Not Applicable|