A flexible React component to display activity data in a calendar (heatmap).
MIT License
Bot releases are hidden (Show)
Published by grubersjoe about 2 months ago
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']} />
Published by grubersjoe about 2 months ago
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>
)}
/>
Published by grubersjoe about 2 months ago
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} />;
}
Published by grubersjoe 11 months ago
Added the maxLevel
prop to support any number of activity levels: example. See issue #37 for context.
Thanks @eschreiner for the good idea š.
Published by grubersjoe 12 months ago
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
Published by grubersjoe over 1 year ago
colorScheme
prop šrenderBlock
prop to control how blocks are rendered š§±loading
animation respects the prefers-reduced-motion: reduce
setting nowcolor
proptheme
Ā 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.calculateTheme()
theme
prop instead.children
proprenderBlock
prop instead.dateFormat
proprenderBlock
. If needed, you can format dates with any function.labels.tooltip
messagerenderBlock
. You can fully control what is rendered now.labels.totalCount
{{count}} activities in {{year}}
instead of {{count} contributions in {{year}}
<text>
nodes in FirefoxPublished by grubersjoe over 2 years ago
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} />
Published by grubersjoe almost 3 years ago
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.
Published by grubersjoe about 3 years ago
All shown labels can be localized now.
Published by grubersjoe about 3 years ago
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.
Published by grubersjoe over 3 years ago
This component was extracted from grubersjoe/react-github-calendar to improve reusability. I hope it is useful for someone :).