feat: 雷达图、漏斗图 demo 补充 (#1237)

* docs: 面积图、折线图 4.0 demo * chore: fix test error * docs: add radar chart demo * feat: Interval add style prop * docs: add pyramid chart demo * docs: add funnel chart demo Co-authored-by: buli <junyu.junyujiang@alibaba-inc.com>
antvis · Nov 8, 2021 · 9264e65 · 9264e65
1 parent 5357cf6
commit 9264e65
Show file tree

Hide file tree

Showing 10 changed files with 231 additions and 335 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -7,6 +7,7 @@ module.exports = {
     'packages/*/src/**/*.{ts,tsx,js}',
     '!**/node_modules/**',
   ],
+  modulePathIgnorePatterns: ["packages/*/dist"],
   testPathIgnorePatterns: [],
   testRegex: '/test/.*\\.test\\.tsx?$',
   transform: {

diff --git a/packages/f2/src/components/interval/view/polygonView.tsx b/packages/f2/src/components/interval/view/polygonView.tsx
@@ -4,7 +4,7 @@ import { convertToPoints } from '../util';
 
 // 金字塔图和漏斗图的View
 export default (props: any) => {
-  const { records, shape } = props;
+  const { records, shape, style } = props;
 
   // 是否倒置
   const overturn = false;
@@ -43,6 +43,7 @@ export default (props: any) => {
                     points,
                     fill: color,
                     ...shape,
+                    ...style,
                   }}
                 />
               );

diff --git a/packages/f2/src/components/interval/withInterval.tsx b/packages/f2/src/components/interval/withInterval.tsx
@@ -77,13 +77,13 @@ export default Views => {
 
     render() {
       const { props } = this;
-      const { coord, shape = 'rect' } = props;
+      const { coord, shape = 'rect', style } = props;
       const View = Views[shape];
 
       if (!View) return null;
 
       const records = this.mapping();
-      return <View coord={coord} records={records} shape={shape} />;
+      return <View coord={coord} records={records} shape={shape} style={style} />;
     }
   };
 };
diff --git a/packages/site/examples/funnel/basic/demo/basic.js b/packages/site/examples/funnel/basic/demo/basic.js
@@ -1,4 +1,6 @@
-import F2 from '@antv/f2';
+import { jsx, Canvas, Chart, Interval, Legend } from '@antv/f2';
+
+const context = document.getElementById('container').getContext('2d');
 
 const data = [
   { action: '浏览网站', pv: 50000, percent: 1 },
@@ -8,40 +10,36 @@ const data = [
   { action: '完成交易', pv: 8000, percent: 0.16 }
 ];
 
-const chart = new F2.Chart({
-  id: 'container',
-  pixelRatio: window.devicePixelRatio,
-  padding: [ 60, 80, 15, 15 ]
-});
-
-chart.source(data);
-chart.axis(false);
-chart.coord({
-  transposed: true,
-  // 旋转向下
-  scale: [ 1, -1 ]
-});
-chart.legend(true);
-chart.intervalLabel({
-  offsetX: 10,
-  label: (data, color) => {
-    return {
-      text: data.action,
-      fill: color
-    };
-  },
-  guide: data => {
-    return {
-      text: (data.percent * 100).toFixed(0) + '%',
-      fill: '#fff'
-    };
-  }
-});
-
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true,
+      }}
+      scale={{
+        percent: {
+          min: 0,
+        },
+        action: {
+          range: [0, 1],
+        },
+      }}
+    >
+      <Interval
+        x="action"
+        y="percent"
+        adjust="symmetric"
+        shape="funnel"
+        color={{
+          field: 'action',
+          range: ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'],
+        }}
+      />
+      <Legend />
+    </Chart>
+  </Canvas>
+);
 
-chart.interval()
-  .position('action*percent')
-  .color('action', [ '#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF' ])
-  .adjust('symmetric')
-  .shape('funnel');
-chart.render();
+const canvas = new Canvas(props);
+canvas.render();
diff --git a/packages/site/examples/funnel/basic/demo/stroke.js b/packages/site/examples/funnel/basic/demo/stroke.js
@@ -1,4 +1,6 @@
-import F2 from '@antv/f2';
+import { jsx, Canvas, Chart, Interval, Legend } from '@antv/f2';
+
+const context = document.getElementById('container').getContext('2d');
 
 const data = [
   { action: '浏览网站', pv: 50000, percent: 1 },
@@ -8,43 +10,40 @@ const data = [
   { action: '完成交易', pv: 8000, percent: 0.16 }
 ];
 
-const chart = new F2.Chart({
-  id: 'container',
-  pixelRatio: window.devicePixelRatio,
-  padding: [ 60, 80, 15, 15 ]
-});
-
-chart.source(data);
-chart.axis(false);
-chart.coord({
-  transposed: true,
-  scale: [ 1, -1 ]
-});
-chart.legend(true);
-chart.intervalLabel({
-  offsetX: 10,
-  label: (data, color) => {
-    return {
-      text: data.action,
-      fill: color
-    };
-  },
-  guide: data => {
-    return {
-      text: (data.percent * 100).toFixed(0) + '%',
-      fill: '#fff'
-    };
-  }
-});
-
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true,
+      }}
+      scale={{
+        percent: {
+          min: 0,
+        },
+        action: {
+          range: [0, 1],
+        },
+      }}
+    >
+      <Interval
+        x="action"
+        y="percent"
+        adjust="symmetric"
+        shape="funnel"
+        color={{
+          field: 'action',
+          range: ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'],
+        }}
+        style={{
+          stroke: '#fff',
+          lineWidth: 2,
+        }}
+      />
+      <Legend />
+    </Chart>
+  </Canvas>
+);
 
