Progress / Step UI Question

I’m looking to make a step UI where icons are shown and change color as the user steps through the process. This is easy by itself, but what I really want for the “look” is a line that connects each of these icons. See this picture for an example.

I can get this to work with an XY Panel and a Canvas element for the line. But this will really break responsiveness. Any other ideas?

Here is an example of what I have with the XY Panel. On a smaller screen the third icon just flows over the side.

Is the right idea to make this for each group of screen sizes and select based on screen width?

I’m on my phone right now so I can’t share links very easily, but my recent progress bar custom component, which supports labels could likely be adapted to do this. That is, this could be considered a line chart with text labels (in my case I used a bar chart with text labels).

The Vega lite library that I used for that component supports icons as well.

1 Like

I took a stab and got pretty close. If you were to extrapolate from this vega-lite specification (json), you could turn this into a custom Anvil component (as I did with the progress bar).

Vega-lite spec to get you started:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"values": [{"x": 1, "y": 1, "z": "🔒"}, {"x": 2, "y": 1,"z": "👨"}, {"x": 3, "y": 1, "z": "🏳"}]},
  "width": 500,
  "height": 200,
  "layer": [
    {"mark": "line"},
    {"mark": {"type": "point", "size": 3000, "opacity": 1, "fill": "white"}},
    {"mark": {"type": "text", "size": 20, "color": "black", "dy": 40}, 
      "encoding": 
        {"text": {"field": "x", "type": "quantitative"}}
    },
    {"mark": {"type": "text", "size": 20},
     "encoding": {
        "text": {"field": "z", "type": "nominal"}}
  }
    ],
  "encoding": {
    "x": {"field": "x", "type": "quantitative", "axis": null, "scale": {"domain": [0, 4]}},
    "y": {"field": "y", "type": "quantitative", "axis": null, "scale": {"domain": [0, 2]}}
  }
}

2 Likes

Wow impressed with this custom complement and Vega lite. Thanks!!

1 Like

In my opinion, I don’t think anyone is doing “grammar of graphics” as well as the vega/vega-lite teams. Their approach is so well thought out, and as a result, the concepts become very composable. It’s like using Lego but for data viz :brick:.

1 Like