Skip to content

Commit 1c40778

Browse files
brmorrbrmorr
authored
update va-report-components v2.13.0 doc and changelog (#72)
1 parent 92b92e9 commit 1c40778

File tree

9 files changed

+461
-0
lines changed

9 files changed

+461
-0
lines changed

‎sdk/va-report-components/CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 2.13.0 (August 15, 2024)
2+
3+
### Added
4+
- SAS Viya 2024.08 support (Report Package version 48)
5+
- [ES Module imports](https://developer.sas.com/sdk/va/docs/guides/esm) support
6+
17
## 2.12.0 (July 18, 2024)
28

39
### Added

‎sdk/va-report-components/documentation/website/versioned_docs/version-2.13.0/api-reference.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
id: version-2.13.0-api-reference
3+
title: API Reference
4+
original_id: api-reference
5+
---
6+
7+
The SAS Visual Analytics SDK provides a set of components and APIs that enable you to render reports and report parts. It also enables you
8+
to use SAS data to drive your own components or visualizations.
9+
10+
## Top-Level Exports
11+
12+
- [`SASReportElement`](api/SASReportElement.md)
13+
- [`SASReportPageElement`](api/SASReportPageElement.md)
14+
- [`SASReportObjectElement`](api/SASReportObjectElement.md)
15+
- [`connectToServer`](api/connectToServer.md)
16+
- [`registerDataDrivenContent`](api/registerDataDrivenContent.md)
17+
- [`DataDrivenContentHandle`](api/DataDrivenContentHandle.md)
18+
- [`setUseHighContrastReportTheme`](api/setUseHighContrastReportTheme.md)
19+
- [`setLoadingTheme`](api/setLoadingTheme.md)
20+
- [`setLocale`](api/setLocale.md)
21+
- [`setFormatterLocale`](api/setFormatterLocale.md)
22+
23+
## Loading with \<script\>
24+
25+
When you load the library with a script element, the `vaReportComponents` global variable is not ready to use until all of the other
26+
assets are loaded. The `vaReportComponents.loaded` event is dispatched once it is ready.
27+
28+
```html
29+
<script async src="https://cdn.developer.sas.com/packages/va-report-components/latest/dist/umd/va-report-components.js"></script>
30+
<script>
31+
window.addEventListener('vaReportComponents.loaded', function() {
32+
// The SAS Visual Analytics SDK is loaded and ready
33+
const connectToServer = vaReportComponents.connectToServer;
34+
});
35+
</script>
36+
```
37+
38+
## Loading with imports
39+
40+
When you load the library as an ES module, APIs are available as named imports. See the [ES module imports guide](guides/esm.md) for more information about loading the library as a module.
41+
42+
```ts
43+
import { connectToServer } from '@sassoftware/va-report-components';
44+
```

‎sdk/va-report-components/documentation/website/versioned_docs/version-2.13.0/api/setFormatterLocale.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
id: version-2.13.0-setFormatterLocale
3+
title: setFormatterLocale
4+
original_id: setFormatterLocale
5+
---
6+
7+
```
8+
setFormatterLocale(locale): void
9+
```
10+
11+
`setFormatterLocale` enables the user to set the language that is used to format numeric values and dates. If not specified, the language will fallback to the one that is specified by calling setLocale or the one is specified in the browser settings.
12+
13+
## Arguments
14+
15+
### `locale: string | null`
16+
17+
The locale should be specified as a language code and an optional country code. This is the same format that is used by [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language)
18+
19+
## Examples
20+
21+
### Script Tag
22+
23+
```javascript
24+
window.addEventListener("vaReportComponents.loaded", function() {
25+
vaReportComponents.setFormatterLocale("fr");
26+
});
27+
```
28+
29+
```javascript
30+
window.addEventListener("vaReportComponents.loaded", function() {
31+
vaReportComponents.setFormatterLocale("fr-CA");
32+
});
33+
```
34+
35+
### ESM
36+
37+
```javascript
38+
import { setFormatterLocale } from "@sassoftware/va-report-components";
39+
setFormatterLocale("fr");
40+
```
41+
42+
```javascript
43+
import { setFormatterLocale } from "@sassoftware/va-report-components";
44+
setFormatterLocale("fr-CA");
45+
```

‎sdk/va-report-components/documentation/website/versioned_docs/version-2.13.0/api/setLoadingTheme.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
id: version-2.13.0-setLoadingTheme
3+
title: setLoadingTheme
4+
original_id: setLoadingTheme
5+
---
6+
7+
```
8+
setLoadingTheme(options): void
9+
```
10+
11+
`setLoadingTheme` allows the user to set the theme of the sdk before a report loads. You might want to set the theme for the initial loading state to match the website that the SAS Visual Analytic SDK is embedded in. You also might want to set the loading theme to be consistent with the report that will be loaded.
12+
13+
`setLoadingTheme` only affects the initial loading and logon states. It does not affect the report theme once a report has been loaded.
14+
15+
## Arguments
16+
17+
### `options: Object | 'light' | 'dark' | 'high-contrast'`
18+
19+
When you select `'light'`, `'dark'`, or `'high-contrast'`, then the loading theme is based on one of the built-in themes.
20+
21+
Alternatively, you can specify theme values. The following optional properties are supported:
22+
23+
- `baseTheme: 'light' | 'dark'`: The base theme that is used for loading the theme values. The theme values are used when no defaults are provided. For example, if backgroundColor is not specified and the baseTheme is light, then the backgoundColor will be white since that is the theme's background color. **default**:`light`
24+
25+
You can further customize the loading style with additional style properties. Some examples are provided below to show you how certain options affect the theme. The following style overrides are available:
26+
27+
- `primary: string`: The logon button background and loading indicator.
28+
- `backgroundColor: string`
29+
- `textColor: string`
30+
- `textColorInverse: string` The button text color for the logon state.
31+
- `fontFamily: string`
32+
33+
## Examples
34+
35+
### Script Tag
36+
37+
```javascript
38+
window.addEventListener("vaReportComponents.loaded", function() {
39+
vaReportComponents.setLoadingTheme("dark");
40+
});
41+
```
42+
43+
```javascript
44+
window.addEventListener("vaReportComponents.loaded", function() {
45+
vaReportComponents.setLoadingTheme({
46+
baseTheme: "dark",
47+
primary: "#FFA500",
48+
fontFamily: "Gothic",
49+
});
50+
});
51+
```
52+
53+
### ESM
54+
55+
```javascript
56+
import { setLoadingTheme } from "@sassoftware/va-report-components";
57+
setLoadingTheme("dark");
58+
```
59+
60+
```javascript
61+
import { setLoadingTheme } from "@sassoftware/va-report-components";
62+
setLoadingTheme({
63+
baseTheme: "dark",
64+
primary: "#FFA500",
65+
fontFamily: "Gothic",
66+
});
67+
```

‎sdk/va-report-components/documentation/website/versioned_docs/version-2.13.0/api/setLocale.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
id: version-2.13.0-setLocale
3+
title: setLocale
4+
original_id: setLocale
5+
---
6+
7+
```
8+
setLocale(locale): void
9+
```
10+
11+
`setLocale` enables the user to set an override for the language that is specified in the browser settings.
12+
13+
## Arguments
14+
15+
### `locale: string | null`
16+
17+
The locale should be specified as a language code and an optional country code. This is the same format that is used by [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language)
18+
19+
## Examples
20+
21+
### Script Tag
22+
23+
```javascript
24+
window.addEventListener("vaReportComponents.loaded", function() {
25+
vaReportComponents.setLocale("fr");
26+
});
27+
```
28+
29+
```javascript
30+
window.addEventListener("vaReportComponents.loaded", function() {
31+
vaReportComponents.setLocale("fr-CA");
32+
});
33+
```
34+
35+
### ESM
36+
37+
```javascript
38+
import { setLocale } from "@sassoftware/va-report-components";
39+
setLocale("fr");
40+
```
41+
42+
```javascript
43+
import { setLocale } from "@sassoftware/va-report-components";
44+
setLocale("fr-CA");
45+
```

‎sdk/va-report-components/documentation/website/versioned_docs/version-2.13.0/getting-started.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
id: version-2.13.0-getting-started
3+
title: Getting started
4+
original_id: getting-started
5+
---
6+
7+
The SAS Visual Analytics SDK enables you to use the power of SAS Visual Analytics in your own websites and HTML applications.
8+
You can embed entire reports with the `<sas-report>` custom HTML element, embed a single object with the
9+
`<sas-report-object>` element, or connect to your reports with our JavaScript API.
10+
11+
## Installation
12+
13+
### NPM
14+
15+
The <a target="_blank" href="https://www.npmjs.com/package/@sassoftware/va-report-components">`@sassoftware/va-report-components`</a> library is published to NPM and can be installed by running the `npm install` command as shown below. `va-report-components` can then be loaded with either a `script` tag or with an ES module import.
16+
17+
```bash
18+
# From the root directory of your project
19+
npm install @sassoftware/va-report-components
20+
```
21+
22+
When using a `script` tag, the contents of the `va-report-components/dist` folder must be deployed with your page.
23+
24+
```bash
25+
# Copy the contents of the package to an asset folder for deployment
26+
cp -r ./node_modules/@sassoftware/va-report-components ./sdk-assets
27+
```
28+
29+
The library can then be loaded out of the deployed assets folder.
30+
31+
```html
32+
<script async src="./sdk-assets/dist/umd/va-report-components.js"></script>
33+
```
34+
35+
If your site is built using a code bundler, it might be more convenient to load the library through ES module imports. See the [ES module guide](guides/esm.md) for more details.
36+
37+
```js
38+
import "@sassoftware/va-report-components"
39+
```
40+
41+
### CDN (Content Delivery Network)
42+
43+
Accessing the `va-report-components` library from the SAS Developer CDN is easy. It does not require installation or
44+
hosting of the library code and assets. Here is an example of loading the latest version of `va-report-components` from the CDN using an HTML `script` tag.
45+
46+
```html
47+
<script async src="https://cdn.developer.sas.com/packages/va-report-components/latest/dist/umd/va-report-components.js"></script>
48+
```
49+
50+
When the library is used in production, consider pinning it to an explicit version. This is done with a URL like `https://cdn.developer.sas.com/packages/va-report-components/${VERSION}/dist/umd/va-report-components.js`, where `${VERSION}` is the full `major.minor.patch` semantic version.
51+
52+
## SAS Viya setup
53+
54+
The SAS Visual Analytics SDK requires either connecting directly to SAS Viya or exporting a SAS Report Package. Server setup requirements for connecting to SAS Viya are covered in the [SAS Viya Setup Guide](guides/viya-setup.md).
55+
56+
## Create a custom HTML tag
57+
58+
To build the custom HTML tag that you will embed in your web page:
59+
60+
1. Open a report in SAS Visual Analytics.
61+
1. Open the menu in the report toolbar (which is displayed in the image below) or right-click an individual object, and then select Copy Link. The Copy Link window is displayed.
62+
1. If you are using guest access, expand the Options heading and select the Guest access check box.
63+
1. Click Copy Link.
64+
65+
![Report Overflow Menu](assets/report-overflow-menu.png)
66+
67+
Once the report link or object link has been copied to your clipboard, paste it below, and the output will show a custom HTML
68+
tag that is ready to use.
69+
70+
<link rel="stylesheet" href="/sdk/va/css/copy-link-translator.css">
71+
<form>
72+
<textarea id="vdk-slt-input"
73+
rows="5"
74+
style="resize: none; width: 100%;"
75+
placeholder="Paste the link from SAS Visual Analytics here."
76+
aria-label="Paste the link from SAS Visual Analytics here."
77+
></textarea>
78+
<pre><code id="vdk-slt-output" class="hljs" data-hide="true"></code></pre>
79+
</form>
80+
<script type="module" src="/sdk/va/js/copy-link-translator.js"></script>
81+
82+
For a complete list of options, see the documentation for [`SASReportElement`](api/SASReportElement.md) and
83+
[`SASReportObjectElement`](api/SASReportObjectElement.md)
84+
85+
## See our examples
86+
87+
<a target="_blank" href="https://github.com/sassoftware/sas-viya-sdk-js/blob/main/sdk/va-report-components/examples">Our examples</a> demonstrate a few different
88+
ways to start using the SAS Visual Analytics SDK in your HTML application.

0 commit comments

Comments
 (0)