Milesight-IoT · zaishuiyufang · Dec 24, 2024
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -37,6 +37,7 @@
         "react-intl-universal": "^2.11.1",
         "react-router": "^6.26.1",
         "react-router-dom": "^6.26.1",
+        "react-window": "^1.8.10",
         "zustand": "^4.5.5"
     },
     "devDependencies": {

diff --git a/apps/web/src/plugin/components/multi-entity-select/ListboxComponent.tsx b/apps/web/src/plugin/components/multi-entity-select/ListboxComponent.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { VariableSizeList, ListChildComponentProps } from 'react-window';
+import Typography from '@mui/material/Typography';
+
+const LISTBOX_PADDING = 8; // px
+
+const OuterElementContext = React.createContext({});
+
+const OuterElementType = React.forwardRef<HTMLDivElement>((props, ref) => {
+    const outerProps = React.useContext(OuterElementContext);
+    return <div ref={ref} {...props} {...outerProps} />;
+});
+
+// Adapter for react-window
+const ListboxComponent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement>>(
+    function ListboxComponent(props, ref) {
+        const { children, ...other } = props;
+        const itemData: React.ReactElement<unknown>[] = [];
+        (children as React.ReactElement<unknown>[]).forEach(
+            (
+                item: React.ReactElement<unknown> & {
+                    children?: React.ReactElement<unknown>[];
+                },
+            ) => {
+                itemData.push(item);
+            },
+        );
+
+        const itemCount = itemData.length;
+        const childSize = 48; // 每个子元素的高度
+
+        const useResetCache = (data: any) => {
+            const ref = React.useRef<VariableSizeList>(null);
+            React.useEffect(() => {
+                if (ref.current != null) {
+                    ref.current.resetAfterIndex(0, true);
+                }
+            }, [data]);
+            return ref;
+        };
+
+        const renderRow = (props: ListChildComponentProps) => {
+            const { data, index, style } = props;
+            const dataSet = data[index];
+            const inlineStyle = {
+                ...style,
+                top: (style.top as number) + LISTBOX_PADDING,
+            };
+
+            const [rowProps, option, state, renderOption] = dataSet;
+
+            const { key, ...optionProps } = rowProps;
+            return (
+                <Typography key={key} component="li" {...optionProps} noWrap style={inlineStyle}>
+                    {renderOption(rowProps, option, state)}
+                </Typography>
+            );
+        };
+
+        const getHeight = () => {
+            if (itemCount > 8) {
+                return 8 * childSize;
+            }
+            return itemCount * childSize;
+        };
+
+        const gridRef = useResetCache(itemCount);
+
+        return (
+            <div ref={ref}>
+                <OuterElementContext.Provider value={other}>
+                    <VariableSizeList
+                        itemData={itemData}
+                        height={getHeight() + 2 * LISTBOX_PADDING}
+                        width="100%"
+                        ref={gridRef}
+                        outerElementType={OuterElementType}
+                        innerElementType="ul"
+                        itemSize={() => childSize}
+                        overscanCount={5}
+                        itemCount={itemCount}
+                    >
+                        {renderRow}
+                    </VariableSizeList>
+                </OuterElementContext.Provider>
+            </div>
+        );
+    },
+);
+
+export default ListboxComponent;
diff --git a/apps/web/src/plugin/components/multi-entity-select/index.tsx b/apps/web/src/plugin/components/multi-entity-select/index.tsx
@@ -1,11 +1,21 @@
-import { Autocomplete, TextField, Checkbox, Tooltip, Chip } from '@mui/material';
+import {
+    Autocomplete,
+    TextField,
+    Checkbox,
+    Tooltip,
+    Chip,
+    styled,
+    Popper,
+    autocompleteClasses,
+} from '@mui/material';
 
 import type { AutocompleteProps } from '@mui/material';
 
 import { useI18n } from '@milesight/shared/src/hooks';
 import { useEntitySelectOptions } from '../../hooks';
 
 import './style.less';
+import ListboxComponent from './ListboxComponent';
 
 type EntitySelectProps = AutocompleteProps<EntityOptionType, true, false, undefined> &
     EntitySelectCommonProps<EntityOptionType[]>;
@@ -47,24 +57,32 @@ const MultiEntitySelect = (props: EntitySelectProps) => {
     });
 
     const renderOption: EntitySelectProps['renderOption'] = (optionProps, option, { selected }) => {
-        const { label, value, description } = option || {};
+        const { label, description } = option || {};
 
         return (
-            <li {...(optionProps || {})} key={value}>
-                <div className="ms-multi-entity-select">
-                    <Checkbox style={{ marginRight: 8 }} checked={selected} />
-                    <div className="ms-entity-select-item">
-                        <div className="ms-entity-select-item__label" title={label}>
-                            {label}
-                        </div>
-                        <div className="ms-entity-select-item__description" title={description}>
-                            {description}
-                        </div>
+            <div className="ms-multi-entity-select">
+                <Checkbox style={{ marginRight: 8 }} checked={selected} />
+                <div className="ms-entity-select-item">
+                    <div className="ms-entity-select-item__label" title={label}>
+                        {label}
+                    </div>
+                    <div className="ms-entity-select-item__description" title={description}>
+                        {description}
                     </div>
                 </div>
-            </li>
+            </div>
         );
     };
