Embed Vega-Lite Diagrams in Antora

Question

I'm trying to embed this vega-lite diagram in my antora docs: https://vega.github.io/vega-lite/examples/line_overlay.html

My Asciidoc file looks like this:

... some text ...

== Attachments
[vegalite, rendered-vega-image, svg]
----
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {"url": "data/stocks.csv"},
  "mark": {
    "type": "line",
    "point": true
  },
  "encoding": {
    "x": {"timeUnit": "year", "field": "date"},
    "y": {"aggregate":"mean", "field": "price", "type": "quantitative"},
    "color": {"field": "symbol", "type": "nominal"}
  }
}
----

... some more text ...

The problem is the CSV file containing my data is not found. I tried every path I imagined ... relative and absolute filesystem paths and relativ and absolute http urls. Still I always get this message:

[DONE] build ui bundle
Skipping vegalite block. No such file: http://localhost:8080/vegalite/svg/eNpVkEFywyAMRfc5BcN0mdibdpNtj9D0AAQrWA0gArKnnozvXoHbpl0Zv9F_X3DfKaWfih0hGH1UemRO5dj3MzjTOeRxOndI_TbQ6MEjQz8_dx-Fot7X_ADFZkyMAsTxxmSvKmW0UBRd1Is6gR3VK4VkIlY2Q1YnDNB95w3X8ruesq-Cu2E2dgwQuQyY1z5QRKaM0R08OVe_GRJlllNfal3pbJn12nTB5GvVyVn-eElQpR4jtDphiTCyQM4TCNliEC0NInxEP9tSLIu-S3-VLGCy3it9QfBDBbI6bLUyv7R541yWdxJ-1AFM_DffXqWSn7Vuk4mMbBjnh8iSp9xkv8GyhDP5v8lIAaPxeq032K1fIi6OZQ==
[DONE] build docs

The Skipping vegalite block should not appear.

I tried vega-lite with data which is defined directly in the json block. This snippet works. So Vega-Lite in general works (I'm using a Kroki Server for diagram generation).

[vegalite, rendered-vega-image, svg]
----
{
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
----

Defining my data directly inside the diagram definition is not a solution for me. Right now I'm just trying to make it work using the demo-CSV file. But afterwards I will switch to my own autogenerated, large CSV file. Both my real CSV and the Demo File are located in docs/modules/technical-docs/assets/attachments/monitoring-logging-reporting/stocks.csv.

My general setup consists of several projects.

1. Project containing the antora playbook und shell-script to generate my docs on my localhost
2. Project containing Asciidoc, the CSV files and a bunch of other docs and source code
3. Several other projects containing asciidoc docs which are not relevant for the problem at hand.

Anyone got any thougts? Thanks for yout help.

Answer 1

Kroki provides security levels that restrict access to files on the file system and on the network. Each level includes the restrictions enabled in the prior security level:

• UNSAFE: disables any security features.
• SAFE: Assume the diagram libraries secure mode request sanitization is sufficient.
• SECURE: prevents attempts to read files from the file system or from the network.

By default, Kroki is running in SECURE mode.

As a result, "data": {"url": "data/stocks.csv"} will be removed/ignored.

If you are using Asciidoctor Kroki, the preprocessor should resolve the path, read the content and replace data.url with the actual values. See: https://github.com/Mogztter/asciidoctor-kroki

Alternatively, and since you are running a local instance of Kroki, you can use KROKI_SAFE_MODE=unsafe environment variable to configure the safe mode to unsafe.