mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
# Backport This will backport the following commits from `main` to `8.x`: - [[kbn/flot-charts] Use jQuery methods to build legends (#199871)](https://github.com/elastic/kibana/pull/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":"nick.peihl@elastic.co"},"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 <nick.peihl@elastic.co>
This commit is contained in:
Kibana Machine
GitHub
parent
014d96b899
commit
85617c6017
1 changed files with 115 additions and 90 deletions
205
packages/kbn-flot-charts/lib/jquery_flot.js
vendored
205
packages/kbn-flot-charts/lib/jquery_flot.js
vendored
|
|
@ -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.container != null) {
|
||||
$.find(options.legend.container).html("");
|
||||
} else {
|
||||
placeholder.find(".legend").remove();
|
||||
}
|
||||
|
||||
if (!options.legend.show) {
|
||||
return;
|
||||
}
|
||||
if (!options.legend.show) {
|
||||
return;
|
||||
}
|
||||
|
||||
var fragments = [], entries = [], rowStarted = false,
|
||||
lf = options.legend.labelFormatter, s, label;
|
||||
var entries = [], lf = options.legend.labelFormatter, s, label, i;
|
||||
|
||||
// Build a list of legend entries, with each having a label and a color
|
||||
// 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
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
// No entries implies no legend
|
||||
if (entries.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Sort the legend using either the default or a custom comparator
|
||||
// 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
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
// Generate markup for the list of entries, in their final order
|
||||
for (i = 0; i < entries.length; ++i) {
|
||||
|
||||
for (var i = 0; i < entries.length; ++i) {
|
||||
var entry = entries[i];
|
||||
|
||||
var entry = entries[i];
|
||||
if (i % options.legend.noColumns === 0) {
|
||||
if (rowBuffer !== null) {
|
||||
table.append(rowBuffer);
|
||||
}
|
||||
rowBuffer = $("<tr></tr>");
|
||||
}
|
||||
|
||||
if (i % options.legend.noColumns == 0) {
|
||||
if (rowStarted)
|
||||
fragments.push('</tr>');
|
||||
fragments.push('<tr>');
|
||||
rowStarted = true;
|
||||
}
|
||||
var colorbox = $("<div></div>").css({
|
||||
"width": "4px",
|
||||
"height": 0,
|
||||
"border": "5px solid " + entry.color,
|
||||
"overflow": "hidden"
|
||||
}),
|
||||
|
||||
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>'
|
||||
);
|
||||
}
|
||||
borderbox = $("<div></div>").css({
|
||||
"border": "1px solid " + options.legend.labelBoxBorderColor,
|
||||
"padding": "1px"
|
||||
});
|
||||
|
||||
if (rowStarted)
|
||||
fragments.push('</tr>');
|
||||
rowBuffer.append(
|
||||
$("<td></td>").addClass("legendColorBox").append(borderbox.append(colorbox)),
|
||||
$("<td></td>").addClass("legendLabel").html(entry.label)
|
||||
);
|
||||
}
|
||||
|
||||
if (fragments.length == 0)
|
||||
return;
|
||||
table.append(rowBuffer);
|
||||
|
||||
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) {
|
||||
$(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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue