From 20b3382ae020a1e052fc9b61d9ebfc04f1480f2a Mon Sep 17 00:00:00 2001 From: fearlessfe <505380967@qq.com> Date: Sat, 24 Aug 2024 22:48:26 +0800 Subject: [PATCH] fix: genNodesAndLinks method in claim chart --- src/components/Charts/ClaimChart/index.tsx | 263 +++++++++++---------- 1 file changed, 135 insertions(+), 128 deletions(-) diff --git a/src/components/Charts/ClaimChart/index.tsx b/src/components/Charts/ClaimChart/index.tsx index 2110fc6..943f026 100644 --- a/src/components/Charts/ClaimChart/index.tsx +++ b/src/components/Charts/ClaimChart/index.tsx @@ -4,188 +4,195 @@ import { depth, shortenAddress } from "@/utils"; import { EChartOption } from "echarts"; import React, { FC } from "react"; - const xGap = 100; const yGap = 100; const yBase = 100; +const isAttack = (cur: number, parent: number): boolean => { + if (parent * 2 === cur) { + return true; + } + return false; +}; + const genNodesAndLinks = (data: ClaimData[]): any => { const nodes: any[] = []; const links: any[] = []; - const claimMap = new Map(); - data.forEach(item => { - claimMap.set(item.position, item); - }) - const stack: number[] = [1] - // 增加第一个节点 - const item = claimMap.get(1) as ClaimData + // key: tree deep, value: nums of nodes at this level + const levelMap = new Map(); + + const root = data[0]; nodes.push({ - name: item.event_id.toString(), - claim: item.claim, - position: item.position, - value: `${item.position}🏁 ${shortenAddress(item.claim, 3)}`, + name: root.event_id.toString(), + claim: root.claim, + position: root.position, + value: `${root.position}🏁 ${shortenAddress(root.claim, 3)}`, itemStyle: { color: "yellow", }, x: 0, - y: yBase - }) - while (stack.length) { - const index = stack.shift() as number; - const prevItem = claimMap.get(index) as ClaimData; - // when index is 1, it has only attack node - if (claimMap.has(index*2)) { - stack.push(index * 2) - const item = claimMap.get(index*2) as ClaimData; - const nodeLevel = depth(item.position); - nodes.push({ - name: item.event_id.toString(), - claim: item.claim, - position: item.position, - value: `${item.position}⚔️ ${shortenAddress(item.claim, 3)}`, - itemStyle: { - color: "red", - }, - x: -nodeLevel * xGap, - y: yBase + nodeLevel * yGap - }) - links.push({ - source: prevItem.event_id.toString(), - target: item.event_id.toString(), - lineStyle: { - color: "red", - }, - label: { - show: true, - formatter: "attack", - } - }) - } - if(index !== 1 && claimMap.has(index *2 + 2)) { - stack.push(index*2 + 2) - const item = claimMap.get(index *2 + 2) as ClaimData; - const nodeLevel = depth(item.position); - nodes.push({ - name: item.event_id.toString(), - claim: item.claim, - position: item.position, - value: `${item.position}👑 ${shortenAddress(item.claim, 3)}`, - itemStyle: { - color: "blue", - }, - x: -nodeLevel * xGap + 2 * xGap, - y: yBase + nodeLevel * yGap - }) - links.push({ - source: prevItem.event_id.toString(), - target: item.event_id.toString(), - lineStyle: { - color: "blue", - }, - label: { - show: true, - formatter: "defend", - } - }) + y: yBase, + }); + + for (let i = 1; i < data.length; i++) { + const current = data[i]; + const parent = data[current.parent_index]; + const deep = depth(current.position); + const deepCount = levelMap.get(deep) || 0; + const node = { + name: current.event_id.toString(), + claim: current.claim, + position: current.position, + value: `${current.position}⚔️ ${shortenAddress(current.claim, 3)}`, + itemStyle: { + color: "red", + }, + x: (-deep + deepCount) * xGap, + y: yBase + deep * yGap, + }; + const link = { + source: parent.event_id.toString(), + target: current.event_id.toString(), + lineStyle: { + color: "red", + }, + label: { + show: true, + formatter: "attack", + }, + }; + if (!isAttack(current.position, parent.position)) { + node.itemStyle.color = "blue"; + link.lineStyle.color = "blue"; + link.label.formatter = "defend"; } - + nodes.push(node); + links.push(link); + levelMap.set(deep, deepCount + 1); } - + console.log(nodes); return { nodes, links, }; }; -const ClaimChart: FC<{claimData: ClaimData[]}> = ({ claimData }) => { - // const claimData: ClaimData[] = [ +const ClaimChart: FC<{ claimData: ClaimData[] }> = ({ claimData }) => { + // const claimData = [ // { - // id: 1, - // game_contract: "0xc9cb084c3ad4e36b719b60649f99ea9f13bb45b7", + // id: 7585, + // created_at: "2024-08-23T02:29:11Z", + // updated_at: "2024-08-23T02:29:11Z", + // game_contract: "0x2ed2a8c32bbe31e55dd03f31c85bd45138a1181f", // data_index: 0, // parent_index: 4294967295, // countered_by: "0x0000000000000000000000000000000000000000", // claimant: "0x49277EE36A024120Ee218127354c4a3591dc90A9", // bond: 80000000000000000, - // claim: "c58adb6387728df32318772a7beefa386072b4347e39f64a753bfd82c8acdb07", + // claim: "bef852721eceb6b7da05920bf3c7ce8291cb1d673e93409e79da26106fff3a5a", // position: 1, - // clock: 1717457280, - // output_block: 12827274, - // event_id: 1011299, + // clock: 1724379108, + // output_block: 16288209, + // event_id: 14781, // }, // { - // id: 4, - // game_contract: "0xc9cb084c3ad4e36b719b60649f99ea9f13bb45b7", + // id: 7588, + // created_at: "2024-08-23T03:07:27Z", + // updated_at: "2024-08-23T03:07:27Z", + // game_contract: "0x2ed2a8c32bbe31e55dd03f31c85bd45138a1181f", // data_index: 1, // parent_index: 0, - // countered_by: "0xffb026F67DA0869EB3ABB090cB7F015CE0925CdF", - // claimant: "0x06C1a398362ac75e3EeE6e3081Bdb620904713e2", + // countered_by: "0x0000000000000000000000000000000000000000", + // claimant: "0x756A6aa43547fA8cCF02ab417E6c4c4747137346", // bond: 87594000000000000, - // claim: "0226211e7ac87473f78718497788e090079941fe5a15194c09e6e31640e80e08", + // claim: "bef852721eceb6b7da05920bf3c7ce8291cb1d673e93409e79da26106fff3a5b", // position: 2, - // clock: 1717458288, - // output_block: 12827274, - // event_id: 1011302, + // clock: 1724381664, + // output_block: 16288209, + // event_id: 14787, // }, // { - // id: 3, - // game_contract: "0xc9cb084c3ad4e36b719b60649f99ea9f13bb45b7", + // id: 7589, + // created_at: "2024-08-23T03:13:45Z", + // updated_at: "2024-08-23T03:13:45Z", + // game_contract: "0x2ed2a8c32bbe31e55dd03f31c85bd45138a1181f", // data_index: 2, // parent_index: 1, // countered_by: "0x0000000000000000000000000000000000000000", // claimant: "0xffb026F67DA0869EB3ABB090cB7F015CE0925CdF", // bond: 95908800000000000, - // claim: "c58adb6387728df32318772a7beefa386072b4347e39f64a753bfd82c8acdb07", + // claim: "bef852721eceb6b7da05920bf3c7ce8291cb1d673e93409e79da26106fff3a5a", // position: 4, - // clock: 1717458312, - // output_block: 12827274, - // event_id: 1011301, + // clock: 1724381676, + // output_block: 16288209, + // event_id: 14788, // }, // { - // id: 6, - // game_contract: "0xc9cb084c3ad4e36b719b60649f99ea9f13bb45b7", - // data_index: 3, - // parent_index: 2, - // countered_by: "0xB3bf1D0Ac3187F5F088cfb7147D41B26F46B52f5", - // claimant: "0x06C1a398362ac75e3EeE6e3081Bdb620904713e2", - // bond: 105013000000000000, - // claim: "0226211e7ac87473f78718497788e090079941fe5a15194c09e6e31640e80e08", - // position: 8, - // clock: 1717458348, - // output_block: 12827274, - // event_id: 1011304, + // id: 7603, + // created_at: "2024-08-23T06:25:52Z", + // updated_at: "2024-08-23T06:25:52Z", + // game_contract: "0x2ed2a8c32bbe31e55dd03f31c85bd45138a1181f", + // data_index: 1, + // parent_index: 0, + // countered_by: "0x0000000000000000000000000000000000000000", + // claimant: "0x756A6aa43547fA8cCF02ab417E6c4c4747137346", + // bond: 87594000000000000, + // claim: "bef852721eceb6b7da05920bf3c7ce8291cb1d673e93409e79da26106fff3a5b", + // position: 2, + // clock: 1724381664, + // output_block: 16288209, + // event_id: 14815, // }, // { - // id: 3, - // game_contract: "0xc9cb084c3ad4e36b719b60649f99ea9f13bb45b7", - // data_index: 2, - // parent_index: 1, + // id: 7604, + // created_at: "2024-08-23T06:25:52Z", + // updated_at: "2024-08-23T06:25:52Z", + // game_contract: "0x2ed2a8c32bbe31e55dd03f31c85bd45138a1181f", + // data_index: 4, + // parent_index: 3, // countered_by: "0x0000000000000000000000000000000000000000", // claimant: "0xffb026F67DA0869EB3ABB090cB7F015CE0925CdF", // bond: 95908800000000000, - // claim: "c58adb6387728df32318772a7beefa386072b4347e39f64a753bfd82c8acdb07", - // position: 10, - // clock: 1717458312, - // output_block: 12827274, - // event_id: 1011399, + // claim: "bef852721eceb6b7da05920bf3c7ce8291cb1d673e93409e79da26106fff3a5a", + // position: 4, + // clock: 1724393436, + // output_block: 16288209, + // event_id: 14816, // }, // { - // id: 5, - // game_contract: "0xc9cb084c3ad4e36b719b60649f99ea9f13bb45b7", - // data_index: 4, - // parent_index: 3, + // id: 7605, + // created_at: "2024-08-23T06:32:24Z", + // updated_at: "2024-08-23T06:32:24Z", + // game_contract: "0x2ed2a8c32bbe31e55dd03f31c85bd45138a1181f", + // data_index: 1, + // parent_index: 0, + // countered_by: "0x0000000000000000000000000000000000000000", + // claimant: "0x756A6aa43547fA8cCF02ab417E6c4c4747137346", + // bond: 87594000000000000, + // claim: "bef852721eceb6b7da05920bf3c7ce8291cb1d673e93409e79da26106fff3a5b", + // position: 2, + // clock: 1724381664, + // output_block: 16288209, + // event_id: 14817, + // }, + // { + // id: 7606, + // created_at: "2024-08-23T06:32:25Z", + // updated_at: "2024-08-23T06:32:25Z", + // game_contract: "0x2ed2a8c32bbe31e55dd03f31c85bd45138a1181f", + // data_index: 6, + // parent_index: 5, // countered_by: "0x0000000000000000000000000000000000000000", - // claimant: "0xB3bf1D0Ac3187F5F088cfb7147D41B26F46B52f5", - // bond: 114981200000000000, - // claim: "c58adb6387728df32318772a7beefa386072b4347e39f64a753bfd82c8acdb07", - // position: 16, - // clock: 1717458360, - // output_block: 12827274, - // event_id: 1011303, + // claimant: "0xffb026F67DA0869EB3ABB090cB7F015CE0925CdF", + // bond: 95908800000000000, + // claim: "bef852721eceb6b7da05920bf3c7ce8291cb1d673e93409e79da26106fff3a5a", + // position: 4, + // clock: 1724393700, + // output_block: 16288209, + // event_id: 14818, // }, // ]; - const { nodes, links } = genNodesAndLinks(claimData); const options: EChartOption = { tooltip: {