Hi,

I am currently using the TSI Chart to plot some data, and set the range date to picked up the data for instance for 2 days. but every month end the data isn't showing.

The issue seems to be on the date time manipulation where the range is set between the last day of the month and the begin of the new month i.e. june 30 - 1 july.

Can you please help?

Thanks

I'm intercepting requests made by the server client to a TSI Environment so I can use the same environment in a multi-tenant way.

When the client makes a request to the server (i.e. to the 'environment'), it puts JSON in the body but doesn't set the "Content-Type" to application/json. This means intercepting and validating the JSON is hard, because in my case ASP .NET Core framework returns 415 unsupported media type.

Currently working around by reading the body, but this is not ideal.

Expected Result:

• Requests containing JSON should have the Content-Type = application/json

Actual Result

• Content-Type header is "text/plain;charset=UTF-8"

I did the example with tsiclient.js and everything worked fine.

My question now is: how can i authenticate with another js-library, in my case msal.js? Where do i get the token from?
(not sure if this is a msal.js or a tsiclient.js question)

Hi,

We are developing a dashboard which is fed events using EventHub. The dashboard is compromised of a table where the rows represent wells and each column represents different algorithms running on live data from these wells. Each cell is as such a representation of the given algorithm state on that particular well.

We are looking for a way to add a "sparkline" which displays the historical (a few hours) state of that cell, and I have looked at using TimeSeries Insight for this. I have played around a little bit in the TSI Explorer and so far it looks feasible.

Is there a way to use this client to render only the linechart like the following (no legend, no axis labels)?

I have managed to replicate the query which I created in TSI Explorer on our backend and can get the data, but that is as far as I have managed to get. If I return the data back to our frontend application then it is in the wrong format for the chart component. I've tried to figure out how to use the tsiClient.ux.transformAggregatesForVisualization() function, but I'm a bit lost on the part with the options for that function.

Any guidance on what options to use to get the above linechart? The data is categorical, btw.

Example: pages/examples/noauth/multipleseriestypes.html

