diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx index ab92dced55..b41b56415d 100644 --- a/website/src/components/Header.tsx +++ b/website/src/components/Header.tsx @@ -1,15 +1,18 @@ import React from 'react' import styled from 'styled-components' -import { HeaderNav } from './HeaderNav' +import { HeaderNav } from './nav' -const Header = () => ( +interface HeaderProps { + isNavOpen: boolean + toggleNav: () => void +} + +export const Header = ({ isNavOpen, toggleNav }: HeaderProps) => ( - + ) -export default Header - const Container = styled.header` position: fixed; top: 0; diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx index d0667a15e8..5e046225f1 100644 --- a/website/src/components/Layout.tsx +++ b/website/src/components/Layout.tsx @@ -1,15 +1,21 @@ -import React, { PropsWithChildren } from 'react' +import React, { PropsWithChildren, useCallback, useState } from 'react' import styled from 'styled-components' -import Header from './Header' +import { Header } from './Header' import media from '../theming/mediaQueries' -// @ts-ignore -import MiniNav from './nav/MiniNav' +import { MiniNav, FullNav } from './nav' const Layout = ({ children }: PropsWithChildren<{}>) => { + const [isNavOpen, setIsNavOpen] = useState(false) + + const toggleNav = useCallback(() => { + setIsNavOpen(isOpen => !isOpen) + }, [setIsNavOpen]) + return ( <> -
+
+ {isNavOpen && } {children} diff --git a/website/src/components/components/explorer/ComponentsFilters.tsx b/website/src/components/components/explorer/ComponentsFilters.tsx index 1f26f4b0ad..dc3245fbfc 100644 --- a/website/src/components/components/explorer/ComponentsFilters.tsx +++ b/website/src/components/components/explorer/ComponentsFilters.tsx @@ -2,7 +2,7 @@ import React, { memo } from 'react' import styled from 'styled-components' import media from '../../../theming/mediaQueries' -const filters = ['SVG', 'HTML', 'Canvas', 'HTTP API'] as const +const filters = ['SVG', 'HTML', 'Canvas', 'API'] as const interface ComponentsFiltersProps { filter: string | null diff --git a/website/src/components/components/explorer/ComponentsGrid.tsx b/website/src/components/components/explorer/ComponentsGrid.tsx index 440ed05450..d44af6a23b 100644 --- a/website/src/components/components/explorer/ComponentsGrid.tsx +++ b/website/src/components/components/explorer/ComponentsGrid.tsx @@ -1,26 +1,19 @@ -import React from 'react' +import React, { useMemo } from 'react' import styled from 'styled-components' import { ComponentsGridItem } from './ComponentsGridItem' import * as nav from '../../../data/nav' import media from '../../../theming/mediaQueries' +import { ChartNavData } from '../../../types' -type NavItem = { - label: string - path: string - icon: string - tags: string[] -} -type FilterFunction = (item: NavItem) => boolean +type FilterFunction = (item: ChartNavData) => boolean const getFilterFunction = (term?: string | null, filter?: string | null): FilterFunction => { let predicates: FilterFunction[] = [] if (term && term.length > 0) { - predicates.push(({ label }) => label.toLowerCase().includes(term.toLowerCase())) + predicates.push(({ name }) => name.toLowerCase().includes(term.toLowerCase())) } if (filter) { - predicates.push(({ tags }) => - tags.map(tag => tag.toLowerCase()).includes(filter.toLowerCase()) - ) + predicates.push(({ flavors }) => flavors[filter.toLowerCase()] === true) } return item => predicates.every(predicate => predicate(item)) @@ -32,10 +25,11 @@ interface ComponentsGridProps { } export const ComponentsGrid = ({ filter, term }: ComponentsGridProps) => { - let items = nav.allComponents + let items = nav.components + if (term || filter) { const filterFunction = getFilterFunction(term, filter) - items = nav.allComponents.filter(filterFunction) + items = items.filter(filterFunction) } if (items.length === 0) { @@ -50,13 +44,7 @@ export const ComponentsGrid = ({ filter, term }: ComponentsGridProps) => { return ( {items.map(item => ( - + ))} ) diff --git a/website/src/components/components/explorer/ComponentsGridItem.tsx b/website/src/components/components/explorer/ComponentsGridItem.tsx index 2bd6560d8f..41c2937ab8 100644 --- a/website/src/components/components/explorer/ComponentsGridItem.tsx +++ b/website/src/components/components/explorer/ComponentsGridItem.tsx @@ -1,30 +1,46 @@ -import React, { memo } from 'react' +import React, { memo, useCallback, MouseEvent } from 'react' import { Link } from 'gatsby' import styled, { useTheme } from 'styled-components' import media from '../../../theming/mediaQueries' +import { ChartNavData } from '../../../types' -interface ComponentsGridItemProps { - path: string - name: string - icon: string - tags: string[] -} - -export const ComponentsGridItem = memo(({ path, name, icon, tags }: ComponentsGridItemProps) => { +export const ComponentsGridItem = memo(({ name, id, flavors, tags }: ChartNavData) => { const theme = useTheme() + const handleVariantClick = useCallback((event: MouseEvent) => { + event.stopPropagation() + }, []) + return ( - - + +
{name} - {tags.length > 0 && ( + {/*tags.length > 0 && ( {tags.map(tag => ( {tag} ))} - )} + )*/} + + SVG + {flavors.html && ( + + HTML + + )} + {flavors.canvas && ( + + Canvas + + )} + {flavors.api && ( + + API + + )} +
) @@ -35,17 +51,15 @@ const Container = styled(Link)` background-color: ${({ theme }) => theme.colors.cardBackground}; border-radius: 2px; padding: 12px; - cursor: pointer; color: ${({ theme }) => theme.colors.text}; border: 1px solid ${({ theme }) => theme.colors.cardBackground}; box-shadow: ${({ theme }) => theme.cardShadow}; display: flex; - align-items: center; + align-items: flex-start; justify-content: space-between; &:focus, &:hover { - color: ${({ theme }) => theme.colors.accent}; box-shadow: none; border-color: ${({ theme }) => theme.colors.accent}; outline: 0; @@ -91,6 +105,35 @@ const Icon = styled.span` height: 52px; ` +const Flavors = styled.div` + font-size: 0.8rem; + line-height: 0.8rem; + margin-top: 4px; + display: flex; + align-items: center; + flex-wrap: wrap; +` + +const Flavor = styled(Link)` + cursor: pointer; + text-decoration: none; + font-size: 0.75rem; + line-height: 1em; + font-weight: 700; + padding: 3px 4px; + margin-right: 3px; + margin-bottom: 3px; + border-radius: 2px; + background-color: ${({ theme }) => theme.colors.accent}; + border: 1px solid ${({ theme }) => theme.colors.accent}; + color: #ffffff; + + &:hover { + background-color: ${({ theme }) => theme.colors.cardBackground}; + color: ${({ theme }) => theme.colors.accent}; + } +` + const Tags = styled.div` font-size: 0.9rem; color: ${({ theme }) => theme.colors.textLight}; diff --git a/website/src/components/guides/theming/ThemedHeatMap.tsx b/website/src/components/guides/theming/ThemedHeatMap.tsx index a0be93559f..c93d9b662b 100644 --- a/website/src/components/guides/theming/ThemedHeatMap.tsx +++ b/website/src/components/guides/theming/ThemedHeatMap.tsx @@ -55,12 +55,23 @@ export const ThemedHeatMap = ({ theme }: { theme: CompleteTheme }) => { anchor: 'right', direction: 'column', translateX: 32, - length: 180, + length: 140, thickness: 10, ticks: [-100, -75, -50, -25, 0, 25, 50, 75, 100], title: 'Legend Title →', }, ]} + annotations={[ + { + match: { id: 'B.B' }, + type: 'rect', + offset: 3, + borderRadius: 3, + noteX: 20, + noteY: { abs: -10 }, + note: 'Sample annotation', + }, + ]} /> ) } diff --git a/website/src/components/guides/theming/props.ts b/website/src/components/guides/theming/props.ts index 0af0fecb52..9d696d51f8 100644 --- a/website/src/components/guides/theming/props.ts +++ b/website/src/components/guides/theming/props.ts @@ -1,6 +1,6 @@ import { ChartPropertiesGroup, ChartProperty } from '../../../types' -const OPEN_ALL_BY_DEFAULTS = true +const OPEN_ALL_BY_DEFAULTS = false const fontSizeProp: ChartProperty = { key: 'fontSize', diff --git a/website/src/components/nav/FullNav.tsx b/website/src/components/nav/FullNav.tsx new file mode 100644 index 0000000000..7892031cf3 --- /dev/null +++ b/website/src/components/nav/FullNav.tsx @@ -0,0 +1,196 @@ +import React, { memo } from 'react' +import styled, { css } from 'styled-components' +import { Link } from 'gatsby' +import { FaGithub, FaTwitter } from 'react-icons/fa' +import { + FiExternalLink as ExternalLinkIcon, + FiCoffee, + FiBook, + FiArrowRight as GuideIcon, +} from 'react-icons/fi' +import media from '../../theming/mediaQueries' +import * as nav from '../../data/nav' +import { FullNavComponentLink } from './FullNavComponentLink' + +export const FullNav = memo(() => { + return ( + + + + Components + {nav.components.map(component => ( + + ))} + + + Guides + {nav.guides.map(guide => ( + + + {guide.label} + + ))} + + + Other + About + References + FAQ + + + Storybook + + + + + Donate + + + + + GitHub + + + + + Twitter + + + + + + ) +}) + +const Container = styled.div` + position: fixed; + z-index: 1000; + top: ${({ theme }) => theme.dimensions.headerHeight}px; + bottom: 0; + left: 0; + width: 100%; + background-color: ${({ theme }) => theme.colors.cardBackground}; + display: flex; + justify-content: center; + box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15); + overflow-x: hidden; + overflow-y: auto; +` + +const InnerContainer = styled.div` + display: grid; + grid-template-columns: 3fr 1fr; + grid-column-gap: 24px; + grid-template-areas: + 'components guides' + 'components other'; + align-items: start; + max-width: 1100px; + margin: 32px 24px; + + ${media.tablet` + & { + margin: 24px 24px 32px; + max-width: unset; + grid-template-columns: 2fr 1fr; + grid-row-gap: 24px; + grid-template-areas: "components guides" + "components other"; + } + `} + + ${media.mobile` + & { + margin: 16px 16px 32px; + max-width: unset; + grid-template-columns: 1fr 1fr; + grid-column-gap: 18px; + grid-row-gap: 18px; + grid-template-areas: "components components" + "guides other"; + } + `} +` + +const SectionTitle = styled.h3` + padding: 0 0 6px; + margin: 0 0 12px; + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + border-bottom: 1px solid ${({ theme }) => theme.colors.border}; + width: 100%; +` + +const Components = styled.div` + grid-area: components; + display: flex; + flex-wrap: wrap; + align-items: flex-start; +` + +const Guides = styled.div` + grid-area: guides; + display: flex; + flex-direction: column; +` + +const Other = styled.div` + grid-area: other; + display: flex; + flex-direction: column; +` + +const linkStyle = css` + color: ${({ theme }) => theme.colors.text}; + text-decoration: none; + font-size: 0.9rem; + font-weight: 600; + display: flex; + align-items: center; + cursor: pointer; + height: 1em; + margin-bottom: 12px; + + & svg:first-child { + font-size: 16px; + margin-right: 5px; + color: ${({ theme }) => theme.colors.accent}; + } + + & svg:last-child { + font-size: 16px; + margin-left: 5px; + opacity: 0.5; + } + + &:hover { + text-decoration: underline; + } +` + +const InternalLink = styled(Link)` + ${linkStyle} +` + +const ExternalLink = styled.a` + ${linkStyle} +` diff --git a/website/src/components/nav/FullNavComponentLink.tsx b/website/src/components/nav/FullNavComponentLink.tsx new file mode 100644 index 0000000000..af1b1d2d71 --- /dev/null +++ b/website/src/components/nav/FullNavComponentLink.tsx @@ -0,0 +1,135 @@ +import React from 'react' +import styled, { useTheme } from 'styled-components' +import { Link } from 'gatsby' +import media from '../../theming/mediaQueries' +import { ChartNavData } from '../../types' + +export const FullNavComponentLink = ({ name, id, flavors }: ChartNavData) => { + const theme = useTheme() + + return ( + + + + + + {name} + + SVG + {flavors.html && HTML} + {flavors.canvas && Canvas} + {flavors.api && API} + + + + ) +} + +const Container = styled.div` + width: calc(33.3% - 16px); + margin-right: 24px; + margin-bottom: 13px; + font-size: 0.9rem; + display: flex; + align-items: flex-start; + overflow: hidden; + + ${media.desktopLarge` + &:nth-child(3n+1) { + margin-right: 0; + } + `} + + ${media.desktop` + &:nth-child(3n+1) { + margin-right: 0; + } + `} + + ${media.tablet` + & { + width: calc(50% - 12px); + margin-right: 24px; + } + + &:nth-child(2n+1) { + margin-right: 0; + } + `} + + ${media.mobile` + & { + width: calc(50% - 9px); + margin-right: 18px; + } + + &:nth-child(2n+1) { + margin-right: 0; + } + `} +` + +const Content = styled.div` + margin-left: 6px; + flex: 1; +` + +const IconContainer = styled.span` + width: 42px; + height: 42px; + overflow: hidden; + position: relative; + flex-shrink: 0; +` + +const Icon = styled.span` + display: block; + position: absolute; + top: 50%; + left: 50%; + margin-top: -20px; + margin-left: -20px; + transform: scale(0.74); + transform-origin: top left; +` + +const Name = styled.h4` + color: ${({ theme }) => theme.colors.text}; + line-height: 1em; + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; + font-weight: 600; + margin: 0 0 6px; + padding: 0; +` + +const Flavors = styled.div` + display: flex; + flex-wrap: wrap; + width: 100%; +` + +const Flavor = styled(Link)` + cursor: pointer; + text-decoration: none; + font-size: 0.75rem; + line-height: 1em; + font-weight: 700; + padding: 3px 4px; + margin-right: 3px; + margin-bottom: 3px; + border-radius: 2px; + background-color: ${({ theme }) => theme.colors.accent}; + border: 1px solid ${({ theme }) => theme.colors.accent}; + color: #ffffff; + + &:last-child { + margin-right: 0; + } + + &:hover { + background-color: ${({ theme }) => theme.colors.cardBackground}; + color: ${({ theme }) => theme.colors.accent}; + } +` diff --git a/website/src/components/HeaderNav.tsx b/website/src/components/nav/HeaderNav.tsx similarity index 54% rename from website/src/components/HeaderNav.tsx rename to website/src/components/nav/HeaderNav.tsx index 394622a4ef..642ac1caa2 100644 --- a/website/src/components/HeaderNav.tsx +++ b/website/src/components/nav/HeaderNav.tsx @@ -2,18 +2,29 @@ import React from 'react' import styled, { css } from 'styled-components' import { Link } from 'gatsby' import { FaGithub, FaTwitter } from 'react-icons/fa' -import media from '../theming/mediaQueries' -import ThemeSelector from './ThemeSelector' -import * as nav from '../data/nav' +import { FiX, FiMenu, FiExternalLink, FiChevronDown } from 'react-icons/fi' +import media from '../../theming/mediaQueries' +import ThemeSelector from '../ThemeSelector' +import * as nav from '../../data/nav' -export const HeaderNav = () => { +interface HeaderNavProps { + isNavOpen: boolean + toggleNav: () => void +} + +export const HeaderNav = ({ isNavOpen, toggleNav }: HeaderNavProps) => { return ( - About - References + + Why nivo? + + About + References + + Components - Guides + Guides {nav.guides.map(guide => ( @@ -22,13 +33,13 @@ export const HeaderNav = () => { ))} - FAQ storybook + { rel="noopener noreferrer" > Donate + - - - + - + + + {isNavOpen && } + {!isNavOpen && } + ) } const Container = styled.nav` - position: absolute; + position: fixed; top: 0; - right: 50px; + right: 0; height: ${({ theme }) => theme.dimensions.headerHeight}px; display: flex; justify-content: flex-end; @@ -69,13 +85,19 @@ const Container = styled.nav` ${media.tablet` & { - right: ${({ theme }) => theme.dimensions.contentMarginSmall}px; + left: 0; + flex-direction: row-reverse; + padding-right: 16px; + justify-content: space-between; } `} ${media.mobile` & { - display: none; + left: 0; + flex-direction: row-reverse; + padding-right: 16px; + justify-content: space-between; } `} ` @@ -84,7 +106,7 @@ const HeaderSub = styled.span` display: none; position: absolute; top: 100%; - left: -15px; + left: 0; background: ${({ theme }) => theme.colors.cardBackground}; z-index: 1000; border-radius: 2px; @@ -92,6 +114,7 @@ const HeaderSub = styled.span` box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2); font-size: 12px; font-weight: 600; + min-width: 160px; ` const HeaderSubItem = styled(Link)` @@ -121,8 +144,22 @@ const itemStyle = css` padding: 6px 0; & svg { - font-size: 22px; + font-size: 16px; + opacity: 0.5; + margin-left: 5px; } + + ${media.tablet` + & { + display: none; + } + `} + + ${media.mobile` + & { + display: none; + } + `} ` const HeaderItem = styled.span` @@ -135,6 +172,53 @@ const HeaderItem = styled.span` const HeaderInternalLink = styled(Link)` ${itemStyle} ` + const HeaderExternalLink = styled.a` ${itemStyle} ` + +const IconExternalLink = styled.a` + cursor: pointer; + font-size: 22px; + color: #ffffff; + margin-left: 20px; + display: flex; + align-items: center; + + ${media.tablet` + & { + display: none; + } + `} + + ${media.mobile` + & { + display: none; + } + `} +` + +const NavToggleButton = styled.div` + height: ${({ theme }) => theme.dimensions.headerHeight}px; + width: ${({ theme }) => theme.dimensions.headerHeight}px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; + margin-left: 12px; + font-size: 24px; + color: white; + + ${media.tablet` + & { + margin-left: 0; + } + `} + + ${media.mobile` + & { + margin-left: 0; + } + `} +` diff --git a/website/src/components/nav/MiniNav.js b/website/src/components/nav/MiniNav.tsx similarity index 69% rename from website/src/components/nav/MiniNav.js rename to website/src/components/nav/MiniNav.tsx index 8e9bb32e8d..ab2645858a 100644 --- a/website/src/components/nav/MiniNav.js +++ b/website/src/components/nav/MiniNav.tsx @@ -1,30 +1,26 @@ -import React, { Component } from 'react' +import React from 'react' import { Link } from 'gatsby' import styled from 'styled-components' -import MiniNavLink from './MiniNavLink' +import { MiniNavLink } from './MiniNavLink' import logoImg from '../../assets/icons/nivo-icon.png' import media from '../../theming/mediaQueries' import * as nav from '../../data/nav' -class MiniNav extends Component { - render() { - return ( - - - - - - {nav.components.map(item => { - return - })} - - - ) - } +export const MiniNav = () => { + return ( + + + + + + {nav.components.map(item => ( + + ))} + + + ) } -export default MiniNav - const Wrapper = styled.aside` position: fixed; top: 0; @@ -66,7 +62,7 @@ const Logo = styled(Link)` display: block; background-color: ${({ theme }) => theme.colors.cardBackground}; background-image: url(${logoImg}); - background-size: 52%; + background-size: 60%; background-position: center center; background-repeat: no-repeat; ` diff --git a/website/src/components/nav/MiniNavLink.js b/website/src/components/nav/MiniNavLink.js deleted file mode 100644 index 4878280b50..0000000000 --- a/website/src/components/nav/MiniNavLink.js +++ /dev/null @@ -1,102 +0,0 @@ -import React, { memo } from 'react' -import { Link } from 'gatsby' -import styled, { useTheme } from 'styled-components' - -const Label = styled.span` - position: absolute; - left: 110%; - top: 50%; - height: 30px; - font-size: 13px; - font-weight: 600; - white-space: pre; - align-items: center; - background: ${({ theme }) => theme.colors.accent}; - color: white; - text-decoration: none; - margin-top: -15px; - padding: 0 10px; - border-radius: 2px; - z-index: 3; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); - min-width: ${({ theme }) => theme.dimensions.miniNavItemSize}px; - pointer-events: none; - transform: translate3d(20px, 0, 0); - opacity: 0; - transition: opacity 200ms, transform 200ms; - display: none; -` - -const Item = styled(Link)` - display: block; - cursor: pointer; - width: ${({ theme }) => theme.dimensions.miniNavWidth}px; - height: ${({ theme }) => theme.dimensions.miniNavItemSize}px; - position: relative; - text-decoration: none; - - &:before { - content: ''; - position: absolute; - display: block; - width: ${({ theme }) => theme.dimensions.miniNavItemSize}px; - height: ${({ theme }) => theme.dimensions.miniNavItemSize}px; - border-radius: 100%; - background: ${({ theme }) => theme.colors.background}; - opacity: 0; - top: 0; - left: ${({ theme }) => - (theme.dimensions.miniNavWidth - theme.dimensions.miniNavItemSize) / 2}px; - transform: scale(0.6); - transition: opacity 200ms, transform 400ms; - z-index: 1; - } - - &:hover:before { - opacity: 1; - transform: scale(0.96); - } - - &:hover ${Label} { - opacity: 1; - transform: translate3d(0, 0, 0); - } -` - -const Icon = styled.span` - display: block; - position: absolute; - position: absolute; - top: 50%; - left: 50%; - margin-top: -20px; - margin-left: -20px; - transform: scale(0.76); - transform-origin: top left; - z-index: 2; - pointer-events: none; -` - -const MiniNavLink = memo(({ path, icon, label }) => { - const theme = useTheme() - const getProps = ({ isPartiallyCurrent }) => { - return { - children: ( - <> - - - - ), - } - } - - return -}) - -MiniNavLink.displayName = 'MiniNavLink' - -export default MiniNavLink diff --git a/website/src/components/nav/MiniNavLink.tsx b/website/src/components/nav/MiniNavLink.tsx new file mode 100644 index 0000000000..b9e0d09da0 --- /dev/null +++ b/website/src/components/nav/MiniNavLink.tsx @@ -0,0 +1,46 @@ +import React, { memo, useCallback } from 'react' +import { Link } from 'gatsby' +import styled, { useTheme } from 'styled-components' +import { ChartNavData } from '../../types' + +export const MiniNavLink = memo(({ id }: ChartNavData) => { + const theme = useTheme() + const themeId = theme.id + + const getProps = useCallback( + ({ isPartiallyCurrent }: { isPartiallyCurrent: boolean }) => ({ + children: ( + + ), + }), + [id, themeId] + ) + + return +}) + +const Item = styled(Link)` + display: block; + cursor: pointer; + width: ${({ theme }) => theme.dimensions.miniNavWidth}px; + height: ${({ theme }) => theme.dimensions.miniNavItemSize}px; + position: relative; + text-decoration: none; +` + +const Icon = styled.span` + display: block; + position: absolute; + top: 50%; + left: 50%; + margin-top: -20px; + margin-left: -20px; + transform: scale(0.74); + transform-origin: top left; + z-index: 2; + pointer-events: none; +` diff --git a/website/src/components/nav/index.ts b/website/src/components/nav/index.ts new file mode 100644 index 0000000000..6372d697d8 --- /dev/null +++ b/website/src/components/nav/index.ts @@ -0,0 +1,3 @@ +export * from './FullNav' +export * from './HeaderNav' +export * from './MiniNav' diff --git a/website/src/data/components/area-bump/meta.yml b/website/src/data/components/area-bump/meta.yml index afbb062a70..1b1f43b922 100644 --- a/website/src/data/components/area-bump/meta.yml +++ b/website/src/data/components/area-bump/meta.yml @@ -4,9 +4,7 @@ flavors: AreaBump: package: '@nivo/bump' - tags: - - svg - - isomorphic + tags: [] stories: [] description: | The AreaBump chart is similar to the [Bump](self:/bump/) chart, diff --git a/website/src/data/components/bar/meta.yml b/website/src/data/components/bar/meta.yml index 2fee5d1edb..6af1929ba8 100644 --- a/website/src/data/components/bar/meta.yml +++ b/website/src/data/components/bar/meta.yml @@ -8,9 +8,7 @@ flavors: Bar: package: '@nivo/bar' - tags: - - svg - - isomorphic + tags: [] stories: - label: Using markers link: bar--with-marker diff --git a/website/src/data/components/bullet/meta.yml b/website/src/data/components/bullet/meta.yml index 3c1dfda4db..b32a28b593 100644 --- a/website/src/data/components/bullet/meta.yml +++ b/website/src/data/components/bullet/meta.yml @@ -4,9 +4,7 @@ flavors: Bullet: package: '@nivo/bullet' - tags: - - svg - - isomorphic + tags: [] stories: - label: custom range link: bullet--custom-range diff --git a/website/src/data/components/bump/meta.yml b/website/src/data/components/bump/meta.yml index 59e1a0c670..1823ffcc4c 100644 --- a/website/src/data/components/bump/meta.yml +++ b/website/src/data/components/bump/meta.yml @@ -4,9 +4,7 @@ flavors: Bump: package: '@nivo/bump' - tags: - - svg - - isomorphic + tags: [] stories: - label: Custom points link: bump--custom-points diff --git a/website/src/data/components/calendar/meta.yml b/website/src/data/components/calendar/meta.yml index 90d701bbf7..0def4f158e 100644 --- a/website/src/data/components/calendar/meta.yml +++ b/website/src/data/components/calendar/meta.yml @@ -8,9 +8,7 @@ flavors: Calendar: package: '@nivo/calendar' - tags: - - svg - - isomorphic + tags: [] stories: [] description: | This component is heavily inspired by diff --git a/website/src/data/components/chord/meta.yml b/website/src/data/components/chord/meta.yml index 2d5d48fe04..aaf12f3483 100644 --- a/website/src/data/components/chord/meta.yml +++ b/website/src/data/components/chord/meta.yml @@ -10,8 +10,6 @@ Chord: package: '@nivo/chord' tags: - relational - - svg - - isomorphic stories: - label: Custom arc & ribbon tooltip link: chord--custom-tooltips diff --git a/website/src/data/components/choropleth/meta.yml b/website/src/data/components/choropleth/meta.yml index a058f136c8..0a779098d5 100644 --- a/website/src/data/components/choropleth/meta.yml +++ b/website/src/data/components/choropleth/meta.yml @@ -8,8 +8,6 @@ Choropleth: package: '@nivo/geo' tags: - map - - svg - - isomorphic stories: [] description: | The Choropleth component displays divided geographical areas shaded diff --git a/website/src/data/components/circle-packing/meta.yml b/website/src/data/components/circle-packing/meta.yml index f70689d5c1..3cf91dc182 100644 --- a/website/src/data/components/circle-packing/meta.yml +++ b/website/src/data/components/circle-packing/meta.yml @@ -12,8 +12,6 @@ CirclePacking: package: '@nivo/circle-packing' tags: - hierarchy - - svg - - isomorphic stories: - label: Using formatted values link: circlepacking--with-formatted-values diff --git a/website/src/data/components/funnel/meta.yml b/website/src/data/components/funnel/meta.yml index 14bbbe578e..560368c01f 100644 --- a/website/src/data/components/funnel/meta.yml +++ b/website/src/data/components/funnel/meta.yml @@ -6,8 +6,6 @@ Funnel: package: '@nivo/funnel' tags: - experimental - - svg - - isomorphic stories: [] description: | A funnel chart. diff --git a/website/src/data/components/geomap/meta.yml b/website/src/data/components/geomap/meta.yml index 6b7fff42a4..3d25a65704 100644 --- a/website/src/data/components/geomap/meta.yml +++ b/website/src/data/components/geomap/meta.yml @@ -8,8 +8,6 @@ GeoMap: package: '@nivo/geo' tags: - map - - svg - - isomorphic stories: [] description: | This component can be used to draw maps, it takes an array of diff --git a/website/src/data/components/heatmap/meta.yml b/website/src/data/components/heatmap/meta.yml index 3d71e63906..bd5eb3e8a4 100644 --- a/website/src/data/components/heatmap/meta.yml +++ b/website/src/data/components/heatmap/meta.yml @@ -8,9 +8,7 @@ flavors: HeatMap: package: '@nivo/heatmap' - tags: - - svg - - isomorphic + tags: [] stories: - label: Custom cell component link: heatmap--custom-cell-component diff --git a/website/src/data/components/line/meta.yml b/website/src/data/components/line/meta.yml index 42efd1f029..0c95f060fb 100644 --- a/website/src/data/components/line/meta.yml +++ b/website/src/data/components/line/meta.yml @@ -8,9 +8,7 @@ flavors: Line: package: '@nivo/line' - tags: - - svg - - isomorphic + tags: [] stories: - label: stacked lines link: line--stacked-lines diff --git a/website/src/data/components/marimekko/meta.yml b/website/src/data/components/marimekko/meta.yml index ac5eea5a9d..5830b06b40 100644 --- a/website/src/data/components/marimekko/meta.yml +++ b/website/src/data/components/marimekko/meta.yml @@ -4,9 +4,7 @@ flavors: Marimekko: package: '@nivo/marimekko' - tags: - - svg - - isomorphic + tags: [] stories: - label: using arrays for data link: marimekko--using-arrays-for-data diff --git a/website/src/data/components/network/meta.yml b/website/src/data/components/network/meta.yml index d05b6cb380..0fd70cf2de 100644 --- a/website/src/data/components/network/meta.yml +++ b/website/src/data/components/network/meta.yml @@ -6,9 +6,7 @@ flavors: Network: package: '@nivo/network' - tags: - - svg - - isomorphic + tags: [] stories: - label: Custom node tooltip link: network--custom-node-tooltip diff --git a/website/src/data/components/parallel-coordinates/meta.yml b/website/src/data/components/parallel-coordinates/meta.yml index 15ee497d63..ac8c930f12 100644 --- a/website/src/data/components/parallel-coordinates/meta.yml +++ b/website/src/data/components/parallel-coordinates/meta.yml @@ -6,9 +6,7 @@ flavors: ParallelCoordinates: package: '@nivo/parallel-coordinates' - tags: - - svg - - isomorphic + tags: [] stories: [] description: | Parallel coordinates chart, supports continuous numerical diff --git a/website/src/data/components/pie/meta.yml b/website/src/data/components/pie/meta.yml index 9e1f2fea60..c04f5f0b1d 100644 --- a/website/src/data/components/pie/meta.yml +++ b/website/src/data/components/pie/meta.yml @@ -10,8 +10,6 @@ Pie: package: '@nivo/pie' tags: - radial - - svg - - isomorphic stories: - label: Using colors from data link: pie--using-colors-from-data diff --git a/website/src/data/components/radar/meta.yml b/website/src/data/components/radar/meta.yml index eca79284b7..c4309badd9 100644 --- a/website/src/data/components/radar/meta.yml +++ b/website/src/data/components/radar/meta.yml @@ -8,8 +8,6 @@ Radar: package: '@nivo/radar' tags: - radial - - svg - - isomorphic stories: - label: Formatting tooltip value link: radar--with-formatted-values diff --git a/website/src/data/components/radial-bar/meta.yml b/website/src/data/components/radial-bar/meta.yml index 1763d4d819..ce22153ab9 100644 --- a/website/src/data/components/radial-bar/meta.yml +++ b/website/src/data/components/radial-bar/meta.yml @@ -7,8 +7,6 @@ RadialBar: tags: - radial - bar - - svg - - isomorphic stories: [] description: | A radial bar chart. diff --git a/website/src/data/components/sankey/meta.yml b/website/src/data/components/sankey/meta.yml index dd8c88d467..22ab34c26d 100644 --- a/website/src/data/components/sankey/meta.yml +++ b/website/src/data/components/sankey/meta.yml @@ -9,8 +9,6 @@ Sankey: tags: - relational - flow - - svg - - isomorphic stories: [] description: | Computes a sankey diagram from nodes and links, built diff --git a/website/src/data/components/scatterplot/meta.yml b/website/src/data/components/scatterplot/meta.yml index 2bcb8ffddf..203493553e 100644 --- a/website/src/data/components/scatterplot/meta.yml +++ b/website/src/data/components/scatterplot/meta.yml @@ -6,9 +6,7 @@ flavors: ScatterPlot: package: '@nivo/scatterplot' - tags: - - svg - - isomorphic + tags: [] stories: - label: Using custom node link: scatterplot--custom-node diff --git a/website/src/data/components/stream/meta.yml b/website/src/data/components/stream/meta.yml index 423cf2eb2b..77e4f84ff9 100644 --- a/website/src/data/components/stream/meta.yml +++ b/website/src/data/components/stream/meta.yml @@ -6,8 +6,6 @@ Stream: package: '@nivo/stream' tags: - stacked - - svg - - isomorphic stories: - label: Use custom legend label link: stream--custom-legend-label diff --git a/website/src/data/components/sunburst/meta.yml b/website/src/data/components/sunburst/meta.yml index 55220b5a65..09b20e8335 100644 --- a/website/src/data/components/sunburst/meta.yml +++ b/website/src/data/components/sunburst/meta.yml @@ -9,8 +9,6 @@ Sunburst: tags: - hierarchy - radial - - svg - - isomorphic stories: - label: with child color modifier link: sunburst--with-child-color-modifier diff --git a/website/src/data/components/swarmplot/meta.yml b/website/src/data/components/swarmplot/meta.yml index 5499ab11ba..2f0dbb0b6e 100644 --- a/website/src/data/components/swarmplot/meta.yml +++ b/website/src/data/components/swarmplot/meta.yml @@ -6,9 +6,7 @@ flavors: SwarmPlot: package: '@nivo/swarmplot' - tags: - - svg - - isomorphic + tags: [] stories: - label: Custom circle component link: swarmplot--custom-circle-component diff --git a/website/src/data/components/time-range/meta.yml b/website/src/data/components/time-range/meta.yml index ce61bfd467..d0ebaf4bff 100644 --- a/website/src/data/components/time-range/meta.yml +++ b/website/src/data/components/time-range/meta.yml @@ -4,9 +4,7 @@ flavors: TimeRange: package: '@nivo/calendar' - tags: - - svg - - isomorphic + tags: [] stories: [] description: | The TimeRange chart is similar to the [Calendar](self:/calendar) chart, but diff --git a/website/src/data/components/treemap/meta.yml b/website/src/data/components/treemap/meta.yml index 1a2a90b00c..bd1d8173c9 100644 --- a/website/src/data/components/treemap/meta.yml +++ b/website/src/data/components/treemap/meta.yml @@ -12,8 +12,6 @@ TreeMap: package: '@nivo/treemap' tags: - hierarchy - - svg - - isomorphic stories: - label: Using custom tooltip link: treemap--custom-tooltip diff --git a/website/src/data/components/voronoi/meta.yml b/website/src/data/components/voronoi/meta.yml index 29d130b79e..e74af95245 100644 --- a/website/src/data/components/voronoi/meta.yml +++ b/website/src/data/components/voronoi/meta.yml @@ -5,7 +5,6 @@ flavors: Voronoi: package: '@nivo/voronoi' tags: - - svg - experimental stories: [] description: | diff --git a/website/src/data/components/waffle/meta.yml b/website/src/data/components/waffle/meta.yml index 4ef95058dc..b220f3464c 100644 --- a/website/src/data/components/waffle/meta.yml +++ b/website/src/data/components/waffle/meta.yml @@ -8,9 +8,7 @@ flavors: Waffle: package: '@nivo/waffle' - tags: - - svg - - isomorphic + tags: [] stories: [] description: | A waffle component. You can fully customize it using `cellComponent` diff --git a/website/src/data/nav.ts b/website/src/data/nav.ts index 6f162c17ea..c15bdea4ed 100644 --- a/website/src/data/nav.ts +++ b/website/src/data/nav.ts @@ -1,4 +1,3 @@ -import sortBy from 'lodash/sortBy' import areaBump from './components/area-bump/meta.yml' import bar from './components/bar/meta.yml' import circlePacking from './components/circle-packing/meta.yml' @@ -26,351 +25,256 @@ import timeRange from './components/time-range/meta.yml' import treemap from './components/treemap/meta.yml' import voronoi from './components/voronoi/meta.yml' import waffle from './components/waffle/meta.yml' +import { ChartNavData } from '../types' -export const components = [ +export const components: ChartNavData[] = [ { - label: 'AreaBump', - path: '/area-bump/', - icon: 'area-bump', + name: 'AreaBump', + id: 'area-bump', tags: areaBump.AreaBump.tags, + flavors: { + svg: true, + }, }, { - label: 'Bar', - path: '/bar/', - icon: 'bar', + name: 'Bar', + id: 'bar', tags: bar.Bar.tags, + flavors: { + svg: true, + canvas: true, + api: true, + }, }, { - label: 'CirclePacking', - path: '/circle-packing/', - icon: 'circle-packing', + name: 'CirclePacking', + id: 'circle-packing', tags: circlePacking.CirclePacking.tags, + flavors: { + svg: true, + html: true, + canvas: true, + api: true, + }, }, { - label: 'Bump', - path: '/bump/', - icon: 'bump', + name: 'Bump', + id: 'bump', tags: bump.Bump.tags, + flavors: { + svg: true, + }, }, { - label: 'Bullet', - path: '/bullet/', - icon: 'bullet', + name: 'Bullet', + id: 'bullet', tags: bullet.Bullet.tags, + flavors: { + svg: true, + }, }, { - label: 'Calendar', - path: '/calendar/', - icon: 'calendar', + name: 'Calendar', + id: 'calendar', tags: calendar.Calendar.tags, + flavors: { + svg: true, + canvas: true, + api: true, + }, }, { - label: 'Choropleth', - path: '/choropleth/', - icon: 'choropleth', + name: 'Choropleth', + id: 'choropleth', tags: choropleth.Choropleth.tags, + flavors: { + svg: true, + canvas: true, + }, }, { - label: 'Chord', - path: '/chord/', - icon: 'chord', + name: 'Chord', + id: 'chord', tags: chord.Chord.tags, + flavors: { + svg: true, + canvas: true, + api: true, + }, }, { - label: 'Funnel', - path: '/funnel/', - icon: 'funnel', + name: 'Funnel', + id: 'funnel', tags: funnel.Funnel.tags, + flavors: { + svg: true, + }, }, { - label: 'GeoMap', - path: '/geomap/', - icon: 'geomap', + name: 'GeoMap', + id: 'geomap', tags: geomap.GeoMap.tags, + flavors: { + svg: true, + canvas: true, + }, }, { - label: 'HeatMap', - path: '/heatmap/', - icon: 'heatmap', + name: 'HeatMap', + id: 'heatmap', tags: heatmap.HeatMap.tags, + flavors: { + svg: true, + canvas: true, + api: true, + }, }, { - label: 'Line', - path: '/line/', - icon: 'line', + name: 'Line', + id: 'line', tags: line.Line.tags, + flavors: { + svg: true, + canvas: true, + api: true, + }, }, { - label: 'Marimekko', - path: '/marimekko/', - icon: 'marimekko', + name: 'Marimekko', + id: 'marimekko', tags: marimekko.Marimekko.tags, + flavors: { + svg: true, + }, }, { - label: 'Network', - path: '/network/', - icon: 'network', + name: 'Network', + id: 'network', tags: network.Network.tags, + flavors: { + svg: true, + canvas: true, + }, }, { - label: 'ParallelCoordinates', - path: '/parallel-coordinates/', - icon: 'parallel-coordinates', + name: 'ParallelCoordinates', + id: 'parallel-coordinates', tags: parallelCoordinates.ParallelCoordinates.tags, + flavors: { + svg: true, + canvas: true, + }, }, { - label: 'Pie', - path: '/pie/', - icon: 'pie', + name: 'Pie', + id: 'pie', tags: pie.Pie.tags, + flavors: { + svg: true, + canvas: true, + api: true, + }, }, { - label: 'Radar', - path: '/radar/', - icon: 'radar', + name: 'Radar', + id: 'radar', tags: radar.Radar.tags, + flavors: { + svg: true, + api: true, + }, }, { - label: 'RadialBar', - path: '/radial-bar/', - icon: 'radial-bar', + name: 'RadialBar', + id: 'radial-bar', tags: radialBar.RadialBar.tags, + flavors: { + svg: true, + }, }, { - label: 'Sankey', - path: '/sankey/', - icon: 'sankey', + name: 'Sankey', + id: 'sankey', tags: sankey.Sankey.tags, + flavors: { + svg: true, + api: true, + }, }, { - label: 'ScatterPlot', - path: '/scatterplot/', - icon: 'scatterplot', + name: 'ScatterPlot', + id: 'scatterplot', tags: scatterplot.ScatterPlot.tags, + flavors: { + svg: true, + canvas: true, + }, }, { - label: 'Stream', - path: '/stream/', - icon: 'stream', + name: 'Stream', + id: 'stream', tags: stream.Stream.tags, + flavors: { + svg: true, + }, }, { - label: 'Sunburst', - path: '/sunburst/', - icon: 'sunburst', + name: 'Sunburst', + id: 'sunburst', tags: sunburst.Sunburst.tags, + flavors: { + svg: true, + api: true, + }, }, { - label: 'SwarmPlot', - path: '/swarmplot/', - icon: 'swarmplot', + name: 'SwarmPlot', + id: 'swarmplot', tags: swarmplot.SwarmPlot.tags, + flavors: { + svg: true, + canvas: true, + }, }, { - label: 'TimeRange', - path: '/time-range/', - icon: 'time-range', + name: 'TimeRange', + id: 'time-range', tags: timeRange.TimeRange.tags, + flavors: { + svg: true, + }, }, { - label: 'TreeMap', - path: '/treemap/', - icon: 'treemap', + name: 'TreeMap', + id: 'treemap', tags: treemap.TreeMap.tags, + flavors: { + svg: true, + html: true, + canvas: true, + api: true, + }, }, { - label: 'Voronoi', - path: '/voronoi/', - icon: 'voronoi', + name: 'Voronoi', + id: 'voronoi', tags: voronoi.Voronoi.tags, + flavors: { + svg: true, + }, }, { - label: 'Waffle', - path: '/waffle/', - icon: 'waffle', + name: 'Waffle', + id: 'waffle', tags: waffle.Waffle.tags, + flavors: { + svg: true, + html: true, + canvas: true, + }, }, ] -const all = components.concat([ - { - label: 'BarCanvas', - path: '/bar/canvas/', - icon: 'bar', - tags: bar.BarCanvas.tags, - }, - { - label: 'Bar HTTP API', - path: '/bar/api/', - icon: 'bar', - tags: [...bar.Bar.tags, 'HTTP API'], - }, - { - label: 'CirclePackingHtml', - path: '/circle-packing/html/', - icon: 'circle-packing', - tags: circlePacking.CirclePackingHtml.tags, - }, - { - label: 'CirclePackingCanvas', - path: '/circle-packing/canvas/', - icon: 'circle-packing', - tags: circlePacking.CirclePackingCanvas.tags, - }, - { - label: 'CirclePacking HTTP API', - path: '/circle-packing/api/', - icon: 'circle-packing', - tags: [...circlePacking.CirclePacking.tags, 'HTTP API'], - }, - { - label: 'CalendarCanvas', - path: '/calendar/canvas/', - icon: 'calendar', - tags: calendar.CalendarCanvas.tags, - }, - { - label: 'Calendar HTTP API', - path: '/calendar/api/', - icon: 'calendar', - tags: [...calendar.Calendar.tags, 'HTTP API'], - }, - { - label: 'ChoroplethCanvas', - path: '/choropleth/canvas/', - icon: 'choropleth', - tags: choropleth.ChoroplethCanvas.tags, - }, - { - label: 'ChordCanvas', - path: '/chord/canvas/', - icon: 'chord', - tags: chord.ChordCanvas.tags, - }, - { - label: 'Chord HTTP API', - path: '/chord/api/', - icon: 'chord', - tags: [...chord.Chord.tags, 'HTTP API'], - }, - { - label: 'GeoMapCanvas', - path: '/geomap/canvas/', - icon: 'geomap', - tags: geomap.GeoMapCanvas.tags, - }, - { - label: 'HeatMapCanvas', - path: '/heatmap/canvas/', - icon: 'heatmap', - tags: heatmap.HeatMapCanvas.tags, - }, - { - label: 'HeatMap HTTP API', - path: '/heatmap/api/', - icon: 'heatmap', - tags: [...heatmap.HeatMap.tags, 'HTTP API'], - }, - { - label: 'LineCanvas', - path: '/line/canvas/', - icon: 'line', - tags: line.LineCanvas.tags, - }, - { - label: 'Line HTTP API', - path: '/line/api/', - icon: 'line', - tags: [...line.Line.tags, 'HTTP API'], - }, - { - label: 'NetworkCanvas', - path: '/network/canvas/', - icon: 'network', - tags: network.NetworkCanvas.tags, - }, - { - label: 'ParallelCoordinatesCanvas', - path: '/parallel-coordinates/canvas/', - icon: 'parallel-coordinates', - tags: parallelCoordinates.ParallelCoordinatesCanvas.tags, - }, - { - label: 'PieCanvas', - path: '/pie/canvas/', - icon: 'pie', - tags: pie.PieCanvas.tags, - }, - { - label: 'Pie HTTP API', - path: '/pie/api/', - icon: 'pie', - tags: [...pie.Pie.tags, 'HTTP API'], - }, - { - label: 'Radar HTTP API', - path: '/radar/api/', - icon: 'radar', - tags: [...radar.Radar.tags, 'HTTP API'], - }, - { - label: 'Sankey HTTP API', - path: '/sankey/api/', - icon: 'sankey', - tags: [...sankey.Sankey.tags, 'HTTP API'], - }, - { - label: 'ScatterPlotCanvas', - path: '/scatterplot/canvas/', - icon: 'scatterplot', - tags: scatterplot.ScatterPlotCanvas.tags, - }, - { - label: 'Sunburst HTTP API', - path: '/sunburst/api/', - icon: 'sunburst', - tags: [...sunburst.Sunburst.tags, 'HTTP API'], - }, - { - label: 'SwarmPlotCanvas', - path: '/swarmplot/canvas/', - icon: 'swarmplot', - tags: swarmplot.SwarmPlotCanvas.tags, - }, - { - label: 'TreeMapHtml', - path: '/treemap/html/', - icon: 'treemap', - tags: treemap.TreeMapHtml.tags, - }, - { - label: 'TreeMapCanvas', - path: '/treemap/canvas/', - icon: 'treemap', - tags: treemap.TreeMapCanvas.tags, - }, - { - label: 'TreeMap HTTP API', - path: '/treemap/api/', - icon: 'treemap', - tags: [...treemap.TreeMap.tags, 'HTTP API'], - }, - { - label: 'WaffleHtml', - path: '/waffle/html/', - icon: 'waffle', - tags: waffle.WaffleHtml.tags, - }, - { - label: 'WaffleCanvas', - path: '/waffle/canvas/', - icon: 'waffle', - tags: waffle.WaffleCanvas.tags, - }, -]) - -export const allComponents = sortBy(all, 'label') - export const guides = [ { label: 'Axes', diff --git a/website/src/theming/theme.ts b/website/src/theming/theme.ts index 06006bb3ea..82c1d159dd 100644 --- a/website/src/theming/theme.ts +++ b/website/src/theming/theme.ts @@ -5,7 +5,7 @@ const dimensions = { headerHeight: 60, contentMargin: 30, contentMarginSmall: 20, - miniNavWidth: 80, + miniNavWidth: 60, miniNavItemSize: 56, } diff --git a/website/src/types.ts b/website/src/types.ts index 0323b49b6d..742f2ee97f 100644 --- a/website/src/types.ts +++ b/website/src/types.ts @@ -40,3 +40,15 @@ export interface ChartPropertiesGroup { name: string properties: ChartProperty[] } + +export interface ChartNavData { + name: string + id: string + tags: string[] + flavors: { + svg: true + html?: boolean + canvas?: boolean + api?: boolean + } +}