To create a progress bar like this with your development, you need to insert YAML into your daily notes:

and then insert the following code in the “May 2025” note:

```dataviewjs
const pages = dv.pages('"2. Areas/Мой дневник/1-3 Daily notes"')
  .where(p => p.date && p.date.toString().includes("-05-2025"))

const totalDays = 31
const count = (key) => pages.filter(p => p[key] === true).length

const habits = [
  { name: "Warm-up", key: "разминка" },
  { name: "Sports nutrition", key: "спортпитание" },
  { name: "Reading", key: "Чтениекниг" }
]

function getColor(percent) {
  if (percent >= 80) return "#4CAF50"  // green
  if (percent >= 50) return "#FFC107"  // yellow
  return "#F44336"                     // red
}

if (pages.length === 0) {
  dv.paragraph("❌ No data for May.");
} else {
  const container = this.container

  habits.forEach(habit => {
    const current = count(habit.key)
    const percent = Math.round((current / totalDays) * 100)
    const color = getColor(percent)

    const block = document.createElement("div")
    block.style.marginBottom = "16px"

    const label = document.createElement("div")
    label.textContent = `${habit.name}: ${percent}%`
    label.style.fontWeight = "bold"
    label.style.marginBottom = "4px"

    const barContainer = document.createElement("div")
    barContainer.style.background = "#eee"
    barContainer.style.borderRadius = "6px"
    barContainer.style.height = "16px"
    barContainer.style.width = "100%"
    barContainer.style.overflow = "hidden"

    const bar = document.createElement("div")
    bar.style.background = color
    bar.style.height = "100%"
    bar.style.width = `${percent}%`
    bar.style.transition = "width 0.3s"

    barContainer.appendChild(bar)
    block.appendChild(label)
    block.appendChild(barContainer)
    container.appendChild(block)
  })
}```

→ const pages = dv.pages(‘“2. Areas/Мой дневник/1-3 Daily notes”’) — replace with your own path where your notes with YAML are stored → Move the last three apostrophe characters to a new line

---

🧠 An explanation for those who want to understand this code more deeply:

📁 1. What you need to add to your daily notes

---

💻 2. What the code looks like in the “May 2025” note

In the month note (e.g. May 2025), insert the following code:

```dataviewjs
const pages = dv.pages('"2. Areas/Мой дневник/1-3 Daily notes"')
  .where(p => p.date && p.date.toString().includes("-05-2025"))

🛠 Explanation:

• pages — we take all the diaries from the folder.

• We filter only for May 2025 (includes("-05-2025")).

• Don’t forget to replace the path with your own!

---

const totalDays = 31
const count = (key) => pages.filter(p => p[key] === true).length

• totalDays — the total number of days in the month.

• count() — how many days the habit was done.

---

const habits = [
  { name: "Warm-up", key: "разминка" },
  { name: "Sports nutrition", key: "спортпитание" },
  { name: "Reading", key: "Чтениекниг" }
]

🔑 Here you set the list of habits you’ll track.

• name — how it will be called on the screen.

• key — how the field is written in the YAML.

---

function getColor(percent) {
  if (percent >= 80) return "#4CAF50"  // green
  if (percent >= 50) return "#FFC107"  // yellow
  return "#F44336"                     // red
}

🟩 Green = you’re doing great 🟨 Yellow = you’re trying 🟥 Red = you need discipline

---

📊 Visualisation

Inside the habits.forEach(...) loop, the following is created:

• text with the habit’s completion percentage;

• a container with a grey bar;

• a coloured progress bar that fills depending on the %.

---

✅ What you end up with

You get a habits panel for the month:

• Beautiful.

• Motivating.

• Right in your note — no external trackers needed.