@record-evolution/widget-value 1.1.23 → 1.1.25
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 +7 -61
- package/dist/widget-value.js +582 -956
- package/dist/widget-value.js.map +1 -1
- package/package.json +11 -20
- package/src/definition-schema.d.ts +62 -35
- package/src/definition-schema.json +19 -12
- package/src/widget-value.ts +3 -1
- package/dist/src/widget-value.d.ts +0 -34
- package/dist/tsconfig.tsbuildinfo +0 -1
package/README.md
CHANGED
|
@@ -5,22 +5,25 @@ This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) reco
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm i widget-value
|
|
8
|
+
npm i @record-evolution/widget-value
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
14
|
<script type="module">
|
|
15
|
-
|
|
15
|
+
import '@record-evolution/widget-value/widget-value.js'
|
|
16
16
|
</script>
|
|
17
17
|
|
|
18
|
-
<widget-value></widget-value>
|
|
18
|
+
<widget-value-1.1.24></widget-value-1.1.24>
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Expected data format
|
|
22
22
|
|
|
23
|
+
Please take a look at the src/default-data.json to see what data is expected to make the widget show content.
|
|
24
|
+
|
|
23
25
|
The following format represents the available data :
|
|
26
|
+
|
|
24
27
|
```js
|
|
25
28
|
data: {
|
|
26
29
|
settings: {
|
|
@@ -38,64 +41,7 @@ data: {
|
|
|
38
41
|
}
|
|
39
42
|
```
|
|
40
43
|
|
|
41
|
-
##
|
|
42
|
-
|
|
43
|
-
```ts
|
|
44
|
-
interface InputData {
|
|
45
|
-
settings: Settings
|
|
46
|
-
gaugeValue: number
|
|
47
|
-
}
|
|
48
|
-
```
|
|
49
|
-
```ts
|
|
50
|
-
interface Settings {
|
|
51
|
-
title: string,
|
|
52
|
-
subTitle: string,
|
|
53
|
-
minGauge: number,
|
|
54
|
-
maxGauge: number,
|
|
55
|
-
style: Style
|
|
56
|
-
}
|
|
57
|
-
```
|
|
58
|
-
```ts
|
|
59
|
-
interface Style {
|
|
60
|
-
needleColor: string,
|
|
61
|
-
sections: number,
|
|
62
|
-
backgroundColor: string[]
|
|
63
|
-
}
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
## Style options
|
|
67
|
-
The following options are available for styling the value graph.
|
|
68
|
-
The `sections` option splits the value area into by default three same sized sections. Therefore three different colors can be provided to the `backgroundColor` by default.
|
|
69
|
-
```
|
|
70
|
-
interface Style {
|
|
71
|
-
needleColor: string,
|
|
72
|
-
sections: number,
|
|
73
|
-
backgroundColor: string[]
|
|
74
|
-
}
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
## Linting and formatting
|
|
78
|
-
|
|
79
|
-
To scan the project for linting and formatting errors, run
|
|
80
|
-
|
|
81
|
-
```bash
|
|
82
|
-
npm run lint
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
To automatically fix linting and formatting errors, run
|
|
86
|
-
|
|
87
|
-
```bash
|
|
88
|
-
npm run format
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
## Tooling configs
|
|
93
|
-
|
|
94
|
-
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
|
|
95
|
-
|
|
96
|
-
If you customize the configuration a lot, you can consider moving them to individual files.
|
|
97
|
-
|
|
98
|
-
## Local Demo with `web-dev-server`
|
|
44
|
+
## Local Demo
|
|
99
45
|
|
|
100
46
|
```bash
|
|
101
47
|
npm start
|