When trying to import sdkJs and sdkCss from url instead local file (commented line:

tsiclient.js:formatted:29865 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at tsiclient.js:formatted:29865
    at Array.forEach (<anonymous>)
    at e.t.convertAggregateToArray (tsiclient.js:formatted:29862)
    at tsiclient.js:formatted:29700
    at Array.forEach (<anonymous>)
    at tsiclient.js:formatted:29698
    at Array.map (<anonymous>)
    at e.t.mergeDataToDisplayStateAndTimeArrays (tsiclient.js:formatted:29653)
    at e.mergeDataToDisplayStateAndTimeArrays (tsiclient.js:formatted:30418)
    at e.render (tsiclient.js:formatted:31480)
    at window.onload ((index):101)

We are calling .render on our line chart when new data is received, but this is causing the ellipsis menu to jitter if you have it opened.

I have created a reproduction here: https://jsfiddle.net/74Ljrsbn/

Howdy! Seeing as you folks have a ton of TypeScript in this repo, have you thought about shipping the types? It'd make life a lot easier!

My plan was to use this library in production but as it seem there are no updates / bugfixes coming anymore since months. What is the state of this library ? Is there already a successor somewhere ? Need to know if this gonna stay maintained.

Hi,

When i try tu use https://github.com/MicrosoftDocs/azure-docs/blob/master/articles/time-series-insights/tutorial-create-tsi-sample-spa.md

the last exemple doesn't work

 // Example 18 Events Table
        var startDate4 = new Date('2017-04-15T13:00:00Z');
        var endDate7 = new Date(startDate4.valueOf() + 1000*60*60*5);
        authContext.getTsiToken().then(function(token){
            tsiClient.server.getEvents(token, '10000000-0000-0000-0000-100000000108.env.timeseries.azure.com', 
                                        {predicateString: "Factory = 'Factory1'"},  {}, startDate4.valueOf(), 
                                       endDate7.valueOf()).then(function (events) {
                var transformedEvents = tsiClient.ux.transformTsxToEventsArray (events, {});
                var eventsTable = tsiClient.ux.EventsTable(document.getElementById('chart18'));
                eventsTable.render(transformedEvents, {theme: 'light'}, true);
            });
        });

tsiClient.server.getEvents is not a function i have the same issue with getTsqResults any idea ?

regards

I'm evaluating Azure TimeSeries right now as a solution for our tenant based IoT product. It's great to have a JS library, where I can create our dashboards on the fly in our SPA. I have checked the package.json and found a lot of outdated dependencies:

npx npm-upgrade:

New versions of active modules available:

  array-includes              ^3.0.3   →    ^3.1.1
  awesomplete                 ^1.1.2   →    ^1.1.5
  @types/awesomplete          ^1.1.8   →   ^1.1.10
  d3                         ^4.13.0   →   ^5.15.0
  @types/d3                  ^4.13.0   →    ^5.7.2
  d3-interpolate-path         ^1.1.1   →    ^2.1.1
  moment-timezone            ^0.5.21   →   ^0.5.27
  npm                         ^6.4.0   →   ^6.13.7
  promise-polyfill            ^7.1.0   →    ^8.1.3
  css-loader                ^0.28.11   →    ^3.4.2
  file-loader                ^1.1.11   →    ^5.0.2
  mini-css-extract-plugin     ^0.4.4   →    ^0.9.0
  node-sass                   ^4.9.3   →   ^4.13.1
  sass-loader                 ^6.0.7   →    ^8.0.2
  style-loader               ^0.19.1   →    ^1.1.3
  ts-loader                   ^5.2.2   →    ^6.2.1
  typescript                  ^3.7.2   →    ^3.7.5
  url-loader                  ^1.1.0   →    ^3.0.0
  webpack                    ^4.20.2   →   ^4.41.5
  webpack-cli                 ^3.1.2   →   ^3.3.10
  webpack-dev-server          ^3.1.9   →   ^3.10.3`

Also there are some vulnerabilities (run npm audit to see more details):

found 37 vulnerabilities (12 low, 2 moderate, 23 high) in 16153 scanned packages

Are there any plans to update this project?

We're evaluating whether to use tsiclient as a basis for a cross-platform charting component. The idea would be cover web and Android/iOS/UWP mobile platforms (via "web view" obviously).

My question is whether the charting components are built with certain browser version support in mind?

Hi,

I'm trying to figure out how to get a default start/end position for the brush than just one day.
You can change the brush by dragging or with the date picker, but I want it to have 30 days (for example) by default.

Any help appreciated!

why npm tsiclient version is 1.4.11 but here is 1.4.10

Steps to reproduction

• Set tooltip chart option to false e.g.

let chartOptions = {
      theme: 'light',
      tooltip: false, // Bug: for Pie Chart tooltip is always visible 
      arcWidthRatio: 0.45,
      legend: 'compact',
      grid: true
    };

• Render Pie Chart with the options as above.

Current result: Tooltip is visible
Expected result: Tooltip is not visible

It works for other charts (ScatterPlot)

Hi, the wiki has few links broken.

eg. https://docs.microsoft.com/azure/time-series-insights/time-series-insights-update-how-to-shape-events

Dear devs,

I'd love to use this handy library to access TSI events but I am struggling to make it work, so I'm looking forward for your input / support!
I'm trying to use only the ServerClient in a node + typescript backend, but ts-node already fails on the import statement:

Error

> ts-node bin/receive.ts
<project_path>/node_modules/tsiclient/ServerClient.js:1
import './tslib.es6-e303de9b.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (<project_path>/bin/receive.ts:3:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module.m._compile (/usr/lib/node_modules/ts-node/src/index.ts:1056:23)

Code

<project_path>/bin/receive.ts

import ServerClient from 'tsiclient/ServerClient'
const tsiClient = new ServerClient()
const tsi = await tsiClient.getTsqResults(token, tsiURI, [body])

Config

• node 14.16.0
• typescript 4.2.4
• tsiclient 1.4.12
• tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2019",
    "lib": ["es2019", "esnext.asynciterable", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "resolveJsonModule": true,
    "outDir": "dist",
    "typeRoots": [ "types",  "node_modules/@types"],
    "baseUrl": ".",
    "paths": {
      "@config": [ "src/config"],
      "@models": [ "src/models"],
      "@models/*": [ "src/models/*"],
      "@util/*": [ "src/util/*"]
    }, 
    "noImplicitReturns": true,
    "strict": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "skipLibCheck": true
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

I made a couple of changes to the tsconfig, to no avail, and I am at my wit's end.
Thanks in advance for any hints and pointers! :)

Is the TSIclient working with the preview version of TSI?

If it does, a little help would be most welcome.
I'm using MVC and making the calls on the server side, but I don't understand how I should make the call with aggregateExpression.toTsx() as body. And what would the result look like?
Thank you
Quentin

Hi, I have created a reproduction of this issue and taken some screenshots:

JSFiddle Link

Range set to 2h 47m, working correctly:

Range set to 2h 45m, chart doesn't render:

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

Version: [email protected]

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'
                                }
                                );
        });

Charting fails to respect the CreationTimeUtc parameter of Iot Hub Messages, and instead uses EnqueuedTimeUtc which is automatically assigned on upload.

This is a severe error because a device that records telemetry but temporarily can't communicate (let's say for 6 hours) will have all 6 hours worth of its telemetry charted as if all those data points happened in the first few seconds when communications was restored.

Using EnqueuedTimeUtc as the default if CreationTimeUtc is not present makes perfect sense, but ignoring CreationTimeUtc when it is present breaks the semantics of telemetry.

(I'm not certain that this error takes place in this component, but the same error shows up in both the Remote Monitoring solution webui and in Time Series Insights itself, and this is the common component, so I'm guessing it's in here.)

The time always comes in UTC format, no matter what value we send.

Upon graph generation the following console error is present:
tsiclient.js:17 Error: attribute height: A negative value is not valid. ("-11")

I'm currently using TSI within Azure and want to use it as the backing store for my customers' device data. However, due to the security model of TSI, I can't expose it directly to my customers, so I'd like to expose TSI payloads through my own API. It appears that this should be possible based on the way the tsiclient SDK is structured. Can we get some examples of how to load a serialized JSON QueryResultPage object into a Line Chart (or other visuals) without using tsiClient.server ?

I see that every example for this library is using the adal.js library which is marked as deprecated. I want to evaluate if tsiclient.js is a good option to connect with our azure b2c time series db. Maybe it is the only option anyway.

Now for a start, a proper basic example with the recommended libraries like msal.js would help alot. Another Problem is the authentification documentation seems to focus only on C# and is about using the "client secret" which i do not find in the msal.js documentation (again no examples how to use it). The same Problem: The C# Documentation for msal.net is used for the main manual for msal.js. It is a mess :)

If you put the head.js script tag in the head of the page, for many it will throw an error on page load as it tries to access the body of the page before it is loaded. Consider wait until for the window.onload event before accessing the body of the page.

As per best practices: Don't use deep array nesting. Time Series Insights supports up to two levels of nested arrays that contain objects. Time Series Insights flattens arrays in the messages into multiple events with property value pairs.
For TSI in preview.
A. Does the preview version support deep array nesting?
B. If Yes, Does the preview version support aggregate query?

None of the integrated charts on the example site actually work. I am using edge to view them. The attached picture shows what I see when I go to https://tsiclientsample.azurewebsites.net/withplatform/PAYG.html

Although i configured the aggregateExpression to have one, there is no context menu shown on a heatmap.
LineChart works, but heatmap doesn't

let contextMenu = [{
   name: 'myAction',
   action: (aggregateExpression: any, splitBy: any, timeStamp: any) => {
                console.log('hello');
   }
}];

let ae = [];
ae.push(
   new TsiClient.ux.AggregateExpression(
      { predicateString: `myPredicate = \'${this.myPredicate}\'` },
      { property: myProperty, type: 'Double' },
      ['avg'],
      { from: this.myStartDate, to: this.myEndDate, bucketSize: '1s'},
       null,
      'red',
       'MyAlias',
       contextMenu));

