refactor(mon-pix): improve circle-chart component

Author: Jeyffrey

mon-pix/app/components/circle-chart.hbs

@@ -1,5 +1,5 @@
-<div class="circle-chart" ...attributes>
-  <svg viewBox="1.2 1.2 33.6 33.6" class={{concat "circle-chart__content " @chartClass}} aria-hidden="true">
+<div class={{concat "circle-chart " @chartClass}} ...attributes>
+  <svg class="cicle-chart__circle" viewBox="1.2 1.2 33.6 33.6" aria-hidden="true">
     <path class={{concat "circle " @thicknessClass}} d="M18 2 a 16 16 0 0 1 0 32 a 16 16 0 0 1 0 -32">
     </path>
 

mon-pix/app/components/competence-card-default.hbs

@@ -22,7 +22,7 @@
           <CircleChart
             @value={{@scorecard.capedPercentageAheadOfNextLevel}}
             @sliceColor={{@scorecard.area.color}}
-            @chartClass="circle-chart__content--big"
+            @chartClass="circle-chart--big"
             @thicknessClass="circle--thick"
             role="presentation"
           >

mon-pix/app/components/competence-card-mobile.hbs

@@ -17,7 +17,7 @@
           <CircleChart
             @value={{@scorecard.capedPercentageAheadOfNextLevel}}
             @sliceColor={{@scorecard.area.color}}
-            @chartClass="circle-chart__content--small"
+            @chartClass="circle-chart--small"
             @thicknessClass="circle--thick"
             role="presentation"
           >

mon-pix/app/styles/components/_circle-chart.scss

@@ -7,13 +7,8 @@
 
 .circle-chart {
   position: relative;
-  display: flex;
-}
-
-.circle-chart__content {
   width: 100px;
   height: 100px;
-  max-height: 128px;
 
   &--small {
     width: 70px;
@@ -26,6 +21,11 @@
   }
 }
 
+.circle-chart__circle {
+  width: 100%;
+  height: 100%;
+}
+
 .circle {
   fill: none;
   stroke-width: 1.1;
@@ -64,11 +64,7 @@
 
 .circle-chart__text {
   position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }

mon-pix/tests/integration/components/circle-chart-test.js

@@ -56,15 +56,10 @@ module('Integration | Component | circle-chart', function (hooks) {
 
     test('should display the chart with given width and height', async function (assert) {
       // when
-      await render(hbs`<CircleChart @chartClass='circle-chart__content--big' />`);
+      await render(hbs`<CircleChart @chartClass='circle-chart--big' />`);
 
       // then
-      assert.ok(
-        this.element
-          .querySelector('.circle-chart__content')
-          .getAttribute('class')
-          .includes('circle-chart__content--big'),
-      );
+      assert.ok(this.element.querySelector('.circle-chart').getAttribute('class').includes('circle-chart--big'));
     });
   });
 });