Plotting plug

Ideas
1

Plug to plot things

page1
---
date: 2025-01-01
squirrels: 2
cats: 4
---

page1
---
date: 2025-01-03
squirrels: 4
cats: 4
---

Replicate a subset of the functionality from some plotting library. Perhaps the api could look something like

```plotplug
type: scatter
data: query(from tags.page select {x: date, y: [squirrels, cats]})
2

This could be achieved using Chartist and some SpaceLua.

3

I have tried Chart.js with below space-lua:

local chartjs = js.import("https://cdn.jsdelivr.net/npm/[email protected]/auto/+esm")

function chart(config)
  local canvas = dom.canvas {
    id = "chart-" .. os.time() .. "-" .. math.random()
  }
  local rendered = false

  local function timeout()
    local target = js.window.document.getElementById(canvas.id)
    if not target then
      js.window.setTimeout(timeout, 100)
      return
    end

    if rendered then
      return
    end

    rendered = true
    js.new(chartjs.Chart, target, config)
  end

  js.window.setTimeout(timeout, 100)
  return widget.html(canvas)
end

And it should be used as inline expression, with similar config of its JS version:

${chart {
    type = "bar",
    data = {
      labels = {"A", "B", "C"},
      datasets = {{data = {10, 20, 30}}}
    }
}}

It then turns into something like:

image
image892Ă—429 5.34 KB

But it has some limits:

  1. current js interop doesn’t import static member of an exported class. one of the static member is Chart.register, which is used to enable plugins. so plugins can’t be used
  2. Chart.js uses canvas to render chart, and it loses all drawn content once it’s passed to main frame. so I have to use a timeout to monitor when it’s mounted. it’s better to have a native “mount” event for widget
1 Like