fix: 问题处理

antvis · Oct 18, 2023 · 5a21d9a · 5a21d9a
1 parent 40b1363
commit 5a21d9a
Show file tree

Hide file tree

Showing 16 changed files with 135 additions and 209 deletions.
diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/helper.ts b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/helper.ts
diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx
@@ -8,7 +8,6 @@ import { max, min, pick } from 'lodash-es';
 import React, { useMemo, useState } from 'react';
 import { useEditorDatasets, useEditorService, useEditorState } from '../../../../hooks';
 import BaseFormSchemaField from '../BaseFormSchemaField';
-import { dataFormatProcessing } from './helper';
 import './index.less';
 import StyleForm from './StyleForm';
 
@@ -47,23 +46,11 @@ const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) =>
     return datasetFields.map((item) => {
       // @ts-ignore
       const itemValue = dataset.data.map((_item: Record<string, any>) => _item[item.value]);
-
-      const list = dataFormatProcessing({
-        dataset: itemValue.map((_item: string | number) => ({ label: _item, value: _item })),
-        label: 'label',
-        value: 'value',
-      });
+      const domain = item.type === 'number' ? [min(itemValue), max(itemValue)] : [...new Set(itemValue)];
 
       return {
         ...item,
-        domin:
-          item.type === 'number'
-            ? {
-                min: min(itemValue),
-                max: max(itemValue),
-                list,
-              }
-            : { list },
+        domain,
       };
     });
     // @ts-ignore

