test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-02 19:58:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: update & state

Browse Source
This commit is contained in:
baizn 2020-08-17 11:09:00 +08:00 committed by Moyee
parent 51d50a9fcf
commit 8e61aaf30b
1 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
stories/Shape/component/xml.tsx
View File

@ -3,40 +3,40 @@ import G6 from '../../../src';
import { IGraph } from '../../../src/interface/graph';
const percentageBar = ({ width, used, height = 12 }) => `
<rect style="{
<rect style={{
marginLeft: 10,
marginTop: 3,
width: ${width},
height: ${height},
fill: '#fff',
stroke: '#1890ff'
}" classname="body" >
<rect style="{
}} name="body" >
<rect style={{
marginLeft: 10,
width: ${width / 100 * used},
height: ${height},
fill: '#1890ff',
stroke: '#1890ff',
}"/>
}}/>
</rect>
`
const textXML = cfg => `
<group>
<rect style="{
<rect style={{
width: 100, height: 20, fill: '#1890ff', stroke: '#1890ff', radius: [6, 6, 0, 0]
}">
<text style="{ marginTop: 2, marginLeft: 50, textAlign: 'center', fontWeight: 'bold', fill: '#fff' }">${cfg.id}</text>
}}>
<text style={{ marginTop: 2, marginLeft: 50, textAlign: 'center', fontWeight: 'bold', fill: '#fff' }}>${cfg.id}</text>
</rect>
<rect style="{ width: 100, height: 80, stroke: '#1890ff', fill: 'rgba(24,144,255,0.15)', radius: [0, 0, 6, 6] }" keyshape="true" cursor="move">
${cfg.cpuUsage > 60 ? '<text style="{marginLeft: 3 ,fill: \'red\'}">FULL</text>' : ''}
<text style="{ marginTop: 5, marginLeft: 3, fill: '#333'}">${cfg.metric}: </text>
<text style="{
<rect style={{ width: 100, height: 80, fill: 'rgba(24,144,255,0.15)', radius: [0, 0, 6, 6] }} keyshape="true" cursor="move">
${cfg.cpuUsage > 60 ? '<text style={{marginLeft: 3 ,fill: "red"}}>FULL</text>' : ''}
<text style={{ marginTop: 5, marginLeft: 3, fill: '#333'}}>${cfg.metric}: </text>
<text style={{
marginTop: 3,
marginLeft: ${cfg.cpuUsage * 0.8},
fontSize: 10,
fill: '#1890ff',
}">${cfg.cpuUsage}%</text>
}}>${cfg.cpuUsage}%</text>
${percentageBar({ width: 80, used: cfg.cpuUsage })}
</rect>
</group>
@ -44,6 +44,15 @@ const textXML = cfg => `
G6.registerNode('test', textXML);
G6.registerNode('rect-xml', (cfg) => `
<rect style={{
width: 100, height: 20, fill: '#1890ff', stroke: '#1890ff', radius: [6, 6, 0, 0]
}} keyshape="true" name="test">
<text style={{ marginTop: 2, marginLeft: 50, textAlign: 'center', fontWeight: 'bold', fill: '#fff' }} name="title">${cfg.label || cfg.id}</text>
</rect>
`)
let n = 0;
let graph: IGraph = null;
@ -63,6 +72,7 @@ const data = {
x: 400,
y: 150,
cpuUsage: 30,
type: 'rect-xml'
}
],
edges: [
@ -111,6 +121,17 @@ const XML = () => {
graph.on('node:mouseleave', evt => {
graph.setItemState(evt.item, 'hover', false)
})
graph.on('node:click', (evt) => {
const { item } = evt
debugger
graph.updateItem(item, {
cpuUsage: 65,
style: {
stroke: 'red'
}
})
})
}
return () => {