diff --git a/Makefile b/Makefile index dbbe4e3f3..c70c63fc4 100644 --- a/Makefile +++ b/Makefile @@ -103,6 +103,10 @@ define clean-source-all rm -rf $(1)/*/package-lock.json endef +lint: ##@0 run eslint & tslint + @$(MAKE) packages-lint + @$(MAKE) packages-tslint + ######################################################################################################################## # # PACKAGES diff --git a/api/src/mapping/bar.js b/api/src/mapping/bar.js index 2cf55617c..60f2de99b 100644 --- a/api/src/mapping/bar.js +++ b/api/src/mapping/bar.js @@ -11,12 +11,13 @@ const Joi = require('joi') const { Bar } = require('@nivo/bar') const common = require('./common') +const { dimensions } = require('./commons/dimensions') +const { inheritedColor, ordinalColors } = require('./commons/colors') module.exports = { component: Bar, schema: Joi.object().keys( - Object.assign({}, common.dimensions, common.axes, { - // data + Object.assign({}, dimensions, common.axes, { data: Joi.array() .min(1) .required(), @@ -42,22 +43,19 @@ module.exports = { borderRadius: Joi.number().min(0), borderWidth: Joi.number().min(0), - borderColor: Joi.string(), + borderColor: inheritedColor, - // grid enableGridX: Joi.boolean(), enableGridY: Joi.boolean(), - // labels enableLabel: Joi.boolean(), label: Joi.string(), labelSkipWidth: Joi.number(), labelSkipHeight: Joi.number(), labelLinkColor: Joi.string(), - labelTextColor: Joi.string(), + labelTextColor: inheritedColor, - // theming - colors: Joi.string(), + colors: ordinalColors, colorBy: Joi.string(), }) ), diff --git a/api/src/mapping/bubble.js b/api/src/mapping/bubble.js index 1491a1881..da473ad3e 100644 --- a/api/src/mapping/bubble.js +++ b/api/src/mapping/bubble.js @@ -10,28 +10,28 @@ const Joi = require('joi') const { Bubble } = require('@nivo/circle-packing') -const common = require('./common') +const { dimensions } = require('./commons/dimensions') +const { inheritedColor, ordinalColors } = require('./commons/colors') module.exports = { component: Bubble, schema: Joi.object().keys( - Object.assign({}, common.dimensions, { + Object.assign({}, dimensions, { root: Joi.object().required(), identity: Joi.string().required(), value: Joi.string().required(), padding: Joi.number(), leavesOnly: Joi.boolean(), borderWidth: Joi.number(), - borderColor: Joi.string(), + borderColor: inheritedColor, enableLabel: Joi.boolean(), label: Joi.string(), labelFormat: Joi.string(), - labelTextColor: Joi.string(), + labelTextColor: inheritedColor, labelTextDY: Joi.number(), labelSkipRadius: Joi.number(), - // theming - colors: Joi.string(), + colors: ordinalColors, colorBy: Joi.string(), }) ), diff --git a/api/src/mapping/calendar.js b/api/src/mapping/calendar.js index 40de61291..5811afe8d 100644 --- a/api/src/mapping/calendar.js +++ b/api/src/mapping/calendar.js @@ -10,12 +10,12 @@ const Joi = require('joi') const { Calendar } = require('@nivo/calendar') -const common = require('./common') +const { dimensions } = require('./commons/dimensions') module.exports = { component: Calendar, schema: Joi.object().keys( - Object.assign({}, common.dimensions, { + Object.assign({}, dimensions, { from: Joi.string().required(), to: Joi.string().required(), data: Joi.array() diff --git a/api/src/mapping/chord.js b/api/src/mapping/chord.js index 73ac786b6..eec651796 100644 --- a/api/src/mapping/chord.js +++ b/api/src/mapping/chord.js @@ -10,12 +10,13 @@ const Joi = require('joi') const { Chord } = require('@nivo/chord') -const common = require('./common') +const { ordinalColors, inheritedColor } = require('./commons/colors') +const { dimensions } = require('./commons/dimensions') module.exports = { component: Chord, schema: Joi.object().keys( - Object.assign({}, common.dimensions, { + Object.assign({}, dimensions, { matrix: Joi.array().required(), keys: Joi.array().required(), @@ -31,23 +32,21 @@ module.exports = { .min(0) .max(1), ribbonBorderWidth: Joi.number().min(0), - ribbonBorderColor: Joi.string(), + ribbonBorderColor: inheritedColor, arcOpacity: Joi.number() .min(0) .max(1), arcBorderWidth: Joi.number().min(0), - arcBorderColor: Joi.string(), + arcBorderColor: inheritedColor, - // labels enableLabel: Joi.boolean(), label: Joi.string(), labelOffset: Joi.number(), labelRotation: Joi.number(), - labelTextColor: Joi.string(), + labelTextColor: inheritedColor, - // theming - colors: Joi.string(), + colors: ordinalColors, colorBy: Joi.string(), }) ), diff --git a/api/src/mapping/common.js b/api/src/mapping/common.js index bd4f0c4b6..81437551f 100644 --- a/api/src/mapping/common.js +++ b/api/src/mapping/common.js @@ -10,21 +10,6 @@ const Joi = require('joi') -exports.dimensions = { - width: Joi.number() - .integer() - .required(), - height: Joi.number() - .integer() - .required(), - margin: Joi.object().keys({ - top: Joi.number().integer(), - right: Joi.number().integer(), - bottom: Joi.number().integer(), - left: Joi.number().integer(), - }), -} - exports.axis = Joi.object() .keys({ orient: Joi.any().valid('top', 'right', 'bottom', 'left'), @@ -64,22 +49,3 @@ exports.blendMode = Joi.valid([ 'color', 'luminosity', ]) - -exports.linearScale = Joi.object().keys({ - type: Joi.valid('linear').required(), - min: Joi.alternatives().try(Joi.valid('auto'), Joi.number()), - max: Joi.alternatives().try(Joi.valid('auto'), Joi.number()), - stacked: Joi.boolean(), -}) - -exports.pointScale = Joi.object().keys({ - type: Joi.valid('point').required(), -}) - -exports.timeScale = Joi.object().keys({ - type: Joi.valid('time').required(), - format: Joi.string().required(), - precision: Joi.string().required(), -}) - -exports.scale = Joi.alternatives().try(exports.linearScale, exports.pointScale, exports.timeScale) diff --git a/api/src/mapping/commons/colors.js b/api/src/mapping/commons/colors.js new file mode 100644 index 000000000..d8e4b80ef --- /dev/null +++ b/api/src/mapping/commons/colors.js @@ -0,0 +1,34 @@ +/* + * This file is part of the nivo project. + * + * (c) 2016-today Raphaël Benitte + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +'use strict' + +const Joi = require('joi') +const { colorSchemeIds } = require('@nivo/colors') + +exports.ordinalColors = Joi.alternatives().try( + Joi.array().items(Joi.string()), + Joi.object().keys({ + scheme: Joi.valid(...colorSchemeIds).required(), + size: Joi.number(), + }), + Joi.object().keys({ + datum: Joi.string().required(), + }) +) + +exports.inheritedColor = Joi.alternatives().try( + Joi.string(), + Joi.object().keys({ + theme: Joi.string().required(), + }), + Joi.object().keys({ + from: Joi.string().required(), + modifiers: Joi.array(), + }) +) diff --git a/api/src/mapping/commons/dimensions.js b/api/src/mapping/commons/dimensions.js new file mode 100644 index 000000000..c776dccc9 --- /dev/null +++ b/api/src/mapping/commons/dimensions.js @@ -0,0 +1,26 @@ +/* + * This file is part of the nivo project. + * + * (c) 2016-today Raphaël Benitte + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +'use strict' + +const Joi = require('joi') + +exports.dimensions = { + width: Joi.number() + .integer() + .required(), + height: Joi.number() + .integer() + .required(), + margin: Joi.object().keys({ + top: Joi.number().integer(), + right: Joi.number().integer(), + bottom: Joi.number().integer(), + left: Joi.number().integer(), + }), +} diff --git a/api/src/mapping/commons/scales.js b/api/src/mapping/commons/scales.js new file mode 100644 index 000000000..994ddc461 --- /dev/null +++ b/api/src/mapping/commons/scales.js @@ -0,0 +1,30 @@ +/* + * This file is part of the nivo project. + * + * (c) 2016-today Raphaël Benitte + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +'use strict' + +const Joi = require('joi') + +exports.linearScale = Joi.object().keys({ + type: Joi.valid('linear').required(), + min: Joi.alternatives().try(Joi.valid('auto'), Joi.number()), + max: Joi.alternatives().try(Joi.valid('auto'), Joi.number()), + stacked: Joi.boolean(), +}) + +exports.pointScale = Joi.object().keys({ + type: Joi.valid('point').required(), +}) + +exports.timeScale = Joi.object().keys({ + type: Joi.valid('time').required(), + format: Joi.string().required(), + precision: Joi.string().required(), +}) + +exports.scale = Joi.alternatives().try(exports.linearScale, exports.pointScale, exports.timeScale) diff --git a/api/src/mapping/heatmap.js b/api/src/mapping/heatmap.js index 8eee11f63..8d12405e5 100644 --- a/api/src/mapping/heatmap.js +++ b/api/src/mapping/heatmap.js @@ -10,13 +10,14 @@ const Joi = require('joi') const { HeatMap } = require('@nivo/heatmap') +const { dimensions } = require('./commons/dimensions') +const { inheritedColor } = require('./commons/colors') const common = require('./common') module.exports = { component: HeatMap, schema: Joi.object().keys( - Object.assign({}, common.dimensions, common.axes, { - // data + Object.assign({}, dimensions, common.axes, { data: Joi.array() .min(1) .required(), @@ -40,23 +41,19 @@ module.exports = { .max(1), padding: Joi.number(), - // cells cellShape: Joi.any().valid(['rect', 'circle']), cellOpacity: Joi.number() .min(0) .max(1), cellBorderWidth: Joi.number().min(0), - cellBorderColor: Joi.string(), + cellBorderColor: inheritedColor, - // grid enableGridX: Joi.boolean(), enableGridY: Joi.boolean(), - // labels enableLabels: Joi.boolean(), - labelTextColor: Joi.string(), + labelTextColor: inheritedColor, - // theming colors: Joi.string(), }) ), diff --git a/api/src/mapping/line.js b/api/src/mapping/line.js index 88fe8ec2d..baa70bef7 100644 --- a/api/src/mapping/line.js +++ b/api/src/mapping/line.js @@ -11,12 +11,15 @@ const Joi = require('joi') const { Line } = require('@nivo/line') const { curvePropKeys } = require('@nivo/core') +const { scale } = require('./commons/scales') +const { ordinalColors, inheritedColor } = require('./commons/colors') +const { dimensions } = require('./commons/dimensions') const common = require('./common') module.exports = { component: Line, schema: Joi.object().keys( - Object.assign({}, common.dimensions, common.axes, { + Object.assign({}, dimensions, common.axes, { data: Joi.array() .items( Joi.object() @@ -43,34 +46,30 @@ module.exports = { .min(1) .required(), - xScale: common.scale, - yScale: common.scale, + xScale: scale, + yScale: scale, curve: Joi.any().valid(curvePropKeys), - // grid enableGridX: Joi.boolean(), enableGridY: Joi.boolean(), lineWidth: Joi.number().min(0), - // dots enableDots: Joi.boolean(), dotSize: Joi.number().min(0), - dotColor: Joi.string(), + dotColor: inheritedColor, dotBorderWidth: Joi.number().min(0), - dotBorderColor: Joi.string(), + dotBorderColor: inheritedColor, enableDotLabel: Joi.boolean(), dotLabel: Joi.string(), dotLabelYOffset: Joi.number(), - // areas enableArea: Joi.boolean(), areaBlendMode: common.blendMode, areaBaselineValue: Joi.alternatives().try(Joi.string(), Joi.number()), areaOpacity: Joi.number(), - // markers markers: Joi.array().items( Joi.object().keys({ axis: Joi.any() @@ -83,8 +82,7 @@ module.exports = { }) ), - // theming - colors: Joi.string(), + colors: ordinalColors, colorBy: Joi.string(), }) ), diff --git a/api/src/mapping/pie.js b/api/src/mapping/pie.js index d83e10087..5288ccc56 100644 --- a/api/src/mapping/pie.js +++ b/api/src/mapping/pie.js @@ -10,13 +10,13 @@ const Joi = require('joi') const { Pie } = require('@nivo/pie') -const common = require('./common') +const { ordinalColors, inheritedColor } = require('./commons/colors') +const { dimensions } = require('./commons/dimensions') module.exports = { component: Pie, schema: Joi.object().keys( - Object.assign({}, common.dimensions, { - // data + Object.assign({}, dimensions, { data: Joi.array() .min(1) .required(), @@ -25,30 +25,26 @@ module.exports = { padAngle: Joi.number().min(0), cornerRadius: Joi.number().min(0), - // border borderWidth: Joi.number().min(0), - borderColor: Joi.string(), + borderColor: inheritedColor, - // radial labels enableRadialLabels: Joi.boolean(), radialLabel: Joi.string(), radialLabelsSkipAngle: Joi.number().min(0), radialLabelsTextXOffset: Joi.number(), - radialLabelsTextColor: Joi.string(), + radialLabelsTextColor: inheritedColor, radialLabelsLinkOffset: Joi.number(), radialLabelsLinkDiagonalLength: Joi.number(), radialLabelsLinkHorizontalLength: Joi.number(), radialLabelsLinkStrokeWidth: Joi.number().min(0), - radialLabelsLinkColor: Joi.string(), + radialLabelsLinkColor: inheritedColor, - // slice labels enableSlicesLabels: Joi.boolean(), sliceLabel: Joi.string(), slicesLabelsSkipAngle: Joi.number().min(0), - slicesLabelsTextColor: Joi.string(), + slicesLabelsTextColor: inheritedColor, - // theming - colors: Joi.string(), + colors: ordinalColors, colorBy: Joi.string(), }) ), diff --git a/api/src/mapping/radar.js b/api/src/mapping/radar.js index 2ae7bc2f7..6b7e01609 100644 --- a/api/src/mapping/radar.js +++ b/api/src/mapping/radar.js @@ -10,13 +10,13 @@ const Joi = require('joi') const { Radar } = require('@nivo/radar') -const common = require('./common') +const { ordinalColors, inheritedColor } = require('./commons/colors') +const { dimensions } = require('./commons/dimensions') module.exports = { component: Radar, schema: Joi.object().keys( - Object.assign({}, common.dimensions, { - // data + Object.assign({}, dimensions, { data: Joi.array() .min(1) .required(), @@ -26,11 +26,12 @@ module.exports = { .unique() .required(), indexBy: Joi.string().required(), + maxValue: Joi.alternatives().try(Joi.valid('auto'), Joi.number()), curve: Joi.string(), borderWidth: Joi.number().min(0), - borderColor: Joi.string(), + borderColor: inheritedColor, gridLevels: Joi.number() .integer() @@ -38,23 +39,20 @@ module.exports = { gridShape: Joi.any().valid(['linear', 'circular']), gridLabelOffset: Joi.number(), - // labels enableLabels: Joi.boolean(), - labelsTextColor: Joi.string(), + labelsTextColor: inheritedColor, labelsLinkColor: Joi.string(), - // dots enableDots: Joi.boolean(), dotSize: Joi.number().min(0), - dotColor: Joi.string(), + dotColor: inheritedColor, dotBorderWidth: Joi.number().min(0), - dotBorderColor: Joi.string(), + dotBorderColor: inheritedColor, enableDotLabel: Joi.boolean(), dotLabel: Joi.string(), dotLabelYOffset: Joi.number(), - // theming - colors: Joi.string(), + colors: ordinalColors, colorBy: Joi.string(), fillOpacity: Joi.number() .min(0) diff --git a/api/src/mapping/sankey.js b/api/src/mapping/sankey.js index 08f52cf0a..5d8eb7b4f 100644 --- a/api/src/mapping/sankey.js +++ b/api/src/mapping/sankey.js @@ -10,12 +10,14 @@ const Joi = require('joi') const { Sankey, sankeyAlignmentPropKeys } = require('@nivo/sankey') +const { ordinalColors, inheritedColor } = require('./commons/colors') +const { dimensions } = require('./commons/dimensions') const common = require('./common') module.exports = { component: Sankey, schema: Joi.object().keys( - Object.assign({}, common.dimensions, { + Object.assign({}, dimensions, { data: Joi.object() .keys({ nodes: Joi.array() @@ -43,9 +45,10 @@ module.exports = { }) .required(), + layout: Joi.valid('horizontal', 'vertical'), align: Joi.any().valid(sankeyAlignmentPropKeys), + sort: Joi.valid('auto', 'input', 'ascending', 'descending'), - // nodes nodeOpacity: Joi.number() .min(0) .max(1), @@ -53,9 +56,8 @@ module.exports = { nodePaddingX: Joi.number().positive(), nodePaddingY: Joi.number().positive(), nodeBorderWidth: Joi.number().min(0), - nodeBorderColor: Joi.string(), + nodeBorderColor: inheritedColor, - // links linkOpacity: Joi.number() .min(0) .max(1), @@ -63,15 +65,13 @@ module.exports = { linkBlendMode: common.blendMode, enableLinkGradient: Joi.boolean(), - // labels enableLabels: Joi.boolean(), labelPosition: Joi.any().valid(['inside', 'outside']), labelPadding: Joi.number(), labelOrientation: Joi.any().valid(['horizontal', 'vertical']), - labelTextColor: Joi.string(), + labelTextColor: inheritedColor, - // theming - colors: Joi.string(), + colors: ordinalColors, colorBy: Joi.string(), }) ), diff --git a/api/src/mapping/sunburst.js b/api/src/mapping/sunburst.js index 83fb9584b..63a96dbf9 100644 --- a/api/src/mapping/sunburst.js +++ b/api/src/mapping/sunburst.js @@ -10,24 +10,23 @@ const Joi = require('joi') const { Sunburst } = require('@nivo/sunburst') -const common = require('./common') +const { ordinalColors, inheritedColor } = require('./commons/colors') +const { dimensions } = require('./commons/dimensions') module.exports = { component: Sunburst, schema: Joi.object().keys( - Object.assign({}, common.dimensions, { - // data + Object.assign({}, dimensions, { data: Joi.object().required(), identity: Joi.string().required(), value: Joi.string().required(), cornerRadius: Joi.number().min(0), borderWidth: Joi.number().min(0), - borderColor: Joi.string(), - childColor: Joi.string(), + borderColor: inheritedColor, + childColor: inheritedColor, - // theming - colors: Joi.string(), + colors: ordinalColors, colorBy: Joi.string(), }) ), diff --git a/api/src/mapping/treemap.js b/api/src/mapping/treemap.js index c05423172..96a66dfbe 100644 --- a/api/src/mapping/treemap.js +++ b/api/src/mapping/treemap.js @@ -10,29 +10,34 @@ const Joi = require('joi') const { TreeMap } = require('@nivo/treemap') -const common = require('./common') +const { ordinalColors, inheritedColor } = require('./commons/colors') +const { dimensions } = require('./commons/dimensions') module.exports = { component: TreeMap, schema: Joi.object().keys( - Object.assign({}, common.dimensions, { + Object.assign({}, dimensions, { root: Joi.object().required(), value: Joi.string().required(), identity: Joi.string().required(), leavesOnly: Joi.boolean(), tile: Joi.string(), + enableLabels: Joi.boolean(), orientLabels: Joi.boolean(), label: Joi.string(), labelFormat: Joi.string(), labelSkipSize: Joi.number(), - labelTextColor: Joi.string(), + labelTextColor: inheritedColor, + innerPadding: Joi.number(), outerPadding: Joi.number(), - colors: Joi.string(), + + colors: ordinalColors, colorBy: Joi.string(), + borderWidth: Joi.number(), - borderColor: Joi.string(), + borderColor: inheritedColor, }) ), runtimeProps: [ diff --git a/packages/swarmplot/index.d.ts b/packages/swarmplot/index.d.ts index 07db52183..909064324 100644 --- a/packages/swarmplot/index.d.ts +++ b/packages/swarmplot/index.d.ts @@ -1,13 +1,15 @@ import { Component } from 'react' import { Box, MotionProps, Dimensions, Theme } from '@nivo/core' -import { OrdinalColorsInstruction } from '@nivo/colors' +import { OrdinalColorsInstruction, InheritedColorProp } from '@nivo/colors' declare module '@nivo/swarmplot' { export interface ComputedNode { id: string index: number group: string - value: string + label: string + value: number + formattedValue: number | string x: number y: number size: number @@ -16,7 +18,6 @@ declare module '@nivo/swarmplot' { } type DatumAccessor = (datum: Datum) => T - type ComputedNodeAccessor = (node: ComputedNode) => T export interface DynamicSizeSpec { @@ -38,9 +39,12 @@ declare module '@nivo/swarmplot' { groups: string[] groupBy?: string identity?: string | DatumAccessor + label?: string | DatumAccessor value?: string | DatumAccessor valueScale?: any + valueFormat?: string | Function size?: number | DatumAccessor | DynamicSizeSpec + spacing?: number layout?: 'horizontal' | 'vertical' gap?: number @@ -50,9 +54,10 @@ declare module '@nivo/swarmplot' { layers: any[] colors?: OrdinalColorsInstruction + colorBy?: string | Function theme?: Theme borderWidth?: number | ComputedNodeAccessor - borderColor?: any + borderColor?: InheritedColorProp> enableGridX?: boolean gridXValues?: number[] @@ -65,9 +70,13 @@ declare module '@nivo/swarmplot' { axisLeft?: any isInteractive?: boolean + useMesh?: boolean + debugMesh?: boolean onMouseEnter?: SwarmPlotMouseHandler onMouseMove?: SwarmPlotMouseHandler onMouseLeave?: SwarmPlotMouseHandler + onClick?: SwarmPlotMouseHandler + tooltip?: Function } export type SwarmPlotProps = CommonSwarmPlotProps & MotionProps diff --git a/website/src/components/home/Home.js b/website/src/components/home/Home.js index e60b1ef5a..9a98f504f 100644 --- a/website/src/components/home/Home.js +++ b/website/src/components/home/Home.js @@ -21,6 +21,7 @@ import HomeVoronoi from './HomeVoronoi' import HomeTreeMap from './HomeTreeMap' import HomeSunburst from './HomeSunburst' import HomeSankey from './HomeSankey' +import HomeSwarmPlot from './HomeSwarmPlot' import logoImg from '../../assets/nivo-logo.png' const Home = () => { @@ -147,7 +148,7 @@ const Home = () => { theme={theme} nivoTheme={nivoTheme} /> - { + const data = generateSwarmPlotData(['thing'], { min: 50, max: 50 }) + + return ( + + + + SwarmPlot documentation + + + ) +} + +export default HomeSwarmPlot diff --git a/website/src/data/components/bubble/props.js b/website/src/data/components/bubble/props.js index 761f8c469..58337093b 100644 --- a/website/src/data/components/bubble/props.js +++ b/website/src/data/components/bubble/props.js @@ -145,7 +145,7 @@ const props = [ }, { key: 'colors', - scopes: ['Bubble', 'BubbleHtml', 'BubbleCanvas'], + scopes: '*', help: 'Defines how to compute node color.', description: ` colors used to colorize the circles, @@ -159,7 +159,7 @@ const props = [ }, { key: 'colorBy', - scopes: ['Bubble', 'BubbleHtml', 'BubbleCanvas'], + scopes: '*', type: 'string | Function', help: 'Property used to determine node color.', description: ` diff --git a/website/src/data/components/chord/props.js b/website/src/data/components/chord/props.js index 198acd5ac..51cd3316d 100644 --- a/website/src/data/components/chord/props.js +++ b/website/src/data/components/chord/props.js @@ -165,7 +165,7 @@ const props = [ }, { key: 'colors', - scopes: ['Chord', 'ChordCanvas'], + scopes: '*', help: 'Defines how to compute arc/ribbon color.', type: 'string | Function | string[]', required: false, diff --git a/website/src/data/components/pie/props.js b/website/src/data/components/pie/props.js index e5581e303..15879f48f 100644 --- a/website/src/data/components/pie/props.js +++ b/website/src/data/components/pie/props.js @@ -188,7 +188,7 @@ const props = [ }, { key: 'colors', - scopes: ['Pie', 'PieCanvas'], + scopes: '*', help: 'Defines color range.', type: 'string | Function | string[]', required: false, diff --git a/website/src/data/components/radar/props.js b/website/src/data/components/radar/props.js index 3e1b7b8a4..fddedddaa 100644 --- a/website/src/data/components/radar/props.js +++ b/website/src/data/components/radar/props.js @@ -150,7 +150,7 @@ const props = [ }, { key: 'colors', - scopes: ['Radar'], + scopes: '*', help: 'Defines how to compute slice color.', type: 'string | Function | string[]', required: false, diff --git a/website/src/data/components/sankey/props.js b/website/src/data/components/sankey/props.js index ec401efc1..f8b0a196e 100644 --- a/website/src/data/components/sankey/props.js +++ b/website/src/data/components/sankey/props.js @@ -75,7 +75,7 @@ const props = [ }, { key: 'layout', - scopes: ['Sankey'], + scopes: '*', help: `Control sankey layout direction.`, type: 'string', required: false, @@ -113,7 +113,7 @@ const props = [ }, { key: 'sort', - scopes: ['Sankey'], + scopes: '*', description: ` Defines node sorting method. Must be one of: @@ -143,7 +143,7 @@ const props = [ }, { key: 'colors', - scopes: ['Sankey'], + scopes: '*', help: 'Defines how to compute nodes color.', type: 'string | Function | string[]', required: false, diff --git a/website/src/data/components/sunburst/props.js b/website/src/data/components/sunburst/props.js index 7702ce55a..d4351d24d 100644 --- a/website/src/data/components/sunburst/props.js +++ b/website/src/data/components/sunburst/props.js @@ -93,7 +93,7 @@ const props = [ }, { key: 'colors', - scopes: ['Sunburst'], + scopes: '*', help: 'Defines how to compute node color.', required: false, defaultValue: defaults.colors, diff --git a/website/src/data/components/treemap/props.js b/website/src/data/components/treemap/props.js index 56a16ea05..31cddcaa1 100644 --- a/website/src/data/components/treemap/props.js +++ b/website/src/data/components/treemap/props.js @@ -158,7 +158,7 @@ const props = [ }, { key: 'colors', - scopes: ['TreeMap', 'TreeMapHtml', 'TreeMapCanvas'], + scopes: '*', help: 'Defines how to compute node color.', type: 'string | Function | string[]', required: false, diff --git a/website/src/data/config.js b/website/src/data/config.js index 5feb51e50..32855a652 100644 --- a/website/src/data/config.js +++ b/website/src/data/config.js @@ -8,8 +8,8 @@ */ export default { // local - //nivoApiUrl: 'http://localhost:3030', - //storybookUrl: 'http://localhost:6006/', + // nivoApiUrl: 'http://localhost:3030', + // storybookUrl: 'http://localhost:6006/', // production nivoApiUrl: 'https://nivo-api.herokuapp.com', diff --git a/website/src/pages/bubble/api.js b/website/src/pages/bubble/api.js index 84b673202..a06daf739 100644 --- a/website/src/pages/bubble/api.js +++ b/website/src/pages/bubble/api.js @@ -40,6 +40,8 @@ const BubbleApi = () => { root: JSON.stringify(root, null, ' '), identity: 'name', value: 'loc', + colors: { scheme: 'nivo' }, + colorBy: 'depth', padding: 1, enableLabel: true, leavesOnly: false, diff --git a/website/src/pages/chord/api.js b/website/src/pages/chord/api.js index 47e89f442..595324dc4 100644 --- a/website/src/pages/chord/api.js +++ b/website/src/pages/chord/api.js @@ -36,27 +36,29 @@ const ChordApi = () => { matrix: JSON.stringify(data.matrix, null, ' '), keys: data.keys, margin: { - top: 20, - right: 20, - bottom: 20, - left: 20, + top: 40, + right: 40, + bottom: 40, + left: 40, }, padAngle: 0.02, innerRadiusRatio: 0.96, innerRadiusOffset: 0.01, + colors: { scheme: 'nivo' }, + arcOpacity: 1, arcBorderWidth: 1, arcBorderColor: { - type: 'inherit:darker', - gamma: 0.4, + from: 'color', + modifiers: [['darker', 0.4]], }, ribbonOpacity: 0.5, ribbonBorderWidth: 1, ribbonBorderColor: { - type: 'inherit:darker', - gamma: 0.4, + from: 'color', + modifiers: [['darker', 0.4]], }, enableLabel: true, @@ -64,8 +66,8 @@ const ChordApi = () => { labelOffset: 12, labelRotation: -90, labelTextColor: { - type: 'inherit:darker', - gamma: 1, + from: 'color', + modifiers: [['darker', 1]], }, }} /> diff --git a/website/src/pages/pie/api.js b/website/src/pages/pie/api.js index 1b24ffca6..c81585c5d 100644 --- a/website/src/pages/pie/api.js +++ b/website/src/pages/pie/api.js @@ -50,6 +50,8 @@ const PieApi = () => { padAngle: 0.7, cornerRadius: 3, + colors: { scheme: 'nivo' }, + borderWidth: 0, borderColor: { from: 'color', modifiers: [['darker', 0.6]] }, diff --git a/website/src/pages/radar/api.js b/website/src/pages/radar/api.js index 5e12a27c1..ad82d6745 100644 --- a/website/src/pages/radar/api.js +++ b/website/src/pages/radar/api.js @@ -44,6 +44,7 @@ const RadarApi = () => { left: 80, }, + colors: { scheme: 'nivo' }, curve: 'catmullRomClosed', borderWidth: 2, diff --git a/website/src/pages/sankey/api.js b/website/src/pages/sankey/api.js index a3eb82b2a..f903eb20d 100644 --- a/website/src/pages/sankey/api.js +++ b/website/src/pages/sankey/api.js @@ -39,7 +39,11 @@ const SankeyApi = () => { left: 20, }, + layout: 'horizontal', align: 'justify', + sort: 'auto', + + colors: { scheme: 'nivo' }, nodeOpacity: 0.75, nodeWidth: 18, diff --git a/website/src/pages/sunburst/api.js b/website/src/pages/sunburst/api.js index 51d9f1947..95f8a7e5d 100644 --- a/website/src/pages/sunburst/api.js +++ b/website/src/pages/sunburst/api.js @@ -48,6 +48,7 @@ const SunburstApi = () => { borderWidth: 1, borderColor: 'white', + colors: { scheme: 'nivo' }, childColor: { from: 'color', }, diff --git a/website/src/pages/treemap/api.js b/website/src/pages/treemap/api.js index 3ada27c01..6781ad5f4 100644 --- a/website/src/pages/treemap/api.js +++ b/website/src/pages/treemap/api.js @@ -29,7 +29,7 @@ const TreeMapApi = () => { controlGroups={groupsByScope.api} propsMapper={mapper} defaultProps={{ - root: JSON.stringify(data, null, ' '), + root: JSON.stringify(data.root, null, ' '), tile: 'squarify', leavesOnly: false, @@ -37,6 +37,8 @@ const TreeMapApi = () => { height: 450, margin: { top: 0, right: 0, bottom: 0, left: 0 }, + colors: { scheme: 'nivo' }, + enableLabels: true, labelSkipSize: 0, label: 'loc',