fix(liquid): fix liquid precision (#5788)

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();

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;

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,

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));
-}

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));
+}