Binding a data array as reactive state to a custom (chart) component

[csm-kb]

Hey gang! Coming from tons of experience with React/Next and Vue (and Qt, and countless other things). Turned to vanjs for a light sim design helper tool that lets me visualize simulated game data, because I wanted something new with zero fluff for this side project!

Got started minimally with the Van+Vite example, have been having a blast with it! Been able to get going in minutes, and the docs are super helpful (if a bit UX-unfriendly to navigate for the API reference).

However, I ran into my first fast block (and poked around van's minimal internals to see what's what and why):

• I have a Chart component defined like so, using chart.js:

import van from "vanjs-core";
import LibChart from "chart.js/auto";
import type { ChartConfiguration } from "chart.js/auto";

const { div, canvas } = van.tags;

export const Chart = (config: ChartConfiguration) => {
  const chart = new LibChart(canvas({ id: "simChart" }), config);

  return div(
    chart.canvas,
  );
}

And I want to create a quick reactive UI graph with 2-dimensional array data like so:

import "./style.css";
import van from "vanjs-core";
import { Chart } from "./chart";

const { div, h1, p, button, code } = van.tags;
const app = document.querySelector<HTMLDivElement>("#app")!;


const SimChart = (chartData: [number,number][]) => {
  const unzip = (arr: [number, number][]) => {
    const xs: number[] = [];
    const ys: number[] = [];
    arr.forEach(([x, y]) => {
      xs.push(x);
      ys.push(y);
    });
    return [xs, ys];
  }
  const [xList, yList] = unzip(van.val(chartData));

  return Chart({
    type: "line",
    data: {
      labels: xList,
      datasets: [
        {
          label: "Global Cap (T)",
          backgroundColor: "#0eee8c",
          borderColor: "#0eee8c",
          data: yList,
        },
      ],
    },
    options: {
      scales: {
        x: {
          title: {
            display: true,
            text: "Day",
          },
        },
        y: {
          title: {
            display: true,
            text: "Cap (T)"
          },
          beginAtZero: false,
          ticks: {
            callback: function(value, _index, _ticks) {
              return (value as number).toFixed(3) + "T";
            },
          },
        },
      },
    },
  });
};


const Main = () => {
  // data is x/y pairs of [day, cap in T]
  // there are 60 days in a year
  var data = van.state<[number,number][]>([]);
  var growthRate = 1 + (0.05 / 60);
  (() => {
    var newData: [number,number][] = [[0, 100.0]];
    for (let i = 1; i < 2; i++) {
      newData.push([i, newData[i - 1][1] * growthRate]);
    }
    data.val = newData;
  })();

  const addData = () => {
    let dataValToAdd: [number,number] = [data.val.length, data.val[data.val.length - 1][1] * growthRate];
    data.val = [...data.val, dataValToAdd];
    // console.log(`Added data: ${dataValToAdd} | data len = ${data.val.length}`);
  };

  return div(
    h1(
      "Sim 1980 Design Tool"
    ),
    p(
      { class: "title-text" },
      "Used for visualizing and tuning design data for Sim 1980."
    ),
    button(
      { onclick: addData },
      "Add Data"
    ),
    SimChart(data.val),
    p(),
    code(
      { textContent: () => ("data = " + data.val) }
    ),
  );
};

van.add(app, Main());

And this renders the initial data in the graph well, as you'd expect! The "Add Data" button also works to add data to the state, which does update the code element's text content to show me the (debug) updates.

But I can't get the framework to reactively update that SimChart component in a similar way via any means (direct pass, function pass, state-as-string (ew), etc). And having dug into the source (+google +these boards for none similar), it makes sense with the current implement:

Van presently doesn't care about allowing user-defined components to define state-bound props. I would need to be able to manually call the unexposed bind(), or build an external helper to get the custom properties I'm defining to re-render a different way via some manual DOM action in van... which feels inefficient, when I should in-theory be able to lean on the framework for this!

I've looked extensively through the VanX reactive and list extensions, but they don't seem helpful for this specific case (to pass a reactive array of data to a chart component that needs to update-on-change, versus using a reactive object or rendering components directly from a reactive list), unless I'm slightly misguided.

Anything I should look at in particular for enabling this use case? I have a couple ideas for rewriting my chart component here to handle refresh-on-event, but wanted to introduce the underlying concept as a Q&A request!

[Tao-VanJS]

I took a glance at your code.

I'm wondering whether we should replace

SimChart(data.val)

with

() => SimChart(data.val)

[csm-kb]

Apologies for the delay @Tao-VanJS! I was thinking of splitting it out to its own repo, but I figure my entire side project repo at https://github.com/csm-kb/worksim-designer would make a good use-by-example app 🙇‍♂️

[Tao-VanJS]

Hi @csm-kb,

For your repo, I am afraid I couldn't have a good understanding on what it is about based on its README. Why is it called "Work Sim 1980 Design Tool", which seems to be a strange name? The README says it's a helper tool, but what are exactly the functionalities the tool provides? I tried to preview it and it seems to me as a web page to generate an exponential line chart.

[csm-kb]

So what I'm hearing is, that doesn't satisfy example guidelines (which I'd recommend you define and point to somewhere!)...

I was lazy providing the whole repo and expecting it to be good enough, so I'll create a tailored and well-named minimal example that makes it a lot more clear that it demonstrates how to wrap the third-party graph library as a usable component, re-rendered with state, with a button that generates random graph data.

[Tao-VanJS]

Hi @csm-kb,

There aren't indeed specific guidelines. Anything that is helpful and provides inspiration and insight for the community to learn how to use VanJS are good projects to be included as community examples. The only thing with your example is, I really don't understand what exactly it's trying to do. By previewing the app I thought it was a simple chart application but the README says it's a tool (and it's confusing to me on what exactly the functionalities this tool is offering). If I am confused by this I am afraid other people in the community might have the similar feelings as well.

[csm-kb]

@Tao-VanJS You're good, and I totally understand! Here, this is much better: https://github.com/csm-kb/vanjs-chartjs-example