Vault交互式全景看板:笔记热力图与回忆仪表盘

Activities_dashboard

从Reddit上看到的(原帖,感谢作者!),然后根据自己的需求修改并优化:

  • 翻译成中文
  • 优化了activities.jsx中的
    • 弹出框被遮挡
    • 弹出框失焦后自动隐藏
    • 增加对2024-12-21 09:08:22日期格式的支持
    • 改弹出框中的文件名链接为obsidian支持的悬停预览
  • 优化了memories.jsx中的
    • 增加数据来源自定义
    • 增加在卡片内显示文件名
    • 增加弹出框中的文件名链接为obsidian支持的悬停预览
    • 修改点击卡片打开文件为点击文件名打开,防止误操作
  • 优化了对应的样式代码

1 功能与说明

1.1 Activity Heatmaps 活动热力图

  • GitHub 风格的热力图,分类可自定义
  • 统计指标:平均值、标准差、高产日、峰度和平均间隔
    • 平均值:每日创建笔记的平均数量
    • 标准差:衡量每日产量的一致性,数值越低表示越稳定
    • 高产日:一周中最有效率的一天
    • 峰度:创作节奏,数值越小表示越稳定(好比是细水长流,还是火山喷发)
    • 平均间隔:活跃日之间的平均间隔
  • 交互式趋势图表,提供周线和月线视图
  • 六个月的历史数据跟踪(时间跨度可修改)

1.2 Memories 回忆

  • 自动检索过去相应日期的笔记
  • 可配置的时间窗口(一周、一个月、三个月、六个月)
  • 年度回顾,展示往年同一天的笔记
  • 从多个数据源进行智能日期和时间解析

2 安装与设置

此仪表盘无需任何预设的文件夹结构即可正常运行。

脚本完全可以根据你的需要进行定制。使用时,只需将 activities.jsxmemories.jsx 中的代码复制粘贴到仪表盘文件中相应的 datacorejsx 代码块即可。

具体步骤如下:

  1. 从 Obsidian 的社区插件部分安装 Datacore 插件,启用插件后,请重新加载 Obsidian。
  2. 将 CSS 文件复制到您的代码片段文件夹:
.obsidian/snippets/
├── activities.css
├── memories.css
└── dashboard.css  (可选,推荐配置)

注:dashboard.css提供额外的布局增强功能,改善视觉效果。在【属性】中配置cssclasses: dashboard后生效。
3. 在“设置”→“外观”→“CSS 代码片段”中启用 CSS 代码片段。
4. 创建仪表盘文件,并将脚本代码粘贴到 datacorejsx 代码块中:

```datacorejsx
// 粘贴 activities.jsx 的所有代码到这里
```

```datacorejsx
// 粘贴 memories.jsx 所有代码到这里
```
  1. 粘贴后,你可以在每个脚本的配置部分中自定义路径,使其与存储库中的特定文件夹相匹配。

activities.jsx中修改:

CATEGORIES: [
            { title: "成长", folder: "04Growth" },
            { title: "写作", folder: "Longform" },
            { title: "日记", folder: "00Journal" }
        ],

memories.jsx中修改:

SOURCE_FOLDERS: [
		    "00Journal/01DailyNotes",
		    "02Business",
		    "03Life",
		    "04Growth"
		],

说明:

  • 日期字段
    脚本会按优先级顺序在以下字段中查找日期:
DATE: ["date", "Date", "created", "created_at", "created_date", "created date"],

也就是在笔记的【属性】中有日期字段,比如:

---
date: 2024-12-21
---

或者,也可以使用 ISO 格式将日期包含在文件名中: 2024-12-21.md

  1. 热力图时间跨度修改。在activities.jsx中修改显示的月份数:
MONTHS_BACK: 6; // 默认
MONTHS_BACK: 12; // 显示12个月

3 故障排除

【热力图】显示为空

  • 确认笔记存在于已配置的文件夹中。
  • 检查笔记是否包含有效的日期字段,或者文件名中是否包含日期。
  • 请确保日期格式为 ISO 8601 (YYYY-MM-DD)

【回忆】中未显示任何结果

  • 确保配置的源文件夹中存在笔记
  • 确认笔记包含日期元数据或日期格式的文件名。
  • 检查一下是否有对应日期的笔记存在。

4 代码

  • activities.jsx 活动热力图代码

  • activities.css 活动热力图样式

  • memories.jsx 回忆仪表盘代码

  • memories.css 回忆仪表盘样式

  • dashboard.css Dashboard样式

    • 在【属性】中配置cssclasses: dashboard后生效。
2 个赞

datacore 这么强了么,开始支持界面了
可以完全取代 dv 了吗?

基因上就比dv强,只是用例少,我个人觉得还没完全替代dv。
就这个用法来说,只能用datacore实现,用dv的太耗电脑资源。