fix: add default data formatter to ProgressViewer (#552)

Author: krosy1337

src/components/ProgressViewer/ProgressViewer.tsx

@@ -1,6 +1,8 @@
 import cn from 'bem-cn-lite';
 
 import type {ValueOf} from '../../types/common';
+import {isNumeric} from '../../utils/utils';
+import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
 
 import './ProgressViewer.scss';
 
@@ -18,6 +20,14 @@ export const PROGRESS_VIEWER_SIZE_IDS = {
 
 type ProgressViewerSize = ValueOf<typeof PROGRESS_VIEWER_SIZE_IDS>;
 
+const formatValue = (value?: number) => {
+    return formatNumber(roundToPrecision(Number(value), 2));
+};
+
+const defaultFormatValues = (value?: number, total?: number) => {
+    return [formatValue(value), formatValue(total)];
+};
+
 /*
 
 Props description:
@@ -47,7 +57,7 @@ interface ProgressViewerProps {
 export function ProgressViewer({
     value,
     capacity,
-    formatValues,
+    formatValues = defaultFormatValues,
     percents,
     className,
     size = PROGRESS_VIEWER_SIZE_IDS.xs,
@@ -58,15 +68,15 @@ export function ProgressViewer({
 }: ProgressViewerProps) {
     let fillWidth = Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100);
     fillWidth = fillWidth > 100 ? 100 : fillWidth;
-    let valueText: number | string | undefined = Math.round(Number(value)),
+    let valueText: number | string | undefined = value,
         capacityText: number | string | undefined = capacity,
         divider = '/';
-    if (formatValues) {
-        [valueText, capacityText] = formatValues(Number(value), Number(capacity));
-    } else if (percents) {
+    if (percents) {
         valueText = fillWidth + '%';
         capacityText = '';
         divider = '';
+    } else if (formatValues) {
+        [valueText, capacityText] = formatValues(Number(value), Number(capacity));
     }
 
     let bg = inverseColorize ? 'scarlet' : 'apple';
@@ -85,14 +95,14 @@ export function ProgressViewer({
     const text = fillWidth > 60 ? 'contrast0' : 'contrast70';
 
     const renderContent = () => {
-        if (capacityText) {
+        if (isNumeric(capacity)) {
             return `${valueText} ${divider} ${capacityText}`;
         }
 
         return valueText;
     };
 
-    if (!isNaN(Number(value))) {
+    if (isNumeric(value)) {
         return (
             <div className={b({size}, className)}>
                 <div className={b('line', {bg})} style={lineStyle}></div>