Contribution Graph - generate heatmap charts to track your activity

Share & showcase
1

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

image
image1000Ă—265 4.97 KB

  • Month track view

image
image1005Ă—697 12.5 KB

  • Calendar track view

image
image1004Ă—1249 40 KB

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
2

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

image
image1022Ă—266 4.22 KB

3

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

4

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
5

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.

6

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

image
image1148Ă—1080 61.2 KB

1 Like
7

Hello.

I’m currently using a plugin call “Better word count” and it stores my daily word count in a .json file.

However, i couldn’t work out how to make the plugin read data in that .json file, can you help me with that?

Many thanks.

8

This requires the use of dvjs code

  • read data from json file
  • Parse this data and group by day
  • use contribution graph’s API to render this data

JSON read sample

const jsonString = await app.vault.adapter.read(".obsidian/vault-stats.json");
const jsonObject = JSON.parse(jsonString);

contribution graph’s API document: obsidian-contribution-graph/README_ADVANCE.md at master · vran-dev/obsidian-contribution-graph · GitHub