fix: filter control (#106)

* fix: 控件按钮圆角调整 (#101) Co-authored-by: yxh01132861 <[email protected]> Co-authored-by: simplexiao <[email protected]> * fix: 解决位置查询密钥问题 (#104) * fix: 解决位置查询密钥问题 * chore: 密钥混淆 * fix: 色带选择展示问题 (#103) * fix: 色带选择展示问题 * fix: 色带问题修复 * fix: 色带问题 * fix: 修复选择色带自动关闭情况 --------- Co-authored-by: yxh01132861 <[email protected]> Co-authored-by: yunji <[email protected]> * chore: publish version - @antv/[email protected] - @antv/[email protected] - @antv/[email protected] - @antv/[email protected] - @antv/[email protected] * fix: 自定义色带遮挡问题 (#105) Co-authored-by: yxh01132861 <[email protected]> * chore: 备注 todo * fix: 筛选器更新问题 * fix: 字段选择器 bug * chore: 添加备注 --------- Co-authored-by: yxh01132861 <[email protected]> Co-authored-by: simplexiao <[email protected]>
antvis · Dec 26, 2023 · 4a0f025 · 4a0f025
1 parent afb2f62
commit 4a0f025
Show file tree

Hide file tree

Showing 46 changed files with 340 additions and 357 deletions.
diff --git a/examples/builder/package.json b/examples/builder/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@antv/l7": "^2.17.2",
-    "@antv/larkmap": "^1.4.10",
+    "@antv/larkmap": "^1.4.11",
     "@antv/li-analysis-assets": "link:../../packages/li-analysis-assets",
     "@antv/li-core-assets": "link:../../packages/li-core-assets",
     "@antv/li-editor": "link:../../packages/li-editor",

diff --git a/examples/li-template-assets/package.json b/examples/li-template-assets/package.json
@@ -45,7 +45,7 @@
     "@antv/li-editor": "^1.0.0",
     "@ant-design/icons": "^5.0.1",
     "@antv/l7": "^2.17.2",
-    "@antv/larkmap": "^1.4.10",
+    "@antv/larkmap": "^1.4.11",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
     "@types/lodash-es": "^4.17.6",
@@ -69,7 +69,7 @@
   "peerDependencies": {
     "@ant-design/icons": "^5.0.1",
     "@antv/l7": "^2.17.2",
-    "@antv/larkmap": "^1.4.10",
+    "@antv/larkmap": "^1.4.11",
     "antd": "^5.4.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

diff --git a/packages/li-analysis-assets/package.json b/packages/li-analysis-assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/li-analysis-assets",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "analysis assets for location insight",
   "keywords": [
     "analysis assets",
@@ -40,8 +40,8 @@
   "dependencies": {
     "@antv/g2": "^5.0.14",
     "@antv/l7-draw": "^3.0.20",
-    "@antv/li-p2": "^1.4.1",
-    "@antv/li-sdk": "^1.2.1",
+    "@antv/li-p2": "^1.4.2",
+    "@antv/li-sdk": "^1.2.2",
     "@antv/s2": "^1.47.1",
     "@antv/s2-react": "^1.40.0",
     "@emotion/css": "^11.10.6",
@@ -55,9 +55,9 @@
   "devDependencies": {
     "@ant-design/icons": "^5.0.1",
     "@antv/l7": "^2.17.2",
-    "@antv/larkmap": "^1.4.10",
-    "@antv/li-core-assets": "^1.1.1",
-    "@antv/li-editor": "^1.3.1",
+    "@antv/larkmap": "^1.4.11",
+    "@antv/li-core-assets": "^1.1.2",
+    "@antv/li-editor": "^1.3.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "antd": "^5.5.0",
@@ -69,7 +69,7 @@
   "peerDependencies": {
     "@ant-design/icons": "^5.0.1",
     "@antv/l7": "^2.17.2",
-    "@antv/larkmap": "^1.4.10",
+    "@antv/larkmap": "^1.4.11",
     "antd": "^5.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

diff --git a/packages/li-analysis-assets/src/widgets/AdministrativeSelectControl/Component/style.ts b/packages/li-analysis-assets/src/widgets/AdministrativeSelectControl/Component/style.ts
@@ -47,7 +47,7 @@ function useStyle() {
 
     popoverContent: css`
       min-width: 36px;
-      border-radius: ${borderRadius - 2}px;
+      border-radius: ${borderRadius}px;
       background: ${colorBgContainer};
       color: ${colorTextDescription};
       cursor: pointer;

diff --git a/packages/li-analysis-assets/src/widgets/FilterControl/Component/helper.ts b/packages/li-analysis-assets/src/widgets/FilterControl/Component/helper.ts
@@ -1,27 +1,49 @@
-import type { FilterConfig } from 'packages/li-p2';
+import type { FilterConfigType } from 'packages/li-p2';
 import type { FilterNode } from 'packages/li-sdk';
 
-export const getFilterNodes = (list: FilterConfig[]) => {
-  const _list = list.filter((item) => !(item.type === 'string' && item.value?.includes('all')));
+export const getFilterNode = (filterConfig: FilterConfigType) => {
+  let filterNode: FilterNode;
 
-  const filterNodes = _list.map((item) => {
-    return item.type === 'date'
-      ? {
-          id: item.id,
-          field: item.field,
-          type: item.type,
-          operator: item.operator,
-          value: item.value,
-          granularity: item.granularity,
-        }
-      : {
-          id: item.id,
-          field: item.field,
-          type: item.type,
-          operator: item.operator,
-          value: item.value,
-        };
-  });
+  switch (filterConfig.type) {
+    case 'string':
+      // 空值的情况，设置无效值; 全选情况，设置无效值;
+      const value = filterConfig.value === undefined || filterConfig.value.includes('all') ? [] : filterConfig.value;
+      filterNode = {
+        id: filterConfig.id,
+        field: filterConfig.field,
+        type: filterConfig.type,
+        operator: filterConfig.operator,
+        value: value,
+      };
+      break;
+    case 'number':
+      filterNode = {
+        id: filterConfig.id,
+        field: filterConfig.field,
+        type: filterConfig.type,
+        operator: filterConfig.operator,
+        // 空值的情况，设置无效值
+        value: filterConfig.value || ([] as any),
+      };
+      break;
+    case 'date':
+      filterNode = {
+        id: filterConfig.id,
+        field: filterConfig.field,
+        type: filterConfig.type,
+        operator: filterConfig.operator,
+        // 空值的情况，设置无效值
+        value: filterConfig.value || (([] as unknown) as [string, string]),
+        granularity: filterConfig.granularity,
+      };
+      break;
+  }
 
-  return filterNodes as FilterNode[];
+  return filterNode;
+};
+
+export const getFilterNodes = (list: FilterConfigType[]) => {
+  const filterNodes = list.map((item) => getFilterNode(item));
+
+  return filterNodes;
 };
diff --git a/packages/li-analysis-assets/src/widgets/FilterControl/Component/index.tsx b/packages/li-analysis-assets/src/widgets/FilterControl/Component/index.tsx
@@ -1,13 +1,13 @@
 import { CustomControl } from '@antv/larkmap';
-import type { FilterConfig } from '@antv/li-p2';
+import type { FilterConfigType } from '@antv/li-p2';
 import type { ImplementWidgetProps, LocalOrRemoteDataset } from '@antv/li-sdk';
 import { useDataset, useDatasetFilter } from '@antv/li-sdk';
-import { useMount } from 'ahooks';
+import { useMount, useUpdateEffect } from 'ahooks';
 import classNames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import type { Properties } from '../registerForm';
 import DateItem from './DateItem';
-import { getFilterNodes } from './helper';
+import { getFilterNode, getFilterNodes } from './helper';
 import NumberItem from './NumberItem';
 import StringItem from './StringItem';
 import useStyle from './style';
@@ -18,34 +18,44 @@ export interface LIFilterControlProps extends Properties, ImplementWidgetProps {
 const LIFilterControl: React.FC<LIFilterControlProps> = (props) => {
   const { defaultFilters, datasetId = '', position } = props;
   const styles = useStyle();
-  // 获取数据源
+  const [filterList, setFilterList] = useState(defaultFilters);
+  const [filter, { addFilterNode, updateFilterNode }] = useDatasetFilter(datasetId);
+  // 排除自生产筛选条件
+  const oimtSelfFilter = useMemo(() => {
+    const filterIds = defaultFilters.map((item) => item.id);
+    const children = filter?.children.filter((item) => !filterIds.includes(item.id)) || [];
+    return { relation: 'AND' as const, children };
+  }, []);
   const [dataset] = useDataset<LocalOrRemoteDataset>(datasetId, {
-    // TODO: remote 数据类型会全量请求数据
-    filter: { relation: 'AND', children: [] },
+    filter: oimtSelfFilter,
   });
   const { data: tableData = [] } = dataset || {};
-  const [filterList, setFilterList] = useState(defaultFilters);
-  // 筛选数据
-  const [_, { addFilterNode, updateFilterNode }] = useDatasetFilter(datasetId);
-  const firstMountRef = useRef(false);
 
   // 首次挂载
+  // TODO: 添加 FilterNode 需要在「初始化」消费数据过滤条件前执行，避免「初始化」多次消费数据过滤条件
   useMount(() => {
-    if (!firstMountRef.current) {
-      const _filters = getFilterNodes(defaultFilters);
-      _filters.forEach((item) => {
-        addFilterNode(item);
-      });
-      firstMountRef.current = true;
-    }
+    const filterNodes = getFilterNodes(defaultFilters);
+    filterNodes.forEach((item) => {
+      addFilterNode(item);
+    });
   });
 
-  // 配置初始筛选条件变更
-  useEffect(() => {
+  // TODO: 支持同步更新（在事件订阅之前）
+  // const firstMountRef = useRef(false);
+  // if (!firstMountRef.current) {
+  //   const filterNodes = getFilterNodes(defaultFilters);
+  //   filterNodes.forEach((item) => {
+  //     addFilterNode(item);
+  //   });
+  //   firstMountRef.current = true;
+  // }
+
+  // 配置初始筛选条件变更，配置态运行
+  useUpdateEffect(() => {
     const filterIds = filterList.map((item) => item.id);
-    const _filters = getFilterNodes(defaultFilters);
+    const filterNodes = getFilterNodes(defaultFilters);
 
-    _filters.forEach((item) => {
+    filterNodes.forEach((item) => {
       // 筛选条件已经存在进行更新 updateFilterNode，不存在添加 addFilterNode
       if (filterIds.includes(item.id)) {
         updateFilterNode(item.id, item);
@@ -56,7 +66,7 @@ const LIFilterControl: React.FC<LIFilterControlProps> = (props) => {
     setFilterList(defaultFilters);
   }, [defaultFilters]);
 
-  const onValueChange = (val: FilterConfig) => {
+  const onValueChange = (val: FilterConfigType) => {
     const _filterList = filterList.map((item) => {
       if (item.id === val.id) {
         return val;
@@ -66,8 +76,8 @@ const LIFilterControl: React.FC<LIFilterControlProps> = (props) => {
 
     setFilterList(_filterList);
 
-    const updateFilter = getFilterNodes([val])[0];
-    updateFilterNode(val.id, updateFilter);
+    const updateNode = getFilterNode(val);
+    updateFilterNode(val.id, updateNode);
   };
 
   if (!defaultFilters.length) {

diff --git a/packages/li-analysis-assets/src/widgets/FilterControl/registerForm.ts b/packages/li-analysis-assets/src/widgets/FilterControl/registerForm.ts
@@ -1,15 +1,15 @@
-import type { FilterConfig } from '@antv/li-p2';
+import type { PositionName } from '@antv/l7';
+import type { FilterConfigType } from '@antv/li-p2';
 import type { WidgetRegisterForm, WidgetRegisterFormProps } from '@antv/li-sdk';
 import { getDatasetSelectFormSchema } from '@antv/li-sdk';
-import type { PositionName } from '@antv/l7';
 
 /**
  * 属性面板生产的数据类型定义
  */
 export type Properties = {
   datasetId?: 'string';
   position?: PositionName;
-  defaultFilters: FilterConfig[];
+  defaultFilters: FilterConfigType[];
 };
 
 export default (props: WidgetRegisterFormProps): WidgetRegisterForm<Properties> => {
@@ -42,7 +42,7 @@ export default (props: WidgetRegisterFormProps): WidgetRegisterForm<Properties>
         {
           dependencies: ['datasetId'],
           fulfill: {
-            run: `$form.setFieldState('defaultFilters',state=>{  
+            run: `$form.setFieldState('defaultFilters',state=>{
                 state.value = [];
               })`,
           },

diff --git a/packages/li-analysis-assets/src/widgets/LegendWidget/ComponenStyle.ts b/packages/li-analysis-assets/src/widgets/LegendWidget/ComponenStyle.ts
@@ -2,14 +2,9 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../hooks';
 
 const useStyle = () => {
-  const { colorText, colorTextDescription, colorBgContainer, colorBorder, antCls } = useAntdToken();
+  const { colorText, colorTextDescription, colorBgContainer, borderRadius, colorBorder, antCls } = useAntdToken();
 
   return {
-    legendContainer: css`
-      background-color: ${colorBgContainer};
-      border-radius: 4px;
-    `,
-
     legendPopover: css`
       ${antCls}-popover-content {
         width: 330px;
@@ -106,7 +101,7 @@ const useStyle = () => {
       color: ${colorTextDescription};
       font-size: 16px;
       background-color: ${colorBgContainer};
-      border-radius: 4px;
+      border-radius: ${borderRadius}px;
       cursor: pointer;
 
       &:hover {

diff --git a/packages/li-analysis-assets/src/widgets/LegendWidget/Component.tsx b/packages/li-analysis-assets/src/widgets/LegendWidget/Component.tsx
@@ -102,30 +102,28 @@ const LegendControl: React.FC<LegendType> = (props) => {
   );
 
   return (
-    <CustomControl position={position}>
-      <div className={classNames(CLS_PREFIX, styles.legendContainer)}>
-        <Popover
-          overlayClassName={classNames(`${CLS_PREFIX}__popover`, styles.legendPopover)}
-          open={openPopover}
-          placement={onPlacement}
-          content={content}
-          trigger="click"
-          arrow={false}
-        >
-          <Tooltip placement={onPlacement} title="显示图例">
-            <div
-              className={classNames(`${CLS_PREFIX}__btn`, styles.legendBtn, {
-                [styles.legendBtnSelect]: openPopover,
-              })}
-              onClick={() => {
-                setOpenPopover((isOpen) => !isOpen);
-              }}
-            >
-              <Icon component={LegendWidgetSvg} />
-            </div>
-          </Tooltip>
-        </Popover>
-      </div>
+    <CustomControl position={position} className={CLS_PREFIX}>
+      <Popover
+        overlayClassName={classNames(`${CLS_PREFIX}__popover`, styles.legendPopover)}
+        open={openPopover}
+        placement={onPlacement}
+        content={content}
+        trigger="click"
+        arrow={false}
+      >
+        <Tooltip placement={onPlacement} title="显示图例">
+          <div
+            className={classNames(`${CLS_PREFIX}__btn`, styles.legendBtn, {
+              [styles.legendBtnSelect]: openPopover,
+            })}
+            onClick={() => {
+              setOpenPopover((isOpen) => !isOpen);
+            }}
+          >
+            <Icon component={LegendWidgetSvg} />
+          </div>
+        </Tooltip>
+      </Popover>
     </CustomControl>
   );
 };

diff --git a/packages/li-analysis-assets/src/widgets/LocationSearchControl/ComponenStyle.ts b/packages/li-analysis-assets/src/widgets/LocationSearchControl/ComponenStyle.ts
@@ -5,12 +5,13 @@ const useStyle = () => {
   const { useToken } = theme;
   const { token } = useToken();
 
-  const { colorText, colorBgContainer, colorBgElevated } = token;
+  const { colorText, colorBgContainer, colorBgElevated, borderRadius } = token;
 
   return {
     locationSearcheContainer: css`
       .larkmap-location-search {
         background-color: ${colorBgContainer};
+        border-radius: ${borderRadius}px;
       }
 
       .larkmap-select-selection-search {