@openremote/or-data-viewer 1.2.0-snapshot.20240512154942
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 -0
- package/lib/index.d.ts +85 -0
- package/lib/index.js +25 -0
- package/lib/index.js.map +1 -0
- package/lib/style.d.ts +1 -0
- package/lib/style.js +154 -0
- package/lib/style.js.map +1 -0
- package/package.json +39 -0
package/README.md
ADDED
|
@@ -0,0 +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 horizontaly.
|
|
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
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { LitElement, PropertyValues, TemplateResult } from "lit";
|
|
2
|
+
import "@openremote/or-chart";
|
|
3
|
+
import "@openremote/or-translate";
|
|
4
|
+
import "@openremote/or-components/or-panel";
|
|
5
|
+
import { OrChartConfig } from "@openremote/or-chart";
|
|
6
|
+
import { Asset, Attribute } from "@openremote/model";
|
|
7
|
+
import "@openremote/or-attribute-card";
|
|
8
|
+
export type PanelType = "chart" | "kpi";
|
|
9
|
+
export interface DefaultAssets {
|
|
10
|
+
assetId?: string;
|
|
11
|
+
attributes?: string[];
|
|
12
|
+
}
|
|
13
|
+
export interface PanelConfig {
|
|
14
|
+
type?: PanelType;
|
|
15
|
+
hide?: boolean;
|
|
16
|
+
hideOnMobile?: boolean;
|
|
17
|
+
defaults?: DefaultAssets[];
|
|
18
|
+
include?: string[];
|
|
19
|
+
exclude?: string[];
|
|
20
|
+
readonly?: string[];
|
|
21
|
+
panelStyles?: {
|
|
22
|
+
[style: string]: string;
|
|
23
|
+
};
|
|
24
|
+
fieldStyles?: {
|
|
25
|
+
[field: string]: {
|
|
26
|
+
[style: string]: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
export interface DataViewerConfig {
|
|
31
|
+
panels: {
|
|
32
|
+
[name: string]: PanelConfig;
|
|
33
|
+
};
|
|
34
|
+
viewerStyles?: {
|
|
35
|
+
[style: string]: string;
|
|
36
|
+
};
|
|
37
|
+
propertyViewProvider?: (property: string, value: any, viewerConfig: DataViewerConfig, panelConfig: PanelConfig) => TemplateResult | undefined;
|
|
38
|
+
attributeViewProvider?: (attribute: Attribute<any>, viewerConfig: DataViewerConfig, panelConfig: PanelConfig) => TemplateResult | undefined;
|
|
39
|
+
panelViewProvider?: (attributes: Attribute<any>[], panelName: string, viewerConfig: DataViewerConfig, panelConfig: PanelConfig) => TemplateResult | undefined;
|
|
40
|
+
chartConfig?: OrChartConfig;
|
|
41
|
+
}
|
|
42
|
+
export declare class OrDataViewerRenderCompleteEvent extends CustomEvent<void> {
|
|
43
|
+
static readonly NAME = "or-data-viewer-render-complete-event";
|
|
44
|
+
constructor();
|
|
45
|
+
}
|
|
46
|
+
export declare class OrDataViewerConfigInvalidEvent extends CustomEvent<void> {
|
|
47
|
+
static readonly NAME = "or-data-viewer-config-invalid-event";
|
|
48
|
+
constructor();
|
|
49
|
+
}
|
|
50
|
+
declare global {
|
|
51
|
+
export interface HTMLElementEventMap {
|
|
52
|
+
[OrDataViewerRenderCompleteEvent.NAME]: OrDataViewerRenderCompleteEvent;
|
|
53
|
+
[OrDataViewerConfigInvalidEvent.NAME]: OrDataViewerConfigInvalidEvent;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
declare const OrDataViewer_base: (new (...args: any[]) => {
|
|
57
|
+
_i18nextJustInitialized: boolean;
|
|
58
|
+
connectedCallback(): void;
|
|
59
|
+
disconnectedCallback(): void;
|
|
60
|
+
shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
|
|
61
|
+
initCallback: (options: import("i18next").InitOptions) => void;
|
|
62
|
+
langChangedCallback: () => void;
|
|
63
|
+
readonly isConnected: boolean;
|
|
64
|
+
}) & typeof LitElement;
|
|
65
|
+
export declare class OrDataViewer extends OrDataViewer_base {
|
|
66
|
+
static get styles(): import("lit").CSSResult[];
|
|
67
|
+
static DEFAULT_PANEL_TYPE: PanelType;
|
|
68
|
+
static DEFAULT_CONFIG: DataViewerConfig;
|
|
69
|
+
static generateGrid(shadowRoot: ShadowRoot | null): void;
|
|
70
|
+
config?: DataViewerConfig;
|
|
71
|
+
protected _assets?: Asset[];
|
|
72
|
+
protected _loading: boolean;
|
|
73
|
+
realm?: string;
|
|
74
|
+
protected _resizeHandler: () => void;
|
|
75
|
+
constructor();
|
|
76
|
+
connectedCallback(): void;
|
|
77
|
+
disconnectedCallback(): void;
|
|
78
|
+
refresh(): void;
|
|
79
|
+
getPanel(name: string, panelConfig: PanelConfig): TemplateResult;
|
|
80
|
+
getPanelContent(panelName: string, panelConfig: PanelConfig): TemplateResult | undefined;
|
|
81
|
+
protected render(): TemplateResult<1>;
|
|
82
|
+
protected renderConfig(): TemplateResult[];
|
|
83
|
+
protected updated(_changedProperties: PropertyValues): void;
|
|
84
|
+
}
|
|
85
|
+
export {};
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
var OrDataViewer_1,__decorate=this&&this.__decorate||function(e,t,r,i){var a,o=arguments.length,n=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,i);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(n=(o<3?a(n):o>3?a(t,r,n):a(t,r))||n);return o>3&&n&&Object.defineProperty(t,r,n),n};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import"@openremote/or-chart";import"@openremote/or-translate";import{translate}from"@openremote/or-translate";import"@openremote/or-components/or-panel";import{OrChartEvent}from"@openremote/or-chart";import{style}from"./style";import i18next from"i18next";import{styleMap}from"lit/directives/style-map.js";import{classMap}from"lit/directives/class-map.js";import"@openremote/or-attribute-card";import manager from"@openremote/core";export class OrDataViewerRenderCompleteEvent extends CustomEvent{constructor(){super(OrDataViewerRenderCompleteEvent.NAME,{bubbles:!0,composed:!0})}}OrDataViewerRenderCompleteEvent.NAME="or-data-viewer-render-complete-event";export class OrDataViewerConfigInvalidEvent extends CustomEvent{constructor(){super(OrDataViewerConfigInvalidEvent.NAME,{bubbles:!0,composed:!0})}}OrDataViewerConfigInvalidEvent.NAME="or-data-viewer-config-invalid-event";let OrDataViewer=OrDataViewer_1=class extends(translate(i18next)(LitElement)){static get styles(){return[style]}static generateGrid(e){if(e){const t=e.querySelector("#container");if(t){const r=parseInt(window.getComputedStyle(t).getPropertyValue("grid-auto-rows"),10),i=parseInt(window.getComputedStyle(t).getPropertyValue("grid-row-gap"),10),a=e.querySelectorAll(".panel");a&&a.forEach((e=>{const t=e.querySelector(".panel-content-wrapper");if(t){const a=Math.ceil((t.getBoundingClientRect().height+i)/(r+i));e.style.gridRowEnd="span "+a}}))}}}constructor(){super(),this._loading=!1,this._resizeHandler=()=>{OrDataViewer_1.generateGrid(this.shadowRoot)},this.addEventListener(OrChartEvent.NAME,(()=>OrDataViewer_1.generateGrid(this.shadowRoot)))}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._resizeHandler)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._resizeHandler)}refresh(){this.realm=manager.displayRealm}getPanel(e,t){const r=this.getPanelContent(e,t);return r?html`
|
|
2
|
+
<div class=${classMap({panel:!0,mobileHidden:!0===t.hideOnMobile})} id="${e}-panel" style="${t&&t.panelStyles?styleMap(t.panelStyles):""}">
|
|
3
|
+
<div class="panel-content-wrapper">
|
|
4
|
+
${t&&"chart"===t.type?html`
|
|
5
|
+
<div class="panel-title">
|
|
6
|
+
<or-translate value="${e}"></or-translate>
|
|
7
|
+
</div>
|
|
8
|
+
`:""}
|
|
9
|
+
|
|
10
|
+
<div class="panel-content">
|
|
11
|
+
${r}
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
`:html``}getPanelContent(e,t){if(t.hide||!this.config)return;let r;return this.realm=manager.displayRealm,t&&"chart"===t.type&&(r=html`<or-chart id="chart" panelName="${e}" .config="${this.config.chartConfig}" .realm="${this.realm}"></or-chart>`),t&&"kpi"===t.type&&(r=html`
|
|
16
|
+
<or-attribute-card panelName="${e}" .config="${this.config.chartConfig}" .realm="${this.realm}"></or-attribute-card>
|
|
17
|
+
`),r}render(){return this._loading?html`
|
|
18
|
+
<div class="msg"><or-translate value="loading"></or-translate></div>
|
|
19
|
+
`:(this.config||(this.config=Object.assign({},OrDataViewer_1.DEFAULT_CONFIG)),html`
|
|
20
|
+
<div id="wrapper">
|
|
21
|
+
<div id="container" style="${this.config.viewerStyles?styleMap(this.config.viewerStyles):""}">
|
|
22
|
+
${this.renderConfig()}
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
`)}renderConfig(){let e=this.config?this.config:OrDataViewer_1.DEFAULT_CONFIG;try{return Object.entries(e.panels).map((([e,t])=>this.getPanel(e,t)))}catch(t){return console.warn("OR data viewer config is invalid"),this.config=void 0,this.dispatchEvent(new OrDataViewerConfigInvalidEvent),e=OrDataViewer_1.DEFAULT_CONFIG,Object.entries(e.panels).map((([e,t])=>this.getPanel(e,t)))}}updated(e){super.updated(e),e.has("realm")&&this.refresh(),this.updateComplete.then((()=>{this.dispatchEvent(new OrDataViewerRenderCompleteEvent),OrDataViewer_1.generateGrid(this.shadowRoot)}))}};OrDataViewer.DEFAULT_PANEL_TYPE="chart",OrDataViewer.DEFAULT_CONFIG={viewerStyles:{},panels:{chart:{type:"chart",hideOnMobile:!0,panelStyles:{gridColumn:"1 / -1"}},kpi1:{type:"kpi",hideOnMobile:!1},kpi2:{type:"kpi",hideOnMobile:!1},kpi3:{type:"kpi",hideOnMobile:!1},kpi4:{type:"kpi",hideOnMobile:!1},kpi5:{type:"kpi",hideOnMobile:!1},kpi6:{type:"kpi",hideOnMobile:!1},kpi7:{type:"kpi",hideOnMobile:!1},kpi8:{type:"kpi",hideOnMobile:!1},chart2:{type:"chart",hideOnMobile:!0,panelStyles:{gridColumn:"1 / -1"}},chart3:{type:"chart",hideOnMobile:!0,panelStyles:{gridColumn:"1 / -1"}}}},__decorate([property()],OrDataViewer.prototype,"config",void 0),__decorate([property({type:Array,attribute:!1})],OrDataViewer.prototype,"_assets",void 0),__decorate([property()],OrDataViewer.prototype,"_loading",void 0),__decorate([property()],OrDataViewer.prototype,"realm",void 0),OrDataViewer=OrDataViewer_1=__decorate([customElement("or-data-viewer")],OrDataViewer);export{OrDataViewer};
|
package/lib/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/lib/style.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|
package/lib/style.js
ADDED
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import{css,unsafeCSS}from"lit";import{DefaultColor1,DefaultColor2,DefaultColor3,DefaultColor5}from"@openremote/core";export const style=css`
|
|
2
|
+
|
|
3
|
+
:host {
|
|
4
|
+
--internal-or-asset-viewer-background-color: var(--or-asset-viewer-background-color, var(--or-app-color2, ${unsafeCSS(DefaultColor2)}));
|
|
5
|
+
--internal-or-asset-viewer-panel-margin: var(--or-asset-viewer-panel-margin, 20px);
|
|
6
|
+
--internal-or-asset-viewer-panel-padding: var(--or-asset-viewer-panel-padding, 24px);
|
|
7
|
+
--internal-or-asset-viewer-text-color: var(--or-asset-viewer-text-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)}));
|
|
8
|
+
--internal-or-asset-viewer-title-text-color: var(--or-asset-viewer-title-text-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)}));
|
|
9
|
+
--internal-or-asset-viewer-panel-color: var(--or-asset-viewer-panel-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
|
|
10
|
+
--internal-or-asset-viewer-line-color: var(--or-asset-viewer-line-color, var(--or-app-color5, ${unsafeCSS(DefaultColor5)}));
|
|
11
|
+
|
|
12
|
+
height: 100%;
|
|
13
|
+
width: 100%;
|
|
14
|
+
background-color: var(--internal-or-asset-viewer-background-color);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
*[hidden] {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
#container {
|
|
22
|
+
width: 100%;
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
display: grid;
|
|
25
|
+
margin: auto;
|
|
26
|
+
padding: 20px 20px;
|
|
27
|
+
grid-gap: 10px;
|
|
28
|
+
grid-template-columns: repeat(auto-fill, minmax(calc(25% - 8px), 1fr));
|
|
29
|
+
grid-auto-rows: 5px;
|
|
30
|
+
|
|
31
|
+
-webkit-animation: fadein 0.3s; /* Safari, Chrome and Opera > 12.1 */
|
|
32
|
+
-moz-animation: fadein 0.3s; /* Firefox < 16 */
|
|
33
|
+
-ms-animation: fadein 0.3s; /* Internet Explorer */
|
|
34
|
+
-o-animation: fadein 0.3s; /* Opera < 12.1 */
|
|
35
|
+
animation: fadein 0.3s;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@keyframes fadein {
|
|
39
|
+
from { opacity: 0; }
|
|
40
|
+
to { opacity: 1; }
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Firefox < 16 */
|
|
44
|
+
@-moz-keyframes fadein {
|
|
45
|
+
from { opacity: 0; }
|
|
46
|
+
to { opacity: 1; }
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Safari, Chrome and Opera > 12.1 */
|
|
50
|
+
@-webkit-keyframes fadein {
|
|
51
|
+
from { opacity: 0; }
|
|
52
|
+
to { opacity: 1; }
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Internet Explorer */
|
|
56
|
+
@-ms-keyframes fadein {
|
|
57
|
+
from { opacity: 0; }
|
|
58
|
+
to { opacity: 1; }
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Opera < 12.1 */
|
|
62
|
+
@-o-keyframes fadein {
|
|
63
|
+
from { opacity: 0; }
|
|
64
|
+
to { opacity: 1; }
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.panel {
|
|
68
|
+
background-color: var(--internal-or-asset-viewer-panel-color);
|
|
69
|
+
border: 1px solid #e5e5e5;
|
|
70
|
+
border-radius: 5px;
|
|
71
|
+
max-width: 100%;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.panel-content-wrapper {
|
|
75
|
+
padding: var(--internal-or-asset-viewer-panel-padding);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.panel-content {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-wrap: wrap;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.panel-title {
|
|
84
|
+
text-transform: uppercase;
|
|
85
|
+
font-weight: bolder;
|
|
86
|
+
line-height: 1em;
|
|
87
|
+
color: var(--internal-or-asset-viewer-title-text-color);
|
|
88
|
+
margin-bottom: 25px;
|
|
89
|
+
flex: 0 0 auto;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.field {
|
|
93
|
+
margin: 10px 0;
|
|
94
|
+
width: 100%;
|
|
95
|
+
flex: 0 0 auto;
|
|
96
|
+
min-height: 50px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.field > * {
|
|
100
|
+
width: 100%;
|
|
101
|
+
box-sizing: border-box;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.msg {
|
|
105
|
+
display: flex;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
align-items: center;
|
|
108
|
+
text-align: center;
|
|
109
|
+
height: 100%;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.back-navigation {
|
|
113
|
+
display: none;
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@media screen and (max-width: 1024px) {
|
|
118
|
+
#container {
|
|
119
|
+
grid-template-columns: repeat(auto-fill, minmax(calc(50% - 8px), 1fr));
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@media screen and (max-width: 769px) {
|
|
124
|
+
.back-navigation {
|
|
125
|
+
display: block;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.mobileHidden {
|
|
129
|
+
display: none;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
#container {
|
|
133
|
+
grid-auto-rows: auto;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.panel {
|
|
137
|
+
border-radius: 0;
|
|
138
|
+
border-right: none;
|
|
139
|
+
border-left: none;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
#chart-panel {
|
|
143
|
+
grid-row-start: 1;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
#container {
|
|
148
|
+
grid-template-columns: 100% !important;
|
|
149
|
+
padding: 20px 0;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
}
|
|
154
|
+
`;
|
package/lib/style.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAE,SAAS,EAAC,MAAM,KAAK,CAAC;AACnC,OAAO,EAAmB,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAE9G,eAAe;AACf,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;oHAG4F,SAAS,CAAC,aAAa,CAAC;;;wGAGpC,SAAS,CAAC,aAAa,CAAC;oHACZ,SAAS,CAAC,aAAa,CAAC;0GAClC,SAAS,CAAC,aAAa,CAAC;wGAC1B,SAAS,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJ/H,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@openremote/or-data-viewer",
|
|
3
|
+
"version": "1.2.0-snapshot.20240512154942",
|
|
4
|
+
"description": "OpenRemote data Viewer",
|
|
5
|
+
"main": "dist/umd/index.bundle.js",
|
|
6
|
+
"module": "lib/index.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./lib/index.js",
|
|
9
|
+
"./*": "./lib/*.js"
|
|
10
|
+
},
|
|
11
|
+
"types": "lib/index.d.ts",
|
|
12
|
+
"scripts": {
|
|
13
|
+
"test": "echo \"No tests\" && exit 0",
|
|
14
|
+
"prepublishOnly": "npx webpack"
|
|
15
|
+
},
|
|
16
|
+
"author": "OpenRemote",
|
|
17
|
+
"license": "AGPL-3.0-or-later",
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@openremote/core": "1.2.0-snapshot.20240512154942",
|
|
20
|
+
"@openremote/model": "1.2.0-snapshot.20240512154942",
|
|
21
|
+
"@openremote/or-attribute-card": "1.2.0-snapshot.20240512154942",
|
|
22
|
+
"@openremote/or-attribute-history": "1.2.0-snapshot.20240512154942",
|
|
23
|
+
"@openremote/or-attribute-input": "1.2.0-snapshot.20240512154942",
|
|
24
|
+
"@openremote/or-chart": "1.2.0-snapshot.20240512154942",
|
|
25
|
+
"@openremote/or-components": "1.2.0-snapshot.20240512154942",
|
|
26
|
+
"@openremote/or-icon": "1.2.0-snapshot.20240512154942",
|
|
27
|
+
"@openremote/or-map": "1.2.0-snapshot.20240512154942",
|
|
28
|
+
"@openremote/or-mwc-components": "1.2.0-snapshot.20240512154942",
|
|
29
|
+
"@openremote/or-translate": "1.2.0-snapshot.20240512154942",
|
|
30
|
+
"@openremote/rest": "1.2.0-snapshot.20240512154942",
|
|
31
|
+
"lit": "^2.0.2"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@openremote/util": "1.2.0-snapshot.20240512154942"
|
|
35
|
+
},
|
|
36
|
+
"publishConfig": {
|
|
37
|
+
"access": "public"
|
|
38
|
+
}
|
|
39
|
+
}
|