From b115f701cc7addb351887bbc9dbb673f9ee933f7 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sun, 12 Sep 2021 11:52:04 +0900
Subject: [PATCH] feat(network): fix website icon due to API changes

---
 website/src/components/icons/Icons.js            |  2 +-
 .../icons/{NetworkIcon.js => NetworkIcon.tsx}    | 16 ++++++++--------
 website/src/components/icons/RadialBarIcon.tsx   |  1 +
 3 files changed, 10 insertions(+), 9 deletions(-)
 rename website/src/components/icons/{NetworkIcon.js => NetworkIcon.tsx} (83%)

diff --git a/website/src/components/icons/Icons.js b/website/src/components/icons/Icons.js
index 874e5a8fed..2281e63036 100644
--- a/website/src/components/icons/Icons.js
+++ b/website/src/components/icons/Icons.js
@@ -15,7 +15,7 @@ import GeoMapIcon from './GeoMapIcon'
 import HeatMapIcon from './HeatMapIcon'
 import LineIcon from './LineIcon'
 import MarimekkoIcon from './MarimekkoIcon'
-import NetworkIcon from './NetworkIcon'
+import { NetworkIcon } from './NetworkIcon'
 import PieIcon from './PieIcon'
 import RadarIcon from './RadarIcon'
 import { RadialBarIcon } from './RadialBarIcon'
diff --git a/website/src/components/icons/NetworkIcon.js b/website/src/components/icons/NetworkIcon.tsx
similarity index 83%
rename from website/src/components/icons/NetworkIcon.js
rename to website/src/components/icons/NetworkIcon.tsx
index 701c65065a..4c04d496b4 100644
--- a/website/src/components/icons/NetworkIcon.js
+++ b/website/src/components/icons/NetworkIcon.tsx
@@ -5,8 +5,9 @@ import networkLightColoredImg from '../../assets/icons/network-light-colored.png
 import networkDarkNeutralImg from '../../assets/icons/network-dark-neutral.png'
 import networkDarkColoredImg from '../../assets/icons/network-dark-colored.png'
 import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
 
-const getData = currentColors => {
+const getData = (currentColors: any) => {
     let nodes = 'ABCDE'.split('').map(id => ({
         id,
         radius: 5,
@@ -18,7 +19,7 @@ const getData = currentColors => {
         distance: 2,
     }))
 
-    const leaves = []
+    const leaves: any[] = []
     nodes.forEach(node => {
         Array.from({ length: 7 }, (v, k) => {
             leaves.push({
@@ -43,21 +44,22 @@ const getData = currentColors => {
 const chartProps = {
     width: ICON_SIZE,
     height: ICON_SIZE,
-    distance: link => link.distance,
+    linkDistance: (link: any) => link.distance,
     repulsivity: 5,
     linkThickness: 2,
+    nodeColor: (node: any) => node.color,
     linkColor: { from: 'source.color' },
     animate: false,
     isInteractive: false,
 }
 
-const NetworkIconItem = ({ type }) => (
+const NetworkIconItem = ({ type }: { type: IconType }) => (
     <Icon id={`network-${type}`} type={type}>
-        <Network {...chartProps} {...getData(colors[type].colors)} />
+        <Network {...chartProps} data={getData(colors[type].colors)} />
     </Icon>
 )
 
-const NetworkIcon = () => (
+export const NetworkIcon = () => (
     <>
         <NetworkIconItem type="lightNeutral" />
         <IconImg url={networkLightNeutralImg} />
@@ -69,5 +71,3 @@ const NetworkIcon = () => (
         <IconImg url={networkDarkColoredImg} />
     </>
 )
-
-export default NetworkIcon
diff --git a/website/src/components/icons/RadialBarIcon.tsx b/website/src/components/icons/RadialBarIcon.tsx
index 46c1904b92..76b634fcd2 100644
--- a/website/src/components/icons/RadialBarIcon.tsx
+++ b/website/src/components/icons/RadialBarIcon.tsx
@@ -37,6 +37,7 @@ const RadialBarIconItem = ({ type }: { type: IconType }) => (
             radialAxisStart={null}
             circularAxisOuter={null}
             animate={false}
+            isInteractive={false}
         />
     </Icon>
 )