| 1 | # TSIClient: The Azure Time Series Insights JavaScript SDK
|
| 2 |
|
| 3 | ---
|
| 4 | [//]: <> (This content is similar to https://github.com/MicrosoftDocs/azure-docs/edit/main/includes/tsi-retirement.md)
|
| 5 |
|
| 6 | **NOTE**
|
| 7 | >The Time Series Insights (TSI) service will no longer be supported after March 2025. Consider migrating existing TSI environments to alternative solutions as soon as possible. For more information on the deprecation and migration, visit our [documentation](https://aka.ms/tsi2adx).
|
| 8 | ---
|
| 9 |
|
| 10 | <a href="https://tsiclientsample.azurewebsites.net"><img src="https://insights.timeseries.azure.com/favicon.ico" align="left" hspace="10" vspace="6" height="100px"></a>
|
| 11 |
|
| 12 | The Azure Time Series Insights JavaScript SDK (aka **tsiclient**) is a JavaScript library for Microsoft Azure Time Series Insights, featuring components for data visualization and analytics, utilities for making calls directly to the TSI Platform API, and more. **tsiclient** also ships with an associated CSS file (which you must include using your preferred css linking method), which makes the components look great out of the box.
|
| 13 |
|
| 14 |
|
| 15 | [](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/tsiclient)
|
| 16 |
|
| 17 | ## Resources
|
| 18 |
|
| 19 | * [API Reference documentation](docs/API.md)
|
| 20 | * [Product documentation](https://docs.microsoft.com/azure/time-series-insights/)
|
| 21 | * [Authorization and authentication](https://docs.microsoft.com/azure/time-series-insights/time-series-insights-authentication-and-authorization)
|
| 22 | * [Hosted tsiclient samples](https://tsiclientsample.azurewebsites.net)
|
| 23 |
|
| 24 | ## Installing
|
| 25 |
|
| 26 | If you use npm, `npm install tsiclient`. You can also load directly from [unpkg](https://unpkg.com/tsiclient/). For example:
|
| 27 |
|
| 28 | ```html
|
| 29 | <script src="https://unpkg.com/tsiclient@latest/tsiclient.js"></script>
|
| 30 | <link rel="stylesheet" type="text/css" href="https://unpkg.com/tsiclient@latest/tsiclient.css"></link>
|
| 31 | ```
|
| 32 |
|
| 33 | To import all of **tsiclient** into an ES2015 application, import everything into a namespace, like so...
|
| 34 |
|
| 35 | ```js
|
| 36 | import TsiClient from "tsiclient";
|
| 37 |
|
| 38 | // later, when you want a line chart
|
| 39 | let tsiClient = new TsiClient();
|
| 40 | let lineChart = new tsiClient.ux.LineChart(document.getElementById('chart'));
|
| 41 | ```
|
| 42 |
|
| 43 | You can also import components individually. If you only need the LineChart, you can import it like so...
|
| 44 |
|
| 45 | ```js
|
| 46 | import LineChart from 'tsiclient/LineChart'
|
| 47 |
|
| 48 | // later when you want a line chart
|
| 49 | let lineChart = new LineChart(document.getElementById('chart'));
|
| 50 | ```
|
| 51 | Importing individual components can help significantly reduce your bundle size as they work better with tree shaking. This is the recommended approach if your app only consumes specific components.
|
| 52 |
|
| 53 | To import the tsiclient stylesheet into an ES2015 application, import either `tsiclient.css` or `tsiclient.min.css`, like so...
|
| 54 |
|
| 55 | ```js
|
| 56 | import 'tsiclient/tsiclient.css' // Standard styles
|
| 57 | import 'tsiclient/tsiclient.min.css' // Minified styles
|
| 58 | ```
|
| 59 |
|
| 60 | ## Release Notes
|
| 61 |
|
| 62 | Starting with version 1.3.0, discrete events and state transitions will be represented just like numeric time series in the LineChart component. This may be a breaking change for users representing non-numeric series in the line chart using the "events" and "states" Chart Options. For usage instructions, consult [this example](https://tsiclientsample.azurewebsites.net/noauth/multipleseriestypes.html) and the associated [documentation](https://github.com/microsoft/tsiclient/blob/master/docs/UX.md#line-chart).
|
| 63 |
|
| 64 |
|
| 65 | ## Contributing
|
| 66 |
|
| 67 | This project welcomes contributions and suggestions. Most contributions require you to agree to a
|
| 68 | Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
|
| 69 | the rights to use your contribution. For details, visit https://cla.microsoft.com.
|
| 70 |
|
| 71 | When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
|
| 72 | a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
|
| 73 | provided by the bot. You will only need to do this once across all repos using our CLA.
|
| 74 |
|
| 75 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
|
| 76 | For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
|
| 77 | contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
|