Is anyone familiar with Vega-Lite? I need to create a dynamic grid

Airtable has an extension for Vega-Light. I need the this functionality in Bubble so that I can create dynamic grids. I can sorta do it using repeating groups, but the column quantities are dynamic, and with a grid of typically between 600 to 1,000 “cells” it’s very slow to load.

Here is a small section of one we currently have in use using Airtable. The other challenge with using repeating groups is that the cells aren’t always the same size, or oriented the same direction.
image

To create this you have a table of the coordinates for each “box.” It’s basically a fancy graphing platform.

I greatly appreciate any suggestions on how to incorporate this application, or other strategies to accomplish this. I’, willing to pay for a plugin to be built if necessary.

More information at Vega-Lite Airtable Extension

Well shux.

Consider using SVG

Hi Vini,

What is that?

You can use SVG to draw arbitraty shapes, it will still be lots of work, but may be doable: Adding vector graphics to the web - Learn web development | MDN
and
Using SVG | CSS-Tricks - CSS-Tricks

Should give you an idea of what I am talking about. Maybe it is not the right tool, I’m not familiar with Vega-Light, I just thought of it when seeing these shapes.

1 Like

Thank you for sharing. I’ll check it out.

Hi @vini_brito ,

I was able to accomplish it with SVG, JavaScript like you suggested, and A LOT of ChatGPT. It’s quite involved! It’s not as sweet as the AirTable Vega-Lite plug-in, but eventually it’ll get there. It’s all dynamic so it’s a one-time build.

Thanks again for the tip!

Here’s the beginnings of it.

2 Likes

That is so cool man! :grinning_face_with_smiling_eyes:
You can also use programs like Inkscape and Adobe Illustrator to give some help in building the SVG, then later programmatically target specific pieces to change their colors, size, visibility, etc whatever you need.
I suggest Inkscape.

Remember that SVG’s are super interactive, they can contain code inside of them so you can react to clicks and trigger plugin custom events (workflows) in Bubble.

1 Like

Thanks for the feedback. Yea, that’s the goal with this. Each “rectangle” will change color according to the status of what it represents. Then hovering over one will give a little more information, and clicking will present everything. I tested that out before I proceeded with figuring it all out. Was pretty sweet. Worth the effort!

Thanks again!

1 Like

How do you do this? This is awesome! Is it a custom plugin you are making?

For context, I am building a CRM for a self-storage platform and they want to allows stores to create a site map of their store with all the units in it. What you’re doing looks like I can build something like this using SVGs

Hi @bkerryk

Yes, it would be possible to create something like that. You’ll need some SVG, JSON, and some Javascript. Here’s a brief sample of what I learned. For an overly simple scenario, let’s say you have a 24 unit self storage property like this:

image

That was actually generated from the code below.

You’ll need the coordinates for each unit. I made these 5’ x 10’ each, and created a matrix that would represent the coordinates for each unit. You can see that in the JSON that’s a part of the sample.

<div id="grid-container"></div>

<script>
// Complete grid data in JSON format
var jsonData = [
  {"Unit": 1, "MinX": 0, "MinY": 0, "MaxX": 5, "MaxY": 10},
  {"Unit": 2, "MinX": 5, "MinY": 0, "MaxX": 10, "MaxY": 10},
  {"Unit": 3, "MinX": 10, "MinY": 0, "MaxX": 15, "MaxY": 10},
  {"Unit": 4, "MinX": 15, "MinY": 0, "MaxX": 20, "MaxY": 10},
  {"Unit": 5, "MinX": 20, "MinY": 0, "MaxX": 25, "MaxY": 10},
  {"Unit": 6, "MinX": 25, "MinY": 0, "MaxX": 30, "MaxY": 10},
  {"Unit": 7, "MinX": 30, "MinY": 0, "MaxX": 35, "MaxY": 10},
  {"Unit": 8, "MinX": 35, "MinY": 0, "MaxX": 40, "MaxY": 10},
  {"Unit": 9, "MinX": 40, "MinY": 0, "MaxX": 45, "MaxY": 10},
  {"Unit": 10, "MinX": 45, "MinY": 0, "MaxX": 50, "MaxY": 10},
  {"Unit": 11, "MinX": 50, "MinY": 0, "MaxX": 55, "MaxY": 10},
  {"Unit": 12, "MinX": 55, "MinY": 0, "MaxX": 60, "MaxY": 10},
  {"Unit": 13, "MinX": 0, "MinY": 10, "MaxX": 5, "MaxY": 20},
  {"Unit": 14, "MinX": 5, "MinY": 10, "MaxX": 10, "MaxY": 20},
  {"Unit": 15, "MinX": 10, "MinY": 10, "MaxX": 15, "MaxY": 20},
  {"Unit": 16, "MinX": 15, "MinY": 10, "MaxX": 20, "MaxY": 20},
  {"Unit": 17, "MinX": 20, "MinY": 10, "MaxX": 25, "MaxY": 20},
  {"Unit": 18, "MinX": 25, "MinY": 10, "MaxX": 30, "MaxY": 20},
  {"Unit": 19, "MinX": 30, "MinY": 10, "MaxX": 35, "MaxY": 20},
  {"Unit": 20, "MinX": 35, "MinY": 10, "MaxX": 40, "MaxY": 20},
  {"Unit": 21, "MinX": 40, "MinY": 10, "MaxX": 45, "MaxY": 20},
  {"Unit": 22, "MinX": 45, "MinY": 10, "MaxX": 50, "MaxY": 20},
  {"Unit": 23, "MinX": 50, "MinY": 10, "MaxX": 55, "MaxY": 20},
  {"Unit": 24, "MinX": 55, "MinY": 10, "MaxX": 60, "MaxY": 20}
];

// Create the SVG element
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
svg.setAttribute("width", 620);
svg.setAttribute("height", 220);

// Add the rectangles (units) to the SVG
jsonData.forEach(function(unit) {
  var rect = document.createElementNS(svgns, "rect");
  rect.setAttribute("x", unit.MinX * 10); // Multiplying by 10 for scaling purposes
  rect.setAttribute("y", unit.MinY * 10);
  rect.setAttribute("width", (unit.MaxX - unit.MinX) * 10);
  rect.setAttribute("height", (unit.MaxY - unit.MinY) * 10);
  rect.setAttribute("fill", "none");
  rect.setAttribute("stroke", "black");

  svg.appendChild(rect);

  var text = document.createElementNS(svgns, "text");
  text.setAttribute("x", (unit.MinX + unit.MaxX) * 5); // Centering the text in the rectangle
  text.setAttribute("y", (unit.MinY + unit.MaxY) * 5);
  text.setAttribute("dominant-baseline", "middle");
  text.setAttribute("text-anchor", "middle");
  text.textContent = unit.Unit;

  svg.appendChild(text);
});

// Append the SVG to the container
document.getElementById("grid-container").appendChild(svg);
</script>

Paste that into an HTML element on your page and you’ll get the grid above. That’s a very brief example, but hopefully it will help you get started. Normally you wouldn’t include the JSON as a part of the script, you would call it instead. But it was the simplest way to present this.

Best of luck!

1 Like

Thank you! I get the approach, I’ll do some playing and see where I land. Cheers

1 Like