@lingxiteam/ebe-utils 0.6.1 → 0.6.3

package/lib/public/src/components/pcfactory/src/RadarChart/RadarChartHook.ts

@@ -1,449 +0,0 @@
-/* eslint-disable consistent-return */
-/* eslint-disable guard-for-in */
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable @typescript-eslint/no-for-in-array */
-/* eslint-disable no-underscore-dangle */
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useLocale } from '../utils/hooks/useLocale';
-import type { ReactChartHookType } from './RadarChartType';
-import {
-  defaultDataSource,
-  defaultHint,
-  defaultIndicatorDataSource,
-  defaultRadarLevelHint,
-} from './radarDefaultConfig';
-
-export const useRadarChartHook = (props: ReactChartHookType) => {
-  const chartNode = useRef();
-  const {
-    indicatorDataSource = [],
-    // defaultIndicatorDataSource = [],
-
-    radarDataSource = [],
-    // defaultDataSource = [],
-
-    radarLevelHint = [],
-    // defaultRadarLevelHint = [],
-
-    showHint,
-    showTotal,
-
-    // defaultHint,
-    hint,
-
-    isRunningState = false,
-    getEngineApis,
-  } = props;
-
-  const { getLocale } = useLocale(getEngineApis?.());
-
-  const isDynamicData =
-    typeof indicatorDataSource === 'string' ||
-    typeof radarDataSource === 'string';
-  const getCurString = (propsString: string, defaultString: string) => {
-    if (isDynamicData) {
-      return defaultString;
-    }
-    if (propsString) {
-      return propsString;
-    }
-    return defaultString;
-  };
-  const indicatorName = getCurString(props.indicatorName, 'name');
-  const indicatorKey = getCurString(props.indicatorKey, 'dataKey');
-  const indicatorMax = getCurString(props.indicatorMax, 'max');
-  const indicatorMin = getCurString(props.indicatorMin, 'min');
-  const legendKey = getCurString(props.legendKey, 'name');
-  const radarMax = getCurString(props.radarMax, 'max');
-  const radarMin = getCurString(props.radarMin, 'min');
-  const radarDescription = getCurString(props.radarDescription, 'description');
-  const hintName = props.hintName ?? 'text';
-  const hintWidth = props.hintWidth ?? 'width';
-
-  const [total, updateTotal] = useState(0);
-  const [ignoreHint, updateIgnoreHint] = useState(true);
-  const [configMessage, updateConfigMessage] = useState();
-
-  const radarValueAccFunc = (arr: number[]): number => {
-    if (arr?.length > 0) {
-      return arr.reduce((pre, cur) => pre + cur, 0);
-    }
-    return 0;
-  };
-
-  const getCurSource = (dfData: any[], sourceData: any[]) => {
-    let source: any[] = [];
-    if (dfData?.length > 0) {
-      source = dfData;
-      if (isRunningState) {
-        // 运行态
-        if (sourceData && Array.isArray(sourceData) && sourceData.length > 0) {
-          source = sourceData;
-        } else {
-          // 未绑定数据，运行态状态下展示空 并提示
-          source = [];
-        }
-      }
-    }
-    return source;
-  };
-
-  const _indicatorDataSource = useMemo(() => {
-    return indicatorDataSource;
-  }, [indicatorDataSource]);
-
-  useEffect(() => {
-    if (isRunningState) {
-      if (_indicatorDataSource?.length === 0) {
-        setTimeout(() => {
-          updateConfigMessage(getLocale?.('RadarChart.warning'));
-        }, 300);
-      } else {
-        setTimeout(() => {
-          // @ts-ignore
-          updateConfigMessage('');
-        }, 300);
-      }
-    }
-  }, [_indicatorDataSource, isRunningState]);
-
-  const _dataSource = useMemo(() => {
-    return radarDataSource;
-  }, [radarDataSource]);
-  const _radarLevelHint = useMemo(() => {
-    return radarLevelHint;
-  }, [radarLevelHint]);
-
-  const _indicatorData = useMemo(() => {
-    return getCurSource(defaultIndicatorDataSource, _indicatorDataSource);
-  }, [_indicatorDataSource]);
-
-  const data = useMemo(() => {
-    return getCurSource(defaultDataSource, _dataSource);
-  }, [_dataSource]);
-
-  const _radarLevelData = useMemo(() => {
-    return getCurSource(defaultRadarLevelHint, _radarLevelHint);
-  }, [_radarLevelHint]);
-
-  // 组装雷达图数据
-  const radarData = useMemo(() => {
-    return data.map((item: any) => {
-      return {
-        value: _indicatorData.map((ind) => {
-          const value = ind[indicatorKey] && item[ind[indicatorKey]];
-          return value ?? 0;
-        }),
-        name: item[legendKey],
-        areaStyle: {
-          opacity: 0.3,
-        },
-      };
-    });
-  }, [data, _indicatorData, legendKey, indicatorKey]);
-
-  const { hintNameValue, hintWidthValue } = useMemo(() => {
-    let _hintNameValue = '';
-    let _hintWidthValue = 120;
-    if (typeof hint === 'object') {
-      _hintNameValue = hint[hintName];
-      _hintWidthValue = hint[hintWidth];
-    } else if (!isRunningState) {
-      // 已绑定数据，编辑状态下展示示例数据
-      _hintNameValue = defaultHint.text;
-      _hintWidthValue = defaultHint.width;
-    }
-    return { hintNameValue: _hintNameValue, hintWidthValue: _hintWidthValue };
-  }, [hint, hintName, hintWidth, isRunningState]);
-
-  const chartOption = useMemo(() => {
-    const radarGetLevelFunc = (
-      val: number,
-      hintArr: ReactChartHookType['radarLevelHint'],
-    ) => {
-      let _hintStr = '';
-      hintArr.forEach((item) => {
-        const max = item[radarMax];
-        const min = item[radarMin];
-        const description = item[radarDescription];
-        if (min < val && val <= max) {
-          _hintStr = description;
-        }
-      });
-      return _hintStr;
-    };
-
-    const indicator = _indicatorData.map((item) => ({
-      name: item[indicatorName],
-      max: item[indicatorMax],
-      min: item[indicatorMin],
-    }));
-    const level = radarGetLevelFunc(total, _radarLevelData);
-    const hintText = `${hintNameValue}${level ?? ''}`;
-    const levelArr = _radarLevelData.map(
-      (item) =>
-        `${item[radarDescription]}：${item[radarMin]} < x < ${item[radarMax]}`,
-    );
-    if (indicator.length === 0) {
-      return null;
-    }
-    return {
-      legend: {
-        data: radarData.map((item: any) => item[legendKey]),
-      },
-      tooltip: {
-        show: true,
-        trigger: 'item',
-      },
-      radar: {
-        indicator,
-        axisLabel: {
-          showMaxLabel: true,
-          show: true,
-          hideOverlap: true,
-        },
-        axisName: {
-          color: '#0d98ba',
-          fontSize: 14,
-          show: true,
-        },
-      },
-      series: [
-        {
-          type: 'radar',
-          data: radarData,
-          emphasis: {
-            lineStyle: {
-              width: 4,
-            },
-          },
-          tooltip: {
-            show: true,
-            trigger: 'item',
-          },
-        },
-      ],
-      graphic: [
-        // 上方数字
-        {
-          type: 'group',
-          left: 'center',
-          top: '35%',
-          bounding: 'all',
-          ignore: !showTotal || total === 0,
-          z: 100,
-          children: [
-            {
-              type: 'text',
-              left: 'center',
-              bottom: '40px',
-              z: 100,
-              style: {
-                fill: '#0d98ba',
-                text: total,
-                font: 'bold 72px sans-serif',
-              },
-            },
-          ],
-        },
-        // 下方提示
-        {
-          type: 'group',
-          left: 'center',
-          ignore: !showHint || total === 0,
-          top: '55%',
-          bounding: 'all',
-          children: [
-            {
-              type: 'rect',
-              z: 100,
-              left: 0,
-              top: 'center',
-              shape: {
-                height: 34,
-                width: hintWidthValue,
-              },
-              style: {
-                fill: '#fff',
-                lineWidth: 1,
-                shadowBlur: 8,
-                shadowOffsetX: 3,
-                shadowOffsetY: 3,
-                shadowColor: 'rgba(0,0,0,0.2)',
-              },
-            },
-            {
-              type: 'text',
-              z: 100,
-              left: 6,
-              top: 'center',
-              style: {
-                fill: '#0d98ba',
-                overflow: 'break',
-                text: hintText,
-                fontSize: '18px',
-              },
-            },
-            {
-              type: 'image',
-              z: 100,
-              top: 'center',
-              left: hintWidthValue - 24,
-              style: {
-                image:
-                  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggMWE3IDcgMCAxMTAgMTRBNyA3IDAgMDE4IDF6bTAgMS4xMmE1Ljg4MSA1Ljg4MSAwIDAwMCAxMS43NkE1Ljg4MSA1Ljg4MSAwIDAwOCAyLjEyem0wIDguNjkyYS42MjUuNjI1IDAgMTEwIDEuMjUuNjI1LjYyNSAwIDAxMC0xLjI1em0wLTYuNWMuNjU2IDAgMS4yNzUuMjI1IDEuNzQ0LjYzNi40ODcuNDI3Ljc1NiAxIC43NTQgMS42MTQgMCAuOTA0LS41OTUgMS43MTYtMS41MTcgMi4wN2EuNzU1Ljc1NSAwIDAwLS40ODMuN3YuMzU1YS4xMjUuMTI1IDAgMDEtLjEyNS4xMjZoLS43NWEuMTI1LjEyNSAwIDAxLS4xMjUtLjEyNnYtLjMzNWExLjc0NiAxLjc0NiAwIDAxMS4xMjUtMS42NTNjLjUzMy0uMjA1Ljg3Ny0uNjUuODc3LTEuMTM2IDAtLjY5LS42NzMtMS4yNS0xLjUtMS4yNXMtMS41LjU2LTEuNSAxLjI1di4xMThhLjEyNS4xMjUgMCAwMS0uMTI1LjEyNWgtLjc1YS4xMjUuMTI1IDAgMDEtLjEyNS0uMTI1di0uMTE5YzAtLjYxNC4yNjktMS4xODcuNzU2LTEuNjE0QTIuNjQyIDIuNjQyIDAgMDE4IDQuMzEyeiIgZmlsbC1vcGFjaXR5PSIuMzUiIGZpbGw9IiMxQzI0MkUiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==',
-                height: 20,
-                width: 20,
-                textAlign: 'right',
-              },
-            },
-          ],
-        },
-        // 下方提示悬停时显示的级别提示气泡
-        {
-          type: 'group',
-          left: 0,
-          bottom: 0,
-          bounding: 'all',
-          ignore: !showHint || ignoreHint,
-          enterAnimation: {
-            duration: 100,
-            easing: 'linear',
-          },
-          children: [
-            {
-              type: 'rect',
-              z: 100,
-              left: 0,
-              top: 0,
-              shape: {
-                height: 100,
-                width: 300,
-              },
-              style: {
-                fill: 'rgba(255,255,255,0.1)',
-                shadowBlur: 5,
-                shadowOffsetX: 4,
-                shadowOffsetY: 5,
-                shadowColor: 'rgba(0,0,0,0.8)',
-              },
-            },
-            {
-              type: 'text',
-              z: 110,
-              left: 20,
-              top: 20,
-              style: {
-                fill: '#000',
-                overflow: 'break',
-                text: levelArr.join('\n\n'),
-                font: '14px sans-serif',
-              },
-            },
-          ],
-        },
-      ],
-    };
-  }, [
-    hintNameValue,
-    hintWidthValue,
-    indicatorName,
-    indicatorMax,
-    indicatorMin,
-    _indicatorData,
-    legendKey,
-    _radarLevelData,
-    ignoreHint,
-    showHint,
-    total,
-    showTotal,
-    radarData,
-    radarMax,
-    radarMin,
-    radarDescription,
-  ]);
-
-  const _updateGraphic = (arr: number[]) => {
-    if (arr?.length > 0) {
-      const curTotal = radarValueAccFunc(arr);
-      updateTotal(curTotal);
-    } else {
-      updateTotal(0);
-    }
-  };
-
-  useEffect(() => {
-    // 初始化时显示序列中第一个value
-    _updateGraphic(radarData[0]?.value);
-  }, [radarData]);
-
-  useEffect(() => {
-    // 雷达图悬停交互
-    if (chartNode && chartNode.current) {
-      // @ts-ignore
-      const chartInst = chartNode.current.getEchartsInstance();
-      chartInst.off('mouseover');
-      chartInst.off('mouseout');
-
-      chartInst.on('mouseover', (params: any) => {
-        if (params.componentIndex === 0 && params.componentType === 'graphic') {
-          updateIgnoreHint(false);
-        }
-        if (params.componentIndex === 0 && params.componentType === 'series') {
-          _updateGraphic(params.value);
-        }
-      });
-      chartInst.on('mouseout', (params: any) => {
-        if (params.componentIndex === 0 && params.componentType === 'graphic') {
-          updateIgnoreHint(true);
-        }
-      });
-
-      return () => {
-        chartInst.off('mouseover');
-        chartInst.off('mouseout');
-      };
-    }
-    return () => {};
-  }, [chartNode]);
-
-  useEffect(() => {
-    // 雷达图悬停交互
-    if (chartNode && chartNode.current) {
-      // @ts-ignore
-      const chartInst = chartNode.current.getEchartsInstance();
-
-      chartInst.off('legendselectchanged');
-      chartInst.on('legendselectchanged', (params: any) => {
-        if (Object.values(params.selected).filter(Boolean).length > 0) {
-          let curData: number[] = [];
-          Object.entries(params.selected).forEach(([key, value]) => {
-            if (value && curData.length === 0) {
-              const _data = chartInst.getOption().series[0].data;
-              curData =
-                _data.filter((item: any) => item.name === key)[0]?.value || [];
-            }
-          });
-          if (curData.length > 0) {
-            _updateGraphic(curData);
-          } else {
-            _updateGraphic([]);
-          }
-          curData = [];
-        } else {
-          _updateGraphic([]);
-        }
-      });
-
-      return () => {
-        chartInst.off('legendselectchanged');
-      };
-    }
-    return () => {};
-  }, []);
-  return {
-    chartOption,
-    chartNode,
-    configMessage: isRunningState ? configMessage : undefined,
-  };
-};

