Skip to content

Commit 365f261

Browse files
ploucplouc
committedDec 31, 2021
feat(annotations): add outline opacity
·
v0.88.0v0.77.0
1 parent 9060197 commit 365f261

File tree

13 files changed

+268
-43
lines changed

13 files changed

+268
-43
lines changed
 

‎packages/annotations/src/AnnotationLink.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const AnnotationLink = ({
3232
style.strokeWidth =
3333
theme.annotations.link.strokeWidth + theme.annotations.link.outlineWidth * 2
3434
style.stroke = theme.annotations.link.outlineColor
35+
style.opacity = theme.annotations.link.outlineOpacity
3536
}
3637

3738
return <animated.path fill="none" d={animatedPath} style={style} />

‎packages/annotations/src/CircleAnnotationOutline.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const CircleAnnotationOutline = ({ x, y, size }: { x: number; y: number;
2727
theme.annotations.outline.strokeWidth +
2828
theme.annotations.outline.outlineWidth * 2,
2929
stroke: theme.annotations.outline.outlineColor,
30+
opacity: theme.annotations.outline.outlineOpacity,
3031
}}
3132
/>
3233
)}

‎packages/annotations/src/DotAnnotationOutline.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const DotAnnotationOutline = ({
3434
fill: 'none',
3535
strokeWidth: theme.annotations.outline.outlineWidth * 2,
3636
stroke: theme.annotations.outline.outlineColor,
37+
opacity: theme.annotations.outline.outlineOpacity,
3738
}}
3839
/>
3940
)}

‎packages/annotations/src/RectAnnotationOutline.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export const RectAnnotationOutline = ({
4343
theme.annotations.outline.strokeWidth +
4444
theme.annotations.outline.outlineWidth * 2,
4545
stroke: theme.annotations.outline.outlineColor,
46+
opacity: theme.annotations.outline.outlineOpacity,
4647
}}
4748
/>
4849
)}

‎packages/core/index.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -114,23 +114,27 @@ declare module '@nivo/core' {
114114
fill: string
115115
outlineWidth: number
116116
outlineColor: string
117+
outlineOpacity: number
117118
} & Partial<Omit<React.CSSProperties, 'fill'>>
118119
link: {
119120
stroke: string
120121
strokeWidth: number
121122
outlineWidth: number
122123
outlineColor: string
124+
outlineOpacity: number
123125
} & Partial<Omit<React.CSSProperties, 'stroke' | 'strokeWidth'>>
124126
outline: {
125127
stroke: string
126128
strokeWidth: number
127129
outlineWidth: number
128130
outlineColor: string
131+
outlineOpacity: number
129132
} & Partial<Omit<React.CSSProperties, 'stroke' | 'strokeWidth'>>
130133
symbol: {
131134
fill: string
132135
outlineWidth: number
133136
outlineColor: string
137+
outlineOpacity: number
134138
} & Partial<Omit<React.CSSProperties, 'fill'>>
135139
}
136140
}

‎packages/core/src/theming/defaultTheme.js

+4
Original file line numberDiff line numberDiff line change
@@ -99,24 +99,28 @@ export const defaultTheme = {
9999
fontSize: 13,
100100
outlineWidth: 2,
101101
outlineColor: '#ffffff',
102+
outlineOpacity: 1,
102103
},
103104
link: {
104105
stroke: '#000000',
105106
strokeWidth: 1,
106107
outlineWidth: 2,
107108
outlineColor: '#ffffff',
109+
outlineOpacity: 1,
108110
},
109111
outline: {
110112
fill: 'none',
111113
stroke: '#000000',
112114
strokeWidth: 2,
113115
outlineWidth: 2,
114116
outlineColor: '#ffffff',
117+
outlineOpacity: 1,
115118
},
116119
symbol: {
117120
fill: '#000000',
118121
outlineWidth: 2,
119122
outlineColor: '#ffffff',
123+
outlineOpacity: 1,
120124
},
121125
},
122126
}

‎website/src/components/components/api-client/ApiTabs.tsx

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useState } from 'react'
2-
import PropTypes from 'prop-types'
32
import styled, { keyframes } from 'styled-components'
43
import media from '../../../theming/mediaQueries'
54
import { useTheme } from '../../../theming/context'
@@ -9,7 +8,7 @@ import { ApiPreview } from './ApiPreview'
98
const tabs = ['preview', 'body', 'data'] as const
109
type Tab = typeof tabs[number]
1110

