feat(calendar): port CalendarD3 features to Calendar

plouc · May 11, 2016 · e11737d · e11737d
1 parent 4058b9f
commit e11737d
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -31,8 +31,6 @@
     - [`<ResponsiveCalendar />`](https://plouc.github.io/nivo/#/calendar/react)
     - [`<CalendarD3 />`](https://plouc.github.io/nivo/#/calendar/d3)
     - [`<ResponsiveCalendarD3 />`](https://plouc.github.io/nivo/#/calendar/d3)
-    - [`<CalendarCanvas />`](https://plouc.github.io/nivo/#/calendar/canvas) :warning: experimental
-    - [`<ResponsiveCalendarCanvas />`](https://plouc.github.io/nivo/#/calendar/canvas) :warning: experimental
 - Stack
     - [`<Stack />`](https://plouc.github.io/nivo/#/stack)
     - [`<ResponsiveStack />`](https://plouc.github.io/nivo/#/stack)

diff --git a/src/components/charts/calendar/Calendar.js b/src/components/charts/calendar/Calendar.js
@@ -10,9 +10,13 @@
 
 import React, { Component }                        from 'react';
 import { TransitionMotion, spring }                from 'react-motion';
+import d3                                          from 'd3';
 import Nivo                                        from '../../../Nivo';
+import { DIRECTION_HORIZONTAL }                    from '../../../constants/directions';
 import CalendarLayout                              from '../../../lib/charts/calendar/CalendarLayout';
 import { calendarPropTypes, calendarDefaultProps } from './CalendarProps';
+import CalendarDay                                 from './CalendarDay';
+import CalendarMonthPath                           from './CalendarMonthPath';
 
 
 class Calendar extends Component {
@@ -24,19 +28,21 @@ class Calendar extends Component {
         const {
             from, to,
             direction,
+            yearSpacing, yearLegendOffset,
             daySpacing, dayBorderWidth, dayBorderColor,
-            monthBorderWidth, monthBorderColor,
+            monthBorderWidth, monthBorderColor, monthLegendOffset,
             motionStiffness, motionDamping
         } = this.props;
 
         const margin = _.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;
 
-        const { days, months } = this.calendarLayout.compute({
+        const { years, months, days } = this.calendarLayout.compute({
             width, height,
             from, to,
             direction,
+            yearSpacing,
             daySpacing
         });
 
@@ -55,6 +61,94 @@ class Calendar extends Component {
         const stiffness = motionStiffness;
         const damping   = motionDamping;
 
+
+        /*
+         yearLegends.enter()
+         .append('text')
+         .text(d => d)
+         .classed('nivo_calendar_year_legend', true)
+         .attr('text-anchor', 'middle')
+         .attr('transform', (d, i) => {
+         let x = 0;
+         let y = 0;
+
+         if (direction === DIRECTION_HORIZONTAL) {
+         x = -yearLegendOffset;
+         y = (7 * (cellSize + daySpacing) + yearSpacing) * i + 3.5 * (cellSize + daySpacing);
+         } else {
+         x = (7 * (cellSize + daySpacing) + yearSpacing) * i + 3.5 * (cellSize + daySpacing);
+         y = -yearLegendOffset;
+         }
+
+         return `translate(${x},${y}) rotate(${yearLabelRotation})`;
+         })
+         ;
+         */
+
+        const monthLegendFormat = d3.time.format('%b');
+
+
+        return (
+            <svg className="nivo_calendar" style={{ width: this.props.width, height: this.props.height }}>
+                <g className="nivo_calendar_wrapper" transform={`translate(${margin.left},${margin.top})`}>
+                    {days.map(d => (
+                        <CalendarDay
+                            key={d.date.toString()}
+                            x={d.x} y={d.y}
+                            size={d.size}
+                            borderWidth={dayBorderWidth} borderColor={dayBorderColor}
+                        />
+                    ))}
+                    {months.map(m => (
+                        <CalendarMonthPath
+                            key={m.date.toString()}
+                            path={m.path}
+                            borderWidth={monthBorderWidth} borderColor={monthBorderColor}
+                        />
+                    ))}
+                    {months.map(month => {
+                        let transform;
+                        if (direction === DIRECTION_HORIZONTAL) {
+                            transform = `translate(${month.bbox.x + month.bbox.width / 2},${month.bbox.y - monthLegendOffset})`;
+                        } else {
+                            transform =`translate(${month.bbox.x - monthLegendOffset},${month.bbox.y + month.bbox.height / 2}) rotate(-90)`;
+                        }
+
+                        return (
+                            <text
+                                key={`${month.date.toString()}.legend`}
+                                className="nivo_calendar_month_legend"
+                                transform={transform}
+                                textAnchor="middle"
+                            >
+                                {monthLegendFormat(month.date)}
+                            </text>
+                        );
+                    })}
+                    {years.map(year => {
+                        let transform;
+                        if (direction === DIRECTION_HORIZONTAL) {
+                            transform = `translate(${year.bbox.x - yearLegendOffset},${year.bbox.y + year.bbox.height / 2}) rotate(-90)`;
+                        } else {
+                            transform = `translate(${year.bbox.x + year.bbox.width / 2},${year.bbox.y - yearLegendOffset})`;
+                        }
+
+                        return (
+                            <text
+                                key={year.year}
+                                className="nivo_calendar_year_legend"
+                                transform={transform}
+                                textAnchor="middle"
+                            >
+                                {year.year}
+                            </text>
+                        );
+                    })}
+                </g>
+            </svg>
+        );
+
+        /*
         return (
             <svg className="nivo_calendar" style={{ width: this.props.width, height: this.props.height }}>
                 <g className="nivo_calendar_wrapper" transform={`translate(${margin.left},${margin.top})`}>
@@ -94,6 +188,7 @@ class Calendar extends Component {
                 </g>
             </svg>
         );
+        */
     }
 }
 

diff --git a/src/components/charts/calendar/CalendarD3.js b/src/components/charts/calendar/CalendarD3.js
@@ -177,42 +177,28 @@ class CalendarD3 extends Component {
 
         yearLegends.enter()
             .append('text')
-            .text(d => d)
+            .text(d => d.year)
             .classed('nivo_calendar_year_legend', true)
             .attr('text-anchor', 'middle')
-            .attr('transform', (d, i) => {
-                let x = 0;
-                let y = 0;
-
+            .attr('transform', d => {
                 if (direction === DIRECTION_HORIZONTAL) {
-                    x = -yearLegendOffset;
-                    y = (7 * (cellSize + daySpacing) + yearSpacing) * i + 3.5 * (cellSize + daySpacing);
-                } else {
-                    x = (7 * (cellSize + daySpacing) + yearSpacing) * i + 3.5 * (cellSize + daySpacing);
-                    y = -yearLegendOffset;
+                    return `translate(${d.bbox.x - yearLegendOffset},${d.bbox.y + d.bbox.height / 2}) rotate(-90)`;
                 }
 
-                return `translate(${x},${y}) rotate(${yearLabelRotation})`;
+                return `translate(${d.bbox.x + d.bbox.width / 2},${d.bbox.y - yearLegendOffset})`;
             })
         ;
 
         yearLegends
             .transition()
             .duration(transitionDuration)
             .ease(transitionEasing)
-            .attr('transform', (d, i) => {
-                let x = 0;
-                let y = 0;
-
+            .attr('transform', d => {
                 if (direction === DIRECTION_HORIZONTAL) {
-                    x = -yearLegendOffset;
-                    y = (7 * (cellSize + daySpacing) + yearSpacing) * i + 3.5 * (cellSize + daySpacing);
-                } else {
-                    x = (7 * (cellSize + daySpacing) + yearSpacing) * i + 3.5 * (cellSize + daySpacing);
-                    y = -yearLegendOffset;
+                    return `translate(${d.bbox.x - yearLegendOffset},${d.bbox.y + d.bbox.height / 2}) rotate(-90)`;
                 }
 
-                return `translate(${x},${y}) rotate(${yearLabelRotation})`;
+                return `translate(${d.bbox.x + d.bbox.width / 2},${d.bbox.y - yearLegendOffset})`;
             })
         ;
     }

diff --git a/src/components/charts/calendar/CalendarDay.js b/src/components/charts/calendar/CalendarDay.js
@@ -0,0 +1,44 @@
+/*
+ * This file is part of the nivo library.
+ *
+ * (c) Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+'use strict';
+
+import React, { Component, PropTypes } from 'react';
+
+
+class CalendarDay extends Component {
+    render() {
+        const { x, y, size, borderWidth, borderColor } = this.props;
+
+        return (
+            <rect
+                className="nivo_calendar_day"
+                x={x} y={y}
+                width={size} height={size}
+                style={{
+                    fill:        'rgba(0, 0, 0, .15)',
+                    strokeWidth: borderWidth,
+                    stroke:      borderColor,
+                }}
+            />
+        );
+    }
+}
+
+const { number, string } = PropTypes;
+
+CalendarDay.propTypes = {
+    x:           number.isRequired,
+    y:           number.isRequired,
+    size:        number.isRequired,
+    borderWidth: number.isRequired,
+    borderColor: string.isRequired,
+};
+
+
+export default CalendarDay;
diff --git a/src/components/charts/calendar/CalendarMonthPath.js b/src/components/charts/calendar/CalendarMonthPath.js
@@ -0,0 +1,41 @@
+/*
+ * This file is part of the nivo library.
+ *
+ * (c) Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+'use strict';
+
+import React, { Component, PropTypes } from 'react';
+
+
+class CalendarMonthPath extends Component {
+    render() {
+        const { path, borderWidth, borderColor } = this.props;
+
+        return (
+            <path
+                className="nivo_calendar_month"
+                d={path}
+                style={{
+                    fill:        'none',
+                    strokeWidth: borderWidth,
+                    stroke:      borderColor,
+                }}
+            />
+        );
+    }
+}
+
+const { number, string } = PropTypes;
+
+CalendarMonthPath.propTypes = {
+    path:        string.isRequired,
+    borderWidth: number.isRequired,
+    borderColor: string.isRequired,
+};
+
+
+export default CalendarMonthPath;
diff --git a/src/components/charts/calendar/CalendarProps.js b/src/components/charts/calendar/CalendarProps.js
@@ -61,7 +61,7 @@ export const calendarDefaultProps = {
     margin:               Nivo.defaults.margin,
     direction:            DIRECTION_HORIZONTAL,
     // years
-    yearSpacing:          20,
+    yearSpacing:          30,
     yearLegendOffset:     10,
     // days
     daySpacing:           0,