node shape size depends on the content

[mssayari]

Hi,

I'm trying to make this graph with this package on vue 3

https://twitter.com/hturan/status/1641780868640374784?s=12&t=dOgaGILz9Qbms-_hYG20VA

I've made most of them, but the problem I couldn't solve is when we create a rectangle shape, we have to pass static size for width and height, but here I need to have a dynamic size by considering the text inside it.

is there any way to make it dynamic?

this is my rectangle shape code.

export default {
    shapeSize: 120,
    shapeBuilder: shapeBuilder,
};

function shapeBuilder(data, TemplateAPI) {
    const { ShapeStyle, TextCollection, CollectionStyle,Shape,TextShape } = TemplateAPI;

    const text = TextShape(data.payload?.title ?? "",[
        ShapeStyle("font-size", "18px", true),
        ShapeStyle("fill", "#000000", true),
    ]);
    
    const shape = Shape.Rectangle(300, 250, 10);

    shape.select("path").style("fill", data.payload?.color ?? "#22d3ee");

    const titleShape = TextCollection(data.payload?.title ?? "", CollectionStyle(70, 100, 0, 0, 0, 10, 5), [
        ShapeStyle("class", "gly_text.light"),
        ShapeStyle("font-size", "1em"),
    ]);
    shape.append(() => titleShape.node());
    
    return shape;
}

[jason-rietzke]

Hey @mssayari nice to have you 🙂
I understand your problem and this might not be too easy, I would like to try something though of what I think might work.
Please hang in there and I come back to you soon.

If you'd like you are welcome to join our Discord server to stay in touch and get noticed about updates and developments in and around graphly

[jason-rietzke]

Alright I converted this issue to a discussion since this covers more of a general aspect that can not be easily reflected in an update of the library.

Solution

I took a look at your example code and I believe to have come up with a solution for your use case.

const schema = {
	type: "object",
	properties: {
		text: { type: "string" },
		color: { type: "string" },
	},
	required: ["text"],
};

export default {
	shapeSize: 300,
	shapePayload: schema,
	shapeBuilder: shapeBuilder,
};

function shapeBuilder(data, TemplateAPI) {
	const { ShapeStyle, TextCollection, CollectionStyle, Shape, isLight } = TemplateAPI;
	const config = {
		color: data.payload?.color || "#22d3ee",
		maxHeight: 250,
		maxRows: 10,
	};

	const shape = Shape.create("g");
	const textShape = TextCollection(
		data.payload?.text ?? "",
		CollectionStyle(config.maxHeight, 280, 10, 20, 4, 2, config.maxRows),
		[
			ShapeStyle("class", isLight(config.color) ? "gly_text.black" : "gly_text.white"),
			ShapeStyle("font-size", "1em"),
		]
	);
	const occupiedRows = textShape.selectAll("g[id*='row']").size();
	const background = Shape.Rectangle(300, (config.maxHeight + 15) * (occupiedRows / config.maxRows), 10);
	background.select("path").style("fill", config.color);
	shape.append(() => background.node());
	shape.append(() => textShape.node());

	return shape;
}

This template should result in something like this:

shape.mp4

What did I do

This solution takes advantage of the way how Graphly generates collections. It basically counts the number of generated rows within a collection group and applies the calculated height to the background rectangle.
Since this is not meant to be used this way by the library I can not guarantee this solution will work for any future version of graphly-d3. However, I don't think the way collections are generated will change anytime soon. I have tested this with version 1.5.0 of the library.

I took the liberty of refining a few things in the template file. Besides providing a shapePayload schema (see here), the text color now adjusts based on the background color instead of the theme used and configuring the fallback color, maxHeight and maxRows is easier by changing the config object.

I hope this helps you and if you have any more questions, feel free to ask them in this thread or open a new discussion 🙂

[mssayari]

Hi @jason-rietzke

Thanks for the quick reply, yeah it works fine. 🙏
Also thanks for the great library

[jason-rietzke]

No problem, I'm glad it works