I am lazy, remove the new heatmap for now
This commit is contained in:
parent
52b6b0eaee
commit
0ce2096fac
@ -5,11 +5,12 @@ import useSWR from "swr";
|
|||||||
import {fetcher} from "@/app/utils";
|
import {fetcher} from "@/app/utils";
|
||||||
import * as R from 'ramda';
|
import * as R from 'ramda';
|
||||||
import * as dFns from 'date-fns';
|
import * as dFns from 'date-fns';
|
||||||
// import CalendarHeatmap from 'react-calendar-heatmap';
|
import CalendarHeatmap from 'react-calendar-heatmap';
|
||||||
import CalendarHeatmap from '../heatmap';
|
// import CalendarHeatmap from '../heatmap';
|
||||||
import 'react-calendar-heatmap/dist/styles.css';
|
import 'react-calendar-heatmap/dist/styles.css';
|
||||||
import './calendar-styles.css'
|
import './calendar-styles.css'
|
||||||
import { Tooltip } from 'react-tooltip';
|
import { Tooltip } from 'react-tooltip';
|
||||||
|
import {MyHeatMap} from "@/heatmap/b";
|
||||||
|
|
||||||
const initialDate = dFns.parseISO('2023-12-15T00:00:00.000Z')
|
const initialDate = dFns.parseISO('2023-12-15T00:00:00.000Z')
|
||||||
const endDate = dFns.parseISO('2024-01-25T00:00:00.000Z')
|
const endDate = dFns.parseISO('2024-01-25T00:00:00.000Z')
|
||||||
|
|||||||
@ -1,38 +0,0 @@
|
|||||||
import * as dFns from 'date-fns';
|
|
||||||
import {CSS_PSEDUO_NAMESPACE} from "@/heatmap/index";
|
|
||||||
|
|
||||||
export function MonthLabels({
|
|
||||||
startDate,
|
|
||||||
endDate,
|
|
||||||
getMonthLabelCoordinates
|
|
||||||
}: {
|
|
||||||
startDate: Date;
|
|
||||||
endDate: Date;
|
|
||||||
getMonthLabelCoordinates: (month: Date) => {
|
|
||||||
x: number;
|
|
||||||
y: number
|
|
||||||
};
|
|
||||||
}) {
|
|
||||||
// We render a label for each month in the interval if its first week is in the interval
|
|
||||||
const firstWeeks = dFns.eachWeekOfInterval({
|
|
||||||
start: startDate,
|
|
||||||
end: endDate,
|
|
||||||
}).filter(date => date.getDate() <= 7);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{firstWeeks.map((month, i) => {
|
|
||||||
const {x, y} = getMonthLabelCoordinates(month);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<text
|
|
||||||
key={i}
|
|
||||||
x={x}
|
|
||||||
y={y}
|
|
||||||
className={`${CSS_PSEDUO_NAMESPACE}month-label`}
|
|
||||||
>{dFns.format(month, 'MMM')}</text>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
export const MILLISECONDS_IN_ONE_DAY = 24 * 60 * 60 * 1000;
|
|
||||||
|
|
||||||
export const DAYS_IN_WEEK = 7;
|
|
||||||
|
|
||||||
export const MONTH_LABELS = [
|
|
||||||
'Jan',
|
|
||||||
'Feb',
|
|
||||||
'Mar',
|
|
||||||
'Apr',
|
|
||||||
'May',
|
|
||||||
'Jun',
|
|
||||||
'Jul',
|
|
||||||
'Aug',
|
|
||||||
'Sep',
|
|
||||||
'Oct',
|
|
||||||
'Nov',
|
|
||||||
'Dec',
|
|
||||||
];
|
|
||||||
|
|
||||||
export const DAY_LABELS = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
import {
|
|
||||||
convertToDate,
|
|
||||||
dateNDaysAgo,
|
|
||||||
getBeginningTimeForDate,
|
|
||||||
getRange,
|
|
||||||
shiftDate,
|
|
||||||
} from './helpers';
|
|
||||||
|
|
||||||
import {describe, it, expect} from "@jest/globals";
|
|
||||||
|
|
||||||
describe('shiftDate', () => {
|
|
||||||
it('adds a day to the first day of a month', () => {
|
|
||||||
const startingDate = new Date(2017, 0, 1);
|
|
||||||
const expectedDate = new Date(2017, 0, 2);
|
|
||||||
|
|
||||||
expect(shiftDate(startingDate, 1).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('adds multiple days to the first day of a month', () => {
|
|
||||||
const startingDate = new Date(2017, 0, 1);
|
|
||||||
const expectedDate = new Date(2017, 0, 3);
|
|
||||||
|
|
||||||
expect(shiftDate(startingDate, 2).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('subtracts a day from the first day of a month', () => {
|
|
||||||
const startingDate = new Date(2017, 0, 1);
|
|
||||||
const expectedDate = new Date(2016, 11, 31);
|
|
||||||
|
|
||||||
expect(shiftDate(startingDate, -1).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('subtracts multiple days from the first day of a month', () => {
|
|
||||||
const startingDate = new Date(2017, 0, 1);
|
|
||||||
const expectedDate = new Date(2016, 11, 30);
|
|
||||||
|
|
||||||
expect(shiftDate(startingDate, -2).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('adds a day to a non-first day of a month', () => {
|
|
||||||
const startingDate = new Date(2017, 0, 2);
|
|
||||||
const expectedDate = new Date(2017, 0, 3);
|
|
||||||
|
|
||||||
expect(shiftDate(startingDate, 1).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('adds multiple days to a non-first day of a month', () => {
|
|
||||||
const startingDate = new Date(2017, 0, 2);
|
|
||||||
const expectedDate = new Date(2017, 0, 4);
|
|
||||||
|
|
||||||
expect(shiftDate(startingDate, 2).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('subtracts a day from a non-first day of a month', () => {
|
|
||||||
const startingDate = new Date(2017, 0, 2);
|
|
||||||
const expectedDate = new Date(2017, 0, 1);
|
|
||||||
|
|
||||||
expect(shiftDate(startingDate, -1).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('subtracts multiple days from a non-first day of a month', () => {
|
|
||||||
const startingDate = new Date(2017, 0, 2);
|
|
||||||
const expectedDate = new Date(2016, 11, 31);
|
|
||||||
|
|
||||||
expect(shiftDate(startingDate, -2).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('getBeginningTimeForDate', () => {
|
|
||||||
it('gets midnight (in the local timezone) on the date passed in', () => {
|
|
||||||
const inputDate = new Date(2017, 11, 25, 21, 30, 59, 750);
|
|
||||||
const expectedDate = new Date(2017, 11, 25, 0, 0, 0, 0);
|
|
||||||
|
|
||||||
expect(getBeginningTimeForDate(inputDate).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('convertToDate', () => {
|
|
||||||
it('interprets an "ISO-8601 date-only" string as UTC and converts it into a Date object representing the first millisecond on that date', () => {
|
|
||||||
const iso8601DateOnlyString = '2017-07-14';
|
|
||||||
const expectedDate = new Date(Date.UTC(2017, 6, 14, 0, 0, 0, 0));
|
|
||||||
|
|
||||||
expect(convertToDate(iso8601DateOnlyString).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('interprets a millisecond timestamp integer as UTC and converts it into a Date object representing that same millisecond', () => {
|
|
||||||
const msTimestamp = 1500000001234; // Friday, July 14, 2017 2:40:01.234 AM, according to https://epochconverter.com
|
|
||||||
const expectedDate = new Date(Date.UTC(2017, 6, 14, 2, 40, 1, 234));
|
|
||||||
|
|
||||||
expect(convertToDate(msTimestamp).getTime()).toBe(expectedDate.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('returns the same Date object it receives', () => {
|
|
||||||
const inputDate = new Date(2017, 11, 25, 21, 30, 59, 750);
|
|
||||||
const originalTimestamp = inputDate.getTime();
|
|
||||||
|
|
||||||
expect(convertToDate(inputDate)).toBe(inputDate);
|
|
||||||
expect(convertToDate(inputDate).getTime()).toBe(originalTimestamp);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('dateNDaysAgo', () => {
|
|
||||||
it('crosses month boundaries in the negative direction', () => {
|
|
||||||
const numDays = 32;
|
|
||||||
const startingDate = new Date();
|
|
||||||
const expectedDate = new Date(startingDate.getTime());
|
|
||||||
expectedDate.setDate(startingDate.getDate() - numDays);
|
|
||||||
|
|
||||||
const expectedYear = expectedDate.getFullYear();
|
|
||||||
const expectedMonth = expectedDate.getMonth();
|
|
||||||
const expectedDay = expectedDate.getDate();
|
|
||||||
|
|
||||||
expect(dateNDaysAgo(numDays).getFullYear()).toBe(expectedYear);
|
|
||||||
expect(dateNDaysAgo(numDays).getMonth()).toBe(expectedMonth);
|
|
||||||
expect(dateNDaysAgo(numDays).getDate()).toBe(expectedDay);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('crosses month boundaries in the positive direction', () => {
|
|
||||||
const numDays = -32;
|
|
||||||
const startingDate = new Date();
|
|
||||||
const expectedDate = new Date(startingDate.getTime());
|
|
||||||
expectedDate.setDate(startingDate.getDate() - numDays);
|
|
||||||
|
|
||||||
const expectedYear = expectedDate.getFullYear();
|
|
||||||
const expectedMonth = expectedDate.getMonth();
|
|
||||||
const expectedDay = expectedDate.getDate();
|
|
||||||
|
|
||||||
expect(dateNDaysAgo(numDays).getFullYear()).toBe(expectedYear);
|
|
||||||
expect(dateNDaysAgo(numDays).getMonth()).toBe(expectedMonth);
|
|
||||||
expect(dateNDaysAgo(numDays).getDate()).toBe(expectedDay);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('crosses year boundaries in the negative direction', () => {
|
|
||||||
const numDays = 366;
|
|
||||||
const startingDate = new Date();
|
|
||||||
const expectedDate = new Date(startingDate.getTime());
|
|
||||||
expectedDate.setDate(startingDate.getDate() - numDays);
|
|
||||||
|
|
||||||
const expectedYear = expectedDate.getFullYear();
|
|
||||||
const expectedMonth = expectedDate.getMonth();
|
|
||||||
const expectedDay = expectedDate.getDate();
|
|
||||||
|
|
||||||
expect(dateNDaysAgo(numDays).getFullYear()).toBe(expectedYear);
|
|
||||||
expect(dateNDaysAgo(numDays).getMonth()).toBe(expectedMonth);
|
|
||||||
expect(dateNDaysAgo(numDays).getDate()).toBe(expectedDay);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('crosses year boundaries in the positive direction', () => {
|
|
||||||
const numDays = -366;
|
|
||||||
const startingDate = new Date();
|
|
||||||
const expectedDate = new Date(startingDate.getTime());
|
|
||||||
expectedDate.setDate(startingDate.getDate() - numDays);
|
|
||||||
|
|
||||||
const expectedYear = expectedDate.getFullYear();
|
|
||||||
const expectedMonth = expectedDate.getMonth();
|
|
||||||
const expectedDay = expectedDate.getDate();
|
|
||||||
|
|
||||||
expect(dateNDaysAgo(numDays).getFullYear()).toBe(expectedYear);
|
|
||||||
expect(dateNDaysAgo(numDays).getMonth()).toBe(expectedMonth);
|
|
||||||
expect(dateNDaysAgo(numDays).getDate()).toBe(expectedDay);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('getRange', () => {
|
|
||||||
it('generates an empty array', () => {
|
|
||||||
expect(getRange(0)).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('generates an array containing one integer', () => {
|
|
||||||
expect(getRange(1)).toEqual([0]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('generates an array containing multiple integers', () => {
|
|
||||||
expect(getRange(5)).toEqual([0, 1, 2, 3, 4]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import * as dFns from 'date-fns';
|
|
||||||
|
|
||||||
// returns a new date shifted a certain number of days (can be negative)
|
|
||||||
export function shiftDate(date: Date, numDays: number): Date {
|
|
||||||
return dFns.addDays(date, numDays);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getBeginningTimeForDate(date: Date): Date {
|
|
||||||
return dFns.startOfDay(date);
|
|
||||||
}
|
|
||||||
|
|
||||||
// obj can be a parseable string, a millisecond timestamp, or a Date object
|
|
||||||
export function convertToDate(obj: Date | string | number): Date {
|
|
||||||
return obj instanceof Date ? obj : new Date(obj);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function dateNDaysAgo(numDaysAgo: number): Date {
|
|
||||||
return shiftDate(new Date(), -numDaysAgo);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getRange(count: number): number[] {
|
|
||||||
const arr = [];
|
|
||||||
for (let idx = 0; idx < count; idx += 1) {
|
|
||||||
arr.push(idx);
|
|
||||||
}
|
|
||||||
return arr;
|
|
||||||
}
|
|
||||||
@ -1,286 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import Enzyme, { shallow } from 'enzyme';
|
|
||||||
import Adapter from 'enzyme-adapter-react-16';
|
|
||||||
|
|
||||||
import CalendarHeatmap from './index';
|
|
||||||
import { dateNDaysAgo, shiftDate } from './helpers';
|
|
||||||
|
|
||||||
Enzyme.configure({ adapter: new Adapter() });
|
|
||||||
|
|
||||||
const getWrapper = (overrideProps, renderMethod = 'shallow') => {
|
|
||||||
const defaultProps = {
|
|
||||||
values: [],
|
|
||||||
};
|
|
||||||
return Enzyme[renderMethod](<CalendarHeatmap {...defaultProps} {...overrideProps} />);
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('CalendarHeatmap', () => {
|
|
||||||
const values = [
|
|
||||||
{ date: new Date('2017-06-01') },
|
|
||||||
{ date: new Date('2017-06-02') },
|
|
||||||
{ date: new Date('2018-06-01') },
|
|
||||||
{ date: new Date('2018-06-02') },
|
|
||||||
{ date: new Date('2018-06-03') },
|
|
||||||
];
|
|
||||||
|
|
||||||
it('should render as an svg', () => {
|
|
||||||
const wrapper = shallow(<CalendarHeatmap values={[]} />);
|
|
||||||
|
|
||||||
expect(wrapper.find('svg')).toHaveLength(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should not throw exceptions in base case', () => {
|
|
||||||
expect(() => <CalendarHeatmap values={[]} />).not.toThrow();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows values within its original date range', () => {
|
|
||||||
const wrapper = shallow(
|
|
||||||
<CalendarHeatmap
|
|
||||||
endDate={new Date('2017-12-31')}
|
|
||||||
startDate={new Date('2017-01-01')}
|
|
||||||
values={values}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.find('.color-filled').length).toBe(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should handle string formatted date range', () => {
|
|
||||||
const wrapper = shallow(
|
|
||||||
<CalendarHeatmap endDate="2017-12-31" startDate="2017-01-01" values={values} />,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.find('.color-filled').length).toBe(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows values within an updated date range', () => {
|
|
||||||
const wrapper = shallow(
|
|
||||||
<CalendarHeatmap
|
|
||||||
endDate={new Date('2017-12-31')}
|
|
||||||
startDate={new Date('2017-01-01')}
|
|
||||||
values={values}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
wrapper.setProps({
|
|
||||||
endDate: new Date('2018-12-31'),
|
|
||||||
startDate: new Date('2018-01-01'),
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.find('.color-filled').length).toBe(3);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('CalendarHeatmap props', () => {
|
|
||||||
it('values', () => {
|
|
||||||
const values = [
|
|
||||||
{ date: '2016-01-01' },
|
|
||||||
{ date: new Date('2016-01-02').getTime() },
|
|
||||||
{ date: new Date('2016-01-03') },
|
|
||||||
];
|
|
||||||
const wrapper = shallow(
|
|
||||||
<CalendarHeatmap
|
|
||||||
endDate={new Date('2016-02-01')}
|
|
||||||
startDate={new Date('2015-12-20')}
|
|
||||||
values={values}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
// 'values should handle Date/string/number formats'
|
|
||||||
expect(wrapper.find('.color-filled')).toHaveLength(values.length);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('horizontal', () => {
|
|
||||||
const horizontal = shallow(
|
|
||||||
<CalendarHeatmap startDate={dateNDaysAgo(100)} values={[]} horizontal />,
|
|
||||||
);
|
|
||||||
const [, , horWidth, horHeight] = horizontal.prop('viewBox').split(' ');
|
|
||||||
// 'horizontal orientation width should be greater than height'
|
|
||||||
expect(Number(horWidth)).toBeGreaterThan(Number(horHeight));
|
|
||||||
|
|
||||||
const vertical = shallow(
|
|
||||||
<CalendarHeatmap startDate={dateNDaysAgo(100)} values={[]} horizontal={false} />,
|
|
||||||
);
|
|
||||||
const [, , vertWidth, vertHeight] = vertical.prop('viewBox').split(' ');
|
|
||||||
// 'vertical orientation width should be less than height'
|
|
||||||
expect(Number(vertWidth)).toBeLessThan(Number(vertHeight));
|
|
||||||
});
|
|
||||||
|
|
||||||
it('startDate', () => {
|
|
||||||
const today = new Date();
|
|
||||||
const wrapper = shallow(<CalendarHeatmap values={[]} endDate={today} startDate={today} />);
|
|
||||||
|
|
||||||
expect(
|
|
||||||
today.getDate() ===
|
|
||||||
wrapper
|
|
||||||
.instance()
|
|
||||||
.getEndDate()
|
|
||||||
.getDate() &&
|
|
||||||
today.getMonth() ===
|
|
||||||
wrapper
|
|
||||||
.instance()
|
|
||||||
.getEndDate()
|
|
||||||
.getMonth(),
|
|
||||||
).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('endDate', () => {
|
|
||||||
const today = new Date();
|
|
||||||
const wrapper = shallow(
|
|
||||||
<CalendarHeatmap values={[]} endDate={today} startDate={dateNDaysAgo(10)} />,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(
|
|
||||||
today.getDate() ===
|
|
||||||
wrapper
|
|
||||||
.instance()
|
|
||||||
.getEndDate()
|
|
||||||
.getDate() &&
|
|
||||||
today.getMonth() ===
|
|
||||||
wrapper
|
|
||||||
.instance()
|
|
||||||
.getEndDate()
|
|
||||||
.getMonth(),
|
|
||||||
).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('classForValue', () => {
|
|
||||||
const today = new Date();
|
|
||||||
const numDays = 10;
|
|
||||||
const expectedStartDate = shiftDate(today, -numDays + 1);
|
|
||||||
const wrapper = shallow(
|
|
||||||
<CalendarHeatmap
|
|
||||||
values={[{ date: expectedStartDate, count: 0 }, { date: today, count: 1 }]}
|
|
||||||
endDate={today}
|
|
||||||
startDate={dateNDaysAgo(numDays)}
|
|
||||||
titleForValue={(value) => (value ? value.count : null)}
|
|
||||||
classForValue={(value) => {
|
|
||||||
if (!value) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return value.count > 0 ? 'red' : 'white';
|
|
||||||
}}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.find('.white')).toHaveLength(1);
|
|
||||||
expect(wrapper.find('.red')).toHaveLength(1);
|
|
||||||
|
|
||||||
// TODO these attr selectors might be broken with react 15
|
|
||||||
// assert(wrapper.first('rect[title=0]').hasClass('white'));
|
|
||||||
// assert(wrapper.first('rect[title=1]').hasClass('red'));
|
|
||||||
});
|
|
||||||
|
|
||||||
it('showMonthLabels', () => {
|
|
||||||
const visible = shallow(
|
|
||||||
<CalendarHeatmap startDate={dateNDaysAgo(100)} values={[]} showMonthLabels />,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(visible.find('text').length).toBeGreaterThan(0);
|
|
||||||
|
|
||||||
const hidden = shallow(<CalendarHeatmap values={[]} showMonthLabels={false} />);
|
|
||||||
|
|
||||||
expect(hidden.find('text')).toHaveLength(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('showWeekdayLabels', () => {
|
|
||||||
const visible = shallow(
|
|
||||||
<CalendarHeatmap startDate={dateNDaysAgo(7)} values={[]} showWeekdayLabels />,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(visible.find('text').length).toBeGreaterThan(2);
|
|
||||||
|
|
||||||
const hidden = shallow(
|
|
||||||
<CalendarHeatmap values={[]} showMonthLabels={false} showWeekdayLabels={false} />,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(hidden.find('text')).toHaveLength(0);
|
|
||||||
|
|
||||||
// should display text with .small-text class
|
|
||||||
// in case if horizontal prop value is false
|
|
||||||
const vertical = shallow(<CalendarHeatmap values={[]} horizontal={false} showWeekdayLabels />);
|
|
||||||
|
|
||||||
expect(vertical.find('text.react-calendar-heatmap-small-text')).toHaveLength(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('transformDayElement', () => {
|
|
||||||
const transform = (rect) => React.cloneElement(rect, { 'data-test': 'ok' });
|
|
||||||
const today = new Date();
|
|
||||||
const expectedStartDate = shiftDate(today, -1);
|
|
||||||
const wrapper = shallow(
|
|
||||||
<CalendarHeatmap
|
|
||||||
values={[{ date: today }, { date: expectedStartDate }]}
|
|
||||||
endDate={today}
|
|
||||||
startDate={expectedStartDate}
|
|
||||||
transformDayElement={transform}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.find('[data-test="ok"]')).toHaveLength(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('tooltipDataAttrs', () => {
|
|
||||||
it('allows a function to be passed', () => {
|
|
||||||
const today = new Date();
|
|
||||||
const numDays = 10;
|
|
||||||
const expectedStartDate = shiftDate(today, -numDays + 1);
|
|
||||||
const wrapper = shallow(
|
|
||||||
<CalendarHeatmap
|
|
||||||
values={[{ date: today, count: 1 }, { date: expectedStartDate, count: 0 }]}
|
|
||||||
endDate={today}
|
|
||||||
startDate={expectedStartDate}
|
|
||||||
tooltipDataAttrs={({ count }) => ({
|
|
||||||
'data-tooltip': `Count: ${count}`,
|
|
||||||
})}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.find('[data-tooltip="Count: 1"]')).toHaveLength(1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('event handlers', () => {
|
|
||||||
const count = 999;
|
|
||||||
const startDate = '2018-06-01';
|
|
||||||
const endDate = '2018-06-03';
|
|
||||||
const values = [{ date: '2018-06-02', count }];
|
|
||||||
const props = {
|
|
||||||
values,
|
|
||||||
startDate,
|
|
||||||
endDate,
|
|
||||||
};
|
|
||||||
const expectedValue = values[0];
|
|
||||||
|
|
||||||
it('calls props.onClick with the correct value', () => {
|
|
||||||
const onClick = jest.fn();
|
|
||||||
const wrapper = getWrapper({ ...props, onClick });
|
|
||||||
|
|
||||||
const rect = wrapper.find('rect').at(0);
|
|
||||||
rect.simulate('click');
|
|
||||||
|
|
||||||
expect(onClick).toHaveBeenCalledWith(expectedValue);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('calls props.onMouseOver with the correct value', () => {
|
|
||||||
const onMouseOver = jest.fn();
|
|
||||||
const wrapper = getWrapper({ ...props, onMouseOver });
|
|
||||||
const fakeEvent = { preventDefault: jest.fn() };
|
|
||||||
|
|
||||||
const rect = wrapper.find('rect').at(0);
|
|
||||||
rect.simulate('mouseOver', fakeEvent);
|
|
||||||
|
|
||||||
expect(onMouseOver).toHaveBeenCalledWith(fakeEvent, expectedValue);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('calls props.onMouseLeave with the correct value', () => {
|
|
||||||
const onMouseLeave = jest.fn();
|
|
||||||
const wrapper = getWrapper({ ...props, onMouseLeave });
|
|
||||||
const fakeEvent = { preventDefault: jest.fn() };
|
|
||||||
|
|
||||||
const rect = wrapper.find('rect').at(0);
|
|
||||||
rect.simulate('mouseLeave', fakeEvent);
|
|
||||||
|
|
||||||
expect(onMouseLeave).toHaveBeenCalledWith(fakeEvent, expectedValue);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,386 +0,0 @@
|
|||||||
// @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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
const monthPositionAdapter = (date) => {
|
|
||||||
const [x, y] = this.getMonthLabelCoordinates(dFns.differenceInWeeks(date, this.props.startDate));
|
|
||||||
return {
|
|
||||||
x,
|
|
||||||
y
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const weeks = dFns.eachWeekOfInterval({
|
|
||||||
start: this.props.startDate,
|
|
||||||
end: this.props.endDate,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<svg className="react-calendar-heatmap" viewBox={this.getViewBox()}>
|
|
||||||
<g
|
|
||||||
transform={this.getTransformForMonthLabels()}
|
|
||||||
className={`${CSS_PSEDUO_NAMESPACE}month-labels`}
|
|
||||||
>
|
|
||||||
{this.props.showMonthLabels && <MonthLabels
|
|
||||||
startDate={this.props.startDate}
|
|
||||||
endDate={this.props.endDate}
|
|
||||||
getMonthLabelCoordinates={monthPositionAdapter}
|
|
||||||
/>}
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
transform={this.getTransformForAllWeeks()}
|
|
||||||
className={`${CSS_PSEDUO_NAMESPACE}all-weeks`}
|
|
||||||
>
|
|
||||||
{weeks.map((_, index) => this.renderWeek(index))}
|
|
||||||
</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;
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
/*
|
|
||||||
* react-calendar-heatmap styles
|
|
||||||
*
|
|
||||||
* All of the styles in this file are optional and configurable!
|
|
||||||
* The github and gitlab color scales are provided for reference.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.react-calendar-heatmap text {
|
|
||||||
font-size: 10px;
|
|
||||||
fill: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-calendar-heatmap .react-calendar-heatmap-small-text {
|
|
||||||
font-size: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-calendar-heatmap rect:hover {
|
|
||||||
stroke: #555;
|
|
||||||
stroke-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Default color scale
|
|
||||||
*/
|
|
||||||
|
|
||||||
.react-calendar-heatmap .color-empty {
|
|
||||||
fill: #eeeeee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-calendar-heatmap .color-filled {
|
|
||||||
fill: #8cc665;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Github color scale
|
|
||||||
*/
|
|
||||||
|
|
||||||
.react-calendar-heatmap .color-github-0 {
|
|
||||||
fill: #eeeeee;
|
|
||||||
}
|
|
||||||
.react-calendar-heatmap .color-github-1 {
|
|
||||||
fill: #d6e685;
|
|
||||||
}
|
|
||||||
.react-calendar-heatmap .color-github-2 {
|
|
||||||
fill: #8cc665;
|
|
||||||
}
|
|
||||||
.react-calendar-heatmap .color-github-3 {
|
|
||||||
fill: #44a340;
|
|
||||||
}
|
|
||||||
.react-calendar-heatmap .color-github-4 {
|
|
||||||
fill: #1e6823;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Gitlab color scale
|
|
||||||
*/
|
|
||||||
|
|
||||||
.react-calendar-heatmap .color-gitlab-0 {
|
|
||||||
fill: #ededed;
|
|
||||||
}
|
|
||||||
.react-calendar-heatmap .color-gitlab-1 {
|
|
||||||
fill: #acd5f2;
|
|
||||||
}
|
|
||||||
.react-calendar-heatmap .color-gitlab-2 {
|
|
||||||
fill: #7fa8d1;
|
|
||||||
}
|
|
||||||
.react-calendar-heatmap .color-gitlab-3 {
|
|
||||||
fill: #49729b;
|
|
||||||
}
|
|
||||||
.react-calendar-heatmap .color-gitlab-4 {
|
|
||||||
fill: #254e77;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user