Skip to content

pie chart labels#14926

Closed
thomasneirynck wants to merge 7 commits intoelastic:masterfrom
thomasneirynck:ppisljar-enh/pieLabels
Closed

pie chart labels#14926
thomasneirynck wants to merge 7 commits intoelastic:masterfrom
thomasneirynck:ppisljar-enh/pieLabels

Conversation

@thomasneirynck
Copy link
Copy Markdown
Contributor

Fixed merge errors of #12174.

This adds label to pie-charts.

@thomasneirynck thomasneirynck added Feature:Visualizations Generic visualization features (in case no more specific feature label is available) release_note:roadmap v6.1.0 v7.0.0 labels Nov 13, 2017
Copy link
Copy Markdown
Contributor

@timroes timroes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just some minor ideas, but besides those LGTM, and I let you decide on these ideas.


<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="truncateLabels">
Truncate
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like "Truncate" is a bit ambiguous. I first thought it's the amount of letters, but it seems to be the pixel width after which a label is truncated. Could we maybe change this to "Maximum (Label) Width" and maybe add a "(px)" (behind the label or the textbox) to make clear in what unit this is?

@alexfrancoeur your thoughts on this?

while (str[endChar - 1] === ' ' || str[endChar - 1] === '-' || str[endChar - 1] === ',') {
endChar = endChar - 1;
}
str = str.substr(0, endChar) + '...';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use the proper ellipsis char (…) instead of three dots here.

.append('text')
.text(function (d) {
if (d.depth === 0) {
return;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you add this.parentElement.remove() here, that wouldn't leave an empty g element for the actual inner donut circle.

Copy link
Copy Markdown

@alexfrancoeur alexfrancoeur left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ppisljar great work! Some (late 😦 ) feedback below:

Upon landing on an empty pie chart (no data in the timeframe), I'm immediately presented with an empty count. Maybe data labels should be off by default? This seems a bit odd to me.

screen shot 2017-11-14 at 12 16 54 pm

When there is data, this also seems a bit odd.
screen shot 2017-11-14 at 12 18 54 pm

Does truncate work? when adding 10 characters I see nothing. When adding 50 I see half. 100 shows all. Is this a percentage? Normally this is done by characters, can you confirm?

screen shot 2017-11-14 at 12 20 29 pm

screen shot 2017-11-14 at 12 21 33 pm

I don't care too much either way but is Show Top Level Only more intuitive then Show Only on Last Level?

screen shot 2017-11-14 at 12 22 56 pm

There are two values associated with every slice of a pie. Should we provide a checkbox for both options? Show percentage and Show value? I'm not sure we can show both at the same time, but I imagine this being a request we'll hear shortly after merging this.

screen shot 2017-11-14 at 12 25 04 pm

Sorry for the late review, hope this helps.

@ppisljar
Copy link
Copy Markdown
Contributor

closing in favour of #12174

@ppisljar ppisljar closed this Nov 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature:Visualizations Generic visualization features (in case no more specific feature label is available) v6.1.0 v7.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants