feat(network): fix website icon due to API changes

plouc · Dec 31, 2021 · b115f70 · b115f70
1 parent 1b03cec
commit b115f70
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git 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 → website/src/components/icons/NetworkIcon.tsx b/website/src/components/icons/NetworkIcon.js → 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
@@ -37,6 +37,7 @@ const RadialBarIconItem = ({ type }: { type: IconType }) => (
             radialAxisStart={null}
             circularAxisOuter={null}
             animate={false}
+            isInteractive={false}
         />
     </Icon>
 )