feat(annotations): add outline opacity

plouc · Dec 31, 2021 · 365f261 · 365f261
1 parent 9060197
commit 365f261
Show file tree

Hide file tree

Showing 13 changed files with 268 additions and 43 deletions.
diff --git 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 <animated.path fill="none" d={animatedPath} style={style} />

diff --git 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
@@ -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
@@ -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
@@ -114,23 +114,27 @@ declare module '@nivo/core' {
                 fill: string
                 outlineWidth: number
                 outlineColor: string
+                outlineOpacity: number
             } & Partial<Omit<React.CSSProperties, 'fill'>>
             link: {
                 stroke: string
                 strokeWidth: number
                 outlineWidth: number
                 outlineColor: string
+                outlineOpacity: number
             } & Partial<Omit<React.CSSProperties, 'stroke' | 'strokeWidth'>>
             outline: {
                 stroke: string
                 strokeWidth: number
                 outlineWidth: number
                 outlineColor: string
+                outlineOpacity: number
             } & Partial<Omit<React.CSSProperties, 'stroke' | 'strokeWidth'>>
             symbol: {
                 fill: string
                 outlineWidth: number
                 outlineColor: string
+                outlineOpacity: number
             } & Partial<Omit<React.CSSProperties, 'fill'>>
         }
     }

diff --git a/packages/core/src/theming/defaultTheme.js b/packages/core/src/theming/defaultTheme.js
@@ -99,24 +99,28 @@ 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',
             stroke: '#000000',
             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
@@ -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<Data = any, Body = any> {
+interface ApiTabsProps<Data, Body> {
     chartClass: string
     data: Data
     body: Body
@@ -25,7 +24,7 @@ export function ApiTabs<Data = any, Body = any>({
     isLoading,
     responseStatus,
     chartUrl,
-}: ApiTabsProps) {
+}: ApiTabsProps<Data, Body>) {
     const theme = useTheme()
 
     const [currentTab, setCurrentTab] = useState<Tab>('preview')
@@ -66,11 +65,6 @@ export function ApiTabs<Data = any, Body = any>({
     )
 }
 
-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
@@ -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 && (
-                <PropertyFlavors flavors={flavors} supportedFlavors={supportedFlavors} />
+                <PropertyFlavors flavors={flavors} supportedFlavors={supportedFlavors!} />
             )}
-            {showDescription && <PropertyDescription description={description} />}
+            {description && showDescription && <PropertyDescription description={description} />}
         </Container>
     )
 }

diff --git 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}
         >
-            <PropertyHeader id={id} {...property} />
+            <PropertyHeader id={id} {...property} context={context} />
             <Row>
                 <TextInput value={value} onChange={handleChange} isNumber={true} />
                 <svg width={size} height={size}>

diff --git 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}
             >
-                <PropertyHeader id={id} {...property} />
+                <PropertyHeader id={id} {...property} context={context} />
                 <Row>
                     <TextInput
                         id={id}