diff --git a/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts b/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts index 7b87b7de..ef3d8a6c 100644 --- a/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts +++ b/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts @@ -86,6 +86,11 @@ export const parserLegendData = (layer: Layer) => { colors.push(item.color); }); + if (type === 'threshold') { + labels.splice(0, 1, '<'); + labels.splice(labels.length - 1, 1, '<'); + } + if (type === 'cat') { // 分类图例 // 对标签进行排序 diff --git a/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts index 4be0b935..bfb25ccc 100644 --- a/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts +++ b/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts @@ -5,15 +5,11 @@ import type { BubbleLayerStyleAttributeValue } from './types'; * 将表单的平铺数据转为图层样式的数据结构 * */ export const bubbleLayerStyleFlatToConfig = (style: Record) => { - const isCustom = - style.fillColorScale.type === 'threshold' || - (style.fillColorScale.type === 'cat' && style.fillColorScale.domain?.length !== 0); - const fillColor = style.fillColorField ? { field: style.fillColorField, - value: isCustom ? style.fillColorScale.range : style.fillColorRange?.colors, - scale: isCustom + value: style.fillColorScale.isCustom ? style.fillColorScale.range : style.fillColorRange?.colors, + scale: style.fillColorScale.isCustom ? { type: style.fillColorScale.type, domain: style.fillColorScale.domain, @@ -81,8 +77,8 @@ export const bubbleLayerStyleConfigToFlat = (styleConfig: BubbleLayerStyleAttrib const fillColorScale = typeof fillColor === 'object' ? { - type: fillColor?.scale?.type ?? '', - domain: fillColor?.scale?.domain ?? [], + type: fillColor?.scale?.type, + domain: fillColor?.scale?.domain, range: fillColor?.value, } : undefined; diff --git a/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts index b495eb1b..64e059eb 100644 --- a/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts +++ b/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts @@ -5,15 +5,11 @@ import type { ChoroplethLayerStyleAttributeValue } from './types'; * 将表单的平铺数据转为图层样式的数据结构 * */ export const choroplethLayerStyleFlatToConfig = (style: Record) => { - const isCustom = - style.fillColorScale.type === 'threshold' || - (style.fillColorScale.type === 'cat' && style.fillColorScale.domain?.length !== 0); - const fillColor = style.fillColorField ? { field: style.fillColorField, - value: isCustom ? style.fillColorScale.range : style.fillColorRange?.colors, - scale: isCustom + value: style.fillColorScale.isCustom ? style.fillColorScale.range : style.fillColorRange?.colors, + scale: style.fillColorScale.isCustom ? { type: style.fillColorScale.type, domain: style.fillColorScale.domain, @@ -69,8 +65,8 @@ export const choroplethLayerStyleConfigToFlat = (styleConfig: ChoroplethLayerSty const fillColorScale = typeof fillColor === 'object' ? { - type: fillColor?.scale?.type ?? '', - domain: fillColor?.scale?.domain ?? [], + type: fillColor?.scale?.type, + domain: fillColor?.scale?.domain, range: fillColor?.value, } : undefined; diff --git a/packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts index fb5db927..fc9cc2cb 100644 --- a/packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts +++ b/packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts @@ -4,15 +4,11 @@ import type { GridLayerStyleAttributeValue } from './types'; * 将表单的平铺数据转为图层样式的数据结构 * */ export const gridLayerStyleFlatToConfig = (style: Record) => { - const isCustom = - style.fillColorScale.type === 'threshold' || - (style.fillColorScale.type === 'cat' && style.fillColorScale.domain?.length !== 0); - const fillColor = style.fillColorField ? { field: style.fillColorField, - value: isCustom ? style.fillColorScale.range : style.fillColorRange?.colors, - scale: isCustom + value: style.fillColorScale.isCustom ? style.fillColorScale.range : style.fillColorRange?.colors, + scale: style.fillColorScale.isCustom ? { type: style.fillColorScale.type, domain: style.fillColorScale.domain, @@ -50,8 +46,8 @@ export const gridLayerStyleConfigToFlat = (styleConfig: GridLayerStyleAttributeV const fillColorScale = typeof color === 'object' ? { - type: color?.scale?.type ?? '', - domain: color?.scale?.domain ?? [], + type: color?.scale?.type, + domain: color?.scale?.domain, range: color?.value, } : undefined; diff --git a/packages/li-p2/src/LayerAttribute/HexbinLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/HexbinLayerStyle/helper.ts index b0420755..f623c579 100644 --- a/packages/li-p2/src/LayerAttribute/HexbinLayerStyle/helper.ts +++ b/packages/li-p2/src/LayerAttribute/HexbinLayerStyle/helper.ts @@ -4,15 +4,11 @@ import type { HexbinLayerStyleAttributeValue } from './types'; * 将表单的平铺数据转为图层样式的数据结构 * */ export const hexbinLayerStyleFlatToConfig = (style: Record) => { - const isCustom = - style.fillColorScale.type === 'threshold' || - (style.fillColorScale.type === 'cat' && style.fillColorScale.domain?.length !== 0); - const fillColor = style.fillColorField ? { field: style.fillColorField, - value: isCustom ? style.fillColorScale.range : style.fillColorRange?.colors, - scale: isCustom + value: style.fillColorScale.isCustom ? style.fillColorScale.range : style.fillColorRange?.colors, + scale: style.fillColorScale.isCustom ? { type: style.fillColorScale.type, domain: style.fillColorScale.domain, @@ -51,8 +47,8 @@ export const hexbinLayerStyleConfigToFlat = (styleConfig: HexbinLayerStyleAttrib const fillColorScale = typeof color === 'object' ? { - type: color?.scale?.type ?? '', - domain: color?.scale?.domain ?? [], + type: color?.scale?.type, + domain: color?.scale?.domain, range: color?.value, } : undefined; diff --git a/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts index fec15cdb..b255d417 100644 --- a/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts +++ b/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts @@ -5,15 +5,11 @@ import type { LineLayerStyleAttributeValue } from './types'; * 将表单的平铺数据转为图层样式的数据结构 * */ export const lineLayerStyleFlatToConfig = (style: Record) => { - const isCustom = - style.fillColorScale.type === 'threshold' || - (style.fillColorScale.type === 'cat' && style.fillColorScale.domain?.length !== 0); - const fillColor = style.fillColorField ? { field: style.fillColorField, - value: isCustom ? style.fillColorScale.range : style.fillColorRange?.colors, - scale: isCustom + value: style.fillColorScale.isCustom ? style.fillColorScale.range : style.fillColorRange?.colors, + scale: style.fillColorScale.isCustom ? { type: style.fillColorScale.type, domain: style.fillColorScale.domain, @@ -65,8 +61,8 @@ export const lineLayerStyleConfigToFlat = (styleConfig: LineLayerStyleAttributeV const fillColorScale = typeof color === 'object' ? { - type: color?.scale?.type ?? '', - domain: color?.scale?.domain ?? [], + type: color?.scale?.type, + domain: color?.scale?.domain, range: color?.value, } : undefined; diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/CustomItem/Item/index.tsx similarity index 100% rename from packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/index.tsx rename to packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/CustomItem/Item/index.tsx diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/CustomItem/Item/style.ts similarity index 100% rename from packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/style.ts rename to packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/CustomItem/Item/style.ts diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/CustomItem/index.tsx similarity index 100% rename from packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/index.tsx rename to packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/CustomItem/index.tsx diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/CustomItem/style.ts similarity index 100% rename from packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/style.ts rename to packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/CustomItem/style.ts diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/contants.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/contants.ts similarity index 100% rename from packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/contants.ts rename to packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/contants.ts diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx similarity index 86% rename from packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/index.tsx rename to packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx index 422d0eb5..67547615 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/index.tsx +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx @@ -3,26 +3,26 @@ 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 } from '../type'; +import type { CustomItems, CustomMappingData } from '../type'; import CustomItem from './CustomItem'; import useStyle from './style'; -type CustomContentProps = { - fieldType: 'string' | 'number'; +type CustomMaPpingColorProps = { + dataType: 'string' | 'number'; domain: string[] | [number, number]; - customRanges?: CustomItemType; - onChange: (value: CustomItemType) => void; + value?: CustomMappingData; + onChange: (value: CustomMappingData) => void; className?: string; }; -const CustomContent = (props: CustomContentProps) => { - const { fieldType = 'string', domain, customRanges: defaultCustomRanges, onChange, className } = props; +const CustomMaPpingColor = (props: CustomMaPpingColorProps) => { + const { dataType = 'string', domain, value, onChange, className } = props; const prefixCls = usePrefixCls('formily-color-range-selector__custom-range'); const [wrapSSR, hashId] = useStyle(prefixCls); const [customRanges, setCustomRanges] = useState([]); const selectedOption = useMemo(() => { - if (fieldType === 'string' && customRanges.length) { + if (dataType === 'string' && customRanges.length) { const values = customRanges.map((item) => item.value).flat(); return values; } @@ -31,7 +31,7 @@ const CustomContent = (props: CustomContentProps) => { }, [customRanges]); const selectOptions = useMemo(() => { - if (fieldType === 'string') { + if (dataType === 'string') { return (domain as string[]).map((value: string) => ({ label: value, value })); } @@ -39,8 +39,8 @@ const CustomContent = (props: CustomContentProps) => { }, [domain]); useEffect(() => { - if (defaultCustomRanges?.list?.length) { - const list = defaultCustomRanges.list.map((item: CustomItems) => { + if (value?.list?.length) { + const list = value.list.map((item: CustomItems) => { return { id: uniqueId(), ...item, @@ -48,10 +48,10 @@ const CustomContent = (props: CustomContentProps) => { }); setCustomRanges(list); } - }, [defaultCustomRanges]); + }, [value]); const addPaletteRangeItem = () => { - if (fieldType === 'number') { + if (dataType === 'number') { const _item = customRanges[customRanges.length - 1]; const min = Number(_item.value[0]); const _interval = Number(((Number(domain[1]) - min) / 2).toFixed(2)) + min; @@ -82,10 +82,8 @@ const CustomContent = (props: CustomContentProps) => { } }; - console.log(customRanges); - const deletePaletteRangeItem = (index: number, position: string | null) => { - if (fieldType === 'number') { + if (dataType === 'number') { const _value = customRanges[index]; const list = customRanges @@ -125,7 +123,7 @@ const CustomContent = (props: CustomContentProps) => { }; const onChangePaletteRangeItem = (value: (string | number | null)[], color: string, index: number) => { - if (fieldType === 'number') { + if (dataType === 'number') { const list = customRanges.map((item, _index) => { if (index === _index) { return { @@ -174,7 +172,7 @@ const CustomContent = (props: CustomContentProps) => { const list = customRanges.map((item) => { return { value: item.value, color: item.color }; }); - onChange({ type: fieldType, list }); + onChange({ type: dataType, list }); }; return wrapSSR( @@ -185,7 +183,7 @@ const CustomContent = (props: CustomContentProps) => { return ( { ); }; -export default CustomContent; +export default CustomMaPpingColor; diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/style.ts similarity index 100% rename from packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/style.ts rename to packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/style.ts diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts index 6ec074dd..0bd563bf 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts @@ -1,6 +1,6 @@ import { fill, maxBy } from 'lodash-es'; import { CUSTOM } from './constants'; -import type { CustomItems, CustomItemType, SelectorValue } from './type'; +import type { CustomItems, CustomMappingData, SelectorValue } from './type'; // 当字段类型为string时,传递外部时 domain 结构转化 export const stringToFix = (list: CustomItems[]) => { @@ -21,43 +21,49 @@ export const stringToFix = (list: CustomItems[]) => { return _val.splice(i + index * colors.length, 0, _item); }); } + return _val; }; // 将组件内部数据结构转化为图层数据 -export const transformToLayer = (val: CustomItemType) => { +export const transformToLayer = (val: CustomMappingData) => { const { type, list } = val; const range = list.map((item) => item.color); if (type === 'number') { const _val = list.map((item) => item.value[1]).filter((item) => item); - return { + const layerValue = { + isCustom: true, type: 'threshold', domain: _val, range, } as SelectorValue; + + return layerValue; } const _domain = stringToFix(list); - return { + + const layerValue = { + isCustom: true, type: 'cat', domain: _domain, range, } as SelectorValue; + + return layerValue; }; // 将图层数据转化为组件内部数据结构 export const transformToScale = (dataType: 'string' | 'number', val: SelectorValue) => { - if (!val) { - return undefined; - } + const isCustom = val.type === 'threshold' || (val.type === 'cat' && val.domain && val.domain.length !== 0); - const isCustom = val.type === 'threshold' || (val.type === 'cat' && val.domain?.length !== 0); if (!isCustom) { return val; } - const { domain = [], range = [] } = val || {}; + const { domain = [], range = [] } = val; + if (dataType === 'number') { const list = range.map((item: string, index: number) => { return { @@ -111,10 +117,12 @@ export const getDefaultValue = ( // 根据 range 来确定数值长度 const _length: number = range.length - 1 > 0 ? range.length - 1 : 0; const _domain = fill(Array(_length), undefined).map((_, index) => { - return (min + _interval * index + 1).toFixed(2); + const _value = min + _interval * index + 1; + return _value % 1 === 0 ? _value : _value.toFixed(2); }); return { + isCustom: true, type: 'threshold', domain: _domain, range, @@ -123,12 +131,13 @@ export const getDefaultValue = ( // 数值类型为 string 时 const _domain = range.map((item, index) => { if (index + 1 === range.length) { - return { color: item, value: domain.slice(index).map((item) => item) }; + return { color: item, value: domain.slice(index) }; } return { color: item, value: [domain[index]] }; }); return { + isCustom: true, type: 'cat', domain: stringToFix(_domain), range, diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx index fc34e034..0ffe5c04 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx @@ -5,10 +5,10 @@ import cls from 'classnames'; import React, { useEffect, useMemo, useState } from 'react'; import { useUpdateEffect } from 'ahooks'; import { DEHAULT_OPTIONS } from './constants'; -import CustomContent from './CustomContent'; +import CustomMaPpingColor from './CustomMaPpingColor'; import { getDefaultValue, transformToLayer, transformToScale } from './helper'; import useStyle from './style'; -import type { CustomItemType, SelectorValue, SelectorValueType, SelectType } from './type'; +import type { CustomMappingData, SelectorValue, SelectorValueType, SelectType } from './type'; type ScaleSelectorProp = { dataType: 'string' | 'number'; @@ -42,7 +42,7 @@ const Internal = (props: ScaleSelectorProp) => { }, [dataType]); // 自定义数据变动 - const onValueChange = (ranges: CustomItemType) => { + const onValueChange = (ranges: CustomMappingData) => { const _val = transformToLayer(ranges); onChange?.({ ..._val }); setCustomOpen(false); @@ -58,12 +58,12 @@ const Internal = (props: ScaleSelectorProp) => { ..._defaultValue, }); } else { - onChange?.({ type }); + onChange?.({ isCustom: false, type }); setOpen(false); } }; - // 选择字段变更 + // dataType 变更 useEffect(() => { if (!value) return; const isCustom = value.type === 'threshold' || (value.type === 'cat' && value.domain && value.domain.length !== 0); @@ -73,12 +73,12 @@ const Internal = (props: ScaleSelectorProp) => { if (isValid) { const val = selectOptions[0].value as SelectorValueType; setType(val); - onChange?.({ type: val }); + onChange?.({ isCustom: false, type: val }); } } }, [selectOptions]); - // 自定义类型数据变动 + // 自定义 scale 且数据 domain 发生更新时,自动计算默认值 useUpdateEffect(() => { if (type === 'custom' && value?.domain && value.domain.length !== 0) { const _defaultValue = getDefaultValue(dataType, domain, value.range ?? defaultColors); @@ -117,11 +117,11 @@ const Internal = (props: ScaleSelectorProp) => { )} {type === 'custom' && ( - onValueChange(ranges)} /> )} diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts index cb58164e..8bead7c3 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts @@ -4,8 +4,8 @@ export type CustomItems = { id?: string; }; -export type CustomItemType = { - type: string; +export type CustomMappingData = { + type: 'number' | 'string'; list: CustomItems[]; }; @@ -17,4 +17,5 @@ export type SelectorValue = { type: SelectorValueType; domain?: string[] | number[]; range?: string[]; + isCustom?: boolean; };