Analytics & Visualizations

markata-go provides several plugins for visualizing data directly in your markdown content. This guide covers the contribution graph and chart visualization plugins.

Contribution Graph

The contribution_graph plugin renders GitHub-style calendar heatmaps showing activity over time. It uses the Cal-Heatmap library.

Configuration

Enable the plugin in your configuration:

[markata-go]
hooks = ["default", "contribution_graph"]

[markata-go.contribution_graph]
enabled = true
cdn_url = "/assets/vendor/cal-heatmap"                # Cal-Heatmap base URL (local by default)
container_class = "contribution-graph-container"
theme = "light"
scale_max_percentile = 0                               # Optional global outlier cap

Configuration Options

Basic Usage

Add a contribution graph to your markdown using a fenced code block:

```contribution-graph
{
  "data": [
    {"date": "2024-01-01", "value": 5},
    {"date": "2024-01-02", "value": 3},
    {"date": "2024-01-03", "value": 8},
    {"date": "2024-01-04", "value": 2},
    {"date": "2024-01-05", "value": 10}
  ],
  "options": {
    "domain": "year",
    "subDomain": "day"
  }
}
```

Data Format

The data array contains objects with: - date: Date string in ISO format (YYYY-MM-DD) - value: Numeric value that determines cell color intensity

Options

Examples

Year View

Show a full year of activity:

```contribution-graph
{
  "data": [
    {"date": "2024-01-15", "value": 5},
    {"date": "2024-02-20", "value": 8},
    {"date": "2024-03-10", "value": 3},
    {"date": "2024-06-01", "value": 12}
  ],
  "options": {
    "domain": "year",
    "subDomain": "day",
    "range": 1
  }
}
```

Monthly View

Show activity by month:

```contribution-graph
{
  "data": [
    {"date": "2024-01-01", "value": 5},
    {"date": "2024-01-15", "value": 8},
    {"date": "2024-02-01", "value": 3}
  ],
  "options": {
    "domain": "month",
    "subDomain": "day",
    "range": 3
  }
}
```

Outlier Control

When one or two very large days wash out the rest of the graph, cap the color scale at a percentile instead of the raw max:

```contribution-graph
{
  "data": [
    {"date": "2024-01-01", "value": 1},
    {"date": "2024-01-02", "value": 2},
    {"date": "2024-01-03", "value": 3},
    {"date": "2024-01-04", "value": 25}
  ],
  "options": {
    "domain": "year",
    "subDomain": "day",
    "range": 1,
    "maxPercentile": 95
  }
}
```

Set scale_max_percentile in config to apply the same percentile cap to every contribution graph by default.

Tracking Blog Post Frequency

Use Jinja templating to automatically generate data from your posts:

---
title: My Writing Activity
jinja: true
---

```contribution-graph
{
  "data": [
    {% for post in filter("published == true") %}
    {"date": "{{ post.Date.Format "2006-01-02" }}", "value": 1}{% if not loop.last %},{% endif %}
    {% endfor %}
  ],
  "options": {
    "domain": "year",
    "subDomain": "day"
  }
}
```

Styling

Add custom CSS to style your contribution graphs:

.contribution-graph-container {
  margin: 2rem 0;
  overflow: hidden;
}

/* Cal-Heatmap specific overrides */
.ch-domain-text {
  fill: var(--color-text-muted);
}

.ch-subdomain-bg {
  fill: var(--color-surface);
  stroke: var(--color-border);
}

Chart.js Charts

The chartjs plugin lets you embed interactive charts using Chart.js.

Configuration

[markata-go]
hooks = ["default", "chartjs"]

[markata-go.chartjs]
enabled = true
cdn_url = "/assets/vendor/chartjs/chart.min.js"
container_class = "chartjs-container"

Basic Usage

Create charts with JSON configuration:

```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["January", "February", "March", "April", "May"],
    "datasets": [{
      "label": "Posts Published",
      "data": [3, 5, 2, 8, 4],
      "backgroundColor": "rgba(54, 162, 235, 0.7)"
    }]
  }
}
```

Supported Chart Types

Examples

Line Chart

```chartjs
{
  "type": "line",
  "data": {
    "labels": ["Week 1", "Week 2", "Week 3", "Week 4"],
    "datasets": [{
      "label": "Page Views",
      "data": [1200, 1900, 1500, 2400],
      "borderColor": "rgb(75, 192, 192)",
      "fill": false,
      "tension": 0.3
    }]
  }
}
```

Pie Chart

```chartjs
{
  "type": "pie",
  "data": {
    "labels": ["Tutorials", "Guides", "Reference", "Blog"],
    "datasets": [{
      "data": [35, 25, 20, 20],
      "backgroundColor": [
        "#ff6384",
        "#36a2eb",
        "#ffce56",
        "#4bc0c0"
      ]
    }]
  }
}
```

Advanced Options

Chart.js supports extensive configuration. Add an options key for customization:

```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{
      "label": "Revenue",
      "data": [12000, 19000, 15000, 22000]
    }]
  },
  "options": {
    "responsive": true,
    "plugins": {
      "title": {
        "display": true,
        "text": "Quarterly Revenue"
      },
      "legend": {
        "position": "bottom"
      }
    },
    "scales": {
      "y": {
        "beginAtZero": true
      }
    }
  }
}
```

Use Cases

Blog Statistics Dashboard

Create a dedicated page showing your blog's activity:

---
title: Blog Statistics
template: page.html
jinja: true
---

## Publishing Activity

```contribution-graph
{
  "data": [...generated from posts...],
  "options": {"domain": "year", "subDomain": "day"}
}

Content by Category

{
  "type": "pie",
  "data": {
    "labels": ["Go", "Python", "DevOps", "Other"],
    "datasets": [{"data": [15, 12, 8, 5]}]
  }
}

### Project Documentation

Track development activity or feature completion:

```markdown
## Development Progress

```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["Features", "Bug Fixes", "Tests", "Docs"],
    "datasets": [{
      "label": "Completed",
      "data": [12, 8, 25, 15],
      "backgroundColor": "#4CAF50"
    }, {
      "label": "In Progress",
      "data": [3, 2, 5, 2],
      "backgroundColor": "#FFC107"
    }]
  },
  "options": {
    "indexAxis": "y"
  }
}

```

Related

• Configuration Guide - Full configuration reference
• Markdown Features - Other markdown extensions
• Templates - Using Jinja in markdown