Skip to content

Commit

Permalink
fix: 修复关系图部分节点配置失效 (ant-design#1507)
Browse files Browse the repository at this point in the history
  • Loading branch information
lxfu1 authored Aug 17, 2022
1 parent 79da4bf commit 380fd6f
Show file tree
Hide file tree
Showing 14 changed files with 195 additions and 448 deletions.
2 changes: 1 addition & 1 deletion config/jest.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const BaseJestConfig = {
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
collectCoverage: false,
collectCoverageFrom: ['packages/**/*.ts', '!**/node_modules/**'],
testRegex: '/tests/.*-spec\\.tsx|\\.(t|j)s?$',
testMatch: ['**/?(*[.-])+(spec|test).[jt]s?(x)'],
};

module.exports = { BaseJestConfig };
4 changes: 4 additions & 0 deletions packages/graphs/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
`2022-08-17`

- 🐞 [关系图透传节点配置,支持 image 等节点](https://github.com/ant-design/ant-design-charts/issues/1489)

## 1.2.3

`2022-07-22`
Expand Down
2 changes: 1 addition & 1 deletion packages/graphs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"lint:prettier": "npm run prettier && git diff && prettier --version && prettier --check \"src/**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
"prettier": "prettier --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
"test": "jest",
"test:live": "cross-env DEBUG_MODE=1 jest --watch ./tests/issues/1441-spec.tsx --no-cache"
"test:live": "cross-env DEBUG_MODE=1 jest --watch ./tests/utils/error-boundary.test.tsx --no-cache"
},
"dependencies": {
"@antv/g6": "^4.2.4",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@ import { defaultFlowGraphAnchorPoints, defaultNodeSize, defaultNodeStyle, defaul
import ErrorBoundary from '../../errorBoundary';
import useGraph from '../../hooks/useGraphs';
import useProps from '../../hooks/useProps';
import { CommonConfig, IGraph, IGroup, NodeConfig, Shape, ShapeCfg, TreeGraphData } from '../../interface';
import { CommonConfig, IGraph, IGroup, NodeConfig, Shape, ShapeCfg, G6TreeGraphData } from '../../interface';
import ChartLoading from '../../utils/createLoading';
import { registerIndicatorGeometries } from '../flow-analysis-graph/customItem';

export interface DecompositionTreeGraphConfig extends Omit<CommonConfig, 'data' | 'nodeCfg'> {
data: TreeGraphData;
data: G6TreeGraphData;
/** 展开层级,默认 100 */
level?: number;
nodeCfg?: CommonConfig['nodeCfg'] & {
/** 点击展开时异步获取数据 */
getChildren?: (nodeCfg: NodeConfig) => TreeGraphData['children'];
getChildren?: (nodeCfg: NodeConfig) => G6TreeGraphData['children'];
};
}

Expand Down
4 changes: 2 additions & 2 deletions packages/graphs/src/components/radial-tree-graph/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import useGraph from '../../hooks/useGraphs';
import useProps from '../../hooks/useProps';
import ChartLoading from '../../utils/createLoading';

import { CommonConfig, FlowGraphDatum } from '../../interface';
import { CommonConfig, TreeGraphData } from '../../interface';
import { defaultFlowGraphAnchorPoints, defaultStateStyles, defaultNodeStyle } from '../../constants';

export interface RadialTreeGraphConfig extends Omit<CommonConfig, 'data'> {
data: FlowGraphDatum;
data: TreeGraphData;
}

const defaultLayout = {
Expand Down
10 changes: 4 additions & 6 deletions packages/graphs/src/errorBoundary/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,10 @@ class ErrorBoundary extends React.Component<any> {
const { errorTemplate } = this.props;
switch (e) {
default:
// fallback
return errorTemplate && typeof errorTemplate === 'function' ? (
errorTemplate(e)
) : (
<h5>组件出错了,请核查后重试: {e.message}</h5>
);
if (typeof errorTemplate === 'function') {
return errorTemplate(e);
}
return errorTemplate ? errorTemplate : <h5>组件出错了,请核查后重试: {e.message}</h5>;
}
};

Expand Down
7 changes: 2 additions & 5 deletions packages/graphs/src/hooks/useGraphs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,6 @@ export default function useGraph(graphClass: string, config: any, extra: { name?

const {
type: nodeType,
size: nodeSize,
anchorPoints: nodeAnchorPoints,
nodeStateStyles,
style: nodeStyle,
Expand Down Expand Up @@ -297,13 +296,11 @@ export default function useGraph(graphClass: string, config: any, extra: { name?
default: behaviors,
},
defaultNode: {
type: nodeType,
size: nodeSize,
anchorPoints: nodeAnchorPoints,
...nodeCfg,
nodeCfg,
},
defaultEdge: {
type: edgeType,
...edgeCfg,
edgeCfg,
labelCfg: labelCfg?.style,
},
Expand Down
4 changes: 3 additions & 1 deletion packages/graphs/src/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@ import {
NodeConfig as G6NodeConfig,
ShapeStyle,
StateStyles,
TreeGraphData as G6TreeGraphData,
} from '@antv/g6';

export interface GraphContainerConfig {
style?: React.CSSProperties;
className?: string;
loading?: boolean;
loadingTemplate?: React.ReactElement;
errorTemplate?: (e: Error) => React.ReactNode;
errorTemplate?: React.ReactNode | ((e: Error) => React.ReactNode);
}
export interface NodeConfig extends G6NodeConfig {
value?: any;
Expand Down Expand Up @@ -340,4 +341,5 @@ export {
Graph,
IPoint,
IShape,
G6TreeGraphData,
};
131 changes: 131 additions & 0 deletions packages/graphs/tests/issues/1489-spec.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import { RadialTreeGraph } from '../../src';

describe('Image node', () => {
let container;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});

it('Render', () => {
let chartRef = undefined;
const props = {
className: 'container',
onReady: (ref) => {
chartRef = ref;
},
};
const data = {
id: 'Modeling Methods',
children: [
{
id: 'Classification',
type: 'image',
img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*w5uESbSe430AAAAAAAAAAABkARQnAQ',
children: [
{ id: 'Logistic regression', value: 'Logistic regression' },
{ id: 'Linear discriminant analysis', value: 'Linear discriminant analysis' },
{ id: 'Rules', value: 'Rules' },
{ id: 'Decision trees', value: 'Decision trees' },
{ id: 'Naive Bayes', value: 'Naive Bayes' },
{ id: 'K nearest neighbor', value: 'K nearest neighbor' },
{ id: 'Probabilistic neural network', value: 'Probabilistic neural network' },
{ id: 'Support vector machine', value: 'Support vector machine' },
],
value: 'Classification',
},
{
id: 'Consensus',
children: [
{
id: 'Models diversity',
children: [
{ id: 'Different initializations', value: 'Different initializations' },
{ id: 'Different parameter choices', value: 'Different parameter choices' },
{ id: 'Different architectures', value: 'Different architectures' },
{ id: 'Different modeling methods', value: 'Different modeling methods' },
{ id: 'Different training sets', value: 'Different training sets' },
{ id: 'Different feature sets', value: 'Different feature sets' },
],
value: 'Models diversity',
},
{
id: 'Methods',
children: [
{ id: 'Classifier selection', value: 'Classifier selection' },
{ id: 'Classifier fusion', value: 'Classifier fusion' },
],
value: 'Methods',
},
{
id: 'Common',
children: [
{ id: 'Bagging', value: 'Bagging' },
{ id: 'Boosting', value: 'Boosting' },
{ id: 'AdaBoost', value: 'AdaBoost' },
],
value: 'Common',
},
],
value: 'Consensus',
},
{
id: 'Regression',
children: [
{ id: 'Multiple linear regression', value: 'Multiple linear regression' },
{ id: 'Partial least squares', value: 'Partial least squares' },
{
id: 'Multi-layer feedforward neural network',
value: 'Multi-layer feedforward neural network',
},
{ id: 'General regression neural network', value: 'General regression neural network' },
{ id: 'Support vector regression', value: 'Support vector regression' },
],
value: 'Regression',
},
],
value: 'Modeling Methods',
};

const config = {
data,
autoFit: false,
nodeCfg: {
type: 'image',
img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mpPvTKdP7cIAAAAAAAAAAABkARQnAQ',
},
layout: {
type: 'compactBox',
direction: 'RL',
getId: function getId(d) {
return d.id;
},
getHeight: () => {
return 26;
},
getWidth: () => {
return 26;
},
getVGap: () => {
return 20;
},
getHGap: () => {
return 30;
},
radial: true,
},
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
} as any;
act(() => {
ReactDOM.render(<RadialTreeGraph {...props} {...config} />, container);
});
expect(chartRef).not.toBeUndefined();
});
});
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { deepClone } from '../../src/util';
import { deepClone } from '../../src/utils';

describe('utils deepClone', () => {
it('deepClone', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { create } from 'react-test-renderer';
import Area from '../../src/plots/area';
import { ErrorBoundary } from '../../src/base';
import { RadialTreeGraph } from '../../src';
import ErrorBoundary from '../../src/errorBoundary';

describe('Area render', () => {
let container;
Expand All @@ -24,16 +24,23 @@ describe('Area render', () => {
errorTemplate: <span id="error">custom error</span>,
};
const chartProps = {
data: [],
xField: 'date',
yField: 'scales',
data: {
id: 'Modeling Methods',
value: 'Methods',
children: [],
},
autoFit: false,
width: '200',
height: '160',
nodeCfg: {
type: 'image',
img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mpPvTKdP7cIAAAAAAAAAAABkARQnAQ',
},
width: 200,
height: 160,
};
const testRenderer = create(<Area {...props} {...chartProps} />);
// @ts-ignore
const testRenderer = create(<RadialTreeGraph {...props} {...chartProps} />);
const testInstance = testRenderer.root;
expect(testInstance.findByType(ErrorBoundary).children[0].children[0].indexOf('') !== -1).toBeTruthy();
expect((testInstance.findByType(ErrorBoundary).children[0] as any).children[0].indexOf('') !== -1).toBeTruthy();
});

it('error template with callback', () => {
Expand All @@ -46,15 +53,23 @@ describe('Area render', () => {
errorTemplate: () => <span id="error-callback">custom error with callback</span>,
};
const chartProps = {
data: [],
xField: 'date',
yField: 'scales',
data: {
id: 'Modeling Methods',
value: 'Methods',
children: [],
},
autoFit: false,
width: '200',
height: '160',
nodeCfg: {
type: 'image',
img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mpPvTKdP7cIAAAAAAAAAAABkARQnAQ',
},
width: 200,
height: 160,
};
const testRenderer = create(<Area {...props} {...chartProps} />);
// @ts-ignore
const testRenderer = create(<RadialTreeGraph {...props} {...chartProps} />);
const testInstance = testRenderer.root;
// @ts-ignore
expect(testInstance.findByType(ErrorBoundary).children[0].children).toEqual(['custom error with callback']);
});
});
Loading

0 comments on commit 380fd6f

Please sign in to comment.