Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Component: Color Legend #721

Closed
mores opened this issue Sep 13, 2019 · 8 comments
Closed

New Component: Color Legend #721

mores opened this issue Sep 13, 2019 · 8 comments
Assignees
Milestone

Comments

@mores
Copy link

mores commented Sep 13, 2019

It would be great if there was a legend component like: https://tilemill-project.github.io/tilemill/docs/guides/advanced-legends/

I would like to make more use of the timeline component - Color coding all the events is one way to communicate some meaning of the model.
But then I need a legend to show what all the different colors mean.

@melloware melloware added this to the FUTURE milestone Sep 13, 2019
@melloware
Copy link
Member

melloware commented Sep 14, 2019

I am not sure this needs to be a JSF component when you can simply add the HTML/CSS directly to your page and customize it. Check out this working demo I just wrote: https://jsfiddle.net/2avrn5L6/3/

@mores
Copy link
Author

mores commented Sep 15, 2019

Yes, I agree it is very easy to add this to html/css. Here is my use case: https://github.com/mores/primefaces-test/tree/timeline001-needLegend

image

If one could simply add
<pe:legend layout="vertical" css="#{customTimelineView.colors}" />
to explain this complicated timeline, it would make life easier.

@melloware
Copy link
Member

melloware commented Sep 15, 2019

Yeah I think it would have to be something like this though because you need to match a text label too.

<pe:legend layout="vertical" title="The Title or Explanation of your Map" source="My Source">
   <pe:legendItem style="background:#F1EEF6;" label="0 - 20%" />
   <pe:legendItem style="background:#BDC9E1;" label="40%" />
   <pe:legendItem style="background:#2B8CBE;" label="41-100%" />
</pe:legend>

I kinda like it more and more now and we could have the title facet and footer facet.

@mores
Copy link
Author

mores commented Sep 15, 2019

colors is a Map:

colors = new HashMap<>(); colors.put("unavailable", "#F03030"); colors.put("available", "#1AA11A" ); colors.put("maybe", "#FFA500" ); colors.put("ready", "#150578" ); colors.put("call", "#78C0E0" ); colors.put("order", "#AAA95A");

@melloware melloware changed the title [ New Component ] - Color Legend New Component - Color Legend Sep 19, 2019
@melloware melloware changed the title New Component - Color Legend New Component: Color Legend Sep 19, 2019
@melloware melloware modified the milestones: FUTURE, 7.1 Sep 20, 2019
@melloware melloware self-assigned this Sep 20, 2019
@melloware
Copy link
Member

Fixed with commit: primefaces-extensions/primefaces-extensions@4cecd92

Usage:

<pe:legend layout="horizontal" values="#{legendController.values}">
	<f:facet name="title">
		Horizontal Title Facet
	</f:facet>
	<f:facet name="footer">
		Source: <a href="http://www.primefaces.org">PrimeFaces Rocks!</a>
	</f:facet>
</pe:legend>

@jepsar
Copy link
Member

jepsar commented Sep 20, 2019

@melloware are we targeting 7.1 now? Shouldn't we bump Java to 1.8 as well then?

https://github.com/primefaces-extensions/master-pom/blob/b42309b58cc5826fadb7f8a003da315e39c27167/pom.xml#L51-L52

@melloware
Copy link
Member

I have been putting that in there but i still may do a 7.0.3 release. I like to get ready for 7.1 once PF releases their first Release Candidate for 7.1.

@melloware melloware modified the milestones: 7.1, 7.0.3 Oct 8, 2019
@melloware
Copy link
Member

@mores 7.0.3 is in Maven central if you want to try this component now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants