Contribution Graph - generate heatmap charts to track your activity

Hi guys,

I wrote a plugin named contribution graph, which could generate interactive GitHub-style contribution graphs, month track graphs, and calendar track graphs.

talks is cheap, show images directly

  • default view

  • Month track view

  • Calendar track view

More case you can see at Github Project Site.

Many thanks to the plug-in authors of heatmap calendar and activity history, the inspiration comes from them

More

7 Likes

Case 1 - render latest days & add click action

a sample show how to render graph

  • find pages which container project tag
  • render latest 365 days range
  • search by date keyword when click cell

code


// pages 
const data = dv.pages('#project')
	.map(p => {
		return {
			date: p.file.ctime.toFormat('yyyy-MM-dd'),
			value: p
		}
	})
	.groupBy(p => p.date) // group by date
	.map(entry =>{ 
		// convert to contribution graph data
		return {
			date: entry.key,
			value: entry.rows.length
		}
	})
const options = {
    days: 365,
    title: 'Contributions in the last 365 days ', // graph title
    data: data,
    onCellClick: (item) => {
        // call global-search by cell's date
	    const key = `["tags":project] ["createTime":${item.date}]`
		app.internalPlugins.plugins['global-search'].instance.openGlobalSearch(key)
    },
}

// render graph by  data
renderContributionGraph(this.container, options )

images

Hi everyone, I have released a new version 0.4.0 today

Release 0.4.0 · vran-dev/obsidian-contribution-graph · GitHub

  • create and modify graphs without writing code
  • it’s not necessary need to integrate with dataview

life is becoming better

Create graph by command

contribution-graph-create

Modify graph

contribution-graph-edit

Hi everyone, I have released a new version 0.5.0 today

Release 0.5.0 · vran-dev/obsidian-contribution-graph · GitHub

  • support customized cell styles from UI
  • Add Create contribution graph to the context menu
  • supports specifying the format of dateField
  • Fixed tooltip may not hidden when graph re-rendered
  • support file.ctime and mtime as datefield
  • add datefield suggest
1 Like

Just what I was looking for.

However, I dropped using the filesystem’s date and time for created and modification of notes. It breaks quite easily and is therefore not reliable.

Basically, I use a combination of obsidian-linter and obsidian-frontmatter-modified-date as described in this Obsidian forum post.

sorry for response so late.

for your situation, you can switch Date Field to Specific Page Property in the form, then input your customized date property name

1 Like