I need some help with adding interactivity to my dataview

[LofQ]

Hello!

I guess my question can be reduced to this:
What is the most optimal way of adding buttons inside your dataview query so that you can affect what data is being displayed?

Of course the simplest way is just to make a bunch of different dataview instances, but I’m trying to improve my almost non-existing coding skills and make something useful at the same time. After spending almost a whole day digging on my own, I’m still stuck. So here we go

What I’m trying to do

I made this bodyweight chart that grabs metadata from my daily notes.

The code:

//Getting daily notes from the folder
const tagPages = dv.pages('"01 - Daily Notes"');

//Adding blank arrays for the data
let date = [],
	bodyWeight = [],
	bodyWeightGoal = [];

//Pushing data 
tagPages.forEach(note =>{
	date.push(note.file.name);
	bodyWeight.push(note.bodyWeight);
	bodyWeightGoal.push(note.bodyWeightGoal);	
})

//Shortening data to the top 30 
date = date.splice(-30);
bodyWeight = bodyWeight.splice(-30);
bodyWeightGoal = bodyWeightGoal.splice(-30);

//Binding arrays together and sorting data by Date (just in case)
let triplets = date.map((value, index) => [value, bodyWeight[index], bodyWeightGoal[index]]);

triplets = triplets.sort((a, b) => {
    let date1 = a[0].split('-');
    let date2 = b[0].split('-');
    let day1 = (date1[2]); 
    let day2 = (date2[2]);
    let month1 = (date1[1]);
    let month2 = (date2[1]);
    let year1 = (date1[0]);
    let year2 = (date2[0]);
    if (year1 !== year2) {
       return year1 - year2;
    } else if (month1 !== month2) {
       return month1 - month2;
    } else {
       return day1 - day2;
    }
});

//Spliting back sorted Data 
let dateSorted = triplets.map(x => x[0]),
    bodyWeightSorted = triplets.map(x => x[1]),
    bodyWeightGoalSorted = triplets.map(x => x[2]);

//Building a chart
const chartData = {
	type: 'line',
	data: {
		labels: dateSorted,
		datasets: [
			{
			label: 'Body Weight',
			data: bodyWeightSorted,
			borderColor: ['rgba(11, 180, 255, 1)'],
			backgroundColor: ['rgba(0, 0, 0, 1)']
			},
			{
			label: 'Body Weight Goal',
			data: bodyWeightGoalSorted,
			borderColor: ['rgba(179, 212, 255, 1)'], 
			}
		]
	}
}

window.renderChart(chartData, this.container);

I want to add some buttons to:
a) zoom in/out;
b) scroll back and forward.

Things I have tried

Here is my take. And I know I’m missing something obvious, but I’m barely a novice in programming.

So, I figured how to add a heading (for some info) and a button using this:

The code:

dv.header(1, “Test Heading `BUTTON[bwChartStatusButton]”);

This is inline button from Meta Bind plugin, that’s gonna be tied to the hidden regular Meta Bind
button by it’s ID.

The idea is to add a couple of variables that change what info being rendered and need buttons to affect said variables.

The Meta Bind button’s options that catched my eye is:
a) updateMetadata
b) replaceInNote
c) inlineJS

updateMetadata

I could add meta property and make it act as a variable having three separate buttons change it to “Week”, “Month” and “Year” accordingly. But I don’t think it’s going to work for “Back” and “Forward” buttons since updateMetadata won’t take any JS code.

replaceInNote

Obviously would work for scaling buttons.

For the “B”/“F” buttons, in theory I could make a button replace a line with a variable inside codeblock and at the same time replace ITSELF by the new button with different ID.

So it would work, but it would take a whole bunch of hidden buttons with prepared replacement code. And also moving around this chart would be impossible.

inlineJS

Basic JS code would solve all the problems, but since the code for the button is in different code block, I can’t find a way to make it talk with the main code block.

Metadata may be a connection point if I could access dv.bodyChartStatus inside button’s codeblock. But even then I don’t know if there is a way to further affect it, like dv.bodyChartStatus = dv.bodyChartStatus++

So maybe I’m busting my head for no reason and there is some other way of doing this kind of thing?