From 07196d1874766419cc9ee14bf3bd8bd2d3378328 Mon Sep 17 00:00:00 2001
From: Frank William <65594180+ai-qing-hai@users.noreply.github.com>
Date: Mon, 13 Nov 2023 10:25:25 +0800
Subject: [PATCH] fix(liquid): fix liquid precision (#5788)

---
 site/examples/general/Liquid/demo/liquid-pin.ts | 17 +++++++----------
 src/component/axis.ts                           |  6 +-----
 src/mark/liquid.ts                              |  3 ++-
 src/runtime/component.ts                        |  5 +----
 src/utils/number.ts                             |  8 ++++++++
 5 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/site/examples/general/Liquid/demo/liquid-pin.ts b/site/examples/general/Liquid/demo/liquid-pin.ts
index e7b984d366..3907ff5674 100644
--- a/site/examples/general/Liquid/demo/liquid-pin.ts
+++ b/site/examples/general/Liquid/demo/liquid-pin.ts
@@ -5,15 +5,12 @@ const chart = new Chart({
   autoFit: true,
 });
 
-chart
-  .liquid()
-  .data(0.7)
-  .style({
-    shape: 'pin',    // Build-in shapes: rect, circle, pin, diamond, triangle.
-    textFill: '#fff',
-    outlineBorder: 4,
-    outlineDistance: 8,
-    waveLength: 128,
-  });
+chart.liquid().data(0.581).style({
+  shape: 'pin', // Build-in shapes: rect, circle, pin, diamond, triangle.
+  textFill: '#fff',
+  outlineBorder: 4,
+  outlineDistance: 8,
+  waveLength: 128,
+});
 
 chart.render();
diff --git a/src/component/axis.ts b/src/component/axis.ts
index 95c2524c6a..4ede9446c8 100644
--- a/src/component/axis.ts
+++ b/src/component/axis.ts
@@ -25,6 +25,7 @@ import {
   isTranspose,
   radiusOf,
 } from '../utils/coordinate';
+import { prettyNumber } from '../utils/number';
 import { capitalizeFirst } from '../utils/helper';
 import { adaptor, isVertical, titleContent } from './utils';
 
@@ -116,11 +117,6 @@ function ticksOf(
   return tickMethod(min, max, tickCount);
 }
 
-function prettyNumber(n: number) {
-  if (typeof n !== 'number') return n;
-  return Math.abs(n) < 1e-15 ? n : parseFloat(n.toFixed(15));
-}
-
 // Set inset for axis.
 function createInset(position, coordinate) {
   if (isPolar(coordinate)) return (d) => d;
diff --git a/src/mark/liquid.ts b/src/mark/liquid.ts
index d72939b690..38ccc2eac2 100644
--- a/src/mark/liquid.ts
+++ b/src/mark/liquid.ts
@@ -1,5 +1,6 @@
 import { deepMix, isNumber } from '@antv/util';
 import { subObject } from '../utils/helper';
+import { prettyNumber } from '../utils/number';
 import { CompositeMarkComponent as CC } from '../runtime';
 import { LiquidMark } from '../spec';
 import { LiquidShape } from '../shape';
@@ -89,7 +90,7 @@ export const Liquid: CC<LiquidOptions> = (options) => {
     }),
     deepMix({}, DEFAULT_TEXT_OPTIONS, {
       style: {
-        text: `${percent * 100} %`,
+        text: `${prettyNumber(percent * 100)} %`,
         ...textStyle,
       },
       animate,
diff --git a/src/runtime/component.ts b/src/runtime/component.ts
index 77b0f9271a..6583107689 100644
--- a/src/runtime/component.ts
+++ b/src/runtime/component.ts
@@ -13,6 +13,7 @@ import {
   type RadialOptions,
 } from '../coordinate';
 import { combine } from '../utils/array';
+import { prettyNumber } from '../utils/number';
 import { capitalizeFirst, defined, subObject } from '../utils/helper';
 import { LEGEND_INFER_STRATEGIES } from '../component/constant';
 import {
@@ -1115,7 +1116,3 @@ function normalizeLabel(d: string | DisplayObject): DisplayObject {
   if (d instanceof DisplayObject) return d;
   return new Text({ style: { text: `${d}` } });
 }
-
-function prettyNumber(n: number) {
-  return Math.abs(n) < 1e-15 ? n : parseFloat(n.toFixed(15));
-}
diff --git a/src/utils/number.ts b/src/utils/number.ts
index 786d2f57c9..3bfced8eef 100644
--- a/src/utils/number.ts
+++ b/src/utils/number.ts
@@ -4,3 +4,11 @@
 export function clamp(v: number, lower: number, upper: number): number {
   return Math.max(lower, Math.min(v, upper));
 }
+
+/**
+ * Precision conversion
+ */
+export function prettyNumber(n: number, precision = 10) {
+  if (typeof n !== 'number') return n;
+  return Math.abs(n) < 1e-15 ? n : parseFloat(n.toFixed(precision));
+}