12-
interface ApiTabsProps<Data = any, Body = any> {
11+
interface ApiTabsProps<Data, Body> {
1312
chartClass: string
1413
data: Data
1514
body: Body
@@ -25,7 +24,7 @@ export function ApiTabs<Data = any, Body = any>({
2524
isLoading,
2625
responseStatus,
2726
chartUrl,
28-
}: ApiTabsProps) {
27+
}: ApiTabsProps<Data, Body>) {
2928
const theme = useTheme()
3029

3130
const [currentTab, setCurrentTab] = useState<Tab>('preview')
@@ -66,11 +65,6 @@ export function ApiTabs<Data = any, Body = any>({
6665
)
6766
}
6867

69-
ApiTabs.propTypes = {
70-
chartClass: PropTypes.string.isRequired,
71-
data: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
72-
}
73-
7468
const Wrapper = styled.div`
7569
position: fixed;
7670
top: ${({ theme }) => theme.dimensions.headerHeight}px;

‎website/src/components/controls/Control.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useCallback, ReactNode, PropsWithChildren } from 'react'
1+
import React, { useState, useCallback, PropsWithChildren } from 'react'
22
import intersection from 'lodash/intersection'
33
import styled from 'styled-components'
44
import { MdKeyboardArrowRight, MdKeyboardArrowDown } from 'react-icons/md'
@@ -9,10 +9,10 @@ import { Cell } from './styled'
99

1010
interface ControlProps {
1111
id: string
12-
description?: ReactNode
12+
description?: string
1313
flavors: Flavor[]
1414
currentFlavor: Flavor
15-
supportedFlavors: Flavor[]
15+
supportedFlavors?: Flavor[]
1616
}
1717

1818
export const Control = ({
@@ -47,9 +47,9 @@ export const Control = ({
4747
)}
4848
{children}
4949
{showFlavors && (
50-
<PropertyFlavors flavors={flavors} supportedFlavors={supportedFlavors} />
50+
<PropertyFlavors flavors={flavors} supportedFlavors={supportedFlavors!} />
5151
)}
52-
{showDescription && <PropertyDescription description={description} />}
52+
{description && showDescription && <PropertyDescription description={description} />}
5353
</Container>
5454
)
5555
}

‎website/src/components/controls/OpacityControl.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const OpacityControl = ({
2929
currentFlavor,
3030
value,
3131
onChange,
32+
context,
3233
}: OpacityControlProps) => {
3334
const theme = useTheme()
3435
const handleChange = useCallback(
@@ -46,7 +47,7 @@ export const OpacityControl = ({
4647
currentFlavor={currentFlavor}
4748
supportedFlavors={property.flavors}
4849
>
49-
<PropertyHeader id={id} {...property} />
50+
<PropertyHeader id={id} {...property} context={context} />
5051
<Row>
5152
<TextInput value={value} onChange={handleChange} isNumber={true} />
5253
<svg width={size} height={size}>

‎website/src/components/controls/RangeControl.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,16 @@ interface RangeControlProps {
2020
}
2121

2222
export const RangeControl = memo(
23-
({ id, property, flavors, currentFlavor, config, value, onChange }: RangeControlProps) => {
23+
({
24+
id,
25+
property,
26+
flavors,
27+
currentFlavor,
28+
config,
29+
value,
30+
onChange,
31+
context,
32+
}: RangeControlProps) => {
2433
const handleChange = useCallback(event => onChange(Number(event.target.value)), [onChange])
2534

2635
return (
@@ -31,7 +40,7 @@ export const RangeControl = memo(
3140
currentFlavor={currentFlavor}
3241
supportedFlavors={property.flavors}
3342
>
34-
<PropertyHeader id={id} {...property} />
43+
<PropertyHeader id={id} {...property} context={context} />
3544
<Row>
3645
<TextInput
3746
id={id}

‎website/src/pages/guides/theming.tsx

+215-16
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@ import {
77
} from '@nivo/core'
88
import { ResponsiveBar } from '@nivo/bar'
99
import { ResponsiveLine } from '@nivo/line'
10-
// @ts-ignore
1110
import Layout from '../../components/Layout'
1211
import { Seo } from '../../components/Seo'
1312
import { ComponentPage } from '../../components/components/ComponentPage'
1413
import { ComponentHeader } from '../../components/components/ComponentHeader'
1514
import { Markdown } from '../../components/Markdown'
1615
import { ComponentSettings } from '../../components/components/ComponentSettings'
1716
import media from '../../theming/mediaQueries'
18-
import { ChartProperty } from '../../types'
17+
import { ChartPropertiesGroup } from '../../types'
1918

2019
const initialTheme: Theme = {
2120
background: '#ffffff', // defaultTheme.background,
@@ -41,30 +40,61 @@ const initialTheme: Theme = {
4140
strokeWidth: defaultTheme.grid.line.strokeWidth,
4241
},
4342
},
43+
annotations: {
44+
text: {
45+
fontSize: defaultTheme.annotations.text.fontSize,
46+
outlineWidth: defaultTheme.annotations.text.outlineWidth,
47+
outlineColor: defaultTheme.annotations.text.outlineColor,
48+
outlineOpacity: defaultTheme.annotations.text.outlineOpacity,
49+
},
50+
link: {
51+
stroke: defaultTheme.annotations.link.stroke,
52+
strokeWidth: defaultTheme.annotations.link.strokeWidth,
53+
outlineWidth: defaultTheme.annotations.link.outlineWidth,
54+
outlineColor: defaultTheme.annotations.link.outlineColor,
55+
outlineOpacity: defaultTheme.annotations.link.outlineOpacity,
56+
},
57+
outline: {
58+
stroke: defaultTheme.annotations.outline.stroke,
59+
strokeWidth: defaultTheme.annotations.outline.strokeWidth,
60+
outlineWidth: defaultTheme.annotations.outline.outlineWidth,
61+
outlineColor: defaultTheme.annotations.outline.outlineColor,
62+
outlineOpacity: defaultTheme.annotations.outline.outlineOpacity,
63+
},
64+
symbol: {
65+
fill: defaultTheme.annotations.symbol.fill,
66+
outlineWidth: defaultTheme.annotations.symbol.outlineWidth,
67+
outlineColor: defaultTheme.annotations.symbol.outlineColor,
68+
outlineOpacity: defaultTheme.annotations.symbol.outlineOpacity,
69+
},
70+
},
4471
}
4572

46-
const controlGroups: {
47-
name: string
48-
group: string
49-
properties: ChartProperty[]
50-
}[] = [
73+
const controlGroups: ChartPropertiesGroup[] = [
5174
{
52-
name: 'Theme',
53-
group: 'Theme',
75+
name: 'Base',
5476
properties: [
5577
{
78+
group: 'Theme',
79+
key: 'background',
5680
name: 'background',
81+
type: 'string',
5782
help: 'main background color.',
5883
control: { type: 'colorPicker' },
5984
},
6085
{
86+
group: 'Theme',
87+
key: 'textColor',
6188
name: 'textColor',
89+
type: 'string',
6290
help: 'main text color.',
6391
control: { type: 'colorPicker' },
6492
},
65-
// fontFamily: 'sans-serif',
6693
{
94+
group: 'Theme',
95+
key: 'fontSize',
6796
name: 'fontSize',
97+
type: 'number',
6898
help: 'main font size.',
6999
control: {
70100
type: 'range',
@@ -73,30 +103,40 @@ const controlGroups: {
73103
max: 36,
74104
},
75105
},
106+
],
107+
},
108+
{
109+
name: 'Axes & Grid',
110+
properties: [
76111
{
112+
group: 'Theme',
113+
key: 'axis',
77114
name: 'axis',
115+
type: 'object',
78116
control: {
79117
type: 'object',
80118
isOpenedByDefault: true,
81119
props: [
82120
{
83121
key: 'ticks',
122+
type: 'object',
84123
control: {
85124
type: 'object',
86-
isOpenedByDefault: true,
87125
props: [
88126
{
89127
key: 'line',
128+
type: 'object',
90129
control: {
91130
type: 'object',
92-
isOpenedByDefault: true,
93131
props: [
94132
{
95133
key: 'strokeWidth',
134+
type: 'number',
96135
control: { type: 'lineWidth' },
97136
},
98137
{
99138
key: 'stroke',
139+
type: 'string',
100140
control: { type: 'colorPicker' },
101141
},
102142
],
@@ -107,22 +147,24 @@ const controlGroups: {
107147
},
108148
{
109149
key: 'domain',
150+
type: 'object',
110151
control: {
111152
type: 'object',
112-
isOpenedByDefault: true,
113153
props: [
114154
{
115155
key: 'line',
156+
type: 'object',
116157
control: {
117158
type: 'object',
118-
isOpenedByDefault: true,
119159
props: [
120160
{
121161
key: 'strokeWidth',
162+
type: 'number',
122163
control: { type: 'lineWidth' },
123164
},
124165
{
125166
key: 'stroke',
167+
type: 'string',
126168
control: { type: 'colorPicker' },
127169
},
128170
],
@@ -135,25 +177,178 @@ const controlGroups: {
135177
},
136178
},
137179
{
180+
group: 'Theme',
181+
key: 'grid',
138182
name: 'grid',
183+
type: 'object',
139184
control: {
140185
type: 'object',
141186
isOpenedByDefault: true,
142187
props: [
143188
{
144189
key: 'line',
190+
type: 'object',
191+
control: {
192+
type: 'object',
193+
props: [
194+
{
195+
key: 'stroke',
196+
type: 'string',
197+
control: { type: 'colorPicker' },
198+
},
199+
{
200+
key: 'strokeWidth',
201+
type: 'number',
202+
control: { type: 'lineWidth' },
203+
},
204+
],
205+
},
206+
},
207+
],
208+
},
209+
},
210+
],
211+
},
212+
{
213+
name: 'Annotations',
214+
properties: [
215+
{
216+
group: 'Theme',
217+
key: 'annotations',
218+
name: 'annotations',
219+
type: 'object',
220+
control: {
221+
type: 'object',
222+
isOpenedByDefault: true,
223+
props: [
224+
{
225+
key: 'text',
226+
type: 'object',
227+
control: {
228+
type: 'object',
229+
props: [
230+
{
231+
key: 'fontSize',
232+
type: 'number',
233+
control: {
234+
type: 'range',
235+
unit: 'px',
236+
min: 6,
237+
max: 36,
238+
},
239+
},
240+
{
241+
key: 'outlineWidth',
242+
type: 'number',
243+
control: { type: 'lineWidth' },
244+
},
245+
{
246+
key: 'outlineColor',
247+
type: 'string',
248+
control: { type: 'colorPicker' },
249+
},
250+
{
251+
key: 'outlineOpacity',
252+
type: 'number',
253+
control: { type: 'opacity' },
254+
},
255+
],
256+
},
257+
},
258+
{
259+
key: 'link',
260+
type: 'object',
261+
control: {
262+
type: 'object',
263+
props: [
264+
{
265+
key: 'stroke',
266+
type: 'string',
267+
control: { type: 'colorPicker' },
268+
},
269+
{
270+
key: 'strokeWidth',
271+
type: 'number',
272+
control: { type: 'lineWidth' },
273+
},
274+
{
275+
key: 'outlineWidth',
276+
type: 'number',
277+
control: { type: 'lineWidth' },
278+
},
279+
{
280+
key: 'outlineColor',
281+
type: 'string',
282+
control: { type: 'colorPicker' },
283+
},
284+
{
285+
key: 'outlineOpacity',
286+
type: 'number',
287+
control: { type: 'opacity' },
288+
},
289+
],
290+
},
291+
},
292+
{
293+
key: 'outline',
294+
type: 'object',
145295
control: {
146296
type: 'object',
147-
isOpenedByDefault: true,
148297
props: [
149298
{
150299
key: 'stroke',
300+
type: 'string',
151301
control: { type: 'colorPicker' },
152302
},
153303
{
154304
key: 'strokeWidth',
305+
type: 'number',
155306
control: { type: 'lineWidth' },
156307
},
308+
{
309+
key: 'outlineWidth',
310+
type: 'number',
311+
control: { type: 'lineWidth' },
312+
},
313+
{
314+
key: 'outlineColor',
315+
type: 'string',
316+
control: { type: 'colorPicker' },
317+
},
318+
{
319+
key: 'outlineOpacity',
320+
type: 'number',
321+
control: { type: 'opacity' },
322+
},
323+
],
324+
},
325+
},
326+
{
327+
key: 'symbol',
328+
type: 'object',
329+
control: {
330+
type: 'object',
331+
props: [
332+
{
333+
key: 'fill',
334+
type: 'string',
335+
control: { type: 'colorPicker' },
336+
},
337+
{
338+
key: 'outlineWidth',
339+
type: 'number',
340+
control: { type: 'lineWidth' },
341+
},
342+
{
343+
key: 'outlineColor',
344+
type: 'string',
345+
control: { type: 'colorPicker' },
346+
},
347+
{
348+
key: 'outlineOpacity',
349+
type: 'number',
350+
control: { type: 'opacity' },
351+
},
157352
],
158353
},
159354
},
@@ -221,6 +416,7 @@ const Theming = () => {
221416
{ id: 'E', value: 23 },
222417
]}
223418
theme={theme}
419+
colorBy="indexValue"
224420
animate={false}
225421
axisBottom={{
226422
legend: 'X axis legend',
@@ -347,7 +543,9 @@ const Nav = styled.nav`
347543
`}
348544
`
349545

350-
const NavItem = styled.span`
546+
const NavItem = styled.span<{
547+
isCurrent: boolean
548+
}>`
351549
cursor: pointer;
352550
height: 46px;
353551
display: flex;
@@ -413,4 +611,5 @@ const Code = styled.pre`
413611
font-size: 0.8rem;
414612
line-height: 1.7;
415613
padding: 12px 20px;
614+
overflow-y: auto;
416615
`

‎website/src/theming/theme.ts

+18-8
Original file line numberDiff line numberDiff line change
@@ -96,22 +96,27 @@ const lightTheme: DefaultTheme = {
9696
fill: '#333333',
9797
outlineWidth: 1.5,
9898
outlineColor: '#ffffff',
99+
outlineOpacity: 0.35,
99100
},
100101
link: {
101102
stroke: '#6c6363',
102-
outlineWidth: 2,
103+
strokeWidth: 1.5,
104+
outlineWidth: 2.5,
103105
outlineColor: '#ffffff',
106+
outlineOpacity: 0.35,
104107
},
105108
outline: {
106109
stroke: '#6c6363',
107110
strokeWidth: 1.5,
108-
outlineWidth: 2,
111+
outlineWidth: 2.5,
109112
outlineColor: '#ffffff',
113+
outlineOpacity: 0.35,
110114
},
111115
symbol: {
112116
fill: '#6c6363',
113-
outlineWidth: 2,
117+
outlineWidth: 2.5,
114118
outlineColor: '#ffffff',
119+
outlineOpacity: 0.35,
115120
},
116121
},
117122
},
@@ -219,22 +224,27 @@ const darkTheme: DefaultTheme = {
219224
fill: '#dddddd',
220225
outlineWidth: 1.5,
221226
outlineColor: '#0e1317',
227+
outlineOpacity: 0.35,
222228
},
223229
link: {
224-
stroke: '#8093a4',
225-
outlineWidth: 2,
230+
stroke: '#b2bfcb',
231+
strokeWidth: 1.5,
232+
outlineWidth: 2.5,
226233
outlineColor: '#0e1317',
234+
outlineOpacity: 0.35,
227235
},
228236
outline: {
229-
stroke: '#8093a4',
237+
stroke: '#b2bfcb',
230238
strokeWidth: 1.5,
231-
outlineWidth: 2,
239+
outlineWidth: 2.5,
232240
outlineColor: '#0e1317',
241+
outlineOpacity: 0.35,
233242
},
234243
symbol: {
235-
fill: '#8093a4',
244+
fill: '#b2bfcb',
236245
outlineWidth: 2,
237246
outlineColor: '#0e1317',
247+
outlineOpacity: 0.35,
238248
},
239249
},
240250
},

‎website/src/types.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ export interface ChartProperty<Settings = any> {
1818
// type of the property, preferably expressed with TypeScript notation
1919
type: string
2020
// will be parsed in Markdown and supports links
21-
help: string
21+
help?: string
2222
// will be parsed in Markdown and supports links
2323
description?: string
2424
// assumed to be optional by default
25-
required: boolean
25+
required?: boolean
2626
// default property value as defined for the component,
2727
// default props should be exported by nivo packages
2828
defaultValue?: any
29-
flavors: Flavor[]
29+
flavors?: Flavor[]
3030
// disable the control when the current chart flavor doesn't match
3131
enableControlForFlavors?: Flavor[]
3232
// not used at the moment, indicate that a property is just used

0 commit comments

Comments
 (0)
Please sign in to comment.