Böyle bir tablo oluşturmak için Dataview eklentisini kurman ve notta YAML'ı etkinleştirmen gerekir

YAML'dan bilgi alan basit bir tablo nasıl görünüyor:

Eklenecek kod:

```dataviewjs
const pages = dv.pages('"2. Areas/Занятие спортом/Динамика веса"')
  .where(p => p.Вес && p.date)
  .sort(p => p.date);

const labels = pages.map(p => new Date(p.date).toLocaleDateString()).array();
const values = pages.map(p => p.Вес).array();
const goal = 80;
const goals = labels.map(() => goal); // Hedef çizgisi

const chartData = {
  type: 'line',
  data: {
    labels: labels,
    datasets: [
      {
        label: "Kilo (kg)",
        data: values,
        borderColor: "blue",
        fill: false,
        tension: 0.3
      },
      {
        label: "Hedef (80 kg)",
        data: goals,
        borderColor: "green",
        borderDash: [5, 5],
        pointRadius: 0,
        fill: false
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: "📈 Hedefe doğru kilo artışı"
      },
      legend: {
        position: "bottom"
      }
    },
    scales: {
      y: {
        title: {
          display: true,
          text: "Kilo (kg)"
        },
        suggestedMin: 65,
        suggestedMax: 85
      },
      x: {
        title: {
          display: true,
          text: "Tarih"
        }
      }
    }
  }
};

window.renderChart(chartData, this.container);```

→ const pages = dv.pages(‘“2. Areas/Занятие спортом/Динамика веса”’) — YAML’lı notlarının bulunduğu kendi yolunla değiştir → Son üç apostrof karakterini yeni bir satıra taşı

---

🧠 Bu kodu daha derin anlamak isteyenler için açıklama:

🔹 Kod ne yapar:

• Doğru klasördeki tüm notları bulur;

• Yalnızca Вес (Kilo) ve date olanları filtreler;

• Tarihe göre sıralar — noktalar sırayla olsun.

📌 💡 Klasörün farklıysa yolu kendi yolunla değiştir.

---

const labels = pages.map(p => new Date(p.date).toLocaleDateString()).array();
const values = pages.map(p => p.Вес).array();

🔹 Ne yapar:

• labels — grafiği üzerine kurduğumuz tarihler.

• values — kilo değerlerinin kendisi.

---

const goal = 80;
const goals = labels.map(() => goal); // Hedef çizgisi

🔹 Ne yapar:

• Bir hedef belirliyoruz — örneğin 80 kg.

• Grafikte ikinci bir çizgi oluşturuyoruz — düz olacak, böylece hedefe ne kadar yakın olduğunu görürsün.

---

🧱 Grafiğin kendisini yapılandırma

const chartData = {
  type: 'line',
  data: {
    labels: labels,
    datasets: [
      {
        label: "Kilo (kg)",
        data: values,
        borderColor: "blue",
        fill: false,
        tension: 0.3
      },
      {
        label: "Hedef (80 kg)",
        data: goals,
        borderColor: "green",
        borderDash: [5, 5],
        pointRadius: 0,
        fill: false
      }
    ]
  },

🔹 Ne yapar:

• İki çizgi kurar:

  • mavi çizgi — gerçek ilerlemen;

  • yeşil kesikli — hedef kilo.

• tension: 0.3 — çizgileri yumuşatır (estetik görünür).

• borderDash — hedef için kesikli çizgi, görsel olarak ayırt etmek için.

---

⚙️ Görünümü yapılandırma

  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: "📈 Hedefe doğru kilo artışı"
      },
      legend: {
        position: "bottom"
      }
    },
    scales: {
      y: {
        title: {
          display: true,
          text: "Kilo (kg)"
        },
        suggestedMin: 65,
        suggestedMax: 85
      },
      x: {
        title: {
          display: true,
          text: "Tarih"
        }
      }
    }
  }
};

🔹 Ne yapar:

• Bir başlık ekler.

• Açıklamayı (legend) alta yerleştirir.

• Y eksenini sınırlar (65-85 kg) — grafik çok “düz” olmasın diye.

• Eksenleri etiketler.

---

window.renderChart(chartData, this.container);

🔹 Bu, bitmiş grafiği doğrudan Obsidian notuna ekleyen komuttur.