feat(patterns): Allow definig custom background patterns

[julien]

Issue

#193

Details

Allow defining background patterns via options

[coveralls]

Changes Unknown when pulling 65b2cc6 on julien:patterns into ** on naver:master**.

[coveralls]

Changes Unknown when pulling 4b4a638 on julien:patterns into ** on naver:master**.

[netil]

Great work again @julien! I have some ideas to comment.

How about adding helper function?

Is kind of tedious appending elements directly. How about giving some helper function to facilitate and write less code?

• internals/util.js

/**
 * Helper to append an element
 * @param {d3.selection} to Destination element
 * @param {String} tag A tag name string
 * @param {Object} attr Attributes value
 * @return {d3.selection} Appended element
 * @private
 */
const appendElement = (to, tag, attr) => {
	const pattern = to.append(tag);

	for (let x in attr) {
		pattern.attr(x, attr[x]);
	}

	tag === "pattern" && !("patternUnits" in attr) &&
		pattern.attr("patternUnits", "userSpaceOnUse");

	return pattern;
};

• internals/ChartInternal.js

// Call patterns function if it's defined
if (isFunction(config.pattern)) {
	config.pattern(defs, appendElement);
}

• User generation code:
  User can facilitate appending elements using a helper function.
  Or can decide handle directly with defs element

pattern: function(defs, helper) {
	const size = 32;
	const linesHorizontal = helper(defs, "pattern", { id: "lines-horizontal", width: size, height: size });
	const linesVertical = helper(defs, "pattern", { id: "lines-vertical", width: size, height: size });
	
	for (let i = 2; i <= 30; i += 4) {
		const attr = { x1: 0, x2: 32, y1: i, y2: i };
	
		helper(linesHorizontal, "line", attr);
		helper(linesVertical, "line", attr);
	}
	
	const circles = helper(defs, "pattern", { id: "circles", width: 10, height: 10, fill: "rgb(230, 0, 2)" });
	
	helper(circles, "circle", { cx: 3, cy: 3, r: 3});
	helper(circles, "circle", { cx: 13, cy: 13, r: 3 });
}

Data color indication

