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
+ }
+}