package/lib/public/src/components/pcfactory/src/RadarChart/RadarChartType.ts

@@ -1,39 +0,0 @@
-export interface MyRadarEChartsEDProps {
-  style?: React.CSSProperties;
-  className?: any;
-  // relateDataType:
-  //   | '1' // 数据源
-  //   | '2' // 服务
-  //   | '3'; // 手动添加
-  defaultDataSource: Record<string, any>[]; // 内置业务数据
-  radarDataSource: Record<string, any>[]; // 数据源 - 业务数据
-  legendKey: string; // 图例取值的字段名
-  levelTypeName: string; // 级别提示的中文
-
-  indicatorDataSource: Record<string, any>[];
-  defaultIndicatorDataSource: Record<string, any>[];
-  indicatorName: string;
-  indicatorKey: string;
-  indicatorMax: string;
-  indicatorMin: string;
-
-  showTotal: boolean; // 是否显示总数
-  showHint: boolean; // 是否显示级别提示
-
-  defaultHint: Record<string, any>;
-  hint: Record<string, any>;
-  hintName: string;
-  hintWidth: string;
-  visible: boolean;
-  defaultRadarLevelHint: Record<string, any>[];
-  radarLevelHint: Record<string, any>[];
-  radarMax: string;
-  radarMin: string;
-  radarDescription: string;
-}
-
-export type ReactChartHookType = MyRadarEChartsEDProps & {
-  // 是否是运行态
-  isRunningState?: boolean;
-  getEngineApis?: any;
-};

