Charts design?

[bryceosterhaus]

Hey, I was wondering what the goal for charts is. Are we expecting that clay-charts will match lexicon design? For example, I am looking at the pie chart at https://lexicondesign.io/docs/patterns/Charts/charts.html and noticed that the legend has the actual percentage value for the label. Is that something that will be available out of the box for charts? Also, for bar charts, will it work out of the box to have multiple bars and labels with different colors?

These are the designs I am hoping for that would work out of the box for charts.

[bryceosterhaus]

cc @jbalsas

[jbalsas]

Hey @bryceosterhaus, it is definitely the goal of Clay to match Lexicon design out of the box with minimal effort. We'll double-check with the Lexicon team and work on these changes based on their feedback.

Could you share some kind of simple snippet of how you're using it? Just to make sure we reproduce the right thing?

Thanks for letting us know!

[bryceosterhaus]

We aren't doing anything special. We are just using it as is in JSX.

Very similar to https://hosting-metalcharts.wedeploy.io/avdanced-examples/x-axis-tick-formatting/ and https://hosting-metalcharts.wedeploy.io/simple-examples/pie/

[julien]

Hi @bryceosterhaus,

Concerning the labels, you could use the chart's legend option, which will let you set the position's position.

We need to add the missing (contents) property to support legend templates like in this example: https://naver.github.io/billboard.js/demo/#Legend.LegendTemplate2, which would let us customize the labels formatting.

Concerning the chart designs, we might need to review them with the UX team since legends usually contain rectangles instead of circles, but thinking of a solution, we could also solve it by providing custom templates if is a good option.

[julien]

Hey again @bryceosterhaus,

I added the missing contents property to the legend option.

It seems we might need to contribute to billboard.js, so that the "data" gets passed to the template function, because for the moment it only receives color and title as arguments.

[bryceosterhaus]

@julien Thanks for the response. I think it would also be helpful for the custom legend if we didn't have to create an additional html element to pass to it. Currently, if you add a custom legend it requires you to pass the bindto: "#legend", option. Also it seems weird that if you create a custom legend it is outside the chart svg, whereas the default legend is with the other chart elements.

[julien]

@bryceosterhaus, I agree and understand your concerns. This "API" is from billboard.js, so I guess we can to talk with them if we want to modify the current behaviour, or think of another solution. /cc @Robert-Frampton, do you have any thoughts on this?

[thektan]

Hi @julien! Just checking in to see if any additional progress has been made on this issue.

[julien]

Hi @thektan,

No additional progress has been made on this "issue".

If we want to match the design as it is seen in the screenshots we can do it with the legend option. If you have more doubts, I'll be glad to help.

[jbalsas]

Hey @victorvalle, @emilianocicero, could we get a final say on this design and what's the proper look of these charts?

The main differences from the current implementation are:

• Gap in pie sections
• Legend shapes and values
• Columns colours (being just one series, should all columns have the same colour, or should we allow different colours for the same set?)

Thanks!

[julien]

After talking with @victorvalle and @EmilianoCicero,

We will:

• Provide the template for the pie chart
• Work on the pie chart "gap" to match Lexicon's design
• The bar chart example will be updated in related InVision documents

If you have any doubts or feedback, please let us know. Thanks!

[victorvalle]

Related to:

• Legend shapes: the shape of each item the legend has not really the priority. Please do not spend time on that now.
• Legend values: sometimes the legend could incorporate the value if it is easier to read. The designer must have the final decision on whether to use it or not.
• Gap: We agreed with Julien that the should stay as the design marks.
• Bar chart: it will be updated. The different colors or color scale is only for groups, same color where they are not grouped.

[jbalsas]

Doing some spring-cleaning... closing all issues labeled as 2.x that are not type:bug since 2.x is in maintenance and we won't be proactively be taking these ones.

In this case we're in fact already working on https://github.com/liferay/clay/milestone/14, so no need to keep on this, but a good reminder of the conversation @bryceosterhaus!

Thanks!