diff --git a/packages/annotations/src/AnnotationLink.tsx b/packages/annotations/src/AnnotationLink.tsx index f48e4c1a1a..75601e043a 100644 --- a/packages/annotations/src/AnnotationLink.tsx +++ b/packages/annotations/src/AnnotationLink.tsx @@ -32,6 +32,7 @@ export const AnnotationLink = ({ style.strokeWidth = theme.annotations.link.strokeWidth + theme.annotations.link.outlineWidth * 2 style.stroke = theme.annotations.link.outlineColor + style.opacity = theme.annotations.link.outlineOpacity } return diff --git a/packages/annotations/src/CircleAnnotationOutline.tsx b/packages/annotations/src/CircleAnnotationOutline.tsx index 51f6f129c1..e045375bfa 100644 --- a/packages/annotations/src/CircleAnnotationOutline.tsx +++ b/packages/annotations/src/CircleAnnotationOutline.tsx @@ -27,6 +27,7 @@ export const CircleAnnotationOutline = ({ x, y, size }: { x: number; y: number; theme.annotations.outline.strokeWidth + theme.annotations.outline.outlineWidth * 2, stroke: theme.annotations.outline.outlineColor, + opacity: theme.annotations.outline.outlineOpacity, }} /> )} diff --git a/packages/annotations/src/DotAnnotationOutline.tsx b/packages/annotations/src/DotAnnotationOutline.tsx index b07f1b37ff..9abfe85203 100644 --- a/packages/annotations/src/DotAnnotationOutline.tsx +++ b/packages/annotations/src/DotAnnotationOutline.tsx @@ -34,6 +34,7 @@ export const DotAnnotationOutline = ({ fill: 'none', strokeWidth: theme.annotations.outline.outlineWidth * 2, stroke: theme.annotations.outline.outlineColor, + opacity: theme.annotations.outline.outlineOpacity, }} /> )} diff --git a/packages/annotations/src/RectAnnotationOutline.tsx b/packages/annotations/src/RectAnnotationOutline.tsx index 10f5f6b204..0f742ec8df 100644 --- a/packages/annotations/src/RectAnnotationOutline.tsx +++ b/packages/annotations/src/RectAnnotationOutline.tsx @@ -43,6 +43,7 @@ export const RectAnnotationOutline = ({ theme.annotations.outline.strokeWidth + theme.annotations.outline.outlineWidth * 2, stroke: theme.annotations.outline.outlineColor, + opacity: theme.annotations.outline.outlineOpacity, }} /> )} diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts index 9057c0c6e6..61a5dd995c 100644 --- a/packages/core/index.d.ts +++ b/packages/core/index.d.ts @@ -114,23 +114,27 @@ declare module '@nivo/core' { fill: string outlineWidth: number outlineColor: string + outlineOpacity: number } & Partial> link: { stroke: string strokeWidth: number outlineWidth: number outlineColor: string + outlineOpacity: number } & Partial> outline: { stroke: string strokeWidth: number outlineWidth: number outlineColor: string + outlineOpacity: number } & Partial> symbol: { fill: string outlineWidth: number outlineColor: string + outlineOpacity: number } & Partial> } } diff --git a/packages/core/src/theming/defaultTheme.js b/packages/core/src/theming/defaultTheme.js index 6fab13331c..37ddd46baa 100644 --- a/packages/core/src/theming/defaultTheme.js +++ b/packages/core/src/theming/defaultTheme.js @@ -99,12 +99,14 @@ export const defaultTheme = { fontSize: 13, outlineWidth: 2, outlineColor: '#ffffff', + outlineOpacity: 1, }, link: { stroke: '#000000', strokeWidth: 1, outlineWidth: 2, outlineColor: '#ffffff', + outlineOpacity: 1, }, outline: { fill: 'none', @@ -112,11 +114,13 @@ export const defaultTheme = { strokeWidth: 2, outlineWidth: 2, outlineColor: '#ffffff', + outlineOpacity: 1, }, symbol: { fill: '#000000', outlineWidth: 2, outlineColor: '#ffffff', + outlineOpacity: 1, }, }, } diff --git a/website/src/components/components/api-client/ApiTabs.tsx b/website/src/components/components/api-client/ApiTabs.tsx index f971073bee..9dc129255e 100644 --- a/website/src/components/components/api-client/ApiTabs.tsx +++ b/website/src/components/components/api-client/ApiTabs.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import PropTypes from 'prop-types' import styled, { keyframes } from 'styled-components' import media from '../../../theming/mediaQueries' import { useTheme } from '../../../theming/context' @@ -9,7 +8,7 @@ import { ApiPreview } from './ApiPreview' const tabs = ['preview', 'body', 'data'] as const type Tab = typeof tabs[number] -interface ApiTabsProps { +interface ApiTabsProps { chartClass: string data: Data body: Body @@ -25,7 +24,7 @@ export function ApiTabs({ isLoading, responseStatus, chartUrl, -}: ApiTabsProps) { +}: ApiTabsProps) { const theme = useTheme() const [currentTab, setCurrentTab] = useState('preview') @@ -66,11 +65,6 @@ export function ApiTabs({ ) } -ApiTabs.propTypes = { - chartClass: PropTypes.string.isRequired, - data: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), -} - const Wrapper = styled.div` position: fixed; top: ${({ theme }) => theme.dimensions.headerHeight}px; diff --git a/website/src/components/controls/Control.tsx b/website/src/components/controls/Control.tsx index 0120766530..04a7c33526 100644 --- a/website/src/components/controls/Control.tsx +++ b/website/src/components/controls/Control.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback, ReactNode, PropsWithChildren } from 'react' +import React, { useState, useCallback, PropsWithChildren } from 'react' import intersection from 'lodash/intersection' import styled from 'styled-components' import { MdKeyboardArrowRight, MdKeyboardArrowDown } from 'react-icons/md' @@ -9,10 +9,10 @@ import { Cell } from './styled' interface ControlProps { id: string - description?: ReactNode + description?: string flavors: Flavor[] currentFlavor: Flavor - supportedFlavors: Flavor[] + supportedFlavors?: Flavor[] } export const Control = ({ @@ -47,9 +47,9 @@ export const Control = ({ )} {children} {showFlavors && ( - + )} - {showDescription && } + {description && showDescription && } ) } diff --git a/website/src/components/controls/OpacityControl.tsx b/website/src/components/controls/OpacityControl.tsx index b5fff36a9d..4ca15fa1cc 100644 --- a/website/src/components/controls/OpacityControl.tsx +++ b/website/src/components/controls/OpacityControl.tsx @@ -29,6 +29,7 @@ export const OpacityControl = ({ currentFlavor, value, onChange, + context, }: OpacityControlProps) => { const theme = useTheme() const handleChange = useCallback( @@ -46,7 +47,7 @@ export const OpacityControl = ({ currentFlavor={currentFlavor} supportedFlavors={property.flavors} > - + diff --git a/website/src/components/controls/RangeControl.tsx b/website/src/components/controls/RangeControl.tsx index f32b84b0ad..bc344b2ab6 100644 --- a/website/src/components/controls/RangeControl.tsx +++ b/website/src/components/controls/RangeControl.tsx @@ -20,7 +20,16 @@ interface RangeControlProps { } export const RangeControl = memo( - ({ id, property, flavors, currentFlavor, config, value, onChange }: RangeControlProps) => { + ({ + id, + property, + flavors, + currentFlavor, + config, + value, + onChange, + context, + }: RangeControlProps) => { const handleChange = useCallback(event => onChange(Number(event.target.value)), [onChange]) return ( @@ -31,7 +40,7 @@ export const RangeControl = memo( currentFlavor={currentFlavor} supportedFlavors={property.flavors} > - + { { id: 'E', value: 23 }, ]} theme={theme} + colorBy="indexValue" animate={false} axisBottom={{ legend: 'X axis legend', @@ -347,7 +543,9 @@ const Nav = styled.nav` `} ` -const NavItem = styled.span` +const NavItem = styled.span<{ + isCurrent: boolean +}>` cursor: pointer; height: 46px; display: flex; @@ -413,4 +611,5 @@ const Code = styled.pre` font-size: 0.8rem; line-height: 1.7; padding: 12px 20px; + overflow-y: auto; ` diff --git a/website/src/theming/theme.ts b/website/src/theming/theme.ts index cdeb5fde9e..139e4bdff7 100644 --- a/website/src/theming/theme.ts +++ b/website/src/theming/theme.ts @@ -96,22 +96,27 @@ const lightTheme: DefaultTheme = { fill: '#333333', outlineWidth: 1.5, outlineColor: '#ffffff', + outlineOpacity: 0.35, }, link: { stroke: '#6c6363', - outlineWidth: 2, + strokeWidth: 1.5, + outlineWidth: 2.5, outlineColor: '#ffffff', + outlineOpacity: 0.35, }, outline: { stroke: '#6c6363', strokeWidth: 1.5, - outlineWidth: 2, + outlineWidth: 2.5, outlineColor: '#ffffff', + outlineOpacity: 0.35, }, symbol: { fill: '#6c6363', - outlineWidth: 2, + outlineWidth: 2.5, outlineColor: '#ffffff', + outlineOpacity: 0.35, }, }, }, @@ -219,22 +224,27 @@ const darkTheme: DefaultTheme = { fill: '#dddddd', outlineWidth: 1.5, outlineColor: '#0e1317', + outlineOpacity: 0.35, }, link: { - stroke: '#8093a4', - outlineWidth: 2, + stroke: '#b2bfcb', + strokeWidth: 1.5, + outlineWidth: 2.5, outlineColor: '#0e1317', + outlineOpacity: 0.35, }, outline: { - stroke: '#8093a4', + stroke: '#b2bfcb', strokeWidth: 1.5, - outlineWidth: 2, + outlineWidth: 2.5, outlineColor: '#0e1317', + outlineOpacity: 0.35, }, symbol: { - fill: '#8093a4', + fill: '#b2bfcb', outlineWidth: 2, outlineColor: '#0e1317', + outlineOpacity: 0.35, }, }, }, diff --git a/website/src/types.ts b/website/src/types.ts index 8d5f5a4f75..0323b49b6d 100644 --- a/website/src/types.ts +++ b/website/src/types.ts @@ -18,15 +18,15 @@ export interface ChartProperty { // type of the property, preferably expressed with TypeScript notation type: string // will be parsed in Markdown and supports links - help: string + help?: string // will be parsed in Markdown and supports links description?: string // assumed to be optional by default - required: boolean + required?: boolean // default property value as defined for the component, // default props should be exported by nivo packages defaultValue?: any - flavors: Flavor[] + flavors?: Flavor[] // disable the control when the current chart flavor doesn't match enableControlForFlavors?: Flavor[] // not used at the moment, indicate that a property is just used