Skip to content

Add support for changing week start day + add option for weekly summaries #206

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add support for changing week start day + add option for weekly summaries #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d7e670d
add support for displaying week summaries
winterleitner Aug 2, 2023
fa816c6
fix bug that caused the first weekly summary to not be displayed
winterleitner Aug 2, 2023
c5499b8
fix bug that caused a weekly summary to be shown in a week without da…
winterleitner Aug 2, 2023
8736cfb
update weekly summary function so that accumulator is not provided by…
winterleitner Aug 3, 2023
45ea3fc
format code
winterleitner Aug 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
## v1.9.1 (2023-08-02)

- Add weekStartDay prop
- Add option to display weekly summaries

## v1.9.0 (2022-06-26)

- Add React 17 and 18 to allowed peerDependencies
Expand Down
43 changes: 24 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,25 +49,30 @@ To show a basic heatmap from January 1st to April 1st:

## Props

| Name | Type | Description |
| ---- | ---- | ----------- |
| `values` | **Required**, Array of Object | Required array of objects which each have a date property, which can be a Date object, parseable string, or millisecond timestamp. Example: `[{ date: '2016-01-01', count: 6 }]` |
| `startDate` | String, Number, or Date | Start of date range. |
| `endDate` | String, Number, or Date | End of date range - a Date object, parseable string, or millisecond timestamp. |
| `showMonthLabels` | Boolean | Toggle for removing month labels. |
| `showWeekdayLabels` | Boolean | Toggle for removing weekday labels. |
| `showOutOfRangeDays` | Boolean | Toggle display of extra days in week that are past endDate and before beginning of range. |
| `horizontal` | Boolean | Whether to orient horizontally or vertically. Can be used in combination with numDays/endDate to show just the current month. |
| `gutterSize` | Number | Size of gutters relative to squares. |
| `onClick` | Function | Callback to invoke when a square is clicked, e.g. `(value) => alert(value)` |
| `onMouseOver` | Function | Callback to invoke when mouse pointer is over a square, e.g. `(event, value) => console.log(event, value)` |
| `onMouseLeave` | Function | Callback to invoke when mouse pointer leaves a square, e.g. `(event, value) => console.log(event, value)` |
| `titleForValue` | Function | Function to determine each square's title attribute, for generating 3rd party hover tooltips (may also need to configure tooltipDataAttrs). Example: `(value) => `Date is ${value.date}` |
| `tooltipDataAttrs` | Object or Function | Set data attributes for all squares, for generating 3rd party hover tooltips. Either an object like `{ 'data-tooltip': 'tooltip' }` or a function like `(value) => { return { 'data-tooltip': 'Tooltip: ' + value } }` |
| `classForValue` | Function | Callback for determining CSS class to apply to each value, e.g. `(value) => (value.count > 0 ? 'blue' : 'white')`. |
| `monthLabels` | Array of String | An array with 12 strings representing the text from January to December, e.g. `['01', '02', ..., '12']` |
| `weekdayLabels` | Array of String | An array with 7 strings representing the text from Sunday to Saturday |
| `transformDayElement` | Function | A function to further transform generated svg element for a single day. Can be used to attach event handlers, add tooltips and more. Example: `(element, value, index) => React.cloneElement(element, { title: value.date })`. |
| Name | Type | Description |
| ---- |-------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `values` | **Required**, Array of Object | Required array of objects which each have a date property, which can be a Date object, parseable string, or millisecond timestamp. Example: `[{ date: '2016-01-01', count: 6 }]` |
| `startDate` | String, Number, or Date | Start of date range. |
| `endDate` | String, Number, or Date | End of date range - a Date object, parseable string, or millisecond timestamp. |
| `showMonthLabels` | Boolean | Toggle for removing month labels. |
| `showWeekdayLabels` | Boolean | Toggle for removing weekday labels. |
| `showOutOfRangeDays` | Boolean | Toggle display of extra days in week that are past endDate and before beginning of range. |
| `showWeekSummaries` | Boolean | Toggle display of extra row/col to display weekly summarized values. |
| `weekSummariesSquaresOffset` | Number | The number of squares the weekly summary is offset from the main data area. |
| `horizontal` | Boolean | Whether to orient horizontally or vertically. Can be used in combination with numDays/endDate to show just the current month. |
| `gutterSize` | Number | Size of gutters relative to squares. |
| `onClick` | Function | Callback to invoke when a square is clicked, e.g. `(value) => alert(value)` |
| `onMouseOver` | Function | Callback to invoke when mouse pointer is over a square, e.g. `(event, value) => console.log(event, value)` |
| `onMouseLeave` | Function | Callback to invoke when mouse pointer leaves a square, e.g. `(event, value) => console.log(event, value)` |
| `titleForValue` | Function | Function to determine each square's title attribute, for generating 3rd party hover tooltips (may also need to configure tooltipDataAttrs). Example: `(value) => `Date is ${value.date}` |
| `tooltipDataAttrs` | Object or Function | Set data attributes for all squares, for generating 3rd party hover tooltips. Either an object like `{ 'data-tooltip': 'tooltip' }` or a function like `(value) => { return { 'data-tooltip': 'Tooltip: ' + value } }` |
| `weekSummaryTooltipDataAttrs` | Object or Function | Set data attributes for all squares that represent weekly summaries, for generating 3rd party hover tooltips. Either an object like `{ 'data-tooltip': 'tooltip' }` or a function like `(weekValue) => { return { 'data-tooltip': 'Tooltip: ' + value } }` where `weekValue` will be an object of `{week: 32, values: [{ date: '2016-01-01', count: 6 }, ...]}` |
| `classForValue` | Function | Callback for determining CSS class to apply to each value, e.g. `(value) => (value.count > 0 ? 'blue' : 'white')`. |
| `classForWeekSummaryValue` | Function | Callback for determining CSS class to apply to each weekly summary value, e.g. `(weekValue) => summarizeValues(weekValue) > 0 ? 'blue' : 'white'` where `weekValue` will be an object of `{week: 32, values: [{ date: '2016-01-01', count: 6 }, ...]}`. |
| `monthLabels` | Array of String | An array with 12 strings representing the text from January to December, e.g. `['01', '02', ..., '12']` |
| `weekdayLabels` | Array of String | An array with 7 strings representing the text from Sunday to Saturday |
| `transformDayElement` | Function | A function to further transform generated svg element for a single day. Can be used to attach event handlers, add tooltips and more. Example: `(element, value, index) => React.cloneElement(element, { title: value.date })`. |
| `weekStartDay` | Number | the first day of the week where 0 = sunday, 1 = monday, ... |


