Skip to content

Wordwrap long legends #2128

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

Open
aestoltm wants to merge 19 commits into
base: main
Choose a base branch
from
Open

Wordwrap long legends #2128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
204d56c
Word wrap long legend entries
aestoltm Nov 25, 2025
d665e0e
Add word wrap to legends
aestoltm Dec 3, 2025
76385cf
remove unneeded section
aestoltm Dec 4, 2025
12c16f9
add number base
aestoltm Dec 4, 2025
351cf56
Make legend wrapping more robust
aestoltm Dec 4, 2025
cb0c293
Add in missing steps
aestoltm Dec 5, 2025
35a0ee8
change plotly function call
aestoltm Dec 5, 2025
1f6a2a9
Add in missing code
aestoltm Dec 5, 2025
dab2daa
Linter fix
aestoltm Dec 5, 2025
2feb60b
Since we are not setting the name of the trace to anything we don't n…
aestoltm Dec 5, 2025
339d092
shouldn't have to specify traces because it add them all already
aestoltm Dec 6, 2025
22798e8
Sonar adjustment
aestoltm Dec 9, 2025
26d783c
Remove extra code
aestoltm Dec 9, 2025
dfd81f3
Merge branch 'main' into wordwrap_long_legends
aestoltm Jan 12, 2026
61b74b0
Add missing change from merge conflict
aestoltm Jan 12, 2026
55c6079
Add back code with oname, merging this branch with main after Plotly …
aestoltm Jan 13, 2026
6063b1a
Adjust regular expression to not break in the middle of words. Howeve…
aestoltm Jan 14, 2026
00d0f66
linter fix
aestoltm Jan 14, 2026
e0ab6f4
Merge branch 'main' into wordwrap_long_legends
aestoltm Mar 31, 2026
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
1 change: 1 addition & 0 deletions classes/DataWarehouse/Access/Usage.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -848,6 +848,7 @@ function ($drillTarget) {
) {
$rank = $meDataSeries['legendrank'] / 3;
$meDataSeries['name'] = "${rank}. " . $meDataSeries['name'];
$meDataSeries['oname'] = "${rank}. " . $meDataSeries['oname'];
Copy link
Copy Markdown
Member

@jpwhite4 jpwhite4 Apr 15, 2026

Choose a reason for hiding this comment

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

I don't quite understand the need to add yet another parameter to the chart config that is a copy of an existing parameter. The word wrapping is all done in the javascript, so why do you need a new parameter?

Also (assuming this new parameter is necessary): Is this going to cause breakage with existing saved charts? or with charts saved in the report generator?

}
}

