fix(radial-chart): Display of rounded percentage with precision

fix(radial-chart): Moving sort out of the returning chain

libs/barista-components/radial-chart/README.md

@@ -52,14 +52,14 @@ You can specify the position of the radial chart by adjusting the value of the
 
 ## DtRadialChartSeries inputs
 
-| Name            | Type      | Default                             | Description                                                      |
-| --------------- | --------- | ----------------------------------- | ---------------------------------------------------------------- |
-| `value`         | `number`  | -                                   | The series value (required).                                     |
-| `name`          | `string`  | -                                   | The series name (required).                                      |
-| `color`         | `string`  | `DT_CHART_COLOR_PALETTE_ORDERED[i]` | The color in which the series is displayed within the chart.     |
-| `valueRelative` | `number`  | -                                   | Numeric percentage value based on this node vs sum of top level. |
-| `selected`      | `boolean` | false                               | Marks series as selected.                                        |
-| `active`        | `boolean` | true                                | Marks series as activated through legend.                        |
+| Name              | Type      | Default                             | Description                                                      |
+| ----------------- | --------- | ----------------------------------- | ---------------------------------------------------------------- |
+| `value`           | `number`  | -                                   | The series value (required).                                     |
+| `name`            | `string`  | -                                   | The series name (required).                                      |
+| `color`           | `string`  | `DT_CHART_COLOR_PALETTE_ORDERED[i]` | The color in which the series is displayed within the chart.     |
+| `valuePercentage` | `number`  | -                                   | Numeric percentage value based on this node vs sum of top level. |
+| `selected`        | `boolean` | false                               | Marks series as selected.                                        |
+| `active`          | `boolean` | true                                | Marks series as activated through legend.                        |
 
 #### Outputs
 

libs/barista-components/radial-chart/src/radial-chart.html

@@ -31,7 +31,7 @@
       <strong>{{
         valueDisplayMode === 'absolute'
           ? series.value
-          : (series.valueRelative * 100 | dtPercent)
+          : (series.valuePercentage | dtPercent: precision)
       }}</strong>
       {{ series.name }}
     </dt-legend-item>

libs/barista-components/radial-chart/src/radial-chart.ts

@@ -51,6 +51,7 @@ import { DtRadialChartRenderData } from './utils/radial-chart-interfaces';
 import {
   generatePathData,
   generatePieArcData,
+  getPercentages,
   getSum,
 } from './utils/radial-chart-utils';
 
