Skip to content

Commit

Permalink
[8.x] [kbn/flot-charts] Use jQuery methods to build legends (#199871) (…
Browse files Browse the repository at this point in the history 
…#200078)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[kbn/flot-charts] Use jQuery methods to build legends
(#199871)](#199871)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nick
Peihl","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-13T19:15:18Z","message":"[kbn/flot-charts]
Use jQuery methods to build legends (#199871)\n\n##
Summary\r\n\r\nUpdates the kbn/flot-charts package to use jQuery methods
for
legend\r\nconstruction.","sha":"1f5fe1d7ceee071dcfc361534d068cdaecb5b098","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Monitoring","Team:Presentation","release_note:skip","v9.0.0","backport:all-open"],"title":"[kbn/flot-charts]
Use jQuery methods to build
legends","number":199871,"url":"https://github.com/elastic/kibana/pull/199871","mergeCommit":{"message":"[kbn/flot-charts]
Use jQuery methods to build legends (#199871)\n\n##
Summary\r\n\r\nUpdates the kbn/flot-charts package to use jQuery methods
for
legend\r\nconstruction.","sha":"1f5fe1d7ceee071dcfc361534d068cdaecb5b098"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199871","number":199871,"mergeCommit":{"message":"[kbn/flot-charts]
Use jQuery methods to build legends (#199871)\n\n##
Summary\r\n\r\nUpdates the kbn/flot-charts package to use jQuery methods
for
legend\r\nconstruction.","sha":"1f5fe1d7ceee071dcfc361534d068cdaecb5b098"}}]}]
BACKPORT-->

Co-authored-by: Nick Peihl <[email protected]>
  • Loading branch information
@kibanamachine @nickpeihl
kibanamachine and nickpeihl authored Nov 13, 2024
1 parent 014d96b commit 85617c6
Showing 1 changed file with 129 additions and 104 deletions.
233 changes: 129 additions & 104 deletions packages/kbn-flot-charts/lib/jquery_flot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2711,110 +2711,135 @@ Licensed under the MIT license.

function insertLegend() {

if (options.legend.container != null) {
$(options.legend.container).html("");
} else {
placeholder.find(".legend").remove();
}

if (!options.legend.show) {
return;
}

var fragments = [], entries = [], rowStarted = false,
lf = options.legend.labelFormatter, s, label;

// Build a list of legend entries, with each having a label and a color

for (var i = 0; i < series.length; ++i) {
s = series[i];
if (s.label) {
label = lf ? lf(s.label, s) : s.label;
if (label) {
entries.push({
label: label,
color: s.color
});
}
}
}

// Sort the legend using either the default or a custom comparator

if (options.legend.sorted) {
if ($.isFunction(options.legend.sorted)) {
entries.sort(options.legend.sorted);
} else if (options.legend.sorted == "reverse") {
entries.reverse();
} else {
var ascending = options.legend.sorted != "descending";
entries.sort(function(a, b) {
return a.label == b.label ? 0 : (
((a.label < b.label) != ascending ? 1 : -1) // Logical XOR
);
});
}
}

// Generate markup for the list of entries, in their final order

for (var i = 0; i < entries.length; ++i) {

var entry = entries[i];

if (i % options.legend.noColumns == 0) {
if (rowStarted)
fragments.push('</tr>');
fragments.push('<tr>');
rowStarted = true;
}

fragments.push(
'<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:4px;height:0;border:5px solid ' + entry.color + ';overflow:hidden"></div></div></td>' +
'<td class="legendLabel" data-test-subj="flotLegendLabel">' + entry.label + '</td>'
);
}

if (rowStarted)
fragments.push('</tr>');

if (fragments.length == 0)
return;

var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>';
if (options.legend.container != null)
$(options.legend.container).html(table);
else {
var pos = "",
p = options.legend.position,
m = options.legend.margin;
if (m[0] == null)
m = [m, m];
if (p.charAt(0) == "n")
pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
else if (p.charAt(0) == "s")
pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;';
if (p.charAt(1) == "e")
pos += 'right:' + (m[0] + plotOffset.right) + 'px;';
else if (p.charAt(1) == "w")
pos += 'left:' + (m[0] + plotOffset.left) + 'px;';
var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(placeholder);
if (options.legend.backgroundOpacity != 0.0) {
// put in the transparent background
// separately to avoid blended labels and
// label boxes
var c = options.legend.backgroundColor;
if (c == null) {
c = options.grid.backgroundColor;
if (c && typeof c == "string")
c = $.color.parse(c);
else
c = $.color.extract(legend, 'background-color');
c.a = 1;
c = c.toString();
}
var div = legend.children();
$('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').prependTo(legend).css('opacity', options.legend.backgroundOpacity);
if (options.legend.container != null) {
$.find(options.legend.container).html("");
} else {
placeholder.find(".legend").remove();
}

if (!options.legend.show) {
return;
}

var entries = [], lf = options.legend.labelFormatter, s, label, i;

// Build a list of legend entries, with each having a label and a color
for (i = 0; i < series.length; ++i) {
s = series[i];
if (s.label) {
label = lf ? lf(s.label, s) : s.label;
if (label) {
entries.push({
label: label,
color: s.color
});
}
}
}

// No entries implies no legend
if (entries.length === 0) {
return;
}

// Sort the legend using either the default or a custom comparator
if (options.legend.sorted) {
if ($.isFunction(options.legend.sorted)) {
entries.sort(options.legend.sorted);
} else if (options.legend.sorted === "reverse") {
entries.reverse();
} else {
var ascending = options.legend.sorted !== "descending";
entries.sort(function(a, b) {
return a.label === b.label ? 0 : (
(a.label < b.label) !== ascending ? 1 : -1 // Logical XOR
);
});
}
}

// Generate markup for the list of entries, in their final order
var table = $("<table></table>").css({
"font-size": "smaller",
"color": options.grid.color
}), rowBuffer = null;

for (i = 0; i < entries.length; ++i) {

var entry = entries[i];

if (i % options.legend.noColumns === 0) {
if (rowBuffer !== null) {
table.append(rowBuffer);
}
rowBuffer = $("<tr></tr>");
}

var colorbox = $("<div></div>").css({
"width": "4px",
"height": 0,
"border": "5px solid " + entry.color,
"overflow": "hidden"
}),

borderbox = $("<div></div>").css({
"border": "1px solid " + options.legend.labelBoxBorderColor,
"padding": "1px"
});

rowBuffer.append(
$("<td></td>").addClass("legendColorBox").append(borderbox.append(colorbox)),
$("<td></td>").addClass("legendLabel").html(entry.label)
);
}

table.append(rowBuffer);

if (options.legend.container != null) {
$(options.legend.container).html(table);
} else {
var pos = { "position": "absolute" },
p = options.legend.position,
m = options.legend.margin;
if (m[0] == null) {
m = [m, m];
}
if (p.charAt(0) === "n") {
pos.top = (m[1] + plotOffset.top) + "px";
} else if (p.charAt(0) === "s") {
pos.bottom = (m[1] + plotOffset.bottom) + "px";
}
if (p.charAt(1) === "e") {
pos.right = (m[0] + plotOffset.right) + "px";
} else if (p.charAt(1) === "w") {
pos.left = (m[0] + plotOffset.left) + "px";
}
var legend = $("<div></div>").addClass("legend").append(table.css(pos)).appendTo(placeholder);
if (options.legend.backgroundOpacity !== 0.0) {

// put in the transparent background
// separately to avoid blended labels and
// label boxes
var c = options.legend.backgroundColor;
if (c == null) {
c = options.grid.backgroundColor;
if (c && typeof c === "string") {
c = $.color.parse(c);
} else {
c = $.color.extract(legend, "background-color");
}
c.a = 1;
c = c.toString();
}
var div = legend.children();

// Position also applies to this
$("<div></div>").css(pos).css({
"width": div.width() + "px",
"height": div.height() + "px",
"background-color": c,
"opacity": options.legend.backgroundOpacity
}).prependTo(legend);
}
}
}
Expand Down

0 comments on commit 85617c6

Please sign in to comment.