+
+    const StyledPopper = styled(Popper)({
+        [`& .${autocompleteClasses.listbox}`]: {
+            boxSizing: 'border-box',
+            '& ul': {
+                padding: 0,
+                margin: 0,
+            },
+        },
+    });
     return (
         <Autocomplete
             {...restProps}
@@ -99,7 +117,9 @@ const MultiEntitySelect = (props: EntitySelectProps) => {
                     }
                 />
             )}
-            renderOption={renderOption}
+            renderOption={(props, option, state) =>
+                [{ ...props, key: option.value }, option, state, renderOption] as React.ReactNode
+            }
             getOptionLabel={option => option?.label || ''}
             loading={loading}
             filterOptions={options => options}
@@ -108,7 +128,6 @@ const MultiEntitySelect = (props: EntitySelectProps) => {
                     getEntityOptions();
                     return;
                 }
-
                 getEntityOptions(keyword);
             }}
             isOptionEqualToValue={(option, currentVal) => option.value === currentVal.value}
@@ -122,6 +141,10 @@ const MultiEntitySelect = (props: EntitySelectProps) => {
                     );
                 })
             }
+            slots={{
+                popper: StyledPopper,
+                listbox: ListboxComponent,
+            }}
         />
     );
 };

diff --git a/apps/web/src/plugin/plugins/polar-area-chart/config.json b/apps/web/src/plugin/plugins/polar-area-chart/config.json
@@ -0,0 +1,86 @@
+{
+    "type": "polarAreaChart",
+    "name": "polar Area Chart",
+    "class": "data_chart",
+    "icon": "./icon.png",
+    "defaultRow": 6,
+    "defaultCol": 8,
+    "minRow": 4,
+    "minCol": 4,
+    "configProps": [
+        {
+            "style": "width: 100%",
+            "components": [
+                {
+                    "type": "multiEntitySelect",
+                    "title": "Entity",
+                    "key": "entityList",
+                    "style": "width: 100%",
+                    "getDataUrl": "",
+                    "valueType": "array",
+                    "componentProps": {
+                        "size": "small",
+                        "entityType": ["PROPERTY", "EVENT"],
+                        "entityValueTypes": ["LONG", "DOUBLE"]
+                    },
+                    "rules": {
+                        "required": true
+                    }
+                }
+            ]
+        },
+        {
+            "components": [
+                {
+                    "type": "input",
+                    "title": "Title",
+                    "key": "title",
+                    "defaultValue": "Title",
+                    "componentProps": {
+                        "size": "small",
+                        "inputProps": {
+                            "maxLength": 35
+                        }
+                    }
+                }
+            ]
+        },
+        {
+            "style": "width: 100%;",
+            "theme": {
+                "default": {
+                    "style": "font-size: 18px;"
+                }
+            },
+            "components": [
+                {
+                    "type": "ChartTimeSelect",
+                    "title": "Time",
+                    "key": "time",
+                    "style": "width: 100%;",
+                    "componentProps": {
+                        "size": "small"
+                    },
+                    "defaultValue": 86400000
+                }
+            ]
+        },
+        {
+            "style": "width: 100%;",
+            "components": [
+                {
+                    "type": "chartMetricsSelect",
+                    "title": "metrics",
+                    "key": "metrics",
+                    "style": "width: 100%;",
+                    "componentProps": {
+                        "size": "small"
+                    },
+                    "defaultValue": "LAST",
+                    "filters": ["SUM", "COUNT"]
+                }
+            ]
+        }
+    ],
+    "view": []
+}
diff --git a/apps/web/src/plugin/plugins/polar-area-chart/configure/index.tsx b/apps/web/src/plugin/plugins/polar-area-chart/configure/index.tsx
@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import { RenderConfig } from '../../../render';
+
+interface ConfigPluginProps {
+    config: CustomComponentProps;
+    value: any;
+    onOk: (data: any) => void;
+    onChange: (data: any) => void;
+}
+
+const Plugin = forwardRef((props: ConfigPluginProps, ref: any) => {
+    const { onOk, onChange, value, config } = props;
+
+    const handleSubmit = (data: any) => {
+        onOk(data);
+    };
+
+    return (
+        <RenderConfig
+            config={config}
+            onOk={handleSubmit}
+            ref={ref}
+            onChange={onChange}
+            value={value}
+        />
+    );
+});
+
+export default Plugin;
diff --git a/apps/web/src/plugin/plugins/polar-area-chart/icon.png b/apps/web/src/plugin/plugins/polar-area-chart/icon.png
diff --git a/apps/web/src/plugin/plugins/polar-area-chart/typings.d.ts b/apps/web/src/plugin/plugins/polar-area-chart/typings.d.ts
@@ -0,0 +1,15 @@
+import type { EntityAPISchema } from '@/services/http';
+
+export interface ViewConfigProps {
+    title: string;
+    entityList: EntityOptionType[];
+    time: number;
+    metrics: DataAggregateType;
+}
+
+export type ConfigureType = any;
+
+export interface AggregateHistoryList {
+    entity: EntityOptionType;
+    data: EntityAPISchema['getAggregateHistory']['response'];
+}
diff --git a/apps/web/src/plugin/plugins/polar-area-chart/view/hooks/index.tsx b/apps/web/src/plugin/plugins/polar-area-chart/view/hooks/index.tsx
@@ -0,0 +1 @@
+export { useSource } from './useSource';