1 | import _setDisplayName from 'recompose/setDisplayName';
|
2 | import React, { memo, Component } from 'react';
|
3 | import { boxAlignments, noop, alignBox, withTheme, withDimensions, Container, SvgWrapper, ResponsiveWrapper, getRelativeCursor, isCursorInRect, degreesToRadians } from '@nivo/core';
|
4 | import { LegendPropShape, BoxLegendSvg, renderLegendToCanvas } from '@nivo/legends';
|
5 | import PropTypes from 'prop-types';
|
6 | import { timeFormat } from 'd3-time-format';
|
7 | import _pure from 'recompose/pure';
|
8 | import _withPropsOnChange from 'recompose/withPropsOnChange';
|
9 | import _defaultProps from 'recompose/defaultProps';
|
10 | import _compose from 'recompose/compose';
|
11 | import { scaleQuantize } from 'd3-scale';
|
12 | import memoize from 'lodash.memoize';
|
13 | import isDate from 'lodash.isdate';
|
14 | import range from 'lodash.range';
|
15 | import { timeWeek, timeYear, timeWeeks, timeDays, timeMonths } from 'd3-time';
|
16 | import { BasicTooltip } from '@nivo/tooltip';
|
17 |
|
18 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
|
19 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
20 | var monthLabelFormat = timeFormat('%b');
|
21 | var commonPropTypes = {
|
22 | from: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
|
23 | to: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
|
24 | data: PropTypes.arrayOf(PropTypes.shape({
|
25 | day: PropTypes.string.isRequired,
|
26 | value: PropTypes.number.isRequired
|
27 | })).isRequired,
|
28 | align: PropTypes.oneOf(boxAlignments).isRequired,
|
29 | originX: PropTypes.number.isRequired,
|
30 | originY: PropTypes.number.isRequired,
|
31 | calendarWidth: PropTypes.number.isRequired,
|
32 | calendarHeight: PropTypes.number.isRequired,
|
33 | minValue: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
|
34 | maxValue: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
|
35 | colors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
36 | colorScale: PropTypes.func.isRequired,
|
37 | direction: PropTypes.oneOf(['horizontal', 'vertical']),
|
38 | emptyColor: PropTypes.string.isRequired,
|
39 | yearLegend: PropTypes.func.isRequired,
|
40 | yearSpacing: PropTypes.number.isRequired,
|
41 | yearLegendPosition: PropTypes.oneOf(['before', 'after']).isRequired,
|
42 | yearLegendOffset: PropTypes.number.isRequired,
|
43 | monthBorderWidth: PropTypes.number.isRequired,
|
44 | monthBorderColor: PropTypes.string.isRequired,
|
45 | monthLegend: PropTypes.func.isRequired,
|
46 | monthLegendPosition: PropTypes.oneOf(['before', 'after']).isRequired,
|
47 | monthLegendOffset: PropTypes.number.isRequired,
|
48 | daySpacing: PropTypes.number.isRequired,
|
49 | dayBorderWidth: PropTypes.number.isRequired,
|
50 | dayBorderColor: PropTypes.string.isRequired,
|
51 | isInteractive: PropTypes.bool,
|
52 | onClick: PropTypes.func.isRequired,
|
53 | tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
54 | tooltip: PropTypes.func,
|
55 | legends: PropTypes.arrayOf(PropTypes.shape(_objectSpread({}, LegendPropShape, {
|
56 | itemCount: PropTypes.number.isRequired
|
57 | }))).isRequired
|
58 | };
|
59 | var CalendarPropTypes = commonPropTypes;
|
60 | var CalendarCanvasPropTypes = _objectSpread({}, commonPropTypes, {
|
61 | pixelRatio: PropTypes.number.isRequired
|
62 | });
|
63 | var commonDefaultProps = {
|
64 | colors: ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560'],
|
65 | align: 'center',
|
66 | direction: 'horizontal',
|
67 | emptyColor: '#fff',
|
68 | minValue: 0,
|
69 | maxValue: 'auto',
|
70 | yearSpacing: 30,
|
71 | yearLegend: function yearLegend(year) {
|
72 | return year;
|
73 | },
|
74 | yearLegendPosition: 'before',
|
75 | yearLegendOffset: 10,
|
76 | monthBorderWidth: 2,
|
77 | monthBorderColor: '#000',
|
78 | monthLegend: function monthLegend(year, month, date) {
|
79 | return monthLabelFormat(date);
|
80 | },
|
81 | monthLegendPosition: 'before',
|
82 | monthLegendOffset: 10,
|
83 | weekdayLegend: function weekdayLegend(d) {
|
84 | return d;
|
85 | },
|
86 | daySpacing: 0,
|
87 | dayBorderWidth: 1,
|
88 | dayBorderColor: '#000',
|
89 | isInteractive: true,
|
90 | onClick: noop,
|
91 | legends: []
|
92 | };
|
93 | var CalendarDefaultProps = commonDefaultProps;
|
94 | var CalendarCanvasDefaultProps = _objectSpread({}, commonDefaultProps, {
|
95 | pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1
|
96 | });
|
97 |
|
98 | function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } return target; }
|
99 | function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
100 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
101 | function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
102 | function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
103 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
104 | function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
|
105 | function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
|
106 | function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
|
107 | function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
|
108 | var computeDomain = function computeDomain(data, minSpec, maxSpec) {
|
109 | var allValues = data.map(function (d) {
|
110 | return d.value;
|
111 | });
|
112 | var minValue = minSpec === 'auto' ? Math.min.apply(Math, _toConsumableArray(allValues)) : minSpec;
|
113 | var maxValue = maxSpec === 'auto' ? Math.max.apply(Math, _toConsumableArray(allValues)) : maxSpec;
|
114 | return [minValue, maxValue];
|
115 | };
|
116 | var computeCellSize = function computeCellSize(_ref) {
|
117 | var width = _ref.width,
|
118 | height = _ref.height,
|
119 | direction = _ref.direction,
|
120 | yearRange = _ref.yearRange,
|
121 | yearSpacing = _ref.yearSpacing,
|
122 | daySpacing = _ref.daySpacing,
|
123 | maxWeeks = _ref.maxWeeks;
|
124 | var hCellSize;
|
125 | var vCellSize;
|
126 | if (direction === 'horizontal') {
|
127 | hCellSize = (width - daySpacing * maxWeeks) / maxWeeks;
|
128 | vCellSize = (height - (yearRange.length - 1) * yearSpacing - yearRange.length * (8 * daySpacing)) / (yearRange.length * 7);
|
129 | } else {
|
130 | hCellSize = (width - (yearRange.length - 1) * yearSpacing - yearRange.length * (8 * daySpacing)) / (yearRange.length * 7);
|
131 | vCellSize = (height - daySpacing * maxWeeks) / maxWeeks;
|
132 | }
|
133 | return Math.min(hCellSize, vCellSize);
|
134 | };
|
135 | var monthPathAndBBox = function monthPathAndBBox(_ref2) {
|
136 | var date = _ref2.date,
|
137 | cellSize = _ref2.cellSize,
|
138 | yearIndex = _ref2.yearIndex,
|
139 | yearSpacing = _ref2.yearSpacing,
|
140 | daySpacing = _ref2.daySpacing,
|
141 | direction = _ref2.direction,
|
142 | originX = _ref2.originX,
|
143 | originY = _ref2.originY;
|
144 | var t1 = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
145 | var firstWeek = timeWeek.count(timeYear(date), date);
|
146 | var lastWeek = timeWeek.count(timeYear(t1), t1);
|
147 | var firstDay = date.getDay();
|
148 | var lastDay = t1.getDay();
|
149 | var xO = originX;
|
150 | var yO = originY;
|
151 | var yearOffset = yearIndex * (7 * (cellSize + daySpacing) + yearSpacing);
|
152 | if (direction === 'horizontal') {
|
153 | yO += yearOffset;
|
154 | } else {
|
155 | xO += yearOffset;
|
156 | }
|
157 | var path;
|
158 | var bbox = {
|
159 | x: xO,
|
160 | y: yO,
|
161 | width: 0,
|
162 | height: 0
|
163 | };
|
164 | if (direction === 'horizontal') {
|
165 | path = ["M".concat(xO + (firstWeek + 1) * (cellSize + daySpacing), ",").concat(yO + firstDay * (cellSize + daySpacing)), "H".concat(xO + firstWeek * (cellSize + daySpacing), "V").concat(yO + 7 * (cellSize + daySpacing)), "H".concat(xO + lastWeek * (cellSize + daySpacing), "V").concat(yO + (lastDay + 1) * (cellSize + daySpacing)), "H".concat(xO + (lastWeek + 1) * (cellSize + daySpacing), "V").concat(yO), "H".concat(xO + (firstWeek + 1) * (cellSize + daySpacing), "Z")].join('');
|
166 | bbox.x = xO + firstWeek * (cellSize + daySpacing);
|
167 | bbox.width = xO + (lastWeek + 1) * (cellSize + daySpacing) - bbox.x;
|
168 | bbox.height = 7 * (cellSize + daySpacing);
|
169 | } else {
|
170 | path = ["M".concat(xO + firstDay * (cellSize + daySpacing), ",").concat(yO + (firstWeek + 1) * (cellSize + daySpacing)), "H".concat(xO, "V").concat(yO + (lastWeek + 1) * (cellSize + daySpacing)), "H".concat(xO + (lastDay + 1) * (cellSize + daySpacing), "V").concat(yO + lastWeek * (cellSize + daySpacing)), "H".concat(xO + 7 * (cellSize + daySpacing), "V").concat(yO + firstWeek * (cellSize + daySpacing)), "H".concat(xO + firstDay * (cellSize + daySpacing), "Z")].join('');
|
171 | bbox.y = yO + firstWeek * (cellSize + daySpacing);
|
172 | bbox.width = 7 * (cellSize + daySpacing);
|
173 | bbox.height = yO + (lastWeek + 1) * (cellSize + daySpacing) - bbox.y;
|
174 | }
|
175 | return {
|
176 | path: path,
|
177 | bbox: bbox
|
178 | };
|
179 | };
|
180 | var memoMonthPathAndBBox = memoize(monthPathAndBBox, function (_ref3) {
|
181 | var date = _ref3.date,
|
182 | cellSize = _ref3.cellSize,
|
183 | yearIndex = _ref3.yearIndex,
|
184 | yearSpacing = _ref3.yearSpacing,
|
185 | daySpacing = _ref3.daySpacing,
|
186 | direction = _ref3.direction,
|
187 | originX = _ref3.originX,
|
188 | originY = _ref3.originY;
|
189 | return "".concat(date.toString(), ".").concat(cellSize, ".").concat(yearIndex, ".").concat(yearSpacing, ".").concat(daySpacing, ".").concat(direction, ".").concat(originX, ".").concat(originY);
|
190 | });
|
191 | var cellPositionHorizontal = function cellPositionHorizontal(cellSize, yearSpacing, daySpacing) {
|
192 | return function (originX, originY, d, yearIndex) {
|
193 | var weekOfYear = timeWeek.count(timeYear(d), d);
|
194 | return {
|
195 | x: originX + weekOfYear * (cellSize + daySpacing) + daySpacing / 2,
|
196 | y: originY + d.getDay() * (cellSize + daySpacing) + daySpacing / 2 + yearIndex * (yearSpacing + 7 * (cellSize + daySpacing))
|
197 | };
|
198 | };
|
199 | };
|
200 | var cellPositionVertical = function cellPositionVertical(cellSize, yearSpacing, daySpacing) {
|
201 | return function (originX, originY, d, yearIndex) {
|
202 | var weekOfYear = timeWeek.count(timeYear(d), d);
|
203 | return {
|
204 | x: originX + d.getDay() * (cellSize + daySpacing) + daySpacing / 2 + yearIndex * (yearSpacing + 7 * (cellSize + daySpacing)),
|
205 | y: originY + weekOfYear * (cellSize + daySpacing) + daySpacing / 2
|
206 | };
|
207 | };
|
208 | };
|
209 | var dayFormat = timeFormat('%Y-%m-%d');
|
210 | var computeLayout = function computeLayout(_ref4) {
|
211 | var width = _ref4.width,
|
212 | height = _ref4.height,
|
213 | from = _ref4.from,
|
214 | to = _ref4.to,
|
215 | direction = _ref4.direction,
|
216 | yearSpacing = _ref4.yearSpacing,
|
217 | daySpacing = _ref4.daySpacing,
|
218 | align = _ref4.align;
|
219 | var fromDate = isDate(from) ? from : new Date(from);
|
220 | var toDate = isDate(to) ? to : new Date(to);
|
221 | var yearRange = range(fromDate.getFullYear(), toDate.getFullYear() + 1);
|
222 | var maxWeeks = Math.max.apply(Math, _toConsumableArray(yearRange.map(function (year) {
|
223 | return timeWeeks(new Date(year, 0, 1), new Date(year + 1, 0, 1)).length;
|
224 | }))) + 1;
|
225 | var cellSize = computeCellSize({
|
226 | width: width,
|
227 | height: height,
|
228 | direction: direction,
|
229 | yearRange: yearRange,
|
230 | yearSpacing: yearSpacing,
|
231 | daySpacing: daySpacing,
|
232 | maxWeeks: maxWeeks
|
233 | });
|
234 | var monthsSize = cellSize * maxWeeks + daySpacing * maxWeeks;
|
235 | var yearsSize = (cellSize + daySpacing) * 7 * yearRange.length + yearSpacing * (yearRange.length - 1);
|
236 | var calendarWidth = direction === 'horizontal' ? monthsSize : yearsSize;
|
237 | var calendarHeight = direction === 'horizontal' ? yearsSize : monthsSize;
|
238 | var _alignBox = alignBox({
|
239 | x: 0,
|
240 | y: 0,
|
241 | width: calendarWidth,
|
242 | height: calendarHeight
|
243 | }, {
|
244 | x: 0,
|
245 | y: 0,
|
246 | width: width,
|
247 | height: height
|
248 | }, align),
|
249 | _alignBox2 = _slicedToArray(_alignBox, 2),
|
250 | originX = _alignBox2[0],
|
251 | originY = _alignBox2[1];
|
252 | var cellPosition;
|
253 | if (direction === 'horizontal') {
|
254 | cellPosition = cellPositionHorizontal(cellSize, yearSpacing, daySpacing);
|
255 | } else {
|
256 | cellPosition = cellPositionVertical(cellSize, yearSpacing, daySpacing);
|
257 | }
|
258 | var years = [];
|
259 | var months = [];
|
260 | var days = [];
|
261 | yearRange.forEach(function (year, i) {
|
262 | var yearStart = new Date(year, 0, 1);
|
263 | var yearEnd = new Date(year + 1, 0, 1);
|
264 | days = days.concat(timeDays(yearStart, yearEnd).map(function (dayDate) {
|
265 | return _objectSpread$1({
|
266 | date: dayDate,
|
267 | day: dayFormat(dayDate),
|
268 | size: cellSize
|
269 | }, cellPosition(originX, originY, dayDate, i));
|
270 | }));
|
271 | var yearMonths = timeMonths(yearStart, yearEnd).map(function (monthDate) {
|
272 | return _objectSpread$1({
|
273 | date: monthDate,
|
274 | year: monthDate.getFullYear(),
|
275 | month: monthDate.getMonth()
|
276 | }, memoMonthPathAndBBox({
|
277 | originX: originX,
|
278 | originY: originY,
|
279 | date: monthDate,
|
280 | direction: direction,
|
281 | yearIndex: i,
|
282 | yearSpacing: yearSpacing,
|
283 | daySpacing: daySpacing,
|
284 | cellSize: cellSize
|
285 | }));
|
286 | });
|
287 | months = months.concat(yearMonths);
|
288 | years.push({
|
289 | year: year,
|
290 | bbox: {
|
291 | x: yearMonths[0].bbox.x,
|
292 | y: yearMonths[0].bbox.y,
|
293 | width: yearMonths[11].bbox.x - yearMonths[0].bbox.x + yearMonths[11].bbox.width,
|
294 | height: yearMonths[11].bbox.y - yearMonths[0].bbox.y + yearMonths[11].bbox.height
|
295 | }
|
296 | });
|
297 | });
|
298 | return {
|
299 | years: years,
|
300 | months: months,
|
301 | days: days,
|
302 | cellSize: cellSize,
|
303 | calendarWidth: calendarWidth,
|
304 | calendarHeight: calendarHeight,
|
305 | originX: originX,
|
306 | originY: originY
|
307 | };
|
308 | };
|
309 | var bindDaysData = function bindDaysData(_ref5) {
|
310 | var days = _ref5.days,
|
311 | data = _ref5.data,
|
312 | colorScale = _ref5.colorScale,
|
313 | emptyColor = _ref5.emptyColor;
|
314 | return days.map(function (day) {
|
315 | day.color = emptyColor;
|
316 | data.forEach(function (dayData) {
|
317 | if (dayData.day === day.day) {
|
318 | day.value = dayData.value;
|
319 | day.color = colorScale(dayData.value);
|
320 | day.data = dayData;
|
321 | }
|
322 | });
|
323 | return day;
|
324 | });
|
325 | };
|
326 | var computeYearLegendPositions = function computeYearLegendPositions(_ref6) {
|
327 | var years = _ref6.years,
|
328 | direction = _ref6.direction,
|
329 | position = _ref6.position,
|
330 | offset = _ref6.offset;
|
331 | return years.map(function (year) {
|
332 | var x = 0;
|
333 | var y = 0;
|
334 | var rotation = 0;
|
335 | if (direction === 'horizontal' && position === 'before') {
|
336 | x = year.bbox.x - offset;
|
337 | y = year.bbox.y + year.bbox.height / 2;
|
338 | rotation = -90;
|
339 | } else if (direction === 'horizontal' && position === 'after') {
|
340 | x = year.bbox.x + year.bbox.width + offset;
|
341 | y = year.bbox.y + year.bbox.height / 2;
|
342 | rotation = -90;
|
343 | } else if (direction === 'vertical' && position === 'before') {
|
344 | x = year.bbox.x + year.bbox.width / 2;
|
345 | y = year.bbox.y - offset;
|
346 | } else {
|
347 | x = year.bbox.x + year.bbox.width / 2;
|
348 | y = year.bbox.y + year.bbox.height + offset;
|
349 | }
|
350 | return _objectSpread$1({}, year, {
|
351 | x: x,
|
352 | y: y,
|
353 | rotation: rotation
|
354 | });
|
355 | });
|
356 | };
|
357 | var computeMonthLegendPositions = function computeMonthLegendPositions(_ref7) {
|
358 | var months = _ref7.months,
|
359 | direction = _ref7.direction,
|
360 | position = _ref7.position,
|
361 | offset = _ref7.offset;
|
362 | return months.map(function (month) {
|
363 | var x = 0;
|
364 | var y = 0;
|
365 | var rotation = 0;
|
366 | if (direction === 'horizontal' && position === 'before') {
|
367 | x = month.bbox.x + month.bbox.width / 2;
|
368 | y = month.bbox.y - offset;
|
369 | } else if (direction === 'horizontal' && position === 'after') {
|
370 | x = month.bbox.x + month.bbox.width / 2;
|
371 | y = month.bbox.y + month.bbox.height + offset;
|
372 | } else if (direction === 'vertical' && position === 'before') {
|
373 | x = month.bbox.x - offset;
|
374 | y = month.bbox.y + month.bbox.height / 2;
|
375 | rotation = -90;
|
376 | } else {
|
377 | x = month.bbox.x + month.bbox.width + offset;
|
378 | y = month.bbox.y + month.bbox.height / 2;
|
379 | rotation = -90;
|
380 | }
|
381 | return _objectSpread$1({}, month, {
|
382 | x: x,
|
383 | y: y,
|
384 | rotation: rotation
|
385 | });
|
386 | });
|
387 | };
|
388 |
|
389 | var commonEnhancers = [withTheme(), withDimensions(), _withPropsOnChange(['data', 'minValue', 'maxValue', 'colors'], function (_ref) {
|
390 | var data = _ref.data,
|
391 | minValue = _ref.minValue,
|
392 | maxValue = _ref.maxValue,
|
393 | colors = _ref.colors;
|
394 | var domain = computeDomain(data, minValue, maxValue);
|
395 | var colorScale = scaleQuantize().domain(domain).range(colors);
|
396 | return {
|
397 | colorScale: colorScale
|
398 | };
|
399 | }), _withPropsOnChange(['width', 'height', 'from', 'to', 'direction', 'yearSpacing', 'daySpacing', 'align'], function (_ref2) {
|
400 | var width = _ref2.width,
|
401 | height = _ref2.height,
|
402 | from = _ref2.from,
|
403 | to = _ref2.to,
|
404 | direction = _ref2.direction,
|
405 | yearSpacing = _ref2.yearSpacing,
|
406 | daySpacing = _ref2.daySpacing,
|
407 | align = _ref2.align;
|
408 | return computeLayout({
|
409 | width: width,
|
410 | height: height,
|
411 | from: from,
|
412 | to: to,
|
413 | direction: direction,
|
414 | yearSpacing: yearSpacing,
|
415 | daySpacing: daySpacing,
|
416 | align: align
|
417 | });
|
418 | }), _withPropsOnChange(['years', 'direction', 'yearLegendPosition', 'yearLegendOffset'], function (_ref3) {
|
419 | var years = _ref3.years,
|
420 | direction = _ref3.direction,
|
421 | yearLegendPosition = _ref3.yearLegendPosition,
|
422 | yearLegendOffset = _ref3.yearLegendOffset;
|
423 | return {
|
424 | yearLegends: computeYearLegendPositions({
|
425 | years: years,
|
426 | direction: direction,
|
427 | position: yearLegendPosition,
|
428 | offset: yearLegendOffset
|
429 | })
|
430 | };
|
431 | }), _withPropsOnChange(['months', 'direction', 'monthLegendPosition', 'monthLegendOffset'], function (_ref4) {
|
432 | var months = _ref4.months,
|
433 | direction = _ref4.direction,
|
434 | monthLegendPosition = _ref4.monthLegendPosition,
|
435 | monthLegendOffset = _ref4.monthLegendOffset;
|
436 | return {
|
437 | monthLegends: computeMonthLegendPositions({
|
438 | months: months,
|
439 | direction: direction,
|
440 | position: monthLegendPosition,
|
441 | offset: monthLegendOffset
|
442 | })
|
443 | };
|
444 | }), _withPropsOnChange(['days', 'data', 'colorScale', 'emptyColor'], function (_ref5) {
|
445 | var days = _ref5.days,
|
446 | data = _ref5.data,
|
447 | colorScale = _ref5.colorScale,
|
448 | emptyColor = _ref5.emptyColor;
|
449 | return {
|
450 | days: bindDaysData({
|
451 | days: days,
|
452 | data: data,
|
453 | colorScale: colorScale,
|
454 | emptyColor: emptyColor
|
455 | })
|
456 | };
|
457 | })];
|
458 | var enhance = (function (Component) {
|
459 | switch (Component.displayName) {
|
460 | case 'Calendar':
|
461 | return _compose.apply(void 0, [_defaultProps(CalendarDefaultProps)].concat(commonEnhancers, [_pure]))(Component);
|
462 | case 'CalendarCanvas':
|
463 | return _compose.apply(void 0, [_defaultProps(CalendarCanvasDefaultProps)].concat(commonEnhancers, [_pure]))(Component);
|
464 | }
|
465 | return Component;
|
466 | });
|
467 |
|
468 | var CalendarYearLegends = memo(function (_ref) {
|
469 | var years = _ref.years,
|
470 | legend = _ref.legend,
|
471 | theme = _ref.theme;
|
472 | return React.createElement(React.Fragment, null, years.map(function (year) {
|
473 | return React.createElement("text", {
|
474 | key: year.year,
|
475 | transform: "translate(".concat(year.x, ",").concat(year.y, ") rotate(").concat(year.rotation, ")"),
|
476 | textAnchor: "middle",
|
477 | style: theme.labels.text
|
478 | }, legend(year.year));
|
479 | }));
|
480 | });
|
481 | CalendarYearLegends.propTypes = {
|
482 | years: PropTypes.array.isRequired,
|
483 | legend: PropTypes.func.isRequired,
|
484 | theme: PropTypes.object.isRequired
|
485 | };
|
486 | CalendarYearLegends.displayName = 'CalendarYearLegends';
|
487 |
|
488 | var CalendarMonthPath = function CalendarMonthPath(_ref) {
|
489 | var path = _ref.path,
|
490 | borderWidth = _ref.borderWidth,
|
491 | borderColor = _ref.borderColor;
|
492 | return React.createElement("path", {
|
493 | d: path,
|
494 | style: {
|
495 | fill: 'none',
|
496 | strokeWidth: borderWidth,
|
497 | stroke: borderColor,
|
498 | pointerEvents: 'none'
|
499 | }
|
500 | });
|
501 | };
|
502 | CalendarMonthPath.propTypes = {
|
503 | path: PropTypes.string.isRequired,
|
504 | borderWidth: PropTypes.number.isRequired,
|
505 | borderColor: PropTypes.string.isRequired
|
506 | };
|
507 | var CalendarMonthPath$1 = _pure(CalendarMonthPath);
|
508 |
|
509 | var CalendarMonthLegends = memo(function (_ref) {
|
510 | var months = _ref.months,
|
511 | legend = _ref.legend,
|
512 | theme = _ref.theme;
|
513 | return React.createElement(React.Fragment, null, months.map(function (month) {
|
514 | return React.createElement("text", {
|
515 | key: "".concat(month.date.toString(), ".legend"),
|
516 | transform: "translate(".concat(month.x, ",").concat(month.y, ") rotate(").concat(month.rotation, ")"),
|
517 | textAnchor: "middle",
|
518 | style: theme.labels.text
|
519 | }, legend(month.year, month.month, month.date));
|
520 | }));
|
521 | });
|
522 | CalendarMonthLegends.propTypes = {
|
523 | months: PropTypes.array.isRequired,
|
524 | legend: PropTypes.func.isRequired,
|
525 | theme: PropTypes.object.isRequired
|
526 | };
|
527 | CalendarMonthLegends.displayName = 'CalendarMonthLegends';
|
528 |
|
529 | function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } return target; }
|
530 | function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
531 | var CalendarDay = memo(function (_ref) {
|
532 | var x = _ref.x,
|
533 | y = _ref.y,
|
534 | size = _ref.size,
|
535 | spacing = _ref.spacing,
|
536 | color = _ref.color,
|
537 | borderWidth = _ref.borderWidth,
|
538 | borderColor = _ref.borderColor,
|
539 | onClick = _ref.onClick,
|
540 | showTooltip = _ref.showTooltip,
|
541 | hideTooltip = _ref.hideTooltip;
|
542 | return React.createElement(React.Fragment, null, React.createElement("rect", {
|
543 | x: x,
|
544 | y: y,
|
545 | width: size,
|
546 | height: size,
|
547 | style: {
|
548 | fill: color,
|
549 | strokeWidth: borderWidth,
|
550 | stroke: borderColor
|
551 | }
|
552 | }), React.createElement("rect", {
|
553 | fill: "rgba(0, 0, 0, 0)",
|
554 | x: x - spacing / 2,
|
555 | y: y - spacing / 2,
|
556 | width: size + spacing,
|
557 | height: size + spacing,
|
558 | onClick: onClick,
|
559 | onMouseEnter: showTooltip,
|
560 | onMouseMove: showTooltip,
|
561 | onMouseLeave: hideTooltip
|
562 | }));
|
563 | });
|
564 | CalendarDay.propTypes = {
|
565 | onClick: PropTypes.func.isRequired,
|
566 | data: PropTypes.object.isRequired,
|
567 | x: PropTypes.number.isRequired,
|
568 | y: PropTypes.number.isRequired,
|
569 | size: PropTypes.number.isRequired,
|
570 | spacing: PropTypes.number.isRequired,
|
571 | color: PropTypes.string.isRequired,
|
572 | borderWidth: PropTypes.number.isRequired,
|
573 | borderColor: PropTypes.string.isRequired,
|
574 | tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
575 | tooltip: PropTypes.func,
|
576 | showTooltip: PropTypes.func.isRequired,
|
577 | hideTooltip: PropTypes.func.isRequired,
|
578 | theme: PropTypes.shape({
|
579 | tooltip: PropTypes.shape({}).isRequired
|
580 | }).isRequired
|
581 | };
|
582 | CalendarDay.displayName = 'CalendarDay';
|
583 | var enhance$1 = _compose(_withPropsOnChange(['data', 'onClick'], function (_ref2) {
|
584 | var data = _ref2.data,
|
585 | _onClick = _ref2.onClick;
|
586 | return {
|
587 | onClick: function onClick(event) {
|
588 | return _onClick(data, event);
|
589 | }
|
590 | };
|
591 | }), _withPropsOnChange(['data', 'color', 'showTooltip', 'tooltipFormat', 'tooltip', 'theme'], function (_ref3) {
|
592 | var data = _ref3.data,
|
593 | color = _ref3.color,
|
594 | _showTooltip = _ref3.showTooltip,
|
595 | tooltipFormat = _ref3.tooltipFormat,
|
596 | tooltip = _ref3.tooltip,
|
597 | theme = _ref3.theme;
|
598 | if (data.value === undefined) return {
|
599 | showTooltip: noop
|
600 | };
|
601 | return {
|
602 | showTooltip: function showTooltip(event) {
|
603 | return _showTooltip(React.createElement(BasicTooltip, {
|
604 | id: "".concat(data.day),
|
605 | value: data.value,
|
606 | enableChip: true,
|
607 | color: color,
|
608 | theme: theme,
|
609 | format: tooltipFormat,
|
610 | renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _objectSpread$2({
|
611 | color: color
|
612 | }, data)) : null
|
613 | }), event);
|
614 | }
|
615 | };
|
616 | }), _pure);
|
617 | var CalendarDay$1 = enhance$1(CalendarDay);
|
618 |
|
619 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
620 | var Calendar = function Calendar(_ref) {
|
621 | var colorScale = _ref.colorScale,
|
622 | margin = _ref.margin,
|
623 | width = _ref.width,
|
624 | height = _ref.height,
|
625 | outerWidth = _ref.outerWidth,
|
626 | outerHeight = _ref.outerHeight,
|
627 | yearLegends = _ref.yearLegends,
|
628 | yearLegend = _ref.yearLegend,
|
629 | monthLegends = _ref.monthLegends,
|
630 | monthLegend = _ref.monthLegend,
|
631 | monthBorderWidth = _ref.monthBorderWidth,
|
632 | monthBorderColor = _ref.monthBorderColor,
|
633 | daySpacing = _ref.daySpacing,
|
634 | dayBorderWidth = _ref.dayBorderWidth,
|
635 | dayBorderColor = _ref.dayBorderColor,
|
636 | theme = _ref.theme,
|
637 | isInteractive = _ref.isInteractive,
|
638 | tooltipFormat = _ref.tooltipFormat,
|
639 | tooltip = _ref.tooltip,
|
640 | onClick = _ref.onClick,
|
641 | legends = _ref.legends,
|
642 | months = _ref.months,
|
643 | days = _ref.days;
|
644 | return React.createElement(Container, {
|
645 | isInteractive: isInteractive,
|
646 | theme: theme,
|
647 | animate: false
|
648 | }, function (_ref2) {
|
649 | var showTooltip = _ref2.showTooltip,
|
650 | hideTooltip = _ref2.hideTooltip;
|
651 | return React.createElement(SvgWrapper, {
|
652 | width: outerWidth,
|
653 | height: outerHeight,
|
654 | margin: margin,
|
655 | theme: theme
|
656 | }, days.map(function (d) {
|
657 | return React.createElement(CalendarDay$1, {
|
658 | key: d.date.toString(),
|
659 | data: d,
|
660 | x: d.x,
|
661 | y: d.y,
|
662 | size: d.size,
|
663 | spacing: daySpacing,
|
664 | color: d.color,
|
665 | borderWidth: dayBorderWidth,
|
666 | borderColor: dayBorderColor,
|
667 | showTooltip: showTooltip,
|
668 | hideTooltip: hideTooltip,
|
669 | tooltipFormat: tooltipFormat,
|
670 | tooltip: tooltip,
|
671 | theme: theme,
|
672 | onClick: onClick
|
673 | });
|
674 | }), months.map(function (m) {
|
675 | return React.createElement(CalendarMonthPath$1, {
|
676 | key: m.date.toString(),
|
677 | path: m.path,
|
678 | borderWidth: monthBorderWidth,
|
679 | borderColor: monthBorderColor
|
680 | });
|
681 | }), React.createElement(CalendarMonthLegends, {
|
682 | months: monthLegends,
|
683 | legend: monthLegend,
|
684 | theme: theme
|
685 | }), React.createElement(CalendarYearLegends, {
|
686 | years: yearLegends,
|
687 | legend: yearLegend,
|
688 | theme: theme
|
689 | }), legends.map(function (legend, i) {
|
690 | var legendData = colorScale.ticks(legend.itemCount).map(function (value) {
|
691 | return {
|
692 | id: value,
|
693 | label: value,
|
694 | color: colorScale(value)
|
695 | };
|
696 | });
|
697 | return React.createElement(BoxLegendSvg, _extends({
|
698 | key: i
|
699 | }, legend, {
|
700 | containerWidth: width,
|
701 | containerHeight: height,
|
702 | data: legendData,
|
703 | theme: theme
|
704 | }));
|
705 | }));
|
706 | });
|
707 | };
|
708 | Calendar.displayName = 'Calendar';
|
709 | Calendar.propTypes = CalendarPropTypes;
|
710 | var Calendar$1 = _setDisplayName('Calendar')(enhance(Calendar));
|
711 |
|
712 | function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
713 | var ResponsiveCalendar = function ResponsiveCalendar(props) {
|
714 | return React.createElement(ResponsiveWrapper, null, function (_ref) {
|
715 | var width = _ref.width,
|
716 | height = _ref.height;
|
717 | return React.createElement(Calendar$1, _extends$1({
|
718 | width: width,
|
719 | height: height
|
720 | }, props));
|
721 | });
|
722 | };
|
723 |
|
724 | function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
725 | function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } return target; }
|
726 | function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
|
727 | function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
728 | function _iterableToArrayLimit$1(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
729 | function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
|
730 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
731 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
732 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
733 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
734 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
735 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
736 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
737 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
738 | function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
739 | var findDayUnderCursor = function findDayUnderCursor(days, size, spacing, margin, x, y) {
|
740 | return days.find(function (day) {
|
741 | return day.value !== undefined && isCursorInRect(day.x + margin.left - spacing / 2, day.y + margin.top - spacing / 2, size + spacing, size + spacing, x, y);
|
742 | });
|
743 | };
|
744 | var CalendarCanvas =
|
745 | function (_Component) {
|
746 | _inherits(CalendarCanvas, _Component);
|
747 | function CalendarCanvas() {
|
748 | var _getPrototypeOf2;
|
749 | var _this;
|
750 | _classCallCheck(this, CalendarCanvas);
|
751 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
752 | args[_key] = arguments[_key];
|
753 | }
|
754 | _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(CalendarCanvas)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
755 | _defineProperty$3(_assertThisInitialized(_this), "handleMouseHover", function (showTooltip, hideTooltip) {
|
756 | return function (event) {
|
757 | var _this$props = _this.props,
|
758 | isInteractive = _this$props.isInteractive,
|
759 | margin = _this$props.margin,
|
760 | theme = _this$props.theme,
|
761 | days = _this$props.days,
|
762 | daySpacing = _this$props.daySpacing,
|
763 | tooltipFormat = _this$props.tooltipFormat,
|
764 | tooltip = _this$props.tooltip;
|
765 | if (!isInteractive || !days || days.length === 0) return;
|
766 | var _getRelativeCursor = getRelativeCursor(_this.surface, event),
|
767 | _getRelativeCursor2 = _slicedToArray$1(_getRelativeCursor, 2),
|
768 | x = _getRelativeCursor2[0],
|
769 | y = _getRelativeCursor2[1];
|
770 | var currentDay = findDayUnderCursor(days, days[0].size, daySpacing, margin, x, y);
|
771 | if (currentDay !== undefined) {
|
772 | showTooltip(React.createElement(BasicTooltip, {
|
773 | id: "".concat(currentDay.day),
|
774 | value: currentDay.value,
|
775 | enableChip: true,
|
776 | color: currentDay.color,
|
777 | theme: theme,
|
778 | format: tooltipFormat,
|
779 | renderContent: typeof tooltip === 'function' ? tooltip.bind(null, currentDay) : null
|
780 | }), event);
|
781 | } else {
|
782 | hideTooltip();
|
783 | }
|
784 | };
|
785 | });
|
786 | _defineProperty$3(_assertThisInitialized(_this), "handleMouseLeave", function (hideTooltip) {
|
787 | return function () {
|
788 | if (_this.props.isInteractive !== true) return;
|
789 | hideTooltip();
|
790 | };
|
791 | });
|
792 | _defineProperty$3(_assertThisInitialized(_this), "handleClick", function (event) {
|
793 | var _this$props2 = _this.props,
|
794 | isInteractive = _this$props2.isInteractive,
|
795 | margin = _this$props2.margin,
|
796 | onClick = _this$props2.onClick,
|
797 | days = _this$props2.days,
|
798 | daySpacing = _this$props2.daySpacing;
|
799 | if (!isInteractive || !days || days.length === 0) return;
|
800 | var _getRelativeCursor3 = getRelativeCursor(_this.surface, event),
|
801 | _getRelativeCursor4 = _slicedToArray$1(_getRelativeCursor3, 2),
|
802 | x = _getRelativeCursor4[0],
|
803 | y = _getRelativeCursor4[1];
|
804 | var currentDay = findDayUnderCursor(days, days[0].size, daySpacing, margin, x, y);
|
805 | if (currentDay !== undefined) onClick(currentDay, event);
|
806 | });
|
807 | return _this;
|
808 | }
|
809 | _createClass(CalendarCanvas, [{
|
810 | key: "componentDidMount",
|
811 | value: function componentDidMount() {
|
812 | this.ctx = this.surface.getContext('2d');
|
813 | this.draw(this.props);
|
814 | }
|
815 | }, {
|
816 | key: "shouldComponentUpdate",
|
817 | value: function shouldComponentUpdate(props) {
|
818 | if (this.props.outerWidth !== props.outerWidth || this.props.outerHeight !== props.outerHeight || this.props.isInteractive !== props.isInteractive || this.props.theme !== props.theme) {
|
819 | return true;
|
820 | } else {
|
821 | this.draw(props);
|
822 | return false;
|
823 | }
|
824 | }
|
825 | }, {
|
826 | key: "componentDidUpdate",
|
827 | value: function componentDidUpdate() {
|
828 | this.ctx = this.surface.getContext('2d');
|
829 | this.draw(this.props);
|
830 | }
|
831 | }, {
|
832 | key: "draw",
|
833 | value: function draw(props) {
|
834 | var _this2 = this;
|
835 | var pixelRatio = props.pixelRatio,
|
836 | margin = props.margin,
|
837 | width = props.width,
|
838 | height = props.height,
|
839 | outerWidth = props.outerWidth,
|
840 | outerHeight = props.outerHeight,
|
841 | colorScale = props.colorScale,
|
842 | yearLegends = props.yearLegends,
|
843 | yearLegend = props.yearLegend,
|
844 | monthLegends = props.monthLegends,
|
845 | monthLegend = props.monthLegend,
|
846 | days = props.days,
|
847 | dayBorderWidth = props.dayBorderWidth,
|
848 | dayBorderColor = props.dayBorderColor,
|
849 | legends = props.legends,
|
850 | theme = props.theme;
|
851 | this.surface.width = outerWidth * pixelRatio;
|
852 | this.surface.height = outerHeight * pixelRatio;
|
853 | this.ctx.scale(pixelRatio, pixelRatio);
|
854 | this.ctx.fillStyle = theme.background;
|
855 | this.ctx.fillRect(0, 0, outerWidth, outerHeight);
|
856 | this.ctx.translate(margin.left, margin.top);
|
857 | days.forEach(function (day) {
|
858 | _this2.ctx.fillStyle = day.color;
|
859 | if (dayBorderWidth > 0) {
|
860 | _this2.ctx.strokeStyle = dayBorderColor;
|
861 | _this2.ctx.lineWidth = dayBorderWidth;
|
862 | }
|
863 | _this2.ctx.beginPath();
|
864 | _this2.ctx.rect(day.x, day.y, day.size, day.size);
|
865 | _this2.ctx.fill();
|
866 | if (dayBorderWidth > 0) {
|
867 | _this2.ctx.stroke();
|
868 | }
|
869 | });
|
870 | this.ctx.textAlign = 'center';
|
871 | this.ctx.textBaseline = 'middle';
|
872 | this.ctx.fillStyle = theme.labels.text.fill;
|
873 | this.ctx.font = "".concat(theme.labels.text.fontSize, "px ").concat(theme.labels.text.fontFamily);
|
874 | monthLegends.forEach(function (month) {
|
875 | _this2.ctx.save();
|
876 | _this2.ctx.translate(month.x, month.y);
|
877 | _this2.ctx.rotate(degreesToRadians(month.rotation));
|
878 | _this2.ctx.fillText(monthLegend(month.year, month.month, month.date), 0, 0);
|
879 | _this2.ctx.restore();
|
880 | });
|
881 | yearLegends.forEach(function (year) {
|
882 | _this2.ctx.save();
|
883 | _this2.ctx.translate(year.x, year.y);
|
884 | _this2.ctx.rotate(degreesToRadians(year.rotation));
|
885 | _this2.ctx.fillText(yearLegend(year.year), 0, 0);
|
886 | _this2.ctx.restore();
|
887 | });
|
888 | legends.forEach(function (legend) {
|
889 | var legendData = colorScale.ticks(legend.itemCount).map(function (value) {
|
890 | return {
|
891 | id: value,
|
892 | label: value,
|
893 | color: colorScale(value)
|
894 | };
|
895 | });
|
896 | renderLegendToCanvas(_this2.ctx, _objectSpread$3({}, legend, {
|
897 | data: legendData,
|
898 | containerWidth: width,
|
899 | containerHeight: height,
|
900 | theme: theme
|
901 | }));
|
902 | });
|
903 | }
|
904 | }, {
|
905 | key: "render",
|
906 | value: function render() {
|
907 | var _this3 = this;
|
908 | var _this$props3 = this.props,
|
909 | outerWidth = _this$props3.outerWidth,
|
910 | outerHeight = _this$props3.outerHeight,
|
911 | pixelRatio = _this$props3.pixelRatio,
|
912 | isInteractive = _this$props3.isInteractive,
|
913 | theme = _this$props3.theme;
|
914 | return React.createElement(Container, {
|
915 | isInteractive: isInteractive,
|
916 | theme: theme,
|
917 | animate: false
|
918 | }, function (_ref) {
|
919 | var showTooltip = _ref.showTooltip,
|
920 | hideTooltip = _ref.hideTooltip;
|
921 | return React.createElement("canvas", {
|
922 | ref: function ref(surface) {
|
923 | _this3.surface = surface;
|
924 | },
|
925 | width: outerWidth * pixelRatio,
|
926 | height: outerHeight * pixelRatio,
|
927 | style: {
|
928 | width: outerWidth,
|
929 | height: outerHeight
|
930 | },
|
931 | onMouseEnter: _this3.handleMouseHover(showTooltip, hideTooltip),
|
932 | onMouseMove: _this3.handleMouseHover(showTooltip, hideTooltip),
|
933 | onMouseLeave: _this3.handleMouseLeave(hideTooltip),
|
934 | onClick: _this3.handleClick
|
935 | });
|
936 | });
|
937 | }
|
938 | }]);
|
939 | return CalendarCanvas;
|
940 | }(Component);
|
941 | _defineProperty$3(CalendarCanvas, "propTypes", CalendarCanvasPropTypes);
|
942 | CalendarCanvas.displayName = 'CalendarCanvas';
|
943 | var CalendarCanvas$1 = _setDisplayName(CalendarCanvas.displayName)(enhance(CalendarCanvas));
|
944 |
|
945 | function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
|
946 | var ResponsiveCalendarCanvas = function ResponsiveCalendarCanvas(props) {
|
947 | return React.createElement(ResponsiveWrapper, null, function (_ref) {
|
948 | var width = _ref.width,
|
949 | height = _ref.height;
|
950 | return React.createElement(CalendarCanvas$1, _extends$2({
|
951 | width: width,
|
952 | height: height
|
953 | }, props));
|
954 | });
|
955 | };
|
956 |
|
957 | export { Calendar$1 as Calendar, CalendarCanvas$1 as CalendarCanvas, CalendarCanvasDefaultProps, CalendarCanvasPropTypes, CalendarDefaultProps, CalendarPropTypes, ResponsiveCalendar, ResponsiveCalendarCanvas };
|