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 }) => (
-
+
)
-const NetworkIcon = () => (
+export const NetworkIcon = () => (
<>
@@ -69,5 +71,3 @@ const NetworkIcon = () => (
>
)
-
-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}
/>
)