diff --git a/packages/bullet/src/types.ts b/packages/bullet/src/types.ts
index 2541847d1e..d8946e89d9 100644
--- a/packages/bullet/src/types.ts
+++ b/packages/bullet/src/types.ts
@@ -77,6 +77,8 @@ export type CommonBulletProps = Dimensions & {
theme: Theme
+ isInteractive: boolean
+
role: string
}
@@ -194,6 +196,7 @@ export type BulletItemProps = Omit<
| 'measureSize'
| 'markerSize'
| 'theme'
+ | 'isInteractive'
> &
BulletHandlers &
EnhancedDatum &
diff --git a/packages/funnel/src/index.ts b/packages/funnel/src/index.ts
index 13775e66f6..067e26c1b8 100644
--- a/packages/funnel/src/index.ts
+++ b/packages/funnel/src/index.ts
@@ -2,3 +2,4 @@ export * from './Funnel'
export * from './ResponsiveFunnel'
export * from './hooks'
export * from './props'
+export * from './types'
diff --git a/website/src/components/components/explorer/ComponentsGrid.tsx b/website/src/components/components/explorer/ComponentsGrid.tsx
index d44af6a23b..988cbbc555 100644
--- a/website/src/components/components/explorer/ComponentsGrid.tsx
+++ b/website/src/components/components/explorer/ComponentsGrid.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React from 'react'
import styled from 'styled-components'
import { ComponentsGridItem } from './ComponentsGridItem'
import * as nav from '../../../data/nav'
@@ -13,7 +13,9 @@ const getFilterFunction = (term?: string | null, filter?: string | null): Filter
predicates.push(({ name }) => name.toLowerCase().includes(term.toLowerCase()))
}
if (filter) {
+ // @ts-ignore
predicates.push(({ flavors }) => flavors[filter.toLowerCase()] === true)
+ predicates.push(({ tags }) => tags.includes(filter))
}
return item => predicates.every(predicate => predicate(item))
diff --git a/website/src/components/components/explorer/ComponentsGridItem.tsx b/website/src/components/components/explorer/ComponentsGridItem.tsx
index 41c2937ab8..e4cd31530e 100644
--- a/website/src/components/components/explorer/ComponentsGridItem.tsx
+++ b/website/src/components/components/explorer/ComponentsGridItem.tsx
@@ -4,7 +4,7 @@ import styled, { useTheme } from 'styled-components'
import media from '../../../theming/mediaQueries'
import { ChartNavData } from '../../../types'
-export const ComponentsGridItem = memo(({ name, id, flavors, tags }: ChartNavData) => {
+export const ComponentsGridItem = memo(({ name, id, flavors }: ChartNavData) => {
const theme = useTheme()
const handleVariantClick = useCallback((event: MouseEvent) => {
@@ -16,13 +16,6 @@ export const ComponentsGridItem = memo(({ name, id, flavors, tags }: ChartNavDat
{name}
- {/*tags.length > 0 && (
-
- {tags.map(tag => (
- {tag}
- ))}
-
- )*/}
SVG
{flavors.html && (
@@ -133,25 +126,3 @@ const Flavor = styled(Link)`
color: ${({ theme }) => theme.colors.accent};
}
`
-
-const Tags = styled.div`
- font-size: 0.9rem;
- color: ${({ theme }) => theme.colors.textLight};
- line-height: 1em;
- margin-top: 4px;
- display: flex;
- flex-wrap: wrap;
-`
-
-const Tag = styled.span`
- display: inline-block;
- margin-right: 6px;
- margin-bottom: 6px;
- border-left: 1px solid ${({ theme }) => theme.colors.accent};
- padding-left: 7px;
-
- &:first-child {
- padding-left: 0;
- border-left: none;
- }
-`
diff --git a/website/src/components/guides/theming/props.ts b/website/src/components/guides/theming/props.ts
index 9d696d51f8..f6cbb928e0 100644
--- a/website/src/components/guides/theming/props.ts
+++ b/website/src/components/guides/theming/props.ts
@@ -1,5 +1,7 @@
import { ChartPropertiesGroup, ChartProperty } from '../../../types'
+// expands all object properties by default if true,
+// this can be useful for debugging.
const OPEN_ALL_BY_DEFAULTS = false
const fontSizeProp: ChartProperty = {
diff --git a/website/src/components/icons/AreaBumpIcon.js b/website/src/components/icons/AreaBumpIcon.tsx
similarity index 72%
rename from website/src/components/icons/AreaBumpIcon.js
rename to website/src/components/icons/AreaBumpIcon.tsx
index 55a7068c2b..5b81383717 100644
--- a/website/src/components/icons/AreaBumpIcon.js
+++ b/website/src/components/icons/AreaBumpIcon.tsx
@@ -1,12 +1,14 @@
-import React from 'react'
-import { AreaBump } from '@nivo/bump'
+import React, { useMemo } from 'react'
+import { Theme } from '@nivo/core'
+import { AreaBump, AreaBumpSvgProps, AreaBumpSerieExtraProps } from '@nivo/bump'
import areaBumpLightNeutralImg from '../../assets/icons/area-bump-light-neutral.png'
import areaBumpLightColoredImg from '../../assets/icons/area-bump-light-colored.png'
import areaBumpDarkNeutralImg from '../../assets/icons/area-bump-dark-neutral.png'
import areaBumpDarkColoredImg from '../../assets/icons/area-bump-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+const chartProps: AreaBumpSvgProps<{ x: number; y: number }, AreaBumpSerieExtraProps> = {
width: ICON_SIZE,
height: ICON_SIZE,
data: [
@@ -99,37 +101,40 @@ const chartProps = {
axisTop: null,
axisBottom: null,
enableGridX: false,
- isInteractive: true,
+ isInteractive: false,
}
-const AreaBumpIconItem = ({ type }) => (
-
- {
+ const theme: Theme = useMemo(
+ () => ({
+ axis: {
+ domain: {
line: {
- strokeWidth: 2,
- strokeOpacity: 0.5,
- stroke: colors[type].colors[1],
+ stroke: colors[type].colors[3],
+ strokeWidth: 3,
+ strokeLinecap: 'square',
},
},
- }}
- />
-
-)
+ },
+ grid: {
+ line: {
+ strokeWidth: 2,
+ strokeOpacity: 0.5,
+ stroke: colors[type].colors[1],
+ },
+ },
+ }),
+ []
+ )
-const AreaBumpIcon = () => (
+ return (
+
+
+
+ )
+}
+
+export const AreaBumpIcon = () => (
<>
@@ -141,5 +146,3 @@ const AreaBumpIcon = () => (
>
)
-
-export default AreaBumpIcon
diff --git a/website/src/components/icons/BarIcon.js b/website/src/components/icons/BarIcon.tsx
similarity index 67%
rename from website/src/components/icons/BarIcon.js
rename to website/src/components/icons/BarIcon.tsx
index ce774c4967..86199e6c01 100644
--- a/website/src/components/icons/BarIcon.js
+++ b/website/src/components/icons/BarIcon.tsx
@@ -1,12 +1,20 @@
-import React from 'react'
-import { Bar } from '@nivo/bar'
+import React, { useMemo } from 'react'
+import { Bar, BarSvgProps } from '@nivo/bar'
import barLightNeutralImg from '../../assets/icons/bar-light-neutral.png'
import barLightColoredImg from '../../assets/icons/bar-light-colored.png'
import barDarkNeutralImg from '../../assets/icons/bar-dark-neutral.png'
import barDarkColoredImg from '../../assets/icons/bar-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+type Datum = {
+ id: string
+ A: number
+ B: number
+ C: number
+}
+
+const chartProps: BarSvgProps = {
width: ICON_SIZE,
height: ICON_SIZE,
indexBy: 'id',
@@ -31,16 +39,20 @@ const chartProps = {
isInteractive: false,
}
-const BarIconItem = ({ type }) => (
-
-
-
-)
+const BarIconItem = ({ type }: { type: IconType }) => {
+ const typedColors = useMemo(
+ () => [colors[type].colors[1], colors[type].colors[2], colors[type].colors[4]],
+ [type]
+ )
-const BarIcon = () => (
+ return (
+
+ {...chartProps} colors={typedColors} />
+
+ )
+}
+
+export const BarIcon = () => (
<>
@@ -52,5 +64,3 @@ const BarIcon = () => (
>
)
-
-export default BarIcon
diff --git a/website/src/components/icons/BulletIcon.js b/website/src/components/icons/BulletIcon.tsx
similarity index 67%
rename from website/src/components/icons/BulletIcon.js
rename to website/src/components/icons/BulletIcon.tsx
index c5716901ec..d352194acb 100644
--- a/website/src/components/icons/BulletIcon.js
+++ b/website/src/components/icons/BulletIcon.tsx
@@ -1,12 +1,13 @@
import React from 'react'
-import { Bullet } from '@nivo/bullet'
+import { Bullet, BulletSvgProps, BulletRectsItemProps, BulletMarkersItemProps } from '@nivo/bullet'
import bulletLightNeutralImg from '../../assets/icons/bullet-light-neutral.png'
import bulletLightColoredImg from '../../assets/icons/bullet-light-colored.png'
import bulletDarkNeutralImg from '../../assets/icons/bullet-dark-neutral.png'
import bulletDarkColoredImg from '../../assets/icons/bullet-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+const chartProps: BulletSvgProps = {
width: ICON_SIZE,
height: ICON_SIZE,
data: [
@@ -51,19 +52,27 @@ const chartProps = {
},
}
-const Range = colors => d => {
- const color = d.data.v1 === 100 ? colors[1] : colors[0]
+const Range = (colors: [string, string]) => (rect: BulletRectsItemProps) => {
+ const color = rect.data.v1 === 100 ? colors[1] : colors[0]
- return
+ return
}
-const Measure = color => d =>
-
+const Measure = (color: string) => (rect: BulletRectsItemProps) =>
+
-const Marker = color => d =>
-
+const Marker = (color: string) => (marker: BulletMarkersItemProps) =>
+ (
+
+ )
-const BulletIconItem = ({ type }) => (
+const BulletIconItem = ({ type }: { type: IconType }) => (
(
)
-const BulletIcon = () => (
+export const BulletIcon = () => (
<>
@@ -86,5 +95,3 @@ const BulletIcon = () => (
>
)
-
-export default BulletIcon
diff --git a/website/src/components/icons/BumpIcon.js b/website/src/components/icons/BumpIcon.tsx
similarity index 67%
rename from website/src/components/icons/BumpIcon.js
rename to website/src/components/icons/BumpIcon.tsx
index 506ba1b564..0c9ea59253 100644
--- a/website/src/components/icons/BumpIcon.js
+++ b/website/src/components/icons/BumpIcon.tsx
@@ -1,12 +1,19 @@
-import React from 'react'
-import { Bump } from '@nivo/bump'
+import React, { useMemo } from 'react'
+import { Theme } from '@nivo/core'
+import { Bump, BumpSvgProps, BumpSerieExtraProps } from '@nivo/bump'
import bumpLightNeutralImg from '../../assets/icons/bump-light-neutral.png'
import bumpLightColoredImg from '../../assets/icons/bump-light-colored.png'
import bumpDarkNeutralImg from '../../assets/icons/bump-dark-neutral.png'
import bumpDarkColoredImg from '../../assets/icons/bump-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+type Datum = {
+ x: number
+ y: number
+}
+
+const chartProps: BumpSvgProps = {
width: ICON_SIZE,
height: ICON_SIZE,
data: [
@@ -86,34 +93,40 @@ const chartProps = {
isInteractive: false,
}
-const BumpIconItem = ({ type }) => (
-
- {
+ const theme: Theme = useMemo(
+ () => ({
+ axis: {
+ domain: {
line: {
- strokeWidth: 2,
- strokeOpacity: 0.5,
- stroke: colors[type].colors[1],
+ stroke: colors[type].colors[3],
+ strokeWidth: 3,
+ strokeLinecap: 'square',
},
},
- }}
- />
-
-)
+ },
+ grid: {
+ line: {
+ strokeWidth: 2,
+ strokeOpacity: 0.5,
+ stroke: colors[type].colors[1],
+ },
+ },
+ }),
+ [type]
+ )
+ return (
+
+
+ {...chartProps}
+ colors={colors[type].colors}
+ theme={theme}
+ />
+
+ )
+}
-const BumpIcon = () => (
+export const BumpIcon = () => (
<>
@@ -125,5 +138,3 @@ const BumpIcon = () => (
>
)
-
-export default BumpIcon
diff --git a/website/src/components/icons/CalendarIcon.js b/website/src/components/icons/CalendarIcon.tsx
similarity index 92%
rename from website/src/components/icons/CalendarIcon.js
rename to website/src/components/icons/CalendarIcon.tsx
index 02bc09173e..037e252f15 100644
--- a/website/src/components/icons/CalendarIcon.js
+++ b/website/src/components/icons/CalendarIcon.tsx
@@ -5,6 +5,7 @@ import calendarLightColoredImg from '../../assets/icons/calendar-light-colored.p
import calendarDarkNeutralImg from '../../assets/icons/calendar-dark-neutral.png'
import calendarDarkColoredImg from '../../assets/icons/calendar-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
const padding = 12
const cellSize = (ICON_SIZE - padding * 2) / 5
@@ -12,9 +13,12 @@ const cellSize = (ICON_SIZE - padding * 2) / 5
const generateCells = () => {
let row = 0
let column = 0
- const cells = []
+ const cells: {
+ x: number
+ y: number
+ }[] = []
- range(25).map(i => {
+ range(25).map(_ => {
cells.push({
x: column,
y: row,
@@ -33,7 +37,7 @@ const generateCells = () => {
const cells = generateCells()
-const CalendarIconItem = ({ type }) => (
+const CalendarIconItem = ({ type }: { type: IconType }) => (
)
-const CalendarIcon = () => (
+export const CalendarIcon = () => (
<>
@@ -86,5 +90,3 @@ const CalendarIcon = () => (
>
)
-
-export default CalendarIcon
diff --git a/website/src/components/icons/ChoroplethIcon.js b/website/src/components/icons/ChoroplethIcon.tsx
similarity index 90%
rename from website/src/components/icons/ChoroplethIcon.js
rename to website/src/components/icons/ChoroplethIcon.tsx
index babc9f3e9b..b1a6044fdf 100644
--- a/website/src/components/icons/ChoroplethIcon.js
+++ b/website/src/components/icons/ChoroplethIcon.tsx
@@ -4,9 +4,10 @@ import choroplethLightColoredImg from '../../assets/icons/choropleth-light-color
import choroplethDarkNeutralImg from '../../assets/icons/choropleth-dark-neutral.png'
import choroplethDarkColoredImg from '../../assets/icons/choropleth-dark-colored.png'
import { Icon, colors, IconImg } from './styled'
-import MapIcon from './MapIcon'
+import { MapIcon } from './MapIcon'
+import { IconType } from './types'
-const ChoroplethIconItem = ({ type }) => (
+const ChoroplethIconItem = ({ type }: { type: IconType }) => (
(
)
-const ChoroplethIcon = () => (
+export const ChoroplethIcon = () => (
<>
@@ -42,5 +43,3 @@ const ChoroplethIcon = () => (
>
)
-
-export default ChoroplethIcon
diff --git a/website/src/components/icons/CirclePackingIcon.js b/website/src/components/icons/CirclePackingIcon.js
deleted file mode 100644
index eb01c4d247..0000000000
--- a/website/src/components/icons/CirclePackingIcon.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react'
-import { CirclePacking } from '@nivo/circle-packing'
-import circlePackingLightNeutralImg from '../../assets/icons/circle-packing-light-neutral.png'
-import circlePackingLightColoredImg from '../../assets/icons/circle-packing-light-colored.png'
-import circlePackingDarkNeutralImg from '../../assets/icons/circle-packing-dark-neutral.png'
-import circlePackingDarkColoredImg from '../../assets/icons/circle-packing-dark-colored.png'
-import { ICON_SIZE, Icon, colors, IconImg } from './styled'
-
-const chartProps = colors => ({
- width: ICON_SIZE,
- height: ICON_SIZE,
- data: {
- id: 'root',
- children: [
- { id: 'v', value: 0.1, color: colors[1] },
- { id: 'a', value: 3.4, color: colors[1] },
- { id: 'b', value: 2.6, color: colors[1] },
- { id: 'd', value: 1, color: colors[1] },
- { id: 'u', value: 0.1, color: colors[1] },
- { id: 'c', value: 0.1, color: colors[1] },
- { id: 'q', value: 0.7, color: colors[1] },
- { id: 's', value: 2, color: colors[1] },
- { id: 't', value: 0.1, color: colors[1] },
- { id: 'j', value: 0.2, color: colors[1] },
- { id: 'l', value: 0.7, color: colors[1] },
- { id: 'k', value: 2.6, color: colors[1] },
- { id: 'h', value: 0.4, color: colors[0] },
- { id: 'w', value: 0.1, color: colors[0] },
- { id: 'x', value: 1, color: colors[1] },
- { id: 'y', value: 0.1, color: colors[0] },
- { id: 'g', value: 0.4, color: colors[1] },
- { id: 'z', value: 0.1, color: colors[1] },
- { id: 'e', value: 1, color: colors[0] },
- { id: 'f', value: 1, color: colors[0] },
- { id: 'n', value: 0.4, color: colors[0] },
- { id: 'o', value: 0.2, color: colors[0] },
- { id: 'p', value: 0.4, color: colors[0] },
- { id: 'i', value: 0.2, color: colors[0] },
- { id: 'm', value: 0.2, color: colors[0] },
- ],
- },
- colors: { datum: 'data.color' },
- childColor: 'noinherit',
- padding: 2,
- enableLabels: false,
- leavesOnly: true,
- isInteractive: false,
-})
-
-const CirclePackingIconItem = ({ type }) => (
-
-
-
-)
-
-const CirclePackingIcon = () => (
- <>
-
-
-
-
-
-
-
-
- >
-)
-
-export default CirclePackingIcon
diff --git a/website/src/components/icons/CirclePackingIcon.tsx b/website/src/components/icons/CirclePackingIcon.tsx
new file mode 100644
index 0000000000..dc4425c5dc
--- /dev/null
+++ b/website/src/components/icons/CirclePackingIcon.tsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import { CirclePacking, CirclePackingSvgProps } from '@nivo/circle-packing'
+import circlePackingLightNeutralImg from '../../assets/icons/circle-packing-light-neutral.png'
+import circlePackingLightColoredImg from '../../assets/icons/circle-packing-light-colored.png'
+import circlePackingDarkNeutralImg from '../../assets/icons/circle-packing-dark-neutral.png'
+import circlePackingDarkColoredImg from '../../assets/icons/circle-packing-dark-colored.png'
+import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
+
+type Datum = {
+ id: string
+ value?: number
+ color?: string
+ children?: Datum[]
+}
+
+const chartProps = (colors: string[]) =>
+ ({
+ width: ICON_SIZE,
+ height: ICON_SIZE,
+ data: {
+ id: 'root',
+ children: [
+ { id: 'v', value: 0.1, color: colors[1] },
+ { id: 'a', value: 3.4, color: colors[1] },
+ { id: 'b', value: 2.6, color: colors[1] },
+ { id: 'd', value: 1, color: colors[1] },
+ { id: 'u', value: 0.1, color: colors[1] },
+ { id: 'c', value: 0.1, color: colors[1] },
+ { id: 'q', value: 0.7, color: colors[1] },
+ { id: 's', value: 2, color: colors[1] },
+ { id: 't', value: 0.1, color: colors[1] },
+ { id: 'j', value: 0.2, color: colors[1] },
+ { id: 'l', value: 0.7, color: colors[1] },
+ { id: 'k', value: 2.6, color: colors[1] },
+ { id: 'h', value: 0.4, color: colors[0] },
+ { id: 'w', value: 0.1, color: colors[0] },
+ { id: 'x', value: 1, color: colors[1] },
+ { id: 'y', value: 0.1, color: colors[0] },
+ { id: 'g', value: 0.4, color: colors[1] },
+ { id: 'z', value: 0.1, color: colors[1] },
+ { id: 'e', value: 1, color: colors[0] },
+ { id: 'f', value: 1, color: colors[0] },
+ { id: 'n', value: 0.4, color: colors[0] },
+ { id: 'o', value: 0.2, color: colors[0] },
+ { id: 'p', value: 0.4, color: colors[0] },
+ { id: 'i', value: 0.2, color: colors[0] },
+ { id: 'm', value: 0.2, color: colors[0] },
+ ],
+ },
+ colors: { datum: 'data.color' },
+ childColor: 'noinherit',
+ padding: 2,
+ enableLabels: false,
+ leavesOnly: true,
+ isInteractive: false,
+ } as CirclePackingSvgProps)
+
+const CirclePackingIconItem = ({ type }: { type: IconType }) => (
+
+ {...chartProps([colors[type].colors[1], colors[type].colors[4]])} />
+
+)
+
+export const CirclePackingIcon = () => (
+ <>
+
+
+
+
+
+
+
+
+ >
+)
diff --git a/website/src/components/icons/CodeIcon.js b/website/src/components/icons/CodeIcon.tsx
similarity index 92%
rename from website/src/components/icons/CodeIcon.js
rename to website/src/components/icons/CodeIcon.tsx
index 550f79e8d2..9584479a7c 100644
--- a/website/src/components/icons/CodeIcon.js
+++ b/website/src/components/icons/CodeIcon.tsx
@@ -4,8 +4,9 @@ import codeLightColoredImg from '../../assets/icons/code-light-colored.png'
import codeDarkNeutralImg from '../../assets/icons/data-dark-neutral.png'
import codeDarkColoredImg from '../../assets/icons/data-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const CodeIconItem = ({ type }) => (
+export const CodeIconItem = ({ type }: { type: IconType }) => (
)
-const CodeIcon = () => (
+export const CodeIcon = () => (
<>
@@ -40,5 +41,3 @@ const CodeIcon = () => (
>
)
-
-export default CodeIcon
diff --git a/website/src/components/icons/DataIcon.js b/website/src/components/icons/DataIcon.tsx
similarity index 92%
rename from website/src/components/icons/DataIcon.js
rename to website/src/components/icons/DataIcon.tsx
index 8afbeb5ca9..0366f997f8 100644
--- a/website/src/components/icons/DataIcon.js
+++ b/website/src/components/icons/DataIcon.tsx
@@ -4,8 +4,9 @@ import dataLightColoredImg from '../../assets/icons/data-light-colored.png'
import dataDarkNeutralImg from '../../assets/icons/data-dark-neutral.png'
import dataDarkColoredImg from '../../assets/icons/data-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const DataIconItem = ({ type }) => (
+const DataIconItem = ({ type }: { type: IconType }) => (
)
-const DataIcon = () => (
+export const DataIcon = () => (
<>
@@ -41,5 +42,3 @@ const DataIcon = () => (
>
)
-
-export default DataIcon
diff --git a/website/src/components/icons/FunnelIcon.js b/website/src/components/icons/FunnelIcon.tsx
similarity index 71%
rename from website/src/components/icons/FunnelIcon.js
rename to website/src/components/icons/FunnelIcon.tsx
index 12c6df6247..d063c6f8df 100644
--- a/website/src/components/icons/FunnelIcon.js
+++ b/website/src/components/icons/FunnelIcon.tsx
@@ -1,12 +1,19 @@
-import React from 'react'
-import { Funnel } from '@nivo/funnel'
+import React, { useMemo } from 'react'
+import { Theme } from '@nivo/core'
+import { Funnel, FunnelSvgProps } from '@nivo/funnel'
import funnelLightNeutralImg from '../../assets/icons/funnel-light-neutral.png'
import funnelLightColoredImg from '../../assets/icons/funnel-light-colored.png'
import funnelDarkNeutralImg from '../../assets/icons/funnel-dark-neutral.png'
import funnelDarkColoredImg from '../../assets/icons/funnel-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+type Datum = {
+ id: string
+ value: number
+}
+
+const chartProps: FunnelSvgProps = {
width: ICON_SIZE,
height: ICON_SIZE,
data: [
@@ -40,28 +47,33 @@ const chartProps = {
afterSeparatorLength: 0,
}
-const FunnelIconItem = ({ type }) => {
+const FunnelIconItem = ({ type }: { type: IconType }) => {
const currentColors = colors[type].colors
+ const theme: Theme = useMemo(
+ () => ({
+ grid: {
+ line: {
+ stroke: currentColors[1],
+ strokeWidth: 2,
+ },
+ },
+ }),
+ [type]
+ )
+
return (
-
{...chartProps}
colors={[currentColors[4], currentColors[2], currentColors[1]]}
- theme={{
- grid: {
- line: {
- stroke: currentColors[1],
- strokeWidth: 2,
- },
- },
- }}
+ theme={theme}
/>
)
}
-const FunnelIcon = () => (
+export const FunnelIcon = () => (
<>
@@ -73,5 +85,3 @@ const FunnelIcon = () => (
>
)
-
-export default FunnelIcon
diff --git a/website/src/components/icons/GeoMapIcon.js b/website/src/components/icons/GeoMapIcon.tsx
similarity index 84%
rename from website/src/components/icons/GeoMapIcon.js
rename to website/src/components/icons/GeoMapIcon.tsx
index 6285f0b95d..65ab533d9c 100644
--- a/website/src/components/icons/GeoMapIcon.js
+++ b/website/src/components/icons/GeoMapIcon.tsx
@@ -4,15 +4,16 @@ import geomapLightColoredImg from '../../assets/icons/geomap-light-colored.png'
import geomapDarkNeutralImg from '../../assets/icons/geomap-dark-neutral.png'
import geomapDarkColoredImg from '../../assets/icons/geomap-dark-colored.png'
import { Icon, colors, IconImg } from './styled'
-import MapIcon from './MapIcon'
+import { MapIcon } from './MapIcon'
+import { IconType } from './types'
-const GeoMapIconItem = ({ type }) => (
+const GeoMapIconItem = ({ type }: { type: IconType }) => (
)
-const GeoMapIcon = () => (
+export const GeoMapIcon = () => (
<>
@@ -24,5 +25,3 @@ const GeoMapIcon = () => (
>
)
-
-export default GeoMapIcon
diff --git a/website/src/components/icons/HeatMapIcon.js b/website/src/components/icons/HeatMapIcon.js
deleted file mode 100644
index d4b7ad1cf5..0000000000
--- a/website/src/components/icons/HeatMapIcon.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react'
-import { HeatMap } from '@nivo/heatmap'
-import heatmapLightNeutralImg from '../../assets/icons/heatmap-light-neutral.png'
-import heatmapLightColoredImg from '../../assets/icons/heatmap-light-colored.png'
-import heatmapDarkNeutralImg from '../../assets/icons/heatmap-dark-neutral.png'
-import heatmapDarkColoredImg from '../../assets/icons/heatmap-dark-colored.png'
-import { ICON_SIZE, Icon, colors, IconImg } from './styled'
-
-const chartProps = {
- width: ICON_SIZE,
- height: ICON_SIZE,
- indexBy: 'id',
- keys: ['A', 'B', 'C'],
- data: [
- { id: '0', A: 4, B: 3, C: 2 },
- { id: '1', A: 3, B: 2, C: 1 },
- { id: '2', A: 2, B: 1, C: 0 },
- ],
- margin: {
- top: 8,
- right: 8,
- bottom: 8,
- left: 8,
- },
- axisTop: null,
- axisLeft: null,
- enableLabels: false,
- padding: 4,
- cellOpacity: 1,
- isInteractive: false,
-}
-
-const HeatMapIconItem = ({ type }) => (
-
-
-
-)
-
-const HeatMapIcon = () => (
- <>
-
-
-
-
-
-
-
-
- >
-)
-
-export default HeatMapIcon
diff --git a/website/src/components/icons/HeatMapIcon.tsx b/website/src/components/icons/HeatMapIcon.tsx
new file mode 100644
index 0000000000..0cdbdf8b08
--- /dev/null
+++ b/website/src/components/icons/HeatMapIcon.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { HeatMap, HeatMapSvgProps } from '@nivo/heatmap'
+import heatmapLightNeutralImg from '../../assets/icons/heatmap-light-neutral.png'
+import heatmapLightColoredImg from '../../assets/icons/heatmap-light-colored.png'
+import heatmapDarkNeutralImg from '../../assets/icons/heatmap-dark-neutral.png'
+import heatmapDarkColoredImg from '../../assets/icons/heatmap-dark-colored.png'
+import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
+
+type Datum = {
+ x: string
+ y: number
+}
+
+const chartProps: HeatMapSvgProps> = {
+ width: ICON_SIZE,
+ height: ICON_SIZE,
+ data: [
+ {
+ id: '0',
+ data: [
+ { x: 'A', y: 4 },
+ { x: 'B', y: 3 },
+ { x: 'C', y: 2 },
+ ],
+ },
+ {
+ id: '1',
+ data: [
+ { x: 'A', y: 3 },
+ { x: 'B', y: 2 },
+ { x: 'C', y: 1 },
+ ],
+ },
+ {
+ id: '2',
+ data: [
+ { x: 'A', y: 2 },
+ { x: 'B', y: 1 },
+ { x: 'C', y: 0 },
+ ],
+ },
+ ],
+ margin: {
+ top: 8,
+ right: 8,
+ bottom: 8,
+ left: 8,
+ },
+ axisTop: null,
+ axisLeft: null,
+ enableLabels: false,
+ xOuterPadding: 0.14,
+ xInnerPadding: 0.14,
+ yOuterPadding: 0.14,
+ yInnerPadding: 0.14,
+ isInteractive: false,
+ animate: false,
+}
+
+const HeatMapIconItem = ({ type }: { type: IconType }) => (
+
+ >
+ {...chartProps}
+ colors={{
+ type: 'quantize',
+ colors: colors[type].colors,
+ }}
+ />
+
+)
+
+export const HeatMapIcon = () => (
+ <>
+
+
+
+
+
+
+
+
+ >
+)
diff --git a/website/src/components/icons/Icons.js b/website/src/components/icons/Icons.tsx
similarity index 61%
rename from website/src/components/icons/Icons.js
rename to website/src/components/icons/Icons.tsx
index d5e20c4b75..936a3559ce 100644
--- a/website/src/components/icons/Icons.js
+++ b/website/src/components/icons/Icons.tsx
@@ -1,37 +1,38 @@
import React, { Fragment } from 'react'
import { Container } from './styled'
-import AreaBumpIcon from './AreaBumpIcon'
-import BarIcon from './BarIcon'
-import BulletIcon from './BulletIcon'
-import BumpIcon from './BumpIcon'
-import CalendarIcon from './CalendarIcon'
-import ChoroplethIcon from './ChoroplethIcon'
+import { AreaBumpIcon } from './AreaBumpIcon'
+import { BarIcon } from './BarIcon'
+import { BulletIcon } from './BulletIcon'
+import { BumpIcon } from './BumpIcon'
+import { CalendarIcon } from './CalendarIcon'
import { ChordIcon } from './ChordIcon'
-import CirclePackingIcon from './CirclePackingIcon'
-import CodeIcon from './CodeIcon'
-import DataIcon from './DataIcon'
-import FunnelIcon from './FunnelIcon'
-import GeoMapIcon from './GeoMapIcon'
-import HeatMapIcon from './HeatMapIcon'
-import LineIcon from './LineIcon'
-import MarimekkoIcon from './MarimekkoIcon'
+import { ChoroplethIcon } from './ChoroplethIcon'
+import { CirclePackingIcon } from './CirclePackingIcon'
+import { CodeIcon } from './CodeIcon'
+import { DataIcon } from './DataIcon'
+import { FunnelIcon } from './FunnelIcon'
+import { GeoMapIcon } from './GeoMapIcon'
+import { HeatMapIcon } from './HeatMapIcon'
+import { LineIcon } from './LineIcon'
+import { MarimekkoIcon } from './MarimekkoIcon'
import { NetworkIcon } from './NetworkIcon'
-import PieIcon from './PieIcon'
-import RadarIcon from './RadarIcon'
+import { ParallelCoordinatesIcon } from './ParallelCoordinatesIcon'
+import { PieIcon } from './PieIcon'
+import { RadarIcon } from './RadarIcon'
import { RadialBarIcon } from './RadialBarIcon'
-import SankeyIcon from './SankeyIcon'
-import ScatterPlotIcon from './ScatterPlotIcon'
-import StreamIcon from './StreamIcon'
-import SunburstIcon from './SunburstIcon'
-import SwarmPlotIcon from './SwarmPlotIcon'
-import TimeRangeIcon from './TimeRangeIcon'
+import { SankeyIcon } from './SankeyIcon'
+import { ScatterPlotIcon } from './ScatterPlotIcon'
+import { StreamIcon } from './StreamIcon'
+import { SunburstIcon } from './SunburstIcon'
+import { SwarmPlotIcon } from './SwarmPlotIcon'
+import { TimeRangeIcon } from './TimeRangeIcon'
import { TreeMapIcon } from './TreeMapIcon'
-import WaffleIcon from './WaffleIcon'
-import ParallelCoordinatesIcon from './ParallelCoordinatesIcon'
-import VoronoiIcon from './VoronoiIcon'
+import { VoronoiIcon } from './VoronoiIcon'
+import { WaffleIcon } from './WaffleIcon'
import { colors, Icon, Colors } from './styled'
+import { IconType } from './types'
-const ColorsDemo = ({ type }) => {
+const ColorsDemo = ({ type }: { type: IconType }) => {
return (
@@ -56,32 +57,32 @@ const ColorsDemo = ({ type }) => {
)
}
-const Icons = () => (
+export const Icons = () => (
-
-
-
-
-
-
+
-
-
-
+
+
+
+
+
+
+
+
@@ -93,5 +94,3 @@ const Icons = () => (
)
-
-export default Icons
diff --git a/website/src/components/icons/LineIcon.js b/website/src/components/icons/LineIcon.tsx
similarity index 66%
rename from website/src/components/icons/LineIcon.js
rename to website/src/components/icons/LineIcon.tsx
index 2ec27ff79a..6b82cafb4a 100644
--- a/website/src/components/icons/LineIcon.js
+++ b/website/src/components/icons/LineIcon.tsx
@@ -1,12 +1,17 @@
-import React from 'react'
-import { Line } from '@nivo/line'
+import React, { useMemo } from 'react'
+import { Theme } from '@nivo/core'
+import { Line, LineSvgProps } from '@nivo/line'
import lineLightNeutralImg from '../../assets/icons/line-light-neutral.png'
import lineLightColoredImg from '../../assets/icons/line-light-colored.png'
import lineDarkNeutralImg from '../../assets/icons/line-dark-neutral.png'
import lineDarkColoredImg from '../../assets/icons/line-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+const chartProps: LineSvgProps & {
+ width: number
+ height: number
+} = {
width: ICON_SIZE,
height: ICON_SIZE,
margin: {
@@ -57,27 +62,34 @@ const chartProps = {
},
}
-const LineIconItem = ({ type }) => (
-
- {
+ const theme: Theme = useMemo(
+ () => ({
+ axis: {
+ domain: {
+ line: {
+ stroke: colors[type].colors[3],
+ strokeWidth: 3,
+ strokeLinecap: 'square',
},
},
- }}
- />
-
-)
+ },
+ }),
+ [type]
+ )
+
+ return (
+
+
+
+ )
+}
-const LineIcon = () => (
+export const LineIcon = () => (
<>
@@ -89,5 +101,3 @@ const LineIcon = () => (
>
)
-
-export default LineIcon
diff --git a/website/src/components/icons/MapIcon.js b/website/src/components/icons/MapIcon.tsx
similarity index 95%
rename from website/src/components/icons/MapIcon.js
rename to website/src/components/icons/MapIcon.tsx
index 895a95f250..11c6cd7028 100644
--- a/website/src/components/icons/MapIcon.js
+++ b/website/src/components/icons/MapIcon.tsx
@@ -30,7 +30,15 @@ const rects = [
[size * 0.6, size * 0.7, size * 0.4, size * 0.3],
]
-const MapIcon = ({ stroke, fill, colors = [] }) => {
+export const MapIcon = ({
+ stroke,
+ fill,
+ colors = [],
+}: {
+ stroke: string
+ fill: string
+ colors?: string[]
+}) => {
return (
)
}
-
-export default MapIcon
diff --git a/website/src/components/icons/MarimekkoIcon.js b/website/src/components/icons/MarimekkoIcon.tsx
similarity index 82%
rename from website/src/components/icons/MarimekkoIcon.js
rename to website/src/components/icons/MarimekkoIcon.tsx
index 78a714c713..99866d5ed0 100644
--- a/website/src/components/icons/MarimekkoIcon.js
+++ b/website/src/components/icons/MarimekkoIcon.tsx
@@ -1,12 +1,21 @@
import React from 'react'
-import { Marimekko } from '@nivo/marimekko'
+import { Marimekko, SvgProps } from '@nivo/marimekko'
import marimekkoLightNeutralImg from '../../assets/icons/marimekko-light-neutral.png'
import marimekkoLightColoredImg from '../../assets/icons/marimekko-light-colored.png'
import marimekkoDarkNeutralImg from '../../assets/icons/marimekko-dark-neutral.png'
import marimekkoDarkColoredImg from '../../assets/icons/marimekko-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+type Datum = {
+ id: string
+ value: number
+ A: number
+ B: number
+ C: number
+}
+
+const chartProps: SvgProps = {
width: ICON_SIZE,
height: ICON_SIZE,
id: 'id',
@@ -33,16 +42,16 @@ const chartProps = {
animate: false,
}
-const MarimekkoIconItem = ({ type }) => (
+const MarimekkoIconItem = ({ type }: { type: IconType }) => (
-
{...chartProps}
colors={[colors[type].colors[1], colors[type].colors[2], colors[type].colors[4]]}
/>
)
-const BarIcon = () => (
+export const MarimekkoIcon = () => (
<>
@@ -54,5 +63,3 @@ const BarIcon = () => (
>
)
-
-export default BarIcon
diff --git a/website/src/components/icons/ParallelCoordinatesIcon.js b/website/src/components/icons/ParallelCoordinatesIcon.tsx
similarity index 92%
rename from website/src/components/icons/ParallelCoordinatesIcon.js
rename to website/src/components/icons/ParallelCoordinatesIcon.tsx
index 76d77f1c91..8c43405206 100644
--- a/website/src/components/icons/ParallelCoordinatesIcon.js
+++ b/website/src/components/icons/ParallelCoordinatesIcon.tsx
@@ -1,12 +1,14 @@
import React from 'react'
+// @ts-ignore
import { ParallelCoordinates } from '@nivo/parallel-coordinates'
import parallelCoordinatesLightNeutralImg from '../../assets/icons/parallel-coordinates-light-neutral.png'
import parallelCoordinatesLightColoredImg from '../../assets/icons/parallel-coordinates-light-colored.png'
import parallelCoordinatesDarkNeutralImg from '../../assets/icons/parallel-coordinates-dark-neutral.png'
import parallelCoordinatesDarkColoredImg from '../../assets/icons/parallel-coordinates-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = (lineColor, axisColor) => ({
+const chartProps = (lineColor: string, axisColor: string) => ({
width: ICON_SIZE,
height: ICON_SIZE,
colors: [lineColor],
@@ -98,13 +100,13 @@ const chartProps = (lineColor, axisColor) => ({
animate: false,
})
-const ParallelCoordinatesIconItem = ({ type }) => (
+const ParallelCoordinatesIconItem = ({ type }: { type: IconType }) => (
)
-const ParallelCoordinatesIcon = () => (
+export const ParallelCoordinatesIcon = () => (
<>
@@ -116,5 +118,3 @@ const ParallelCoordinatesIcon = () => (
>
)
-
-export default ParallelCoordinatesIcon
diff --git a/website/src/components/icons/PieIcon.js b/website/src/components/icons/PieIcon.tsx
similarity index 82%
rename from website/src/components/icons/PieIcon.js
rename to website/src/components/icons/PieIcon.tsx
index 22b4bf6b0f..018bd787f6 100644
--- a/website/src/components/icons/PieIcon.js
+++ b/website/src/components/icons/PieIcon.tsx
@@ -1,12 +1,19 @@
import React from 'react'
-import { Pie } from '@nivo/pie'
+import { Pie, PieSvgProps } from '@nivo/pie'
import pieLightNeutralImg from '../../assets/icons/pie-light-neutral.png'
import pieLightColoredImg from '../../assets/icons/pie-light-colored.png'
import pieDarkNeutralImg from '../../assets/icons/pie-dark-neutral.png'
import pieDarkColoredImg from '../../assets/icons/pie-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+type Datum = {
+ id: string
+ label: string
+ value: number
+}
+
+const chartProps: PieSvgProps = {
width: ICON_SIZE,
height: ICON_SIZE,
data: [
@@ -27,16 +34,16 @@ const chartProps = {
isInteractive: false,
}
-const PieIconItem = ({ type }) => (
+const PieIconItem = ({ type }: { type: IconType }) => (
-
{...chartProps}
colors={[colors[type].colors[4], colors[type].colors[3], colors[type].colors[2]]}
/>
)
-const PieIcon = () => (
+export const PieIcon = () => (
<>
@@ -48,5 +55,3 @@ const PieIcon = () => (
>
)
-
-export default PieIcon
diff --git a/website/src/components/icons/RadarIcon.js b/website/src/components/icons/RadarIcon.tsx
similarity index 60%
rename from website/src/components/icons/RadarIcon.js
rename to website/src/components/icons/RadarIcon.tsx
index b754b39a97..ff7e9a344d 100644
--- a/website/src/components/icons/RadarIcon.js
+++ b/website/src/components/icons/RadarIcon.tsx
@@ -1,12 +1,21 @@
-import React from 'react'
-import { Radar } from '@nivo/radar'
+import React, { useMemo } from 'react'
+import { Theme } from '@nivo/core'
+import { Radar, RadarSvgProps } from '@nivo/radar'
import radarLightNeutralImg from '../../assets/icons/radar-light-neutral.png'
import radarLightColoredImg from '../../assets/icons/radar-light-colored.png'
import radarDarkNeutralImg from '../../assets/icons/radar-dark-neutral.png'
import radarDarkColoredImg from '../../assets/icons/radar-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+type Datum = {
+ id: string
+ A: number
+ B: number
+ C: number
+}
+
+const chartProps: RadarSvgProps = {
width: ICON_SIZE,
height: ICON_SIZE,
data: [
@@ -34,24 +43,31 @@ const chartProps = {
animate: false,
}
-const RadarIconItem = ({ type }) => (
-
- {
+ const theme: Theme = useMemo(
+ () => ({
+ grid: {
+ line: {
+ strokeWidth: 3,
+ stroke: colors[type].colors[3],
},
- }}
- />
-
-)
+ },
+ }),
+ [type]
+ )
-const RadarIcon = () => (
+ return (
+
+
+ {...chartProps}
+ colors={[colors[type].colors[4], colors[type].colors[2], colors[type].colors[0]]}
+ theme={theme}
+ />
+
+ )
+}
+
+export const RadarIcon = () => (
<>
@@ -63,5 +79,3 @@ const RadarIcon = () => (
>
)
-
-export default RadarIcon
diff --git a/website/src/components/icons/SankeyIcon.js b/website/src/components/icons/SankeyIcon.tsx
similarity index 57%
rename from website/src/components/icons/SankeyIcon.js
rename to website/src/components/icons/SankeyIcon.tsx
index db2aa09ea7..3c2639ce27 100644
--- a/website/src/components/icons/SankeyIcon.js
+++ b/website/src/components/icons/SankeyIcon.tsx
@@ -1,16 +1,17 @@
import React from 'react'
-import { sankeyLinkHorizontal } from 'd3-sankey'
+import { sankeyLinkHorizontal, SankeyLink } from 'd3-sankey'
import sankeyLightNeutralImg from '../../assets/icons/sankey-light-neutral.png'
import sankeyLightColoredImg from '../../assets/icons/sankey-light-colored.png'
import sankeyDarkNeutralImg from '../../assets/icons/sankey-dark-neutral.png'
import sankeyDarkColoredImg from '../../assets/icons/sankey-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
const nodeWidth = 6
const spacing = 2
const link = sankeyLinkHorizontal()
-const SankeyIconItem = ({ type }) => (
+const SankeyIconItem = ({ type }: { type: IconType }) => (
)
-const SankeyIcon = () => (
+export const SankeyIcon = () => (
<>
@@ -123,5 +132,3 @@ const SankeyIcon = () => (
>
)
-
-export default SankeyIcon
diff --git a/website/src/components/icons/ScatterPlotIcon.js b/website/src/components/icons/ScatterPlotIcon.tsx
similarity index 71%
rename from website/src/components/icons/ScatterPlotIcon.js
rename to website/src/components/icons/ScatterPlotIcon.tsx
index c123cd9acb..1c12d2a553 100644
--- a/website/src/components/icons/ScatterPlotIcon.js
+++ b/website/src/components/icons/ScatterPlotIcon.tsx
@@ -1,12 +1,19 @@
-import React from 'react'
-import { ScatterPlot } from '@nivo/scatterplot'
+import React, { useMemo } from 'react'
+import { Theme } from '@nivo/core'
+import { ScatterPlot, ScatterPlotSvgProps } from '@nivo/scatterplot'
import scatterPlotLightNeutralImg from '../../assets/icons/scatterplot-light-neutral.png'
import scatterPlotLightColoredImg from '../../assets/icons/scatterplot-light-colored.png'
import scatterPlotDarkNeutralImg from '../../assets/icons/scatterplot-dark-neutral.png'
import scatterPlotDarkColoredImg from '../../assets/icons/scatterplot-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+type Datum = {
+ x: number
+ y: number
+}
+
+const chartProps: ScatterPlotSvgProps = {
width: ICON_SIZE,
height: ICON_SIZE,
margin: {
@@ -79,27 +86,34 @@ const chartProps = {
},
}
-const ScatterPlotIconItem = ({ type }) => (
-
- {
+ const theme: Theme = useMemo(
+ () => ({
+ axis: {
+ domain: {
+ line: {
+ stroke: colors[type].colors[3],
+ strokeWidth: 3,
+ strokeLinecap: 'square',
},
},
- }}
- />
-
-)
+ },
+ }),
+ [type]
+ )
-const ScatterPlotIcon = () => (
+ return (
+
+
+
+ )
+}
+
+export const ScatterPlotIcon = () => (
<>
@@ -111,5 +125,3 @@ const ScatterPlotIcon = () => (
>
)
-
-export default ScatterPlotIcon
diff --git a/website/src/components/icons/StreamIcon.js b/website/src/components/icons/StreamIcon.tsx
similarity index 83%
rename from website/src/components/icons/StreamIcon.js
rename to website/src/components/icons/StreamIcon.tsx
index 061a546eb7..fa947f0650 100644
--- a/website/src/components/icons/StreamIcon.js
+++ b/website/src/components/icons/StreamIcon.tsx
@@ -1,12 +1,19 @@
import React from 'react'
-import { Stream } from '@nivo/stream'
+import { Stream, StreamSvgProps } from '@nivo/stream'
import streamLightNeutralImg from '../../assets/icons/stream-light-neutral.png'
import streamLightColoredImg from '../../assets/icons/stream-light-colored.png'
import streamDarkNeutralImg from '../../assets/icons/stream-dark-neutral.png'
import streamDarkColoredImg from '../../assets/icons/stream-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const chartProps = {
+type Datum = {
+ A: number
+ B: number
+ C: number
+}
+
+const chartProps: StreamSvgProps = {
width: ICON_SIZE,
height: ICON_SIZE,
keys: ['A', 'B', 'C'],
@@ -32,16 +39,16 @@ const chartProps = {
animate: false,
}
-const StreamIconItem = ({ type }) => (
+const StreamIconItem = ({ type }: { type: IconType }) => (
-
{...chartProps}
colors={[colors[type].colors[3], colors[type].colors[1], colors[type].colors[4]]}
/>
)
-const StreamIcon = () => (
+export const StreamIcon = () => (
<>
@@ -53,5 +60,3 @@ const StreamIcon = () => (
>
)
-
-export default StreamIcon
diff --git a/website/src/components/icons/SunburstIcon.js b/website/src/components/icons/SunburstIcon.js
deleted file mode 100644
index 6ea2c8d072..0000000000
--- a/website/src/components/icons/SunburstIcon.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react'
-import { arc as Arc } from 'd3-shape'
-import { degreesToRadians } from '@nivo/core'
-import sunburstLightNeutralImg from '../../assets/icons/sunburst-grey.png'
-import sunburstLightColoredImg from '../../assets/icons/sunburst-red.png'
-import sunburstDarkNeutralImg from '../../assets/icons/sunburst-dark-neutral.png'
-import sunburstDarkColoredImg from '../../assets/icons/sunburst-dark-colored.png'
-import { ICON_SIZE, Icon, colors, IconImg } from './styled'
-
-const arc = Arc().padAngle(degreesToRadians(2))
-
-const SunburstIconItem = ({ type }) => (
-
-
-
-)
-
-const BarIcon = () => (
- <>
-
-
-
-
-
-
-
-
- >
-)
-
-export default BarIcon
diff --git a/website/src/components/icons/SunburstIcon.tsx b/website/src/components/icons/SunburstIcon.tsx
new file mode 100644
index 0000000000..315db017ea
--- /dev/null
+++ b/website/src/components/icons/SunburstIcon.tsx
@@ -0,0 +1,132 @@
+import React from 'react'
+import { arc as Arc } from 'd3-shape'
+import { degreesToRadians } from '@nivo/core'
+import sunburstLightNeutralImg from '../../assets/icons/sunburst-grey.png'
+import sunburstLightColoredImg from '../../assets/icons/sunburst-red.png'
+import sunburstDarkNeutralImg from '../../assets/icons/sunburst-dark-neutral.png'
+import sunburstDarkColoredImg from '../../assets/icons/sunburst-dark-colored.png'
+import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
+
+const arc = Arc().padAngle(degreesToRadians(2))
+
+const SunburstIconItem = ({ type }: { type: IconType }) => (
+
+
+
+)
+
+export const SunburstIcon = () => (
+ <>
+
+
+
+
+
+
+
+
+ >
+)
diff --git a/website/src/components/icons/SwarmPlotIcon.js b/website/src/components/icons/SwarmPlotIcon.tsx
similarity index 81%
rename from website/src/components/icons/SwarmPlotIcon.js
rename to website/src/components/icons/SwarmPlotIcon.tsx
index fa72e2ecca..7985bbf2f3 100644
--- a/website/src/components/icons/SwarmPlotIcon.js
+++ b/website/src/components/icons/SwarmPlotIcon.tsx
@@ -1,15 +1,22 @@
import React from 'react'
-import { SwarmPlot } from '@nivo/swarmplot'
+import { SwarmPlot, SwarmPlotSvgProps } from '@nivo/swarmplot'
import swarmplotLightNeutralImg from '../../assets/icons/swarmplot-light-neutral.png'
import swarmplotLightColoredImg from '../../assets/icons/swarmplot-light-colored.png'
import swarmplotDarkNeutralImg from '../../assets/icons/swarmplot-dark-neutral.png'
import swarmplotDarkColoredImg from '../../assets/icons/swarmplot-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
const values = [
1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 5, 5, 6, 6, 6, 6, 6, 7, 7, 8, 9,
]
+type Datum = {
+ id: number
+ group: string
+ value: number
+}
+
const chartProps = {
width: ICON_SIZE,
height: ICON_SIZE,
@@ -43,15 +50,15 @@ const chartProps = {
spacing: 1,
isInteractive: false,
animate: true,
-}
+} as SwarmPlotSvgProps
-const SwarmPlotIconItem = ({ type }) => (
+const SwarmPlotIconItem = ({ type }: { type: IconType }) => (
-
+ {...chartProps} colors={[colors[type].colors[3]]} />
)
-const SwarmPlotIcon = () => (
+export const SwarmPlotIcon = () => (
<>
@@ -63,5 +70,3 @@ const SwarmPlotIcon = () => (
>
)
-
-export default SwarmPlotIcon
diff --git a/website/src/components/icons/TimeRangeIcon.js b/website/src/components/icons/TimeRangeIcon.tsx
similarity index 85%
rename from website/src/components/icons/TimeRangeIcon.js
rename to website/src/components/icons/TimeRangeIcon.tsx
index fc2ee1513e..89300b7617 100644
--- a/website/src/components/icons/TimeRangeIcon.js
+++ b/website/src/components/icons/TimeRangeIcon.tsx
@@ -1,12 +1,13 @@
import React from 'react'
-import { TimeRange } from '@nivo/calendar'
+import { TimeRange, TimeRangeSvgProps } from '@nivo/calendar'
import timeRangeLightNeutralImg from '../../assets/icons/time-range-light-neutral.png'
import timeRangeLightColoredImg from '../../assets/icons/time-range-light-colored.png'
import timeRangeDarkNeutralImg from '../../assets/icons/time-range-dark-neutral.png'
import timeRangeDarkColoredImg from '../../assets/icons/time-range-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
-const pad = value => `0${value}`.slice(-2)
+const pad = (value: number) => `0${value}`.slice(-2)
const data = Array(21)
.fill('')
.map((_, index) => ({
@@ -14,7 +15,7 @@ const data = Array(21)
value: Math.round(Math.random() * 400),
}))
-const chartProps = {
+const chartProps: TimeRangeSvgProps = {
width: ICON_SIZE,
height: ICON_SIZE,
data,
@@ -30,7 +31,7 @@ const chartProps = {
weekdayLegendOffset: 0,
}
-const TimeRangeIconItem = ({ type }) => {
+const TimeRangeIconItem = ({ type }: { type: IconType }) => {
const currentColors = colors[type].colors
return (
@@ -51,7 +52,7 @@ const TimeRangeIconItem = ({ type }) => {
)
}
-const TimeRangeIcon = () => (
+export const TimeRangeIcon = () => (
<>
@@ -63,5 +64,3 @@ const TimeRangeIcon = () => (
>
)
-
-export default TimeRangeIcon
diff --git a/website/src/components/icons/VoronoiIcon.js b/website/src/components/icons/VoronoiIcon.tsx
similarity index 87%
rename from website/src/components/icons/VoronoiIcon.js
rename to website/src/components/icons/VoronoiIcon.tsx
index 3edaf185e3..93df80b5c6 100644
--- a/website/src/components/icons/VoronoiIcon.js
+++ b/website/src/components/icons/VoronoiIcon.tsx
@@ -1,10 +1,11 @@
import React from 'react'
-import { Voronoi } from '@nivo/voronoi'
+import { Voronoi, VoronoiSvgProps } from '@nivo/voronoi'
import voronoiLightNeutralImg from '../../assets/icons/voronoi-light-neutral.png'
import voronoiLightColoredImg from '../../assets/icons/voronoi-light-colored.png'
import voronoiDarkNeutralImg from '../../assets/icons/voronoi-dark-neutral.png'
import voronoiDarkColoredImg from '../../assets/icons/voronoi-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
const chartProps = {
width: ICON_SIZE,
@@ -27,18 +28,16 @@ const chartProps = {
],
cellLineWidth: 3,
pointSize: 10,
- isInteractive: false,
- animate: false,
-}
+} as VoronoiSvgProps
-const VoronoiIconItem = ({ type }) => (
+const VoronoiIconItem = ({ type }: { type: IconType }) => (
(
+ (props: any) => (
),
'links',
@@ -50,7 +49,7 @@ const VoronoiIconItem = ({ type }) => (
)
-const VoronoiIcon = () => (
+export const VoronoiIcon = () => (
<>
@@ -62,5 +61,3 @@ const VoronoiIcon = () => (
>
)
-
-export default VoronoiIcon
diff --git a/website/src/components/icons/WaffleIcon.js b/website/src/components/icons/WaffleIcon.tsx
similarity index 75%
rename from website/src/components/icons/WaffleIcon.js
rename to website/src/components/icons/WaffleIcon.tsx
index 5c7d8452fb..d610b672d4 100644
--- a/website/src/components/icons/WaffleIcon.js
+++ b/website/src/components/icons/WaffleIcon.tsx
@@ -5,6 +5,7 @@ import waffleLightColoredImg from '../../assets/icons/waffle-light-colored.png'
import waffleDarkNeutralImg from '../../assets/icons/waffle-dark-neutral.png'
import waffleDarkColoredImg from '../../assets/icons/waffle-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
const chartProps = {
width: ICON_SIZE,
@@ -24,32 +25,22 @@ const chartProps = {
isInteractive: false,
}
-const WaffleIconItem = ({ type }) => (
+const WaffleIconItem = ({ type }: { type: IconType }) => (
)
-const WaffleIcon = () => (
+export const WaffleIcon = () => (
<>
-
+
-
+
@@ -58,5 +49,3 @@ const WaffleIcon = () => (
>
)
-
-export default WaffleIcon
diff --git a/website/src/pages/internal/icons.js b/website/src/pages/internal/icons.tsx
similarity index 62%
rename from website/src/pages/internal/icons.js
rename to website/src/pages/internal/icons.tsx
index ead8615cb3..1ea9b41f41 100644
--- a/website/src/pages/internal/icons.js
+++ b/website/src/pages/internal/icons.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import Icons from '../../components/icons/Icons'
+import { Icons } from '../../components/icons/Icons'
const IconsPage = () =>