Html legend

[davejlong]

Adds a basic HTML legend mixin. For now it only supports vertical legends, but I'll be adding options similar to the dc.legend mixin.

[davejlong]

Anyone want to review this pull request?

[gordonwoodhull]

Hi, I took a quick look and it seems like a good idea.

Sorry for the slow turnaround, I have other deadlines and as you can see I've only had time to merge the most trivial PRs. I hope my schedule is opening up soon.

My only concern about this approach in general is that it doubles the amount of code which needs to be fixed when we find problems or want to upgrade legends. But I don't think that's a blocker.

[davejlong]

I intent to keep the HTML legend up to date, as well as continue to add new
features over time, if that helps to put your mind at ease a bit.

On Mon, Apr 28, 2014 at 1:47 PM, Gordon Woodhull
[email protected]:

Hi, I took a quick look and it seems like a good idea.

Sorry for the slow turnaround, I have other deadlines and as you can see
I've only had time to merge the most trivial PRs. I hope my schedule is
opening up soon.

My only concern about this approach in general is that it doubles the
amount of code which needs to be fixed when we find problems or want to
upgrade legends. But I don't think that's a blocker.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/577#issuecomment-41589955
.

Dave Long
Web Application Consultant

(203) 626-1809
www.davejlong.com

[davejlong]

I also think that building responsive charts will always be incredibly difficult without using HTML for the legends.

[gordonwoodhull]

Cool! Can I get your feedback on a few things? I'm trying to understand the big picture here. (Note: I'm not the author of dc.js, just the most active maintainer at the moment.)

1. What is it that makes HTML superior, in your opinion? You mentioned that it's easier to apply CSS - what are the differences there? Is that what you mean by making responsive charts easier?
2. There are two other PRs on legends - "Auto" width for items in horizontal legend #561 and Add support for multiple-line legend items in vertical (default) mode #564. Can you comment on how this will interact with those?
3. There was talk somewhere about making legends actually a first-class chart. Do you think that would help in any way?

Thanks!

[davejlong]

1. HTML legends are a bit easier to work with for people who aren't very familiar with SVG styling. Also using HTML for the legends helps to solve issues that I've seen with the SVG legends such as:
   • Legend items getting cut off when using vertical legends and long labels
   • Automatically switch legend from vertical to horizontal in responsive sites
2. Regarding "Auto" width for items in horizontal legend #561, because each element in the HTML legend is a cell or div, it defaults to auto-width, thus closing the issue.
3. I was planning on adding support for Add support for multiple-line legend items in vertical (default) mode #564 to the HTML legend soon. Not sure how I'd build out the automatic columnization component, but it should be pretty easy to define the max rows for a table.

[manju-reddys]

I strongly feel that HTML legend make more sense and it in-fact make life much easy atleast in the following cases Issue, Issue:

Case-1: huge list of items (see image 1 in our application - summarize data of 300K records since we couldn't show the complete list we added "Others" to show there more items below )

• Showing them as a vertical list would be impossible because the SVG size may not be enough to fit all of them within the view-able area.
• Even if we manage to show with adjusting gaps etc... it will be nightmare for user to walk through the list to find the particular item in the list.
• Otherwise we must provide the arrow (up/down) to indicate more items are available and this logic would be too complicate and also its too much burden to user to click through the list to find the item of interest.

Case-2: Add advance features:

• Its not easy to implement the search or filter feature in SVG when the list is huge to find the item of interest (see google maps - search by typing address - for example how it will be helpful).
• In many cases it will be convenient to take controls of legends items to enable/disable filter on click of item based on certain condition (ex: if user is Guest / Author) - this just an example.
• Would allow to taking advantage of JS frameworks data binding (Angular 2) and custom template to add meaningful presentation etc...
• Add collapse and expand the legend or add more features like drag to position on the chart.

Case-3: Customize (see the google map image)

• Allow to skin the legend to the application theme (material design!).
• Not everyone JS developer are styling experts, many of the JS developer use the CSS frameworks like bootstrap to develop the website/web-applications and those frameworks doesn't provide the styling feature for SVG.

[gordonwoodhull]

Merged via #1392 for 3.0.0