@pearpages/heatmap 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +352 -1
- package/dist/index.css +143 -134
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +28 -4
- package/dist/index.js +233 -276
- package/dist/index.js.map +1 -1
- package/package.json +36 -6
package/dist/index.js
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { useState } from 'react';
|
|
3
2
|
|
|
4
3
|
// src/shared/models.tsx
|
|
4
|
+
var defaultLabels = {
|
|
5
|
+
less: "Less",
|
|
6
|
+
more: "More",
|
|
7
|
+
level: (level) => `Level ${level}`,
|
|
8
|
+
noContributions: "No contributions",
|
|
9
|
+
contributions: (count) => `${count} contribution${count !== 1 ? "s" : ""}`
|
|
10
|
+
};
|
|
11
|
+
var DEFAULT_LOCALE = "en-US";
|
|
5
12
|
var monthNames = [
|
|
6
13
|
"Jan",
|
|
7
14
|
"Feb",
|
|
@@ -17,53 +24,78 @@ var monthNames = [
|
|
|
17
24
|
"Dec"
|
|
18
25
|
];
|
|
19
26
|
var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
27
|
+
function shiftMonthsClamped(date, months) {
|
|
28
|
+
const year = date.getFullYear();
|
|
29
|
+
const month = date.getMonth() + months;
|
|
30
|
+
const daysInTarget = new Date(year, month + 1, 0).getDate();
|
|
31
|
+
return new Date(year, month, Math.min(date.getDate(), daysInTarget));
|
|
32
|
+
}
|
|
33
|
+
var startOfToday = () => {
|
|
34
|
+
const now = /* @__PURE__ */ new Date();
|
|
35
|
+
return new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
|
36
|
+
};
|
|
20
37
|
function getLastYearPeriod() {
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
(/* @__PURE__ */ new Date()).getMonth(),
|
|
25
|
-
(/* @__PURE__ */ new Date()).getDate() + 1
|
|
26
|
-
)
|
|
27
|
-
);
|
|
28
|
-
const end = /* @__PURE__ */ new Date();
|
|
38
|
+
const end = startOfToday();
|
|
39
|
+
const start = shiftMonthsClamped(end, -12);
|
|
40
|
+
start.setDate(start.getDate() + 1);
|
|
29
41
|
return { start, end };
|
|
30
42
|
}
|
|
31
43
|
function getLastMonthPeriod() {
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
|
|
44
|
+
const end = startOfToday();
|
|
45
|
+
const start = shiftMonthsClamped(end, -1);
|
|
46
|
+
start.setDate(start.getDate() + 1);
|
|
35
47
|
return { start, end };
|
|
36
48
|
}
|
|
37
|
-
var
|
|
49
|
+
var pad = (n) => String(n).padStart(2, "0");
|
|
50
|
+
var createDateString = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
|
|
51
|
+
var parseDateString = (dateString) => {
|
|
52
|
+
const [year, month, day] = dateString.split("-").map(Number);
|
|
53
|
+
return new Date(year, month - 1, day);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
// src/shared/formatTooltip.tsx
|
|
57
|
+
function isInRange(date, { start, end }) {
|
|
58
|
+
return date >= createDateString(start) && date <= createDateString(end);
|
|
59
|
+
}
|
|
60
|
+
var formatTooltip = (contribution, { start, end }, { locale = DEFAULT_LOCALE, labels } = {}) => {
|
|
61
|
+
const text = { ...defaultLabels, ...labels };
|
|
62
|
+
const formattedDate = parseDateString(contribution.date).toLocaleDateString(locale, {
|
|
63
|
+
weekday: "short",
|
|
64
|
+
year: "numeric",
|
|
65
|
+
month: "short",
|
|
66
|
+
day: "numeric"
|
|
67
|
+
});
|
|
68
|
+
if (!isInRange(contribution.date, { start, end }) || contribution.count === 0) {
|
|
69
|
+
return `${formattedDate}: ${text.noContributions}`;
|
|
70
|
+
}
|
|
71
|
+
return `${formattedDate}: ${text.contributions(contribution.count)}`;
|
|
72
|
+
};
|
|
38
73
|
|
|
39
74
|
// src/ContributionHeatmap/getMonthsForHeader.ts
|
|
40
75
|
function getMonthsForHeader({
|
|
41
76
|
weeks,
|
|
42
|
-
period
|
|
77
|
+
period,
|
|
78
|
+
monthNames: monthNames2 = monthNames
|
|
43
79
|
}) {
|
|
44
80
|
const months = [];
|
|
45
|
-
const { start, end } = period;
|
|
46
81
|
let currentMonth = -1;
|
|
47
82
|
let currentSpan = 0;
|
|
48
83
|
weeks.forEach((week, weekIndex) => {
|
|
49
84
|
if (week.length > 0) {
|
|
50
85
|
let monthToUse = -1;
|
|
51
|
-
const actualStartDate = new Date(start);
|
|
52
|
-
const actualEndDate = new Date(end);
|
|
53
86
|
for (const day of week) {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
monthToUse = dayDate.getMonth();
|
|
87
|
+
if (isInRange(day.date, period)) {
|
|
88
|
+
monthToUse = parseDateString(day.date).getMonth();
|
|
57
89
|
break;
|
|
58
90
|
}
|
|
59
91
|
}
|
|
60
92
|
if (monthToUse === -1) {
|
|
61
93
|
const middleDay = week[3];
|
|
62
|
-
monthToUse =
|
|
94
|
+
monthToUse = parseDateString(middleDay.date).getMonth();
|
|
63
95
|
}
|
|
64
96
|
if (monthToUse !== currentMonth) {
|
|
65
97
|
if (currentMonth !== -1) {
|
|
66
|
-
months.push({ name:
|
|
98
|
+
months.push({ name: monthNames2[currentMonth], span: currentSpan, start: weekIndex - currentSpan });
|
|
67
99
|
}
|
|
68
100
|
currentMonth = monthToUse;
|
|
69
101
|
currentSpan = 1;
|
|
@@ -73,130 +105,207 @@ function getMonthsForHeader({
|
|
|
73
105
|
}
|
|
74
106
|
});
|
|
75
107
|
if (currentMonth !== -1) {
|
|
76
|
-
months.push({ name:
|
|
77
|
-
}
|
|
78
|
-
if (months.length > 0 && months[months.length - 1].span === 1) {
|
|
79
|
-
months[months.length - 1].span = 2;
|
|
108
|
+
months.push({ name: monthNames2[currentMonth], span: currentSpan, start: weeks.length - currentSpan });
|
|
80
109
|
}
|
|
81
110
|
return months;
|
|
82
111
|
}
|
|
83
112
|
|
|
84
|
-
// src/shared/
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
const
|
|
89
|
-
return contributionDate > actualStartDate && contributionDate < actualEndDate;
|
|
90
|
-
}
|
|
91
|
-
var formatTooltip = (contribution, { start, end }) => {
|
|
92
|
-
const date = new Date(contribution.date);
|
|
93
|
-
const formattedDate = date.toLocaleDateString("en-US", {
|
|
113
|
+
// src/shared/intl.ts
|
|
114
|
+
var REFERENCE_WEEK_START = Date.UTC(2024, 0, 7);
|
|
115
|
+
var DAYS_IN_WEEK = 7;
|
|
116
|
+
function getDayNames(locale, weekStartsOn = 0) {
|
|
117
|
+
const format = new Intl.DateTimeFormat(locale, {
|
|
94
118
|
weekday: "short",
|
|
95
|
-
|
|
119
|
+
timeZone: "UTC"
|
|
120
|
+
});
|
|
121
|
+
return Array.from({ length: DAYS_IN_WEEK }, (_, index) => {
|
|
122
|
+
const dayOfWeek = (weekStartsOn + index) % DAYS_IN_WEEK;
|
|
123
|
+
return format.format(new Date(REFERENCE_WEEK_START + dayOfWeek * 864e5));
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
function getMonthNames(locale) {
|
|
127
|
+
const format = new Intl.DateTimeFormat(locale, {
|
|
96
128
|
month: "short",
|
|
97
|
-
|
|
129
|
+
timeZone: "UTC"
|
|
98
130
|
});
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
function Legend() {
|
|
131
|
+
return Array.from(
|
|
132
|
+
{ length: 12 },
|
|
133
|
+
(_, month) => format.format(new Date(Date.UTC(2024, month, 15)))
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
function Legend({ labels }) {
|
|
137
|
+
const text = { ...defaultLabels, ...labels };
|
|
105
138
|
return /* @__PURE__ */ jsxs("div", { className: "contribution-heatmap__legend", children: [
|
|
106
|
-
/* @__PURE__ */ jsx("span", { className: "contribution-heatmap__legend-text", children:
|
|
139
|
+
/* @__PURE__ */ jsx("span", { className: "contribution-heatmap__legend-text", children: text.less }),
|
|
107
140
|
[0, 1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx(
|
|
108
141
|
"div",
|
|
109
142
|
{
|
|
110
143
|
className: `contribution-heatmap__legend-item contribution-heatmap__legend-item--level-${level}`,
|
|
111
|
-
title:
|
|
144
|
+
title: text.level(level)
|
|
112
145
|
},
|
|
113
146
|
level
|
|
114
147
|
)),
|
|
115
|
-
/* @__PURE__ */ jsx("span", { className: "contribution-heatmap__legend-text", children:
|
|
148
|
+
/* @__PURE__ */ jsx("span", { className: "contribution-heatmap__legend-text", children: text.more })
|
|
116
149
|
] });
|
|
117
150
|
}
|
|
151
|
+
function DayCell({ contribution, period, locale, labels, delayIndex }) {
|
|
152
|
+
const inRange = isInRange(contribution.date, period);
|
|
153
|
+
const tooltip = formatTooltip(contribution, period, { locale, labels });
|
|
154
|
+
return /* @__PURE__ */ jsx(
|
|
155
|
+
"td",
|
|
156
|
+
{
|
|
157
|
+
className: [
|
|
158
|
+
"contribution-heatmap__day",
|
|
159
|
+
`contribution-heatmap__day--level-${contribution.level}`,
|
|
160
|
+
inRange ? "" : "contribution-heatmap__day--outside"
|
|
161
|
+
].filter(Boolean).join(" "),
|
|
162
|
+
title: inRange ? tooltip : void 0,
|
|
163
|
+
"aria-label": inRange ? tooltip : void 0,
|
|
164
|
+
role: inRange ? "button" : void 0,
|
|
165
|
+
tabIndex: inRange ? 0 : void 0,
|
|
166
|
+
"data-count": contribution.count,
|
|
167
|
+
"data-date": contribution.date,
|
|
168
|
+
style: { "--animation-delay": `${delayIndex * 5e-3}s` }
|
|
169
|
+
}
|
|
170
|
+
);
|
|
171
|
+
}
|
|
118
172
|
function ContributionHeatmap({
|
|
119
173
|
data: { period, weeks },
|
|
120
174
|
className = "",
|
|
121
|
-
isReverse = false
|
|
175
|
+
isReverse = false,
|
|
176
|
+
locale = DEFAULT_LOCALE,
|
|
177
|
+
labels
|
|
122
178
|
}) {
|
|
123
|
-
const
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
/* @__PURE__ */ jsx(Legend, {})
|
|
197
|
-
] });
|
|
179
|
+
const weekStartsOn = weeks.length ? parseDateString(weeks[0][0].date).getDay() : 0;
|
|
180
|
+
const dayNames2 = getDayNames(locale, weekStartsOn);
|
|
181
|
+
const months = getMonthsForHeader({ weeks, period, monthNames: getMonthNames(locale) });
|
|
182
|
+
return /* @__PURE__ */ jsxs(
|
|
183
|
+
"div",
|
|
184
|
+
{
|
|
185
|
+
className: `contribution-heatmap${isReverse ? " contribution-heatmap--reverse" : ""} ${className}`,
|
|
186
|
+
children: [
|
|
187
|
+
/* @__PURE__ */ jsx("div", { className: "contribution-heatmap__scroll", children: /* @__PURE__ */ jsx("table", { className: "contribution-heatmap__table", children: isReverse ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
188
|
+
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
|
|
189
|
+
/* @__PURE__ */ jsx("th", { className: "contribution-heatmap__month-header" }),
|
|
190
|
+
dayNames2.map((dayName, dayIndex) => /* @__PURE__ */ jsx("th", { className: "contribution-heatmap__day-header", children: dayName }, dayIndex))
|
|
191
|
+
] }) }),
|
|
192
|
+
/* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => {
|
|
193
|
+
const month = months.find((m) => weekIndex === m.start);
|
|
194
|
+
const showMonthLabel = !!month;
|
|
195
|
+
return /* @__PURE__ */ jsxs("tr", { children: [
|
|
196
|
+
showMonthLabel && /* @__PURE__ */ jsx(
|
|
197
|
+
"td",
|
|
198
|
+
{
|
|
199
|
+
className: "contribution-heatmap__month-label",
|
|
200
|
+
rowSpan: month.span,
|
|
201
|
+
children: month.name
|
|
202
|
+
}
|
|
203
|
+
),
|
|
204
|
+
week.map((contribution, dayIndex) => /* @__PURE__ */ jsx(
|
|
205
|
+
DayCell,
|
|
206
|
+
{
|
|
207
|
+
contribution,
|
|
208
|
+
period,
|
|
209
|
+
locale,
|
|
210
|
+
labels,
|
|
211
|
+
delayIndex: weekIndex * 7 + dayIndex
|
|
212
|
+
},
|
|
213
|
+
dayIndex
|
|
214
|
+
))
|
|
215
|
+
] }, weekIndex);
|
|
216
|
+
}) })
|
|
217
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
218
|
+
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
|
|
219
|
+
/* @__PURE__ */ jsx("th", { className: "contribution-heatmap__day-header" }),
|
|
220
|
+
months.map((month, index) => /* @__PURE__ */ jsx(
|
|
221
|
+
"th",
|
|
222
|
+
{
|
|
223
|
+
className: `contribution-heatmap__month-header${index === months.length - 1 ? " contribution-heatmap__month-header--last" : ""}`,
|
|
224
|
+
colSpan: month.span,
|
|
225
|
+
children: /* @__PURE__ */ jsx("span", { className: "contribution-heatmap__month-header-text", children: month.name })
|
|
226
|
+
},
|
|
227
|
+
index
|
|
228
|
+
))
|
|
229
|
+
] }) }),
|
|
230
|
+
/* @__PURE__ */ jsx("tbody", { children: dayNames2.map((dayName, dayIndex) => /* @__PURE__ */ jsxs("tr", { children: [
|
|
231
|
+
/* @__PURE__ */ jsx("td", { className: "contribution-heatmap__day-label", children: dayName }),
|
|
232
|
+
weeks.map((week, weekIndex) => {
|
|
233
|
+
const contribution = week[dayIndex];
|
|
234
|
+
return /* @__PURE__ */ jsx(
|
|
235
|
+
DayCell,
|
|
236
|
+
{
|
|
237
|
+
contribution,
|
|
238
|
+
period,
|
|
239
|
+
locale,
|
|
240
|
+
labels,
|
|
241
|
+
delayIndex: weekIndex * 7 + dayIndex
|
|
242
|
+
},
|
|
243
|
+
weekIndex
|
|
244
|
+
);
|
|
245
|
+
})
|
|
246
|
+
] }, dayIndex)) })
|
|
247
|
+
] }) }) }),
|
|
248
|
+
/* @__PURE__ */ jsx(Legend, { labels })
|
|
249
|
+
]
|
|
250
|
+
}
|
|
251
|
+
);
|
|
198
252
|
}
|
|
199
253
|
|
|
254
|
+
// src/shared/groupByWeeks.ts
|
|
255
|
+
var createEmpyContribution = (date) => ({
|
|
256
|
+
date,
|
|
257
|
+
count: 0,
|
|
258
|
+
level: 0
|
|
259
|
+
});
|
|
260
|
+
var createContributionMap = (contributions) => {
|
|
261
|
+
const contributionMap = /* @__PURE__ */ new Map();
|
|
262
|
+
contributions.forEach((contribution) => {
|
|
263
|
+
contributionMap.set(contribution.date, contribution);
|
|
264
|
+
});
|
|
265
|
+
return contributionMap;
|
|
266
|
+
};
|
|
267
|
+
var daysIntoWeek = (date, weekStartsOn) => (date.getDay() - weekStartsOn + 7) % 7;
|
|
268
|
+
var getFirstDayOfWeek = (firstDate, weekStartsOn) => {
|
|
269
|
+
const startOfWeek = new Date(firstDate);
|
|
270
|
+
startOfWeek.setDate(firstDate.getDate() - daysIntoWeek(firstDate, weekStartsOn));
|
|
271
|
+
return startOfWeek;
|
|
272
|
+
};
|
|
273
|
+
var getLastDayOfWeek = (lastDate, weekStartsOn) => {
|
|
274
|
+
const endOfWeek = new Date(lastDate);
|
|
275
|
+
endOfWeek.setDate(lastDate.getDate() + (6 - daysIntoWeek(lastDate, weekStartsOn)));
|
|
276
|
+
return endOfWeek;
|
|
277
|
+
};
|
|
278
|
+
var createWeek = (startDate, contributionMap) => {
|
|
279
|
+
const week = [];
|
|
280
|
+
const currentDate = new Date(startDate);
|
|
281
|
+
for (let day = 0; day < 7; day++) {
|
|
282
|
+
const dateString = createDateString(currentDate);
|
|
283
|
+
const contribution = contributionMap.get(dateString);
|
|
284
|
+
if (contribution) {
|
|
285
|
+
week.push(contribution);
|
|
286
|
+
} else {
|
|
287
|
+
week.push(createEmpyContribution(dateString));
|
|
288
|
+
}
|
|
289
|
+
currentDate.setDate(currentDate.getDate() + 1);
|
|
290
|
+
}
|
|
291
|
+
return week;
|
|
292
|
+
};
|
|
293
|
+
var groupByWeeks = (contributions, { weekStartsOn = 0 } = {}) => {
|
|
294
|
+
const weeks = [];
|
|
295
|
+
const contributionMap = createContributionMap(contributions);
|
|
296
|
+
const firstDay = getFirstDayOfWeek(parseDateString(contributions[0].date), weekStartsOn);
|
|
297
|
+
const lastDate = getLastDayOfWeek(
|
|
298
|
+
parseDateString(contributions[contributions.length - 1].date),
|
|
299
|
+
weekStartsOn
|
|
300
|
+
);
|
|
301
|
+
const currentDate = new Date(firstDay);
|
|
302
|
+
while (currentDate <= lastDate) {
|
|
303
|
+
weeks.push(createWeek(currentDate, contributionMap));
|
|
304
|
+
currentDate.setDate(currentDate.getDate() + 7);
|
|
305
|
+
}
|
|
306
|
+
return weeks;
|
|
307
|
+
};
|
|
308
|
+
|
|
200
309
|
// src/mocks/createRealisticMockedCount.ts
|
|
201
310
|
var isSummerMonth = (month) => {
|
|
202
311
|
return month >= 5 && month <= 7;
|
|
@@ -257,158 +366,6 @@ function generateMockData({
|
|
|
257
366
|
return data;
|
|
258
367
|
}
|
|
259
368
|
|
|
260
|
-
|
|
261
|
-
var createEmpyContribution = (date) => ({
|
|
262
|
-
date,
|
|
263
|
-
count: 0,
|
|
264
|
-
level: 0
|
|
265
|
-
});
|
|
266
|
-
var createContributionMap = (contributions) => {
|
|
267
|
-
const contributionMap = /* @__PURE__ */ new Map();
|
|
268
|
-
contributions.forEach((contribution) => {
|
|
269
|
-
contributionMap.set(contribution.date, contribution);
|
|
270
|
-
});
|
|
271
|
-
return contributionMap;
|
|
272
|
-
};
|
|
273
|
-
var getFirstSunday = (firstDate) => {
|
|
274
|
-
const startOfWeek = new Date(firstDate);
|
|
275
|
-
startOfWeek.setDate(firstDate.getDate() - firstDate.getDay());
|
|
276
|
-
return startOfWeek;
|
|
277
|
-
};
|
|
278
|
-
var getLastSaturday = (lastDate) => {
|
|
279
|
-
const endOfWeek = new Date(lastDate);
|
|
280
|
-
endOfWeek.setDate(lastDate.getDate() + (6 - lastDate.getDay()));
|
|
281
|
-
return endOfWeek;
|
|
282
|
-
};
|
|
283
|
-
var createWeek = (startDate, contributionMap) => {
|
|
284
|
-
const week = [];
|
|
285
|
-
const currentDate = new Date(startDate);
|
|
286
|
-
for (let day = 0; day < 7; day++) {
|
|
287
|
-
const dateString = createDateString(currentDate);
|
|
288
|
-
const contribution = contributionMap.get(dateString);
|
|
289
|
-
if (contribution) {
|
|
290
|
-
week.push(contribution);
|
|
291
|
-
} else {
|
|
292
|
-
week.push(createEmpyContribution(dateString));
|
|
293
|
-
}
|
|
294
|
-
currentDate.setDate(currentDate.getDate() + 1);
|
|
295
|
-
}
|
|
296
|
-
return week;
|
|
297
|
-
};
|
|
298
|
-
var groupByWeeks = (contributions) => {
|
|
299
|
-
const weeks = [];
|
|
300
|
-
const contributionMap = createContributionMap(contributions);
|
|
301
|
-
const firstDay = getFirstSunday(new Date(contributions[0].date));
|
|
302
|
-
const lastDate = getLastSaturday(
|
|
303
|
-
new Date(contributions[contributions.length - 1].date)
|
|
304
|
-
);
|
|
305
|
-
const currentDate = new Date(firstDay);
|
|
306
|
-
while (currentDate <= lastDate) {
|
|
307
|
-
weeks.push(createWeek(currentDate, contributionMap));
|
|
308
|
-
currentDate.setDate(currentDate.getDate() + 7);
|
|
309
|
-
}
|
|
310
|
-
return weeks;
|
|
311
|
-
};
|
|
312
|
-
function ControlGroups({
|
|
313
|
-
actions: { theme, setTheme, hasRealisticData, setHasRealisticData }
|
|
314
|
-
}) {
|
|
315
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
316
|
-
/* @__PURE__ */ jsxs("div", { className: "control-group", children: [
|
|
317
|
-
/* @__PURE__ */ jsx("label", { className: "control-group__label", children: "Theme:" }),
|
|
318
|
-
/* @__PURE__ */ jsxs("div", { className: "control-group__buttons", children: [
|
|
319
|
-
/* @__PURE__ */ jsx(
|
|
320
|
-
"button",
|
|
321
|
-
{
|
|
322
|
-
className: `theme-button ${theme === "" ? "theme-button--active" : ""}`,
|
|
323
|
-
onClick: () => setTheme(""),
|
|
324
|
-
children: "GitHub"
|
|
325
|
-
}
|
|
326
|
-
),
|
|
327
|
-
/* @__PURE__ */ jsx(
|
|
328
|
-
"button",
|
|
329
|
-
{
|
|
330
|
-
className: `theme-button ${theme === "ocean" ? "theme-button--active" : ""}`,
|
|
331
|
-
onClick: () => setTheme("ocean"),
|
|
332
|
-
children: "Ocean"
|
|
333
|
-
}
|
|
334
|
-
),
|
|
335
|
-
/* @__PURE__ */ jsx(
|
|
336
|
-
"button",
|
|
337
|
-
{
|
|
338
|
-
className: `theme-button ${theme === "sunset" ? "theme-button--active" : ""}`,
|
|
339
|
-
onClick: () => setTheme("sunset"),
|
|
340
|
-
children: "Sunset"
|
|
341
|
-
}
|
|
342
|
-
),
|
|
343
|
-
/* @__PURE__ */ jsx(
|
|
344
|
-
"button",
|
|
345
|
-
{
|
|
346
|
-
className: `theme-button ${theme === "purple" ? "theme-button--active" : ""}`,
|
|
347
|
-
onClick: () => setTheme("purple"),
|
|
348
|
-
children: "Purple"
|
|
349
|
-
}
|
|
350
|
-
)
|
|
351
|
-
] })
|
|
352
|
-
] }),
|
|
353
|
-
/* @__PURE__ */ jsx("div", { className: "control-group", children: /* @__PURE__ */ jsxs("label", { className: "control-group__checkbox", children: [
|
|
354
|
-
/* @__PURE__ */ jsx(
|
|
355
|
-
"input",
|
|
356
|
-
{
|
|
357
|
-
type: "checkbox",
|
|
358
|
-
checked: hasRealisticData,
|
|
359
|
-
onChange: (e) => setHasRealisticData(e.target.checked)
|
|
360
|
-
}
|
|
361
|
-
),
|
|
362
|
-
"Use realistic sample data"
|
|
363
|
-
] }) })
|
|
364
|
-
] });
|
|
365
|
-
}
|
|
366
|
-
var lastYearPeriod = getLastYearPeriod();
|
|
367
|
-
var lastMonthPeriod = getLastMonthPeriod();
|
|
368
|
-
function ContributionHeatmapExample() {
|
|
369
|
-
const [theme, setTheme] = useState("");
|
|
370
|
-
const [hasRealisticData, setHasRealisticData] = useState(false);
|
|
371
|
-
const lastYearContribution = hasRealisticData ? generateMockData({ period: lastYearPeriod, isRealistic: true }) : generateMockData({
|
|
372
|
-
period: lastYearPeriod,
|
|
373
|
-
isRealistic: false
|
|
374
|
-
});
|
|
375
|
-
const lastMonthContribution = hasRealisticData ? generateMockData({ period: lastMonthPeriod, isRealistic: true }) : generateMockData({
|
|
376
|
-
period: lastMonthPeriod,
|
|
377
|
-
isRealistic: false
|
|
378
|
-
});
|
|
379
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
380
|
-
/* @__PURE__ */ jsx("div", { className: "example__controls", children: /* @__PURE__ */ jsx(
|
|
381
|
-
ControlGroups,
|
|
382
|
-
{
|
|
383
|
-
actions: { theme, setTheme, hasRealisticData, setHasRealisticData }
|
|
384
|
-
}
|
|
385
|
-
) }),
|
|
386
|
-
/* @__PURE__ */ jsx("div", { className: "example__heatmap", children: /* @__PURE__ */ jsx(
|
|
387
|
-
ContributionHeatmap,
|
|
388
|
-
{
|
|
389
|
-
className: theme ? `contribution-heatmap--${theme}` : "",
|
|
390
|
-
data: {
|
|
391
|
-
weeks: groupByWeeks(lastYearContribution),
|
|
392
|
-
contribution: lastYearContribution,
|
|
393
|
-
period: lastYearPeriod
|
|
394
|
-
}
|
|
395
|
-
}
|
|
396
|
-
) }),
|
|
397
|
-
/* @__PURE__ */ jsx("div", { className: "example__heatmap", children: /* @__PURE__ */ jsx(
|
|
398
|
-
ContributionHeatmap,
|
|
399
|
-
{
|
|
400
|
-
isReverse: true,
|
|
401
|
-
className: theme ? `contribution-heatmap--${theme}` : "",
|
|
402
|
-
data: {
|
|
403
|
-
weeks: groupByWeeks(lastMonthContribution),
|
|
404
|
-
contribution: lastMonthContribution,
|
|
405
|
-
period: lastMonthPeriod
|
|
406
|
-
}
|
|
407
|
-
}
|
|
408
|
-
) })
|
|
409
|
-
] });
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
export { ContributionHeatmap, ContributionHeatmapExample };
|
|
369
|
+
export { ContributionHeatmap, createDateString, dayNames, generateMockData, getLastMonthPeriod, getLastYearPeriod, groupByWeeks, monthNames, parseDateString };
|
|
413
370
|
//# sourceMappingURL=index.js.map
|
|
414
371
|
//# sourceMappingURL=index.js.map
|