fix(calendar): fix regression on calendar

plouc · Aug 7, 2017 · b687ec8 · b687ec8
1 parent 0f63c07
commit b687ec8
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 162 deletions.
diff --git 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 (
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="nivo_calendar"
-                style={{ width: this.props.width, height: this.props.height }}
-            >
-                <g
-                    className="nivo_calendar_wrapper"
-                    transform={`translate(${margin.left},${margin.top})`}
-                >
-                    {calendar}
-                </g>
-            </svg>
+            <SvgWrapper width={this.props.width} height={this.props.height} margin={margin}>
+                {calendar}
+            </SvgWrapper>
         )
     }
 }
-
-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
@@ -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 (
-            <Measure
-                bounds
-                onResize={contentRect => {
-                    this.setState({ dimensions: contentRect.bounds })
-                }}
-            >
-                {({ measureRef }) =>
-                    <div ref={measureRef} style={{ width: '100%', height: '100%' }}>
-                        {shouldRender && <Calendar width={width} height={height} {...this.props} />}
-                    </div>}
-            </Measure>
+            <ResponsiveWrapper>
+                {({ width, height }) => <Calendar width={width} height={height} {...this.props} />}
+            </ResponsiveWrapper>
         )
     }
 }
diff --git 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
@@ -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 =>
+    <ResponsiveWrapper>
+        {({ width, height }) => <TreeMap width={width} height={height} {...props} />}
+    </ResponsiveWrapper>
 
-        return (
-            <Measure
-                bounds
-                onResize={contentRect => {
-                    this.setState({ dimensions: contentRect.bounds })
-                }}
-            >
-                {({ measureRef }) =>
-                    <div ref={measureRef} style={{ width: '100%', height: '100%' }}>
-                        {shouldRender && <TreeMap width={width} height={height} {...this.props} />}
-                    </div>}
-            </Measure>
-        )
-    }
-}
+export default ResponsiveTreeMap
diff --git 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 =>
+    <ResponsiveWrapper>
+        {({ width, height }) => <TreeMapHTML width={width} height={height} {...props} />}
+    </ResponsiveWrapper>
 
-        return (
-            <Measure
-                bounds
-                onResize={contentRect => {
-                    this.setState({ dimensions: contentRect.bounds })
-                }}
-            >
-                {({ measureRef }) =>
-                    <div ref={measureRef} style={{ width: '100%', height: '100%' }}>
-                        {shouldRender &&
-                            <TreeMapHTML width={width} height={height} {...this.props} />}
-                    </div>}
-            </Measure>
-        )
-    }
-}
+export default ResponsiveTreeMapHTML
diff --git 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 =>
+    <ResponsiveWrapper>
+        {({ width, height }) => <TreeMapPlaceholders width={width} height={height} {...props} />}
+    </ResponsiveWrapper>
 
-        return (
-            <Measure
-                bounds
-                onResize={contentRect => {
-                    this.setState({ dimensions: contentRect.bounds })
-                }}
-            >
-                {({ measureRef }) =>
-                    <div ref={measureRef} style={{ width: '100%', height: '100%' }}>
-                        {shouldRender &&
-                            <TreeMapPlaceholders width={width} height={height} {...this.props} />}
-                    </div>}
-            </Measure>
-        )
-    }
-}
+export default ResponsiveTreeMapPlaceholders
diff --git a/src/components/charts/treemap/TreeMap.js b/src/components/charts/treemap/TreeMap.js
@@ -10,32 +10,31 @@
 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,
     orientLabels,
     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 = []
 
         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)}
                             </text>
                         </g>}
                 </g>

diff --git 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,17 +25,16 @@ 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 = []
 
         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
@@ -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
@@ -25,6 +25,8 @@ export const convertLabel = (_label, labelFormat) => {
     return data => {
         let labelOutput = label(data)
 
+        console.log('labelOutput', labelOutput)
+
         if (formatter) {
             labelOutput = formatter(labelOutput)
         }