Expand Down
2 changes: 2 additions & 0 deletions classes/DataWarehouse/Visualization/AggregateChart.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1135,6 +1135,7 @@ public function configure(
$trace = array_merge($trace, array(
'automargin'=> $data_description->display_type == 'pie' ? true : null,
'name' => $lookupDataSeriesName,
'oname' => $lookupDataSeriesName,
'meta' => array(
'primarySeries' => true
),
Expand Down Expand Up @@ -1501,6 +1502,7 @@ protected function buildErrorDataSeries(
// create the data series description:
$error_trace = array_merge($trace, array(
'name' => $lookupDataSeriesName,
'oname' => $lookupDataSeriesName,
'meta' => array(
'primarySeries' => false
),
Expand Down
2 changes: 2 additions & 0 deletions classes/DataWarehouse/Visualization/TimeseriesChart.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,6 +580,7 @@ public function configure(

$trace = array(
'name' => $lookupDataSeriesName,
'oname' => $lookupDataSeriesName,
'meta' => array(
'primarySeries' => true
),
Expand Down Expand Up @@ -878,6 +879,7 @@ public function configure(
}
$trendline_trace = array(
'name' => $lookupDataSeriesName,
'oname' => $lookupDataSeriesName,
'meta' => array(
'primarySeries' => false,
'trendlineSeries' => true
Expand Down
4 changes: 2 additions & 2 deletions html/gui/js/PlotlyChartWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,8 @@ XDMoD.utils.createChart = function (chartOptions, extraHandlers) {
return;
}

const update = relayoutChart(chartDiv, baseChartOptions.layout.height, true, baseChartOptions.isExport);
Plotly.relayout(baseChartOptions.renderTo, update);
const update = relayoutChart(chartDiv, baseChartOptions.layout.width, baseChartOptions.layout.height, true, baseChartOptions.isExport);
Plotly.update(baseChartOptions.renderTo, update.data, update.layout, update.traces);
});

return chart;
Expand Down
63 changes: 49 additions & 14 deletions html/gui/js/libraries/PlotlyUtilities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,9 +353,44 @@
* @return {Object} update - Layout object passed to Plotly.relayout
*/
/* exported relayoutChart */
function relayoutChart(chartDiv, adjHeight, firstRender = false, isExport = false) {
let update = {};
function relayoutChart(chartDiv, adjWidth, adjHeight, firstRender = false, isExport = false) {

Check failure on line 356 in html/gui/js/libraries/PlotlyUtilities.js

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this function to reduce its Cognitive Complexity from 71 to the 15 allowed. 


See more on https://sonarcloud.io/project/issues?id=ubccr_xdmod&issues=AZ1ETd3zMjLd0CEEHlIe&open=AZ1ETd3zMjLd0CEEHlIe&pullRequest=2128
const update = {};
if (chartDiv._fullLayout.annotations.length > 0) {
// Wrap long titles based on width
const traceNameUpdates = { name: [] };
const traceIndices = [];
const chartRatioChange = adjWidth / chartDiv.clientWidth;
let characterLimit = 150;
if (adjWidth < 400) {
characterLimit = 20;
} else if (adjWidth < 650) {
characterLimit = 40;
} else if (adjWidth < 850) {
characterLimit = 70;
} else if (adjWidth < 1250) {
characterLimit = 100;
}
const wordWrapLimit = Number.parseInt(chartRatioChange * characterLimit, 10);
const regex = new RegExp(`(?![^\\n]{1,${wordWrapLimit}}$)(?:([^\\n]{1,${wordWrapLimit}})\\s|([^\\n]{${wordWrapLimit}}))`, 'g');

Check warning on line 374 in html/gui/js/libraries/PlotlyUtilities.js

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

`String.raw` should be used to avoid escaping `\`. 


See more on https://sonarcloud.io/project/issues?id=ubccr_xdmod&issues=AZ1ETd3zMjLd0CEEHlIf&open=AZ1ETd3zMjLd0CEEHlIf&pullRequest=2128

chartDiv.data.forEach((trace, index) => {
if (trace.oname) {
traceNameUpdates.name.push(
// Hardwrap is when we have to break middle of a word (add hyphen)
// Otherwise we are soft word wrapping and will break on whitespace.
trace.oname.replaceAll(regex, (match, softWrap, hardWrap) => {
if (hardWrap) {
return `${hardWrap}-<br>`;
}
return `${softWrap}<br>`;
})
);
traceIndices.push(index);
}
});
update.data = traceNameUpdates;
update.traces = traceIndices;

const topCenter = isTopLegend(chartDiv._fullLayout);
const marginRight = chartDiv._fullLayout._size.r;
const marginLeft = chartDiv._fullLayout._size.l;
Expand Down Expand Up @@ -393,7 +428,7 @@
const isPie = chartDiv._fullData.length > 0 && chartDiv._fullData[0].type === 'pie';

const subtitleUpdates = adjustSubtitle(chartDiv._fullLayout, subtitleIndex, topCenter, firstRender);
update = subtitleUpdates.chartUpdates;
update.layout = subtitleUpdates.chartUpdates;

if (isPie && topCenter && subtitleUpdates.subtitleLineCount > 0) {
extraShift -= 10;
Expand All @@ -418,7 +453,7 @@
// Observed inconsistency with margin when subtitle is one line long. Unsure of the cause.
if (lineBreakCount > 0) {
if (firstRender) {
update['margin.t'] = marginTop + (titleHeight * lineBreakCount);
update.layout['margin.t'] = marginTop + (titleHeight * lineBreakCount);
} else if (subtitleUpdates.subtitleLineCount === 1) {
marginTop = subtitleUpdates.chartUpdates['margin.t'] - (titleHeight * lineBreakCount);
} else {
Expand All @@ -427,8 +462,8 @@
if (topCenter) {
if (subtitleUpdates.subtitleLineCount > 0) {
marginTop += subtitleHeight + 5;
update['legend.y'] -= 0.025;
update['margin.t'] += chartDiv._fullLayout.legend._height + subtitleHeight;
update.layout['legend.y'] -= 0.025;
update.layout['margin.t'] += chartDiv._fullLayout.legend._height + subtitleHeight;
} else {
marginTop -= chartDiv._fullLayout.legend._height / 2;
}
Expand All @@ -443,20 +478,20 @@

if ((titleIndex === -1 || chartDiv._fullLayout.annotations[titleIndex].text.length === 0) && subtitleUpdates.subtitleLineCount === 0) {
if (topCenter) {
update['legend.y'] = 1.0;
update.layout['legend.y'] = 1;
} else {
update['margin.t'] = 10;
update.layout['margin.t'] = 10;
}
}

const titleYShift = (marginTop + legendHeight) - titleHeight;

if (titleIndex !== -1) {
update[`annotations[${titleIndex}].yshift`] = subtitleUpdates.subtitleLineCount >= 3 ? titleYShift + 5 : titleYShift;
update.layout[`annotations[${titleIndex}].yshift`] = subtitleUpdates.subtitleLineCount >= 3 ? titleYShift + 5 : titleYShift;
}

if (subtitleIndex !== -1) {
update[`annotations[${subtitleIndex}].yshift`] = titleYShift - (subtitleHeight * subtitleUpdates.subtitleLineCount);
update.layout[`annotations[${subtitleIndex}].yshift`] = titleYShift - (subtitleHeight * subtitleUpdates.subtitleLineCount);
}

const marginBottom = chartDiv._fullLayout._size.b;
Expand All @@ -468,12 +503,12 @@
const shiftYDown = marginBottom * -1;
const exportShift = isExport ? 30 : 0;
if (creditsIndex !== -1) {
update[`annotations[${creditsIndex}].yshift`] = shiftYDown;
update[`annotations[${creditsIndex}].xshift`] = marginRight - pieChartXShift - exportShift;
update.layout[`annotations[${creditsIndex}].yshift`] = shiftYDown;
update.layout[`annotations[${creditsIndex}].xshift`] = marginRight - pieChartXShift - exportShift;
}
if (restrictedIndex !== -1) {
update[`annotations[${restrictedIndex}].yshift`] = shiftYDown;
update[`annotations[${restrictedIndex}].xshift`] = (marginLeft - pieChartXShift - exportShift) * -1;
update.layout[`annotations[${restrictedIndex}].yshift`] = shiftYDown;
update.layout[`annotations[${restrictedIndex}].xshift`] = (marginLeft - pieChartXShift - exportShift) * -1;
}
}
return update;
Expand Down
4 changes: 2 additions & 2 deletions html/gui/js/modules/Usage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2612,8 +2612,8 @@ Ext.extend(XDMoD.Module.Usage, XDMoD.PortalModule, {
const chartDiv = document.getElementById(this.chartId);
if (chartDiv) {
Plotly.relayout(this.chartId, { width: adjWidth, height: adjHeight });
const update = relayoutChart(chartDiv, adjHeight, false);
Plotly.relayout(this.chartId, update);
const update = relayoutChart(chartDiv, adjWidth, adjHeight, false);
Plotly.update(this.chartId, update.data, update.layout, update.traces);
}
}
} //onResize
Expand Down
4 changes: 2 additions & 2 deletions html/gui/js/modules/metric_explorer/MetricExplorer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6335,8 +6335,8 @@ Ext.extend(XDMoD.Module.MetricExplorer, XDMoD.PortalModule, {
const chartDiv = document.getElementById(`plotly-panel${this.id}`);
if (chartDiv) {
Plotly.relayout(`plotly-panel${this.id}`, { width: adjWidth, height: adjHeight });
const update = relayoutChart(chartDiv, adjHeight, false);
Plotly.relayout(`plotly-panel${this.id}`, update);
const update = relayoutChart(chartDiv, adjWidth, adjHeight, false);
Plotly.update(`plotly-panel${this.id}`, update.data, update.layout, update.traces);
}
} //onResize

Expand Down