The representation of the color in legend area is replaced using stroke: url(#id);.

Is okay for the legend in below case, which is within svg element, but for tooltip element can't be displayed the correct pattern due to tooltip is located outside of svg element.

And also for tooltip, is used background-color: url(#id); property value, which isn't correct.

There's customizable legend option too.

• https://naver.github.io/billboard.js/demo/#Legend.LegendTemplate1

IMO, it's difficult find a proper solution for this. The arbitrary will be getting fill value from the pattern and set as a color value for non svg within elements.

Do you have any better idea on this?

[julien]

Hi @netil,

How about adding helper function?

Thanks for the suggestion, it seems like a good idea to me too, I'll go ahead and add that.

Data color indication

That's a good point which I hadn't thought about and I understand your concerns.

Maybe we could try adapting the tooltip "template" to use an svg element rather than a span with a background-color, and use the same approach for the legend when patterns are in use.

This screenshot might help understand it better

Thinking about this a bit more, I also think that it should be possible to use colors and patterns together, so it might be better for the patterns to be monochromatic (this might also avoid having to use patterns in legend and tooltip).

Anyway, I will start with the helper function and let you know which solution I came up with.

Thanks.

[julien]

Hi again @netil,

I've got an update, but I will need your help and advice to complete the feature.

My first implementation is too simple because it does not allow combining colors and patterns.

Ideally, one should be able to use a background color (defined by the css fill property) and (optionally) a pattern (also defined by the css fill property).

Since svg elements do not support mutliple fill css properties; I made changes in arc.js to "duplicate" the path of the arc. The first path uses the background color and the second path uses the pattern.

(I thought that attaching an image would make it easier to understand)

I had to modify the elements to which some event handlers are attached depending on whether patterns are specified in the config or not, but this fixes the issue of not being able to combine colors and patterns.

I also made similiar changes to legend and tooltip to keep everything consistent.

There is just one issue though 😅:

When clicking on the "legend items", the second path's d attribute (the one with the pattern fill) doesn't get updated and this creates a "glitch" effect and throws an error in the browser console similar to this:

d3.js:3487 Error: <path> attribute d: Expected arc flag ('0' or '1'), "…35.85,135.85,0,0.014924348603354…".

This is probably because this second path is not created exactly in the same way as the first path, (and does not use the d3 attrTween function) but I was not really sure on how to do that, and this is what I'd need help with.

If you have time could you please have a look and possibly guide me in the right direction.

To test this feature, you can use the following code

const chart = bb.generate({
  data: {
    columns: [
      ['data1', 20],
      ['data2', 35],
      ['data3', 45]
    ],
    type: "pie",
    pattern: [
      "#circles",
      "#lines-horizontal",
      "#lines-vertical"
    ],
    // pattern: {
    //   data1: "#circles",
    //   data2: "#lines-horizontal",
    //   data3: "#lines-vertical"
    // }
  },
  color: {
    pattern: ["red", "gold",  "green"]
  },
  pattern: function(defs, helper) {
    const circles  = defs.append("pattern")
      .attr("id", "circles").attr("patternUnits", "userSpaceOnUse")
      .attr("width", "16").attr("height", "16")
          .append("g").style("fill", "#000").style("opacity", "0.2");

    circles.append("circle").attr("cx", 3).attr("cy", 3).attr("r", 3);
    circles.append("circle").attr("cx", 13).attr("cy", 13).attr("r", 3);

    // lines-horizontal
    const linesHorizontal = defs.append("pattern")
      .attr("id", "lines-horizontal").attr("patternUnits", "userSpaceOnUse")
      .attr("width", "32").attr("height", "32");

    for (let i = 2; i <= 30; i += 4) {
      linesHorizontal.append("line")
        .attr("x1", "0").attr("x2", "32")
        .attr("y1", i).attr("y2", i)
        .style("stroke", "#000")
        .style("opacity", "0.2");
    }

    // lines-vertical
    const linesVertical = defs.append("pattern")
      .attr("id", "lines-vertical").attr("patternUnits", "userSpaceOnUse")
      .attr("width", "32").attr("height", "32");

    for (let i = 2; i <= 30; i += 4) {
      linesVertical.append("line")
        .attr("y1", "0").attr("y2", "32")
        .attr("x1", i).attr("x2", i)
        .style("stroke", "#000")
        .style("opacity", "0.2");
    }
  },
  bindto: '#chart'
});

A few notes

• Although, in the example code above, I'm not using the new helper function, it has been added

• Once we find a solution to the "glitch" issue (and if you agree), I'd have to apply the similar change for area and bar charts

Thanks in advance for your help.

[netil]

@julien, it was good approach, but adding another <path> element it seems not really good idea in terms of performance(or compatibility) and side effects(like 'glitch' you mentioned), which can cause.

I just digged and figure out that adding a <rect> with the size of the pattern can make to style the background color.

I think this approach will degrade the possibility of unexpected behavior and is more clear, because it's fully making divide between the pattern and the data area.

So, basically the previous change was okay. If user needs to set bg color, user can define a pattern like that.

What do you think?

[julien]

@netil ,

You're right, adding the second path element was not the best approach and I think your solution is better. I've managed to get it working that way.

I'll send another pull request with more details.

Thanks!

[coveralls]

Changes Unknown when pulling 99d5890 on julien:patterns into ** on naver:master**.

[netil]

To be worked properly, the pattern option should return an array of element containing the id and <pattern> pairs.

[
	{ id, <pattern> },
	...
]

But, it seems the use of colorize is required(not optional).
I'm not sure if this interface is straight forward. I think it should provide more simple way on apply patterns.

Let me think more about it and hope you too.

[jbalsas]

Hey @netil, @julien, I think it might make it simpler if we just assimilate the API inside the color config like:

const chart = bb.generate({
  data: {
    columns: [
      ['data1', 20],
      ['data2', 35],
      ['data3', 45]
    ],
    type: "pie",
  },
  color: {
    pattern: ["red", "gold",  "green"],
    tiles: function() {
        // Returns an array of <pattern> objects
    }
  });

There's really no need to pass in neither colors nor the colorize helper, which we do automatically inside the colors class.

[julien]

hey @netil ,

I've updated the code according to @jbalsas's suggestion.
Tell me what you think when you can.

Thanks!

[coveralls]

Changes Unknown when pulling 26c040c on julien:patterns into ** on naver:master**.

[netil]

Hi, @julien I just merged the PR with some code changes and added some more test cases.
Thanks again for the contribution!

[julien]

@netil Thanks!
Always happy to contribute.