-
-
Notifications
You must be signed in to change notification settings - Fork 204
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add vertical legend to performance dashboard (#1517)
* Add vertical legend to performance dashboard * Slight tweaks: add ID, improve vertical spacing, missing div, whitespace --------- Co-authored-by: Ben Sheldon [he/him] <[email protected]>
- Loading branch information
1 parent
ecf6df7
commit 581c7ae
Showing
9 changed files
with
110 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
const generateListItem = (item) => { | ||
const li = document.createElement('li'); | ||
li.className = 'd-flex align-items-center text-nowrap mb-2'; | ||
|
||
const boxSpan = document.createElement('span'); | ||
boxSpan.className = 'legend-item-color-box'; | ||
boxSpan.style.background = item.fillStyle; | ||
boxSpan.style.borderColor = item.strokeStyle; | ||
boxSpan.style.borderWidth = item.lineWidth + 'px'; | ||
|
||
const textContainer = document.createElement('p'); | ||
textContainer.className = 'item-text m-0 small'; | ||
textContainer.style.color = item.fontColor; | ||
textContainer.style.textDecoration = item.hidden ? 'line-through' : ''; | ||
|
||
const text = document.createTextNode(item.text); | ||
textContainer.appendChild(text); | ||
|
||
li.appendChild(boxSpan); | ||
li.appendChild(textContainer); | ||
|
||
return li; | ||
} | ||
|
||
const htmlLegendPlugin = { | ||
id: 'htmlLegend', | ||
afterUpdate(chart, _args, _options) { | ||
const {type} = chart.config; | ||
const ul = document.getElementById('chart-legend-ul'); | ||
|
||
// Remove old legend items | ||
while (ul.firstChild) { | ||
ul.firstChild.remove(); | ||
} | ||
|
||
// Reuse the built-in legendItems generator | ||
const items = chart.options.plugins.legend.labels.generateLabels(chart); | ||
|
||
items.forEach(item => { | ||
const li = generateListItem(item); | ||
ul.appendChild(li); | ||
|
||
li.onclick = () => { | ||
if (type === 'pie' || type === 'doughnut') { | ||
// Pie and doughnut charts only have a single dataset and visibility is per item | ||
chart.toggleDataVisibility(item.index); | ||
} else { | ||
chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex)); | ||
} | ||
chart.update(); | ||
}; | ||
}); | ||
} | ||
}; | ||
|
||
export { htmlLegendPlugin as default }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
<div class="py-4" data-live-poll-region="chart"> | ||
<div class="chart-wrapper container-fluid"> | ||
<div class="" data-live-poll-region="chart"> | ||
<div class="chart-wrapper"> | ||
<canvas class="chart" data-json="<%= chart_data.to_json %>"></canvas> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
<% vertical_legend = chart_data.dig(:options, :plugins, :legend, :vertical) %> | ||
|
||
<div class="container-fluid"> | ||
<div class="row d-flex"> | ||
<% if vertical_legend %> | ||
<div class="row d-flex"> | ||
<div class="col-md-10"> | ||
<%= render 'good_job/shared/chart', chart_data: chart_data %> | ||
</div> | ||
<div class="col-md-2 d-flex flex-column"> | ||
<div id="chart-legend-container" class="flex-fill overflow-auto"> | ||
<ul id="chart-legend-ul" class="list-unstyled p-0 mx-0 py-2"> | ||
</ul> | ||
</div> | ||
</div> | ||
</div> | ||
<% else %> | ||
<%= render 'good_job/shared/chart', chart_data: chart_data %> | ||
<% end %> | ||
</div> | ||
</div> |