Activity Overview Component

简介

activity_overview 是一个类似于 GitHub 贡献图（Contribution Graph）的动态预览组件。它能够以热力图的形式直观展示用户在一段时间内的活动频率或贡献情况。

功能特性

• 动态数据展示：支持传入日期和贡献数量的数据数组。
• 完全自定义样式：
  • 支持自定义色块颜色等级（colors）。
  • 支持自定义贡献数阈值（thresholds）。
  • 支持设置色块尺寸（blockSize）和间距（blockSpace）。
• 时间范围控制：支持设置显示过去多少周的数据（weeks）。
• 交互支持：支持点击色块触发回调函数，返回日期和贡献数。

快速开始

引入组件

import { ActivityCalendar, ContributionItem } from '@commons/activity_overview';

基础用法

@Entry
@Component
struct MyComponent {
  @State contributions: ContributionItem[] = [
    { date: '2023-10-01', count: 5 },
    { date: '2023-10-02', count: 12 },
    // ... 更多数据
  ];

  build() {
    Column() {
      ActivityCalendar({
        contributions: this.contributions,
        weeks: 52, // 显示过去52周
        onBlockClick: (date, count) => {
          console.info(`Clicked: ${date}, Count: ${count}`);
        }
      })
    }
  }
}

API 参考

ActivityCalendar 组件属性

属性名	类型	默认值	说明
contributions	ContributionItem[]	[]	贡献数据列表，包含日期和数量。
weeks	number	52	显示的周数，从当前日期向前推算。
blockSize	number	10	每个色块的宽度和高度（单位：vp）。
blockSpace	number	2	色块之间的间距（单位：vp）。
colors	string[]	['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']	颜色数组。第一个颜色为背景色（0贡献），后续颜色对应不同等级。
thresholds	number[]	[1, 3, 6, 10]	阈值数组。用于决定贡献数对应哪个颜色等级。
onBlockClick	(date: string, count: number) => void	-	点击色块时的回调函数。

ContributionItem 接口

interface ContributionItem {
  date: string; // 日期格式 'YYYY-MM-DD'
  count: number; // 贡献数量
}

联系方式

如有问题或建议，请联系维护团队。

仓库：https://github.com/HarmonyOS-Next/activity_overview 作者：zhousg1007@qq.com