@openremote/or-data-viewer 1.8.0-snapshot.20250725070921 → 1.8.0-snapshot.20250725120000
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +87 -87
- package/dist/umd/index.js +234 -234
- package/dist/umd/index.js.map +1 -1
- package/dist/umd/index.orbundle.js +2137 -2137
- package/dist/umd/index.orbundle.js.map +1 -1
- package/lib/index.js +237 -25
- package/lib/style.js +158 -154
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
# @openremote/or-data-viewer \<or-data-viewer\>
|
|
2
|
-
[![NPM Version][npm-image]][npm-url]
|
|
3
|
-
[![Linux Build][travis-image]][travis-url]
|
|
4
|
-
[![Test Coverage][coveralls-image]][coveralls-url]
|
|
5
|
-
|
|
6
|
-
Web Component for displaying an data tree. This component requires an OpenRemote Manager to retrieve, save and query data.
|
|
7
|
-
|
|
8
|
-
## Install
|
|
9
|
-
```bash
|
|
10
|
-
npm i @openremote/or-data-viewer
|
|
11
|
-
yarn add @openremote/or-data-viewer
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
## Usage
|
|
15
|
-
By default the or-data-viewer is using a 2 columns grid. This can be changed by using a different config.
|
|
16
|
-
|
|
17
|
-
4 column grid, 25% for each column:
|
|
18
|
-
```javascript
|
|
19
|
-
const viewerConfig = {
|
|
20
|
-
viewerStyles: {
|
|
21
|
-
gridTemplateColumns: "repeat(auto-fill, minmax(calc(25%),1fr))";
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
<or-data-viewer .config="${viewerConfig}"></or-data-viewer>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
The position of a panel can also be changed by changing the config of or-data-viewer
|
|
29
|
-
|
|
30
|
-
To change the width of a panel use gridColumn:
|
|
31
|
-
```javascript
|
|
32
|
-
const viewerConfig = {
|
|
33
|
-
panels: {
|
|
34
|
-
"info": {
|
|
35
|
-
type: "property",
|
|
36
|
-
panelStyles: {
|
|
37
|
-
gridColumn: "1 / -1" // same as 1 / 3 in a 2 column grid: Start on column 1, End on column 3
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
gridColumn can also be used to change the position horizontally.
|
|
45
|
-
```javascript
|
|
46
|
-
const viewerConfig = {
|
|
47
|
-
panels: {
|
|
48
|
-
"info": {
|
|
49
|
-
type: "property",
|
|
50
|
-
panelStyles: {
|
|
51
|
-
gridColumnStart: "2" // start the panel in the second column
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
To change the vertical position of a panel use gridRowStart. To start the panel on the first row set gridRowStart to 1:
|
|
59
|
-
```javascript
|
|
60
|
-
const viewerConfig = {
|
|
61
|
-
panels: {
|
|
62
|
-
"info": {
|
|
63
|
-
type: "property",
|
|
64
|
-
panelStyles: {
|
|
65
|
-
gridRowStart: "1"
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().
|
|
73
|
-
|
|
74
|
-
## Supported Browsers
|
|
75
|
-
The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
|
|
76
|
-
Internet Explorer 11 is also supported.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
## License
|
|
80
|
-
[GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
|
|
81
|
-
|
|
82
|
-
[npm-image]: https://img.shields.io/npm/v/live-xxx.svg
|
|
83
|
-
[npm-url]: https://npmjs.org/package/@openremote/or-asset-list
|
|
84
|
-
[travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
|
|
85
|
-
[travis-url]: https://travis-ci.org/live-js/live-xxx
|
|
86
|
-
[coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg
|
|
87
|
-
[coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master
|
|
1
|
+
# @openremote/or-data-viewer \<or-data-viewer\>
|
|
2
|
+
[![NPM Version][npm-image]][npm-url]
|
|
3
|
+
[![Linux Build][travis-image]][travis-url]
|
|
4
|
+
[![Test Coverage][coveralls-image]][coveralls-url]
|
|
5
|
+
|
|
6
|
+
Web Component for displaying an data tree. This component requires an OpenRemote Manager to retrieve, save and query data.
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
```bash
|
|
10
|
+
npm i @openremote/or-data-viewer
|
|
11
|
+
yarn add @openremote/or-data-viewer
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
By default the or-data-viewer is using a 2 columns grid. This can be changed by using a different config.
|
|
16
|
+
|
|
17
|
+
4 column grid, 25% for each column:
|
|
18
|
+
```javascript
|
|
19
|
+
const viewerConfig = {
|
|
20
|
+
viewerStyles: {
|
|
21
|
+
gridTemplateColumns: "repeat(auto-fill, minmax(calc(25%),1fr))";
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
<or-data-viewer .config="${viewerConfig}"></or-data-viewer>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
The position of a panel can also be changed by changing the config of or-data-viewer
|
|
29
|
+
|
|
30
|
+
To change the width of a panel use gridColumn:
|
|
31
|
+
```javascript
|
|
32
|
+
const viewerConfig = {
|
|
33
|
+
panels: {
|
|
34
|
+
"info": {
|
|
35
|
+
type: "property",
|
|
36
|
+
panelStyles: {
|
|
37
|
+
gridColumn: "1 / -1" // same as 1 / 3 in a 2 column grid: Start on column 1, End on column 3
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
gridColumn can also be used to change the position horizontally.
|
|
45
|
+
```javascript
|
|
46
|
+
const viewerConfig = {
|
|
47
|
+
panels: {
|
|
48
|
+
"info": {
|
|
49
|
+
type: "property",
|
|
50
|
+
panelStyles: {
|
|
51
|
+
gridColumnStart: "2" // start the panel in the second column
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
To change the vertical position of a panel use gridRowStart. To start the panel on the first row set gridRowStart to 1:
|
|
59
|
+
```javascript
|
|
60
|
+
const viewerConfig = {
|
|
61
|
+
panels: {
|
|
62
|
+
"info": {
|
|
63
|
+
type: "property",
|
|
64
|
+
panelStyles: {
|
|
65
|
+
gridRowStart: "1"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().
|
|
73
|
+
|
|
74
|
+
## Supported Browsers
|
|
75
|
+
The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
|
|
76
|
+
Internet Explorer 11 is also supported.
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
## License
|
|
80
|
+
[GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
|
|
81
|
+
|
|
82
|
+
[npm-image]: https://img.shields.io/npm/v/live-xxx.svg
|
|
83
|
+
[npm-url]: https://npmjs.org/package/@openremote/or-asset-list
|
|
84
|
+
[travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
|
|
85
|
+
[travis-url]: https://travis-ci.org/live-js/live-xxx
|
|
86
|
+
[coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg
|
|
87
|
+
[coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master
|