397 lines
13 KiB
TypeScript
397 lines
13 KiB
TypeScript
// @ts-nocheck
|
|
|
|
import React, {Fragment} from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import memoizeOne from 'memoize-one';
|
|
import {DAYS_IN_WEEK, MILLISECONDS_IN_ONE_DAY, DAY_LABELS, MONTH_LABELS} from './constants';
|
|
import {
|
|
dateNDaysAgo,
|
|
shiftDate,
|
|
getBeginningTimeForDate,
|
|
convertToDate,
|
|
getRange,
|
|
} from './helpers';
|
|
import * as dFns from 'date-fns';
|
|
import {MonthLabels} from "@/heatmap/b";
|
|
|
|
const SQUARE_SIZE = 10;
|
|
const MONTH_LABEL_GUTTER_SIZE = 4;
|
|
export const CSS_PSEDUO_NAMESPACE = 'react-calendar-heatmap-';
|
|
|
|
class CalendarHeatmap extends React.Component {
|
|
getDateDifferenceInDays() {
|
|
const {
|
|
startDate,
|
|
endDate
|
|
} = this.props;
|
|
return dFns.differenceInCalendarDays(endDate, startDate);
|
|
}
|
|
|
|
getSquareSizeWithGutter() {
|
|
return SQUARE_SIZE + this.props.gutterSize;
|
|
}
|
|
|
|
getMonthLabelSize() {
|
|
if (!this.props.showMonthLabels) {
|
|
return 0;
|
|
}
|
|
if (this.props.horizontal) {
|
|
return SQUARE_SIZE + MONTH_LABEL_GUTTER_SIZE;
|
|
}
|
|
return 2 * (SQUARE_SIZE + MONTH_LABEL_GUTTER_SIZE);
|
|
}
|
|
|
|
getWeekdayLabelSize() {
|
|
if (!this.props.showWeekdayLabels) {
|
|
return 0;
|
|
}
|
|
if (this.props.horizontal) {
|
|
return 30;
|
|
}
|
|
return SQUARE_SIZE * 1.5;
|
|
}
|
|
|
|
getStartDate() {
|
|
return shiftDate(this.getEndDate(), -this.getDateDifferenceInDays() + 1); // +1 because endDate is inclusive
|
|
}
|
|
|
|
getEndDate() {
|
|
return getBeginningTimeForDate(convertToDate(this.props.endDate));
|
|
}
|
|
|
|
getStartDateWithEmptyDays() {
|
|
return shiftDate(this.getStartDate(), -this.getNumEmptyDaysAtStart());
|
|
}
|
|
|
|
getNumEmptyDaysAtStart() {
|
|
return this.getStartDate().getDay();
|
|
}
|
|
|
|
getNumEmptyDaysAtEnd() {
|
|
return DAYS_IN_WEEK - 1 - this.getEndDate().getDay();
|
|
}
|
|
|
|
getWeekCount() {
|
|
const numDaysRoundedToWeek =
|
|
this.getDateDifferenceInDays() + this.getNumEmptyDaysAtStart() + this.getNumEmptyDaysAtEnd();
|
|
return Math.ceil(numDaysRoundedToWeek / DAYS_IN_WEEK);
|
|
}
|
|
|
|
getWeekWidth() {
|
|
return DAYS_IN_WEEK * this.getSquareSizeWithGutter();
|
|
}
|
|
|
|
getWidth() {
|
|
return (
|
|
this.getWeekCount() * this.getSquareSizeWithGutter() -
|
|
(this.props.gutterSize - this.getWeekdayLabelSize())
|
|
);
|
|
}
|
|
|
|
getHeight() {
|
|
return (
|
|
this.getWeekWidth() +
|
|
(this.getMonthLabelSize() - this.props.gutterSize) +
|
|
this.getWeekdayLabelSize()
|
|
);
|
|
}
|
|
|
|
getValueCache = memoizeOne((props) =>
|
|
props.values.reduce((memo, value) => {
|
|
const date = convertToDate(value.date);
|
|
const index = Math.floor((date - this.getStartDateWithEmptyDays()) / MILLISECONDS_IN_ONE_DAY);
|
|
// eslint-disable-next-line no-param-reassign
|
|
memo[index] = {
|
|
value,
|
|
className: this.props.classForValue(value),
|
|
title: this.props.titleForValue ? this.props.titleForValue(value) : null,
|
|
tooltipDataAttrs: this.getTooltipDataAttrsForValue(value),
|
|
};
|
|
return memo;
|
|
}, {}),
|
|
);
|
|
|
|
getValueForIndex(index) {
|
|
if (this.valueCache[index]) {
|
|
return this.valueCache[index].value;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
getClassNameForIndex(index) {
|
|
if (this.valueCache[index]) {
|
|
return this.valueCache[index].className;
|
|
}
|
|
return this.props.classForValue(null);
|
|
}
|
|
|
|
getTitleForIndex(index) {
|
|
if (this.valueCache[index]) {
|
|
return this.valueCache[index].title;
|
|
}
|
|
return this.props.titleForValue ? this.props.titleForValue(null) : null;
|
|
}
|
|
|
|
getTooltipDataAttrsForIndex(index) {
|
|
if (this.valueCache[index]) {
|
|
return this.valueCache[index].tooltipDataAttrs;
|
|
}
|
|
return this.getTooltipDataAttrsForValue({
|
|
date: null,
|
|
count: null
|
|
});
|
|
}
|
|
|
|
getTooltipDataAttrsForValue(value) {
|
|
const {tooltipDataAttrs} = this.props;
|
|
|
|
if (typeof tooltipDataAttrs === 'function') {
|
|
return tooltipDataAttrs(value);
|
|
}
|
|
return tooltipDataAttrs;
|
|
}
|
|
|
|
getTransformForWeek(weekIndex) {
|
|
if (this.props.horizontal) {
|
|
return `translate(${weekIndex * this.getSquareSizeWithGutter()}, 0)`;
|
|
}
|
|
return `translate(0, ${weekIndex * this.getSquareSizeWithGutter()})`;
|
|
}
|
|
|
|
getTransformForWeekdayLabels() {
|
|
if (this.props.horizontal) {
|
|
return `translate(${SQUARE_SIZE}, ${this.getMonthLabelSize()})`;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
getTransformForMonthLabels() {
|
|
if (this.props.horizontal) {
|
|
return `translate(${this.getWeekdayLabelSize()}, 0)`;
|
|
}
|
|
return `translate(${this.getWeekWidth() +
|
|
MONTH_LABEL_GUTTER_SIZE}, ${this.getWeekdayLabelSize()})`;
|
|
}
|
|
|
|
getTransformForAllWeeks() {
|
|
if (this.props.horizontal) {
|
|
return `translate(${this.getWeekdayLabelSize()}, ${this.getMonthLabelSize()})`;
|
|
}
|
|
return `translate(0, ${this.getWeekdayLabelSize()})`;
|
|
}
|
|
|
|
getViewBox() {
|
|
if (this.props.horizontal) {
|
|
return `0 0 ${this.getWidth()} ${this.getHeight()}`;
|
|
}
|
|
return `0 0 ${this.getHeight()} ${this.getWidth()}`;
|
|
}
|
|
|
|
getSquareCoordinates(dayIndex) {
|
|
if (this.props.horizontal) {
|
|
return [0, dayIndex * this.getSquareSizeWithGutter()];
|
|
}
|
|
return [dayIndex * this.getSquareSizeWithGutter(), 0];
|
|
}
|
|
|
|
getWeekdayLabelCoordinates(dayIndex) {
|
|
if (this.props.horizontal) {
|
|
return [0, (dayIndex + 1) * SQUARE_SIZE + dayIndex * this.props.gutterSize];
|
|
}
|
|
return [dayIndex * SQUARE_SIZE + dayIndex * this.props.gutterSize, SQUARE_SIZE];
|
|
}
|
|
|
|
getMonthLabelCoordinates(weekIndex) {
|
|
if (this.props.horizontal) {
|
|
return [
|
|
weekIndex * this.getSquareSizeWithGutter(),
|
|
this.getMonthLabelSize() - MONTH_LABEL_GUTTER_SIZE,
|
|
];
|
|
}
|
|
const verticalOffset = -2;
|
|
return [0, (weekIndex + 1) * this.getSquareSizeWithGutter() + verticalOffset];
|
|
}
|
|
|
|
handleClick(value) {
|
|
if (this.props.onClick) {
|
|
this.props.onClick(value);
|
|
}
|
|
}
|
|
|
|
handleMouseOver(e, value) {
|
|
if (this.props.onMouseOver) {
|
|
this.props.onMouseOver(e, value);
|
|
}
|
|
}
|
|
|
|
handleMouseLeave(e, value) {
|
|
if (this.props.onMouseLeave) {
|
|
this.props.onMouseLeave(e, value);
|
|
}
|
|
}
|
|
|
|
renderSquare(dayIndex, index) {
|
|
const indexOutOfRange =
|
|
index < this.getNumEmptyDaysAtStart() ||
|
|
index >= this.getNumEmptyDaysAtStart() + this.getDateDifferenceInDays();
|
|
if (indexOutOfRange && !this.props.showOutOfRangeDays) {
|
|
return null;
|
|
}
|
|
const [x, y] = this.getSquareCoordinates(dayIndex);
|
|
const value = this.getValueForIndex(index);
|
|
const rect = (
|
|
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
<rect
|
|
key={index}
|
|
width={SQUARE_SIZE}
|
|
height={SQUARE_SIZE}
|
|
x={x}
|
|
y={y}
|
|
className={this.getClassNameForIndex(index)}
|
|
onClick={() => this.handleClick(value)}
|
|
onMouseOver={(e) => this.handleMouseOver(e, value)}
|
|
onMouseLeave={(e) => this.handleMouseLeave(e, value)}
|
|
{...this.getTooltipDataAttrsForIndex(index)}
|
|
>
|
|
<title>{this.getTitleForIndex(index)}</title>
|
|
</rect>
|
|
);
|
|
const {transformDayElement} = this.props;
|
|
return transformDayElement ? transformDayElement(rect, value, index) : rect;
|
|
}
|
|
|
|
renderWeek(weekIndex) {
|
|
return (
|
|
<g
|
|
key={weekIndex}
|
|
transform={this.getTransformForWeek(weekIndex)}
|
|
className={`${CSS_PSEDUO_NAMESPACE}week`}
|
|
>
|
|
{getRange(DAYS_IN_WEEK).map((dayIndex) =>
|
|
this.renderSquare(dayIndex, weekIndex * DAYS_IN_WEEK + dayIndex),
|
|
)}
|
|
</g>
|
|
);
|
|
}
|
|
|
|
renderAllWeeks() {
|
|
return getRange(this.getWeekCount()).map((weekIndex) => this.renderWeek(weekIndex));
|
|
}
|
|
|
|
renderMonthLabels() {
|
|
if (!this.props.showMonthLabels) {
|
|
return null;
|
|
}
|
|
|
|
const adapter = (date) => {
|
|
const [x, y] = this.getMonthLabelCoordinates(dFns.differenceInWeeks(date, this.props.startDate));
|
|
return {
|
|
x,
|
|
y
|
|
}
|
|
};
|
|
|
|
return <>
|
|
<MonthLabels
|
|
startDate={this.props.startDate}
|
|
endDate={this.props.endDate}
|
|
getMonthLabelCoordinates={adapter}
|
|
/>
|
|
{/*{...a}*/}
|
|
</>
|
|
}
|
|
|
|
renderWeekdayLabels() {
|
|
if (!this.props.showWeekdayLabels) {
|
|
return null;
|
|
}
|
|
return this.props.weekdayLabels.map((weekdayLabel, dayIndex) => {
|
|
const [x, y] = this.getWeekdayLabelCoordinates(dayIndex);
|
|
const cssClasses = `${
|
|
this.props.horizontal ? '' : `${CSS_PSEDUO_NAMESPACE}small-text`
|
|
} ${CSS_PSEDUO_NAMESPACE}weekday-label`;
|
|
// eslint-disable-next-line no-bitwise
|
|
return dayIndex & 1 ? (
|
|
<text key={`${x}${y}`} x={x} y={y} className={cssClasses}>
|
|
{weekdayLabel}
|
|
</text>
|
|
) : null;
|
|
});
|
|
}
|
|
|
|
render() {
|
|
this.valueCache = this.getValueCache(this.props);
|
|
|
|
return (
|
|
<svg className="react-calendar-heatmap" viewBox={this.getViewBox()}>
|
|
<g
|
|
transform={this.getTransformForMonthLabels()}
|
|
className={`${CSS_PSEDUO_NAMESPACE}month-labels`}
|
|
>
|
|
{this.renderMonthLabels()}
|
|
</g>
|
|
<g
|
|
transform={this.getTransformForAllWeeks()}
|
|
className={`${CSS_PSEDUO_NAMESPACE}all-weeks`}
|
|
>
|
|
{this.renderAllWeeks()}
|
|
</g>
|
|
<g
|
|
transform={this.getTransformForWeekdayLabels()}
|
|
className={`${CSS_PSEDUO_NAMESPACE}weekday-labels`}
|
|
>
|
|
{this.renderWeekdayLabels()}
|
|
</g>
|
|
</svg>
|
|
);
|
|
}
|
|
}
|
|
|
|
CalendarHeatmap.propTypes = {
|
|
values: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)])
|
|
.isRequired,
|
|
}).isRequired,
|
|
).isRequired, // array of objects with date and arbitrary metadata
|
|
numDays: PropTypes.number, // number of days back from endDate to show
|
|
startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]), // start of date range
|
|
endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]), // end of date range
|
|
gutterSize: PropTypes.number, // size of space between squares
|
|
horizontal: PropTypes.bool, // whether to orient horizontally or vertically
|
|
showMonthLabels: PropTypes.bool, // whether to show month labels
|
|
showWeekdayLabels: PropTypes.bool, // whether to show weekday labels
|
|
showOutOfRangeDays: PropTypes.bool, // whether to render squares for extra days in week after endDate, and before start date
|
|
tooltipDataAttrs: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), // data attributes to add to square for setting 3rd party tooltips, e.g. { 'data-toggle': 'tooltip' } for bootstrap tooltips
|
|
titleForValue: PropTypes.func, // function which returns title text for value
|
|
classForValue: PropTypes.func, // function which returns html class for value
|
|
monthLabels: PropTypes.arrayOf(PropTypes.string), // An array with 12 strings representing the text from janurary to december
|
|
weekdayLabels: PropTypes.arrayOf(PropTypes.string), // An array with 7 strings representing the text from Sun to Sat
|
|
onClick: PropTypes.func, // callback function when a square is clicked
|
|
onMouseOver: PropTypes.func, // callback function when mouse pointer is over a square
|
|
onMouseLeave: PropTypes.func, // callback function when mouse pointer is left a square
|
|
transformDayElement: PropTypes.func, // function to further transform the svg element for a single day
|
|
};
|
|
|
|
CalendarHeatmap.defaultProps = {
|
|
numDays: null,
|
|
startDate: dateNDaysAgo(200),
|
|
endDate: new Date(),
|
|
gutterSize: 1,
|
|
horizontal: true,
|
|
showMonthLabels: true,
|
|
showWeekdayLabels: false,
|
|
showOutOfRangeDays: false,
|
|
tooltipDataAttrs: null,
|
|
titleForValue: null,
|
|
classForValue: (value) => (value ? 'color-filled' : 'color-empty'),
|
|
monthLabels: MONTH_LABELS,
|
|
weekdayLabels: DAY_LABELS,
|
|
onClick: null,
|
|
onMouseOver: null,
|
|
onMouseLeave: null,
|
|
transformDayElement: null,
|
|
};
|
|
|
|
export default CalendarHeatmap;
|