phibr0 / obsidian-charts

Charts - Obsidian Plugin | Create editable, interactive and animated Charts in Obsidian via Chart.js
https://charts.phib.ro/
GNU Affero General Public License v3.0
568 stars 26 forks source link

With new update, dataview intergration no longer works and I get an empty canvas #30

Closed wiktoriavh closed 2 years ago

wiktoriavh commented 2 years ago

lmao

Here is the code I use for the burndown chart:

Burndown

const sp = dv.pages(`"${dv.current().file.folder}" and [[2021-11-W45]]`)
  .filter(page => page.file.name !== dv.current().file.name).sprintpoints.array();

const days = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"]

let totalpoints = dv.current().totalsprintpoints.array();
let lastnum;

for (let i = 0; i < 7; i++) {
    totalpoints[i] = totalpoints[i] ?? lastnum;
    lastnum = totalpoints[i];
}

let counter = 5;
const ideal = totalpoints.map(points => {
    if (counter < 1) {
        return 0;
    }
    counter -= 1
    return points / 4 * counter;
})

let last = 0;
const points = sp.map((point) => {
    last += point;
    return last;
})

const burndown = points.map((point, i) => {
    return totalpoints[i] - point;
})

const chartData = {
    type: 'line',
    data: {
        labels: days,
        datasets: [{
            label: 'Ideal',
            data: ideal,
            backgroundColor: [
                'rgba(250, 250, 250, 0.2)'
            ],
            borderColor: [
                'rgba(250, 250, 250, 0.5)'
            ],
            borderWidth: 1
        },
        {
            label: 'Burndown',
            data: burndown,
            backgroundColor: [
                'rgba(255, 190, 0, 0.2)'
            ],
            borderColor: [
                'rgba(255, 190, 0, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                grid: { 
                    color: 'rgba(122,122,122,0.3)'
                },
            },
            x: {
                grid: { 
                    color: (ctx) => {
                        if (ctx.tick.value > 3) {
                            return 'rgba(254, 106, 38, 0.5)';
                        }
                        return 'rgba(122,122,122,0.3)'
                    }
                },
            },

        }
    }
}

window.renderChart(chartData, this.container);

I am taking the metadata sprintpoints from each daily and I am also taking the array totalsprintpoints from the current weekly to create the chart. The chart worked on friday where I last looked, and today I did the update mentioned in https://github.com/phibr0/obsidian-charts/issues/26#issuecomment-968589094_

phibr0 commented 2 years ago

I see, I accidentally changed something with the renderer. I will fix this later. For now you can wrap your chart options in another object like so:

{
chartOptions: <yourOptions>,
width: <chartWidthInPercent>
}
wiktoriavh commented 2 years ago

Thanks, that did fix it. Let me know when the other version works again!

phibr0 commented 2 years ago

This will be fixed in the next release!