-chart.interval()
-  .position('action*percent')
-  .color('action', [ '#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF' ])
-  .adjust('symmetric')
-  .style({
-    lineWidth: 2,
-    stroke: '#fff'
-  })
-  .shape('funnel');
-chart.render();
+const canvas = new Canvas(props);
+canvas.render();
diff --git a/packages/site/examples/funnel/pyramid/demo/basic.js b/packages/site/examples/funnel/pyramid/demo/basic.js
@@ -1,4 +1,6 @@
-import F2 from '@antv/f2';
+import { jsx, Canvas, Chart, Interval, Legend } from '@antv/f2';
+
+const context = document.getElementById('container').getContext('2d');
 
 const data = [
   { action: '浏览网站', pv: 50000, percent: 1 },
@@ -8,37 +10,37 @@ const data = [
   { action: '完成交易', pv: 8000, percent: 0.16 }
 ];
 
-const chart = new F2.Chart({
-  id: 'container',
-  pixelRatio: window.devicePixelRatio,
-  padding: [ 60, 80, 15, 15 ]
-});
 
-chart.source(data);
-chart.axis(false);
-chart.coord({
-  transposed: true
-});
-chart.legend(true);
-chart.intervalLabel({
-  offsetX: 10,
-  label: (data, color) => {
-    return {
-      text: data.action,
-      fill: color
-    };
-  },
-  guide: data => {
-    return {
-      text: (data.percent * 100).toFixed(0) + '%',
-      fill: '#fff'
-    };
-  }
-});
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true,
+      }}
+      scale={{
+        percent: {
+          min: 0,
+        },
+        action: {
+          range: [0, 1],
+        },
+      }}
+    >
+      <Interval
+        x="action"
+        y="percent"
+        adjust="symmetric"
+        shape="pyramid"
+        color={{
+          field: 'action',
+          range: ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'],
+        }}
+      />
+      <Legend />
+    </Chart>
+  </Canvas>
+);
 
-chart.interval()
-  .position('action*percent')
-  .color('action', [ '#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF' ])
-  .adjust('symmetric')
-  .shape('pyramid');
-chart.render();
+const canvas = new Canvas(props);
+canvas.render();
diff --git a/packages/site/examples/funnel/pyramid/demo/scale.js b/packages/site/examples/funnel/pyramid/demo/scale.js
@@ -1,4 +1,6 @@
-import F2 from '@antv/f2';
+import { jsx, Canvas, Chart, Interval, Legend } from '@antv/f2';
+
+const context = document.getElementById('container').getContext('2d');
 
 const data = [
   { action: '浏览网站', pv: 50000, percent: 1 },
@@ -8,42 +10,37 @@ const data = [
   { action: '完成交易', pv: 8000, percent: 0.16 }
 ];
 
-const chart = new F2.Chart({
-  id: 'container',
-  pixelRatio: window.devicePixelRatio,
-  padding: [ 60, 80, 15, 15 ]
-});
 
-chart.source(data);
-chart.axis(false);
-chart.coord({
-  transposed: true,
-  scale: [ 1, -1 ]
-});
-chart.legend(true);
-chart.intervalLabel({
-  offsetX: 10,
-  label: (data, color) => {
-    return {
-      text: data.action,
-      fill: color
-    };
-  },
-  guide: data => {
-    return {
-      text: (data.percent * 100).toFixed(0) + '%',
-      fill: '#fff'
-    };
-  }
-});
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true,
+      }}
+      scale={{
+        percent: {
+          min: 0,
+        },
+        action: {
+          range: [1, 0], // 倒置 range
+        },
+      }}
+    >
+      <Interval
+        x="action"
+        y="percent"
+        adjust="symmetric"
+        shape="pyramid"
+        color={{
+          field: 'action',
+          range: ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'],
+        }}
+      />
+      <Legend />
+    </Chart>
+  </Canvas>
+);
 
-chart.interval()
-  .position('action*percent')
-  .color('action', [ '#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF' ])
-  .adjust('symmetric')
-  .style({
-    lineWidth: 2,
-    stroke: '#fff'
-  })
-  .shape('pyramid');
-chart.render();
+const canvas = new Canvas(props);
+canvas.render();