package/lib/public/src/components/pcfactory/src/RadarChart/RadarECharts.tsx

@@ -1,86 +0,0 @@
-import { LingXiFC } from '@lingxiteam/types';
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
-import {
-  // 数据集组件
-  DatasetComponent,
-  GridComponent,
-  LegendComponent,
-  TitleComponent,
-  TooltipComponent,
-  // 内置数据转换器组件 (filter, sort)
-  TransformComponent,
-} from 'echarts/components';
-import * as echarts from 'echarts/core';
-import { LabelLayout, UniversalTransition } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
-import { useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
-import { bind, clear } from 'size-sensor';
-import { useHiddenStyle } from '../utils';
-import { useRadarChartHook } from './RadarChartHook';
-import type { MyRadarEChartsEDProps } from './RadarChartType';
-
-// 注册必须的组件
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  DatasetComponent,
-  LegendComponent,
-  TransformComponent,
-  BarChart,
-  LineChart,
-  PieChart,
-  LabelLayout,
-  UniversalTransition,
-  CanvasRenderer,
-  RadarChart,
-]);
-
-const RadarEChartsED: LingXiFC<MyRadarEChartsEDProps> = (props) => {
-  const { style = {}, visible = true, className = '' } = props;
-  const runningProps = { ...props, isRunningState: true };
-  const { chartOption, chartNode, configMessage } =
-    useRadarChartHook(runningProps);
-  const finalStyle = useHiddenStyle(visible, style);
-  const chartRef = useRef<HTMLDivElement>(null);
-  const chartNodeRef = useRef<echarts.EChartsType>();
-  useImperativeHandle<any, any>(chartNode, () => ({
-    getEchartsInstance() {
-      return chartNodeRef.current;
-    },
-  }));
-
-  useEffect(() => {
-    if (chartOption && chartNodeRef && chartNodeRef.current) {
-      chartNodeRef.current.setOption(chartOption);
-    }
-  }, [chartOption]);
-
-  useLayoutEffect(() => {
-    if (chartRef && chartRef.current) {
-      chartNodeRef.current = echarts.init(chartRef.current);
-      bind(chartRef.current, () => {
-        chartNodeRef.current?.resize();
-      });
-    }
-    return () => {
-      if (chartRef.current) {
-        echarts.dispose(chartRef.current);
-        clear(chartRef.current);
-      }
-    };
-  }, []);
-  if (configMessage) {
-    return <div>{configMessage}</div>;
-  }
-  return (
-    <div
-      data-compid={(props as any)?.['data-compid']}
-      style={finalStyle}
-      className={className}
-      ref={chartRef}
-    />
-  );
-};
-
-export default RadarEChartsED;