// do the API stuff...

let heatMap = new TsiClient.ux.Heatmap(document.getElementById('heatmap'));
   heatMap.render(
   transformedResult,
   { theme: 'light' },
   ae);

Is this a bug?

The ellipsis option "Display Grid" implies to users that grid lines will be overlay on top of the graph.

However that is not what happens.

What actually happens is a table is displayed with the associated data.

There are two options:

• Change the name of the option to "Display Table" (my suggestion)
• Actually display a grid and not a table

Not able to access curves with keyboard that are present inside the graph.

This type of points can be accessed with mouse, but can't be done using tab key, or any other key of keyboard

I´m using TSI UX to show some data in graphs from Time Series Insight Explorer but there is a graph that measures energy consumption, and it is more intuitive if the data is shown in a bar from each specific period of time( days , months , maybe years). Like the example below

As I saw, Barcharts only have a slider to step through the timestamps of the supplied time series and it can´t show every data at once, or am I wrong?

We need to set the Y axis scales manually rather than use the auto-scale, which magnifies small variations all out of proportion. I can find nothing in the scant docs about this.

We have a trade show this Tuesday, Feb 5 and would greatly appreciate an answer on Monday Feb 4 if at all possible.

I cannot log in to any of the samples that include authentication. I have been able to do so in the past. I have tried several different accounts of different types and even browsers and machines. Am I doing something daft or has it been broken during recent updates?

When there is no data/timestamps in the tsqResults passed to transformTsqResultsForVisualization method, LineChart component sets the from and to dates in search span to unix epoch:

Hi Team, I'm working on UI application that pulls data from Azure TSI and build charts using TSI JS SDK. I'm trying to us the TSI JS SDK however it needs the client ID generated by registering the application to azure AD account. IS it possible to access TSI data and build chart without registering the application on Azure AD and access the data by some other way?

Thanks,
Bhupal

Scenario

