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 }) => ( @@ -74,7 +78,7 @@ const CalendarIconItem = ({ type }) => ( ) -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 }) => ( @@ -28,7 +29,7 @@ const CodeIconItem = ({ type }) => ( ) -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 }) => ( @@ -29,7 +30,7 @@ const DataIconItem = ({ type }) => ( ) -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 ( @@ -96,5 +104,3 @@ const MapIcon = ({ stroke, fill, colors = [] }) => { ) } - -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 }) => ( ( fill="none" stroke={colors[type].colors[0]} strokeWidth={ICON_SIZE * 0.1} - d={link({ - y0: ICON_SIZE * 0.25, - y1: ICON_SIZE * 0.35, - source: { - x1: ICON_SIZE * 0.15 + nodeWidth + spacing, - }, - target: { - x0: ICON_SIZE * 0.5 - nodeWidth * 0.5 - spacing, - }, - })} + d={ + link({ + y0: ICON_SIZE * 0.25, + y1: ICON_SIZE * 0.35, + source: { + x1: ICON_SIZE * 0.15 + nodeWidth + spacing, + }, + target: { + x0: ICON_SIZE * 0.5 - nodeWidth * 0.5 - spacing, + }, + } as SankeyLink)! + } /> )! + } /> )! + } /> )! + } /> ) -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 = () =>