From a8d7a2c4c06dfd02994f774bce527406342b3b43 Mon Sep 17 00:00:00 2001 From: pomelo-nwu Date: Fri, 20 Oct 2023 16:05:43 +0800 Subject: [PATCH] feat: update advance assets --- .../components/AnalysisHistory/FlowGraph.tsx | 9 +- .../AnalysisHistory/flowNodeRegistry.tsx | 1 + .../src/components/AnalysisHistory/util.tsx | 7 +- .../components/GraphAnnotation/Component.tsx | 4 +- .../components/SubGraphLayout/Component.tsx | 10 +- .../src/components/SubGraphLayout/utils.ts | 7 +- .../TableMode/hooks/useListenEdgeSelect.tsx | 6 +- .../TableMode/hooks/useListenNodeSelect.tsx | 3 +- .../components/TableMode/utils/highlight.ts | 3 +- .../src/components/hooks/useRedoUndo.tsx | 190 +--------- .../src/components/index.tsx | 8 +- .../src/elements/ReasonNode/index.tsx | 22 -- .../src/elements/ReasonNode/readme.md | 61 --- .../reason_analysis_node/bizQuotasMapping.ts | 29 -- .../ReasonNode/reason_analysis_node/colors.ts | 76 ---- .../reason_analysis_node/draw_bizIntervene.ts | 43 --- .../reason_analysis_node/draw_bizQuotas.ts | 349 ------------------ .../reason_analysis_node/draw_button.ts | 28 -- .../reason_analysis_node/draw_contribution.ts | 87 ----- .../reason_analysis_node/draw_empty.ts | 44 --- .../reason_analysis_node/draw_keyShape.ts | 30 -- .../reason_analysis_node/draw_rose.ts | 262 ------------- .../reason_analysis_node/draw_runningState.ts | 77 ---- .../reason_analysis_node/draw_variability.ts | 93 ----- .../ReasonNode/reason_analysis_node/index.ts | 158 -------- .../reason_analysis_node/interface.ts | 128 ------- .../reason_analysis_node/preprocess.ts | 111 ------ .../reason_analysis_node/roseChangeMapping.ts | 42 --- .../reason_analysis_node/tooltip.less | 43 --- .../reason_analysis_node/tooltip.ts | 235 ------------ .../ReasonNode/reason_analysis_node/util.ts | 117 ------ .../src/elements/ReasonNode/registerMeta.tsx | 192 ---------- .../src/elements/ReasonNode/registerShape.ts | 3 - .../elements/ReasonNode/registerTransform.ts | 30 -- 34 files changed, 40 insertions(+), 2468 deletions(-) delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/index.tsx delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/readme.md delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/bizQuotasMapping.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/colors.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_bizIntervene.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_bizQuotas.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_button.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_contribution.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_empty.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_keyShape.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_rose.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_runningState.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_variability.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/index.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/interface.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/preprocess.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/roseChangeMapping.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/tooltip.less delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/tooltip.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/util.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/registerMeta.tsx delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/registerShape.ts delete mode 100644 packages/gi-assets-advance/src/elements/ReasonNode/registerTransform.ts diff --git a/packages/gi-assets-advance/src/components/AnalysisHistory/FlowGraph.tsx b/packages/gi-assets-advance/src/components/AnalysisHistory/FlowGraph.tsx index 78ab9a9d2..890c966e6 100644 --- a/packages/gi-assets-advance/src/components/AnalysisHistory/FlowGraph.tsx +++ b/packages/gi-assets-advance/src/components/AnalysisHistory/FlowGraph.tsx @@ -1,12 +1,13 @@ -import { useMemoizedFn } from 'ahooks'; +//@ts-nocheck import G6, { IGraph } from '@antv/g6'; +import { useMemoizedFn } from 'ahooks'; import React, { CSSProperties, useEffect, useRef } from 'react'; import { useImmer } from 'use-immer'; -import { TemplateData, TemplateNode } from './type'; -import { createFlowGraph, createTooltip } from './util'; -import { registerNodes } from './flowNodeRegistry'; import './flowNodeRegistry'; +import { registerNodes } from './flowNodeRegistry'; import './index.less'; +import { TemplateData, TemplateNode } from './type'; +import { createFlowGraph, createTooltip } from './util'; const { Tooltip } = G6; diff --git a/packages/gi-assets-advance/src/components/AnalysisHistory/flowNodeRegistry.tsx b/packages/gi-assets-advance/src/components/AnalysisHistory/flowNodeRegistry.tsx index 48284475d..c4365313f 100644 --- a/packages/gi-assets-advance/src/components/AnalysisHistory/flowNodeRegistry.tsx +++ b/packages/gi-assets-advance/src/components/AnalysisHistory/flowNodeRegistry.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import G6 from '@antv/g6'; /** diff --git a/packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx b/packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx index 11d09ff81..d483fc8fe 100644 --- a/packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx +++ b/packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx @@ -1,10 +1,11 @@ -import * as React from 'react'; -import { Form, Input, Popover, Tooltip } from 'antd'; +//@ts-nocheck import { PictureOutlined } from '@ant-design/icons'; import G6 from '@antv/g6'; -import { TemplateNode } from './type'; +import { Form, Input, Popover, Tooltip } from 'antd'; +import * as React from 'react'; import RJV from 'react-json-view'; import $i18n from '../../i18n'; +import { TemplateNode } from './type'; const ReactJson: any = RJV; diff --git a/packages/gi-assets-advance/src/components/GraphAnnotation/Component.tsx b/packages/gi-assets-advance/src/components/GraphAnnotation/Component.tsx index 659e5dc8d..577e89fff 100644 --- a/packages/gi-assets-advance/src/components/GraphAnnotation/Component.tsx +++ b/packages/gi-assets-advance/src/components/GraphAnnotation/Component.tsx @@ -1,5 +1,6 @@ +//@ts-nocheck import { StarFilled } from '@ant-design/icons'; -import G6, { Item } from '@antv/g6'; +import G6 from '@antv/g6'; import { icons, useContext } from '@antv/gi-sdk'; import { Menu } from 'antd'; import insertCss from 'insert-css'; @@ -8,6 +9,7 @@ import { bind } from 'size-sensor'; import $i18n from '../../i18n'; import './index.less'; +type Item = any; export interface GraphAnnotationProps { contextmenu: any; annotationWay: string; diff --git a/packages/gi-assets-advance/src/components/SubGraphLayout/Component.tsx b/packages/gi-assets-advance/src/components/SubGraphLayout/Component.tsx index 1425d5a89..76d10cb55 100644 --- a/packages/gi-assets-advance/src/components/SubGraphLayout/Component.tsx +++ b/packages/gi-assets-advance/src/components/SubGraphLayout/Component.tsx @@ -1,14 +1,16 @@ import { CaretRightOutlined, DeleteOutlined } from '@ant-design/icons'; -import { Item } from '@antv/g6'; + import { useContext } from '@antv/gi-sdk'; import { Button, Collapse, message, Select } from 'antd'; import React from 'react'; import { useImmer } from 'use-immer'; +import $i18n from '../../i18n'; import { LAYOUTS } from './const'; -import { ILayoutOption } from './typing'; -import { updateLayout, getLayoutOptions } from './utils'; import './index.less'; -import $i18n from '../../i18n'; +import { ILayoutOption } from './typing'; +import { getLayoutOptions, updateLayout } from './utils'; + +type Item = any; const { Panel } = Collapse; diff --git a/packages/gi-assets-advance/src/components/SubGraphLayout/utils.ts b/packages/gi-assets-advance/src/components/SubGraphLayout/utils.ts index 3e446fe7a..29b2d658e 100644 --- a/packages/gi-assets-advance/src/components/SubGraphLayout/utils.ts +++ b/packages/gi-assets-advance/src/components/SubGraphLayout/utils.ts @@ -1,5 +1,5 @@ +import { GraphData, IGraph } from '@antv/g6'; import { LAYOUTS, LayoutMap } from './const'; -import { Graph, GraphData } from '@antv/g6'; import { ILayoutOption } from './typing'; /** @@ -13,6 +13,7 @@ export const cropGraphByNodes = (graphData: GraphData, targetNodes: { id: string const ids = targetNodes.map(node => node.id); const newEdges = edges!.filter(edge => { const { source, target } = edge; + //@ts-ignore if (ids.indexOf(source!) !== -1 && ids.indexOf(target!) !== -1) { return true; } @@ -20,9 +21,11 @@ export const cropGraphByNodes = (graphData: GraphData, targetNodes: { id: string }); const newNodes = nodes! .filter(node => { + //@ts-ignore return ids.indexOf(node.id) !== -1; }) .map(node => { + //@ts-ignore // 映射节点大小，用于圆形布局防重叠：https://github.com/antvis/layout/blob/master/src/layout/circular.ts#L213 node.size = node.style?.keyshape?.size || 26; /* @@ -46,7 +49,7 @@ export const cropGraphByNodes = (graphData: GraphData, targetNodes: { id: string */ export const updateLayout = ( layouts: ILayoutOption[], - graph: Graph, + graph: IGraph, gap: number, direction: 'vertical' | 'horizontal', ) => { diff --git a/packages/gi-assets-advance/src/components/TableMode/hooks/useListenEdgeSelect.tsx b/packages/gi-assets-advance/src/components/TableMode/hooks/useListenEdgeSelect.tsx index ea293949d..5363ac963 100644 --- a/packages/gi-assets-advance/src/components/TableMode/hooks/useListenEdgeSelect.tsx +++ b/packages/gi-assets-advance/src/components/TableMode/hooks/useListenEdgeSelect.tsx @@ -1,8 +1,8 @@ -import { IEdge, INode } from '@antv/g6'; +import { useContext } from '@antv/gi-sdk'; import { S2Event, SpreadSheet } from '@antv/s2'; import React from 'react'; - -import { useContext } from '@antv/gi-sdk'; +type IEdge = any; +type INode = any; const useListenEdgeSelect = (isSelectedActive: boolean, s2Instance: SpreadSheet | null, isFullScreen: boolean) => { const { data: graphData, graph, largeGraphData, updateContext } = useContext(); React.useEffect(() => { diff --git a/packages/gi-assets-advance/src/components/TableMode/hooks/useListenNodeSelect.tsx b/packages/gi-assets-advance/src/components/TableMode/hooks/useListenNodeSelect.tsx index a096a05dc..3ee98d171 100644 --- a/packages/gi-assets-advance/src/components/TableMode/hooks/useListenNodeSelect.tsx +++ b/packages/gi-assets-advance/src/components/TableMode/hooks/useListenNodeSelect.tsx @@ -1,6 +1,7 @@ -import { IEdge, INode } from '@antv/g6'; import { S2Event, SpreadSheet } from '@antv/s2'; import React from 'react'; +type IEdge = any; +type INode = any; import { useContext } from '@antv/gi-sdk'; diff --git a/packages/gi-assets-advance/src/components/TableMode/utils/highlight.ts b/packages/gi-assets-advance/src/components/TableMode/utils/highlight.ts index d5036f4db..b2689e8d9 100644 --- a/packages/gi-assets-advance/src/components/TableMode/utils/highlight.ts +++ b/packages/gi-assets-advance/src/components/TableMode/utils/highlight.ts @@ -1,4 +1,5 @@ -import { IEdge, INode } from '@antv/g6'; +type IEdge = any; +type INode = any; export const highlightBySelectedNodes = (selectedNodes: Set, context) => { const { updateContext, largeGraphData, data: graphData, graph } = context; if (largeGraphData) { diff --git a/packages/gi-assets-advance/src/components/hooks/useRedoUndo.tsx b/packages/gi-assets-advance/src/components/hooks/useRedoUndo.tsx index fb2e8497a..469fe1e36 100644 --- a/packages/gi-assets-advance/src/components/hooks/useRedoUndo.tsx +++ b/packages/gi-assets-advance/src/components/hooks/useRedoUndo.tsx @@ -1,205 +1,25 @@ import { Stack } from '@antv/algorithm'; -import { Graph, GraphData, GraphinContext, IG6GraphEvent } from '@antv/graphin'; -import React from 'react'; export interface Redo { visible: boolean; color: string; hasDivider: boolean; } -//修复异常数据 -const fixNodePosition = (graph: Graph, graphData: GraphData): GraphData => { - const currentData = graph.save() as any; - const nodeMap: any = {}; - currentData.nodes?.forEach((n: any) => { - nodeMap[n.id] = n; - }); - const nodes = graphData.nodes?.map((n: any) => { - if (typeof n.x !== 'number' || typeof n.y !== 'number') { - const node = nodeMap[n.id]; - if (node) { - return { - ...n, - x: node.x, - y: node.y, - }; - } else { - return { - ...n, - x: 0, - y: 0, - }; - } - } - return n; - }); - return { - ...graphData, - nodes, - }; -}; + const useRedoUndo = (): { redo: () => void; undo: () => void; undoStack: Stack; redoStack: Stack; } => { - const { graph } = React.useContext(GraphinContext); - const [stackInfo, setStackInfo] = React.useState(() => { - return { - undoStack: graph.getUndoStack(), - redoStack: graph.getRedoStack(), - }; - }); - const redo = () => { - const redoStack = graph.getRedoStack(); - - if (!redoStack || redoStack.length === 0) { - return; - } - - const currentData = redoStack.pop(); - if (currentData) { - const { action } = currentData; - let data = currentData.data.after; - graph.pushStack(action, { - ...currentData.data, - after: fixNodePosition(graph, currentData.data.after), - before: fixNodePosition(graph, currentData.data.before), - }); - if (action === 'delete') { - data = currentData.data.before; - } - update(action, data); - } - }; - const undo = () => { - const undoStack = graph.getUndoStack(); - - if (!undoStack || undoStack.length === 1) { - return; - } - - const currentData = undoStack.pop(); - if (currentData) { - const { action } = currentData; - graph.pushStack( - action, - { - ...currentData.data, - after: fixNodePosition(graph, currentData.data.after), - before: fixNodePosition(graph, currentData.data.before), - }, - 'redo', - ); - let data = currentData.data.before; - - if (action === 'add') { - data = currentData.data.after; - } - update(action, data); - } - }; - const update = (action: string, data: GraphData) => { - if (!data) return; - - switch (action) { - case 'visible': { - Object.keys(data).forEach(key => { - const array = data[key]; - if (!array) return; - array.forEach((model: any) => { - const item = graph.findById(model.id); - if (!item) { - return; - } - if (model.visible) { - graph.showItem(item, false); - } else { - graph.hideItem(item, false); - } - }); - }); - break; - } - case 'render': - case 'update': - const nodeMap = graph.getNodes().reduce((map: any, node: any) => { - map[node.getID()] = node; - return map; - }, {}); - Object.keys(data).forEach(key => { - const array = data[key]; - if (!array) return; - array.forEach((model: any) => { - if (nodeMap[model.id]) { - graph.updateItem(model.id, model, false); - } - }); - }); - break; - case 'changedata': - graph.changeData(data, false); - break; - case 'delete': { - Object.keys(data).forEach(key => { - const array = data[key]; - if (!array) return; - array.forEach((model: any) => { - const itemType = model.itemType; - delete model.itemType; - graph.addItem(itemType, model, false); - }); - }); - break; - } - case 'add': - Object.keys(data).forEach(key => { - const array = data[key]; - if (!array) return; - array.forEach((model: any) => { - graph.removeItem(model.id, false); - }); - }); - break; - case 'updateComboTree': - const comboMap: any = {}; - graph.getCombos().forEach(combo => { - comboMap[combo.getID()] = combo; - }); - Object.keys(data).forEach(key => { - const array = data[key]; - if (!array) return; - array.forEach((model: any) => { - if (!comboMap[model.id] || (model.parentId && !comboMap[model.parentId])) { - return; - } - graph.updateComboTree(model.id, model.parentId, false); - }); - }); - break; - default: - } - }; + const redo = () => {}; + const undo = () => {}; - React.useEffect(() => { - const handleStackChanage = (evt: IG6GraphEvent) => { - const { undoStack, redoStack } = evt as any; - setStackInfo({ - undoStack, - redoStack, - }); - }; - graph.on('stackchange', handleStackChanage); - return () => { - graph.off('stackchange', handleStackChanage); - }; - }, [graph]); //@ts-ignore return { - ...stackInfo, + undoStack: [], + redoStack: [], redo, undo, - ...stackInfo, } as any; }; diff --git a/packages/gi-assets-advance/src/components/index.tsx b/packages/gi-assets-advance/src/components/index.tsx index 4ca910b18..de96153eb 100644 --- a/packages/gi-assets-advance/src/components/index.tsx +++ b/packages/gi-assets-advance/src/components/index.tsx @@ -9,13 +9,13 @@ // import SearchBar from './SearchBar'; import AddSheetbar from './AddSheetbar'; import CypherQuery from './CypherQuery'; -import GraphAnnotation from './GraphAnnotation'; +// import GraphAnnotation from './GraphAnnotation'; import GremlinQuery from './GremlinQuery'; import ModeSwitch from './ModeSwitch'; import Redo from './Redo'; import Sheetbar from './Sheetbar'; // import SnapshotGallery from './SnapshotGallery'; -import AnalysisHistory from './AnalysisHistory'; +// import AnalysisHistory from './AnalysisHistory'; import Assistant from './Assistant'; import JSONMode from './JSONMode'; import StructAnalysis from './StructAnalysis'; @@ -27,11 +27,11 @@ import ThemeSetting from './ThemeSetting'; import Undo from './Undo'; export { AddSheetbar, - AnalysisHistory, + // AnalysisHistory, Assistant, // TemplateQuery, CypherQuery, - GraphAnnotation, + // GraphAnnotation, // SnapshotGallery, GremlinQuery, JSONMode, diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/index.tsx b/packages/gi-assets-advance/src/elements/ReasonNode/index.tsx deleted file mode 100644 index 48cbd7b01..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import registerMeta from './registerMeta'; -import registerShape from './registerShape'; -import registerTransform from './registerTransform'; - -/** index.md 中解析得到默认值，也可用户手动修改 */ import $i18n from '../../i18n'; -const info = { - id: 'ReasonNode', - category: 'node', - name: $i18n.get({ id: 'advance.elements.ReasonNode.StrawberryMap', dm: '草莓图' }), - desc: $i18n.get({ - id: 'advance.elements.ReasonNode.CompositeNodesIncludingRoseCharts', - dm: '复合节点，包含玫瑰图、柱状图、节点等，原来用在归因树', - }), - cover: 'https://gw-office.alipayobjects.com/bmw-prod/5b9790f0-7c67-47cb-b477-b00df3343879.png', -}; - -export default { - info, - registerShape, - registerMeta, - registerTransform, -}; diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/readme.md b/packages/gi-assets-advance/src/elements/ReasonNode/readme.md deleted file mode 100644 index f50b02aaf..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/readme.md +++ /dev/null @@ -1,61 +0,0 @@ -节点依赖数据结构 - -```javascript -/** 树结构 */ -type ITreeData = { - id: string /** 唯一id */; - - type?: string /** 类型 */; - - x?: number; - - y?: number; - - contributionRange: { min: number; max: number } /** 贡献度范围（全局） */; - - variabilityRange: { min: number; max: number } /** 异变度范围（全局） */; - - isShowingChildren?: boolean /** 展开自节点状态 */; - - property: IBizProperty /** 业务属性 */; - - children?: Array; - - edge?: IEdge; - - /** 这个挂了元素是不是需要显示的信息，只挂在root节点*/ - attrShowingCfg?: IFilterCfg; - - [props: string]: any; -}; - -type IEdge = { - isManualFlag?: boolean; - flag?: 'left' | 'right'; -}; - -/** 点业务属性 */ -type IBizProperty = { - // 指标原始配置 - bizIdentifieBucket: IBizIdentifieBucket; - /** 业务可干预 */ - canBeInterupt: boolean /** 是否可干预 */; - - runningState: 'running' | 'finished' /** 机器运行状态 */; - - contribution: number /** 贡献度 */; - - // explaination: IDegreeData /** 解释度 不要了 */; - - variability: number /** 异变度 */; - - changes: Array /** 变化项目，用于绘制南丁格尔玫瑰图 */; - - quotas: Array /** 指标， 用于绘制每个节点最底部的指标元素 */; - - relationTag?: 'right' | 'wrong' | undefined /** 与父节点的边关系 */; - - [key: string]: any /** 其他属性，需要进一步确定 */; -}; - -``` \ No newline at end of file diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/bizQuotasMapping.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/bizQuotasMapping.ts deleted file mode 100644 index 3f528eaf1..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/bizQuotasMapping.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { IBizIdentifieBucket } from './interface'; - -export default class BizIdentifiedMapping { - private map: Map>; - - private static instance: BizIdentifiedMapping; - - private constructor() { - this.map = new Map(); - } - - public static getInstance() { - if (!BizIdentifiedMapping.instance) { - BizIdentifiedMapping.instance = new BizIdentifiedMapping(); - } - return BizIdentifiedMapping.instance; - } - - public setMappingData(bizIdentifieBucket: IBizIdentifieBucket) { - this.map = new Map(); - Object.keys(bizIdentifieBucket ?? {}).forEach(quota => { - this.map.set(quota, bizIdentifieBucket[quota]); - }); - } - - public getMappingData() { - return this.map; - } -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/colors.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/colors.ts deleted file mode 100644 index bd04b8a40..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/colors.ts +++ /dev/null @@ -1,76 +0,0 @@ -// 色彩对 -export type IColorPair = { - primary: string; // 主色 - secondary: string; // 副色 -}; - -export const COLORS: Array = [ - // 蓝 - { - primary: '#3D76DD', - secondary: '#9AC5FF', - }, - // 绿 - { - primary: '#19A576', - secondary: '#61DDAA', - }, - // 灰 - { - primary: '#65789B', - secondary: '#B4C8ED', - }, - // 黄 - { - primary: '#D7A100', - secondary: '#F6BD16', - }, - // 茄 - { - primary: '#5349E0', - secondary: '#CCB0FF', - }, - // 天 - { - primary: '#5AB8DB', - secondary: '#78D3F8', - }, - // 葡 - { - primary: '#7B48A1', - secondary: '#EBB0FF', - }, - // 土 - { - primary: '#D77622', - secondary: '#FFAB57', - }, - // 翠 - { - primary: '#008685', - secondary: '#6FD8D6', - }, - // 粉 - { - primary: '#D37099', - secondary: '#FFA6D0', - }, -]; - -export class ColorPicker { - private index: number = 0; - - private mode: 'reverse' | 'common' = 'common'; // 正向选择、 逆向选择 - - constructor(mode?: 'reverse' | 'common') { - this.mode = mode ?? 'common'; - if (mode === 'reverse') this.index = COLORS.length - 1; - } - - public pickColorPair() { - const index = Math.abs(this.index % COLORS.length); - const colorPair = COLORS[index]; - this.index += this.mode === 'common' ? 1 : -1; - return colorPair; - } -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_bizIntervene.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_bizIntervene.ts deleted file mode 100644 index b3c0025f6..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_bizIntervene.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { ITreeData } from './interface'; - -// 业务可干预 -export default function drawBizIntervene(group: any, data: ITreeData) { - const { property = { canBeInterupt: true, runningState: 'running' }} = data; - - const { canBeInterupt } = property; - - // 过滤掉不符合条件的 - // if ( - // !attrShowingCfg?.bizIntervene?.show_group || - // (!attrShowingCfg?.bizIntervene?.show_canbe_interupted && canBeInterupt) || - // (!attrShowingCfg?.bizIntervene?.show_notbe_interupted && !canBeInterupt) - // ) - // return; - - const base_raduis_offset = 55; - // 轨道 - - // 表示业务可干预 - if (canBeInterupt) { - group.addShape('circle', { - attrs: { - x: 0, - y: 0, - r: base_raduis_offset, - stroke: '#aaaaaa', - fill: '#777777', - fillOpacity: 0.3, - }, - }); - } else { - group.addShape('circle', { - attrs: { - x: 0, - y: 0, - r: base_raduis_offset, - stroke: '#aaaaaa', - lineDash: [4, 5], - }, - }); - } -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_bizQuotas.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_bizQuotas.ts deleted file mode 100644 index bb399fa88..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_bizQuotas.ts +++ /dev/null @@ -1,349 +0,0 @@ -import { isBoolean, isNumber, isString } from 'lodash'; -import { ITreeData, IQuotaItem } from './interface'; -import { getValueInRange_linear, getClientRelativPoint } from './util'; -import BizIdentifiedMapping from './bizQuotasMapping'; -import { ellipseText } from './util'; -import { ColorPicker, IColorPair } from './colors'; -import { Tooltip, getTextContent } from './tooltip'; - -// 业务指标 -import $i18n from '../../../i18n'; -export default function drawBizQuotas(group: any, data: ITreeData) { - console.log('drawBizQuotas', data); - const { property = { quotas: [] }, attrShowingCfg = {} } = data; - - const { quotas = [] } = property; - - const base_raduis_offset = 55; - // 指标轨道 - // 为了美观就算显示属性没有也加上轨道 - // 轨道后面用来表示业务可干预了 - // group.addShape('circle', { - // attrs: { - // x: 0, - // y: 0, - // r: base_raduis_offset, - // stroke: '#aaaaaa', - // lineDash: [4, 5], - // }, - // }); - - // 显示属性 - const { bizQuotas = {} } = attrShowingCfg as any; - if (!bizQuotas.show_group) return; // 如果show_group是false就不用绘制了 - - const colorPicker = new ColorPicker(); - - // const positions: Array<{x: number; y: number}> = []; - // 根据显示设置过滤数据 - const filteredQuotas = quotas.filter(quota => { - const { value, isBranchData = false } = quota; - if ( - (isBoolean(value) || - value === $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_bizQuotas.Yes', dm: '是' }) || - value === $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_bizQuotas.No', dm: '否' })) && - bizQuotas.cat_boolean - ) - return true; - if (isBranchData && bizQuotas.cat_number) return true; - if ( - isString(value) && - value !== $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_bizQuotas.Yes', dm: '是' }) && - value !== $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_bizQuotas.No', dm: '否' }) && - !isBranchData && - bizQuotas.cat_string - ) - return true; - return false; - }); - - let angle = 0; - if (filteredQuotas.length % 2 === 0) { - // 偶数 - angle -= Math.PI / 6 / 2; - } - - const perAngle = Math.PI / 6; - - filteredQuotas.forEach((quota, index) => { - const colorPair = colorPicker.pickColorPair(); - - const x = Math.cos(angle) * base_raduis_offset; - const y = Math.sin(angle) * base_raduis_offset; - - drawQuotaItem(group, quota, { x, y }, colorPair, bizQuotas); - - const curAngle = angle + perAngle * (index + 1) * (index % 2 === 0 ? 1 : -1); - - angle = curAngle; - }); -} - -function drawQuotaItem( - group: any, - quota: IQuotaItem, - position: { x: number; y: number }, - colorPair: IColorPair, - bizQuotas: // 显示的配置设置 - any, -) { - const { value, name, isBranchData = false } = quota; - const bizIdentifiedMap = BizIdentifiedMapping.getInstance().getMappingData(); - const identifiedArr = bizIdentifiedMap.get(name); - - if (identifiedArr) { - // 是预设值 - addIdentifiedShape(group, value, identifiedArr, position, colorPair); - } else if ( - isBoolean(value) || - value === $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_bizQuotas.Yes', dm: '是' }) || - value === $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_bizQuotas.No', dm: '否' }) - ) { - // 添加正方形 - const rect_width = 12; - const rect1 = group.addShape('rect', { - attrs: { - x: -rect_width / 2, - y: -rect_width / 2, - width: rect_width, - height: rect_width, - fill: colorPair.primary, - stroke: colorPair.secondary, - lineWidth: 1.5, - fillOpacity: value ? 0.8 : 0, - }, - }); - - rect1.rotate(Math.PI / 4); - rect1.translate(position.x, position.y); - } else if (isBranchData) { - const radius_base = 10; - const { min = 0, max = 0 } = quota; - const radius = getValueInRange_linear({ current: value as number, min, max }, { min: 5, max: 8 }); - - group.addShape('circle', { - attrs: { - x: position.x, - y: position.y, - r: radius, - fill: colorPair.primary, - // stroke: 'limegreen', - fillOpacity: 0.8, - }, - }); - group.addShape('circle', { - attrs: { - x: position.x, - y: position.y, - r: radius_base, - stroke: colorPair.secondary, - }, - }); - } else { - const radius_base = 10; - const symbol = 'triangle'; - group.addShape('marker', { - attrs: { - symbol, - x: position.x, - y: position.y, - r: radius_base, - fill: '#65789b', - stroke: '#65789b', - lineWidth: 1.5, - fillOpacity: 0.5, - }, - }); - } - - // 添加文字 - if (bizQuotas.show_description) addDescription(group, quota, position); -} - -function addIdentifiedShape( - group: any, - dataValue: any, - identifiedArr: string[], - position: { x: number; y: number }, - colorPair: IColorPair, -) { - const index = identifiedArr - .filter( - item => item !== $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_bizQuotas.Other', dm: '其他' }), - ) - .findIndex(item => item === dataValue); - const radius_base = 10; - const indexRadius = [3, 5, 8, 10]; - - if (index === -1 || index > indexRadius.length - 1) { - // 其他 - group.addShape('circle', { - attrs: { - x: position.x, - y: position.y, - r: radius_base, - stroke: colorPair.secondary, - }, - }); - [0, -1, 1].forEach(i => { - group.addShape('circle', { - attrs: { - x: position.x - i * 3, - y: position.y, - r: 1, - fill: colorPair.secondary, - }, - }); - }); - return; - } - group.addShape('circle', { - attrs: { - x: position.x, - y: position.y, - r: indexRadius[index], - fill: colorPair.primary, - // stroke: 'limegreen', - fillOpacity: 0.8, - }, - }); - group.addShape('circle', { - attrs: { - x: position.x, - y: position.y, - r: radius_base, - stroke: colorPair.secondary, - }, - }); -} - -// 每一个指标的说明文字 -function addDescription(group: any, quota: IQuotaItem, basePostion: { x: number; y: number }) { - const { name, value } = quota; - const labelMargin = 16; - const labelPosition = { - x: basePostion.x + labelMargin, - y: basePostion.y, - }; - // label - let label = name; - const labelLengthLimit = 10; // 最大长度 - const labelLength = label.length; - let ellipseLabel = false; - let cursorCfg = {}; - if (labelLength > labelLengthLimit) { - ellipseLabel = true; - cursorCfg = { cursor: 'pointer' }; - label = ellipseText(name, labelLengthLimit); - } - - /** - * 下面注释是设计逻辑 - * 但是后来业务方同学要求修改 - */ - // const labelShape = group.addShape('text', { - // attrs: { - // text: label, - // x: labelPosition.x, - // y: labelPosition.y, - // fill: '#FFFFFF', - // textBaseline: 'middle', - // opacity: 0.65, - // ...cursorCfg, - // }, - // }); - - // // value - // const valueMargin = 152; - // const valuePosition = { - // x: basePostion.x + valueMargin, - // y: basePostion.y, - // }; - // let valueStr = value; - // if (isBoolean(value)) { - // valueStr = value ? '是' : '否'; - // } - - // group.addShape('text', { - // attrs: { - // text: valueStr, - // x: valuePosition.x, - // y: valuePosition.y, - // fill: '#FFFFFF', - // textBaseline: 'middle', - // opacity: 0.85, - // }, - // }); - // // 如果 ellipseLabel - // // 显示 tooltip - // if (ellipseLabel) { - // labelShape.on('mouseenter', (e: any) => { - // // 视口位置 - // const { clientX, clientY } = e; - // // 偏移 - // const offSet = 20; - // // 容器中相对位置 - // const { x, y } = getClientRelativPoint(clientX + offSet, clientY + offSet); - // const tooltip = Tooltip.getInstance(); - // tooltip - // ?.buildContent(toAppendDoms => { - // // 构造tooltip的展示内容 - // getTextContent(toAppendDoms, name); - // }) - // ?.show(x, y); - // }); - - // labelShape.on('mouseleave', () => { - // const tooltip = Tooltip.getInstance(); - // tooltip?.hide(); - // }); - // } - - /** - * 业务方要求修改的非设计逻辑 - */ - let valueStr = value; - if (isBoolean(value)) { - valueStr = value - ? $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_bizQuotas.Yes', dm: '是' }) - : $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_bizQuotas.No', dm: '否' }); - } - const showText = `${label}: ${valueStr}`; - const fullText = `${name}: ${valueStr}`; - const labelShape = group.addShape('text', { - attrs: { - text: valueStr ? showText : label, - x: labelPosition.x, - y: labelPosition.y, - fill: '#FFFFFF', - textBaseline: 'middle', - opacity: 0.85, - ...cursorCfg, - }, - }); - - // 如果 ellipseLabel - // 显示 tooltip - if (ellipseLabel) { - labelShape.on('mouseenter', (e: any) => { - // 视口位置 - const { clientX, clientY } = e; - // 偏移 - const offSet = 20; - // 容器中相对位置 - const { x, y } = getClientRelativPoint(clientX + offSet, clientY + offSet); - const tooltip = Tooltip.getInstance(); - tooltip - ?.buildContent(toAppendDoms => { - // 构造tooltip的展示内容 - getTextContent(toAppendDoms, fullText); - }) - ?.show(x, y); - }); - - labelShape.on('mouseleave', () => { - const tooltip = Tooltip.getInstance(); - tooltip?.hide(); - }); - } -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_button.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_button.ts deleted file mode 100644 index 72bd7660c..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_button.ts +++ /dev/null @@ -1,28 +0,0 @@ -// 绘制小按钮 -export default function drawButton(group: any /* data: any = {} */) { - const radius_base = 16; - const buble_raduis = 5; - const center = { x: radius_base, y: 0 }; - - group.addShape('circle', { - attrs: { - x: center.x, - y: center.y, - r: buble_raduis, - fill: '#ffffff44', - }, - }); - - const icon_width = 5; - const icon_height = 1.4; - group.addShape('rect', { - attrs: { - width: icon_width, - height: icon_height, - x: center.x - icon_width / 2, - y: center.y - icon_height / 2, - fill: 'white', - radius: 1, - }, - }); -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_contribution.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_contribution.ts deleted file mode 100644 index 2465dae70..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_contribution.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { IGroup } from '@antv/g6'; -import { ITreeData } from './interface'; -import { getValueInRange_linear, getClientRelativPoint } from './util'; -import { Tooltip, ISimpleKVTooltipData, getSimpleKVContent } from './tooltip'; -import $i18n from '../../../i18n'; - -const Cfg = { - Radius_Min: 25, - Radius_Max: 55, -}; - -// 得到key shape -export default function drawContribution(group: IGroup, data: ITreeData) { - console.log('drawContribution', data); - const { contributionRange = { min: 0, max: 0 }, property = { contribution: 0 }, attrShowingCfg = {} } = data; - // 显示属性 - const { degreeState = {} } = attrShowingCfg as any; - - let { min, max } = contributionRange; - const { contribution } = property; - - min = min ?? 0; - max = max ?? 1; - - // 控制显示 - if (!degreeState.show_group || !degreeState.show_contribution) return; // 如果show_group是false就不用绘制了 - // 数值过滤 - // 过滤掉不在范围的 - // if ( - // contribution < degreeState.range_contribute[0] || - // contribution > degreeState.range_contribute[1] - // ) - // return; - - const valueSpace = { - min, - max, - current: contribution, - }; - const mappingSpace = { - min: Cfg.Radius_Min, - max: Cfg.Radius_Max, - }; - - const radius = getValueInRange_linear(valueSpace, mappingSpace); - - const shape = group?.addShape('circle', { - attrs: { - x: 0, - y: 0, - r: radius, - fill: `l(90) 0:#1890ff00 0.8:#1890ffcc 1:#1890ff`, - stroke: '#3D76DD', - cursor: 'pointer', - }, - name: 'contribution-shape', - }); - - const tooltipData: ISimpleKVTooltipData = { - key: $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_contribution.Contribution', dm: '贡献度' }), - value: `${contribution}`, - inicatorColor: '#3D76DD', - }; - - // 添加tooltip - shape.on('mouseenter', (e: any) => { - // 视口位置 - const { clientX, clientY } = e; - // 偏移 - const offSet = 20; - // 容器中相对位置 - const { x, y } = getClientRelativPoint(clientX + offSet, clientY + offSet); - - // tooltip - const tooltip = Tooltip.getInstance(); - tooltip - ?.buildContent(toAppendDoms => { - getSimpleKVContent(toAppendDoms, tooltipData); - }) - ?.show(x, y); - }); - - shape.on('mouseleave', () => { - const tooltip = Tooltip.getInstance(); - tooltip?.hide(); - }); -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_empty.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_empty.ts deleted file mode 100644 index 5b485028d..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_empty.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { ITreeData } from './interface'; - -// 业务可干预 -export default function drawEmpty(group: any, data: ITreeData) { - const { attrShowingCfg } = data; - - // 条件：组全部的组是关闭的 - const condition_all_group_hide = - !attrShowingCfg?.bizQuotas.show_group && - !attrShowingCfg?.roseCompare.show_group && - !attrShowingCfg?.bizIntervene.show_group && - !attrShowingCfg?.runningState.show_group && - !attrShowingCfg?.degreeState.show_group; - - // 条件：全部的组是关闭的 - const condition_all_group_factor_hide = - !attrShowingCfg?.bizQuotas.cat_boolean && - !attrShowingCfg?.bizQuotas.cat_string && - !attrShowingCfg?.bizQuotas.cat_number && - !attrShowingCfg?.roseCompare.show_contrast && - !attrShowingCfg?.roseCompare.show_experiment_increcement && - !attrShowingCfg?.roseCompare.show_experiment_reduce && - !attrShowingCfg?.bizIntervene.show_canbe_interupted && - !attrShowingCfg?.bizIntervene.show_notbe_interupted && - !attrShowingCfg?.runningState.show_finished && - !attrShowingCfg?.runningState.show_rnning && - !attrShowingCfg?.degreeState.show_contribution && - !attrShowingCfg?.degreeState.show_variability; - - // 满足条件 绘制底部轮廓 - if (condition_all_group_hide || condition_all_group_factor_hide) { - const base_raduis_offset = 55; - console.log('drawEmpty', condition_all_group_hide, condition_all_group_factor_hide); - group.addShape('circle', { - attrs: { - x: 0, - y: 0, - r: base_raduis_offset, - fill: 'r(0.5, 0.5, 0.95) 0:rgb(26,26,26) 0.5:rgb(26,26,26) 1:#1890ff', - fillOpacity: 0.3, - }, - }); - } -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_keyShape.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_keyShape.ts deleted file mode 100644 index 8098c7319..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_keyShape.ts +++ /dev/null @@ -1,30 +0,0 @@ - -const BG_COLOR = '#1A1A1A'; -// import {ITreeData} from "@/page/EnhancAnalysis/component/ReasonTree/interface"; - -// 得到key shape -export default function drawKeyShape(group: any) { - // keyshape - const keyshape = group?.addShape('circle', { - attrs: { - x: 0, - y: 0, - r: 54, - opacity: 0, - strokeOpacity: 0, - fillOpacity: 0, - }, - }); - // 底盘 - group?.addShape('circle', { - attrs: { - x: 0, - y: 0, - r: 54, - fill: BG_COLOR, - stroke: BG_COLOR, - }, - name: 'keyShape', - }); - return keyshape; -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_rose.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_rose.ts deleted file mode 100644 index ccb14d125..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_rose.ts +++ /dev/null @@ -1,262 +0,0 @@ -// import { IGroup, IShape } from '@antv/g6'; -import { ITreeData, IChangeItem } from './interface'; -import { getFanPath, getClientRelativPoint } from './util'; -import { ColorPicker, IColorPair } from './colors'; -import RoseChangeMapping from './roseChangeMapping'; - -import { Tooltip, IKVAttrs, getContentMoreDemensions } from './tooltip'; -import $i18n from '../../../i18n'; - -const Cfg = { - Radius_Min: 20, - Radius_Max: 54, - Start_Angle: -((Math.PI * 3) / 2), -}; -// 绘制玫瑰图 -export default function drawRose(group: any, data: ITreeData) { - if (!group) return; - - const { property = { changes: [] }, attrShowingCfg = {} } = data; - - const { changes = [] } = property; - - // 显示属性 - const { roseCompare = {} } = attrShowingCfg as any; - // 玫瑰图先注释下，数据处理上有些问题 - // return; - if (!roseCompare.show_group) return; // 如果show_group是false就不用绘制了 - - RoseChangeMapping.getInstance().setMappingData(changes); - - // 扇形角度 - let startAngle = Cfg.Start_Angle; - const everyAngle = Math.PI / changes.length; - let endAngle = startAngle + everyAngle; - const colorPicker = new ColorPicker('reverse'); - - // 为了控制绘制层次的 - const afterDrawingFuncs: Function[] = []; - const beforeDrawingFuncs: Function[] = []; - - changes.forEach(change => { - const colorPair = colorPicker.pickColorPair(); - const { drawAfer, drawBefore } = addFan(group, change, startAngle, endAngle, colorPair, roseCompare); - - afterDrawingFuncs.push(drawAfer); - beforeDrawingFuncs.push(drawBefore); - - startAngle += everyAngle; - endAngle += everyAngle; - }); - - // 执行添加 - [...afterDrawingFuncs, ...beforeDrawingFuncs].forEach(func => func.call(null)); -} - -// 通过change的值得到绘制属性 -function getDrawingValueByUnit(change: IChangeItem) { - const beforeValue_maybe = change.beforeValue ?? 0; - const afterValue_maybe = change.afterValue ?? 0; - - const { props, name } = change; - - // 检查下默认单位 - const { unit } = props[0] ?? {}; - // const max = - // RoseChangeMapping.getInstance() - // .getMappingData() - // .get(name) ?? 1; - // const max = 1422772; - // const before = Math.abs(beforeValue_maybe / (max === 0 ? 1 : max)) || 0; - // const after = Math.abs(afterValue_maybe / (max === 0 ? 1 : max)); - - const max = 50; - - const before = Math.abs((Math.random() * 50) / max) || 0; - const after = Math.abs((Math.random() * 50) / max); - - console.log('before after', before, beforeValue_maybe, after, afterValue_maybe); - return { - beforeValue: Number(Number(before).toFixed(2)), - afterValue: Number(Number(after).toFixed(2)), - }; -} - -// 添加一个 -function addFan( - group: any, - change: IChangeItem, - startAngle: number, - endAngle: number, - colorPair: IColorPair, - roseCompare: // 显示配置 - any, -) { - // value都先按照‘率’处理 - // const { beforeValue = 0, afterValue = 0 } = change; - // const beforeValue_maybe = change.beforeValue ?? 0; - // const afterValue_maybe = change.afterValue ?? 0; - - // const { props } = change; - - const { beforeValue, afterValue } = getDrawingValueByUnit(change); - - let dashCfg = {}; - if (beforeValue < afterValue) { - dashCfg = { - lineDash: [2, 2], - }; - } - - const { primary, secondary } = colorPair; - // after - const drawAfer = roseCompare.show_contrast - ? () => { - const shape = group.addShape('path', { - attrs: { - path: getFanPath({ - cx: 0, - cy: 0, - rs: 0, // 内圆半径 - re: Cfg.Radius_Max * Math.abs(afterValue) + Cfg.Radius_Min, // 外圆半径 - startAngle, - endAngle, - }), - fill: primary, - stroke: primary, - cursor: 'pointer', - }, - name: 'path-shape', - }); - addInteraction(shape, change, colorPair); - } - : () => {}; - - let drawBefore = () => {}; - if ( - (afterValue >= beforeValue && roseCompare.show_experiment_increcement) || - (afterValue <= beforeValue && roseCompare.show_experiment_reduce) - ) { - drawBefore = () => { - group.addShape('path', { - attrs: { - path: getFanPath({ - cx: 0, - cy: 0, - rs: 0, // 内圆半径 - re: Cfg.Radius_Max * beforeValue, // 外圆半径 - startAngle, - endAngle, - cursor: 'pointer', - }), - stroke: secondary, - ...dashCfg, - }, - name: secondary, - }); - }; - } - - return { drawAfer, drawBefore }; -} - -// getToolTipDatasByProps -function getToolTipDatas(change: IChangeItem, mainColorPair: IColorPair) { - const { props, beforeValue } = change; - const mainDatas: any = { title: '', colorPair: mainColorPair, attrs: [] }; - - const otherDatas: Array = []; - - const colorPair = new ColorPicker(); - - props.forEach((propItem, index) => { - let { name, unit, value } = propItem; - let unitValue = `${value}${unit}`; - - if (value) { - if (Math.abs(value) < 10000) { - unitValue = unit === '%' ? value * 100 + unit : `${value}${unit}`; - } else { - if (Math.abs(value) >= 10000) { - unitValue = `${Math.round(value / 10000)}万${unit}`; - } - if (Math.abs(value) >= 100000000) { - unitValue = `${Math.round(value / 100000000)}亿${unit}`; - } - } - } - - if (index === 0) { - // 如果是0，就构造 main datas - mainDatas.title = name; - const before = beforeValue ?? 0; - const bValue = (before / 100).toFixed(2) + '%'; - mainDatas.attrs = [ - { - key: $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_rose.PreviousValue', dm: '先前值' }), - value: before === 0 ? '0' : bValue, - color: mainColorPair.primary, - needIcon: true, - }, - { - key: $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_rose.AfterChange', dm: '变化后' }), - value: value, - color: mainColorPair.secondary, - isCurrent: true, - needIcon: true, - }, - ]; - } else { - const { primary } = colorPair.pickColorPair(); - otherDatas.push({ - key: name, - value: value + unit, - inicatorColor: primary, - }); - } - - // 临时逻辑 - // const { primary } = mainColorPair; - // otherDatas.push({ - // key: name, - // value: unitValue, - // inicatorColor: primary, - // }); - }); - - return { mainDatas, otherDatas }; -} - -// 增加交互行为 -function addInteraction(shape: any, change: IChangeItem, colorPair: IColorPair) { - const { mainDatas, otherDatas } = getToolTipDatas(change, colorPair); - - shape.on('mouseenter', (e: any) => { - // 视口位置 - const { clientX, clientY } = e; - // 偏移 - const offSet = 20; - // 容器中相对位置 - const { x, y } = getClientRelativPoint(clientX + offSet, clientY + offSet); - - // tooltip - const tooltip = Tooltip.getInstance(); - tooltip - ?.buildContent(toAppendDoms => { - // 构造tooltip的展示内容 - // 数据格式按照，IShowingCommonData - // makeTooltipContent(toAppendDoms, { title: name, colorPair, attrs: showingTooltipAttrs }); - getContentMoreDemensions(toAppendDoms, mainDatas, otherDatas); - }) - ?.show(x, y); - }); - shape.on('mouseleave', () => { - const tooltip = Tooltip.getInstance(); - tooltip?.hide(); - }); -} - -// 构造tooltip的展示内容 -// function makeTooltipContent(toAppendDoms: HTMLElement[], data: IShowingCommonData) { -// getCommonContent(toAppendDoms, data); -// } diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_runningState.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_runningState.ts deleted file mode 100644 index 8e4e569b3..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_runningState.ts +++ /dev/null @@ -1,77 +0,0 @@ -// import { IGroup } from '@antv/g6'; -import { ITreeData } from './interface'; -import { getClientRelativPoint } from './util'; -import { Tooltip, ISimpleKVTooltipData, getSimpleKVContent } from './tooltip'; - -// 业务可干预 -import $i18n from '../../../i18n'; -export default function drawRunningState(group: any, data: ITreeData) { - const { property = { canBeInterupt: true, runningState: 'running' }, attrShowingCfg } = data; - - const { canBeInterupt, runningState } = property; - - // 过滤掉不符合条件的 - if ( - !attrShowingCfg?.runningState?.show_group || - (!attrShowingCfg?.runningState?.show_rnning && runningState === 'running') || - (!attrShowingCfg?.runningState?.show_finished && runningState === 'finished') - ) - return; - - const color = runningState === 'running' ? 'rgb(215, 161, 0)' : 'rgb(0, 138, 93)'; - - const shape = group?.addShape('circle', { - attrs: { - x: 0, - y: 0, - r: 12, - stroke: color, - fill: color, - lineWidth: 1.5, - cursor: 'pointer', - // ...fillProps, - }, - }); - - const key = - runningState === 'running' - ? $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_runningState.Running', dm: '运行中，' }) - : $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_runningState.Completed', dm: '已完成，' }); - const value = canBeInterupt - ? $i18n.get({ - id: 'advance.ReasonNode.reason_analysis_node.draw_runningState.BusinessIntervention', - dm: '业务可干预', - }) - : $i18n.get({ - id: 'advance.ReasonNode.reason_analysis_node.draw_runningState.BusinessNonIntervention', - dm: '业务不可干预', - }); - const tooltipData: ISimpleKVTooltipData = { - key, - value, - inicatorColor: color, - }; - - // 添加tooltip - shape.on('mouseenter', (e: any) => { - // 视口位置 - const { clientX, clientY } = e; - // 偏移 - const offSet = 20; - // 容器中相对位置 - const { x, y } = getClientRelativPoint(clientX + offSet, clientY + offSet); - - // tooltip - const tooltip = Tooltip.getInstance(); - tooltip - ?.buildContent(toAppendDoms => { - getSimpleKVContent(toAppendDoms, tooltipData); - }) - ?.show(x, y); - }); - - shape.on('mouseleave', () => { - const tooltip = Tooltip.getInstance(); - tooltip?.hide(); - }); -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_variability.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_variability.ts deleted file mode 100644 index b20d758b2..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/draw_variability.ts +++ /dev/null @@ -1,93 +0,0 @@ -// import { IGroup } from '@antv/g6'; -import { ITreeData } from './interface'; -import { getFanPath, getClientRelativPoint } from './util'; -import { Tooltip, ISimpleKVTooltipData, getSimpleKVContent } from './tooltip'; - -// variability 变异度 -import $i18n from '../../../i18n'; -export default function drawVariability(group: any, data: ITreeData) { - const bk_color = '#aaaaaa'; - const bk_startAngle = -Math.PI / 2; - const bk_endAngle = Math.PI / 2; - const data_startAngle = -Math.PI / 2; - const bar_width_offset = 3; - - const { property = { variability: 0 }, attrShowingCfg = {} } = data; - const { variability = 0 } = property; - - // 显示属性 - const { degreeState = {} } = attrShowingCfg as any; - if (!degreeState.show_group || !degreeState.show_variability) return; // 如果show_group是false就不用绘制了 - // 数值过滤 - // 过滤掉不在范围的 - // if ( - // variability * 100 < degreeState.range_variability[0] || - // variability * 100 > degreeState.range_variability[1] - // ) - // return; - - // 第一个蓝条 - const r = 28; - const data_endAngle = data_startAngle + Math.PI * variability; - - group.addShape('path', { - attrs: { - path: getFanPath({ - cx: 0, - cy: 0, - rs: r - 1, // 内圆半径 - re: r, // 外圆半径 - startAngle: bk_startAngle, - endAngle: bk_endAngle, - }), - fill: bk_color, - }, - name: 'path-shape', - }); - - const fan = group.addShape('path', { - attrs: { - path: getFanPath({ - cx: 0, - cy: 0, - rs: r - bar_width_offset, // 内圆半径 - re: r + bar_width_offset, // 外圆半径 - startAngle: data_startAngle, - endAngle: data_endAngle, - }), - fill: '#C84D32', - cursor: 'pointer', - // stroke: '#C84D32', - }, - name: 'path-shape', - }); - - const tooltipData: ISimpleKVTooltipData = { - key: $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.draw_variability.Variation', dm: '变异度' }), - value: `${variability}`, - inicatorColor: '#E8684A', - }; - - // 添加tooltip - fan.on('mouseenter', (e: any) => { - // 视口位置 - const { clientX, clientY } = e; - // 偏移 - const offSet = 20; - // 容器中相对位置 - const { x, y } = getClientRelativPoint(clientX + offSet, clientY + offSet); - - // tooltip - const tooltip = Tooltip.getInstance(); - tooltip - ?.buildContent(toAppendDoms => { - getSimpleKVContent(toAppendDoms, tooltipData); - }) - ?.show(x, y); - }); - - fan.on('mouseleave', () => { - const tooltip = Tooltip.getInstance(); - tooltip?.hide(); - }); -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/index.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/index.ts deleted file mode 100644 index 3d4482685..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/index.ts +++ /dev/null @@ -1,158 +0,0 @@ -import { ITreeData } from './interface'; -import drawKeyShape from './draw_keyShape'; -import drawContribution from './draw_contribution'; -// import drawButton from './draw_button'; -import drawRose from './draw_rose'; -import drawVariability from './draw_variability'; -import drawBizIntervene from './draw_bizIntervene'; -// import drawRunningState from './draw_runningState'; -import drawBizQuotas from './draw_bizQuotas'; -import drawEmpty from './draw_empty'; - -import { statistics_data } from './preprocess'; - -export type IGroup = any; -export type ModelConfig = any; -export type Item = any; - -export const registerNode = Graphin => { - Graphin.registerNode( - 'reason_analysis_node', - { - draw(cfg: ModelConfig | undefined, group: IGroup | undefined) { - const data = cfg as ITreeData; - - console.log('registerNode', data, Graphin) - - data.data.attrShowingCfg = { - bizQuotas: { - show_group: true, - show_description: true, - cat_boolean: true, - cat_string: true, - cat_number: true, - }, - roseCompare: { - show_group: true, - show_contrast: true, - show_experiment_increcement: true, - show_experiment_reduce: true, - }, - bizIntervene: { - show_group: true, - show_canbe_interupted: true, - show_notbe_interupted: true, - }, - runningState: { - show_group: true, - show_finished: true, - show_rnning: true, - }, - degreeState: { - show_group: true, - show_contribution: true, - show_variability: true, - range_contribute: [0, 1], - range_variability: [0, 1], - }, - }; - console.log('registerNode', data) - - // key shape 背景 - const keyShape = drawKeyShape(group!); - - // 添加元素 - drawElements(group!, data.data); - - return keyShape!; - }, - update(cfg: ModelConfig, item: Item) { - const data = cfg as ITreeData; - - // 得到边的keyShape - const keyShape = item.getKeyShape(); - - // 通过keyShape得到group - const group = keyShape.getParent() as IGroup; - - // 删除所有元素除了keyshape - clearElementsButKeyShape(group); - - // 添加元素 - drawElements(group, data); - }, - }, - 'circle', - ); -}; - -// 根据业务数据添加各种元素 -function drawElements(group: IGroup, data: ITreeData) { - // 业务可干预 - drawBizIntervene(group!, data); - - // 贡献度 - drawContribution(group!, data); - - // 类目条形图 - drawVariability(group!, data); - - // 运行状态 - // drawRunningState(group!, data); - - // 玫瑰图 - drawRose(group!, data); - - // 业务指标 - drawBizQuotas(group!, data); - - // 小按钮 - // drawButton(group!); - - // 是不是需要绘制垫底元素 - // 就是当所有元素被隐藏了的时候 - drawEmpty(group!, data); - - //透明度降低 - const { property, attrShowingCfg, max = false} = data; - const { canBeInterupt, variability = 0} = property; - let contributionFlag = true - let variabilityFlag = true; - let hideNonMaxFlag = true; - if (attrShowingCfg) { - const { degreeState = {}, test } = attrShowingCfg as any; - const { contribution } = property; - contributionFlag = contribution < degreeState.range_contribute[0] || contribution > degreeState.range_contribute[1]; - variabilityFlag = variability * 100 < degreeState.range_variability[0] || variability * 100 > degreeState.range_variability[1]; - hideNonMaxFlag = test && !max - } - if ( - !attrShowingCfg?.bizIntervene?.show_group || - (!attrShowingCfg?.bizIntervene?.show_canbe_interupted && canBeInterupt) || - (!attrShowingCfg?.bizIntervene?.show_notbe_interupted && !canBeInterupt) || - contributionFlag || variabilityFlag|| hideNonMaxFlag - ) { - hideShape(group) - } -} - -// 在更新阶段移除所有不是keyShape的元素 -function clearElementsButKeyShape(group: IGroup) { - group?.getChildren().forEach(c => { - // keyShape将还在 - if (!c?.cfg?.isKeyShape && c?.cfg?.name !== 'keyShape') { - c.destroy(); - c.remove(); - } - }); -} - -function hideShape(group: IGroup) { - const shape = group.get('children'); // 按照添加的顺序 - shape.forEach((item:any) => { - const style = { - opacity: 0.3 - }; - item.attr(style) - }) -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/interface.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/interface.ts deleted file mode 100644 index 8792bd685..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/interface.ts +++ /dev/null @@ -1,128 +0,0 @@ -/** 树结构 */ -type ITreeData = { - id: string /** 唯一id */; - - type?: string /** 类型 */; - - x?: number; - - y?: number; - - contributionRange: { min: number; max: number } /** 贡献度范围（全局） */; - - variabilityRange: { min: number; max: number } /** 异变度范围（全局） */; - - isShowingChildren?: boolean /** 展开自节点状态 */; - - property: IBizProperty /** 业务属性 */; - - children?: Array; - - edge?: IEdge; - - /** 这个挂了元素是不是需要显示的信息，只挂在root节点*/ - attrShowingCfg?: { - bizQuotas: { - show_group: boolean; - show_description: boolean; - cat_boolean: boolean; - cat_string: boolean; - cat_number: boolean; - }; - roseCompare: { - show_group: boolean; - show_contrast: boolean; - show_experiment_increcement: boolean; - show_experiment_reduce: boolean; - }; - bizIntervene: { - show_group: boolean; - show_canbe_interupted: boolean; - show_notbe_interupted: boolean; - }; - runningState: { - show_group: boolean; - show_finished: boolean; - show_rnning: boolean; - }; - degreeState: { - show_group: boolean; - show_contribution: boolean; - show_variability: boolean; - range_contribute: [number, number]; - range_variability: [number, number]; - }; - }; - - [props: string]: any; -}; - -type IEdge = { - isManualFlag?: boolean; - flag?: 'left' | 'right'; -}; - -/** 点业务属性 */ -type IBizProperty = { - // 指标原始配置 - bizIdentifieBucket: IBizIdentifieBucket; - /** 业务可干预 */ - canBeInterupt: boolean /** 是否可干预 */; - - runningState: 'running' | 'finished' /** 机器运行状态 */; - - contribution: number /** 贡献度 */; - - // explaination: IDegreeData /** 解释度 不要了 */; - - variability: number /** 异变度 */; - - changes: Array /** 变化项目，用于绘制南丁格尔玫瑰图 */; - - quotas: Array /** 指标， 用于绘制每个节点最底部的指标元素 */; - - relationTag?: 'right' | 'wrong' | undefined /** 与父节点的边关系 */; - - [key: string]: any /** 其他属性，需要进一步确定 */; -}; - -export type IBizIdentifieBucket = { - [qutos: string]: Array; -}; - -type IChangeItemPropsInfo = { - name: string; - value: any; - unit: string; -}; - -/** 南丁格尔玫瑰图每一个项目 */ -export type IChangeItem = { - name: string /** 项目类别名 */; - - props: Array /** tooltip中展示的项目 */; - - beforeValue: number | undefined | null /** 前后数值 (之前的值不一定有 按照0 处理) */; - - afterValue: number | undefined | null /** 前后数值 (之前的值不一定有 按照0 处理) */; - - [key: string]: any /** 其他属性，需要进一步确定 */; -}; - -/** 指标 */ -export type IQuotaItem = { - name: string /** 指标名 */; - - value: - | boolean - | number - | string /** 指标值，可能是布尔或者数值 ， 绘制圆形半径的时候按照最大最小之间分成四段映射半径值 */; - - max?: number /** 最大值 */; - - min?: number /** 最小值 */; - - [key: string]: any /** 其他属性，需要进一步确定 */; -}; - -export { ITreeData }; diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/preprocess.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/preprocess.ts deleted file mode 100644 index 46bc1e98f..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/preprocess.ts +++ /dev/null @@ -1,111 +0,0 @@ -/* eslint-disable no-param-reassign */ -import { ITreeData } from './interface'; -import { tree_dfs } from './util'; -import BizIdentifiedMapping from './bizQuotasMapping'; -import RoseChangeMapping from './roseChangeMapping'; - -export type IStatisticsCount = { - canBeInterupt: number; - notBeInterupt: number; - running: number; - finished: number; - quotas_boolean: number; - quotas_number: number; - quotas_string: number; - variabilityRange: ILimit; - contributionRange: ILimit; -}; - -type ILimit = { min: number; max: number }; - -import { isBoolean, isNumber, cloneDeep } from 'lodash'; - -/** - * 数据预处理 - */ import $i18n from '../../../i18n'; -export function preprocess_data(originData: ITreeData) { - // 遍历下增加自定义节点的 type - tree_dfs(originData, item => { - // (item as ITreeData).type = 'reason_analysis_node'; - item.type = 'reason_text_node'; - }); -} - -export const INIT_COUNT: IStatisticsCount = { - canBeInterupt: 0, - notBeInterupt: 0, - running: 0, - finished: 0, - quotas_boolean: 0, - quotas_number: 0, - quotas_string: 0, - contributionRange: { min: 0, max: 0 }, - variabilityRange: { min: 0, max: 0 }, -}; -/** - * 统计数据 - */ -export function statistics_data(originData: ITreeData): IStatisticsCount { - if (!originData) return INIT_COUNT; - const count: IStatisticsCount = cloneDeep(INIT_COUNT); - const { contributionRange, variabilityRange, bizIdentifieBucket } = originData; - - count.contributionRange = contributionRange; - count.variabilityRange = variabilityRange; - - // 设置指标预设 - BizIdentifiedMapping.getInstance().setMappingData(bizIdentifieBucket); - - RoseChangeMapping.getInstance().resetMap(); - - // 遍历下增加自定义节点的 type - tree_dfs(originData, item => { - const { property } = item; - const { canBeInterupt, runningState, quotas, changes } = property; - // 找出changes的最值 - RoseChangeMapping.getInstance().setMappingData(changes); - - const isBranch = (obj: any) => { - if ( - obj && - item?.bizIdentifieBucket && - Object.keys(item?.bizIdentifieBucket).includes(obj.name) && - Array.isArray(item?.bizIdentifieBucket[obj.name]) && - item?.bizIdentifieBucket[obj.name].includes(obj.value) - ) { - obj.isBranchData = true; // 设置一个标记位 - return true; - } - return false; - }; - - if (isBoolean(canBeInterupt) && canBeInterupt) { - count.canBeInterupt += 1; - } else { - count.notBeInterupt += 1; - } - if (runningState === 'running') { - count.running += 1; - } else { - count.finished += 1; - } - quotas.forEach(quota => { - if ( - isBoolean(quota.value) || - quota.value === $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.preprocess.Yes', dm: '是' }) || - quota.value === $i18n.get({ id: 'advance.ReasonNode.reason_analysis_node.preprocess.No', dm: '否' }) - ) { - // 布尔 - count.quotas_boolean += 1; - } else if (isBranch(quota)) { - // 分桶 - count.quotas_number += 1; - } else { - // 其它 - count.quotas_string += 1; - } - }); - }); - - return count; -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/roseChangeMapping.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/roseChangeMapping.ts deleted file mode 100644 index ed317744e..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/roseChangeMapping.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { IChangeItem } from './interface'; - -export default class RoseChangeMapping { - private map: Map; - - private static instance: RoseChangeMapping; - - private constructor() { - this.map = new Map(); - } - - public resetMap() { - this.map = new Map(); - } - - public static getInstance() { - if (!RoseChangeMapping.instance) { - RoseChangeMapping.instance = new RoseChangeMapping(); - } - return RoseChangeMapping.instance; - } - - public setMappingData(changes: Array) { - changes.forEach(change => { - const { beforeValue, props, name: nameBefore } = change; - - props.forEach(prop => { - const { name, unit, value } = prop; - const limit = Math.max(this.map.get(name) ?? 0, Math.abs(value)); - this.map.set(name, limit); - if (nameBefore === name) { - const limit = Math.max(this.map.get(name) ?? 0, Math.abs(beforeValue ?? 0)); - this.map.set(name, limit); - } - }); - }); - } - - public getMappingData() { - return this.map; - } -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/tooltip.less b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/tooltip.less deleted file mode 100644 index 8af736fdc..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/tooltip.less +++ /dev/null @@ -1,43 +0,0 @@ -.titleContainer { - display: flex; - align-items: center; - margin-bottom: 4px; - .indicator { - width: 8px; - height: 8px; - line-height: 12px; - border-radius: 8px; - } - .title { - margin-left: 12px; - font-size: 14px; - } - .value { - flex-grow: 1; - margin-left: 12px; - font-size: 14px; - text-align: end; - } -} - -.attrContainer_common { - display: flex; - flex-direction: column; - color: #d8d8d8; - font-size: 12px; -} - -.attrItem_common { - display: flex; - justify-content: space-between; - .key { - display: flex; - align-items: center; - .keyIcon { - width: 10px; - height: 10px; - margin-right: 8px; - } - } - // .value{} -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/tooltip.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/tooltip.ts deleted file mode 100644 index dbf2d43f4..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/tooltip.ts +++ /dev/null @@ -1,235 +0,0 @@ -import { IColorPair } from './colors'; -// @ts-ignore -import styles from './tooltip.less'; - -/** - * 通用的Tooltip - */ -export class Tooltip { - private domContainer: HTMLDivElement | undefined; - - private static instance: Tooltip; - - private constructor() { - this.domContainer = genDivContaienr(); - } - - public static getInstance() { - if (!Tooltip.instance) { - Tooltip.instance = new Tooltip(); - } - return Tooltip.instance; - } - - public buildContent(addingContent: (toAppendDoms: HTMLElement[]) => void) { - if (!this.domContainer) return undefined; - - const toAppendDoms: HTMLElement[] = []; - - addingContent(toAppendDoms); - - // 整体挂载 - toAppendDoms.forEach(dom => { - this.domContainer?.appendChild(dom); - }); - - return this; - } - - public show(x: number, y: number) { - if (!this.domContainer) return undefined; - this.domContainer?.setAttribute('style', getContaienrStyle(x, y)); - - return this; - } - - public hide() { - try { - document.getElementById('wrapper_tree')?.removeChild(this.domContainer!); - this.domContainer = genDivContaienr(); - } catch (e) { - // dev环境热更新可能会走到这里，下面一行容错： - this.domContainer = genDivContaienr(); - } - } -} - -// 得到contaienr -function genDivContaienr() { - const contaienr = document.createElement('div'); - contaienr.setAttribute('style', getContaienrStyle(-500, -100)); - document.getElementById('wrapper_tree')?.appendChild(contaienr); - return contaienr; -} - -// tooltip容器的样式 -export function getContaienrStyle(x: number, y: number) { - return ` - position:absolute; - top:${y}px; - left:${x}px; - min-width: 132px; - min-height: 20px; - padding: 12px; - background: #000000; - box-shadow: 0px 3px 8px 2px rgba(0, 0, 0, 0.25); - color: white; - border-radius: 4px; - `; -} - -// 得到一个通用的tooltip标题 -// value可能没有 -export function createCommonTitle(title: string, indicatorColor: string = 'white', value?: any) { - const titleDom = document.createElement('div'); - titleDom.innerHTML = ` -
-
-
${title}
- ${ - value - ? ` -
${value}
- ` - : '' - } -
- `; - - return titleDom; -} - -// 得到通用的属性详细信息容器 -export function createCommonAttrsContainer() { - const attrContainer = document.createElement('div'); - attrContainer.setAttribute('class', styles.attrContainer_common); - return attrContainer; -} - -// 得到通用的具体某一行信息 -export function createCommonAttrInfoItem( - key: string, - value: any, - color: string, - isCurrent = false, - needIcon = false, -) { - const itemDom = document.createElement('div'); - itemDom.setAttribute('class', styles.attrItem_common); - - itemDom.innerHTML = ` -
- ${ - needIcon - ? `
` - : '' - } - ${needIcon ? key : `
${key}
`} -
-
${value}
- `; - return itemDom; -} - -export type IShowingCommonData = { - title: string; - colorPair: IColorPair; - attrs: Array<{ - key: string; - value: any; - color: string; - needIcon?: boolean; - isCurrent?: boolean; - }>; -}; - -export type IKVAttrs = { - key: string; - value: any; - inicatorColor: string; -}; - -// export type IShowingMoreDemensions = Array; - -// 基于getCommonContent -// 处理多组数据的 -export function getContentMoreDemensions( - toAppendDoms: HTMLElement[], - mainDatas: IShowingCommonData, - otherDatas: Array, -) { - // 主要的指标 - // 应业务方要求先注释了 - // getCommonContent(toAppendDoms, mainDatas); - - // 其他指标 - getOhterContent(toAppendDoms, otherDatas); -} - -function getOhterContent(toAppendDoms: HTMLElement[], otherDatas: Array) { - otherDatas.forEach(data => { - // getSimpleKVContent(toAppendDoms, data); - const { key, value, inicatorColor } = data; - toAppendDoms.push(createCommonTitle(key, inicatorColor, value)); - }); -} - -/** - * 通用的tooltip内容 - * 其内容是title + kv属性列表 - * @param toAppendDoms 待增加到tooltip容器中的dom节点的集合 - * @param data 数据 - */ -export function getCommonContent(toAppendDoms: HTMLElement[], data: IShowingCommonData) { - // 标题 - const titleDom = createCommonTitle(data.title, data.colorPair.primary); - - toAppendDoms.push(titleDom); - - // 属性 - const attrContainer = createCommonAttrsContainer(); - data.attrs.forEach(({ key, value, color, isCurrent = false, needIcon = false }) => { - const itemDom = createCommonAttrInfoItem(key, value, color, isCurrent, needIcon); - attrContainer.appendChild(itemDom); - }); - - toAppendDoms.push(attrContainer); -} - -export type ISimpleKVTooltipData = { - key: string; - value: string; - inicatorColor: string; -}; - -/** - * 通用的tooltip内容 - * 这种是比较简单的只有 一对kv属性 - * @param toAppendDoms 待增加到tooltip容器中的dom节点的集合 - * @param data 数据 - */ -export function getSimpleKVContent(toAppendDoms: HTMLElement[], data: ISimpleKVTooltipData) { - const { key, value, inicatorColor } = data; - const kvDom = createCommonAttrInfoItem(key, value, inicatorColor, true, true); - toAppendDoms.push(kvDom); -} - -/** - * 通用tooltip的内容 - * 最简单形式：纯文本 - * @param toAppendDoms 待增加到tooltip容器中的dom节点的集合 - * @param text 纯文本 - */ -export function getTextContent(toAppendDoms: HTMLElement[], text: string) { - const itemDom = document.createElement('div'); - itemDom.setAttribute('class', styles.attrItem_common); - itemDom.innerHTML = ` -
- ${text} -
- `; - - toAppendDoms.push(itemDom); -} diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/util.ts b/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/util.ts deleted file mode 100644 index 377c6553e..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/reason_analysis_node/util.ts +++ /dev/null @@ -1,117 +0,0 @@ -/* eslint-disable no-param-reassign */ - -// 得到扇形的path -export function getFanPath(cfg: any) { - const { cx, cy, rs, re, startAngle, endAngle, clockwise = true } = cfg; - const flag1 = clockwise ? 1 : 0; - const flag2 = clockwise ? 0 : 1; - return [ - ['M', Math.cos(startAngle) * rs + cx, Math.sin(startAngle) * rs + cy], - ['L', Math.cos(startAngle) * re + cx, Math.sin(startAngle) * re + cy], - ['A', re, re, 0, 0, flag1, Math.cos(endAngle) * re + cx, Math.sin(endAngle) * re + cy], - ['L', Math.cos(endAngle) * rs + cx, Math.sin(endAngle) * rs + cy], - ['A', rs, rs, 0, 0, flag2, Math.cos(startAngle) * rs + cx, Math.sin(startAngle) * rs + cy], - ['Z'], - ]; -} - -type IValueSpace = { - current: number; - min: number; - max: number; -}; - -type IMappingSpace = { - min: number; - max: number; -}; - -// 得到一个线性映射的值 -export function getValueInRange_linear(valueSpace: IValueSpace, mappingSpace: IMappingSpace) { - if (valueSpace.max === valueSpace.min) return valueSpace.current; - - return ( - mappingSpace.min + - (valueSpace.current * (mappingSpace.max - mappingSpace.min)) / (valueSpace.max - valueSpace.min) - ); -} - -// function getContainerBoundaryFunc(containerDomId: string = 'container') { -// const container = document.getElementById(containerDomId); -// if (!container) return () => ({ left: 0, top: 0 }); -// const { left = 0, top = 0 } = container.getClientRects()[0]; -// return () => { -// return { left, top }; -// }; -// } - -// let getContaienrBoundary: (() => { left: number; top: number }) | undefined; - -// 根据绝对位置，得到在容器中的位置 -export function getClientRelativPoint(abs_x: number, abs_y: number) { - // if (!getContaienrBoundary) { - // getContaienrBoundary = getContainerBoundaryFunc(); - // } - // const { left = 0, top = 0 } = getContaienrBoundary?.(); - let left = 0, - top = 0; - const containerDomId: string = 'container'; - const container = document.getElementById(containerDomId); - - if (container) { - left = container.getClientRects()[0].left; - top = container.getClientRects()[0].top; - } - - return { - x: abs_x - left, - y: abs_y - top, - }; -} - - -/** - * 按照长度缩略文字 - * @param text 原始文字 - * @param limit 限制长度 - */ - export function ellipseText(text: string, limit: number) { - const pre = text.slice(0, limit - 1); - const mid = '...'; - const post = text[text.length - 1]; - return `${pre}${mid}${post}`; -} - - -interface ITree { - children?: Array; - [props: string]: any; -} - -/** 遍历树 DFS */ -export const tree_dfs = (root: T, onVisit?: (item: T) => void) => { - const stack: T[] = [root]; - while (stack.length > 0) { - const currentNode = stack.pop(); - if (onVisit && currentNode) { - onVisit(currentNode); - } - currentNode?.children?.forEach((c: ITree) => { - stack.push(c as T); - }); - } -}; - -/** 遍历树 BFS */ -export const tree_bfs = (root: T, onVisit?: (item: T) => void) => { - const queue: T[] = [root]; - while (queue.length > 0) { - const currentNode = queue.shift(); - if (onVisit && currentNode) { - onVisit(currentNode); - } - currentNode?.children?.forEach((c: ITree) => { - queue.push(c as T); - }); - } -}; \ No newline at end of file diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/registerMeta.tsx b/packages/gi-assets-advance/src/elements/ReasonNode/registerMeta.tsx deleted file mode 100644 index 0bcd070bd..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/registerMeta.tsx +++ /dev/null @@ -1,192 +0,0 @@ -import $i18n from '../../i18n'; -const registerMeta = context => { - const { data, keys = ['id', 'type'] } = context; - const options = keys.map(c => { - return { - value: c, - label: c, - }; - }); - - return { - size: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Size', dm: '大小' }), - type: 'group', - enableHide: false, - fold: false, - children: { - sizeMapping: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Radius', dm: '半径' }), - type: 'sizeMapping', - min: 0, - max: 100, - step: 1, - suffix: 'px', - valuePath: 'size', - default: { - mapping: false, - fixed: 26, - scale: { - custom: false, // 是否采取自定义映射 - range: [3, 30], // 值域 - domain: [0, 1000], // 定义域 - abnormal: 1, - }, - }, - }, - keyMapping: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.MappingField', dm: '映射字段' }), - type: 'select', - useFont: true, - default: 'amount', - options, - showInPanel: { - conditions: [['size.mapping', '$eq', true]], - }, - valuePath: 'size.key', - }, - }, - }, - color: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Color', dm: '颜色' }), - type: 'group', - enableHide: false, - fold: false, - children: { - colorMapping: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.FillColor', dm: '填充颜色' }), - type: 'colorMapping', - fixedComponents: ['flat'], - valuePath: 'color', - default: { - mapping: false, - fixed: '#CB6EF8', - scale: { - type: 'ordinal', - scheme: 'cat-1', - custom: true, - range: [ - '#CB6EF8', - '#82E6C7', - '#F6D87B', - '#F69F7F', - '#E96075', - '#F58CCB', - '#795AE1', - '#622CD8', - '#85C98E', - '#3E34E5', - '#2959C1', - '#4D92DE', - '#5CB5D4', - '#B9D569', - ], - - domain: [], - excepted: '#666', - abnormal: '#f31200', - pin: [false, true], - }, - }, - }, - keyMapping: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.MappingField', dm: '映射字段' }), - type: 'select', - useFont: true, - default: 'type', - showInPanel: { - conditions: [ - ['color.scale.custom', '$eq', true], - ['color.mapping', '$eq', true], - ], - - logicalType: '$and', - }, - valuePath: 'color.key', - options, - }, - }, - }, - label: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Label', dm: '标签' }), - type: 'group', - enableHide: false, - fold: false, - children: { - enable: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Switch', dm: '开关' }), - type: 'switch', - default: true, - statusText: true, - }, - key: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.MappingField', dm: '映射字段' }), - type: 'select', - useFont: true, - default: 'type', - showInPanel: { - conditions: [['.enable', '$eq', true]], - }, - options, - }, - color: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Color', dm: '颜色' }), - type: 'fill', - default: '#000', - valuePath: 'label.color', - showInPanel: { - conditions: [['.enable', '$eq', true]], - }, - }, - }, - }, - icon: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Icon', dm: '图标' }), - type: 'group', - enableHide: false, - fold: false, - children: { - enable: { - type: 'switch', - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Switch', dm: '开关' }), - statusText: true, - default: true, - }, - type: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Type', dm: '类型' }), - type: 'buttonRadio', - useFont: true, - default: 'text', - showInPanel: { - conditions: [['.enable', '$eq', true]], - }, - options: [ - { - value: 'text', - label: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Text', dm: '文本' }), - }, - { - value: 'image', - label: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.Picture', dm: '图片' }), - }, - { - value: 'font', - label: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.FontIcon', dm: '字体图标' }), - }, - ], - }, - key: { - name: $i18n.get({ id: 'advance.elements.ReasonNode.registerMeta.MappingField', dm: '映射字段' }), - type: 'select', - default: 'id', - options, - showInPanel: { - conditions: [['.enable', '$eq', true]], - }, - }, - }, - }, - }; -}; - -export default registerMeta; diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/registerShape.ts b/packages/gi-assets-advance/src/elements/ReasonNode/registerShape.ts deleted file mode 100644 index 1e9e082ed..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/registerShape.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { registerNode as registerShape } from './reason_analysis_node'; - -export default registerShape; diff --git a/packages/gi-assets-advance/src/elements/ReasonNode/registerTransform.ts b/packages/gi-assets-advance/src/elements/ReasonNode/registerTransform.ts deleted file mode 100644 index b0e010237..000000000 --- a/packages/gi-assets-advance/src/elements/ReasonNode/registerTransform.ts +++ /dev/null @@ -1,30 +0,0 @@ -// import { defaultProps } from './registerMeta'; -const defaultProps = {}; - -/** 数据映射函数 需要根据配置自动生成*/ -const transform = (s, metaConfig) => { - try { - /** 解构配置项 */ - const props = Object.assign({}, defaultProps, metaConfig.node.props); - const { label = {} } = props; - const labelKey = label.mappingKey || 'id'; - const nodes = s.nodes.map(node => { - const { id, data } = node; - - return { - id: node.id, - data: node.data, - type: 'reason_analysis_node', - label: data[labelKey], - }; - }); - // const initNodes = statistics_data(nodes); - // console.log('transform nodes', initNodes); - // return initNodes; - return nodes; - } catch (error) { - console.error('parse transform error:', error); - return s.nodes; - } -}; -export default transform;