feat(chord): adjust website icon and home demo according to the new API

plouc · Jan 1, 2022 · 90210e4 · 90210e4
1 parent ebf01a1
commit 90210e4
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 20 deletions.
diff --git a/website/src/components/home/Home.js b/website/src/components/home/Home.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTheme } from '../../theming/context'
 import { Container, HomeBaseline, HomeLogo } from './styled'
-import HomeChord from './HomeChord'
+import { HomeChord } from './HomeChord'
 import HomeLine from './HomeLine'
 import { HomeCirclePacking } from './HomeCirclePacking'
 import HomeBar from './HomeBar'

diff --git a/website/src/components/home/HomeChord.js → website/src/components/home/HomeChord.tsx b/website/src/components/home/HomeChord.js → website/src/components/home/HomeChord.tsx
@@ -1,16 +1,19 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { generateChordData } from '@nivo/generators'
 import { ResponsiveChordCanvas } from '@nivo/chord'
 import { HomeItem, HomeItemLabel } from './styled'
 
-const HomeChord = ({ colors }) => {
+export const HomeChord = ({ colors }: { colors: string[] }) => {
+    const { matrix, keys } = useMemo(() => generateChordData({ size: 7 }), [])
+
     return (
         <HomeItem to="/chord/">
             <ResponsiveChordCanvas
+                data={matrix}
+                keys={keys}
                 colors={colors}
                 padAngle={0.04}
                 innerRadiusRatio={0.9}
-                {...generateChordData({ size: 7 })}
                 enableLabel={false}
                 isInteractive={false}
                 animate={false}
@@ -23,5 +26,3 @@ const HomeChord = ({ colors }) => {
         </HomeItem>
     )
 }
-
-export default HomeChord
diff --git a/website/src/components/home/styled.js → website/src/components/home/styled.ts b/website/src/components/home/styled.js → website/src/components/home/styled.ts
@@ -109,8 +109,6 @@ export const HomeBaseline = styled.div`
     color: white;
     font-weight: 300;
     font-size: 15px;
-    display: flex;
-    align-items: center;
     justify-content: flex-start;
     line-height: 26px;
     padding: 0 20px;

diff --git a/website/src/components/icons/ChordIcon.js → website/src/components/icons/ChordIcon.tsx b/website/src/components/icons/ChordIcon.js → website/src/components/icons/ChordIcon.tsx
@@ -7,24 +7,26 @@ import chordDarkNeutralImg from '../../assets/icons/chord-dark-neutral.png'
 import chordDarkColoredImg from '../../assets/icons/chord-dark-colored.png'
 import { ICON_SIZE, Icon, colors, IconImg } from './styled'
 
-const Wrapper = styled.div`
-    & svg > g > g > g:first-child path:nth-child(1),
-    & svg > g > g > g:first-child path:nth-child(3) {
+const Wrapper = styled.div<{
+    ribbonColor: string
+}>`
+    & svg > g > g:first-child path:nth-child(1),
+    & svg > g > g:first-child path:nth-child(3) {
         fill: none;
     }
-    & svg > g > g > g:first-child path:nth-child(2),
-    & svg > g > g > g:first-child path:nth-child(4),
-    & svg > g > g > g:first-child path:nth-child(5) {
+    & svg > g > g:first-child path:nth-child(2),
+    & svg > g > g:first-child path:nth-child(4),
+    & svg > g > g:first-child path:nth-child(5) {
         fill: ${({ ribbonColor }) => ribbonColor};
-        fill-opacity: 1;
+        opacity: 1;
     }
 `
 
 const chartProps = {
     width: ICON_SIZE,
     height: ICON_SIZE,
     keys: ['A', 'B', 'C', 'D'],
-    matrix: [
+    data: [
         [0, 2, 3, 0], // A
         [2, 0, 0, 2], // B
         [4, 0, 4, 4], // C
@@ -54,7 +56,7 @@ const ChordIconItem = ({ type }) => (
     </Icon>
 )
 
-const ChordIcon = () => (
+export const ChordIcon = () => (
     <>
         <ChordIconItem type="lightNeutral" />
         <IconImg url={chordLightNeutralImg} />
@@ -66,5 +68,3 @@ const ChordIcon = () => (
         <IconImg url={chordDarkColoredImg} />
     </>
 )
-
-export default ChordIcon
diff --git a/website/src/components/icons/Icons.js b/website/src/components/icons/Icons.js
@@ -6,7 +6,7 @@ import BulletIcon from './BulletIcon'
 import BumpIcon from './BumpIcon'
 import CalendarIcon from './CalendarIcon'
 import ChoroplethIcon from './ChoroplethIcon'
-import ChordIcon from './ChordIcon'
+import { ChordIcon } from './ChordIcon'
 import CirclePackingIcon from './CirclePackingIcon'
 import CodeIcon from './CodeIcon'
 import DataIcon from './DataIcon'