Merge pull request #8148 from infor-design/8139-8140-donut-legends

Charts - Added additional validation and changelog
infor-design · Nov 7, 2023 · 61529e0 · 61529e0
2 parents ed651dc + a94bf96
commit 61529e0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -36,6 +36,8 @@
 - `[Module Nav]` Fixed a bug where the settings was behind the main module nav element. ([#8063](https://github.com/infor-design/enterprise/issues/8063))
 - `[Module Nav]` Fixed a bug where the accordion in the page container inherited module nav accordion styles. ([#8040](https://github.com/infor-design/enterprise/issues/7884))
 - `[Pie/Donut]` Fixed the displayed legend when selecting a different one. ([#7845](https://github.com/infor-design/enterprise/issues/7845))
+- `[Pie/Donut]` Fixed a bug in clicking legends causing to change whole list to the last clicked legend name. ([#8139](https://github.com/infor-design/enterprise/issues/8139))
+- `[Pie/Donut]` Fixed a bug in where legends can be clicked if selectable settings set to false. ([#8140](https://github.com/infor-design/enterprise/issues/8140))
 - `[Popupmenu]` Fixed shared menu not closing and opening correctly. ([NG#1552](https://github.com/infor-design/enterprise-ng/issues/1552))
 - `[ProcessIndicator]` Adjusted icon sizing to remove gaps between separators. ([#7982](https://github.com/infor-design/enterprise/issues/7982))
 - `[Radios]` Adjusted styling of checked disabled radio button. ([#8082](https://github.com/infor-design/enterprise/issues/8082))

diff --git a/src/components/charts/charts.js b/src/components/charts/charts.js
@@ -344,6 +344,7 @@ charts.addLegend = function (series, chartType, settings, container) {
   let currentWidth;
   let totalWidth = 0;
   let maxLength;
+  this.hasLegendPopup = false;
 
   let currentTotalWidthPercent;
   for (i = 0; i < series.length; i++) {
@@ -501,6 +502,8 @@ charts.addLegend = function (series, chartType, settings, container) {
       </button>
       `);
 
+      this.hasLegendPopup = true;
+
       const popupList = $('<ul class="popupmenu"></ul>');
 
       for (let j = 0; j < series.length; j++) {
@@ -561,6 +564,10 @@ charts.addLegend = function (series, chartType, settings, container) {
  * @param  {object} container The dom container.
  */
 charts.handleElementClick = function (idx, line, series, settings, container) {
+  if (!settings.selectable) {
+    return;
+  }
+
   const api = $(settings?.svg?.node()).closest('.chart-container').data('chart');
   const noTrigger = api?.initialSelectCall;
   const elem = series[idx];
@@ -607,7 +614,7 @@ charts.handleElementClick = function (idx, line, series, settings, container) {
     charts.selectElement(d3.select(elem.selectionObj.nodes()[idx]), elem.selectionInverse, elem.data, undefined, settings.dataset, noTrigger); // eslint-disable-line
   }
 
-  if (isTwoColumn) {
+  if (isTwoColumn && this.hasLegendPopup) {
     const chartType = settings.type === 'donut' ? 'pie' : settings.type;
     const hexColor = charts.chartColor(idx, chartType || (series.length === 1 ? 'bar-single' : 'bar'), elem);
     const colorName = charts.chartColorName(idx, chartType || (series.length === 1 ? 'bar-single' : 'bar'), elem);