package/lib/public/src/components/pcfactory/src/RadarChart/index.tsx

@@ -1,16 +0,0 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
-import { useImperativeHandle } from 'react';
-import RaderChartLoader from './loader';
-import type { MyRadarEChartsEDProps } from './RadarChartType';
-
-const RaderChart = LingxiForwardRef<unknown, MyRadarEChartsEDProps>(
-  (props, ref) => {
-    useImperativeHandle(ref, () => ({
-      // 这里暴漏部分指令方法
-      // 由于组件采用懒加载延迟执行组件，导致组件在未加载完成的时候已经执行了页面加载完成的生命周期，所以未来的指令方法不应放入懒加载中，避免页面加载完成时机无法调用指令。
-    }));
-    return <RaderChartLoader {...props} />;
-  },
-);
-
-export default RaderChart;

package/lib/public/src/components/pcfactory/src/RadarChart/loader.tsx

@@ -1,12 +0,0 @@
-import Loadable from 'react-loadable';
-import { LoadingComponennt } from '../utils/LoaderHelper';
-
-const RadarChartLoader = Loadable({
-  loader: async () =>
-    (await import(
-      /* webpackChunkName: 'pcFactory-RadarECharts' */ './RadarECharts'
-    )) as unknown as React.ComponentType<any>,
-  loading: LoadingComponennt,
-});
-
-export default RadarChartLoader;

