Skip to content

Commit

Permalink
feat(website): improve typings of charts props documentation
Browse files Browse the repository at this point in the history
plouc committed Sep 1, 2021
1 parent 1494170 commit ace1a66
Showing 41 changed files with 932 additions and 527 deletions.
22 changes: 15 additions & 7 deletions packages/sankey/src/hooks.ts
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ import {
SankeySortFunction,
} from './types'

const getId = (d: { id: string }) => d.id
const getId = <N extends DefaultNode>(node: N) => node.id

export const computeNodeAndLinks = <N extends DefaultNode, L extends DefaultLink>({
data: _data,
@@ -36,8 +36,8 @@ export const computeNodeAndLinks = <N extends DefaultNode, L extends DefaultLink
formatValue: (value: number) => string
layout: SankeyCommonProps<N, L>['layout']
alignFunction: SankeyAlignFunction
sortFunction: SankeySortFunction
linkSortMode: any
sortFunction: null | undefined | SankeySortFunction<N, L>
linkSortMode: null | undefined
nodeThickness: SankeyCommonProps<N, L>['nodeThickness']
nodeSpacing: SankeyCommonProps<N, L>['nodeSpacing']
nodeInnerPadding: SankeyCommonProps<N, L>['nodeInnerPadding']
@@ -48,8 +48,9 @@ export const computeNodeAndLinks = <N extends DefaultNode, L extends DefaultLink
}) => {
const sankey = d3Sankey()
.nodeAlign(alignFunction)
// @ts-ignore: this method signature is incorrect in current @types/d3-sankey
.nodeSort(sortFunction)
// @ts-ignore: this method is not available in @types/d3-sankey
// @ts-ignore: this method is not available in current @types/d3-sankey
.linkSort(linkSortMode)
.nodeWidth(nodeThickness)
.nodePadding(nodeSpacing)
@@ -147,8 +148,12 @@ export const useSankey = <N extends DefaultNode, L extends DefaultLink>({
const sortFunction = useMemo(() => {
if (sort === 'auto') return undefined
if (sort === 'input') return null
if (sort === 'ascending') return (a, b) => a.value - b.value
if (sort === 'descending') return (a, b) => b.value - a.value
if (sort === 'ascending') {
return (a: SankeyNodeDatum<N, L>, b: SankeyNodeDatum<N, L>) => a.value - b.value
}
if (sort === 'descending') {
return (a: SankeyNodeDatum<N, L>, b: SankeyNodeDatum<N, L>) => b.value - a.value
}

return sort
}, [sort])
@@ -157,7 +162,10 @@ export const useSankey = <N extends DefaultNode, L extends DefaultLink>({
// (In d3, `null` means input sorting and `undefined` is the default)
const linkSortMode = sort === 'input' ? null : undefined

const alignFunction = useMemo(() => sankeyAlignmentFromProp(align), [align])
const alignFunction = useMemo(() => {
if (typeof align === 'function') return align
return sankeyAlignmentFromProp(align)
}, [align])

const theme = useTheme()

8 changes: 4 additions & 4 deletions packages/sankey/src/types.ts
Original file line number Diff line number Diff line change
@@ -97,9 +97,9 @@ export type SankeyAlignType = 'center' | 'justify' | 'start' | 'end'
export type SankeyAlignFunction = (node: SankeyNodeMinimal<any, any>, n: number) => number

export type SankeySortType = 'auto' | 'input' | 'ascending' | 'descending'
export type SankeySortFunction = (
a: SankeyNodeMinimal<any, any>,
b: SankeyNodeMinimal<any, any>
export type SankeySortFunction<N extends DefaultNode, L extends DefaultLink> = (
a: SankeyNodeDatum<N, L>,
b: SankeyNodeDatum<N, L>
) => number

export interface SankeyCommonProps<N extends DefaultNode, L extends DefaultLink> {
@@ -108,7 +108,7 @@ export interface SankeyCommonProps<N extends DefaultNode, L extends DefaultLink>

layout: 'horizontal' | 'vertical'
align: SankeyAlignType | SankeyAlignFunction
sort: SankeySortType | SankeySortFunction
sort: SankeySortType | SankeySortFunction<N, L>

layers: SankeyLayerId[]

4 changes: 2 additions & 2 deletions website/src/components/components/ComponentTemplate.tsx
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ import { ComponentTabs } from './ComponentTabs'
import { ActionsLogger, useActionsLogger } from './ActionsLogger'
import ComponentSettings from './ComponentSettings'
import { Stories } from './Stories'
import { ChartMeta, Flavor } from '../../types'
import { ChartMeta, ChartProperty, Flavor } from '../../types'

interface ComponentTemplateProps<P extends object, D> {
name: string
@@ -25,7 +25,7 @@ interface ComponentTemplateProps<P extends object, D> {
currentFlavor: Flavor
properties: {
name: string
properties: any[]
properties: ChartProperty[]
}[]
// initial props of the demo
initialProperties: Partial<P>
8 changes: 2 additions & 6 deletions website/src/components/controls/AngleControl.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { memo, useCallback } from 'react'
import styled from 'styled-components'
import { Flavor } from '../../types'
import { AngleControlAttrs, Flavor } from '../../types'
import { Control } from './Control'
import { PropertyHeader } from './PropertyHeader'
import { TextInput } from './TextInput'
@@ -22,11 +22,7 @@ interface AngleControlProps {
flavors: Flavor[]
currentFlavor: Flavor
value: number
options: {
start?: number
min?: number
max?: number
}
options: AngleControlAttrs['controlOptions']
onChange: (v: number) => void
}

102 changes: 0 additions & 102 deletions website/src/components/controls/ColorsControl.js

This file was deleted.

104 changes: 104 additions & 0 deletions website/src/components/controls/ColorsControl.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import React, { useCallback } from 'react'
import range from 'lodash/range'
import {
colorSchemeIds,
colorSchemes,
colorInterpolatorIds,
colorInterpolators,
} from '@nivo/colors'
import { components } from 'react-select'
import { ColorsControlItem } from './ColorsControlItem'
import { Control } from './Control'
import { PropertyHeader } from './PropertyHeader'
import { Help } from './Help'
import Select from './Select'
import { ChartProperty, Flavor } from '../../types'

const colors = colorSchemeIds.map(id => ({
id,
colors: colorSchemes[id],
}))

const sequentialColors = colorInterpolatorIds.map(id => ({
id: `seq:${id}`,
colors: range(0, 1, 0.05).map(t => colorInterpolators[id](t)),
}))

const SingleValue = props => {
return (
<components.SingleValue {...props}>
<ColorsControlItem id={props.data.label} colors={props.data.colors} />
</components.SingleValue>
)
}

const Option = props => {
return (
<components.Option {...props}>
<ColorsControlItem id={props.value} colors={props.data.colors} />
</components.Option>
)
}

interface ColorsControlProps {
id: string
property: ChartProperty
flavors: Flavor[]
currentFlavor: Flavor
onChange: any
value: string
options?: {
includeSequential?: boolean
}
}

export const ColorsControl = ({
id,
property,
flavors,
currentFlavor,
value,
options: controlOptions = {},
onChange,
}: ColorsControlProps) => {
const handleChange = useCallback(
value => {
onChange(value.value)
},
[onChange]
)

let options = colors
if (controlOptions.includeSequential === true) {
options = options.concat(sequentialColors)
}
options = options.map(({ id, colors }) => ({
label: id,
value: id,
colors,
}))
const selectedOption = options.find(o => o.value === value)

return (
<Control
id={id}
description={property.description}
flavors={flavors}
currentFlavor={currentFlavor}
supportedFlavors={property.flavors}
>
<PropertyHeader {...property} />
<Select
options={options}
onChange={handleChange}
value={selectedOption}
isSearchable
components={{
SingleValue,
Option,
}}
/>
<Help>{property.help}</Help>
</Control>
)
}
Loading

0 comments on commit ace1a66

Please sign in to comment.