@openremote/or-attribute-barchart 1.11.0-snapshot.20251103144513 → 1.11.0

package/custom-elements-jsx.d.ts

@@ -0,0 +1,302 @@
+
+import type { OrAttributeBarChart } from "./lib/index.d.ts";
+
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
+ */
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = ""
+> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+type BaseProps<T extends HTMLElement> = {
+
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: string;
+  /** 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. */
+  part?: string;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: T | ((e: T) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+  /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: "auto" | "hint" | "manual";
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
+  /** Specifies the action to be performed on a popover element being controlled by a control element. */
+  popovertargetaction?: "show" | "hide" | "toggle";
+
+} ;
+
+type BaseEvents = {
+
+
+};
+
+
+
+export type OrAttributeBarChartProps = {
+  /** Asset data to display in the bar chart. This array needs to be populated.
+Used for the chart legend, information about units, and retrieval of data points. */
+  "assets"?: OrAttributeBarChart['assets'];
+  /** List of attributes to display in the bar chart. This array needs to be populated.
+Used for the chart legend, and the retrieval of data points.
+Formatted as a JSON array of;
+
+```[<index of assets>, Attribute]``` */
+  "assetAttributes"?: OrAttributeBarChart['assetAttributes'];
+  /** Realm name to associate all the chart data with. */
+  "realm"?: OrAttributeBarChart['realm'];
+  /** The list of HEX colors representing the line color for each AttributeRef.
+Acts as an override, and will fall back to the colors attribute if not specified.
+The AttributeRef object with Asset ID and Attribute name need to be present in the Chart to work.
+The HEX color should be put in without '#' prefix. For example, you'd use '4d9d2a' instead of '#4d9d2a'. */
+  "attributeColors"?: OrAttributeBarChart['attributeColors'];
+  /** The attribute configuration object with, for example, a list of right-axis attributes.
+See BarChartAttributeConfig for full documentation on the options. */
+  "attributeConfig"?: OrAttributeBarChart['attributeConfig'];
+  /** List of colors to display attributes values with inside the bar chart.
+The array corresponds with assetAttributes, so the 1st color will be used for the 1st attribute. */
+  "colors"?: OrAttributeBarChart['colors'];
+  /** The query object to request attribute data / data points with.
+Normally, it's of type AssetDatapointIntervalQuery, including a start- and end time. */
+  "datapointQuery"?: OrAttributeBarChart['datapointQuery'];
+  /** Selected timeframe using a [start date, end date] array format. */
+  "timeframe"?: OrAttributeBarChart['timeframe'];
+  /** Custom ECharts options object to configure the chart appearance.
+See their documentation for more info: https://echarts.apache.org/en/option.html */
+  "chartOptions"?: OrAttributeBarChart['chartOptions'];
+  /** Shows a right-side legend with the list of visible attributes. */
+  "showLegend"?: OrAttributeBarChart['showLegend'];
+  /** Shows the right-side legend (toggled with showLegend) in a compact / dense format. */
+  "denseLegend"?: OrAttributeBarChart['denseLegend'];
+  /** Displays the bar chart in a vertically "stacked" configuration.
+It will display a cumulative effect of all data series on top of each other. */
+  "stacked"?: OrAttributeBarChart['stacked'];
+  /** Enables time control for the user, allowing them to customize the timeframe shown.
+Leaving this disabled/unset will show them in a "read-only" state. */
+  "timestampControls"?: OrAttributeBarChart['timestampControls'];
+  /** Number of decimals to display for attributes. */
+  "decimals"?: OrAttributeBarChart['decimals'];
+  /** A JSON array list of strings that represent the prefix options in the UI, such as "current" or "last".
+In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. */
+  "timePrefixOptions"?: OrAttributeBarChart['timePrefixOptions'];
+  /** The selected option from timePrefixOptions, such as "current" or "last".
+In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. */
+  "timePrefixKey"?: OrAttributeBarChart['timePrefixKey'];
+  /** A JSON object containing a list of time window options, like "1 day", "6 hours" or "52 weeks".
+In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
+The input should contain a JavaScript Map, containing the following:
+- A string with a unique key like "6hours",
+- A combination of any moment.unitOfTime.DurationConstructor and number, like ["hours", 6]
+
+Example input: `{"6hours": ["hours", 6], "4weeks": ["weeks", 4]}` */
+  "timeWindowOptions"?: OrAttributeBarChart['timeWindowOptions'];
+  /** The key value of the selected option from timeWindowOptions, such as "1day", "6hours" or "52weeks".
+In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of. */
+  "timeWindowKey"?: OrAttributeBarChart['timeWindowKey'];
+  /** A JSON object containing a list of interval options, like "30minutes", "hour" or "day".
+It determines the interval to display data in sections. For example, split the data every 5 minutes of the past hour.
+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.
+The input should contain a JavaScript Map, containing the following:
+- A BarChartInterval string with a unique key like "hour" or "day",
+- A IntervalConfig object with details on the interval, such as the display name and the unit of time.
+
+Example input:
+```
+{"30minutes": {
+  displayName: "30Minutes", // translated automatically
+  steps: 30,
+  orFormat: "minute",
+  momentFormat: "minutes", // using moment.js format
+  millis: 1800000
+}}
+``` */
+  "intervalOptions"?: OrAttributeBarChart['intervalOptions'];
+  /** The key value of the selected option from intervalOptions, such as "30minute", "hour" or "week".
+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. */
+  "interval"?: OrAttributeBarChart['interval'];
+
+
+}
+
+  export type CustomElements = {
+
+
+  /**
+     * 
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `assets`: Asset data to display in the bar chart. This array needs to be populated.
+ * Used for the chart legend, information about units, and retrieval of data points. 
+ * - `assetAttributes`: List of attributes to display in the bar chart. This array needs to be populated.
+ * Used for the chart legend, and the retrieval of data points.
+ * Formatted as a JSON array of;
+ * 
+ * ```[<index of assets>, Attribute]``` 
+ * - `realm`: Realm name to associate all the chart data with. 
+ * - `attributeColors`: The list of HEX colors representing the line color for each AttributeRef.
+ * Acts as an override, and will fall back to the colors attribute if not specified.
+ * The AttributeRef object with Asset ID and Attribute name need to be present in the Chart to work.
+ * The HEX color should be put in without '#' prefix. For example, you'd use '4d9d2a' instead of '#4d9d2a'. 
+ * - `attributeConfig`: The attribute configuration object with, for example, a list of right-axis attributes.
+ * See BarChartAttributeConfig for full documentation on the options. 
+ * - `colors`: List of colors to display attributes values with inside the bar chart.
+ * The array corresponds with assetAttributes, so the 1st color will be used for the 1st attribute. 
+ * - `datapointQuery`: The query object to request attribute data / data points with.
+ * Normally, it's of type AssetDatapointIntervalQuery, including a start- and end time. 
+ * - `timeframe`: Selected timeframe using a [start date, end date] array format. 
+ * - `chartOptions`: Custom ECharts options object to configure the chart appearance.
+ * See their documentation for more info: https://echarts.apache.org/en/option.html 
+ * - `showLegend`: Shows a right-side legend with the list of visible attributes. 
+ * - `denseLegend`: Shows the right-side legend (toggled with showLegend) in a compact / dense format. 
+ * - `stacked`: Displays the bar chart in a vertically "stacked" configuration.
+ * It will display a cumulative effect of all data series on top of each other. 
+ * - `timestampControls`: Enables time control for the user, allowing them to customize the timeframe shown.
+ * Leaving this disabled/unset will show them in a "read-only" state. 
+ * - `decimals`: Number of decimals to display for attributes. 
+ * - `timePrefixOptions`: A JSON array list of strings that represent the prefix options in the UI, such as "current" or "last".
+ * In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. 
+ * - `timePrefixKey`: The selected option from timePrefixOptions, such as "current" or "last".
+ * In combination with timeWindowOptions, it provides a timeframe like "current 1 hour" to display data of. 
+ * - `timeWindowOptions`: A JSON object containing a list of time window options, like "1 day", "6 hours" or "52 weeks".
+ * In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of.
+ * The input should contain a JavaScript Map, containing the following:
+ * - A string with a unique key like "6hours",
+ * - A combination of any moment.unitOfTime.DurationConstructor and number, like ["hours", 6]
+ * 
+ * Example input: `{"6hours": ["hours", 6], "4weeks": ["weeks", 4]}` 
+ * - `timeWindowKey`: The key value of the selected option from timeWindowOptions, such as "1day", "6hours" or "52weeks".
+ * In combination with timePrefixOptions, it provides a timeframe like "last 6 hours" to display data of. 
+ * - `intervalOptions`: A JSON object containing a list of interval options, like "30minutes", "hour" or "day".
+ * It determines the interval to display data in sections. For example, split the data every 5 minutes of the past hour.
+ * 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.
+ * The input should contain a JavaScript Map, containing the following:
+ * - A BarChartInterval string with a unique key like "hour" or "day",
+ * - A IntervalConfig object with details on the interval, such as the display name and the unit of time.
+ * 
+ * Example input:
+ * ```
+ * {"30minutes": {
+ *   displayName: "30Minutes", // translated automatically
+ *   steps: 30,
+ *   orFormat: "minute",
+ *   momentFormat: "minutes", // using moment.js format
+ *   millis: 1800000
+ * }}
+ * ``` 
+ * - `interval`: The key value of the selected option from intervalOptions, such as "30minute", "hour" or "week".
+ * 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. 
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `getDefaultTimePrefixOptions() => string[]`: undefined
+ * - `getDefaultTimeWindowOptions() => Map<string, [moment.unitOfTime.DurationConstructor, number]>`: undefined
+ * - `getDefaultIntervalOptions() => Map<BarChartInterval, IntervalConfig>`: undefined
+  */
+    "or-attribute-barchart": Partial<OrAttributeBarChartProps & BaseProps<OrAttributeBarChart> & BaseEvents>;
+  }
+
+export type CustomCssProperties = {
+
+}
+
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module '@builder.io/qwik' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module '@stencil/core' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module 'hono/jsx' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module 'react-native' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}

package/custom-elements.json

@@ -683,6 +683,9 @@
                 "type": {
                   "text": "string[]"
                 }
+              },
+              "type": {
+                "text": "getDefaultTimePrefixOptions() => string[]"
               }
             },
             {
@@ -694,6 +697,9 @@
                 "type": {
                   "text": "Map<string, [moment.unitOfTime.DurationConstructor, number]>"
                 }
+              },
+              "type": {
+                "text": "getDefaultTimeWindowOptions() => Map<string, [moment.unitOfTime.DurationConstructor, number]>"
               }
             },
             {
@@ -705,6 +711,9 @@
                 "type": {
                   "text": "Map<BarChartInterval, IntervalConfig>"
                 }
+              },
+              "type": {
+                "text": "getDefaultIntervalOptions() => Map<BarChartInterval, IntervalConfig>"
               }
             }
           ],
@@ -887,7 +896,9 @@
             "package": "lit"
           },
           "tagName": "or-attribute-barchart",
-          "customElement": true
+          "customElement": true,
+          "modulePath": "src/index.ts",
+          "definitionPath": "src/index.ts"
         }
       ],
       "exports": [