package/lib/public/src/components/pcfactory/src/RadarChart/radarDefaultConfig.js

@@ -1,55 +0,0 @@
-// 维度数据
-export const defaultIndicatorDataSource = [
-  { name: '基本素养', dataKey: 'basic', max: 6500, min: 0 },
-  { name: '执行落地', dataKey: 'excution', max: 16000, min: 0 },
-  { name: '守约记录', dataKey: 'manner', max: 30000, min: 0 },
-  { name: '营销能力', dataKey: 'sale', max: 38000, min: 0 },
-  { name: '服务能力', dataKey: 'service', max: 52000, min: 0 },
-];
-
-// 业务数据
-export const defaultDataSource = [
-  {
-    id: '1',
-    name: '吉安县白云路惠尔佳委托经营厅',
-    basic: 4200,
-    excution: 3000,
-    manner: 20000,
-    sale: 35000,
-    service: 50000,
-  },
-  {
-    id: '2',
-    name: '抚州市临川区抚临路委托经营厅',
-    basic: 5000,
-    excution: 14000,
-    manner: 28000,
-    sale: 26000,
-    service: 42000,
-  },
-];
-
-// 雷达图提示常在的区域
-export const defaultHint = {
-  text: '信用',
-  width: 120,
-};
-
-// 雷达图提示hover后
-export const defaultRadarLevelHint = [
-  {
-    min: 0,
-    max: 1000,
-    description: '一般',
-  },
-  {
-    min: 1000,
-    max: 114000,
-    description: '好',
-  },
-  {
-    min: 114000,
-    max: 142500,
-    description: '极好',
-  },
-];