fix: tickline 不生效 & theme 不生效 (#1677)

* fix: tickline 不生效 * fix:theme 不生效 Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
antvis · Dec 12, 2022 · 49e7f78 · 49e7f78
1 parent fc5d635
commit 49e7f78
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 2 deletions.
diff --git a/packages/f2/src/chart/index.ts b/packages/f2/src/chart/index.ts
@@ -61,9 +61,10 @@ class Chart<TRecord extends DataRecord = DataRecord> extends Component<
     super(props);
 
     const { theme, px2hd } = context;
+
     // hack 处理，设置默认的主题样式
     // 目前没想到其他更合适的方式，只能先这样处理
-    deepMix(theme, px2hd(Theme));
+    context.theme = deepMix(px2hd(Theme), theme);
 
     const { data } = props;
 

diff --git a/packages/f2/src/theme.ts b/packages/f2/src/theme.ts
@@ -8,6 +8,9 @@ const axis = {
     fill: '#E8E8E8',
     radius: '10px',
   },
+  tickLine: {
+    stroke: '#E8E8E8',
+  },
   label: {
     fill: '#808080',
     fontSize: '20px',

diff --git a/...f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-轴-刻度线-1-snap.png b/...f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-轴-刻度线-1-snap.png
diff --git a/packages/f2/test/components/axis/axis.test.tsx b/packages/f2/test/components/axis/axis.test.tsx
@@ -259,6 +259,36 @@ describe('Axis 轴', () => {
     expect(context).toMatchImageSnapshot();
   });
 
+  it('刻度线', async () => {
+    const context = createContext('tickLine');
+
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={valuationData}>
+          <Axis field="index" />
+          <Axis
+            field="value"
+            formatter={(v) => {
+              return v.toFixed(2) + '%';
+            }}
+            style={{
+              tickLine: {
+                length: 3,
+              },
+            }}
+          />
+          <Line x="index" y="value" color="#2FC25B" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('label 回调参数', async () => {
     const context = createContext('label 回调参数');
     const labelMockCallback = jest.fn();

diff --git a/packages/f2/test/components/guide/guide.test.tsx b/packages/f2/test/components/guide/guide.test.tsx
@@ -126,7 +126,7 @@ describe('Guide ', () => {
     // 10个图例 和1条线
     expect(container.children[0].children.length).toBe(11);
 
-    await delay(250);
+    await delay(500);
     expect(context).toMatchImageSnapshot();
   });