diff --git a/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts
@@ -8,7 +8,7 @@ export const bubbleLayerStyleFlatToConfig = (style: Record<string, any>) => {
   const fillColor = style.fillColorField
     ? {
         field: style.fillColorField,
-        value: typeof style.fillColorScale === 'string' ? style.fillColorRange?.colors : style.fillColorScale?.colors,
+        value: typeof style.fillColorScale === 'string' ? style.fillColorRange?.colors : style.fillColorScale?.ranges,
         scale:
           typeof style.fillColorScale === 'string'
             ? { type: style.fillColorScale }
@@ -79,7 +79,7 @@ export const bubbleLayerStyleConfigToFlat = (styleConfig: BubbleLayerStyleAttrib
         ? {
             type: fillColor?.scale?.type ?? '',
             domain: fillColor?.scale?.domain ?? [],
-            colors: fillColor?.value,
+            ranges: fillColor?.value,
           }
         : fillColor?.scale?.type
       : undefined;

diff --git a/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts
@@ -8,7 +8,7 @@ export const choroplethLayerStyleFlatToConfig = (style: Record<string, any>) =>
   const fillColor = style.fillColorField
     ? {
         field: style.fillColorField,
-        value: typeof style.fillColorScale === 'string' ? style.fillColorRange.colors : style.fillColorScale.colors,
+        value: typeof style.fillColorScale === 'string' ? style.fillColorRange.colors : style.fillColorScale.ranges,
         scale:
           typeof style.fillColorScale === 'string'
             ? { type: style.fillColorScale }
@@ -67,7 +67,7 @@ export const choroplethLayerStyleConfigToFlat = (styleConfig: ChoroplethLayerSty
         ? {
             type: fillColor?.scale?.type ?? '',
             domain: fillColor?.scale?.domain ?? [],
-            colors: fillColor?.value,
+            ranges: fillColor?.value,
           }
         : fillColor?.scale?.type
       : undefined;

diff --git a/packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts
@@ -7,7 +7,7 @@ export const gridLayerStyleFlatToConfig = (style: Record<string, any>) => {
   const fillColor = style.fillColorField
     ? {
         field: style.fillColorField,
-        value: typeof style.fillColorScale === 'string' ? style.fillColorRange.colors : style.fillColorScale.colors,
+        value: typeof style.fillColorScale === 'string' ? style.fillColorRange.colors : style.fillColorScale.ranges,
         scale:
           typeof style.fillColorScale === 'string'
             ? { type: style.fillColorScale }
@@ -48,7 +48,7 @@ export const gridLayerStyleConfigToFlat = (styleConfig: GridLayerStyleAttributeV
         ? {
             type: color?.scale?.type ?? '',
             domain: color?.scale?.domain ?? [],
-            colors: color?.value,
+            ranges: color?.value,
           }
         : color?.scale?.type
       : undefined;

diff --git a/packages/li-p2/src/LayerAttribute/HexbinLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/HexbinLayerStyle/helper.ts
@@ -7,7 +7,7 @@ export const hexbinLayerStyleFlatToConfig = (style: Record<string, any>) => {
   const fillColor = style.fillColorField
     ? {
         field: style.fillColorField,
-        value: typeof style.fillColorScale === 'string' ? style.fillColorRange.colors : style.fillColorScale.colors,
+        value: typeof style.fillColorScale === 'string' ? style.fillColorRange.colors : style.fillColorScale.ranges,
         scale:
           typeof style.fillColorScale === 'string'
             ? { type: style.fillColorScale }
@@ -49,7 +49,7 @@ export const hexbinLayerStyleConfigToFlat = (styleConfig: HexbinLayerStyleAttrib
         ? {
             type: color?.scale?.type ?? '',
             domain: color?.scale?.domain ?? [],
-            colors: color?.value,
+            ranges: color?.value,
           }
         : color?.scale?.type
       : undefined;

diff --git a/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts
@@ -8,7 +8,7 @@ export const lineLayerStyleFlatToConfig = (style: Record<string, any>) => {
   const fillColor = style.fillColorField
     ? {
         field: style.fillColorField,
-        value: typeof style.fillColorScale === 'string' ? style.fillColorRange.colors : style.fillColorScale.colors,
+        value: typeof style.fillColorScale === 'string' ? style.fillColorRange.colors : style.fillColorScale.ranges,
         scale:
           typeof style.fillColorScale === 'string'
             ? { type: style.fillColorScale }
@@ -62,7 +62,7 @@ export const lineLayerStyleConfigToFlat = (styleConfig: LineLayerStyleAttributeV
         ? {
             type: color?.scale?.type ?? '',
             domain: color?.scale?.domain ?? [],
-            colors: color?.value,
+            ranges: color?.value,
           }
         : color?.scale?.type
       : undefined;

diff --git a/packages/li-p2/src/LayerAttribute/common-schema/fill-color-collapse.ts b/packages/li-p2/src/LayerAttribute/common-schema/fill-color-collapse.ts
@@ -40,11 +40,11 @@ export default (options: AttributeSchemaOptions) => {
             'x-component': 'ScaleSelector',
             'x-component-props': {
               placeholder: '请选择',
-              type:
+              fieldType:
                 '{{ $form.getFieldState("fillColorField",state=> { return state.dataSource.find((item) => item.value === state.value)?.type })}}',
-              dataset:
-                '{{ $form.getFieldState("fillColorField",state=> { return state.dataSource.find((item) => item.value === state.value)?.domin })}}',
-              defaultColors: '{{ $form.getFieldState("fillColorRange",state=> { return state?.value?.colors })}}',
+              domain:
+                '{{ $form.getFieldState("fillColorField",state=> { return state.dataSource.find((item) => item.value === state.value)?.domain })}}',
+              defaultRanges: '{{ $form.getFieldState("fillColorRange",state=> { return state?.value?.colors })}}',
             },
             'x-decorator-props': {},
             'x-reactions': [
@@ -108,21 +108,23 @@ export default (options: AttributeSchemaOptions) => {
               {
                 dependencies: ['fillColorScale'],
                 fulfill: {
-                  run: `$form.setFieldState("fillColorRange", (_state) => {
-                    _state.disabled = $form.getFieldState("fillColorScale", (state) => state.value?.type === "threshold");
-
-                    $form.getFieldState('fillColorScale', (state) => {
-                      if (state.value?.domain) {
-                        return (_state.value = {
-                          colors: $form.getFieldState('fillColorScale', (state) => state.value?.colors)
-                            ? $form.getFieldState('fillColorScale', (state) => state.value.colors)
-                            : ['#ffffcc', '#d9f0a3', '#addd8e', '#78c679', '#31a354', '#006837'],
-                        });
-                      } else {
-                        return;
-                      }
-                    });
-                })`,
+                  run: `$form.setFieldState('fillColorRange', (_state) => {
+                    _state.visible =
+                      !$form.getFieldState('fillColorScale', (state) => state.value?.domain) &&
+                      $form.getFieldState('fillColorField', (state) => state.value);
+                  });
+                  `,
+                },
+              },
+              {
+                dependencies: ['fillColorField'],
+                fulfill: {
+                  run: `$form.setFieldState('fillColorRange', (_state) => {
+                    _state.visible =
+                      !$form.getFieldState('fillColorScale', (state) => state.value?.domain) &&
+                      $form.getFieldState('fillColorField', (state) => state.value);
+                  });
+                  `,
                 },
               },
             ],

diff --git a/...li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/index.tsx b/...li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/index.tsx
@@ -8,7 +8,7 @@ import useStyle from './style';
 type ItemProps = {
   customType: CustomType;
   value: (string | number | null)[];
-  options: { label: string; value: string; count: number }[];
+  options: { label: string; value: string }[];
   min: number;
   max: number;
   position: string | null;

diff --git a/...ages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/index.tsx b/...ages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/index.tsx
@@ -12,7 +12,7 @@ type RangeItemProps = {
   customType: CustomType;
   position: string | null;
   selectedOption: (string | number | null)[];
-  selectOptions: { label: string; value: string; count: number }[];
+  selectOptions: { label: string; value: string }[];
   min?: number;
   max?: number;
   color: string;

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/index.tsx
@@ -3,33 +3,41 @@ import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import classnames from 'classnames';
 import { isEmpty, uniqueId } from 'lodash-es';
 import React, { useEffect, useMemo, useState } from 'react';
-import type { CustomItems, CustomItemType, CustomItemValueType, DatasetType } from '../type';
+import type { CustomItems, CustomItemType, CustomItemValueType } from '../type';
 import CustomItem from './CustomItem';
 import useStyle from './style';
 
 type CustomContentProps = {
   fieldType: 'string' | 'number';
-  dataset: DatasetType | any;
-  customRanges: CustomItemType;
+  domain: string[] | [number, number];
+  customRanges?: CustomItemType;
   onChange: (value: CustomItemType) => void;
   className?: string;
 };
 
 const CustomContent = (props: CustomContentProps) => {
-  const { fieldType = 'string', dataset, customRanges: defaultCustomRanges, onChange, className } = props;
+  const { fieldType = 'string', domain, customRanges: defaultCustomRanges, onChange, className } = props;
   const prefixCls = usePrefixCls('formily-color-range-selector__custom-range');
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const [customRanges, setCustomRanges] = useState<CustomItems[]>([]);
 
   const selectedOption = useMemo(() => {
-    if (!customRanges.length) {
-      return [];
+    if (fieldType === 'string' && customRanges.length) {
+      const values = customRanges.map((item) => item.value).flat();
+      return values;
     }
 
-    const values = customRanges.map((item) => item.value).flat();
-    return values;
+    return [];
   }, [customRanges]);
 
+  const selectOptions = useMemo(() => {
+    if (fieldType === 'string') {
+      return (domain as string[]).map((value: string) => ({ label: value, value }));
+    }
+
+    return [];
+  }, [domain]);
+
   useEffect(() => {
     if (defaultCustomRanges?.list?.length) {
       const list = defaultCustomRanges.list.map((item: CustomItems) => {
@@ -149,8 +157,7 @@ const CustomContent = (props: CustomContentProps) => {
   return wrapSSR(
     <div className={classnames(`${prefixCls}`, hashId, className)}>
       {customRanges.map((customItem: CustomItems, index: number) => {
-        const min = index === 0 ? dataset?.min : customRanges[index - 1].value[1];
-        const max = dataset?.max;
+        const [min, max] = domain as [number, number];
         const position = index === 0 ? 'first' : index === customRanges.length - 1 ? 'last' : null;
 
         return (
@@ -160,7 +167,7 @@ const CustomContent = (props: CustomContentProps) => {
             color={customItem.color}
             value={customItem.value}
             selectedOption={selectedOption}
-            selectOptions={dataset.list}
+            selectOptions={selectOptions}
             min={min}
             max={max}
             position={position}
@@ -175,7 +182,7 @@ const CustomContent = (props: CustomContentProps) => {
       </div>
 
       <div className={`${prefixCls}__btn`}>
-        <span onClick={onSubmit}>确定</span>
+        <span onClick={onSubmit}>应用</span>
       </div>
     </div>,
   );

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/constants.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/constants.ts
@@ -1,8 +1,12 @@
-import type { ColorScaleSelectOptionType } from './index';
+import type { SelectType } from './type';
 
 export const THRESHOLD = 'custom';
 
-export const DEHAULT_OPTIONS: ColorScaleSelectOptionType[] = [
+export const DEHAULT_OPTIONS: {
+  label: string;
+  type: 'number' | 'string' | 'custom';
+  value: SelectType;
+}[] = [
   {
     label: '等间距',
     value: 'quantize',

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/demos/default.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/demos/default.tsx
@@ -28,31 +28,16 @@ const schema = {
       type: 'number',
       title: '颜色划分',
       default: {
-        type: 'threshold',
-        domain: [5, 5.6, 5.7],
-        colors: ['#63759a', '#e61486', '#f00', '#0f0'],
+        type: 'threshold', //选择的筛选字段的类型
+        domain: [3, 5.666666666666666, 8.333333333333332],
+        ranges: ['#63759a', '#e61486', '#f00', '#faa'],
       },
       'x-decorator': 'FormItem',
       'x-component': 'ScaleSelector',
       'x-component-props': {
         placeholder: '请选择',
-        type: 'number', //选择的筛选字段的类型
-        dataset: {
-          min: 5,
-          max: 7.9,
-          list: [
-            { label: 5, value: 5, count: 17 },
-            { label: 5.2, value: 5.2, count: 4 },
-            { label: 5.8, value: 5.8, count: 3 },
-            { label: 5.6, value: 5.6, count: 2 },
-            { label: 5.4, value: 5.4, count: 2 },
-            { label: 5.3, value: 5.3, count: 4 },
-            { label: 6.1, value: 6.1, count: 1 },
-            { label: 5.5, value: 5.5, count: 1 },
-            { label: 5.7, value: 5.7, count: 2 },
-            { label: 7.9, value: 7.9, count: 1 },
-          ],
-        },
+        fieldType: 'number', //选择的筛选字段的类型
+        domain: [2, 10],
         defaultColors: ['#f00', '#ff0', '#00f', '#faa'],
       },
     },