px-vis-timeseries is one of the most used web components in the Predix toolkit set. This must-know component is essential, as it lets chart time-based data and events! Unfortunately, it's not so easy to configure it to show the correct timezone. Let's see how to set it right, then.
Disclaimer: in this post, we are discussing px-vis-timeseries, version 4.0.0. This post may not apply to future versions of the components discussed here.
Gotcha #1: the default x-axis timezone is UTC
The default timezone of the X axis is UTC. While it may be the norm in engineering disciplines or technical users, it may confuse normal users: they are used to the timezone they live in, and UTC may confuse them (if they're even aware of it!)
To see the time in the browser's timezone, you need to set x-axis-type="timeLocal". By default, it's set to x-axis-type="time".
Gotcha #2: tooltip and register timezones can be configured separately!
The tooltip and the register are independent components, and px-vis-timeseries does not configure them automatically, nor offers a single configuration point.
While this design choice makes the parent implementation simpler and allows for more flexibility, the users have to remember to configure each sub-component.
The configuration can be provided by setting tooltip-config and register-config, to set the tooltip and the register.
<px-vis-timeseries tooltip-config="[[timezoneConfig]]" register-config="[[timezoneConfig]]" chart-data="[[chartData]]" height="450" show-tooltip hide-register series-config="[[seriesConfig]]"> </px-vis-timeseries>
To set the timezone, you can either use a timezone string (such as "Europe/Rome") or use the browser-provided Intl global object to retrieve the current timezone.
Proof of Concept