Range selector feature questions
I have the following questions on the Angular Range Selector component. Someone can help please???
- How difficult is to set some styling? It looks like the component uses inner SVG to present the data, so it feels to me like we cannot expand with additional custom CSS styles.
- Clicking over the label does not give you the whole period, only the visible area. – Xamarin component behaves equally, so some chances here to enhance this behavior?
- In some opportunities it looks like the component does not control very well the positioning of the labels. Here I share the following screenshot…
- Futures dates are not actually supported?
- The fitting of the component width is quite slow in comparison with our chart document that we have above of the range selector.
- Possibility to group periods with some custom range of dates? For example, something that starts always at a concrete hour and finish later after a period and it is always repeated, so we would like to have that period available to select in the component.
- It looks like the component always uses Sunday as the first day of the week. If we change the culture, that is going to be updated?
Thank you very much in advance.
Looking forward to hearing from you.
SIGN IN To post a reply.
15 Replies
Hi Israel,
Please find the response for range selector related queries.
Query #1: How difficult is to set some styling? It looks like the component uses inner SVG to present the data, so it feels to me like we cannot expand with additional custom CSS styles.
Based on your requirement we would like to let you know that the range selector styles can be customized using navigatorStyleSettings and tooltip property in the range navigator as listed below
navigatorStyleSettings – to customize the navigator selected and unselected region color.
- selectedRegionColor – to customize the color of the selected range.
- unselectedRegionColor – to customize the color of the unselected range.
- Thumb – to customize the thumb color , border, type, width and height.
Tooltip – to customize the tooltip fill, border, format and visibility.
We have also prepared a sample with the above customization for your reference. Please find the sample and UG link below.
Code Snippet:
|
// add your additional code here
<ejs-rangenavigator id='defaultRn' [valueType]='valueType' [value]='value' [width]='width' [theme]='theme' [tooltip]='tooltip'
[navigatorStyleSettings]='navigatorStyleSettings'
[labelFormat]='labelFormat' (load)='load($event)'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='dataSource' type='Area' xName='x' yName='y' width=2 [fill]='fill' [border]='border'>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>
// add your additional code here
public tooltip: Object = { enable: true, format: 'MM/dd/yyyy' , displayMode: 'Always', fill: 'black'};
public navigatorStyleSettings: Object = {
unselectedRegionColor: 'rgb(255,255,0, 0.3)',
selectedRegionColor: 'rgb(255,110,74,0.3)',
thumb: {
type: 'Rectangle',
fill: 'lightblue',
height: '15',
width: '15'
},
};
// add your additional code here
|
Screenshot:
Please let us know the styles needed to be achieved which will be helpful for further analysis and provide you solution sooner.
Query #2: Clicking over the label does not give you the whole period, only the visible area. – Xamarin component behaves equally, so some chances here to enhance this behavior?
The click behavior of the labels is to display only the start and end value of the selected region. And this is the default behavior of the range selector.
Since we are not clear about your exact requirement kindly share more details such as screenshots or code snippets regarding the issue which will be helpful for further analysis and provide you solution sooner.
Query #3: In some opportunities it looks like the component does not control very well the positioning of the labels.
We have prepared a sample with MultiLevel labels and it is working fine. Unfortunately we are unable to reproduce the reported scenario in the latest version 19.1.54. We have also attached the sample used for testing and screenshot for your reference.
Screenshot:
If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.
- Try to reproduce the reported scenario in the provided sample. (or)
- Share the data source used in the project.
Query #4: Futures dates are not actually supported?
We have prepared a sample with future dates and it is working fine. Unfortunately we are unable to reproduce the reported scenario in the latest version 19.1.54. We have also attached the sample used for testing and screenshot for your reference.
Screenshot:
If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.
- Try to reproduce the reported scenario in the provided sample. (or)
- Share the data source used in the project.
Query #5: The fitting of the component width is quite slow in comparison with our chart document that we have above of the range selector.
Since we are not clear about your requirement. Can you please let us know whether you are mentioning about the rendering of range navigator component after the chart component.
Query #6: Possibility to group periods with some custom range of dates.
As of now it is not possible to provide custom range of dates for group periods. Since ranges are split equally for all the periods, it is not possible to achieve your requirement.
Query #7: It looks like the component always uses Sunday as the first day of the week. If we change the culture, that is going to be updated?
Based on your requirement we would like to let you know that the first day of the week always depends on the provided datasource and it does not always start from Sunday. We have also prepared a sample based on your requirement. In which the initial day is Friday. Please find the sample and screenshot below.
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
Hi Israel,
Thanks for your patience.
Please find the below response for your queries.
Query: 1
We have logged a feature request to change the background color changing. We will include in our next service pack release which is expected to be rolled out at middle of May 2021. You can track from below feedback link,
And meanwhile, you can use the below workaround solution to change the background color,
|
<style>
#defaultRn_ChartBorder {
fill: red;
}
</style>
|
Query 2:
The current behavior is the default one in our RangeNavigator controls. We kindly suggest you set the min value for X-axis as 1st May. If you click on the month of May then you will get the complete period of time. We have prepared a sample for your reference. Please find the screenshot and sample below.
Screenshot:
Query 3:
When the size is small and there is no sufficient space for the edge labels to place, so it is moved left side. As of now, there are no options to handle this scenario in RangeNavigator. We have logged a feature request for this and will be available in any of our upcoming releases. You can track from the below feedback link,
Query 5:
We are able to reproduce the reported scenario at our end. We will validate and update you the status within two business days (13th April 2021).
Query 7:
As of now, Sunday has been set as the start of the week in RangeNavigator. We have logged a feature request to configure the start day of the week and will be included in any of our upcoming releases. You can track from the below feedback link,
Kindly revert us, if you have any concerns.
Regards,
Baby.
Hi there!
Attachment: SyncFusionNavigator_f50ce32f.zip
I following attach in this reply the video of the component behaviour for Query #5.
Attachment: SyncFusionNavigator_f50ce32f.zip
SIGN IN To post a reply.
