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.

Sign up for GitHub

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

[8.x] [kbn/flot-charts] Use jQuery methods to build legends (#199871) #200078

Merged
merged 1 commit into from
Nov 13, 2024
Merged

[8.x] [kbn/flot-charts] Use jQuery methods to build legends (#199871) #200078

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 129 additions & 104 deletions packages/kbn-flot-charts/lib/jquery_flot.js
View file
Open in desktop
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