@record-evolution/widget-overlay 1.0.1

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.
Files changed (17) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +35 -0
  3. package/dist/linear-progress.js +73 -0
  4. package/dist/linear-progress.js.map +1 -0
  5. package/dist/property-v0slTy4i.js +760 -0
  6. package/dist/property-v0slTy4i.js.map +1 -0
  7. package/dist/src/linear-progress.d.ts +7 -0
  8. package/dist/src/widget-overlay.d.ts +35 -0
  9. package/dist/tsconfig.tsbuildinfo +1 -0
  10. package/dist/widget-overlay.js +650 -0
  11. package/dist/widget-overlay.js.map +1 -0
  12. package/package.json +51 -0
  13. package/src/default-data.json +88 -0
  14. package/src/definition-schema.d.ts +67 -0
  15. package/src/definition-schema.json +200 -0
  16. package/src/linear-progress.ts +59 -0
  17. package/src/widget-overlay.ts +430 -0
package/src/definition-schema.d.ts ADDED
@@ -0,0 +1,67 @@
1
+ export interface InputData {
2
+ title: string
3
+ subTitle?: string
4
+ image?: string // base64 encoded image string or URL
5
+ overlays?: Overlay[]
6
+ }
7
+
8
+ export type Overlay = ProgressOverlay | TextOverlay | SwitchOverlay | HtmlOverlay
9
+
10
+ interface BaseOverlay {
11
+ layerName: string
12
+ layerType: 'progress' | 'text' | 'switch' | 'html'
13
+ items?: OverlayItem[]
14
+ }
15
+
16
+ interface OverlayItem {
17
+ title: string
18
+ relXPos: number // 0 = left, 0.5 = center, 1 = right
19
+ relYPos: number // 0 = top, 0.5 = center, 1 = bottom
20
+ data: string
21
+ }
22
+
23
+ export interface ProgressOverlay extends BaseOverlay {
24
+ layerType: 'progress'
25
+ progressStyle?: {
26
+ width?: number
27
+ height?: number
28
+ rotate?: number
29
+ backgroundColor?: string // CSS color
30
+ }
31
+ sections?: {
32
+ sectionLimits: number[]
33
+ colors: string[]
34
+ }
35
+ }
36
+
37
+ export interface TextOverlay extends BaseOverlay {
38
+ layerType: 'text'
39
+ textStyle: {
40
+ fontSize?: number
41
+ fontWeight?: number
42
+ precision?: number
43
+ backgroundColor?: string
44
+ }
45
+ sections?: {
46
+ sectionLimits: number[]
47
+ colors: string[]
48
+ }
49
+ }
50
+
51
+ export interface SwitchOverlay extends BaseOverlay {
52
+ layerType: 'switch'
53
+ }
54
+
55
+ export interface HtmlOverlay extends BaseOverlay {
56
+ layerType: 'html'
57
+ componentImplementation?: string // JS import code
58
+ componentUsage?: string // HTML snippet
59
+ }
60
+
61
+ export type Modifier = {
62
+ scaler: number
63
+ xOffset: number
64
+ yOffset: number
65
+ visibleWidth: number
66
+ visibleHeight: number
67
+ }
package/src/definition-schema.json ADDED
@@ -0,0 +1,200 @@
1
+ {
2
+ "title": "Input Data",
3
+ "type": "object",
4
+ "properties": {
5
+ "title": {
6
+ "title": "Title",
7
+ "type": "string",
8
+ "order": 1
9
+ },
10
+ "subTitle": {
11
+ "title": "Subtitle",
12
+ "type": "string",
13
+ "order": 2
14
+ },
15
+ "image": {
16
+ "title": "Upload image file",
17
+ "description": "Upload an image to overlay data driven information on.",
18
+ "type": "image",
19
+ "order": 3
20
+ },
21
+ "overlays": {
22
+ "title": "Overlays",
23
+ "type": "array",
24
+ "dataDrivenDisabled": true,
25
+ "order": 2,
26
+ "items": {
27
+ "layerName": {
28
+ "title": "Layer Name",
29
+ "type": "string",
30
+ "order": 1
31
+ },
32
+ "layerType": {
33
+ "title": "Layer Type",
34
+ "description": "The type of the overlay items.",
35
+ "type": "string",
36
+ "enum": ["progress", "text", "switch", "html"],
37
+ "dataDrivenDisabled": true,
38
+ "order": 2
39
+ },
40
+
41
+ "componentImplementation": {
42
+ "title": "Component Code",
43
+ "description": "The JavaScript code to implement the component. e.g. import 'https://jsdelivr.com/npm/my-component'",
44
+ "type": "code",
45
+ "condition": {
46
+ "relativePath": "layerType",
47
+ "showIfValueIn": ["html"]
48
+ },
49
+ "dataDrivenDisabled": true,
50
+ "order": 6
51
+ },
52
+ "componentUsage": {
53
+ "title": "Component Usage",
54
+ "description": "The html code to insert at the determined position. e.g. <my-component .value={data}></my-component>",
55
+ "type": "code",
56
+ "condition": {
57
+ "relativePath": "layerType",
58
+ "showIfValueIn": ["html"]
59
+ },
60
+ "dataDrivenDisabled": true,
61
+ "order": 5
62
+ },
63
+ "sections": {
64
+ "title": "Color Sections",
65
+ "description": "You can specify ranges and intermediate colors.",
66
+ "type": "object",
67
+ "condition": {
68
+ "relativePath": "layerType",
69
+ "showIfValueIn": ["progress", "text"]
70
+ },
71
+ "order": 5,
72
+ "properties": {
73
+ "sectionLimits": {
74
+ "title": "Section Limits",
75
+ "description": "The limits of the sections. Starting from the min value, ending with the max value.",
76
+ "type": "array",
77
+ "dataDrivenDisabled": true,
78
+ "order": 4,
79
+ "items": {
80
+ "type": "number",
81
+ "dataDrivenDisabled": true
82
+ }
83
+ },
84
+ "colors": {
85
+ "title": "Section colors",
86
+ "description": "Progress color for each section. This Array is one shorter than the number of sections.",
87
+ "type": "array",
88
+ "dataDrivenDisabled": true,
89
+ "items": {
90
+ "type": "color",
91
+ "dataDrivenDisabled": true
92
+ },
93
+ "order": 5
94
+ }
95
+ }
96
+ },
97
+ "progressStyle": {
98
+ "title": "Style",
99
+ "type": "object",
100
+ "order": 3,
101
+ "condition": {
102
+ "relativePath": "layerType",
103
+ "showIfValueIn": ["progress"]
104
+ },
105
+ "properties": {
106
+ "rotate": {
107
+ "title": "Rotate",
108
+ "description": "Rotation of the progress bar in degrees.",
109
+ "type": "number",
110
+ "order": 3
111
+ },
112
+ "width": {
113
+ "title": "Width",
114
+ "description": "Width of the progress bar in pixels.",
115
+ "type": "number",
116
+ "order": 1
117
+ },
118
+ "height": {
119
+ "title": "Height",
120
+ "description": "Height of the progress bar in pixels.",
121
+ "type": "number",
122
+ "order": 2
123
+ },
124
+ "backgroundColor": {
125
+ "title": "Background Color",
126
+ "type": "color",
127
+ "order": 5
128
+ }
129
+ }
130
+ },
131
+ "textStyle": {
132
+ "title": "Style",
133
+ "type": "object",
134
+ "order": 3,
135
+ "condition": {
136
+ "relativePath": "layerType",
137
+ "showIfValueIn": ["text"]
138
+ },
139
+ "properties": {
140
+ "fontWeight": {
141
+ "title": "Font Weight",
142
+ "description": "Font Weight is a number in the range of 100 to 900.",
143
+ "type": "number",
144
+ "order": 3
145
+ },
146
+ "fontSize": {
147
+ "title": "Font Size",
148
+ "description": "Font Size in pixels as it should appear on the original image size. It will be scaled together with the image.",
149
+ "type": "number",
150
+ "order": 2
151
+ },
152
+ "precision": {
153
+ "title": "Precision",
154
+ "description": "Number of decimal places to display.",
155
+ "type": "number",
156
+ "order": 4
157
+ },
158
+ "backgroundColor": {
159
+ "title": "Background Color",
160
+ "type": "color",
161
+ "order": 5
162
+ }
163
+ }
164
+ },
165
+ "items": {
166
+ "title": "Items",
167
+ "description": "A list of items to overlay on the image at defined positions.",
168
+ "type": "array",
169
+ "order": 2,
170
+ "items": {
171
+ "title": {
172
+ "title": "Title",
173
+ "type": "string",
174
+ "order": 1
175
+ },
176
+ "relXPos": {
177
+ "title": "Relative X Position",
178
+ "description": "Position of the item relative to the width of the image. i.e. 0 means left edge, 0.5 means center and 1 means right edge.",
179
+ "type": "number",
180
+ "order": 3
181
+ },
182
+ "relYPos": {
183
+ "title": "Relative Y Position",
184
+ "description": "Position of the item relative to the height of the image. i.e. 0 means top edge, 0.5 means center and 1 means bottom edge.",
185
+ "type": "number",
186
+ "order": 4
187
+ },
188
+
189
+ "data": {
190
+ "title": "Data",
191
+ "type": "string",
192
+ "dataDrivenDisabled": false,
193
+ "order": 111
194
+ }
195
+ }
196
+ }
197
+ }
198
+ }
199
+ }
200
+ }
package/src/linear-progress.ts ADDED
@@ -0,0 +1,59 @@
1
+ import { LitElement, html, css } from 'lit'
2
+ import { customElement, property } from 'lit/decorators.js'
3
+
4
+ @customElement('linear-progress')
5
+ export class LinearProgress extends LitElement {
6
+ /** Progress value between 0 and 1, or undefined for indeterminate */
7
+ @property({ type: Number })
8
+ value?: number
9
+
10
+ static styles = css`
11
+ :host {
12
+ display: inline-block;
13
+ width: var(--progress-width, 200px);
14
+ height: var(--progress-height, 8px);
15
+ background-color: var(--progress-background, #e0e0e0);
16
+ border-radius: var(--progress-radius, 4px);
17
+ overflow: hidden;
18
+ position: relative;
19
+ }
20
+
21
+ .bar {
22
+ height: 100%;
23
+ background-color: var(--progress-color, #3b82f6);
24
+ transition: width 0.3s ease;
25
+ }
26
+
27
+ /* Indeterminate animation */
28
+ .indeterminate {
29
+ position: absolute;
30
+ width: 30%;
31
+ height: 100%;
32
+ background-color: var(--progress-color, #3b82f6);
33
+ animation: indeterminate-slide 1.2s infinite ease-in-out;
34
+ }
35
+
36
+ @keyframes indeterminate-slide {
37
+ 0% {
38
+ left: -30%;
39
+ width: 30%;
40
+ }
41
+ 50% {
42
+ left: 35%;
43
+ width: 30%;
44
+ }
45
+ 100% {
46
+ left: 100%;
47
+ width: 30%;
48
+ }
49
+ }
50
+ `
51
+
52
+ render() {
53
+ return html`
54
+ ${this.value !== undefined
55
+ ? html`<div class="bar" style="width: ${this.value * 100}%;"></div>`
56
+ : html`<div class="indeterminate"></div>`}
57
+ `
58
+ }
59
+ }