From c9a72efbb365f34ef704febdc70d119b514b7a39 Mon Sep 17 00:00:00 2001
From: xuying <33517362+tangying1027@users.noreply.github.com>
Date: Thu, 19 Sep 2024 17:18:38 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E8=A1=A5=E5=85=85=E5=AE=98=E7=BD=91?=
 =?UTF-8?q?=E9=98=B6=E6=A2=AF=E5=9B=BEdemo=20(#2000)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 补充官网阶梯图demo

* chore: 修复曲线单测

---------

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
---
 .../f2/test/components/line/line.test.tsx     | 38 ++++++++++
 site/.dumi/tsconfig.json                      |  6 ++
 site/examples/line/line/demo/meta.json        |  5 ++
 site/examples/line/line/demo/step.jsx         | 70 +++++++++++++++++++
 4 files changed, 119 insertions(+)
 create mode 100644 site/.dumi/tsconfig.json
 create mode 100644 site/examples/line/line/demo/step.jsx

diff --git a/packages/f2/test/components/line/line.test.tsx b/packages/f2/test/components/line/line.test.tsx
index 2009f189c..fa66e8c6d 100644
--- a/packages/f2/test/components/line/line.test.tsx
+++ b/packages/f2/test/components/line/line.test.tsx
@@ -383,6 +383,44 @@ describe('折线图', () => {
     });
 
     it('曲线', async () => {
+      const data = [
+        {
+          time: '2016-08-08 00:00:00',
+          tem: 10,
+        },
+        {
+          time: '2016-08-08 00:10:00',
+          tem: 22,
+        },
+        {
+          time: '2016-08-08 00:30:00',
+          tem: 20,
+        },
+        {
+          time: '2016-08-09 00:35:00',
+          tem: 26,
+        },
+        {
+          time: '2016-08-09 01:00:00',
+          tem: 20,
+        },
+        {
+          time: '2016-08-09 01:20:00',
+          tem: 26,
+        },
+        {
+          time: '2016-08-10 01:40:00',
+          tem: 28,
+        },
+        {
+          time: '2016-08-10 02:00:00',
+          tem: 20,
+        },
+        {
+          time: '2016-08-10 02:20:00',
+          tem: 18,
+        },
+      ];
       const context = createContext('曲线');
       const chartRef = { current: null };
       const lineRef = { current: null };
diff --git a/site/.dumi/tsconfig.json b/site/.dumi/tsconfig.json
new file mode 100644
index 000000000..79711a82b
--- /dev/null
+++ b/site/.dumi/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "**/*"
+  ]
+}
\ No newline at end of file
diff --git a/site/examples/line/line/demo/meta.json b/site/examples/line/line/demo/meta.json
index fdf41b5d2..ab4655a52 100644
--- a/site/examples/line/line/demo/meta.json
+++ b/site/examples/line/line/demo/meta.json
@@ -19,6 +19,11 @@
       "title": "曲线",
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_4f0ff1/afts/img/A*LU4qRJrOSQkAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "step.jsx",
+      "title": "阶梯",
+      "screenshot": "https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/nnBatWjRpi6HtWmjwdPd4/line_test_tsx_zhexiantu_jichuzhexiantu_jietitu_1_snap.png"
+    },
     {
       "filename": "pan.jsx",
       "title": "折线图平移",
diff --git a/site/examples/line/line/demo/step.jsx b/site/examples/line/line/demo/step.jsx
new file mode 100644
index 000000000..f3f72a9e9
--- /dev/null
+++ b/site/examples/line/line/demo/step.jsx
@@ -0,0 +1,70 @@
+import { Axis, Canvas, Chart, Line } from '@antv/f2';
+
+const data = [];
+
+[
+  {
+    time: '2016-08-01',
+    tem: 15,
+    type: 'start',
+  },
+  {
+    time: '2016-08-02',
+    tem: 22,
+    type: 'start',
+  },
+  {
+    time: '2016-08-03',
+    tem: 15,
+    type: 'start',
+  },
+  {
+    time: '2016-08-04',
+    tem: 26,
+    type: 'start',
+  },
+  {
+    time: '2016-08-05',
+    tem: 20,
+    type: 'start',
+  },
+  {
+    time: '2016-08-06',
+    tem: 26,
+    type: 'start',
+  },
+].map((d) => {
+  data.push(d);
+  data.push({ ...d, tem: d.tem + 15, type: 'middle' });
+  data.push({ ...d, tem: d.tem + 30, type: 'end' });
+});
+
+const context = document.getElementById('container').getContext('2d');
+const { props } = (
+  <Canvas context={context}>
+    <Chart data={data}>
+      <Axis
+        field="time"
+        tickCount={2}
+        style={{
+          label: {
+            align: 'between',
+          },
+        }}
+      />
+      <Axis field="tem" tickCount={5} max={60} />
+      <Line
+        x="time"
+        y="tem"
+        color="type"
+        shape={{
+          field: 'type',
+          range: ['step-start', 'step-middle', 'step-end'],
+        }}
+      />
+    </Chart>
+  </Canvas>
+);
+
+const canvas = new Canvas(props);
+canvas.render();