@@ -124,6 +125,9 @@ export class DtRadialChart implements AfterContentInit, OnDestroy {
   /** Sets the display mode for the radial-chart values to either 'percent' or 'absolute'.  */
   @Input() valueDisplayMode: 'absolute' | 'percent' = 'absolute';
 
+  /** Sets the decimal precision for the percentage values */
+  @Input() precision: number = 1;
+
   /** Sets the display mode for the radial-chart values to either 'percent' or 'absolute'.  */
   @Input()
   get selectable(): boolean {
@@ -276,13 +280,25 @@ export class DtRadialChart implements AfterContentInit, OnDestroy {
       const arcs = generatePieArcData(seriesValues, this.maxValue);
       this._totalSeriesValue = getSum(seriesValues);
 
+      const max =
+        this.maxValue && this.maxValue >= this._totalSeriesValue
+          ? this.maxValue
+          : this._totalSeriesValue;
+
+      const seriesPercentages = getPercentages(
+        seriesValues,
+        max,
+        this.precision,
+      );
+
       this._renderData = this._radialChartSeries.map((series, i) => {
         const colorIdx = i % DT_CHART_COLOR_PALETTE_ORDERED.length;
         return this._getSeriesRenderData(
           series,
           arcs[i],
           DT_CHART_COLOR_PALETTE_ORDERED[colorIdx],
-          this._totalSeriesValue,
+          max,
+          seriesPercentages[i],
         );
       });
 
@@ -304,7 +320,8 @@ export class DtRadialChart implements AfterContentInit, OnDestroy {
     series: DtRadialChartSeries,
     arcData: PieArcDatum<number>,
     chartColor: string,
-    totalSeriesValue: number,
+    max: number,
+    valuePercentage: number,
   ): DtRadialChartRenderData {
     const path =
       generatePathData(
@@ -333,11 +350,6 @@ export class DtRadialChart implements AfterContentInit, OnDestroy {
     // The series' color overrides the given color from the chart color palette.
     const color = series.color ? series.color : chartColor;
 
-    const max =
-      this.maxValue && this.maxValue >= totalSeriesValue
-        ? this.maxValue
-        : totalSeriesValue;
-
     // The path's aria label consists of the series' name, value and the chart's max-value
     const ariaLabel = `${series.name}: ${series.value} of ${max}`;
 
@@ -349,7 +361,7 @@ export class DtRadialChart implements AfterContentInit, OnDestroy {
       ariaLabel,
       name: series.name,
       value: series.value,
-      valueRelative: series.value / max,
+      valuePercentage,
       origin: series,
     };
   }

libs/barista-components/radial-chart/src/utils/radial-chart-interfaces.ts

@@ -29,7 +29,7 @@ export interface DtRadialChartRenderData {
   selectionPath: string;
   color: string;
   value: number;
-  valueRelative: number;
+  valuePercentage: number;
   ariaLabel: string;
   origin: DtRadialChartSeries;
 }

libs/barista-components/radial-chart/src/utils/radial-chart-utils.spec.ts

@@ -15,7 +15,13 @@
  */
 
 // tslint:disable: no-magic-numbers
-import { getSum, getEndAngle, generatePieArcData } from './radial-chart-utils';
+import {
+  getSum,
+  getEndAngle,
+  generatePieArcData,
+  getPercentages,
+  getRoundedPercentages,
+} from './radial-chart-utils';
 
 const FULL_CIRCLE = Math.PI * 2;
 
@@ -92,6 +98,30 @@ describe('DtRadialChart util functions', () => {
       expect(arcData[2].value).toBe(35);
     });
   });
+
+  describe('getPercentages', () => {
+    it('should return percentages with precision 2 when total is higher than the sum of values', () => {
+      const values = [10, 21, 8];
+      const total = 75;
+      const percentages = getPercentages(values, total, 2);
+      expect(percentages).toEqual([13.33, 28, 10.67]);
+    });
+
+    it('should return percentages with precision 2 when total is equal to sum of values', () => {
+      const values = [10, 21, 8];
+      const total = 39;
+      const percentages = getPercentages(values, total, 2);
+      expect(percentages).toEqual([25.64, 53.85, 20.51]);
+    });
+  });
+
+  describe('getRoundedPercentages', () => {
+    it('should return rounded percentages with precision 0', () => {
+      const values = [10, 21, 8];
+      const percentages = getRoundedPercentages(values, 0);
+      expect(percentages).toEqual([26, 54, 20]);
+    });
+  });
 });
 
 // tslint:enable: no-magic-numbers

libs/barista-components/radial-chart/src/utils/radial-chart-utils.ts

@@ -85,3 +85,63 @@ export function generatePathData(
     endAngle,
   });
 }
+
+/**
+ * Returns an array of percentages with decimal precision.
+ */
+export function getPercentages(
+  values: number[],
+  total: number,
+  precision: number,
+): number[] {
+  const sumAllValues = getSum(values);
+  if (total > sumAllValues) {
+    return values.map((value) => +((value / total) * 100).toFixed(precision));
+  }
+
+  return getRoundedPercentages(values, precision);
+}
+
+/**
+ * Returns an array of rounded percentages so that the sum of
+ * all values is equal to 100.
+ */
+export function getRoundedPercentages(
+  values: number[],
+  precision: number,
+): number[] {
+  const sumAllValues = getSum(values);
+  const precisionPower = Math.pow(10, precision);
+
+  // Temp object to keep the percentage with precision decimals and initial position.
+  const tempPercentages = values.map((value, i) => ({
+    percentage: (value / sumAllValues) * 100 * precisionPower,
+    position: i,
+  }));
+
+  // Difference between the total and the sum of the rounded values.
+  const diff =
+    Math.pow(10, precision + 2) -
+    tempPercentages.reduce((sum, x) => sum + Math.floor(x.percentage), 0);
+
+  // Sorting the items in decimal decreasing order.
+  tempPercentages.sort(
+    (x, y) =>
+      Math.floor(x.percentage) -
+      x.percentage -
+      (Math.floor(y.percentage) - y.percentage),
+  );
+
+  // Distributing the difference to the first items.
+  const distributedPercentages = tempPercentages.map((x, i) => ({
+    percentage:
+      i < diff ? Math.floor(x.percentage) + 1 : Math.floor(x.percentage),
+    position: x.position,
+  }));
+
+  // Sorting the items in the initial position.
+  distributedPercentages.sort((x, y) => x.position - y.position);
+
+  // Returning the array of percentages taking into account the precision.
+  return distributedPercentages.map((x) => x.percentage / precisionPower);
+}