Support for server side rendering (SSR)

Server side rendering is supported now. See this test repository for working examples for Astro, Next.js, Remix and Vite:
https://github.com/grubersjoe/react-activity-calendar-tests

Addtionally, this package also exports <ActivityCalendar /> as named export now. In some environment it seems crucial to use the named export instead of the default one. The default export will be removed in the next major version.

// Please do this
import { ActivityCalendar } from 'react-activity-calendar';

// Instead of this in future
import ActivityCalendar from 'react-activity-calendar';

chroma.js no longer required for color calculations

As of v2.6 the chroma.js dependency could be dropped completely. Instead of relying on JavaScript for the color calculations, CSS is now used. chroma.js was mainly chosen because it allows the calculation of harmonic color gradients in well-suited color spaces like Lab. However, these color spaces are now also available in CSS using color-mix and allow interpolating colors in the same manner.

Consequently, the bundle size of this package could be reduced by roughly 33% from 129 kB to 87 kB (minified, not gzipped) while keeping the functionality and API the same:

https://bundlephobia.com/package/[email protected]

Setting weekday label visibility individually

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 renderLegendBlock prop

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 ref prop

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} />;
}

Arbitrary number of activity levels

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

Thanks @eschreiner for the good idea 👍.

Improved styling on narrow screens

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

v2

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 various 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 n colors, where n is the number of activity levels, 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

Custom tooltip labels

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} />

Support for event handlers

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.