Skip to content

Commit 85617c6

Browse files
kibanamachinenickpeihl
kibanamachine
and
nickpeihl
authored
[8.x] [kbn/flot-charts] Use jQuery methods to build legends (#199871) (#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]>
1 parent 014d96b commit 85617c6

File tree

1 file changed

+129
-104
lines changed

1 file changed

+129
-104
lines changed

‎packages/kbn-flot-charts/lib/jquery_flot.js‎

Lines changed: 129 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -2711,110 +2711,135 @@ Licensed under the MIT license.
27112711

27122712
function insertLegend() {
27132713

2714-
if (options.legend.container != null) {
2715-
$(options.legend.container).html("");
2716-
} else {
2717-
placeholder.find(".legend").remove();
2718-
}
2719-
2720-
if (!options.legend.show) {
2721-
return;
2722-
}
2723-
2724-
var fragments = [], entries = [], rowStarted = false,
2725-
lf = options.legend.labelFormatter, s, label;
2726-
2727-
// Build a list of legend entries, with each having a label and a color
2728-
2729-
for (var i = 0; i < series.length; ++i) {
2730-
s = series[i];
2731-
if (s.label) {
2732-
label = lf ? lf(s.label, s) : s.label;
2733-
if (label) {
2734-
entries.push({
2735-
label: label,
2736-
color: s.color
2737-
});
2738-
}
2739-
}
2740-
}
2741-
2742-
// Sort the legend using either the default or a custom comparator
2743-
2744-
if (options.legend.sorted) {
2745-
if ($.isFunction(options.legend.sorted)) {
2746-
entries.sort(options.legend.sorted);
2747-
} else if (options.legend.sorted == "reverse") {
2748-
entries.reverse();
2749-
} else {
2750-
var ascending = options.legend.sorted != "descending";
2751-
entries.sort(function(a, b) {
2752-
return a.label == b.label ? 0 : (
2753-
((a.label < b.label) != ascending ? 1 : -1) // Logical XOR
2754-
);
2755-
});
2756-
}
2757-
}
2758-
2759-
// Generate markup for the list of entries, in their final order
2760-
2761-
for (var i = 0; i < entries.length; ++i) {
2762-
2763-
var entry = entries[i];
2764-
2765-
if (i % options.legend.noColumns == 0) {
2766-
if (rowStarted)
2767-
fragments.push('</tr>');
2768-
fragments.push('<tr>');
2769-
rowStarted = true;
2770-
}
2771-
2772-
fragments.push(
2773-
'<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>' +
2774-
'<td class="legendLabel" data-test-subj="flotLegendLabel">' + entry.label + '</td>'
2775-
);
2776-
}
2777-
2778-
if (rowStarted)
2779-
fragments.push('</tr>');
2780-
2781-
if (fragments.length == 0)
2782-
return;
2783-
2784-
var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>';
2785-
if (options.legend.container != null)
2786-
$(options.legend.container).html(table);
2787-
else {
2788-
var pos = "",
2789-
p = options.legend.position,
2790-
m = options.legend.margin;
2791-
if (m[0] == null)
2792-
m = [m, m];
2793-
if (p.charAt(0) == "n")
2794-
pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
2795-
else if (p.charAt(0) == "s")
2796-
pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;';
2797-
if (p.charAt(1) == "e")
2798-
pos += 'right:' + (m[0] + plotOffset.right) + 'px;';
2799-
else if (p.charAt(1) == "w")
2800-
pos += 'left:' + (m[0] + plotOffset.left) + 'px;';
2801-
var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(placeholder);
2802-
if (options.legend.backgroundOpacity != 0.0) {
2803-
// put in the transparent background
2804-
// separately to avoid blended labels and
2805-
// label boxes
2806-
var c = options.legend.backgroundColor;
2807-
if (c == null) {
2808-
c = options.grid.backgroundColor;
2809-
if (c && typeof c == "string")
2810-
c = $.color.parse(c);
2811-
else
2812-
c = $.color.extract(legend, 'background-color');
2813-
c.a = 1;
2814-
c = c.toString();
2815-
}
2816-
var div = legend.children();
2817-
$('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').prependTo(legend).css('opacity', options.legend.backgroundOpacity);
2714+
if (options.legend.container != null) {
2715+
$.find(options.legend.container).html("");
2716+
} else {
2717+
placeholder.find(".legend").remove();
2718+
}
2719+
2720+
if (!options.legend.show) {
2721+
return;
2722+
}
2723+
2724+
var entries = [], lf = options.legend.labelFormatter, s, label, i;
2725+
2726+
// Build a list of legend entries, with each having a label and a color
2727+
for (i = 0; i < series.length; ++i) {
2728+
s = series[i];
2729+
if (s.label) {
2730+
label = lf ? lf(s.label, s) : s.label;
2731+
if (label) {
2732+
entries.push({
2733+
label: label,
2734+
color: s.color
2735+
});
2736+
}
2737+
}
2738+
}
2739+
2740+
// No entries implies no legend
2741+
if (entries.length === 0) {
2742+
return;
2743+
}
2744+
2745+
// Sort the legend using either the default or a custom comparator
2746+
if (options.legend.sorted) {
2747+
if ($.isFunction(options.legend.sorted)) {
2748+
entries.sort(options.legend.sorted);
2749+
} else if (options.legend.sorted === "reverse") {
2750+
entries.reverse();
2751+
} else {
2752+
var ascending = options.legend.sorted !== "descending";
2753+
entries.sort(function(a, b) {
2754+
return a.label === b.label ? 0 : (
2755+
(a.label < b.label) !== ascending ? 1 : -1 // Logical XOR
2756+
);
2757+
});
2758+
}
2759+
}
2760+
2761+
// Generate markup for the list of entries, in their final order
2762+
var table = $("<table></table>").css({
2763+
"font-size": "smaller",
2764+
"color": options.grid.color
2765+
}), rowBuffer = null;
2766+
2767+
for (i = 0; i < entries.length; ++i) {
2768+
2769+
var entry = entries[i];
2770+
2771+
if (i % options.legend.noColumns === 0) {
2772+
if (rowBuffer !== null) {
2773+
table.append(rowBuffer);
2774+
}
2775+
rowBuffer = $("<tr></tr>");
2776+
}
2777+
2778+
var colorbox = $("<div></div>").css({
2779+
"width": "4px",
2780+
"height": 0,
2781+
"border": "5px solid " + entry.color,
2782+
"overflow": "hidden"
2783+
}),
2784+
2785+
borderbox = $("<div></div>").css({
2786+
"border": "1px solid " + options.legend.labelBoxBorderColor,
2787+
"padding": "1px"
2788+
});
2789+
2790+
rowBuffer.append(
2791+
$("<td></td>").addClass("legendColorBox").append(borderbox.append(colorbox)),
2792+
$("<td></td>").addClass("legendLabel").html(entry.label)
2793+
);
2794+
}
2795+
2796+
table.append(rowBuffer);
2797+
2798+
if (options.legend.container != null) {
2799+
$(options.legend.container).html(table);
2800+
} else {
2801+
var pos = { "position": "absolute" },
2802+
p = options.legend.position,
2803+
m = options.legend.margin;
2804+
if (m[0] == null) {
2805+
m = [m, m];
2806+
}
2807+
if (p.charAt(0) === "n") {
2808+
pos.top = (m[1] + plotOffset.top) + "px";
2809+
} else if (p.charAt(0) === "s") {
2810+
pos.bottom = (m[1] + plotOffset.bottom) + "px";
2811+
}
2812+
if (p.charAt(1) === "e") {
2813+
pos.right = (m[0] + plotOffset.right) + "px";
2814+
} else if (p.charAt(1) === "w") {
2815+
pos.left = (m[0] + plotOffset.left) + "px";
2816+
}
2817+
var legend = $("<div></div>").addClass("legend").append(table.css(pos)).appendTo(placeholder);
2818+
if (options.legend.backgroundOpacity !== 0.0) {
2819+
2820+
// put in the transparent background
2821+
// separately to avoid blended labels and
2822+
// label boxes
2823+
var c = options.legend.backgroundColor;
2824+
if (c == null) {
2825+
c = options.grid.backgroundColor;
2826+
if (c && typeof c === "string") {
2827+
c = $.color.parse(c);
2828+
} else {
2829+
c = $.color.extract(legend, "background-color");
2830+
}
2831+
c.a = 1;
2832+
c = c.toString();
2833+
}
2834+
var div = legend.children();
2835+
2836+
// Position also applies to this
2837+
$("<div></div>").css(pos).css({
2838+
"width": div.width() + "px",
2839+
"height": div.height() + "px",
2840+
"background-color": c,
2841+
"opacity": options.legend.backgroundOpacity
2842+
}).prependTo(legend);
28182843
}
28192844
}
28202845
}

0 commit comments

Comments
 (0)