@adcops/autocore-react 3.0.28 → 3.0.31

package/dist/components/FileList.d.ts

@@ -55,6 +55,12 @@ type FileListProps = {
  * The component uses the `EventEmitterContext` to make API calls to a backend to list, download, and delete files.
  * It dynamically handles file operations based on the `domain` prop which determines the API endpoints for these actions.
  *
+ * Requires
+ * ```tsx
+ * <ConfirmPopup />
+ * ```
+ * somewhere in a top-level page.
+ *
  * Props:
  * - `domain` (string): The domain name assigned to the DATASTORE servelet containing the data.
  *      Default: "DATASTORE"

package/dist/components/FileList.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Toolbar}from"primereact/toolbar";import{Button}from"primereact/button";import{ConfirmPopup,confirmPopup}from"primereact/confirmpopup";import{FileUpload}from"primereact/fileupload";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileList=({domain:e="DATASTORE",enableUpload:t=!1,subdir:o,filter:a=".json",onSuccess:n,onError:i})=>{const[r,l]=useState(0),{invoke:s}=useContext(EventEmitterContext),[c,m]=useState(),d=e=>null!==e?void 0!==o?`${o}/${e}`:e:"",p=async()=>{try{const t=void 0!==o?{subdir:o}:{};let a=await s(e,"list_files",t),n=[];for(let e=0;e<a.data.length;++e){const t=a.data[e];n.push({id:e+1,name:t})}m(n)}catch(e){i&&i(`Failed to upload file list: ${e}`)}};const u=()=>{l((e=>e+1))},f=`File Listing [/${void 0!==o?o:""}]`,x=_jsx(React.Fragment,{children:_jsx("span",{style:{fontWeight:600},children:f})}),b=_jsxs(React.Fragment,{children:[t&&_jsx(FileUpload,{customUpload:!0,auto:!0,uploadHandler:async t=>{const o=t.files[0];let a=d(o.name);const r=new FileReader;r.onload=async t=>{const r=t.target?.result,l=function c(e){let t="",o=new Uint8Array(e),a=o.byteLength;for(let e=0;e<a;e++)t+=String.fromCharCode(o[e]);return window.btoa(t)}(r);try{await s(e,"write_file",{file_name:a,value:l,options:{base64:!0}}),n&&n(`Uploaded file ${o.name}`),p()}catch(e){i&&i(`Failed to upload file: ${e}`)}u()},r.onerror=e=>{i&&i(`Error reading file: ${e}`)},r.readAsArrayBuffer(o)},accept:a,maxFileSize:25e3,mode:"basic",chooseLabel:"",chooseOptions:{icon:"pi pi-upload",className:"p-button-icon-only p-button-text p-button-rounded p-mr-2"}},r),_jsx(Button,{icon:"pi pi-refresh",onClick:()=>{p()},className:"p-button-rounded p-mr-2","aria-label":"Refresh",size:"small",rounded:!0,text:!0})]}),_=(t,o)=>{confirmPopup({target:o.currentTarget,message:`Are you want to delete file ${t.name}?\nWARNING: This cannot be undone.`,icon:"pi pi-info-circle",defaultFocus:"reject",acceptClassName:"p-button-danger",accept:()=>(async t=>{let o=d(t);try{await s(e,"delete_file",{file_name:o}),n&&n(`Deleted file: ${t}`),p()}catch(e){i&&i(`Failed to delete file: ${e}`)}p()})(t.name)})};return useEffect((()=>(p(),()=>{})),[e,t]),_jsxs("div",{children:[_jsx(Toolbar,{start:x,end:b,style:{padding:"1mm"}}),_jsx(ConfirmPopup,{}),_jsxs(DataTable,{value:c,children:[_jsx(Column,{field:"name",header:"Name"}),_jsx(Column,{body:t=>_jsxs(_Fragment,{children:[_jsx(Button,{icon:"pi pi-download",onClick:()=>(async t=>{let o=d(t.name);try{await s(e,"download_file",{file_name:o}),n&&n(`Downloaded file: ${t.name}`)}catch(e){i&&i(`Failed downloading file: ${e}`)}})(t),className:"p-button-rounded p-button-success p-mr-2",style:{marginRight:"2mm"},size:"small"}),_jsx(Button,{icon:"pi pi-trash",onClick:e=>_(t,e),className:"p-button-rounded p-button-danger",size:"small"})]}),header:"Actions"})]})]})};export default FileList;
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Toolbar}from"primereact/toolbar";import{Button}from"primereact/button";import{confirmPopup}from"primereact/confirmpopup";import{FileUpload}from"primereact/fileupload";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileList=({domain:e="DATASTORE",enableUpload:t=!1,subdir:o,filter:a=".json",onSuccess:n,onError:i})=>{const[r,l]=useState(0),{invoke:s}=useContext(EventEmitterContext),[c,d]=useState(),m=e=>null!==e?void 0!==o?`${o}/${e}`:e:"",p=async()=>{try{const t=void 0!==o?{subdir:o}:{};let a=await s(e,"list_files",t),n=[];for(let e=0;e<a.data.length;++e){const t=a.data[e];n.push({id:e+1,name:t})}d(n)}catch(e){i&&i(`Failed to upload file list: ${e}`)}};const u=()=>{l((e=>e+1))},f=`File Listing [/${void 0!==o?o:""}]`,x=_jsx(React.Fragment,{children:_jsx("span",{style:{fontWeight:600},children:f})}),b=_jsxs(React.Fragment,{children:[t&&_jsx(FileUpload,{customUpload:!0,auto:!0,uploadHandler:async t=>{const o=t.files[0];let a=m(o.name);const r=new FileReader;r.onload=async t=>{const r=t.target?.result,l=function c(e){let t="",o=new Uint8Array(e),a=o.byteLength;for(let e=0;e<a;e++)t+=String.fromCharCode(o[e]);return window.btoa(t)}(r);try{await s(e,"write_file",{file_name:a,value:l,options:{base64:!0}}),n&&n(`Uploaded file ${o.name}`),p()}catch(e){i&&i(`Failed to upload file: ${e}`)}u()},r.onerror=e=>{i&&i(`Error reading file: ${e}`)},r.readAsArrayBuffer(o)},accept:a,maxFileSize:25e3,mode:"basic",chooseLabel:"",chooseOptions:{icon:"pi pi-upload",className:"p-button-icon-only p-button-text p-button-rounded p-mr-2"}},r),_jsx(Button,{icon:"pi pi-refresh",onClick:()=>{p()},className:"p-button-rounded p-mr-2","aria-label":"Refresh",size:"small",rounded:!0,text:!0})]}),h=(t,o)=>{confirmPopup({target:o.currentTarget,message:`Are you want to delete file ${t.name}?\nWARNING: This cannot be undone.`,icon:"pi pi-info-circle",defaultFocus:"reject",acceptClassName:"p-button-danger",accept:()=>(async t=>{let o=m(t);try{await s(e,"delete_file",{file_name:o}),n&&n(`Deleted file: ${t}`),p()}catch(e){i&&i(`Failed to delete file: ${e}`)}p()})(t.name)})};return useEffect((()=>(p(),()=>{})),[e,t]),_jsxs("div",{children:[_jsx(Toolbar,{start:x,end:b,style:{padding:"1mm"}}),_jsxs(DataTable,{value:c,children:[_jsx(Column,{field:"name",header:"Name"}),_jsx(Column,{body:t=>_jsxs(_Fragment,{children:[_jsx(Button,{icon:"pi pi-download",onClick:()=>(async t=>{let o=m(t.name);try{await s(e,"download_file",{file_name:o}),n&&n(`Downloaded file: ${t.name}`)}catch(e){i&&i(`Failed downloading file: ${e}`)}})(t),className:"p-button-rounded p-button-success p-mr-2",style:{marginRight:"2mm"},size:"small"}),_jsx(Button,{icon:"pi pi-trash",onClick:e=>h(t,e),className:"p-button-rounded p-button-danger",size:"small"})]}),header:"Actions"})]})]})};export default FileList;

package/dist/components/FileSelect.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 type FileSelectProps = {
     domain?: string;
     subdir?: string;
+    /** Filter results using unix-style patterns. */
+    filter?: string | null;
     onFileSelected?: (fileName: string) => void;
     onAccept?: (fileName: string) => void;
     onCancel?: () => void;

package/dist/components/FileSelect.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileSelect=({domain:e="DATASTORE",subdir:t,onFileSelected:n,onAccept:a,onCancel:l})=>{const{invoke:i}=useContext(EventEmitterContext),[o,s]=useState([]),[c,m]=useState(null),r=e=>{m(e),n&&n(e.name)};return useEffect((()=>{(async()=>{try{const n=t?{subdir:t}:{},a=(await i(e,"list_files",n)).data.map(((e,t)=>({id:t+1,name:e})));s(a)}catch(e){}})()}),[e,t]),_jsxs("div",{children:[_jsxs(DataTable,{value:o,selectionMode:"single",selection:c,onSelectionChange:e=>r(e.value),children:[_jsx(Column,{field:"name",header:"File Name"}),_jsx(Column,{body:e=>_jsx(Button,{label:c?.name===e.name?"Selected":"Select",icon:c?.name===e.name?"pi pi-check-circle":"pi pi-circle-off",onClick:()=>r(e),className:"p-button-rounded "+(c?.name===e.name?"p-button-success":"p-button-outlined"),"aria-label":"Select",size:"small"}),header:"Select"})]}),_jsxs("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:"10px"},children:[_jsx(Button,{label:"Cancel",icon:"pi pi-times",className:"p-button-text",onClick:l}),_jsx(Button,{label:"Accept",icon:"pi pi-check",className:"p-button",onClick:()=>{void 0!==a&&null!==c&&a(null!==c?void 0!==t?`${t}/${c.name}`:c.name:"")},disabled:!c})]})]})};export default FileSelect;
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileSelect=({domain:e="DATASTORE",subdir:t,filter:n,onFileSelected:l,onAccept:i,onCancel:o})=>{const{invoke:a}=useContext(EventEmitterContext),[s,c]=useState([]),[r,m]=useState(null),u=e=>{m(e),l&&l(e.name)};return useEffect((()=>{(async()=>{try{let l;l=null!=n?t?{subdir:t,options:{filter:n}}:{options:{filter:n}}:t?{subdir:t}:{};const i=(await a(e,"list_files",l)).data.map(((e,t)=>({id:t+1,name:e})));c(i)}catch(e){}})()}),[e,t]),_jsxs("div",{children:[_jsxs(DataTable,{value:s,selectionMode:"single",selection:r,onSelectionChange:e=>u(e.value),children:[_jsx(Column,{field:"name",header:"File Name"}),_jsx(Column,{body:e=>_jsx(Button,{label:r?.name===e.name?"Selected":"Select",icon:r?.name===e.name?"pi pi-check-circle":"pi pi-circle-off",onClick:()=>u(e),className:"p-button-rounded "+(r?.name===e.name?"p-button-success":"p-button-outlined"),"aria-label":"Select",size:"small"}),header:"Select"})]}),_jsxs("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:"10px"},children:[_jsx(Button,{label:"Cancel",icon:"pi pi-times",className:"p-button-text",onClick:o}),_jsx(Button,{label:"Accept",icon:"pi pi-check",className:"p-button",onClick:()=>{void 0!==i&&null!==r&&i(null!==r?void 0!==t?`${t}/${r.name}`:r.name:"")},disabled:!r})]})]})};export default FileSelect;

package/dist/components/IndicatorRect.d.ts

@@ -0,0 +1,87 @@
+import { Component } from 'react';
+import { EventEmitterContextType } from '../core/EventEmitterContext';
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+/**
+ * Common properties for an indicator rectangle component.
+ * This component is used for displaying states and is not interactive.
+ * It is commonly used in industrial HMIs for visual indication purposes.
+ *
+ * These properties support displaying values of boolean, number, and string states.
+ *
+ * Available boolean states: **on**, **off**, and **not available**:
+ *
+ * * `true` is treated as **on**
+ * * `false` is treated as **off**
+ * * `undefined` is treated as **not available**
+ *
+ * Numeric values can be used. When there are 2 or fewer possible states,
+ * 0 will be considered false (OFF), anything else will be considered true (ON).
+ * Undefined will be treated as "not available."
+ *
+ * When the indicator contains more than 2 states, the number will be matched
+ * to the available state, in order. More than two states requires usage of the
+ * `options` field and declaring more than two states there.
+ *
+ * If a string state is used, it will be matched exactly to the corresponding
+ * label in the `options` field.
+ */
+export interface IndicatorRectProps {
+    /**
+     * Topic name to monitor for state indication.
+     */
+    topic?: string;
+    /**
+     * State to be displayed.
+     */
+    value?: boolean | number | string;
+    /**
+     * Color for the rectangle when the state is TRUE.
+     */
+    onColor?: IndicatorColor;
+    /**
+     * Color for the rectangle when the state is FALSE.
+     */
+    offColor?: IndicatorColor;
+    /**
+     * An array of string labels to display as the available options.
+     *
+     * For items with 2 states or less:
+     * Index 0 is the label when value is OFF.
+     * Index 1 is the label when value is ON.
+     *
+     * If only one value is given (Index 0), then that value is used for all states.
+     */
+    options?: string[];
+    /**
+     * Additional CSS class name to apply to the rectangle.
+     */
+    className?: string;
+    /**
+     * Additional inline styles to apply to the rectangle.
+     */
+    style?: React.CSSProperties;
+}
+interface IndicatorRectState {
+    currentValue?: boolean | number | string;
+}
+export declare class IndicatorRect extends Component<IndicatorRectProps, IndicatorRectState> {
+    static contextType: import("react").Context<EventEmitterContextType>;
+    static defaultProps: {
+        onColor: IndicatorColor;
+        offColor: string;
+    };
+    constructor(props: IndicatorRectProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    /**
+     * Sets up subscriptions based on the provided topic.
+     */
+    private setupSubscriptions;
+    /**
+     * Handles updates for the main topic.
+     */
+    private handleTopicUpdate;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default IndicatorRect;

package/dist/components/IndicatorRect.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};export class IndicatorRect extends Component{constructor(t){super(t),Object.defineProperty(this,"handleTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:t=>{this.setState({currentValue:t})}}),this.state={currentValue:void 0}}componentDidMount(){this.setupSubscriptions()}componentWillUnmount(){}setupSubscriptions(){const{topic:t}=this.props,{subscribe:e}=this.context;t&&e(t,this.handleTopicUpdate)}render(){const{currentValue:t}=this.state,{className:e,style:o,value:r,onColor:n,offColor:i,options:c}=this.props;let a,l=t;void 0!==r&&(l=r),void 0!==c&&c.length>0&&(a=l?c[1]:c[0]);let s=l?n:i;return void 0===l&&(s=IndicatorColor.IndicatorInvalid),_jsx("div",{className:`indicator-rect ${e||""}`,style:{backgroundColor:s,color:"white",width:"100px",height:"100px",display:"flex",alignItems:"center",justifyContent:"center",...o},children:a})}}Object.defineProperty(IndicatorRect,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(IndicatorRect,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{onColor:IndicatorColor.IndicatorGreen,offColor:"gray"}});export default IndicatorRect;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.28",
+    "version": "3.0.31",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/FileList.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-24 16:01:53
  * -----
- * Last Modified: 2024-05-21 13:38:23
+ * Last Modified: 2025-01-20 19:15:50
  * -----
  * 
  */
@@ -20,7 +20,7 @@ import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Toolbar } from 'primereact/toolbar';
 import { Button } from 'primereact/button';
-import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
+import { confirmPopup } from 'primereact/confirmpopup';
 import { FileUpload, FileUploadHandlerEvent} from 'primereact/fileupload';
 
 import { EventEmitterContext } from '../core/EventEmitterContext';
@@ -95,6 +95,12 @@ type FileItem = {
  * The component uses the `EventEmitterContext` to make API calls to a backend to list, download, and delete files.
  * It dynamically handles file operations based on the `domain` prop which determines the API endpoints for these actions.
  *
+ * Requires 
+ * ```tsx
+ * <ConfirmPopup />
+ * ```
+ * somewhere in a top-level page.
+ * 
  * Props:
  * - `domain` (string): The domain name assigned to the DATASTORE servelet containing the data.
  *      Default: "DATASTORE"
@@ -354,8 +360,7 @@ export const FileList: React.FC<FileListProps> = ({
     return (
 
         <div>
-            <Toolbar start={toolbarStartContents} end={toolbarEndContents} style={{ padding: "1mm" }} />
-            <ConfirmPopup />
+            <Toolbar start={toolbarStartContents} end={toolbarEndContents} style={{ padding: "1mm" }} />            
             <DataTable value={files}>
                 <Column field="name" header="Name"></Column>
 

package/src/components/FileSelect.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-28 16:06:59
  * -----
- * Last Modified: 2024-05-01 07:30:49
+ * Last Modified: 2024-06-12 14:40:20
  * -----
  * 
  */
@@ -18,6 +18,8 @@ import { EventEmitterContext } from "../core/EventEmitterContext";
 type FileSelectProps = {
     domain?: string,
     subdir?: string,
+    /** Filter results using unix-style patterns. */
+    filter?: string | null,
     onFileSelected?: (fileName: string) => void,
     onAccept?: (fileName: string) => void,
     onCancel?: () => void
@@ -31,6 +33,7 @@ type FileItem = {
 export const FileSelect: React.FC<FileSelectProps> = ({
     domain = "DATASTORE",
     subdir,
+    filter,
     onFileSelected,
     onAccept,
     onCancel
@@ -41,7 +44,16 @@ export const FileSelect: React.FC<FileSelectProps> = ({
 
     const listFiles = async () => {
         try {
-            const args = subdir ? { "subdir": subdir } : {};
+            
+            let args;
+
+            if (filter !== undefined && filter !== null) {
+                args = subdir ? { "subdir": subdir, options : {"filter" : filter }} : {options : {"filter" : filter }};
+            }
+            else {
+                args = subdir ? { "subdir": subdir } : {};
+            }
+
             const res = await invoke(domain, "list_files", args);
             const items = res.data.map((item: string, index: number) => ({
                 id: index + 1,

package/src/components/IndicatorRect.tsx

@@ -0,0 +1,172 @@
+/*
+ * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2025-01-20 15:09:55
+ * -----
+ * Last Modified: 2025-01-20 15:10:06
+ * -----
+ * 
+ */
+
+import { Component } from 'react';
+import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+
+/**
+ * Common properties for an indicator rectangle component. 
+ * This component is used for displaying states and is not interactive.
+ * It is commonly used in industrial HMIs for visual indication purposes.
+ *
+ * These properties support displaying values of boolean, number, and string states.
+ *
+ * Available boolean states: **on**, **off**, and **not available**:
+ *
+ * * `true` is treated as **on**
+ * * `false` is treated as **off**
+ * * `undefined` is treated as **not available**
+ *
+ * Numeric values can be used. When there are 2 or fewer possible states,
+ * 0 will be considered false (OFF), anything else will be considered true (ON).
+ * Undefined will be treated as "not available."
+ *
+ * When the indicator contains more than 2 states, the number will be matched
+ * to the available state, in order. More than two states requires usage of the
+ * `options` field and declaring more than two states there.
+ *
+ * If a string state is used, it will be matched exactly to the corresponding
+ * label in the `options` field.
+ */
+export interface IndicatorRectProps {
+
+    /**
+     * Topic name to monitor for state indication.
+     */
+    topic?: string;
+
+    /**
+     * State to be displayed.
+     */
+    value?: boolean | number | string;
+
+    /**
+     * Color for the rectangle when the state is TRUE.
+     */
+    onColor?: IndicatorColor;
+
+    /**
+     * Color for the rectangle when the state is FALSE.
+     */
+    offColor?: IndicatorColor;
+
+    /**
+     * An array of string labels to display as the available options.
+     * 
+     * For items with 2 states or less:
+     * Index 0 is the label when value is OFF.
+     * Index 1 is the label when value is ON.
+     * 
+     * If only one value is given (Index 0), then that value is used for all states.
+     */
+    options?: string[];
+
+    /**
+     * Additional CSS class name to apply to the rectangle.
+     */
+    className?: string;
+
+    /**
+     * Additional inline styles to apply to the rectangle.
+     */
+    style?: React.CSSProperties;
+
+}
+
+interface IndicatorRectState {
+    currentValue?: boolean | number | string;
+}
+
+export class IndicatorRect extends Component<IndicatorRectProps, IndicatorRectState> {
+    static contextType = EventEmitterContext;
+
+    // Define default props
+    static defaultProps = {
+        onColor: IndicatorColor.IndicatorGreen,
+        offColor: "gray", // Default offColor
+    };
+
+    constructor(props: IndicatorRectProps) {
+        super(props);
+        this.state = {
+            currentValue: undefined,
+        };
+    }
+
+    componentDidMount() {
+        this.setupSubscriptions();
+    }
+
+    componentWillUnmount() {
+        // Unsubscribe logic if needed
+    }
+
+    /**
+     * Sets up subscriptions based on the provided topic.
+     */
+    private setupSubscriptions() {
+        const { topic } = this.props;
+        const { subscribe } = this.context as EventEmitterContextType;
+
+        if (topic) {
+            subscribe(topic, this.handleTopicUpdate);
+        }
+    }
+
+    /**
+     * Handles updates for the main topic.
+     */
+    private handleTopicUpdate = (value: boolean | number | string) => {
+        this.setState({ currentValue: value });
+    };
+
+    render() {
+        const { currentValue } = this.state;
+        const { className, style, value, onColor, offColor, options } = this.props;
+
+        // Load the value from the proper source
+        let displayValue = currentValue;
+        if (value !== undefined) {
+            displayValue = value;
+        }
+
+        // Determine the label and color based on the current state
+        let rectLabel = undefined;
+        if (options !== undefined && options.length > 0) {
+            rectLabel = displayValue ? options[1] : options[0];
+        }
+
+        let color = displayValue ? onColor : offColor;
+        if (displayValue === undefined) {
+            color = IndicatorColor.IndicatorInvalid;
+        }
+
+        return (
+            <div
+                className={`indicator-rect ${className || ""}`}
+                style={{
+                    backgroundColor: color,
+                    color: "white",
+                    width: "100px",
+                    height: "100px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    ...style,
+                }}
+            >
+                {rectLabel}
+            </div>
+        );
+    }
+}
+
+export default IndicatorRect;