fix(mark): change liquid text name (#5927)

* fix(mark): change liquid text name * fix(mark): change liquid text name --------- Co-authored-by: wb-xcf804241 <[email protected]>
antvis · Dec 13, 2023 · 9574d62 · 9574d62
1 parent 6e4632b
commit 9574d62
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 4 deletions.
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
@@ -293,6 +293,7 @@ export { liquidPin } from './liquid-pin';
 export { liquidRect } from './liquid-rect';
 export { liquidCircle } from './liquid-circle';
 export { liquidDiamond } from './liquid-diamond';
+export { liquidContent } from './liquid-content';
 export { liquidTriangle } from './liquid-triangle';
 export { liquidCustomShape } from './liquid-custom-shape';
 export { alphabetIntervalAxisOptions } from './alphabet-interval-axis-options';

diff --git a/__tests__/plots/static/liquid-content.ts b/__tests__/plots/static/liquid-content.ts
@@ -0,0 +1,18 @@
+import { G2Spec } from '../../../src';
+
+export function liquidContent(): G2Spec {
+  return {
+    type: 'liquid',
+    data: 0.581,
+    style: {
+      contentFill: '#000',
+      contentText: 'center text',
+      contentStroke: '#fff',
+      contentLineWidth: 2,
+      outlineBorder: 4,
+      outlineDistance: 8,
+      waveLength: 128,
+    },
+  };
+}
+liquidContent.skip = true;
diff --git a/__tests__/plots/static/liquid-pin.ts b/__tests__/plots/static/liquid-pin.ts
@@ -6,7 +6,7 @@ export function liquidPin(): G2Spec {
     data: 0.7,
     style: {
       shape: 'pin',
-      textFill: '#fff',
+      contentFill: '#fff',
       outlineBorder: 4,
       outlineDistance: 8,
       waveLength: 128,

diff --git a/site/examples/general/Liquid/demo/liquid-content.ts b/site/examples/general/Liquid/demo/liquid-content.ts
@@ -0,0 +1,18 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart.liquid().data(0.581).style({
+  contentFill: '#000',
+  contentText: 'center text',
+  contentStroke: '#fff',
+  contentLineWidth: 2,
+  outlineBorder: 4,
+  outlineDistance: 8,
+  waveLength: 128,
+});
+
+chart.render();
diff --git a/site/examples/general/Liquid/demo/liquid-pin.ts b/site/examples/general/Liquid/demo/liquid-pin.ts
@@ -7,7 +7,7 @@ const chart = new Chart({
 
 chart.liquid().data(0.581).style({
   shape: 'pin', // Build-in shapes: rect, circle, pin, diamond, triangle.
-  textFill: '#fff',
+  contentFill: '#fff',
   outlineBorder: 4,
   outlineDistance: 8,
   waveLength: 128,

diff --git a/site/examples/general/Liquid/demo/meta.json b/site/examples/general/Liquid/demo/meta.json
@@ -12,6 +12,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*cHArRaizyBsAAAAAAAAAAAAADo2bAQ/original"
     },
+    {
+      "filename": "liquid-content.ts",
+      "title": {
+        "zh": "水波图 文本内容",
+        "en": "Content Text Liquid Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*5ZT3R4yo_3kAAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "liquid-pin.ts",
       "title": {

diff --git a/src/mark/liquid.ts b/src/mark/liquid.ts
@@ -64,7 +64,11 @@ export const Liquid: CC<LiquidOptions> = (options) => {
 
   const newData = [{ percent, type: 'liquid' }];
 
-  const textStyle = subObject(style, 'text');
+  const contentStyle = {
+    ...subObject(style, 'text'),
+    ...subObject(style, 'content'),
+  };
+
   const outline = subObject(style, 'outline');
   const wave = subObject(style, 'wave');
   const background = subObject(style, 'background');
@@ -91,7 +95,7 @@ export const Liquid: CC<LiquidOptions> = (options) => {
     deepMix({}, DEFAULT_TEXT_OPTIONS, {
       style: {
         text: `${prettyNumber(percent * 100)} %`,
-        ...textStyle,
+        ...contentStyle,
       },
       animate,
     }),