Болезнь не повод забить на улучшение своей инфраструктуры.
Продолжаем выжимать из локального конструктора максимум. На этот раз я решил все таки запилить графики, чтобы визуально видеть свой прогресс по различным топикам.
Благо разные умельцы уже сделали хорошие плагины. В частности я использовал плагин Charts. Повозился с ним часок, чтобы привести графики в должный вид и получить ровно тот набор данных, который мне нужен.
На выходе получился код, который подтягивает значения, которые я проставляю в Daily файлах, суммиризирует их по мессяцам и выдает вот такую статистику.
Можно сделать и по неделям, но так слишком большие флуктуации и не дает никакой дополнительной информации
```dataviewjs
const pages = dv.pages("#daily")
.where(p => p.file.day?.year === 2025)
.array(); // превращаем в массив для удобства
const groups = {};
for (let p of pages) {
// Получаем текст ссылки или "Без месяца" если нет
const monthLabel = p.month ? (p.month.display ?? p.month.path ?? String(p.month)) : "Без месяца";
if (!groups[monthLabel]) groups[monthLabel] = [];
groups[monthLabel].push(p);
}
// 2. Создаём массивы для графика
let labels = [];
let capitalData = [];
let healthData = [];
let influenceData = [];
let happyData = [];
let processData = [];
Object.entries(groups)
.sort((a, b) => String(a[0]).localeCompare(String(b[0]), 'ru', { numeric: true })) // сортируем недели
.forEach(([monthLabel, items]) => {
labels.push(monthLabel);
capitalData.push(items.reduce((acc, p) => acc + (p.capital ?? 0), 0));
healthData.push(items.reduce((acc, p) => acc + (p.health ?? 0), 0));
influenceData.push(items.reduce((acc, p) => acc + (p.influence ?? 0), 0));
happyData.push(items.reduce((acc, p) => acc + (p.happy ?? 0), 0));
processData.push(items.reduce((acc, p) => acc + (p.process ?? 0), 0));
});
// 3. Формируем объект для Charts
const chartData = {
type: 'line', // или 'bar', если хочешь столбцы
data: {
labels: labels,
datasets: [
{ label: '💰 Капитал', data: capitalData, borderColor: 'rgba(0, 128, 0, 1)', backgroundColor: 'rgba(0, 128, 0, 0.2)', fill: false, tension: 0.2 },
{ label: '🫀 Здоровье', data: healthData, borderColor: 'rgba(0, 206, 209, 1)', backgroundColor: 'rgba(0, 206, 209, 0.2)', fill: false, tension: 0.2 },
{ label: '📢 Влияние', data: influenceData, borderColor: 'rgba(168, 130, 255, 1)', backgroundColor: 'rgba(168, 130, 255, 0.2)', fill: false, tension: 0.2 },
{ label: '☀️ Счастье', data: happyData, borderColor: 'rgba(255, 165, 0, 1)', backgroundColor: 'rgba(255, 165, 0, 0.2)', fill: false, tension: 0.2 },
{ label: '📝 Процессинг', data: processData, borderColor: 'rgba(255, 105, 180, 1)', backgroundColor: 'rgba(255, 105, 180, 0.2)', fill: false, tension: 0.2 },
]
}
};
// 4. Рендерим график
window.renderChart(chartData, this.container);
```
#life_rpg