@@ -38,7 +45,7 @@ const renderValue = value => {
)
}
-const QuantizeColorsControl = ({
+export const QuantizeColorsControl = ({
id,
property,
flavors,
@@ -47,7 +54,7 @@ const QuantizeColorsControl = ({
onChange,
}: QuantizeColorsControlProps) => {
const handleColorsChange = useCallback(
- value => {
+ (value: { value: string }) => {
onChange(value.value)
},
[onChange]
@@ -78,5 +85,3 @@ const QuantizeColorsControl = ({
)
}
-
-export default QuantizeColorsControl
diff --git a/website/src/components/controls/RadioControl.tsx b/website/src/components/controls/RadioControl.tsx
index 8dd899b51b..a2dcfaf0c9 100644
--- a/website/src/components/controls/RadioControl.tsx
+++ b/website/src/components/controls/RadioControl.tsx
@@ -3,42 +3,36 @@ import { Control } from './Control'
import { PropertyHeader } from './PropertyHeader'
import { Help } from './Help'
import { Radio } from './Radio'
+import { ChartProperty, Flavor } from '../../types'
+import { RadioControlConfig } from './types'
interface RadioControlProps {
- /*
- id: PropTypes.string.isRequired,
- property: PropTypes.object.isRequired,
- flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
- currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
- value: PropTypes.string.isRequired,
- options: PropTypes.shape({
- choices: PropTypes.arrayOf(
- PropTypes.shape({
- value: PropTypes.string.isRequired,
- label: PropTypes.string.isRequired,
- })
- ).isRequired,
- }).isRequired,
- onChange: PropTypes.func.isRequired,
- */
+ id: string
+ property: ChartProperty
+ flavors: Flavor[]
+ currentFlavor: Flavor
+ value: string
+ config: RadioControlConfig
+ onChange: (value: string) => void
+ context?: any
}
-const RadioControl = memo(({ id, property, flavors, currentFlavor, options, value, onChange }) => {
- const handleUpdate = useCallback(event => onChange(event.target.value), [onChange])
+export const RadioControl = memo(
+ ({ id, property, flavors, currentFlavor, config, value, onChange }: RadioControlProps) => {
+ const handleUpdate = useCallback(event => onChange(event.target.value), [onChange])
- return (
-
-
-
- {property.help}
-
- )
-})
-
-export default RadioControl
+ return (
+
+
+
+ {property.help}
+
+ )
+ }
+)
diff --git a/website/src/components/controls/RangeControl.tsx b/website/src/components/controls/RangeControl.tsx
index fa7d3946e8..f32b84b0ad 100644
--- a/website/src/components/controls/RangeControl.tsx
+++ b/website/src/components/controls/RangeControl.tsx
@@ -6,6 +6,7 @@ import { TextInput } from './TextInput'
import { PropertyHeader } from './PropertyHeader'
import { Help } from './Help'
import { Flavor } from '../../types'
+import { RangeControlConfig } from './types'
interface RangeControlProps {
id: string
@@ -14,16 +15,12 @@ interface RangeControlProps {
currentFlavor: Flavor
value: number
onChange: (value: number) => void
- options: {
- unit: 'px' | '°'
- min: number
- max: number
- step?: number
- }
+ config: RangeControlConfig
+ context?: any
}
export const RangeControl = memo(
- ({ id, property, flavors, currentFlavor, options, value, onChange }: RangeControlProps) => {
+ ({ id, property, flavors, currentFlavor, config, value, onChange }: RangeControlProps) => {
const handleChange = useCallback(event => onChange(Number(event.target.value)), [onChange])
return (
@@ -39,7 +36,7 @@ export const RangeControl = memo(
@@ -47,7 +44,7 @@ export const RangeControl = memo(
type="range"
value={value}
onChange={handleChange}
- {...pick(options, ['min', 'max', 'step'])}
+ {...pick(config, ['min', 'max', 'step'])}
/>
{property.help}
diff --git a/website/src/components/controls/Select.js b/website/src/components/controls/Select.tsx
similarity index 100%
rename from website/src/components/controls/Select.js
rename to website/src/components/controls/Select.tsx
diff --git a/website/src/components/controls/SwitchableRangeControl.tsx b/website/src/components/controls/SwitchableRangeControl.tsx
index fa0e7114e0..eec7a7001b 100644
--- a/website/src/components/controls/SwitchableRangeControl.tsx
+++ b/website/src/components/controls/SwitchableRangeControl.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useCallback, useState, ChangeEvent } from 'react'
import styled from 'styled-components'
import pick from 'lodash/pick'
import { Control } from './Control'
@@ -6,6 +6,8 @@ import { PropertyHeader } from './PropertyHeader'
import { Help } from './Help'
import { TextInput } from './TextInput'
import { Switch } from './Switch'
+import { SwitchableRangeControlConfig } from './types'
+import { ChartProperty, Flavor } from '../../types'
const SwitchRow = styled.div`
display: flex;
@@ -27,107 +29,87 @@ const RangeRow = styled.div`
`
interface SwitchableRangeControlProps {
- /*
- id: PropTypes.string.isRequired,
- property: PropTypes.object.isRequired,
- flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
- currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
- value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
- options: PropTypes.shape({
- unit: PropTypes.string,
- defaultValue: PropTypes.number.isRequired,
- disabledValue: PropTypes.any.isRequired,
- min: PropTypes.number.isRequired,
- max: PropTypes.number.isRequired,
- step: PropTypes.number,
- }).isRequired,
- onChange: PropTypes.func.isRequired,
- */
+ id: string
+ property: ChartProperty
+ config: SwitchableRangeControlConfig
+ flavors: Flavor[]
+ currentFlavor: Flavor
+ value: number | string
+ onChange: (value: number | string) => void
+ context?: any
}
-export default class SwitchableRangeControl extends Component {
- constructor(props) {
- super(props)
+export const SwitchableRangeControl = ({
+ id,
+ property,
+ flavors,
+ currentFlavor,
+ value,
+ config,
+ onChange,
+}: SwitchableRangeControlProps) => {
+ const [isSliderEnabled, setIsSliderEnabled] = useState(value !== config.disabledValue)
+ const [sliderValue, setSliderValue] = useState(
+ value === config.disabledValue ? config.defaultValue : value
+ )
- const {
- value,
- options: { disabledValue, defaultValue },
- } = this.props
- this.state = {
- isSliderEnabled: value !== disabledValue,
- sliderValue: value === disabledValue ? defaultValue : value,
- }
- }
-
- handleSwitchUpdate = checked => {
- const {
- onChange,
- options: { disabledValue },
- } = this.props
- const { sliderValue } = this.state
- if (checked === false) {
- this.setState({ isSliderEnabled: true })
- onChange(Number(sliderValue))
- } else {
- this.setState({ isSliderEnabled: false })
- onChange(disabledValue)
- }
- }
+ const handleSliderUpdate = useCallback(
+ (e: ChangeEvent
) => {
+ setSliderValue(Number(e.target.value))
+ onChange(Number(e.target.value))
+ },
+ [setSliderValue, onChange]
+ )
- handleSliderUpdate = e => {
- const { onChange } = this.props
- this.setState({ sliderValue: Number(e.target.value) })
- onChange(Number(e.target.value))
- }
-
- render() {
- const {
- id,
- property,
- flavors,
- currentFlavor,
- options: { disabledValue, unit },
- value,
- } = this.props
- const { isSliderEnabled, sliderValue } = this.state
+ const handleSwitchUpdate = useCallback(
+ (checked: boolean) => {
+ if (!checked) {
+ setIsSliderEnabled(true)
+ onChange(Number(sliderValue))
+ } else {
+ setIsSliderEnabled(false)
+ onChange(config.disabledValue)
+ }
+ },
+ [onChange, config.disabledValue, sliderValue, setIsSliderEnabled]
+ )
- return (
-
-
-
-
+
+
+
+
+ {config.disabledValue}
+
+
+ {isSliderEnabled && (
+
+
+
-
- {disabledValue}
-
-
- {isSliderEnabled && (
-
-
-
-
- )}
- {property.help}
-
- )
- }
+
+ )}
+ {property.help}
+
+ )
}
diff --git a/website/src/components/controls/TextControl.tsx b/website/src/components/controls/TextControl.tsx
index 4eeecbe7dd..648d7ce34a 100644
--- a/website/src/components/controls/TextControl.tsx
+++ b/website/src/components/controls/TextControl.tsx
@@ -3,23 +3,22 @@ import { Control } from './Control'
import { PropertyHeader } from './PropertyHeader'
import { TextInput } from './TextInput'
import { Help } from './Help'
+import { ChartProperty, Flavor } from '../../types'
+import { TextControlConfig } from './types'
interface TextControlProps {
- /*
- id: PropTypes.string.isRequired,
- property: PropTypes.object.isRequired,
- flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
- currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
- onChange: PropTypes.func.isRequired,
- options: PropTypes.shape({
- disabled: PropTypes.bool,
- }).isRequired,
- */
+ id: string
+ property: ChartProperty
+ flavors: Flavor[]
+ currentFlavor: Flavor
+ value: string | number
+ onChange: (value: string) => void
+ config: TextControlConfig
+ context?: any
}
-const TextControl = memo(
- ({ id, property, flavors, currentFlavor, value, onChange, options = {} }) => {
+export const TextControl = memo(
+ ({ id, property, flavors, currentFlavor, value, onChange, config = {} }: TextControlProps) => {
const handleUpdate = useCallback(event => onChange(event.target.value), [onChange])
return (
@@ -36,12 +35,10 @@ const TextControl = memo(
type="text"
value={value}
onChange={handleUpdate}
- disabled={options.disabled === true}
+ disabled={config.disabled === true}
/>
{property.help}
)
}
)
-
-export default TextControl
diff --git a/website/src/components/controls/TextInput.tsx b/website/src/components/controls/TextInput.tsx
index 16cd772c38..4d995c2f3a 100644
--- a/website/src/components/controls/TextInput.tsx
+++ b/website/src/components/controls/TextInput.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
type TextInputProps = {
isNumber?: boolean
- unit?: 'px' | '°'
+ unit?: 'px' | '°' | 'ms'
} & InputHTMLAttributes
export const TextInput = memo(({ unit, isNumber = false, ...props }: TextInputProps) => {
diff --git a/website/src/components/controls/ValueFormatControl.js b/website/src/components/controls/ValueFormatControl.js
deleted file mode 100644
index 88657239a8..0000000000
--- a/website/src/components/controls/ValueFormatControl.js
+++ /dev/null
@@ -1,374 +0,0 @@
-import React, { memo, useCallback, useMemo, useState } from 'react'
-import styled from 'styled-components'
-import { formatSpecifier as parseFormat, FormatSpecifier } from 'd3-format'
-import { components } from 'react-select'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { TextInput } from './TextInput'
-import { Switch } from './Switch'
-import Select from './Select'
-import { Help } from './Help'
-import { FaChevronUp, FaChevronDown } from 'react-icons/fa'
-
-const MainControls = styled.div`
- display: grid;
- grid-template-columns: 60px auto 100px;
- align-items: center;
- row-gap: 9px;
- column-gap: 9px;
- margin: 12px 0;
-`
-
-const SubControls = styled.div`
- display: grid;
- grid-template-columns: 60px auto 60px auto;
- align-items: center;
- row-gap: 9px;
- column-gap: 9px;
- margin: 12px 0;
-`
-
-const ToggleButton = styled.span`
- cursor: pointer;
- display: grid;
- grid-template-columns: auto 24px;
- grid-column-gap: 9px;
- align-items: center;
- white-space: nowrap;
- color: ${props => props.theme.colors.accent};
-
- path {
- fill: ${props => props.theme.colors.border};
- }
-`
-
-const typeOptions = [
- {
- value: undefined,
- label: 'none',
- description: 'none',
- },
- {
- value: 'e',
- label: 'e',
- description: 'exponent notation.',
- },
- {
- value: 'f',
- label: 'f',
- description: 'fixed point notation.',
- },
- {
- value: 'g',
- label: 'g',
- description: 'either decimal or exponent notation, rounded to significant digits.',
- },
- {
- value: 'r',
- label: 'r',
- description: 'decimal notation, rounded to significant digits.',
- },
- {
- value: 's',
- label: 's',
- description: 'decimal notation with an SI prefix, rounded to significant digits.',
- },
- {
- value: '%',
- label: '%',
- description: 'multiply by 100, and then decimal notation with a percent sign.',
- },
- {
- value: 'p',
- label: 'p',
- description:
- 'multiply by 100, round to significant digits, and then decimal notation with a percent sign.',
- },
- {
- value: 'b',
- label: 'b',
- description: 'binary notation, rounded to integer.',
- },
- {
- value: 'o',
- label: 'o',
- description: 'octal notation, rounded to integer.',
- },
- {
- value: 'd',
- label: 'd',
- description: 'decimal notation, rounded to integer.',
- },
- {
- value: 'x',
- label: 'x',
- description: 'hexadecimal notation, using lower-case letters, rounded to integer.',
- },
- {
- value: 'X',
- label: 'X',
- description: 'hexadecimal notation, using upper-case letters, rounded to integer.',
- },
- {
- value: 'c',
- label: 'c',
- description: 'converts the integer to the corresponding unicode character before printing.',
- },
-]
-
-const alignOptions = [
- {
- value: '>',
- label: '>',
- description: 'Force the field to be right-aligned within the available space.',
- },
- {
- value: '<',
- label: '<',
- description: 'Force the field to be left-aligned within the available space.',
- },
- {
- value: '^',
- label: '^',
- description: 'Force the field to be centered within the available space.',
- },
- {
- value: '=',
- label: '=',
- description: 'like >, but with any sign and symbol to the left of any padding.',
- },
-]
-
-const signOptions = [
- {
- value: '-',
- label: '-',
- description: 'nothing for zero or positive and a minus sign for negative.',
- },
- {
- value: '+',
- label: '+',
- description: 'a plus sign for zero or positive and a minus sign for negative.',
- },
- {
- value: '(',
- label: '(',
- description: 'nothing for zero or positive and parentheses for negative.',
- },
- {
- value: ' ',
- label: '(space)',
- description: 'a space for zero or positive and a minus sign for negative.',
- },
-]
-
-const symbolOptions = [
- {
- value: undefined,
- label: 'none',
- },
- {
- value: '#',
- label: '#',
- },
- {
- value: '$',
- label: '$',
- },
-]
-
-const Option = props => (
-
- {props.value === undefined && 'none'}
- {props.value !== undefined && (
- <>
- {props.label} {props.data.description}
-
- )}
-
-)
-
-const ValueFormatControl = memo(({ id, property, flavors, currentFlavor, value, onChange }) => {
- const [isEditing, setIsEditing] = useState(false)
- const formatSpecifier = useMemo(() => parseFormat(value.format), [value.format])
-
- const handleSwitch = useCallback(
- enabled => {
- onChange({
- format: formatSpecifier.toString(),
- enabled,
- })
- },
- [formatSpecifier, onChange]
- )
-
- const updateFormat = useCallback(
- (property, propertyValue) => {
- const updatedFormatSpecifier = new FormatSpecifier({
- ...formatSpecifier,
- [property]: propertyValue,
- })
-
- onChange({
- format: updatedFormatSpecifier.toString(),
- enabled: value.enabled,
- })
- },
- [formatSpecifier, onChange, value.enabled]
- )
-
- const handleTypeChange = option => {
- updateFormat('type', option.value)
- }
-
- const handleFillChange = e => {
- updateFormat('fill', e.target.value.slice(1))
- }
-
- const handleAlignChange = option => {
- updateFormat('align', option.value)
- }
-
- const handleSignChange = option => {
- updateFormat('sign', option.value)
- }
-
- const handleSymbolChange = option => {
- updateFormat('symbol', option.value)
- }
-
- const handleZeroChange = flag => {
- updateFormat('zero', flag)
- }
-
- const handleWidthChange = e => {
- updateFormat('width', e.target.value)
- }
-
- const handleCommaChange = flag => {
- updateFormat('comma', flag)
- }
-
- const handlePrecisionChange = e => {
- updateFormat('precision', e.target.value)
- }
-
- const handleTrimChange = flag => {
- updateFormat('trim', flag)
- }
-
- return (
-
-
-
-
-
-
-
-
- setIsEditing(flag => !flag)}>
- {isEditing ? 'close' : 'open'} editor
- {isEditing ? : }
-
-
- {isEditing && (
-
-
-
- )}
- {property.help}
-
- )
-})
-
-ValueFormatControl.displayName = 'ValueFormatControl'
-
-export default ValueFormatControl
diff --git a/website/src/components/controls/ValueFormatControl.tsx b/website/src/components/controls/ValueFormatControl.tsx
new file mode 100644
index 0000000000..3ec4731f93
--- /dev/null
+++ b/website/src/components/controls/ValueFormatControl.tsx
@@ -0,0 +1,392 @@
+import React, { memo, useCallback, useMemo, useState } from 'react'
+import styled from 'styled-components'
+import { formatSpecifier as parseFormat, FormatSpecifier } from 'd3-format'
+// @ts-ignore
+import { components } from 'react-select'
+import { Control } from './Control'
+import { PropertyHeader } from './PropertyHeader'
+import { TextInput } from './TextInput'
+import { Switch } from './Switch'
+import Select from './Select'
+import { Help } from './Help'
+import { FaChevronUp, FaChevronDown } from 'react-icons/fa'
+import { ChartProperty, Flavor } from '../../types'
+import { ValueFormatControlConfig } from './types'
+
+const typeOptions = [
+ {
+ value: undefined,
+ label: 'none',
+ description: 'none',
+ },
+ {
+ value: 'e',
+ label: 'e',
+ description: 'exponent notation.',
+ },
+ {
+ value: 'f',
+ label: 'f',
+ description: 'fixed point notation.',
+ },
+ {
+ value: 'g',
+ label: 'g',
+ description: 'either decimal or exponent notation, rounded to significant digits.',
+ },
+ {
+ value: 'r',
+ label: 'r',
+ description: 'decimal notation, rounded to significant digits.',
+ },
+ {
+ value: 's',
+ label: 's',
+ description: 'decimal notation with an SI prefix, rounded to significant digits.',
+ },
+ {
+ value: '%',
+ label: '%',
+ description: 'multiply by 100, and then decimal notation with a percent sign.',
+ },
+ {
+ value: 'p',
+ label: 'p',
+ description:
+ 'multiply by 100, round to significant digits, and then decimal notation with a percent sign.',
+ },
+ {
+ value: 'b',
+ label: 'b',
+ description: 'binary notation, rounded to integer.',
+ },
+ {
+ value: 'o',
+ label: 'o',
+ description: 'octal notation, rounded to integer.',
+ },
+ {
+ value: 'd',
+ label: 'd',
+ description: 'decimal notation, rounded to integer.',
+ },
+ {
+ value: 'x',
+ label: 'x',
+ description: 'hexadecimal notation, using lower-case letters, rounded to integer.',
+ },
+ {
+ value: 'X',
+ label: 'X',
+ description: 'hexadecimal notation, using upper-case letters, rounded to integer.',
+ },
+ {
+ value: 'c',
+ label: 'c',
+ description: 'converts the integer to the corresponding unicode character before printing.',
+ },
+]
+
+const alignOptions = [
+ {
+ value: '>',
+ label: '>',
+ description: 'Force the field to be right-aligned within the available space.',
+ },
+ {
+ value: '<',
+ label: '<',
+ description: 'Force the field to be left-aligned within the available space.',
+ },
+ {
+ value: '^',
+ label: '^',
+ description: 'Force the field to be centered within the available space.',
+ },
+ {
+ value: '=',
+ label: '=',
+ description: 'like >, but with any sign and symbol to the left of any padding.',
+ },
+]
+
+const signOptions = [
+ {
+ value: '-',
+ label: '-',
+ description: 'nothing for zero or positive and a minus sign for negative.',
+ },
+ {
+ value: '+',
+ label: '+',
+ description: 'a plus sign for zero or positive and a minus sign for negative.',
+ },
+ {
+ value: '(',
+ label: '(',
+ description: 'nothing for zero or positive and parentheses for negative.',
+ },
+ {
+ value: ' ',
+ label: '(space)',
+ description: 'a space for zero or positive and a minus sign for negative.',
+ },
+]
+
+const symbolOptions = [
+ {
+ value: undefined,
+ label: 'none',
+ },
+ {
+ value: '#',
+ label: '#',
+ },
+ {
+ value: '$',
+ label: '$',
+ },
+]
+
+const Option = (props: any) => (
+
+ {props.value === undefined && 'none'}
+ {props.value !== undefined && (
+ <>
+ {props.label} {props.data.description}
+
+ )}
+
+)
+
+interface ValueFormatControlProps {
+ id: string
+ property: ChartProperty
+ flavors: Flavor[]
+ currentFlavor: Flavor
+ config: ValueFormatControlConfig
+ value: { format: string; enabled: boolean }
+ onChange: (value: { format: string; enabled: boolean }) => void
+ context?: any
+}
+
+export const ValueFormatControl = memo(
+ ({ id, property, flavors, currentFlavor, value, onChange }: ValueFormatControlProps) => {
+ const [isEditing, setIsEditing] = useState(false)
+ const formatSpecifier = useMemo(() => parseFormat(value.format), [value.format])
+
+ const handleSwitch = useCallback(
+ enabled => {
+ onChange({
+ format: formatSpecifier.toString(),
+ enabled,
+ })
+ },
+ [formatSpecifier, onChange]
+ )
+
+ const updateFormat = useCallback(
+ (property, propertyValue) => {
+ const updatedFormatSpecifier = new FormatSpecifier({
+ ...formatSpecifier,
+ [property]: propertyValue,
+ })
+
+ onChange({
+ format: updatedFormatSpecifier.toString(),
+ enabled: value.enabled,
+ })
+ },
+ [formatSpecifier, onChange, value.enabled]
+ )
+
+ const handleTypeChange = option => {
+ updateFormat('type', option.value)
+ }
+
+ const handleFillChange = e => {
+ updateFormat('fill', e.target.value.slice(1))
+ }
+
+ const handleAlignChange = option => {
+ updateFormat('align', option.value)
+ }
+
+ const handleSignChange = option => {
+ updateFormat('sign', option.value)
+ }
+
+ const handleSymbolChange = option => {
+ updateFormat('symbol', option.value)
+ }
+
+ const handleZeroChange = flag => {
+ updateFormat('zero', flag)
+ }
+
+ const handleWidthChange = e => {
+ updateFormat('width', e.target.value)
+ }
+
+ const handleCommaChange = flag => {
+ updateFormat('comma', flag)
+ }
+
+ const handlePrecisionChange = e => {
+ updateFormat('precision', e.target.value)
+ }
+
+ const handleTrimChange = flag => {
+ updateFormat('trim', flag)
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ setIsEditing(flag => !flag)}>
+ {isEditing ? 'close' : 'open'} editor
+ {isEditing ? : }
+
+
+ {isEditing && (
+
+
+
+ )}
+ {property.help}
+
+ )
+ }
+)
+
+const MainControls = styled.div`
+ display: grid;
+ grid-template-columns: 60px auto 100px;
+ align-items: center;
+ row-gap: 9px;
+ column-gap: 9px;
+ margin: 12px 0;
+`
+
+const SubControls = styled.div`
+ display: grid;
+ grid-template-columns: 60px auto 60px auto;
+ align-items: center;
+ row-gap: 9px;
+ column-gap: 9px;
+ margin: 12px 0;
+`
+
+const ToggleButton = styled.span`
+ cursor: pointer;
+ display: grid;
+ grid-template-columns: auto 24px;
+ grid-column-gap: 9px;
+ align-items: center;
+ white-space: nowrap;
+ color: ${props => props.theme.colors.accent};
+
+ path {
+ fill: ${props => props.theme.colors.border};
+ }
+`
diff --git a/website/src/components/controls/types.ts b/website/src/components/controls/types.ts
new file mode 100644
index 0000000000..fa0a2a77c3
--- /dev/null
+++ b/website/src/components/controls/types.ts
@@ -0,0 +1,158 @@
+import { ChartProperty } from '../../types'
+
+export interface SwitchControlAttrs {
+ type: 'switch'
+}
+
+export interface RangeControlConfig {
+ type: 'range'
+ min: number
+ max: number
+ step?: number
+ unit?: 'px' | '°' | 'ms'
+}
+
+export interface MotionConfigControlConfig {
+ type: 'motionConfig'
+}
+
+export interface BoxAnchorControlConfig {
+ type: 'boxAnchor'
+}
+
+export interface ChoicesControlConfig {
+ type: 'choices'
+ disabled?: boolean
+ choices: {
+ label: string
+ value: string | boolean
+ }[]
+}
+
+export interface RadioControlConfig {
+ type: 'radio'
+ choices: {
+ label: string
+ value: string
+ }[]
+}
+
+export interface ValueFormatControlConfig {
+ type: 'valueFormat'
+}
+
+export interface MarginControlConfig {
+ type: 'margin'
+}
+
+export interface OpacityControlConfig {
+ type: 'opacity'
+}
+
+export interface LineWidthControlConfig {
+ type: 'lineWidth'
+ step?: number
+}
+
+export interface BlendModeControlConfig {
+ type: 'blendMode'
+}
+
+export interface InheritedColorControlConfig {
+ type: 'inheritedColor'
+ inheritableProperties?: string[]
+ defaultCustomColor?: string
+ defaultThemeProperty?: string
+ defaultFrom?: string
+}
+
+export interface OrdinalColorsControlConfig {
+ type: 'ordinalColors'
+}
+
+export interface NumberArrayControlConfig {
+ type: 'numberArray'
+ unit?: 'px' | '°' | 'ms'
+ items: {
+ label: string
+ min?: number
+ max?: number
+ step?: number
+ }[]
+}
+
+export interface ColorPickerControlConfig {
+ type: 'colorPicker'
+}
+
+export interface QuantizeColorsControlConfig {
+ type: 'quantizeColors'
+}
+
+export interface SwitchableRangeControlConfig {
+ type: 'switchableRange'
+ unit?: 'px' | '°' | 'ms'
+ disabledValue: string
+ defaultValue: number
+ min: number
+ max: number
+ step?: number
+}
+
+export interface AngleControlConfig {
+ type: 'angle'
+ start?: number
+ min?: number
+ max?: number
+ step?: number
+}
+
+export interface ObjectControlConfig {
+ type: 'object'
+ props: Omit[]
+}
+
+export interface ArrayControlConfig {
+ type: 'array'
+ props: Omit[]
+ shouldCreate: boolean
+ addLabel?: string
+ shouldRemove: boolean
+ removeLabel?: string
+ defaults?: object
+ getItemTitle?: (index: number, item: unknown) => string
+}
+
+export interface TextControlConfig {
+ type: 'text'
+ disabled?: boolean
+}
+
+export interface ColorsControlConfig {
+ type: 'colors'
+ includeSequential?: boolean
+}
+
+export type ControlConfig =
+ | SwitchControlAttrs
+ | RangeControlConfig
+ | MotionConfigControlConfig
+ | BoxAnchorControlConfig
+ | ChoicesControlConfig
+ | RadioControlConfig
+ | ValueFormatControlConfig
+ | MarginControlConfig
+ | OpacityControlConfig
+ | LineWidthControlConfig
+ | BlendModeControlConfig
+ | InheritedColorControlConfig
+ | OrdinalColorsControlConfig
+ | NumberArrayControlConfig
+ | ColorPickerControlConfig
+ | QuantizeColorsControlConfig
+ | SwitchableRangeControlConfig
+ | AngleControlConfig
+ | ObjectControlConfig
+ | ArrayControlConfig
+ | TextControlConfig
+ | ColorsControlConfig
diff --git a/website/src/data/components/area-bump/props.ts b/website/src/data/components/area-bump/props.ts
index 8d1ca6b932..c9d3533337 100644
--- a/website/src/data/components/area-bump/props.ts
+++ b/website/src/data/components/area-bump/props.ts
@@ -1,12 +1,22 @@
+// @ts-ignore
import { AreaBumpDefaultProps as defaults } from '@nivo/bump'
import {
themeProperty,
- axesProperties,
defsProperties,
groupProperties,
motionProperties,
} from '../../../lib/componentProperties'
-import { ChartProperty } from '../../../types'
+import {
+ chartDimensions,
+ ordinalColors,
+ blendMode,
+ chartGrid,
+ axes,
+ isInteractive,
+} from '../../../lib/chart-properties'
+import { ChartProperty, Flavor } from '../../../types'
+
+const allFlavors: Flavor[] = ['svg']
const props: ChartProperty[] = [
{
@@ -31,57 +41,7 @@ const props: ChartProperty[] = [
type: 'object[]',
flavors: ['svg'],
},
- {
- key: 'width',
- group: 'Base',
- enableControlForFlavors: ['api'],
- help: 'Chart width.',
- description: `
- not required if using responsive component.
- Also note that width does not include labels/axes,
- so you should add enough margin to display them.
- `,
- type: 'number',
- required: true,
- flavors: ['svg'],
- controlType: 'range',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
- {
- key: 'height',
- group: 'Base',
- enableControlForFlavors: ['api'],
- help: 'Chart height.',
- description: `
- not required if using responsive component.
- Also note that height does not include labels/axes,
- so you should add enough margin to display them.
- `,
- type: 'number',
- required: true,
- flavors: ['svg'],
- controlType: 'range',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
- {
- key: 'margin',
- group: 'Base',
- type: 'object',
- required: false,
- help: 'Chart margin.',
- flavors: ['svg'],
- controlType: 'margin',
- },
+ ...chartDimensions(allFlavors),
{
key: 'align',
group: 'Base',
@@ -90,8 +50,8 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.align,
flavors: ['svg'],
- controlType: 'choices',
- controlOptions: {
+ control: {
+ type: 'choices',
choices: [
{ label: 'start', value: 'start' },
{ label: 'middle', value: 'middle' },
@@ -107,8 +67,8 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.interpolation,
flavors: ['svg'],
- controlType: 'radio',
- controlOptions: {
+ control: {
+ type: 'radio',
choices: [
{ label: 'smooth', value: 'smooth' },
{ label: 'linear', value: 'linear' },
@@ -119,53 +79,38 @@ const props: ChartProperty[] = [
key: 'spacing',
group: 'Base',
type: 'number',
+ help: 'Spacing.',
required: false,
flavors: ['svg'],
defaultValue: defaults.spacing,
- controlType: 'range',
- controlOptions: {
+ control: {
+ type: 'range',
min: 0,
max: 32,
},
},
{
key: 'xPadding',
+ help: 'X padding.',
group: 'Base',
type: 'number',
+ required: false,
defaultValue: defaults.xPadding,
flavors: ['svg'],
- controlType: 'range',
- controlOptions: {
+ control: {
+ type: 'range',
min: 0,
max: 1,
step: 0.05,
},
},
themeProperty(['svg']),
- {
- key: 'colors',
- group: 'Style',
- type: 'string | Function | string[]',
- help: 'Defines color range.',
- required: false,
- defaultValue: defaults.colors,
+ ordinalColors({ flavors: allFlavors, defaultValue: defaults.colors }),
+ blendMode({
+ target: 'areas',
flavors: ['svg'],
- controlType: 'ordinalColors',
- },
- {
- key: 'blendMode',
- group: 'Style',
- type: 'string',
- help: 'Defines CSS mix-blend-mode property.',
- description: `
- Defines CSS \`mix-blend-mode\` property, see
- [MDN documentation](https://developer.mozilla.org/fr/docs/Web/CSS/mix-blend-mode).
- `,
- required: false,
defaultValue: defaults.blendMode,
- flavors: ['svg'],
- controlType: 'blendMode',
- },
+ }),
{
key: 'fillOpacity',
group: 'Style',
@@ -174,7 +119,7 @@ const props: ChartProperty[] = [
help: 'Area fill opacity.',
defaultValue: defaults.fillOpacity,
flavors: ['svg'],
- controlType: 'opacity',
+ control: { type: 'opacity' },
},
{
key: 'activeFillOpacity',
@@ -184,7 +129,7 @@ const props: ChartProperty[] = [
help: 'Area fill opacity for active series.',
defaultValue: defaults.activeFillOpacity,
flavors: ['svg'],
- controlType: 'opacity',
+ control: { type: 'opacity' },
},
{
key: 'inactiveFillOpacity',
@@ -194,7 +139,7 @@ const props: ChartProperty[] = [
help: 'Area fill opacity for inactive series.',
defaultValue: defaults.inactiveFillOpacity,
flavors: ['svg'],
- controlType: 'opacity',
+ control: { type: 'opacity' },
},
{
key: 'borderWidth',
@@ -204,7 +149,7 @@ const props: ChartProperty[] = [
help: 'Area border width.',
defaultValue: defaults.borderWidth,
flavors: ['svg'],
- controlType: 'lineWidth',
+ control: { type: 'lineWidth' },
},
{
key: 'activeBorderWidth',
@@ -214,7 +159,7 @@ const props: ChartProperty[] = [
help: 'Area border width for active series.',
defaultValue: defaults.activeBorderWidth,
flavors: ['svg'],
- controlType: 'lineWidth',
+ control: { type: 'lineWidth' },
},
{
key: 'inactiveBorderWidth',
@@ -224,7 +169,7 @@ const props: ChartProperty[] = [
help: 'Area border width for inactive series.',
defaultValue: defaults.inactiveBorderWidth,
flavors: ['svg'],
- controlType: 'lineWidth',
+ control: { type: 'lineWidth' },
},
{
key: 'borderColor',
@@ -234,7 +179,7 @@ const props: ChartProperty[] = [
help: 'Method to compute area border color.',
defaultValue: defaults.borderColor,
flavors: ['svg'],
- controlType: 'inheritedColor',
+ control: { type: 'inheritedColor' },
},
{
key: 'borderOpacity',
@@ -244,7 +189,7 @@ const props: ChartProperty[] = [
help: 'Area border opacity.',
flavors: ['svg'],
defaultValue: defaults.borderOpacity,
- controlType: 'opacity',
+ control: { type: 'opacity' },
},
{
key: 'activeBorderOpacity',
@@ -254,7 +199,7 @@ const props: ChartProperty[] = [
help: 'Area border opacity for active series.',
defaultValue: defaults.activeBorderOpacity,
flavors: ['svg'],
- controlType: 'opacity',
+ control: { type: 'opacity' },
},
{
key: 'inactiveBorderOpacity',
@@ -264,7 +209,7 @@ const props: ChartProperty[] = [
help: 'Area border opacity for inactive series.',
defaultValue: defaults.inactiveBorderOpacity,
flavors: ['svg'],
- controlType: 'opacity',
+ control: { type: 'opacity' },
},
...defsProperties('Style', ['svg']),
{
@@ -284,8 +229,8 @@ const props: ChartProperty[] = [
help: 'Define area start label padding',
defaultValue: defaults.startLabelPadding,
flavors: ['svg'],
- controlType: 'range',
- controlOptions: {
+ control: {
+ type: 'range',
min: 0,
max: 30,
},
@@ -298,7 +243,7 @@ const props: ChartProperty[] = [
help: 'Method to compute start label text color.',
flavors: ['svg'],
defaultValue: defaults.startLabelTextColor,
- controlType: 'inheritedColor',
+ control: { type: 'inheritedColor' },
},
{
key: 'endLabel',
@@ -317,8 +262,8 @@ const props: ChartProperty[] = [
help: 'Define area end label padding',
defaultValue: defaults.endLabelPadding,
flavors: ['svg'],
- controlType: 'range',
- controlOptions: {
+ control: {
+ type: 'range',
min: 0,
max: 30,
},
@@ -329,31 +274,20 @@ const props: ChartProperty[] = [
type: 'string | object | Function',
required: false,
defaultValue: defaults.endLabelTextColor,
- controlType: 'inheritedColor',
group: 'Labels',
flavors: ['svg'],
+ control: { type: 'inheritedColor' },
},
- {
- key: 'enableGridX',
- group: 'Grid & Axes',
- help: 'Enable/disable x grid.',
- type: 'boolean',
- required: false,
- defaultValue: defaults.enableGridX,
- controlType: 'switch',
+ ...chartGrid({
+ flavors: allFlavors,
+ xDefault: defaults.enableGridX,
+ y: false,
+ }),
+ ...axes({ flavors: allFlavors, exclude: ['right', 'left'] }),
+ isInteractive({
flavors: ['svg'],
- },
- ...axesProperties({ exclude: ['right', 'left'] }),
- {
- key: 'isInteractive',
- group: 'Interactivity',
- type: 'boolean',
- help: 'Enable/disable interactivity.',
- required: false,
defaultValue: defaults.isInteractive,
- controlType: 'switch',
- flavors: ['svg'],
- },
+ }),
{
key: 'onMouseEnter',
group: 'Interactivity',
diff --git a/website/src/data/components/bar/props.ts b/website/src/data/components/bar/props.ts
index 433cb2dade..95723e20a7 100644
--- a/website/src/data/components/bar/props.ts
+++ b/website/src/data/components/bar/props.ts
@@ -1,24 +1,34 @@
import { svgDefaultProps } from '@nivo/bar'
import {
themeProperty,
- axesProperties,
motionProperties,
defsProperties,
getLegendsProps,
groupProperties,
} from '../../../lib/componentProperties'
-import { ChartProperty } from '../../../types'
+import {
+ chartDimensions,
+ ordinalColors,
+ chartGrid,
+ axes,
+ isInteractive,
+} from '../../../lib/chart-properties'
+import { ChartProperty, Flavor } from '../../../types'
+
+const allFlavors: Flavor[] = ['svg', 'canvas', 'api']
const props: ChartProperty[] = [
{
key: 'data',
+ group: 'Base',
help: 'Chart data.',
type: 'object[]',
required: true,
- group: 'Base',
+ flavors: allFlavors,
},
{
key: 'indexBy',
+ group: 'Base',
help: 'Key to use to index the data.',
description: `
Key to use to index the data,
@@ -28,27 +38,29 @@ const props: ChartProperty[] = [
receive the data item and must return the desired index.
`,
type: 'string | (datum: RawDatum): string | number',
+ flavors: allFlavors,
required: false,
defaultValue: svgDefaultProps.indexBy,
- group: 'Base',
},
{
key: 'keys',
+ group: 'Base',
help: 'Keys to use to determine each serie.',
type: 'string[]',
+ flavors: allFlavors,
required: false,
defaultValue: svgDefaultProps.keys,
- group: 'Base',
},
{
key: 'groupMode',
+ group: 'Base',
help: `How to group bars.`,
- type: 'grouped | stacked',
+ type: `'grouped' | 'stacked'`,
+ flavors: allFlavors,
required: false,
defaultValue: svgDefaultProps.groupMode,
- controlType: 'radio',
- group: 'Base',
- controlOptions: {
+ control: {
+ type: 'radio',
choices: [
{ label: 'stacked', value: 'stacked' },
{ label: 'grouped', value: 'grouped' },
@@ -57,13 +69,14 @@ const props: ChartProperty[] = [
},
{
key: 'layout',
+ group: 'Base',
help: `How to display bars.`,
- type: 'horizontal | vertical',
+ type: `'horizontal' | 'vertical'`,
+ flavors: allFlavors,
required: false,
defaultValue: svgDefaultProps.layout,
- controlType: 'radio',
- group: 'Base',
- controlOptions: {
+ control: {
+ type: 'radio',
choices: [
{ label: 'horizontal', value: 'horizontal' },
{ label: 'vertical', value: 'vertical' },
@@ -72,19 +85,23 @@ const props: ChartProperty[] = [
},
{
key: 'valueScale',
- type: 'object',
group: 'Base',
+ type: 'object',
help: `value scale configuration.`,
defaultValue: svgDefaultProps.valueScale,
- controlType: 'object',
- controlOptions: {
+ flavors: allFlavors,
+ required: false,
+ control: {
+ type: 'object',
props: [
{
key: 'type',
help: `Scale type.`,
type: 'string',
- controlType: 'choices',
- controlOptions: {
+ required: true,
+ flavors: allFlavors,
+ control: {
+ type: 'choices',
disabled: true,
choices: ['linear', 'symlog'].map(v => ({
label: v,
@@ -97,19 +114,23 @@ const props: ChartProperty[] = [
},
{
key: 'indexScale',
- type: 'object',
group: 'Base',
+ type: 'object',
help: `index scale configuration.`,
defaultValue: svgDefaultProps.indexScale,
- controlType: 'object',
- controlOptions: {
+ flavors: allFlavors,
+ required: false,
+ control: {
+ type: 'object',
props: [
{
key: 'type',
help: `Scale type.`,
type: 'string',
- controlType: 'choices',
- controlOptions: {
+ required: true,
+ flavors: ['svg', 'canvas', 'api'],
+ control: {
+ type: 'choices',
disabled: true,
choices: ['band'].map(v => ({
label: v,
@@ -119,35 +140,39 @@ const props: ChartProperty[] = [
},
{
key: 'round',
+ required: true,
+ flavors: ['svg', 'canvas', 'api'],
help: 'Toggle index scale (for bar width) rounding.',
type: 'boolean',
- controlType: 'switch',
+ control: { type: 'switch' },
},
],
},
},
{
key: 'reverse',
+ group: 'Base',
help: 'Reverse bars, starts on top instead of bottom for vertical layout and right instead of left for horizontal one.',
type: 'boolean',
required: false,
+ flavors: allFlavors,
defaultValue: svgDefaultProps.reverse,
- controlType: 'switch',
- group: 'Base',
+ control: { type: 'switch' },
},
{
key: 'minValue',
+ group: 'Base',
help: 'Minimum value.',
description: `
Minimum value, if 'auto',
will use min value from the provided data.
`,
required: false,
+ flavors: allFlavors,
defaultValue: svgDefaultProps.minValue,
type: `number | 'auto'`,
- controlType: 'switchableRange',
- group: 'Base',
- controlOptions: {
+ control: {
+ type: 'switchableRange',
disabledValue: 'auto',
defaultValue: -1000,
min: -1000,
@@ -156,17 +181,18 @@ const props: ChartProperty[] = [
},
{
key: 'maxValue',
+ group: 'Base',
help: 'Maximum value.',
description: `
Maximum value, if 'auto',
will use max value from the provided data.
`,
required: false,
+ flavors: allFlavors,
defaultValue: svgDefaultProps.maxValue,
type: `number | 'auto'`,
- controlType: 'switchableRange',
- group: 'Base',
- controlOptions: {
+ control: {
+ type: 'switchableRange',
disabledValue: 'auto',
defaultValue: 1000,
min: 0,
@@ -185,18 +211,20 @@ const props: ChartProperty[] = [
which will receive the raw value and should return the formatted one.
`,
required: false,
+ flavors: allFlavors,
type: 'string | (value: number) => string | number',
- controlType: 'valueFormat',
+ control: { type: 'valueFormat' },
},
{
key: 'padding',
help: 'Padding between each bar (ratio).',
type: 'number',
required: false,
+ flavors: allFlavors,
defaultValue: svgDefaultProps.padding,
- controlType: 'range',
group: 'Base',
- controlOptions: {
+ control: {
+ type: 'range',
min: 0,
max: 0.9,
step: 0.05,
@@ -207,87 +235,22 @@ const props: ChartProperty[] = [
help: 'Padding between grouped/stacked bars.',
type: 'number',
required: false,
+ flavors: allFlavors,
defaultValue: svgDefaultProps.innerPadding,
- controlType: 'range',
group: 'Base',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: 0,
max: 10,
},
},
- {
- key: 'width',
- enableControlForFlavors: ['api'],
- help: 'Chart width.',
- description: `
- not required if using \`ResponsiveBar\`.
- Also note that width exclude left/right axes,
- please add margin to make sure they're visible.
- `,
- type: 'number',
- required: true,
- controlType: 'range',
- group: 'Base',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
- {
- key: 'height',
- enableControlForFlavors: ['api'],
- help: 'Chart height.',
- description: `
- not required if using \`ResponsiveBar\`.
- Also note that width exclude left/right axes,
- please add margin to make sure they're visible.
- `,
- type: 'number',
- required: true,
- controlType: 'range',
- group: 'Base',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
- {
- key: 'pixelRatio',
- flavors: ['canvas'],
- help: `Adjust pixel ratio, useful for HiDPI screens.`,
- required: false,
- defaultValue: 'Depends on device',
- type: `number`,
- controlType: 'range',
- group: 'Base',
- controlOptions: {
- min: 1,
- max: 2,
- },
- },
- {
- key: 'margin',
- help: 'Chart margin.',
- type: 'object',
- required: false,
- controlType: 'margin',
- group: 'Base',
- },
- themeProperty(['svg', 'canvas', 'api']),
- {
- key: 'colors',
- help: 'Defines color range.',
- type: 'string | Function | string[]',
- required: false,
+ ...chartDimensions(allFlavors),
+ themeProperty(allFlavors),
+ ordinalColors({
+ flavors: allFlavors,
defaultValue: svgDefaultProps.colors,
- controlType: 'ordinalColors',
- group: 'Style',
- },
+ }),
{
key: 'colorBy',
type: `'id' | 'indexValue'`,
@@ -295,11 +258,12 @@ const props: ChartProperty[] = [
description: `
Property to use to determine node color.
`,
+ flavors: allFlavors,
required: false,
defaultValue: svgDefaultProps.colorBy,
- controlType: 'choices',
group: 'Style',
- controlOptions: {
+ control: {
+ type: 'choices',
choices: [
{
label: 'id',
@@ -316,11 +280,12 @@ const props: ChartProperty[] = [
key: 'borderRadius',
help: 'Rectangle border radius.',
type: 'number',
+ flavors: ['svg', 'canvas', 'api'],
required: false,
defaultValue: svgDefaultProps.borderRadius,
- controlType: 'range',
group: 'Style',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: 0,
max: 36,
@@ -330,10 +295,11 @@ const props: ChartProperty[] = [
key: 'borderWidth',
help: 'Width of bar border.',
type: 'number',
+ flavors: ['svg', 'canvas', 'api'],
required: false,
defaultValue: svgDefaultProps.borderWidth,
- controlType: 'lineWidth',
group: 'Style',
+ control: { type: 'lineWidth' },
},
{
key: 'borderColor',
@@ -343,10 +309,11 @@ const props: ChartProperty[] = [
[see dedicated documentation](self:/guides/colors).
`,
type: 'string | object | Function',
+ flavors: ['svg', 'canvas', 'api'],
required: false,
defaultValue: svgDefaultProps.borderColor,
- controlType: 'inheritedColor',
group: 'Style',
+ control: { type: 'inheritedColor' },
},
...defsProperties('Style', ['svg']),
{
@@ -373,10 +340,11 @@ const props: ChartProperty[] = [
key: 'enableLabel',
help: 'Enable/disable labels.',
type: 'boolean',
+ flavors: ['svg', 'canvas', 'api'],
required: false,
defaultValue: svgDefaultProps.enableLabel,
- controlType: 'switch',
group: 'Labels',
+ control: { type: 'switch' },
},
{
key: 'label',
@@ -403,6 +371,7 @@ const props: ChartProperty[] = [
\`\`\`
`,
type: 'string | Function',
+ flavors: ['svg', 'canvas', 'api'],
required: false,
defaultValue: svgDefaultProps.label,
},
@@ -410,11 +379,12 @@ const props: ChartProperty[] = [
key: 'labelSkipWidth',
help: 'Skip label if bar width is lower than provided value, ignored if 0.',
type: 'number',
+ flavors: ['svg', 'canvas', 'api'],
required: false,
defaultValue: svgDefaultProps.labelSkipWidth,
- controlType: 'range',
group: 'Labels',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: 0,
max: 36,
@@ -424,11 +394,12 @@ const props: ChartProperty[] = [
key: 'labelSkipHeight',
help: 'Skip label if bar height is lower than provided value, ignored if 0.',
type: 'number',
+ flavors: ['svg', 'canvas', 'api'],
required: false,
defaultValue: svgDefaultProps.labelSkipHeight,
- controlType: 'range',
group: 'Labels',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: 0,
max: 36,
@@ -438,54 +409,23 @@ const props: ChartProperty[] = [
key: 'labelTextColor',
help: 'Defines how to compute label text color.',
type: 'string | object | Function',
+ flavors: ['svg', 'canvas', 'api'],
required: false,
defaultValue: svgDefaultProps.labelTextColor,
- controlType: 'inheritedColor',
+ control: { type: 'inheritedColor' },
group: 'Labels',
},
- {
- key: 'enableGridX',
- group: 'Grid & Axes',
- help: 'Enable/disable x grid.',
- type: 'boolean',
- required: false,
- defaultValue: svgDefaultProps.enableGridX,
- controlType: 'switch',
- },
- {
- key: 'gridXValues',
- group: 'Grid & Axes',
- help: 'Specify values to use for vertical grid lines.',
- type: 'Array',
- required: false,
- },
- {
- key: 'enableGridY',
- group: 'Grid & Axes',
- help: 'Enable/disable y grid.',
- type: 'boolean',
- required: false,
- defaultValue: svgDefaultProps.enableGridY,
- controlType: 'switch',
- },
- {
- key: 'gridYValues',
- group: 'Grid & Axes',
- help: 'Specify values to use for horizontal grid lines.',
- type: 'Array',
- required: false,
- },
- ...axesProperties(),
- {
- key: 'isInteractive',
+ ...chartGrid({
+ flavors: allFlavors,
+ xDefault: svgDefaultProps.enableGridX,
+ yDefault: svgDefaultProps.enableGridY,
+ values: true,
+ }),
+ ...axes({ flavors: allFlavors }),
+ isInteractive({
flavors: ['svg', 'canvas'],
- help: 'Enable/disable interactivity.',
- type: 'boolean',
- required: false,
defaultValue: svgDefaultProps.isInteractive,
- controlType: 'switch',
- group: 'Interactivity',
- },
+ }),
{
key: 'tooltip',
flavors: ['svg', 'canvas'],
@@ -522,7 +462,8 @@ const props: ChartProperty[] = [
group: 'Interactivity',
help: 'Showcase custom tooltip component.',
type: 'boolean',
- controlType: 'switch',
+ required: false,
+ control: { type: 'switch' },
},
{
key: 'onClick',
@@ -555,13 +496,14 @@ const props: ChartProperty[] = [
type: 'object[]',
help: `Optional chart's legends.`,
group: 'Legends',
- controlType: 'array',
- controlOptions: {
+ required: false,
+ control: {
+ type: 'array',
props: getLegendsProps(['svg']),
shouldCreate: true,
addLabel: 'add legend',
shouldRemove: true,
- getItemTitle: (index, legend) =>
+ getItemTitle: (index: number, legend: any) =>
`legend[${index}]: ${legend.anchor}, ${legend.direction}`,
svgDefaultProps: {
dataFrom: 'keys',
@@ -575,8 +517,8 @@ const props: ChartProperty[] = [
itemsSpacing: 0,
symbolSize: 20,
itemDirection: 'left-to-right',
- onClick: data => {
- alert(JSON.stringify(data, null, ' '))
+ onClick: (data: any) => {
+ console.log(JSON.stringify(data, null, ' '))
},
},
},
@@ -585,6 +527,7 @@ const props: ChartProperty[] = [
{
key: 'isFocusable',
flavors: ['svg'],
+ required: false,
group: 'Accessibility',
help: 'Make the root SVG element and each bar item focusable, for keyboard navigation.',
description: `
@@ -595,11 +538,12 @@ const props: ChartProperty[] = [
at a fixed location.
`,
type: 'boolean',
- controlType: 'switch',
+ control: { type: 'switch' },
},
{
key: 'ariaLabel',
flavors: ['svg'],
+ required: false,
group: 'Accessibility',
help: 'Main element [aria-label](https://www.w3.org/TR/wai-aria/#aria-label).',
type: 'string',
@@ -607,6 +551,7 @@ const props: ChartProperty[] = [
{
key: 'ariaLabelledBy',
flavors: ['svg'],
+ required: false,
group: 'Accessibility',
help: 'Main element [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby).',
type: 'string',
@@ -614,6 +559,7 @@ const props: ChartProperty[] = [
{
key: 'ariaDescribedBy',
flavors: ['svg'],
+ required: false,
group: 'Accessibility',
help: 'Main element [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby).',
type: 'string',
@@ -621,6 +567,7 @@ const props: ChartProperty[] = [
{
key: 'barAriaLabel',
flavors: ['svg'],
+ required: false,
group: 'Accessibility',
help: '[aria-label](https://www.w3.org/TR/wai-aria/#aria-label) for bar items.',
type: '(data) => string',
@@ -628,6 +575,7 @@ const props: ChartProperty[] = [
{
key: 'barAriaLabelledBy',
flavors: ['svg'],
+ required: false,
group: 'Accessibility',
help: '[aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) for bar items.',
type: '(data) => string',
@@ -635,6 +583,7 @@ const props: ChartProperty[] = [
{
key: 'barAriaDescribedBy',
flavors: ['svg'],
+ required: false,
group: 'Accessibility',
help: '[aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) for bar items.',
type: '(data) => string',
diff --git a/website/src/data/components/bullet/props.ts b/website/src/data/components/bullet/props.ts
index 7e487176bc..dcbd861f1d 100644
--- a/website/src/data/components/bullet/props.ts
+++ b/website/src/data/components/bullet/props.ts
@@ -1,12 +1,16 @@
import { defaultProps } from '@nivo/bullet'
import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties'
-import { ChartProperty } from '../../../types'
+import { chartDimensions } from '../../../lib/chart-properties'
+import { ChartProperty, Flavor } from '../../../types'
+
+const allFlavors: Flavor[] = ['svg']
const props: ChartProperty[] = [
{
key: 'data',
group: 'Base',
help: 'Chart data.',
+ flavors: ['svg'],
description: `
Chart data, which must conform to this structure:
\`\`\`
@@ -31,6 +35,7 @@ const props: ChartProperty[] = [
{
key: 'minValue',
help: 'Minimum value.',
+ flavors: ['svg'],
description: `
Minimum value, if 'auto',
will use min value from
@@ -39,9 +44,9 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaultProps.minValue,
type: `number | 'auto'`,
- controlType: 'switchableRange',
group: 'Base',
- controlOptions: {
+ control: {
+ type: 'switchableRange',
disabledValue: 'auto',
defaultValue: 0,
min: 0,
@@ -51,6 +56,7 @@ const props: ChartProperty[] = [
{
key: 'maxValue',
help: 'Maximum value.',
+ flavors: ['svg'],
description: `
Maximum value, if 'auto',
will use max value from
@@ -59,56 +65,26 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaultProps.maxValue,
type: `number | 'auto'`,
- controlType: 'switchableRange',
group: 'Base',
- controlOptions: {
+ control: {
+ type: 'switchableRange',
disabledValue: 'auto',
defaultValue: 100,
min: 50,
max: 100,
},
},
- {
- key: 'width',
- enableControlForFlavors: ['api'],
- group: 'Base',
- help: 'Chart width.',
- description: 'not required if using `ResponsiveBullet`.',
- type: 'number',
- required: true,
- controlType: 'range',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
- {
- key: 'height',
- enableControlForFlavors: ['api'],
- group: 'Base',
- help: 'Chart height.',
- description: 'not required if using `ResponsiveBullet`.',
- type: 'number',
- required: true,
- controlType: 'range',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
+ ...chartDimensions(allFlavors),
{
key: 'layout',
group: 'Base',
help: `How to display items.`,
+ flavors: ['svg'],
type: 'string',
required: false,
defaultValue: defaultProps.layout,
- controlType: 'radio',
- controlOptions: {
+ control: {
+ type: 'radio',
choices: [
{ label: 'horizontal', value: 'horizontal' },
{ label: 'vertical', value: 'vertical' },
@@ -124,28 +100,22 @@ const props: ChartProperty[] = [
for vertical layout and right instead of left
for horizontal one.
`,
+ flavors: ['svg'],
type: 'boolean',
required: false,
defaultValue: defaultProps.reverse,
- controlType: 'switch',
- },
- {
- key: 'margin',
- help: 'Chart margin.',
- type: 'object',
- required: false,
- controlType: 'margin',
- group: 'Base',
+ control: { type: 'switch' },
},
{
key: 'spacing',
help: 'define spacing between items.',
type: 'number',
+ flavors: ['svg'],
required: false,
defaultValue: defaultProps.spacing,
- controlType: 'range',
group: 'Base',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: 0,
max: 100,
@@ -156,10 +126,11 @@ const props: ChartProperty[] = [
help: 'define size of measure related to item size, expressed as a ratio.',
type: 'number',
required: false,
+ flavors: ['svg'],
defaultValue: defaultProps.measureSize,
- controlType: 'range',
group: 'Base',
- controlOptions: {
+ control: {
+ type: 'range',
min: 0,
max: 1,
step: 0.05,
@@ -170,10 +141,11 @@ const props: ChartProperty[] = [
help: 'define size of markers related to item size, expressed as a ratio.',
type: 'number',
required: false,
+ flavors: ['svg'],
defaultValue: defaultProps.markerSize,
- controlType: 'range',
group: 'Base',
- controlOptions: {
+ control: {
+ type: 'range',
min: 0,
max: 2,
step: 0.05,
@@ -190,9 +162,9 @@ const props: ChartProperty[] = [
[see dedicated documentation](self:/guides/colors).
`,
type: 'string | object | Function',
- controlType: 'inheritedColor',
required: false,
defaultValue: defaultProps.rangeBorderColor,
+ control: { type: 'inheritedColor' },
},
{
key: 'rangeBorderWidth',
@@ -200,9 +172,9 @@ const props: ChartProperty[] = [
group: 'Style',
help: 'Width of range border.',
type: 'number',
- controlType: 'lineWidth',
required: false,
defaultValue: defaultProps.rangeBorderWidth,
+ control: { type: 'lineWidth' },
},
{
key: 'rangeComponent',
@@ -221,11 +193,12 @@ const props: ChartProperty[] = [
\`greens\` or sequential form: \`seq:green\`.
`,
type: 'string | Function | string[]',
+ flavors: ['svg'],
required: false,
defaultValue: defaultProps.rangeColors,
- controlType: 'colors',
group: 'Style',
- controlOptions: {
+ control: {
+ type: 'colors',
includeSequential: true,
},
},
@@ -239,9 +212,9 @@ const props: ChartProperty[] = [
[see dedicated documentation](self:/guides/colors).
`,
type: 'string | object | Function',
- controlType: 'inheritedColor',
required: false,
defaultValue: defaultProps.measureBorderColor,
+ control: { type: 'inheritedColor' },
},
{
key: 'measureBorderWidth',
@@ -249,9 +222,9 @@ const props: ChartProperty[] = [
group: 'Style',
help: 'Width of measure border.',
type: 'number',
- controlType: 'lineWidth',
required: false,
defaultValue: defaultProps.measureBorderWidth,
+ control: { type: 'lineWidth' },
},
{
key: 'measureComponent',
@@ -271,10 +244,11 @@ const props: ChartProperty[] = [
`,
type: 'string | Function | string[]',
required: false,
+ flavors: ['svg'],
defaultValue: defaultProps.measureColors,
- controlType: 'colors',
group: 'Style',
- controlOptions: {
+ control: {
+ type: 'colors',
includeSequential: true,
},
},
@@ -288,6 +262,7 @@ const props: ChartProperty[] = [
},
{
key: 'markerColors',
+ flavors: ['svg'],
help: 'Markers colors.',
description: `
Defines colors for markers,
@@ -297,9 +272,9 @@ const props: ChartProperty[] = [
type: 'string | Function| string[]',
required: false,
defaultValue: defaultProps.markerColors,
- controlType: 'colors',
group: 'Style',
- controlOptions: {
+ control: {
+ type: 'colors',
includeSequential: true,
},
},
@@ -309,9 +284,10 @@ const props: ChartProperty[] = [
type: 'string',
required: false,
defaultValue: defaultProps.axisPosition,
- controlType: 'radio',
+ flavors: ['svg'],
group: 'Axes',
- controlOptions: {
+ control: {
+ type: 'radio',
choices: [
{ label: 'before', value: 'before' },
{ label: 'after', value: 'after' },
@@ -324,9 +300,10 @@ const props: ChartProperty[] = [
type: 'string',
required: false,
defaultValue: defaultProps.titlePosition,
- controlType: 'radio',
+ flavors: ['svg'],
group: 'Title',
- controlOptions: {
+ control: {
+ type: 'radio',
choices: [
{ label: 'before', value: 'before' },
{ label: 'after', value: 'after' },
@@ -339,9 +316,10 @@ const props: ChartProperty[] = [
type: 'string',
required: false,
defaultValue: defaultProps.titleAlign,
- controlType: 'choices',
+ flavors: ['svg'],
group: 'Title',
- controlOptions: {
+ control: {
+ type: 'choices',
choices: [
{ label: 'start', value: 'start' },
{ label: 'middle', value: 'middle' },
@@ -354,10 +332,11 @@ const props: ChartProperty[] = [
help: 'title x offset from bullet edge.',
type: 'number',
required: false,
- defaultValue: defaultProps.titleOffset,
- controlType: 'range',
+ defaultValue: defaultProps.titleOffsetX,
+ flavors: ['svg'],
group: 'Title',
- controlOptions: {
+ control: {
+ type: 'range',
min: -100,
max: 100,
unit: 'px',
@@ -368,10 +347,11 @@ const props: ChartProperty[] = [
help: 'title y offset from bullet edge.',
type: 'number',
required: false,
- defaultValue: defaultProps.titleOffset,
- controlType: 'range',
+ defaultValue: defaultProps.titleOffsetY,
+ flavors: ['svg'],
group: 'Title',
- controlOptions: {
+ control: {
+ type: 'range',
min: -100,
max: 100,
unit: 'px',
@@ -383,9 +363,10 @@ const props: ChartProperty[] = [
type: 'number',
required: false,
defaultValue: defaultProps.titleRotation,
- controlType: 'angle',
+ flavors: ['svg'],
group: 'Title',
- controlOptions: {
+ control: {
+ type: 'angle',
start: 90,
min: -360,
max: 360,
diff --git a/website/src/data/components/bump/props.ts b/website/src/data/components/bump/props.ts
index b550d542f7..1050f39418 100644
--- a/website/src/data/components/bump/props.ts
+++ b/website/src/data/components/bump/props.ts
@@ -1,17 +1,23 @@
+// @ts-ignore
import { BumpDefaultProps as defaults } from '@nivo/bump'
+import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties'
import {
- themeProperty,
- motionProperties,
- axesProperties,
- groupProperties,
-} from '../../../lib/componentProperties'
-import { ChartProperty } from '../../../types'
+ chartDimensions,
+ ordinalColors,
+ chartGrid,
+ axes,
+ isInteractive,
+} from '../../../lib/chart-properties'
+import { ChartProperty, Flavor } from '../../../types'
+
+const allFlavors: Flavor[] = ['svg']
const props: ChartProperty[] = [
{
key: 'data',
group: 'Base',
help: 'Chart data.',
+ flavors: allFlavors,
description: `
Chart data, which must conform to this structure:
\`\`\`
@@ -29,64 +35,17 @@ const props: ChartProperty[] = [
required: true,
type: 'object[]',
},
- {
- key: 'width',
- group: 'Base',
- enableControlForFlavors: ['api'],
- help: 'Chart width.',
- description: `
- not required if using
- \`\`.
- Also note that width does not include labels,
- so you should add enough margin to display them.
- `,
- type: 'number',
- required: true,
- controlType: 'range',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
- {
- key: 'height',
- group: 'Base',
- enableControlForFlavors: ['api'],
- help: 'Chart height.',
- description: `
- not required if using
- \`\`.
- Also note that width does not include labels,
- so you should add enough margin to display them.
- `,
- type: 'number',
- required: true,
- controlType: 'range',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
- {
- key: 'margin',
- group: 'Base',
- help: 'Chart margin.',
- type: 'object',
- controlType: 'margin',
- },
+ ...chartDimensions(allFlavors),
{
key: 'interpolation',
group: 'Base',
type: 'string',
help: `Line interpolation.`,
required: false,
+ flavors: ['svg'],
defaultValue: defaults.interpolation,
- controlType: 'radio',
- controlOptions: {
+ control: {
+ type: 'radio',
choices: [
{ label: 'smooth', value: 'smooth' },
{ label: 'linear', value: 'linear' },
@@ -99,8 +58,10 @@ const props: ChartProperty[] = [
type: 'number',
help: 'X padding.',
defaultValue: defaults.xPadding,
- controlType: 'range',
- controlOptions: {
+ flavors: ['svg'],
+ required: false,
+ control: {
+ type: 'range',
min: 0,
max: 1,
step: 0.05,
@@ -112,8 +73,10 @@ const props: ChartProperty[] = [
type: 'number',
help: 'X outer padding.',
defaultValue: defaults.xOuterPadding,
- controlType: 'range',
- controlOptions: {
+ flavors: ['svg'],
+ required: false,
+ control: {
+ type: 'range',
min: 0,
max: 1,
step: 0.05,
@@ -125,38 +88,39 @@ const props: ChartProperty[] = [
type: 'number',
help: 'Y outer padding.',
defaultValue: defaults.yOuterPadding,
- controlType: 'range',
- controlOptions: {
+ flavors: ['svg'],
+ required: false,
+ control: {
+ type: 'range',
min: 0,
max: 1,
step: 0.05,
},
},
themeProperty(['svg']),
- {
- key: 'colors',
- help: 'Defines color range.',
- type: 'string | Function | string[]',
- required: false,
+ ordinalColors({
+ flavors: allFlavors,
defaultValue: defaults.colors,
- controlType: 'ordinalColors',
- group: 'Style',
- },
+ }),
{
key: 'lineWidth',
group: 'Style',
type: 'number | (serie: Serie) => number',
help: 'Line width.',
+ flavors: ['svg'],
+ required: false,
defaultValue: defaults.lineWidth,
- controlType: 'lineWidth',
+ control: { type: 'lineWidth' },
},
{
key: 'activeLineWidth',
group: 'Style',
type: 'number | (serie: Serie) => number',
help: 'Line width for active series.',
+ flavors: ['svg'],
+ required: false,
defaultValue: defaults.activeLineWidth,
- controlType: 'lineWidth',
+ control: { type: 'lineWidth' },
},
{
key: 'inactiveLineWidth',
@@ -164,7 +128,9 @@ const props: ChartProperty[] = [
type: 'number | (serie: Serie) => number',
help: 'Line width for inactive series.',
defaultValue: defaults.inactiveLineWidth,
- controlType: 'lineWidth',
+ flavors: ['svg'],
+ required: false,
+ control: { type: 'lineWidth' },
},
{
key: 'opacity',
@@ -172,7 +138,9 @@ const props: ChartProperty[] = [
type: 'number | (serie: Serie) => number',
help: 'Opacity.',
defaultValue: defaults.opacity,
- controlType: 'opacity',
+ flavors: ['svg'],
+ required: false,
+ control: { type: 'opacity' },
},
{
key: 'activeOpacity',
@@ -180,7 +148,9 @@ const props: ChartProperty[] = [
type: 'number | (serie: Serie) => number',
help: 'Opacity for active series.',
defaultValue: defaults.activeOpacity,
- controlType: 'opacity',
+ flavors: ['svg'],
+ required: false,
+ control: { type: 'opacity' },
},
{
key: 'inactiveOpacity',
@@ -188,21 +158,29 @@ const props: ChartProperty[] = [
type: 'number | (serie: Serie) => number',
help: 'Opacity for inactive series.',
defaultValue: defaults.inactiveOpacity,
- controlType: 'opacity',
+ flavors: ['svg'],
+ required: false,
+ control: { type: 'opacity' },
},
{
key: 'startLabel',
+ help: 'Start label.',
group: 'Labels',
type: 'false | string | (serie: Serie) => string',
defaultValue: defaults.startLabel,
+ flavors: ['svg'],
+ required: false,
},
{
key: 'startLabelPadding',
+ help: 'Start label padding.',
group: 'Labels',
type: 'number',
defaultValue: defaults.startLabelPadding,
- controlType: 'range',
- controlOptions: {
+ flavors: ['svg'],
+ required: false,
+ control: {
+ type: 'range',
min: 0,
max: 30,
},
@@ -212,23 +190,30 @@ const props: ChartProperty[] = [
help: 'Method to compute start label text color.',
type: 'string | object | Function',
required: false,
+ flavors: ['svg'],
defaultValue: defaults.startLabelTextColor,
- controlType: 'inheritedColor',
+ control: { type: 'inheritedColor' },
group: 'Labels',
},
{
key: 'endLabel',
+ help: 'End label.',
group: 'Labels',
type: 'false | string | (serie: Serie) => string',
defaultValue: defaults.endLabel,
+ flavors: ['svg'],
+ required: false,
},
{
key: 'endLabelPadding',
+ help: 'End label padding.',
group: 'Labels',
type: 'number',
defaultValue: defaults.endLabelPadding,
- controlType: 'range',
- controlOptions: {
+ flavors: ['svg'],
+ required: false,
+ control: {
+ type: 'range',
min: 0,
max: 30,
},
@@ -239,7 +224,8 @@ const props: ChartProperty[] = [
type: 'string | object | Function',
required: false,
defaultValue: defaults.endLabelTextColor,
- controlType: 'inheritedColor',
+ flavors: ['svg'],
+ control: { type: 'inheritedColor' },
group: 'Labels',
},
{
@@ -248,8 +234,10 @@ const props: ChartProperty[] = [
help: 'Point size.',
type: 'number | Function',
defaultValue: defaults.pointSize,
- controlType: 'range',
- controlOptions: {
+ flavors: ['svg'],
+ required: false,
+ control: {
+ type: 'range',
min: 0,
max: 24,
},
@@ -260,8 +248,10 @@ const props: ChartProperty[] = [
help: 'Point size for active series.',
type: 'number | Function',
defaultValue: defaults.activePointSize,
- controlType: 'range',
- controlOptions: {
+ flavors: ['svg'],
+ required: false,
+ control: {
+ type: 'range',
min: 0,
max: 24,
},
@@ -272,8 +262,10 @@ const props: ChartProperty[] = [
help: 'Point size for inactive series.',
type: 'number | Function',
defaultValue: defaults.inactivePointSize,
- controlType: 'range',
- controlOptions: {
+ flavors: ['svg'],
+ required: false,
+ control: {
+ type: 'range',
min: 0,
max: 24,
},
@@ -284,8 +276,10 @@ const props: ChartProperty[] = [
type: 'string | object | Function',
help: 'Method to compute point fill color.',
defaultValue: defaults.pointColor,
- controlType: 'inheritedColor',
- controlOptions: {
+ flavors: ['svg'],
+ required: false,
+ control: {
+ type: 'inheritedColor',
inheritableProperties: ['serie.color'],
},
},
@@ -295,7 +289,9 @@ const props: ChartProperty[] = [
help: 'Point border width.',
type: 'number | Function',
defaultValue: defaults.pointBorderWidth,
- controlType: 'lineWidth',
+ flavors: ['svg'],
+ required: false,
+ control: { type: 'lineWidth' },
},
{
key: 'activePointBorderWidth',
@@ -303,7 +299,9 @@ const props: ChartProperty[] = [
help: 'Point border width for active series.',
type: 'number | Function',
defaultValue: defaults.activePointBorderWidth,
- controlType: 'lineWidth',
+ flavors: ['svg'],
+ required: false,
+ control: { type: 'lineWidth' },
},
{
key: 'inactivePointBorderWidth',
@@ -311,7 +309,9 @@ const props: ChartProperty[] = [
help: 'Point border width for inactive series.',
type: 'number | Function',
defaultValue: defaults.inactivePointBorderWidth,
- controlType: 'lineWidth',
+ flavors: ['svg'],
+ required: false,
+ control: { type: 'lineWidth' },
},
{
key: 'pointBorderColor',
@@ -319,45 +319,30 @@ const props: ChartProperty[] = [
type: 'string | object | Function',
help: 'Method to compute point border color.',
defaultValue: defaults.pointBorderColor,
- controlType: 'inheritedColor',
- controlOptions: {
+ flavors: ['svg'],
+ required: false,
+ control: {
+ type: 'inheritedColor',
inheritableProperties: ['color', 'serie.color'],
},
},
- {
- key: 'enableGridX',
- group: 'Grid & Axes',
- help: 'Enable/disable x grid.',
- type: 'boolean',
- required: false,
- defaultValue: defaults.enableGridX,
- controlType: 'switch',
- },
- {
- key: 'enableGridY',
- group: 'Grid & Axes',
- help: 'Enable/disable y grid.',
- type: 'boolean',
- required: false,
- defaultValue: defaults.enableGridY,
- controlType: 'switch',
- },
- ...axesProperties(),
- {
- key: 'isInteractive',
- group: 'Interactivity',
- type: 'boolean',
- help: 'Enable/disable interactivity.',
- required: false,
+ ...chartGrid({
+ flavors: allFlavors,
+ xDefault: defaults.enableGridX,
+ yDefault: defaults.enableGridY,
+ }),
+ ...axes({ flavors: allFlavors }),
+ isInteractive({
+ flavors: ['svg'],
defaultValue: defaults.isInteractive,
- controlType: 'switch',
- },
+ }),
{
key: 'onMouseEnter',
group: 'Interactivity',
type: '(serie, event) => void',
help: 'onMouseEnter handler.',
required: false,
+ flavors: ['svg'],
},
{
key: 'onMouseMove',
@@ -365,6 +350,7 @@ const props: ChartProperty[] = [
type: '(serie, event) => void',
help: 'onMouseMove handler.',
required: false,
+ flavors: ['svg'],
},
{
key: 'onMouseLeave',
@@ -372,6 +358,7 @@ const props: ChartProperty[] = [
type: '(serie, event) => void',
help: 'onMouseLeave handler.',
required: false,
+ flavors: ['svg'],
},
{
key: 'onClick',
@@ -379,6 +366,7 @@ const props: ChartProperty[] = [
type: '(serie, event) => void',
help: 'onClick handler.',
required: false,
+ flavors: ['svg'],
},
{
key: 'tooltip',
@@ -391,6 +379,7 @@ const props: ChartProperty[] = [
it must return a valid HTML
element and will receive the series's data.
`,
+ flavors: ['svg'],
},
...motionProperties(['svg'], defaults, 'react-spring'),
]
diff --git a/website/src/data/components/calendar/props.ts b/website/src/data/components/calendar/props.ts
index c5c5a5a46d..f196313806 100644
--- a/website/src/data/components/calendar/props.ts
+++ b/website/src/data/components/calendar/props.ts
@@ -1,7 +1,9 @@
-import { boxAlignments } from '@nivo/core'
import { calendarDefaultProps as defaults } from '@nivo/calendar'
import { themeProperty, groupProperties } from '../../../lib/componentProperties'
-import { ChartProperty } from '../../../types'
+import { chartDimensions, isInteractive } from '../../../lib/chart-properties'
+import { ChartProperty, Flavor } from '../../../types'
+
+const allFlavors: Flavor[] = ['svg', 'canvas', 'api']
const props: ChartProperty[] = [
{
@@ -21,6 +23,7 @@ const props: ChartProperty[] = [
`,
type: 'object[]',
required: true,
+ flavors: allFlavors,
},
{
key: 'from',
@@ -28,6 +31,7 @@ const props: ChartProperty[] = [
help: 'start date',
type: 'string | Date',
required: true,
+ flavors: allFlavors,
},
{
key: 'to',
@@ -35,81 +39,35 @@ const props: ChartProperty[] = [
help: 'end date',
type: 'string | Date',
required: true,
+ flavors: allFlavors,
},
- {
- key: 'width',
- enableControlForFlavors: ['api'],
- help: 'Chart width.',
- description: `
- not required if using responsive alternative of
- the component \`\`.
- `,
- type: 'number',
- required: true,
- controlType: 'range',
- group: 'Base',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
- {
- key: 'height',
- enableControlForFlavors: ['api'],
- help: 'Chart height.',
- description: `
- not required if using responsive alternative of
- the component \`\`.
- `,
- type: 'number',
- required: true,
- controlType: 'range',
- group: 'Base',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
+ ...chartDimensions(allFlavors),
{
key: 'direction',
help: 'defines calendar layout direction.',
type: 'string',
required: false,
defaultValue: defaults.direction,
- controlType: 'radio',
+ flavors: ['svg', 'canvas', 'api'],
group: 'Base',
- controlOptions: {
+ control: {
+ type: 'radio',
choices: [
{ label: 'horizontal', value: 'horizontal' },
{ label: 'vertical', value: 'vertical' },
],
},
},
- {
- key: 'margin',
- help: 'Chart margin.',
- type: 'object',
- required: false,
- controlType: 'margin',
- group: 'Base',
- },
{
key: 'align',
help: 'defines how calendar should be aligned inside chart container.',
type: 'string',
required: false,
+ flavors: ['svg', 'canvas', 'api'],
defaultValue: defaults.align,
- controlType: 'boxAnchor',
group: 'Base',
- controlOptions: {
- choices: boxAlignments.map(align => ({
- label: align,
- value: align,
- })),
+ control: {
+ type: 'boxAnchor',
},
},
{
@@ -122,11 +80,12 @@ const props: ChartProperty[] = [
desired lower bound value.
`,
required: false,
+ flavors: ['svg', 'canvas', 'api'],
defaultValue: defaults.minValue,
type: `number | 'auto'`,
- controlType: 'switchableRange',
group: 'Base',
- controlOptions: {
+ control: {
+ type: 'switchableRange',
disabledValue: 'auto',
defaultValue: 0,
min: -300,
@@ -143,11 +102,12 @@ const props: ChartProperty[] = [
desired higher bound value.
`,
required: false,
+ flavors: ['svg', 'canvas', 'api'],
defaultValue: defaults.maxValue,
type: `number | 'auto'`,
- controlType: 'switchableRange',
group: 'Base',
- controlOptions: {
+ control: {
+ type: 'switchableRange',
disabledValue: 'auto',
defaultValue: 100,
min: 0,
@@ -167,6 +127,7 @@ const props: ChartProperty[] = [
`,
type: 'string[]',
required: false,
+ flavors: ['svg', 'canvas', 'api'],
defaultValue: defaults.colors,
},
{
@@ -174,24 +135,11 @@ const props: ChartProperty[] = [
help: 'color to use to fill days without available value.',
type: 'string',
required: false,
+ flavors: ['svg', 'canvas', 'api'],
defaultValue: defaults.emptyColor,
- controlType: 'colorPicker',
+ control: { type: 'colorPicker' },
group: 'Style',
},
- {
- key: 'pixelRatio',
- flavors: ['canvas'],
- help: `Adjust pixel ratio, useful for HiDPI screens.`,
- required: false,
- defaultValue: 'Depends on device',
- type: `number`,
- controlType: 'range',
- group: 'Base',
- controlOptions: {
- min: 1,
- max: 2,
- },
- },
// Years
{
key: 'yearSpacing',
@@ -199,9 +147,10 @@ const props: ChartProperty[] = [
type: 'number',
required: false,
defaultValue: defaults.yearSpacing,
- controlType: 'range',
+ flavors: ['svg', 'canvas', 'api'],
group: 'Years',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: 0,
max: 160,
@@ -214,6 +163,7 @@ const props: ChartProperty[] = [
help: `can be used to customize years label, returns 'YYYY' by default.`,
type: '(year: number) => string | number',
required: false,
+ flavors: ['svg', 'canvas', 'api'],
},
{
key: 'yearLegendPosition',
@@ -221,9 +171,10 @@ const props: ChartProperty[] = [
type: `'before' | 'after'`,
required: false,
defaultValue: defaults.yearLegendPosition,
- controlType: 'radio',
+ flavors: ['svg', 'canvas', 'api'],
group: 'Years',
- controlOptions: {
+ control: {
+ type: 'radio',
choices: [
{ label: 'before', value: 'before' },
{ label: 'after', value: 'after' },
@@ -236,9 +187,10 @@ const props: ChartProperty[] = [
type: 'number',
required: false,
defaultValue: defaults.yearLegendOffset,
- controlType: 'range',
+ flavors: ['svg', 'canvas', 'api'],
group: 'Years',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: 0,
max: 60,
@@ -251,9 +203,10 @@ const props: ChartProperty[] = [
type: 'number',
required: false,
defaultValue: defaults.monthSpacing,
- controlType: 'range',
+ flavors: ['svg', 'canvas', 'api'],
group: 'Months',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: 0,
max: 160,
@@ -267,7 +220,7 @@ const props: ChartProperty[] = [
type: 'number',
required: false,
defaultValue: defaults.monthBorderWidth,
- controlType: 'lineWidth',
+ control: { type: 'lineWidth' },
group: 'Months',
},
{
@@ -277,7 +230,7 @@ const props: ChartProperty[] = [
type: 'string',
required: false,
defaultValue: defaults.monthBorderColor,
- controlType: 'colorPicker',
+ control: { type: 'colorPicker' },
group: 'Months',
},
{
@@ -286,6 +239,7 @@ const props: ChartProperty[] = [
type: '(year: number, month: number, date: Date) => string | number',
required: false,
group: 'Months',
+ flavors: ['svg', 'canvas', 'api'],
},
{
key: 'monthLegendPosition',
@@ -293,9 +247,10 @@ const props: ChartProperty[] = [
type: `'before' | 'after'`,
required: false,
defaultValue: defaults.monthLegendPosition,
- controlType: 'radio',
+ flavors: ['svg', 'canvas', 'api'],
group: 'Months',
- controlOptions: {
+ control: {
+ type: 'radio',
choices: [
{ label: 'before', value: 'before' },
{ label: 'after', value: 'after' },
@@ -308,9 +263,10 @@ const props: ChartProperty[] = [
type: 'number',
required: false,
defaultValue: defaults.monthLegendOffset,
- controlType: 'range',
+ flavors: ['svg', 'canvas', 'api'],
group: 'Months',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: 0,
max: 36,
@@ -323,9 +279,10 @@ const props: ChartProperty[] = [
type: 'number',
required: false,
defaultValue: defaults.daySpacing,
- controlType: 'range',
+ flavors: ['svg', 'canvas', 'api'],
group: 'Days',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: 0,
max: 20,
@@ -337,7 +294,8 @@ const props: ChartProperty[] = [
type: 'number',
required: false,
defaultValue: defaults.dayBorderWidth,
- controlType: 'lineWidth',
+ flavors: ['svg', 'canvas', 'api'],
+ control: { type: 'lineWidth' },
group: 'Days',
},
{
@@ -346,19 +304,14 @@ const props: ChartProperty[] = [
type: 'string',
required: false,
defaultValue: defaults.dayBorderColor,
- controlType: 'colorPicker',
+ flavors: ['svg', 'canvas', 'api'],
+ control: { type: 'colorPicker' },
group: 'Days',
},
- {
- key: 'isInteractive',
+ isInteractive({
flavors: ['svg', 'canvas'],
- help: 'Enable/disable interactivity.',
- type: 'boolean',
- required: false,
defaultValue: defaults.isInteractive,
- controlType: 'switch',
- group: 'Interactivity',
- },
+ }),
{
key: 'onClick',
flavors: ['svg', 'canvas'],
@@ -397,7 +350,8 @@ const props: ChartProperty[] = [
flavors: ['svg', 'canvas'],
help: 'Showcase custom tooltip.',
type: 'boolean',
- controlType: 'switch',
+ required: false,
+ control: { type: 'switch' },
group: 'Interactivity',
},
]
diff --git a/website/src/data/components/chord/props.ts b/website/src/data/components/chord/props.ts
index f5a6285943..fc329f381b 100644
--- a/website/src/data/components/chord/props.ts
+++ b/website/src/data/components/chord/props.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
import { ChordDefaultProps as defaults } from '@nivo/chord'
import {
themeProperty,
@@ -5,7 +6,10 @@ import {
groupProperties,
getLegendsProps,
} from '../../../lib/componentProperties'
-import { ChartProperty } from '../../../types'
+import { chartDimensions, ordinalColors, isInteractive } from '../../../lib/chart-properties'
+import { ChartProperty, Flavor } from '../../../types'
+
+const allFlavors: Flavor[] = ['svg', 'canvas', 'api']
const props: ChartProperty[] = [
{
@@ -33,6 +37,7 @@ const props: ChartProperty[] = [
\`\`\`
`,
required: true,
+ flavors: allFlavors,
type: 'string[]',
},
{
@@ -46,6 +51,7 @@ const props: ChartProperty[] = [
`,
required: true,
type: 'Array',
+ flavors: allFlavors,
},
{
key: 'valueFormat',
@@ -53,80 +59,19 @@ const props: ChartProperty[] = [
type: 'string | Function',
required: false,
help: `Optional value formatter.`,
+ flavors: allFlavors,
},
- {
- key: 'width',
- enableControlForFlavors: ['api'],
- help: 'Chart width.',
- description: `
- not required if using
- \`\`.
- Also note that width does not include labels,
- so you should add enough margin to display them.
- `,
- type: 'number',
- required: true,
- controlType: 'range',
- group: 'Base',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
- {
- key: 'height',
- enableControlForFlavors: ['api'],
- help: 'Chart height.',
- description: `
- not required if using
- \`\`.
- Also note that width does not include labels,
- so you should add enough margin to display them.
- `,
- type: 'number',
- required: true,
- controlType: 'range',
- group: 'Base',
- controlOptions: {
- unit: 'px',
- min: 100,
- max: 1000,
- step: 5,
- },
- },
- {
- key: 'pixelRatio',
- flavors: ['canvas'],
- help: `Adjust pixel ratio, useful for HiDPI screens.`,
- required: false,
- defaultValue: 'Depends on device',
- type: `number`,
- controlType: 'range',
- group: 'Base',
- controlOptions: {
- min: 1,
- max: 2,
- },
- },
- {
- key: 'margin',
- help: 'Chart margin.',
- type: 'object',
- required: false,
- controlType: 'margin',
- group: 'Base',
- },
+ ...chartDimensions(allFlavors),
{
key: 'padAngle',
help: 'Padding angle.',
required: false,
defaultValue: defaults.padAngle,
type: 'number',
- controlType: 'range',
group: 'Base',
- controlOptions: {
+ flavors: allFlavors,
+ control: {
+ type: 'range',
min: 0,
max: 1,
step: 0.01,
@@ -138,9 +83,10 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.innerRadiusRatio,
type: 'number',
- controlType: 'range',
group: 'Base',
- controlOptions: {
+ flavors: allFlavors,
+ control: {
+ type: 'range',
min: 0,
max: 1,
step: 0.01,
@@ -152,32 +98,29 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.innerRadiusOffset,
type: 'number',
- controlType: 'range',
group: 'Base',
- controlOptions: {
+ flavors: allFlavors,
+ control: {
+ type: 'range',
min: 0,
max: 1,
step: 0.01,
},
},
- themeProperty(['svg', 'canvas', 'api']),
- {
- key: 'colors',
- help: 'Defines how to compute arc/ribbon color.',
- type: 'string | Function | string[]',
- required: false,
+ themeProperty(allFlavors),
+ ordinalColors({
+ flavors: allFlavors,
defaultValue: defaults.colors,
- flavors: ['svg', 'canvas', 'api'],
- controlType: 'ordinalColors',
- group: 'Style',
- },
+ help: 'Defines how to compute arcs & ribbons color.',
+ }),
{
key: 'arcOpacity',
help: 'Arcs opacity.',
required: false,
defaultValue: defaults.arcOpacity,
type: 'number',
- controlType: 'opacity',
+ flavors: allFlavors,
+ control: { type: 'opacity' },
group: 'Style',
},
{
@@ -186,7 +129,8 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.arcBorderWidth,
type: 'number',
- controlType: 'lineWidth',
+ flavors: allFlavors,
+ control: { type: 'lineWidth' },
group: 'Style',
},
{
@@ -194,8 +138,9 @@ const props: ChartProperty[] = [
help: 'Arcs border color.',
required: false,
defaultValue: defaults.arcBorderColor,
+ flavors: allFlavors,
type: 'string | object | Function',
- controlType: 'inheritedColor',
+ control: { type: 'inheritedColor' },
group: 'Style',
},
{
@@ -204,7 +149,8 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.ribbonOpacity,
type: 'number',
- controlType: 'opacity',
+ flavors: allFlavors,
+ control: { type: 'opacity' },
group: 'Style',
},
{
@@ -213,7 +159,8 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.ribbonBorderWidth,
type: 'number',
- controlType: 'lineWidth',
+ control: { type: 'lineWidth' },
+ flavors: allFlavors,
group: 'Style',
},
{
@@ -222,7 +169,8 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.ribbonBorderColor,
type: 'string | object | Function',
- controlType: 'inheritedColor',
+ control: { type: 'inheritedColor' },
+ flavors: allFlavors,
group: 'Style',
},
{
@@ -231,7 +179,8 @@ const props: ChartProperty[] = [
type: 'boolean',
required: false,
defaultValue: defaults.enableLabel,
- controlType: 'switch',
+ control: { type: 'switch' },
+ flavors: allFlavors,
group: 'Labels',
},
{
@@ -240,9 +189,10 @@ const props: ChartProperty[] = [
type: 'string | Function',
required: false,
defaultValue: defaults.label,
- controlType: 'choices',
group: 'Labels',
- controlOptions: {
+ flavors: allFlavors,
+ control: {
+ type: 'choices',
choices: ['id', 'value', `d => \`\${d.id} [\${d.value}]\``].map(choice => ({
label: choice,
value: choice,
@@ -255,9 +205,10 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.labelOffset,
type: 'number',
- controlType: 'range',
+ flavors: allFlavors,
group: 'Labels',
- controlOptions: {
+ control: {
+ type: 'range',
unit: 'px',
min: -80,
max: 80,
@@ -269,9 +220,10 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.labelRotation,
type: 'number',
- controlType: 'angle',
group: 'Labels',
- controlOptions: {
+ flavors: allFlavors,
+ control: {
+ type: 'angle',
min: -180,
max: 180,
step: 5,
@@ -286,8 +238,9 @@ const props: ChartProperty[] = [
help: 'Method to compute label text color.',
type: 'string | object | Function',
required: false,
+ flavors: allFlavors,
defaultValue: defaults.labelTextColor,
- controlType: 'inheritedColor',
+ control: { type: 'inheritedColor' },
group: 'Labels',
},
{
@@ -311,20 +264,15 @@ const props: ChartProperty[] = [
modifications to the 2d context inside this function
to avoid side effects.
`,
+ flavors: allFlavors,
required: false,
type: 'Array',
defaultValue: defaults.layers,
},
- {
- key: 'isInteractive',
+ isInteractive({
flavors: ['svg', 'canvas'],
- help: 'Enable/disable interactivity.',
- type: 'boolean',
- required: false,
defaultValue: defaults.isInteractive,
- controlType: 'switch',
- group: 'Interactivity',
- },
+ }),
{
key: 'arcHoverOpacity',
flavors: ['svg', 'canvas'],
@@ -332,7 +280,7 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.arcHoverOpacity,
type: 'number',
- controlType: 'opacity',
+ control: { type: 'opacity' },
group: 'Interactivity',
},
{
@@ -342,7 +290,7 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.arcHoverOthersOpacity,
type: 'number',
- controlType: 'opacity',
+ control: { type: 'opacity' },
group: 'Interactivity',
},
{
@@ -352,7 +300,7 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.ribbonHoverOpacity,
type: 'number',
- controlType: 'opacity',
+ control: { type: 'opacity' },
group: 'Interactivity',
},
{
@@ -362,7 +310,7 @@ const props: ChartProperty[] = [
required: false,
defaultValue: defaults.ribbonHoverOthersOpacity,
type: 'number',
- controlType: 'opacity',
+ control: { type: 'opacity' },
group: 'Interactivity',
},
{
@@ -461,13 +409,14 @@ const props: ChartProperty[] = [
type: 'object[]',
help: `Optional chart's legends.`,
group: 'Legends',
- controlType: 'array',
- controlOptions: {
+ required: false,
+ control: {
+ type: 'array',
props: getLegendsProps(['svg', 'canvas']),
shouldCreate: true,
addLabel: 'add legend',
shouldRemove: true,
- getItemTitle: (index, legend) =>
+ getItemTitle: (index, legend: any) =>
`legend[${index}]: ${legend.anchor}, ${legend.direction}`,
defaults: {
dataFrom: 'keys',
@@ -481,8 +430,8 @@ const props: ChartProperty[] = [
itemsSpacing: 0,
symbolSize: 20,
itemDirection: 'left-to-right',
- onClick: data => {
- alert(JSON.stringify(data, null, ' '))
+ onClick: (data: any) => {
+ console.log(JSON.stringify(data, null, ' '))
},
},
},
diff --git a/website/src/data/components/choropleth/props.ts b/website/src/data/components/choropleth/props.ts
index d4d689b9ff..b4125a1f93 100644
--- a/website/src/data/components/choropleth/props.ts
+++ b/website/src/data/components/choropleth/props.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
import { GeoMapDefaultProps, ChoroplethDefaultProps } from '@nivo/geo'
import { getLegendsProps, groupProperties } from '../../../lib/componentProperties'
import { props as geoProps } from '../geo/props'
@@ -10,6 +11,7 @@ const props: ChartProperty[] = [
group: 'Base',
type: 'string | Function',
required: false,
+ flavors: ['svg', 'canvas'],
help: 'Label accessor.',
description: `
Accessor to label, if a string is provided,
@@ -24,6 +26,7 @@ const props: ChartProperty[] = [
group: 'Base',
type: 'string | Function',
required: false,
+ flavors: ['svg', 'canvas'],
help: 'Value accessor.',
description: `
Accessor to data value, if a string is provided,
@@ -38,6 +41,7 @@ const props: ChartProperty[] = [
group: 'Base',
type: 'string | Function',
required: false,
+ flavors: ['svg', 'canvas'],
help: 'Value formatter.',
description: `
Optional formatting of values, if provided, it will
@@ -61,31 +65,35 @@ const props: ChartProperty[] = [
`,
type: 'number[]',
required: true,
+ flavors: ['svg', 'canvas'],
group: 'Base',
},
{
key: 'colors',
+ group: 'Style',
help: 'Defines color range.',
type: 'string | Function | string[]',
required: false,
+ flavors: ['svg', 'canvas'],
defaultValue: 'nivo',
- controlType: 'quantizeColors',
- group: 'Style',
+ control: { type: 'quantizeColors' },
},
{
key: 'unknownColor',
+ group: 'Style',
help: 'Defines the color to use for features without value.',
type: 'string',
required: false,
+ flavors: ['svg', 'canvas'],
defaultValue: 'nivo',
- controlType: 'colorPicker',
- group: 'Style',
+ control: { type: 'colorPicker' },
},
{
key: 'layers',
group: 'Customization',
type: `Array<'graticule' | 'features' | Function>`,
required: false,
+ flavors: ['svg', 'canvas'],
help: 'Defines the order of layers.',
description: `
Defines the order of layers, available layers are:
@@ -107,6 +115,7 @@ const props: ChartProperty[] = [
group: 'Interactivity',
type: 'Function',
required: false,
+ flavors: ['svg', 'canvas'],
help: 'Custom tooltip component.',
description: `
A function allowing complete tooltip customisation,
@@ -116,20 +125,24 @@ const props: ChartProperty[] = [
},
{
key: 'custom tooltip example',
+ group: 'Interactivity',
excludeFromDoc: true,
+ required: false,
help: 'Showcase custom tooltip.',
type: 'boolean',
- controlType: 'switch',
- group: 'Interactivity',
+ flavors: ['svg', 'canvas'],
+ control: { type: 'switch' },
},
{
key: 'legends',
type: '{Array