From b687ec8483905da27989da4a91df3c7c78a61eec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Mon, 7 Aug 2017 22:57:01 +0900 Subject: [PATCH] fix(calendar): fix regression on calendar --- src/components/charts/calendar/Calendar.js | 46 ++++++++----------- .../charts/calendar/ResponsiveCalendar.js | 27 ++--------- src/components/charts/pie/ResponsivePie.js | 2 +- .../charts/treemap/ResponsiveTreeMap.js | 37 +++------------ .../charts/treemap/ResponsiveTreeMapHTML.js | 38 +++------------ .../treemap/ResponsiveTreeMapPlaceholders.js | 38 +++------------ src/components/charts/treemap/TreeMap.js | 19 ++++---- src/components/charts/treemap/TreeMapHTML.js | 11 ++--- src/lib/charts/calendar/CalendarLayout.js | 6 ++- src/lib/propertiesConverters.js | 2 + 10 files changed, 64 insertions(+), 162 deletions(-) diff --git a/src/components/charts/calendar/Calendar.js b/src/components/charts/calendar/Calendar.js index c50c5edca..286f6814d 100644 --- a/src/components/charts/calendar/Calendar.js +++ b/src/components/charts/calendar/Calendar.js @@ -9,12 +9,25 @@ import _ from 'lodash' import React, { Component } from 'react' import Nivo from '../../../Nivo' +import SvgWrapper from '../SvgWrapper' import CalendarLayout from '../../../lib/charts/calendar/CalendarLayout' import { calendarPropTypes, calendarDefaultProps } from './CalendarProps' import StaticCalendar from './StaticCalendar' import MotionCalendar from './MotionCalendar' -class Calendar extends Component { +export default class Calendar extends Component { + static propTypes = _.omit(calendarPropTypes, [ + 'transitionDuration', + 'transitionEasing', + 'transitionStaggering', + ]) + + static defaultProps = _.omit(calendarDefaultProps, [ + 'transitionDuration', + 'transitionEasing', + 'transitionStaggering', + ]) + componentWillMount() { this.calendarLayout = CalendarLayout() } @@ -41,7 +54,7 @@ class Calendar extends Component { motionDamping, } = this.props - const margin = _.assign({}, Nivo.defaults.margin, this.props.margin) + const margin = Object.assign({}, Nivo.defaults.margin, this.props.margin) const width = this.props.width - margin.left - margin.right const height = this.props.height - margin.top - margin.bottom @@ -96,32 +109,9 @@ class Calendar extends Component { } return ( - - - {calendar} - - + + {calendar} + ) } } - -Calendar.propTypes = _.omit(calendarPropTypes, [ - 'transitionDuration', - 'transitionEasing', - 'transitionStaggering', -]) - -Calendar.defaultProps = _.omit(calendarDefaultProps, [ - 'transitionDuration', - 'transitionEasing', - 'transitionStaggering', -]) - -export default Calendar diff --git a/src/components/charts/calendar/ResponsiveCalendar.js b/src/components/charts/calendar/ResponsiveCalendar.js index 1d0e0dda7..d98f99cbf 100644 --- a/src/components/charts/calendar/ResponsiveCalendar.js +++ b/src/components/charts/calendar/ResponsiveCalendar.js @@ -7,34 +7,15 @@ * file that was distributed with this source code. */ import React, { Component } from 'react' +import ResponsiveWrapper from '../ResponsiveWrapper' import Calendar from './Calendar' -import Measure from 'react-measure' export default class ResponsiveCalendar extends Component { - state = { - dimensions: { - width: -1, - height: -1, - }, - } - render() { - const { width, height } = this.state.dimensions - - const shouldRender = width > 0 && height > 0 - return ( - { - this.setState({ dimensions: contentRect.bounds }) - }} - > - {({ measureRef }) => -
- {shouldRender && } -
} - + + {({ width, height }) => } + ) } } diff --git a/src/components/charts/pie/ResponsivePie.js b/src/components/charts/pie/ResponsivePie.js index d0893c2e7..62317d938 100644 --- a/src/components/charts/pie/ResponsivePie.js +++ b/src/components/charts/pie/ResponsivePie.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 React, { Component } from 'react' +import React from 'react' import ResponsiveWrapper from '../ResponsiveWrapper' import Pie from './Pie' diff --git a/src/components/charts/treemap/ResponsiveTreeMap.js b/src/components/charts/treemap/ResponsiveTreeMap.js index fef220c73..c0a3a8d25 100644 --- a/src/components/charts/treemap/ResponsiveTreeMap.js +++ b/src/components/charts/treemap/ResponsiveTreeMap.js @@ -6,36 +6,13 @@ * 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 Measure from 'react-measure' +import React from 'react' +import ResponsiveWrapper from '../ResponsiveWrapper' import TreeMap from './TreeMap' -export default class ResponsiveTreeMap extends Component { - state = { - dimensions: { - width: -1, - height: -1, - }, - } - - render() { - const { width, height } = this.state.dimensions - - const shouldRender = width > 0 && height > 0 +const ResponsiveTreeMap = props => + + {({ width, height }) => } + - return ( - { - this.setState({ dimensions: contentRect.bounds }) - }} - > - {({ measureRef }) => -
- {shouldRender && } -
} - - ) - } -} +export default ResponsiveTreeMap diff --git a/src/components/charts/treemap/ResponsiveTreeMapHTML.js b/src/components/charts/treemap/ResponsiveTreeMapHTML.js index e82d95d15..169f12e14 100644 --- a/src/components/charts/treemap/ResponsiveTreeMapHTML.js +++ b/src/components/charts/treemap/ResponsiveTreeMapHTML.js @@ -6,37 +6,13 @@ * 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 React from 'react' +import ResponsiveWrapper from '../ResponsiveWrapper' import TreeMapHTML from './TreeMapHTML' -import Measure from 'react-measure' - -export default class ResponsiveTreeMapHTML extends Component { - state = { - dimensions: { - width: -1, - height: -1, - }, - } - - render() { - const { width, height } = this.state.dimensions - const shouldRender = width > 0 && height > 0 +const ResponsiveTreeMapHTML = props => + + {({ width, height }) => } + - return ( - { - this.setState({ dimensions: contentRect.bounds }) - }} - > - {({ measureRef }) => -
- {shouldRender && - } -
} - - ) - } -} +export default ResponsiveTreeMapHTML diff --git a/src/components/charts/treemap/ResponsiveTreeMapPlaceholders.js b/src/components/charts/treemap/ResponsiveTreeMapPlaceholders.js index 51856b172..ff119f701 100644 --- a/src/components/charts/treemap/ResponsiveTreeMapPlaceholders.js +++ b/src/components/charts/treemap/ResponsiveTreeMapPlaceholders.js @@ -6,37 +6,13 @@ * 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 React from 'react' +import ResponsiveWrapper from '../ResponsiveWrapper' import TreeMapPlaceholders from './TreeMapPlaceholders' -import Measure from 'react-measure' - -export default class ResponsiveTreeMapPlaceholders extends Component { - state = { - dimensions: { - width: -1, - height: -1, - }, - } - - render() { - const { width, height } = this.state.dimensions - const shouldRender = width > 0 && height > 0 +const ResponsiveTreeMapPlaceholders = props => + + {({ width, height }) => } + - return ( - { - this.setState({ dimensions: contentRect.bounds }) - }} - > - {({ measureRef }) => -
- {shouldRender && - } -
} - - ) - } -} +export default ResponsiveTreeMapPlaceholders diff --git a/src/components/charts/treemap/TreeMap.js b/src/components/charts/treemap/TreeMap.js index caa9415c9..e5a36ec00 100644 --- a/src/components/charts/treemap/TreeMap.js +++ b/src/components/charts/treemap/TreeMap.js @@ -10,14 +10,14 @@ import React, { Component } from 'react' import { findDOMNode } from 'react-dom' import _ from 'lodash' -import { convertLabel } from '../../../lib/propertiesConverters' +import { getLabelGenerator } from '../../../lib/propertiesConverters' import { treeMapPropTypes, treeMapDefaultProps } from './TreeMapProps' import TreeMapPlaceholders from './TreeMapPlaceholders' -import { getColorGenerator } from '../../../lib/colorUtils' +import { getInheritedColorGenerator } from '../../../lib/colorUtils' const createNodes = ({ borderWidth, - borderColor, + borderColor: _borderColor, enableLabels, label: _label, labelFormat, @@ -25,9 +25,9 @@ const createNodes = ({ labelSkipSize, labelTextColor, }) => { - const label = convertLabel(_label, labelFormat) - const borderColorFn = getColorGenerator(borderColor) - const textColorFn = getColorGenerator(labelTextColor) + const label = getLabelGenerator(_label, labelFormat) + const borderColor = getInheritedColorGenerator(_borderColor) + const textColor = getInheritedColorGenerator(labelTextColor) return nodes => { const renderedNodes = [] @@ -35,7 +35,6 @@ const createNodes = ({ nodes.forEach(node => { const shouldRenderLabel = enableLabels && - node.data.height === 0 && (labelSkipSize === 0 || Math.min(node.style.width, node.style.height) > labelSkipSize) @@ -51,7 +50,7 @@ const createNodes = ({ width={node.style.width} height={node.style.height} fill={node.style.color} - stroke={borderColorFn(node.data)} + stroke={borderColor(node.data)} strokeWidth={borderWidth} /> {shouldRenderLabel && @@ -64,10 +63,10 @@ const createNodes = ({ textAnchor="middle" dy="0.5em" style={{ - fill: textColorFn(node.data), + fill: textColor(node.data), }} > - {label(node.data.data)} + {label(node.data)} } diff --git a/src/components/charts/treemap/TreeMapHTML.js b/src/components/charts/treemap/TreeMapHTML.js index 3e188ce42..2944c948e 100644 --- a/src/components/charts/treemap/TreeMapHTML.js +++ b/src/components/charts/treemap/TreeMapHTML.js @@ -10,10 +10,10 @@ import React, { Component } from 'react' import { findDOMNode } from 'react-dom' import _ from 'lodash' -import { convertLabel } from '../../../lib/propertiesConverters' +import { getLabelGenerator } from '../../../lib/propertiesConverters' import { treeMapPropTypes, treeMapDefaultProps } from './TreeMapProps' import TreeMapPlaceholders from './TreeMapPlaceholders' -import { getColorGenerator } from '../../../lib/colorUtils' +import { getInheritedColorGenerator } from '../../../lib/colorUtils' const createNodes = ({ borderWidth, @@ -25,9 +25,9 @@ const createNodes = ({ labelSkipSize, labelTextColor, }) => { - const label = convertLabel(_label, labelFormat) - const borderColorFn = getColorGenerator(borderColor) - const textColorFn = getColorGenerator(labelTextColor) + const label = getLabelGenerator(_label, labelFormat) + const borderColorFn = getInheritedColorGenerator(borderColor) + const textColorFn = getInheritedColorGenerator(labelTextColor) return nodes => { const renderedNodes = [] @@ -35,7 +35,6 @@ const createNodes = ({ nodes.forEach(node => { const shouldRenderLabel = enableLabels && - node.data.height === 0 && (labelSkipSize === 0 || Math.min(node.style.width, node.style.height) > labelSkipSize) diff --git a/src/lib/charts/calendar/CalendarLayout.js b/src/lib/charts/calendar/CalendarLayout.js index fa9836c3b..3712ebd9c 100644 --- a/src/lib/charts/calendar/CalendarLayout.js +++ b/src/lib/charts/calendar/CalendarLayout.js @@ -204,11 +204,13 @@ 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) const maxWeeks = _.max( - yearRange, - year => timeWeeks(new Date(year, 0, 1), new Date(year + 1, 0, 1)).length + yearRange.map( + year => timeWeeks(new Date(year, 0, 1), new Date(year + 1, 0, 1)).length + ) ) + 1 // —————————————————————————————————————————————————————————————————————————————————————————————————————— diff --git a/src/lib/propertiesConverters.js b/src/lib/propertiesConverters.js index ffedc8f25..6357d4c36 100644 --- a/src/lib/propertiesConverters.js +++ b/src/lib/propertiesConverters.js @@ -25,6 +25,8 @@ export const convertLabel = (_label, labelFormat) => { return data => { let labelOutput = label(data) + console.log('labelOutput', labelOutput) + if (formatter) { labelOutput = formatter(labelOutput) }