From 7eb8596408e9cc0d40ffddc8c0b3fc35119e4b1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Fri, 4 Aug 2017 21:06:50 +0900 Subject: [PATCH] feat(pie): restore Pie chart --- package.json | 14 +- src/ArcUtils.js | 7 +- src/ColorUtils.js | 43 +++- src/Nivo.js | 3 +- .../charts/bubble/BubblePlaceholders.js | 2 +- src/components/charts/bubble/BubbleProps.js | 2 +- .../charts/calendar/MotionCalendar.js | 4 +- .../charts/calendar/StaticCalendar.js | 2 +- src/components/charts/chord/Chord.js | 5 +- src/components/charts/line/Line.js | 2 +- src/components/charts/pie/Pie.js | 118 ++++++++++- src/components/charts/pie/PieRadialLabels.js | 112 ++++++++++ src/components/charts/pie/PieSlices.js | 5 + src/components/charts/pie/PieSlicesLabels.js | 59 ++++++ src/components/charts/voronoi/Voronoi.js | 2 +- src/components/scales/Scale.js | 2 +- src/lib/charts/bar/index.js | 2 +- src/lib/charts/bubble/BubbleHelper.js | 2 +- src/lib/charts/calendar/CalendarLayout.js | 8 +- src/lib/charts/line/index.js | 2 +- src/lib/propertiesConverters.js | 4 +- src/lib/scalePropToD3Scale.js | 16 -- src/properties/curve.js | 2 +- test/ArcUtil.test.js | 2 + test/ColorUtils.test.js | 10 +- yarn.lock | 191 ++---------------- 26 files changed, 392 insertions(+), 229 deletions(-) create mode 100644 src/components/charts/pie/PieRadialLabels.js create mode 100644 src/components/charts/pie/PieSlices.js create mode 100644 src/components/charts/pie/PieSlicesLabels.js delete mode 100644 src/lib/scalePropToD3Scale.js diff --git a/package.json b/package.json index 7bf7b4f11..c7e0fdb30 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nivo", - "version": "0.1.0", + "version": "0.6.0", "licenses": [ { "type": "MIT", @@ -13,8 +13,16 @@ }, "keywords": [], "dependencies": { - "d3": "^4.10.0", + "d3-chord": "^1.0.4", + "d3-color": "^1.0.3", + "d3-format": "^1.2.0", + "d3-hierarchy": "^1.1.5", + "d3-scale": "^1.0.6", "d3-scale-chromatic": "^1.1.1", + "d3-shape": "^1.2.0", + "d3-time": "^1.0.7", + "d3-time-format": "^2.0.5", + "d3-voronoi": "^1.1.2", "invariant": "^2.2.2", "lodash": "^4.17.4", "lodash-es": "^4.17.4", @@ -74,7 +82,7 @@ "fmt": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --color --write \"{src,specs,test}/**/*.js\"", "fmt:check": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --list-different \"{src,specs,test}/**/*.js\"", "version": "echo ${npm_package_version}", - "prebublishOnly": "npm test && npm run build", + "prepublishOnly": "npm test && npm run build", "precommit": "lint-staged", "commitmsg": "validate-commit-msg" }, diff --git a/src/ArcUtils.js b/src/ArcUtils.js index 222da4313..c1299f480 100644 --- a/src/ArcUtils.js +++ b/src/ArcUtils.js @@ -6,8 +6,6 @@ * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ -import d3 from 'd3' - export const degreesToRadians = degrees => degrees * Math.PI / 180 export const radiansToDegrees = radians => 180 * radians / Math.PI @@ -89,3 +87,8 @@ export const findFollowing = (i, identity, prevData, newData) => { } export const midAngle = arc => arc.startAngle + (arc.endAngle - arc.startAngle) / 2 + +export const positionFromAngle = (angle, distance) => ({ + x: Math.cos(angle) * distance, + y: Math.sin(angle) * distance, +}) diff --git a/src/ColorUtils.js b/src/ColorUtils.js index 79e57d65f..49efe853f 100644 --- a/src/ColorUtils.js +++ b/src/ColorUtils.js @@ -8,14 +8,14 @@ */ import _ from 'lodash' import { spring } from 'react-motion' +import { rgb } from 'd3-color' import { scaleOrdinal, schemeCategory10, schemeCategory20, schemeCategory20b, schemeCategory20c, - rgb, -} from 'd3' +} from 'd3-scale' import { schemeAccent, schemeDark2, @@ -137,3 +137,42 @@ export const getColorsGenerator = (colors, colorBy) => { return d => scale(getColorId(d)) } + +/** + * Memoize both color generator & color generator result. + */ +const memoizedColorModifier = _.memoize((method, _amount) => { + const amount = parseFloat(_amount) + + return _.memoize(d => rgb(d.color)[method](amount), d => d.color) +}, (method, amount) => `${method}.${amount}`) + +const noneGenerator = () => 'none' +const inheritGenerator = d => d.color + +/** + * @param {string|Function} instruction + * @param {string} [themeKey] + * @return {Function} + */ +export const getInheritedColorGenerator = (instruction, themeKey) => { + if (instruction === 'none') return noneGenerator + + if (_.isFunction(instruction)) return instruction + + if (instruction === 'theme') { + return (d, theme) => _.get(theme, themeKey) + } + + if (instruction === 'inherit') return inheritGenerator + + const inheritMatches = instruction.match(/inherit:(darker|brighter)\(([0-9.]+)\)/) + if (inheritMatches) { + const method = inheritMatches[1] + const amount = inheritMatches[2] + + return memoizedColorModifier(method, amount) + } + + return () => instruction +} diff --git a/src/Nivo.js b/src/Nivo.js index 1b4797581..c8080a5d2 100644 --- a/src/Nivo.js +++ b/src/Nivo.js @@ -6,8 +6,7 @@ * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ - -import { scaleOrdinal } from 'd3' +import { scaleOrdinal } from 'd3-scale' import { schemeSet3 } from 'd3-scale-chromatic' import { nivoCategoricalColors } from './ColorUtils' diff --git a/src/components/charts/bubble/BubblePlaceholders.js b/src/components/charts/bubble/BubblePlaceholders.js index b99e94aa8..bed94739d 100644 --- a/src/components/charts/bubble/BubblePlaceholders.js +++ b/src/components/charts/bubble/BubblePlaceholders.js @@ -8,7 +8,7 @@ */ import React, { Component } from 'react' import { TransitionMotion, spring } from 'react-motion' -import { rgb } from 'd3' +import { rgb } from 'd3-color' import _ from 'lodash' import Nivo from '../../../Nivo' import { getColorsGenerator, extractRGB } from '../../../ColorUtils' diff --git a/src/components/charts/bubble/BubbleProps.js b/src/components/charts/bubble/BubbleProps.js index a8cb13682..17a01adcc 100644 --- a/src/components/charts/bubble/BubbleProps.js +++ b/src/components/charts/bubble/BubbleProps.js @@ -43,7 +43,7 @@ export const bubblePropTypes = { // labels enableLabel: PropTypes.bool.isRequired, - label: PropTypes.string.isRequired, + label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, labelFormat: PropTypes.string, labelTextColor: PropTypes.any.isRequired, labelTextDY: PropTypes.number.isRequired, diff --git a/src/components/charts/calendar/MotionCalendar.js b/src/components/charts/calendar/MotionCalendar.js index 402282e0b..6162afe16 100644 --- a/src/components/charts/calendar/MotionCalendar.js +++ b/src/components/charts/calendar/MotionCalendar.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ import React, { Component } from 'react' -import d3 from 'd3' +import { timeFormat } from 'd3-time-format' import { TransitionMotion, spring } from 'react-motion' import { DIRECTION_HORIZONTAL } from '../../../constants/directions' import CalendarDay from './CalendarDay' @@ -97,7 +97,7 @@ class MotionCalendar extends Component { motionDamping, } = this.props - const monthLegendFormat = d3.time.format('%b') + const monthLegendFormat = timeFormat('%b') const stiffness = motionStiffness const damping = motionDamping diff --git a/src/components/charts/calendar/StaticCalendar.js b/src/components/charts/calendar/StaticCalendar.js index d73afcfe3..cb70ee4ed 100644 --- a/src/components/charts/calendar/StaticCalendar.js +++ b/src/components/charts/calendar/StaticCalendar.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ import React, { Component } from 'react' -import { timeFormat } from 'd3' +import { timeFormat } from 'd3-time-format' import { DIRECTION_HORIZONTAL } from '../../../constants/directions' import CalendarDay from './CalendarDay' import CalendarMonthPath from './CalendarMonthPath' diff --git a/src/components/charts/chord/Chord.js b/src/components/charts/chord/Chord.js index 303a8e3ef..ca4fee311 100644 --- a/src/components/charts/chord/Chord.js +++ b/src/components/charts/chord/Chord.js @@ -11,8 +11,9 @@ import PropTypes from 'prop-types' import Nivo from '../../../Nivo' import { margin as marginPropType } from '../../../PropTypes' import { getColorRange } from '../../../ColorUtils' - -import { chord as d3Chord, arc as Arc, ribbon as Ribbon, rgb } from 'd3' +import { chord as d3Chord, ribbon as Ribbon } from 'd3-chord' +import { arc as Arc } from 'd3-shape' +import { rgb } from 'd3-color' class Chord extends Component { render() { diff --git a/src/components/charts/line/Line.js b/src/components/charts/line/Line.js index fa1fcddec..00fb80d6a 100644 --- a/src/components/charts/line/Line.js +++ b/src/components/charts/line/Line.js @@ -9,7 +9,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { merge } from 'lodash' -import { line } from 'd3' +import { line } from 'd3-shape' import Nivo, { defaultTheme } from '../../../Nivo' import { margin as marginPropType, motion as motionPropTypes } from '../../../PropTypes' import { getColorsGenerator, getColorGenerator } from '../../../ColorUtils' diff --git a/src/components/charts/pie/Pie.js b/src/components/charts/pie/Pie.js index d6bd963d5..cc6e82c3f 100644 --- a/src/components/charts/pie/Pie.js +++ b/src/components/charts/pie/Pie.js @@ -7,16 +7,18 @@ * file that was distributed with this source code. */ import React, { Component } from 'react' -import _ from 'lodash' import PropTypes from 'prop-types' import { merge } from 'lodash' import { Motion, TransitionMotion, spring } from 'react-motion' import Nivo, { defaultTheme } from '../../../Nivo' import { margin as marginPropType, motion as motionPropTypes } from '../../../PropTypes' -import { getColorsGenerator } from '../../../ColorUtils' +import { getColorsGenerator, getInheritedColorGenerator } from '../../../ColorUtils' +import { getLabelGenerator } from '../../../lib/propertiesConverters' import { degreesToRadians } from '../../../ArcUtils' import SvgWrapper from '../SvgWrapper' -import * as d3 from 'd3' +import { pie as d3Pie, arc as d3Arc } from 'd3-shape' +import PieRadialLabels from './PieRadialLabels' +import PieSlicesLabels from './PieSlicesLabels' export default class Pie extends Component { static propTypes = { @@ -24,7 +26,6 @@ export default class Pie extends Component { PropTypes.shape({ id: PropTypes.string.isRequired, value: PropTypes.number.isRequired, - label: PropTypes.string, }) ).isRequired, @@ -37,6 +38,26 @@ export default class Pie extends Component { padAngle: PropTypes.number.isRequired, cornerRadius: PropTypes.number.isRequired, + // border + borderWidth: PropTypes.number.isRequired, + borderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + + // radial labels + enableRadialLabels: PropTypes.bool.isRequired, + radialLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + radialLabelsTextXOffset: PropTypes.number, + radialLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + radialLabelsLinkOffset: PropTypes.number, + radialLabelsLinkDiagonalLength: PropTypes.number, + radialLabelsLinkHorizontalLength: PropTypes.number, + radialLabelsLinkStrokeWidth: PropTypes.number, + radialLabelsLinkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + + // slices labels + enableSlicesLabels: PropTypes.bool.isRequired, + sliceLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + slicesLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + // theming theme: PropTypes.object.isRequired, colors: PropTypes.any.isRequired, @@ -54,6 +75,21 @@ export default class Pie extends Component { padAngle: 0, cornerRadius: 0, + // border + borderWidth: 0, + borderColor: 'inherit:darker(1)', + + // radial labels + enableRadialLabels: true, + radialLabel: 'id', + radialLabelsTextColor: 'theme', + radialLabelsLinkColor: 'theme', + + // slices labels + enableSlicesLabels: true, + sliceLabel: 'value', + slicesLabelsTextColor: 'theme', + // theming theme: {}, colors: Nivo.defaults.colorRange, @@ -78,6 +114,26 @@ export default class Pie extends Component { padAngle: _padAngle, cornerRadius, + // border + borderWidth, + borderColor: _borderColor, + + // radial labels + enableRadialLabels, + radialLabel, + radialLabelsLinkOffset, + radialLabelsLinkDiagonalLength, + radialLabelsLinkHorizontalLength, + radialLabelsLinkStrokeWidth, + radialLabelsTextXOffset, + radialLabelsTextColor, + radialLabelsLinkColor, + + // slices labels + enableSlicesLabels, + sliceLabel, + slicesLabelsTextColor, + // theming theme: _theme, colors, @@ -99,6 +155,7 @@ export default class Pie extends Component { const theme = merge({}, defaultTheme, _theme) const color = getColorsGenerator(colors, colorBy) + const borderColor = getInheritedColorGenerator(_borderColor) const motionProps = { animate, @@ -106,14 +163,30 @@ export default class Pie extends Component { motionStiffness, } - const radius = 160 + const radialLabelsProps = { + label: getLabelGenerator(radialLabel), + linkOffset: radialLabelsLinkOffset, + linkDiagonalLength: radialLabelsLinkDiagonalLength, + linkHorizontalLength: radialLabelsLinkHorizontalLength, + linkStrokeWidth: radialLabelsLinkStrokeWidth, + textXOffset: radialLabelsTextXOffset, + textColor: getInheritedColorGenerator(radialLabelsTextColor, 'axis.textColor'), + linkColor: getInheritedColorGenerator(radialLabelsLinkColor, 'axis.tickColor'), + } + + const slicesLabelsProps = { + label: getLabelGenerator(sliceLabel), + textColor: getInheritedColorGenerator(slicesLabelsTextColor, 'axis.textColor'), + } + + const radius = Math.min(width, height) / 2 const innerRadius = radius * Math.min(_innerRadius, 1) - const pie = d3.pie() + const pie = d3Pie() pie.value(d => d.value) - const arc = d3.arc() - arc.outerRadius(160) + const arc = d3Arc() + arc.outerRadius(radius) return ( @@ -132,19 +205,44 @@ export default class Pie extends Component { .cornerRadius(interpolatingStyle.cornerRadius) .innerRadius(interpolatingStyle.innerRadius) + const arcsData = interpolatedPie(data).map(d => ({ + ...d, + data: { + ...d.data, + color: color(d.data), + }, + })) + return ( - {interpolatedPie(data).map(d => { + {arcsData.map(d => { return ( ) })} + {enableSlicesLabels && + } + {enableRadialLabels && + } ) }} diff --git a/src/components/charts/pie/PieRadialLabels.js b/src/components/charts/pie/PieRadialLabels.js new file mode 100644 index 000000000..2b8bf3a41 --- /dev/null +++ b/src/components/charts/pie/PieRadialLabels.js @@ -0,0 +1,112 @@ +/* + * This file is part of the nivo project. + * + * Copyright 2016-present, Raphaël Benitte. + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Motion, TransitionMotion, spring } from 'react-motion' +import { midAngle, positionFromAngle } from '../../../ArcUtils' +import { line } from 'd3-shape' + +const lineGenerator = line().x(d => d.x).y(d => d.y) + +export default class PieRadialLabels extends Component { + static propTypes = { + label: PropTypes.func.isRequired, + radius: PropTypes.number.isRequired, + linkOffset: PropTypes.number.isRequired, + linkDiagonalLength: PropTypes.number.isRequired, + linkHorizontalLength: PropTypes.number.isRequired, + linkStrokeWidth: PropTypes.number.isRequired, + textXOffset: PropTypes.number.isRequired, + textColor: PropTypes.func.isRequired, + linkColor: PropTypes.func.isRequired, + theme: PropTypes.shape({ + axis: PropTypes.shape({ + tickColor: PropTypes.string.isRequired, + fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + }).isRequired, + }).isRequired, + } + + static defaultProps = { + linkOffset: 0, + linkDiagonalLength: 16, + linkHorizontalLength: 24, + linkStrokeWidth: 1, + textXOffset: 6, + } + + render() { + const { + data, + label, + radius, + linkOffset, + linkDiagonalLength, + linkHorizontalLength, + linkStrokeWidth, + textXOffset, + textColor, + linkColor, + theme, + } = this.props + + return ( + + {data.map(d => { + const angle = midAngle(d) - Math.PI / 2 + const positionA = positionFromAngle(angle, radius + linkOffset) + const positionB = positionFromAngle( + angle, + radius + linkOffset + linkDiagonalLength + ) + let positionC + let labelPosition + let textAnchor + if (angle + Math.PI / 2 < Math.PI) { + positionC = { x: positionB.x + linkHorizontalLength, y: positionB.y } + labelPosition = { + x: positionB.x + linkHorizontalLength + textXOffset, + y: positionB.y, + } + textAnchor = 'start' + } else { + positionC = { x: positionB.x - linkHorizontalLength, y: positionB.y } + labelPosition = { + x: positionB.x - linkHorizontalLength - textXOffset, + y: positionB.y, + } + textAnchor = 'end' + } + + return ( + + + + + {label(d.data)} + + + + ) + })} + + ) + } +} diff --git a/src/components/charts/pie/PieSlices.js b/src/components/charts/pie/PieSlices.js new file mode 100644 index 000000000..b24713081 --- /dev/null +++ b/src/components/charts/pie/PieSlices.js @@ -0,0 +1,5 @@ +import React, { Component } from 'react' + +export default class PieSlices extends Component { + render() {} +} diff --git a/src/components/charts/pie/PieSlicesLabels.js b/src/components/charts/pie/PieSlicesLabels.js new file mode 100644 index 000000000..8c6f1cdf8 --- /dev/null +++ b/src/components/charts/pie/PieSlicesLabels.js @@ -0,0 +1,59 @@ +/* + * This file is part of the nivo project. + * + * Copyright 2016-present, Raphaël Benitte. + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { merge } from 'lodash' +import { Motion, TransitionMotion, spring } from 'react-motion' +import { midAngle, positionFromAngle } from '../../../ArcUtils' + +export default class PieSlicesLabels extends Component { + static propTypes = { + label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + radius: PropTypes.number.isRequired, + innerRadius: PropTypes.number.isRequired, + textColor: PropTypes.func.isRequired, + theme: PropTypes.shape({ + axis: PropTypes.shape({ + textColor: PropTypes.string.isRequired, + fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + }).isRequired, + }).isRequired, + } + + static defaultProps = {} + + render() { + const { data, label, radius, innerRadius, textColor, theme } = this.props + + const centerRadius = innerRadius + (radius - innerRadius) / 2 + + return ( + + {data.map(d => { + const angle = midAngle(d) - Math.PI / 2 + const position = positionFromAngle(angle, centerRadius) + + return ( + + + {label(d.data)} + + + ) + })} + + ) + } +} diff --git a/src/components/charts/voronoi/Voronoi.js b/src/components/charts/voronoi/Voronoi.js index 5b92fc398..e5938a5d0 100644 --- a/src/components/charts/voronoi/Voronoi.js +++ b/src/components/charts/voronoi/Voronoi.js @@ -10,7 +10,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import Nivo from '../../../Nivo' -import { voronoi as VoronoiGenerator } from 'd3' +import { voronoi as VoronoiGenerator } from 'd3-voronoi' class Voronoi extends Component { render() { diff --git a/src/components/scales/Scale.js b/src/components/scales/Scale.js index 58104955a..457e9cac4 100644 --- a/src/components/scales/Scale.js +++ b/src/components/scales/Scale.js @@ -9,7 +9,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import { scaleLinear, scaleBand, scalePoint } from 'd3' +import { scaleLinear, scaleBand, scalePoint } from 'd3-scale' export default class Scale extends Component { static propTypes = { diff --git a/src/lib/charts/bar/index.js b/src/lib/charts/bar/index.js index 9b8182e98..7db8ba936 100644 --- a/src/lib/charts/bar/index.js +++ b/src/lib/charts/bar/index.js @@ -1,5 +1,5 @@ import { range, max, maxBy, sumBy, uniq } from 'lodash' -import { scaleBand, scaleLinear } from 'd3' +import { scaleBand, scaleLinear } from 'd3-scale' /** * Generates X scale. diff --git a/src/lib/charts/bubble/BubbleHelper.js b/src/lib/charts/bubble/BubbleHelper.js index 57a3a594b..f44d03e54 100644 --- a/src/lib/charts/bubble/BubbleHelper.js +++ b/src/lib/charts/bubble/BubbleHelper.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ -import { hierarchy, pack as Pack } from 'd3' +import { hierarchy, pack as Pack } from 'd3-hierarchy' /** * This wrapper is responsible for computing bubble chart positions. diff --git a/src/lib/charts/calendar/CalendarLayout.js b/src/lib/charts/calendar/CalendarLayout.js index 2a696b88a..fa9836c3b 100644 --- a/src/lib/charts/calendar/CalendarLayout.js +++ b/src/lib/charts/calendar/CalendarLayout.js @@ -8,9 +8,9 @@ */ import _ from 'lodash' -import scalePropToD3Scale from '../../scalePropToD3Scale' import { DIRECTION_HORIZONTAL } from '../../../constants/directions' -import { timeFormat, timeDays, timeWeek, timeWeeks, timeMonths, timeYear, range, max } from 'd3' +import { timeFormat } from 'd3-time-format' +import { timeDays, timeWeek, timeWeeks, timeMonths, timeYear } from 'd3-time' /** * Compute day cell size according to current context. @@ -204,9 +204,9 @@ const CalendarLayout = () => { // time related data const fromDate = _.isDate(from) ? from : new Date(from) const toDate = _.isDate(to) ? to : new Date(to) - let yearRange = range(fromDate.getFullYear(), toDate.getFullYear() + 1) + let yearRange = _.range(fromDate.getFullYear(), toDate.getFullYear() + 1) const maxWeeks = - max( + _.max( yearRange, year => timeWeeks(new Date(year, 0, 1), new Date(year + 1, 0, 1)).length ) + 1 diff --git a/src/lib/charts/line/index.js b/src/lib/charts/line/index.js index 2f5aeab3d..d70db4aa2 100644 --- a/src/lib/charts/line/index.js +++ b/src/lib/charts/line/index.js @@ -1,5 +1,5 @@ import { range, max, maxBy, sumBy, uniq } from 'lodash' -import { scalePoint, scaleLinear } from 'd3' +import { scalePoint, scaleLinear } from 'd3-scale' /** * Generates X scale. diff --git a/src/lib/propertiesConverters.js b/src/lib/propertiesConverters.js index 59e5b66f1..ffedc8f25 100644 --- a/src/lib/propertiesConverters.js +++ b/src/lib/propertiesConverters.js @@ -8,7 +8,7 @@ */ import _ from 'lodash' -import { format } from 'd3' +import { format } from 'd3-format' export const convertLabel = (_label, labelFormat) => { if (_.isFunction(_label)) { @@ -33,6 +33,8 @@ export const convertLabel = (_label, labelFormat) => { } } +export const getLabelGenerator = convertLabel + export const convertGetter = _property => { if (_.isFunction(_property)) { return _property diff --git a/src/lib/scalePropToD3Scale.js b/src/lib/scalePropToD3Scale.js deleted file mode 100644 index 910648754..000000000 --- a/src/lib/scalePropToD3Scale.js +++ /dev/null @@ -1,16 +0,0 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -import d3 from 'd3' - -const scalePropToD3Scale = ({ type, domain, range }) => { - return d3.scale[type]().domain(domain).range(range) -} - -export default scalePropToD3Scale diff --git a/src/properties/curve.js b/src/properties/curve.js index ce72aa079..8178e415c 100644 --- a/src/properties/curve.js +++ b/src/properties/curve.js @@ -27,7 +27,7 @@ import { curveStep, curveStepAfter, curveStepBefore, -} from 'd3' +} from 'd3-shape' export const curvePropMapping = { basis: curveBasis, diff --git a/test/ArcUtil.test.js b/test/ArcUtil.test.js index 03aef8042..d712cf7a4 100644 --- a/test/ArcUtil.test.js +++ b/test/ArcUtil.test.js @@ -6,6 +6,8 @@ * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ +import * as crap from '../src/index' + import { midAngle } from '../src/ArcUtils' test('midAngle() should compute center of given angles', () => { diff --git a/test/ColorUtils.test.js b/test/ColorUtils.test.js index 74d10b39c..cf64101ad 100644 --- a/test/ColorUtils.test.js +++ b/test/ColorUtils.test.js @@ -6,7 +6,7 @@ * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ -import * as d3 from 'd3' +import { rgb } from 'd3-color' import { getColorGenerator, getColorsGenerator } from '../src/ColorUtils' describe('getColorGenerator()', () => { @@ -27,7 +27,7 @@ describe('getColorGenerator()', () => { const color = '#FF0000' expect(typeof colorGenerator).toBe('function') - expect(colorGenerator({ data: { color } })).toEqual(d3.rgb(color).darker(1)) + expect(colorGenerator({ data: { color } })).toEqual(rgb(color).darker(1)) }) it(`'inherit:darker(*)' should support floats`, () => { @@ -35,7 +35,7 @@ describe('getColorGenerator()', () => { const color = '#FF0000' expect(typeof colorGenerator).toBe('function') - expect(colorGenerator({ data: { color } })).toEqual(d3.rgb(color).darker(0.3)) + expect(colorGenerator({ data: { color } })).toEqual(rgb(color).darker(0.3)) }) it(`should return a function to use brighter 'data.color' if 'inherit:brighter(*)' provided`, () => { @@ -43,7 +43,7 @@ describe('getColorGenerator()', () => { const color = '#FF0000' expect(typeof colorGenerator).toBe('function') - expect(colorGenerator({ data: { color } })).toEqual(d3.rgb(color).brighter(1)) + expect(colorGenerator({ data: { color } })).toEqual(rgb(color).brighter(1)) }) it(`'inherit:brighter(*)' should support floats`, () => { @@ -51,7 +51,7 @@ describe('getColorGenerator()', () => { const color = '#FF0000' expect(typeof colorGenerator).toBe('function') - expect(colorGenerator({ data: { color } })).toEqual(d3.rgb(color).brighter(0.3)) + expect(colorGenerator({ data: { color } })).toEqual(rgb(color).brighter(0.3)) }) it(`should return directive if no match found`, () => { diff --git a/yarn.lock b/yarn.lock index dc124ffa8..290e9eed5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -736,16 +736,16 @@ combined-stream@^1.0.5, combined-stream@~1.0.5: dependencies: delayed-stream "~1.0.0" -commander@2, commander@^2.8.1, commander@^2.9.0: - version "2.11.0" - resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563" - commander@2.9.0: version "2.9.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4" dependencies: graceful-readlink ">= 1.0.0" +commander@^2.8.1, commander@^2.9.0: + version "2.11.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563" + commander@~2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781" @@ -834,127 +834,50 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0": dependencies: cssom "0.3.x" -d3-array@1, d3-array@1.2.0, d3-array@^1.2.0: +d3-array@1, d3-array@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.0.tgz#147d269720e174c4057a7f42be8b0f3f2ba53108" -d3-axis@1.0.8: - version "1.0.8" - resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.8.tgz#31a705a0b535e65759de14173a31933137f18efa" - -d3-brush@1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.0.4.tgz#00c2f238019f24f6c0a194a26d41a1530ffe7bc4" - dependencies: - d3-dispatch "1" - d3-drag "1" - d3-interpolate "1" - d3-selection "1" - d3-transition "1" - -d3-chord@1.0.4: +d3-chord@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.4.tgz#7dec4f0ba886f713fe111c45f763414f6f74ca2c" dependencies: d3-array "1" d3-path "1" -d3-collection@1, d3-collection@1.0.4: +d3-collection@1: version "1.0.4" resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2" -d3-color@1, d3-color@1.0.3: +d3-color@1, d3-color@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.3.tgz#bc7643fca8e53a8347e2fbdaffa236796b58509b" -d3-dispatch@1, d3-dispatch@1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8" - -d3-drag@1, d3-drag@1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.1.1.tgz#b5155304433b18ba38726b2184d0098e820dc64b" - dependencies: - d3-dispatch "1" - d3-selection "1" - -d3-dsv@1, d3-dsv@1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.5.tgz#419f7db47f628789fc3fdb636e678449d0821136" - dependencies: - commander "2" - iconv-lite "0.4" - rw "1" - -d3-ease@1, d3-ease@1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.3.tgz#68bfbc349338a380c44d8acc4fbc3304aa2d8c0e" - -d3-force@1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.0.6.tgz#ea7e1b7730e2664cd314f594d6718c57cc132b79" - dependencies: - d3-collection "1" - d3-dispatch "1" - d3-quadtree "1" - d3-timer "1" - -d3-format@1, d3-format@1.2.0: +d3-format@1, d3-format@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.2.0.tgz#6b480baa886885d4651dc248a8f4ac9da16db07a" -d3-geo@1.6.4: - version "1.6.4" - resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.6.4.tgz#f20e1e461cb1845f5a8be55ab6f876542a7e3199" - dependencies: - d3-array "1" - -d3-hierarchy@1.1.5: +d3-hierarchy@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz#a1c845c42f84a206bcf1c01c01098ea4ddaa7a26" -d3-interpolate@1, d3-interpolate@1.1.5: +d3-interpolate@1: version "1.1.5" resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.5.tgz#69e099ff39214716e563c9aec3ea9d1ea4b8a79f" dependencies: d3-color "1" -d3-path@1, d3-path@1.0.5: +d3-path@1: version "1.0.5" resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.5.tgz#241eb1849bd9e9e8021c0d0a799f8a0e8e441764" -d3-polygon@1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.3.tgz#16888e9026460933f2b179652ad378224d382c62" - -d3-quadtree@1, d3-quadtree@1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.3.tgz#ac7987e3e23fe805a990f28e1b50d38fcb822438" - -d3-queue@3.0.7: - version "3.0.7" - resolved "https://registry.yarnpkg.com/d3-queue/-/d3-queue-3.0.7.tgz#c93a2e54b417c0959129d7d73f6cf7d4292e7618" - -d3-random@1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.0.tgz#6642e506c6fa3a648595d2b2469788a8d12529d3" - -d3-request@1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/d3-request/-/d3-request-1.0.5.tgz#4daae946d1dd0d57dfe01f022956354958d51f23" - dependencies: - d3-collection "1" - d3-dispatch "1" - d3-dsv "1" - xmlhttprequest "1" - d3-scale-chromatic@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-1.1.1.tgz#811406e8e09dab78a49dac4a32047d5d3edd0c44" dependencies: d3-interpolate "1" -d3-scale@1.0.6: +d3-scale@^1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.6.tgz#bce19da80d3a0cf422c9543ae3322086220b34ed" dependencies: @@ -966,90 +889,26 @@ d3-scale@1.0.6: d3-time "1" d3-time-format "2" -d3-selection@1, d3-selection@1.1.0, d3-selection@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.1.0.tgz#1998684896488f839ca0372123da34f1d318809c" - -d3-shape@1.2.0: +d3-shape@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.0.tgz#45d01538f064bafd05ea3d6d2cb748fd8c41f777" dependencies: d3-path "1" -d3-time-format@2, d3-time-format@2.0.5: +d3-time-format@2, d3-time-format@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.0.5.tgz#9d7780204f7c9119c9170b1a56db4de9a8af972e" dependencies: d3-time "1" -d3-time@1, d3-time@1.0.7: +d3-time@1, d3-time@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.7.tgz#94caf6edbb7879bb809d0d1f7572bc48482f7270" -d3-timer@1, d3-timer@1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.6.tgz#4044bf15d7025c06ce7d1149f73cd07b54dbd784" - -d3-transition@1, d3-transition@1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.1.0.tgz#cfc85c74e5239324290546623572990560c3966f" - dependencies: - d3-color "1" - d3-dispatch "1" - d3-ease "1" - d3-interpolate "1" - d3-selection "^1.1.0" - d3-timer "1" - -d3-voronoi@1.1.2: +d3-voronoi@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c" -d3-zoom@1.5.0: - version "1.5.0" - resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.5.0.tgz#8417de9a077f98f9ce83b1998efb8ee12b4db26e" - dependencies: - d3-dispatch "1" - d3-drag "1" - d3-interpolate "1" - d3-selection "1" - d3-transition "1" - -d3@^4.10.0: - version "4.10.0" - resolved "https://registry.yarnpkg.com/d3/-/d3-4.10.0.tgz#0bcca3a3b614e2fd45b1b5bd0b9164d57352a862" - dependencies: - d3-array "1.2.0" - d3-axis "1.0.8" - d3-brush "1.0.4" - d3-chord "1.0.4" - d3-collection "1.0.4" - d3-color "1.0.3" - d3-dispatch "1.0.3" - d3-drag "1.1.1" - d3-dsv "1.0.5" - d3-ease "1.0.3" - d3-force "1.0.6" - d3-format "1.2.0" - d3-geo "1.6.4" - d3-hierarchy "1.1.5" - d3-interpolate "1.1.5" - d3-path "1.0.5" - d3-polygon "1.0.3" - d3-quadtree "1.0.3" - d3-queue "3.0.7" - d3-random "1.1.0" - d3-request "1.0.5" - d3-scale "1.0.6" - d3-selection "1.1.0" - d3-shape "1.2.0" - d3-time "1.0.7" - d3-time-format "2.0.5" - d3-timer "1.0.6" - d3-transition "1.1.0" - d3-voronoi "1.1.2" - d3-zoom "1.5.0" - dashdash@^1.12.0: version "1.14.1" resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0" @@ -1514,14 +1373,14 @@ husky@^0.14.3: normalize-path "^1.0.0" strip-indent "^2.0.0" -iconv-lite@0.4, iconv-lite@~0.4.13: - version "0.4.18" - resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2" - iconv-lite@0.4.13: version "0.4.13" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2" +iconv-lite@~0.4.13: + version "0.4.18" + resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2" + indent-string@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80" @@ -2845,10 +2704,6 @@ rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1: dependencies: glob "^7.0.5" -rw@1: - version "1.3.3" - resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4" - rxjs@^5.0.0-beta.11: version "5.4.2" resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.2.tgz#2a3236fcbf03df57bae06fd6972fd99e5c08fcf7" @@ -3278,10 +3133,6 @@ xml-name-validator@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635" -xmlhttprequest@1: - version "1.8.0" - resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc" - xtend@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"