feat(bullet): interpolate colors

plouc · Sep 4, 2018 · 96ad5f6 · 96ad5f6
1 parent 0c8e8bb
commit 96ad5f6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/packages/bullet/src/BulletMarkers.js b/packages/bullet/src/BulletMarkers.js
@@ -9,7 +9,7 @@
 import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
-import { motionPropTypes } from '@nivo/core'
+import { motionPropTypes, colorMotionSpring, getInterpolatedColor } from '@nivo/core'
 import partial from 'lodash/partial'
 
 const getPositionGenerator = ({ layout, reverse, scale, height, markerSize }) => {
@@ -118,24 +118,28 @@ export default class BulletMarkers extends Component {
                             y: spring(position.y, springConfig),
                             size: spring(position.size, springConfig),
                             rotation: spring(position.rotation, springConfig),
+                            ...colorMotionSpring(marker.color, springConfig),
                         },
                     }
                 })}
             >
                 {interpolatedStyles => (
                     <Fragment>
-                        {interpolatedStyles.map(({ key, style, data: marker }) =>
-                            React.createElement(component, {
+                        {interpolatedStyles.map(({ key, style, data: marker }) => {
+                            const color = getInterpolatedColor(style)
+
+                            return React.createElement(component, {
                                 key,
                                 ...marker,
                                 ...style,
+                                color,
                                 data: marker,
                                 onMouseEnter: partial(this.handleMouseEnter, marker),
                                 onMouseMove: partial(this.handleMouseEnter, marker),
                                 onMouseLeave: partial(this.handleMouseLeave, marker),
                                 onClick: partial(this.handleClick, marker),
                             })
-                        )}
+                        })}
                     </Fragment>
                 )}
             </TransitionMotion>

diff --git a/packages/bullet/src/BulletRects.js b/packages/bullet/src/BulletRects.js
@@ -13,7 +13,7 @@ import { TransitionMotion, spring } from 'react-motion'
 import compose from 'recompose/compose'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
-import { motionPropTypes } from '@nivo/core'
+import { motionPropTypes, colorMotionSpring, getInterpolatedColor } from '@nivo/core'
 import { computeRects } from './compute'
 
 class BulletRects extends Component {
@@ -106,27 +106,30 @@ class BulletRects extends Component {
                             y: spring(rect.y, springConfig),
                             width: spring(rect.width, springConfig),
                             height: spring(rect.height, springConfig),
+                            ...colorMotionSpring(rect.data.color, springConfig),
                         },
                     }))}
                 >
                     {interpolatedStyles => (
                         <Fragment>
-                            {interpolatedStyles.map(({ key, style, data }) =>
-                                React.createElement(component, {
+                            {interpolatedStyles.map(({ key, style, data }) => {
+                                const color = getInterpolatedColor(style)
+
+                                return React.createElement(component, {
                                     key,
                                     index: Number(key),
                                     data,
                                     x: style.x,
                                     y: style.y,
                                     width: Math.max(style.width, 0),
                                     height: Math.max(style.height, 0),
-                                    color: data.color,
+                                    color,
                                     onMouseEnter: partial(this.handleMouseEnter, data),
                                     onMouseMove: partial(this.handleMouseEnter, data),
                                     onMouseLeave: partial(this.handleMouseLeave, data),
                                     onClick: partial(this.handleClick, data),
                                 })
-                            )}
+                            })}
                         </Fragment>
                     )}
                 </TransitionMotion>