react-activity-calendar

The showWeekdayLabels prop not only takes a boolean but also a a list of ISO 8601 weekday for finer control which weekdays to show now: Story.

<ActivityCalendar data={data} showWeekdayLabels={['mon', 'fri']} />

Added the renderColorLegend render prop to allow customizing how the color legend elements are rendered. For example, useful to add tooltips (compare the renderBlock prop): Story.

Thanks @AliceLeyou for the contribution!

<ActivityCalendar
  data={data}
  renderColorLegend={(block, level) => (
    <MuiTooltip title={`Level: ${level}`}>{block}</MuiTooltip>
  )}
/>

Added a ref prop to allow access to the calendar DOM node.

const Component = () => {
  const calendarRef = useRef<HTMLElement>(null);

  return <ActivityCalendar data={data} ref={calendarRef} />;
}

Added the maxLevel prop to support any number of activity levels: example. See issue #37 for context.

Thanks @eschreiner for the good idea 👍.

Instead of scaling the calendar down on narrow screens the container will overflow horizontally now. This follows what GitHub is doing on mobile devices. See issue #35 for details

New

• Added dark mode support ✨
• Added colorScheme prop 🌈
• Added renderBlock prop to control how blocks are rendered 🧱
  This allows you to use all kinds of tooltip components.
• The loading animation respects the prefers-reduced-motion: reduce setting now

Breaking changes

• Removed the color prop
  Use the theme prop instead to set the calendar colors for the light and dark system color scheme. By default, the calendar will use the currently set system color scheme, but you can enforce a specific color scheme with the colorScheme prop. Define each color scale explicitly with five colors or pass exactly two colors (lowest and highest intensity) to calculate a single-hue scale. Colors can be specified in any valid CSS format. Theming example.
• Removed exported utility function calculateTheme()
  Use the theme prop instead.
• Removed the children prop
  Use the renderBlock prop instead.
• Removed the dateFormat prop
  No longer necessary with renderBlock. If needed, you can format dates with any function.
• Removed the labels.tooltip message
  No longer necessary with renderBlock. You can fully control what is rendered now.
• Changed the default message for labels.totalCount
{{count}} activities in {{year}} instead of {{count} contributions in {{year}}

Bugfixes

• Fixed vertical alignment of SVG <text> nodes in Firefox

Thanks to @MarcioMeier a custom label can be set for the tooltip message now. The placeholders {{count}} and {{date}} are supported.

const labels = {
  tooltip: '<i>{{count}} views</i> on {{date}}'
};

<ActivityCalendar data={...} labels={labels} />

You can register event handlers for the SVG <rect/> elements that are used to render the calendar days now. This way you can control the behaviour on click, hover, etc.

See https://grubersjoe.github.io/react-activity-calendar/?path=/story/activity-calendar--event-handlers.

All shown labels can be localized now.

See https://grubersjoe.github.io/react-activity-calendar/?path=/story/activity-calendar--with-localized-labels

A new Skeleton component is exported to show the loading state in a more convenient manner:

import Calendar, { Skeleton as CalendarSkeleton } from 'react-activity-calendar';

// ...

const render = loading ? <CalendarSkeleton loading /> : <Calendar data={data} />;

Of course you still can use the loading property of the calendar component directly. However, the calendar requires the data property.

This component was extracted from grubersjoe/react-github-calendar to improve reusability. I hope it is useful for someone :).