feat(calendar): add ability to add arbitrary data

plouc · Mar 22, 2019 · 6a46b72 · 6a46b72
1 parent 96f8ac2
commit 6a46b72
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 64 deletions.
diff --git a/packages/calendar/src/CalendarDay.js b/packages/calendar/src/CalendarDay.js
@@ -6,50 +6,52 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React from 'react'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { compose, withPropsOnChange, pure } from 'recompose'
 import { BasicTooltip, noop } from '@nivo/core'
 
-const CalendarDay = ({
-    x,
-    y,
-    size,
-    spacing,
-    color,
-    borderWidth,
-    borderColor,
-    onClick,
-    showTooltip,
-    hideTooltip,
-}) => {
-    return (
-        <>
-            <rect
-                x={x}
-                y={y}
-                width={size}
-                height={size}
-                style={{
-                    fill: color,
-                    strokeWidth: borderWidth,
-                    stroke: borderColor,
-                }}
-            />
-            <rect
-                fill="rgba(0, 0, 0, 0)"
-                x={x - spacing / 2}
-                y={y - spacing / 2}
-                width={size + spacing}
-                height={size + spacing}
-                onClick={onClick}
-                onMouseEnter={showTooltip}
-                onMouseMove={showTooltip}
-                onMouseLeave={hideTooltip}
-            />
-        </>
-    )
-}
+const CalendarDay = memo(
+    ({
+        x,
+        y,
+        size,
+        spacing,
+        color,
+        borderWidth,
+        borderColor,
+        onClick,
+        showTooltip,
+        hideTooltip,
+    }) => {
+        return (
+            <>
+                <rect
+                    x={x}
+                    y={y}
+                    width={size}
+                    height={size}
+                    style={{
+                        fill: color,
+                        strokeWidth: borderWidth,
+                        stroke: borderColor,
+                    }}
+                />
+                <rect
+                    fill="rgba(0, 0, 0, 0)"
+                    x={x - spacing / 2}
+                    y={y - spacing / 2}
+                    width={size + spacing}
+                    height={size + spacing}
+                    onClick={onClick}
+                    onMouseEnter={showTooltip}
+                    onMouseMove={showTooltip}
+                    onMouseLeave={hideTooltip}
+                />
+            </>
+        )
+    }
+)
 
 CalendarDay.propTypes = {
     onClick: PropTypes.func.isRequired,
@@ -72,6 +74,8 @@ CalendarDay.propTypes = {
     }).isRequired,
 }
 
+CalendarDay.displayName = 'CalendarDay'
+
 const enhance = compose(
     withPropsOnChange(['data', 'onClick'], ({ data, onClick }) => ({
         onClick: event => onClick(data, event),

diff --git a/packages/calendar/src/computeCalendar.js → packages/calendar/src/compute.js b/packages/calendar/src/computeCalendar.js → packages/calendar/src/compute.js
@@ -284,10 +284,11 @@ export const computeLayout = ({ width, height, from, to, direction, yearSpacing,
 export const bindDaysData = ({ days, data, colorScale, emptyColor }) => {
     return days.map(day => {
         day.color = emptyColor
-        data.forEach(dataDay => {
-            if (dataDay.day === day.day) {
-                day.value = dataDay.value
-                day.color = colorScale(dataDay.value)
+        data.forEach(dayData => {
+            if (dayData.day === day.day) {
+                day.value = dayData.value
+                day.color = colorScale(dayData.value)
+                day.data = dayData
             }
         })
 

diff --git a/packages/calendar/src/enhance.js b/packages/calendar/src/enhance.js
@@ -6,10 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import compose from 'recompose/compose'
-import defaultProps from 'recompose/defaultProps'
-import withPropsOnChange from 'recompose/withPropsOnChange'
-import pure from 'recompose/pure'
+import { compose, defaultProps, withPropsOnChange, pure } from 'recompose'
 import { scaleQuantize } from 'd3-scale'
 import { withTheme, withDimensions } from '@nivo/core'
 import { CalendarDefaultProps, CalendarCanvasDefaultProps } from './props'
@@ -19,7 +16,7 @@ import {
     bindDaysData,
     computeYearLegendPositions,
     computeMonthLegendPositions,
-} from './computeCalendar'
+} from './compute'
 
 const commonEnhancers = [
     withTheme(),

diff --git a/website/src/components/charts/calendar/CalendarCanvas.js b/website/src/components/charts/calendar/CalendarCanvas.js
@@ -54,7 +54,7 @@ export default class CalendarCanvas extends Component {
             monthLegendOffset: 10,
 
             daySpacing: 0,
-            dayBorderWidth: 2,
+            dayBorderWidth: 1,
             dayBorderColor: '#ffffff',
 
             isInteractive: true,

diff --git a/website/src/components/charts/calendar/props.js b/website/src/components/charts/calendar/props.js
@@ -26,6 +26,8 @@ export default [
                         }>
                     `}
                 </pre>
+                You can also add arbitrary data to this structure to be used in tooltips or event
+                handlers.
             </div>
         ),
         type: '{Array<Object>}',

diff --git a/website/src/components/charts/calendar/propsMapper.js b/website/src/components/charts/calendar/propsMapper.js
@@ -19,20 +19,22 @@ const TooltipKey = styled.span`
     font-weight: 600;
 `
 
-const CustomTooltip = node => (
-    <TooltipWrapper style={{ color: node.color }}>
-        <TooltipKey>day</TooltipKey>
-        <span>{node.day}</span>
-        <TooltipKey>value</TooltipKey>
-        <span>{node.value}</span>
-        <TooltipKey>x</TooltipKey>
-        <span>{node.x}</span>
-        <TooltipKey>y</TooltipKey>
-        <span>{node.y}</span>
-        <TooltipKey>size</TooltipKey>
-        <span>{node.size}</span>
-    </TooltipWrapper>
-)
+const CustomTooltip = day => {
+    return (
+        <TooltipWrapper style={{ color: day.color }}>
+            <TooltipKey>day</TooltipKey>
+            <span>{day.day}</span>
+            <TooltipKey>value</TooltipKey>
+            <span>{day.value}</span>
+            <TooltipKey>x</TooltipKey>
+            <span>{day.x}</span>
+            <TooltipKey>y</TooltipKey>
+            <span>{day.y}</span>
+            <TooltipKey>size</TooltipKey>
+            <span>{day.size}</span>
+        </TooltipWrapper>
+    )
+}
 
 export default settingsMapper(
     {