feat: 对比值无波动时也显示灰色 (#2351)

* feat: 趋势分析表无波动的字体不用红绿色显示 * refactor: 判0逻辑合并到isZeroOrEmptyValue * feat: 对比值与原始值相同时也使用灰色 * fix: 单测断言修复 --------- Co-authored-by: huiyu.zjt <[email protected]>
antvis · Sep 14, 2023 · 9f8a6fe · 9f8a6fe
1 parent 01648f5
commit 9f8a6fe
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/packages/s2-core/__tests__/unit/utils/text-spec.ts b/packages/s2-core/__tests__/unit/utils/text-spec.ts
@@ -8,6 +8,7 @@ import {
   getEmptyPlaceholder,
   getContentAreaForMultiData,
   isZeroOrEmptyValue,
+  isUnchangedValue,
 } from '@/utils/text';
 
 const isHD = window.devicePixelRatio >= 2;
@@ -306,3 +307,37 @@ describe('isZeroOrEmptyValue', () => {
     expect(isZeroOrEmptyValue(undefined)).toBe(true);
   });
 });
+
+describe('isUnchangedValue', () => {
+  test('should return true for zero values', () => {
+    expect(isUnchangedValue(0, 123)).toBeTruthy();
+    expect(isUnchangedValue('0', 'abc')).toBeTruthy();
+  });
+
+  test('should return true for empty values', () => {
+    expect(isUnchangedValue('', 'abc')).toBeTruthy();
+    expect(isUnchangedValue(null, 123)).toBeTruthy();
+    expect(isUnchangedValue(undefined, 123)).toBeTruthy();
+  });
+
+  test('should return true for unchanged values', () => {
+    expect(isUnchangedValue('test', 'test')).toBeTruthy();
+    expect(isUnchangedValue(123, 123)).toBeTruthy();
+  });
+
+  test('should return true for numberless changed values', () => {
+    expect(isUnchangedValue('test', 'abc')).toBeTruthy();
+  });
+
+  test('should return false for numeric changed values', () => {
+    expect(isUnchangedValue(123, 456)).toBeFalsy();
+  });
+
+  test('should return true for negative zero', () => {
+    expect(isUnchangedValue(-0, 123)).toBeTruthy();
+  });
+
+  test('should return false for negative values', () => {
+    expect(isUnchangedValue(-123, 123)).toBeFalsy();
+  });
+});
diff --git a/packages/s2-core/src/utils/text.ts b/packages/s2-core/src/utils/text.ts
@@ -311,6 +311,19 @@ export const isZeroOrEmptyValue = (value: number | string): boolean => {
   );
 };
 
+/**
+ * Determines whether the data is actually equal to 0 or empty or nil or equals to compareValue
+ * example: "0.00%" => true
+ * @param value
+ * @param compareValue
+ */
+export const isUnchangedValue = (
+  value: number | string,
+  compareValue: number | string,
+): boolean => {
+  return isZeroOrEmptyValue(value) || value === compareValue;
+};
+
 /**
  * 根据单元格对齐方式计算文本的 x 坐标
  * @param x 单元格的 x 坐标

diff --git a/...ages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx b/...ages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx
@@ -5,7 +5,7 @@ import {
   type MultiData,
   type SimpleDataItem,
   type ViewMeta,
-  isZeroOrEmptyValue,
+  isUnchangedValue,
 } from '@antv/s2';
 import cls from 'classnames';
 import { first, get, isEmpty, isFunction, isNil } from 'lodash';
@@ -69,7 +69,10 @@ export const StrategySheetDataTooltip: React.FC<CustomTooltipProps> = ({
           <div className={tooltipCls('divider')} />
           <ul className={tooltipCls('derived-values')}>
             {derivedValues.map((derivedValue: SimpleDataItem, i) => {
-              const isUnchanged = isZeroOrEmptyValue(derivedValue);
+              const isUnchanged = isUnchangedValue(
+                derivedValue,
+                value as SimpleDataItem,
+              );
               const isUp =
                 !isUnchanged && isUpDataValue(derivedValue as string);
               const isDown = !isUnchanged && !isUp;