## Configuring colors
Expand Down
30 changes: 27 additions & 3 deletions demo/src/Demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,25 @@ class Demo extends React.Component {

getTooltipDataAttrs = (value) => {
// Temporary hack around null value.date issue
if (!value || !value.date) {
return null;
}
if (!value || !value.date) return null;
// Configuration for react-tooltip
return {
'data-tip': `${value.date.toISOString().slice(0, 10)} has count: ${value.count}`,
};
};

summarizeWeek = (weekValue) => {
return weekValue.values.map((v) => v.count).reduce((a, b) => a + b, 0);
};

getWeeklyTooltipDataAttrs = (weekValue) => {
if (!weekValue || (!weekValue.week && weekValue.week !== 0)) return null;
const count = this.summarizeWeek(weekValue);
return {
'data-tip': `Week ${weekValue.week + 1} has total count: ${count}`,
};
};

handleClick = (value) => {
alert(`You clicked on ${value.date.toISOString().slice(0, 10)} with count: ${value.count}`);
};
Expand All @@ -68,8 +78,22 @@ class Demo extends React.Component {
}
return `color-github-${value.count}`;
}}
classForWeekSummaryValue={(weekValue) => {
if (!weekValue) return 'color-empty';

const count = this.summarizeWeek(weekValue);
if (count < 8) return 'color-empty';
return `color-gitlab-${count % 5}`;
}}
tooltipDataAttrs={this.getTooltipDataAttrs}
weekSummaryTooltipDataAttrs={this.getWeeklyTooltipDataAttrs}
onClick={this.handleClick}
showWeekdayLabels
weekdayLabels={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
showWeekSummaries
weekSummary
weekSummariesSquaresOffset={0}
weekStartDay={1}
/>
</div>
<div className="col-12 col-sm-6">
Expand Down
Loading