Merge pull request #8263 from infor-design/8164-pie-bordered-widget

8164 - Pie with Bordered Class
infor-design · Dec 20, 2023 · 16b7b03 · 16b7b03
2 parents b555bdf + 0cdb9e0
commit 16b7b03
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 5 deletions.
diff --git a/app/views/components/donut/test-bordered.html b/app/views/components/donut/test-bordered.html
@@ -0,0 +1,64 @@
+
+<div class="row">
+  <div class="two-thirds column" style="min-width: 360px !important; max-width: 360px !important;">
+      <div class="widget bordered">
+        <div class="widget-header">
+          <h2 class="widget-title">Donut Chart Title</h2>
+        </div>
+        <div class="widget-content">
+          <div id="pie-donut-example" class="chart-container">
+          </div>
+        </div>
+      </div>
+  </div>
+</div>
+
+
+<script>
+$('body').on('initialized', function () {
+
+  var donutData = [{
+    data: [{
+        name: 'Component A',
+        value: 18,
+        attributes: [
+          { name: 'id', value: 'comp-a' },
+          { name: 'data-automation-id', value: 'comp-a-automation-id' }
+        ]
+    }, {
+        name: 'Component B',
+        value: 44,
+        attributes: [
+          { name: 'id', value: 'comp-b' },
+          { name: 'data-automation-id', value: 'comp-b-automation-id' }
+        ]
+    }, {
+        name: 'Component C',
+        value: 32,
+        attributes: [
+          { name: 'id', value: 'comp-c' },
+          { name: 'data-automation-id', value: 'comp-c-automation-id' }
+        ]
+    }, {
+        name: 'Component D',
+        value: 6,
+        attributes: [
+          { name: 'id', value: 'comp-d' },
+          { name: 'data-automation-id', value: 'comp-c-automation-id' }
+        ]
+    }],
+    centerLabel: 'Donut Chart'
+  }];
+
+  $('#pie-donut-example').chart(
+    {
+      type: 'donut',
+      dataset: donutData,
+      showLegend: true,
+      legendPlacement: 'bottom'
+    }).on('selected', function (e, args) {
+    console.log(args);
+  });
+
+});
+</script>
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -29,6 +29,7 @@
 - `[Dropdown]` Fixed a bug where list is broken when empty icon is in the first option. ([#8105](https://github.com/infor-design/enterprise/issues/8105))
 - `[Message]` Fixed success icon alignment in message header. ([#8240](https://github.com/infor-design/enterprise/issues/8240))
 - `[Pager]` Fixed double call on update pager when using keydown. ([#8156](https://github.com/infor-design/enterprise/issues/8156))
+- `[Pie/Donut]` Fixed rendering issues when having bordered class in the widget. ([#8164](https://github.com/infor-design/enterprise/issues/8164))
 - `[Personalization]` Removed box shadow on selected tabs. ([#8086](https://github.com/infor-design/enterprise/issues/8086))
 - `[Searchfield]` Fixed styling issues in RTL. ([#6982](https://github.com/infor-design/enterprise/issues/6982))
 

diff --git a/src/components/charts/_charts.scss b/src/components/charts/_charts.scss
@@ -14,11 +14,11 @@
 
     .chart-legend.is-bottom {
       .chart-legend-item.is-one-line {
-        margin: 10px 44px 0 100px !important;
+        margin: 0 auto !important;
         padding: 0 2px 1px;
 
         + .list-button {
-          margin-top: 9px;
+          margin-top: 3px;
         }
       }
     }
@@ -51,7 +51,7 @@
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      padding-left: 30px;
+      justify-content: center;
 
       .chart-legend-item.is-two-column {
         display: flex;
@@ -563,7 +563,7 @@
 
 // RTL Styles
 html[dir='rtl'] {
-  .chart-legend {
+  .chart-legend:not(.is-bottom) {
     margin-left: inherit;
     margin-right: 55px;
 
@@ -579,6 +579,13 @@ html[dir='rtl'] {
     }
   }
 
+  .chart-legend.is-bottom {
+    .chart-legend-color {
+      margin-left: 10px;
+      margin-right: 0;
+    }
+  }
+
   .completion-chart {
     .icon-error {
       left: -20px;

diff --git a/src/components/charts/charts.js b/src/components/charts/charts.js
@@ -544,6 +544,12 @@ charts.addLegend = function (series, chartType, settings, container) {
         menu: popupList
       });
 
+      const widgetHeight = $(container).parents('.widget').height();
+      const widgetHeader = $($(container).parents('.widget').children().get(0)).height();
+      const widgetContent = $($(container).parents('.widget').children().get(1)).height();
+      const additionalPadding = (widgetHeight - (widgetHeader + widgetContent)) / 2;
+      legend.css('padding-top', `${additionalPadding}px`);
+
       listButton.on('selected', (e, args) => {
         const idx = $(args[0]).attr('index-id').match(regex)[1];
         charts.handleElementClick(idx, this, series, settings, container);

diff --git a/src/components/pie/pie.js b/src/components/pie/pie.js
@@ -142,6 +142,11 @@ Pie.prototype = {
     const self = this;
     const s = this.settings;
 
+    // Fixing Angular Issue for Async Dataset
+    if (this.element.data('emptymessage') && s.dataset.length > 0) {
+      this.element.data('emptymessage').destroy();
+    }
+
     self.svg = d3.select(this.element[0])
       .append('svg');
 
@@ -160,14 +165,15 @@ Pie.prototype = {
       this.element.addClass(`has-${s.legendPlacement}-legend`);
     }
 
+    const hasParentBordered = this.element.parents('.widget').hasClass('bordered');
     const w = parseInt(this.element.width(), 10);
     let h = parseInt(this.element.height(), 10);
 
     const dims = {
       height: h,
       width: w
     };
-    dims.isSmallView = dims.width < 360;
+    dims.isSmallView = dims.width - (hasParentBordered ? 2 : 0) < 360;
     const legendBotOnSingleWidget = s.legendPlacement === 'bottom' &&
       dims.isSmallView && !s.showMobile;