1. In time 14:00 I will do render of DateTimeButtonRange where I will set min 13:00, max 14:00, selected from, and selected to, and callback
2. User will 10min do nothing on page - no refresh, no render of DateTimeButtonRange
3. After 10min user will open picker
   
   and will click on last button 15min (it does not matter which)
4. Datetime is counted from max 14:00 (which was set in render before 10min) - 15min = 13:45, but current time is 14:10 - 15min = 13:55
5. I need to set max to current datetime - it is needed to do it when user open picker in point 3.

Is there any possibility to show units (meters, secundes, wats, and so on ) in graph Y-axis?
I would like to show information, that first graph is forexample in A-unit, and the second in B-unit.

Hi Team,

I am looking for a way to show live data and data within a specific date range to Power BI Report.

What we tried -

1. Copied the custom query from TSI
2. Connected to Power BI
3. Added query parameters in Power BI Desktop for start and end date.

let
//create variables for start and end times
start = DateTime.ToText(StartDateTime),
end = DateTime.ToText(EndDateTime),

 

queryPart1 = "{""storeType"":""WarmStore"",""isSearchSpanRelative"":true,""clientDataType"":""RDX_20200713_Q"",""environmentFqdn"":""someid.env.timeseries.azure.com"",
        ""queries"":[
            {""getEvents"":
            {""searchSpan"":
            {""from"":""",
queryPart2 = start,
queryPart3 = """,""to"":""",
queryPart4 = end,
queryPart5 = """},",
queryPart6 = """timeSeriesId"":[""edgedevicename"",""sensorname""],""take"":250000}}]}",
//combine individual sections of query into one
    finalQuery = Text.Combine({queryPart1,queryPart2,queryPart3,queryPart4,queryPart5,queryPart6}),
    Source = AzureTimeSeriesInsights.Contents([JsonPayload = finalQuery])
in
    Source

4. Got the live data on Power BI Desktop after refreshing the queries.
5. We're also able to get the data for specific date ranges using Edit parameters

Problem

1. It only works when we're using Power BI Desktop, We want to change the query parameters from the published Report.
2. We've followed the Power BI Video but was not able to see the option for binding the parameter to any column as shown in the image below -
   

Question -

Does Power BI support m query parameters for TSI Connector? if not, are there any recommendations from Microsoft to solve the problem mentioned above?

Thanks.

Is there a way we can reduce the size on disk of tsiclient?

Indicators that the size is large include:

• tsiclient on npm is ~9MB
• tsiclient is 30% of my app's bundle

Options we could explore are:

• optimization in the webpack build to reduce size of the /dist/ dir
• removing some dependencies

Got some question which are mostly about formatting values and i could not any property to set it up:

• is it possible to limit the decimal places of the recieved values ?

• can i change the decimal / thousand seperator for internationalization reasons ?
  

• can i remove the "(UTC)" tag from the availabilityChart ?
  

In the Standalone Date Time Range Picker example each button is given an aria-label which prepends the text of "select quick time of".

Doing this means that someone using a screen reader must listen to "select quick time of" before they hear the unique content of the button.

The user experience of these buttons could be improved by instead ensuring that they are contained within a role=group and that group is given the accessible name of "Select quick time".

For instance

<div class="tsi-quickTimesPanel" role=group aria-label="Select quick time">
  <button class="tsi-quickTime" aria-pressed="...">Last 15 mins</button>
  ...
</div>

Note that by front-loading the 'select quick time' text to the group container, there is no longer a need to have an aria-label on each button. Instead those buttons will simply use their child text content as their accessible name.

@darsney
I am using MSAL for authentication in my react project. After we login with my AAD id will get a token and stored in cookies,

Now for time series I have made called a function tsiClient.server.getAggregates(token,FQDN,array)
token -> token is passed from stored cookie with Bearer i am passing token value.
FQDN -> tsi environment set
array -> custom array

Error I am getting is Post call 401 Authorization error

For scatter plot, the chart shows a slider at bottom of the chart which one need to slide it to show data points at that certain minute (e.g. bucketSize: 1 minute, i had to slide the slider to show data point at each minute). Is it a temporary solution? Isn't there a way to show all data points without the slider? More specifically, the spMeasures X-Axis should be the time.

When would you release a Time Series Insights C#.NET SDK on .NET Standard 2.0? or is there any plans at all?

Hi ,
we are using TSI charts to show our azure time series insights data . while developing we are facing a lot of issues in the availability line chart . zoom in and zoom out features are not working . In the date picker the dates were not selectable and maximum amount of data we can get is last three months but we need to enable the date picker to select beyond 3 months
please fix this issue ASAP.

Can we use the GitHub releases feature to publish new releases? I just discovered we now have a 1.3.7 version.