@openremote/or-attribute-barchart 1.24.0 → 1.24.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 (4) hide show
  1. package/custom-elements-jsx.d.ts +286 -117
  2. package/dist/umd/index.orbundle.js +65 -65
  3. package/dist/umd/index.orbundle.js.map +1 -1
  4. package/package.json +10 -7
package/custom-elements-jsx.d.ts CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  import type { OrAttributeBarChart } from "./lib/index.d.ts";
3
2
 
4
3
  /**
@@ -27,7 +26,6 @@ export type ScopedElements<
27
26
  };
28
27
 
29
28
  type BaseProps<T extends HTMLElement> = {
30
-
31
29
  /** Content added between the opening and closing tags of the element */
32
30
  children?: any;
33
31
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
@@ -50,6 +48,8 @@ type BaseProps<T extends HTMLElement> = {
50
48
  key?: string | number;
51
49
  /** Specifies the language of the element. */
52
50
  lang?: string;
51
+ /** Defines the element's semantic role for accessibility APIs. */
52
+ role?: string;
53
53
  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
54
54
  part?: string;
55
55
  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
@@ -70,65 +70,59 @@ type BaseProps<T extends HTMLElement> = {
70
70
  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
71
71
  /** Specifies the action to be performed on a popover element being controlled by a control element. */
72
72
  popovertargetaction?: "show" | "hide" | "toggle";
73
-
74
- } ;
75
-
76
- type BaseEvents = {
77
-
78
-
79
73
  };
80
74
 
81
-
75
+ type BaseEvents = {};
82
76
 
83
77
  export type OrAttributeBarChartProps = {
84
78
  /** Asset data to display in the bar chart. This array needs to be populated.
85
79
  Used for the chart legend, information about units, and retrieval of data points. */
86
- "assets"?: OrAttributeBarChart['assets'];
80
+ assets?: OrAttributeBarChart["assets"];
87
81
  /** List of attributes to display in the bar chart. This array needs to be populated.
88
82
  Used for the chart legend, and the retrieval of data points.
89
83
  Formatted as a JSON array of;
90
84
 
91
85
  ```[<index of assets>, Attribute]``` */
92
- "assetAttributes"?: OrAttributeBarChart['assetAttributes'];
86
+ assetAttributes?: OrAttributeBarChart["assetAttributes"];
93
87
  /** Realm name to associate all the chart data with. */
94
- "realm"?: OrAttributeBarChart['realm'];
88
+ realm?: OrAttributeBarChart["realm"];
95
89
  /** The list of HEX colors representing the line color for each AttributeRef.
96
90
  Acts as an override, and will fall back to the colors attribute if not specified.
97
91
  The AttributeRef object with Asset ID and Attribute name need to be present in the Chart to work.
98
92
  The HEX color should be put in without '#' prefix. For example, you'd use '4d9d2a' instead of '#4d9d2a'. */
99
- "attributeColors"?: OrAttributeBarChart['attributeColors'];
93
+ attributeColors?: OrAttributeBarChart["attributeColors"];
100
94
  /** The attribute configuration object with, for example, a list of right-axis attributes.
101
95
  See BarChartAttributeConfig for full documentation on the options. */
102
- "attributeConfig"?: OrAttributeBarChart['attributeConfig'];
96
+ attributeConfig?: OrAttributeBarChart["attributeConfig"];
103
97
  /** List of colors to display attributes values with inside the bar chart.
104
98
  The array corresponds with assetAttributes, so the 1st color will be used for the 1st attribute. */
105
- "colors"?: OrAttributeBarChart['colors'];
99
+ colors?: OrAttributeBarChart["colors"];
106
100
  /** The query object to request attribute data / data points with.
107
101
  Normally, it's of type AssetDatapointIntervalQuery, including a start- and end time. */
108
- "datapointQuery"?: OrAttributeBarChart['datapointQuery'];
102
+ datapointQuery?: OrAttributeBarChart["datapointQuery"];
109
103
  /** Selected timeframe using a [start date, end date] array format. */
110
- "timeframe"?: OrAttributeBarChart['timeframe'];
104
+ timeframe?: OrAttributeBarChart["timeframe"];
111
105
  /** Custom ECharts options object to configure the chart appearance.
112
106
  See their documentation for more info: https://echarts.apache.org/en/option.html */
113
- "chartOptions"?: OrAttributeBarChart['chartOptions'];
107
+ chartOptions?: OrAttributeBarChart["chartOptions"];
114
108
  /** Shows a right-side legend with the list of visible attributes. */
115
- "showLegend"?: OrAttributeBarChart['showLegend'];
109
+ showLegend?: OrAttributeBarChart["showLegend"];
116
110
  /** Shows the right-side legend (toggled with showLegend) in a compact / dense format. */
117
- "denseLegend"?: OrAttributeBarChart['denseLegend'];
111
+ denseLegend?: OrAttributeBarChart["denseLegend"];
118
112
  /** Displays the bar chart in a vertically "stacked" configuration.
119
113
  It will display a cumulative effect of all data series on top of each other. */
120
- "stacked"?: OrAttributeBarChart['stacked'];
114
+ stacked?: OrAttributeBarChart["stacked"];
121
115
  /** Enables time control for the user, allowing them to customize the timeframe shown.
122
116
  Leaving this disabled/unset will show them in a "read-only" state. */
123
- "timestampControls"?: OrAttributeBarChart['timestampControls'];
117
+ timestampControls?: OrAttributeBarChart["timestampControls"];
124
118
  /** Number of decimals to display for attributes. */
125
- "decimals"?: OrAttributeBarChart['decimals'];
119
+ decimals?: OrAttributeBarChart["decimals"];
126
120
  /** A JSON array list of strings that represent the prefix options in the UI, such as "current" or "last".
127
121
  In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. */
128
- "timePrefixOptions"?: OrAttributeBarChart['timePrefixOptions'];
122
+ timePrefixOptions?: OrAttributeBarChart["timePrefixOptions"];
129
123
  /** The selected option from timePrefixOptions, such as "current" or "last".
130
124
  In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. */
131
- "timePrefixKey"?: OrAttributeBarChart['timePrefixKey'];
125
+ timePrefixKey?: OrAttributeBarChart["timePrefixKey"];
132
126
  /** A JSON object containing a list of time window options, like "1 day", "6 hours" or "52 weeks".
133
127
  In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
134
128
  The input should contain a JavaScript Map, containing the following:
@@ -136,10 +130,10 @@ The input should contain a JavaScript Map, containing the following:
136
130
  - A combination of any moment.unitOfTime.DurationConstructor and number, like ["hours", 6]
137
131
 
138
132
  Example input: `{"6hours": ["hours", 6], "4weeks": ["weeks", 4]}` */
139
- "timeWindowOptions"?: OrAttributeBarChart['timeWindowOptions'];
133
+ timeWindowOptions?: OrAttributeBarChart["timeWindowOptions"];
140
134
  /** The key value of the selected option from timeWindowOptions, such as "1day", "6hours" or "52weeks".
141
135
  In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of. */
142
- "timeWindowKey"?: OrAttributeBarChart['timeWindowKey'];
136
+ timeWindowKey?: OrAttributeBarChart["timeWindowKey"];
143
137
  /** A JSON object containing a list of interval options, like "30minutes", "hour" or "day".
144
138
  It determines the interval to display data in sections. For example, split the data every 5 minutes of the past hour.
145
139
  In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
@@ -157,139 +151,314 @@ Example input:
157
151
  millis: 1800000
158
152
  }}
159
153
  ``` */
160
- "intervalOptions"?: OrAttributeBarChart['intervalOptions'];
154
+ intervalOptions?: OrAttributeBarChart["intervalOptions"];
161
155
  /** The key value of the selected option from intervalOptions, such as "30minute", "hour" or "week".
162
156
  In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour. */
163
- "interval"?: OrAttributeBarChart['interval'];
157
+ interval?: OrAttributeBarChart["interval"];
158
+ };
164
159
 
160
+ export type OrAttributeBarChartSolidJsProps = {
161
+ /** Asset data to display in the bar chart. This array needs to be populated.
162
+ Used for the chart legend, information about units, and retrieval of data points. */
163
+ "prop:assets"?: OrAttributeBarChart["assets"];
164
+ /** List of attributes to display in the bar chart. This array needs to be populated.
165
+ Used for the chart legend, and the retrieval of data points.
166
+ Formatted as a JSON array of;
165
167
 
166
- }
168
+ ```[<index of assets>, Attribute]``` */
169
+ "prop:assetAttributes"?: OrAttributeBarChart["assetAttributes"];
170
+ /** Realm name to associate all the chart data with. */
171
+ "prop:realm"?: OrAttributeBarChart["realm"];
172
+ /** The list of HEX colors representing the line color for each AttributeRef.
173
+ Acts as an override, and will fall back to the colors attribute if not specified.
174
+ The AttributeRef object with Asset ID and Attribute name need to be present in the Chart to work.
175
+ The HEX color should be put in without '#' prefix. For example, you'd use '4d9d2a' instead of '#4d9d2a'. */
176
+ "prop:attributeColors"?: OrAttributeBarChart["attributeColors"];
177
+ /** The attribute configuration object with, for example, a list of right-axis attributes.
178
+ See BarChartAttributeConfig for full documentation on the options. */
179
+ "prop:attributeConfig"?: OrAttributeBarChart["attributeConfig"];
180
+ /** List of colors to display attributes values with inside the bar chart.
181
+ The array corresponds with assetAttributes, so the 1st color will be used for the 1st attribute. */
182
+ "prop:colors"?: OrAttributeBarChart["colors"];
183
+ /** The query object to request attribute data / data points with.
184
+ Normally, it's of type AssetDatapointIntervalQuery, including a start- and end time. */
185
+ "prop:datapointQuery"?: OrAttributeBarChart["datapointQuery"];
186
+ /** Selected timeframe using a [start date, end date] array format. */
187
+ "prop:timeframe"?: OrAttributeBarChart["timeframe"];
188
+ /** Custom ECharts options object to configure the chart appearance.
189
+ See their documentation for more info: https://echarts.apache.org/en/option.html */
190
+ "prop:chartOptions"?: OrAttributeBarChart["chartOptions"];
191
+ /** Shows a right-side legend with the list of visible attributes. */
192
+ "prop:showLegend"?: OrAttributeBarChart["showLegend"];
193
+ /** Shows the right-side legend (toggled with showLegend) in a compact / dense format. */
194
+ "prop:denseLegend"?: OrAttributeBarChart["denseLegend"];
195
+ /** Displays the bar chart in a vertically "stacked" configuration.
196
+ It will display a cumulative effect of all data series on top of each other. */
197
+ "prop:stacked"?: OrAttributeBarChart["stacked"];
198
+ /** Enables time control for the user, allowing them to customize the timeframe shown.
199
+ Leaving this disabled/unset will show them in a "read-only" state. */
200
+ "prop:timestampControls"?: OrAttributeBarChart["timestampControls"];
201
+ /** Number of decimals to display for attributes. */
202
+ "prop:decimals"?: OrAttributeBarChart["decimals"];
203
+ /** A JSON array list of strings that represent the prefix options in the UI, such as "current" or "last".
204
+ In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. */
205
+ "prop:timePrefixOptions"?: OrAttributeBarChart["timePrefixOptions"];
206
+ /** The selected option from timePrefixOptions, such as "current" or "last".
207
+ In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. */
208
+ "prop:timePrefixKey"?: OrAttributeBarChart["timePrefixKey"];
209
+ /** A JSON object containing a list of time window options, like "1 day", "6 hours" or "52 weeks".
210
+ In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
211
+ The input should contain a JavaScript Map, containing the following:
212
+ - A string with a unique key like "6hours",
213
+ - A combination of any moment.unitOfTime.DurationConstructor and number, like ["hours", 6]
214
+
215
+ Example input: `{"6hours": ["hours", 6], "4weeks": ["weeks", 4]}` */
216
+ "prop:timeWindowOptions"?: OrAttributeBarChart["timeWindowOptions"];
217
+ /** The key value of the selected option from timeWindowOptions, such as "1day", "6hours" or "52weeks".
218
+ In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of. */
219
+ "prop:timeWindowKey"?: OrAttributeBarChart["timeWindowKey"];
220
+ /** A JSON object containing a list of interval options, like "30minutes", "hour" or "day".
221
+ It determines the interval to display data in sections. For example, split the data every 5 minutes of the past hour.
222
+ In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
223
+ The input should contain a JavaScript Map, containing the following:
224
+ - A BarChartInterval string with a unique key like "hour" or "day",
225
+ - A IntervalConfig object with details on the interval, such as the display name and the unit of time.
226
+
227
+ Example input:
228
+ ```
229
+ {"30minutes": {
230
+ displayName: "30Minutes", // translated automatically
231
+ steps: 30,
232
+ orFormat: "minute",
233
+ momentFormat: "minutes", // using moment.js format
234
+ millis: 1800000
235
+ }}
236
+ ``` */
237
+ "prop:intervalOptions"?: OrAttributeBarChart["intervalOptions"];
238
+ /** The key value of the selected option from intervalOptions, such as "30minute", "hour" or "week".
239
+ In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour. */
240
+ "prop:interval"?: OrAttributeBarChart["interval"];
167
241
 
168
- export type CustomElements = {
242
+ /** Set the innerHTML of the element */
243
+ innerHTML?: string;
244
+ /** Set the textContent of the element */
245
+ textContent?: string | number;
246
+ };
169
247
 
248
+ export type CustomElements = {
249
+ /**
250
+ *
251
+ *
252
+ * ## Attributes & Properties
253
+ *
254
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
255
+ *
256
+ * - `assets`: Asset data to display in the bar chart. This array needs to be populated.
257
+ * Used for the chart legend, information about units, and retrieval of data points.
258
+ * - `assetAttributes`: List of attributes to display in the bar chart. This array needs to be populated.
259
+ * Used for the chart legend, and the retrieval of data points.
260
+ * Formatted as a JSON array of;
261
+ *
262
+ * ```[<index of assets>, Attribute]```
263
+ * - `realm`: Realm name to associate all the chart data with.
264
+ * - `attributeColors`: The list of HEX colors representing the line color for each AttributeRef.
265
+ * Acts as an override, and will fall back to the colors attribute if not specified.
266
+ * The AttributeRef object with Asset ID and Attribute name need to be present in the Chart to work.
267
+ * The HEX color should be put in without '#' prefix. For example, you'd use '4d9d2a' instead of '#4d9d2a'.
268
+ * - `attributeConfig`: The attribute configuration object with, for example, a list of right-axis attributes.
269
+ * See BarChartAttributeConfig for full documentation on the options.
270
+ * - `colors`: List of colors to display attributes values with inside the bar chart.
271
+ * The array corresponds with assetAttributes, so the 1st color will be used for the 1st attribute.
272
+ * - `datapointQuery`: The query object to request attribute data / data points with.
273
+ * Normally, it's of type AssetDatapointIntervalQuery, including a start- and end time.
274
+ * - `timeframe`: Selected timeframe using a [start date, end date] array format.
275
+ * - `chartOptions`: Custom ECharts options object to configure the chart appearance.
276
+ * See their documentation for more info: https://echarts.apache.org/en/option.html
277
+ * - `showLegend`: Shows a right-side legend with the list of visible attributes.
278
+ * - `denseLegend`: Shows the right-side legend (toggled with showLegend) in a compact / dense format.
279
+ * - `stacked`: Displays the bar chart in a vertically "stacked" configuration.
280
+ * It will display a cumulative effect of all data series on top of each other.
281
+ * - `timestampControls`: Enables time control for the user, allowing them to customize the timeframe shown.
282
+ * Leaving this disabled/unset will show them in a "read-only" state.
283
+ * - `decimals`: Number of decimals to display for attributes.
284
+ * - `timePrefixOptions`: A JSON array list of strings that represent the prefix options in the UI, such as "current" or "last".
285
+ * In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of.
286
+ * - `timePrefixKey`: The selected option from timePrefixOptions, such as "current" or "last".
287
+ * In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of.
288
+ * - `timeWindowOptions`: A JSON object containing a list of time window options, like "1 day", "6 hours" or "52 weeks".
289
+ * In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
290
+ * The input should contain a JavaScript Map, containing the following:
291
+ * - A string with a unique key like "6hours",
292
+ * - A combination of any moment.unitOfTime.DurationConstructor and number, like ["hours", 6]
293
+ *
294
+ * Example input: `{"6hours": ["hours", 6], "4weeks": ["weeks", 4]}`
295
+ * - `timeWindowKey`: The key value of the selected option from timeWindowOptions, such as "1day", "6hours" or "52weeks".
296
+ * In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
297
+ * - `intervalOptions`: A JSON object containing a list of interval options, like "30minutes", "hour" or "day".
298
+ * It determines the interval to display data in sections. For example, split the data every 5 minutes of the past hour.
299
+ * In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
300
+ * The input should contain a JavaScript Map, containing the following:
301
+ * - A BarChartInterval string with a unique key like "hour" or "day",
302
+ * - A IntervalConfig object with details on the interval, such as the display name and the unit of time.
303
+ *
304
+ * Example input:
305
+ * ```
306
+ * {"30minutes": {
307
+ * displayName: "30Minutes", // translated automatically
308
+ * steps: 30,
309
+ * orFormat: "minute",
310
+ * momentFormat: "minutes", // using moment.js format
311
+ * millis: 1800000
312
+ * }}
313
+ * ```
314
+ * - `interval`: The key value of the selected option from intervalOptions, such as "30minute", "hour" or "week".
315
+ * In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
316
+ *
317
+ * ## Methods
318
+ *
319
+ * Methods that can be called to access component functionality.
320
+ *
321
+ * - `getDefaultTimePrefixOptions() => string[]`: undefined
322
+ * - `getDefaultTimeWindowOptions() => Map<string, [moment.unitOfTime.DurationConstructor, number]>`: undefined
323
+ * - `getDefaultIntervalOptions() => Map<BarChartInterval, IntervalConfig>`: undefined
324
+ */
325
+ "or-attribute-barchart": Partial<
326
+ OrAttributeBarChartProps & BaseProps<OrAttributeBarChart> & BaseEvents
327
+ >;
328
+ };
170
329
 
330
+ export type CustomElementsSolidJs = {
171
331
  /**
172
- *
173
- *
174
- * ## Attributes & Properties
175
- *
176
- * Component attributes and properties that can be applied to the element or by using JavaScript.
177
- *
178
- * - `assets`: Asset data to display in the bar chart. This array needs to be populated.
179
- * Used for the chart legend, information about units, and retrieval of data points.
180
- * - `assetAttributes`: List of attributes to display in the bar chart. This array needs to be populated.
181
- * Used for the chart legend, and the retrieval of data points.
182
- * Formatted as a JSON array of;
183
- *
184
- * ```[<index of assets>, Attribute]```
185
- * - `realm`: Realm name to associate all the chart data with.
186
- * - `attributeColors`: The list of HEX colors representing the line color for each AttributeRef.
187
- * Acts as an override, and will fall back to the colors attribute if not specified.
188
- * The AttributeRef object with Asset ID and Attribute name need to be present in the Chart to work.
189
- * The HEX color should be put in without '#' prefix. For example, you'd use '4d9d2a' instead of '#4d9d2a'.
190
- * - `attributeConfig`: The attribute configuration object with, for example, a list of right-axis attributes.
191
- * See BarChartAttributeConfig for full documentation on the options.
192
- * - `colors`: List of colors to display attributes values with inside the bar chart.
193
- * The array corresponds with assetAttributes, so the 1st color will be used for the 1st attribute.
194
- * - `datapointQuery`: The query object to request attribute data / data points with.
195
- * Normally, it's of type AssetDatapointIntervalQuery, including a start- and end time.
196
- * - `timeframe`: Selected timeframe using a [start date, end date] array format.
197
- * - `chartOptions`: Custom ECharts options object to configure the chart appearance.
198
- * See their documentation for more info: https://echarts.apache.org/en/option.html
199
- * - `showLegend`: Shows a right-side legend with the list of visible attributes.
200
- * - `denseLegend`: Shows the right-side legend (toggled with showLegend) in a compact / dense format.
201
- * - `stacked`: Displays the bar chart in a vertically "stacked" configuration.
202
- * It will display a cumulative effect of all data series on top of each other.
203
- * - `timestampControls`: Enables time control for the user, allowing them to customize the timeframe shown.
204
- * Leaving this disabled/unset will show them in a "read-only" state.
205
- * - `decimals`: Number of decimals to display for attributes.
206
- * - `timePrefixOptions`: A JSON array list of strings that represent the prefix options in the UI, such as "current" or "last".
207
- * In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of.
208
- * - `timePrefixKey`: The selected option from timePrefixOptions, such as "current" or "last".
209
- * In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of.
210
- * - `timeWindowOptions`: A JSON object containing a list of time window options, like "1 day", "6 hours" or "52 weeks".
211
- * In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
212
- * The input should contain a JavaScript Map, containing the following:
213
- * - A string with a unique key like "6hours",
214
- * - A combination of any moment.unitOfTime.DurationConstructor and number, like ["hours", 6]
215
- *
216
- * Example input: `{"6hours": ["hours", 6], "4weeks": ["weeks", 4]}`
217
- * - `timeWindowKey`: The key value of the selected option from timeWindowOptions, such as "1day", "6hours" or "52weeks".
218
- * In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
219
- * - `intervalOptions`: A JSON object containing a list of interval options, like "30minutes", "hour" or "day".
220
- * It determines the interval to display data in sections. For example, split the data every 5 minutes of the past hour.
221
- * In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
222
- * The input should contain a JavaScript Map, containing the following:
223
- * - A BarChartInterval string with a unique key like "hour" or "day",
224
- * - A IntervalConfig object with details on the interval, such as the display name and the unit of time.
225
- *
226
- * Example input:
227
- * ```
228
- * {"30minutes": {
229
- * displayName: "30Minutes", // translated automatically
230
- * steps: 30,
231
- * orFormat: "minute",
232
- * momentFormat: "minutes", // using moment.js format
233
- * millis: 1800000
234
- * }}
235
- * ```
236
- * - `interval`: The key value of the selected option from intervalOptions, such as "30minute", "hour" or "week".
237
- * In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
238
- *
239
- * ## Methods
240
- *
241
- * Methods that can be called to access component functionality.
242
- *
243
- * - `getDefaultTimePrefixOptions() => string[]`: undefined
244
- * - `getDefaultTimeWindowOptions() => Map<string, [moment.unitOfTime.DurationConstructor, number]>`: undefined
245
- * - `getDefaultIntervalOptions() => Map<BarChartInterval, IntervalConfig>`: undefined
246
- */
247
- "or-attribute-barchart": Partial<OrAttributeBarChartProps & BaseProps<OrAttributeBarChart> & BaseEvents>;
248
- }
332
+ *
333
+ *
334
+ * ## Attributes & Properties
335
+ *
336
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
337
+ *
338
+ * - `assets`: Asset data to display in the bar chart. This array needs to be populated.
339
+ * Used for the chart legend, information about units, and retrieval of data points.
340
+ * - `assetAttributes`: List of attributes to display in the bar chart. This array needs to be populated.
341
+ * Used for the chart legend, and the retrieval of data points.
342
+ * Formatted as a JSON array of;
343
+ *
344
+ * ```[<index of assets>, Attribute]```
345
+ * - `realm`: Realm name to associate all the chart data with.
346
+ * - `attributeColors`: The list of HEX colors representing the line color for each AttributeRef.
347
+ * Acts as an override, and will fall back to the colors attribute if not specified.
348
+ * The AttributeRef object with Asset ID and Attribute name need to be present in the Chart to work.
349
+ * The HEX color should be put in without '#' prefix. For example, you'd use '4d9d2a' instead of '#4d9d2a'.
350
+ * - `attributeConfig`: The attribute configuration object with, for example, a list of right-axis attributes.
351
+ * See BarChartAttributeConfig for full documentation on the options.
352
+ * - `colors`: List of colors to display attributes values with inside the bar chart.
353
+ * The array corresponds with assetAttributes, so the 1st color will be used for the 1st attribute.
354
+ * - `datapointQuery`: The query object to request attribute data / data points with.
355
+ * Normally, it's of type AssetDatapointIntervalQuery, including a start- and end time.
356
+ * - `timeframe`: Selected timeframe using a [start date, end date] array format.
357
+ * - `chartOptions`: Custom ECharts options object to configure the chart appearance.
358
+ * See their documentation for more info: https://echarts.apache.org/en/option.html
359
+ * - `showLegend`: Shows a right-side legend with the list of visible attributes.
360
+ * - `denseLegend`: Shows the right-side legend (toggled with showLegend) in a compact / dense format.
361
+ * - `stacked`: Displays the bar chart in a vertically "stacked" configuration.
362
+ * It will display a cumulative effect of all data series on top of each other.
363
+ * - `timestampControls`: Enables time control for the user, allowing them to customize the timeframe shown.
364
+ * Leaving this disabled/unset will show them in a "read-only" state.
365
+ * - `decimals`: Number of decimals to display for attributes.
366
+ * - `timePrefixOptions`: A JSON array list of strings that represent the prefix options in the UI, such as "current" or "last".
367
+ * In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of.
368
+ * - `timePrefixKey`: The selected option from timePrefixOptions, such as "current" or "last".
369
+ * In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of.
370
+ * - `timeWindowOptions`: A JSON object containing a list of time window options, like "1 day", "6 hours" or "52 weeks".
371
+ * In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
372
+ * The input should contain a JavaScript Map, containing the following:
373
+ * - A string with a unique key like "6hours",
374
+ * - A combination of any moment.unitOfTime.DurationConstructor and number, like ["hours", 6]
375
+ *
376
+ * Example input: `{"6hours": ["hours", 6], "4weeks": ["weeks", 4]}`
377
+ * - `timeWindowKey`: The key value of the selected option from timeWindowOptions, such as "1day", "6hours" or "52weeks".
378
+ * In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
379
+ * - `intervalOptions`: A JSON object containing a list of interval options, like "30minutes", "hour" or "day".
380
+ * It determines the interval to display data in sections. For example, split the data every 5 minutes of the past hour.
381
+ * In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
382
+ * The input should contain a JavaScript Map, containing the following:
383
+ * - A BarChartInterval string with a unique key like "hour" or "day",
384
+ * - A IntervalConfig object with details on the interval, such as the display name and the unit of time.
385
+ *
386
+ * Example input:
387
+ * ```
388
+ * {"30minutes": {
389
+ * displayName: "30Minutes", // translated automatically
390
+ * steps: 30,
391
+ * orFormat: "minute",
392
+ * momentFormat: "minutes", // using moment.js format
393
+ * millis: 1800000
394
+ * }}
395
+ * ```
396
+ * - `interval`: The key value of the selected option from intervalOptions, such as "30minute", "hour" or "week".
397
+ * In combination with the active formula in datapointQuery, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
398
+ *
399
+ * ## Methods
400
+ *
401
+ * Methods that can be called to access component functionality.
402
+ *
403
+ * - `getDefaultTimePrefixOptions() => string[]`: undefined
404
+ * - `getDefaultTimeWindowOptions() => Map<string, [moment.unitOfTime.DurationConstructor, number]>`: undefined
405
+ * - `getDefaultIntervalOptions() => Map<BarChartInterval, IntervalConfig>`: undefined
406
+ */
407
+ "or-attribute-barchart": Partial<
408
+ OrAttributeBarChartProps &
409
+ OrAttributeBarChartSolidJsProps &
410
+ BaseProps<OrAttributeBarChart> &
411
+ BaseEvents
412
+ >;
413
+ };
249
414
 
250
- export type CustomCssProperties = {
415
+ export type CustomCssProperties = {};
251
416
 
417
+ declare module "react" {
418
+ namespace JSX {
419
+ interface IntrinsicElements extends CustomElements {}
420
+ }
421
+ export interface CSSProperties extends CustomCssProperties {}
252
422
  }
253
423
 
254
-
255
- declare module 'react' {
424
+ declare module "preact" {
256
425
  namespace JSX {
257
426
  interface IntrinsicElements extends CustomElements {}
258
427
  }
259
428
  export interface CSSProperties extends CustomCssProperties {}
260
429
  }
261
430
 
262
- declare module 'preact' {
431
+ declare module "@builder.io/qwik" {
263
432
  namespace JSX {
264
433
  interface IntrinsicElements extends CustomElements {}
265
434
  }
266
435
  export interface CSSProperties extends CustomCssProperties {}
267
436
  }
268
437
 
269
- declare module '@builder.io/qwik' {
438
+ declare module "@stencil/core" {
270
439
  namespace JSX {
271
440
  interface IntrinsicElements extends CustomElements {}
272
441
  }
273
442
  export interface CSSProperties extends CustomCssProperties {}
274
443
  }
275
444
 
276
- declare module '@stencil/core' {
445
+ declare module "hono/jsx" {
277
446
  namespace JSX {
278
447
  interface IntrinsicElements extends CustomElements {}
279
448
  }
280
449
  export interface CSSProperties extends CustomCssProperties {}
281
450
  }
282
451
 
283
- declare module 'hono/jsx' {
452
+ declare module "react-native" {
284
453
  namespace JSX {
285
454
  interface IntrinsicElements extends CustomElements {}
286
455
  }
287
456
  export interface CSSProperties extends CustomCssProperties {}
288
457
  }
289
458
 
290
- declare module 'react-native' {
459
+ declare module "solid-js" {
291
460
  namespace JSX {
292
- interface IntrinsicElements extends CustomElements {}
461
+ interface IntrinsicElements extends CustomElementsSolidJs {}
293
462
  }
294
463
  export interface CSSProperties extends CustomCssProperties {}
295
464
  }