Availability Chart with real data

[MaximilianKarl]

I tryed to fill the Availability Chart with real data from TSI API.

Version: tsiclient@1.2.56

1. I had to set hasWarm in the function tsiClient.server.getAvailability() to false in order to get a result. With hasWarm = true I always got a result object {availability: null}. I dont know if this is a bug or not.

This worked:

tsiClient.server.getAvailability(accessToken, tsi.url, "?api-version=2016-12-12", false).then(function(result){
    console.log(result);
});

2. I wanted to fill the availabilityCount Object with the result.distribution from the tsiClient.server.getAvailability() in order to see if there are any events in this period of time. I got a different output as expected.

Excpected:

Got:

My Code:

var availability = new tsiClient.ux.AvailabilityChart(document.getElementById('availability'));
tsiClient.server.getAvailability(accessToken, tsi.url, "?api-version=2016-12-12", false).then(function(result){
            availability.render([{availabilityCount: {"": result.distribution}}], 
                                {theme: 'light', color: 'purple', brushMoveEndAction: brushMoveEndAction, offset: 'Local', isCompact: false}, 
                                {range: 
                                    {
                                        from: result.range.from, 
                                        to: new Date().toISOString()
                                    }, 
                                intervalSize: '1h'
                                }
                                );
        });

[darsney]

thanks for letting us know about this issue! we are checking it out right now, should have a fix out real soon, will keep you posted

[darsney]

Thanks for highlighting this issue! We have gone ahead and made hasWarm optional with the default value of false, we will roll an update to npm later today.

Additionally, the availability chart doesnt take availability results, it takes chart data shape, so you have to transform the results before you render. Try doing this...

tsiClient.server.getAvailability(token, tsi.url)
    .then(function(result){
        var availability = new tsiClient.ux.AvailabilityChart(document.getElementById('availability'));
        availability.render(tsiClient.ux.transformAvailabilityForVisualization(result, 500), 
                {theme: 'light', color: 'purple', legend: 'hidden'}, 
                result);
    })
})

I'll go ahead and extend the explore events example to cover using the availability chart since this is largely undocumented.

Please let us know if you have any other issues, thanks!

[darsney]

I've updated the explore events example to show how to use the availability chart, as well as illustrated two way binding when zooming from the line chart and adjusting the availability chart. It's a pretty complex example, but it's really powerful, and still only 175 lines of code (with 50 just to choose bucket size!)

Check it out here! https://tsiclientsample.azurewebsites.net/withplatform/exploreevents.html

[MaximilianKarl]

Thank you for updating the documentation and helping me out.