fix(strategysheet): 修复子弹图颜色显示错误 & 百分比精度问题 (#1588)

* fix(strategysheet): 修复子弹图颜色显示错误 * fix: 使用 NumberFormat 自适应浮点数
antvis · Jul 21, 2022 · 74210b0 · 74210b0
1 parent 0394efa
commit 74210b0
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 7 deletions.
diff --git a/packages/s2-core/__tests__/unit/utils/g-mini-charts-spec.ts b/packages/s2-core/__tests__/unit/utils/g-mini-charts-spec.ts
@@ -245,13 +245,60 @@ describe('MiniCharts Utils Tests', () => {
     expect(getBulletRangeColor(0.2, 0.2, rangeColors)).toEqual('green');
     expect(getBulletRangeColor(0.3, 0.5, rangeColors)).toEqual('yellow');
     expect(getBulletRangeColor(0.1, 0.9, rangeColors)).toEqual('red');
+    expect(getBulletRangeColor(-0.1386, 0.0137, rangeColors)).toEqual('red');
+    expect(getBulletRangeColor(-0.2, -0.2, rangeColors)).toEqual('red');
+    expect(getBulletRangeColor(0.1, -0.2, rangeColors)).toEqual('green');
+    expect(getBulletRangeColor(0.09799999, 0.19788888, rangeColors)).toEqual(
+      'green',
+    );
+    expect(getBulletRangeColor(0.09788888, 0.19788888, rangeColors)).toEqual(
+      'green',
+    );
+    expect(getBulletRangeColor('测试', '牛批', rangeColors)).toEqual('red');
+    expect(getBulletRangeColor('测试', 0.2, rangeColors)).toEqual('red');
+    expect(getBulletRangeColor(0.2, '牛批', rangeColors)).toEqual('red');
+
+    // toFixed(2) 四舍五入精度问题
+    expect(getBulletRangeColor(0.09775, 0.1978, rangeColors)).toEqual('yellow');
+    expect(getBulletRangeColor(0.09774, 0.1978, rangeColors)).toEqual('yellow');
+    expect(getBulletRangeColor(0.09774, 0.1974, rangeColors)).toEqual('green');
   });
 
   test('should transform ratio to percent', () => {
     expect(transformRatioToPercent(0.2)).toEqual('20%');
     expect(transformRatioToPercent('0.2')).toEqual('20%');
     expect(transformRatioToPercent('test')).toEqual('test');
+    expect(transformRatioToPercent('牛批')).toEqual('牛批');
     expect(transformRatioToPercent(0.02)).toEqual('2%');
     expect(transformRatioToPercent(0.02, 2)).toEqual('2.00%');
+    expect(transformRatioToPercent(-122.2)).toEqual('-12220%');
+    expect(transformRatioToPercent('-122.2')).toEqual('-12220%');
+    expect(transformRatioToPercent(-122.2, 2)).toEqual('-12220.00%');
+  });
+
+  test('should transform ratio to percent for auto adjust fraction digits', () => {
+    expect(transformRatioToPercent(0.09775)).toEqual('10%');
+    expect(transformRatioToPercent(-0.09775, { min: 2, max: 2 })).toEqual(
+      '-9.78%',
+    );
+    expect(transformRatioToPercent(0.09775, { min: 2, max: 2 })).toEqual(
+      '9.78%',
+    );
+    expect(transformRatioToPercent(0.09775, { min: 2, max: 3 })).toEqual(
+      '9.775%',
+    );
+    expect(transformRatioToPercent(0.09775, { min: 2, max: 4 })).toEqual(
+      '9.775%',
+    );
+    expect(transformRatioToPercent(0.0977599999, { min: 2, max: 5 })).toEqual(
+      '9.776%',
+    );
+    expect(transformRatioToPercent(-0.0977599999, { min: 2, max: 5 })).toEqual(
+      '-9.776%',
+    );
+    expect(transformRatioToPercent(0.09775, { min: 0, max: 0 })).toEqual('10%');
+    expect(transformRatioToPercent(0.09, { min: 0, max: 2 })).toEqual('9%');
+    expect(transformRatioToPercent(0.09)).toEqual('9%');
+    expect(transformRatioToPercent(0.09, 2)).toEqual('9.00%');
   });
 });
diff --git a/packages/s2-core/src/utils/g-mini-charts.ts b/packages/s2-core/src/utils/g-mini-charts.ts
@@ -21,6 +21,11 @@ import {
 import { CellTypes, MiniChartTypes } from '../common/constant';
 import { getEllipsisText, measureTextWidth } from './text';
 
+interface FractionDigitsOptions {
+  min: number;
+  max: number;
+}
+
 /**
  *  坐标转换
  */
@@ -173,6 +178,10 @@ export const getBulletRangeColor = (
 ) => {
   const delta = Number(target) - Number(measure);
 
+  if (Number.isNaN(delta) || Number(measure) < 0) {
+    return rangeColors.bad;
+  }
+
   if (delta <= 0.1) {
     return rangeColors.good;
   }
@@ -187,13 +196,29 @@ export const getBulletRangeColor = (
 // 比率转百分比, 简单解决计算精度问题
 export const transformRatioToPercent = (
   ratio: number | string,
-  fractionDigits = 0,
+  fractionDigits: FractionDigitsOptions | number = { min: 0, max: 0 },
 ) => {
   const value = Number(ratio);
   if (Number.isNaN(value)) {
     return ratio;
   }
-  return `${(value * 100).toFixed(fractionDigits)}%`;
+
+  const minimumFractionDigits =
+    (fractionDigits as FractionDigitsOptions)?.min ??
+    (fractionDigits as number);
+  const maximumFractionDigits =
+    (fractionDigits as FractionDigitsOptions)?.max ??
+    (fractionDigits as number);
+
+  const formatter = new Intl.NumberFormat('en-US', {
+    minimumFractionDigits,
+    maximumFractionDigits,
+    // 禁用自动分组: "12220%" => "12,220%"
+    useGrouping: false,
+    style: 'percent',
+  });
+
+  return formatter.format(value);
 };
 
 /**

diff --git a/packages/s2-react/__tests__/data/strategy-data.ts b/packages/s2-react/__tests__/data/strategy-data.ts
@@ -50,12 +50,12 @@ const getKPIMockData = () => {
     },
     'measure-e': {
       originalValues: {
-        measure: 0.68,
-        target: 0.8,
+        measure: 0.09775,
+        target: 0.1978,
       },
       values: {
-        measure: '0.68',
-        target: '0.8',
+        measure: 0.09775,
+        target: 0.1978,
       },
     },
     'measure-f': {

diff --git a/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/index-spec.tsx
@@ -188,7 +188,7 @@ describe('<SheetComponent/> Tests', () => {
         '-82.61%',
         '1073.92%',
         '50.00%',
-        '68.00%',
+        '9.78%',
       ]);
     });
   });